프롬프트로 만들기

오늘 만들 것

이 장에서는 사이트 하나를 5단계로 만듭니다. 순서는 늘 같습니다. 정지된 화면을 먼저 만들고, 움직임을 넣고, 누르거나 내리면 반응하게 하고, 인터넷에 공개하고, 마지막으로 한 번 더 다듬습니다. 한 단계가 끝날 때마다 눈으로 확인하고, 마음에 들면 저장한 뒤 다음 단계로 넘어갑니다.

Claude에게 하는 부탁의 글을 이 교육에서는 프롬프트라고 부릅니다. 이 장의 프롬프트는 모두 상자 안에 들어 있고, 오른쪽 위의 복사 버튼을 누르면 복사됩니다. Claude 입력창에 붙여넣고 Enter를 누르면 됩니다. [대괄호] 부분만 내 내용으로 바꿔 넣으세요.

먼저 완성본을 구경해 보세요. 아래 세 가지가 이 장에서 만들 수 있는 사이트의 예시입니다. 직접 눌러 보고, 슬라이더를 움직이고, 스크롤해 보세요. "이 정도를 말로만 만든다"는 감각을 잡는 것이 첫 번째 목표입니다.

도시의 하루 딸기 소개 사이트 심해 탐험

세 가지 주제, 이 장에서 하는 일

5단계 한눈에 보기

시작하기 전에

세 가지를 준비합니다. 5분이면 끝나지만 이 준비가 이후 모든 단계의 성공률을 좌우합니다.

이 폴더의 brief-v2.md(없으면 가장 최근 버전의 브리프)를 먼저 읽어줘.
- 읽은 내용을 다섯 줄로 요약하고, 만들기 전에 꼭 확인할 것이 있으면 질문 하나만 해줘.
- 그다음 이 장의 단계 순서대로 진행하되, 지금은 1단계(화면 구성)만 만들어줘. 모션과 상호작용은 다음 단계에서 할 거야.
- 브리프와 다르게 만들어야 하는 곳이 생기면 바꾸기 전에 먼저 나에게 물어봐줘.

1. 스킬 설치 후 새 세션을 시작했는지 확인하기

   5장에서 스킬(디자인과 모션 실력을 더해 주는 추가 기능)을 설치했다면, 그 뒤에 새 세션을 시작해야 목록에 나타납니다. 설치하기 전에 열어 둔 대화창에서는 보이지 않습니다. 지금 보고 있는 대화창이 설치 전부터 열려 있던 것이라면, 새 세션을 시작한 뒤 이 장을 따라 하세요.

   확인 방법은 간단합니다. Claude 데스크톱 앱의 Code 탭에서 입력창에 / 글자를 입력해 보세요. 사용할 수 있는 명령과 스킬의 목록이 위로 펼쳐집니다. 입력창 옆의 + 버튼을 누르고 Slash commands를 골라도 같은 목록이 나옵니다. 터미널에서 claude를 실행해 쓰는 분도 같은 방법으로 /를 입력하면 됩니다.

   1. Code 탭
   2. 입력창에 / 입력
   3. 목록에서 스킬 이름 찾기

   목록에서 아래 세 가지를 찾아보세요. 글자를 더 입력하면 목록이 좁혀지므로, /design, /imp, /ui처럼 앞부분만 쳐 보면 편합니다.

   • design-taste-frontend
   • impeccable
   • ui-ux-pro-max:ui-ux-pro-max (플러그인으로 설치한 스킬은 "플러그인이름:스킬이름" 모양으로 보입니다)
   세 가지가 모두 보이면 준비 끝입니다

   입력창에 쓴 /는 지우고 다음으로 가세요. 스킬을 직접 부르는 기본 방법은 이름 앞에 /를 붙여서 말을 시작하는 것입니다. 화면 문구와 목록 모양은 앱 업데이트로 조금 다를 수 있습니다.

   목록에 없다면

   먼저 앱이나 터미널의 Claude를 완전히 종료했다가 다시 열어 새 세션을 시작해 보세요. 그래도 없으면 5장으로 돌아가 설치가 끝까지 되었는지 확인해야 합니다. 아래 프롬프트로 Claude에게 확인을 부탁할 수도 있습니다. 다만 최종 판단은 항상 위의 목록 화면이 가장 정확합니다.

   이 세션에서 쓸 수 있는 스킬 중에 design-taste-frontend, impeccable, ui-ux-pro-max가 있는지 확인해 주세요.
   있는 것은 각각 한 줄로 어떤 일을 하는 스킬인지 알려 주세요.
   없는 것은 이름만 알려 주세요.

2. 작업 폴더 정하기

   Claude는 "폴더"를 단위로 일합니다. 사이트를 만들 폴더를 하나 정해서 Claude에게 열어 주어야 합니다. 두 가지 방법이 있습니다.

   방법 A 추천

   • 4장에서 첫 배포까지 해 본 저장소 폴더를 그대로 씁니다
   • GitHub와 Vercel에 이미 연결되어 있어서, 4단계 배포가 "올리기 한 번"으로 끝납니다
   • 4장의 연습용 파일은 새 화면으로 바뀌어도 괜찮습니다

   방법 B

   • 새 폴더를 하나 만들어 시작합니다
   • 이 경우 4단계에서 GitHub 저장소를 새로 만들고 Vercel에 다시 연결해야 합니다. 3장, 4장의 순서를 한 번 더 해야 하므로 처음에는 권하지 않습니다

   폴더를 여는 방법입니다. 앱을 처음 열었거나 새 세션을 시작하면 입력창 주변에 환경과 폴더를 고르는 부분이 나옵니다.

   1. Code 탭
   2. Local
   3. Select folder
   4. 작업 폴더 선택

   Local은 "내 PC의 파일을 직접 쓴다"는 뜻입니다. 폴더를 고르면 그 폴더 이름이 입력창 근처에 표시됩니다. 이후 Claude가 만드는 모든 파일이 이 폴더 안에 생깁니다.

   폴더를 잘못 고르면

   바탕화면 전체나 문서 폴더처럼 너무 넓은 폴더를 고르지 마세요. Claude가 그 안의 다른 파일들까지 볼 수 있게 됩니다. 이 실습 전용 폴더 하나만 고르세요. 회사 문서가 들어 있는 폴더는 절대 안 됩니다.

3. 기획 메모 만들기

   AI는 시키는 일을 아주 잘하지만, 무엇을 만들지는 대신 정해 주지 않습니다. 만들기 전에 아래 네 가지만 정해 두면 결과의 품질이 크게 달라집니다. 부담 갖지 마세요. 정하는 것도 Claude가 질문하며 도와줍니다.

   정할 것	도시의 하루	과일 소개	심해 탐험
   주제 한 줄	시간을 움직이면 낮에서 밤으로 바뀌는 도시	딸기를 광고처럼 소개하는 사이트	스크롤하면 바닷속으로 내려가는 사이트
   분위기 단어 3개	따뜻한, 반짝이는, 조용한	상큼한, 고급스러운, 선명한	신비로운, 고요한, 깊은
   장면 목록	낮의 도시, 저녁의 도시, 밤의 도시	첫 화면, 소개, 좋아하는 이유와 먹는 방법	수면, 바닷속, 심해
   사용자가 하는 행동	슬라이더 움직이기	스크롤, 과일 클릭	스크롤, 생물 클릭

   인터랙티브 웹사이트를 하나 만들려고 합니다. 아직 코드는 쓰지 말고, 기획부터 저와 같이 정리해 주세요.
   
   저는 코딩을 모르는 사무직입니다. 쉬운 말로 질문해 주세요.
   후보 주제는 "도시의 하루", "과일 소개", "심해 탐험"입니다. (제 주제가 따로 있다면: [내 주제])
   
   아래 4가지를 질문 하나씩 차례로 물어봐 주세요. 질문마다 보기를 2~3개 같이 주세요.
   1. 주제 한 줄
   2. 분위기를 나타내는 단어 3개
   3. 장면 목록 (화면이 위에서 아래로, 또는 시간 순서로 어떻게 이어지는지 3~5개)
   4. 사용자가 하는 행동 (스크롤, 클릭, 슬라이더 중 무엇인지)
   
   4가지가 다 정해지면 이 폴더의 README.md 맨 아래에 "기획 메모" 항목으로 정리해 주세요.
   README.md가 이미 있으면 기존 내용은 지우지 말고 아래에 덧붙여 주세요.

   Claude가 질문을 하나씩 던지면, 보기 중 하나를 고르거나 번호만 답해도 됩니다. 잘 모르겠으면 "잘 모르겠어요. 보기를 3개 더 추천해 주세요"라고 말하세요.

   성공하면 이렇게 됩니다

   Claude가 질문 네 개를 차례로 묻고, 마지막에 "README.md에 기획 메모를 정리했습니다"라고 알려 줍니다. 이때 폴더에 README.md 파일이 생기거나 갱신됩니다. 이 파일을 열어 보면 방금 정한 네 가지가 그대로 적혀 있습니다.

   왜 파일에 적어 두나요?

   대화는 길어지면 앞부분을 잊어버립니다. 파일에 적어 두면 새 세션을 시작해도 "README 읽고 이어서 해 주세요" 한마디로 같은 지점에서 다시 시작할 수 있습니다. 사람이 회의록을 남기는 것과 같은 이유입니다.

프롬프트 잘 쓰는 원칙 8가지

이 장 전체에서 가장 중요한 부분입니다. 코딩을 몰라도 결과를 좌우하는 것은 부탁하는 방식입니다. 이 원칙은 사이트 만들기뿐 아니라 보고서 초안, 메일 정리 같은 업무에서도 똑같이 통합니다(11장에서 다시 만납니다). 단계를 따라 하면서 틈틈이 이 부분으로 돌아오세요.

첨부한 화면을 봐 주세요. 빨간 동그라미로 표시한 부분이 문제입니다.
[무엇이 어떻게 보이는지, 예: 건물이 화면 오른쪽 밖으로 잘려 있습니다]
이 부분만 고쳐 주세요. 다른 곳은 바꾸지 마세요.

지금 상태를 저장(커밋)해 주세요. 커밋 메시지는 "[방금 한 일을 한 줄로, 예: 시간 슬라이더 추가]"로 해 주세요. GitHub에는 아직 올리지 않아도 됩니다.

방금 한 변경을 되돌려 주세요. 되돌리기 전에 어떤 파일의 무엇이 원래대로 돌아가는지 먼저 알려 주세요.

마지막으로 저장(커밋)한 상태로 돌아가고 싶습니다.
먼저 최근 저장 목록을 보여 주세요. 돌아가면 어떤 변경이 사라지는지 설명한 뒤, 제가 "진행해 주세요"라고 하면 그때 돌아가 주세요.

이 폴더의 README.md를 읽고, 지금까지 어디까지 만들었는지 쉬운 말로 요약해 주세요.
그다음 [지금 하려는 일, 예: 3단계의 창문 불빛]부터 이어서 진행해 주세요.

README.md의 "진행 상황" 항목에 오늘 한 일과 다음에 할 일을 3줄로 적어 주세요.

1단계. 화면 구성: 정지된 첫 화면 만들기

이 단계의 목표

움직임과 기능은 모두 뒤로 미루고, 보이는 모습(배치, 색, 글)만 먼저 만듭니다. 한 번에 다 시키면 어디서 잘못됐는지 찾기 어렵기 때문에, 정지된 화면부터 확정해 두는 것입니다.

• 작업 폴더에 index.html, style.css, script.js 세 파일이 생긴다
• 미리보기에서 제목, 소개 문구, 그림이 있는 첫 화면이 보인다
• 휴대폰 폭으로 줄여도 글이 잘리거나 옆으로 밀리지 않는다
• 화면의 모든 글이 한국어이다

어떤 스킬로 시작할까요?

따라 하기: 도시의 하루 (공통 실습)

/design-taste-frontend
"도시의 하루" 웹사이트의 첫 화면을 만들어 주세요. 이번에는 정지된 화면만 만듭니다.

[먼저 할 일]
이 폴더의 README.md에 있는 "기획 메모"를 읽고, 적혀 있는 분위기 단어 3개를 디자인에 반영해 주세요.

[화면 구성]
- 맨 위: 제목 "도시의 하루"와 한 줄 소개 문구
- 가운데: 2D 도시 풍경. 하늘, 해, 높이가 서로 다른 건물 실루엣 6개, 아래쪽에 도로
- 맨 아래: 나중에 시간 슬라이더가 들어갈 빈 자리 (지금은 "시간 슬라이더 자리"라는 작은 안내 글만)
- 지금은 낮 풍경만 그립니다. 움직임, 클릭, 슬라이더 기능은 아직 넣지 마세요.

[조건]
- index.html, style.css, script.js 세 파일로 만드는 정적 사이트입니다. 빌드 도구, npm, 프레임워크는 쓰지 말고, Vercel에 폴더 그대로 배포할 수 있어야 합니다.
- index.html을 더블클릭해서 열어도 동작해야 합니다. (type="module"이나, 다른 파일을 fetch로 불러오는 방식은 쓰지 마세요.)
- 데이터베이스, 로그인, 서버 코드는 없습니다.
- 휴대폰 화면(가로 360px)부터 PC 화면까지 깨지지 않게 만들어 주세요.
- 화면에 보이는 모든 문구는 한국어로 써 주세요.
- 이미지 파일 없이 CSS와 SVG(코드로 그리는 그림)로 도시를 그려 주세요.
- 폴더에 이미 index.html이 있으면 새 화면으로 바꿔도 됩니다. (이전 연습용 파일일 수 있습니다)

다 만든 뒤에 만든 파일 목록과, 화면을 여는 방법을 쉬운 말로 알려 주세요.

이 프롬프트에는 조건 5가지(정적 파일, 더블클릭 동작, DB 없음, 모바일 대응, 한국어)가 들어 있습니다. 이 조건을 빼먹지 않는 것이 Vercel 배포를 쉽게 만듭니다. 프롬프트의 "빌드 도구, npm, 프레임워크"는 개발자들이 큰 사이트를 만들 때 쓰는 복잡한 제작 도구의 이름입니다. 이 교육에서는 쓰지 않으니 뜻을 몰라도 괜찮습니다.

/ui-ux-pro-max:ui-ux-pro-max
"도시의 하루" 웹사이트의 첫 화면을 만들기 전에, 디자인 방향부터 제안해 주세요.

1. 이 폴더의 README.md에 있는 "기획 메모"를 읽어 주세요.
2. 어울리는 스타일 2가지를 이유와 함께 알려 주세요.
3. 스타일마다 색 5개(배경, 글자, 포인트 2개, 강조)와 한글이 잘 보이는 글꼴 조합을 알려 주세요.
4. 제가 하나를 고르면, 그 방향으로 첫 화면을 만들어 주세요. 조건은 아래와 같습니다.

[조건]
- 이번에는 정지된 낮 풍경만 만듭니다. 움직임, 클릭, 슬라이더는 아직 넣지 마세요.
- index.html, style.css, script.js 세 파일의 정적 사이트로, 빌드 도구나 프레임워크 없이 Vercel에 폴더 그대로 배포할 수 있어야 합니다.
- index.html을 더블클릭해도 동작해야 합니다.
- 데이터베이스와 로그인은 없습니다.
- 가로 360px 휴대폰부터 PC까지 깨지지 않게 해 주세요.
- 모든 문구는 한국어입니다.
- 이미지 파일 없이 CSS와 SVG로 도시를 그려 주세요.

내 주제로 바꾸기

도시 대신 다른 주제로 하는 분은 아래에서 내 주제를 펼쳐 쓰세요. 내용은 같고 소재만 다릅니다.

/design-taste-frontend
[내 과일 이름, 예: 딸기] 소개 웹사이트의 첫 화면을 만들어 주세요. 이번에는 정지된 화면만 만듭니다.

[먼저 할 일]
이 폴더의 README.md에 있는 "기획 메모"를 읽고, 적혀 있는 분위기 단어 3개를 디자인에 반영해 주세요.

[화면 구성]
- 첫 화면: 가운데에 [내 과일 이름] 하나가 크게 보이고, 옆에 제목 "[내 과일 이름]"과 한 줄 소개 문구
- 그 아래로 이어지는 장면 3개: "소개", "내가 좋아하는 이유", "이렇게 먹어요" (제목과 두세 줄 설명을 채워 주세요)
- 맨 아래: 마무리 문구 한 줄
- 움직임과 클릭 기능은 아직 넣지 마세요.

[조건]
- index.html, style.css, script.js 세 파일로 만드는 정적 사이트입니다. 빌드 도구, npm, 프레임워크는 쓰지 말고, Vercel에 폴더 그대로 배포할 수 있어야 합니다.
- index.html을 더블클릭해서 열어도 동작해야 합니다. (type="module"이나 fetch로 파일을 불러오는 방식은 쓰지 마세요.)
- 데이터베이스, 로그인, 서버 코드는 없습니다.
- 휴대폰 화면(가로 360px)부터 PC 화면까지 깨지지 않게 만들어 주세요.
- 화면에 보이는 모든 문구는 한국어로 써 주세요.
- 과일 그림은 사진 파일 없이 CSS와 SVG로 단순하게 그려 주세요. 나중에 제 사진으로 바꿀 수 있도록, 어디를 바꾸면 되는지도 알려 주세요.

다 만든 뒤에 만든 파일 목록과, 화면을 여는 방법을 쉬운 말로 알려 주세요.

/design-taste-frontend
"심해 탐험" 웹사이트의 첫 화면을 만들어 주세요. 이번에는 정지된 화면만 만듭니다.

[먼저 할 일]
이 폴더의 README.md에 있는 "기획 메모"를 읽고, 적혀 있는 분위기 단어 3개를 디자인에 반영해 주세요.

[화면 구성]
- 맨 위(수면): 밝은 하늘색 바다 표면. 제목 "심해 탐험"과 안내 문구 "아래로 스크롤하세요"
- 그 아래로 세로로 길게 이어지는 3개 구간: "수면 근처 0m"(밝은 하늘색), "바닷속 200m"(짙은 파랑), "심해 1,000m"(거의 검은 남색). 구간마다 화면 한 장 높이 정도로, 구간 이름과 두세 줄 설명을 넣어 주세요.
- 생물과 클릭 기능은 아직 넣지 마세요. 움직임도 아직 넣지 마세요.

[조건]
- index.html, style.css, script.js 세 파일로 만드는 정적 사이트입니다. 빌드 도구, npm, 프레임워크는 쓰지 말고, Vercel에 폴더 그대로 배포할 수 있어야 합니다.
- index.html을 더블클릭해서 열어도 동작해야 합니다. (type="module"이나 fetch로 파일을 불러오는 방식은 쓰지 마세요.)
- 데이터베이스, 로그인, 서버 코드는 없습니다.
- 휴대폰 화면(가로 360px)부터 PC 화면까지 깨지지 않게 만들어 주세요.
- 화면에 보이는 모든 문구는 한국어로 써 주세요.
- 이미지 파일 없이 CSS와 SVG로 물결과 배경을 그려 주세요.
- 깊이 숫자는 연출용 수치입니다. 어두워지는 색 변화가 자연스럽게 이어지도록 해 주세요.

다 만든 뒤에 만든 파일 목록과, 화면을 여는 방법을 쉬운 말로 알려 주세요.

결과 확인하기: 미리보기로 내 눈으로 보기

Claude가 "다 만들었습니다"라고 하면, 이제 내 눈으로 직접 봅니다. 방법은 두 가지이며, 어느 쪽이든 괜찮습니다. 이 방법은 앞으로 모든 단계에서 똑같이 씁니다.

1. 방법 1. Claude에게 "미리보기로 열어 주세요"라고 부탁하기

   입력창에 이렇게 쓰고 보내세요.

   미리보기로 열어 주세요.

   그러면 대화창 옆에 Browser(브라우저) 창이 열리고, 방금 만든 사이트가 그 안에 나타납니다. 이 창은 앱 안에 들어 있는 작은 인터넷 브라우저입니다. 주소창에는 localhost:숫자처럼 생긴 주소가 보이는데, 이것은 내 PC 안에서만 보이는 임시 주소입니다. 다른 사람은 열 수 없고, 인터넷에 공개된 것도 아닙니다.

   처음 한 번은 Claude가 "화면을 띄우기 위한 작은 서버를 시작해도 될까요?" 같은 허락을 구하거나, .claude/launch.json이라는 설정 파일을 만들 수 있습니다. 미리보기를 켜기 위한 자동 설정이니 허용하세요. 창이 보이지 않으면 Ctrl+Shift+B(Mac은 Command+Shift+B)를 누르거나 세션 제목줄의 Browser를 눌러 보세요.

   대화창에 index.html 같은 파일 이름이 글자로 나와 있다면, 그 이름을 직접 눌러도 Browser 창에 열립니다.

2. 방법 2. index.html을 더블클릭해서 열기

   Claude 없이 내 PC 브라우저(크롬, 엣지 등)로 직접 열어 보는 방법입니다. 작업 폴더를 파일 탐색기(Mac은 Finder)로 열고, index.html 파일을 더블클릭하세요. 평소 쓰는 브라우저가 열리면서 사이트가 나타납니다. 주소창에는 file:///...로 시작하는 주소가 보입니다. 작업 폴더가 어디인지 모르겠다면 Claude에게 "작업 폴더를 파일 탐색기로 열어 주세요"라고 부탁하세요.

   이 방법은 4단계 이후 다른 브라우저에서 보고 싶을 때, 그리고 Claude가 열어 준 미리보기가 이상할 때 비교용으로 유용합니다. 다만 사이트의 구성에 따라 더블클릭으로는 일부 기능이 동작하지 않을 수 있습니다. 그럴 때는 방법 1을 쓰세요.

3. 휴대폰 크기로도 확인하기

   미리보기 창의 폭을 마우스로 좁혀 보세요. 휴대폰처럼 좁아져도 글이 잘리지 않고 옆으로 스크롤되지 않아야 합니다. 직접 줄이기 번거로우면 Claude에게 "휴대폰 화면 크기(가로 375px)로 미리보기를 보여 주세요"라고 부탁하세요.

잘 안 될 때 고치는 프롬프트

미리보기 화면이 하얗게 비어 있습니다. (또는 글자만 나옵니다.)
미리보기에서 오류 메시지를 직접 확인하고, 원인을 쉬운 말로 한 줄로 설명한 뒤 고쳐 주세요.
index.html에서 style.css와 script.js가 제대로 연결되어 있는지도 확인해 주세요.

첫 화면이 마음에 들지 않습니다. 구체적으로는 이렇습니다.
- 하늘이 너무 어둡습니다. 오후 3시 느낌으로 밝고 맑게 바꿔 주세요.
- 건물이 모두 같은 회색이라 단조롭습니다. 따뜻한 베이지, 연한 주황, 연한 회색을 섞어 주세요.
- 제목 글자를 지금보다 1.5배 크게 해 주세요.
이 세 가지 외에는 그대로 두세요.

휴대폰 크기(가로 360px)에서 화면이 이상합니다. [글자가 잘립니다 / 화면이 옆으로 스크롤됩니다 / 건물이 화면 밖으로 나갑니다 중 해당되는 것]
가로 360px, 390px, 768px, 1280px 네 가지 폭에서 모두 제대로 보이도록 고쳐 주세요.
고친 뒤에는 휴대폰 폭으로 미리보기를 열어서 확인한 결과를 알려 주세요.

지금 폴더에 있는 파일 목록을 보여 주고, 각 파일이 무슨 역할인지 쉬운 말로 한 줄씩 설명해 주세요.
이 사이트에 꼭 필요한 파일과 없어도 되는 파일을 나눠서 알려 주세요. 파일은 지금 지우지 말고 목록만 알려 주세요.

1단계 체크리스트

• 폴더에 index.html, style.css, script.js가 생겼다
• 미리보기(또는 더블클릭)로 내 눈으로 첫 화면을 확인했다
• 휴대폰 폭으로 줄여 봐도 글이 잘리거나 옆으로 밀리지 않는다
• 마음에 드는 상태에서 "지금 상태 저장(커밋)"을 부탁했다

2단계. 모션: 화면에 살아 있는 느낌 넣기

이 단계의 목표

정지된 화면에 살아 있는 느낌을 더합니다. 이 단계에서 다루는 움직임은 세 종류입니다. 클릭이나 슬라이더 기능은 아직 없습니다.

따라 하기: 도시의 하루 (공통 실습)

"도시의 하루" 화면에 가벼운 움직임을 넣어 주세요. 이번에는 움직임(모션)만 다룹니다. 슬라이더나 클릭 기능은 아직 넣지 마세요.

- 해: 제자리에서 아주 천천히 위아래로 둥실 떠 있듯이 움직입니다. (6초에 한 번, 위아래 8픽셀 정도, 계속 반복)
- 구름: 2~3개가 화면을 왼쪽에서 오른쪽으로 천천히 흘러갑니다. (한 번 건너는 데 50초 정도, 구름마다 속도를 조금씩 다르게)
- 제목과 소개 문구: 페이지를 열 때 아래에서 살짝 올라오며 나타납니다. (0.8초 동안, 소개 문구는 0.2초 늦게)
- 건물: 페이지를 열 때 아래에서 올라오며 차례대로 나타납니다. (건물마다 0.1초씩 간격)

[조건]
- 모든 움직임은 CSS로 만들어 주세요. 기존 색과 배치는 바꾸지 마세요.
- 중요: 운영체제에서 "움직임 줄이기"(prefers-reduced-motion) 설정을 켠 사람에게는 위의 움직임을 모두 끄고, 완성된 모습 그대로 정지해서 보여 주세요.
- 바꾼 부분을 목록으로 알려 주세요.

내 주제로 바꾸기

[내 과일 이름] 소개 화면에 가벼운 움직임을 넣어 주세요. 이번에는 움직임(모션)만 다룹니다. 클릭 기능은 아직 넣지 마세요.

- 과일 그림: 첫 화면에서 둥실 떠 있듯이 위아래로 움직입니다. (4초에 한 번, 위아래 12픽셀 정도, 계속 반복) 과일 아래 그림자는 과일이 올라가면 작아지고 내려오면 커집니다.
- 제목: 글자가 한 글자씩 차례로 나타납니다. (한 글자당 0.05초 간격)
- 아래 장면 3개: 스크롤해서 화면에 들어올 때마다 글이 아래에서 위로 부드럽게 나타납니다. (0.8초 동안)
- 배경색: 장면이 바뀔 때마다 [첫 번째 색, 예: 연한 분홍]에서 [두 번째 색, 예: 연한 노랑]으로 2초에 걸쳐 서서히 바뀝니다.

[조건]
- 가능하면 CSS로 만들고, 스크롤에 맞춘 등장 효과만 최소한의 JavaScript를 쓰세요. 기존 색과 배치는 바꾸지 마세요.
- 중요: 운영체제에서 "움직임 줄이기"(prefers-reduced-motion) 설정을 켠 사람에게는 위의 움직임을 모두 끄고, 완성된 모습 그대로 정지해서 보여 주세요.
- 바꾼 부분을 목록으로 알려 주세요.

"심해 탐험" 화면에 가벼운 움직임을 넣어 주세요. 이번에는 움직임(모션)만 다룹니다. 스크롤에 따라 바뀌는 기능과 클릭 기능은 아직 넣지 마세요.

- 수면: 물결이 천천히 좌우로 일렁입니다. (8초에 한 번, 아주 약하게)
- 기포: 작은 기포 8~10개가 아래에서 위로 천천히 올라가며 사라집니다. (기포마다 크기와 속도를 다르게, 올라가는 데 6~12초)
- 물고기: 바닷속 구간에서 작은 물고기 몇 마리가 서로 다른 속도로 좌우로 헤엄칩니다. (한 번 건너는 데 15~30초)
- 심해 구간: 은은한 빛 점 몇 개가 느리게 깜빡입니다. (4초에 한 번, 아주 약하게)
- 제목과 안내 문구: 페이지를 열 때 아래에서 살짝 올라오며 나타납니다. (0.8초 동안)

[조건]
- 모든 움직임은 CSS로 만들어 주세요. 기존 색과 배치는 바꾸지 마세요.
- 중요: 운영체제에서 "움직임 줄이기"(prefers-reduced-motion) 설정을 켠 사람에게는 위의 움직임을 모두 끄고, 완성된 모습 그대로 정지해서 보여 주세요.
- 바꾼 부분을 목록으로 알려 주세요.

움직임 줄이기 설정을 켠 사람도 배려하기

위 프롬프트에는 "움직임 줄이기 설정을 켠 사람에게는 움직임을 끄세요"라는 부탁이 들어 있습니다. 이 한 줄이 왜 중요한지 알아 둡시다.

내 PC에서 직접 확인해 볼 수도 있습니다. Windows 11에서는 아래 순서입니다. 설정을 바꾼 뒤 사이트를 새로고침하면 움직임이 멈춘 모습을 볼 수 있습니다.

1. Windows 설정
2. 접근성
3. 시각 효과
4. 애니메이션 효과 끄기

Mac은 시스템 설정의 손쉬운 사용(Accessibility)에서 디스플레이 또는 동작 항목의 "동작 줄이기"(Reduce motion)를 켭니다. iPhone은 설정, 손쉬운 사용, 동작에서 "동작 줄이기"를 켜고, Android는 설정, 접근성에서 "애니메이션 제거" 항목을 찾아보세요. 기기와 버전마다 메뉴 이름이 조금 다를 수 있습니다.

이미 움직임까지 만들어 놓고 이 배려를 빠뜨렸다면, 아래처럼 나중에 부탁해도 됩니다.

지금 만든 모든 움직임(반복되는 움직임, 등장 효과, 색 변화)에 "움직임 줄이기" 설정(prefers-reduced-motion)을 켠 사람을 배려하는 처리를 추가해 주세요.
그 설정을 켠 사람에게는 움직임을 모두 끄고, 완성된 모습 그대로 정지해서 보여 주세요.
설정을 끈 사람에게 보이는 지금의 화면은 바꾸지 마세요. 추가한 부분을 목록으로 알려 주세요.

결과 확인하기

1단계에서 배운 대로 미리보기(또는 index.html 더블클릭)로 엽니다. 이미 열려 있는 미리보기는 자동으로 바뀌지 않을 수 있으니 새로고침(F5)을 한 번 누르세요. 움직임은 눈으로 봐야 알 수 있으므로, 첫 화면을 열고 10초쯤 가만히 지켜보세요.

잘 안 될 때 고치는 프롬프트

움직임이 너무 빠르고 어지럽습니다.
- 해의 둥실거림을 지금보다 두 배 느리게, 움직이는 폭은 절반으로 줄여 주세요.
- 구름은 지금보다 세 배 천천히 흐르게 해 주세요.
- 다른 움직임은 그대로 두세요.

미리보기에서 움직임이 하나도 보이지 않습니다. 제 PC의 "움직임 줄이기" 설정은 꺼져 있습니다.
미리보기에서 직접 확인하고, 움직임이 동작하지 않는 원인을 쉬운 말로 설명한 뒤 고쳐 주세요.
고친 뒤에는 어떤 움직임이 어디에서 보여야 하는지 알려 주세요.

휴대폰에서 화면이 버벅입니다. 움직임이 너무 많은 것 같습니다.
움직임의 개수를 꼭 필요한 것만 남기고 줄여 주세요. 어떤 것을 남기고 어떤 것을 없앴는지 알려 주세요.
남기는 움직임은 화면이 덜 무겁게 느껴지는 방식(위치 이동, 투명도 변화 중심)으로 바꿔 주세요.

2단계 체크리스트

• 새로고침하면 글자와 그림이 부드럽게 나타난다
• 가만히 있어도 화면 일부가 은은하게 움직인다
• "움직임 줄이기" 설정을 켜 보고, 움직임이 멈추는 것을 확인했다 (확인 뒤 설정을 되돌렸다)
• 마음에 드는 상태에서 "지금 상태 저장(커밋)"을 부탁했다

3단계. 클릭과 스크롤에 반응하는 기능 넣기

이 단계의 목표

화면이 혼자 움직이는 데서 한 걸음 더 나아가, 내 손의 움직임에 화면이 대답하게 만듭니다. 이 단계부터 사이트가 "보는 것"에서 "만지는 것"으로 바뀝니다. 이 교육에서 가장 재미있는 구간입니다.

따라 하기: 도시의 하루 (공통 실습)

1. 3-1. 시간 슬라이더와 하늘, 해와 달

   "도시의 하루"에 시간 슬라이더를 만들어 주세요. 이번에는 슬라이더와 하늘, 해와 달만 다룹니다. 창문 불빛과 자동차는 다음에 부탁할 거예요.
   
   - 화면 아래의 빈 자리에 가로 슬라이더를 만듭니다. 범위는 오전 6시부터 밤 12시까지이고, 처음 위치는 낮 12시입니다.
   - 슬라이더 위에 지금 시각을 "오후 6시"처럼 크게 보여 주세요. 시각에 따라 "아침", "낮", "저녁", "밤" 글자도 같이 바뀝니다.
   - 시각이 바뀌면 하늘 색이 끊김 없이 이어서 바뀝니다. 아침은 연한 분홍빛 하늘, 낮은 맑은 파랑, 저녁은 주황에서 보라, 밤은 짙은 남색입니다.
   - 해는 오후로 갈수록 내려가서 저녁에 지평선 아래로 사라지고, 밤에는 달이 떠오릅니다.
   - 건물 색도 시각에 맞춰 조금씩 어두워집니다.
   - 슬라이더는 마우스뿐 아니라 휴대폰 터치와 키보드 방향키로도 움직여야 합니다.
   - 색 전환은 갑자기 바뀌지 않고, 슬라이더를 움직이는 속도에 맞춰 부드럽게 이어져야 합니다.
   - 기존 모션(구름, 해의 둥실거림)과 "움직임 줄이기" 배려는 그대로 유지해 주세요.

   이렇게 되면 성공입니다

   슬라이더를 왼쪽 끝에서 오른쪽 끝으로 천천히 끌어 보세요. 하늘이 분홍에서 파랑, 주황, 보라, 남색 순서로 이어서 바뀌고, 해가 지고 달이 떠야 합니다. 슬라이더 옆의 시각 글자가 함께 바뀌어야 합니다. 방향키(← →)로도 움직이는지 확인해 보세요.

   잘 되면 4번 원칙대로 지금 상태를 저장(커밋)해 두세요. 메시지는 "시간 슬라이더 추가"처럼 짧게 하면 됩니다.

2. 3-2. 창문 불빛

   이제 창문 불빛을 넣어 주세요. 슬라이더와 하늘 기능은 그대로 두세요.
   
   - 모든 건물에 창문이 보이도록 해 주세요. (건물마다 8~20개 정도)
   - 낮에는 창문이 어두운 유리 색입니다. 오후 5시쯤부터 창문이 하나씩 따뜻한 노란색으로 켜지기 시작해서, 밤 10시에는 70퍼센트 정도가 켜져 있습니다.
   - 창문은 켜지는 순서가 무작위처럼 보이되, 슬라이더를 앞뒤로 움직여도 같은 시각이면 항상 같은 창문이 켜져 있어야 합니다.
   - 켜질 때는 0.5초에 걸쳐 부드럽게 밝아집니다.
   - 아침 6시에는 다시 대부분 꺼져 있습니다.
   - 기존 기능과 "움직임 줄이기" 배려는 그대로 유지해 주세요.

   이렇게 되면 성공입니다

   슬라이더를 저녁 쪽으로 움직이면 창문이 하나둘 노랗게 켜지고, 밤에는 건물마다 불빛이 반짝입니다. 슬라이더를 되돌리면 창문이 다시 꺼집니다. 낮에는 불빛이 거의 보이지 않아야 합니다.

3. 3-3. 자동차

   도로 위에 자동차를 한 대 넣어 주세요. 다른 기능은 그대로 두세요.
   
   - 자동차는 단순한 도형(몸체와 바퀴 두 개)으로 그리고, 눈에 띄는 색(예: 빨강)으로 해 주세요.
   - 도로를 왼쪽에서 오른쪽으로 달려 화면 밖으로 나가면, 다시 왼쪽에서 나타납니다. (한 바퀴에 20초)
   - 저녁 6시 이후에는 자동차 앞에 노란 불빛(헤드라이트)이 켜집니다.
   - 자동차를 누르면(터치 포함) 말풍선 "빵!"이 잠깐 나타나고 통통 튀는 움직임이 한 번 나옵니다. 소리는 내지 마세요.
   - "움직임 줄이기" 설정을 켠 사람에게는 자동차가 도로 가운데에 멈춰 있게 해 주세요.

   이렇게 되면 성공입니다

   빨간 자동차가 도로를 달려 화면 밖으로 나갔다가 다시 나타납니다. 슬라이더를 저녁 이후로 옮기면 앞쪽에 노란 불빛이 켜지고, 자동차를 누르면 "빵!"이 나옵니다.

내 주제로 바꾸기

[내 과일 이름] 화면에 "누르면 단면이 보이는" 기능을 넣어 주세요.

- 첫 화면의 [내 과일 이름] 그림을 누르면(터치 포함) 반으로 갈라진 단면 그림으로 부드럽게 바뀝니다. (0.6초 동안, 살짝 커지면서 바뀝니다)
- 단면 그림 옆에 짧은 설명 두 줄이 나타납니다. (단면에서 보이는 특징 위주로, 예: [씨앗의 모양, 과육의 색])
- 한 번 더 누르면 원래 모습으로 돌아갑니다.
- 처음 열었을 때 "[내 과일 이름]을 눌러 보세요"라는 작은 안내 글을 보여 주고, 한 번 누른 뒤에는 사라지게 해 주세요. 마우스를 올리면 손가락 모양 커서가 나오게 해 주세요.
- 키보드로도 누를 수 있어야 합니다. (Tab 키로 이동한 뒤 Enter 키)
- 단면 그림은 사진 파일 없이 CSS와 SVG로 그려 주세요.
- 기존 움직임과 "움직임 줄이기" 배려는 그대로 유지해 주세요.

"심해 탐험"에 스크롤 깊이에 따라 바뀌는 기능을 넣어 주세요. 생물 클릭은 다음에 부탁할 거예요.

- 화면 오른쪽 위(휴대폰에서는 화면 위쪽)에 현재 수심을 보여 주는 표시를 고정해 주세요. 맨 위에서는 "수심 0m"이고, 아래로 스크롤할수록 숫자가 올라가서 맨 아래에서는 "수심 1,000m"가 됩니다.
- 구간은 세 개입니다. 수면 근처(0~200m), 바닷속(200~600m), 심해(600~1,000m). 구간이 바뀔 때 구간 이름 글자가 크게 나타났다가 사라집니다.
- 스크롤하는 동안 배경색이 구간에 맞춰 끊김 없이 더 어두워집니다.
- 심해 구간에서는 은은한 빛 점이 더 많아집니다.
- 기존 움직임과 "움직임 줄이기" 배려는 그대로 유지해 주세요.

이제 생물 3종을 넣고, 누르면 소개가 열리게 해 주세요.

- 수면 근처에 [생물 1, 예: 작은 물고기 떼], 바닷속에 [생물 2, 예: 해파리], 심해에 [생물 3, 예: 아귀]를 단순한 그림(CSS와 SVG)으로 보여 주세요.
- 생물을 누르면(터치 포함) 화면 가운데에 소개 카드가 열립니다. 카드에는 이름, 사는 깊이, 한 줄 설명을 넣어 주세요.
- 카드는 닫기 버튼, 카드 바깥을 누르기, 키보드 Esc 키 중 어느 것으로도 닫힙니다.
- 카드가 열려 있는 동안 뒤 화면은 살짝 어두워집니다.
- 소개 문구는 과장하지 말고 확실한 내용만 써 주세요. 확실하지 않은 숫자는 넣지 말고, 제가 사실을 더 확인해야 할 부분이 있으면 마지막에 알려 주세요.
- 기존 기능과 "움직임 줄이기" 배려는 그대로 유지해 주세요.

결과 확인하기

이번에는 눈으로 보는 것에 더해 직접 만져 보는 것이 확인입니다. 미리보기 창에서 슬라이더를 끌어 보고, 과일이나 생물을 눌러 보고, 스크롤을 내려 보세요. 가능하면 내 휴대폰에서도 열어 손가락으로 해 보는 것이 가장 정확합니다(휴대폰에서 여는 방법은 4단계에서 다룹니다). 기능 하나가 끝날 때마다 "지금 상태 저장(커밋)"을 부탁하는 것도 잊지 마세요.

잘 안 될 때 고치는 프롬프트

시간 슬라이더를 움직여도 하늘 색이 바뀌지 않습니다.
미리보기에서 슬라이더를 직접 움직여 보고, 오류 메시지가 있으면 확인해서 원인을 쉬운 말로 설명한 뒤 고쳐 주세요.
고친 뒤에는 오전 6시, 낮 12시, 저녁 6시, 밤 12시 네 지점에서 하늘 색이 어떻게 보이는지 직접 확인한 결과를 알려 주세요.

[과일 그림 / 생물 / 자동차]를 눌러도 아무 일이 일어나지 않습니다.
미리보기에서 직접 눌러 보고 원인을 찾아 고쳐 주세요.
다른 요소가 그 위를 덮어서 눌리지 않는 것은 아닌지, 휴대폰 터치에서도 동작하는지도 함께 확인해 주세요.

슬라이더(또는 스크롤)를 움직이면 색이 뚝뚝 끊기듯 갑자기 바뀝니다.
색이 부드럽게 이어서 바뀌도록 고쳐 주세요. 특히 [저녁에서 밤으로 넘어가는 구간]을 가장 자연스럽게 해 주세요.
다른 기능은 그대로 두세요.

휴대폰에서 시간 슬라이더를 손가락으로 움직이기가 어렵습니다. 슬라이더를 움직일 때 화면이 같이 스크롤되기도 합니다.
슬라이더의 손잡이를 손가락으로 잡기 쉽게 지금보다 크게 하고, 슬라이더를 움직이는 동안에는 화면이 같이 스크롤되지 않게 해 주세요.
가로 360px 폭 기준으로 확인한 결과를 알려 주세요.

3단계 체크리스트

• 사용자의 행동(슬라이더, 클릭, 스크롤) 하나에 화면이 바뀌는 것을 내 눈으로 확인했다
• 변화가 갑자기 툭 바뀌지 않고 부드럽게 이어진다
• 휴대폰 폭에서도 손가락(터치)으로 조작할 수 있다
• (심해 주제) 생물 소개 문구의 사실을 한 번 확인했다
• 기능 하나가 끝날 때마다 "지금 상태 저장(커밋)"을 부탁했다

4단계. 배포: 내 주소로 공개하고 휴대폰으로 확인하기

이 단계의 목표

지금까지 내 PC 안에서만 보이던 사이트를 인터넷 주소로 공개합니다. 4장에서 이미 연습한 흐름이라 어렵지 않습니다. 이제는 Claude에게 한 번만 부탁하면 됩니다.

따라 하기: 도시의 하루 (공통 실습)

지금까지 만든 내용을 GitHub에 올려 주세요. 아래 순서로 진행해 주세요.

1. 올리기 전에, 바뀐 파일 목록을 쉬운 말로 알려 주세요. 비밀번호, 인증 키, 개인정보, 회사 자료로 보이는 파일이 있으면 올리지 말고 먼저 알려 주세요.
2. 미리보기용 작업 설정 폴더(.claude)는 올라가지 않도록 .gitignore에 넣어 주세요.
3. 커밋 메시지는 "도시의 하루: 시간 슬라이더, 창문 불빛, 자동차 추가"로 해서 저장(커밋)해 주세요.
4. 4장에서 연결한 저장소의 기본 브랜치(보통 main)에 올려 주세요(푸시).
5. 끝나면 GitHub 저장소 주소와, Vercel에서 어디를 보면 되는지 알려 주세요.

2번은 미리보기를 켜기 위한 작업용 설정 파일이 GitHub와 내 사이트에 그대로 올라가지 않게 하는 조치입니다. 폴더가 없으면 Claude가 알아서 넘어갑니다.

내 주제로 바꾸기

지금까지 만든 내용을 GitHub에 올려 주세요. 순서는 바뀐 파일 목록 확인, 저장(커밋), 푸시입니다.
비밀번호, 인증 키, 개인정보, 회사 자료로 보이는 파일이 있으면 올리지 말고 먼저 알려 주세요. 미리보기용 작업 설정 폴더(.claude)는 .gitignore에 넣어 주세요.
커밋 메시지는 "[내 과일 이름] 소개 사이트: 둥실 모션과 단면 전환 추가"로 해 주세요.
끝나면 GitHub 저장소 주소와, Vercel에서 어디를 보면 되는지 알려 주세요.

지금까지 만든 내용을 GitHub에 올려 주세요. 순서는 바뀐 파일 목록 확인, 저장(커밋), 푸시입니다.
비밀번호, 인증 키, 개인정보, 회사 자료로 보이는 파일이 있으면 올리지 말고 먼저 알려 주세요. 미리보기용 작업 설정 폴더(.claude)는 .gitignore에 넣어 주세요.
커밋 메시지는 "심해 탐험: 수심 구간과 생물 소개 카드 추가"로 해 주세요.
끝나면 GitHub 저장소 주소와, Vercel에서 어디를 보면 되는지 알려 주세요.

결과 확인하기: 올라가는 것을 따라가 보기

1. Claude가 허락을 구하면 내용을 읽고 허용하기

   푸시처럼 인터넷으로 무언가를 보내는 동작에서는 Claude가 "이 명령을 실행해도 될까요?"라고 허락을 묻는 창을 띄울 수 있습니다(권한 모드에 따라 다릅니다). 명령 내용을 한 번 읽어 보세요. git commit, git push처럼 방금 부탁한 일과 맞는 내용이면 허용(Allow 또는 Accept)하면 됩니다. 버튼 이름은 화면과 버전에 따라 조금 다를 수 있습니다. 부탁하지 않은 이상한 명령이라면 허용하지 말고 이유를 물어보세요.

2. Claude의 마무리 보고 읽기

   푸시가 끝나면 Claude가 "올렸습니다"라고 알리며 GitHub 저장소 주소를 알려 줍니다. 그 주소를 누르면 GitHub의 저장소 화면이 열리고, 파일 목록 맨 위에 방금 붙인 커밋 메시지가 보이면 성공입니다. 이 확인은 선택이지만 한 번 보면 안심이 됩니다.

3. Vercel에서 자동 배포가 진행되는 것 보기

   Vercel 사이트에 로그인한 뒤 내 프로젝트를 엽니다. 화면 문구는 업데이트로 조금 다를 수 있습니다.

   1. vercel.com 로그인
   2. Dashboard의 내 프로젝트 클릭
   3. Deployments (위쪽 탭 또는 왼쪽 메뉴)

   가장 위쪽에 방금 올린 커밋 메시지가 붙은 줄이 새로 생겨 있습니다. 상태는 처음에 Building(만드는 중)으로 보이다가 보통 1분 안팎(사이트가 단순하면 더 빠릅니다)에 Ready(완료)로 바뀝니다. 이 줄에는 Production 표시가 붙어 있어야 하는데, 이것은 "모두가 보는 실제 주소에 반영되었다"는 뜻입니다.

4. 내 사이트 열어 보기

   프로젝트 화면의 Visit 버튼을 누르거나, 화면에 보이는 Domains 칸의 ~.vercel.app 주소를 누르세요. 새 탭에서 내가 만든 사이트가 열립니다. 이 주소가 내 사이트의 진짜 주소입니다.

   열었더니 Vercel 로그인 화면이 나온다면

   배포마다 붙는 길고 복잡한 임시 주소(글자와 숫자가 길게 붙은 주소)를 연 경우일 수 있습니다. 이런 임시 주소는 Vercel의 보호 기능 때문에 로그인을 요구할 수 있습니다. 프로젝트 화면의 Domains 칸에 있는 짧은 ~.vercel.app 주소를 쓰세요. 동료에게 보낼 주소도 이 주소입니다.

5. 휴대폰으로 열어 보기

   주소를 휴대폰으로 가져가는 방법은 여러 가지입니다. 메신저의 "나에게 보내기"(카카오톡의 나와의 채팅 등), 이메일, 휴대폰과 동기화되는 브라우저의 "다른 기기로 보내기" 중 편한 것을 쓰세요. 회사 보안 정책이 있다면 허용된 수단만 쓰세요. 주소를 눌러 열고 아래를 확인합니다.

   • 첫 화면이 뜨고, 글이 잘리거나 옆으로 밀리지 않는가
   • 슬라이더, 클릭, 스크롤이 손가락으로 잘 되는가
   • 휴대폰을 가로로 돌렸을 때도 괜찮은가
   • 글자가 너무 작거나 버튼이 너무 작지는 않은가

잘 안 될 때 고치는 프롬프트

GitHub에 올리는 중에 오류가 났습니다. 오류 문구는 아래에 그대로 붙여넣습니다.

[오류 문구 붙여넣기]

원인을 쉬운 말로 설명하고, GitHub 로그인(인증) 상태부터 확인해 주세요.
고칠 때는 제 비밀번호나 인증 키를 대화에 입력하라고 요구하지 말고, 로그인 창을 열어 주는 방식으로 진행해 주세요.

GitHub에는 올라갔는데 Vercel 사이트가 예전 모습 그대로입니다.
가장 최근 커밋이 GitHub에 올라가 있는지 확인해 주세요.
그다음 제가 Vercel 화면에서 어디를 보고 무엇을 확인하면 되는지 순서대로 알려 주세요.

Vercel 배포가 Error로 끝났습니다. 아래는 Vercel 화면의 오류 로그입니다.

[로그 붙여넣기]

원인을 쉬운 말로 설명해 주세요. 이 프로젝트는 빌드 도구 없이 index.html이 폴더 맨 위에 있는 정적 사이트입니다. 그 구조가 맞는지도 확인하고, 필요한 수정을 해서 다시 올려 주세요.

4단계 체크리스트

• "GitHub에 올려 주세요"를 부탁하고, 올리기 전에 파일 목록을 확인했다
• Vercel Deployments 화면에서 새 줄이 생겨 Ready가 된 것을 봤다
• 내 vercel.app 주소(Domains 칸의 짧은 주소)를 PC에서 열어 봤다
• 같은 주소를 휴대폰에서 열고 손가락으로 조작해 봤다
• 비밀번호, 개인정보, 회사 자료가 사이트나 README에 들어 있지 않다

5단계. 디자인 개선: 비평 받고, 다듬고, 분위기 바꿔 보기

이 단계의 목표

배포한 사이트를 직접 써 보고, 아쉬운 곳을 한 번 더 고칩니다. 사이트를 만든 직후에는 잘 보이지 않던 불편함이 배포하고 나면 보입니다. 이 단계에서 세 가지 전문 스킬이 도와줍니다.

먼저, 내가 직접 써 보고 메모하기

스킬에게 부탁하기 전에, 4단계에서 만든 내 주소를 PC와 휴대폰에서 각각 2분쯤 직접 써 보세요. 그리고 아래 세 가지를 메모해 둡니다. 이 메모가 이후 부탁의 재료가 되고, 사용자의 눈으로 내 작품을 보는 연습이 됩니다.

• 마음에 드는 점 한 가지
• 불편하거나 헷갈리는 점 한 가지 (예: 글자가 작다, 슬라이더가 어디 있는지 모르겠다)
• 아쉬운 점 한 가지 (예: 색이 칙칙하다, 너무 밋밋하다)

따라 하기: 도시의 하루 (공통 실습)

1. 5-1. 비평 받기 (critique)

   비평 단계에서는 일부러 고치지 못하게 합니다. 의견을 먼저 읽고, 내가 어떤 것을 고칠지 고르는 것이 이 방식의 핵심입니다. AI가 알아서 이것저것 바꾸면 내가 의도한 모습에서 멀어질 수 있습니다.

   /impeccable critique index.html
   지금 사이트([내 사이트 이름, 예: 도시의 하루])를 디자인 전문가의 눈으로 비평해 주세요. 아직 고치지는 마세요.
   
   - 잘된 점 3가지
   - 아쉬운 점 5가지: 중요한 순서대로, 각각 이유를 한 줄로
   - 효과가 가장 큰 개선 3가지만 번호를 붙여 추천
   
   휴대폰 화면 기준으로 봐 주시고, 코딩을 모르는 사람이 이해할 수 있는 쉬운 말로 써 주세요.
   참고로 제가 직접 써 보고 느낀 점은 다음과 같습니다.
   - 마음에 든 점: [내 메모]
   - 불편한 점: [내 메모]
   - 아쉬운 점: [내 메모]

   결과를 읽고, 내 눈으로 보아도 맞는 지적인지 확인하세요. 그 가운데 고치고 싶은 번호만 고릅니다. 모든 의견이 정답은 아닙니다. 내 의도와 다르면 고르지 않아도 됩니다.

2. 5-2. 다듬기 (polish)

   /impeccable polish index.html
   방금 비평에서 추천한 개선 중 제가 고른 [번호, 예: 1번과 3번]만 적용해 주세요.
   
   - 슬라이더, 창문 불빛, 자동차 같은 기능은 그대로 동작해야 합니다.
   - "움직임 줄이기" 배려도 그대로 유지해 주세요.
   - 바꾼 부분을 목록으로 알려 주세요.
   - 다 바꾼 뒤 미리보기에서 휴대폰 폭과 PC 폭을 모두 확인한 결과를 알려 주세요.

   이렇게 되면 성공입니다

   Claude가 바꾼 부분을 목록으로 알려 주고, 미리보기에서 보면 간격, 글자 크기, 정렬이 전보다 정돈되어 보입니다. 슬라이더와 자동차 같은 기능은 그대로 동작합니다. 마음에 들면 저장(커밋)하세요. 마음에 안 들면 5번 원칙대로 되돌려 달라고 하세요.

3. 5-3. 색과 글꼴 바꾸기 (ui-ux-pro-max)

   "색만 바꿨는데 사이트가 전혀 다른 분위기가 됐다"는 경험을 해 보는 단계입니다. 먼저 후보를 보고 내가 고르게 하세요.

   /ui-ux-pro-max:ui-ux-pro-max
   "도시의 하루" 사이트의 색과 글꼴을 바꿔 보려고 합니다. 분위기 후보 두 가지를 제안해 주세요.
   
   - 후보 A "따뜻한 골목의 저녁"
   - 후보 B "네온사인이 켜진 밤거리"
   
   후보마다 아래를 알려 주세요.
   1. 색 5개 (배경, 글자, 포인트 2개, 강조)와 각 색의 쓰임새
   2. 한글이 잘 보이는 무료 글꼴 조합 (제목용, 본문용), 그리고 그렇게 고른 이유
   3. 글자와 배경의 대비가 읽기에 충분한지 확인한 결과
   
   아직 적용하지 말고, 제가 후보를 고르면 그때 style.css의 색과 글꼴만 바꿔 주세요. 기능과 배치는 바꾸지 마세요.

   Claude가 후보 두 가지를 설명하면, 마음에 드는 쪽을 말해 주세요. 예: "A로 적용해 주세요." 적용 후 미리보기로 확인합니다. 글꼴은 인터넷에서 불러오는 경우가 많으니 처음 열 때 글자가 잠깐 다른 모양으로 보일 수 있습니다. 이것은 정상입니다.

4. 5-4. 분위기가 다른 두 버전을 만들어 비교하기

   같은 내용이라도 분위기를 어떻게 말하느냐에 따라 사이트의 인상이 크게 달라집니다. 두 버전을 나란히 만들어 비교해 보세요. 이때 "고급스럽게", "귀엽게" 같은 모호한 말만 쓰지 말고, 어떻게 달라야 하는지 색, 여백, 글자, 움직임, 말투로 풀어서 말해 주세요.

   요소	차분하고 고급스럽게	귀엽고 장난스럽게
   색	색 수를 적게, 톤을 낮추고 한두 가지 포인트 색만 사용	밝은 색을 여러 가지, 파스텔이나 선명한 원색
   여백	넓게. 요소를 적게 두고 숨 쉴 자리를 줌	빽빽하고 활기 있게. 작은 장식을 여기저기에
   글자	가늘고 크게, 자간을 넉넉하게	굵고 둥근 글씨체
   모서리	직선, 날렵한 모서리	둥글고 말랑한 모서리
   움직임	느리고 은은하게	통통 튀고 살짝 과장되게
   문구	담백한 문장	친근한 말투, 감탄사

   지금 index.html은 그대로 두고, 같은 내용으로 분위기만 다른 두 버전을 만들어 주세요. 슬라이더, 창문 불빛, 자동차 기능은 두 버전 모두 똑같이 동작해야 합니다.
   
   - 버전 A (compare/classy/ 폴더): "세련된 도시 여행 포스터처럼 차분하고 고급스럽게". 색 수는 적게, 여백은 넓게, 글씨는 가늘고 크게, 움직임은 느리고 은은하게, 문구는 담백하게 해 주세요.
   - 버전 B (compare/cute/ 폴더): "귀엽고 장난스럽게". 밝은 색, 둥근 모서리, 통통 튀는 움직임, 말랑하고 둥근 글씨체, 말투는 친근하게 ("짠! 해가 졌어요" 같은 식) 해 주세요.
   
   [조건]
   - 각 폴더 안에서 index.html을 열면 바로 동작하게 해 주세요. (정적 파일만 사용, 빌드 도구 없음)
   - "움직임 줄이기" 배려와 휴대폰 대응은 두 버전 모두 유지해 주세요.
   - 기존 파일은 지우지 마세요.
   - 끝나면 두 버전을 미리보기에서 여는 방법을 알려 주세요.

   두 버전이 만들어지면 각각 열어 보세요. 미리보기에서 열거나 compare/classy/index.html과 compare/cute/index.html 파일을 더블클릭하면 됩니다. 4단계처럼 GitHub에 올리면 사이트 주소 뒤에 /compare/classy/, /compare/cute/를 붙여 휴대폰에서도 열어 볼 수 있습니다.

   비교할 때 사람에게 물어보세요

   두 버전을 동료 한두 명에게 보여 주고 "어느 쪽이 더 [분위기 단어]처럼 느껴져요? 왜요?"라고 물어보세요. 내 눈에는 좋아 보여도 처음 보는 사람은 다르게 느낄 수 있습니다. 어느 쪽이 정답이라는 것은 없고, 이 사이트가 누구를 위한 것인가에 따라 고르면 됩니다. 사람에게 물어서 얻은 한마디가 AI에게 보내는 다음 부탁이 됩니다.

   하나를 골랐다면 아래처럼 부탁하세요. 지금까지의 것은 지우지 않고 보관해 두게 합니다.

   버전 [A 또는 B]로 정했습니다. 이 버전을 메인 화면(index.html)에 적용해 주세요.
   지금의 index.html, style.css, script.js는 지우지 말고 old/ 폴더에 보관해 주세요. compare/ 폴더도 그대로 두세요.
   적용한 뒤에 미리보기에서 슬라이더, 창문 불빛, 자동차가 모두 동작하는지 확인한 결과를 알려 주세요.

내 주제로 바꾸기

5-1(비평)과 5-2(다듬기)는 어떤 주제든 같은 프롬프트를 씁니다. 대괄호 안의 사이트 이름만 바꾸세요. 5-3(색과 글꼴)과 5-4(분위기 비교)는 주제에 맞춰 아래 프롬프트를 쓰세요.

/ui-ux-pro-max:ui-ux-pro-max
[내 과일 이름] 소개 사이트의 색과 글꼴을 바꿔 보려고 합니다. 분위기 후보 두 가지를 제안해 주세요.

- 후보 A: [내 과일 이름]의 실제 색을 살린 선명하고 신선한 팔레트
- 후보 B: 부드러운 파스텔 팔레트

후보마다 색 5개(배경, 글자, 포인트 2개, 강조)와 쓰임새, 한글이 잘 보이는 무료 글꼴 조합(제목용, 본문용)과 고른 이유, 글자와 배경의 대비가 충분한지 확인한 결과를 알려 주세요.
아직 적용하지 말고, 제가 후보를 고르면 그때 style.css의 색과 글꼴만 바꿔 주세요. 기능과 배치는 바꾸지 마세요.

지금 index.html은 그대로 두고, 같은 내용으로 분위기만 다른 두 버전을 만들어 주세요. 과일 클릭으로 단면이 바뀌는 기능과 둥실 떠 있는 움직임은 두 버전 모두 똑같이 동작해야 합니다.

- 버전 A (compare/premium/ 폴더): "고급 식품 광고처럼". 색 수는 적고 톤은 낮게, 여백은 넓게, 글씨는 가늘고 크게, 움직임은 느리고 은은하게, 과일 그림을 광고 사진처럼 크게 보여 주고, 문구는 담백하고 품격 있게 해 주세요.
- 버전 B (compare/cute/ 폴더): "귀엽고 장난스럽게". 밝은 색, 둥근 모서리, 통통 튀는 움직임, 말랑하고 둥근 글씨체, 말투는 친근하게 ("짠! 반으로 갈라 볼까요?" 같은 식) 해 주세요.

[조건]
- 각 폴더 안에서 index.html을 열면 바로 동작하게 해 주세요. (정적 파일만 사용, 빌드 도구 없음)
- "움직임 줄이기" 배려와 휴대폰 대응은 두 버전 모두 유지해 주세요.
- 기존 파일은 지우지 마세요.
- 끝나면 두 버전을 미리보기에서 여는 방법을 알려 주세요.

/ui-ux-pro-max:ui-ux-pro-max
"심해 탐험" 사이트의 색과 글꼴을 바꿔 보려고 합니다. 분위기 후보 두 가지를 제안해 주세요.

- 후보 A: 깊고 차분한 다큐멘터리 느낌의 남색과 청록 팔레트
- 후보 B: 형광 생물이 빛나는 듯한 어둠 속의 네온 팔레트

후보마다 색 5개(배경, 글자, 포인트 2개, 강조)와 쓰임새, 한글이 잘 보이는 무료 글꼴 조합(제목용, 본문용)과 고른 이유, 글자와 배경의 대비가 충분한지 확인한 결과를 알려 주세요.
아직 적용하지 말고, 제가 후보를 고르면 그때 style.css의 색과 글꼴만 바꿔 주세요. 기능과 배치는 바꾸지 마세요.

지금 index.html은 그대로 두고, 같은 내용으로 분위기만 다른 두 버전을 만들어 주세요. 스크롤에 따른 수심 변화와 생물 소개 카드 기능은 두 버전 모두 똑같이 동작해야 합니다.

- 버전 A (compare/documentary/ 폴더): "자연 다큐멘터리처럼 웅장하고 신비롭게". 어두운 남색과 청록 중심, 여백은 넓게, 글씨는 가늘고 크게, 움직임은 느리고 묵직하게, 문구는 차분한 설명체로 해 주세요.
- 버전 B (compare/storybook/ 폴더): "동화책 속 바다처럼 귀엽고 장난스럽게". 밝고 선명한 색, 둥근 모서리, 통통 튀는 움직임, 둥근 글씨체, 생물들에게 말을 거는 듯한 친근한 말투로 해 주세요.

[조건]
- 각 폴더 안에서 index.html을 열면 바로 동작하게 해 주세요. (정적 파일만 사용, 빌드 도구 없음)
- "움직임 줄이기" 배려와 휴대폰 대응은 두 버전 모두 유지해 주세요.
- 기존 파일은 지우지 마세요.
- 끝나면 두 버전을 미리보기에서 여는 방법을 알려 주세요.

impeccable로 더 해 볼 수 있는 것

impeccable에는 비평과 다듬기 말고도 많은 명령이 있습니다. 한 번에 하나씩, 위의 원칙대로 써 보세요. 명령 이름은 스킬의 버전에 따라 달라질 수 있으니, /impeccable을 입력했을 때 보이는 안내를 우선하세요.

결과 확인하기: 최종 배포와 전후 비교

마음에 드는 모습이 되었다면 4단계와 똑같이 GitHub에 올려 배포하세요. 이번에는 커밋 메시지만 바꿉니다. 올린 뒤에는 휴대폰에서 주소를 열어 처음 배포했을 때와 비교해 보세요. 차이가 느껴지면 성공입니다.

디자인을 개선한 지금 상태를 GitHub에 올려 주세요. 순서는 바뀐 파일 목록 확인, 저장(커밋), 푸시입니다.
비밀번호, 인증 키, 개인정보, 회사 자료로 보이는 파일이 있으면 올리지 말고 먼저 알려 주세요.
커밋 메시지는 "[이번에 한 일, 예: 디자인 비평 반영, 색과 글꼴 변경, 분위기 비교 버전 추가]"로 해 주세요.
끝나면 Vercel에서 확인할 곳을 다시 알려 주세요.

잘 안 될 때 고치는 프롬프트

방금 비평이 너무 추상적입니다. 각 지적마다 다음을 알려 주세요.
1. 화면의 어느 부분인지 (예: 제목, 슬라이더 위의 시각 글자)
2. 지금 어떻게 보이는지
3. 어떻게 바꾸면 좋은지, 구체적인 예를 하나
고치지는 말고, 제가 고를 수 있게 번호만 붙여서 알려 주세요.

방금 다듬은 뒤 [슬라이더가 움직이지 않습니다 / 자동차가 사라졌습니다 / 생물을 눌러도 카드가 열리지 않습니다 중 해당되는 것].
먼저 방금 한 변경을 되돌려 주세요. 되돌리기 전에 어떤 부분이 원래대로 돌아가는지 알려 주세요.
그다음 기능은 그대로 두고 "[고르고 싶은 개선 번호]"만 다시 적용해 주세요. 적용한 뒤에는 모든 기능이 동작하는지 미리보기에서 직접 확인해 주세요.

색을 바꾼 뒤 [제목 / 소개 문구 / 슬라이더 위의 시각 글자]가 잘 읽히지 않습니다.
글자색과 배경색의 대비가 충분한지 확인해서, 부족한 곳만 글자를 더 진하게(또는 더 밝게) 고쳐 주세요.
전체 분위기와 다른 색은 바꾸지 마세요. 고친 곳과 이유를 목록으로 알려 주세요.

5단계 체크리스트

• 배포한 내 주소를 PC와 휴대폰에서 직접 써 보고 메모 세 가지를 남겼다
• /impeccable critique로 비평을 받고, 고칠 번호를 내가 골랐다
• /impeccable polish로 다듬은 뒤 기능이 그대로 동작하는지 확인했다
• /ui-ux-pro-max로 색과 글꼴 후보를 받아 하나를 골라 적용했다
• 분위기가 다른 두 버전을 만들어 비교하고, 최종 버전을 정했다
• 최종 버전을 GitHub에 올려 휴대폰에서 다시 확인했다

이 장을 마치며: 전체 체크리스트

아래를 모두 체크했다면 이 장의 목표를 이룬 것입니다. 한두 개가 비어 있어도 괜찮습니다. 9장의 완성 기준과 발표 준비에서 한 번 더 점검하게 됩니다.

• 스킬 세 가지가 보이는 새 세션에서 작업 폴더를 열고, 기획 메모를 README에 남겼다
• 코드를 직접 쓰지 않고, 말로 부탁해서 화면을 만들었다 (1단계)
• 움직임을 넣었고, "움직임 줄이기" 설정을 켠 사람을 배려했다 (2단계)
• 클릭, 슬라이더, 스크롤 중 하나 이상에 화면이 의미 있게 반응한다 (3단계)
• 내 vercel.app 주소가 PC와 휴대폰에서 열린다 (4단계)
• 배포한 뒤 직접 써 보고 연출이나 사용성을 한 번 개선했다 (5단계)
• 잘 된 순간마다 저장(커밋)하고, 막혔을 때 되돌리거나 새 세션에서 이어 가는 방법을 안다

다음 장에서는 8장 hyperframes로 모션 영상으로 사이트와는 다른 종류의 움직임인 짧은 모션 영상을 만들어 봅니다. 완성도를 점검하고 발표를 준비하는 방법은 9장 완성 기준과 발표에 있습니다. 중간에 막혔다면 10장 막혔을 때를 먼저 펼쳐 보세요.