CHAPTER 09 · 프롬프트 3개
제9장 만들게 하기 전에 요구 사항 굳히기
본문에 실린 프롬프트와 같은 내용입니다. 복사해서 Claude Code 입력란에 붙여 넣어 사용해 주세요.
지시문은 본문 안내대로 각 절의 실습 폴더(9-1-brand-slides, 9-2-design-samples, 9-3-expense-check)를 열어 둔 상태를 전제로 작성되어 있습니다. 9-2-design-samples 는 빈 폴더로, 만들어진 후보 파일을 두는 곳으로 사용합니다.
SAMPLE DATA · 이메일 인증한 독자만
제9장 실습 자료
chapter09.zip · 716KB · 파일 12개
Claude Code에 전달할 폴더
chapter09/9-1-brand-slides/견본 이미지에 맞춰 슬라이드를 만드는 실습용 폴더chapter09/9-2-design-samples/글꼴·배색 후보를 두는 빈 폴더 (design-picker.html 을 만드는 곳)chapter09/9-3-expense-check/경비 정산 규정으로 신청 전 체크 도구를 만드는 실습용 폴더
ZIP 안에 든 파일 보기
- chapter09/
- prompts.md이 화면의 프롬프트 모음
- 9-1-brand-slides/
- campaign-brief.md2KB
- sample-images/
- slide-1.jpg86KB
- slide-2.jpg90KB
- slide-3.jpg133KB
- slide-4.jpg129KB
- slide-5.jpg114KB
- slide-6.jpg121KB
- slide-7.jpg110KB
- slide-8.jpg100KB
- slide-9.jpg96KB
- 9-2-design-samples/
- 9-3-expense-check/
- expense-rules.md1KB
9.1절견본 이미지를 건네고 맡기기
견본 이미지와 내용 메모를 지정해 슬라이드를 만든다(9-1-brand-slides 폴더를 열고 실행):
@campaign-brief.md 의 내용을 바탕으로 HTML 슬라이드를 만들어 주세요. @sample-images/ 에 들어 있는 기존 슬라이드 이미지를 견본으로 삼아 배색, 여백, 제목 크기, 로고 배치, 요소 배열 방식을 비슷하게 맞춰 주세요. 형식 조건은 다음과 같습니다. - 외부 라이브러리를 불러오지 않는, 파일 하나짜리 HTML - 16:9 슬라이드를 한 장씩 보여 주고, 화살표 키로 앞뒤로 넘길 수 있을 것 내용은 @campaign-brief.md 에서 크게 바꾸지 말고, 우선 발표에 쓸 수 있는 초안으로 deck.html 을 만들어 주세요.
9.2절후보를 만들게 하고 고르기
글꼴과 배색을 4안씩 내게 한다(9-2-design-samples 폴더를 열고 실행. "사이트는 …" 줄은 자신의 주제로 바꿔서 사용):
design-picker.html 이라는 파일 하나짜리 HTML을 만들어 주세요. - 제목용·본문용 한국어 글꼴 조합 4안, 배색(배경·메인·포인트·글자색) 4안을 준비한다 - 글꼴과 배색을 각각 버튼으로 고르면, 같은 문구(사이트명·제목·리드 문장·긴 본문)의 미리보기에 선택한 조합이 바로 반영된다 - 글꼴 후보에는 글꼴 이름을, 배색 후보에는 HEX 코드가 붙은 색 견본을 함께 적는다 - "이 조합 지정 복사" 버튼을 달고, 누르면 선택 중인 글꼴 이름과 HEX 코드 목록이 지시문 형태로 복사되게 한다 - 글꼴도 배색도 계열과 분위기가 서로 다른 4안으로 한다 - 글꼴은 Google Fonts에서 불러와도 된다 사이트는 AI 활용 정보를 전하고 개발을 지원하는 일해 AI 채널의 것입니다. 아직 사이트 본체는 만들지 마세요. 아울러 추천 조합도 이유와 함께 알려 주세요.
9.3절질문하게 해서 계획 확인하기
플랜 모드로 전환한 뒤, 정해야 할 사항을 질문하게 한다(9-3-expense-check 폴더를 열고 실행):
@expense-rules.md 는 우리 회사 경비정산 규정의 발췌본입니다. 이 규정에 비추어, 경비를 신청하기 전에 스스로 점검할 수 있는 도구를 만들고 싶습니다. 브라우저에서 열 수 있는 파일 하나짜리 HTML로 만들 예정입니다. 아직 요구사항이 정해지지 않았습니다. 만들기 시작하기 전에, 정해야 할 사항을 선택지와 함께 저에게 질문해 주세요.