프롬프트 작성 방법 왜 중요할까?
AI와 함께 코드를 만드는 바이브 코딩 시대, 원하는 결과는 “어떻게 물어보느냐”에 달려 있습니다. 단순히 “앱 만들어줘”만으로는 얕은 수준의 출력만 얻기 쉽죠. 이 포스팅에서는 “사용자가 입력한 할 일을 1~5단계로 자동 분류해주는 웹 서비스”를 예시로, 처음 아이디어를 구체적인 프롬프트로 다듬어 실제 동작하는 코드까지 얻는 과정을 소개합니다.
1. 프롬프트 작성 방법 : 아이디어 솔직하게 풀어쓰기
- 무엇을 해결할지 먼저 적어보세요.
- 예시 “업무 스트레스로 할 일 정리가 어려워요. AI가 입력된 할 일을 1~5단계로 분류해주는 웹 서비스를 만들고 싶습니다.”
- 포인트
- 왜 필요한지(스트레스, 시간 부족 등)를 곁들여 AI에 맥락을 줍니다.
- 짧고 자연스럽게, 페르소나와 문제 상황을 드러내면 좋습니다.
2. 목표와 요구사항 명세하기
- 핵심 목표: 입력된 할 일을 1~5단계 중요도로 자동 분류
- 세부 요구사항:
- 텍스트에서 키워드 추출
- 키워드 기반 점수 매기기
- 색상·아이콘으로 시각화
- 모바일 우선 UI 적용
- 간단 프롬프트 예시 “
calculatePriority(task)함수를 구현하고, 결과를 카드 UI로 보여줘.”
3. 기본 프롬프트로 한계 파악하기
- 단순 요청: “할 일 텍스트를 1~5 단계로 분류하는 알고리즘을 알려줘.”
- 예상 한계:
- 개념 설명 또는 의사 코드만 제공
- 실행 가능한 코드나 UI 스니펫은 빠질 수 있음
- 깨달음:
- 이 단계는 AI가 어디까지 이해했는지 확인하는 용도입니다.
4. 페르소나·환경 포함해 확장하기
- 나의 상황과 환경을 함께 설명하면 결과가 달라집니다.
- 확장된 프롬프트:
저는 시간 관리에 어려움을 겪는 직장인이고, 모바일에서 주로 사용할 예정입니다. 아래를 포함한 JavaScript 예제 코드를 제안해 주세요: 1) 입력된 할 일을 1~5 단계로 분류하는 함수 2) 함수 동작을 검증할 샘플 테스트 케이스 3개 - 효과: 테스트 케이스가 포함된 실행 가능한 코드 확보
5. 최종 구조화된 요청 만들기
- UI·스타일·라이브러리까지 지정해 AI에게 완전한 패키지를 요청합니다.
- 최종 프롬프트:
모바일 직장인을 위한 할 일 분류 웹 앱을 개발 중입니다. 1) `calculatePriority(task)` 함수를 JavaScript로 구현해주세요. 2) Bootstrap 카드 컴포넌트로 1~5단계 우선순위를 시각화하는 HTML/CSS 예제를 작성해주세요. 3) 단계별로 지정된 색상(#e74c3c, #f1c40f, #2ecc71)과 아이콘(📌, ⭐, ✔️)을 적용해주세요. - 기대 결과: 완전한 함수 구현, 구조화된 HTML/CSS 예제, 바로 활용 가능한 코드 스니펫
6. 테스트·검토·반복 개선
- 실행: 브라우저에서 코드 확인
- 갭 분석: 누락된 기능·UI 차이 확인
- 세부 요청:
- “마감 기한 지난 항목은 빨간색으로 표시해줘.”
- “입력값이 없으면 ‘할 일을 입력하세요’ 메시지를 보여줘.”
- 반복: 수정→검토→재요청을 통해 완성도를 높이세요.
마무리: 프롬프트 작성의 핵심 사이클
아이디어 정리 → 요구사항 명세 → 기본 시도 → 컨텍스트 확장 → 구조화된 최종 요청 → 반복 개선
