2회 · Claude로 아이디어를 기획서와 목업으로
좋은 프롬프트의 구조를 익히고, Claude에게 인터뷰를 받아 기획서를 완성한 뒤, 아티팩트로 눌러 볼 수 있는 화면 목업을 만듭니다.
“만들기 전에 그려 본다. 목업 한 장이 회의 열 번보다 빠르다.”
학습 목표
- 좋은 프롬프트의 구조(목적·상황·결과물·조건·확인)를 안다
- Claude에게 인터뷰를 받아 "우리 모임" 서비스 기획서를 완성한다
- Claude 아티팩트로 클릭해 볼 수 있는 화면 목업을 만든다
오늘 만드는 것: 우리 모임 기획서, 클릭되는 화면 목업
실습 진도
—
실습 단계를 체크하면 표시돼요
오늘의 흐름
| 시간 | 내용 | 하는 일 |
|---|---|---|
| 0–10분 | 지난 시간 돌아보기 | 과제(만들고 싶은 것 3가지) 나누기 |
| 10–35분 | 좋은 프롬프트의 구조 | 다섯 칸 프롬프트, 나쁜 예와 좋은 예 |
| 35–60분 | 기획이란 무엇인가 | 인터뷰로 기획서 만들기, 첫 버전 줄이기 |
| 60–70분 | 쉬는 시간 | |
| 70–80분 | 목업과 아티팩트 | 그림으로 먼저 만들어 보는 이유 |
| 80–110분 | 실습 | 기획서 → 목업 → 고치기 → 개발 메모 |
| 110–120분 | 정리와 과제 | 퀴즈, 다음 시간 예고 |
오늘은 코드가 한 줄도 나오지 않습니다
오늘은 Claude 채팅만 씁니다. 그런데도 수업이 끝나면 휴대폰 화면처럼 눌러 볼 수 있는 시안이 손에 들립니다. 이 시안이 4회(웹앱)와 12회(휴대폰 앱)의 설계도가 됩니다.
좋은 프롬프트의 구조
AI는 독심술사가 아니다
1회에 배운 것처럼 프롬프트는 일을 맡기는 메모입니다. AI가 엉뚱한 답을 내는 이유는 대부분 AI가 몰라서가 아니라 우리가 말하지 않아서입니다.
꽃집에 전화로 주문할 때
"꽃 좀 보내 주세요"라고만 하면 꽃집 사장님은 곤란합니다. 누구에게, 무슨 날이라서, 예산은 얼마, 어떤 색, 언제까지인지 알아야 하지요. 좋은 프롬프트는 좋은 주문서입니다.
다섯 칸 프롬프트
이 과정에서는 다섯 칸으로 생각합니다. 모두 채울 필요는 없지만, 칸을 하나 채울 때마다 답이 좋아집니다.
| 칸 | 묻는 것 | 예 (모임 안내문) |
|---|---|---|
| 목적 | 왜 하나요 | 새 회원에게 모임을 알리려고 |
| 상황 | 어떤 배경인가요 | 매달 둘째 토요일 저녁 7시, 동네 북카페, 회비 1만 원 |
| 결과물 | 무엇을 받고 싶나요 | 단체 대화방에 붙여 넣을 안내문 한 편 |
| 조건 | 어떻게 만들까요 | 10줄 이내, 존댓말, 이모지는 2개까지 |
| 확인 | 어떻게 점검할까요 | 날짜·장소·회비가 다 들어갔는지 체크리스트로 |
목적: 독서 모임 새 회원에게 보낼 안내문을 만들고 싶어 상황: 매달 둘째 토요일 저녁 7시, 동네 북카페, 회비 1만 원. 회원은 20–60대 결과물: 단체 대화방에 붙여 넣을 안내문 한 편 조건: 10줄 이내, 존댓말, 이모지는 2개까지 확인: 날짜·장소·회비가 빠짐없이 들어갔는지 마지막에 체크리스트로 보여줘
아쉬운 요청
모임 앱 만들어줘
누가 쓰는지, 무엇이 불편한지, 어떤 기능이 필요한지 모르니 AI는 평범한 것을 지어냅니다.
좋은 요청
동네 독서 모임(회원 20명)의 일정을 알리고 참석을 받는 서비스를 기획하고 싶어. 총무가 매번 대화방에서 손으로 인원을 세는 게 불편해. 기획자처럼 질문해서 한 장짜리 기획서로 정리해줘.
상황(누가, 무엇이 불편한지)과 결과물(한 장짜리 기획서), 진행 방식(질문하기)이 들어 있습니다.
프롬프트를 더 좋게 만드는 작은 습관
| 습관 | 이렇게 말해 보세요 |
|---|---|
| 역할 주기 | "기획자처럼", "처음 써 보는 60대 회원 입장에서" |
| 예시 보여 주기 | "이런 느낌으로: (예시 붙여 넣기)" |
| 질문하게 하기 | "부족한 정보가 있으면 먼저 물어봐줘" |
| 한 번에 하나씩 | 고칠 것이 여러 개면 하나씩 나눠서 |
| 모르면 모른다고 | "확실하지 않으면 확실하지 않다고 말해줘" |
자세히프롬프트를 '잘' 쓰는 비법이 따로 있나요?펼치기
특별한 주문이나 비밀 단어는 없습니다. Anthropic의 공식 안내도 결국 "똑똑한 신입 동료에게 일을 맡기듯 분명하고 자세하게 쓰라"는 것입니다. 사람에게 설명해도 헷갈릴 문장이면 AI도 헷갈립니다. 반대로 사람에게 잘 전달되는 메모라면 AI에게도 잘 전달됩니다.
기획이란 무엇인가
만들기 전에 정하는 다섯 가지
기획은 거창한 일이 아닙니다. 만들기 전에 아래 다섯 가지를 정해 두는 것입니다.
- 목적 — 무엇이 불편해서 만드나요?
- 사용자 — 누가 쓰나요? (나, 회원, 총무)
- 핵심 기능 — 꼭 있어야 하는 것은?
- 화면 — 어떤 화면이 몇 개 필요한가요?
- 다음에 할 일 — 지금은 안 하지만 나중에 넣을 것은?
여행 계획과 같습니다
어디로, 누구와, 며칠, 꼭 가야 할 곳, 시간이 남으면 갈 곳. 이것만 정해도 여행이 훨씬 수월합니다. 기획서는 만들기 여행의 일정표입니다.
인터뷰로 기획서 만들기
무엇이 필요한지 처음부터 다 알 수는 없습니다. 그래서 오늘은 Claude가 질문하고, 내가 답하는 방식으로 기획서를 만듭니다. 답하다 보면 생각이 정리됩니다.
- Claude가 한 번에 3개 이하로 질문합니다.
- 모르는 질문에는 "잘 모르겠어, 추천해줘"라고 답해도 됩니다.
- 다 정해지면 한 장짜리 기획서로 정리해 줍니다.
첫 버전은 작게
(최소 기능 제품)는 꼭 필요한 기능만 넣은 첫 버전입니다. 처음부터 모든 기능을 넣으면 끝까지 가기 어렵습니다.
| 첫 버전에 넣을 것 (예) | 다음에 할 일 (예) |
|---|---|
| 모임 일정 목록 | 회비 관리 |
| 모임 상세 (날짜, 장소, 읽을 책) | 채팅 |
| 참석 신청 버튼과 인원 표시 | 사진 앨범 (9회) |
| AI 후기 요약 (10회) |
케이크보다 컵케이크 먼저
처음 빵을 굽는다면 3단 웨딩 케이크보다 컵케이크 하나가 좋습니다. 작지만 완성된 것을 만들어 보면, 그다음이 훨씬 쉬워집니다.
목업과 아티팩트
목업: 집 짓기 전의 모형
은 실제로 만들기 전에 화면이 어떻게 생길지 보여 주는 시안입니다. 말로 백 번 설명하는 것보다 눌러 볼 수 있는 화면 하나가 많은 것을 알려 줍니다.
- "참석 버튼이 너무 작네", "날짜가 먼저 보여야겠다" 같은 것은 보고 나서야 알 수 있습니다.
- 목업 단계에서 고치는 것은 공짜입니다. 다 만든 뒤 고치는 것은 훨씬 비쌉니다.
아티팩트: 대화창 옆에 생기는 결과물
Claude 채팅에서 화면이나 문서를 부탁하면 대화창 옆에 가 만들어집니다.
| 아티팩트로 만들 수 있는 것 | 예 |
|---|---|
| 문서 | 기획서, 안내문 |
| 화면 (웹페이지) | 모임 목록 화면, 참석 신청 화면 |
| 작은 앱 | 눌러 보면 화면이 바뀌는 목업 |
| 그림·도표 | 화면 흐름도 |
아티팩트는 바로 눌러 보고, 말로 고치고, 이전 버전으로 돌아갈 수도 있습니다.
프로젝트로 대화 묶기
Claude의 프로젝트 기능을 쓰면 관련된 대화와 자료를 한곳에 모을 수 있습니다. 프로젝트에 지침을 적어 두면 그 안의 모든 대화가 같은 규칙을 따릅니다.
이 프로젝트에서는 "우리 모임" 서비스를 기획해. 나는 코딩을 처음 배우는 사람이니 쉬운 말로 설명하고, 질문은 한 번에 3개 이하로 해줘. 기획서는 항상 같은 목차(목적, 사용자, 핵심 기능, 화면, 다음에 할 일)를 지켜줘.
대화가 길어지면
AI는 한 대화에서 기억할 수 있는 양()에 한계가 있습니다. 대화가 아주 길어지면 앞부분을 덜 정확하게 기억합니다. 기획서처럼 중요한 결과는 프로젝트 자료로 저장해 두고, 새 대화를 시작해도 괜찮습니다.
요즘 업계에서는
"거의 맞는" 답이 가장 위험하다
Stack Overflow 2025년 설문에서 개발자 **66%**가 AI의 가장 답답한 점으로 "거의 맞지만 완전히 맞지는 않은 답"을 꼽았습니다 (2025 Developer Survey). AI가 엉뚱한 답을 내는 가장 큰 이유는 요구사항이 모호하기 때문입니다. 그래서 요즘 AI로 일하는 사람들은 만들기 전에 설명을 분명히 쓰는 일에 더 많은 시간을 씁니다.
계획 먼저, 만들기는 나중에
2025–2026년의 AI 코딩 도구들은 대부분 계획을 먼저 보여 주는 기능을 갖췄습니다. Claude Code의 플랜 모드도 그중 하나입니다(3회). 무엇을 만들지 먼저 글로 정해 두고 AI에게 만들게 하는 흐름이 업계의 기본이 되고 있습니다. 오늘 만드는 기획서가 바로 그 "먼저 쓰는 글"입니다.
기획하는 사람이 직접 시안을 만든다
예전에는 기획자가 글로 쓰면 디자이너가 시안을 그리고, 개발자가 만들었습니다. 지금은 기획하는 사람이 AI로 눌러 볼 수 있는 시안을 직접 만들어 동료와 이야기를 나눕니다. "말로 설명하는 회의"가 "시안을 눌러 보는 회의"로 바뀌고 있습니다.
시연
강사가 "동네 독서 모임 참석 관리" 아이디어로 Claude에게 인터뷰를 받습니다. 질문 세 번 만에 기획서가 나오고, 그 기획서로 휴대폰 화면 목업을 만듭니다. 목업을 눌러 보며 "참석 인원이 다 차면 버튼을 흐리게" 같은 수정을 말로 요청하고, 마지막으로 다음 시간에 쓸 개발 메모를 뽑습니다.
실습
주제: "우리 모임" 서비스 — 동네 독서 모임 "책 읽는 저녁"(가상)의 일정을 알리고 참석을 받는 서비스입니다. 1회 과제에 적은 내 아이디어로 해도 좋습니다.
실습 2-1 · 다섯 칸 프롬프트 연습
약 10분같은 부탁을 나쁜 예와 좋은 예로 보내고 결과를 비교합니다.
Claude 채팅에 "모임 안내문 써줘"라고만 보내 보세요. 어떤 결과가 나오는지 잘 봐 두세요.
- PROMPT다섯 칸 프롬프트 틀
목적: 독서 모임 새 회원에게 보낼 안내문을 만들고 싶어 상황: 매달 둘째 토요일 저녁 7시, 동네 북카페, 회비 1만 원. 회원은 20–60대 결과물: 단체 대화방에 붙여 넣을 안내문 한 편 조건: 10줄 이내, 존댓말, 이모지는 2개까지 확인: 날짜·장소·회비가 빠짐없이 들어갔는지 마지막에 체크리스트로 보여줘
두 결과를 나란히 비교해 보세요. 무엇이 달라졌나요? 날짜와 장소가 정확해졌고, 길이와 말투도 원하는 대로 나왔을 것입니다.
실습 2-2 · 인터뷰 받고 기획서 만들기
약 20분질문에 답하다 보면 기획서가 완성됩니다.
Claude 왼쪽 메뉴의 프로젝트에서 새 프로젝트 "우리 모임"을 만들고, 지침 칸에 아래 내용을 붙여 넣습니다. 프로젝트 기능이 안 보이면 이 단계는 건너뛰어도 됩니다.
PROMPT프로젝트 지침 만들기이 프로젝트에서는 "우리 모임" 서비스를 기획해. 나는 코딩을 처음 배우는 사람이니 쉬운 말로 설명하고, 질문은 한 번에 3개 이하로 해줘. 기획서는 항상 같은 목차(목적, 사용자, 핵심 기능, 화면, 다음에 할 일)를 지켜줘.
- PROMPT인터뷰 받고 기획서 만들기
나는 동네 독서 모임의 일정을 알리고 참석을 받는 서비스을(를) 만들고 싶어. 기획자처럼 나에게 질문을 해서 누가 쓰는지, 꼭 필요한 기능, 없어도 되는 기능, 화면 구성을 정해줘. 질문은 한 번에 3개 이하로 하고, 다 정해지면 한 장짜리 기획서로 정리해줘.
이렇게 되면 성공좋은 아이디어네요! 몇 가지 여쭤볼게요.1. 이 서비스를 주로 쓰는 사람은 누구인가요? (총무만, 회원 모두?)2. 모임은 한 달에 몇 번 정도 열리나요?3. 지금은 참석을 어떻게 받고 계신가요?편하게 답하세요. 모르면 "추천해줘"라고 해도 됩니다. 몇 번 주고받으면 기획서가 나옵니다.
이렇게 되면 성공# 우리 모임 — 기획서목적: 모임 일정을 한곳에 알리고, 참석 인원을 자동으로 센다사용자: 회원(신청), 총무(일정 등록)핵심 기능: 모임 목록 / 모임 상세 / 참석 신청·취소 / 남은 자리 표시화면: ① 모임 목록 ② 모임 상세 ③ 신청 완료다음에 할 일: 사진 앨범, 후기 요약, 회비 관리막혔을 때 - PROMPT첫 버전 범위 줄이기
기획서의 기능 중에서 첫 버전에 꼭 필요한 것 3개만 골라줘. 나머지는 "다음에 할 일"로 따로 적어줘. 왜 그렇게 골랐는지도 한 줄씩.
실습 2-3 · 눌러 볼 수 있는 목업 만들기
약 20분기획서를 화면으로. 눌러 보고, 말로 고칩니다.
- PROMPT클릭되는 화면 목업 만들기
이 기획서로 휴대폰 화면 크기의 목업을 아티팩트로 만들어줘. 화면은 모임 목록, 모임 상세, 참석 신청 완료. 버튼을 누르면 화면이 바뀌게 하고, 데이터는 가짜로 넣어줘. 색은 따뜻하고 차분한 느낌으로.
이렇게 되면 성공대화창 오른쪽에 휴대폰 크기 화면이 나타납니다.┌──────────────────┐│ 책 읽는 저녁 ││ ─ 11월 8일(토) 7시 ││ 『작은 것들』 ││ 참석 12 / 15 ││ [참석할게요] │└──────────────────┘버튼을 눌러 화면이 바뀌는지 직접 확인해 보세요.
막혔을 때 보이는 것을 그대로 말하면 됩니다. 한 번에 하나씩 고치면 결과를 확인하기 쉬워요.
- PROMPT가상의 사용자가 되어 목업 평가받기
이 목업을 세 사람의 입장에서 써 보고 평가해줘. (1) 휴대폰이 익숙하지 않은 60대 회원 (2) 바쁜 30대 직장인 회원 (3) 모임을 운영하는 총무. 각자 불편한 점 2개와 좋은 점 1개, 그리고 고칠 점 우선순위를 표로.
우선순위가 높은 것 1–2개만 골라 다시 고쳐 보세요.
실습 2-4 · 다음 시간을 위한 개발 메모
약 10분목업과 메모가 4회의 설계도가 됩니다.
- PROMPT목업에서 개발 메모 뽑기
이 목업을 실제로 만들 사람에게 넘길 메모를 써줘. 화면별로 보여 줄 정보, 버튼이 하는 일, 필요한 데이터 항목을 표로 정리해줘. 기획서.md 파일로 저장할 수 있게 마크다운으로.
- 개발 메모 아티팩트를 열고 다운로드(또는 복사)해서
기획서.md로 저장합니다. 1회에 만든claude-practice폴더에 두세요.목업 화면을 캡처합니다. Windows는Win + Shift + S, Mac은⌘ + Shift + 4를 누르면 원하는 부분만 캡처할 수 있어요.캡처 이미지도 같은 폴더에목업.png로 저장합니다.
더 해 보기 · 답 점검하기
약 5분- PROMPTAI 답이 맞는지 다시 확인하기
방금 답에서 사실이 틀렸을 수 있는 부분을 스스로 찾아서 표시해줘. 확인하려면 어디를 찾아보면 되는지도 알려줘.
기획서에 대해 "실제로 운영할 때 빠진 것이 있는지 찾아줘"라고 덧붙여도 좋습니다. 예를 들어 "모임이 취소되면?" 같은 경우입니다.
정리
핵심 정리
- 1좋은 프롬프트는 좋은 주문서. 목적·상황·결과물·조건·확인 다섯 칸으로 생각한다.
- 2기획은 인터뷰로. AI에게 질문하게 하면 내 생각이 정리된다.
- 3첫 버전은 작게. 꼭 필요한 기능 3개면 충분하다.
- 4목업은 집 짓기 전의 모형. 눌러 보고 고치는 것은 공짜다.
- 5기획서와 목업은 4회(웹앱)와 12회(앱)의 설계도가 된다. 꼭 저장해 둔다.
다음 시간에는 드디어 Claude Code를 본격적으로 씁니다. 웹페이지가 어떻게 움직이는지 알아보고, 내 컴퓨터에 첫 웹페이지를 만듭니다.
복습
Q1.다섯 칸 프롬프트의 칸을 이 과정에서 배운 순서대로 놓으세요.(순서대로 정렬)
- 1확인
- 2조건
- 3결과물
- 4목적
- 5상황
Q2."모임 앱 만들어줘"라는 프롬프트의 가장 큰 문제는?
Q3.첫 버전(MVP)에는 생각나는 기능을 모두 넣는 것이 좋다.
Q4.목업을 먼저 만드는 가장 큰 이유는?
Q5.Claude 프로젝트에 지침을 적어 두면, 그 프로젝트의 대화들이 같은 규칙을 따른다.
과제
과제 · 나만의 아이디어 기획서
"우리 모임" 말고 내 아이디어 하나로 인터뷰 → 기획서 → 목업을 한 번 더 해 보세요. 기획서 내용을 아래에 붙여 넣어 두면 15회에서 다시 꺼내 씁니다.