클로드 코워크로 프로필 웹페이지 제작하기
2026년 10월 3일 작업 개요
코드는 한 줄도 직접 쓰지 않았고, 요청 한 마디를 보낼 때마다 카드 모양이 통째로 바뀌었고, 마지막엔 우리 가족 사진이 연필 스케치가 되어 카드 한가운데 들어갔습니다.
프로필 웹페이지 제작의 동기
아들과 함께 성장하는 우주 아빠, 지피터스 24기워크스페이스 멤버 우쥬라이크예요. 이번 스터디 과제로 처음 만나는 사람에게 나를 소개하는 페이지를 만들어 보기로 했습니다. 학교·수업에서도 써 보려는 생각이 있어서, 프로그램 설치 없이 파일 하나로 열리는 페이지가 필요했습니다.
조건은 세 가지로 정했습니다.
파일 하나(index.html)로 끝날 것
외부 라이브러리 없이 브라우저에서 바로 열릴 것
제가 주지 않은 경력이나 연락처는 지어내지 말 것
클로드 코워크에 첫 요청 보내기
처음 보낸 요청은 이랬습니다. 실명과 이메일 주소만 지웠어요.
Open optionsauto
한 화면으로 된 간단한 개인 프로필 웹페이지를 만들어줘.
목적: 처음 나를 만나는 사람에게 나를 소개하는 페이지야.
이름 / 활동명: (실명)/우쥬라이크
한 줄 소개: 하루하루 아들과 함께 성장하고 싶은 우주 아빠
관심 분야: ai활용, 독서, 교육
연락 버튼: (이메일 주소) 로 연결해줘.
화면: 깔끔하고 심플한 카드 디자인으로 만들어줘.
조건: PC와 모바일에서 모두 보기 편하게 만들어줘.(뒤로 4줄 더)
첫 결과물은 흰 카드였습니다. 동그란 자리에 이름 첫 글자 "나"가 들어가고, 그 아래 이름과 활동명, 한 줄 소개가 있습니다. 관심 분야 세 개는 동그란 태그로 붙었고, 맨 아래에 "이메일 보내기" 버튼이 있습니다. 버튼을 누르면 메일 프로그램이 열리고 받는 사람 칸이 채워집니다.
▲ 클로드 코워크로 만든 첫 프로필 카드, 흰 바탕에 관심 분야 태그 3개
제가 따로 말하지 않은 것도 두 가지 붙어 있었습니다. 메일 프로그램이 없는 컴퓨터를 위한 "이메일 주소 복사" 버튼과, 컴퓨터가 어두운 화면 모드면 카드도 어두워지는 기능입니다. 파일 크기는 6KB였습니다.
디자인 변경 요청과 결과
깔끔했지만 누구 페이지인지 잘 드러나지 않았습니다. 그래서 마음에 드는 프로필 카드 디자인 이미지 하나를 붙여 넣고 한 줄만 보냈습니다.
Open optionsauto
첨부한 이미지 디자인을 참고해서 ui를 개선해줘참고 이미지는 세로로 긴 카드에 주황빛 사진이 꽉 차 있고, 아래에 굵은 이름과 검은 알약 모양 버튼이 있는 디자인이었습니다. 두 번째 카드는 그 느낌을 그대로 가져왔습니다. 모서리를 크게 둥글린 세로 카드, 주황에서 분홍으로 이어지는 색, 아래로 갈수록 흐려지는 효과, 오래된 사진 같은 거친 질감이 들어갔어요.
다만 그대로 베끼지 않은 부분이 있었습니다.
참고 이미지 위쪽의 회사 로고 자리는 우쥬라이크의 "W" 동그라미로 바뀌었습니다.
버튼 옆의 평점 "4.9"는 빠졌습니다. 제가 준 정보가 아니라는 이유였어요.
사진이 없어서, "우주 아빠"라는 소개에 맞춰 고리 달린 행성과 반짝이는 별이 그려졌습니다.
▲ 참고 이미지를 바탕으로 바꾼 두 번째 카드, 주황빛 배경에 행성 그림
처음 시안에서는 행성이 이름 글자를 덮었습니다. 클로드가 화면을 직접 찍어 확인하고 행성을 줄여 다시 맞춘 뒤에 결과를 넘겨 줬어요. 덮어쓰기 전에는 먼저 물어 달라고 설정해 둬서, 원래 파일은 그대로 두고 index_v2.html이라는 새 파일로 저장됐습니다.
세 번째 요청은 저를 더 드러내고 싶어서 보냈습니다.
Open optionsauto
좀 더 나를 표현하고 싶은데 달리기와 독서 뇌과학을 표현하고 싶어이 한 마디로 관심 분야가 세 개에서 다섯 개(달리기, 독서, 뇌과학, AI 활용, 교육)가 됐습니다. 달 리는 사람, 펼친 책, 뇌 모양 아이콘이 동그란 위성처럼 카드 위에 떠 있어요. 아래 태그에 마우스를 올리면 같은 관심사 아이콘이 검게 바뀌면서 이름이 보입니다. 페이지를 처음 열면 세 아이콘이 차례로 한 번씩 반짝여요.
가족 사진을 스케치로 변환하기
그다음엔 가족 사진을 붙였어요.
Open optionsauto
이 사진을 스케치형태로 변형해서 사입하는것도 좋을거 같아사진은 회색 벽 앞에서 셋이 선글라스를 쓰고 나무 상자 위에 앉아 찍은 가족사진입니다. 행성 그림 자리를 이 사진이 대신하게 됐어요.
바뀐 과정은 이렇습니다.
사진을 흑백으로 바꾸고 윤곽선만 남겨 연필 스케치처럼 만들었습니다.
회색 벽 배경은 지우고 선만 남겼습니다. 그래서 주황색 카드 위에 갈색 선 그림이 얹힌 것처럼 보입니다.
첫 스케치는 선 주변이 번져 도장을 찍은 듯 흐릿했습니다. 선을 가늘게 다시 뽑고 진하기를 올려서 얼굴과 옷 주름이 보이게 맞췄습니다.
스케치 그림을 파일 안에 넣어 두었습니다. 사진 파일을 따로 챙기지 않아도 index_v3.html 하나만 있으면 어디서든 열립니다.
남자와 여자가 그려진 한국어 앱
▲ 가족 사진 스케치와 달리기·독서·뇌과학 아이콘이 들어간 세 번째 카드
스케치가 들어가면서 아이콘 위치도 바뀌었습니다. 처음엔 아이콘이 행성 둘레를 빙글빙글 돌았는데, 그러면 가족 얼굴 위를 지나갑니다. 그래서 가족 그림 양옆에 둥둥 떠 있는 방식으로 바뀌었습니다.
폴더 연결 문제 해결하기
세 번째 파일을 제 컴퓨터 폴더에 저장하려는 순간 막혔습니다. 화면에 이런 안내가 떴어요.
지금 24기워크스페이스 폴더에 연결할 수 없어서 폴더에는 저장하지 못했어요.
안쪽 메시지는 이랬습니다.
Open optionsauto
the connected folder is no longer accessible on this device; ask the user to reconnect it저는 저장이 왜 안 되는지부터 물어봤습니다.
Open optionsauto
왜 연결할 수 없는거지?확인해 보니 바탕화면에 있던 24기워크스페이스 폴더가 없었습니다. 폴더가 다른 폴더 안으로 옮겨져 있었어요. 클로드 코워크는 처음 연결한 폴더 경로에만 파일을 저장할 수 있어서, 폴더를 옮기면 연결이 끊깁니다. 바탕화면에 보이는 폴더 목록을 받아 보고 옮긴 곳을 한 마디로 알려 줬습니다.
Open optionsauto
30_책·강의·연구그 안에서 24기워크스페이스 폴더를 찾았고, 접근을 허락하는 창에서 "허용"을 누르자 index_v3.html이 바로 저장됐습니다. 같은 이름의 파일이 없는지 먼저 확인한 뒤라 덮어쓴 파일도 없었습니다.
결과물과 가족의 반응
▲ 처음 카드, 두 번째 카드, 세 번째 카드를 나란히 놓은 비교
전: 웹페이지를 만들어 본 적이 없습니다. AI 덕에 처음 할 수 있게 된 일입니다.
후: 대화 7번 만에 프로필 페이지 3가지 버전이 나왔습니다.
파일은 세 개가 남았습니다.
index.html: 흰 바탕 기본 카드, 6KB
index_v2.html: 참고 이미지 스타일, 행성 그림, 11KB
index_v3.html: 가족 스케치와 관심사 아이콘 5개, 63KB
세 파일 모두 더블클릭하면 브라우저에서 바로 열립니다. 넓은 PC 화면(가로 1280픽셀)과 휴대폰 크기 화면(가로 375픽셀)에서 둘 다 찍어 보고 글자가 겹치지 않는지 확인했어요. 마지막엔 "여기서도 보여줘"라고 해서 대화창 옆에 페이지를 띄워 놓고 태그를 직접 눌러 봤습니다. 가장 먼저 본 사람은 가족이었습니다.
클로드 코워크로 프로필 웹페이지 만드는 법
클로드 데스크톱 앱에서 코워크를 열고, 파일을 저장할 폴더를 연결합니다.
아래 요청에서 대괄호 부분만 바꿔 보냅니다.
마음에 드는 디자인 이미지가 있으면 붙여 넣고 "참고해서 바꿔 줘"라고 한 줄 보냅니다.
넣고 싶은 관심사나 사진은 한 번에 하나씩 보냅니다. 그래야 무엇이 바뀌었는지 보여요.
작업 중에는 연결한 폴더를 옮기지 않습니다.
이렇게 시키면 돼요.
Open optionsauto
한 화면으로 된 간단한 개인 프로필 웹페이지를 만들어줘.
목적: [누구에게 나를 소개하는 페이지인지]
이름 / 활동명: [이름]/[활동명]
한 줄 소개: [나를 한 줄로]
관심 분야: [관심사 3개에서 5개]
연락 버튼: [이메일 주소]로 연결해줘.
CSS와 JavaScript를 포함해 index.html 파일 하나로, 외부 라이브러리 없이 만들어줘.
내가 주지 않은 경력이나 연락처는 지어내지 말아줘.