주제 고르기: 10개 후보

이 장에서는 코드를 한 줄도 쓰지 않습니다. 후보를 읽고, 완성 예시를 직접 눌러 보고, 마음에 드는 주제 하나와 그 주제의 첫 프롬프트를 정하면 끝입니다. 정답은 없습니다. 오래 만져도 지겹지 않을 소재가 정답입니다.

1. 왜 이런 사이트인지 이해
2. 10개 후보 훑어보기
3. 완성 예시 눌러 보기
4. 내 주제 정하고 첫 프롬프트 복사

왜 "데이터베이스 없이, 직접 보고 만지는 사이트"인가요?

회원가입, 게시판, 장바구니처럼 정보를 쌓아 두고 다시 꺼내 쓰는 사이트에는 데이터베이스(DB)가 필요합니다. 이런 사이트는 서버, 보안, 개인정보 관리까지 함께 따라와서 첫 실습으로는 무겁습니다. 이 교육에서는 그런 사이트를 만들지 않습니다.

대신 역할을 이렇게 나눕니다.

• 콘텐츠(글, 이미지, 장면 설명)는 프로젝트 파일 안에 넣어 둡니다.
• 화면의 변화(스크롤, 클릭, 슬라이더, 애니메이션)는 내 PC가 아니라 보는 사람의 브라우저가 처리합니다.

그래서 서버를 따로 준비할 필요가 없고, 4장에서 연결한 Vercel로 파일만 올리면 곧바로 전 세계 어디서든 열리는 주소가 생깁니다. 교육의 중심은 아래 흐름 하나입니다.

1. 화면 구성
2. 모션
3. 클릭과 스크롤에 반응하는 기능
4. 배포
5. 디자인 개선

10개 후보 한눈에 보기

처음 나온 아이디어인 "과일 하나를 모션으로 소개하는 사이트"도 그 자체로 아주 좋은 주제여서 1번으로 넣었습니다. 나머지 9개는 같은 방식으로 만들 수 있는 다른 소재들입니다. 파란 배경 카드 3개가 이 교육에서 우선 추천하는 주제입니다. 카드를 훑어보면서 "이거 만들어 보고 싶다" 싶은 것에 마음속으로 별표를 쳐 두세요.

표로 한 번 더 비교하기

카드와 같은 내용을 표로 모았습니다. 두 가지를 비교하며 고를 때 편합니다.

10개 상세 보기와 첫 프롬프트

관심 가는 항목을 눌러 펼쳐 보세요. 각 항목에는 주제 설명, 처음 만들 범위, 넣기 좋은 모션, 계속 발전시킬 부분, 추천 이유와 함께 그대로 복사해서 쓸 수 있는 첫 프롬프트가 들어 있습니다. 실제로 프로젝트 폴더를 열고 붙여넣는 과정은 7장에서 차근차근 진행합니다. 지금은 읽어 보고, 마음에 드는 것의 프롬프트를 메모장에 복사해 두면 됩니다.

[딸기] 하나를 주인공으로 한 소개 사이트의 첫 버전을 만들어 주세요.

장면은 3개입니다.
1. 첫 화면: 큰 [딸기]가 둥실 떠 있고, 제목과 한 줄 소개가 보입니다.
2. 소개 장면: 스크롤하면 소개 글이 한 줄씩 나타나고, [딸기]를 클릭하면 단면 모양으로 바뀝니다.
3. 마무리 장면: 내가 이 과일을 좋아하는 이유와 먹는 방법을 보여 줍니다.

분위기는 [고급 식품 광고처럼 차분하게 / 귀엽고 장난스럽게] 중 하나로 해 주세요.

조건:
- 저는 코딩을 모릅니다. 어려운 말은 쉬운 말로 설명해 주세요.
- 서버나 데이터베이스 없이, 브라우저에서 열리는 HTML, CSS, JavaScript 파일만 쓰세요.
- 처음에는 사진 없이 도형, 색, 글자만으로 그려 주세요.
- 휴대폰 화면에서도 보이게 해 주세요.
- 만들기 전에 꼭 필요한 질문만 3개 이내로 먼저 물어봐 주세요.
- 다 만들면 어떻게 열어서 확인하는지 알려 주세요.

스크롤을 내리면 바닷속으로 점점 내려가는 심해 탐험 사이트의 첫 버전을 만들어 주세요.

구간은 3개입니다.
1. 수면: 밝은 하늘색 배경, 잔잔하게 흔들리는 물결.
2. 바닷속: 배경이 점점 짙은 파랑으로 바뀌고, 물고기가 서로 다른 속도로 지나갑니다. 기포가 위로 떠오릅니다.
3. 심해: 거의 검은 배경에 작은 빛이 반짝이고, 생물이 나타납니다.

생물은 [3종류, 이름은 Claude가 추천]으로 하고, 생물을 누르면 한두 문장짜리 소개 카드가 열리게 해 주세요.
화면 한쪽에 지금 어느 깊이인지 숫자로 보여 주세요.

조건:
- 저는 코딩을 모릅니다. 어려운 말은 쉬운 말로 설명해 주세요.
- 서버나 데이터베이스 없이, 브라우저에서 열리는 HTML, CSS, JavaScript 파일만 쓰세요.
- 처음에는 사진 없이 도형과 여러 겹의 배경색으로 표현해 주세요.
- 휴대폰 화면에서도 보이게 해 주세요.
- 만들기 전에 꼭 필요한 질문만 3개 이내로 먼저 물어봐 주세요.
- 다 만들면 어떻게 열어서 확인하는지 알려 주세요.

도시의 하루 사이트를 만들려고 합니다. 먼저 1단계만 만들어 주세요.

1단계: 낮과 밤 바꾸기
- 화면에 단순한 2D 도시 풍경을 그려 주세요. 건물 5~6개와 길 하나면 충분하고, 모두 네모와 선 같은 단순한 도형으로 그려 주세요.
- 화면 아래에 "낮"과 "밤" 버튼을 만들어 주세요.
- 버튼을 누르면 하늘색이 1초 안팎으로 부드럽게 바뀌고, 낮에는 해, 밤에는 달이 보이게 해 주세요.

조건:
- 저는 코딩을 모릅니다. 어려운 말은 쉬운 말로 설명해 주세요.
- 서버나 데이터베이스 없이, 브라우저에서 열리는 HTML, CSS, JavaScript 파일만 쓰세요.
- 휴대폰 화면에서도 보이게 해 주세요.
- 창문 불빛, 자동차, 날씨는 아직 만들지 마세요. 1단계까지만 만들고, 어떻게 열어서 확인하는지 알려 주세요.

클릭하며 떠나는 우주여행 사이트의 첫 버전을 만들어 주세요.

- 첫 화면: 어두운 우주 배경에 별이 반짝이고, 행성 3개가 각자의 궤도를 따라 천천히 돕니다. 행성은 [태양계 행성 중 좋아하는 3개, 또는 내가 상상한 행성 3개]로 해 주세요.
- 행성을 클릭하면 그 행성이 화면 가득 확대되면서 상세 장면으로 넘어갑니다.
- 상세 장면에는 행성 이름, 한두 문장짜리 소개, "우주로 돌아가기" 버튼이 있습니다.

조건:
- 저는 코딩을 모릅니다. 어려운 말은 쉬운 말로 설명해 주세요.
- 서버나 데이터베이스 없이, 브라우저에서 열리는 HTML, CSS, JavaScript 파일만 쓰세요.
- 처음에는 사진 없이 동그라미와 색, 궤도 선만으로 그려 주세요.
- 휴대폰 화면에서도 보이게 해 주세요.
- 만들기 전에 꼭 필요한 질문만 3개 이내로 먼저 물어봐 주세요.
- 다 만들면 어떻게 열어서 확인하는지 알려 주세요.

[커피] 한 잔이 완성되는 과정을 스크롤로 보여 주는 사이트의 첫 버전을 만들어 주세요.

장면은 4개이고, 스크롤을 내릴 때마다 다음 장면으로 자연스럽게 이어져야 합니다.
1. 원두: 원두가 화면 위에서 하나씩 내려옵니다.
2. 분쇄: 원두가 사라지고 고운 가루가 떨어집니다.
3. 추출: 물줄기가 가루를 지나 아래 컵으로 떨어지고 컵이 조금씩 차오릅니다.
4. 완성: 컵 위로 김이 올라오고 "완성" 문구가 나타납니다.

조건:
- 저는 코딩을 모릅니다. 어려운 말은 쉬운 말로 설명해 주세요.
- 서버나 데이터베이스 없이, 브라우저에서 열리는 HTML, CSS, JavaScript 파일만 쓰세요.
- 처음에는 사진 없이 도형과 색으로 그려 주세요.
- 휴대폰 화면에서도 보이게 해 주세요.
- 만들기 전에 꼭 필요한 질문만 3개 이내로 먼저 물어봐 주세요.
- 다 만들면 어떻게 열어서 확인하는지 알려 주세요.

[운동화] 하나를 분해해서 보여 주는 전시관 사이트의 첫 버전을 만들어 주세요.

- 첫 화면: [운동화]가 가운데에 조립된 모습으로 있고, 아래에 "펼쳐보기" 버튼이 있습니다.
- 부품은 4~5개로 나눠 주세요. 예: [끈, 밑창, 앞코, 뒤꿈치, 안창]. 각 부품은 도형 몇 개를 겹쳐서 단순하게 그려 주세요.
- "펼쳐보기"를 누르면 부품들이 부드럽게 떨어져 나가며 펼쳐집니다.
- 부품을 클릭하면 그 부품만 강조되고, 옆에 이름과 한두 문장짜리 설명이 나타납니다.
- "다시 조립하기" 버튼을 누르면 부품이 제자리로 돌아갑니다.

조건:
- 저는 코딩을 모릅니다. 어려운 말은 쉬운 말로 설명해 주세요.
- 서버나 데이터베이스 없이, 브라우저에서 열리는 HTML, CSS, JavaScript 파일만 쓰세요.
- 휴대폰 화면에서도 보이게 해 주세요.
- 만들기 전에 꼭 필요한 질문만 3개 이내로 먼저 물어봐 주세요.
- 다 만들면 어떻게 열어서 확인하는지 알려 주세요.

선택에 따라 결말이 달라지는 짧은 이야기 사이트의 첫 버전을 만들어 주세요.

이야기: [비 오는 날, 골목 끝에서 이상한 문을 발견한다.]
- 장면은 4~5개, 결말은 2개로 해 주세요.
- 첫 장면 끝에 선택지 3개가 나옵니다: "문을 열어본다", "창문으로 안을 살펴본다", "그냥 지나간다".
- 선택에 따라 다른 장면으로 이동하고, 마지막에는 결말과 "처음부터 다시 읽기" 버튼이 나옵니다.
- 글은 한 줄씩 차례로 나타나게 해 주세요. 장면이 바뀔 때는 배경색이 부드럽게 바뀌게 해 주세요.
- 이야기 내용(장면 글, 선택지, 연결)은 한 파일에 목록처럼 모아 두어서, 나중에 제가 장면을 쉽게 추가할 수 있게 해 주세요.

조건:
- 저는 코딩을 모릅니다. 어려운 말은 쉬운 말로 설명해 주세요.
- 서버나 데이터베이스 없이, 브라우저에서 열리는 HTML, CSS, JavaScript 파일만 쓰세요.
- 소리는 넣지 마세요.
- 휴대폰 화면에서도 보이게 해 주세요.
- 다 만들면 어떻게 열어서 확인하는지 알려 주세요.

빛과 색을 직접 만져 보는 실험실 사이트의 첫 버전을 만들어 주세요.

- 어두운 배경 위에 색이 있는 빛(큰 동그라미) 3개를 두세요. 색은 [빨강, 초록, 파랑]입니다.
- 빛이 서로 겹치는 부분은 색이 섞여 보이게 해 주세요.
- 마우스나 손가락으로 빛을 끌어서 위치를 옮길 수 있게 해 주세요.
- 화면 아래에 밝기 조절 슬라이더를 만들어서, 움직이면 3개 빛이 함께 밝아지고 어두워지게 해 주세요.
- 배경색을 바꾸는 버튼도 2~3개 만들어 주세요.

조건:
- 저는 코딩을 모릅니다. 어려운 말은 쉬운 말로 설명해 주세요.
- 서버나 데이터베이스 없이, 브라우저에서 열리는 HTML, CSS, JavaScript 파일만 쓰세요.
- 휴대폰 화면에서도 손가락으로 조작할 수 있게 해 주세요.
- 다 만들면 어떻게 열어서 확인하는지 알려 주세요.

마법 버튼 놀이터 사이트의 첫 버전을 만들어 주세요.

- 화면 가운데에 색색의 도형 10개 정도가 흩어져 있습니다. 동그라미, 네모, 세모를 섞어 주세요.
- 화면 아래에 버튼 4개가 있습니다.
  1. "무중력": 도형들이 천천히 둥실 떠오릅니다.
  2. "젤리": 도형들이 말랑하게 늘어났다 줄어들며 흔들립니다.
  3. "폭죽": 화면의 아무 곳이나 누르면 그 위치에서 색 조각이 퍼집니다.
  4. "다시 모으기": 모든 도형이 원래 자리로 돌아옵니다.
- 효과는 눌러서 켜고, 한 번 더 누르면 꺼집니다.

조건:
- 저는 코딩을 모릅니다. 어려운 말은 쉬운 말로 설명해 주세요.
- 서버나 데이터베이스 없이, 브라우저에서 열리는 HTML, CSS, JavaScript 파일만 쓰세요.
- 휴대폰 화면에서 손가락으로 눌러도 되게 해 주세요.
- 다 만들면 어떻게 열어서 확인하는지 알려 주세요.

한 버튼으로 하는 타이밍 게임의 첫 버전을 만들어 주세요.

규칙:
- 화면에 큰 원이 있고, 바늘이 원을 따라 계속 돕니다.
- 원 위의 한 구간이 목표 영역(다른 색)으로 표시됩니다.
- "멈추기" 버튼(또는 화면 터치, 스페이스바)을 누르면 바늘이 멈춥니다. 바늘이 목표 영역 안에서 멈추면 성공입니다.
- 성공하면 점수가 1점 오르고, 원 주위로 파동이 퍼집니다. 다음 판은 바늘이 조금 더 빨라집니다.
- 실패하면 화면이 짧게 흔들리고 "다시 시작" 버튼이 나옵니다.
- 현재 점수를 화면 위쪽에 크게 보여 주세요. 속도 단계는 3단계로 해 주세요.

조건:
- 저는 코딩을 모릅니다. 어려운 말은 쉬운 말로 설명해 주세요.
- 서버나 데이터베이스 없이, 브라우저에서 열리는 HTML, CSS, JavaScript 파일만 쓰세요.
- 휴대폰 화면에서 손가락으로 눌러서 할 수 있게 해 주세요.
- 다 만들면 어떻게 열어서 확인하는지 알려 주세요.

우선 추천 3개

10개 중 하나를 고르기 어렵다면 아래 3개 중에서 고르세요. 이 교육에서 가장 자세히 안내하는 주제이기도 합니다.

완성 예시를 직접 눌러 보세요

추천 3개는 완성 예시를 만들어 이 교육 사이트에 함께 올려 두었습니다. 카드를 누르면 새로 열립니다. 읽는 것보다 직접 만져 보는 것이 훨씬 빠릅니다. 예시마다 구성이 조금씩 다를 수 있으니 눈에 띄는 것을 자유롭게 눌러 보세요.

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

1. 스크롤해 보기

   예시를 열고 마우스 휠(휴대폰이라면 손가락)로 천천히 내려 보세요. 스크롤하는 동안 글자, 배경, 그림 중 무엇이 어떻게 변하는지 눈여겨보면 됩니다. 심해 예시는 내려갈수록 분위기가 어떻게 달라지는지 보세요.

2. 눌러 보고 움직여 보기

   그림이나 버튼처럼 보이는 곳을 눌러 보세요. 도시 예시라면 화면의 시간을 바꾸는 슬라이더(막대)를 좌우로 끌어 보세요. 눌렀을 때 일어나는 변화가 마음에 드는지, 더 있었으면 하는 반응은 무엇인지 생각해 봅니다.

3. 메모 세 줄 남기기

   메모장에 "마음에 든 점 한 가지", "내 주제라면 바꾸고 싶은 점 한 가지", "이 사이트에 하나만 추가한다면 무엇인지"를 한 줄씩 적어 두세요. 이 메모가 7장에서 Claude에게 부탁할 말의 재료가 됩니다.

공통 실습: 도시의 하루

모두가 같은 출발점에서 시작하는 공통 실습으로 '도시의 하루'를 권합니다. 한 번에 다 만들어 달라고 하지 않고 4단계로 나누는 것이 핵심입니다. 단계마다 눈으로 확인하고 다음 단계로 넘어가면, 어디서 문제가 생겼는지 바로 알 수 있고 AI도 훨씬 정확하게 만듭니다.

1. 1단계: 낮과 밤만 바꾸기

   도시 풍경에 "낮"과 "밤" 버튼 두 개를 달고, 누르면 하늘색이 바뀌게 합니다. 위의 주제 3 첫 프롬프트를 그대로 쓰면 됩니다.

   성공하면: 낮 버튼을 누르면 밝은 하늘색과 해가, 밤 버튼을 누르면 짙은 남색 하늘과 달이 부드럽게 바뀌며 나타납니다.

   안 되면: 파일을 연 상태에서 키보드 F5로 새로고침해 보세요. 그래도 버튼이 반응하지 않으면 아래 말을 그대로 보내세요.

   "밤" 버튼을 눌러도 화면이 바뀌지 않습니다. 코드를 다시 읽고 원인을 찾아 고쳐 주세요.
   무엇을 고쳤는지 쉬운 말로 한두 줄만 알려 주세요.

2. 2단계: 창문 불빛 켜기

   밤이 되면 건물 창문에 불이 들어오게 합니다. 한꺼번에 켜지면 밋밋하니, 하나씩 차례로 켜지게 부탁해 봅니다.

   좋습니다. 이어서 2단계를 만들어 주세요. 지금 있는 것은 그대로 두세요.
   
   2단계: 창문 불빛
   - 건물마다 창문을 여러 개 그려 주세요.
   - 낮에는 창문이 꺼져 있고, "밤"을 누르면 창문이 한꺼번에 켜지지 않고 0.1초 정도씩 시간 차를 두고 하나씩 켜집니다.
   - 일부 창문은 꺼진 채로 남겨 두어서 사람이 사는 느낌이 나게 해 주세요.
   - 창문 색은 따뜻한 노란색으로 해 주세요.
   - "낮"을 누르면 불이 다시 꺼집니다.

   성공하면: 밤으로 바꾸는 순간 창문들이 물결처럼 차례로 노랗게 켜지고, 낮으로 돌아가면 꺼집니다.

   화면이 이상하면: 창문 크기나 색이 마음에 들지 않을 때는 "창문을 더 작게", "불빛을 더 주황색으로"처럼 눈에 보이는 말로 부탁하세요. 숫자나 코드 용어를 몰라도 됩니다.

3. 3단계: 자동차 지나가기

   도로 위로 자동차가 지나가게 합니다. 움직임이 들어가는 첫 단계라서 화면이 갑자기 "살아있다"는 느낌이 드는 순간입니다.

   이어서 3단계를 만들어 주세요. 지금 있는 것은 그대로 두세요.
   
   3단계: 자동차
   - 도로 위를 왼쪽에서 오른쪽으로 지나가는 자동차 한 대를 만들어 주세요. 네모와 동그라미를 조합한 단순한 모양이면 됩니다.
   - 화면 끝에 도착하면 다시 왼쪽에서 천천히 나타나 계속 반복합니다.
   - 밤에는 자동차에 헤드라이트 불빛이 켜진 것처럼 보이게 해 주세요.

   성공하면: 자동차가 도로를 오가고, 밤으로 바꾸면 앞쪽에 밝은 불빛이 생깁니다.

   안 되면: 자동차가 너무 빠르거나 느리면 "속도를 절반으로 줄여 주세요", 도로에서 떠 보이면 "자동차가 도로에 붙어 있게 해 주세요"라고 부탁하세요.

4. 4단계: 날씨 붙이기

   맑음, 비, 눈 중에서 날씨를 고르는 버튼을 만듭니다. 이 단계까지 오면 처음 화면과는 완전히 다른 도시가 됩니다.

   이어서 4단계를 만들어 주세요. 지금 있는 것은 그대로 두세요.
   
   4단계: 날씨
   - 화면 오른쪽 위에 "맑음", "비", "눈" 버튼을 만들어 주세요.
   - "비"를 누르면 짧은 선들이 하늘에서 떨어지고, "눈"을 누르면 작은 동그라미들이 천천히 흩날립니다. "맑음"을 누르면 모두 사라집니다.
   - 날씨는 낮과 밤 어느 쪽에서도 똑같이 동작해야 합니다.
   - 비가 오는 동안 하늘이 조금 더 어두워지게 해 주세요.

   성공하면: 날씨 버튼을 누를 때마다 화면 전체의 분위기가 달라지고, 낮과 밤 버튼과 함께 써도 서로 충돌하지 않습니다.

   안 되면: 비가 낮에는 보이는데 밤에는 안 보이는 식의 문제는 그대로 말하세요. "밤에 비가 보이지 않습니다. 밤에도 보이게 고쳐 주세요."

자유 선택 과제: 좋아하는 소재 하나를 인터랙티브하게 소개하기

공통 실습 대신 각자 자유롭게 고르는 경우의 과제는 한 문장입니다.

"좋아하는 소재 하나를 인터랙티브하게 소개하기"

10개 후보 중 하나를 골라도 되고, 후보에 없더라도 클릭이나 스크롤에 화면이 반응하는 사이트라면 괜찮습니다. 대신 누구의 주제든 아래 공통 완성 기준 4가지를 만족하면 완성으로 봅니다.

• 소개 장면을 완성합니다. 처음부터 끝까지 이어지는 장면이 있어서 무엇을 소개하는 사이트인지 전해집니다.
• 클릭하거나 스크롤하면 의미 있는 변화가 생깁니다. 장식이 아니라, 사용자의 행동에 따라 이야기나 분위기가 달라집니다.
• 모바일에서도 사용할 수 있게 만듭니다. 휴대폰 화면에서 글자가 잘리지 않고 손가락으로 조작됩니다.
• 배포한 뒤 직접 써 보고 연출이나 사용성을 한 번 개선합니다. 만들고 끝내지 않고 한 번 더 다듬습니다.

기준마다 스스로 확인하는 방법은 9장 완성 기준과 발표에서 자세히 설명합니다. 이 기준 덕분에 주제가 달라도 같은 눈금으로 서로의 결과물을 이야기할 수 있습니다.

내 소재 빠르게 고르기

떠오르는 소재가 없다면 "내가 요즘 가장 많이 이야기한 것"을 아래 표에서 찾아 보세요.

1. 소재 정하기(6장)
2. 첫 장면 만들기(7장)
3. 모션 영상 더하기(8장)
4. 점검, 개선, 발표(9장)

주제 고르는 팁

프롬프트 깎기: AI와 묻고 답하며 내 브리프 만들기

주제를 정했다면 바로 만들기 전에 브리프(무엇을 어떻게 만들지 적은 설계서)를 먼저 만듭니다. 처음부터 완벽한 프롬프트를 쓰려고 애쓸 필요는 없습니다. AI에게 나를 인터뷰하게 하고, 대답하고, 다시 다듬는 과정을 몇 번 거치면 막연했던 생각이 구체적인 프롬프트로 깎여 나옵니다. 이 기술은 사이트뿐 아니라 보고서, 기획서 같은 업무 부탁에도 그대로 통합니다.

1. AI가 나를 인터뷰하게 하기

   Code 탭에서 사이트 폴더(문서 아래 ai-site)를 연 새 세션에 아래 부탁을 붙여 넣습니다. Claude가 한 번에 하나씩 질문하고, 보기와 추천을 함께 줍니다. 잘 모르겠으면 "추천대로"라고만 답해도 됩니다.

   지금부터 내가 만들 인터랙티브 사이트의 브리프(설계서)를 같이 만들자. 바로 만들지 말고 먼저 나를 인터뷰해줘.
   
   진행 방식:
   - 질문은 한 번에 하나씩만 해줘.
   - 질문마다 내가 고를 수 있는 보기 2~3개와 너의 추천을 함께 줘. 내가 "추천대로"라고 하면 추천을 쓰면 돼.
   - 8~12개 질문으로 아래 내용을 채워줘: 목적과 보는 사람, 주제와 주인공, 분위기 단어 3개, 색, 장면 구성(장면마다 무엇이 보이는지), 스크롤하면 바뀌는 것, 누르면 바뀌는 것, 들어갈 문구, 하지 말 것, 휴대폰에서의 모습, 완성 기준.
   - 질문이 끝나면 아래 목차 그대로 브리프를 써서 brief-v1.md 로 저장해줘. 아직 사이트는 만들지 마.
   
   브리프 목차:
   1. 제작 목표와 확정 사양
   2. 아트 디렉션(색, 조명, 글꼴)
   3. 장면(장면마다 스크롤 위치, 보이는 것, 움직임, 문구)
   4. 상호작용(스크롤, 누르기, 끌기)
   5. 하지 말 것
   6. 확인 기준
   
   내 주제는 [내 주제]야. 첫 질문부터 시작해줘.

   질문이 끝나면 폴더에 brief-v1.md가 생깁니다. 브리프 목차는 아래 강사 프롬프트와 같게 맞춰 두어서, 나중에 항목별로 비교할 수 있습니다.

2. 막연한 곳 찾아 깎기 (2~3번 반복)

   브리프 v1을 받으면 Claude에게 스스로 막연한 곳을 찾아 다시 묻게 합니다. 한 번 할 때마다 버전이 하나씩 올라갑니다(v2, v3). 버전 파일을 남겨 두면 내 프롬프트가 어떻게 구체적으로 변했는지 나중에 눈으로 볼 수 있습니다.

   brief-v1.md 를 다시 읽고, 아직 막연해서 만드는 사람마다 결과가 달라질 곳을 3군데 찾아줘.
   - 각 곳마다 왜 막연한지 한 줄로 설명하고, 나에게 질문을 하나씩 해줘(보기 2~3개와 추천 포함).
   - 숫자로 정할 수 있는 것(시간, 크기, 개수, 색 코드)은 숫자로 바꾸자고 제안해줘.
   - 내 답을 반영해서 brief-v2.md 로 저장하고, v1과 달라진 점을 목록으로 보여줘.

3. 강사 프롬프트와 비교하기

   아래의 강사 프롬프트(인터랙티브 딸기)를 복사해 비교 부탁의 마지막 줄에 붙여 넣습니다. 내 주제가 딸기가 아니어도 괜찮습니다. 비교하는 것은 내용이 아니라 얼마나 구체적으로 정했는가입니다.

   내 브리프 brief-v2.md 와 아래 강사 프롬프트를 비교해줘. 파일은 고치지 마.
   - 표로 정리해줘: 항목(목표와 사양, 아트 디렉션, 장면, 상호작용, 하지 말 것, 확인 기준) / 내 브리프 / 강사 프롬프트 / 차이.
   - 강사 프롬프트에는 있는데 내 브리프에 없는 것, 내 브리프가 막연하게 쓴 것, 숫자로 정할 수 있었던 것을 각각 3개씩 뽑아줘.
   - 마지막으로 내 브리프에서 가장 먼저 고칠 한 곳을 추천해줘.
   
   [강사 프롬프트를 여기에 붙여넣기]

4. 결과물 비교하기

   강사가 같은 수업에서 상세 프롬프트로 미리 만든 결과물을 보여 줍니다. 수강생은 내 브리프로 만든 결과(7장)와 나란히 놓고 아래 표로 비교해 봅니다.

   비교 항목	내 브리프로 만든 결과	강사 프롬프트로 만든 결과
   첫 5초 인상	무엇을 소개하는지 바로 보이나요?
   반응하는 곳	스크롤, 누르기, 끌기가 몇 군데인가요?
   디테일	그림자, 하이라이트, 글자 크기가 정돈되었나요?
   오류	겹침, 잘림, 동작 안 하는 버튼이 있나요?
   휴대폰	세로 화면에서 깨지지 않나요?
   고친 횟수	원하는 모습까지 몇 번 다시 부탁했나요?

강사 프롬프트: 인터랙티브 딸기

스크롤을 내리면 28초짜리 이야기가 진행되고, 네 군데를 눌러 볼 수 있는 딸기 소개 페이지입니다. 같은 장면으로 영상(MP4)도 함께 만듭니다. 영상만 만드는 버전과 태양계 여행 프롬프트는 8장의 심화 프롬프트에 있습니다.

# 제작 요청: 딸기, 새콤달콤한 설렘과 한 입의 행복 (스크롤 인터랙티브 사이트 + 같은 장면의 영상)

너는 인터랙티브 식품 광고 사이트의 크리에이티브 디렉터이자 모션 디자이너, HTML/CSS/JavaScript와 GSAP 그래픽 엔지니어다.

아래 브리프에 따라 휠과 터치 스크롤로 이야기가 진행되고, 몇 군데를 눌러 볼 수 있는 딸기 소개 웹페이지를 만든다. 그리고 같은 장면을 HyperFrames로 렌더해 28초 MP4도 만든다. 일러스트 제작, 코드 작성, 미리보기, 오류 수정, 영상 렌더까지 수행하라.

## 1. 확정 사양

- 작품명: **딸기: 새콤달콤한 설렘, 한 입의 행복.**
- 핵심 인상: 새콤달콤한 맛이 눈으로 느껴지는 생기, 한 입 직전의 설렘, 베어 문 뒤의 행복.
- 핵심 원리: **장면 전체를 길이 28초짜리 GSAP 타임라인 하나로 만든다.** 웹에서는 스크롤 위치가 이 타임라인의 재생 위치가 되고, 영상에서는 HyperFrames가 같은 타임라인을 0초부터 28초까지 렌더한다.
- 언어: 한국어. 내레이션과 소리 없음(무음 확정).
- 산출물 A, 웹: 내 사이트 폴더 안의 strawberry/ 폴더(주소 /strawberry/). 내 사이트의 첫 페이지는 바꾸지 않는다.
- 산출물 B, 영상: 사이트 폴더 밖의 [영상 작업 폴더]/strawberry-scroll-film/ (예: 문서/ai-video/strawberry-scroll-film/). 1920x1080, 30fps, 정확히 28초(840프레임), 파일명 strawberry-scroll.mp4.
- 로그인, DB, 서버, 빌드 도구(Vite, React, npm 빌드)는 쓰지 않는다. 브라우저에서 바로 열리는 정적 파일만 만든다.

## 2. 파일 구조

    [내 사이트 폴더]/strawberry/
      index.html
      css/style.css
      js/art.js       딸기, 단면, 반쪽, 조각, 물방울, 베어 문 자국 SVG를 만든다. 무작위 배치는 고정된 seed로 결정한다.
      js/scenes.js    buildTimeline(stage, state) 하나를 내보낸다. 28초 타임라인 전체와 장면 상태를 만든다.
      js/web.js       스크롤 연결, 누르기, 끌기, 움직임 줄이기 설정을 처리한다. 웹에만 쓴다.
      vendor/gsap.min.js, vendor/ScrollTrigger.min.js   (로컬 복사본, CDN 쓰지 않음)
      fonts/          Pretendard 글꼴 파일(SIL 오픈 폰트 라이선스)

art.js 와 scenes.js 는 웹과 영상이 함께 쓰는 공유 파일이다. 브라우저에서 모듈 없이도 동작하도록 전역 객체(예: window.Strawberry) 하나에 기능을 붙이는 일반 스크립트로 작성한다.

## 3. 아트 디렉션 (웹과 영상 공통)

사진과 생성 이미지를 쓰지 않는다. 외부 이미지를 내려받지 않는다. 모든 그림은 SVG와 CSS로 직접 그린 매끈한 벡터 일러스트(부드러운 그라데이션, 반사광, 그림자)로, 그림책이나 에디토리얼 잡지 일러스트에 가까운 완성도를 목표로 한다. 단순한 빨간 원, 하트 모양, 이모지를 최종 딸기로 쓰지 않는다.

- 색: 깊은 버건디 #17090F, 딸기 레드 #E3283F, 밝은 코럴 #FF6D75, 따뜻한 크림 #FFF3E8, 잎은 자연스러운 짙은 녹색.
- 조명: 왼쪽 위의 큰 부드러운 주광, 반대편의 얇은 림라이트.
- 씨앗은 크기와 기울기가 조금씩 다르고 격자처럼 보이지 않게, 고정된 seed로 배치한다.
- 깊이: 전경 물방울, 중경 주인공 딸기, 후경 작은 물방울과 배경. 깊이에 따라 이동량, 선명도, 그림자를 다르게 한다.
- 글꼴: 제목과 대형 타이포는 Pretendard ExtraBold(800), 보조 문구는 SemiBold(600).
- 주요 문구와 피사체는 화면 가장자리에서 약 7% 이상 떨어뜨린다.

## 4. 장면 (타임라인 시간 기준, 웹과 영상 공통)

| 시간 | 장면 | 배경 | 내용 | 문구 |
|---|---|---|---|---|
| 0.0~2.5초 | 1. 표면에서 한 알로 | 버건디 | 붉은 표면과 씨앗의 극접사에서 뒤로 빠지며 잎 달린 딸기 한 알 공개. 1.5초 전후에는 딸기임을 알아볼 수 있어야 한다 | "딸기" (1.7초부터) |
| 2.5~6.0초 | 2. 빛을 머금은 한 알 | 버건디에서 크림으로 | 딸기가 오른쪽으로 천천히 이동하며 5~7도 기울어짐. 뒤에 물방울 3개, 앞에 2개. 문구와 함께 작은 반짝임 2~3개가 한 번만 튐 | "새콤달콤" |
| 6.0~10.0초 | 3. 한 알이 펼쳐지는 순간 | 크림 | 세로 하이라이트를 마스크로 온전한 딸기가 반쪽 두 개와 중앙 단면으로 펼쳐짐(왼쪽 반쪽은 왼쪽 위로 약 190px, -12도 / 오른쪽 반쪽은 오른쪽 아래로 약 190px, +10도). 8초부터 1초 이상 단면 관찰 | 없음 |
| 10.0~14.0초 | 4. 과육의 윤곽이 화면이 된다 | 크림에서 버건디로 | 단면 윤곽을 이어받은 크림, 코럴, 버건디 마스크 3~4개가 차례로 화면을 덮고, 다시 온전한 한 알이 중앙에서 약간 오른쪽, 화면 높이의 약 55%, 약 8도 기울어진 구도로 등장 | "한 알을 더 가까이" |
| 14.0~18.5초 | 5. 시간이 멈추는 과즙 (한 입 직전의 설렘) | 버건디 | 물방울 12~18개와 과육 조각 3~5개가 왼쪽 아래에서 오른쪽 위로 휘는 리본 흐름으로 퍼짐. 15.25~15.65초에 입자 위치가 멈추고, 카메라 시차만 계속 움직임 | 없음 |
| 18.5~23.5초 | 6. 이름이 장면이 된다 | 크림 | 화면 너비의 65~75%를 쓰는 큰 "딸기" 두 글자 앞으로 딸기가 왼쪽 화면 밖에서 들어와 20.5초쯤 중앙에 도착. 글자 뒤로는 돌아가지 않음. 보조 입자 4~6개 | "딸기" (대형) |
| 23.5~28.0초 | 7. 한 입의 행복 | 크림, 가장자리에 옅은 코럴 빛 | 24.0~24.4초에 딸기 오른쪽 위에 한 입 베어 문 자국이 생기고 흰 심과 붉은 과육이 드러남. 과즙 방울 4~6개가 튀었다가 0.6초 안에 사라짐. 마지막 2.5초는 정지에 가깝게 유지 | "딸기" / "새콤달콤한 설렘, 한 입의 행복." (25.5초까지 완성) |

타임라인의 모든 상태는 시간 t만으로 결정되어야 한다(고정된 seed, Date.now와 seed 없는 Math.random 금지, 앞의 콜백이 실행됐다는 가정 금지). 그래야 웹에서 스크롤을 거꾸로 올려도, 영상에서 아무 시점으로 이동해도 같은 장면이 나온다.

## 5. 웹: 스크롤과 누르기

### 스크롤

- 화면 높이 하나짜리 무대(stage)를 position: sticky 로 고정하고, 그 바깥 스크롤 영역을 화면 높이의 약 8배로 만든다(장면 7개에 하나씩, 마지막 정지 구간에 하나).
- ScrollTrigger의 scrub(부드럽게 따라오는 값, 약 0.6)으로 스크롤 진행률을 타임라인 0~28초에 연결한다. 휠을 내리면 이야기가 진행되고, 올리면 되감긴다.
- window 의 scroll 이벤트를 직접 듣지 않고 ScrollTrigger만 쓴다.
- 화면 아래에 얇은 진행 막대와 현재 장면 이름을 둔다.
- 첫 화면에 "스크롤해서 딸기를 만나 보세요" 안내를 짧게 두고, 스크롤을 시작하면 사라진다.

### 누르기와 끌기 (웹에만 있는 반응, 영상에는 넣지 않는다)

장면을 그리는 값 중 일부를 "상태(state)"로 분리한다. 영상에서는 상태를 시간으로 계산하고, 웹에서는 시간에 사용자 조작을 더해 정한다. 조작한 상태는 해당 장면 구간을 벗어나면 원래대로 돌아간다.

1. **장면 3, 딸기 누르기:** 장면 3 구간에서는 스크롤만으로는 펼쳐지지 않고 "눌러서 펼쳐 보세요" 안내가 뜬다. 누르면 0.8초 동안 반쪽과 단면이 펼쳐지고, 다시 누르면 합쳐진다. 누르지 않고 장면 3 구간의 끝까지 스크롤하면 자동으로 펼친 상태가 되어 다음 장면이 자연스럽게 이어진다. 위로 되돌아가면 닫힌 상태로 돌아온다.
2. **장면 5, 화면 누르기:** 누른 자리에서 작은 과즙 방울 6~10개가 튀어 0.7초 안에 사라진다. 리본 흐름과 시차는 그대로 유지한다.
3. **장면 6, 딸기 끌기:** 딸기를 좌우로 끌어 옮길 수 있다(최대 화면 너비의 25% 안). 그림자가 함께 움직이고, 손을 떼면 스크롤로 정해진 위치로 부드럽게 돌아간다. 세로 스크롤은 막지 않는다(touch-action: pan-y).
4. **장면 7, 한 입 베어 물기:** 장면 7에 들어오면 "눌러서 한 입" 안내가 뜬다. 누르면 베어 문 자국과 과즙 방울이 나타나고 문구가 완성된다. 누르지 않고 끝까지 스크롤하면 자동으로 한 입 베어 문 상태가 된다.

누를 수 있는 대상은 button 이거나 키보드로 선택 가능해야 하고(Enter, Space), 읽을 수 있는 이름(aria-label)을 붙인다. 손가락으로 누르기 쉽게 최소 44px 영역을 둔다.

### 모바일과 움직임 줄이기

- 390px 너비 휴대폰에서 가로 넘침 없이 같은 경험을 제공한다. 장면 구도는 세로 화면에 맞게 따로 조정한다.
- prefers-reduced-motion 이면 스크롤 연동을 끄고, 장면 7개의 대표 화면을 "이전", "다음" 버튼으로 넘긴다(0.3초 페이드). 누르기 기능은 그대로 쓸 수 있어야 한다.

## 6. 영상: 같은 타임라인을 HyperFrames로

- HeyGen 공식 오픈소스 HyperFrames를 쓴다. 설치된 플러그인이 있으면 /hyperframes:hyperframes 로 흐름을 확인하고 /hyperframes:general-video 작업 흐름을 따른다. 명령과 옵션은 설치 버전의 도움말로 확인하고, 존재하지 않는 API나 옵션을 지어내지 않는다.
- 참고: https://github.com/heygen-com/hyperframes , https://hyperframes.heygen.com/quickstart , https://hyperframes.heygen.com/guides/gsap-animation , https://hyperframes.heygen.com/concepts/determinism
- 영상 프로젝트에 shared/ 폴더를 두고, 렌더 전에 사이트의 js/art.js, js/scenes.js, 글꼴, GSAP 파일을 복사한다. 복사는 작은 스크립트나 명령 한 줄로 반복할 수 있게 한다. 사이트 쪽 파일이 원본이다.
- 컴포지션은 buildTimeline 으로 같은 28초 타임라인을 만들고, paused 상태로 composition ID와 같은 키에 등록한다. ScrollTrigger와 웹 전용 반응은 불러오지 않는다.
- 웹의 누르기 반응은 영상에 넣지 않는다. 대신 장면 3의 펼쳐짐은 6.5초, 장면 7의 한 입은 24.0초에 타임라인이 자동으로 진행한다.
- 먼저 설치 버전의 draft 품질로 시험 렌더를 한 뒤 최종 렌더한다.

## 7. 확인 (완료 전에 실제로 해 볼 것)

웹:
- 처음부터 끝까지 휠로 내려가며 7개 장면이 끊김 없이 이어지는가?
- 맨 아래에서 맨 위로 빠르게 올려도 장면이 섞이지 않고 처음 화면으로 돌아오는가?
- 네 가지 누르기, 끌기 반응이 각각 동작하고, 구간을 벗어나면 원래대로 돌아오는가?
- 휴대폰 너비(390px)에서 가로 넘침, 잘린 문구, 겹친 버튼이 없는가?
- 움직임 줄이기 설정에서 "이전", "다음"으로 모든 장면을 볼 수 있는가?
- 키보드만으로 누르기 반응을 실행할 수 있는가?
- 브라우저 콘솔에 오류가 없는가?

영상:
- 0.5, 1.8, 7.5, 12.0, 15.4, 21.0, 26.5초의 장면을 이미지로 확인했는가?
- 21초, 7.5초, 15.4초 순서로 이동해도 장면이 복원되는가?
- 결과가 정확히 28초, 1920x1080, 30fps인가?

공통:
- 첫 1.5초 전후에 딸기임을 알아볼 수 있는가?
- 일러스트가 마지막 장면까지 같은 스타일, 색, 조명으로 이어지는가?
- 한국어가 깨지지 않고 주요 문구를 충분히 읽을 수 있는가?
- 근거 없는 영양 수치, 건강 효능, 산지, 당도 수치를 넣지 않았는가?
- 마지막에 "새콤달콤한 설렘, 한 입의 행복."이 밝고 행복한 분위기로 남는가?

## 8. 보고

작업 후 웹 페이지 위치와 로컬 미리보기 방법, 영상 프로젝트 위치, MP4와 스틸 경로, 공유 파일을 다시 복사하고 렌더하는 방법을 알려라. 실제로 확인한 항목과 확인하지 못한 항목을 구분하고, 남은 한계를 숨기지 마라. 만들지 않은 파일을 만들었다고 말하지 마라. 보고는 코딩을 모르는 사람도 이해할 수 있는 쉬운 한국어로 써라.

오늘의 선택 확인

아래 네 가지를 마치면 7장으로 넘어갈 준비가 된 것입니다. 체크한 내용은 이 브라우저에 기억됩니다.

• 완성 예시 중 하나 이상을 직접 스크롤하고 눌러 보았습니다
• 공통 실습(도시의 하루)과 자유 선택 중 어느 쪽으로 할지 정했습니다
• 내 주제의 첫 프롬프트를 복사해 메모장에 저장하고, [ ] 부분을 내 내용으로 바꿨습니다
• 첫 버전의 범위를 "장면 3개 이내"로 한 문장으로 적어 두었습니다
• AI의 인터뷰로 brief-v1.md를 만들고, 막연한 곳을 깎아 brief-v2.md까지 저장했습니다