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

- 작성자: [딸기잼](https://community.clauders.ai/member/imported-member-F40bVtAmmT)
- 공간: [AI 워크스페이스 구축하기](https://community.clauders.ai/ai-workspace)
- 게시: 2026-10-08
- 연재: [AI 워크스페이스 구축하기 시즌 3](https://community.clauders.ai/series/ai-workspace-season-3) 2/5편
- 태그: #AI워크스페이스
- 주소: https://community.clauders.ai/ai-workspace/post/%ED%81%B4%EB%A1%9C%EB%93%9C%EB%A1%9C-%EC%9E%90%EA%B8%B0%EC%86%8C%EA%B0%9C-%EC%9B%B9%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%B0%B8%EA%B3%A0-%EC%9D%B4%EB%AF%B8%EC%A7%80-%ED%95%9C-%EC%9E%A5%EC%9C%BC%EB%A1%9C-ui-%EA%B0%9C%EC%84%A0-51c36ec4-7728-82ef-9392-1a3e6696368d

---

## 결과와 배운 점로드(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를 개선해줘"라고 이어 보내면 됩니다.