topic★★★★★난이도 · 약 20분
프롬프트 구조 공식 — 맥락→지시→제약→형식
CICF 공식: Context(맥락) → Instruction(지시) → Constraints(제약) → Format(형식).
#CICF#프롬프트공식#구조화#단계적지시
왜 배우는가
매번 좋은 프롬프트를 '감'으로 쓸 수는 없다. CICF 공식을 암기하면, 어떤 요청이든 체계적으로 프롬프트를 구성할 수 있다. 특히 복잡한 작업일수록 구조화된 프롬프트가 빛난다.
CICF 공식은 프롬프트를 네 부분으로 나누는 프레임워크다. 모든 프롬프트가 네 부분 모두 필요한 건 아니지만, 복잡한 작업일수록 빠짐없이 채우면 결과가 좋아진다.
| 요소 | 영문 | 역할 | 예시 |
|---|---|---|---|
| C | Context (맥락) | 현재 상황·배경 설명 | "Next.js 15 + Tailwind CSS 프로젝트에서" |
| I | Instruction (지시) | 해야 할 작업 명시 | "다크모드 토글 버튼을 만들어줘" |
| C | Constraints (제약) | 하지 말 것, 범위 한정 | "기존 Header 컴포넌트만 수정하고 다른 파일은 건드리지 마" |
| F | Format (형식) | 출력 형태 지정 | "TypeScript + Tailwind만 사용, 주석 한국어로" |
bash
# CICF 공식 실전 적용 — Claude Code 프롬프트
claude "
[맥락] Next.js App Router 프로젝트이고,
src/components/Header.tsx에 네비게이션 바가 있다.
현재 모바일 반응형이 안 되어 있다.
[지시] Header 컴포넌트를 모바일 반응형으로 수정해줘.
768px 이하에서 햄버거 메뉴로 바뀌어야 한다.
[제약] - 외부 라이브러리 추가 금지 (Tailwind만 사용)
- 기존 데스크톱 레이아웃은 그대로 유지
- Header.tsx 파일만 수정
[형식] - TypeScript
- 애니메이션은 Tailwind transition 사용
- 접근성: aria-label 추가
"CICF 네 요소를 명시적으로 구분하면 AI가 맥락을 오해할 확률이 크게 줄어든다. 복잡한 요청일수록 이 구조가 빛을 발한다.
단계적 지시(Step-by-step)도 효과적이다. "1단계: ~ 2단계: ~ 3단계: ~" 형태로 쓰면 AI가 순서대로 작업하며, 중간 단계를 건너뛰는 실수가 줄어든다.
bash
# 단계적 지시 예시
claude "
사용자 프로필 수정 기능을 구현해줘.
1단계: src/app/profile/edit/page.tsx 생성
2단계: 이름, 이메일, 프로필 사진 업로드 폼 구현
3단계: Supabase에 업데이트하는 Server Action 작성
4단계: 성공 시 /profile로 리다이렉트, 실패 시 에러 토스트
제약: Tailwind CSS, react-hook-form 사용, zod로 유효성 검증
"단계를 나누면 AI가 한 번에 너무 많은 것을 시도하다 실수하는 것을 방지할 수 있다. 각 단계가 완료되었는지 확인도 쉬워진다.