프롬프트 모음

안녕하세요. 저는 코딩 경험이 없는 [내 직무] 담당자입니다.
앞으로 [내 주제]를 소개하는 웹사이트를 함께 만들 거예요.
아래 약속을 지켜 주세요.
1. 전문 용어는 쉬운 말로 풀어서 설명해 주세요.
2. 무언가를 실행하기 전에, 무엇을 하려는지 한 문장으로 먼저 알려 주세요.
3. 비밀번호나 개인정보가 필요한 단계는 제가 직접 입력할 테니, 어디에 입력하면 되는지만 알려 주세요.
4. 한 번에 한 단계씩 진행하고, 제가 이해했는지 확인해 주세요.
이해했다면 "준비됐습니다"라고만 답해 주세요.

Claude Code를 터미널(PowerShell 또는 Mac 터미널)에서도 쓸 수 있게 설치해줘.
설치가 끝나면 어느 폴더에서든 claude 라고만 입력하면 실행되도록 PATH(전역변수)에도 잡아줘.

이렇게 진행해줘.
1. 먼저 내 컴퓨터가 Windows인지 Mac인지, 이미 claude 명령이 설치되어 있는지 확인해줘.
2. 없으면 Anthropic 공식 문서의 네이티브 설치 방법으로 설치해줘. 다른 사이트의 설치 방법은 쓰지 마.
3. 설치가 끝나면 claude 실행 파일이 있는 폴더가 PATH에 들어갔는지 확인하고, 빠져 있으면 내 계정 범위에서만 추가해줘. 관리자 권한이 필요한 작업이나 다른 설정 변경은 하지 마.
4. 지금 열려 있는 이 화면에는 새 PATH가 바로 반영되지 않을 수 있으니, 실행 파일의 전체 경로로도 claude --version 을 실행해서 확인해줘.
5. 각 단계를 하기 전에 무엇을 할지 한 줄로 알려주고, 마지막에는 어디에 무엇을 설치했고 PATH를 어떻게 바꿨는지 초보자도 이해할 수 있게 쉬운 한국어로 정리해줘.

내 Windows PC에 Node.js와 Git for Windows가 설치되어 있는지 확인해줘.
- node --version 과 git --version 으로 확인하고, 결과를 쉬운 말로 알려줘.
- Node.js는 22 이상이어야 하고 LTS 버전이면 좋아. 없거나 22 미만이면 winget 으로 설치해줘. 패키지 이름은 OpenJS.NodeJS.LTS 야.
- Git for Windows 가 없으면 winget 으로 설치해줘. 패키지 이름은 Git.Git 이야.
- 설치하기 전에 무엇을 설치할지 먼저 알려주고, 설치한 뒤에는 새 터미널을 열어야 반영된다는 점도 알려줘.
- 이미 충분한 버전이 있으면 아무것도 설치하지 말고 "이미 준비되어 있습니다"라고만 알려줘.

내 Mac에 Node.js와 Git이 설치되어 있는지 확인해줘.
- node --version 과 git --version 으로 확인하고, 결과를 쉬운 말로 알려줘.
- Node.js는 22 이상이어야 하고 LTS 버전이면 좋아. 없거나 낮으면 nodejs.org 의 LTS 설치 파일을 내가 직접 내려받아 설치하는 방법을 화면 순서대로 알려줘.
- Git 이 없으면 Mac이 안내하는 명령줄 개발자 도구 설치 방법을 알려줘.
- 이미 충분한 버전이 있으면 아무것도 설치하지 말고 "이미 준비되어 있습니다"라고만 알려줘.
- 내 허락 없이 Homebrew 같은 새 도구를 설치하지는 마.

터미널에서 claude 라고 입력하면 "인식되지 않습니다" 또는 "command not found" 라고 나와요.
Claude Code 설치 위치와 PATH 설정을 점검하고 고쳐줘.
- 실행 파일이 실제로 있는지, PATH에 그 폴더가 들어 있는지 먼저 확인해줘.
- 고치기 전에 무엇을 바꿀지 알려주고, 내 계정(사용자) 범위에서만 바꿔줘.
- 다 끝나면 내가 새 터미널을 열어 확인하는 방법을 알려줘.

이 폴더가 GitHub 저장소와 연결되어 있는지 확인해줘.
- git remote -v 로 연결된 주소를 보여주고, git ls-remote origin 이 오류 없이 끝나는지 확인해줘.
- 파일은 아무것도 바꾸거나 올리지 마.
- 결과를 쉬운 말로 한두 줄로 알려줘.

GitHub CLI(gh)를 설치해줘.
1) 먼저 git --version 으로 Git이 설치되어 있는지 확인하고, 없으면 winget install --id Git.Git -e 로 설치해줘.
2) 그다음 winget install --id GitHub.cli 로 GitHub CLI를 설치해줘.
3) 설치가 끝나면 gh --version 결과를 보여줘.
로그인은 내가 직접 할 거라서 gh auth login 은 실행하지 마. 내 허락이 필요한 단계가 나오면 무엇을 허락하는 건지 먼저 설명해줘.

ai-site 폴더에 index.html 파일 하나로 첫 사이트를 만들어줘.
- 화면 가운데에 큰 제목 "[내 이름 또는 닉네임]의 첫 사이트"와 한 줄 소개 문장
- 배경색은 [좋아하는 색], 글자는 읽기 편한 크기
- 휴대폰 화면에서도 깨지지 않게 (반응형)
- 버튼 하나를 누르면 인사말 문구가 바뀌는 간단한 동작
만든 다음 내 PC의 브라우저에서 열어 볼 수 있게 열어줘. 내가 확인하고 괜찮다고 하면, GitHub 저장소 ai-site 의 main 브랜치에 올려줘.
회사 자료나 개인정보는 파일에 넣지 마.

ai-site 의 index.html 에서 큰 제목을 "[새 제목]" 으로 바꿔줘.
바꾼 뒤에 변경 내용을 "제목 변경" 이라는 메시지로 저장(commit)하고, GitHub 의 main 브랜치에 올려줘(push).
올린 다음 어떤 파일이 바뀌었는지 한 줄로 알려줘.

ai-site 에서 new-title 이라는 새 브랜치를 만들어줘.
그 브랜치에서 index.html 의 큰 제목을 "[시험용 제목]" 으로 바꾸고 commit 한 뒤, GitHub 에 new-title 브랜치로 올려줘.
main 브랜치에는 합치지 말고, 올린 뒤 브랜치 이름을 알려줘.

Vercel CLI를 설치해줘.
먼저 node --version 으로 Node.js가 설치되어 있는지 확인하고, 없으면 설치 방법을 알려줘.
있다면 npm i -g vercel 로 전역 설치하고, 끝나면 vercel --version 결과를 보여줘.
로그인(vercel login)은 내가 직접 할 테니 실행하지 마.

vercel login 을 마쳤어. ai-site 폴더에서 Vercel CLI로 배포해줘.
처음 배포라서 프로젝트 연결 질문이 나올 거야. 프로젝트 이름은 ai-site 로 하고, 기본값으로 진행하되 어떤 질문이 나왔고 무엇으로 답했는지 알려줘.
먼저 미리보기 배포를 하고, 내가 확인하면 vercel --prod 로 실제 주소(Production)에 배포해줘. 끝나면 주소를 알려줘.

Vercel 배포가 Error로 끝났어. 아래 빌드 로그를 읽고 원인을 쉬운 말로 설명해줘. 그리고 ai-site 폴더에서 고칠 수 있는 것이면 고쳐서 GitHub 에 다시 올려줘.

[여기에 빌드 로그를 붙여넣기]

Claude Code와 Codex 둘 다에서 쓸 수 있게 아래 4가지를 내 PC 전체(전역, 사용자 범위)에 설치해줘.
출처는 아래에 적은 곳만 쓰고, 이름이 비슷한 다른 저장소는 설치하지 마.

1) design-taste-frontend 스킬
   - 출처: GitHub Leonxlnx/taste-skill 안의 design-taste-frontend (이 저장소의 다른 스킬은 설치하지 마)
   - npx skills add 로 설치하고, 대상은 claude-code 와 codex 둘 다

2) impeccable 스킬
   - 출처: GitHub pbakaus/impeccable
   - npx skills add 로 설치하고, 대상은 claude-code 와 codex 둘 다
   - 이 방법이 안 되면 저장소 설명서의 설치 방법을 알려줘

3) ui-ux-pro-max 플러그인
   - Claude Code: 플러그인 마켓플레이스 nextlevelbuilder/ui-ux-pro-max-skill 을 등록한 뒤 ui-ux-pro-max 플러그인 설치
   - Codex: 저장소 설명서의 설치 도구 ui-ux-pro-max-cli 를 npx 로 실행해서 내 PC 전체(전역)에 설치 (npx ui-ux-pro-max-cli init --ai universal --global, Codex가 읽는 ~/.agents/skills 폴더에 들어감). 이 방법이 안 되면 저장소 설명서의 방법을 알려줘

4) hyperframes
   - 출처: GitHub heygen-com/hyperframes
   - Claude Code: 플러그인 마켓플레이스 heygen-com/hyperframes 를 등록한 뒤 hyperframes 플러그인 설치
   - Codex: 선택창 없이 핵심 스킬 묶음만 전역 설치 (npx hyperframes skills update). 이 방법이 안 되면 방법만 알려줘

진행 방법:
- 먼저 node 와 npx 가 있는지 확인하고, 없으면 설치하지 말고 나한테 알려줘.
- 명령을 실행하기 전에 무엇을 하는 명령인지 한 줄로 먼저 설명해줘.
- 확인 질문이나 선택창 때문에 멈추는 명령은 확인을 건너뛰는 옵션(-y)을 붙여서 실행해줘.
- 하나 설치할 때마다 성공했는지 확인하고, 실패하면 오류 문구를 그대로 보여줘.
- 마지막에 4가지 각각 "어느 프로그램의 어느 폴더에 설치됐는지"와 "부르는 이름"을 표로 정리해줘.
- 설치가 끝나면 새 세션을 시작해야 하는지도 알려줘.

방금 설치에서 [실패한 항목 이름] 이 실패했어. 오류 문구를 쉬운 말로 설명해주고, 같은 출처로 다시 설치해줘. 성공한 항목은 건드리지 마.

설치된 스킬 목록 보여줘. design-taste-frontend, impeccable, ui-ux-pro-max, hyperframes 이 4가지가 있는지 하나씩 확인해서 있음/없음으로 알려줘.

/design-taste-frontend
[내 주제] 소개 사이트를 만들려고 해. 코드는 아직 만들지 말고, 어울리는 디자인 방향을 서로 많이 다른 3가지로 제안해줘.
각 방향마다 분위기, 색, 글자 느낌을 한 줄씩 적고, 흔한 AI 디자인처럼 보이지 않으려면 무엇을 피해야 하는지도 알려줘.

/impeccable critique
지금 만들어 둔 첫 화면(index.html)을 디자인 관점에서 비평해줘. 잘된 점 2개, 고칠 점 3개를 중요한 순서로 알려주고, 내가 고치라고 할 때까지 파일은 바꾸지 마.

/ui-ux-pro-max:ui-ux-pro-max
[내 주제] 소개 사이트에 어울리는 색 팔레트 3개와 글꼴 조합 2개를 추천해줘. 각각 어떤 분위기인지 한 줄로 설명하고, 글자가 배경 위에서 잘 읽히는지(대비)도 확인해줘.

/hyperframes:hyperframes
[내 주제]를 소개하는 10초짜리 영상을 만들려고 해. 아직 만들지 말고, 어떤 종류의 영상 스킬로 진행하면 좋을지 알려주고 먼저 필요한 정보를 질문해줘.

$design-taste-frontend
[내 주제] 소개 사이트의 디자인 방향을 서로 다른 3가지로 제안해줘. 코드는 아직 만들지 마.

내 PC에 Node.js와 npx가 설치돼 있는지 버전까지 확인해줘. 없거나 22보다 낮으면 내 운영체제(Windows 또는 Mac)에 맞는 설치 방법을 알려주고, 내가 허락하면 설치까지 진행해줘. 설치 후에 새 터미널에서도 node 명령이 잘 잡히는지(PATH) 확인해줘.

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

장면은 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 파일만 쓰세요.
- 휴대폰 화면에서 손가락으로 눌러서 할 수 있게 해 주세요.
- 다 만들면 어떻게 열어서 확인하는지 알려 주세요.

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

좋습니다. 이어서 2단계를 만들어 주세요. 지금 있는 것은 그대로 두세요.

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

이어서 3단계를 만들어 주세요. 지금 있는 것은 그대로 두세요.

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

이어서 4단계를 만들어 주세요. 지금 있는 것은 그대로 두세요.

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

지금부터 내가 만들 인터랙티브 사이트의 브리프(설계서)를 같이 만들자. 바로 만들지 말고 먼저 나를 인터뷰해줘.

진행 방식:
- 질문은 한 번에 하나씩만 해줘.
- 질문마다 내가 고를 수 있는 보기 2~3개와 너의 추천을 함께 줘. 내가 "추천대로"라고 하면 추천을 쓰면 돼.
- 8~12개 질문으로 아래 내용을 채워줘: 목적과 보는 사람, 주제와 주인공, 분위기 단어 3개, 색, 장면 구성(장면마다 무엇이 보이는지), 스크롤하면 바뀌는 것, 누르면 바뀌는 것, 들어갈 문구, 하지 말 것, 휴대폰에서의 모습, 완성 기준.
- 질문이 끝나면 아래 목차 그대로 브리프를 써서 brief-v1.md 로 저장해줘. 아직 사이트는 만들지 마.

브리프 목차:
1. 제작 목표와 확정 사양
2. 아트 디렉션(색, 조명, 글꼴)
3. 장면(장면마다 스크롤 위치, 보이는 것, 움직임, 문구)
4. 상호작용(스크롤, 누르기, 끌기)
5. 하지 말 것
6. 확인 기준

내 주제는 [내 주제]야. 첫 질문부터 시작해줘.

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

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

[강사 프롬프트를 여기에 붙여넣기]

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

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

인터랙티브 웹사이트를 하나 만들려고 합니다. 아직 코드는 쓰지 말고, 기획부터 저와 같이 정리해 주세요.

저는 코딩을 모르는 사무직입니다. 쉬운 말로 질문해 주세요.
후보 주제는 "도시의 하루", "과일 소개", "심해 탐험"입니다. (제 주제가 따로 있다면: [내 주제])

아래 4가지를 질문 하나씩 차례로 물어봐 주세요. 질문마다 보기를 2~3개 같이 주세요.
1. 주제 한 줄
2. 분위기를 나타내는 단어 3개
3. 장면 목록 (화면이 위에서 아래로, 또는 시간 순서로 어떻게 이어지는지 3~5개)
4. 사용자가 하는 행동 (스크롤, 클릭, 슬라이더 중 무엇인지)

4가지가 다 정해지면 이 폴더의 README.md 맨 아래에 "기획 메모" 항목으로 정리해 주세요.
README.md가 이미 있으면 기존 내용은 지우지 말고 아래에 덧붙여 주세요.

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

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

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

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

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

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

/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이 있으면 새 화면으로 바꿔도 됩니다. (이전 연습용 파일일 수 있습니다)

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

/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로 물결과 배경을 그려 주세요.
- 깊이 숫자는 연출용 수치입니다. 어두워지는 색 변화가 자연스럽게 이어지도록 해 주세요.

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

미리보기로 열어 주세요.

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

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

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

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

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

- 해: 제자리에서 아주 천천히 위아래로 둥실 떠 있듯이 움직입니다. (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) 설정을 켠 사람에게는 위의 움직임을 모두 끄고, 완성된 모습 그대로 정지해서 보여 주세요.
- 바꾼 부분을 목록으로 알려 주세요.

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

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

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

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

"도시의 하루"에 시간 슬라이더를 만들어 주세요. 이번에는 슬라이더와 하늘, 해와 달만 다룹니다. 창문 불빛과 자동차는 다음에 부탁할 거예요.

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

이제 창문 불빛을 넣어 주세요. 슬라이더와 하늘 기능은 그대로 두세요.

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

도로 위에 자동차를 한 대 넣어 주세요. 다른 기능은 그대로 두세요.

- 자동차는 단순한 도형(몸체와 바퀴 두 개)으로 그리고, 눈에 띄는 색(예: 빨강)으로 해 주세요.
- 도로를 왼쪽에서 오른쪽으로 달려 화면 밖으로 나가면, 다시 왼쪽에서 나타납니다. (한 바퀴에 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 키 중 어느 것으로도 닫힙니다.
- 카드가 열려 있는 동안 뒤 화면은 살짝 어두워집니다.
- 소개 문구는 과장하지 말고 확실한 내용만 써 주세요. 확실하지 않은 숫자는 넣지 말고, 제가 사실을 더 확인해야 할 부분이 있으면 마지막에 알려 주세요.
- 기존 기능과 "움직임 줄이기" 배려는 그대로 유지해 주세요.

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

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

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

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

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

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

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

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

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

[오류 문구 붙여넣기]

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

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

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

[로그 붙여넣기]

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

/impeccable critique index.html
지금 사이트([내 사이트 이름, 예: 도시의 하루])를 디자인 전문가의 눈으로 비평해 주세요. 아직 고치지는 마세요.

- 잘된 점 3가지
- 아쉬운 점 5가지: 중요한 순서대로, 각각 이유를 한 줄로
- 효과가 가장 큰 개선 3가지만 번호를 붙여 추천

휴대폰 화면 기준으로 봐 주시고, 코딩을 모르는 사람이 이해할 수 있는 쉬운 말로 써 주세요.
참고로 제가 직접 써 보고 느낀 점은 다음과 같습니다.
- 마음에 든 점: [내 메모]
- 불편한 점: [내 메모]
- 아쉬운 점: [내 메모]

/impeccable polish index.html
방금 비평에서 추천한 개선 중 제가 고른 [번호, 예: 1번과 3번]만 적용해 주세요.

- 슬라이더, 창문 불빛, 자동차 같은 기능은 그대로 동작해야 합니다.
- "움직임 줄이기" 배려도 그대로 유지해 주세요.
- 바꾼 부분을 목록으로 알려 주세요.
- 다 바꾼 뒤 미리보기에서 휴대폰 폭과 PC 폭을 모두 확인한 결과를 알려 주세요.

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

- 후보 A "따뜻한 골목의 저녁"
- 후보 B "네온사인이 켜진 밤거리"

후보마다 아래를 알려 주세요.
1. 색 5개 (배경, 글자, 포인트 2개, 강조)와 각 색의 쓰임새
2. 한글이 잘 보이는 무료 글꼴 조합 (제목용, 본문용), 그리고 그렇게 고른 이유
3. 글자와 배경의 대비가 읽기에 충분한지 확인한 결과

아직 적용하지 말고, 제가 후보를 고르면 그때 style.css의 색과 글꼴만 바꿔 주세요. 기능과 배치는 바꾸지 마세요.

지금 index.html은 그대로 두고, 같은 내용으로 분위기만 다른 두 버전을 만들어 주세요. 슬라이더, 창문 불빛, 자동차 기능은 두 버전 모두 똑같이 동작해야 합니다.

- 버전 A (compare/classy/ 폴더): "세련된 도시 여행 포스터처럼 차분하고 고급스럽게". 색 수는 적게, 여백은 넓게, 글씨는 가늘고 크게, 움직임은 느리고 은은하게, 문구는 담백하게 해 주세요.
- 버전 B (compare/cute/ 폴더): "귀엽고 장난스럽게". 밝은 색, 둥근 모서리, 통통 튀는 움직임, 말랑하고 둥근 글씨체, 말투는 친근하게 ("짠! 해가 졌어요" 같은 식) 해 주세요.

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

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

/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을 열면 바로 동작하게 해 주세요. (정적 파일만 사용, 빌드 도구 없음)
- "움직임 줄이기" 배려와 휴대폰 대응은 두 버전 모두 유지해 주세요.
- 기존 파일은 지우지 마세요.
- 끝나면 두 버전을 미리보기에서 여는 방법을 알려 주세요.

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

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

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

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

내 PC에서 hyperframes로 영상을 만들 준비가 됐는지 확인해줘.
1) Node.js 22 이상, FFmpeg 가 설치돼 있는지 버전까지 확인
2) 없거나 버전이 낮으면 내 운영체제(Windows 또는 Mac)에 맞는 설치 방법을 알려주고, 내가 허락하면 설치까지 진행
3) 설치 후 새 터미널에서도 두 명령이 잘 잡히는지(PATH) 확인하고, 마지막에 npx hyperframes doctor 결과를 쉬운 말로 설명
설치는 한 단계씩 진행하고, 명령을 실행하기 전에 무엇을 하는 명령인지 먼저 말해줘.

/hyperframes:motion-graphics
내 [주제] 사이트를 소개하는 10초 영상을 만들어줘.
- 제목이 부드럽게 등장
- 핵심 장면 3개 (각 2~3초): [장면 1], [장면 2], [장면 3]
- 마지막에 사이트 주소 [내 주소]
- 분위기: [예: 밝고 경쾌하게]
- 화면은 가로 16:9
영상 작업 파일은 내 사이트 폴더 바로 옆에 my-video 폴더를 새로 만들어서 거기서 작업해줘. 사이트 폴더 안에는 만들지 마.
질문은 꼭 필요한 것만 하고, 정해지지 않은 부분은 네가 어울리게 정해서 진행해줘.

장면 2의 글자가 너무 빨리 지나가. 장면 2를 3초에서 4초로 늘리고, 글자가 나타나는 속도만 조금 느리게 해줘.
장면 1과 장면 3은 지금 그대로 두고 건드리지 마.
고친 뒤 미리보기에서 처음부터 끝까지 다시 확인할 수 있게 해줘.

지금 영상을 draft 품질로 렌더해서 renders 폴더에 저장해줘. 렌더 전에 lint 와 check 로 문제가 없는지 먼저 확인해줘. 끝나면 파일 경로, 영상 길이, 파일 크기를 알려줘.

my-video/renders 폴더의 [파일 이름].mp4 영상을 내 사이트 첫 화면에 넣어줘.
- 영상 파일은 내 사이트 폴더의 assets/video/ 안에 intro.mp4 라는 이름으로 복사
- video 태그에 autoplay muted loop playsinline 을 모두 넣어서, 소리 없이 자동으로 반복 재생되게 해줘
- 영상이 로딩되기 전에 보일 대표 이미지(poster)도 영상 첫 장면으로 한 장 만들어서 같이 넣어줘
- 파일 크기를 가능하면 5MB 이하, 최대 10MB 이하로 줄여줘. FFmpeg로 해상도와 화질을 낮춰도 되는데, 줄이기 전과 후의 크기를 알려줘
- 휴대폰 화면 폭에서도 영상이 잘리지 않게 확인해줘
- 운영체제의 "움직임 줄이기" 설정을 켠 사람에게는 자동 재생을 끄고 재생 버튼을 보여줘
끝나면 내가 확인할 방법을 알려줘.

영상이 들어간 변경 사항을 GitHub에 올려서 Vercel에 배포해줘.
1) 올리기 전에 git status 로 어떤 파일이 바뀌었는지 보여주고, 영상 파일 크기도 알려줘. 100MB를 넘는 파일이 있으면 올리지 말고 먼저 알려줘.
2) 커밋 메시지는 "첫 화면에 소개 영상 추가"로 하고 push 해줘.
3) Vercel 배포가 끝나면 내 사이트 주소를 알려주고, 그 주소에서 영상이 잘 나오는지 내가 확인할 방법을 알려줘.

hyperframes 카탈로그의 data-chart 블록을 써서 장면 2에 막대 그래프를 넣어줘.
숫자는 연습용 가짜 값으로 월별 [1월 120, 2월 180, 3월 260]을 쓰고, 그래프가 차례로 올라오게 해줘.
블록이 15초짜리라서 내 영상 길이(10초)에 맞게 줄여줘. 장면 1과 3은 건드리지 마.

이 사이트의 소개 장면이 완성되어 있는지 점검해 주세요. 파일은 고치지 말고, 결과만 알려 주세요.

확인할 것:
- 첫 화면에서 처음 보는 사람이 무엇을 소개하는 사이트인지 알 수 있는가
- 핵심 장면이나 효과가 최소 하나 있는가
- 마지막에 끝났다는 느낌을 주는 장면이 있는가
- 글자가 잘리거나, 겹치거나, 읽기 어려운 곳이 있는가

항목마다 "있음/부족/없음"으로 표시하고, 부족하거나 없는 것은 한 줄로 이유를 적어 주세요.

이 사이트에서 사용자가 할 수 있는 행동(스크롤, 클릭, 슬라이더, 버튼 등)을 모두 찾아서 표로 정리해 주세요. 파일은 고치지 마세요.

표의 열: 행동 / 일어나는 변화 / 그 변화가 의미 있는지(있음, 약함) / 약하다면 더 의미 있게 만드는 방법 한 줄

표 아래에는 "변화가 하나도 일어나지 않는 곳"이 있으면 따로 알려 주세요.

이 사이트가 휴대폰 세로 화면(폭 360~430픽셀 정도)에서 잘 보이고 잘 눌리는지 점검해 주세요.
먼저 파일은 고치지 말고, 문제를 목록으로만 알려 주세요.

확인할 것:
- 글자가 잘리거나 화면 밖으로 나가는 곳
- 화면이 좌우로 흔들리는 가로 스크롤이 생기는 곳
- 엄지로 누르기 너무 작은 버튼이나 슬라이더
- 마우스를 올려야만(hover) 보이는 효과
- 휴대폰에서 버벅일 수 있는 무거운 움직임
- 폰을 가로로 눕혔을 때 깨지는 곳

문제마다 어디(파일과 위치)인지, 고치는 방법을 한 줄로 적어 주세요. 가장 급한 3개에는 표시해 주세요.

방금 표시한 급한 문제 3개만 고쳐 주세요. 다른 부분은 건드리지 마세요.
고친 뒤에 무엇을 어떻게 바꿨는지 쉬운 말로 알려 주세요.

/impeccable critique index.html
이 사이트는 [내 소재]를 [처음 보는 동료]에게 소개하는 사이트입니다.
목표는 [처음 보는 사람이 5초 안에 무엇인지 알고, 끝까지 스크롤하게 만드는 것]입니다.
파일은 고치지 말고 평가만 해 주세요. 결과는 한국어로, 어려운 디자인 용어는 쉬운 말로 풀어서 써 주세요.

방금 비평에서 [가장 중요한 문제의 이름이나 번호] 하나만 고쳐 주세요.
다른 곳은 건드리지 마세요. 지금 잘 동작하는 효과는 그대로 유지해 주세요.
고친 뒤에 무엇을 어떻게 바꿨는지 쉬운 말로 알려 주세요.

지금까지 바꾼 내용을 GitHub에 올려 주세요(커밋하고 푸시). 평소 배포에 쓰는 기본 작업 줄기(브랜치, 보통 main)로 올려 주세요.
올리기 전에 무엇이 바뀌었는지 쉬운 말로 요약해 주세요. 비밀번호나 개인 정보가 들어 있는 파일은 올리지 마세요.

Vercel 배포가 실패했습니다. 아래 오류 메시지를 보고 원인과 고치는 방법을 쉬운 말로 알려 주세요.
고칠 수 있으면 고쳐서 다시 올릴 수 있게 준비해 주세요.

[여기에 Vercel의 오류 메시지를 붙여 넣기]

제가 만든 사이트를 3분 안에 발표하려고 합니다. 발표 메모를 만들어 주세요.

제 사이트: [소재와 한 줄 설명]
꼭 보여 주고 싶은 장면과 효과: [예: 스크롤하면 바닷속으로 내려가는 장면]
AI에게 한 부탁 중 가장 잘 된 것: [어떤 부탁이었고 결과가 어땠는지]
AI에게 한 부탁 중 잘 안 된 것과 해결 방법: [무엇이 안 됐고 어떻게 고쳤는지]
다음에 추가하고 싶은 것: [ ]

아래 구성으로, 존댓말로 키워드 중심의 메모 형태로 써 주세요. 외워서 읽는 대본이 아니라 말할 때 참고하는 메모입니다.
1. 무엇을 만들었나 (30초)
2. 장면과 효과 보여 주기 (1분)
3. 잘 된 부탁 하나, 안 된 부탁 하나 (50초)
4. 다음에 추가할 것 (20초)
5. 마무리와 주소 공유 (20초)

제 사이트 주소 [https://내-프로젝트-이름.vercel.app] 를 QR코드 이미지로 만들어 주세요.
- 파일 이름은 qr.png 로 하고, 바탕화면에 저장해 주세요. 사이트 폴더 안에는 넣지 마세요.
- 휴대폰으로 찍었을 때 잘 읽히도록 크기를 크게(가로세로 1000픽셀 정도) 하고, 흰 배경에 검은색 무늬로 해 주세요.
- 도구를 새로 설치해야 하면 무엇을 설치하는지 먼저 알려 주고, 제가 허락하면 진행해 주세요.
- 다 만들면 파일이 어디에 저장됐는지 알려 주세요.

바탕화면의 qr.png 를 사이트 폴더로 복사해서, 마지막 장면 한쪽에 넣어 주세요.
QR코드 옆에 "휴대폰으로 찍어 보세요"라는 문구도 함께 넣어 주세요.
다른 부분은 건드리지 마세요.

제 사이트를 보고 동료들이 이런 의견을 주었습니다. 비슷한 의견끼리 묶고, 가장 많이 나온 순서로 정리해 주세요.
그중 한 번에 하나씩 고친다면 어떤 순서가 좋을지 추천하고, 첫 번째 것은 어떻게 부탁하면 좋을지 예시 문장도 써 주세요.

[여기에 받은 의견을 적기. 사람 이름은 빼고 내용만]

지금 사이트의 마지막 장면 다음에 새 장면 하나를 추가해 주세요.
새 장면 내용: [예: 가장 깊은 곳의 숨겨진 동굴이 나오고, 처음 보는 생물이 등장함]
기존 장면은 건드리지 말고, 지금 장면들과 같은 분위기와 같은 방식의 효과로 만들어 주세요.

이 사이트에 두 번째 테마를 추가해 주세요.
- 내용과 장면 구성은 그대로 두고, 색과 글꼴과 분위기만 [어두운 네온 느낌 / 따뜻한 종이 질감 느낌]으로 바꿔 주세요.
- 화면 한쪽에 테마를 바꾸는 버튼을 하나 달아서, 누르면 원래 테마와 새 테마를 오갈 수 있게 해 주세요.
- 원래 테마는 그대로 보존해 주세요.

휴대폰 세로 화면에서 더 재미있게 만들어 주세요.
- 화면을 손가락으로 눌렀을 때 누른 자리에서 작은 반응(빛이 퍼지거나 도형이 튀는 효과)이 일어나게 해 주세요.
- 손가락으로 끌어서 조작하는 부분은 손가락이 닿기 편한 크기로 키워 주세요.
- 마우스를 올려야만 보이는 효과는 눌러서 보이게 바꿔 주세요.
- PC 화면의 모습은 지금 그대로 유지해 주세요.

/hyperframes:motion-graphics
제 사이트를 소개하는 짧은 영상을 10초 안팎으로 만들어 주세요.
- 소재: [내 소재]
- 분위기: [차분하고 고급스럽게 / 밝고 발랄하게]
- 제목 문구: [영상에 크게 나올 한 줄]
- 가로로 긴 16:9 화면으로 만들고, 소리는 넣지 마세요.

만들어 둔 소개 영상 [영상 파일 이름.mp4]를 사이트 첫 화면 위쪽에 넣어 주세요.
- 소리 없이 자동으로 재생되고, 끝나면 반복되게 해 주세요.
- 휴대폰에서도 화면 안에서 바로 재생되게 해 주세요.
- 영상 파일이 크면(대략 5MB 이상) 화질을 크게 해치지 않는 선에서 용량을 줄여 주세요.
- 영상이 불러와지기 전에 보일 대표 이미지도 같이 설정해 주세요.

작업 중에 문제가 생겼어요. 저는 코딩을 모르는 사무직이니 쉬운 말로 도와주세요.

1) 하려던 일: [예: Vercel에 배포했는데 사이트가 404로 나와요]
2) 화면에 나온 메시지 (그대로 붙여넣기): [에러 메시지 전체]
3) 내 환경: Windows [10 또는 11], 회사 PC [맞음 또는 아님]

이렇게 진행해 주세요.
- 원인 후보를 가능성이 높은 순서로 2~3개만, 쉬운 말로 설명해 주세요.
- 직접 확인할 수 있는 것(파일 위치, 설치 여부, git 상태 등)은 먼저 "읽기만 하는" 명령으로 확인해 주세요.
- 파일을 지우거나 설정을 바꾸거나 무언가를 설치하는 일은, 하기 전에 무엇을 할지 말해 주고 제 확인을 받아 주세요.
- 비밀번호, 토큰, 개인정보는 요구하지 마세요. 화면에 보이면 가려서 말해 주세요.
- 고친 뒤에는 제가 눈으로 성공을 확인할 수 있는 방법을 알려 주세요.
- 해결이 안 되면 사내 IT 담당자나 공식 지원에 보낼 요약(증상, 시도한 것, 메시지)을 3줄로 정리해 주세요.

Windows에서 Claude Code를 설치하다가 막혔어요. 코딩 경험이 없으니 한 번에 한 단계씩 알려 주세요.

- 지금 열려 있는 창: [PowerShell 또는 CMD (프롬프트가 PS C:\ 로 시작하면 PowerShell)]
- 내가 입력한 명령: [입력한 명령]
- 화면에 나온 메시지: [메시지 전체]
- 회사 PC 여부: [맞음 또는 아님]

원인이 무엇일지 쉬운 말로 설명하고, 제가 PowerShell에 입력할 명령을 한 번에 하나씩, 성공하면 화면에 무엇이 보여야 하는지와 함께 알려 주세요. 회사 보안 프로그램이 원인으로 보이면 제가 직접 우회하지 않고 IT 담당자에게 문의하도록 안내해 주세요.

내 Windows PC의 PowerShell에서 claude 명령이 "not recognized"라고 나와요.
1) %USERPROFILE%\.local\bin\claude.exe 파일이 실제로 있는지 확인해 주세요.
2) 내 "사용자" PATH에 %USERPROFILE%\.local\bin 폴더가 들어 있는지 확인해 주세요.
3) 없다면 "사용자" PATH에만 추가해 주세요. 시스템 전체 설정은 바꾸지 마세요. 바꾸기 전에 현재 PATH 값을 보여 주고 제 확인을 받아 주세요.
4) 끝나면 새 PowerShell 창에서 claude --version 이 되는지 확인하는 방법을 알려 주세요.

내 Windows PC에 Git이 설치되어 있는지 확인해 주세요. 설치되어 있다면 버전을 알려 주세요.
설치되어 있지 않다면 winget으로 설치할 수 있는지 먼저 확인하고, 설치 명령과 이유를 알려 준 뒤 제 확인을 받고 진행해 주세요. 설치가 끝나면 새 터미널에서 git --version 이 되는지 확인하는 방법도 알려 주세요.

사내 IT 담당자에게 보낼 요청 메일 초안을 정중하게 써 주세요.
- 목적: 사내 AI 활용 교육 실습을 위해 Claude Code와 GitHub, Vercel을 사용해야 함
- 상황: [예: Claude Code 설치 중 downloads.claude.ai 접속이 막혀 있음]
- 화면에 나온 메시지: [메시지 전체]
- 요청: 아래 주소의 접속 허용 여부 확인
  downloads.claude.ai, claude.ai, claude.com, platform.claude.com, api.anthropic.com, github.com, registry.npmjs.org
- 보낸 사람: [내 이름], [부서]
회사 내부 정보나 개인정보는 넣지 말고, 읽는 사람이 바로 판단할 수 있게 짧게 써 주세요.

gh auth login 이 실패했어요. gh auth status 를 실행해서 지금 어떤 GitHub 계정으로 로그인되어 있는지 알려 주세요. 로그인이 안 되어 있다면 제가 직접 입력해야 하는 단계(브라우저에서 코드 입력, 승인)를 한 단계씩 안내해 주세요. 토큰이나 비밀번호는 절대 화면에 출력하지 말고, 저에게 요구하지도 마세요.

git push 가 거절됐어요. 메시지는 이렇습니다: [에러 메시지 전체]
git remote -v, git branch --show-current, git status, git log --oneline -5 를 실행해서 원인을 쉬운 말로 설명해 주세요.
고치는 방법은 2가지 이내로 제안하고, 어떤 방법이 안전한지 이유와 함께 알려 주세요. 제 확인 없이 push 를 다시 실행하거나 기록을 덮어쓰는 명령은 실행하지 마세요.

git 커밋을 하려는데 "Author identity unknown" 오류가 나요.
현재 git config --global user.name 과 user.email 이 설정되어 있는지 먼저 확인해 주세요. 설정되어 있지 않으면 아래 값으로 설정해 주세요.
- 이름: [내 이름 또는 닉네임]
- 이메일: [내 GitHub noreply 주소]
회사 이메일은 쓰지 마세요. 설정한 뒤에 확인한 결과를 보여 주세요.

Vercel 배포가 Error로 실패했어요. 이 사이트는 HTML, CSS, JavaScript만 쓰는 정적 사이트이고 빌드 과정은 필요 없습니다.
Build Logs의 마지막 부분은 이렇습니다:
[Build Logs 마지막 20줄 붙여넣기]

1) 프로젝트 폴더에 package.json이나 vercel.json 같은, Vercel이 빌드가 필요하다고 오해할 만한 파일이 있는지 읽어서 확인해 주세요.
2) 원인을 쉬운 말로 설명하고, Vercel 대시보드에서 제가 직접 눌러야 할 설정(Framework Preset을 Other로, Build Command 비우기)이 있다면 단계별로 알려 주세요.
3) 파일을 바꿔야 한다면 바꾸기 전에 무엇을 바꿀지 먼저 말해 주세요.

Vercel에 배포했는데 내 사이트 주소에서 "404: NOT_FOUND"가 나와요.
이 프로젝트 폴더에서 index.html 이 어디에 있는지, 파일 이름이 정확히 소문자 index.html 인지 확인해 주세요. 맨 위 폴더에 없다면 Vercel의 Root Directory 설정으로 풀지, 파일을 옮겨서 풀지 두 방법의 장단점을 쉬운 말로 알려 주고, 제가 고른 방법으로만 진행해 주세요. 파일을 옮기면 HTML 안의 경로(css, js, 이미지)가 깨지지 않는지도 확인해 주세요.

수정한 내용이 배포된 사이트에 반영되지 않아요. 아래를 읽기만 하는 명령으로 확인해 주세요.
- git status (저장하지 않은 변경이 남아 있는지)
- git branch --show-current (지금 어느 브랜치인지)
- git log --oneline -3 (최근 커밋)
- git status 의 "ahead of origin" 표시 (아직 push 안 된 커밋이 있는지)
결과를 보고 "아직 커밋 안 됨", "커밋했지만 push 안 됨", "push 됨, Vercel 쪽 확인 필요" 중 어디인지 알려 주세요. push가 필요하면 하기 전에 제 확인을 받아 주세요.

배포한 사이트에서 이미지가 안 보여요. 내 PC에서는 보입니다.
1) 프로젝트 안의 이미지 파일 목록과, HTML과 CSS에서 이미지를 가리키는 경로를 모두 찾아 비교해 주세요.
2) 대소문자가 다른 것, 공백이나 한글이 들어간 파일 이름, C:\ 나 file:/// 로 시작하는 경로를 찾아 목록으로 보여 주세요.
3) 목록을 보여 준 뒤 제 확인을 받고, 파일 이름은 소문자 영문과 하이픈으로 바꾸고 HTML과 CSS의 경로도 같이 고쳐 주세요.
4) 고친 뒤 커밋하고 push 하기 전에 한 번 더 확인을 받아 주세요.

이 사이트를 스마트폰(화면 폭 360~430px)에서 볼 때 깨지는 부분을 점검하고 고쳐 주세요.
- HTML에 viewport 메타 태그가 있는지 확인해 주세요.
- 가로 스크롤이 생기는 원인(고정 너비, 너무 큰 이미지)을 찾아 주세요.
- 글자 크기와 버튼 크기를 손가락으로 누르기 편하게 맞춰 주세요.
- 마우스를 올려야만 보이는 효과는 터치(누르기)로도 보이게 해 주세요.
- 바꾼 내용은 어느 파일의 무엇을 바꿨는지 목록으로 알려 주세요.
데스크톱 화면의 디자인은 바뀌지 않게 해 주세요.

내 사이트의 영상이 자동으로 재생되지 않아요. 특히 스마트폰에서요.
video 태그에 autoplay, muted, loop, playsinline 속성이 모두 있는지 확인하고 빠진 것을 추가해 주세요. 영상 파일 이름과 경로(대소문자 포함)가 실제 파일과 일치하는지도 확인해 주세요. 자동 재생이 막히는 환경에서는 사용자가 재생 버튼을 누를 수 있게 controls 도 함께 넣는 방법을 제안해 주세요.

내 사이트의 로컬 미리보기가 열리지 않아요 (localhost 연결 거부). 미리보기 서버가 켜져 있는지 확인하고, 꺼져 있다면 다시 켜 주세요. 그리고 제가 브라우저에서 열어야 할 정확한 주소를 알려 주세요.

방금 한 수정이 마음에 들지 않아서 되돌리고 싶어요. 아래 순서로 해 주세요.
1) git status 와 git diff 로 지금 무엇이 바뀌어 있는지 파일별로 쉬운 말로 요약해 주세요.
2) 되돌리는 방법을 2가지 정도 제안해 주세요. 되돌리면 사라지는 것이 무엇인지도 알려 주세요.
3) 되돌리기 전에 현재 변경을 나중에 다시 꺼낼 수 있게 보관해 주세요(git stash 등).
4) 제가 방법을 고르면 그때 진행해 주세요. git reset --hard 나 push --force 처럼 기록을 지우는 명령은 쓰지 마세요.
되돌린 뒤에는 이번에 원했던 것을 더 정확하게 요청하는 문장도 같이 제안해 주세요.

이 세션이 길어졌어요. 새 세션에서 이어서 작업할 수 있게 인수인계 메모를 만들어 주세요. 15줄 안쪽으로, 쉬운 말로 아래 항목을 정리해 주세요.
1) 만들고 있는 것 (주제, 주요 파일 이름)
2) 지금까지 끝낸 일
3) 지금 막혀 있는 일과 이미 시도해 본 것
4) 제가 정한 디자인 방향과 하지 않기로 한 것
5) 다음에 할 일 3가지
파일로 저장하지 말고 화면에 그대로 보여 주세요. 제가 복사해서 새 세션에 붙여넣겠습니다.

앞선 세션에서 이어서 작업하려고 합니다. 아래는 인수인계 메모입니다.

[여기에 메모를 붙여넣기]

먼저 현재 폴더의 파일과 git 상태를 읽어서 메모와 맞는지 확인하고, 이해한 내용을 5줄로 요약해 주세요. 제가 맞다고 확인하면 "다음에 할 일" 1번부터 시작해 주세요.

제가 설치한 스킬이 / 목록에 안 보여요. 아래를 확인해 주세요.
1) 지금 이 세션에서 사용할 수 있는 스킬 목록에 design-taste-frontend, impeccable, ui-ux-pro-max, hyperframes 가 있는지
2) 내 PC의 .claude\skills 와 .agents\skills 폴더에 이 스킬들이 설치되어 있는지 (읽기만 하세요)
3) claude plugin list 의 결과
빠진 것이 있으면 어떤 방법으로 설치하면 되는지 알려 주고, 설치 전에 제 확인을 받아 주세요. 설치가 끝나면 새 세션을 시작해야 하는지도 알려 주세요.

hyperframes 렌더가 실패했어요. 메시지는 이렇습니다: [에러 메시지 전체]
1) npx hyperframes doctor, node --version, ffmpeg -version 을 실행해서 결과를 쉬운 말로 설명해 주세요. (읽기만 하는 명령입니다)
2) 부족한 것(Node.js 22 이상, FFmpeg, 브라우저)이 있다면 무엇을 어떻게 설치할지 알려 주고, 설치하기 전에 제 확인을 받아 주세요.
3) npx hyperframes lint 로 영상 구성 파일에 문제가 있는지도 확인해 주세요.
4) 모두 해결되면 같은 명령으로 렌더를 다시 시도해 주세요.

목적: 월요일 팀 회의에서 지난주 일을 3분 안에 공유하려고 합니다.
독자: 바쁜 팀장님이 읽습니다. 업무 배경 설명은 필요 없습니다.
결과물: 5줄 이내 요약 하나와, 다음 주 할 일 3가지를 표로 만들어 주세요.
조건: 아래 메모에 없는 내용은 지어내지 마세요. 숫자와 날짜는 메모 그대로 쓰세요. 문장은 "-했습니다"로 끝내 주세요.
확인: 메모만으로는 알 수 없어서 제가 확인해야 할 부분은 마지막에 질문으로 따로 모아 주세요.

메모(가짜 예시입니다):
- 신규 문의 응대 12건 완료, 2건은 답변 대기
- 월간 점검 자료 초안 작성 (마감 금요일)
- 행사 장소 후보 2곳 비교 중

방금 결과에서 고치고 싶은 곳이 있어요.
- 고칠 곳: [예: 두 번째 문단]
- 지금 문제: [예: 너무 길고 어려운 말이 많아요]
- 원하는 모습: [예: 세 줄 이내, 처음 보는 사람도 이해할 쉬운 말]
- 그대로 둘 것: [예: 숫자와 날짜는 바꾸지 마세요]
고친 뒤에 무엇을 바꿨는지 한 줄로 알려 주세요.

엑셀에서 쓰는 CSV 파일 정리를 연습하고 싶어요. 실제 데이터는 쓰지 않고 가짜 예시로만 진행합니다.
1. 먼저 이 폴더에 sample-orders.csv 파일을 만들어 주세요. 가짜 주문 30줄이고, 열은 주문일, 고객명, 상품명, 수량, 금액입니다.
2. 일부러 지저분하게 만들어 주세요. 날짜 형식이 섞여 있고(2026-10-01, 2026/10/2, 10월 3일), 이름 앞뒤에 공백이 있고, 똑같은 줄이 3개 정도 중복되어 있게요. 고객명은 고객A, 고객B처럼 가짜로 쓰세요.
3. 그다음 sample-orders.csv는 건드리지 말고, 정리한 결과를 sample-orders-clean.csv로 따로 저장해 주세요. 날짜는 2026-10-01 형식으로 통일하고, 공백을 지우고, 중복된 줄은 하나만 남겨 주세요.
4. 엑셀에서 열었을 때 한글이 깨지지 않게 저장해 주세요.
5. 새 프로그램을 설치해야 하는 방법은 쓰지 마시고, 이 PC에 이미 있는 도구로 해결해 주세요.
6. 마지막에 무엇을 몇 줄 고쳤는지 표로 요약해 주세요.

한 장짜리 HTML 대시보드를 만들어 주세요. 가짜 예시 데이터로만 진행합니다.
- 주제: 가상의 "샘플 카페" 최근 6개월 월별 매출(만원)과 방문자 수. 숫자는 직접 만들어 주세요.
- 파일: dashboard.html 하나. 파일을 더블클릭하면 브라우저에서 바로 열려야 합니다.
- 화면: 맨 위에 큰 숫자 카드 3개(최근 달 매출, 전월 대비 증감, 6개월 평균), 그 아래에 월별 매출 막대그래프, 맨 아래에 월별 표.
- 숫자 데이터는 파일 맨 위 한곳에 모아 두어서, 제가 나중에 숫자만 바꿔 끼울 수 있게 해 주세요.
- 인터넷에서 불러오는 코드나 외부 서버로 데이터를 보내는 코드는 쓰지 마세요.
- 글자는 크고 읽기 쉽게, 색은 차분하게, 휴대폰 화면에서도 깨지지 않게 해 주세요.
- 만든 뒤 숫자 카드의 값이 표의 값과 맞는지 직접 계산해서 확인하고, 결과를 알려 주세요.

아래는 가상의 회의 메모입니다. 실제 회의 내용이 아닙니다.
이 메모를 읽고 다음 형식으로 정리해 주세요.
1. 회의 요약: 5줄 이내
2. 결정된 것: 목록
3. 할 일: 표 (할 일, 담당자, 기한, 상태). 메모에 담당자나 기한이 없으면 지어내지 말고 "미정"이라고 쓰세요.
4. 불분명해서 확인이 필요한 것: 질문 목록
메모에 없는 내용은 절대 지어내지 마세요.

[여기에 가짜 회의 메모를 붙여 넣으세요. 예: 가을 사내 행사 준비 회의. 참석자는 가상 인물 A, B, C 세 명. 장소는 후보 두 곳 중 정할 예정. 초대장은 다음 주 수요일까지 보내야 함. 예산은 아직 확정되지 않음.]

신입 사원을 위한 "첫 출근 안내" 웹페이지를 만들어 주세요. 내용은 아래 가짜 예시를 쓰고, 실제 회사 정보는 넣지 않습니다.
- 파일 하나(manual.html)로 만들고, 더블클릭하면 열려야 합니다.
- 맨 위에 제목과 한 줄 소개, 그 아래에 목차(누르면 해당 위치로 이동)
- 항목: 첫날 준비물, 자리와 장비 안내, 자주 묻는 질문(누르면 펼쳐지는 방식). 담당자 연락처는 [담당자 이름], [내선번호]처럼 자리 표시로 남겨 두세요.
- 준비물 목록은 체크하면 글자에 줄이 그어지게 해 주세요. 페이지를 닫았다 다시 열어도 체크가 남아 있으면 더 좋아요.
- 글자는 크게, 문장은 짧게, 휴대폰으로 봐도 읽기 편하게 해 주세요.
- 맨 아래에 "이 페이지는 연습용이며 실제 회사 정보가 아닙니다"라는 문구를 넣어 주세요.

출장비 계산기를 만들어 주세요. 한도와 단가는 제가 임의로 정한 예시 숫자입니다.
- 파일 하나(travel-calc.html), 더블클릭으로 열려야 합니다.
- 입력: 출장 일수, 교통비, 숙박비(1박당), 숙박 박수
- 일비는 하루 [예시 일비 숫자, 예: 30000]원으로 계산해서 더해 주세요. 이 숫자는 파일 맨 위에서 쉽게 바꿀 수 있게 해 주세요.
- 결과: 총 합계와 항목별 소계. 총 합계가 [예시 한도 숫자, 예: 500000]원을 넘으면 빨간 글씨로 "한도 초과"라고 보여 주세요.
- 숫자는 쉼표를 찍어 읽기 쉽게 보여 주고, 입력칸이 비어 있으면 0으로 보고 오류가 나지 않게 해 주세요.
- 만든 뒤 예시 3가지를 직접 계산해서, 화면의 결과가 맞는지 알려 주세요.

파일 정리 자동화를 연습하고 싶어요. 실제 파일은 건드리지 않고, 연습 폴더 안에서만 진행합니다.
1. 이 폴더 안에 practice-files 폴더를 만들고 가짜 파일 20개를 만들어 주세요. 이름은 보고서1.pdf, 회의록 최종.docx, 사진_01.jpg처럼 제각각이고, 내용은 비어 있어도 됩니다.
2. 그 폴더의 파일을 확장자별 하위 폴더(문서, 이미지, 기타)로 나눠 옮기고, 이름 앞에 실행하는 날의 날짜(예: 20261006_)를 붙이는 스크립트를 만들어 주세요.
3. 스크립트를 처음 실행하면 "이렇게 바꿀 예정입니다"라는 목록만 보여 주고, 실제로는 아무것도 바꾸지 않게 해 주세요. 제가 확인용 옵션을 줄 때만 실제로 옮기게 해 주세요.
4. 파일을 삭제하는 동작은 절대 넣지 마세요. 같은 이름이 이미 있으면 덮어쓰지 말고 건너뛰고 알려 주세요.
5. 새 프로그램 설치 없이 이 PC에서 쓸 수 있는 방식으로 만들고, 미리보기용 실행 방법과 실제로 옮기는 실행 방법을 각각 한 줄로 알려 주세요.
6. 스크립트가 어떤 일을 하는지 초보자도 알 수 있게 쉬운 말로 설명해 주세요.

아래 상황으로 사내 공지 메일 초안을 써 주세요. 실제 이름과 연락처는 쓰지 않고 [담당자 이름]처럼 자리 표시로 남겨 주세요.
상황: [예: 다음 주 금요일 오후 3시에 팀 교육이 있고, 장소는 3층 회의실이며, 노트북을 가져와야 합니다]
받는 사람: [예: 같은 팀 동료 10명]
요청:
1. 정중한 톤과 간결한 톤, 두 가지 버전으로 써 주세요.
2. 제목 후보를 3개 주세요.
3. 본문은 250자 이내로 하고, 날짜, 시간, 장소, 준비물이 한눈에 보이게 해 주세요.
4. 상황에 없는 내용(예: 점심 제공, 참석 필수 여부)은 지어내지 말고, 제가 정해야 하는 항목을 마지막에 질문으로 모아 주세요.

저는 [내 직무]를 맡고 있고, 코딩 경험은 없습니다. 제가 하는 일 중에서 AI에게 맡기기 좋은 일을 함께 찾고 싶습니다.
1. 먼저 저에게 질문을 한 번에 하나씩, 최대 5개만 해 주세요. 매일이나 매주 반복하는 일, 시간이 오래 걸리는 일, 짜증 나는 일을 중심으로 물어봐 주세요.
2. 제가 답하면, 맡기기 좋은 일 3가지를 골라 이유와 함께 알려 주세요.
3. 고른 일마다 "가짜 예시 데이터로 먼저 연습하는 방법"을 알려 주세요.
주의: 저는 고객 이름, 개인정보, 사내 기밀은 말하지 않을 거예요. 그런 내용이 필요하면 예시로 바꿔서 알려 달라고 말해 주세요.

제가 AI로 해 본 일을 팀에 공유하려고 합니다. 5분짜리 소개 자료의 뼈대를 만들어 주세요.
- 한 일: [예: 가짜 데이터로 매출 대시보드 만들기]
- 걸린 시간: [예: 처음 20분, 수정 10분]
- 이전 방식과 비교: [예: 보통 1시간 걸림]
- 아쉬웠던 점: [예: 처음 그래프 색이 마음에 안 들어서 두 번 고침]
구성: 1) 무엇을 했나 2) 어떻게 부탁했나(프롬프트 한 줄 요약) 3) 결과 4) 조심할 점(개인정보, 인증정보, 회사 기밀을 넣지 않는다는 보안 수칙 포함) 5) 동료가 바로 따라 할 수 있는 한 가지 제안
회사 내부 정보와 실제 고객 정보는 들어가지 않게 해 주세요. 확실하지 않은 숫자는 [확인 필요]로 표시해 주세요.

지금 만들고 있는 사이트에 새 기능을 하나 추가하고 싶어요.
추가하고 싶은 것: [예: 스크롤을 끝까지 내리면 나타나는 "다음 이야기" 장면]
조건:
1. 기존 화면과 색, 글꼴, 분위기가 어울리게 해 주세요.
2. 휴대폰 화면에서도 깨지지 않게 해 주세요.
3. 바꿀 파일과 이유를 먼저 짧게 알려 주고 진행해 주세요.
4. 끝나면 제가 직접 눌러 보며 확인할 순서를 알려 주세요.
제가 확인하고 "올려 주세요"라고 말하면 그때 GitHub에 올려서 내 주소에 반영해 주세요. 그 전에는 올리지 마세요.