초급 5: 완성 프로젝트 실전
본 장 안내
1. "Happy Path" 거부하기: 핵심 흐름 완성
많은 초보자는 프로토타입을 만들 때 "Happy Path", 즉 가장 이상적인 경로만 만듭니다. 사용자가 클릭한다 -> API 응답이 성공한다 -> 결과를 보여 준다. 하지만 현실 세계에서는 일이 그렇게 순조롭지만은 않습니다. 당신의 프로토타입이 진짜 제품처럼 보이게 하려면 다음과 같은 "보이지 않는" 고리를 고려해야 합니다.
1.1 "기다림"과 "피드백" 추가하기
사용자가 "문구 생성"을 클릭하면 AI는 대개 응답까지 몇 초가 필요합니다. 이때 인터페이스가 아무 반응도 보이지 않으면 사용자는 프로그램이 고장 났다고 생각합니다. AI IDE에게 Loading 상태를 추가해 달라고 해야 합니다.
프롬프트 예시: "생성 버튼을 클릭하면 버튼을 '생성 중...'으로 바꾸고 클릭할 수 없게 해 주세요. 동시에 오른쪽 영역에는 로딩 애니메이션을 표시해 주세요. API 결과가 반환된 뒤에 다시 정상 상태로 되돌려 주세요."
1.2 "실패"와 "예외" 처리하기
API Key가 만료될 수도 있고, 네트워크가 끊길 수도 있습니다. AI IDE에게 오류 처리를 도와달라고 해야 합니다.
프롬프트 예시: "API 요청이 실패하면 콘솔에만 오류를 내지 말고, 페이지 상단에 빨간색 알림 상자(Toast)를 띄워 사용자에게 '생성에 실패했습니다. 잠시 후 다시 시도해 주세요'라고 알려 주세요. 그리고 사용자가 생성 버튼을 다시 클릭할 수 있게 해 주세요."
1.3 대화 기록 영속화
AI와 상호작용하는 과정에서는 대화 내용을 저장해 사용자가 기록을 다시 보고 이전 대화를 이어 갈 수 있어야 합니다. 현재 단계에서는 데이터베이스를 도입하지 않고, 다음과 같은 가벼운 방안을 선택할 수 있습니다.
저장 방안 선택:
| 방안 | 적합한 상황 | 특징 |
|---|---|---|
| LocalStorage | 순수 프론트엔드 프로젝트, 사용자 데이터가 브라우저에 저장됨 | 구현이 간단하고 새로고침해도 사라지지 않지만, 기기 간 동기화는 불가 |
| JSON 파일 | 로컬 프로토타입, 데이터를 파일 형태로 저장 | 구조가 명확하고 디버깅이 쉬우며 수동 편집 가능 |
| TXT 파일 | 가장 단순한 방안, 텍스트 내용을 빠르게 기록 | 형식이 자유롭고 호환성이 좋음 |
대화 내용 예시: 저장되는 대화 기록은 보통 다음 내용을 포함합니다.
[
{
"role": "user",
"content": "블루투스 이어폰의 Douyin 판매 문구를 만들어 줘",
"timestamp": "2026-01-20 10:30:00"
},
{
"role": "assistant",
"content": "【블루투스 이어폰 추천 문구】\n\n🎧 지연은 이제 그만, 몰입형 음악 감상 경험\n\n여러분! 이 블루투스 이어폰 진짜 대박이에요👇\n\n✅ 40dB 액티브 노이즈 캔슬링, 순식간에 음악 세계로\n✅ 30시간 초장시간 배터리, 일주일 출퇴근 충전 걱정 없음\n✅ 통화 품질은 마치 대면 대화처럼 선명, 지하철 소음 속에서도 편하게\n✅ 세미 인이어 디자인, 오래 착용해도 아프거나 답답하지 않음\n\n💰 기간 한정 할인, 아래 링크로 바로 구매하세요!",
"timestamp": "2026-01-20 10:30:05"
}
]구현 프롬프트:
"대화 기록 저장 기능을 구현해 주세요. 사용자와 AI의 대화 기록을 JSON 파일로 저장하거나 LocalStorage를 사용하도록 지원해 주세요. 페이지에 들어올 때마다 기존 대화 기록을 자동으로 불러오고, 단일 대화 기록을 조회하고 삭제할 수 있게 해 주세요."
2. 영혼 주입하기: 실제 같은 데이터(Mock Data) 시뮬레이션
텅 빈 페이지는 사람을 설득할 수 없습니다. "이커머스 소재 워크벤치"를 보여 주는데 기록이 텅 비어 있거나 "test / test / test" 한 줄만 있다고 상상해 보세요. 가장 좋은 시연 효과를 만들려면 실제처럼 보이는 데이터를 "위조"해야 합니다. 그래야 프로토타입이 이미 반년 정도 운영된 진짜 제품처럼 보입니다.
2.1 AI에게 데이터 구조 설계를 맡기기
우리가 각 필드의 이름을 하나하나 생각할 필요는 없습니다. 예를 들어 name이라고 할지 title이라고 할지 고민하는 일은 AI에게 맡길 수 있습니다.
당신은 AI에게 비즈니스 장면만 알려 주면 됩니다.
프롬프트 예시: "나는 Douyin 이커머스 소재 워크벤치 프로토타입을 만들고 있어. '상품 작업'을 설명하기 위한 JSON 데이터 구조를 설계해 줘. 이 작업에는 상품의 기본 정보(이름, 카테고리), 입력 소재(이미지 링크), 그리고 AI가 생성한 결과(제목, 문구, 포스터 이미지)가 포함되어야 해. JSON 예시를 바로 줘."
AI는 당신의 설명에 따라 productName, generatedContent 같은 필드를 자동으로 구상해 줍니다.
2.2 AI에게 "실감 나는" 데이터를 대량 생산하게 하기
데이터 구조가 생겼다면 다음 단계는 AI에게 "빈칸을 채워" 실제처럼 보이는 데이터를 한 묶음 만들게 하는 것입니다.
프롬프트 팁: AI에게 "데이터 만들어 줘"라고만 말하면 안 됩니다. 인턴에게 업무를 맡기듯 비즈니스 배경과 내용 요구사항을 알려 줘야 합니다.
- 비즈니스 배경: 우리는 "Douyin 이커머스"를 하므로 상품 제목은 눈길을 끌어야 합니다. 예: "날씬해 보이는 필수템", "학생 필수 구매". 문구는 구어체여야 합니다.
- 이미지 요구사항: 프로토타입을 예쁘게 보이게 하려면 이미지는 흑백 플레이스홀더가 아니라 랜덤 컬러 풍경이나 실제 물건 이미지가 좋습니다.
프롬프트 예시: "방금 설계한 구조를 바탕으로 실감 나는 Mock Data 10개를 만들어 줘. (비고: 반드시 JSON 형식일 필요는 없어. 프론트엔드를 작성 중이라면 JavaScript 배열로 바로 생성하게 해도 되고, Python을 쓴다면 List로 생성하게 해도 돼.)
비즈니스 장면 요구사항:
- 종합 잡화점이라고 가정하고, 상품은 '여성복', '디지털', '뷰티' 세 카테고리를 포함해.
- 생성된 제목과 문구는 매우 'Douyin 스타일'이어야 해: 예를 들어 제목에는 Emoji(🔥, ✨)를 포함하고, 문구는 '대박', '직접 써 보니 좋음' 같은 말투를 사용해.
- 이미지 필드: 모두
https://picsum.photos/seed/{random_id}/300/400형식을 사용해서 각 이미지가 서로 다르게 보이도록 해."
생성된 Mock Data 예시:
export const mockProductTasks = [
{
id: 'task_001',
name: '여름 프렌치 빈티지 플라워 원피스',
status: 'completed',
input: {
category: '여성복',
features: ['허리 라인', '날씬해 보임', '분위기'],
originalImage: 'https://picsum.photos/seed/dress_input/300/400'
},
output: {
generatedTitle: '✨누가 입어도 예쁨! 이 프렌치 플라워 원피스 진짜 대박🔥',
generatedCopy:
'여러분! 이 원피스 진짜 날씬해 보여요! 허리 라인이 정말 좋아서 입자마자 실루엣이 살아나요. 원단도 통기성이 좋아 여름에 입어도 전혀 답답하지 않아요. 데이트와 쇼핑에 강력 추천!👗',
generatedPosterImage: 'https://picsum.photos/seed/dress_output/300/400'
},
createdAt: '2026-01-20T10:00:00Z'
},
{
id: 'task_002',
name: '초강력 노이즈 캔슬링 블루투스 이어폰 Pro',
status: 'completed',
input: {
category: '디지털',
features: ['노이즈 캔슬링', '초장시간 배터리', '저지연'],
originalImage: 'https://picsum.photos/seed/tech_input/300/400'
},
output: {
generatedTitle: '🎧 드디어 찾았다! 이 이어폰 노이즈 캔슬링 너무 강력하잖아!🔇',
generatedCopy:
'착용하는 순간 세상이 조용해져요. 음질도 뛰어나서 노래를 들으면 현장에 있는 것 같아요. 배터리도 정말 오래가서 한 번 충전하면 일주일 사용 가능! 학생 필수템!',
generatedPosterImage: 'https://picsum.photos/seed/tech_output/300/400'
},
createdAt: '2026-01-21T14:30:00Z'
}
// ... 더 많은 데이터
]2.3 (고급) LocalStorage로 "가짜 CRUD" 구현하기
방금 만든 "Mock Data"가 단지 보기만 하는 것이 아니라 삭제, 수정도 가능하고, 새로 생성한 작업이 페이지 새로고침 후에도 남아 있기를 원한다면 LocalStorage를 결합할 수 있습니다.
프롬프트 예시: "데이터 저장 기능을 구현해 줘.
- 우선
localStorage에서 데이터를 읽어 와.localStorage가 비어 있으면 방금 생성한 Mock Data로 초기화하고, 그것들을localStorage에 저장해.- 동시에
addProductTask와deleteProductTask함수를 작성해 줘. 매번 작업할 때마다localStorage도 동기화해야 해."
이 단계를 거치면 프로토타입은 "기억"을 가지게 되고, 사용자 경험은 거의 진짜 제품과 다르지 않게 됩니다.
3. 피드백 수집과 빠른 반복 개선
문을 닫고 혼자 만들면 좋은 제품은 나오지 않습니다. 이제 당신의 프로토타입은 "핵심 기능" + "완전한 흐름" + "시연 데이터"를 갖췄습니다. 다른 사람에게 보여 줄 때가 되었습니다.
3.1 누구에게 테스트하게 할까? 어떻게 테스트할까?
- 친구/동료 찾기: 기술을 알 필요는 없습니다. 그냥 직접 사용해 보게 하면 됩니다.
- 유도하지 말고 관찰하기: "여기를 클릭하세요"라고 말하지 말고, 그들이 어디를 클릭하는지 봅니다. 버튼을 찾지 못한다면 설계에 문제가 있다는 뜻입니다.
- "Wizard of Oz"(오즈의 마법사 방법): AI가 아직 제대로 연결되지 않았다면, 백그라운드나 데이터베이스에서 사람이 직접 데이터를 수정해 AI 반환을 흉내 내고, 먼저 사용자가 이 기능을 필요로 하는지 검증할 수 있습니다.
3.2 Bug와 불평을 마주하기
- 스타일 깨짐: 화면 크기가 다르면 레이아웃이 깨질 수 있습니다.
- Action: 스크린샷을 AI IDE에게 보내기 -> "이 화면 너비에서 깨졌어. 고쳐 줘."
- 조작이 불편함: "이 흐름이 너무 번거로워요."
- Action: 제안을 AI IDE에게 말하기 -> "사용자가 먼저 업로드하고 다시 생성하는 흐름이 너무 느리다고 해. 한 번에 생성하도록 바꿀 수 있을까?"
- 새 요구사항: "이 기능이 있으면 좋겠어요."
- Action: 핵심인지 평가합니다. 핵심이라면 AI에게 빠르게 간소화 버전을 구현하게 합니다.
기억하세요. 이 단계에서 AI는 최고의 수정 조수입니다. 당신은 문제를 발견하기만 하면 되고, 코드 수정은 AI에게 맡기면 됩니다.
4. 🎓 단계 대과제: 당신의 "졸업 작품" 완성하기
축하합니다! 당신은 이미 "요구사항"에서 "프로토타입", 그리고 "AI 통합"까지 전 과정을 걸어왔습니다. 이제 최종 결과물을 보여 줄 시간입니다.
이번 대과제는 더 이상 "이커머스 소재 워크벤치"에만 제한되지 않습니다. 자신의 관심사나 산업 배경을 결합해 세상에 하나뿐인 AI 제품 프로토타입을 만들어야 합니다.
주제 선정과 요구사항
산업 다분류 시나리오 방향 참고 중 가장 가까운 장면을 하나 선택하거나, 자신의 생각에 따라 완전히 새로운 장면을 구상해야 합니다.
프로젝트는 앞의 몇 장에서 배운 모든 내용을 종합적으로 활용해야 합니다.
- 프로토타입 구축: 프론트엔드 기술을 사용해 아름답고 사용하기 쉬운 인터페이스를 만듭니다.
- 요구사항 제어: 크고 완전한 것을 추구하지 말고, 핵심 기능의 논리적 폐쇄 루프를 추구합니다.
- API 접목: 실제 AI 모델(LLM/VLM 등)을 연결해 애플리케이션에 진짜 지능을 부여합니다.
- 가지고 놀 수 있는 애플리케이션 구현: 단순한 정적 페이지가 아니라 데이터 흐름과 상호작용 피드백이 있는 동적 애플리케이션이어야 합니다.
과제 산출물
최종적으로 다음 두 가지를 제출해야 합니다.
- 완성된 프로토타입 애플리케이션: 온라인 배포 또는 로컬 실행이 가능하고, 완전한 사용 흐름을 갖춰야 합니다.
- 30초 시연 영상: 애플리케이션의 사용 장면을 간단히 소개하고 핵심 기능의 실제 조작을 보여 주는 영상을 녹화합니다.
이것은 Stage 1의 마지막 전투입니다. 아래 체크리스트에 따라 작품을 확인하세요.
다음 단계
대과제를 완료했다면, 당신은 이미 "AI 애플리케이션 프로토타입을 독립적으로 개발하는" 능력을 갖춘 것입니다. 다음 Stage 2에서는 더 복잡한 풀스택 개발을 깊이 다루며, 이 프로토타입을 실제로 배포 가능하고, 데이터베이스와 사용자 시스템을 갖춘 상업 수준의 애플리케이션으로 바꾸는 법을 배웁니다.
다음 단계에서 만나요!