LEVEL 2 QUEST

프롬프트 엔지니어링 기초 - AI에게 말 잘하는 법

프롬프트 엔지니어링 기초 - AI에게 말 잘하는 법 — DevFoil 바이브코딩 Stage 1, Lv.2

프롬프트 엔지니어링이란?

프롬프트 엔지니어링은 AI에게 원하는 결과를 얻기 위해 요청(프롬프트)을 최적화하는 기술입니다.

같은 AI에게 같은 것을 요청해도, 어떻게 말하느냐에 따라 결과가 완전히 달라집니다. 바이브코딩에서 프롬프트 엔지니어링은 가장 핵심적인 기술입니다. 코드를 작성하는 것이 아니라 프롬프트를 작성하는 것이 여러분의 주된 업무가 되기 때문입니다.

이 강의를 마치면, 같은 AI 도구로도 2~3배 더 좋은 결과를 얻을 수 있게 됩니다.

나쁜 프롬프트 vs 좋은 프롬프트

나쁜 프롬프트

웹사이트 만들어줘

문제점:
- 어떤 종류의 웹사이트인지 모름
- 디자인 스타일 미지정
- 어떤 내용이 들어가야 하는지 모름
- AI가 추측해야 하는 부분이 너무 많음

결과: AI가 아무거나 만들어줌 → 수정에 시간 낭비

좋은 프롬프트

프리랜서 디자이너를 위한 포트폴리오 웹사이트를 만들어줘.

- 다크 테마, 미니멀한 스타일
- 상단: 이름 "이수진", 직업 "UI/UX 디자이너"
- 섹션: About, Projects(카드 3개), Contact
- 프로젝트 카드에 호버 애니메이션
- 반응형 (모바일 대응)
- HTML, CSS, JS를 하나의 파일로

결과: 원하는 것에 매우 가까운 결과물 → 바로 사용 가능

핵심 원칙

AI는 독심술사가 아닙니다. 여러분의 머릿속에 있는 그림을 최대한 구체적으로 글로 옮기는 것이 프롬프트 엔지니어링의 본질입니다. 모호함이 줄어들수록 결과물의 품질이 올라갑니다.

CRAFT 프레임워크

좋은 프롬프트를 체계적으로 작성하기 위한 CRAFT 프레임워크를 소개합니다. 이 5가지 요소를 기억하면 어떤 상황에서든 효과적인 프롬프트를 만들 수 있습니다.

C — Context (맥락)

프로젝트의 배경과 상황을 설명합니다.
"나는 프리랜서이고 클라이언트에게 보여줄 포트폴리오가 필요해"

R — Role (역할)

AI에게 전문가 역할을 부여합니다.
"너는 10년 경력의 프론트엔드 개발자야"

A — Action (행동)

구체적으로 무엇을 해야 하는지 명시합니다.
"반응형 포트폴리오 웹페이지를 HTML/CSS/JS로 만들어줘"

F — Format (형식)

결과물의 형식과 구조를 지정합니다.
"하나의 HTML 파일로, 주석을 한국어로 작성해줘"

T — Tone (톤)

결과물의 분위기와 스타일을 설정합니다.
"모던하고 미니멀한 느낌, 전문적이면서 친근한 톤"

CRAFT 적용 예시 — 완성된 프롬프트

[Context] 나는 프리랜서 UI/UX 디자이너이고, 신규 클라이언트를 확보하기 위한 포트폴리오 사이트가 필요해.

[Role] 너는 10년 경력의 시니어 프론트엔드 개발자야. 세련된 웹사이트를 많이 만들어 본 전문가야.

[Action] 다음 섹션을 포함하는 포트폴리오 웹페이지를 만들어줘:
1. Hero 섹션: 이름, 직업, 한 줄 소개
2. About: 간단한 자기소개 (3-4문장)
3. Projects: 카드 형태로 3개 프로젝트 (이미지 플레이스홀더, 제목, 설명, 사용 기술 태그)
4. Contact: 이메일, GitHub, LinkedIn 링크

[Format] HTML, CSS, JS를 하나의 파일로 작성해줘. CSS 변수를 사용해서 나중에 색상을 쉽게 바꿀 수 있게.
주석은 한국어로 달아줘. 반응형(모바일 768px 이하 대응).

[Tone] 다크 테마, 모던 미니멀, 프로페셔널하면서 약간의 창의성

바로 쓸 수 있는 코딩 프롬프트 5가지 템플릿

템플릿 1 웹페이지 생성

[목적]을 위한 웹페이지를 만들어줘.

디자인:
- 테마: [다크/라이트]
- 스타일: [미니멀/화려한/기업형]
- 주요 색상: [색상]

구조:
- [섹션1]: [내용]
- [섹션2]: [내용]
- [섹션3]: [내용]

요구사항:
- 반응형 (모바일 대응)
- [추가 기능: 애니메이션, 폼 등]
- HTML/CSS/JS 하나의 파일로

템플릿 2 기능 추가/수정

아래 코드에서 [수정할 부분]을 변경해줘.

현재 동작: [현재 어떻게 동작하는지]
원하는 동작: [어떻게 바뀌어야 하는지]

추가 조건:
- [조건1]
- [조건2]

기존 코드:
[코드 붙여넣기]

템플릿 3 에러 해결

이 코드에서 에러가 발생해. 원인을 찾고 수정해줘.

에러 메시지:
[에러 메시지 붙여넣기]

내 코드:
[코드 붙여넣기]

환경: [브라우저/Node.js/Python 등]

수정된 코드와 함께 왜 에러가 발생했는지 설명해줘.

템플릿 4 코드 설명 요청

이 코드가 무슨 일을 하는지 초보자가 이해할 수 있게 설명해줘.

[코드 붙여넣기]

각 줄마다 주석으로 설명을 달아줘.
전체 흐름도 요약해줘.

템플릿 5 자동화 스크립트

[반복 업무]를 자동화하는 [언어] 스크립트를 만들어줘.

현재 수동으로 하는 과정:
1. [단계1]
2. [단계2]
3. [단계3]

입력: [어떤 데이터가 들어오는지]
출력: [어떤 결과가 나와야 하는지]

에러 처리와 로그도 포함해줘.

초보자가 자주 하는 프롬프트 실수 5가지

#	실수	잘못된 예	올바른 예
1	너무 모호한 요청	"좋은 웹사이트 만들어줘"	"카페 소개 웹사이트, 메뉴판 포함, 따뜻한 브라운 테마"
2	한 번에 너무 많이 요청	"쇼핑몰 전체를 만들어줘 (결제, 재고, 배송, 회원...)"	"먼저 상품 목록 페이지를 만들어줘. 카드 레이아웃으로."
3	기술 스택 미지정	"투두리스트 앱 만들어줘"	"HTML/CSS/JS로 투두리스트를 만들어줘. localStorage로 저장."
4	수정 시 전체 재작성 요청	"전부 다시 만들어줘"	"헤더 색상만 #1a1a2e로 바꿔줘"
5	에러 메시지 없이 질문	"코드가 안 돼. 고쳐줘"	"이 에러가 나와: TypeError: Cannot read property... [코드 포함]"

실습: 프롬프트 작성해보기

도전 과제

아래 상황에 맞는 프롬프트를 CRAFT 프레임워크를 사용해서 직접 작성해 보세요. 그리고 실제로 AI에게 입력해서 결과를 확인해 보세요.

상황: 당신은 동네 빵집 사장님입니다. 가게 소개 웹페이지를 만들고 싶습니다.

포함해야 할 정보:
- 가게 이름: "밀의 행복"
- 영업시간: 오전 7시 ~ 오후 8시
- 인기 메뉴 3가지 (자유롭게 선정)
- 가게 위치와 연락처
- 따뜻하고 아늑한 느낌의 디자인

힌트: C(맥락) → R(역할) → A(행동) → F(형식) → T(톤) 순서로 작성해 보세요.

학습 점검

🧠 퀴즈 1

Q. CRAFT 프레임워크에서 "R"이 의미하는 것은?

A. Result (결과)

B. Role (역할)

C. Repeat (반복)

D. Review (검토)

🧠 퀴즈 2

Q. 다음 중 가장 좋은 에러 해결 프롬프트는?

A. "코드가 안 돼요"

B. "에러 좀 고쳐줘"

C. "TypeError: Cannot read property 에러가 나옵니다. 코드와 에러 메시지는 아래와 같습니다. [코드 포함]"

D. "자바스크립트 에러 해결법 알려줘"

🧠 퀴즈 3

Q. 프롬프트를 작성할 때 가장 피해야 할 습관은?

A. 구체적인 요구사항을 적는 것

B. 한 번에 전체 시스템을 요청하는 것

C. 기술 스택을 지정하는 것

D. 에러 메시지를 포함하는 것

⚡ 필수 이 레슨의 난이도는 어땠나요?

👆 레슨 완료를 위해 난이도를 선택해주세요!

🤖 AI 학습 도우미 API 키 필요

AI 도우미를 사용하려면 API 키를 설정하세요.
Gemini는 무료로 사용 가능합니다!

API 키 설정하기

💬 피드백 & 요청사항 🧵 Threads 인증 필요

🧵

피드백을 남기려면 Threads 연동이 필요해요

설정에서 연동하기