혼자 공부하는 바이브 코딩 with 클로드 코드

좋은 프롬프트의 조건

• 명확성
• 구체성
• 맥락 제공

- 바이브 코딩에 있어서 제품 기획서(PRD)는 매우 효과적인 프롬프트로 기능한다.

 

 

5W1H

• Why : 왜 만드는가? (명확한 목적)
• Who : 누구를 위한 것인가? (대상 정의)
• What : 무엇을 만들 것인가? (기능 구체화)
• When : 언제 사용되는가? (사용 맥락 파악)
• Where : 어디서 사용되는가? (사용 맥락 파악)
• How : 어떻게 만들 것인가? (구현 방법)

5W1H를 활용한 효과적인 프롬프트를 위한 기본 질문 템플릿[무엇]을 만들려고 해. 주요 기능은 [구체적인 기능 설명]이야. [누구]를 위한 것이고, [왜/어떤 문제를 해결]하기 위해 필요해. 어떻게 구현하면 좋을지 기술적인 방향과 함께 구체적인 PRD를 작성해 줘.

• PRD의 요구 사항을 기능별로 분해하여 단계적으로 구현하면, 각 단계에서 명확한 목표를 달성하고 검증할 수 있다.

주어진 PRD를 클로드 코드에서 사용할 5단계 프롬프트로 변환해 줘.

 

예시 작업 : 포트폴리오 사이트 생성하기

4단계 포트폴리오 전략

> 뼈대 → 기능 → 디자인 → 점검

> 각 단계는 다시 요청 → 생성 → 확인 → 수정의 사이클을 반복한다.

 

 

1단계 : 뼈대

• [요청/생성]

이 PRD대로 진행할 거야. 먼저 PRD를 기반으로 HTML 문서를 작성해줘. 섹션을 나누고, 수정을 대비해 각 섹션에 고유한 이름을 붙여줘. 아직 기능은 구현하지 말고, 전체 구조만 보여줘.

• [확인] 각 섹션에 붙은 고유한 이름 확인
• [수정] 특정 섹션 수정 및 디자인 완성 (섹션 별로 확인 및 수정 진행)

{섹션명} 섹션의 {항목명} 항목은 지난 3년 간의 성과를 구체적으로 나열한 리스트로 수정해 줘.

HTML 문서에 모던하고 세련된 디자인을 적용해줘.

 

 

2단계 : 기능

• [요청/생성] 실제 포트폴리오 전달

나의 경력 포트폴리오는 다음과 같아. 섹션 별로 다음 내용을 참고해서 업데이트해줘.
{실제 포트폴리오 내용}

• [확인] 내용이 적절히 업데이트되었는지 확인

 

3단계 : 디자인

• [요청/생성] 더 좋은 디자인을 위해 레퍼런스 제공
• 레퍼런스 선정이 어렵다면 참고할 만한 디자인을 추천해달라고 요청하는 것도 방법

워드프레스 테마 중에서 이 포트폴리오와 가장 잘 어울리는 것을 하나 선택해서 디자인을 수정해줘. 섹션 별로 색상 톤을 달리 해서 구분이 잘 되게 해줘.

• [확인] 게시해서 확인
• 세부적인 수정 작업은 4단계에서 다루므로, 전체 구조와 디자인이 의도한 방향대로 구현되었는지만 확인한다.

 

4단계 : 점검

• [요청]

발견된 개선점 3가지를 보완 및 수정하고, 완벽한 프리랜서 전환용 포트폴리오를 완성해.

• [생성] 클로드가 발견한 개선점을 확인한다.
• [수정]

포트폴리오 웹페이지의 모든 부분이 잘 만들어졌는지 검토해 줘. PRD대로 제작되었는지, 각 링크가 문제 없이 작동하는지 확인해.

• [확인]