Part 1.4 - 프롬프트 잘 쓰는 법: AI를 내 편으로 만들기

같은 걸 요청해도 어떻게 말하느냐에 따라 결과가 완전히 달라집니다.

예를 들어볼까요.

어떤 두 분이 똑같이 "할 일 앱" 만들어달라고 했어요. 한 분은 3시간 만에 원하는 걸 만들었고, 다른 분은 이틀이 지나도 완성을 못했습니다

차이가 뭐였을까요? 프롬프트(AI한테 하는 요청)의 질이었습니다

오늘은 AI한테 효과적으로 요청하는 방법을 알려드릴게요. 이거 하나만 잘해도 작업 속도가 훨씬 빨라질겁니다.

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

먼저 예시부터 보겠습니다.

예시 1: 로그인 기능

나쁜 프롬프트:

로그인 기능 만들어줘

좋은 프롬프트:

이메일과 비밀번호로 로그인하는 기능 만들어줘.

조건:
- 이메일 형식 검증 (@ 포함 여부)
- 비밀번호는 최소 8자 이상
- 로그인 실패하면 "이메일 또는 비밀번호가 틀렸습니다" 메시지
- 로그인 성공하면 /dashboard 페이지로 이동
- 로그인 버튼 누르면 로딩 표시

기술 스택: React, Supabase Auth

차이가 느껴지시죠?

예시 2: 게시판

나쁜 프롬프트:

게시판 만들어줘

좋은 프롬프트:

간단한 게시판을 만들어줘.

기능:
1. 글 목록 보기 (제목, 작성자, 날짜 표시)
2. 글 상세 보기
3. 새 글 쓰기 (제목, 내용 입력)
4. 글 삭제 (본인 글만)

조건:
- 한 페이지에 10개씩 표시
- 최신글이 위로
- 로그인한 사람만 글 쓸 수 있음

기술 스택: Next.js, Supabase

좋은 프롬프트의 5가지 요소

1. 구체적인 기능 설명

"뭘 만들어줘"가 아니라 "어떤 기능이 있는 뭘 만들어줘"라고 해야 합니다.

❌ "쇼핑몰 만들어줘"

✅ "상품 목록을 보여주고, 장바구니에 담고, 주문할 수 있는 쇼핑몰 만들어줘"

더 구체적으로 갈 수도 있어요:

✅✅ "다음 기능이 있는 쇼핑몰 만들어줘:

상품 목록 (이미지, 이름, 가격 표시)
상품 클릭하면 상세 페이지
장바구니 담기 버튼
장바구니에서 수량 조절
주문하기 (이름, 연락처, 주소 입력)"

2. 제약 조건 명시

"이건 되면 안 돼", "이건 꼭 있어야 해" 같은 조건들입니다.

예시:

"비밀번호는 최소 8자 이상"
"로그인 안 한 사람은 글 못 씀"
"한 페이지에 20개까지만"
"모바일에서도 잘 보여야 함"

이런 조건을 안 말하면 AI가 알아서 정해버립니다. 그리고 나중에 "뭐지, 이거 왜 이래?" 하게 됩니다

3. 기술 스택 지정

어떤 도구로 만들지 말해주세요.

프론트엔드:

React
Next.js
Vue

백엔드/데이터베이스:

Supabase
Firebase
Node.js + PostgreSQL

스타일:

Tailwind CSS
일반 CSS
styled-components

예시:

React와 Tailwind CSS로 만들어줘.
백엔드는 Supabase 사용하고.

처음엔 뭘 써야 할지 모르겠죠? 저는 비개발자분들한테 이 조합을 추천합니다:

Next.js + Tailwind CSS + Supabase

이유는 간단해요. 제일 쉽고, 자료도 많고, 무료로 시작할 수 있어요.

자료가 인터넷에 많다는 것은 그만큼 LLM이 학습을 충분히 했다는 뜻입니다. 구글링을 해도 자료 찾는 게 쉽구요. 처음에는 많은 사람들이 사용하는 걸 따라쓰는게 좋습니다.

4. 예시 제공

말로 설명하기 어려우면 예시를 보여주세요.

UI 관련:

버튼 디자인은 이런 느낌으로 해줘:
- 둥근 모서리 (border-radius)
- 파란색 배경
- 흰색 글씨
- 마우스 올리면 색이 조금 진해지게

데이터 관련:

사용자 데이터는 이런 형태야:
{
  "id": 1,
  "name": "김철수",
  "email": "kim@email.com",
  "role": "member"
}

참고 사이트:

이런 느낌으로 만들어줘: [참고 URL]
특히 메뉴 부분이랑 카드 레이아웃 참고해줘.

5. 단계별 요청

한 번에 다 하려고 하지 마세요. 나눠서 요청하세요.

1단계:

먼저 프로젝트 구조만 잡아줘.
폴더 구조랑 필요한 파일들 목록.

2단계:

이제 메인 페이지 레이아웃 만들어줘.
헤더, 메인 콘텐츠, 푸터 구조로.

3단계:

헤더에 네비게이션 메뉴 추가해줘.
홈, 서비스, 문의 세 개.

이렇게 하면 좋은 점:

각 단계에서 확인할 수 있음
문제 생기면 어디서 잘못됐는지 알기 쉬움
AI도 더 정확하게 만들어줌

상황별 프롬프트 템플릿

복사해서 쓰세요.

새 기능 추가할 때

[기능 이름] 기능을 추가해줘.

동작 방식:
1. [첫 번째 단계]
2. [두 번째 단계]
3. [세 번째 단계]

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

기술 스택: [사용 중인 스택]

에러 수정할 때

이 에러가 나요:

[에러 메시지 전체 복사]

현재 코드:
[해당 코드 복사]

뭐가 문제인지 설명해주고, 수정해줘.

디자인 수정할 때

[컴포넌트 이름]의 스타일을 수정해줘.

현재: [현재 상태]
원하는 것: [원하는 상태]

구체적으로:
- [수정 사항 1]
- [수정 사항 2]

코드 설명 요청할 때

이 코드가 뭘 하는 건지 설명해줘.

[코드 복사]

특히 [모르는 부분] 이 부분이 이해가 안 돼.
비개발자도 이해할 수 있게 쉽게 설명해줘.

리팩토링 요청할 때

이 코드를 더 깔끔하게 정리해줘.

[코드 복사]

조건:
- 기능은 똑같이 유지
- 주석 추가해서 나중에 봐도 이해되게
- 중복 코드 있으면 정리

프롬프트 개선하는 습관

1. "왜?"를 물어보세요

AI가 뭔가 만들어주면 이렇게 물어보세요:

왜 이렇게 만들었어?
다른 방법도 있어?
이 방법의 장단점이 뭐야?

이렇게 하면 두 가지가 좋아요:

스스로 배울 수 있음
더 나은 방법이 있으면 알게 됨

2. 마음에 안 들면 구체적으로 말하세요

❌ "이거 별로야. 다시 해줘."

✅ "버튼이 너무 작아. 높이를 40px로 키워줘. 그리고 글자 크기도 16px로."

❌ "뭔가 이상해."

✅ "로그인 버튼 눌렀는데 아무 반응이 없어. 콘솔에 이런 에러가 나와: [에러 메시지]"

3. 잘된 프롬프트는 저장해두세요

효과 좋았던 프롬프트는 메모해두세요. 다음에 비슷한 거 만들 때 재사용할 수 있습니다.

저는 이런 식으로 정리해둡니다:

[로그인 기능 프롬프트]
이메일과 비밀번호로 로그인하는 기능 만들어줘...

[게시판 프롬프트]
간단한 게시판을 만들어줘...

[파일 업로드 프롬프트]
이미지 파일을 업로드하는 기능 만들어줘...

4. 역할을 부여해보세요

가끔은 AI한테 역할을 주면 더 좋은 결과가 나옵니다

넌 10년차 프론트엔드 개발자야. 
React와 TypeScript 전문가고, 클린 코드를 중요하게 생각해.
이제부터 내가 요청하는 기능들을 만들어줘.

넌 UX 디자이너야.
사용자 경험을 최우선으로 생각하고, 직관적인 인터페이스를 설계해.
이 앱의 사용자 흐름을 개선해줘.

흔한 실수들

1. 너무 길게 쓰기

프롬프트가 너무 길면 AI가 중요한 부분을 놓칠 수 있습니다

핵심만 명확하게. 필요하면 여러 번 나눠서 요청하세요.

2. 모호한 표현

❌ "예쁘게 만들어줘" → 예쁘다는 기준이 뭔가요? ✅ "둥근 모서리, 그림자 효과, 파란색 계열로 만들어줘"

❌ "빠르게 해줘" → 얼마나 빠르게요? ✅ "로딩 시간 3초 이내로 해줘"

❌ "적당히" → 적당히가 뭔가요? ✅ "한 페이지에 10개씩"

3. 맥락 없이 요청하기

갑자기 "이거 수정해줘" 하면 AI가 뭘 수정해야 할지 모릅니다

이전에 만든 로그인 기능 있잖아.
거기서 비밀번호 찾기 기능 추가해줘.

현재 로그인 코드:
[코드 복사]

이렇게 맥락을 같이 줘야 합니다.

4. 코드 안 보여주기

"에러 나요"만 하지 말고, 관련 코드를 보여주세요.

AI는 여러분 컴퓨터 화면을 못 봅니다. 최대한 많은 정보를 주세요.

실전 예시: 처음부터 끝까지

할 일 앱을 만든다고 해볼게요. 어떻게 프롬프트를 쓰면 좋을지 보여드리겠습니다.

1단계: 프로젝트 시작

Next.js 14와 Tailwind CSS로 할 일 관리 앱을 만들 거야.
Supabase를 백엔드로 사용할 거고.

먼저 프로젝트 초기 설정이랑 폴더 구조 잡아줘.

2단계: 데이터베이스

Supabase에 todos 테이블 만들어줘.

컬럼:
- id (자동 생성)
- title (할 일 제목)
- completed (완료 여부, 기본값 false)
- created_at (생성 시간)
- user_id (나중에 사용자별로 구분할 때 쓸 거야)

3단계: 기본 UI

메인 페이지에 할 일 목록 UI 만들어줘.

구성:
- 상단에 새 할 일 입력창 + 추가 버튼
- 아래에 할 일 목록
- 각 할 일은 체크박스 + 제목 + 삭제 버튼

스타일:
- 깔끔하고 심플하게
- 흰색 배경, 회색 테두리
- 완료된 항목은 취소선

4단계: 기능 연결

이제 Supabase랑 연결해서 실제로 작동하게 해줘.

1. 추가 버튼 누르면 DB에 저장
2. 페이지 로드하면 목록 불러오기
3. 체크박스 누르면 완료 상태 변경
4. 삭제 버튼 누르면 삭제

각 동작 후에 목록 새로고침 해줘.

5단계: 개선

몇 가지 개선해줘.

1. 빈 칸으로 추가 못하게 막아줘
2. 추가/삭제할 때 로딩 표시
3. 할 일 없으면 "할 일이 없습니다" 메시지
4. 모바일에서도 잘 보이게 반응형으로

이런 식으로 단계별로 요청하면 훨씬 수월해요. 위 과정에서는 supabase연결하는 과정은 생략되어있습니다만, LLM과 함께면 설정도 쉽게 하실 수 있을거에요. 계속 질문하세요.

마무리

프롬프트 잘 쓰는 건 연습입니다. 처음엔 어색해도 몇 번 하다 보면 감이 옵니다.

핵심만 정리하면:

구체적으로 쓰기
조건 명시하기
기술 스택 말하기
예시 보여주기
단계별로 나누기

그리고 AI한테 "왜?"를 자주 물어보세요. 그게 가장 빠른 학습법이에요.

다음 글부터는 실전으로 들어갑니다. 도구 선택하고, 실제로 첫 앱을 만들어보겠습니다.