[혼공바이브코딩] 4주차 -1_단계별 프롬프트와 할 일 관리 앱

단계별 프롬프트 전략

바이브코딩의 핵심은 ‘생각의 설계’와 ‘실제 구현’을 분리하는 것입니다. 무작정 코드를 짜달라고 하기보다, 잘 짜인 기획서를 바탕으로 단계를 나누어 접근할 때 프로젝트의 완성도가 결정됩니다. 처음 시작하는 분들을 위해 효율적인 4단계 워크플로를 정리했습니다.

1. PRD 작성: 프로젝트의 지도 그리기

먼저 클로드 웹(Claude.ai)에서 PRD(제품 요구사항 정의서)를 작성하며 프로젝트의 밑그림을 그립니다.

방법: 앱의 목적, 주요 기능, 사용자 화면 구성을 상세히 정의합니다.
이유: AI에게 “이런 거 만들어줘”라고 단순하게 말하면 결과물이 모호해집니다. 명확한 가이드라인(PRD)이 있어야 AI가 개발 과정에서 방향을 잃지 않습니다.

2. 프롬프트 변환: 실행 가능한 단위로 쪼개기

작성된 기획서를 바탕으로, 한 번에 하나씩 처리할 수 있는 단계별 지시서를 만듭니다.

방법: “전체 다 만들어줘”가 아니라, “1단계: 기초 환경 설정”, “2단계: 로그인 페이지 UI”, “3단계: 데이터베이스 연결” 식으로 업무를 분할합니다.
이유: 한 번에 너무 많은 코드를 요청하면 AI가 실수를 하거나 코드를 생략할 수 있기 때문입니다. 단계를 쪼갤수록 코드의 정확도는 올라갑니다.

3. 순차 실행: 클로드 코드로 실제 구현하기

이제 분할된 지시서를 들고 클로드 코드(Claude Code) 환경으로 넘어가 실제 파일을 생성하고 코딩을 진행합니다.

방법: 2단계에서 나눈 순서대로 지시서를 하나씩 입력하며 코드를 작성합니다.
이유: 터미널 기반의 클로드 코드는 파일 시스템에 직접 접근할 수 있어, 웹에서 복사해 붙여넣는 번거로움 없이 빠르고 정확하게 코드를 반영할 수 있습니다.

4. 결과 확인: 기획과 구현의 일치 검증

각 단계가 끝날 때마다 결과물이 처음 기획한 내용과 맞는지 점검합니다.

방법: 실행 화면을 확인하고, AI에게 “기획서의 A 기능이 제대로 구현됐는지 검토해줘”라고 요청합니다.
이유: 마지막에 한꺼번에 수정하려면 일이 커지지만, 단계별로 검증하며 진행하면 오류를 즉시 잡아내어 전체적인 퀄리티를 높일 수 있습니다.

이 방식은 기획(웹)에서 머리를 쓰고, 구현(코드)에서 손을 쓰는 체계적인 협업 방식입니다. 이 흐름만 따라오면 복잡한 서비스도 논리적으로 완성해 나갈 수 있습니다.

클로드 코드 실전 활용 : 할 일 관리 앱

PRD 작성 요청

단계별 프롬프트 생성

💡 꿀팁: “claude” 명령어가 안 먹힌다면? (보안 오류 해결법)

클로드 코드를 설치하고 터미널에 claude를 입력했을 때, 빨간 글씨로 ‘스크립트를 실행할 수 없으므로…’라는 보안 오류가 뜨는 경우가 있습니다. 이는 윈도우 파워쉘(PowerShell)의 기본 보안 정책이 스크립트 실행을 막아두었기 때문입니다. 당황하지 말고 다음 순서대로 입력하면 바로 해결됩니다.

1. 파워쉘(PowerShell)을 ‘관리자 권한’으로 실행합니다.

시작 메뉴에서 ‘PowerShell’ 검색 후 마우스 우클릭 -> [관리자로 실행] 클릭

2. 아래 명령어를 복사해서 입력하고 엔터를 누르세요.

Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

3. 확인 메시지가 나오면 Y를 입력합니다.

이제 현재 사용자에 한해 클로드 코드와 같은 스크립트 실행이 허용됩니다.

4. 다시 터미널로 돌아가 claude를 입력해 보세요.

이제 정상적으로 클로드 코드가 실행되며 바이브코딩을 시작할 준비가 끝납니다!

Step 1: 기본 구조 및 핵심 기능 구현

복사된 상태에서 마우스 오른쪽 버튼을 누르면 붙여넣기가 됩니다.

바로 할 일을 입력해서 추가해봤는데 리스트에 뜨지를 않습니다.
1단계: 프로젝트 구조 및 기본 HTML/CSS 설정만 해서 그런건가요?
그래도 기능이 돌아가는 것을 먼저 확인하고 싶어서 클로드한테 할 일을 추가해도 리스트에 안뜬다고 말을 했습니다.

역시 바로 기능구현을 해 주는군요.
이거서 다음 단계의 프롬프트들을 순차적으로 입력해줍니다.

클로드(Claude) 슬래시 명령어

명령어	설명
`/status`	시스템 상태 확인: 현재 서비스가 원활한지, 서버 점검 중인지 등을 확인합니다. 사용자 본인의 멤버십 상태(무료/유료)나 남은 메시지 쿼터를 보여주기도 합니다.
`/model`	모델 확인 및 변경: 현재 대화에 사용 중인 모델(예: Claude 3.5 Sonnet, Opus, Haiku 등)이 무엇인지 확인하거나, 다른 모델로 전환할 때 사용합니다.
`/help`	도움말 보기: 해당 서비스에서 사용할 수 있는 전체 명령어 리스트, 주요 기능 가이드, 단축키 안내 등을 팝업이나 메시지로 출력합니다.

작업재개와 효율성높이기

`claude` 명령어

명령어 옵션	설명
`claude`	새로운 세션을 시작합니다.
`claude "질문 내용"`	실행과 동시에 질문을 던집니다.
`claude --resume`	마지막 세션을 이어서 시작합니다.
`claude -p "경로"`	특정 파일의 내용을 포함하여 대화를 시작합니다.

원하는 작업	입력 명령어
완전히 새로 시작	`claude`
직전 대화 이어서 하기	`claude --continue` 또는 `claude --resume`
특정 파일을 읽히며 시작	`claude -p 파일명` 또는 `claude -c 파일명`
대화 끝내고 나가기	`/exit` 또는 `Ctrl + D`
답변 중단 및 강제 종료	`Ctrl + C` (연타)

`Ctrl + C` 두번 누르면?

답변 중단: claude --resume 상태에서 클로드가 너무 긴 답변을 생성하고 있을 때, Ctrl + C 를 누르면 답변 생성을 즉시 중단합니다.
프롬프트 복귀: 다시 한 번 Ctrl + C 를 누르거나 프로그램이 종료되면, 클로드 세션을 빠져나와 원래의 시스템 터미널 프롬프트($) 상태로 완전히 돌아오게 됩니다.

메모리(컨텍스트) 관리 경고

메시지의 의미

"Context left until auto-compact: 9%"

클로드와 같은 AI 모델은 한 번에 기억할 수 있는 정보의 양(Context Window)이 정해져 있습니다.

9% 남음: 현재 대화 내용(이전 대화, 코드, 업로드된 파일 등)이 클로드가 기억할 수 있는 최대 용량의 91%를 채웠다는 뜻입니다. 곧 한계치에 도달한다는 신호입니다.
Auto-compact: 컨텍스트가 꽉 차면 시스템이 자동으로 이전 대화의 일부를 요약하거나 삭제(압축)하여 새로운 대화를 입력할 공간을 확보하겠다는 뜻입니다.

이 상태에서 발생할 수 있는 일

기억력 저하: ‘Auto-compact’가 실행되면 아주 처음에 했던 질문이나 세세한 설정값들을 클로드가 잊어버릴 수 있습니다.
답변 오류: 문맥이 압축되면서 복잡한 코딩 작업 시 앞뒤 연결고리가 어색해질 가능성이 있습니다.

/context

토큰 사용량 확인: 현재 컨텍스트 윈도우(Context Window)가 얼마나 찼는지, 남은 토큰은 얼마인지 보여주는 기능일 수 있습니다. (예: Used: 4,000 / 200,000 tokens)

토큰 사용량 확인이 왜 중요한가요?

터미널에서 LLM을 사용할 때 이 수치를 확인하는 이유는 크게 두 가지입니다.

비용 관리 (Cost):
- Claude API는 입력(Input) 토큰과 출력(Output) 토큰에 따라 비용이 청구됩니다.
- 대화가 길어지거나(History 누적), 큰 코드 파일을 터미널에 불러왔을 때, 한 번의 질문에 몇 백 원~몇 천 원이 나갈 수도 있습니다. /context로 현재 쌓인 양을 확인하여 “아, 이제 대화 내역을 한번 지워야겠다(/clear)”고 판단할 수 있습니다.
기억력 한계 (Context Window Limit):
- Claude 3.5 Sonnet의 경우 200,000 토큰의 윈도우를 가집니다.
- 이 한도가 꽉 차면, AI는 가장 오래된 대화부터 잊어버리기 시작합니다. (Sliding Window 방식). 중요한 초기 설정이나 규칙을 잊지 않았는지 확인하기 위해 남은 용량을 체크합니다.

/compact

긴 대화를 나누다 보면 불필요한 인사말, 반복된 코드, 이미 해결된 오류 로그 등이 쌓여 토큰(비용/메모리)을 차지합니다. /compact를 실행하면 LLM 클라이언트(터미널 도구)는 내부적으로 다음과 같은 작업을 수행합니다.

지난 대화 읽기: 현재까지의 긴 대화 내역을 가져옵니다.
요약 요청: AI에게 “이 대화 내용을 핵심만 남기고 짧게 요약해 줘”라고 시킵니다.
기억 교체: 긴 대화 내역을 삭제하고, 요약된 내용]으로 대체하여 새로운 ‘시작점’으로 삼습니다.

/clear (초기화)와의 차이점

명령어	동작 방식	효과	비유
`/clear`	모든 기억 삭제	완전히 새로운 대화 시작. 이전 내용은 전부 잊어버림.	칠판을 싹 지움
`/compact`	기억 압축	이전 맥락(Context)은 유지하되, 토큰 사용량을 대폭 줄임.	회의록 요약본만 남김

터미널 환경에서 /compact 명령어는 보통 “대화 내역 요약 및 압축(Conversation Compression)” 기능을 의미합니다.

방금 질문하신 /context(토큰 사용량 확인)와 짝을 이루는 명령어로, **”토큰이 너무 많이 찼으니, 지난 이야기를 짧게 요약해서 용량을 확보해 줘”**라는 뜻입니다.

구체적으로 어떤 일이 일어나는지 설명해 드리겠습니다.

`/compact`가 하는 일

지난 대화 읽기: 현재까지의 긴 대화 내역을 가져옵니다.
요약 요청: AI에게 “이 대화 내용을 핵심만 남기고 짧게 요약해 줘”라고 시킵니다.
기억 교체: 긴 대화 내역을 삭제하고, **[요약된 내용]**으로 대체하여 새로운 ‘시작점’으로 삼습니다.

`/clear` (초기화)와의 차이점

가장 많이 혼동되는 명령어인 /clear(또는 /reset)와는 목적이 다릅니다.

명령어	동작 방식	효과	비유
`/clear`	모든 기억 삭제	완전히 새로운 대화 시작. 이전 내용은 전부 잊어버림.	칠판을 싹 지움
`/compact`	기억 압축	이전 맥락(Context)은 유지하되, 토큰 사용량을 대폭 줄임.	회의록 요약본만 남김

언제 사용하나요?

앞서 확인했던 /context 명령어로 토큰 사용량을 봤을 때 다음과 같은 상황이라면 /compact를 입력합니다.

비용 절감: “벌써 10만 토큰이나 썼네? 내용은 유지하고 싶은데 비용이 걱정된다.”
용량 확보: “Context Window(기억 용량)가 거의 다 찼다는 경고가 떴는데, 지금 하던 작업을 멈추고 싶진 않다.”
속도 향상: 입력 데이터(Prompt)가 줄어들면, AI가 답변을 생성하는 속도도 빨라집니다.

작업 단위가 끝날 때마다 /compact 실행 권장.
압축 후에도 CLAUDE.md와 프로젝트 파일은 유지됩니다.

이미지로 UI 개선하기 (멀티모달)

개발한 웹앱을 캡처해서 터미널에 붙여넣으면 [Image #1]로 첨부가 됩니다.

[Image #1] 현재 디자인은 모바일에 최적화되어 있는 것 같아. 데스크톱 환경에서도 전체 화면에서 UI를 볼 수
있도록 디자인을 수정해 줘. 수정한 디자인은 ‘web_version’이라는 새로운 폴더를 생성한 뒤, 그곳에 저장해 줘.

@script.js

기능: @ 뒤에 파일명, 폴더명, 함수명 등을 입력하면 해당 내용을 읽어서 프롬프트(질문)에 자동으로 첨부합니다.
사용 예시:
- @main.py → “main.py 파일의 내용을 읽고 내 질문에 답해.”
- @docs → “저장해 둔 문서(Documentation)를 참조해.”
- @Web (일부 도구) → “인터넷 검색 결과를 참조해.”

모든 파일을 다 읽히면 토큰(비용)이 너무 많이 들고, AI가 헷갈릴 수 있습니다. “지금 질문에 필요한 건 딱 이것뿐이야”라고 범위를 좁혀주기 위해 사용합니다.

/config

/config는 “환경 설정(Settings/Preferences)을 확인하거나 변경하는 명령어입니다.
스마트폰의 ‘설정’ 앱과 같다고 보시면 됩니다.

조회 모드:

명령어: /config (그냥 입력)
결과: 현재 설정된 모델, 토큰 제한, 온도 값 등을 리스트로 쭉 보여줍니다.

수정 모드:

명령어: /config <항목> <값>
결과: 해당 항목의 값을 즉시 변경합니다.

/doctor

터미널 환경에서 /doctor 명령어는 “건강 검진(Health Check)” 또는 “문제 진단 도구”입니다.

다음과 같은 상황에서 119를 부르듯이 사용하시면 됩니다.

설치 직후: “내가 설치를 제대로 한 게 맞나?” 확인할 때.
갑자기 먹통일 때: 잘 되던 AI가 “API Error”를 뱉거나 묵묵부답일 때.
파일 인식을 못 할 때: @파일명을 했는데 파일을 못 찾거나 내용을 못 읽어올 때.

/export

“현재까지의 대화 내용을 파일로 저장하기” 기능입니다. 메신저의 “대화 내용 내보내기”와 똑같습니다. AI와 나누었던 질의응답, 작성된 코드, 수정 내역을 하나의 문서 파일로 만들어줍니다.

왜 사용하나요?
- 기록 보관: “아까 그 버그 어떻게 고쳤더라?” 나중에 다시 찾아보기 위해.
- 공유: 팀원에게 “AI랑 이렇게 대화해서 문제 해결했어”라고 보여주기 위해.
- 문서화: 대화 내용을 바탕으로 블로그 글이나 README.md를 작성하기 위해.
사용법 예시:
- /export : 기본 파일명(보통 타임스탬프가 찍힌 .md 파일)으로 저장.
- /export my_chat_log.md : my_chat_log.md라는 이름으로 저장.
결과물: 보통 마크다운(Markdown) 형식으로 저장되어, 코드 블록이나 굵은 글씨 등이 예쁘게 유지된 상태로 문서를 볼 수 있습니다.

핵심 키워드 정리

단계별 프롬프트 : PRD 기반으로 프로젝트를 나누어 구현하는 전략
세션/ –resume : 대화 상태 유지, 이전 작업 이어서 진행
Shift + Tab : 자동 승인 모드 전환 단축키
컨텍스트 : AI가 기억하는 대화/작업 정보 메모리
/context, /compact : 컨텍스트 상태 확인 및 압축 명령어
멀티모달 : 텍스트와 이미지를 함께 이해하는 AI
@ 기호 : 파일/폴더를 즉시 불러와 분석하는 참조
/config, /doctor, /export : 프로젝트 설정/진단/내보내기 관리 명령어