7강: 좋은 프롬프트의 기술
구체적으로, 하나만, 안 할 것을 말하세요
같은 AI인데, 왜 결과가 다를까요?
6강에서 PRD(제품 요구사항 문서)를 만들었어요. "뭘 만들 건지"가 정리된 설계도가 생긴 거예요. 6강 마지막에 이렇게 말씀드렸죠. "같은 요청인데 왜 결과물이 이렇게 다르지? 그 비밀을 알려드릴게요." 바로 오늘 그 비밀을 풀어볼게요.
식당에 가서 주문하는 장면을 떠올려 보세요.
- 손님 A: "맛있는 거 주세요."
- 손님 B: "매운 걸 못 먹어요. 된장찌개 1인분에 밥 따로, 반찬은 김치만 빼주세요."
같은 식당인데, 누가 더 원하는 음식을 받을까요? 당연히 B예요. A는 셰프가 알아서 골라야 하니까, 결과가 매번 달라지죠.
AI도 똑같아요. 프롬프트(Prompt, AI에게 주는 지시문) 를 어떻게 쓰느냐에 따라 결과물이 완전히 달라져요. 코딩 실력이 아니라 설명 잘 하는 능력이 바 이브 코딩의 핵심이에요.
프롬프트의 3요소
좋은 프롬프트에는 3가지 재료가 들어가요. 식당에서 주문하는 장면으로 설명할게요.
1. 목표와 기준 — "이걸 만들어주세요"
식당에 가서 "파스타 주세요"라고 말하면 셰프가 뭘 만들지 바로 알잖아요. AI에게도 뭘 해야 하는지, 어떤 수준으로 해야 하는지 먼저 알려줘야 해요.
점심 메뉴 추천 웹앱을 만들어줘.
코딩을 모르는 사람도 코드를 읽을 수 있도록, 변수명은 의미가 명확하게, 주석은 한글로 달아줘.
목표와 기준이 명확하면 AI가 어떤 방향으로, 어떤 품질로 작업할지 기준이 잡혀요. 이게 없으면 AI는 "대충 평균적으로..." 하고 애매한 결과물을 내놓기 쉬워요.
Claude Code 팁: Claude Code는 이미 코딩 전문 도구라서, ChatGPT처럼 "너는 10년차 개발자야"라고 역할을 매번 알려줄 필요는 없어요. 대신 "어떤 품질로 만들지" — 예를 들어 "초보자도 읽을 수 있는 코드로", "한글 주석 달아줘" 같은 기준을 알려주는 게 훨씬 효과적이에요. 9강에서 배울 CLAUDE.md 파일에 이런 기준을 한 번만 써두면, 매번 반복할 필요도 없어요.
2. 상황 설명 — "지금 사정은 이래요"
"파스타 주세요"에 이어서 "매운 건 못 먹어요, 2명이에요"라고 말하면, 셰프가 매운 소스를 빼고 2인분을 준비하잖아요. AI에게도 지금 내 상황을 알려줘야 해요.
나는 코딩 1줄도 모르는 비개발자야.
6강에서 만든 PRD가 있어.
기술 스택(사용할 도구 조합)은 HTML + CSS + JavaScript로 할 거야.
상황을 풍부하게 알려줄수록 AI는 여러분에게 딱 맞는 결과물을 만들어줘요. 상황 설명 없이 시키면 AI가 혼자 추측해야 하는 부분이 많아지고, 그만큼 결과가 빗나가기 쉬워요.
3. 울타리 — "이건 하지 마세요"
식당에서 "올리브는 빼주세요", "소스는 따로 담아주세요"라고 말하는 것처럼, AI에게도 안 할 것을 알려주는 게 엄청 중요해요. 6강에서 PRD의 "안 만들 것" 목록이 기획의 절반이라고 했죠? 프롬프트에서도 마찬가지예요.
다른 파일은 건드리지 마.
외부 라이브러리(다른 사람이 만든 코드 묶음) 설치하지 마.
한 번에 1가지 기능만 만들어.
설명은 한글로 해줘.
울타리가 없으면 AI는 "더 좋게 만들어줘야지!" 하면서 이것저것 건드려요. 요청 안 한 파일을 수정하거나, 불필요한 기능을 덧붙이거나, 복잡한 구조로 바꿔놓기도 해요. 울타리를 쳐주면 AI가 그 안에서만 일해요.
세 가지가 모이면
목표가 있어야 상황 설명이 의미가 있고, 상황을 알아야 울타리를 어디에 칠지 정할 수 있어요. 그래서 목표 → 상황 → 울타리 순서가 자연스럽지만, 실전에서 꼭 이 순서로 쓸 필요는 없어요. 세 가지가 빠짐없이 들어가는 게 중요해요.
식당 주문으로 정리하면:
- 목표: "파스타 주세요" → AI가 뭘 해야 하는지
- 상황: "매운 건 못 먹어요, 2명이에요" → AI가 어떤 조건에서 일하는지
- 울타리: "올리브는 빼주세요" → AI가 어디까지만 해야 하는지
나쁜 프롬프트 vs 좋은 프롬프트 — 5쌍 비교
실제로 어떻게 다른지, 5가지 상황별로 비교해 볼게요. 좋은 프롬프트가 코드처럼 보이지 않아도 괜찮아요. 말로 구체적으로 설명하는 것이 핵심이에요.
비교 1: 웹페이지 만들기
(나쁜 프롬프트)
홈페이지 만들어줘
(좋은 프롬프트)
나는 프리랜서 디자이너 "김다온"이야.
자기소개 웹페이지를 파일 하나로 만들어줘.
페이지 구성:
1. 맨 위에 이름이랑 한 줄 소개 "AI와 함께 만드 는 사람"
2. 중간에 포트폴리오 카드 3개 — 각각 제목이랑 한 줄 설명
3. 맨 아래에 이메일이랑 GitHub 링크
디자인은 어두운 배경에 밝은 시안(파란-초록) 포인트 색상으로 해줘.
휴대폰에서도 깨지지 않게 반응형으로 만들어줘.
나쁜 프롬프트는 AI가 모든 걸 추측해야 해요. 좋은 프롬프트는 페이지 구성, 내용, 분위기까지 명확하니까 한 번에 원하는 결과가 나와요.
비교 2: 에러 수정
(나쁜 프롬프트)
에러 고쳐줘
(좋은 프롬프트)
버튼을 클릭하면 다음 페이지로 넘어가야 하는데, 클릭해도 아무 반응이 없어.
브라우저 개발자 도구(F12)에 이런 에러가 떠:
"TypeError: Cannot read properties of undefined"
버튼 클릭 처리하는 부분만 고쳐줘. 다른 파일은 건드리지 마.
"에러 고쳐줘"만 던지면 AI는 어떤 에러인지, 어디서 났는지 몰라요. 뭘 했는데 뭐가 안 되는지, 에러 메시지가 있으면 복사해서 보여주고, 수정 범위를 제한하면 한 번에 고쳐줘요.
비교 3: 디자인 요청
(나쁜 프롬프트)
예쁘게 해줘
(좋은 프롬프트)
카드들을 유리처럼 반투명한 느낌(Glassmorphism 스타일)으로 바꿔줘.
뒤가 살짝 비치는 효과에, 테두리는 아주 얇고 흐리게, 그림자는 부드럽게.
기존 배치는 그대로 두고 카드 디자인만 바꿔줘.
"예쁘게"는 사람마다 기준이 달라요. AI도 자기 기준에서 "예쁘게" 해버려요. 어떤 느낌인지 스타일 이름이나 구체적인 묘사를 주면, 원하는 디자인이 한 번에 나와요. (18강에서 디자인 스타일 이름을 더 자세히 다뤄요.)
비교 4: 기능 추가
(나쁜 프롬프트)
다크 모드 넣어줘
(좋은 프롬프트)
화면 오른쪽 위에 다크 모드 전환 버튼을 추가해줘.
동작:
1. 버튼 누르면 배경이 어두운 색으로, 글자가 밝은 색으로 바뀌어야 해
2. 다시 누르면 원래대로 돌아와야 해
3. 새로고침해도 선택한 모드가 유지돼야 해
4. 처음 들어왔을 때 기본은 밝은 모드
헤더랑 스타일 파일만 수정해줘. 다른 파일은 건드리지 마.
기능 요청에서 가장 중요 한 건 수정 범위를 제한하는 것이에요. "다크 모드 넣어줘"만 말하면 AI가 전체 파일을 뒤엎어버릴 수 있어요. "이 파일만 수정해" 한 줄이면 충분해요.
비교 5: PRD 기반 개발 시작
(나쁜 프롬프트)
이 PRD 보고 만들어줘
(좋은 프롬프트)
PRD.md를 읽고 1번 기능 "메뉴 랜덤 추천"만 먼저 만들어줘.
조건:
- 메뉴 목록은 코드 안에 직접 적어둬 (10개 정도)
- 화면에 "오늘 뭐 먹지?" 버튼 하나만 보여줘
- 버튼 누르면 메뉴 1개가 랜덤으로 화면에 나와야 해
- 2번 이후 기능은 아직 만들지 마
끝나면 결과물을 브라우저에서 확인하는 방법도 알려줘.
PRD가 있어도 "통째로 만들어줘"는 위험해요. AI가 한꺼번에 모든 기능을 만들려다가 꼬이거든요. 1번 기능만 먼저, 그 다음에 2번. 이게 10강에서 배울 "수직 슬라이싱(한 입씩 만들기)"의 핵심이에요.
레퍼런스의 힘 — "이거랑 비슷하게"
프롬프트를 아무리 잘 써도, 말만으로 전달하기 어려운 것이 있어요. 바로 디자인 느낌이에요.
"깔끔하면서도 모던한 느낌으로 해줘" 라고 쓰면, AI가 상상하는 "깔끔함"과 여러분이 상상하는 "깔끔함"이 다를 수 있어요.
이럴 때 가장 강력 한 무기가 레퍼런스(참고 자료) 예요.
URL 레퍼런스
이 사이트랑 비슷한 느낌으로 만들어줘: https://stripe.com
- 넓은 여백, 깔끔한 타이포그래피(글자 디자인)
- 히어로 섹션의 그라데이션(색이 점점 변하는 효과) 배경
- 나머지 구조는 내 PRD를 따라줘
"예쁘게 해줘"보다 "이 사이트처럼 해줘"가 10배 빠르고 정확해요. AI가 해당 사이트의 디자인 패턴을 분석해서 비슷한 느낌을 재현해 주거든요.
스크린샷 레퍼런스
Claude는 이미지를 이해할 수 있어요. 마음에 드는 웹사이트나 앱 화면을 스크린샷으로 찍어서 보여주면, 말보다 훨씬 정확한 지시가 돼요.
(이미지를 첨부하면서)
이 스크린샷의 레이아웃(화면 배치)을 참고해서 내 페이지를 만들어줘.
- 왼쪽 사이드바 + 오른쪽 메인 콘텐츠 구조
- 색상은 내 PRD에 정의한 다크 테마로
- 폰트(글꼴) 크기와 여백 비율은 이 스크린샷과 비슷하게
스크린샷 1장이 설명 100줄보다 나아요. 특히 레이아웃이나 디자인 느낌을 전달할 때는 이미지만한 게 없어요.
AI//STUDY 사이트를 만들 때 실제로 쓴 프롬프트
지금 여러분이 읽고 있는 이 AI//STUDY 사이트도 프롬프트로 만들었어요. 실제로 사용한 프롬프트 예시를 보여드릴게요.
사이트 디자인을 잡을 때
이 사이트는 AI 지식 아카이브야. "해커 감성 + 사이버펑크 느낌"의 다크 테마를 만들어줘.
구체적으로:
- 배경: 거의 검정(#050505)
- 포인트 색상: 시안(#00e5ff)
- 폰트: 제목은 Chakra Petch(기하학적 느낌의 영문 폰트), 본문은 Pretendard(한글 폰트)
- 카드 위에 마우스 올리면 시안 글로우(빛나는 효과)
- 배경에 격자 그리드 패턴 깔아줘
- 전체적으로 "터미널 + 홀로그램" 느낌
"예쁘게 해줘"가 아니라, 색상 코드, 폰트 이름, 효과 이름을 구체적으로 적었어요. 이렇게 하니까 AI가 한 번에 원하는 느낌을 만들어줬어요.
글 작성 규칙을 세울 때
이 사이트에 글을 쓸 때 지켜야 할 규칙을 정리해줘. writing-rules.md로 만들어줘.
조건:
- 화자: 디온웍스 대표, 코딩 1줄 모르는 네이티브 바이브 코더
- 독자: 터미널이 뭔지 모르는 완전 초심자
- 전문 용어 나오면 반드시 괄호로 한 줄 풀이
- 글 구조: 비유 도입 → 적용 사례 → 코드 블록 → 초보 가이드 → 추천 대상
- 이모지 과용 금지, 500줄 초과 금지
역할(화자), 맥락(독자 수준), 제약 조건(금지 사항)이 다 들어있죠? 이 프롬프트 하나로 사이트 전체의 글 톤이 통일됐어요.
잘 먹히는 프롬프트 모아두기
좋은 프롬프트를 만들었으면, 버리지 말고 모아두세요. 프롬프트는 재사용 자산이에요.
왜 모아둬야 하나요?
처음에는 프롬프트 쓰는 데 시간이 걸려요. "이렇게 써볼까, 저렇게 써볼까" 시행착오를 하죠. 그런데 한번 잘 먹히는 프롬프트를 찾으면, 다음에는 그걸 복사해서 살짝만 바꾸면 돼요.
예를 들어, 위에서 본 "웹페이지 만들기" 좋은 프롬프트를 저장해두면:
- 다음에 다른 웹페이지 만들 때 구조와 이름만 바꾸면 끝
- 매번 처음부터 고민할 필요 없음
- 결과물의 품질이 일정하게 유지됨
어디에 모아두나요?
거창하게 안 해도 돼요. 메모장이면 충분해요.
- 메모장 파일 —
prompts.md같 은 파일을 하나 만들어서 잘 먹힌 프롬프트를 복사해 넣기 - 프로젝트 폴더 안 — CLAUDE.md(AI에게 주는 프로젝트 규칙서)에 자주 쓰는 지시를 넣어두면, 매번 말 안 해도 AI가 알아서 따라요 (9강에서 자세히 다뤄요)
- 카테고리별 정리 — "디자인용", "에러 수정용", "기능 추가용"으로 나눠두면 필요할 때 바로 찾을 수 있어요
실습: 같은 요청을 3단계로 써보기
직접 해볼 시간이에요. Claude Code를 열고 따라해 보세요. 같은 요청을 3가지 수준으로 써보고, 결과가 얼마나 달라지는지 직접 체험해 볼 거예요.
1단계: 막연한 프롬프트
Claude Code 대화창에 이렇게 입력해 보세요.
할 일 목록 앱 만들어줘
AI가 뭔가를 만들어줄 거예요. 결과를 잘 살펴보세요. 어떤 기술로 만들었는지, 디자인은 어떤지, 기능은 뭐가 있는지 확인해 보세요.
2단계: 구체적인 프롬프트
새 대화를 열고 이번에는 이렇게 입력해 보세요.
나는 코딩을 모르는 바이브 코더야.
할 일 목록 웹앱을 HTML + CSS + JavaScript 파일 각 1개씩, 총 3개 파일로 만들어줘.
기능:
1. 입력창에 할 일을 적고 Enter 치면 목록에 추가
2. 할 일을 클릭하면 취소선이 그어지면서 완료 표시
3. 목록은 localStorage(브라우저 저장소)에 저장해서 새로고침해도 유지
디자인: 다크 배경, 시안 포인트 컬러, 카드 형태 레이아웃
안 할 것: 로그인, 카테고리 분류, 드래그 정렬
1단계와 결과가 얼마나 달라졌는지 비교해 보세요.
3단계: 레퍼런스 포함 프롬프트
다시 새 대화를 열고, 이번에는 레퍼런스까지 추가해 보세요. (마음에 드는 할 일 앱 사이트가 있다면 URL을 넣어도 좋아요.)
나는 코딩을 모르는 바이브 코더야.
할 일 목록 웹앱을 만들어줘.
레퍼런스: Apple의 미니멀한 디자인을 참고해줘.
- 넓은 여백, 둥근 모서리, 부드러운 애니메이션
기술 스택: HTML + CSS + JavaScript 각 1개 파일
기능:
1. 입력창에 할 일 적고 Enter → 목록 추가 (부드러운 슬라이드 애니메이션)
2. 클릭 → 취소선 + 흐리게 처리
3. 오른쪽 X 버튼 → 삭제 (페이드 아웃 애니메이션)
4. localStorage에 자동 저장
디자인:
- 배경: #1a1a2e
- 카드: rgba(255, 255, 255, 0.05), 둥근 모서리 12px
- 포인트: #00e5ff
- 폰트: system-ui
안 할 것: 로그인, 카테고리, 드래그 정렬, 외부 라이브러리 사용
코드에 한글 주석으로 각 부분이 뭘 하는지 설명해줘.
3가지 결과를 나란히 비교해 보세요. 같은 AI인데 프롬프트에 따라 결과물의 품질이 확 달라지는 걸 직접 느끼실 수 있을 거예요.
클로드 코드 대화창에서
!를 맨 앞에 붙이면 터미널 명령어를 바로 실행할 수 있어요.
실습 결과를 저장하고 싶다면 Claude Code 대화창에서 이렇게 해보세요.
# 실습 파일이 있는 폴더로 이동
! cd ~/todo-app
# 브라우저에서 결과 확인 (파일 직접 열기)
! open index.html
이번 강에서 기억할 것
핵심만 정리해 볼게요.
-
프롬프트 3요소: 목표 + 상황 + 울타리. 이 세 가지가 갖춰지면 AI의 결과물이 확 달라져요. "맛있는 거 주세요"가 아니라 "파스타 주세요, 매운 건 못 먹어요, 올리브는 빼주세요"처럼요.
-
"안 할 것"을 말하는 게 "할 것"만큼 중요해요. "다른 파일 건드리지 마", "외부 라이브러리 쓰지 마" 한 줄이면 AI의 폭주를 막을 수 있어요.
-
레퍼런스가 말보다 강력해요. "예쁘게 해줘"보다 "이 사이트처럼 해줘"가 10배 빨라요. 스크린샷 1장이 설명 100줄보다 나아요.
-
구체적인 숫자와 이름을 쓰세요. "어두운 배경"보다 "#0a0a0a", "깔끔한 느낌"보다 "Glassmorphism 스타일"이 정확해요.
-
잘 먹히는 프롬프트는 모아두세요. 한번 잘 쓴 프롬프트는 다음에도 쓸 수 있는 재사용 자산이에요. 매번 처음부터 고민하지 마세요.
다음 강에서는 첫 프로젝트: 개인 웹페이지 만들기를 해볼 거예요. 오늘 배운 프롬프트 기술을 총동원해서, 진짜 내 URL을 가진 웹페이지를 만들어볼 거예요. "오늘 안에 내 URL을 갖게 됩니다."
이런 분께 추천해요
프롬프트 기술은 바이브 코딩뿐 아니라, AI를 쓰는 모든 상황에서 통하는 핵심 스킬이에요.
- AI에게 시켰는데 결과가 맨날 아쉬운 분 -- 프롬프트 3요소(목표, 상황, 울타리)를 채워보세요. "알아서 해줘"에서 벗어나는 순간 결과물이 달라져요.
- ChatGPT나 Claude를 쓰고 있지만 활용도가 낮은 분 -- 글쓰기, 이메일, 보고서에도 같은 원리가 적용돼요. 구체적으로 쓸수록 AI가 더 잘 도와줘요.
- 6강에서 PRD를 만들었는데, 이걸로 어떻게 개발을 시작하는지 모르겠는 분 -- PRD를 프롬프트에 넣는 방법을 오늘 배웠어요. 다음 강에서 실제로 해볼 거예요.
참고 링크
▸개정 이력2건
- v22026-04-13프롬프트 3요소 재구성(역할부여→목표와 기준, Claude Code 맥락 반영) + 5쌍 비교 자연어 중심 개선
- v12026-04-12초판
이 글이 도움이 되었나요?