1. 프롬프트가 중요한 이유

Agent의 결과물 품질은 어떻게 요청하느냐에 크게 달려있습니다. 같은 기능을 요청해도 프롬프트에 따라 결과가 완전히 달라질 수 있습니다.

1.1 프롬프트의 영향

2. 좋은 요청 vs 나쁜 요청

2.1 예시 1: 버튼 만들기

나쁜 요청

버튼 만들어줘

문제점

• 어떤 버튼인지 불명확
• 어디에 추가할지 모름
• 스타일, 기능이 정해지지 않음

좋은 요청

index.html에 "제출하기" 버튼을 추가해주세요.
- 위치: 폼 아래쪽
- 스타일: 파란색 배경, 흰색 텍스트, 둥근 모서리
- 클릭 시: 폼 데이터를 콘솔에 출력

2.2 예시 2: 페이지 개선

나쁜 요청

페이지 예쁘게 해줘

문제점

• "예쁘다"의 기준이 사람마다 다름
• 구체적인 방향이 없음

좋은 요청

자기소개 페이지의 디자인을 개선해주세요.
- 색상: 파란색 계열로 통일
- 폰트: 제목은 크게, 본문은 읽기 편하게
- 여백: 섹션 사이에 충분한 여백 추가
- 모바일에서도 잘 보이게 반응형으로

2.3 예시 3: 기능 추가

나쁜 요청

다크 모드

문제점

• 문장이 아니라 키워드만 제시
• 어떤 작업을 원하는지 불명확

좋은 요청

다크 모드 기능을 추가해주세요.
1. 헤더 오른쪽에 토글 버튼 배치
2. 버튼 클릭 시 다크/라이트 모드 전환
3. 다크 모드: 배경 #1a1a1a, 텍스트 흰색
4. 사용자 설정을 localStorage에 저장

3. 구체적으로 요청하는 방법

3.1 파일과 위치 명시하기

Agent가 어디서 작업해야 하는지 명확히 알려주세요.

❌ "헤더를 수정해줘"
✅ "index.html의 <header> 태그 안에 로고 이미지를 추가해줘"

❌ "스타일 바꿔줘"
✅ "style.css에서 .button 클래스의 배경색을 #3498db로 변경해줘"

3.2 원하는 결과 설명하기

최종적으로 어떤 모습/동작을 원하는지 설명하세요.

❌ "로그인 기능 추가해줘"
✅ "로그인 기능을 추가해줘.
    - 이메일과 비밀번호 입력 필드
    - 로그인 버튼 클릭 시 입력값 검증
    - 이메일 형식이 틀리면 에러 메시지 표시
    - 모든 검증 통과 시 '로그인 성공' 알림"

3.3 기술 스택 지정하기

사용할 기술을 명시하면 일관된 결과를 얻을 수 있습니다.

❌ "투두 앱 만들어줘"
✅ "HTML, CSS, JavaScript로 투두 앱을 만들어줘.
    외부 라이브러리 없이 순수 JavaScript로 구현해줘."

✅ "React와 Tailwind CSS를 사용해서
    할 일 목록 컴포넌트를 만들어줘."

3.4 제약 조건 알려주기

특별한 요구사항이 있다면 미리 알려주세요.

✅ "기존 코드 구조는 유지하면서
    새 기능만 추가해줘"

✅ "IE11은 지원하지 않아도 돼.
    최신 브라우저만 고려해서 작성해줘."

4. 단계별로 요청하기

복잡한 작업은 한 번에 요청하기보다 단계별로 나누어 요청하면 더 좋은 결과를 얻을 수 있습니다.

4.1 한 번에 요청 (비추천)

블로그 웹사이트를 만들어줘. 헤더, 푸터, 게시글 목록,
게시글 상세 페이지, 검색 기능, 다크 모드, 반응형 디자인,
댓글 기능까지 전부 구현해줘.

문제점:

• 요청이 너무 방대함
• Agent가 중요한 부분을 놓칠 수 있음
• 결과 확인이 어려움

4.2 단계별 요청 (추천)

1단계: 기본 구조

블로그 웹사이트의 기본 구조를 만들어줘.
- index.html: 헤더, 메인 영역, 푸터
- style.css: 기본 레이아웃 스타일

2단계: 게시글 목록

메인 영역에 게시글 목록을 표시해줘.
- 제목, 날짜, 요약 표시
- 클릭하면 상세 페이지로 이동

3단계: 디자인 개선

전체적인 디자인을 개선해줘.
- 색상 테마 적용
- 여백과 타이포그래피 정리
- 반응형 레이아웃 추가

4.3 단계별 요청의 장점

5. 실습: 프롬프트 개선하기

5.1 연습 1: 나쁜 프롬프트 개선

다음 요청을 더 구체적으로 개선해보세요.

원본:

네비게이션 추가해줘

개선 예시

index.html 상단에 네비게이션 바를 추가해주세요.
- 로고는 왼쪽에 배치
- 메뉴 항목: 홈, 소개, 연락처 (오른쪽 정렬)
- 반응형: 모바일에서는 햄버거 메뉴로 변경
- 스타일: 흰색 배경, 스크롤 시 상단 고정

5.2 연습 2: 복잡한 요청 분리

다음 요청을 3단계로 나누어보세요.

원본:

회원가입 폼을 만들어줘. 이메일, 비밀번호, 비밀번호 확인 필드가 필요하고
유효성 검사도 해야 하고 제출 버튼도 있어야 해.

분리 예시

1단계:

회원가입 폼의 기본 구조를 만들어줘.
- 이메일, 비밀번호, 비밀번호 확인 입력 필드
- 제출 버튼

2단계:

폼에 유효성 검사를 추가해줘.
- 이메일: 올바른 이메일 형식인지 확인
- 비밀번호: 8자 이상인지 확인
- 비밀번호 확인: 비밀번호와 일치하는지 확인

3단계:

유효성 검사 결과를 사용자에게 보여줘.
- 에러가 있으면 빨간색 텍스트로 표시
- 모든 검증 통과 시 제출 버튼 활성화

6. 유용한 프롬프트 패턴

6.1 패턴 1: "~처럼 만들어줘"

참고할 예시가 있다면 알려주세요.

네이버 메인 페이지처럼 검색창을 가운데에 배치해줘

VS Code의 사이드바처럼 파일 목록을 트리 구조로 표시해줘

6.2 패턴 2: "현재 ~인데, ~로 바꿔줘"

현재 상태와 원하는 상태를 함께 설명하세요.

현재 버튼이 사각형인데, 둥근 모서리로 바꿔줘

현재 목록이 세로로 나열되어 있는데,
3열 그리드로 변경해줘

6.3 패턴 3: "~할 때 ~하게 해줘"

조건과 동작을 명확히 설명하세요.

버튼에 마우스를 올렸을 때 배경색이
진해지는 효과를 추가해줘

폼 제출 버튼을 클릭했을 때
로딩 스피너가 표시되게 해줘

7. Agent 활용 베스트 프랙티스

지금까지 배운 내용을 바탕으로, 효과적인 Agent 활용을 위한 핵심 전략을 정리합니다.

7.1 Planning 모드 활용하기

복잡한 작업은 Planning 모드에서 진행하세요. Agent가 Implementation Plan과 Task List를 먼저 생성하므로 작업 방향을 사전에 검토할 수 있습니다.

✅ Planning 모드에서 작업 → 계획 검토 → 피드백 → 구현
❌ Fast 모드에서 복잡한 작업 바로 시작

7.2 Artifacts로 피드백 주기

Agent가 생성하는 Artifacts(Implementation Plan, Walkthrough 등)에 댓글을 남겨 피드백을 전달할 수 있습니다. Agent의 실행을 중단하지 않고도 방향을 수정할 수 있습니다.

Implementation Plan 확인
    ↓
문제 있으면 댓글로 피드백
    ↓
Agent가 피드백 반영하여 수정
    ↓
계획이 맞으면 "Proceed"

7.3 고수준 설계는 직접 주도하기

Agent에게 작업을 맡기더라도 전체 설계와 아키텍처는 직접 주도하세요. Agent는 구현 세부사항에 강하지만, 전체적인 맥락이나 비기능 요구사항은 명시적으로 알려주어야 합니다.

✅ "MVC 패턴으로 구조를 잡아줘.
    Model은 data/ 폴더에,
    View는 views/ 폴더에,
    Controller는 controllers/ 폴더에 배치해줘."

❌ "알아서 좋은 구조로 만들어줘"

7.4 "작동한다"를 너무 빨리 수락하지 않기

Agent가 "완료되었습니다"라고 해도 바로 넘어가지 마세요. 왜, 어떻게 작동하는지 확인하는 습관이 중요합니다.

7.5 Skills로 반복 요청 줄이기

같은 규칙을 계속 요청하고 있다면, Skill로 만들어두세요. Agent가 자동으로 해당 규칙을 따르게 됩니다.

❌ 매번 "한국어로 응답해줘", "세미콜론 꼭 써줘" 반복

✅ Skill로 코딩 스타일 정의 → Agent가 자동 적용

8. 정리

좋은 프롬프트 작성은 연습이 필요합니다. 처음에는 어색해도 계속 시도하다 보면 자연스럽게 구체적인 요청을 할 수 있게 됩니다.

9. 다음 단계

좋은 프롬프트 작성법을 익혔다면, Agent가 작성한 코드를 검토하고 관리하는 방법을 배워봅시다.

코드 리뷰와 변경 관리