초급 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": "블루투스 이어폰의 틱톡 라이브 커머스 카피를 생성해 줘",
"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에게 비즈니스 시나리오만 알려주면 됩니다:
프롬프트 예시: "저는 틱톡 이커머스 소재 작업대 프로토타입을 만들고 있습니다. '상품 작업'을 설명하는 JSON 데이터 구조를 설계해 주세요. 이 작업에는 다음이 포함되어야 합니다: 상품 기본 정보(이름, 카테고리), 입력 소재(이미지 링크), 그리고 AI 생성 결과(제목, 카피, 포스터 이미지). JSON 예시를 바로 보여 주세요."
AI는 설명에 따라 productName, generatedContent 같은 필드를 자동으로 구성해 줍니다.
2.2 AI에게 "사실적인" 데이터 대량 생산 맡기
데이터 구조가 준비되면 다음 단계는 AI에게 "빈칸을 채워" 사실적인 데이터를 대량 생성하는 것입니다.
프롬프트 팁: AI에게 "데이터를 생성해 줘"라고만 하면 안 됩니다. 인턴에게 업무를 지시하듯 비즈니스 배경과 콘텐츠 요구사항을 알려주어야 합니다:
- 비즈니스 배경: AI에게 우리가 "틱톡 이커머스"를 한다고 알려주면, 상품 제목은 눈에 띄어야 하고(예: "날씬해 보이는 아이템", "학생 필수템"), 카피는 구어체여야 합니다.
- 이미지 요구사항: 프로토타입을 보기 좋게 만들려면 흑백 플레이스홀더가 아닌 무작위 컬러 풍경이나 실물 사진을 사용하는 것이 좋습니다.
프롬프트 예시: "방금 설계한 구조를 기반으로 10개의 사실적인 Mock Data를 생성해 주세요. (참고: 반드시 JSON 형식일 필요는 없습니다. 프론트엔드를 작성 중이라면 JavaScript 배열로, Python을 사용 중이라면 List로 생성할 수 있습니다.)
비즈니스 시나리오 요구사항:
- 종합 잡화점이라고 가정하고, 상품은 '여성의류', '디지털', '뷰티' 세 가지 카테고리를 포함합니다.
- 생성된 제목과 카피는 '틱톡 스타일'이어야 합니다: 예를 들어 제목에 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로 "가짜 추가/삭제/수정" 구현
방금 생성한 "시뮬레이션 데이터"를 볼 수만 있게 하지 않고, 삭제하고 수정할 수 있게 만들고 싶다면, 심지어 새로 생성한 작업이 페이지 새로고침 후에도 남아 있게 하려면 LocalStorage를 결합하면 됩니다.
프롬프트 예시: "데이터 저장 기능을 구현해 주세요.
localStorage에서 데이터를 먼저 읽어옵니다.localStorage가 비어 있으면 방금 생성한 Mock 데이터로 초기화하고, 이를localStorage에 저장합니다.- 동시에
addProductTask와deleteProductTask함수를 작성해 주세요. 매번 작업 시localStorage를 동기화하여 업데이트합니다."
이 단계를 거치면 프로토타입에 "기억"이 생기고, 사용자 경험이 실제 제품과 거의 다르지 않게 됩니다.
3. 피드백 수집과 빠른 반복 개선
방구석에서 만든 제품은 좋은 제품이 될 수 없습니다. 이제 프로토타입이 "핵심 기능" + "완전한 흐름" + "데모 데이터"를 갖추었으니, 남에게 보여줄 때입니다.
3.1 누구에게 테스트를 맡길까? 어떻게 테스트할까?
- 친구/동료에게 맡기기: 기술을 이해할 필요 없이, 한번 사용해 보게만 하세요.
- 안내하지 말고 관찰하기: "여기를 클릭해"라고 말하지 말고, 그들이 어디를 클릭하는지 보세요. 버튼을 찾지 못한다면 디자인에 문제가 있는 것입니다.
- "Wizard of Oz" 방식: AI가 아직 연동되지 않았다면, 수동으로 백엔드(또는 데이터베이스)에서 데이터를 수정해 AI의 응답을 시뮬레이션하여, 사용자가 이 기능을 필요로 하는지 먼저 검증할 수 있습니다.
3.2 버그와 불평에 대처하기
- 스타일 깨짐: 다른 화면 크기에서 레이아웃이 깨질 수 있습니다.
- Action: 스크린샷을 찍어 AI IDE에 보내기 -> "이 화면 너비에서 레이아웃이 깨졌어요. 수정해 주세요."
- 조작이 불편함: "이 흐름이 너무 복잡해요".
- Action: AI IDE에 의견 전달 -> "사용자가 먼저 업로드하고 생성하는 게 너무 느리다고 해요. 원클릭 생성으로 바꿀 수 있나요?"
- 새로운 요구사항: "이런 기능이 있었으면 좋겠어요".
- Action: 핵심 기능인지 평가하고, 핵심이라면 AI에게 간소화 버전을 빠르게 구현하게 합니다.
기억하세요: 이 단계에서 AI는 최고의 수정 도우미입니다. 여러분은 문제를 발견하는 것만 담당하고, 코드 수정은 AI에게 맡기세요.
4. 🎓 단계 대과제: "졸업 작품" 완성
축하합니다! "요구사항"에서 "프로토타입"을 거쳐 "AI 통합"까지의 전 과정을 마쳤습니다. 이제 최종 성과를 보여줄 시간입니다.
이번 대과제는 "이커머스 소재 작업대"에 국한되지 않습니다. 자신의 관심사나 산업 배경을 결합해 독창적인 AI 제품 프로토타입을 만들어야 합니다.
주제 선정과 요구사항
산업 다분류 시나리오 방향 참고에서 가장 가까운 시나리오를 선택하거나, 자신의 아이디어로 완전히 새로운 시나리오를 구상할 수 있습니다.
프로젝트는 이전 수업에서 배운 모든 내용을 종합적으로 활용해야 합니다:
- 프로토타입 구축: 프론트엔드 기술을 사용해 보기 좋고 사용하기 쉬운 인터페이스를 구축합니다.
- 요구사항 관리: 크고 완벽한 것을 추구하기보다 핵심 기능 논리가 루프를 이루도록 합니다.
- API 연동: 실제 AI 모델(LLM/VLM 등)을 연동하여 애플리케이션에 진정한 지능을 부여합니다.
- 실행 가능한 애플리케이션 구현: 정적인 페이지가 아닌, 데이터 흐름과 인터랙션 피드백이 있는 동적 애플리케이션을 만듭니다.
과제 산출물
최종적으로 다음 두 가지를 제출해야 합니다:
- 완성된 프로토타입 애플리케이션: 배포되어 온라인에서 접속 가능하거나, 로컬에서 실행 가능해야 하며, 완전한 사용 흐름을 갖추어야 합니다.
- 30초 데모 영상: 애플리케이션 시나리오를 간단히 소개하고, 핵심 기능의 실제 조작을 시연하는 영상을 녹화합니다.
이것은 Stage 1의 마지막 전투입니다. 다음 체크리스트에 따라 작품을 점검해 주세요:
다음 단계
대과제를 완료하면 "독립적으로 AI 애플리케이션 프로토타입을 개발하는" 능력을 갖추게 됩니다. 다음 Stage 2에서는 더 복잡한 풀스택 개발을 심화 학습하고, 이 프로토타입을 실제로 온라인에 공개할 수 있고, 데이터베이스와 사용자 시스템을 갖춘 상업급 애플리케이션으로 만드는 법을 배우게 됩니다.
다음 단계에서 만나요!