설명으로 프로젝트 만들기
prompt 하나로 아이디어에서 동작하는 앱까지
⏱ 예상 ~8분
01 · 읽기
진짜 뭔가 만들어 봐요. 지금까지는 파일 하나를 만들고 작은 편집을 했어요. 그런데 Claude Code 는 훨씬 더 많은 걸 다룰 수 있어요 — 프로젝트 전체 설명을 주면 전체를 만들어 내는 걸 볼 수 있어요.
좋은 결과를 얻는 비밀은 충분히 구체적이기 예요. 기능, 동작, 디자인 디테일을 많이 줄수록 Claude 는 한 번에 원하는 것에 더 가까워져요.
북마크 매니저 를 만들 거예요 — 북마크를 저장, 보기, 삭제할 수 있는 단순한 웹 앱이에요. 서버 없이 모든 게 브라우저의 localStorage 로 동작해요.
02 · 프롬프트 템플릿
Claude에게 자세한 프로젝트 설명을 줘요. 이 prompt 가 얼마나 구체적인지 봐요 — 각 기능을 나열하고, 동작을 설명하고, 기술적 접근을 지정해요.
간단한 북마크 매니저 웹 앱 하나 만들어 줘:
- 북마크 추가용 폼 (URL 과 제목) 이 있는 HTML 페이지
- JavaScript 로 북마크를 localStorage 에 저장
- 저장된 북마크를 다 보여주는 목록
- 각 북마크에 삭제 버튼
- 깔끔하고 현대적인 CSS 스타일
- 전체를 단일 페이지 앱으로 (서버 필요 없음)
03 · 실기 실습
브라우저에서 Claude가 만든 HTML 파일을 열어 시도해 봐요. 북마크 몇 개 추가하고, 새로고침해서 저장되는지 확인하고, 삭제 버튼을 테스트해요.
open index.html
04 · 체크리스트
북마크 매니저를 꼼꼼히 테스트해요. 각 기능이 동작하는지 확인하고 체크해요.
- URL 과 제목으로 북마크를 추가할 수 있어요
- 북마크가 목록에 표시돼요
- 삭제 버튼이 북마크를 지워요
- 새로고침해도 북마크가 남아 있어요
05 · 퀴즈
Claude Code 에게 더 효과적인 prompt 를 만드는 건 뭐예요?
- 단어가 적을수록 좋아요
- 자연어 말고 코드로 쓰기
- 한 번에 다 물어보기
- 기능, 기술 스택, 구조에 대해 구체적으로 말하기
06 · 빈칸 채우기
Claude Code 에게 프로젝트를 만들어 달라고 할 때, 구체적인 기능이 담긴 _____ 한 설명을 주면 모호한 요청보다 훨씬 좋은 결과를 줘요.
07 · 읽기
방금 자연어 설명만으로 완전히 동작하는 웹 앱을 만들었어요. 손으로 했으면 얼마나 걸렸을지 생각해 봐요 — HTML 구조 세팅, localStorage JavaScript 작성, 폼 제출 처리, 삭제 로직 만들기, CSS 로 모든 걸 배치하기.
Claude Code로는 첫 버전이 몇 초 걸렸어요. 뭔가 안 맞으면 반복해요: Claude 한테 고치라고, 기능을 추가하라고, 디자인을 바꾸라고 해요.
이게 AI 보조 개발의 힘이에요. 여러분은 아이디어와 판단력을 가져오고, Claude 는 속도를 가져와요.
핵심 정리
- 자세한 prompt 가 더 좋은 결과를 내요 — 원하는 기능을 나열해요
- 계속 진행하기 전에 결과물은 항상 직접 테스트하기
- 뭔가 안 맞으면 문제를 설명하고 Claude 한테 고쳐 달라고 하기
- Claude 는 몇 초 만에 만들어요, 손으로 하면 훨씬 오래 걸려요
08 · 퀴즈
Claude Code 에게 할 일 목록 앱을 만들어 달라고 하려고 해요. 어떤 prompt 가 한 번에 가장 좋은 결과를 낼까요?
- 할 일 추가 입력란, 모든 할 일을 보여주는 목록, 완료 표시용 체크박스, 각 할 일에 삭제 버튼, 새로고침해도 유지되는 localStorage 가 있는 할 일 웹 앱을 만들어 줘
- 할 일 앱 만들어 줘
- JavaScript 로 쓸 만한 거 만들어 줘
- 모든 기능 다 들어간 할 일 앱 만들어 줘
09 · 빈칸 채우기
Claude가 프로젝트를 만든 후엔 계속 진행하기 전에 항상 결과물을 직접 _____ 해야 해요.
⚠ 전체 인터랙티브 경험에는 JavaScript가 필요해요. JavaScript를 켜고 새로 고침해 주세요.
※ 이 사이트는 독립 운영되는 교육 프로젝트로, Anthropic의 공식 제품이 아니에요. Claude™ 는 Anthropic, PBC 의 상표예요.