AI에 세 번 부탁해 22살이 만든 사이트
옷걸이 진열 화면 만들기, 클로드 지시문 하나로 받은 니트 가게 예시 화면과 여는 법
2026년 10월 26일 올림 · 10월 26일 확인
1단계: 클로드 대화창에 이 부탁 글(지시문) 붙여 넣기
맨 끝 [ ] 안이 내 가게·상품이에요. '우리 가게 봄 원피스 8벌', '제가 만든 티셔츠 8장'처럼 한 줄로 바꾸세요. [ ] 괄호 기호는 지워도 되고 남겨도 돼요. 지시문이 옷걸이·옷 모양으로 쓰여 있어서 옷이 아닌 것을 넣으면 어떻게 그려지는지는 확인 못 했어요(니트로만 해 봤어요). 마지막 문장('답에는 HTML 코드 전체를…')은 꼭 남기세요. 저희는 클로드 오퍼스 5.5(유료)로 돌렸어요. 유료라면 입력 칸 아래 모델 이름을 눌러 'Opus 5.5'를 고르고(메뉴 위치는 저희가 직접 확인 못 했어요), 무료라면 기본값 그대로 두면 돼요. 무료 요금제는 소넷·하이쿠를 써요(claude.com/pricing, 2026-10-19 확인). 무료 모델로 같은 결과가 나오는지는 직접 확인 못 했어요.
너는 웹 디자이너야. 아래 [ ] 안 가게의 작품을 보여 주는 포트폴리오 사이트를 HTML 파일 한 장으로 만들어 줘. 화면 가운데 긴 은색 옷걸이 봉에 작품 8개가 옷걸이에 걸린 옷처럼 나란히 걸려 있고, 마우스를 올리거나 손가락으로 누르면 그 옷이 앞으로 살짝 튀어나오며 아래에 이름이 보이게 해. 한 번 더 누르면 그 옷만 화면 가득 크게 보여 주고, 양옆 화살표로 다음 옷으로 넘기고, '닫기'로 돌아오게. 옷 그림은 사진 파일 없이 코드로 직접 그리고, 옷마다 색과 무늬를 다르게 해. 휴대폰 세로 화면에서는 봉을 손가락으로 옆으로 밀 수 있게 맞추고, 설치·서버 없이 크롬에서 파일을 열면 바로 돌아가게. 코드는 300줄 안쪽으로 짧게 쓰고, 답에는 HTML 코드 전체를 처음부터 끝까지 그대로 보여 줘. [손뜨개 니트 가게 '실타래'의 겨울 니트 8벌]
순서: 주소창에 claude.ai → 로그인 → 왼쪽 위 '새 채팅' → 아래 지시문 붙여 넣기 → [ ] 안을 내 것으로 바꾸기 → Enter. 답에 <!DOCTYPE html>로 시작해 </html>로 끝나는 긴 영어 글(코드)이 나오면 성공이에요(저희 답은 코드 약 1만 7백 자, 212줄). 코드가 대화 대신 오른쪽 미리보기 창(아티팩트)에만 뜨면, 창 위쪽 메뉴의 내려받기로 .html 파일을 바로 저장하세요(버튼 이름은 저희가 직접 확인 못 했어요). 저희는 대화창이 아니라 claude -p(클로드 코드의 한 번 답하기 명령)로 돌려서 대화창 화면과 미리보기 창은 직접 확인 못 했어요. 코드를 어디서 가져올지 모르겠으면 같은 대화창에 '답에는 HTML 코드 전체를 처음부터 끝까지 그대로 보여 줘'라고 한 번 더 보내 보세요(이 방법은 저희가 돌려 보지 않았어요).
이렇게 나와요
[ ] 안은 '손뜨개 니트 가게 '실타래'의 겨울 니트 8벌'로 채우고, claude.ai 대화창이 아니라 claude -p로 돌렸어요. 모델 클로드 오퍼스 5.5, 빈 폴더에서 파일·명령·웹 검색 도구와 저희 설정을 모두 껐어요. 대화창에서는 답 모양이 조금 다를 수 있어요.
2026-10-26, 답 쓰는 데 약 7분 37초(연결 재시도 17번이 들어간 시간이라 실제로는 더 짧을 수 있어요)(실제로는 09:07~12:28에 걸쳐 끝났어요. 저희 컴퓨터가 중간에 잠든 탓으로 보여요). 처음 약 6분은 글자가 하나도 안 나왔어요(재시도 포함). 답 첫머리엔 'invoke name=Write' 같은 영어 글자와 '파일로 저장했습니다(199줄)' 하는 말과 함께 코드가 한 번 나오고, 이어서 설명('은색 봉에 니트 8벌이 서로 살짝 겹쳐 걸려 있고, 은은하게 흔들립니다' 등)과 코드 칸에 HTML 전체가 나왔어요(실제 212줄). 코드 칸의 코드를 고치지 않고 저장해 창 없는 크롬(화면 405×720)으로 열었더니 큰 제목 '실타래'와 그 아래 '손으로 한 코씩 뜬 겨울 니트 8벌', 봉에 니트 8벌(눈꽃 노르딕·아침 스트라이프·꽈배기 크림·체스넛 아가일·베리 도트·솔잎 지그재그·별밤 니트·코코아 체크)이 걸렸고, 마우스를 대면 앞으로 나오고, 누르면 '체스넛 아가일'과 '4 / 8'이 적힌 크게 보기 화면이 뜨고(컴퓨터는 마우스를 대고 한 번 누르면, 휴대폰은 두 번 누르면 크게 보인다고 답에 적혀 있어요), 화살표로 넘기고 '닫기'로 돌아왔어요. 페이지 오류는 없었어요.
답에 '파일을 저장했다(199줄)'는 말이 있었지만 도구를 끈 상태라 실제 파일은 없었고 줄 수도 달랐어요. 저장과 크롬 시험은 저희가 명령으로 따로 했고, 메모장·텍스트 편집기로 저장하는 과정은 이번 파일로 직접 해 보지 않았어요(같은 방법을 다른 가이드에서 확인했어요). 휴대폰 실기기에서 손가락으로 밀기와 claude.ai 미리보기 창 안에서 되는지는 확인 못 했어요. 답이 나온 건 한 번이에요. 앞선 두 번은 연결이 끊겨 답 없이 멈췄어요. 같은 지시문이어도 돌릴 때마다 그림·이름이 달라질 수 있어요.
- 이런 분께
- 가게 상품이나 작품을 옷걸이에 건 것처럼 진열하는 화면을 먼저 한번 만들어 보고 싶은 사람(코딩 몰라도 복사·붙여 넣기만 하면 돼요). 결과는 내 컴퓨터에서 여는 파일 하나이고, 옷 그림은 클로드가 직접 그려요(내 상품 사진 넣기·인터넷 주소로 올리기는 이 가이드에 없어요)
- 끝나면 손에 남는 것
- 옷걸이 화면 부탁 글(지시문) 1개 + 그걸로 저희가 받은 결과 화면 캡처
- 걸리는 시간
- 저희 실험 기준 답 약 7분 반(클로드 오퍼스 5.5, 연결 재시도 포함) · 저장하고 열기 2분
Claude · 읽는 데 15분어떻게 했는지, 짧게
준비물: 컴퓨터(윈도우나 맥)의 크롬, claude.ai 계정(무료로도 가입 가능). 설치·서버·사진 파일은 필요 없어요. 저희 결과는 유료 모델(클로드 오퍼스 5.5) 기준이고, 무료 모델로 같은 결과가 나오는지는 직접 확인 못 했어요. 계정이 없으면 claude.ai에서 구글 계정이나 이메일로 가입하면 돼요(가입 화면은 저희가 이번에 다시 확인하진 않았어요).
원래 사례: 캠브리 번코프는 2026년 9월 30일(한국 시각) X에 'made this sick portfolio to show off @batchmerch 's work. only 3 prompts with opus 5.5'(Batch Merch 작업을 보여 주려고 포트폴리오를 만들었다, 오퍼스 5.5에 부탁 세 번뿐)라는 글과 19초 영상을 올렸어요. 본인 프로필에는 'i run a design studio'(디자인 스튜디오를 한다), '22 yo'(22살)라고 적혀 있어요. 영상 속 사이트는 은색 봉에 옷 10벌이 걸려 있고, 마우스를 대면 그 옷이 앞으로 나오고, 누르면 한 벌만 크게 보이며 양옆 화살표로 넘기는 모양이에요. 세 번의 부탁에 무엇을 썼는지, 옷 사진을 어떻게 넣었는지는 본인 글에 없어서 저희도 몰라요. 아래 지시문은 저희가 영상 속 모양을 보고 쓴 것이에요.
12단계: 답의 코드를 '.html' 파일로 저장해 크롬으로 열기(마지막 단계)
클로드가 만든 건 설치하는 앱이 아니라 크롬에서 열리는 웹 페이지 파일 하나예요. 이름 끝의 .html은 '인터넷 창으로 여는 파일'이라는 표시예요.
- 코드 칸 없이 오른쪽 미리보기 창만 떴다면 → 창 위쪽 메뉴의 내려받기로 .html 파일을 저장하고 셋째 칸으로 건너뛰어요(버튼 이름은 저희가 직접 확인 못 했어요). 코드 칸이 있으면 → <!DOCTYPE html>로 시작해 </html>로 끝나는 코드 칸 전체를 복사해요(코드 칸 오른쪽 위 복사 단추가 있으면 그걸로). 코드 위아래의 설명 글은 넣지 않아요.
- 윈도우: 메모장 열기 → 붙여 넣기 → 파일 → 다른 이름으로 저장 → 파일 형식 '모든 파일(*.*)', 인코딩 'UTF-8', 파일 이름은 아무 이름이나 끝에 .html(예: '내가게.html') → 저장. 맥: 텍스트 편집기 → 새로운 문서 → 메뉴 '포맷 → 일반 텍스트로 만들기' → 붙여 넣기 → 이름 '내가게.html'처럼 끝에 .html을 붙여 저장. '.html을 사용할까요?' 하고 물으면 '.html 사용'.
- 저장한 파일을 두 번 누르거나 크롬 창에 끌어다 놓아요. 봉에 옷이 걸린 화면이 뜨면 성공이에요. 컴퓨터는 옷에 마우스를 대고 한 번 누르면, 휴대폰은 두 번 누르면 크게 보여요(답 설명 기준, 저희는 컴퓨터 크기로만 눌러 봤어요).
- 인터넷에 주소로 올려 남에게 보여 주는 방법(배포)은 이 가이드에 없어요. 저희가 이 파일로 해 보지 않았어요.
나머지는 회원만 볼 수 있어요
무료 가입하면 이 가이드 끝까지, 프롬프트 복사, 파일 받기까지 다 돼요.
10초면 끝나요.
