클로드 코드로 앱 만드는 프롬프트 8가지

추석 AI 부트캠프 하루 6시간 만에
AI 기초부터 나만의
서비스까지 완성 이번 연휴를 기회로 삼으세요일정 보기 ↗

Quick Start

앱을 만드는 일을 범위 설정, 화면, 데이터, 구현, 테스트, 수정, 출시 점검, 문서화로 나눕니다. 대괄호를 내 앱의 정보로 바꾸고, 앞 단계에서 확정한 결과를 다음 프롬프트와 함께 전달하세요.

1. 01~03에서 핵심 기능과 화면·데이터 규칙을 확정합니다.
2. 04~06에서 구현한 뒤 테스트 로그로 실패 원인을 좁힙니다.
3. 07~08에서 출시를 막는 문제와 다음 작업을 문서로 남깁니다.

STEP 1 · 1분핵심 기능과 완료 조건을 정한다

앱 이름·대상·문제를 넣습니다. 오늘셋은 오늘 끝낼 일을 고르는 직장인을 대상으로 잡았습니다. 답에 질문이 있으면 글자 수 상한과 저장 위치처럼 빠진 조건부터 정하세요.

Scope Planner 역할을 맡아줘. [앱 이름]을 만들 거야. 대상은 [대상 사용자], 해결할 문제는 [해결할 문제]야. 첫 버전의 핵심 기능을 3개로 줄이고, 하지 않을 기능을 분리해줘. 각 기능에 사용자가 직접 확인할 완료 조건을 붙여줘. 모르는 조건은 추측하지 말고 질문해줘.

성공하면 기능별 완료 조건과 제외할 기능이 나뉩니다.

STEP 2 · 1분입력과 결과를 화면으로 연결한다

01의 핵심 기능과 질문에 답한 내용을 함께 넣습니다. 오늘셋에서는 추가·완료 표시·삭제와 재접속 후 유지를 연결했습니다. 성공 상태뿐 아니라 빈 입력 때 보일 안내도 확인하세요.

Screen Designer 역할을 맡아줘. 앞에서 정한 [핵심 기능 3개]를 기준으로 화면 구성과 이동 순서를 작성해줘. 각 화면의 입력, 버튼, 성공 결과를 연결하고 빈 상태·오류 상태도 포함해줘. 390px 모바일에서 가장 먼저 보여줄 내용과 버튼을 정해줘. 아직 코드는 쓰지 마.

성공하면 입력·버튼·결과·오류가 같은 흐름으로 연결됩니다.

STEP 3 · 1분데이터와 입력 규칙을 확정한다

02의 화면 설계와 저장 방식을 넣습니다. 오늘셋은 localStorage를 선택했습니다. 글자 수를 어떻게 셀지, 저장값이 깨지면 어떻게 할지를 구현 전에 정하세요.

Data Architect 역할을 맡아줘. 앞의 화면에서 필요한 데이터 필드와 타입, 필수 여부, 기본값을 표로 정리해줘. [저장 방식]에 맞춰 생성·조회·수정·삭제 규칙과 입력 검증을 정의해줘. 가상 데이터 3개와 잘못된 입력 예시도 만들어줘. 필요 없는 개인정보는 저장하지 마.

성공하면 필드 표와 정상·잘못된 입력 예시가 준비됩니다.

STEP 4 · 1분확정한 범위대로 첫 버전을 만든다

01~03의 확정본과 기술 스택을 전달합니다. 오늘셋은 HTML/CSS/JS를 사용했습니다. 반환된 파일을 같은 프로젝트에 저장하고, 실행 방법과 실제로 수행한 작업을 구분해 읽으세요.

App Builder 역할을 맡아줘. 앞서 확정한 기획·화면·데이터 구조대로 [기술 스택]으로 앱을 구현해줘. 핵심 기능부터 연결하고, 파일별 전체 코드와 로컬 실행 방법을 줘. 사용자 입력은 HTML로 해석하지 마. 설치·배포·커밋은 하지 말고, 실행하지 않은 것은 미실행으로 표시해줘.

성공하면 각 버튼이 데이터 변경과 화면 결과로 이어집니다.

STEP 5 · 1분완료 조건을 테스트로 확인한다

04의 실제 코드와 01의 완료 조건을 넣습니다. 로직 검사와 브라우저 검사를 따로 기록하세요. 오늘셋도 로직은 통과했지만 화면 입력에서는 실패가 나왔습니다.

Test Engineer 역할을 맡아줘. 방금 구현한 코드를 기준으로 [완료 조건]을 검사하는 실행 가능한 테스트 코드를 만들어줘. 정상 입력·빈 입력·길이 초과·저장 후 재접속을 포함하고 예상 결과를 적어줘. 의존성 없이 가능한 테스트와 브라우저에서 확인할 항목을 구분하고, 브라우저 항목도 가능하면 자동 실행 스크립트로 줘. 실행하지 않았다면 통과했다고 쓰지 마.

성공하면 실행한 검사마다 예상 결과와 실제 결과가 남습니다.

STEP 6 · 1분실패 로그로 원인을 좁혀 수정한다

05의 실패 항목에 재현 순서·예상·실제·로그를 붙입니다. 테스트 보조 함수가 잘못됐는지도 분리해 확인하고, 앱 수정 후 같은 실패 항목을 다시 실행하세요.

Bug Fixer 역할을 맡아줘. [재현 순서·예상 결과·실제 결과·오류 로그]를 앞의 코드와 대조해 원인을 좁혀줘. 실패하는 테스트를 먼저 제시하고, 원인에 필요한 최소 코드만 고쳐줘. 수정 파일 전문과 재검증 방법을 줘. 관련 없는 기능이나 스타일은 바꾸지 마.

성공하면 원래 실패하던 검사가 수정 후 통과하는지 대조할 수 있습니다.

STEP 7 · 1분출시 전에 남은 문제를 구분한다

06의 수정 코드와 배포할 환경을 넣습니다. 오늘셋에서는 정적 호스팅의 하위 경로와 저장 예외를 점검했습니다. 체크리스트 작성과 실제 배포는 별개 단계입니다.

Release Checker 역할을 맡아줘. [배포 환경]을 기준으로 현재 앱의 실행 명령, 환경변수, 저장 범위, 경로와 새로고침, 오류 처리를 점검해줘. 코드로 확인한 사실·직접 실행이 필요한 항목·출시를 막는 문제를 구분해줘. 배포는 실행하지 말고 사람이 확인할 체크리스트로 정리해줘.

성공하면 코드 확인·실행 확인·출시 차단 문제가 구분됩니다.

STEP 8 · 1분다음 작업자가 이어받을 문서를 쓴다

01~07의 확정 내용, 최종 코드, 테스트 로그와 남은 문제를 전달합니다. README의 명령·파일명·저장 위치를 실제 파일과 대조하고, 다음 작업의 우선순위를 남기세요.

Documentation Writer 역할을 맡아줘. 지금까지 확정한 앱을 기준으로 README를 작성해줘. 목적, 로컬 실행, 사용 방법, 파일 구조, 테스트 방법, 데이터 저장 위치, 알려진 한계를 넣어줘. 실제 코드에 없는 기능이나 실행하지 않은 테스트 성공은 쓰지 마. 다음 작업 3개를 우선순위로 정리해줘.

성공하면 실행 방법과 알려진 한계가 코드와 맞는 README가 생깁니다.

한눈에 보는 8단계 흐름표

실제로 돌려본 결과

오늘셋의 추가·완료 표시·삭제·재접속 후 유지 흐름을 검사했습니다. 로직 검사와 브라우저 검사 결과는 다음과 같습니다.

브라우저에서 길이 초과 입력과 이모지 입력이 실패했습니다. 원인은 입력칸의 maxlength="80" 한 줄이었습니다. 브라우저가 값을 먼저 잘라 81자 거부 안내가 나오지 않았고, UTF-16 기준으로는 영수증 이모지 80개가 40개로 제한됐습니다. 이 속성을 제거해 코드포인트 기준의 기존 검증으로 넘겼습니다.

테스트의 입력칸 비우기 함수도 바로잡았습니다. 보조 함수만 고친 채 원래 앱을 검사해도 같은 항목이 실패했고, 앱 수정 뒤 브라우저 11/11이 통과했습니다. 앱 수정 한 줄과 테스트 코드 수정을 구분한 결과입니다.

알아 둘 한계

• 실행 기록 기준일은 2026년 10월 4일입니다. Claude Code 안의 Claude(Opus 5.5) 서브에이전트가 01→08을 앞 단계 결과를 이어 붙여 한 번 실행했습니다. claude.ai 웹과 Sonnet 5.5에서는 실행하지 않았습니다. 이 글은 보관된 실행 기록을 대조한 것이며 새 실행 결과가 아닙니다.
• 실행 당시 입력과 현재 카드 문구에는 차이가 있습니다. 역할 이름·01 문장·05 브라우저 자동 실행 안내 등이 보완됐으며, 아래 전문은 현재 카드 기준입니다. 현재 문구 그대로 전체 재실행한 기록은 없습니다.
• 오늘셋은 연습용 앱이며 01의 질문에는 가상 사용자 답을 넣었습니다. 한 번의 실행으로 다른 앱에서도 같은 결과가 나온다고 보장하지 않습니다.
• 07에서 저장소 읽기가 막히면 앱이 멈추고, 저장 실패 시 항목과 안내가 나오지 않는 문제가 남았습니다. 출시 전 수정 대상입니다. 점검 스크립트의 종료 코드 0은 이 문제의 해결을 뜻하지 않습니다.
• 실제 호스팅 배포, 휴대폰의 한글 입력, Safari와 화면 낭독기는 미검증입니다. 데이터는 같은 브라우저·출처에 저장되며 기기 간 동기화는 없습니다.
• STEP 시간은 읽고 입력을 준비할 분량 안내이며 실제 앱 제작 소요시간 실측이 아닙니다.

FAQ

8개를 한 번에 넣나요? 하나씩 실행하고 확정된 결과를 다음 단계와 함께 넣습니다. 새 대화라면 앞 단계 결과와 현재 코드·로그도 다시 전달해야 합니다.

브라우저 테스트가 통과하면 바로 공개해도 되나요? 07의 출시 차단 항목을 따로 확인해야 합니다. 오늘셋에서도 기본 동작 테스트 이후 저장 예외 문제가 드러났습니다.

공식 참고 자료

• Claude Code 공식 — 코드 읽기·수정·명령 실행 개요
• Anthropic 공식 — 프롬프트 엔지니어링 개요

두 공식 문서를 2026년 10월 4일에 직접 열어 확인했습니다. 위 수치는 공식 문서의 성능 주장이 아니라 오늘셋 실행 기록에서 가져온 결과입니다.