클로드로 자기소개 웹페이지 만들기: 참고 이미지 한 장으로 UI 개선

결과와 배운 점로드(Claude)로 자기소개 웹페이지를 HTML 파일 하나로 만들고, 참고 이미지 한 장으로 디자인을 바꿨습니다. 2026년 10월 4일에 요청 두 번, 약 3분 걸린 작업입니다.

처음 만나는 사람에게 보여 줄 프로필 페이지, 흔히 말하는 개인 홈페이지를 코드 한 줄 직접 쓰지 않고 받았습니다. 첫 결과는 흰 카드 한 장이었고, 두 번째 요청 뒤에는 진한 파란색과 민트색이 들어간 2단 카드가 됐습니다.

클로드에 자기소개 페이지를 맡긴 이유

클로더즈 AI워크스페이스 멤버 이성학이에요. 음악과 영화를 좋아하는 총무/개발자이고, 이번 작업은 스터디 과제이자 공부 삼아 해 봤습니다. 웹페이지를 만드는 건 처음 해 보는 일이었습니다.

클로드에 제 컴퓨터의 과제 폴더를 연결해 두고 아래처럼 보냈습니다. 모델은 클로드 오푸스 5.5(Claude Opus 5.5)였습니다.

한 화면으로 된 간단한 개인 프로필 웹페이지를 만들어줘.
목적: 처음 나를 만나는 사람에게 나를 소개하는 페이지야.
이름 / 활동명: 이성학
한 줄 소개: 음악과 영화를 좋아하는 총무/개발자
관심 분야: 음악, 영화, ai활용 방법, 글쓰기
연락 버튼: 이메일 (이메일 주소)으로 연결해줘.
화면: 깔끔하고 심플한 카드 디자인으로 만들어줘.

같은 메시지 아래쪽에는 조건을 이어 적었습니다.

조건: PC와 모바일에서 모두 보기 편하게 만들어줘.
CSS와 필요한 JavaScript를 포함해 하나의 index.html 파일로 만들어줘.
외부 라이브러리 없이 브라우저에서 바로 열 수 있게 해줘.
내가 제공하지 않은 경력이나 연락처는 임의로 만들지 말아줘.
다운로드할 파일 또는 저장 가능한 전체 HTML 코드를 제공해줘.

첫 요청으로 받은 흰 카드 한 장

첫 요청에 돌아온 건 index.html 파일 하나였습니다. 화면 가운데 흰 카드에 초록색 원 안의 "이" 이니셜, 이름, 한 줄 소개, 관심 분야 네 개, 이메일 버튼이 들어 있었고 경력이나 다른 연락처는 없었습니다. 조건에 적은 대로 제가 준 정보만 들어간 겁니다.

▲ 클로드 첫 요청으로 만든 프로필 카드: 흰 카드에 초록 이니셜 원, 이름, 관심 분야 4개, 이메일 버튼

파일은 제가 고른 과제 폴더에 바로 저장됐고, 더블클릭하니 브라우저에서 열렸습니다. 클로드는 PC(가로 1280px)와 모바일(가로 375px) 크기로 페이지를 직접 열어 보고, 두 경우 모두 스크롤 없이 한 화면에 들어간다고 알려 줬습니다.

요청하지 않은 것도 세 가지 붙어 왔습니다. 답변에서 그 부분만 옮기면 이렇습니다.

요청하신 것 외에 제가 덧붙인 부분이 세 가지 있습니다.
주소 복사 버튼: "이메일 보내기" 버튼은 메일 앱을 여는 방식이라, 메일 앱이 설정되지 않은 PC에서는 반응이 없을 수 있어 그 아래에 주소를 복사하는 버튼을 추가했습니다.
다크 모드: 기기가 다크 모드이면 색상이 자동으로 어둡게 바뀝니다.
이니셜 원: 사진 대신 성씨 "이"를 원 안에 넣었습니다.

자바스크립트는 이 복사 버튼에만 쓰였고, 외부 라이브러리는 하나도 없었습니다. 답변 끝에 "필요 없는 부분은 말씀해 주시면 빼겠습니다"라는 말이 있었는데, 저는 셋 다 그대로 뒀습니다.

참고 이미지 한 장으로 바꾼 디자인

두 번째 요청은 한 줄이었습니다. 랜딩 페이지 디자인 시안 캡처 한 장을 첨부하고 이렇게만 보냈습니다.

첨부한 이미지를 참고해서 디자인 UI를 개선해줘

참고 이미지는 보험 청구 서비스의 랜딩 페이지 시안이었습니다. 진한 파란색 배경에 민트색 포인트, 큰 알약 모양 버튼, 파란 캐릭터가 눈에 띄는 화면입니다.

받은 결과에는 그 분위기가 이렇게 옮겨졌습니다.

• 색상: 진한 블루를 주 색으로, 민트를 포인트로, 바깥 배경은 옅은 하늘색 그라데이션

• 블루 영역: 이름과 한 줄 소개를 파란 영역에 올리고 민트색 큰 고리를 장식으로 넣음

• 알약 모양: 관심 분야 네 개를 색이 서로 다른 큰 알약으로, 버튼도 둥근 알약으로

• 두 가지 색 제목: "관심 분야"에서 "분야"만 파란색으로

배치도 바뀌었습니다. PC에서는 왼쪽 파란 영역과 오른쪽 내용으로 나뉜 좌우 2단이고, 모바일에서는 위아래로 쌓입니다.

▲ 참고 이미지로 개선한 프로필 페이지 PC 화면: 왼쪽 파란 영역에 이름, 오른쪽에 알약 모양 관심 분야 4개와 민트색 이메일 버튼

참고 이미지에서 일부러 가져오지 않은 것도 있었습니다. 답변에 이렇게 적혀 있었습니다.

이미지 속 캐릭터는 해당 브랜드의 것이어서 넣지 않았고, 기존의 "이" 이니셜 원을 유지했습니다.
이미지의 명조 계열 제목 글꼴은 외부 글꼴을 불러와야 해서, 기기에 기본으로 있는 고딕 글꼴을 그대로 썼습니다.

첫 메시지에 적은 "외부 라이브러리 없이" 조건이 두 번째 요청에서도 지켜진 셈입니다. 연락 영역에 "편하게 연락 주세요"라는 제목이 새로 들어갔다는 안내도 함께 왔습니다.

모바일에서 고리가 글자를 가린 순간

이번 작업에서 어긋난 곳은 개선본의 첫 화면이었습니다. 민트색 장식 고리가 모바일에서 한 줄 소개의 "총무/개발자" 위를 지나가 글자가 잘 안 보였습니다.

개선본을 처음 찍은 화면을 보면 세 군데가 어긋나 있었습니다.

• 모바일 고리: 민트색 고리가 "총무/개발자" 글자와 겹침

• 복사 버튼: 버튼 글자가 "주소"와 "복사" 사이에서 두 줄로 꺾임

• PC 알약: 관심 분야가 세 개와 한 개로 나뉘어 "글쓰기"만 아랫줄에 혼자 남음

▲ 클로드 모바일 화면 수정 전후: 왼쪽은 민트색 고리가 총무/개발자 글자를 가리고 버튼 글자가 두 줄로 꺾인 중간본, 오른쪽은 고친 뒤

고친 내용은 세 줄로 정리됩니다. 모바일 고리 지름을 300px에서 220px로 줄여 오른쪽 위로 더 밀었고, 관심 분야 알약은 두 개씩 두 줄 격자로 바꿨고, 복사 버튼 글자 크기는 14px에서 13px로 줄였습니다. 고친 뒤 PC와 모바일, 밝은 화면과 다크 모드 네 가지로 다시 열어 모두 한 화면에 들어가는 걸 확인했습니다.

제가 "다시" 하고 말할 일은 없었습니다. 이 중간 화면은 제가 받은 결과에는 없었고, 사례글을 쓰려고 작업 기록을 다시 볼 때 알았습니다.

요청 두 번, 3분 만에 끝난 결과

전체 작업은 요청 두 번, 작업 기록 기준 약 3분이었습니다. 웹페이지를 만들어 본 적이 없어서 전과 비교할 시간은 없습니다.

• 첫 요청: 약 1분, 흰 카드 페이지(파일 크기 7.5KB)

• 두 번째 요청: 약 2분, 블루와 민트의 2단 카드(파일 크기 11.4KB)

• 확인한 화면: PC와 모바일, 밝은 화면과 다크 모드 네 가지

결과물은 index.html 파일 하나이고, 외부 라이브러리 없이 브라우저에서 바로 열립니다. 이메일 버튼을 누르면 메일 앱이 열리고, 그 아래 버튼을 누르면 주소가 복사되면서 "주소를 복사했습니다"라는 문구가 2초 동안 뜹니다.

▲ 클로드로 만든 프로필 페이지 다크 모드 화면: 남색 배경에 파란 영역과 흰색, 민트색 알약

아직 안 된 것도 있습니다.

• 웹에 올리지 않아 링크가 없습니다. 지금은 제 컴퓨터 폴더의 파일 하나입니다.

• 참고 이미지의 명조 계열 제목 글꼴은 적용하지 않았습니다.

• 사진 대신 이니셜 원이 들어가 있습니다.

클로드로 프로필 페이지 만드는 순서

제가 한 순서를 그대로 따라 하면 다섯 단계입니다.

1. 이름, 한 줄 소개, 관심 분야, 연락 방법을 한 메시지에 적습니다.

2. "외부 라이브러리 없이 index.html 하나로", "내가 주지 않은 정보는 만들지 말 것"을 조건으로 붙입니다.

3. 첫 결과를 PC와 휴대폰에서 열어 봅니다.

4. 마음에 드는 디자인 캡처 한 장을 첨부해 개선을 요청합니다.

5. 캐릭터나 로고처럼 남의 것은 빠지니, 그 자리에 무엇을 둘지 정합니다.

첫 메시지는 이렇게 시키면 돼요.

한 화면으로 된 간단한 개인 프로필 웹페이지를 만들어줘.
이름: [이름]
한 줄 소개: [한 줄 소개]
관심 분야: [관심 분야 서너 개]
연락 버튼: 이메일 [이메일 주소]로 연결해줘.
조건: PC와 모바일에서 모두 보기 편하게, 외부 라이브러리 없이 하나의 index.html로.
내가 주지 않은 경력이나 연락처는 만들지 말아줘.

결과가 오면 참고할 디자인 캡처를 첨부하고 "첨부한 이미지를 참고해서 디자인 UI를 개선해줘"라고 이어 보내면 됩니다.