Merge pull request #88 from kimyounghee425/feat/korean
feat : Add Korean translation for Stage 1 documentation
This commit is contained in:
Sanbu 散步
+109
-9
@@ -425,6 +425,104 @@ const productManagerSidebarEn = [
|
||||
}
|
||||
]
|
||||
|
||||
const productManagerSidebarKo = [
|
||||
{
|
||||
text: '시작하기',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{ text: '학습 지도', link: '/ko-kr/stage-1/learning-map/' },
|
||||
{
|
||||
text: 'AI 시대, 말할 수 있으면 코딩할 수 있다',
|
||||
link: '/ko-kr/stage-1/ai-capabilities-through-games/'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '제품 프로토타입 역량',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: 'AI IDE 도구 익히기',
|
||||
link: '/ko-kr/stage-1/introduction-to-ai-ide/'
|
||||
},
|
||||
{
|
||||
text: '좋은 아이디어 찾기',
|
||||
link: '/ko-kr/stage-1/finding-great-idea/'
|
||||
},
|
||||
{
|
||||
text: '프로토타입 만들기',
|
||||
link: '/ko-kr/stage-1/building-prototype/'
|
||||
},
|
||||
{
|
||||
text: 'AI 기능 통합하기',
|
||||
link: '/ko-kr/stage-1/integrating-ai-capabilities/'
|
||||
},
|
||||
{
|
||||
text: '완성 프로젝트 실습',
|
||||
link: '/ko-kr/stage-1/complete-project-practice/'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '부록: 비즈니스 사고',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: '제품 사고와 솔루션 설계',
|
||||
link: '/ko-kr/stage-1/appendix-a-product-thinking/'
|
||||
},
|
||||
{
|
||||
text: 'AI 산업 적용 시나리오',
|
||||
link: '/ko-kr/stage-1/appendix-industry-scenarios/'
|
||||
},
|
||||
{
|
||||
text: '소비자용 AI 제품 시나리오',
|
||||
link: '/ko-kr/stage-1/appendix-c-consumer-scenarios/'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '부록: 사용자 조사와 검증',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: '아이디어는 어디서 찾을까',
|
||||
link: '/ko-kr/stage-1/appendix-idea-sources/'
|
||||
},
|
||||
{
|
||||
text: 'Double Diamond',
|
||||
link: '/ko-kr/stage-1/appendix-double-diamond/'
|
||||
},
|
||||
{
|
||||
text: 'Jobs to Be Done',
|
||||
link: '/ko-kr/stage-1/appendix-jobs-to-be-done/'
|
||||
},
|
||||
{
|
||||
text: 'The Mom Test',
|
||||
link: '/ko-kr/stage-1/appendix-mom-test/'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
text: '부록: 기술 문제 해결',
|
||||
collapsed: false,
|
||||
items: [
|
||||
{
|
||||
text: '오류가 났을 때 대처법',
|
||||
link: '/ko-kr/stage-1/appendix-b-common-errors/'
|
||||
},
|
||||
{
|
||||
text: 'AI 코딩 도구로 스네이크 게임 만들기',
|
||||
link: '/ko-kr/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial'
|
||||
},
|
||||
{
|
||||
text: '디자인 Agent와 코딩 Agent로 웹사이트 만들기',
|
||||
link: '/ko-kr/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
const stage2SidebarEn = [
|
||||
{
|
||||
text: 'Frontend Development',
|
||||
@@ -2430,26 +2528,28 @@ Sitemap: ${siteUrl}/sitemap.xml
|
||||
{ text: '홈', link: '/ko-kr/' },
|
||||
{
|
||||
text: '초보자 & PM',
|
||||
link: '/zh-cn/stage-1/learning-map/',
|
||||
activeMatch: '/zh-cn/stage-1/'
|
||||
link: '/ko-kr/stage-1/learning-map/',
|
||||
activeMatch: '/ko-kr/stage-1/'
|
||||
},
|
||||
{
|
||||
text: '풀스택 개발',
|
||||
link: '/zh-cn/stage-2/frontend/lovart-assets/',
|
||||
activeMatch: '/zh-cn/stage-2/'
|
||||
link: '/ko-kr/stage-2/',
|
||||
activeMatch: '/ko-kr/stage-2/'
|
||||
},
|
||||
{
|
||||
text: '고급 개발',
|
||||
link: '/zh-cn/stage-3/core-skills/basics/',
|
||||
activeMatch: '/zh-cn/stage-3/'
|
||||
link: '/ko-kr/stage-3/',
|
||||
activeMatch: '/ko-kr/stage-3/'
|
||||
},
|
||||
{
|
||||
text: '부록',
|
||||
link: '/zh-cn/appendix/',
|
||||
activeMatch: '/zh-cn/appendix/'
|
||||
link: '/ko-kr/appendix/',
|
||||
activeMatch: '/ko-kr/appendix/'
|
||||
}
|
||||
],
|
||||
sidebar: {}
|
||||
sidebar: {
|
||||
'/ko-kr/stage-1/': productManagerSidebarKo
|
||||
}
|
||||
}
|
||||
},
|
||||
'es-es': {
|
||||
|
||||
@@ -0,0 +1,764 @@
|
||||
# 초급 1: AI 시대에는 말할 수 있으면 프로그래밍할 수 있다
|
||||
|
||||
이것은 **프로젝트 기반 학습** 튜토리얼입니다. 단계별로 따라 하며 결과를 재현해 보기를 권장합니다.
|
||||
실수하거나 내용을 수정하는 것을 걱정하지 마세요. 우리는 언제나 당신이 해낼 수 있다고 믿습니다. 반드시 기억하세요.
|
||||
|
||||
<div style="text-align: center;">
|
||||
<div style="display: inline-block; padding: 8px 20px; border-radius: 8px; border: 1px dashed #FFB6C1; background: linear-gradient(135deg, #FFF0F5 0%, #FFE4EC 100%); margin: 12px 0;">
|
||||
<span style="font-size: 15px; font-weight: 500; color: #666;">완벽보다 완성이 더 중요합니다 🐣</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = '약 <strong>4시간</strong>, 여러 번에 나누어 완료 가능'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['ko-kr/stage-1/ai-capabilities-through-games'] ?? []
|
||||
</script>
|
||||
|
||||
## 이 장의 가이드
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['대화식 AI 프로그래밍', 'AI 네이티브 미니게임', '스네이크 실습']" coreOutput="AI 네이티브 스네이크 + 직접 만든 미니게임" expectedOutput="실행 가능한 AI 네이티브 스네이크 1개 + (선택) 직접 만든 AI 네이티브 미니게임 또는 Demo 1개">
|
||||
|
||||
만약 당신이 <strong>프로그래밍을 전혀 할 줄 모르거나</strong>, 아주 조금만 알고 있다면, 이 장은 바로 당신을 위해 준비된 것입니다. 우리는 가장 기초적인 부분부터 시작합니다. <strong>대화하는 방식</strong>으로 AI가 코드를 작성하게 하고, 문법을 외우지 않아도 되고, 환경을 설정하지 않아도 되며, 웹페이지에서 바로 실행할 수 있습니다.
|
||||
|
||||
당신은 직접 <strong>처음으로 실행 가능한 프로그램</strong>을 만들게 됩니다. “단어를 먹고, 시를 쓰고, 그림을 그리는” 스네이크 게임입니다. 이 실습을 통해 AI 프로그래밍이 어떤 느낌인지 체험하게 됩니다. AI가 당신을 대신해 생각하는 것이 아니라, 당신이 생각을 말로 꺼내고 AI가 그것을 구현해 주는 방식입니다.
|
||||
|
||||
모든 창조는 0에서 1로 시작합니다. 모든 자신감과 전문성을 당신에게 전달할 수 있어 기쁩니다. 당신에게는 <strong>실행력 is all you need</strong>입니다.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: '곤경과 기회', description: '일반인을 위한 프로그래밍의 새 가능성' },
|
||||
{ title: '능력 첫 탐색', description: '60초 초고속 개발 경험' },
|
||||
{ title: '네이티브 실습', description: 'AI 네이티브 스네이크 만들기' },
|
||||
{ title: '확장 창작', description: '하나를 배워 여러 게임 만들기' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. 일반인의 곤경과 기회
|
||||
|
||||
많은 사람의 머릿속에는 제품 아이디어가 잔뜩 있습니다. 자신을 위한 가계부 작은 도구, 아이의 성장을 기록하는 웹페이지, 심지어 미니게임까지 있습니다. 하지만 코드를 써야 하고 프로그래머를 찾아야 한다고 생각하는 순간 바로 포기하게 됩니다.
|
||||
|
||||
AI가 등장한 뒤, 일반인에게 처음으로 완전히 새로운 가능성이 열렸습니다. 코드를 쓸 줄 몰라도 됩니다. AI에게 원하는 것을 분명히 말하는 법만 배우면 됩니다. GitHub Copilot의 [데이터](https://www.wearetenet.com/blog/github-copilot-usage-data-statistics)에 따르면 1,500만 명이 넘는 개발자가 AI 보조 프로그래밍을 사용하고 있으며, 평균적으로 코드의 46%가 AI로 생성됩니다! Java 프로젝트에서는 이 비율이 61%에 도달할 수 있습니다.
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">🚀</span>
|
||||
<span style="font-weight: bold; font-size: 16px;">효율과 도입률의 도약</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<el-row :gutter="20" style="margin-bottom: 24px;">
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #409EFF; font-size: 24px; font-weight: bold;">55%</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">속도 향상</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #67C23A; font-size: 24px; font-weight: bold;">2.4 <span style="font-size: 14px;">일</span></div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">작업 소요 시간(기존 9.6일)</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #E6A23C; font-size: 24px; font-weight: bold;">81%</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">첫날 설치율</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="6" :xs="12">
|
||||
<div style="text-align: center; padding: 10px;">
|
||||
<div style="color: #F56C6C; font-size: 24px; font-weight: bold;">96%</div>
|
||||
<div style="color: #909399; font-size: 12px; margin-top: 4px;">제안 채택률</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div style="line-height: 1.8; color: #606266;">
|
||||
정말 흥미로운 것은 효율의 도약입니다. 개발자가 작업을 완료하는 속도가 <b>55%</b> 향상되었습니다. 원래 코드를 제출하는 데 9.6일이 필요했다면, 이제는 <b>2.4일</b>이면 처리할 수 있습니다. 이렇게 눈에 보이는 효율 향상은 AI가 더 이상 “선택 가능한 도구”가 아니라 개발 흐름에서 없어서는 안 될 프로그래밍 어시스턴트가 되고 있음을 보여 줍니다. 도입률 데이터도 이를 뒷받침합니다. 접근 권한을 얻은 당일에 개발자의 <b>81%</b>가 바로 설치를 완료하고 사용을 시작했으며, 그중 <b>96%</b>는 당일에 AI가 제공한 코드 제안을 채택하기 시작했습니다. 다시 말해 개발자들은 거의 즉시 AI를 일상적인 코딩 작업에 통합했습니다.
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
일반인에게 이 흐름은 더 큰 의미가 있습니다. 전문 프로그래머도 AI에 크게 의존해 코드를 쓴다면, **프로그래밍을 모르는 우리도 왜 AI와 직접 대화해서 자기 아이디어를 구현할 수 없을까요?**
|
||||
|
||||
이 수업의 목표는 당신이 새로운 능력을 익히도록 돕는 것입니다. 자연어 대화만으로 애플리케이션을 만들 수 있는 능력입니다. AI와 컴퓨터의 언어로 소통하는 법, 머릿속 아이디어를 실제로 사용할 수 있는 제품으로 바꾸도록 AI를 활용하는 법을 배웁니다.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: '곤경과 기회', description: '일반인을 위한 프로그래밍의 새 가능성' },
|
||||
{ title: '능력 첫 탐색', description: '60초 초고속 개발 경험' },
|
||||
{ title: '네이티브 실습', description: 'AI 네이티브 스네이크 만들기' },
|
||||
{ title: '확장 창작', description: '하나를 배워 여러 게임 만들기' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. AI는 어느 정도까지 도와줄 수 있을까
|
||||
|
||||
이 절에서는 한 가지 문제만 다룹니다. 당신이 코드를 전혀 쓸 줄 모른다면, 지금의 AI가 어느 정도까지 도와줄 수 있을까요?
|
||||
|
||||
대략적으로 말하면, 현재 대형 모델의 능력은 **간단한 내부용 작은 도구**, **데이터 시각화 대시보드**, 그리고 일부 **가벼운 미니게임** 개발을 감당할 수 있는 수준이라고 이해하면 됩니다. 이런 능력은 **자기 사용 도구**를 만들거나 **제품 관리자 관점에서 요구사항을 검증**하는 데에는 기본적으로 충분합니다. 다만 버튼 한 번으로 바로 **상업용 성숙 제품**을 생성하려면, 보통 여전히 사람이 **프로세스 설계**와 **세부 다듬기**를 계속 최적화해야 합니다.
|
||||
|
||||
이제 스네이크를 예로 들어, AI 프로그래밍이 현재 구체적으로 어디까지 가능한지 살펴보겠습니다.
|
||||
|
||||
### 2.1 60초 만에 스네이크 게임 만들기
|
||||
|
||||
먼저 수업에서 사용하는 실험 웹페이지 [z.ai](https://chat.z.ai/)를 여세요. `z.ai`는 Zhipu AI(중국의 선도적인 대형 언어 모델 회사 중 하나)가 개발한 AI 플랫폼이며, 핵심 능력은 Zhipu가 자체 연구 개발한 GLM 계열 대형 모델이 제공합니다. 이 플랫폼은 슬라이드 생성, 포스터 디자인, 풀스택 개발 등 여러 AI 기능을 통합합니다. 이 튜토리얼에서는 그중 풀스택 개발 모듈의 사용을 중점적으로 소개합니다.
|
||||
|
||||
::: details 💡 “웹페이지에서 바로 프로그래밍”하는 새 방식이란?
|
||||
|
||||
과거에는 웹 애플리케이션을 개발하려면 다음이 필요했습니다.
|
||||
- Python, Node.js 같은 프로그래밍 환경 설치
|
||||
- 코드 편집기 설정
|
||||
- HTML/CSS/JavaScript 같은 언어 학습
|
||||
- 각종 의존성과 오류 처리
|
||||
|
||||
하지만 지금은 AI 프로그래밍 플랫폼의 도움으로 다음만 하면 됩니다.
|
||||
- 브라우저를 열고 웹페이지에 접속
|
||||
- 자연어로 원하는 기능을 설명
|
||||
- AI가 자동으로 코드를 생성하고 결과를 실시간으로 미리보기
|
||||
|
||||
이런 “대화가 곧 프로그래밍”인 방식은 프로그래밍을 “코드 작성”에서 “요구사항 설명”으로 바꿉니다. 당신은 하위 기술 세부 사항을 신경 쓸 필요가 없고, AI에게 원하는 것을 명확히 알려 주기만 하면 됩니다. 그러면 AI가 아이디어를 실행 가능한 프로그램으로 바꿔 줍니다. 이것이 AI 시대 프로그래밍의 새로운 패러다임, 즉 **Vibe Coding(분위기식 코딩)** 입니다.
|
||||
:::
|
||||
|
||||
|
||||
|
||||
간단한 요구사항을 입력한 뒤 **풀스택 개발** 버튼을 클릭하면, 웹페이지가 생성되는 전체 과정을 실시간으로 볼 수 있습니다. 보통 커피 한 잔을 내릴 시간 정도면 웹페이지가 자동으로 완성됩니다!
|
||||
|
||||
```
|
||||
스네이크 게임을 만들어 주세요:
|
||||
1. 방향키로 뱀의 이동을 제어합니다.
|
||||
2. 먹이를 먹으면 뱀이 길어지고 점수가 증가합니다.
|
||||
3. 벽이나 자신의 몸에 부딪히면 게임이 끝납니다.
|
||||
4. 시작 버튼과 다시 시작 버튼이 있어야 합니다.
|
||||
5. 인터페이스는 간결하고 보기 좋아야 합니다.
|
||||
```
|
||||
|
||||
|
||||
|
||||
생성이 끝나면 오른쪽에 탐색 가능한 웹 인터페이스가 나타납니다. 페이지 내용을 위아래로 스크롤해 보거나, 페이지 상단의 🧭 버튼을 클릭해 전체 화면 모드로 전환해 결과를 확인할 수 있습니다.
|
||||
|
||||
> 상단 버튼의 역할은 왼쪽부터 차례대로 다음과 같습니다. 화살표 버튼은 사이드 대화 기록 영역을 펼치고, 연필 버튼은 새 대화를 만들며, 순환 화살표 버튼은 페이지를 새로고침하고, 나침반 버튼은 전체 화면 모드로 전환합니다. Download 버튼은 프로젝트 다운로드, <> 버튼은 코드 보기 전환, Publish 버튼은 프로젝트 게시에 사용됩니다.
|
||||
|
||||
|
||||
|
||||
이 웹페이지의 소스 코드를 보고 싶다면 오른쪽 위의 코드 아이콘을 클릭해 전체 코드를 확인할 수 있습니다.
|
||||
|
||||
|
||||
|
||||
::: tip 🌐 더 많은 AI 프로그래밍 도구 탐색하기
|
||||
|
||||
z.ai 외에도 아래의 훌륭한 AI 프로그래밍 플랫폼을 시도해 볼 것을 추천합니다.
|
||||
|
||||
| 도구 | 주소 | 특징 |
|
||||
|------|------|------|
|
||||
| **Google AI Studio**(추천) | [aistudio.google.com/apps](https://aistudio.google.com/apps) | Google 공식 제품이며 Gemini 모델을 지원하고 빠른 프로토타입 개발에 적합합니다 |
|
||||
| **Figma Make** | [figma.com/make](https://www.figma.com/make) | 디자인 도구와 깊게 통합되어 디자이너가 상호작용 프로토타입을 빠르게 구현하기에 적합합니다 |
|
||||
| **Coze** | [coze.com](https://www.coze.cn) | ByteDance가 출시한 AI Bot 개발 플랫폼이며, 노코드 시각적 구축 능력을 제공합니다. Doubao, Kimi 등 중국산 대형 모델과 깊게 통합되어 있고, 플러그인 마켓, 예약 작업, 여러 채널 배포(Feishu, WeChat 등)를 지원하므로 C-end 사용자를 위한 대화형 애플리케이션이나 기업 내부 지능형 어시스턴트를 빠르게 만들기에 적합합니다 |
|
||||
| **v0.dev** | [v0.dev](https://v0.dev) | Vercel이 만든 AI UI 생성 도구로, 설명을 입력하면 실행 가능한 React 컴포넌트 코드를 생성합니다 |
|
||||
| **Bolt.new** | [bolt.new](https://bolt.new) | StackBlitz가 출시한 AI 풀스택 개발 플랫폼으로, 완전한 Web 애플리케이션을 바로 생성하고 배포할 수 있습니다 |
|
||||
| **Lovable** | [lovable.dev](https://lovable.dev) | 고품질 React 애플리케이션 생성에 집중하며 GitHub 통합과 원클릭 배포를 지원합니다 |
|
||||
| **Replit Agent** | [replit.com](https://replit.com) | AI 프로그래밍 어시스턴트를 통합한 온라인 IDE이며, 여러 언어와 실시간 협업을 지원합니다 |
|
||||
|
||||
웹 프로그래밍 도구에 대한 더 자세한 비교와 사용 튜토리얼을 알고 싶다면 확장 읽기인 [7가지 주요 Vibe Coding 온라인 플랫폼 실제 비교](../../stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial.md)를 참고하세요.
|
||||
:::
|
||||
|
||||
### 2.2 대화식 프로그래밍은 무엇을 할 수 있고 무엇을 할 수 없을까
|
||||
|
||||
이 절은 하나의 구체적인 문제에 집중합니다. 대화식 AI에만 의존하고 코드를 전혀 쓰지 않을 때, 그것이 일을 어디까지 밀고 갈 수 있을까요?
|
||||
경험적으로 비교적 안정적인 결론은 이렇습니다. AI는 “작지만 완전한” 것을 완성하도록 도울 수 있습니다. 하지만 “어느 정도까지 하면 충분한가”는 여전히 당신이 각 단계의 세부 절차를 직접 결정해야 합니다.
|
||||
|
||||
#### “작고 명확한” 애플리케이션에 더 강하다
|
||||
|
||||
앞의 스네이크 예시에서 이미 전형적인 패턴을 보았습니다.
|
||||
인터페이스와 상호작용을 분명히 말할 수 있다면, AI는 보통 몇 번의 대화 안에 열 수 있고, 클릭할 수 있고, 플레이할 수 있는 완전한 웹페이지를 조립할 수 있습니다.
|
||||
|
||||
이런 작업에는 보통 몇 가지 공통 특징이 있습니다.
|
||||
|
||||
- 범위가 명확함: 한 페이지 웹페이지, 간단한 내부 도구, 작은 플레이 방식
|
||||
- 결과가 보임: 브라우저에서 예상대로 동작하는지 즉시 검증할 수 있음
|
||||
- 오류 수정이 직접적임: 문제를 발견한 뒤 후속 대화에서 구체적인 현상을 지적하고 수정을 요청할 수 있음. 오류를 복사해 그대로 붙여 넣거나, 스크린샷을 붙여 넣어 AI가 수정하게 할 수 있음
|
||||
|
||||
이 경계 안에서 대화식 AI는 실행력이 꽤 괜찮은 “보조 개발자”로 볼 수 있습니다. 매 라운드마다 자연어로 요구사항을 세분화하고 수정하기만 하면, 빠르게 사용할 수 있는 프로토타입을 얻을 수 있습니다.
|
||||
|
||||
**AI가 독립적으로 작은 프로젝트를 완성할 성공률:**
|
||||
<el-progress :percentage="90" :stroke-width="15" status="success" striped striped-flow />
|
||||
|
||||
#### 대형 프로젝트에는 “프로세스 관점”이 필요하다
|
||||
|
||||
작고 명확한 범위를 벗어나면, 몇 번의 대화만으로 AI가 복잡한 시스템을 처음부터 끝까지 완성해 주길 기대하는 것은 곧 한계에 부딪힙니다. 대형 프로젝트는 보통 백엔드를 연결하고, 데이터베이스를 붙이고, 서드파티 서비스를 통합해야 하며, 권한, 보안, 동시성, 다수의 비즈니스 규칙도 얽힙니다. 목표는 한 페이지 웹페이지가 아니라 기존 비즈니스와 깊게 연결된 전체 시스템을 납품하는 것입니다.
|
||||
|
||||
이 경우 더 합리적인 방법은 모든 요구사항을 한꺼번에 AI에게 던지는 것이 아니라, 먼저 명확한 전체 프로세스를 정리하는 것입니다. 핵심 단계가 무엇인지, 각 단계의 입력과 출력 및 상태 변화가 무엇인지, 어떤 지점이 성능과 보안에 가장 민감한지를 파악합니다. 그런 다음 이 흐름도를 바탕으로 상대적으로 독립적인 부분을 분해해 대화식 AI에게 인터페이스, 모듈, 스크립트, 테스트를 생성하게 합니다.
|
||||
|
||||
현재 능력으로 보면 AI는 작은 단계 하나하나를 가속하는 데 더 강합니다. 어떻게 단계를 나누고 어떻게 연결할지는 당신(또는 당신의 팀)이 결정해야 하며, 최종 아키텍처 설계, 시스템 통합, 운영 유지도 책임져야 합니다.
|
||||
|
||||
#### 쓸 수 있는 것과 사용할 만한 것의 차이
|
||||
|
||||
겉으로 보면 AI는 무엇이든 쓸 수 있을 것 같습니다. 하지만 이것들이 실제로 쓸 수 있는지, 어느 정도까지 쓸 수 있는지, 우리는 어떻게 구분해야 할까요?
|
||||
|
||||
참고할 만한 경험칙은 다음과 같습니다.
|
||||
|
||||
::: warning ⚠️ 적합한 상황 가이드
|
||||
|
||||
- **프로토타입 / Demo / 내부 자사용 도구**: 첫 번째 버전을 AI에게 맡기고, 이후 직접 세부 사항을 반복 개선하기에 매우 적합합니다.
|
||||
- **실제 사용자를 대상으로 하는 대형 제품**: 보통 엔지니어가 아키텍처, 추상화, 성능, 유지보수에 장기적으로 투입되어야 합니다.
|
||||
- **강한 보안 / 강한 규정 준수 시스템(예: 결제, 리스크 관리, 의료 등)**: 현재 단계에서는 “생성한 뒤 바로 배포”해서는 안 되며, 엄격한 검토와 테스트 절차를 반드시 도입해야 합니다.
|
||||
:::
|
||||
|
||||
현재 당신은 AI를 효율적인 Demo 및 자사용 도구 파트너로 비교적 안심하고 볼 수 있습니다.
|
||||
더 많이 테스트하고, 더 많이 반복하며, “여기가 틀렸어. 고치고 이유를 설명해 줘”라고 몇 번 더 묻는다면, 프로토타입과 내부 도구 수준에서는 전체 품질이 대체로 충분하고 실천 가치도 있습니다.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: '곤경과 기회', description: '일반인을 위한 프로그래밍의 새 가능성' },
|
||||
{ title: '능력 첫 탐색', description: '60초 초고속 개발 경험' },
|
||||
{ title: '네이티브 실습', description: 'AI 네이티브 스네이크 만들기' },
|
||||
{ title: '확장 창작', description: '하나를 배워 여러 게임 만들기' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 3. 실습: 당신의 첫 번째 AI 네이티브 애플리케이션
|
||||
|
||||
다시 실습 부분으로 돌아갑시다. 앞부분에서 우리는 AI로 플레이 가능한 스네이크 프로토타입을 빠르게 만들었고, AI가 무엇을 할 수 있고 무엇을 할 수 없는지도 대략 알게 되었습니다. 이제 가장 기초적인 **vibe coding** 기술을 사용해 **현대판** AI 스네이크 게임을 만드는 법을 배웁니다. 뱀이 콩이 아니라 문자와 단어를 먹게 만들 것입니다. 마지막에는 게임이 먹은 문자와 단어를 바탕으로 시를 하나 생성하고 그림도 하나 그리게 합니다.
|
||||
이 실제 사례를 통해 새로운 프로그래밍 방식의 핵심 이념을 이해할 수 있습니다. 자연어로 요구사항을 명확하게 표현하는 법입니다.
|
||||
|
||||
### 3.1 AI 네이티브 스네이크
|
||||
|
||||
처음에는 가장 간단한 방식으로 대형 모델과 대화할 수 있습니다. 이렇게 하면 제품 프로토타입을 빠르게 얻을 수 있습니다. 채팅창에 바로 다음을 입력해 볼 수 있습니다.
|
||||
|
||||
> **💡 예시 프롬프트:** 스네이크 게임을 만들어줘
|
||||
>
|
||||
> 
|
||||
|
||||
> **💡 예시 프롬프트:** 스네이크 게임을 만들어줘. 다음을 지원해야 해.
|
||||
>
|
||||
> 1. 서로 다른 단어를 먹을 수 있고, 그 단어들은 상자 안에 수집되어야 해.
|
||||
> 
|
||||
|
||||
> **💡 예시 프롬프트:** 스네이크 게임을 만들어줘. 다음을 지원해야 해.
|
||||
>
|
||||
> 1. 서로 다른 단어를 먹을 수 있고, 그 단어들은 상자 안에 수집되어야 해.
|
||||
> 2. 뱀이 단어 8개를 먹으면, llm이 이 단어들을 바탕으로 시를 만들어야 하고, 필요에 따라 이 시를 다시 섞을 수 있어야 해.
|
||||
> 3. 시가 완성되면, 다음 단계에서 이 시를 바탕으로 이미지를 자동으로 만들어야 해.
|
||||
>
|
||||
> 
|
||||
|
||||
개발 과정에서는 기대만큼 좋지 않은 문제를 만날 수 있습니다. 예를 들어 버튼을 클릭해도 아무 반응이 없거나, 기능을 사용할 때 오류가 나거나, 기능이 예상대로 작동하지 않거나, 프론트엔드 페이지가 기대한 디자인과 맞지 않을 수 있습니다.
|
||||
|
||||
이런 상황에서는 모델에게 더 질문하여 예상치 못한 문제를 수정하도록 도와야 합니다.
|
||||
|
||||
|
||||
|
||||
### 3.2 게임에 새 기능 추가하기
|
||||
|
||||
기본 기능을 완성한 뒤에는 프로그램에 새로운 재미를 추가해 볼 수 있습니다! 뱀이 단어나 문자를 먹는 과정이 조금 지루하다고 느껴진다면, 뱀이 서로 다른 색상의 단어를 먹고 그에 따라 뱀의 색도 바뀌게 할 수 있습니다.
|
||||
|
||||
“먹는” 과정에 특수 효과를 추가할 수도 있고, 특수 효과를 발동하는 마법 단어를 도입할 수도 있습니다. 예를 들어 뱀의 속도나 크기를 증가시키는 단어입니다. 또 다른 아이디어는 뱀이 단어를 8개 먹을 때까지 기다리는 대신, 단어를 하나 먹을 때마다 모델이 시와 그림을 생성하게 하는 것입니다.
|
||||
|
||||
이것들이 어렵게 느껴진다면 언어 모델에게 직접 도움을 요청할 수 있습니다! 모델은 창의적인 제안을 제공해 게임을 더 흥미롭게 만들 수 있습니다. 한번 시도해 보세요!
|
||||
|
||||
```
|
||||
1. "단어로 세계 잠금 해제" 메커니즘
|
||||
뱀이 단어 하나를 먹을 때마다 LLM이 해당 단어를 시적으로 연상합니다. 예: “나무” → “숲”, “초록 그늘”. 이미지 모델은 즉시 그 단어를 위한 작은 예술품을 생성합니다. 이 이미지들은 점차 하나의 독특한, 플레이어가 만든 파노라마로 조립되므로, 플레이어는 매번 플레이할 때 “그림을 그리고 시를 쓰는” 셈입니다.
|
||||
|
||||
2. "시 퍼즐" 플레이 방식
|
||||
뱀이 먹는 각 단어는 LLM이 짧은 시구를 생성하게 하고, 이미지 모델은 삽화를 생성합니다. 이 시구와 이미지는 퍼즐처럼 결합되어 라운드가 끝날 때 AI와 협업한 시와 그림을 형성합니다.
|
||||
|
||||
3. "마법 단어" & "스토리 분기"
|
||||
특수한 “마법 단어”(예: “바람”, “밤”, “꿈”)는 LLM이 시를 생성하게 할 뿐 아니라 장면의 정서나 주제를 바꿉니다. 생성 이미지의 스타일을 밤, 폭풍우, 꿈같은 분위기로 전환합니다.
|
||||
분기 스토리: LLM은 시작 시 하나의 주제나 수수께끼를 제공합니다. 예: “가을의 기억”. 플레이어의 단어 선택은 이야기와 시의 진화에 직접 영향을 미치며, 이미지 모델은 배경과 시각 효과를 실시간으로 업데이트합니다.
|
||||
|
||||
4. "실시간 상호작용 생성"
|
||||
각 단어 이후 LLM은 한 줄의 대화나 묘사를 생성합니다. 게임 속 NPC가 플레이어에게 “말”하거나, 환경이 그에 따라 바뀔 수 있습니다.
|
||||
이미지 모델 덕분에 뱀의 외형이나 게임 속 장애물도 먹은 단어에 따라 시각적으로 달라질 수 있습니다.
|
||||
|
||||
5. "창작 & 공유"
|
||||
플레이어는 세션이 끝날 때 AI가 창작한 시와 이미지를 저장하고 공유하여, 자신만의 독특한 “AI 협업” 결과물을 자랑할 수 있습니다.
|
||||
“가장 아름다운 시+예술”, “가장 창의적인 단어 조합” 같은 순위표를 통해 재플레이와 창의성을 장려합니다.
|
||||
|
||||
6. "문장별 스네이크" 도전
|
||||
역방향 모드: LLM이 시 한 줄이나 수수께끼를 주면, 플레이어는 뱀을 이끌어 순서대로 단어를 먹게 하여 문장을 재구성해야 합니다. 잘못된 단어를 먹으면 이미지 생성 모델이 재미있거나 예술적인 결과를 발동합니다.
|
||||
|
||||
7. "테마 스테이지" & "스타일 선택"
|
||||
게임 시작 시 플레이어는 하나의 테마를 선택합니다. 예: “동화”, “SF”, “당시”. LLM과 이미지 모델은 단어 선택, 시 스타일, 시각 효과를 모두 조정해 테마와 맞추므로 매번 새롭게 느껴집니다.
|
||||
|
||||
8. "현장 공동 창작"
|
||||
특수 단어를 먹었을 때 LLM은 플레이어에게 문구를 입력하거나 스타일을 선택하라고 요청할 수 있습니다. 그런 다음 AI가 이에 맞는 시구와 삽화를 생성하여 진정한 인간-AI 공동 창작이 되게 합니다.
|
||||
|
||||
9. "AI 이스터에그 & 업적"
|
||||
어떤 단어 조합은 LLM이 특수 주제나 내부 농담으로 인식합니다. 예: “달”, “계수나무꽃”, “강가”. 그러면 희귀한 시구와 삽화가 발동되어 탐색을 보상합니다.
|
||||
|
||||
10. "성장하는 이야기"
|
||||
뱀이 성장함에 따라 LLM은 연속적인 이야기시를 생성하고, 이미지 모델은 매끄러운 긴 두루마리나 파노라마를 만듭니다. 그래서 플레이어는 동시에 “쓰기, 그리기, 플레이하기”를 하게 됩니다.
|
||||
```
|
||||
|
||||
또한 LLM에게 프로젝트 수준의 프롬프트를 직접 생성해 달라고 요청할 수도 있습니다. 지난 절에서는 스네이크 게임의 프롬프트만 우리가 직접 작성했습니다. 이제 대형 모델에게 전체 프레임워크와 구현 경로가 포함된 프롬프트를 생성하게 해 봅시다. z.ai로 바로 생성할 수 있습니다.
|
||||
|
||||
더 좋은 프롬프트를 작성하는 법을 배우고 싶다면 [프롬프트 엔지니어링 부록](/ko-kr/appendix/8-artificial-intelligence/prompt-engineering)을 확인하세요.
|
||||
|
||||
> AI가 웹 스네이크 게임을 생성하게 하고 싶습니다. 더 완성도 높은 프롬프트가 필요합니다. 생성 결과가 더 인상적이고 재미있어야 합니다. 이에 맞는 프롬프트를 생성해 주세요. 현재 목표는 다음과 같습니다. 서로 다른 단어를 먹으면 시를 생성하는 기능이 있는 스네이크 게임을 만들고, 이미지 생성 모듈도 포함해야 합니다.
|
||||
|
||||
z.ai의 답변은 다음과 같을 것입니다.
|
||||
|
||||
|
||||
|
||||
이 프롬프트를 사용해 풀스택 개발 모드에서 프로젝트를 다시 생성할 수 있습니다.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: '곤경과 기회', description: '일반인을 위한 프로그래밍의 새 가능성' },
|
||||
{ title: '능력 첫 탐색', description: '60초 초고속 개발 경험' },
|
||||
{ title: '네이티브 실습', description: 'AI 네이티브 스네이크 만들기' },
|
||||
{ title: '확장 창작', description: '하나를 배워 여러 게임 만들기' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
### 3.3 다른 미니게임 만들어 보기
|
||||
|
||||
스네이크(게임) 외에도 상상력을 마음껏 펼칠 수 있습니다.
|
||||
|
||||
우리가 만들고 싶은 무엇이든 만들어 보세요. 심지어 모든 것을 망쳐 보는 시도도 해 보세요! 그리고 처음부터 다시 시작하면 됩니다!
|
||||
|
||||
```
|
||||
1. AI 아트 갤러리 플랫폼
|
||||
설명: AI 생성 예술 작품을 전시하는 온라인 갤러리. 사용자는 AI 예술 작품을 업로드하고 공유하고 댓글을 달 수 있습니다.
|
||||
기능: 사용자 계정 시스템, 예술 작품 업로드와 전시, 평점 시스템, 카테고리 탐색, AI 생성 도구 통합.
|
||||
기술 포인트: React/Vue 프론트엔드, Node.js 백엔드, MongoDB 데이터베이스, AI API 통합.
|
||||
|
||||
2. 레트로 게임 아카이브
|
||||
설명: 고전 게임에 경의를 표하는 웹사이트. 게임 역사, 플레이 가이드, 온라인으로 플레이 가능한 레트로 게임을 포함합니다.
|
||||
기능: 게임 데이터베이스, 타임라인 전시, 온라인 에뮬레이터, 사용자 댓글, 게임 컬렉션 기능.
|
||||
기술 포인트: 반응형 디자인, WebGL/Canvas 게임 구현, RESTful API, 사용자 인증 시스템.
|
||||
|
||||
3. 지속 가능한 생활 추적기
|
||||
설명: 친환경 팁과 커뮤니티 챌린지를 통해 사용자가 탄소 발자국을 추적하고 줄이도록 돕는 웹사이트.
|
||||
기능: 개인 탄소 발자국 계산기, 목표 설정, 진행 상황 추적, 커뮤니티 챌린지, 친환경 지식 베이스.
|
||||
기술 포인트: 데이터 시각화, 모바일 최적화, 소셜 기능, 푸시 알림.
|
||||
|
||||
4. 가상 주방 어시스턴트
|
||||
설명: AI 기반 요리 안내 플랫폼. 개인화된 레시피 추천과 단계별 조리 설명을 제공합니다.
|
||||
기능: 레시피 데이터베이스, 식재료 인식, 개인화 추천, 조리 타이머, 영양 분석.
|
||||
기술 포인트: 이미지 인식 API, 머신러닝 추천 시스템, 음성 제어, 실시간 영상 안내.
|
||||
|
||||
5. 언더그라운드 음악 발견 플랫폼
|
||||
설명: 독립 및 신진 아티스트에 집중한 음악 스트리밍 플랫폼. 독특한 발견 경험을 제공합니다.
|
||||
기능: 음악 스트리밍, 아티스트 프로필, 개인화 추천, 플레이리스트 생성, 커뮤니티 댓글.
|
||||
기술 포인트: 오디오 스트림 처리, 추천 알고리즘, 소셜 기능, 음악 시각화.
|
||||
|
||||
6. 미니멀 작업 관리 시스템
|
||||
설명: 명상적인 미학을 가진 작업 관리 도구. 단순하고 효율적인 작업 정리에 집중합니다.
|
||||
기능: 작업 생성과 분류, 우선순위 설정, 진행 상황 추적, 팀 협업, 데이터 분석.
|
||||
기술 포인트: 미니멀 UI 디자인, 드래그 앤 드롭 기능, 실시간 동기화, 크로스 플랫폼 호환성.
|
||||
|
||||
7. SF 글쓰기 공방
|
||||
설명: SF 작가를 위한 창작 도구와 영감을 제공하는 플랫폼. 세계관 구축 보조와 캐릭터 개발 도구를 포함합니다.
|
||||
기능: 이야기 구조 도구, 캐릭터 프로필, 세계관 구축 템플릿, 글쓰기 통계, 커뮤니티 피드백.
|
||||
기술 포인트: 리치 텍스트 에디터, 데이터 시각화, 협업 편집, AI 보조 창작.
|
||||
|
||||
8. 개인 지식 그래프
|
||||
설명: 사용자가 개인 지식 네트워크를 구축하고, 다양한 생각과 정보를 시각화하고 연결하도록 돕는 도구.
|
||||
기능: 노드 생성과 연결, 태그 시스템, 검색 기능, 가져오기/내보내기 도구, 시각화 차트.
|
||||
기술 포인트: 그래프 데이터베이스, 데이터 시각화 알고리즘, Markdown 지원, 여러 기기 동기화.
|
||||
|
||||
9. 가상 식물원
|
||||
설명: 상호작용형 식물 백과사전. 사용자는 식물 세계를 탐색하고 가상 정원을 만들 수 있습니다.
|
||||
기능: 식물 데이터베이스, 3D 식물 모델, 성장 시뮬레이션, 원예 가이드, 커뮤니티 전시.
|
||||
기술 포인트: 3D 렌더링, 계절 변화 시뮬레이션, AR 통합, 식물 인식 API.
|
||||
|
||||
10. 프로그래밍 챌린지 아레나
|
||||
설명: 프로그래머를 위한 온라인 경기 플랫폼. 다양한 난이도의 프로그래밍 챌린지를 제공합니다.
|
||||
기능: 챌린지 문제, 코드 에디터, 자동 평가, 순위표, 학습 경로.
|
||||
기술 포인트: 코드 샌드박스 환경, 실시간 평가 시스템, 알고리즘 시각화, 소셜 학습 기능.
|
||||
```
|
||||
|
||||
그리고... 게임을 좋아한다면, 함께 게임을 만들어 봅시다!
|
||||
|
||||
```
|
||||
1. 3D 오픈월드 RPG
|
||||
설명: 광활한 오픈월드, 퀘스트, 캐릭터 성장이 있는 판타지 RPG.
|
||||
기능: 낮밤 순환, 동적 날씨, 스킬 트리, 멀티플레이 협동, 제작 시스템.
|
||||
기술 포인트: 3D 렌더링을 위한 Three.js 또는 Babylon.js, 서버 측 게임 로직, 캐릭터 커스터마이징, 저장 시스템.
|
||||
|
||||
2. 1인칭 슈팅(FPS) 아레나
|
||||
설명: 다양한 게임 모드와 맵이 있는 빠른 템포의 멀티플레이 FPS.
|
||||
기능: 팀 데스매치, 깃발 뺏기, 무기 커스터마이징, 랭크전.
|
||||
기술 포인트: 3D 그래픽을 위한 WebGL/Three.js, 멀티플레이 네트워크 코드, 명중 판정, 음성 채팅.
|
||||
|
||||
3. AI 체스와 멀티플레이 게임
|
||||
설명: AI 상대와 온라인 대전 기능을 가진 완전한 체스 플랫폼.
|
||||
기능: AI 난이도 단계, 엔드게임 챌린지, 토너먼트 모드, 리플레이 분석.
|
||||
기술 포인트: 체스 로직 라이브러리, 실시간 대전을 위한 WebSocket, ELO 랭킹 시스템, 부정행위 방지.
|
||||
|
||||
4. 마작 온라인 멀티플레이 게임
|
||||
설명: 온라인 멀티플레이와 점수 계산 기능이 있는 전통 마작 게임.
|
||||
기능: 여러 규칙 세트, 비공개 방, 랭킹 시스템, 리플레이 기능.
|
||||
기술 포인트: 패 매칭 로직, 실시간 멀티플레이, 로비 시스템, 점수 추적.
|
||||
|
||||
5. 턴제 전략 게임
|
||||
설명: 격자 전투와 유닛 관리가 있는 전술 전략 게임.
|
||||
기능: 캠페인 모드, 스커미시, 유닛 업그레이드, 전장의 안개, 멀티플레이 대전.
|
||||
기술 포인트: 격자 이동 시스템, AI 의사결정, 턴 동기화, 저장/불러오기 시스템.
|
||||
|
||||
6. 타임 트라이얼 레이싱 게임
|
||||
설명: 시간 기록과 트랙 기록에 집중한 3D 레이싱 게임.
|
||||
기능: 여러 트랙, 자동차 커스터마이징, 고스트 리플레이, 순위표.
|
||||
기술 포인트: 3D 자동차 물리, 트랙 에디터, 리플레이 시스템, 온라인 순위표.
|
||||
|
||||
7. 카드 대전 게임(덱 빌딩)
|
||||
설명: 플레이어가 덱을 구성하고 상대와 싸우는 전략 카드 게임.
|
||||
기능: 카드 수집, 덱 구성, 랭크전, 시즌 이벤트.
|
||||
기술 포인트: 카드 게임 로직, 매칭 시스템, AI 상대, 카드 애니메이션.
|
||||
|
||||
8. 배틀로얄(탑다운 2D)
|
||||
설명: 축소되는 게임 구역과 전리품 메커니즘이 있는 탑다운 2D 배틀로얄 게임.
|
||||
기능: 솔로 및 스쿼드 모드, 다양한 무기, 게임 내 이벤트, 순위표.
|
||||
기술 포인트: 실시간 멀티플레이, 구역 축소 로직, 전리품 생성 시스템, 매칭.
|
||||
|
||||
9. 공포 생존 게임(1인칭)
|
||||
설명: 자원 관리와 탈출 메커니즘이 있는 1인칭 공포 게임.
|
||||
기능: 분위기 있는 환경, 퍼즐, 적 AI, 다중 결말.
|
||||
기술 포인트: 동적 조명, 사운드 디자인, 적 경로 탐색, 저장 시스템.
|
||||
|
||||
10. 음악 리듬 게임(3D)
|
||||
설명: 플레이어가 음악 박자에 맞춰 노트를 치는 3D 리듬 게임.
|
||||
기능: 여러 난이도 단계, 트랙 에디터, 사용자 지정 곡 지원, 순위표.
|
||||
기술 포인트: 오디오 분석, 비트 동기화, 3D 노트 트랙, 입력 타이밍 판정.
|
||||
```
|
||||
|
||||
## 📚 과제
|
||||
|
||||
<el-card id="assignment-card" shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">🎯 이 장의 과제: 첫 번째 AI 네이티브 미니게임 묶음 완성하기</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
이 절에서 당신은 “대화로 스네이크 생성하기”부터 “AI 네이티브 미니게임 설계 사고 이해하기”까지의 전체 흐름을 단계별로 경험했습니다. 아래 과제는 이러한 이해를 진짜 자신의 능력으로 바꾸도록 돕습니다.
|
||||
</p>
|
||||
|
||||
<ol>
|
||||
<li>
|
||||
<strong>AI 네이티브 스네이크 게임 완전히 재현하기</strong>
|
||||
<ul>
|
||||
<li>최소한 다음을 구현하세요. 뱀이 움직일 수 있고, “먹이”를 먹으면 길이와 점수가 변하며, 벽이나 자기 몸에 부딪히면 종료되어야 합니다.</li>
|
||||
<li>재현 과정에서 오류 현상 + 오류 정보 + 핵심 코드 조각을 한 번에 AI에게 던지고, “초보자 모드”로 수정해 달라고 요청하는 연습을 하세요.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>(선택) 직접 AI 네이티브 미니게임 또는 Demo 1개 만들기</strong>
|
||||
<ul>
|
||||
<li>문자, 이미지, 음악, 리듬 등을 중심으로 한 어떤 가벼운 플레이 방식도 가능합니다. 예: “단어를 먹고 시 쓰기”, “리듬 클릭”, “생성형 러닝 게임” 등.</li>
|
||||
<li>중요한 것은 화면이 얼마나 화려한지가 아니라, AI가 여기서 구체적으로 어떤 도움을 주었는지, 그리고 어떤 “사람이 직접 하기 어렵거나 번거로운” 부분을 해결했는지 분명히 말할 수 있는 것입니다.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<p>
|
||||
이것이 전체 튜토리얼입니다! 모든 내용을 완료하고 자신만의 스네이크 게임을 만들려면 <strong>4시간</strong>이 필요할 수 있습니다. 서두르지 마세요. 탐색하고, 실험하고, 이 과정을 즐기세요. 진행 중 이해하기 어려운 개념을 만나면 아래 부록의 관련 부분을 바로 확인하는 것을 추천합니다.
|
||||
</p>
|
||||
</el-card>
|
||||
|
||||
## 부록
|
||||
|
||||
<el-card id="appendix-nav" shadow="hover" style="margin-top: 24px; margin-bottom: 24px; border-left: 5px solid #67C23A;">
|
||||
<div style="font-weight: bold; margin-bottom: 8px;">부록 내비게이션</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
여기에는 이 장과 관련된 몇 가지 기초 개념을 정리했습니다. 학습 과정에서 “프론트엔드가 무엇인가”, “Vibe Coding이 정확히 무엇을 뜻하는가” 같은 문제를 만나면 언제든 여기로 돌아와 확인할 수 있습니다.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-1" style="text-decoration: none; color: inherit;"><b>부록 1: 프론트엔드 개발 지식이 필요한가요?</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">전체 애플리케이션에서 프론트엔드가 차지하는 위치를 이해하고, 어떤 부분이 “보이는” 부분인지 알기.</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-2" style="text-decoration: none; color: inherit;"><b>부록 2: Vibe Coding은 대체 무엇인가</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">“대화식 개발”의 핵심 사고방식을 이해하고, AI와 어떻게 협력해야 하는지 알기.</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="16" style="margin-top: 10px;">
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-3" style="text-decoration: none; color: inherit;"><b>부록 3: 모델 컨텍스트</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">“컨텍스트 길이”처럼 자주 들리지만 쉽게 헷갈리는 개념을 이해하기.</span>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<a href="#appendix-4" style="text-decoration: none; color: inherit;"><b>부록 4: 지시 따르기 능력</b></a><br/>
|
||||
<span style="font-size: 12px; color: #909399">모델이 때때로 왜 “말을 못 알아듣는지”, 그리고 어떻게 더 분명히 써야 하는지 이해하기.</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="margin-top: 12px; font-size: 12px; color: #909399;">
|
||||
작은 팁: Ctrl/⌘+F로 키워드를 검색하거나, 이해되지 않는 단락을 AI에게 복사해 주고 “완전 초보자도 이해할 수 있는 방식”으로 다시 설명해 달라고 요청할 수 있습니다.
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
## <span id="appendix-1">[부록 1: 프론트엔드 개발 지식이 필요한가요?](#appendix-nav)</span>
|
||||
|
||||
::: tip 💡 한 문장 요약
|
||||
코드를 쓸 줄 몰라도 됩니다. 하지만 기본 개념을 이해하면 AI에게 요구사항을 더 잘 설명할 수 있습니다.
|
||||
:::
|
||||
|
||||
<el-row :gutter="16" style="margin: 20px 0;">
|
||||
<el-col :span="12" :xs="24" style="margin-bottom: 16px;">
|
||||
<el-card shadow="hover" style="border-radius: 12px; height: 100%;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">👁️</span>
|
||||
<span style="font-weight: bold;">프론트엔드</span>
|
||||
<el-tag type="success" size="small">보임</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<div style="color: #606266; line-height: 1.8;">
|
||||
사용자가 <strong>볼 수 있고, 클릭할 수 있는</strong> 모든 내용
|
||||
<ul style="margin: 12px 0; padding-left: 20px;">
|
||||
<li>웹페이지 제목, 텍스트, 이미지</li>
|
||||
<li>버튼, 입력창, 드롭다운 메뉴</li>
|
||||
<li>게임 화면, 애니메이션 효과</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12" :xs="24" style="margin-bottom: 16px;">
|
||||
<el-card shadow="hover" style="border-radius: 12px; height: 100%;">
|
||||
<template #header>
|
||||
<div style="display: flex; align-items: center; gap: 8px;">
|
||||
<span style="font-size: 20px;">⚙️</span>
|
||||
<span style="font-weight: bold;">백엔드</span>
|
||||
<el-tag type="info" size="small">보이지 않음</el-tag>
|
||||
</div>
|
||||
</template>
|
||||
<div style="color: #606266; line-height: 1.8;">
|
||||
서버에서 실행되는 데이터 처리
|
||||
<ul style="margin: 12px 0; padding-left: 20px;">
|
||||
<li>사용자 점수 저장</li>
|
||||
<li>로그인 계정 검증</li>
|
||||
<li>스테이지 콘텐츠 배정</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
### 프론트엔드 3종 세트
|
||||
|
||||
브라우저는 세 가지 “코드”를 통해 페이지를 구성합니다.
|
||||
|
||||
<el-tabs type="border-card" style="margin: 20px 0;">
|
||||
<el-tab-pane label="🏗️ HTML - 뼈대">
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>역할:</strong> 페이지 위에 <strong>어떤</strong> 요소가 있는지 정의합니다</p>
|
||||
<p><strong>비유:</strong> 집의 구조 도면(벽, 문, 창문이 어디에 있는지)</p>
|
||||
<el-card style="background: #f5f7fa; margin-top: 12px;">
|
||||
<pre style="margin: 0;"><code><button>나를 클릭</button>
|
||||
<h1>제목</h1>
|
||||
<img src="photo.png"></code></pre>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="🎨 CSS - 스타일">
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>역할:</strong> 요소가 <strong>어떻게 생겼는지</strong> 제어합니다</p>
|
||||
<p><strong>비유:</strong> 집의 인테리어(색상, 재질, 배치)</p>
|
||||
<el-card style="background: #f5f7fa; margin-top: 12px;">
|
||||
<pre style="margin: 0;"><code>button {
|
||||
background: blue;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
}</code></pre>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="⚡ JavaScript - 동작">
|
||||
<div style="padding: 10px;">
|
||||
<p><strong>역할:</strong> 페이지를 <strong>움직이게</strong> 합니다</p>
|
||||
<p><strong>비유:</strong> 집의 전기 스위치(클릭 후의 반응)</p>
|
||||
<el-card style="background: #f5f7fa; margin-top: 12px;">
|
||||
<pre style="margin: 0;"><code>button.onclick = () => {
|
||||
alert('클릭했습니다!')
|
||||
}</code></pre>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
### 코드는 어떻게 페이지가 될까?
|
||||
|
||||
웹페이지를 열면 브라우저는 세 가지 코드를 순서대로 처리합니다.
|
||||
|
||||
**1. HTML - 페이지 구조 정의**
|
||||
브라우저는 먼저 HTML을 해석하여 페이지 위에 어떤 요소(제목, 문단, 이미지, 버튼 등)가 있는지, 그리고 그들의 계층 관계가 어떤지 이해합니다.
|
||||
|
||||
**2. CSS - 스타일 적용**
|
||||
그다음 브라우저는 CSS 규칙에 따라 이 요소들에 스타일을 추가합니다. 색상, 크기, 위치, 간격 등을 적용해 페이지를 보기 좋게 만듭니다.
|
||||
|
||||
**3. JavaScript - 상호작용 추가**
|
||||
마지막으로 JavaScript 코드를 실행해 페이지를 “움직이게” 합니다. 클릭 응답, 폼 제출, 애니메이션 재생 등을 처리합니다.
|
||||
|
||||
**4. 페이지 표시**
|
||||
세 가지가 함께 작동한 결과가 최종적으로 보이는 웹페이지입니다.
|
||||
|
||||
### 현대 프론트엔드 프레임워크: HTML에서 React/Vue까지
|
||||
|
||||
앞서 소개한 HTML, CSS, JavaScript는 프론트엔드 개발의 “3종 세트”이며, 모든 웹페이지의 기초입니다. 하지만 페이지가 복잡해지면 이 3종 세트만으로 직접 개발할 때 어려움이 생깁니다. 코드 유지보수가 어렵고, 반복 작업이 많으며, 데이터 동기화가 번거롭습니다.
|
||||
|
||||
**현대 프론트엔드 프레임워크**(예: React, Vue, Angular)는 HTML/CSS/JS 위에 구축되어 개발을 더 효율적으로 만듭니다.
|
||||
|
||||
**1. HTML/CSS/JS(기초 단계)**
|
||||
페이지 요소를 직접 조작하며 간단한 페이지에 적합합니다. 하지만 코드량이 많아지면 모든 로직이 뒤섞여 유지보수가 어려워집니다.
|
||||
|
||||
**2. jQuery(과도기 단계)**
|
||||
DOM 조작을 단순화해 코드를 더 간결하게 만들었습니다. 하지만 여전히 페이지 상태를 수동으로 관리해야 하며, 데이터가 변할 때 직접 해당 요소를 찾아 업데이트해야 합니다.
|
||||
|
||||
**3. React/Vue(현대 단계)**
|
||||
컴포넌트화와 상태 주도 설계를 채택합니다.
|
||||
- **컴포넌트화**: 페이지를 독립적이고 재사용 가능한 모듈로 나눕니다. 예: 버튼, 카드, 내비게이션 바.
|
||||
- **상태 주도**: 데이터가 변하면 프레임워크가 해당 인터페이스를 자동으로 업데이트합니다. 수동 조작이 필요 없습니다.
|
||||
|
||||
::: tip 💡 간단한 이해
|
||||
- **HTML/CSS/JS** = 기초 재료(벽돌, 시멘트, 철근)
|
||||
- **React/Vue** = 건축 프레임워크(집을 짓기 위한 규범과 도구 제공)
|
||||
|
||||
AI 보조 프로그래밍 시대에는 프레임워크의 모든 세부 사항을 깊게 익힐 필요는 없습니다. 기본 개념만 이해하면 자연어 설명을 통해 AI가 코드를 생성하게 할 수 있습니다.
|
||||
:::
|
||||
|
||||
### Vibe Coding에서는
|
||||
|
||||
**핵심 요점: 코드를 쓸 필요는 없고, 설명할 줄 알면 됩니다.**
|
||||
|
||||
프론트엔드 개념을 이해한 뒤에는 AI에게 이렇게 요구사항을 설명할 수 있습니다.
|
||||
|
||||
> "React로 순위표 페이지를 만들어줘. 오른쪽에는 점수 목록을 표시하고, 어떤 행을 클릭하면 아래에 플레이어 상세 정보를 보여 줘. 스타일은 간결하고 모던하게 해줘."
|
||||
|
||||
HTML, CSS, JavaScript 같은 프론트엔드 기초 지식을 더 깊이 이해하고 싶다면 [Web 기초 부록](/ko-kr/appendix/3-browser-and-frontend/javascript-deep-dive)을 확인하세요. 프론트엔드 기술의 발전 역사를 알고 싶다면 [프론트엔드 진화사 부록](/ko-kr/appendix/3-browser-and-frontend/frontend-frameworks)을 확인하세요.
|
||||
|
||||
## <span id="appendix-2">[부록 2: Vibe Coding은 대체 무엇인가](#appendix-nav)</span>
|
||||
|
||||
> 💡 Vibe Coding이란 무엇인가요? 컴퓨터 과학자 [Andrej Karpathy](https://karpathy.ai/)(OpenAI 공동 창립자 중 한 명이자 Tesla 전 AI 책임자)는 2025년 2월 **vibe coding**이라는 용어를 제안했습니다. 이 개념은 LLM에 의존하는 코딩 방법을 가리키며, **프로그래머가 코드를 직접 작성하는 대신 자연어 설명을 제공하여 작동 가능한 코드를 생성할 수 있게 합니다.**
|
||||
|
||||
|
||||
|
||||
문자 그대로 보면 Vibe Coding은 “말로 개발하는 방식”으로 이해할 수 있습니다. 핵심 변화는 다음과 같습니다. 더 이상 코드를 한 줄씩 직접 쓰고, 문법을 찾고, Bug를 고칠 필요가 없습니다. 원하는 것을 자연어로 바로 설명합니다. 예를 들면 다음과 같습니다.
|
||||
|
||||
“휴대폰 번호 입력창과 인증번호 입력창이 있는 로그인 페이지가 필요해.”
|
||||
“로그인에 성공하면 홈으로 이동하고, 오른쪽 위에 사용자 이름을 보여 줘.”
|
||||
“키보드 방향키로 조작할 수 있는 간단한 스네이크 미니게임을 만들어줘.”
|
||||
대형 언어 모델(LLM)은 이런 설명을 실제로 실행 가능한 코드로 자동 번역하고, 대응되는 페이지, 로직, 데이터 구조를 생성합니다. 결과를 확인한 뒤에는 자연어로 수정 의견을 제시합니다. 예를 들어 “버튼을 더 크게 해줘”, “배경을 어두운 색으로 바꿔줘”, “점수 기록을 저장하고 순위표에 보여 줘”라고 말하면 AI가 요구에 따라 계속 구현을 조정합니다.
|
||||
|
||||
이런 방식에서는 먼저 프로그래밍 언어를 배운 뒤 코드를 쓰는 것이 아닙니다. 주요 에너지는 무엇을 만들지 명확히 말하고, 결과를 본 뒤 “어디가 맞지 않는지” 판단하고, 다시 새 수정사항을 제시하는 데 쓰입니다. AI는 이러한 상위 수준의 생각을 구체적인 구현으로 옮겨, 기계적이고 반복적인 코딩 작업을 크게 줄입니다.
|
||||
|
||||
vibe coding에 대한 더 자세한 내용은 여기에서 볼 수 있습니다: [https://www.ibm.com/think/topics/vibe-coding](https://www.ibm.com/think/topics/vibe-coding)
|
||||
|
||||
Karpathy의 공유 내용을 더 보려면 여기에서 확인할 수 있습니다: [https://karpathy.bearblog.dev/blog/](https://karpathy.bearblog.dev/blog/)
|
||||
|
||||
### Vibe Coding 고수인 척하는 법
|
||||
|
||||
실제로 진짜 vibe coding 과정에서는 복잡한 프롬프트를 많이 쓰지 않는 경우가 많습니다. 시작할 때 전체 프로그램을 위해 구체적이고 적당히 복잡한 프롬프트를 제공할 필요는 있을 수 있습니다. 하지만 그 이후의 각 단계에서는 아마 아래와 같은 유형의 프롬프트만 필요할 것입니다.
|
||||
|
||||
```
|
||||
"코드에 bug가 있어. 고쳐줘."
|
||||
"부분 코드 말고, 수정된 전체 코드를 줘."
|
||||
"네 코드가 아직 문제가 있어."
|
||||
"다시 수정하고 수정된 전체 코드를 줘."
|
||||
"방금 전에는 실행됐는데 왜 지금은 안 돼?"
|
||||
"내 뜻을 이해하지 못했어? 원래 코드를 바꾸지 마."
|
||||
"디버그 기능을 추가하지 마."
|
||||
"내가 시키지 않은 일을 하지 마."
|
||||
"내가 구현하라고 한 기능은 어디 있어?"
|
||||
"내 말 못 알아들어?"
|
||||
"나는 함수 하나만 원해."
|
||||
"내가 이전 코드 참고하라고 말했잖아."
|
||||
"불필요한 주석을 추가하지 마."
|
||||
"내 원본 코드의 기본 로직을 수정하지 마."
|
||||
"코드를 수정해 줘."
|
||||
"내 코드를 바탕으로 수정해..."
|
||||
"내 변수명 바꾸지 마!!!"
|
||||
"원래 함수명 바꾸지 마!"
|
||||
"내 변수 함부로 건드리지 마."
|
||||
"추가 기능 넣지 마."
|
||||
"프레임워크만 생성하지 말고 완전한 코드를 생성해."
|
||||
```
|
||||
|
||||
조금 과장처럼 들릴 수 있지만, 실제로 이것들은 우리가 일상 업무에서 사용할 수 있는 프롬프트입니다. 대형 언어 모델의 **컨텍스트 길이 제한** 때문에, 또는 때로는 **지시 따르기 능력**이 그렇게 강하지 않기 때문에, 모델은 대화 앞부분에서 논의한 내용을 잊어버릴 수 있습니다. vibe coding에서는 긴 컨텍스트 모델을 선호하고, 지시 따르기 능력이 강한 모델을 사용하려 합니다. 두 능력의 순위나 지표를 통해 좋은 모델인지 판단할 수 있습니다.
|
||||
|
||||
또는 학습 데이터셋의 스타일 때문에 대형 모델은 그 학습 데이터의 스타일로 답하려는 경향이 있습니다. 예를 들어 어떤 사람은 말투가 매우 진지하고, 어떤 사람은 수식을 많이 붙이며, 어떤 대형 모델은 코드에 많은 주석이나 불필요한 모듈을 추가하는 것을 좋아합니다.
|
||||
|
||||
## <span id="appendix-3">[부록 3: 모델 컨텍스트](#appendix-nav)</span>
|
||||
|
||||
모델 컨텍스트는 AI의 단기 기억으로 이해할 수 있습니다. 현재 한 번의 대화 또는 한 번의 작업에서 모델이 “볼 수 있고” “기억할 수 있는” 모든 텍스트 내용을 뜻합니다. 여기에는 당신이 앞서 입력한 질문, 시스템이 제공한 설명, 관련 자료 등이 포함됩니다.
|
||||
|
||||
바로 이 컨텍스트가 있기 때문에 AI는 당신이 앞의 내용을 이어서 질문하고 있다는 것을 이해할 수 있고, 여러 차례 이어지는 자연스러운 대화를 할 수 있습니다. 컨텍스트가 없다면 당신의 모든 문장은 모델에게 완전히 새로운 질문처럼 보입니다. 이전에 무엇을 말했는지 알 수 없으므로 대화를 이어 갈 수도 없습니다.
|
||||
|
||||
각 모델에는 자신만의 유효 컨텍스트 길이(context window)가 있습니다. 이 길이는 보통 token(대략 “글자와 단어 조각”의 단위로 이해할 수 있음)으로 측정합니다. 현재 주요 모델은 대부분 32k-128k token 사이입니다. 컨텍스트가 길수록 모델이 한 번에 “읽을” 수 있는 내용이 많아집니다. 예를 들어:
|
||||
|
||||
- 긴 논문이나 보고서를 한 번에 읽기
|
||||
- 같은 대화에서 여러 자료와 여러 사례를 인용하기
|
||||
- 앞선 몇 차례의 복잡한 논의 결론을 모델이 기억하게 하기
|
||||
|
||||
입력 내용이 모델의 컨텍스트 제한에 가까워지거나 초과하면, 종종 몇 가지 흔한 현상이 나타납니다.
|
||||
|
||||
- 모델이 앞쪽 긴 텍스트의 세부 사항이나 핵심 정보를 잊기 시작함
|
||||
- 대화가 뒤로 갈수록 화제가 처음 목표에서 점점 벗어남
|
||||
- 같은 자료에 대한 서로 다른 질의응답 사이에서 인용 내용이 일치하지 않음
|
||||
|
||||
이 현상은 모델이 갑자기 “멍청해진” 것이 아니라, 컨텍스트 용량이 꽉 찼거나 거의 찼을 때 생기는 자연스러운 결과입니다.
|
||||
|
||||
실제 사용에서는 컨텍스트가 가능한 한 길기를 바라지만, 동시에 다음도 인식해야 합니다.
|
||||
|
||||
- 컨텍스트가 길수록 사용하는 연산 자원이 늘어납니다.
|
||||
- 대응되는 호출 비용도 함께 증가합니다.
|
||||
|
||||
따라서 AI 애플리케이션을 설계할 때는 모델이 충분히 많이 보게 하는 것과 비용을 통제하고 효율을 높이는 것 사이에서 균형을 잡아야 합니다. 예를 들면 다음과 같습니다.
|
||||
|
||||
- 오래 보존해야 할 정보는 요약한 뒤 모델에게 전달합니다.
|
||||
- 더 이상 필요하지 않은 세부 정보를 매번 원문 그대로 컨텍스트에 반복해서 넣지 않습니다.
|
||||
- 외부 지식 베이스 같은 방식을 사용해 “장기 기억”을 시스템에 맡기고, 모델 컨텍스트 안에 억지로 밀어 넣지 않습니다.
|
||||
|
||||
## <span id="appendix-4">[부록 4: 지시 따르기 능력](#appendix-nav)</span>
|
||||
|
||||
지시 따르기 능력이란 모델이 당신의 지시를 이해한 뒤, 요구사항에 따라 정확하고 완전하게 실행할 수 있는지를 뜻합니다. 여기에는 질문에 답하는 것뿐 아니라, 지정한 형식, 스타일, 단계에 따라 작업을 완료하는 것도 포함됩니다.
|
||||
|
||||
예를 들어 아래는 모두 모델에게 명확한 요구를 담은 지시입니다.
|
||||
|
||||
- 이 글을 세 가지 요점으로 요약하세요.
|
||||
- 정중하고 예의 있는 어조로 답장 이메일을 작성하세요.
|
||||
- 이 단어를 영어로 번역하고 각각 예문을 하나씩 만드세요.
|
||||
- 글에서 작성자, 시간, 주요 사건을 추출하세요.
|
||||
|
||||
지시 따르기 능력이 강한 모델은 보통 다음 특징을 가집니다.
|
||||
|
||||
- 요구한 수량에 맞춰 내용을 출력합니다.
|
||||
예를 들어 세 가지 요점으로 요약하라고 하면 다섯 개를 주지 않습니다.
|
||||
- 지정된 요소를 모두 포함합니다.
|
||||
예를 들어 작성자, 시간, 사건을 추출하라고 하면 그중 어떤 것도 빠뜨리지 않습니다.
|
||||
- 지정한 형식과 어조를 지킵니다.
|
||||
예를 들어 공식적인 어조를 요구하면 지나치게 구어체인 답변을 출력하지 않습니다.
|
||||
- 불필요한 추가 확장을 하지 않습니다.
|
||||
예를 들어 번역과 예문만 요구했는데 관련 없는 긴 설명을 추가하지 않습니다.
|
||||
|
||||
실제 응용에서 강한 지시 따르기 능력은 매우 중요합니다. 이유는 다음과 같습니다.
|
||||
|
||||
- 안정성 향상: 같은 지시를 다른 시간에 여러 번 실행해도 출력 구조와 행동 패턴이 더 일관되고, 임의로 벗어나기 어렵습니다.
|
||||
- 재현성 향상: 어떤 프롬프트를 제품이나 프로세스에 설정했을 때, 모델이 대략 어떻게 응답할지 예측할 수 있어 테스트와 반복 개선이 쉬워집니다.
|
||||
- 시스템 통합 편의성: 모델 출력이 기대 형식에 맞으면 백엔드 프로그램, 워크플로, 기타 도구와 자동으로 연결하기 더 쉽습니다.
|
||||
|
||||
따라서 대형 언어 모델을 선택하고 평가할 때는 그것이 똑똑한지, 지식 범위가 넓은지뿐만 아니라 지시 따르기 능력에도 특별히 주목해야 합니다. 산업용 애플리케이션에서는 안정적이고 정확하게 지시를 실행할 수 있는지가, 가끔 한 번 놀라운 답변을 하는 것보다 더 중요할 때가 많습니다.
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="계속 학습하기"
|
||||
description="“게임화 경험”에서 출발해 로컬 개발과 제품 실습으로 계속 들어가 보기를 추천합니다."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
File diff suppressed because it is too large
Load Diff
+356
@@ -0,0 +1,356 @@
|
||||
# 7가지 AI 코딩 도구 비교
|
||||
|
||||
## 이 장의 가이드
|
||||
|
||||
수많은 AI 코딩 도구 중에서 어떤 도구가 가장 나에게 잘 맞을까요? 이 장에서는 하나의 통일된 실습 과제인 “스네이크 + AI 시 쓰기” 게임 개발을 통해 Lovable, Replit, Z.ai 등 7가지 주요 Web Vibe Coding 플랫폼을 깊이 있게 가로로 비교합니다. 초보자 친화성, 코드 제어 가능성, 배포 편의성 등 여러 관점에서 비교하여, 가장 강력한 개발 보조 도구를 빠르게 고를 수 있도록 돕습니다.
|
||||
|
||||
---
|
||||
|
||||
# 1. Vibe Coding으로 스네이크 게임 만들기: 전체 실습 튜토리얼
|
||||
|
||||
이 글은 새로운 소프트웨어 개발 실천 방식인 “Vibe Coding(분위기식 코딩)”을 소개합니다. Vibe Coding은 인공지능을 활용해 애플리케이션 구축 과정을 가속합니다.
|
||||
|
||||
이제 Vibe Coding의 핵심 개념을 차례대로 소개하고, AI Agent가 무엇인지 설명한 뒤, 실용적인 프롬프트 작성 방법을 제시합니다. 마지막에는 “스네이크(Snake)” 게임을 처음부터 구축하는 전체 실습을 진행하고, 여러 주요 Vibe Coding 플랫폼을 상세히 비교 평가하여 자신에게 가장 적합한 도구 조합을 선택할 수 있도록 돕습니다.
|
||||
|
||||
## 배우게 될 것
|
||||
|
||||
- **Vibe Coding이란 무엇인가:** 정의, 워크플로, 핵심 장점을 이해합니다.
|
||||
- **AI Agent의 역할:** AI Agent의 작동 방식과 전통적인 프로그램과의 차이를 이해합니다.
|
||||
- **좋은 프롬프트를 쓰는 법:** 더 좋은 결과를 얻기 위해 명확하고 구체적인 프롬프트 작성법을 익힙니다.
|
||||
- **Vibe Coding 도구:** 주요 AI 코딩 및 디자인 플랫폼들을 알아봅니다.
|
||||
- **플랫폼 비교:** 초보자의 관점에서 7가지 서로 다른 AI Agent 플랫폼의 장단점을 평가하고 비교합니다.
|
||||
- **UI / UX 도구:** Figma, Mastergo 같은 UI/UX 도구를 전체 워크플로에 통합하는 방법을 배웁니다.
|
||||
|
||||
## 1. 들어가며
|
||||
|
||||
이전 수업에서는 계속 z.ai의 풀스택 개발 모델을 사용해 프로그래밍 과제를 완성해 왔습니다.
|
||||
|
||||
하지만 우리는 생각해 본 적이 있을까요? 그 핵심은 사실 “AI Agent”입니다. 일반적인 채팅형 AI와는 다르고, 훨씬 더 지능적입니다. 단지 당신과 대화만 하는 것이 아니라 생각할 수 있고(당신이 작업을 주면 먼저 계획을 세웁니다), 주도적으로 행동할 수도 있기 때문입니다. 예를 들어 웹 검색 호출, 컴퓨터 명령 실행, 웹페이지 열기 같은 도구를 사용할 수 있습니다. 뒤에서 더 자세히 소개하겠습니다.
|
||||
|
||||
## 1. Vibe Coding이란 무엇인가?
|
||||
|
||||
Vibe Coding은 AI를 활용해 애플리케이션 개발 흐름을 가속하는 새로운 소프트웨어 개발 방식입니다. 전통적인 프로그래밍의 대체물이 아니라, 더 “대화식”인 프로그래밍 모델에 가깝습니다. 이 개념은 AI 연구자 Andrej Karpathy가 제시했습니다. 이 워크플로에서 개발자는 더 이상 코드를 한 줄씩 직접 작성하는 데 중심을 두지 않고, 주로 AI Agent를 이끌어 애플리케이션을 생성하고, 최적화하고, 디버깅합니다.
|
||||
|
||||
Vibe Coding의 핵심 생각은 **“코드 중심(code-first)”** 에서 **“의도 중심(intent-first)”** 으로 전환하는 것입니다. 더 이상 첫 번째 코드 줄부터 구상할 필요가 없습니다. 자연어로 원하는 결과를 설명하면 됩니다.
|
||||
|
||||
전형적인 Vibe Coding 워크플로는 끊임없이 반복되는 순환입니다.
|
||||
|
||||
- **목표 설명:** 먼저 한 문장이나 한 단락으로 구현하고 싶은 기능을 설명합니다. 예: “Python 백엔드가 있고 시를 생성할 수 있는 간단한 스네이크 게임을 만들어줘.”
|
||||
- **AI가 코드 생성:** AI Agent가 요구사항을 해석하고, 기본 구조, 프론트엔드 페이지, 백엔드 로직을 포함한 첫 번째 코드 버전을 생성합니다.
|
||||
- **실행하고 관찰:** 생성된 코드를 실행해 예상대로 동작하는지 확인하고, 동시에 버그나 부족한 점을 찾습니다.
|
||||
- **피드백하고 반복:** 오류가 있거나 결과가 마음에 들지 않으면 대화에서 계속 지시합니다. 예: “뱀이 너무 느리게 움직여. 속도를 더 빠르게 해줘”, 또는 “지금 `.env` 파일의 API Key가 제대로 읽히지 않아. 백엔드 코드를 고쳐줘.”
|
||||
- **위 단계를 반복:** “설명 → 생성 → 실행 → 피드백” 순환을 계속 반복해 애플리케이션이 만족스러운 상태에 도달할 때까지 개선합니다.
|
||||
|
||||
### Vibe Coding의 주요 장점
|
||||
|
||||
- **진입 장벽 감소:** 프로그래밍 경험이 부족한 디자이너, 창업자, 학생 등도 자연어를 통해 애플리케이션 개발에 참여할 수 있습니다.
|
||||
- **빠른 프로토타입:** 아이디어에서 최소 기능 제품(MVP)까지 걸리는 시간이 크게 줄어듭니다.
|
||||
- **효율 향상:** 템플릿 코드처럼 반복적이고 기계적인 코딩 작업을 자동으로 처리하여, 개발자가 아키텍처 설계와 문제 추상화에 더 집중할 수 있게 합니다.
|
||||
- **실험에 유리:** 먼저 빠르게 만들어 보고 계속 개선하는 방식을 장려하므로, 새로운 아이디어와 기능을 시도하기가 더 쉽습니다.
|
||||
|
||||
## 2. Vibe Coding 온라인 플랫폼(Web-based)이란 무엇인가?
|
||||
|
||||
이번 실제 테스트에서 평가한 도구는 **Web-based(온라인 플랫폼)** 과 **IDE(로컬 개발 환경)** 두 종류로 나뉩니다.
|
||||
|
||||
둘 다 핵심은 AI가 코드를 작성하도록 돕는 것이지만, 사용 경험과 적합한 상황에는 큰 차이가 있습니다.
|
||||
|
||||
### Vibe Coding 온라인 플랫폼(Web-based)
|
||||
|
||||
**대표 도구:** Lovable, Replit, Z.ai, v0
|
||||
|
||||
이는 “짐만 들고 들어가면 되는” 호텔식 아파트와 비슷합니다.
|
||||
|
||||
- **환경 설정 불필요:** Python 환경이 무엇인지, Node.js 버전이 무엇인지 신경 쓸 필요가 없고, 의존성 설치도 신경 쓰지 않아도 됩니다. 브라우저를 열고 주소를 입력하면 바로 코딩을 시작할 수 있습니다.
|
||||
- **원클릭 미리보기와 배포:** 코드가 생성되면 플랫폼은 보통 오른쪽 창에 실행 결과를 자동으로 보여줍니다. 완성되면 버튼 하나로 링크를 생성해 친구에게 공유할 수 있습니다.
|
||||
- **적합한 상황:**
|
||||
- **아이디어 빠른 검증(MVP):** 머릿속에 아이디어가 있고, 30분 정도 써서 만들 수 있는지 보고 싶을 때.
|
||||
- **초보자 입문:** 복잡한 환경 오류에 막혀 포기하고 싶지 않고, AI 코딩의 재미를 경험하고 싶을 때.
|
||||
- **가벼운 애플리케이션:** 간단한 도구 웹페이지, 미니게임, 개인 소개 페이지를 만들 때.
|
||||
|
||||
### AI IDE(로컬 개발 환경)
|
||||
|
||||
**대표 도구:** Cursor, Trae, VS Code + AI 플러그인
|
||||
|
||||
이는 “고급 인테리어가 된” 자가 주택과 비슷합니다.
|
||||
|
||||
- **강력한 로컬 능력:** 당신의 컴퓨터에서 실행되며, 모든 로컬 파일에 직접 접근하고 컴퓨터의 연산 자원을 활용할 수 있습니다.
|
||||
- **전문 워크플로와 매끄러운 연결:** 대형 프로젝트에 적합하며, 다양한 플러그인을 자유롭게 설치하고, 로컬 데이터베이스에 연결하고, 복잡한 디버깅을 수행할 수 있습니다.
|
||||
- **적합한 상황:**
|
||||
- **전문 프로젝트 개발:** 장기 유지보수가 필요하고 구조가 복잡한 상업 프로젝트.
|
||||
- **깊은 맞춤화:** 코드 세부 사항을 극도로 제어해야 하거나 Git, Docker 같은 기존 로컬 워크플로와 깊게 결합해야 할 때.
|
||||
- **데이터 프라이버시:** 코드가 완전히 로컬에 있으므로 일부 기업의 보안 규정에 더 잘 맞습니다.
|
||||
|
||||
**정리하면:** AI 코딩을 막 시작했거나 작은 것을 빠르게 만들어 보고 싶다면 **온라인 플랫폼**이 훌륭한 출발점입니다. 전문 개발자이거나 프로젝트가 점점 복잡해진다면 **로컬 IDE**가 더 높은 상한을 제공합니다.
|
||||
|
||||
---
|
||||
|
||||
## 3. AI Agent란 무엇인가?
|
||||
|
||||
### AI Agent란 무엇인가?
|
||||
|
||||
AI Agent는 환경을 감지하고, 결정을 내리고, 특정 목표를 달성하기 위해 자율적으로 행동할 수 있는 소프트웨어 시스템입니다. 고정된 지시를 따르고 흐름이 단일한 전통적인 소프트웨어와 비교하면, AI Agent는 더 유연하고 적응적입니다.
|
||||
|
||||
아래는 AI Agent를 전통적인 프로그램과 구분하는 몇 가지 핵심 특징입니다.
|
||||
|
||||
- **자율성(Autonomy):** AI Agent는 비교적 높은 독립성을 가집니다. 전통적인 프로그램은 보통 사람이 한 단계씩 트리거해야 하지만, Agent는 목표에 따라 다음에 무엇을 할지 스스로 결정할 수 있습니다.
|
||||
- **지각과 기억(Perception & Memory):** Agent는 환경에서 데이터를 수집합니다. 예를 들어 API 응답, 센서 데이터, 사용자 입력 등이 있습니다. 또한 “기억”을 통해 맥락을 보존하여 이후 행동에서 경험을 재사용하고 결과를 지속적으로 개선합니다.
|
||||
- **합리성과 목표 지향(Rationality & Goal-Orientation):** Agent는 주어진 목표를 중심으로 분석하고 계획하며, 더 높은 “성과 지표”를 추구하기 위해 가장 적절한 행동 순서를 선택합니다.
|
||||
- **도구 사용(Tool Use):** 현대 AI Agent의 큰 특징 중 하나는 외부 도구를 호출할 수 있다는 점입니다. 더 이상 “텍스트 생성”에만 갇혀 있지 않습니다. 예를 들어 웹을 탐색하고, 코드를 실행하고, 데이터베이스를 조회하고, 이메일을 보낼 수 있습니다. 즉 “도구를 조율하는” 두뇌입니다.
|
||||
|
||||
다음과 같이 비유해 이해할 수 있습니다.
|
||||
|
||||
- **전통적인 프로그램**은 계산기와 같습니다. 숫자와 연산자를 입력하면, 버튼을 눌렀을 때만 계산을 수행합니다.
|
||||
- **AI 어시스턴트**는 인간 비서와 같습니다. “근처 식당을 찾아줘”라고 하면 검색 결과를 주고 선택지를 나열하지만, 최종 결정은 여전히 당신이 합니다.
|
||||
- **AI Agent**는 자동화된 연구팀에 더 가깝습니다. 당신은 “일본 여행 일정을 계획해줘” 같은 상위 목표만 주면 됩니다. 그러면 Agent는 작업을 분해하고, 인터넷에서 자료를 찾고, 항공권과 호텔을 예약하고(API를 통해), 일정을 정리한 뒤 최종 결과를 전달합니다. 전체 과정에서 세부 사항에 대한 당신의 개입은 거의 필요하지 않습니다.
|
||||
|
||||
---
|
||||
|
||||
# 2. 프롬프트 작성에 대하여
|
||||
|
||||
## 1. 프롬프트를 한 번에 다 쓰는 것이 좋을까, 여러 단계로 나누는 것이 좋을까?
|
||||
|
||||
많은 사람은 “완전한 풀스택 애플리케이션을 만들어줘”라는 내용을 하나의 프롬프트 안에 한 번에 다 설명하고 싶어 합니다. 실제로 현재 도구들은 이미 충분히 강력해서, 한 번에 꽤 괜찮아 보이는 결과를 내놓을 가능성도 있습니다. 하지만 전체 경험과 성공률을 보면, 작업을 작은 단계로 나누고 단계별로 반복하는 편이 대체로 더 좋습니다. “더 이상 고쳐지지 않는” 막다른 길에 빠질 가능성도 줄어듭니다.
|
||||
|
||||
> **작은 팁:** “한 번에 완성”을 기대하기보다, 큰 목표를 실행 가능한 작은 할 일(To-do)들로 나누는 편이 좋습니다.
|
||||
> 예를 들어 “build me a Snake game”이라고 바로 말하지 말고, 다음처럼 나누세요.
|
||||
> “1. 먼저 스네이크 게임의 프론트엔드를 만들어줘”,
|
||||
> “2. 그다음 점수를 기록하는 백엔드를 구현해줘”,
|
||||
> “3. 마지막으로 프론트엔드와 백엔드를 연결해줘”.
|
||||
> 이렇게 하면 AI가 요구사항을 더 정확히 이해하고 더 신뢰할 수 있는 출력을 낼 수 있습니다.
|
||||
|
||||
## 2. 명확할수록 좋다
|
||||
|
||||
- Vibe Coding에서 당신이 쓰는 프롬프트는 당신이 쓰는 코드만큼 중요합니다. 프롬프트가 명확하고 구체적일수록 결과는 당신이 마음속으로 생각한 것에 더 가까워집니다.
|
||||
- 처음부터 목표와 제약 조건을 명확히 말하면 이후 반복 수정 횟수를 줄일 수 있습니다. 이는 시간을 아낄 뿐 아니라 사용량과 비용도 절약합니다.
|
||||
|
||||
---
|
||||
|
||||
# 3. 도구 개요(Vibe Coding / UIUX 도구)
|
||||
|
||||
## 1. AI Agent 플랫폼
|
||||
|
||||
| **Name** | **Platform** |
|
||||
| ------------------------------------------ | ------------ |
|
||||
| **[Lovable](https://lovable.dev/)** | Web-based |
|
||||
| **[Cursor](https://cursor.com/cn/agents)** | PC |
|
||||
| **[Z.ai](https://chat.z.ai/)** | Web-based |
|
||||
| **[Replit](https://replit.com/~)** | Web-based |
|
||||
| **[Minimax](https://agent.minimaxi.com/)** | Web-based |
|
||||
| **[Trae](https://www.trae.ai/)** | PC |
|
||||
| **[V0](https://v0.app/)** | Web-based |
|
||||
|
||||
## 2. AI UIUX 플랫폼
|
||||
|
||||
| **Name** | **Platform** |
|
||||
| ------------------------------------- | -------------------- |
|
||||
| **[Mastergo](https://mastergo.com/)** | Web-based |
|
||||
| **[FIgma](https://www.figma.com/)** | Web-based, PC Plugin |
|
||||
|
||||
---
|
||||
|
||||
# 4. 실습 튜토리얼(Vibe Coding + UI 결합)
|
||||
|
||||
1. Vibe Coding을 진행하려는 플랫폼의 채팅창에 원하는 프로그램 설명을 입력합니다.
|
||||
예시:
|
||||
|
||||
> 프론트엔드와 백엔드가 있는 간단한 스네이크(Snake) 웹 애플리케이션을 만들어 주세요.
|
||||
>
|
||||
> 1. 프론트엔드
|
||||
>
|
||||
> - 페이지 1: 게임 페이지
|
||||
> - 키보드로 뱀의 이동을 제어합니다.
|
||||
> - 뱀이 먹는 것은 음식이 아니라 영어 단어입니다.
|
||||
> - 페이지 사이드바에 수집한 단어와 개수를 표시합니다.
|
||||
> - 게임이 끝난 뒤에도 수집한 단어는 그대로 남아 있고, 새 게임에서도 이어집니다.
|
||||
> - 페이지 2: 시 쓰기 페이지(Make Poem)
|
||||
> - 게임 페이지와 같은 단어 목록을 표시합니다. 데이터는 동일해야 합니다.
|
||||
> - 현재 수집한 단어를 백엔드로 보내 시를 생성하는 버튼을 제공합니다.
|
||||
> - 시가 생성된 뒤, 사용된 단어를 목록에서 제거하거나 개수를 줄입니다.
|
||||
>
|
||||
> * Game과 Make Poem 두 페이지 사이를 전환할 수 있도록 간단한 내비게이션을 추가합니다.
|
||||
> * 수집된 단어가 두 페이지 모두에서 보이도록 보장합니다.
|
||||
>
|
||||
> 2. 백엔드
|
||||
>
|
||||
> - 수집한 단어를 받아 시를 반환하는 백엔드 API를 제공합니다.
|
||||
> - DeepSeek API를 사용해 시를 생성합니다.
|
||||
> - API Key는 `.env` 파일에 저장하고, `.gitignore`에서 해당 파일을 무시합니다.
|
||||
|
||||
2. DeepSeek API Key를 입력합니다. ([https://platform.deepseek.com/](https://platform.deepseek.com/) 에서 받을 수 있습니다.)
|
||||
1. LLM의 API Key는 자신의 프로젝트에서 대형 모델을 호출하는 데 사용됩니다. 민감한 정보이기 때문에 공개하면 안 되며, 별도의 설정 파일에 작성해야 합니다.
|
||||
**왜 `.env` 파일을 사용하고 GitHub에 업로드하면 안 될까요?**
|
||||
- `.env` 파일은 **키 또는 비밀번호**를 저장하는 데 전용으로 쓰입니다. 예: DeepSeek API Key.
|
||||
- 이 파일이 GitHub에 업로드되면 전 세계 사람이 당신의 키를 보고 도용할 수 있습니다.
|
||||
- 보안을 위해 `.gitignore` 파일에 `.env`를 무시하도록 선언하여 Git이 추적하지 않게 해야 합니다.
|
||||
- 이렇게 하면 프로젝트는 여전히 로컬에서 이 키들을 정상적으로 사용할 수 있지만, 저장소에는 유출되지 않습니다.
|
||||
|
||||
3. 생성 결과를 확인한 뒤 오류가 있거나 수정할 부분이 있으면 채팅창에 바로 수정 요청을 입력할 수 있습니다.
|
||||
4. 페이지 디자인이 마음에 들지 않으면 Figma나 Mastergo에서 인터페이스를 다시 디자인한 뒤, 디자인 의도를 Agent에게 피드백할 수도 있습니다.
|
||||
|
||||
- **예시**
|
||||
|
||||
> _Word-Snake_ 라는 이름의 **두 페이지 Web 애플리케이션**을 설계해 주세요.
|
||||
>
|
||||
> - **Game 페이지:**
|
||||
> - 뱀은 키보드로 이동을 제어합니다.
|
||||
> - 뱀이 먹는 것은 일반 음식이 아니라 영어 단어입니다.
|
||||
> - 오른쪽 패널에 수집한 단어와 수량을 표시합니다.
|
||||
> - 게임 종료 후에도 단어 재고는 초기화되지 않고, 다음 라운드에서 계속 사용됩니다.
|
||||
> - **Make Poem 페이지:**
|
||||
> - 같은 공유 단어 재고를 표시합니다.
|
||||
> - 사용자가 일부 단어를 선택하고 **Generate Poem** 버튼을 클릭합니다.
|
||||
> - 이 단어들을 백엔드로 보내 DeepSeek API가 시를 생성하게 합니다.
|
||||
> - 시가 생성된 뒤, 사용된 단어를 재고에서 삭제하거나 줄입니다.
|
||||
> - **내비게이션:** 간단한 Tab 또는 상단 메뉴로 두 페이지 사이를 전환합니다.
|
||||
> - **공유 상태:** 수집된 단어가 두 페이지에서 항상 동기화되어 보이도록 보장합니다.
|
||||
|
||||
- **결과 예시**
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 5. AI Agent 플랫폼 비교(간단한 프로젝트에 가장 좋은 조합을 고르는 법)
|
||||
|
||||
서로 다른 Vibe Coding 플랫폼은 각기 다른 특징과 워크플로를 가지고 있습니다. 우리는 같은 “DeepSeek API가 포함된 스네이크 게임” 요구사항을 여러 플랫폼에서 실제로 테스트하고, 초보자의 관점에서 장단점을 평가했습니다. 아래는 요약입니다.
|
||||
|
||||
## 1. 비교 기준
|
||||
|
||||
1. **목표(Goal)**
|
||||
DeepSeek API를 연결한 스네이크(Snake) 웹 애플리케이션을 구축합니다.
|
||||
|
||||
2. **게임 세부 사항(Game Details)**
|
||||
1. 게임은 DeepSeek LLM API를 통해 시를 생성합니다.
|
||||
2. 뱀이 먹는 것은 영어 단어이며, 수집한 단어는 게임 종료 후에도 유지되고 새 게임에서도 계속 사용됩니다. 같은 단어를 여러 번 수집할 수 있으며 각각 개수가 계산됩니다.
|
||||
3. 시를 하나 생성한 뒤, 사용된 단어는 재고에서 제거됩니다.
|
||||
|
||||
3. **필수 기능(Must-Haves)**
|
||||
1. 스네이크 게임을 포함한 실행 가능한 프론트엔드 페이지. 키보드 제어와 Canvas 렌더링을 포함합니다.
|
||||
2. 단어 수집 메커니즘. 단어가 보드에 나타나고, 뱀이 단어를 먹으면 사이드바 목록이 업데이트됩니다.
|
||||
3. 여러 게임 라운드 사이에서도 단어 재고를 지속적으로 유지합니다.
|
||||
4. DeepSeek API를 사용하는 백엔드. API Key가 없으면 먼저 가짜 시를 반환해도 됩니다.
|
||||
5. “시 생성” 버튼. 클릭하면 백엔드를 호출하고, 시를 표시하며, 사용 상황에 따라 단어 재고를 업데이트합니다.
|
||||
6. API Key를 위한 `.env` 지원과 `.gitignore`를 통한 키 유출 방지.
|
||||
|
||||
4. **있으면 좋은 기능(Nice-to-Haves)**
|
||||
1. 사용자가 시 생성에 사용할 단어를 선택할 수 있습니다.
|
||||
2. 사용자 경험이 친절합니다. 예를 들어 사이드바에 단어 목록을 명확히 보여 주고, 시 표시 영역의 레이아웃이 합리적이어야 합니다.
|
||||
3. 초보자를 위해 코드에 주석을 추가하여 핵심 로직을 설명합니다.
|
||||
|
||||
## 2. 코딩 출력 비교
|
||||
|
||||
### 1. Lovable(Web-based)
|
||||
|
||||
- **플랫폼 유형:** Web
|
||||
- **주요 특징과 워크플로:** Lovable은 통합과 협업 측면에서 잘 만들어져 있습니다. Supabase 데이터베이스 연결 같은 초기화 작업을 자동으로 처리하여 프로젝트 구축 과정이 매우 매끄럽습니다. 프로젝트 요구사항만 설명하면 Agent가 각종 서비스를 연결하고 기본 구조를 만들어 줍니다.
|
||||
- **적합한 사용자:** Vibe Coding을 처음 시도하는 초보자에게 Lovable은 매우 친절한 선택입니다. 여러 서비스를 함께 연결하는 복잡도를 단순화해 주므로 환경 설정이 아니라 프롬프트와 반복 개선에 집중할 수 있습니다. 높은 자동화 덕분에 실행 가능한 프로토타입을 빠르게 얻을 수 있습니다.
|
||||
- **프롬프트 과정:**
|
||||
|
||||
- **스네이크 게임 결과:**
|
||||
|
||||
|
||||
|
||||
- **가격:** 비교적 비싼 편이지만, 학교 이메일이 있으면 학생 인증을 통해 반값으로 사용할 수 있습니다.
|
||||
|
||||
|
||||
### 2. Cursor(IDE)
|
||||
|
||||
- **플랫폼 유형:** 데스크톱 애플리케이션(PC)
|
||||
- **주요 특징과 워크플로:** Cursor는 AI 기능이 통합된 전용 IDE이며 Windows, macOS, Linux를 지원합니다. 코드 생성, 지능형 재작성, 코드베이스 질의 같은 기능을 개발 환경 안에 직접 넣었습니다. Web 도구와 비교하면 전통적인 로컬 개발 경험에 더 가깝습니다. 로컬 환경이기 때문에 컴퓨터마다 설정이 다르고, 때때로 환경 관련 문제가 발생할 수 있습니다. 장점은 프로젝트가 내 컴퓨터에 있으므로 추가로 다운로드하거나 실행 환경을 설정할 필요가 적고, Cursor가 많은 번거로운 단계를 처리해 준다는 점입니다.
|
||||
- **적합한 사용자:** 어느 정도 프로그래밍 기초가 있는 사용자에게 Cursor는 매우 강력하고 익숙한 환경입니다. 그러나 완전 초보자에게는 프로젝트 구조, 의존성 관리, 파일 구성 같은 개념을 스스로 이해해야 하므로 학습 곡선이 더 가파를 수 있습니다. 전통적인 코딩 흐름에 AI 어시스턴트를 추가하고 싶은 개발자에게 더 적합합니다.
|
||||
- **프롬프트 과정:**
|
||||
|
||||
- **스네이크 게임 결과:**
|
||||
|
||||
|
||||
|
||||
- **가격:**
|
||||
|
||||
|
||||
### 3. Z.ai(Web-based)
|
||||
|
||||
- **플랫폼 유형:** Web
|
||||
- **주요 특징과 워크플로:** Z.ai의 사용 방식은 비교적 직접적이지만, 뚜렷한 어려움이 하나 있습니다. **생성된 코드를 수동으로 복사해 붙여 넣어야 한다**는 점입니다. 플랫폼 자체에 실시간 미리보기 창이 부족하여 코드 실행 결과를 즉시 보기 어렵습니다.
|
||||
- **적합한 사용자:** 이 플랫폼은 비교적 “직접 손을 대는” 사용 방식을 요구합니다. 자동화가 부족하다는 것은 코드와 직접 마주해야 한다는 뜻이고, AI 출력 내용을 깊이 이해하고 싶은 사람에게는 오히려 훈련이 될 수 있습니다. 하지만 잦은 복사 붙여넣기는 효율 문제와 실수 위험을 가져옵니다. 원클릭 경험을 원하는 사람보다는 “AI가 원시적으로 출력한 코드”를 보고 싶은 학생에게 더 적합합니다.
|
||||
- **프롬프트 과정:**
|
||||
|
||||
- **스네이크 게임 결과:**
|
||||
|
||||
|
||||
|
||||
- **가격:**
|
||||
|
||||
|
||||
### 4. Replit(Web-based)
|
||||
|
||||
- **플랫폼 유형:** Web
|
||||
- **주요 특징과 워크플로:** Replit은 통합 온라인 개발 및 배포 환경입니다. 브라우저 안에서 코드를 작성하고, 프로그램을 실행하고, 온라인 접속 주소를 생성할 수 있습니다. 코딩을 시작하기 전에 명확한 실행 계획을 제시합니다. 또한 시각적 편집기도 제공하므로 미리보기 창에서 UI를 직접 수정할 수 있고, 소스 코드는 자동으로 동기화되어 업데이트됩니다. 이를 통해 AI 출력이 기대와 맞는지 수시로 확인할 수 있어 왕복 수정 횟수를 크게 줄일 수 있습니다.
|
||||
|
||||
|
||||
|
||||
- **적합한 사용자:** Replit은 초보자에게 매우 친절합니다. 코딩부터 배포까지의 전체 폐쇄 루프를 단순화하여 서버나 호스팅 서비스를 직접 따로 설정할 필요가 없습니다. 협업 기능도 강력해 학생들이 함께 프로젝트를 하거나 다른 사람에게 원격으로 코드 확인을 부탁하기에도 적합합니다.
|
||||
- **프롬프트 과정:** 구축 과정에서 AI가 처음부터 요구사항을 완전히 이해한 것은 아니었고, 중간에 약 3번의 반복을 거친 뒤에야 최종 출력이 이상적인 결과에 도달했습니다.
|
||||
|
||||
- **스네이크 게임 결과:**
|
||||
|
||||
|
||||
|
||||
- **가격:**
|
||||
|
||||
|
||||
### 5. Minimax(Web-based)
|
||||
|
||||
- **플랫폼 유형:** Web
|
||||
- **주요 특징과 워크플로:** Minimax는 작업을 수행할 때 보통 시간이 꽤 걸립니다. 그 흐름은 대체로 AI가 자동으로 오류를 발견하고 수정하는 과정을 포함하므로 전체 과정이 느리거나 다소 번거롭게 느껴질 수 있습니다. 이 프로젝트를 예로 들면, Agent는 보통 먼저 상세 계획을 생성한 뒤 백엔드, 데이터베이스, 프론트엔드 로직을 단계적으로 구축합니다.
|
||||
- **적합한 사용자:** 자동으로 테스트를 실행하고 오류를 수정하기 때문에 시간과 Token 소비가 모두 큰 편입니다. 하지만 AI가 문제를 찾고 해결하는 과정을 분명히 볼 수 있으므로 학습 관점에서는 가치가 있습니다.
|
||||
- **프롬프트 과정:**
|
||||
|
||||
|
||||
|
||||
- **스네이크 게임 결과:**
|
||||
|
||||
|
||||
|
||||
- **가격:** 무료 버전은 복잡한 프로젝트에서 처음부터 끝까지 순조롭게 실행되지 않을 가능성이 높으므로, 프로젝트를 완전히 구축하려면 유료 업그레이드를 더 추천합니다.
|
||||
|
||||
|
||||
### 6. Trae(IDE)
|
||||
|
||||
- **플랫폼 유형:** 데스크톱 애플리케이션(PC)
|
||||
- **주요 특징과 워크플로:** 데스크톱 애플리케이션인 Trae는 Web 도구와 비교했을 때 보통 성능과 응답 속도에서 더 유리합니다. 하지만 다운로드와 설치가 필요하므로 일부 사용자에게는 입문 장벽이 조금 높을 수 있습니다. 마찬가지로 로컬 환경이기 때문에 컴퓨터 설정과 의존성 환경의 차이에서 일정한 불확실성이 생깁니다. 장점은 Trae가 로컬에서 프로젝트 생성과 실행 설정을 도와주며, 사용자가 자신의 컴퓨터에서 바로 개발하고 디버깅할 수 있다는 점입니다.
|
||||
- **적합한 사용자:** 장기적으로 Vibe Coding 프로젝트를 진행할 계획이 있고, 전용 데스크톱 도구를 사용하고 싶은 사용자에게 더 적합합니다. “가끔 한 번 해보는” 정도를 원하는 학생에게는 가장 가벼운 선택이 아닐 수 있습니다.
|
||||
- **프롬프트 과정:**
|
||||
|
||||
- **스네이크 게임 결과:**
|
||||
|
||||
|
||||
|
||||
- **가격:** 가격은 비교적 친근한 편이며, 무료 버전만으로도 품질이 괜찮은 작은 프로젝트를 완성하기에 충분합니다.
|
||||
|
||||
|
||||
### 7. V0(Web-based)
|
||||
|
||||
- **플랫폼 유형:** Web
|
||||
- **주요 특징과 워크플로:** V0는 Vercel이 제공하는 React UI 컴포넌트 생성에 집중한 도구입니다. 고품질의 프로덕션 사용 가능한 인터페이스를 생성하는 데 뛰어납니다. 하지만 실제 사용 중에는 “코드 보기 화면을 찾기 어렵다”, “API Key를 어디에 설정해야 하는지 명확히 설명하지 않는다” 같은 문제가 나타납니다.
|
||||
- **적합한 사용자:** V0는 프론트엔드와 UI/UX 디자인에 집중하는 학생이나 디자이너에게 매우 적합합니다. 하지만 완전한 풀스택 솔루션은 아니므로 백엔드 로직과 API 통합을 구현하려면 여전히 다른 플랫폼을 사용해야 합니다. 따라서 목표가 “한 번에 완전한 애플리케이션 구축”이라면 최우선 선택은 아닐 수 있습니다.
|
||||
- **프롬프트 과정:**
|
||||
|
||||
|
||||
|
||||
|
||||
- **스네이크 게임 결과:**
|
||||
|
||||
- **가격:** 무료 사용자는 대략 4-5개의 간단한 프로젝트를 만들 수 있습니다.
|
||||
|
||||
|
||||
## 3. 플랫폼 요약 비교
|
||||
|
||||
| **플랫폼** | **Review** | **Platform** | **Notes** |
|
||||
| ------------------------------------------ | ------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------------ |
|
||||
| **[Lovable](https://lovable.dev/)** | AI 코딩 초보자에게 매우 친절하고, 시작이 쉽고 경험이 매끄러워 이상적인 입문 선택입니다. | Web-based | Supabase 같은 서비스 연결을 자동으로 완료하여 설정 비용을 줄입니다. |
|
||||
| **[Cursor](https://cursor.com/cn/agents)** | 개발 경험이 있는 사용자에게 적합하며, 생산성과 코드 품질을 크게 높입니다. | PC | 일정한 프로그래밍 기초가 필요하며, 로컬 환경에서 프로젝트 구조와 의존성을 스스로 이해해야 합니다. |
|
||||
| **[Z.ai](https://chat.z.ai/)** | 프로그래밍 기초가 있고 AI 출력 코드의 세부 사항을 직접 연구하고 싶은 사용자에게 더 적합합니다. | Web-based | 미리보기 창이 없어 결과 확인이 번거롭습니다. 코드를 수동으로 붙여 넣고, 폴더와 파일을 만들고, 서비스를 직접 실행해야 합니다. |
|
||||
| **[Replit](https://replit.com/~)** | 아이디어를 빠르게 접근 가능한 온라인 서비스로 바꾸고 싶은 사용자에게 추천합니다. | Web-based | 통합 온라인 개발과 배포를 제공하고, 협업과 시각적 편집기를 지원합니다. |
|
||||
| **[Minimax](https://agent.minimaxi.com/)** | AI가 자동으로 오류를 찾고 수정하는 전 과정을 보며 배우고 싶은 사람에게 적합하지만, 전체적으로 느리고 Token을 많이 씁니다. | Web-based | 전체 과정이 길고, AI가 여러 차례 자동으로 테스트를 실행하고 오류를 수정합니다. |
|
||||
| **[Trae](https://www.trae.ai/)** | 프로그래밍 경험이 있고 데스크톱 IDE + AI Agent 조합을 사용하고 싶은 사용자에게 효율을 높이는 강력한 도구입니다. | PC | 로컬 설치와 환경 설정이 필요하지만 성능이 더 좋고, 장기적인 Vibe Coding 프로젝트에 적합합니다. |
|
||||
| **[V0](https://v0.app/)** | React UI 시각 효과를 빠르게 만들고 싶은 비개발자에게 최적화되어 있으며, 프론트엔드 / 디자인 방향의 학생에게 적합합니다. | Web-based | React UI 생성에 집중하며, 백엔드와 전체 애플리케이션 구축은 다른 플랫폼과 함께 진행해야 합니다. |
|
||||
+344
@@ -0,0 +1,344 @@
|
||||
# 디자인 Agent와 코딩 Agent로 웹사이트 설계하기
|
||||
|
||||
## 이 장의 가이드
|
||||
|
||||
이 장에서는 디자인과 개발이 AI를 통해 어떻게 완벽하게 협업할 수 있는지 보여 줍니다. 당신은 제품 관리자의 역할을 맡아 “디자인 Agent”에게 로고 디자인, 색상 구성, 페이지 레이아웃을 지휘하고, 이어서 “코딩 Agent”와 협업해 시각 디자인을 실행 가능한 코드로 바꿉니다. 창의적인 구상부터 웹사이트 공개까지, 전 과정에서 AI가 개발을 지원하는 흐름을 경험하고 한 사람이 하나의 팀이 되는 방식을 체험합니다.
|
||||
|
||||
---
|
||||
|
||||
# 1. 입문 가이드
|
||||
|
||||
## 1. 튜토리얼 소개
|
||||
|
||||
AI 디자인 Agent와 코딩 Agent를 사용해 처음부터 완전한 웹사이트를 만들어 봅시다.
|
||||
|
||||
- **디자인 Agent**: 로고, 웹페이지 레이아웃, 색상 구성, 기타 시각 요소를 만드는 역할을 합니다.
|
||||
- **코딩 Agent**: 프롬프트에서 제시한 요구사항과 레이아웃에 따라 HTML/CSS/JS 같은 실제 코드를 작성하고 실행 가능한 웹사이트를 구축합니다.
|
||||
|
||||
## 2. 디자인 Agent와 코딩 Agent
|
||||
|
||||
- **디자인 Agent**: 당신이 제공한 프롬프트에 따라 이미지, 페이지 모델, 디자인 스타일을 생성하는 AI입니다.
|
||||
- Mastergo
|
||||
- Lovart
|
||||
- Figma MCP
|
||||
- **코딩 Agent**: 프롬프트에서 요청한 기능과 레이아웃에 따라 실제 코드(HTML/CSS/JS 등)를 작성하는 AI입니다.
|
||||
- Z.AI
|
||||
- Trae
|
||||
- Cursor
|
||||
- Lovable
|
||||
|
||||
---
|
||||
|
||||
# 2. 디자인 Agent로 로고 만들기
|
||||
|
||||
## 1. 로고를 디자인할 때 고려해야 할 핵심 요소
|
||||
|
||||
로고는 웹사이트의 첫인상을 결정하는 핵심 요소 중 하나입니다. AI 디자인 Agent로부터 만족스러운 결과를 얻으려면, 프롬프트에서 원하는 로고 유형을 명확하게 설명해야 합니다.
|
||||
|
||||
1. **브랜드 이름 / 텍스트**
|
||||
|
||||
- 로고 안에 반드시 나타나야 하는 글자입니다. 예: 웹사이트 제목, 브랜드 이름 등.
|
||||
|
||||
2. **스타일(정서 / 분위기)**
|
||||
|
||||
- 로고가 전달하기를 원하는 전체적인 느낌이나 분위기입니다.
|
||||
- _예시: 미니멀, 귀여움, 간결함, 모던, 레트로, 미래감 등._
|
||||
|
||||
3. **색상 구성**(선택)
|
||||
|
||||
- 로고의 색상이 전체 웹사이트의 전반적인 톤과 어울리게 하는 것이 좋습니다.
|
||||
- 구체적인 16진수 색상 코드나 대략적인 색조(차가운 색, 따뜻한 색 등)를 지정할 수 있습니다.
|
||||
- _예시: **`#171721`**(검정), **`#FF7130`**(오렌지)._
|
||||
|
||||
4. **형태(모양 / 구조)**
|
||||
|
||||
- 로고에 특정한 모양이나 구도가 필요한지 명확히 합니다.
|
||||
- _예시: 원형 안에 텍스트 배치, 아이콘 + 텍스트 조합, 아이콘 중심 로고 등._
|
||||
|
||||
5. **아이콘 / 상징 요소**(선택)
|
||||
|
||||
- 로고 안에 나타나기를 원하는 그래픽이나 상징입니다.
|
||||
- _예시: 책 아이콘, 번개 기호, AI와 관련된 그래픽, 추상 기하 도형 등._
|
||||
|
||||
## 2. 로고 디자인 프롬프트 작성하기
|
||||
|
||||
**예시 프롬프트**
|
||||
|
||||
```
|
||||
"'My First Website'라는 브랜드 이름으로 미니멀 스타일의 로고를 디자인해 주세요.
|
||||
검정색(#171721)과 오렌지색(#FF7130)을 사용하고, 텍스트를 원형 안에 배치해 주세요."
|
||||
```
|
||||
|
||||
```
|
||||
"'AIID'를 브랜드명으로 하는 로고를 디자인해 주세요.
|
||||
전체 스타일은 미래적이고 깔끔하며 간결해야 하고, 주색은 파란색과 흰색입니다.
|
||||
AI를 상징하는 추상 그래픽과 텍스트를 결합하고, 투명 배경 PNG로 내보내 주세요."
|
||||
```
|
||||
|
||||
## 3. Agent에게 디자인 요청하기
|
||||
|
||||
- 위 프롬프트 입력 → Agent가 생성한 여러 디자인 시안을 비교합니다.
|
||||
|
||||
|
||||
|
||||
## 4. 최종 로고 확정하기
|
||||
|
||||
- 초안 중 가장 마음에 드는 버전을 선택해 다운로드합니다.
|
||||
|
||||
---
|
||||
|
||||
# 3. 웹사이트 구조 계획하기
|
||||
|
||||
## 1. 기본 섹션 이해하기
|
||||
|
||||
웹사이트를 실제로 만들기 전에 어떤 메뉴(섹션)를 포함할지 미리 계획하는 것은 매우 중요합니다. 메뉴 설계는 방문자에게 무엇을 보여 주고 싶은지, 그리고 방문자가 어떤 행동을 하길 원하는지에 따라 달라집니다.
|
||||
일반적으로 웹사이트는 보통 **Home / About / Contact** 같은 기본 섹션으로 구성됩니다.
|
||||
|
||||
## 2. 먼저 구조 스케치 직접 그리기(선택)
|
||||
|
||||
웹사이트의 목표에 따라 간단한 메뉴 구조를 대략 작성해 볼 수 있습니다.
|
||||
|
||||
### 기본 메뉴
|
||||
|
||||
1. **Home**
|
||||
1. 방문자가 웹사이트에 들어온 뒤 처음 보게 되는 메인 페이지입니다.
|
||||
2. 보통 로고, 메인 비주얼 영역, 짧은 표어나 소개 문장을 포함합니다.
|
||||
2. **About**
|
||||
1. 당신이 누구인지, 또는 프로젝트 / 서비스의 목적을 소개합니다.
|
||||
2. 개인 포트폴리오: 자기소개 + 짧은 이력.
|
||||
3. 서비스형 웹사이트: 비전, 목표, 핵심 기능.
|
||||
3. **Contact**
|
||||
1. 이메일, 전화번호, 소셜미디어 링크 같은 연락 방법입니다.
|
||||
2. 간단한 문의 양식을 추가할 수도 있습니다.
|
||||
|
||||
### 선택 메뉴
|
||||
|
||||
4. **Services / Projects**
|
||||
1. 제공하는 서비스 또는 프로젝트 / 포트폴리오를 보여 줍니다.
|
||||
2. 보통 목록이나 카드 형태로 표시합니다.
|
||||
|
||||
5. **Gallery**
|
||||
1. 이미지, 사진, 디자인 작업물을 보여 주는 데 사용합니다.
|
||||
|
||||
6. **Blog / News**
|
||||
1. 글, 소식, 로그를 게시하는 데 사용합니다.
|
||||
|
||||
7. **FAQ**
|
||||
1. 방문자가 자주 묻는 질문과 답변을 정리합니다.
|
||||
|
||||
## 3. 색상 구성 선택하기(선택)
|
||||
|
||||
이미 로고가 있거나 특정 색상 조합을 사용해 웹사이트를 디자인하고 싶다면, 프롬프트에 사용할 색상 코드를 직접 써도 됩니다.
|
||||
|
||||
**예시:** `#171721, #872B97, #FF7130, #FF3C68`
|
||||
|
||||
아직 색상 구성이 떠오르지 않는다면, 색상 조합 사이트나 검색 키워드를 통해 영감을 얻을 수도 있습니다.
|
||||
|
||||
- **색상 조합 참고 사이트**
|
||||
- https://colorhunt.co/
|
||||
- https://coolors.co/
|
||||
|
||||
|
||||
|
||||
- **Google에서 키워드로 색상 조합 검색하기**
|
||||
|
||||
|
||||
|
||||
## 4. 웹사이트 디자인 프롬프트 작성하기
|
||||
|
||||
**예시 프롬프트**
|
||||
|
||||
```
|
||||
"Home, About, Contact 세 개 섹션으로 구성된 단일 페이지 웹사이트를 디자인해 주세요.
|
||||
색상 #171721, #FF7130, #FF3C68을 사용해 주세요.
|
||||
전체 스타일은 모던하고 간결해야 합니다."
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
# 4. 디자인 Agent로 웹사이트 디자인하기
|
||||
|
||||
## 1. 프롬프트 입력 → 디자인 시안 생성
|
||||
|
||||
- 프롬프트에 계획한 구조와 선택한 색상 구성을 작성합니다.
|
||||
|
||||
**Mastergo 프롬프트 예시**
|
||||
|
||||
|
||||
|
||||
## 2. 디자인 시안 검토하고 수정 의견 제시하기
|
||||
|
||||
자신의 필요에 따라 Agent에게 피드백을 줄 수 있습니다. 예:
|
||||
|
||||
- “너무 화려해요. 전체 스타일을 더 간결하게 바꿔 주세요.”
|
||||
- “다른 글꼴로 바꿔 주세요.”
|
||||
- “색상 조합을 조정해 주세요.”
|
||||
- “여기 이 블록을 삭제해 주세요.”
|
||||
|
||||
|
||||
|
||||
## 3. 최종 디자인 확정하기
|
||||
|
||||
디자인 시안을 여러 차례 수정해 만족한 뒤에는, 이 디자인을 코드로 변환하여 코딩 Agent가 이해하고 이어서 작업할 수 있게 합니다.
|
||||
|
||||
디자인을 코드로 바꾸는 방식은 플랫폼마다 다르지만, 보통 디자인 플랫폼 안에서 특정 플러그인을 설치하고 사용하는 방식으로 진행합니다.
|
||||
|
||||
**Mastergo 예시**
|
||||
|
||||
1. [Mastergo 플러그인 웹사이트](https://mastergo.com/community/plugin)를 열고 **seal**을 검색합니다.
|
||||
|
||||
|
||||
|
||||
2. 디자인 페이지로 돌아가 **사각형 아이콘(플러그인)** 을 클릭합니다.
|
||||
|
||||
|
||||
|
||||
3. 코드로 변환하고 싶은 디자인 영역을 선택하고 **Generate** 버튼을 클릭해 코드를 생성합니다.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 5. 코딩 Agent로 웹사이트 만들기
|
||||
|
||||
## 1. HTML/CSS/JS의 기본 개념 이해하기
|
||||
|
||||
웹사이트는 본질적으로 세 가지 언어로 구성됩니다.
|
||||
|
||||
- **HTML(HyperText Markup Language)** → 구조(뼈대)
|
||||
- **CSS(Cascading Style Sheets)** → 스타일(외관)
|
||||
- **JavaScript(JS)** → 기능(상호작용)
|
||||
|
||||
이 세 가지가 함께 작동하여 우리가 보는 완전한 웹페이지를 구성합니다.
|
||||
|
||||
1. **🏗️ HTML(구조)**
|
||||
|
||||
- 페이지에서 “무엇을 보여 줄지” 정의합니다.
|
||||
- 텍스트, 이미지, 버튼, 링크 같은 요소를 배치하는 데 사용합니다.
|
||||
- 건축물의 **벽체와 프레임**과 비슷합니다.
|
||||
|
||||
**예시**
|
||||
|
||||
```html
|
||||
<h1>Hello!</h1>
|
||||
<p>This is my first website.</p>
|
||||
<a href="contact.html">Contact</a>
|
||||
```
|
||||
|
||||
2. **🎨 CSS(스타일)**
|
||||
|
||||
- “내용을 어떻게 보여 줄지” 결정합니다.
|
||||
- 글자 크기, 색상, 간격, 배경, 버튼 모양 등을 제어합니다.
|
||||
- HTML에 “옷”과 시각 스타일을 입혀 줍니다.
|
||||
|
||||
**예시**
|
||||
|
||||
```css
|
||||
h1 {
|
||||
color: #FF7130; /* 글자 색상 */
|
||||
font-size: 36px; /* 글자 크기 */
|
||||
text-align: center; /* 가운데 정렬 */
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #171721; /* 배경 색상 */
|
||||
color: white; /* 기본 글자 색상 */
|
||||
}
|
||||
```
|
||||
|
||||
3. **⚙️ JavaScript(JS)(기능)**
|
||||
|
||||
- 웹페이지가 사용자와 상호작용할 수 있게 합니다.
|
||||
- 버튼 클릭, 메뉴 펼치기, 이미지 캐러셀, 폼 제출 같은 동적 효과를 구현할 수 있습니다.
|
||||
- HTML/CSS가 정적인 뼈대와 외관이라면, JS는 웹페이지를 “살아 움직이게” 하는 **두뇌**입니다.
|
||||
|
||||
**예시**
|
||||
|
||||
```javascript
|
||||
function showAlert() {
|
||||
alert("The button has been clicked!");
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<button onclick="showAlert()">Click me</button>
|
||||
```
|
||||
|
||||
## 2. 코딩 Agent가 코드를 생성하게 하기
|
||||
|
||||
**예시 프롬프트**
|
||||
|
||||
```
|
||||
"Home, About, Contact 섹션을 포함한 단일 페이지 웹사이트의 HTML과 CSS를 작성해 주세요.
|
||||
색상 #171721, #FF7130, #FF3C68을 사용해 주세요.
|
||||
배경은 검정색, 글자는 흰색으로 해 주세요."
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 3. 웹사이트 실행하기
|
||||
|
||||
초안 코드가 생성되면 Agent는 보통 프로젝트를 자동으로 시작하고, 생성된 웹사이트 페이지를 보여 줍니다.
|
||||
|
||||
Agent를 다시 시작했거나 웹사이트 화면이 나타나지 않는다면, 다음과 비슷한 프롬프트를 입력할 수 있습니다.
|
||||
|
||||
```
|
||||
"Please activate the project"
|
||||
```
|
||||
|
||||
Agent가 프로젝트를 다시 시작하고 미리보기 페이지를 열어 현재 효과를 확인하기 쉽게 합니다.
|
||||
|
||||
## 4. 간단히 수정하기
|
||||
|
||||
자연어로 초안을 계속 미세 조정할 수 있습니다. 예:
|
||||
|
||||
- “버튼을 조금 더 크게 만들어 주세요.”
|
||||
- “글꼴을 조금 더 굵게 해 주세요.”
|
||||
|
||||
|
||||
|
||||
## 5. 웹사이트 문구 내용 수정하기
|
||||
|
||||
Agent가 생성한 첫 번째 웹사이트에는 보통 자동으로 생성된 자리표시자 텍스트가 포함됩니다. 실제 상황에 더 가깝게 만들려면, 미리 실제 내용을 준비한 다음 Agent에게 교체를 부탁할 수 있습니다.
|
||||
|
||||
**적용 예시**: AIID 웹사이트의 About 페이지 업데이트
|
||||
|
||||
1. 먼저 About 페이지에 보여 주고 싶은 내용을 작성합니다. Agent가 이해하기 쉽도록 Markdown 형식으로 저장할 수 있습니다.
|
||||
|
||||
|
||||
|
||||
2. 그런 다음 대화에서 Agent에게 해당 파일의 내용을 지정한 페이지에 적용하라고 말합니다.
|
||||
|
||||
|
||||
|
||||
3. 내용이 적용된 업데이트 버전을 확인합니다.
|
||||
|
||||
|
||||
|
||||
## 6. 이미지 삽입하기
|
||||
|
||||
특정 이미지(예: 로고, 배경 이미지 등)를 추가하고 싶다면, 먼저 이미지를 프로젝트 폴더에 업로드한 뒤 프롬프트에서 이 이미지를 페이지의 어느 위치에 사용할지 설명할 수 있습니다.
|
||||
|
||||
- **예시:**
|
||||
|
||||
|
||||
|
||||
- **결과:**
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
# 6. 디자인과 코드 통합하기
|
||||
|
||||
## 1. 디자인 파일과 웹사이트 코드 통합하기(선택)
|
||||
|
||||
디자인 Agent에서 코드 파일을 다운로드했다면, 해당 파일들을 현재 프로젝트 디렉터리로 옮긴 다음 코딩 Agent에게 이 디자인 코드와 기존 프로젝트를 합쳐 달라고 요청할 수 있습니다.
|
||||
|
||||
- **예시:**
|
||||
|
||||
|
||||
|
||||
- **결과:**
|
||||
|
||||
|
||||
@@ -0,0 +1,334 @@
|
||||
---
|
||||
title: '코드를 쓰다가 오류를 만나면 어떻게 해야 할까 - 스크린샷으로 AI에게 묻는 실전 가이드'
|
||||
description: '개발 중 발생하는 다양한 오류를 해결하기 위해 AI에게 효율적으로 질문하는 법을 배웁니다. 스크린샷, 설명, 문제 위치 파악의 표준 흐름을 익혀 AI를 디버깅 조수로 만듭니다.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = '약 <strong>30분</strong>'
|
||||
</script>
|
||||
|
||||
# 코드를 쓰다가 오류를 만나면 어떻게 해야 할까
|
||||
|
||||
## 본 장 안내
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['디버깅 기법', 'AI 협업', '문제 조사', '개발자 도구']" coreOutput="표준화된 오류 조사 흐름 한 세트" expectedOutput="흔한 오류의 90%를 독립적으로 해결할 수 있음">
|
||||
|
||||
AI 시대에는 오류를 조사하는 방식이 이미 바뀌었습니다.
|
||||
|
||||
모든 오류 유형을 외울 필요도 없고, 디버깅 전문가가 될 필요도 없으며, 심지어 오류가 무슨 뜻인지 이해하지 못해도 됩니다.
|
||||
|
||||
<strong>딱 한 가지, AI에게 어떻게 물어볼지만 배우면 됩니다.</strong>
|
||||
|
||||
이 장은 <strong>간단한 단계에서 고급 단계로 이어지는</strong> 조사 흐름을 알려 줍니다.
|
||||
|
||||
1. <strong>1단계: 바로 묻기</strong>: 현상 설명 + 스크린샷, 한 문장 질문
|
||||
2. <strong>2단계: 정보 보충</strong>: 해결되지 않으면 F12를 열어 핵심 정보 보충
|
||||
|
||||
이 흐름을 익히면 <strong>오류의 90%를 스스로 해결할 수 있습니다</strong>.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info 설명
|
||||
이 장의 모든 방법은 Cursor/Trae/Claude 같은 AI IDE의 실제 사용 경험에 기반하며, 일상 개발에 바로 적용할 수 있습니다.
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: '바로 질문', description: '현상 설명 + 스크린샷' },
|
||||
{ title: '정보 보충', description: 'F12를 열어 문제 위치 확인' },
|
||||
{ title: '반복 해결', description: '문제가 해결될 때까지' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. 핵심 마음가짐: 스크린샷으로 AI에게 묻기
|
||||
|
||||
::: warning 이 장이 왜 중요한가요?
|
||||
|
||||
많은 초보자가 오류를 만났을 때 가장 먼저 보이는 반응은 다음과 같습니다.
|
||||
|
||||
- 당황해서 코드를 아무렇게나 고치기 시작한다.
|
||||
- "xxx 오류 해결 방법"을 검색하는 데 30분을 쓴다.
|
||||
- 오류가 무슨 뜻인지 스스로 이해하려고 한다.
|
||||
- 혼자 밤늦게까지 debug한다.
|
||||
|
||||
<strong>이것들은 모두 시간을 낭비하는 방식입니다.</strong>
|
||||
|
||||
AI 시대에 디버깅은 매우 단순한 일이 되었습니다.
|
||||
|
||||
```
|
||||
오류를 본다 → 스크린샷을 찍는다 → AI에게 묻는다 → AI가 말한 대로 한다
|
||||
```
|
||||
|
||||
오류를 이해할 필요도, 디버깅을 할 줄 알 필요도, 심지어 문제가 어디 있는지 알 필요도 없습니다.
|
||||
|
||||
<strong>어떻게 물어볼지만 배우면 됩니다.</strong>
|
||||
|
||||
:::
|
||||
|
||||
### 1.1 가장 간단한 질문 방식
|
||||
|
||||
복잡한 템플릿이 필요 없습니다. 두 방식 중 하나를 고르면 됩니다.
|
||||
|
||||
**방식 1: 현상 설명**
|
||||
|
||||
형식: 방금 무엇을 했고, 지금 무엇이 나타났는지
|
||||
|
||||
```
|
||||
방금 로그인 페이지 코드를 수정했는데, 지금 페이지가 하얗게 비어 있어요. 어떻게 해야 하나요?
|
||||
```
|
||||
|
||||
**방식 2: 스크린샷**
|
||||
|
||||
현재 페이지나 오류 정보를 바로 캡처합니다.
|
||||
|
||||
```
|
||||
[스크린샷]
|
||||
|
||||
이 오류는 어떻게 해결하나요?
|
||||
```
|
||||
|
||||
**가장 좋은 방식: 설명 + 스크린샷**
|
||||
|
||||
```
|
||||
방금 로그인 페이지 코드를 수정했는데, 지금 페이지가 하얗게 비어 있어요.
|
||||
|
||||
[스크린샷]
|
||||
|
||||
어떻게 해야 하나요?
|
||||
```
|
||||
|
||||
**기억하세요: 맥락을 분명히 설명하고 스크린샷을 더하면, AI가 더 빨리 문제를 해결해 줄 수 있습니다.**
|
||||
|
||||
### 1.2 문제를 어떻게 명확히 말할까
|
||||
|
||||
많은 초보자가 질문해야 한다는 것은 알지만 어떻게 말해야 할지 모릅니다. 사실 세 가지만 분명히 말하면 됩니다.
|
||||
|
||||
**1. 방금 무엇을 했는가**
|
||||
|
||||
```
|
||||
방금 저장 버튼을 클릭했어요.
|
||||
방금 로그인 페이지 코드를 수정했어요.
|
||||
방금 페이지를 새로고침했어요.
|
||||
```
|
||||
|
||||
**2. 지금 무엇을 보았는가**
|
||||
|
||||
```
|
||||
지금 페이지가 비어 있어요.
|
||||
지금 버튼을 눌러도 반응이 없어요.
|
||||
지금 오류 메시지가 표시돼요.
|
||||
```
|
||||
|
||||
**3. 어떤 효과를 원했는가**
|
||||
|
||||
```
|
||||
데이터가 성공적으로 저장되게 하고 싶어요.
|
||||
페이지가 정상적으로 표시되게 하고 싶어요.
|
||||
버튼을 누르면 알림이 뜨게 하고 싶어요.
|
||||
```
|
||||
|
||||
**완전한 예시:**
|
||||
|
||||
```
|
||||
방금 저장 버튼을 클릭했는데, 지금 페이지에 "저장 실패" 오류가 표시돼요.
|
||||
|
||||
[스크린샷]
|
||||
|
||||
폼 데이터가 데이터베이스에 성공적으로 저장되게 하고 싶은데, 어떻게 해야 하나요?
|
||||
```
|
||||
|
||||
**핵심 원칙:**
|
||||
|
||||
- 전문 용어를 쓰지 말고 일상어로 설명합니다.
|
||||
- 시간 순서대로 말합니다. 먼저 무엇을 했고, 그다음 무엇이 일어났는지.
|
||||
- 기대한 결과를 말해 AI가 당신이 원하는 바를 알게 합니다.
|
||||
|
||||
## 2. 1단계: 현상을 바로 설명하며 질문하기
|
||||
|
||||
문제를 만났을 때 <strong>급하게 F12를 열지 마세요</strong>. 먼저 현상을 직접 설명하고, 현재 화면을 캡처해 AI에게 던져 보세요.
|
||||
|
||||
많은 경우 AI는 스크린샷만 보고도 바로 해결 방안을 줄 수 있습니다.
|
||||
|
||||
### 2.1 흔한 현상은 어떻게 설명할까
|
||||
|
||||
::: tip 바로 설명하면 됩니다
|
||||
|
||||
**페이지가 하얗게 비어 있음**
|
||||
|
||||
```
|
||||
페이지를 열면 비어 있어요. 어떻게 해야 하나요?
|
||||
|
||||
[스크린샷]
|
||||
```
|
||||
|
||||
**버튼을 클릭해도 반응이 없음**
|
||||
|
||||
```
|
||||
이 버튼을 클릭해도 반응이 없어요. 한번 봐 주세요.
|
||||
|
||||
[스크린샷]
|
||||
```
|
||||
|
||||
**데이터가 저장되지 않음**
|
||||
|
||||
```
|
||||
저장을 눌렀는데 데이터가 저장되지 않아요. 어떻게 해야 하나요?
|
||||
|
||||
[스크린샷]
|
||||
```
|
||||
|
||||
**스타일 표시가 이상함**
|
||||
|
||||
```
|
||||
이 버튼 위치가 어긋났어요. 어떻게 조정하나요?
|
||||
|
||||
[스크린샷]
|
||||
```
|
||||
|
||||
**인터페이스 오류**
|
||||
|
||||
```
|
||||
인터페이스 호출에서 오류가 났어요. 봐 주세요.
|
||||
|
||||
[스크린샷]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 2.2 AI가 바로 해결했다면
|
||||
|
||||
축하합니다. 문제가 해결되었습니다. AI가 말한 대로 수정하면 됩니다.
|
||||
|
||||
### 2.3 AI가 "더 많은 정보가 필요하다"고 말한다면
|
||||
|
||||
그때 F12를 열어 핵심 정보를 보충하면 됩니다. 아래를 계속 보세요.
|
||||
|
||||
## 3. 2단계: 핵심 정보 보충하기
|
||||
|
||||
AI가 더 많은 정보가 필요하다고 말할 때는 문제 유형에 따라 F12를 열고 해당 내용을 캡처합니다.
|
||||
|
||||
### 3.1 언제 정보를 보충해야 할까
|
||||
|
||||
AI가 이렇게 답할 수 있습니다.
|
||||
|
||||
- "Console을 열어 오류가 있는지 확인해 주세요."
|
||||
- "Network 패널을 캡처해 주세요."
|
||||
- "구체적인 오류 정보가 필요합니다."
|
||||
|
||||
이때 아래 안내에 따라 스크린샷을 보충합니다.
|
||||
|
||||
### 3.2 Console 정보 보충하기(페이지 빈 화면/오류)
|
||||
|
||||
::: tip 작업 단계
|
||||
|
||||
**1단계: F12를 눌러 개발자 도구 열기**
|
||||
|
||||
Mac에서는 `Cmd+Option+I`를 누르거나, 페이지에서 우클릭 후 "검사"를 선택합니다.
|
||||
|
||||
**2단계: Console 탭으로 전환**
|
||||
|
||||
**3단계: 빨간색 오류 정보를 캡처**
|
||||
|
||||
**4단계: AI에게 보내기**
|
||||
|
||||
```
|
||||
Console 오류는 다음과 같습니다.
|
||||
|
||||
[스크린샷]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 3.3 Network 정보 보충하기(데이터 문제/API 오류)
|
||||
|
||||
::: tip 작업 단계
|
||||
|
||||
**1단계: F12를 눌러 개발자 도구 열기**
|
||||
|
||||
**2단계: Network 탭으로 전환**
|
||||
|
||||
**3단계: 작업을 다시 한 번 수행**(저장 클릭/페이지 새로고침)
|
||||
|
||||
**4단계: 해당 요청을 찾아 캡처**
|
||||
|
||||
- URL과 상태 코드 보기
|
||||
- Payload(전송한 파라미터) 보기
|
||||
- Response(반환 결과) 보기
|
||||
|
||||
**5단계: AI에게 보내기**
|
||||
|
||||
```
|
||||
Network 정보는 다음과 같습니다.
|
||||
|
||||
요청: [스크린샷1]
|
||||
파라미터: [스크린샷2]
|
||||
반환: [스크린샷3]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
### 3.4 Elements 정보 보충하기(스타일 문제)
|
||||
|
||||
::: tip 작업 단계
|
||||
|
||||
**1단계: 요소 우클릭 → "검사"**
|
||||
|
||||
개발자 도구가 해당 요소로 자동 이동합니다.
|
||||
|
||||
**2단계: Styles 패널 캡처**
|
||||
|
||||
**3단계: AI에게 보내기**
|
||||
|
||||
```
|
||||
요소 스타일은 다음과 같습니다.
|
||||
|
||||
[스크린샷]
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
## 4. 3단계: 해결될 때까지 반복하기
|
||||
|
||||
### 4.1 비효율적인 방식
|
||||
|
||||
이런 방식은 시간을 낭비합니다.
|
||||
|
||||
오류를 보자마자 당황해서 코드를 마구 고치기
|
||||
오류 해결책을 검색하는 데 30분 쓰기
|
||||
모든 오류의 뜻을 스스로 이해하려 하기
|
||||
혼자 밤늦게까지 debug하기
|
||||
|
||||
### 4.2 효율적인 방식
|
||||
|
||||
이 흐름을 따르세요.
|
||||
|
||||
먼저 현상 설명과 스크린샷으로 바로 질문하기
|
||||
AI가 더 많은 정보가 필요하다고 말할 때만 F12를 열어 보충하기
|
||||
제안에 따라 코드 수정하기
|
||||
수정 후 테스트하고, 문제가 남아 있으면 계속 캡처해 질문하기
|
||||
|
||||
## 5. 정리: 전체 흐름
|
||||
|
||||
```
|
||||
문제 발생
|
||||
↓
|
||||
현상 설명 + 스크린샷
|
||||
↓
|
||||
AI에게 던지기: "어떻게 해야 하나요?"
|
||||
↓
|
||||
AI가 바로 해결?
|
||||
↓ 예
|
||||
AI가 말한 대로 하기
|
||||
↓
|
||||
해결됐는지 테스트
|
||||
↓
|
||||
↓ 아니오 / AI가 더 많은 정보 필요
|
||||
F12를 열어 핵심 정보 보충
|
||||
↓
|
||||
다시 AI에게 보내기
|
||||
↓
|
||||
해결될 때까지 반복
|
||||
```
|
||||
|
||||
@@ -0,0 +1,642 @@
|
||||
---
|
||||
title: 'C 사이드 소비 장면 영감 참고'
|
||||
description: '이 문서는 LLM 대형 모델이 C 사이드 소비 장면에서 창의적으로 적용될 수 있는 방향을 정리합니다. 라이프스타일, 감정적 동행, 엔터테인먼트와 휴식, 개인 성장, 소셜 상호작용 등 영역의 영감 장면을 다루며, 일반 소비자를 향한 AI 앱 개발자에게 참고 자료를 제공합니다.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const duration = '약 <strong>4시간</strong>'
|
||||
|
||||
const vibePoint = ref('')
|
||||
const feeling = ref('')
|
||||
|
||||
// 각 장면의 주제 풀 - 느낌, 분위기, 심리적 암시를 강조
|
||||
const topicPool = {
|
||||
'lifestyle': [
|
||||
{ title: '아침 의식감 깨우기 도우미', desc: '날씨, 일정, 기분에 따라 전용 아침 의식을 생성해 하루를 기분 좋게 시작하게 합니다' },
|
||||
{ title: '혼자 사는 생활 분위기 연출가', desc: '혼자 사는 사람을 위해 조명, 음악, 향의 스마트 조합을 포함한 집 안 분위기 방안을 설계합니다' },
|
||||
{ title: '주말 집콕 치유 계획 생성기', desc: '현재 기분에 따라 영화+간식+분위기 꾸미기의 완벽한 집콕 조합을 추천합니다' },
|
||||
{ title: '잠들기 전 마음 위로 라디오', desc: '부드러운 이야기와 명상 안내를 생성해 잠들 때 함께하는 개인 라디오가 됩니다' },
|
||||
{ title: '생활 미학 영감 포착기', desc: '일상의 작은 일에서 아름다움을 발견하고, 생활 미학 제안과 의식감 가이드를 생성합니다' }
|
||||
],
|
||||
'emotion': [
|
||||
{ title: '깊은 밤의 마음 구멍 청취자', desc: '24시간 온라인 감정 쓰레기통처럼, 판단 없이 모든 마음속 일을 받아들입니다' },
|
||||
{ title: '이별 치유 동행자', desc: '이별의 저점에서 부드러운 동행, 치유 제안, 감정의 출구를 제공합니다' },
|
||||
{ title: '불안 완화 호흡 코치', desc: '불안 감정을 감지하고 호흡 연습과 마음챙김 명상을 안내합니다' },
|
||||
{ title: '자신감 재건 멘토', desc: '긍정적 대화와 심리적 암시를 통해 자기 인정과 가치감을 다시 세우도록 돕습니다' },
|
||||
{ title: '감정 일기 지능형 해석', desc: '감정 일기를 분석해 감정 패턴을 발견하고 따뜻한 통찰과 제안을 제공합니다' }
|
||||
],
|
||||
'entertainment': [
|
||||
{ title: '몰입형 추리 게임 DM', desc: '추리 게임 진행자 역할을 맡아 미스터리 분위기를 만들고 이야기 전개를 밀어 줍니다' },
|
||||
{ title: '오픈월드 게임의 영혼 있는 NPC', desc: '살아 있는 듯한 NPC가 플레이어의 이야기를 기억하고 진짜 감정적 유대를 만듭니다' },
|
||||
{ title: '개인화 팟캐스트 콘텐츠 생성', desc: '관심사에 따라 전용 팟캐스트를 생성해 친구와 대화하듯 자연스럽게 들려줍니다' },
|
||||
{ title: '가상 콘서트 분위기 팀', desc: '온라인 콘서트에 현장감을 만들고, 실시간 상호작용, 응원, 분위기 연출을 제공합니다' },
|
||||
{ title: '인터랙티브 소설 공동 창작 파트너', desc: '독자와 함께 이야기를 만들며, 모든 선택이 세계의 방향에 영향을 줍니다' }
|
||||
],
|
||||
'growth': [
|
||||
{ title: '개인 성장 목격자', desc: '성장 궤적을 기록하고 중요한 지점에서 격려와 회고를 제공합니다' },
|
||||
{ title: '습관 형성 게임화 코치', desc: '지루한 습관 형성을 재미있는 모험 게임으로 바꿉니다' },
|
||||
{ title: '기술 학습 메이트 매칭', desc: '뜻이 맞는 학습 파트너를 찾아 서로 독려하고 진전을 나누게 합니다' },
|
||||
{ title: '매일의 작은 행복 발견자', desc: '생활 속 작은 아름다움을 발견하도록 돕고 감사와 긍정의 태도를 기릅니다' },
|
||||
{ title: '인생 시뮬레이션 체험기', desc: '서로 다른 인생 선택을 시뮬레이션해 평행 시공간의 다른 가능성을 경험하게 합니다' }
|
||||
],
|
||||
'social': [
|
||||
{ title: '아이스브레이킹 대화 주제 생성기', desc: '소셜 상황에서 재미있는 주제를 제공해 어색함을 풀고 거리를 좁힙니다' },
|
||||
{ title: '친구 피드 문구 분위기 연출가', desc: '사진과 기분에 따라 감각 있는 친구 피드 문구를 생성합니다' },
|
||||
{ title: '데이트 분위기 기획자', desc: '장소부터 대화 주제와 작은 놀라움까지, 데이트를 위한 완전한 분위기 방안을 설계합니다' },
|
||||
{ title: '원격 모임 분위기 담당', desc: '온라인 모임에서 분위기를 띄우고 게임을 조직하며 상호작용을 안내합니다' },
|
||||
{ title: '소셜 에너지 관리 도우미', desc: '내향적인 사람이 소셜 에너지를 관리하고 편안한 소셜 리듬을 찾도록 돕습니다' }
|
||||
],
|
||||
'creative': [
|
||||
{ title: '영감 고갈 응급 키트', desc: '창의적 병목에 있을 때 예상치 못한 영감의 불꽃을 제공합니다' },
|
||||
{ title: '개인 스타일 탐색 가이드', desc: '옷차림부터 표현 방식까지 독특한 개인 스타일을 발견하도록 돕습니다' },
|
||||
{ title: '다이어리와 일기 미학 컨설턴트', desc: '다이어리 레이아웃, 색 조합, 콘텐츠 아이디어에 대한 미학 제안을 제공합니다' },
|
||||
{ title: '사진 구도 분위기 가이드', desc: '장면과 원하는 느낌에 따라 촬영과 보정 제안을 제공합니다' },
|
||||
{ title: '음악 기분 매칭 전문가', desc: '현재 기분과 장면에 따라 완벽한 음악 조합을 추천합니다' }
|
||||
],
|
||||
'travel': [
|
||||
{ title: '도시 산책 탐색 가이드', desc: '현지인처럼 도시를 탐색하고 숨겨진 보물 같은 장소를 발견합니다' },
|
||||
{ title: '여행 기분 일기 생성', desc: '여행 사진과 기분을 아름다운 여행기와 추억으로 바꿉니다' },
|
||||
{ title: '혼자 여행 동행 도우미', desc: '혼자 여행하는 사람에게 동행감, 제안, 안전감을 제공합니다' },
|
||||
{ title: '목적지 분위기 미리보기', desc: '출발 전 목적지 분위기를 몰입감 있게 경험하고 미리 상태에 들어가게 합니다' },
|
||||
{ title: '여행 사진 분위기 지도', desc: '장면과 빛에 따라 이야기가 있는 여행 사진을 찍도록 안내합니다' }
|
||||
],
|
||||
'health': [
|
||||
{ title: '운동 동기 깨우기 코치', desc: '움직이기 싫을 때 딱 맞는 격려와 동기를 제공합니다' },
|
||||
{ title: '건강 식단 영감 주방', desc: '기분과 식재료에 따라 치유감 있는 건강 레시피를 생성합니다' },
|
||||
{ title: '수면 품질 최적화 분위기 연출가', desc: '환경부터 심리까지, 좋은 수면 분위기를 전방위로 만듭니다' },
|
||||
{ title: '몸 감각 안내자', desc: '몸의 신호에 주의를 기울이고 몸과 마음의 연결을 세우도록 안내합니다' },
|
||||
{ title: '자기 돌봄 알림 도우미', desc: '바쁜 중에도 잠시 멈춰 자신을 돌보라고 알려 줍니다' }
|
||||
],
|
||||
'learning': [
|
||||
{ title: '지식 탐색 게임화 가이드', desc: '지루한 지식 학습을 재미있는 탐험 모험으로 바꿉니다' },
|
||||
{ title: '언어 학습 상황 파트너', desc: '서로 다른 역할을 맡아 상황 대화 속에서 자연스럽게 언어를 익히게 합니다' },
|
||||
{ title: '호기심 충족 도우미', desc: '온갖 기발한 질문에 답하며 세계에 대한 호기심을 채워 줍니다' },
|
||||
{ title: '독서 노트 영감 자극', desc: '독서 감상을 정리하고 새로운 사고 각도를 발견하도록 돕습니다' },
|
||||
{ title: '지식 공유 분위기 조성', desc: '배운 지식을 재미있는 공유 콘텐츠로 바꿉니다' }
|
||||
],
|
||||
'relationship': [
|
||||
{ title: '친밀한 관계 소통 코치', desc: '말하기 어려운 감정을 표현하도록 돕고 친밀한 관계를 개선합니다' },
|
||||
{ title: '가족 돌봄 알림 도우미', desc: '가족을 챙기도록 알려 주고 따뜻한 상호작용 제안을 제공합니다' },
|
||||
{ title: '우정 유지 분위기 연출가', desc: '멀리 떨어진 우정을 유지하고 공통 대화 주제를 만듭니다' },
|
||||
{ title: '고백과 서프라이즈 기획자', desc: '소중한 사람을 위해 잊기 어려운 놀라움과 로맨틱한 순간을 기획합니다' },
|
||||
{ title: '갈등 완화 분위기 안내', desc: '관계가 긴장될 때 분위기를 누그러뜨리는 제안과 말투를 제공합니다' }
|
||||
],
|
||||
'pet': [
|
||||
{ title: '반려동물 의인화 일기', desc: '반려동물의 시점으로 일기를 생성해 보호자와의 따뜻한 일상을 기록합니다' },
|
||||
{ title: '반려동물 행동 해석가', desc: '반려동물의 행동 언어를 해석해 반려동물과의 연결을 깊게 합니다' },
|
||||
{ title: '반려동물 동행 시간 기획', desc: '반려동물과 상호작용하는 창의적 활동을 설계해 애정을 키웁니다' },
|
||||
{ title: '반려동물 추억 이야기 생성', desc: '반려동물의 사진과 추억을 따뜻한 이야기로 바꿉니다' },
|
||||
{ title: '초보 반려인 안심 가이드', desc: '초보 반려동물 보호자에게 따뜻한 동행과 안내를 제공합니다' }
|
||||
],
|
||||
'finance': [
|
||||
{ title: '소비 감정 알아차림 도우미', desc: '충동 소비 뒤의 감정을 알아차리고 건강한 소비관을 세웁니다' },
|
||||
{ title: '저축 목표 시각화 동기부여', desc: '저축 목표를 눈에 보이는 꿈의 진척도로 바꿉니다' },
|
||||
{ title: '재테크 지식 쉽게 배우기', desc: '가볍고 재미있는 방식으로 재테크 지식을 배웁니다' },
|
||||
{ title: '재무 불안 완화 코치', desc: '재무 압박을 마주할 때 감정 지원과 실용적인 제안을 제공합니다' },
|
||||
{ title: '소액 투자 체험 게임', desc: '게임화 방식으로 투자를 경험해 진입 문턱을 낮춥니다' }
|
||||
],
|
||||
'career': [
|
||||
{ title: '커리어 방황 동행자', desc: '커리어가 막막할 때 경청, 탐색, 방향 제안을 제공합니다' },
|
||||
{ title: '일의 성취감 깨우기 코치', desc: '일 속의 가치와 의미를 발견하게 해 열정을 다시 살립니다' },
|
||||
{ title: '직장 소셜 분위기 도우미', desc: '직장 소셜을 위한 가벼운 대화 주제와 상호작용 제안을 제공합니다' },
|
||||
{ title: '사이드 프로젝트 영감 자극기', desc: '개인 관심사와 기술을 바탕으로 부업 아이디어를 자극합니다' },
|
||||
{ title: '면접 전 자신감 충전소', desc: '면접 전에 심리적 준비와 자신감 격려를 제공합니다' }
|
||||
],
|
||||
'home': [
|
||||
{ title: '집 공간 분위기 디자이너', desc: '기분과 계절에 따라 집 안 분위기 방안을 설계합니다' },
|
||||
{ title: '사계절 집 꾸미기 변화 가이드', desc: '계절 변화에 맞춰 집 배치를 바꾸어 신선함을 유지합니다' },
|
||||
{ title: '작은 집 공간 마법', desc: '작은 공간도 편안하고 따뜻한 분위기를 갖게 합니다' },
|
||||
{ title: '집 생활 의식감 창조자', desc: '일상의 집 활동에 의식감을 만듭니다' },
|
||||
{ title: '정리와 비움 심리 동행', desc: '물건을 정리할 때 심리적 지원과 의사결정 제안을 제공합니다' }
|
||||
],
|
||||
'food': [
|
||||
{ title: '혼밥 치유 요리', desc: '혼자 사는 사람을 위해 간단하고 치유감 있는 요리 방안을 설계합니다' },
|
||||
{ title: '명절 식탁 분위기 설계', desc: '특별한 날을 위해 의식감 있는 식탁 구성을 설계합니다' },
|
||||
{ title: '요리 기분 매칭 전문가', desc: '현재 기분에 따라 어울리는 음식과 조리법을 추천합니다' },
|
||||
{ title: '요리 초보 자신감 세우기', desc: '요리 입문자에게 따뜻한 격려와 간단한 레시피를 제공합니다' },
|
||||
{ title: '음식 사진 분위기 가이드', desc: '집밥도 먹음직스러운 분위기로 찍을 수 있게 합니다' }
|
||||
],
|
||||
'fashion': [
|
||||
{ title: '오늘의 착장 무드보드', desc: '날씨, 상황, 기분에 따라 착장 영감을 생성합니다' },
|
||||
{ title: '캡슐 옷장 코디 전문가', desc: '한정된 아이템으로 무한한 코디 가능성을 만듭니다' },
|
||||
{ title: '개인 스타일 탐색 여행', desc: '독특한 개인 스타일을 발견하고 세우도록 돕습니다' },
|
||||
{ title: '헌 옷 새롭게 입기 크리에이터', desc: '오래된 옷에 새로운 코디 영감을 제공합니다' },
|
||||
{ title: '특별한 자리 스타일링 컨설턴트', desc: '중요한 자리에 자신감을 주는 스타일링을 설계합니다' }
|
||||
]
|
||||
}
|
||||
|
||||
// 미리 정의한 추천 경로 매핑 테이블 - 분위기와 느낌 기반
|
||||
const recommendationMap = {
|
||||
// 분위기 지점: 치유 계열
|
||||
'healing': {
|
||||
'relax': ['emotion', 'lifestyle', 'health', 'home'],
|
||||
'inspire': ['creative', 'growth', 'learning', 'entertainment'],
|
||||
'connect': ['relationship', 'social', 'pet', 'emotion'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// 분위기 지점: 성장 계열
|
||||
'growth': {
|
||||
'relax': ['growth', 'learning', 'creative', 'health'],
|
||||
'inspire': ['career', 'learning', 'creative', 'growth'],
|
||||
'connect': ['social', 'relationship', 'career', 'learning'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// 분위기 지점: 소셜 계열
|
||||
'social': {
|
||||
'relax': ['social', 'pet', 'food', 'home'],
|
||||
'inspire': ['social', 'creative', 'entertainment', 'travel'],
|
||||
'connect': ['relationship', 'social', 'pet', 'travel'],
|
||||
'escape': ['social', 'travel', 'entertainment', 'creative']
|
||||
},
|
||||
// 분위기 지점: 탐색 계열
|
||||
'explore': {
|
||||
'relax': ['travel', 'creative', 'lifestyle', 'food'],
|
||||
'inspire': ['travel', 'creative', 'learning', 'entertainment'],
|
||||
'connect': ['travel', 'social', 'relationship', 'pet'],
|
||||
'escape': ['travel', 'entertainment', 'creative', 'lifestyle']
|
||||
},
|
||||
// 분위기 지점: 일상 계열
|
||||
'daily': {
|
||||
'relax': ['lifestyle', 'home', 'health', 'emotion'],
|
||||
'inspire': ['creative', 'food', 'fashion', 'home'],
|
||||
'connect': ['relationship', 'social', 'pet', 'lifestyle'],
|
||||
'escape': ['entertainment', 'creative', 'travel', 'lifestyle']
|
||||
}
|
||||
}
|
||||
|
||||
const vibeOptions = [
|
||||
{ label: '치유 계열', value: 'healing', desc: '따뜻함, 안정, 치유' },
|
||||
{ label: '성장 계열', value: 'growth', desc: '진전, 돌파, 변화' },
|
||||
{ label: '소셜 계열', value: 'social', desc: '연결, 공유, 상호작용' },
|
||||
{ label: '탐색 계열', value: 'explore', desc: '호기심, 모험, 발견' },
|
||||
{ label: '일상 계열', value: 'daily', desc: '평범함, 진실함, 지금 이 순간' }
|
||||
]
|
||||
|
||||
const feelingOptions = [
|
||||
{ label: '쉬고 싶다', value: 'relax', desc: '압박을 풀고 자신을 비우기' },
|
||||
{ label: '영감을 찾고 싶다', value: 'inspire', desc: '창의성을 자극하고 깨달음 얻기' },
|
||||
{ label: '연결을 갈망한다', value: 'connect', desc: '사람과 연결되고 감정적으로 공명하기' },
|
||||
{ label: '잠시 벗어나고 싶다', value: 'escape', desc: '현실에서 벗어나 몰입 경험하기' }
|
||||
]
|
||||
|
||||
const scenarios = [
|
||||
{ key: 'lifestyle', name: '생활 방식', anchor: '#_1-생활-방식' },
|
||||
{ key: 'emotion', name: '감정적 동행', anchor: '#_2-감정적-동행' },
|
||||
{ key: 'entertainment', name: '엔터테인먼트와 휴식', anchor: '#_3-엔터테인먼트와-휴식' },
|
||||
{ key: 'growth', name: '개인 성장', anchor: '#_4-개인-성장' },
|
||||
{ key: 'social', name: '소셜 상호작용', anchor: '#_5-소셜-상호작용' },
|
||||
{ key: 'creative', name: '창의적 표현', anchor: '#_6-창의적-표현' },
|
||||
{ key: 'travel', name: '여행 탐색', anchor: '#_7-여행-탐색' },
|
||||
{ key: 'health', name: '몸과 마음의 건강', anchor: '#_8-몸과-마음의-건강' },
|
||||
{ key: 'learning', name: '지식 탐색', anchor: '#_9-지식-탐색' },
|
||||
{ key: 'relationship', name: '관계 운영', anchor: '#_10-관계-운영' },
|
||||
{ key: 'pet', name: '반려동물 동행', anchor: '#_11-반려동물-동행' },
|
||||
{ key: 'finance', name: '재무 건강', anchor: '#_12-재무-건강' },
|
||||
{ key: 'career', name: '커리어 발전', anchor: '#_13-커리어-발전' },
|
||||
{ key: 'home', name: '집 공간', anchor: '#_14-집-공간' },
|
||||
{ key: 'food', name: '음식과 요리', anchor: '#_15-음식과-요리' },
|
||||
{ key: 'fashion', name: '착장과 스타일', anchor: '#_16-착장과-스타일' }
|
||||
]
|
||||
|
||||
// 추천 결과 계산 - 주제 풀에서 무작위 추출
|
||||
const recommendationTopics = computed(() => {
|
||||
if (!vibePoint.value || !feeling.value) return []
|
||||
|
||||
const keys = recommendationMap[vibePoint.value]?.[feeling.value] || []
|
||||
const topics = []
|
||||
|
||||
// 각 추천 장면에서 주제 1-2개를 무작위로 추출
|
||||
keys.forEach(key => {
|
||||
const scenario = scenarios.find(item => item.key === key)
|
||||
const scenarioTopics = topicPool[key] || []
|
||||
|
||||
if (scenario && scenarioTopics.length > 0) {
|
||||
// 주제 1-2개를 무작위로 추출
|
||||
const count = Math.floor(Math.random() * 2) + 1
|
||||
const shuffled = [...scenarioTopics].sort(() => Math.random() - 0.5)
|
||||
const selected = shuffled.slice(0, Math.min(count, shuffled.length))
|
||||
|
||||
selected.forEach(topic => {
|
||||
topics.push({
|
||||
...topic,
|
||||
scenarioKey: key,
|
||||
scenarioName: scenario.name,
|
||||
scenarioAnchor: scenario.anchor
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// 무작위로 정렬하고 총개수 제한
|
||||
return topics.sort(() => Math.random() - 0.5).slice(0, 8)
|
||||
})
|
||||
|
||||
// 현재 선택의 설명 가져오기
|
||||
const currentSelection = computed(() => {
|
||||
const vibe = vibeOptions.find(i => i.value === vibePoint.value)
|
||||
const feel = feelingOptions.find(p => p.value === feeling.value)
|
||||
return {
|
||||
vibe: vibe?.label || '',
|
||||
feeling: feel?.label || ''
|
||||
}
|
||||
})
|
||||
|
||||
const scrollToAnchor = (anchor) => {
|
||||
// DOM 업데이트 완료를 보장하기 위해 지연 스크롤
|
||||
setTimeout(() => {
|
||||
// ID로 찾기 시도(여러 형식 지원)
|
||||
let element = document.querySelector(anchor)
|
||||
|
||||
// 찾지 못하면 다른 가능한 ID 형식 시도
|
||||
if (!element) {
|
||||
// 밑줄 접두사 제거 시도
|
||||
const altAnchor = anchor.replace('#_', '#')
|
||||
element = document.querySelector(altAnchor)
|
||||
}
|
||||
|
||||
// 그래도 찾지 못하면 제목 텍스트로 찾기
|
||||
if (!element) {
|
||||
// 앵커에서 장면 이름 추출
|
||||
const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
|
||||
const headings = document.querySelectorAll('h2, h3')
|
||||
|
||||
for (let heading of headings) {
|
||||
const headingText = heading.textContent.trim()
|
||||
// 완전 일치 또는 포함 일치
|
||||
const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
|
||||
if (cleanHeading === anchorText || headingText.includes(anchorText)) {
|
||||
element = heading
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
})
|
||||
// 목표 문단 강조 표시
|
||||
element.style.backgroundColor = '#fdf2f8'
|
||||
element.style.transition = 'background-color 0.3s'
|
||||
element.style.padding = '8px'
|
||||
element.style.borderRadius = '4px'
|
||||
setTimeout(() => {
|
||||
element.style.backgroundColor = ''
|
||||
element.style.padding = ''
|
||||
}, 2000)
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const resetSelection = () => {
|
||||
vibePoint.value = ''
|
||||
feeling.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
# C 사이드 소비 장면 영감 참고
|
||||
|
||||
## 장 안내
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['C 사이드 앱', '생활 방식', '감정 경험', '분위기 조성']" coreOutput="생활 장면 영감 15개 이상 발견" expectedOutput="사용자를 움직이는 제품 방향 찾기">
|
||||
|
||||
이 문서는 <strong>LLM 대형 모델이 C 사이드 소비 장면에서 창의적으로 적용될 수 있는 방향</strong>을 정리합니다. 효율과 고통 지점에 관심을 두는 B 사이드와 달리, C 사이드 제품은 <strong>느낌, 심리적 암시, 분위기 조성</strong>을 더 중시하며, 사용자가 사용 과정에서 감정적 공명과 좋은 경험을 얻도록 합니다.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
## 장면 분위기 빠른 선택
|
||||
|
||||
<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #ec4899;">
|
||||
<div style="font-weight: 600; margin-bottom: 8px;">당신을 건드리는 장면 영감 찾기</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
원하는 분위기와 지금의 느낌을 선택하면, 시스템이 관련 장면 방향을 추천합니다. 태그를 클릭하면 해당 절로 이동합니다.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-select v-model="vibePoint" placeholder="분위기 유형 선택" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in vibeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<div style="font-weight: 500;">{{ item.label }}</div>
|
||||
<div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="feeling" placeholder="현재 느낌 선택" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in feelingOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
<div style="font-weight: 500;">{{ item.label }}</div>
|
||||
<div style="font-size: 12px; color: #909399;">{{ item.desc }}</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
|
||||
<div style="font-weight: 600; margin-bottom: 12px; color: #ec4899;">
|
||||
당신을 위한 {{ currentSelection.vibe }} × {{ currentSelection.feeling }} 장면 추천:
|
||||
</div>
|
||||
<div style="display: flex; flex-wrap: wrap; gap: 8px;">
|
||||
<el-tag
|
||||
v-for="topic in recommendationTopics"
|
||||
:key="topic.title"
|
||||
type="danger"
|
||||
effect="light"
|
||||
style="cursor: pointer; margin-bottom: 4px;"
|
||||
@click="scrollToAnchor(topic.scenarioAnchor)"
|
||||
>
|
||||
{{ topic.title }}
|
||||
</el-tag>
|
||||
</div>
|
||||
<el-button type="text" size="small" @click="resetSelection" style="margin-top: 8px;">
|
||||
다시 선택
|
||||
</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
---
|
||||
|
||||
## 1. 생활 방식
|
||||
|
||||
> 💡 **핵심 관념**: 평범한 일상을 의식감 있게 만들고, 세부 속에서 아름다움을 창조합니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 앱 장면 기능 |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | 아침 의식감 깨우기 도우미 | 날씨 API와 캘린더 데이터를 통합하고 LLM이 개인화된 아침 방안을 생성합니다. 스마트 스피커로 맞춤 음악을 재생하고 스마트 조명을 서서히 밝힙니다 |
|
||||
| 2 | 혼자 사는 생활 분위기 연출가 | 스마트홈 기기(조명, 스피커, 디퓨저)를 연결하고, LLM이 시간/기분에 따라 매개변수를 자동 조절합니다. 사용자 선호를 학습해 계속 최적화합니다 |
|
||||
| 3 | 주말 집콕 치유 계획 생성기 | 스트리밍 플랫폼 API와 연결해 영화 목록을 가져오고, 사용자 과거 선호를 결합해 영화+음식+공간 꾸미기의 조합 방안을 생성합니다 |
|
||||
| 4 | 잠들기 전 마음 위로 라디오 | TTS 음성 합성으로 부드러운 이야기를 만들고, 백색소음 혼합 알고리즘과 스마트 볼륨 페이드아웃을 적용합니다. 수면 데이터에 따라 내용을 조정합니다 |
|
||||
| 5 | 생활 미학 영감 포착기 | 이미지 인식으로 사용자 환경 사진을 분석하고 LLM이 미학 제안을 생성합니다. Pinterest/Xiaohongshu 스타일 콘텐츠를 추천합니다 |
|
||||
|
||||
---
|
||||
|
||||
## 2. 감정적 동행
|
||||
|
||||
> 💡 **핵심 관념**: 무조건적인 수용과 동행으로 감정을 담아 주는 부드러운 그릇이 됩니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 앱 장면 기능 |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | 깊은 밤의 마음 구멍 청취자 | 종단 간 암호화로 개인정보를 보장하고, LLM 감정 분석으로 감정을 이해하며, 장기 기억에 사용자 이야기를 저장하고 다회차 대화로 계속 동행합니다 |
|
||||
| 2 | 이별 치유 동행자 | 감정 단계 인식 알고리즘으로 단계별 지원을 제공합니다(털어놓기 단계 -> 쏟아내기 단계 -> 재건 단계). 심리학 지식베이스 RAG 검색을 사용합니다 |
|
||||
| 3 | 불안 완화 호흡 코치 | 생체 센서 데이터(심박/호흡)를 연결하고 불안 수준을 실시간으로 감지합니다. 음성으로 호흡 리듬과 점진적 근육 이완을 안내합니다 |
|
||||
| 4 | 자신감 재건 멘토 | 긍정심리학 대화 프레임워크로 사용자의 작은 성취를 기록하고 피드백합니다. 인지 재구성 기술로 부정적 자기 대화를 바꾸도록 돕습니다 |
|
||||
| 5 | 감정 일기 지능형 해석 | 감정 인식 NLP 모델과 시계열 분석으로 감정 패턴을 발견합니다. 감정 그래프를 시각화하고 예측성 감정 경고를 제공합니다 |
|
||||
|
||||
---
|
||||
|
||||
## 3. 엔터테인먼트와 휴식
|
||||
|
||||
> 💡 **핵심 관념**: 몰입형 경험을 만들어 엔터테인먼트가 마음의 쉴 곳이 되게 합니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 앱 장면 기능 |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | 몰입형 추리 게임 DM | LLM이 실시간으로 이야기 분기를 생성하고, 음성 합성으로 NPC를 연기하며, 플레이어 반응에 따라 난이도와 리듬을 동적으로 조정합니다. AR/VR 장면을 렌더링합니다 |
|
||||
| 2 | 오픈월드 게임의 영혼 있는 NPC | 장기 기억 데이터베이스에 플레이어 상호작용 기록을 저장하고, LLM이 개인화 대화를 생성합니다. 감정 컴퓨팅으로 NPC가 실제 감정 반응을 갖게 합니다 |
|
||||
| 3 | 개인화 팟캐스트 콘텐츠 생성 | 사용자 관심 그래프에 따라 전용 콘텐츠를 생성하고, TTS로 사용자가 좋아하는 목소리를 복제합니다. 실시간 상호작용으로 청취자 질문에 답합니다 |
|
||||
| 4 | 가상 콘서트 분위기 팀 | 가상 아바타 렌더링, 실시간 댓글 상호작용, 가상 응원봉/응원 도구를 제공합니다. 공간 음향 기술로 현장감을 만듭니다 |
|
||||
| 5 | 인터랙티브 소설 공동 창작 파트너 | LLM이 실시간으로 이야기를 생성하고, 사용자 선택이 이야기 방향에 영향을 줍니다. 다중 엔딩을 설계하고 인물 관계를 동적으로 발전시킵니다 |
|
||||
|
||||
---
|
||||
|
||||
## 4. 개인 성장
|
||||
|
||||
> 💡 **핵심 관념**: 성장은 고행이 아니라 재미있는 자기 발견의 여정입니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 앱 장면 기능 |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | 개인 성장 목격자 | 타임라인 시각화로 성장 궤적을 보여 주고, 이정표를 자동 표시합니다. "과거의 나"와 "지금의 나"를 비교 이미지로 보여 줍니다 |
|
||||
| 2 | 습관 형성 게임화 코치 | 게임화 메커니즘(경험치, 레벨, 배지), 소셜 순위표, AI 코치 역할극(예: "모험 멘토")을 제공합니다 |
|
||||
| 3 | 기술 학습 메이트 매칭 | 관심사와 학습 목표 기반 매칭 알고리즘, 학습 그룹 커뮤니티, 서로 감독하는 체크인 메커니즘을 제공합니다 |
|
||||
| 4 | 매일의 작은 행복 발견자 | 이미지 인식으로 생활 속 아름다운 순간을 발견하고, 감사 일기 안내와 매주 좋은 순간 회고를 제공합니다 |
|
||||
| 5 | 인생 시뮬레이션 체험기 | 다중 분기 이야기로 서로 다른 선택의 결과를 시뮬레이션하고, 평행 인생을 비교합니다. 의사결정 결과를 시각화합니다 |
|
||||
|
||||
---
|
||||
|
||||
## 5. 소셜 상호작용
|
||||
|
||||
> 💡 **핵심 관념**: 소셜을 가볍고 자연스럽게 만들고, 편안한 연결 방식을 찾습니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 앱 장면 기능 |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | 아이스브레이킹 대화 주제 생성기 | 장소와 참여자 기반의 지능형 주제 추천, 실시간 대화 분석을 통한 후속 주제 제안, 어색한 순간의 구원 힌트를 제공합니다 |
|
||||
| 2 | 친구 피드 문구 분위기 연출가 | 이미지 콘텐츠를 분석하고 LLM이 여러 스타일의 문구(문학적/유머러스/깊은 톤)를 생성합니다. 이모지와 레이아웃을 지능적으로 추천합니다 |
|
||||
| 3 | 데이트 분위기 기획자 | 양쪽 관심사를 바탕으로 데이트 방안을 생성하고, 식당/활동 추천과 대화 주제 제안을 제공합니다. 실시간 날씨와 교통 알림을 포함합니다 |
|
||||
| 4 | 원격 모임 분위기 담당 | 온라인 게임 라이브러리, 아이스브레이킹 활동 생성기, 주제 룰렛을 제공합니다. 가상 배경과 필터로 분위기를 강화합니다 |
|
||||
| 5 | 소셜 에너지 관리 도우미 | 소셜 활동 후 에너지 소모를 평가하고 회복 제안(혼자 하는 활동 추천)을 제공합니다. 소셜 캘린더를 지능적으로 계획합니다 |
|
||||
|
||||
---
|
||||
|
||||
## 6. 창의적 표현
|
||||
|
||||
> 💡 **핵심 관념**: 모든 사람에게는 창의력이 있고, 다만 깨워질 필요가 있습니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 앱 장면 기능 |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | 영감 고갈 응급 키트 | 분야 간 연상 알고리즘, 무작위 자극어 생성, 창의적 프롬프트 라이브러리, 마인드맵식 영감 발산 도구를 제공합니다 |
|
||||
| 2 | 개인 스타일 탐색 가이드 | 이미지 분석으로 사용자의 기존 스타일을 식별하고, 스타일 트렌드를 추천하며, 가상 착장/메이크업을 제공합니다. 스타일 진화 타임라인을 보여 줍니다 |
|
||||
| 3 | 다이어리와 일기 미학 컨설턴트 | 레이아웃 템플릿 추천, 색 조합 방안 생성, 장식 요소 제안을 제공합니다. 손글씨 인식과 콘텐츠 미화를 지원합니다 |
|
||||
| 4 | 사진 구도 분위기 가이드 | 장면 인식과 구도 제안, 필터 스타일 추천, 보정 매개변수 지능 조정을 제공합니다. 촬영 기술 학습 경로를 제시합니다 |
|
||||
| 5 | 음악 기분 매칭 전문가 | 음악 감정 분석 알고리즘, 사용자 기분 인식, 개인화 재생목록 생성을 제공합니다. 음악 이야기와 배경 소개도 제공합니다 |
|
||||
|
||||
---
|
||||
|
||||
## 7. 여행 탐색
|
||||
|
||||
> 💡 **핵심 관념**: 여행은 풍경을 보는 것뿐 아니라 서로 다른 생활 방식을 느끼는 일입니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 앱 장면 기능 |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | 도시 산책 탐색 가이드 | 현지 고수 콘텐츠를 모으고, 덜 알려진 장소를 추천하며, AR 내비게이션 안내를 제공합니다. 실시간 번역과 음성 해설을 지원합니다 |
|
||||
| 2 | 여행 기분 일기 생성 | 사진을 자동 분류하고 선별하며, LLM이 아름다운 여행기를 생성하고 위치 표시 타임라인을 만듭니다. 여행 영상을 한 번에 생성합니다 |
|
||||
| 3 | 혼자 여행 동행 도우미 | 실시간 위치 공유와 안전 알림, 현지 긴급 연락처, AI 가이드 음성 동행을 제공합니다. 혼자 여행 커뮤니티 교류를 지원합니다 |
|
||||
| 4 | 목적지 분위기 미리보기 | VR/360도 파노라마 미리보기, 현지 소리와 향기 시뮬레이션, 문화 배경 소개를 제공합니다. 가상 "미리 살아보기" 경험을 제공합니다 |
|
||||
| 5 | 여행 사진 분위기 지도 | 골든아워 알림, 구도 보조선, 현지 특색 촬영 지점 추천을 제공합니다. 후보정 색감 스타일 제안을 제공합니다 |
|
||||
|
||||
---
|
||||
|
||||
## 8. 몸과 마음의 건강
|
||||
|
||||
> 💡 **핵심 관념**: 건강은 목표가 아니라 부드러운 자기 돌봄의 방식입니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 앱 장면 기능 |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | 운동 동기 깨우기 코치 | 사용자 상태에 따라 운동 유형을 지능적으로 추천하고, 5분짜리 미니 운동 옵션과 게임화 운동 챌린지를 제공합니다. 소셜 운동 체크인을 지원합니다 |
|
||||
| 2 | 건강 식단 영감 주방 | 냉장고 식재료를 인식하고, 개인화 레시피 추천과 영양 조합 분석을 제공합니다. 단계별 조리 안내를 지원합니다 |
|
||||
| 3 | 수면 품질 최적화 분위기 연출가 | 수면 모니터링 데이터를 분석하고, 잠들기 전 의식을 생성하며, 환경 최적화 제안(온도/습도/빛)을 제공합니다. 스마트 기상을 지원합니다 |
|
||||
| 4 | 몸 감각 안내자 | 바디 스캔 명상 안내, 신체 부위와 감정의 연결, 몸과 마음 연결 연습을 제공합니다. 생체 피드백을 시각화합니다 |
|
||||
| 5 | 자기 돌봄 알림 도우미 | 업무 강도를 모니터링하고, 정기 휴식 알림과 작은 돌봄 활동 제안(물 마시기/스트레칭/깊은 호흡)을 제공합니다. 자기 돌봄을 기록합니다 |
|
||||
|
||||
---
|
||||
|
||||
## 9. 지식 탐색
|
||||
|
||||
> 💡 **핵심 관념**: 학습은 끝없는 모험이고, 호기심은 최고의 선생님입니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 앱 장면 기능 |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | 지식 탐색 게임화 가이드 | 지식 지도를 시각화하고, 스테이지형 학습 경로와 성취 배지 시스템을 제공합니다. AI 멘토 역할극을 지원합니다 |
|
||||
| 2 | 언어 학습 상황 파트너 | LLM이 서로 다른 역할을 맡아 대화하고, 발음 교정과 문화 배경 소개를 제공합니다. 몰입형 상황 시뮬레이션을 지원합니다 |
|
||||
| 3 | 호기심 충족 도우미 | 위키백과/지식 그래프를 연결하고, 복잡한 개념을 쉽게 설명하며, 관련 지식을 추천합니다. 호기심 기록을 제공합니다 |
|
||||
| 4 | 독서 노트 영감 자극 | 책 내용을 분석하고, 관점 추출과 연결, 사고 각도 추천을 제공합니다. 독서 노트 템플릿과 미화를 지원합니다 |
|
||||
| 5 | 지식 공유 분위기 조성 | 지식 카드를 자동 생성하고, 공유 문구를 최적화하며, 시각적으로 미화합니다. 소셜 공유 데이터 피드백을 제공합니다 |
|
||||
|
||||
---
|
||||
|
||||
## 10. 관계 운영
|
||||
|
||||
> 💡 **핵심 관념**: 좋은 관계는 정성껏 운영해야 하지만, 정성이 꼭 복잡할 필요는 없습니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 앱 장면 기능 |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | 친밀한 관계 소통 코치 | 감정 표현 템플릿 생성, 비폭력 대화 기술 안내, 갈등 해소 말투를 제공합니다. 관계 건강도를 평가합니다 |
|
||||
| 2 | 가족 돌봄 알림 도우미 | 중요한 날짜(생일/기념일)를 알려 주고, 돌봄 표현 제안과 가족 활동 추천을 제공합니다. 가족 앨범을 생성합니다 |
|
||||
| 3 | 우정 유지 분위기 연출가 | 친구 상호작용 기록, 공통 주제 추천, 원격 모임 조직을 제공합니다. 우정 타임라인과 추억을 생성합니다 |
|
||||
| 4 | 고백과 서프라이즈 기획자 | 개인화된 서프라이즈 방안, 선물 추천, 로맨틱한 말투 제안을 제공합니다. 실행 일정표와 알림을 제공합니다 |
|
||||
| 5 | 갈등 완화 분위기 안내 | 감정 냉각 말투, 입장 바꿔 생각하기 안내, 화해 단계 제안을 제공합니다. 관계 회복을 추적합니다 |
|
||||
|
||||
---
|
||||
|
||||
## 11. 반려동물 동행
|
||||
|
||||
> 💡 **핵심 관념**: 반려동물은 가족이고, 그들의 동행은 기록되고 소중히 여겨질 가치가 있습니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 앱 장면 기능 |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | 반려동물 의인화 일기 | 반려동물 행동을 분석하고, 1인칭 일기를 생성하며, 사진을 자동으로 매칭합니다. 반려동물 "친구 피드"를 제공합니다 |
|
||||
| 2 | 반려동물 행동 해석가 | 반려동물 행동 영상을 분석하고, 건강 경고와 훈련 제안을 제공합니다. 품종 특성 지식베이스를 제공합니다 |
|
||||
| 3 | 반려동물 동행 시간 기획 | 반려동물 활동 추천, DIY 장난감 튜토리얼, 반려동물 친화 장소 추천을 제공합니다. 반려동물 소셜 매칭을 지원합니다 |
|
||||
| 4 | 반려동물 추억 이야기 생성 | 사진과 영상을 선별하고, 타임라인 이야기를 생성하며, 음악을 매칭합니다. 추억책/영상을 자동 생성합니다 |
|
||||
| 5 | 초보 반려인 안심 가이드 | 단계별 돌봄 가이드, 자주 묻는 질문 답변, 긴급 상황 처리를 제공합니다. 초보자 커뮤니티 지원을 제공합니다 |
|
||||
|
||||
---
|
||||
|
||||
## 12. 재무 건강
|
||||
|
||||
> 💡 **핵심 관념**: 재무 자유가 목표가 아니라, 재무 건강이 핵심입니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 앱 장면 기능 |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | 소비 감정 알아차림 도우미 | 소비 기록을 분석하고, 감정-소비 연관 분석과 충동 소비 경고를 제공합니다. 대체 만족 제안을 제공합니다 |
|
||||
| 2 | 저축 목표 시각화 동기부여 | 목표 진척도를 시각화하고, 꿈의 장면을 렌더링하며, 이정표를 축하합니다. 저축 습관 형성 게임을 제공합니다 |
|
||||
| 3 | 재테크 지식 쉽게 배우기 | 자투리 지식 푸시, 장면화 사례 교육, 인터랙티브 질의응답을 제공합니다. 지식 검사와 인증서를 제공합니다 |
|
||||
| 4 | 재무 불안 완화 코치 | 재무 상태 건강 평가, 스트레스 관리 기술, 작은 행동 계획을 제공합니다. 재무 심리 상담을 지원합니다 |
|
||||
| 5 | 소액 투자 체험 게임 | 가상 투자 시뮬레이션, 위험 교육, 투자 포트폴리오 게임을 제공합니다. 실제 소액 투자 안내를 제공합니다 |
|
||||
|
||||
---
|
||||
|
||||
## 13. 커리어 발전
|
||||
|
||||
> 💡 **핵심 관념**: 커리어는 정해진 궤도가 아니라 탐색할 수 있는 들판입니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 앱 장면 기능 |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | 커리어 방황 동행자 | 직업 관심사 평가, 역량 점검, 업계 정보 추천을 제공합니다. 커리어 멘토 대화를 지원합니다 |
|
||||
| 2 | 일의 성취감 깨우기 코치 | 업무 성과를 기록하고, 가치를 추출하며, 성취를 시각화합니다. 동료/고객의 긍정 피드백을 수집합니다 |
|
||||
| 3 | 직장 소셜 분위기 도우미 | 직장 대화 주제 추천, 네트워킹 기술, 업계 행사 추천을 제공합니다. LinkedIn 콘텐츠 최적화를 지원합니다 |
|
||||
| 4 | 사이드 프로젝트 영감 자극기 | 기술-관심사-시장 요구를 매칭하고, 부업 사례 라이브러리와 시작 가이드를 제공합니다. 부업 커뮤니티 교류를 지원합니다 |
|
||||
| 5 | 면접 전 자신감 충전소 | 모의 면접, 자주 나오는 질문 준비, 자신감 향상 기술을 제공합니다. 이미지 제안을 제공합니다 |
|
||||
|
||||
---
|
||||
|
||||
## 14. 집 공간
|
||||
|
||||
> 💡 **핵심 관념**: 집은 단지 거주하는 곳이 아니라, 마음이 머무는 곳입니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 앱 장면 기능 |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | 집 공간 분위기 디자이너 | 공간 사진을 분석하고, 스타일과 가구/장식을 추천합니다. AR 미리보기를 제공합니다 |
|
||||
| 2 | 사계절 집 꾸미기 변화 가이드 | 계절 테마 추천, 수납과 전시 제안, 명절 장식 방안을 제공합니다. 쇼핑 목록을 생성합니다 |
|
||||
| 3 | 작은 집 공간 마법 | 공간 최적화 알고리즘, 다기능 가구 추천, 수납 팁을 제공합니다. 시각적 확장 팁을 제공합니다 |
|
||||
| 4 | 집 생활 의식감 창조자 | 일상 의식(아침/저녁/주말)을 설계하고, 의식 실행 알림을 제공합니다. 의식 효과 피드백을 제공합니다 |
|
||||
| 5 | 정리와 비움 심리 동행 | 물건의 감정적 가치를 평가하고, 정리와 비움 단계를 안내하며, 심리적 지원을 제공합니다. 기부/재활용 채널을 추천합니다 |
|
||||
|
||||
---
|
||||
|
||||
## 15. 음식과 요리
|
||||
|
||||
> 💡 **핵심 관념**: 음식은 사랑의 언어이고, 요리는 사랑을 표현하는 방식입니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 앱 장면 기능 |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | 혼밥 치유 요리 | 냉장고 식재료를 인식하고 간단한 레시피를 추천하며 단계별 안내를 제공합니다. 혼밥 플레이팅 미학을 제안합니다 |
|
||||
| 2 | 명절 식탁 분위기 설계 | 명절 테마 메뉴, 식탁 배치 방안, 분위기 조성 팁을 제공합니다. 손님 경험을 최적화합니다 |
|
||||
| 3 | 요리 기분 매칭 전문가 | 기분-음식 연관 알고리즘, 감정 조절 레시피, 위로 음식 추천을 제공합니다. 요리 치유 안내를 제공합니다 |
|
||||
| 4 | 요리 초보 자신감 세우기 | 아주 간단한 레시피, 실패 수습 팁, 자신감 세우기 말투를 제공합니다. 점진적 난이도 향상을 지원합니다 |
|
||||
| 5 | 음식 사진 분위기 가이드 | 음식 플레이팅 제안, 자연광 활용, 촬영 각도 안내를 제공합니다. 필터와 후보정 제안을 제공합니다 |
|
||||
|
||||
---
|
||||
|
||||
## 16. 착장과 스타일
|
||||
|
||||
> 💡 **핵심 관념**: 착장은 자기표현이고, 스타일은 내면의 외적 표현입니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 앱 장면 기능 |
|
||||
| :--: | ------------ | ------------ |
|
||||
| 1 | 오늘의 착장 무드보드 | 날씨/상황/기분을 종합해 추천하고, 가상 착장을 제공하며, 코디 영감을 제공합니다. 옷장 관리를 지원합니다 |
|
||||
| 2 | 캡슐 옷장 코디 전문가 | 옷장을 점검하고, 아이템 코디 조합과 한 옷 여러 번 입기 방안을 제공합니다. 쇼핑 제안(빈틈 채우기)을 제공합니다 |
|
||||
| 3 | 개인 스타일 탐색 여행 | 스타일 테스트, 참고 아이콘 추천, 스타일 진화 경로를 제공합니다. 자신감 구축을 돕습니다 |
|
||||
| 4 | 헌 옷 새롭게 입기 크리에이터 | 헌 옷 리폼 영감, 새로운 코디 방식, 액세서리 포인트 팁을 제공합니다. 지속 가능한 패션 관념을 제시합니다 |
|
||||
| 5 | 특별한 자리 스타일링 컨설턴트 | 자리별 드레스 코드 해석, 스타일링 방안 생성, 메이크업과 헤어 제안을 제공합니다. 전체 스타일링 조화를 돕습니다 |
|
||||
|
||||
---
|
||||
|
||||
## C 사이드 제품을 설계하는 핵심 마음가짐
|
||||
|
||||
### 1. "기능"에서 "감정"으로
|
||||
|
||||
B 사이드 제품은 "이 기능이 어떤 문제를 해결하는가"에 관심을 두고, C 사이드 제품은 "이 기능이 어떤 느낌을 가져오는가"에 관심을 둡니다.
|
||||
|
||||
| B 사이드 사고 | C 사이드 사고 |
|
||||
|---------|---------|
|
||||
| 효율 향상 | 좋아하는 일을 할 시간을 아껴 줌 |
|
||||
| 비용 절감 | 돈 하나하나가 아깝지 않게 함 |
|
||||
| 고통 지점 해결 | 좋은 경험 창조 |
|
||||
| 기능 완비 | 느낌이 제대로 닿음 |
|
||||
|
||||
### 2. 분위기를 만드는 세 층위
|
||||
|
||||
**감각층**: 시각, 청각, 촉각의 설계
|
||||
- 따뜻한 색
|
||||
- 편안한 소리
|
||||
- 매끄러운 모션
|
||||
|
||||
**감정층**: 감정의 공명과 안내
|
||||
- 사용자의 마음 이해하기
|
||||
- 감정적 지원 제공하기
|
||||
- 긍정적 감정 만들기
|
||||
|
||||
**의미층**: 가치의 인정과 소속
|
||||
- 사용자가 이해받고 있다고 느끼게 하기
|
||||
- 소속감 만들기
|
||||
- 행동에 의미 부여하기
|
||||
|
||||
### 3. 심리적 암시의 힘
|
||||
|
||||
C 사이드 제품의 문구와 설계는 모두 심리적 암시를 전달합니다.
|
||||
|
||||
- **긍정 암시**: "이미 충분히 잘하고 있어요", "천천히 해도 괜찮아요"
|
||||
- **소속 암시**: "많은 사람이 당신과 같아요", "당신은 혼자가 아니에요"
|
||||
- **성장 암시**: "모든 시도는 진전이에요", "당신은 더 좋아지고 있어요"
|
||||
|
||||
### 4. 사용자가 더 나은 자신이 되게 하기
|
||||
|
||||
최고의 C 사이드 제품은 사용자를 바꾸는 것이 아니라, 사용자가 되고 싶은 자신이 되도록 돕습니다.
|
||||
|
||||
- "당신은 ...해야 한다"가 아니라 "당신은 ...할 수 있다"
|
||||
- "반드시 ...해야 한다"가 아니라 "원한다면 ..."
|
||||
- "아직 부족하다"가 아니라 "이미 ..."
|
||||
|
||||
---
|
||||
|
||||
> 🌟 **기억하세요**: C 사이드 사용자가 사는 것은 기능이 아니라 느낌이고, 도구가 아니라 동행이며, 서비스가 아니라 이해입니다.
|
||||
@@ -0,0 +1,11 @@
|
||||
---
|
||||
title: '소비자용 AI 제품 시나리오 참고'
|
||||
description: '소비자용 AI 제품 아이디어 참고 문서입니다.'
|
||||
---
|
||||
|
||||
# 소비자용 AI 제품 시나리오 참고
|
||||
|
||||
이 문서는 기존 경로 호환을 위한 페이지입니다. 한국어 Stage 1에서는 아래 문서를 기준으로 사용합니다.
|
||||
|
||||
[소비자용 AI 제품 시나리오 참고로 이동하기](/ko-kr/stage-1/appendix-c-consumer-scenarios/)
|
||||
|
||||
@@ -0,0 +1,545 @@
|
||||
---
|
||||
title: 'Double Diamond: 올바른 일을 먼저 하고, 그 일을 제대로 하기'
|
||||
description: '제로 베이스 독자를 위한 Double Diamond 입문 글입니다. Discover, Define, Develop, Deliver 네 단계를 이해하고, 문제가 명확해지기 전에 서둘러 프로토타입을 만드는 일을 피합니다.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = '약 <strong>1.5시간</strong>'
|
||||
</script>
|
||||
|
||||
# Double Diamond: 올바른 일을 먼저 하고, 그 일을 제대로 하기
|
||||
|
||||
<a id="top-dd"></a>
|
||||
|
||||
## 본 장 안내
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['Double Diamond', '디자인 사고', '요구사항 분석', '솔루션 설계']"
|
||||
coreOutput="더 명확한 문제 정의 1개와 더 합리적인 검증 진입점 1개"
|
||||
expectedOutput="처음부터 서둘러 프로토타입을 그리지 않고, 먼저 문제를 명확히 생각한 뒤 솔루션을 비교할 수 있게 됨"
|
||||
>
|
||||
|
||||
많은 사람이 처음 제품을 만들 때 가장 쉽게 빠지는 함정은 "노력이 부족하다"가 아니라 너무 빨리 해결책으로 들어가는 것입니다.
|
||||
|
||||
머릿속에 방향이 하나 떠오르자마자 페이지를 어떻게 그릴지, 버튼을 어디에 둘지, AI를 붙일지, 로그인/회원가입을 만들지, 어떤 도구로 프로토타입을 그릴지 생각하기 시작합니다. 한참 바쁘게 움직인 뒤에야 가장 근본적인 문제가 전혀 정리되지 않았다는 것을 깨닫습니다. 사용자가 정말 이 고통을 가지고 있는가? 지금 이 문제를 해결할 가치가 있는가? 프로젝트를 밀고 있다고 생각하지만, 사실은 잘못된 방향으로 열심히 가속하고 있을 뿐입니다.
|
||||
|
||||
Double Diamond 모델은 바로 이런 상황을 피하기 위해 쓰입니다.
|
||||
|
||||
가장 가치 있는 알림은 이것입니다. **"올바른 일을 하는 것"과 "그 일을 제대로 하는 것"은 완전히 다른 두 단계입니다.** 문제가 명확해지기도 전에 프로토타입으로 달려가면, 보통 잘못된 방향을 더 완전하게 만들 뿐입니다.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info 최소 SOP
|
||||
**목적**: 읽고 나면 제품을 만들 때 언제 먼저 문제를 생각해야 하고, 언제부터 솔루션과 프로토타입을 생각해야 하는지 더 명확해집니다. 처음부터 잘못된 방향을 매우 성실하게 만드는 일을 피합니다.
|
||||
|
||||
**행동 항목**: `Discover → Define → Develop → Deliver` 네 단계를 따라 내려가며, 각 단계에서는 현재 단계에서 해야 할 일만 합니다.
|
||||
|
||||
**결과**: 더 명확한 문제 정의, 비교 가능한 몇 가지 솔루션, 검증 가능한 최소 버전을 얻게 됩니다.
|
||||
|
||||
**키워드 이동**: [Double Diamond란 무엇인가](#dd-what) · [첫 번째 다이아몬드](#dd-first) · [AI는 어떻게 도와줄 수 있나](#dd-ai)
|
||||
:::
|
||||
|
||||
## 다음 내용을 배우게 됩니다
|
||||
|
||||
1. Double Diamond가 무엇이고, 제로 베이스로 제품을 만들 때 왜 적합한지
|
||||
2. Discover, Define, Develop, Deliver 네 단계가 각각 무엇을 하는지
|
||||
3. "지금은 계속 발산해야 하는가"와 "지금은 수렴을 시작해야 하는가"를 구분하는 법
|
||||
4. Double Diamond를 AI 제품, 프로토타입 설계, 요구사항 검증에 적용하는 법
|
||||
|
||||
<a id="dd-what"></a>
|
||||
## [1. Double Diamond란 정확히 무엇인가](#top-dd)
|
||||
|
||||
Double Diamond는 영국 **Design Council**이 널리 알린 고전적인 디자인 프로세스 프레임워크입니다. 하나의 완전한 디자인과 혁신 과정을 연속된 두 개의 다이아몬드 모양으로 그립니다.
|
||||
|
||||
"다이아몬드"인 이유는 각 다이아몬드가 서로 반대지만 모두 중요한 두 가지 동작을 포함하기 때문입니다.
|
||||
|
||||
- **발산**: 먼저 시야를 열고 더 많은 가능성을 본다.
|
||||
- **수렴**: 다시 범위를 좁혀 판단하고 취사선택한다.
|
||||
|
||||
전체 과정은 네 단계입니다.
|
||||
|
||||
1. **Discover**: 사용자, 문제, 환경, 시장을 넓게 이해한다.
|
||||
2. **Define**: 많은 정보 속에서 진짜 해결할 가치가 있는 핵심 문제를 추출한다.
|
||||
3. **Develop**: 핵심 문제를 둘러싸고 여러 해결책을 발산한다.
|
||||
4. **Deliver**: 더 적합한 해결책을 선별하고, 프로토타입을 만들고, 테스트하고 전달한다.
|
||||
|
||||
이 네 단계를 가장 기억하기 쉬운 한 문장으로 압축하면 이렇습니다.
|
||||
|
||||
- **첫 번째 다이아몬드**: 정확히 어떤 문제를 해결해야 하는지 먼저 파악한다.
|
||||
- **두 번째 다이아몬드**: 그다음 어떤 방법으로 해결할지 결정한다.
|
||||
|
||||
이것이 방금 말한 아주 정확한 문장입니다.
|
||||
|
||||
- **첫 번째 다이아몬드: 올바른 일을 하기**
|
||||
- **두 번째 다이아몬드: 그 일을 제대로 하기**
|
||||
|
||||
## 2. 왜 Double Diamond는 초보자에게 특히 적합한가
|
||||
|
||||
초보자가 제품을 만들 때 가장 흔한 리듬은 보통 이렇습니다.
|
||||
|
||||
- 아이디어가 떠오른다.
|
||||
- 이 방향이 멋지다고 느낀다.
|
||||
- 바로 프로토타입을 그리기 시작한다.
|
||||
- 만들다 보니 기능이 점점 많아진다.
|
||||
- 마지막에는 자신이 정확히 어떤 문제를 해결하는지 모르게 된다.
|
||||
|
||||
Double Diamond의 가치는 프로세스를 복잡하게 만드는 데 있지 않습니다. **"문제 이해"와 "솔루션 설계"를 강제로 분리하게 하는 데** 있습니다.
|
||||
|
||||
이 말은 평범하게 들리지만 실제로는 매우 중요합니다. 실패한 제품의 상당수는 실행이 성실하지 않아서가 아니라 다음 이유 때문입니다.
|
||||
|
||||
- 문제를 잘못 골랐다.
|
||||
- 사용자를 오해했다.
|
||||
- 해결책을 너무 일찍 고정했다.
|
||||
- 방향 검증 없이 세부 다듬기에 많은 시간을 썼다.
|
||||
|
||||
Double Diamond는 계속해서 이렇게 상기시킵니다.
|
||||
|
||||
- 생각이 잘 이어진다고 해서 문제가 성립했다고 기본 가정하지 마세요.
|
||||
- 해결책을 만들 수 있다고 해서 그것이 만들 가치가 있다고 기본 가정하지 마세요.
|
||||
- 프로토타입이 완성되어 보인다고 해서 사용자가 정말 필요로 할 것이라고 기본 가정하지 마세요.
|
||||
|
||||
<a id="dd-first"></a>
|
||||
## [3. 첫 번째 다이아몬드: 올바른 일을 하기](#top-dd)
|
||||
|
||||
첫 번째 다이아몬드는 **문제 자체**에 집중하며, 해결책에 집중하지 않습니다.
|
||||
|
||||
한 문장으로 이해하면 이렇습니다. **서둘러 만들지 말고, 정말 만들 가치가 있는지 먼저 파악하세요.**
|
||||
|
||||
### 3.1 Discover: 먼저 문제 공간을 열기
|
||||
|
||||
Discover 단계의 핵심 과제는 **넓게 조사하는 것**이지, 빠르게 결론을 내리는 것이 아닙니다.
|
||||
|
||||
이 단계에서 보통 하는 일은 다음과 같습니다.
|
||||
|
||||
- 사용자가 실제 장면에서 어떻게 행동하는지 보기
|
||||
- 잠재 사용자를 인터뷰해 최근 언제 문제를 만났는지 이해하기
|
||||
- 지금은 어떻게 임시로 해결하고 있는지 관찰하기
|
||||
- 경쟁 제품과 대체 방안이 어떻게 처리하는지 보기
|
||||
- 시장, 프로세스, 제약, 상하류 정보를 수집하기
|
||||
|
||||
많은 사람이 Discover를 "자료를 좀 더 많이 보는 것"으로 오해합니다. 사실 더 중요한 것은 **사람과 장면을 이해하는 것**이지, 정보만 잔뜩 검색하는 것이 아닙니다.
|
||||
|
||||
예를 들어 "AI가 회의록 정리를 도와주는 도구"를 만들고 싶다면, Discover 단계에서 더 집중해야 할 것은 다음입니다.
|
||||
|
||||
- 사용자가 회의 후 정확히 어느 부분에서 가장 고통스러워하는지
|
||||
- 기록이 어려운지, 정리가 어려운지, 동기화가 어려운지
|
||||
- 지금은 직접 쓰는지, 인턴에게 시키는지, 녹음을 다시 듣는지, 아예 정리하지 않는지
|
||||
- 어떤 회의 장면에서 회의록이 가장 필요하고, 어떤 장면에서는 전혀 필요 없는지
|
||||
|
||||
이 단계에서 가장 중요한 목표는 답을 내는 것이 아니라, **너무 일찍 자신이 이미 답을 알고 있다고 착각하지 않는 것**입니다.
|
||||
|
||||
### 3.2 Define: 많은 정보 속에서 핵심 문제 추출하기
|
||||
|
||||
Discover가 시야를 여는 것이라면, Define은 수렴을 시작하는 것입니다.
|
||||
|
||||
Define 단계에서 해야 할 일은 모든 관찰을 그대로 보존하는 것이 아니라, 다음을 묻는 것입니다.
|
||||
|
||||
- 진짜로 가장 우선 해결할 가치가 있는 문제는 무엇인가?
|
||||
- 어떤 문제가 가장 자주 나타나고, 가장 아프고, 가장 가치 있는가?
|
||||
- 첫 번째 버전은 정확히 어떤 장면 하나만 겨냥할 것인가?
|
||||
|
||||
이 단계의 핵심은 넓은 주제를 명확한 문제 정의로 수렴하는 것입니다.
|
||||
|
||||
처음에는 이렇게 말할 수 있습니다.
|
||||
|
||||
> 회의 효율을 높이는 AI 도구를 만들고 싶다.
|
||||
|
||||
Define 단계에 이르면 더 좋은 표현은 이렇게 바뀔 수 있습니다.
|
||||
|
||||
> 우리는 먼저 프로젝트형 팀이 30~60분짜리 협업 회의가 끝난 뒤, 10분 안에 할 일, 담당자, 마감일이 포함된 회의록을 만들지 못하는 문제를 해결한다.
|
||||
|
||||
이제 문제가 명확해지기 시작합니다.
|
||||
|
||||
- 사용자는 누구인가
|
||||
- 장면은 무엇인가
|
||||
- 막히는 지점은 무엇인가
|
||||
- 성공 기준은 무엇인가
|
||||
|
||||
Define의 본질은 **"문제가 많다"에서 "이번에는 어떤 문제 하나를 먼저 해결할 것인가"로 수렴하는 것**입니다.
|
||||
|
||||
## 4. 두 번째 다이아몬드: 그 일을 제대로 하기
|
||||
|
||||
첫 번째 다이아몬드를 완료한 뒤에야 진정으로 두 번째 다이아몬드에 들어가기에 적합합니다. 이때 해결하려는 것은 더 이상 모호한 방향이 아니라 수렴된 구체적인 문제이기 때문입니다.
|
||||
|
||||
### 4.1 Develop: 핵심 문제를 중심으로 솔루션 발산하기
|
||||
|
||||
Develop 단계의 핵심은 **같은 문제를 중심으로 여러 가능한 솔루션을 탐색하는 것**입니다.
|
||||
|
||||
주의할 점은 여기서의 발산은 Discover 단계와 다릅니다.
|
||||
|
||||
- Discover의 발산은 문제 공간을 탐색하는 것입니다.
|
||||
- Develop의 발산은 해결책 공간을 탐색하는 것입니다.
|
||||
|
||||
회의록 예시를 계속 쓰면, Develop 단계에서는 다음을 생각할 수 있습니다.
|
||||
|
||||
- 웹 도구를 만들 것인가, 회의 플러그인을 만들 것인가
|
||||
- 녹음 업로드 후 처리할 것인가, 실시간 기록할 것인가
|
||||
- 요약만 할 것인가, 할 일 추출에 집중할 것인가
|
||||
- 개인 효율을 강조할 것인가, 팀 동기화를 강조할 것인가
|
||||
- 사용자가 자유롭게 편집하게 할 것인가, 구조화된 템플릿을 바로 출력할 것인가
|
||||
|
||||
이 단계는 브레인스토밍에 매우 적합하고, 팀과 함께 솔루션을 넓히기에도 좋습니다.
|
||||
|
||||
하지만 전제가 있습니다. **모든 솔루션은 이미 정의된 같은 문제를 섬겨야 합니다.**
|
||||
문제가 명확히 정의되지 않았다면 Develop은 쉽게 다시 기능이 난무하는 상태가 됩니다.
|
||||
|
||||
### 4.2 Deliver: 솔루션 선택, 프로토타입, 테스트, 전달
|
||||
|
||||
Deliver 단계는 두 번째 다이아몬드 안의 수렴 단계입니다.
|
||||
|
||||
이때 해야 할 일은 더 많이 상상하는 것이 아니라 판단을 시작하는 것입니다.
|
||||
|
||||
- 어떤 솔루션이 현재 단계에 가장 적합한가
|
||||
- 어떤 버전이 가장 작지만 가장 유용한가
|
||||
- 어떤 기능은 반드시 먼저 해야 하고, 어떤 기능은 나중으로 미뤄도 되는가
|
||||
- 어떻게 프로토타입을 만들고, 테스트하고, 작은 범위에서 검증할 것인가
|
||||
|
||||
많은 사람이 Deliver를 "출시"와 같다고 생각합니다. 사실 더 정확한 뜻은 **하나의 솔루션을 테스트 가능하고, 검증 가능하며, 반복 개선 가능한 것으로 바꾸는 것**입니다.
|
||||
|
||||
그것은 다음일 수 있습니다.
|
||||
|
||||
- 저충실도 흐름도 한 장
|
||||
- Figma 프로토타입
|
||||
- 실행 가능한 MVP
|
||||
- 소규모 사용자 테스트
|
||||
- 실제 피드백 이후의 반복 개선 버전
|
||||
|
||||
Deliver의 핵심은 "완벽한 전달"이 아니라 **가능한 한 빨리 솔루션을 실제 환경에 넣어 검증하는 것**입니다.
|
||||
|
||||
## 5. 가장 기억하기 쉬운 대조표
|
||||
|
||||
네 단계를 자꾸 헷갈린다면 아래 버전을 그대로 기억하세요.
|
||||
|
||||
| 단계 | 무엇을 하는가 | 키워드 | 흔한 산출물 |
|
||||
| --- | --- | --- | --- |
|
||||
| Discover | 문제 이해 | 조사, 관찰, 인터뷰, 정보 수집 | 사용자 인사이트, 장면 메모, 문제 목록 |
|
||||
| Define | 문제 정의 | 추출, 집중, 취사선택, 문제 다시 쓰기 | 문제 정의, 우선순위, MVP 진입점 |
|
||||
| Develop | 솔루션 탐색 | 브레인스토밍, 비교, 공동 창작, 프로토타입 구상 | 솔루션 목록, 흐름 스케치, 프로토타입 방향 |
|
||||
| Deliver | 솔루션 검증 | 프로토타입, 테스트, 반복 개선, 전달 | 프로토타입, 테스트 피드백, 최적화 버전 |
|
||||
|
||||
더 압축하면 이렇습니다.
|
||||
|
||||
- **Discover / Define**: "올바른 일을 하기"를 해결한다.
|
||||
- **Develop / Deliver**: "그 일을 제대로 하기"를 해결한다.
|
||||
|
||||
## 6. Double Diamond의 가장 흔한 오해
|
||||
|
||||
### 6.1 Discover도 하지 않고 바로 Deliver하기
|
||||
|
||||
가장 흔한 경우입니다. 많은 사람이 아이디어가 생기자마자 프로토타입을 그리고, PRD를 쓰고, 모델을 붙이고, 페이지를 만듭니다.
|
||||
|
||||
문제는 당신이 성실하지 않다는 것이 아니라, 해결할 가치가 있는 문제인지 아직 확인하지 않았을 수 있다는 점입니다.
|
||||
|
||||
### 6.2 Discover는 오래 하지만 끝내 Define하지 않기
|
||||
|
||||
또 다른 극단은 계속 조사하고, 계속 자료를 보고, 계속 인터뷰하지만 좀처럼 수렴하지 못하는 것입니다.
|
||||
|
||||
Double Diamond는 무한 발산을 하라는 뜻이 아닙니다. 발산 후에는 반드시 판단과 취사선택으로 들어가야 한다고 알려 주는 것입니다.
|
||||
|
||||
### 6.3 Define 이후 몰래 문제를 바꾸기
|
||||
|
||||
많은 팀은 Develop 단계에서 어떤 솔루션이 더 쉽게 만들 수 있다는 이유로, 기존 솔루션에 맞도록 문제 정의를 거꾸로 수정합니다.
|
||||
|
||||
이것은 위험합니다. 문제를 해결하는 것이 아니라 자신이 선호하는 솔루션을 정당화하고 있을 수 있기 때문입니다.
|
||||
|
||||
### 6.4 Deliver를 "크고 완전한 출시"로 오해하기
|
||||
|
||||
Deliver는 완전한 제품을 모두 만들어야 끝난다는 뜻이 아닙니다. 많은 경우 테스트 가능한 프로토타입 하나, 실제 사용자 테스트 한 번이면 이미 좋은 deliver입니다.
|
||||
|
||||
## 7. AI 제품에서 Double Diamond는 어떻게 쓰나
|
||||
|
||||
AI 제품은 특히 "능력 우선" 함정에 빠지기 쉽습니다. 모델 능력이 너무 매력적으로 보이기 때문입니다. 당신은 곧장 이런 생각을 하고 싶어질 수 있습니다.
|
||||
|
||||
- 멀티모달을 붙일까
|
||||
- Agent를 만들까
|
||||
- 워크플로우를 넣을까
|
||||
- 음성, 이미지, 웹 검색을 연결할까
|
||||
|
||||
하지만 Double Diamond는 먼저 이렇게 묻게 합니다.
|
||||
|
||||
- 사용자는 정확히 어느 단계에서 정말 막혀 있는가
|
||||
- 이 막힘은 반드시 AI가 있어야 해결되는가
|
||||
- AI를 쓰지 않는다면 기존 방법은 정확히 어디가 가장 나쁜가
|
||||
- AI가 들어간 뒤 가장 핵심적인 진전은 무엇인가
|
||||
|
||||
이것은 흔한 상황을 피하게 해 줍니다. **능력은 강한데 가치는 약한 상황**입니다.
|
||||
|
||||
실용적인 순서는 다음과 같습니다.
|
||||
|
||||
1. Discover 단계에서 사용자가 지금 어떻게 과제를 처리하는지 관찰한다.
|
||||
2. Define 단계에서 가장 아픈 장면 하나를 명확한 문제 정의 한 문장으로 쓴다.
|
||||
3. Develop 단계에서 어떤 AI 기능이 이 문제를 가장 잘 섬기는지 비교한다.
|
||||
4. Deliver 단계에서 최소 버전을 만들고 실제 사용자에게 테스트하게 한다.
|
||||
|
||||
## 8. 바로 적용할 수 있는 Double Diamond 템플릿
|
||||
|
||||
자기 제품을 만들고 있다면 이 순서대로 먼저 써 보세요.
|
||||
|
||||
### Discover
|
||||
|
||||
- 내가 관찰한 사용자는 누구인가?
|
||||
- 그들이 최근 이 문제를 만난 것은 언제인가?
|
||||
- 지금은 어떻게 해결하고 있는가?
|
||||
- 가장 짜증 나고, 느리고, 불안한 지점은 무엇인가?
|
||||
|
||||
### Define
|
||||
|
||||
- 이 문제들 중 가장 우선 해결할 가치가 있는 것은 무엇인가?
|
||||
- 어떤 장면이 가장 빈번하거나 가장 핵심적인가?
|
||||
- 첫 번째 버전은 누구만, 무엇만 섬길 것인가?
|
||||
- 성공적으로 해결되면 사용자의 상태는 어떻게 변하는가?
|
||||
|
||||
### Develop
|
||||
|
||||
- 이 문제에 대해 어떤 가능한 솔루션이 있는가?
|
||||
- 어떤 솔루션이 가장 가볍고, 빠르고, 검증하기 쉬운가?
|
||||
- 반드시 해야 할 것은 무엇이고, 나중으로 미룰 것은 무엇인가?
|
||||
|
||||
### Deliver
|
||||
|
||||
- 이 방향을 검증하기 위해 가장 작게 무엇을 전달할 수 있는가?
|
||||
- 흐름도인가, 프로토타입인가, MVP인가?
|
||||
- 누구에게 테스트해야 하는가?
|
||||
- 테스트 후 계속할지, 수정할지, 포기할지는 어떻게 판단할 것인가?
|
||||
|
||||
## 9. 제로 베이스도 이해할 수 있는 예시
|
||||
|
||||
"대학생의 취업 이력서 준비를 돕는 AI 도구"를 만들고 싶다고 가정해 봅시다.
|
||||
|
||||
많은 사람은 처음부터 두 번째 다이아몬드로 들어가 이런 생각을 시작합니다.
|
||||
|
||||
- 원클릭 미화를 넣을까
|
||||
- 지능형 문장 개선을 넣을까
|
||||
- JD 자동 매칭을 할까
|
||||
- 자기소개서를 생성할까
|
||||
|
||||
하지만 Double Diamond를 따르면 더 좋은 과정은 이렇습니다.
|
||||
|
||||
### 첫 번째 다이아몬드
|
||||
|
||||
**Discover**
|
||||
|
||||
- 취업 준비생에게 최근 이력서를 고친 것이 언제인지 묻는다.
|
||||
- 그들이 이전 이력서를 어떻게 새 버전으로 바꾸는지 본다.
|
||||
- 가장 어려운 것이 "쓸 줄 모름"인지, "고칠 줄 모름"인지, "좋은지 판단할 줄 모름"인지 이해한다.
|
||||
|
||||
**Define**
|
||||
|
||||
- 마지막에는 더 구체적인 문제로 수렴한다.
|
||||
- "대학생은 이력서를 만들 줄 모른다"가 아니다.
|
||||
- "처음 인턴십에 지원하는 학생은 기존 경험을 직무에 맞는 표현으로 바꾸기 어려워 지원을 미룬다"이다.
|
||||
|
||||
### 두 번째 다이아몬드
|
||||
|
||||
**Develop**
|
||||
|
||||
- 몇 가지 솔루션을 생각한다. 템플릿 라이브러리, AI 문장 개선, 직무 대조, 이력서 점수화, 사례 참고.
|
||||
|
||||
**Deliver**
|
||||
|
||||
- 첫 버전은 "직무 설명에 따라 경험 bullet point를 바꿔 쓰기"만 만든다.
|
||||
- 학생 5명에게 써 보게 하고, 더 빨리 첫 버전의 이력서를 제출하게 되는지 본다.
|
||||
|
||||
첫 번째 다이아몬드를 탄탄하게 하면 두 번째 다이아몬드가 훨씬 명확해진다는 것을 알 수 있습니다.
|
||||
|
||||
## 10. 정리
|
||||
|
||||
Double Diamond의 가장 강한 힘은 혼란스러운 덩어리를 네 개의 더 명확한 동작으로 나눠 준다는 데 있습니다.
|
||||
|
||||
- 먼저 발산해 문제를 이해한다.
|
||||
- 다시 수렴해 문제를 정의한다.
|
||||
- 다시 발산해 솔루션을 탐색한다.
|
||||
- 마지막으로 수렴해 솔루션을 전달한다.
|
||||
|
||||
이 모델은 당신을 느리게 만들기 위한 것이 아닙니다. **바빠 보이지만 사실 방향이 틀린 수많은 우회로를 줄이기 위한 것**입니다.
|
||||
|
||||
특히 AI 시대에는 만드는 속도가 점점 빨라지기 때문에 Double Diamond가 오히려 더 중요해집니다. "만드는 것"이 점점 쉬워질수록 진짜 희소한 능력은 이렇게 바뀌기 때문입니다. **해결할 가치가 있는 문제를 풀고 있는가, 그리고 그것을 적합한 방식으로 풀고 있는가.**
|
||||
|
||||
이 한 문장만 기억하면 됩니다.
|
||||
|
||||
**올바른 일을 먼저 하고, 그 일을 제대로 하세요.**
|
||||
|
||||
<a id="dd-ai"></a>
|
||||
## [11. AI로 Double Diamond 흐름을 실행하는 방법](#top-dd)
|
||||
|
||||
Double Diamond 자체는 AI 도구가 아니지만, AI는 네 단계에서 "가속기" 역할을 하기에 매우 적합합니다. 핵심은 AI가 대신 결정하게 하는 것이 아니라, 시야 확장, 정보 정리, 솔루션 비교, 검증 자료 생성을 돕게 하는 것입니다.
|
||||
|
||||
### 11.1 Discover 단계에서 AI로 정보 밑작업 한 번 하기
|
||||
|
||||
정식 인터뷰와 조사를 시작하기 전에 AI에게 가벼운 문제 스캔을 맡길 수 있습니다. 예를 들면 다음입니다.
|
||||
|
||||
- 시장에서 흔한 대체 방안은 무엇인가
|
||||
- 사용자가 공개 커뮤니티에서 가장 자주 불평하는 것은 무엇인가
|
||||
- 이 문제는 어떤 장면과 사람군에서 자주 나타나는가
|
||||
- 기존 제품은 보통 무엇을 놓치고 있는가
|
||||
|
||||
이 단계는 실제 조사를 대체할 수 없지만, 문제 지도를 빠르게 만드는 데 매우 적합합니다.
|
||||
|
||||
아주 간단한 초보자 입력은 이렇게 쓸 수 있습니다.
|
||||
|
||||
```text
|
||||
대학생 이력서 수정을 도와주는 도구를 만들고 싶어.
|
||||
기능을 생각해 주지 말고, 이 문제에서 사람들이 가장 자주 겪는 어려움이 무엇인지 먼저 봐 줘.
|
||||
```
|
||||
|
||||
AI는 이렇게 출력할 수 있습니다.
|
||||
|
||||
```text
|
||||
초기 문제 지도:
|
||||
|
||||
1. 어떤 경험을 써야 할지 모름
|
||||
2. 직무에 맞게 어떻게 수정해야 할지 모름
|
||||
3. 여러 번 고쳤는데도 충분히 좋은지 확신하지 못함
|
||||
4. 다른 사람에게 봐 달라고 해야 하지만 매번 부탁하기 불편함
|
||||
5. 확신이 없어서 계속 지원을 미룸
|
||||
```
|
||||
|
||||
이 출력의 역할은 결론을 대신 내려 주는 것이 아니라, Discover에 더 빨리 들어가게 해 주는 것입니다.
|
||||
|
||||
### 11.2 Define 단계에서 AI에게 문제 정의 수렴을 돕게 하기
|
||||
|
||||
많은 사람이 자료를 한가득 모은 뒤 가장 어려워하는 것은 문제를 진짜 명확한 한 문장으로 줄이는 일입니다. 조사 메모를 AI에게 주고 몇 가지 후보 문제 정의로 압축하게 할 수 있습니다.
|
||||
|
||||
```text
|
||||
아래는 Discover 단계에서 모은 사용자 피드백과 조사 메모야.
|
||||
[내용 붙여넣기]
|
||||
|
||||
다음 세 가지를 도와줘.
|
||||
1. 가장 자주 나타나는 문제 패턴을 요약
|
||||
2. 문제 빈도, 고통감, 검증 가능성을 기준으로 우선 해결할 가치가 있는 문제 3개 정리
|
||||
3. 각 문제를 구체적인 문제 정의 한 문장으로 작성
|
||||
```
|
||||
|
||||
이렇게 하면 "문제가 너무 많다"에 머무르지 않고 Define으로 들어가기 쉬워집니다.
|
||||
|
||||
입력을 아주 간단하게 써도 됩니다.
|
||||
|
||||
```text
|
||||
지금 모은 문제는 이거야.
|
||||
1. 다들 이력서에 무엇을 써야 할지 모름
|
||||
2. 다들 어떻게 고쳐야 할지 모름
|
||||
3. 다들 잘 고친 건지 확신하지 못해 지원을 망설임
|
||||
|
||||
첫 버전에서 어떤 문제를 먼저 해결하는 게 가장 적합한지 봐 줘.
|
||||
```
|
||||
|
||||
AI는 이렇게 출력할 수 있습니다.
|
||||
|
||||
```text
|
||||
우선 해결을 추천하는 문제:
|
||||
|
||||
"처음 인턴십에 지원하는 학생은 이력서가 이미 지원 가능한 수준인지 확신하지 못해 반복 수정하고 지원을 미룬다."
|
||||
|
||||
이유:
|
||||
1. 문제가 더 구체적이다.
|
||||
2. 지연 행동을 설명할 수 있다.
|
||||
3. 작은 버전을 설계해 검증하기 쉽다.
|
||||
```
|
||||
|
||||
이런 출력은 유용합니다. 흐릿한 문제들 속에서 MVP 출발점에 가까운 정의 하나를 수렴하게 해 주기 때문입니다.
|
||||
|
||||
### 11.3 Develop 단계에서 AI로 여러 솔루션 발산하기
|
||||
|
||||
많은 사람은 문제를 정의하자마자 머릿속에 처음 떠오른 솔루션만 바라봅니다. 이 단계에서 AI는 강제로 발산시키는 데 매우 적합합니다.
|
||||
|
||||
```text
|
||||
핵심 문제를 이렇게 정의했어: [문제 정의]
|
||||
최종 답을 하나만 주지 말고, 아래 각도에서 2~3가지 해결 방향을 제안해 줘.
|
||||
1. 가장 가벼운 MVP
|
||||
2. 수요 검증에 가장 적합한 방안
|
||||
3. 경험 개선에 가장 적합한 방안
|
||||
4. AI에 의존하지 않는 방안
|
||||
5. AI에 의존하는 방안
|
||||
마지막에는 각 방안의 장점, 위험, 검증 비용을 비교해 줘.
|
||||
```
|
||||
|
||||
이렇게 하면 너무 일찍 하나의 솔루션에 묶이지 않게 됩니다.
|
||||
|
||||
간단한 입력은 이렇게 쓸 수 있습니다.
|
||||
|
||||
```text
|
||||
현재 문제 정의는 이거야.
|
||||
"대학생은 이력서가 이미 지원 가능한지 확신하지 못해 계속 미루고 있다."
|
||||
|
||||
서로 다른 해결책 4가지를 생각해 줘. 하나만 주지 마.
|
||||
```
|
||||
|
||||
AI는 이렇게 출력할 수 있습니다.
|
||||
|
||||
```text
|
||||
방안 1: 이력서 지원 가능 체크리스트
|
||||
방안 2: 직무 설명에 맞춘 맞춤형 문장 개선
|
||||
방안 3: 사용자가 이력서를 업로드하면 위험 알림 제공
|
||||
방안 4: 우수 사례 대조를 제공해 사용자가 차이를 판단하도록 도움
|
||||
```
|
||||
|
||||
이때부터 "솔루션 비교"로 들어가기 쉬워지고, 처음부터 AI 문장 개선 하나만 바라보지 않게 됩니다.
|
||||
|
||||
### 11.4 Deliver 단계에서 AI로 프로토타입 문구와 테스트 자료 생성하기
|
||||
|
||||
Deliver 단계에 들어가면 AI는 다음 작업을 빠르게 처리하는 데 매우 적합합니다.
|
||||
|
||||
- 저충실도 프로토타입의 페이지 문구 생성
|
||||
- 사용자 테스트 스크립트 정리
|
||||
- 비교 가능한 여러 버전의 제목, 버튼, 설명문 생성
|
||||
- 테스트 후 피드백과 문제 목록 정리
|
||||
|
||||
예를 들어 AI에게 20분 사용자 테스트 스크립트를 만들게 하거나, 사용자 5명의 피드백을 "계속 진행 / 방향 수정 / 중단" 판단 근거로 정리하게 할 수 있습니다.
|
||||
|
||||
가장 작은 입력 예시는 다음입니다.
|
||||
|
||||
```text
|
||||
아주 간단한 프로토타입을 만들었어.
|
||||
사용자가 이력서를 업로드하면, 시스템이 어떤 부분이 아직 지원하기에 적합하지 않은지 알려 줘.
|
||||
|
||||
15분짜리 사용자 테스트 스크립트를 만들어 줘.
|
||||
```
|
||||
|
||||
AI는 이렇게 출력할 수 있습니다.
|
||||
|
||||
```text
|
||||
15분 테스트 스크립트:
|
||||
|
||||
1. 먼저 사용자에게 최근 이력서 지원 경험을 설명하게 한다.
|
||||
2. 사용자가 독립적으로 이력서 업로드를 완료하게 한다.
|
||||
3. 피드백 결과를 이해하는지 관찰한다.
|
||||
4. 질문: 이 안내 중 어떤 것이 가장 도움이 되고, 어떤 것이 헷갈렸나요?
|
||||
5. 질문: 다음 지원 전에 다시 쓰고 싶나요?
|
||||
```
|
||||
|
||||
이 출력은 실용적입니다. "프로토타입을 만들었다"에서 "다음에는 어떻게 테스트할까"로 넘어가게 해 주기 때문입니다.
|
||||
|
||||
### 11.5 AI에게 "단계 문지기" 역할을 맡기기
|
||||
|
||||
Double Diamond에서 가장 흔한 문제는 사람이 단계를 건너뛰는 것입니다. AI에게 직접 문지기 역할을 맡겨 현재 어느 단계에 있는지 알려 달라고 할 수 있습니다.
|
||||
|
||||
```text
|
||||
제품 프로세스 코치 역할을 해 줘.
|
||||
아래는 현재 내 프로젝트 상태야: [설명]
|
||||
내가 지금 Discover, Define, Develop, Deliver 중 어디에 더 가까운지 판단해 줘.
|
||||
그리고 알려 줘.
|
||||
1. 내가 너무 일찍 다음 단계로 넘어갔는지
|
||||
2. 현재 단계에서 가장 보충해야 할 행동은 무엇인지
|
||||
3. 지금은 먼저 하지 말아야 할 일은 무엇인지
|
||||
```
|
||||
|
||||
초보자에게 특히 유용합니다. "문제를 아직 명확히 생각하지 않았는데 프로토타입을 그리기 시작하는" 일이 매우 쉽게 일어나기 때문입니다.
|
||||
|
||||
## 📚 Assignments
|
||||
|
||||
위 내용을 바탕으로 다음 과제를 완료하세요.
|
||||
|
||||
1. 최근 만들고 싶은 제품 아이디어 하나를 고르고, Discover, Define, Develop, Deliver 네 단계 초안을 작성하세요.
|
||||
2. Define 단계에서 문제를 구체적인 한 문장으로 강제로 줄이세요.
|
||||
3. Develop 단계에서 처음 떠오른 방법 하나만 바라보지 말고, 최소 3가지 다른 방안을 나열하세요.
|
||||
4. Deliver 단계에서 일주일 안에 전달 가능한 최소 검증 버전을 작성하세요.
|
||||
|
||||
## 더 읽어 보기
|
||||
|
||||
이 글은 주로 Design Council의 Double Diamond 공식 자료를 참고했습니다. 이어서 보기 좋습니다.
|
||||
|
||||
- [Design Council: The Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/)
|
||||
- [Design Council: Framework for Innovation](https://www.designcouncil.org.uk/our-work/skills-learning/tools-frameworks/framework-for-innovation-design-councils-evolved-double-diamond/)
|
||||
- [Design Council: History of the Double Diamond](https://www.designcouncil.org.uk/our-resources/the-double-diamond/history-of-the-double-diamond/)
|
||||
|
||||
@@ -0,0 +1,302 @@
|
||||
---
|
||||
title: '아이디어는 어디서 찾을까: 초보자에게 가장 적합한 참고 출처 3가지'
|
||||
description: '제로 베이스 독자를 위한 제품 아이디어 입문 글입니다. 바로 idea를 훑기 좋은 사이트, 트렌드 출처, 실제 비즈니스 출처와 VC 목록을 정리해, 링크 속에서 더 구체적인 방향을 빠르게 찾도록 돕습니다.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = '약 <strong>1.5시간</strong>'
|
||||
</script>
|
||||
|
||||
# 아이디어는 어디서 찾을까: 초보자에게 가장 적합한 참고 출처 3가지
|
||||
|
||||
<a id="top-idea-sources"></a>
|
||||
|
||||
## 본 장 안내
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['아이디어 찾기', '제품 방향', '수요 발견', '산업 관찰']"
|
||||
coreOutput="더 구체적이고 계속 조사할 만한 제품 방향 1개"
|
||||
expectedOutput="어디를 훑고, 어떻게 보고, 무엇을 먼저 봐야 하는지 알게 되어 더 이상 'AI + 어떤 산업'처럼 빈 생각만 남기지 않기"
|
||||
>
|
||||
|
||||
많은 사람이 첫 단계에서 막힙니다. 완전히 영감이 없어서가 아니라, 많은 내용을 훑고 나서도 머릿속에 남는 것이 여전히 큰 단어뿐이기 때문입니다.
|
||||
|
||||
- AI for education
|
||||
- AI for healthcare
|
||||
- AI for finance
|
||||
- AI agent for business
|
||||
|
||||
이것들은 아직 아이디어가 아닙니다. 단지 "방향이 크다"는 것을 알려 줄 뿐, 다음을 알려 주지 않습니다.
|
||||
|
||||
- 누가 쓰는지
|
||||
- 어떤 장면에서 쓰는지
|
||||
- 지금은 어떻게 임시로 해결하고 있는지
|
||||
- 어느 단계를 먼저 잘라 들어갈 가치가 있는지
|
||||
|
||||
이 글은 공허한 방법론을 말하지 않습니다. 바로 쓰기 좋은 출처들을 정리해 드립니다.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info 최소 SOP
|
||||
**목적**: 읽고 나면 아이디어가 없을 때 먼저 어디를 훑어야 하는지, 어떤 링크가 "구체적인 수요"를 보기에 적합한지, 어떤 링크가 "트렌드"를 보기에 적합한지, 어떤 링크가 "실제 비즈니스"를 보기에 적합한지 알게 됩니다.
|
||||
|
||||
**행동 항목**: 먼저 idea 목록을 한 바퀴 훑고, 그다음 돈을 버는 작은 제품을 한 바퀴 봅니다. 이어서 트렌드와 더 비즈니스에 가까운 출처를 보고, 마지막에 계속 조사하고 싶은 방향 1개를 남깁니다.
|
||||
|
||||
**결과**: 큰 단어에 머무르지 않고, 더 구체적이고 계속 검증할 만한 방향 1개를 얻습니다.
|
||||
|
||||
**키워드 이동**: [참고 앱 목록](#idea-apps) · [트렌드 출처](#idea-trends) · [더 비즈니스에 가까운 출처](#idea-business) · [VC / 액셀러레이터 출처](#idea-vc) · [최단 경로](#idea-path) · [AI는 어떻게 도와줄 수 있나](#idea-ai)
|
||||
:::
|
||||
|
||||
## 다음 내용을 배우게 됩니다
|
||||
|
||||
1. 어떤 웹사이트가 idea를 바로 훑기에 적합한지
|
||||
2. 어떤 웹사이트가 이미 돈을 버는 작은 제품을 보기에 적합한지
|
||||
3. 어떤 출처가 트렌드와 산업 변화를 보기에 적합한지
|
||||
4. 어떤 출처가 실제 비즈니스와 실제 지불에 더 가까운지
|
||||
5. 제로 베이스에 적합한 가장 짧은 사용 경로
|
||||
|
||||
<a id="idea-apps"></a>
|
||||
## [1. 참고 앱 목록: 먼저 다른 사람이 이미 무엇을 하고 있는지 보기](#top-idea-sources)
|
||||
|
||||
이것은 초보자에게 가장 적합한 출발점입니다. 가장 구체적이기 때문입니다.
|
||||
|
||||
### 1군: 열자마자 idea 목록이 나오고 바로 고를 수 있는 곳
|
||||
|
||||
- [Reddit — r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
|
||||
이 subreddit의 핵심 용도는 실제 사용자가 직접 "누가 XX 하나 만들어 줬으면 좋겠다"를 올리는 것입니다. 각 게시물은 보통 구체적인 제품 수요 하나이고, 약간의 상황 설명도 포함합니다. 들어간 뒤 `Top -> Past Month` 또는 `Top -> Past Year`로 정렬하면 20분 만에 실제 수요를 한 묶음 훑을 수 있습니다.
|
||||
- [Reddit — r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
|
||||
위와 비슷하지만 소프트웨어/App 쪽에 더 가깝습니다. 게시물의 흔한 형식은 "XX를 할 수 있는 앱이 필요하다"이고, 입도가 더 작으며 작지만 아름다운 niche가 많습니다.
|
||||
- [Reddit — r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
|
||||
앞의 두 곳보다 더 완전합니다. 많은 게시물이 한 문장짜리 수요에 그치지 않고, 약간의 시장 분석, 비즈니스 모델, 왜 지금 할 만한지까지 포함합니다.
|
||||
- [Unvalidated Ideas](https://unvalidatedideas.com/)
|
||||
검증되지 않은 창업 idea를 매주 발행합니다. 흔한 필드는 타깃 사용자, 수익화 방식, 초기 검증 아이디어입니다. 형식이 통일되어 있어 빠르게 훑기 좋습니다.
|
||||
- [IdeasAI](https://ideasai.com/)
|
||||
AI로 창업 idea를 생성하며 계속 넘겨 볼 수 있습니다. 품질은 불안정하지만, "아무 감이 없을 때" 영감을 자극하고 다시 세부 장면으로 파고들기에 좋습니다.
|
||||
|
||||
### 2군: 다른 사람이 이미 하고 있는 돈 되는 작은 제품을 보고 idea를 역추적하기
|
||||
|
||||
이런 플랫폼의 논리는 이렇습니다. 다른 사람이 이미 수요를 검증했고, 심지어 돈도 벌고 있습니다. 이것들을 보는 이유는 베끼기 위해서가 아니라, "어떤 작은 문제가 이미 유료로 해결되고 있는지" 보기 위해서입니다.
|
||||
|
||||
- [Starter Story](https://www.starterstory.com/)
|
||||
실제 작은 비즈니스 사례를 많이 수록합니다. 보통 창업자 인터뷰, 매출 데이터, 시작 과정이 있습니다. 월수입 1만~10만 달러 수준의 작은 제품을 중점적으로 보세요. 보통 더 niche하고, 일반인이 이해할 수 있는 제품 규모에 더 가깝습니다.
|
||||
- [Indie Hackers — Products](https://www.indiehackers.com/products)
|
||||
독립 개발자가 제품을 보여 주는 곳입니다. 많은 제품이 수익과 성장을 공개합니다. 수익 순으로 정렬해 월수입 수천~수만 달러 제품들이 어떤 구체적 문제를 해결하는지 봅니다.
|
||||
- [MicroConf Blog](https://microconf.com/blog)
|
||||
Micro SaaS 쪽에 가깝습니다. "충분히 작지만 누군가 돈을 낼 의향이 있는" 제품 진입점을 보기에 적합합니다.
|
||||
- [1000 Tools](https://1000.tools/)
|
||||
AI 도구 모음 사이트입니다. 어떤 카테고리가 이미 만들어졌지만 완성도가 아쉬운지, 또는 국내/특정 수직 산업에서 아직 잘 커버되지 않은 방향이 무엇인지 보기에 좋습니다.
|
||||
- [Product Hunt](https://www.producthunt.com/)
|
||||
최근 반복해서 등장하는 제품 유형을 봅니다. 1위만 보지 말고, 어떤 카테고리가 계속 만들어지지만 아직 명확한 승자가 없는지에 집중하세요.
|
||||
- [BetaList](https://betalist.com/)
|
||||
초기 제품과 아직 방향을 시험 중인 팀을 보기에 적합합니다.
|
||||
|
||||
### 제품을 볼 때는 제품 자체만 보지 말고, 낮은 평점과 "대행 서비스"도 보세요
|
||||
|
||||
- [G2](https://www.g2.com/)
|
||||
사용법: 1점, 2점 리뷰를 봅니다. 낮은 평점에는 보통 "기존 제품의 어느 단계가 제대로 되지 않는지"가 숨어 있습니다.
|
||||
- [Capterra](https://www.capterra.com/)
|
||||
사용법: G2와 비슷합니다. SaaS 제품의 실제 불평을 보기에 적합합니다.
|
||||
- 타오바오 / Xianyu / [Fiverr](https://www.fiverr.com/) / [Upwork](https://www.upwork.com/) / Zhu Bajie
|
||||
사용법: "대행", "대신 정리", "대신 입력", "대신 녹취", "대신 변환" 같은 키워드를 검색합니다. 어떤 수작업 서비스가 잘 팔린다면, 그 뒤에는 대개 반복 가능하고 제품화 가능한 프로세스가 있습니다.
|
||||
|
||||
판단 신호는 단순합니다.
|
||||
|
||||
- 사용자가 기존 도구를 이미 불평하고 있다.
|
||||
- 사용자가 이미 돈을 내고 누군가에게 대행을 맡기고 있다.
|
||||
- 사용자가 이 프로세스에 많은 인력과 시간을 투입하고 있다.
|
||||
|
||||
### 4군: 영상 보기. 누군가가 직접 idea를 분해해 준다
|
||||
|
||||
포럼이나 순위를 훑는 것을 좋아하지 않고 "누군가 생각의 흐름을 대신 풀어 주면 좋겠다"면 영상과 팟캐스트도 적합합니다.
|
||||
|
||||
- `Greg Isenberg startup ideas` 검색
|
||||
누군가가 구체적인 idea 2~3개를 직접 분해하고, 시장 규모, 경쟁 분석, 진입점을 함께 설명하는 콘텐츠를 보기에 좋습니다.
|
||||
- `My First Million podcast` 검색
|
||||
두 진행자가 자주 한 회 전체를 비즈니스 idea 브레인스토밍에 씁니다. 밀도가 높고 매우 구체적인 niche가 자주 나옵니다.
|
||||
- `YC startup ideas` 또는 `Michael Seibel startup ideas` 검색
|
||||
초보자에게 적합합니다. 내용이 직설적이고, 방향을 고르는 법을 바로 설명하는 경우가 많습니다.
|
||||
|
||||
<a id="idea-trends"></a>
|
||||
## [2. 트렌드 출처: 어떤 방향이 떠오르고 있는지 보기](#top-idea-sources)
|
||||
|
||||
트렌드 사이트의 역할은 직접 아이디어를 주는 것이 아니라, 어떤 방향이 뜨거워지고 있는지, 계속 볼 가치가 있는지 판단하게 도와주는 것입니다.
|
||||
|
||||
- [Exploding Topics](https://explodingtopics.com/)
|
||||
빠르게 성장하지만 아직 주류 시야에 완전히 들어오지 않은 주제와 제품 카테고리를 데이터로 추적합니다. "떠오르고 있지만 아직 지나치게 붐비지는 않은" 방향을 보기에 적합합니다.
|
||||
- [Google Trends](https://trends.google.com/)
|
||||
키워드를 검색해 지난 1년의 추세선을 보고, "관련 검색어"의 "급상승" 단어를 봅니다.
|
||||
- [Glimpse](https://meetglimpse.com/)
|
||||
Google Trends와 비슷합니다.
|
||||
- 산업 연구 보고서 요약 페이지
|
||||
이미 방향이 있고, 이 방향이 산업 안에서 어떤 위치에 있는지 빠르게 보고 싶을 때 적합합니다.
|
||||
- McKinsey / BCG / Gartner의 트렌드 콘텐츠
|
||||
기업과 큰 산업 관점에 더 가깝습니다. B2B, 산업, 전통 업종에 적합합니다.
|
||||
- [State of AI Report](https://www.stateof.ai/)
|
||||
방향이 AI 기술 자체와 관련 있다면, 이런 연례 보고서가 큰 그림을 잡는 데 좋습니다.
|
||||
|
||||
트렌드를 볼 때는 세 가지만 중점적으로 봅니다.
|
||||
|
||||
- 이 단어가 지속적으로 뜨거워지고 있는가
|
||||
- 어떤 구체적 장면에 놓이는가
|
||||
- 누가 가장 먼저 시간, 전환 비용, 예산을 지불할 것인가
|
||||
|
||||
<a id="idea-business"></a>
|
||||
## [3. 더 비즈니스에 가까운 출처: 누가 돈을 쓰고, 누가 불평하고, 누가 수작업 서비스를 파는지 보기](#top-idea-sources)
|
||||
|
||||
"멋있어 보이는" 방향이 아니라 "실제 비즈니스에 더 가까운" 방향을 찾고 싶다면, 워크플로우에 더 가까운 출처를 봐야 합니다.
|
||||
|
||||
### 누가 실제로 무엇에 돈을 쓰는지 보기
|
||||
|
||||
- [중국정부조달망](https://www.ccgp.gov.cn/)
|
||||
사용법: "스마트 건설 현장", "실험실 관리 시스템", "데이터 수집", "진료소 관리", "견적 시스템" 같은 단어를 검색해 예산, 기술 요구사항, 사용 장면을 봅니다.
|
||||
- 각 성/시 공공자원 거래센터
|
||||
사용법: 지방 정부와 국유기업이 실제로 어떤 시스템을 구매하는지 봅니다.
|
||||
- 비표망 / 천리마 입찰망 / 표사통
|
||||
사용법: 기업 측 구매 수요와 자주 등장하는 시스템 유형을 봅니다.
|
||||
|
||||
이 출처들의 강한 신호는 미래를 토론하는 것이 아니라, "오늘 이미 누군가 이 일에 돈을 쓰려 한다"는 사실을 드러낸다는 점입니다.
|
||||
|
||||
### 누가 실제로 무엇을 불평하는지 보기
|
||||
|
||||
- 제조업: 기계 커뮤니티, 공업 제어 포럼
|
||||
- 의료: Dingxiangyuan, Yimaitong
|
||||
- 건축 / 공정: 토목온라인, Guanglianda 커뮤니티
|
||||
- 재무 / 회계: 중국회계시야 포럼
|
||||
- 무역: Fubu 외무 포럼, Miker Circle
|
||||
- 외식 / 리테일: 직업외식망, Lianshang 포럼
|
||||
- [Reddit](https://www.reddit.com/)의 수직 게시판: `r/smallbusiness`, `r/Entrepreneur`, `r/SaaS`, `r/healthcare`, `r/manufacturing`
|
||||
- [V2EX](https://www.v2ex.com/)
|
||||
- Jike
|
||||
- Xiaohongshu
|
||||
|
||||
검색할 때 "AI", "혁신"만 검색하지 마세요. 더 효과적인 검색어는 다음입니다.
|
||||
|
||||
- 너무 번거롭다
|
||||
- 더 좋은 방법 없나요
|
||||
- 도구 추천 부탁
|
||||
- Excel로는 관리가 안 된다
|
||||
- I wish there was
|
||||
- is there a tool for
|
||||
- I hate
|
||||
|
||||
### 누가 반복적인 수작업 서비스를 파는지 보기
|
||||
|
||||
- [Fiverr](https://www.fiverr.com/)
|
||||
- [Upwork](https://www.upwork.com/)
|
||||
- Zhu Bajie
|
||||
- 타오바오
|
||||
- Xianyu
|
||||
|
||||
다음 서비스가 잘 팔리는 것을 보면 계속 조사할 가치가 있습니다.
|
||||
|
||||
- PDF 견적서를 Excel로 정리해 주기
|
||||
- 고객 자료를 대량 정리해 주기
|
||||
- 이력서/문구 수정, 녹취, 아카이빙 대행
|
||||
|
||||
이런 서비스 뒤에는 보통 일회성 수요가 아니라 반복적으로 발생하는 워크플로우가 있습니다.
|
||||
|
||||
### idea 목록만 보지 말고 전체 워크플로우를 보세요
|
||||
|
||||
때로는 가장 직접적인 방법이 하나의 산업을 골라 프로세스를 한 번 훑고, 아직 WeChat, Excel, 종이와 펜, 전화에 의존하는 단계를 찾는 것입니다.
|
||||
|
||||
- 무역: 공급업체 찾기, 문의, 가격 비교, 견적서 만들기, 고객에게 보내기, 회신 추적, 검품 준비, 선적 예약, 통관.
|
||||
볼 만한 진입점: 공급업체 견적을 고객용 견적서로 정리하기.
|
||||
- 치과: 접수, 촬영, 영상 판독, 치료 방안 소통, 후속 관리, 치료, 재진.
|
||||
볼 만한 진입점: 환자에게 치료 방안을 설명하고 계속 후속 관리하기.
|
||||
- 건설 현장: 순찰, 사진 촬영, 단체 채팅방 공유, 보고서 정리, 발주처 제출.
|
||||
볼 만한 진입점: 현장 사진에서 규정 준수 보고서까지.
|
||||
|
||||
<a id="idea-vc"></a>
|
||||
## [4. VC / 액셀러레이터 출처: "파도가 어디로 치는지" 보기](#top-idea-sources)
|
||||
|
||||
이런 출처는 큰 방향을 찾는 데 적합하지만, 검증을 직접 대체하기에는 적합하지 않습니다.
|
||||
|
||||
- [Y Combinator — Requests for Startups](https://www.ycombinator.com/rfs)
|
||||
사용법: 진입점을 찾기에 적합합니다. "우리는 누군가 이것을 만들기를 보고 싶다"고 직접 말하는 경우가 많기 때문입니다.
|
||||
- [a16z — Big Ideas](https://a16z.com/big-ideas-2025/)
|
||||
사용법: 큰 트렌드와 분야 판단에 더 가깝습니다. 산업 감각을 만들기에 좋습니다.
|
||||
- [NFX](https://www.nfx.com/)
|
||||
사용법: 창업 주제 묶음을 빠르게 훑기에 적합합니다.
|
||||
- [Sequoia Capital](https://www.sequoiacap.com/article/)
|
||||
사용법: 반드시 아이디어를 직접 나열하지는 않지만, 어떤 플랫폼 변화와 기회를 설명하는 경우가 많습니다.
|
||||
- [First Round Review](https://review.firstround.com/)
|
||||
사용법: 특정 방향을 깊게 파기에 적합합니다. 반드시 아이디어 목록은 아니지만 글의 품질이 보통 높습니다.
|
||||
|
||||
이런 출처의 장점:
|
||||
|
||||
- 앞으로 어떤 방향을 볼 만한지 알려 준다.
|
||||
- 어떤 트랙이 계속 추진될 가능성이 있는지 알려 준다.
|
||||
- 특정 트랙의 맥락에 빠르게 들어가게 해 준다.
|
||||
|
||||
이런 출처의 한계:
|
||||
|
||||
- 보통 투자자 관점이다.
|
||||
- 구체적으로 어떤 역할이 가장 아픈지 반드시 알려 주지는 않는다.
|
||||
- 어떤 프로세스 단계가 가장 막히는지 반드시 알려 주지는 않는다.
|
||||
- 오늘 누가 이미 이것에 돈을 쓰고 있는지 반드시 알려 주지는 않는다.
|
||||
|
||||
따라서 더 좋은 사용법은 이 출처들로 방향을 찾고, 다시 참고 제품, 산업 포럼, 조달 정보, 실제 워크플로우로 돌아가 더 구체적인 진입점을 찾는 것입니다.
|
||||
|
||||
<a id="idea-path"></a>
|
||||
## [5. "아이디어는 없고 어시스턴트를 만들고 싶다는 것만 아는 사람"에게 가장 적합한 최단 사용 경로](#top-idea-sources)
|
||||
|
||||
가장 짧은 경로 하나만 간다면 이렇게 하세요.
|
||||
|
||||
1. 1단계, 30분.
|
||||
[r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)를 열고 `Top -> Past Year`로 정렬합니다. 게시물 50개를 빠르게 훑으며 "이건 내가 만들 수 있을 것 같다"고 느끼는 방향을 모두 저장합니다.
|
||||
2. 2단계, 30분.
|
||||
[Starter Story](https://www.starterstory.com/) 또는 [Indie Hackers Products](https://www.indiehackers.com/products)를 열어 수익 순으로 정렬합니다. 중간 정도 수익의 제품을 보세요. 가장 성공한 제품만 보지 마세요. 1단계와 관련 있는 방향을 찾아, 그들이 정확히 누구에게 팔고 어느 단계를 해결하는지 봅니다.
|
||||
3. 3단계, 20분.
|
||||
[Google Trends](https://trends.google.com/)에서 관련 키워드를 검색해 추세가 성장 중인지 보고, "관련 검색어"의 급상승 단어를 봅니다.
|
||||
4. 4단계, 20분.
|
||||
G2 / Capterra / 산업 포럼 / 입찰 플랫폼 / Fiverr 같은 곳에서 이 방향의 오늘 가장 짜증 나는 지점이 어디인지, 아직 어디가 수작업에 의존하는지 봅니다.
|
||||
|
||||
다 보고 나서 아래 문장을 명확히 말할 수 있으면 충분합니다.
|
||||
|
||||
- 어떤 유형의 사람이, 어떤 장면에서, 어느 프로세스 단계에 막혀 있고, 지금은 주로 어떤 서툰 방법으로 버티고 있다.
|
||||
|
||||
<a id="idea-ai"></a>
|
||||
## [6. AI는 어떻게 도와줄 수 있나](#top-idea-sources)
|
||||
|
||||
이 글의 중점은 AI가 아니지만, AI는 정리에 매우 적합합니다.
|
||||
|
||||
가장 실용적인 사용법은 두 가지뿐입니다.
|
||||
|
||||
- 훑어 본 링크, 게시물 제목, 사용자의 원문을 AI에게 붙여 넣고 "사람군 / 장면 / 고통점 / 대체 방안"으로 분류하게 합니다.
|
||||
- AI에게 흩어진 정보를 후보 방향 3개로 수렴하게 합니다. 계속 기능 50개로 발산하게 하지 마세요.
|
||||
|
||||
바로 이렇게 물어볼 수 있습니다.
|
||||
|
||||
```text
|
||||
최근에 이런 출처들을 봤어.
|
||||
1. [제목이나 원문 붙여넣기]
|
||||
2. [제목이나 원문 붙여넣기]
|
||||
3. [제목이나 원문 붙여넣기]
|
||||
|
||||
기능 목록을 주지 마.
|
||||
딱 세 가지만 해 줘.
|
||||
1. 사람군과 장면별로 분류
|
||||
2. 반복해서 나타나는 번거로운 단계 찾기
|
||||
3. 더 구체적인 후보 방향 3개로 정리
|
||||
```
|
||||
|
||||
## 더 읽어 보기
|
||||
|
||||
- [Y Combinator - Requests for Startups](https://www.ycombinator.com/rfs)
|
||||
- [a16z - Big Ideas](https://a16z.com/big-ideas-2025/)
|
||||
- [NFX](https://www.nfx.com/)
|
||||
- [Reddit - r/SomebodyMakeThis](https://www.reddit.com/r/SomebodyMakeThis/)
|
||||
- [Reddit - r/AppIdeas](https://www.reddit.com/r/AppIdeas/)
|
||||
- [Reddit - r/Startup_Ideas](https://www.reddit.com/r/Startup_Ideas/)
|
||||
- [Starter Story](https://www.starterstory.com/)
|
||||
- [Indie Hackers - Products](https://www.indiehackers.com/products)
|
||||
- [Product Hunt](https://www.producthunt.com/)
|
||||
- [BetaList](https://betalist.com/)
|
||||
- [IdeasAI](https://ideasai.com/)
|
||||
- [Unvalidated Ideas](https://unvalidatedideas.com/)
|
||||
- [Google Trends](https://trends.google.com/)
|
||||
- [Exploding Topics](https://explodingtopics.com/)
|
||||
- [G2](https://www.g2.com/)
|
||||
- [Capterra](https://www.capterra.com/)
|
||||
|
||||
@@ -0,0 +1,765 @@
|
||||
---
|
||||
title: 'B 사이드 산업 앱 장면 방향 참고'
|
||||
description: '이 문서는 LLM 대형 모델이 B 사이드 기업 장면에서 실제로 적용될 수 있는 앱을 정리합니다. 산업 제조, 지능형 고객지원, 교육, 지능형 프로그래밍, 의료, 네트워크 보안, 금융 관리, 기업 서비스 등 영역의 구체적인 적용 방향을 포함하며, 기업 고객을 향한 AI 앱 개발자에게 참고 자료를 제공합니다.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { computed, ref } from 'vue'
|
||||
|
||||
const duration = '약 <strong>6시간</strong>'
|
||||
|
||||
const interestPoint = ref('')
|
||||
const purpose = ref('')
|
||||
|
||||
// 각 업계의 주제 풀
|
||||
const topicPool = {
|
||||
'manufacturing': [
|
||||
{ title: '신에너지 버스 외관 AI 보조 설계 플랫폼', desc: '이미지 생성 모델을 바탕으로 외관 콘셉트 설계를 수행합니다' },
|
||||
{ title: '지능형 도면 설계와 검토 도우미', desc: 'RAG 기술로 기업 설계 규범 지식베이스를 구축합니다' },
|
||||
{ title: '기술 문서 자동 생성과 관리', desc: 'LLM 기반으로 제품 사양서와 조작 매뉴얼을 자동 생성합니다' },
|
||||
{ title: '생산 설비 점검 보고서 자동 생성 도우미', desc: '음성으로 설비 상태를 설명하면 구조화된 점검 보고서를 생성합니다' },
|
||||
{ title: '산업 설비 고장 진단 지식 질의응답 도우미', desc: '과거 고장 사례를 바탕으로 벡터 지식베이스를 구축합니다' }
|
||||
],
|
||||
'customer-service': [
|
||||
{ title: '다채널 지능형 고객지원 자동 답변과 티켓 생성 시스템', desc: '여러 채널 메시지를 연결하고 LLM이 의도를 이해한 뒤 답변을 생성합니다' },
|
||||
{ title: '잠재 고객 발굴과 후속 제안 도우미', desc: '과거 대화 기록을 분석해 구매 의향이 높은 고객을 식별합니다' },
|
||||
{ title: '기업 내부 지식 지능형 검색과 질의응답 매니저', desc: '내부 문서를 바탕으로 벡터 지식베이스를 구축합니다' },
|
||||
{ title: '고객지원 대화 지능형 요약과 티켓 생성 도구', desc: '대화 요약을 자동 생성하고 핵심 정보를 추출합니다' },
|
||||
{ title: '고객지원 우수 화법 추천 지식베이스 시스템', desc: '우수 사례를 분석해 베스트 화법 템플릿을 정제합니다' }
|
||||
],
|
||||
'education': [
|
||||
{ title: '개인화 언어 학습 경로 계획과 지능형 학습 안내 시스템', desc: '학습자 수준을 평가하고 매일의 학습 작업을 계획합니다' },
|
||||
{ title: '수업안 자동 작성과 교육 자료 추천 플랫폼', desc: '교과 과정 개요에 따라 수업안 프레임워크를 생성합니다' },
|
||||
{ title: '과제 자동 채점과 학습 상태 진단 분석 시스템', desc: '서술형 문제를 자동 채점하고 채점 제안을 생성합니다' },
|
||||
{ title: '인재 직무 역량 모델 구축과 학습 지도', desc: '직무 설명을 분석해 역량 요구를 추출합니다' },
|
||||
{ title: '외국어 말하기 일대일 상황형 실전 연습', desc: 'LLM이 서로 다른 역할을 맡아 말하기 대화를 진행합니다' }
|
||||
],
|
||||
'programming': [
|
||||
{ title: '지능형 코드 완성과 버그 자동 수정 도우미', desc: 'IDE 플러그인이 실시간으로 코드 완성 제안을 제공합니다' },
|
||||
{ title: '로우코드 앱 구축과 프로세스 자동화 플랫폼', desc: '자연어 요구 설명을 로우코드 설정으로 변환합니다' },
|
||||
{ title: '단위 테스트 케이스 생성 시스템', desc: 'AST로 소스 코드를 파싱해 경계 조건 테스트 케이스를 생성합니다' },
|
||||
{ title: '코드 지능형 분석과 언어 마이그레이션 도구', desc: '코드 품질을 분석하고 최적화 제안을 제공합니다' },
|
||||
{ title: '프론트엔드 인터페이스(UI) 코드 자동 생성 도구', desc: '디자인 시안 이미지를 인식해 반응형 CSS를 생성합니다' }
|
||||
],
|
||||
'healthcare': [
|
||||
{ title: '의학 검사 보고서 지능형 해석 도우미', desc: 'OCR로 핵심 지표를 인식하고 이상값을 해석합니다' },
|
||||
{ title: '지식 검색 기술 기반 건강 상담 전문가', desc: '의학 지식 그래프를 구축하고 RAG 검색으로 답변을 생성합니다' },
|
||||
{ title: '임상 연구 데이터 의사결정 분석 플랫폼', desc: 'EMR 데이터를 통합하고 통계 분석 코드 생성을 보조합니다' },
|
||||
{ title: '의학 영상 보고서 자동 생성 도구', desc: '영상 특징을 설명하면 구조화된 보고서를 자동 생성합니다' },
|
||||
{ title: '만성질환 관리 복약 알림 지능형 도우미', desc: '개인화 복약 알림을 생성하고 복약 금기 검사를 지원합니다' }
|
||||
],
|
||||
'security': [
|
||||
{ title: '코드 보안 취약점 탐지와 수정 엔진', desc: 'SAST로 코드를 스캔하고 취약점 원리를 분석합니다' },
|
||||
{ title: 'AI 생성형 피싱 메일 지능형 식별과 차단 시스템', desc: '메일 내용을 분석해 AI가 생성한 피싱 메일을 식별합니다' },
|
||||
{ title: '보안 운영 일일 보고서 자동 생성 도우미', desc: '로그를 모아 핵심 이벤트를 자동 추출합니다' },
|
||||
{ title: '침투 테스트 보고서 지능형 생성 도우미', desc: '취약점 설명에 따라 보고서를 자동 생성합니다' },
|
||||
{ title: '위협 인텔리전스 지능형 조회와 분석 도우미', desc: '여러 출처의 위협 인텔리전스를 연결하고 내용을 해석합니다' }
|
||||
],
|
||||
'finance': [
|
||||
{ title: '신용 실사 보고서 지능형 생성 도우미', desc: '재무 데이터를 입력하면 신용 실사 보고서를 자동 생성합니다' },
|
||||
{ title: '프라이빗 뱅킹 자산관리 지능형 고문', desc: '고객 위험 선호를 분석하고 자산 배분 제안을 생성합니다' },
|
||||
{ title: 'IPO 투자설명서 지능형 생성과 컴플라이언스 검증 도우미', desc: '모듈형 템플릿으로 사업 설명을 자동 채웁니다' },
|
||||
{ title: '기업 재무 보고서 자동 생성과 경영 이상 경고 시스템', desc: '재무 분석과 경영진 논의를 자동 생성합니다' },
|
||||
{ title: '보험 설계사 지능형 화법 연습', desc: '모의 대화를 통해 화법의 규정 준수와 설득력을 평가합니다' }
|
||||
],
|
||||
'enterprise': [
|
||||
{ title: '기업 계약 전 생명주기 컴플라이언스 검토와 수정 제안 플랫폼', desc: '조항을 법규 라이브러리와 비교해 컴플라이언스 검토 보고서를 생성합니다' },
|
||||
{ title: '영업 대화 음성 전사와 화법 추천', desc: 'ASR로 전사하고 대화를 분석해 베스트 화법을 추천합니다' },
|
||||
{ title: '마케팅 콘텐츠 지능형 생성과 디자인 시스템', desc: '마케팅 문안과 판매 포인트를 생성합니다' },
|
||||
{ title: '경쟁사 광고 집행 분석 플랫폼', desc: '경쟁사 광고를 수집하고 집행 전략을 분석합니다' },
|
||||
{ title: '전 웹 핫이슈 주제 지능형 분석과 콘텐츠 추천 시스템', desc: '핫이슈 추세를 분석하고 주제 각도를 추천합니다' }
|
||||
],
|
||||
'content': [
|
||||
{ title: '영상과 소설 콘텐츠 창작 보조 플랫폼', desc: '스토리 개요, 인물 설정, 대사 생성을 제공합니다' },
|
||||
{ title: '기업 브랜드 스토리와 PR 기사 지능형 작성 도우미', desc: '브랜드 키워드를 입력하면 여러 스타일의 문안을 생성합니다' },
|
||||
{ title: '가상 디지털 휴먼 라이브 상호작용과 송출 관리 시스템', desc: '디지털 휴먼 이미지 + TTS 음성 + LLM 대화를 결합합니다' },
|
||||
{ title: '짧은 영상 스크립트 생성과 지능형 편집', desc: '짧은 영상 스크립트와 콘티를 생성합니다' },
|
||||
{ title: '마케팅 콘텐츠 지능형 생성과 디자인 시스템', desc: '마케팅 문안과 판매 포인트를 생성합니다' }
|
||||
],
|
||||
'government': [
|
||||
{ title: '12345 공공 민원 핫라인 지능형 음성 안내와 자동 배정 시스템', desc: '음성 인식으로 요구를 이해하고 지능적으로 배정합니다' },
|
||||
{ title: '공공 서비스 센터 지능형 안내와 정책 질의응답 봇', desc: '공공 행정 지식베이스 RAG 검색을 사용합니다' },
|
||||
{ title: '기업 지원 정책 지능형 매칭과 정밀 푸시 플랫폼', desc: '기업 프로필과 적용 가능한 정책을 자동 매칭합니다' },
|
||||
{ title: '행정 승인 자료 지능형 사전 검토와 컴플라이언스 검증 도우미', desc: 'OCR 인식과 핵심 정보 추출을 수행합니다' },
|
||||
{ title: '도시 그리드 사건 지능형 식별과 dispatch 관리 플랫폼', desc: '사건 유형을 식별하고 배정합니다' }
|
||||
],
|
||||
'legal': [
|
||||
{ title: '계약 위험 구멍 원클릭 점검 Agent', desc: '위험 체크리스트와 대조해 잠재 문제를 식별합니다' },
|
||||
{ title: '유사 사건 승소율 AI 지능형 평가 고문', desc: '사건 특징을 추출하고 유사 판례를 검색해 매칭합니다' },
|
||||
{ title: '법규 변경 실시간 모니터링과 업무 영향 분석 레이더', desc: '변경 내용을 해석하고 업무 영향을 평가합니다' },
|
||||
{ title: '변호사 내용증명 AIGC 자동 초안 도구', desc: '사실 진술을 입력하면 표준 변호사 서한을 생성합니다' },
|
||||
{ title: '복잡한 법률 조항을 쉬운 말로 바꾸는 설명 플러그인', desc: '쉽게 이해할 수 있는 설명을 생성합니다' }
|
||||
],
|
||||
'travel': [
|
||||
{ title: 'AIGC 기반 게으른 여행 일정 생성기', desc: '매일의 여행 일정을 생성합니다' },
|
||||
{ title: '전 웹 항공권 호텔 가격 추세 예측과 저가 자동 잠금 봇', desc: 'ML 모델로 가격 추세를 예측합니다' },
|
||||
{ title: '비자 자료 지능형 사전 검토와 자동 양식 작성 보조 시스템', desc: 'OCR로 정보 완전성을 검사합니다' },
|
||||
{ title: '해외여행 실시간 음성 번역과 메뉴 시각 번역 매니저', desc: '오프라인 음성 번역과 메뉴 이미지 OCR을 제공합니다' },
|
||||
{ title: '여행 발자취 자동 여행기와 소셜 문안 생성 도우미', desc: '사진 정보를 추출해 여행기 문안을 생성합니다' }
|
||||
],
|
||||
'emotion': [
|
||||
{ title: 'LLM 대형 모델 기반 24시간 깊은 동행 가상 파트너', desc: '기억 시스템에 대화 기록을 저장합니다' },
|
||||
{ title: '멀티모달 감정 인식과 심리 상담 AI 고문', desc: '음성 억양 분석 + 문자 감정 인식을 결합합니다' },
|
||||
{ title: '알츠하이머 노인 AI 인지 훈련과 기억 깨우기 디지털 휴먼', desc: '인지 게임 훈련과 오래된 사진으로 기억을 불러옵니다' },
|
||||
{ title: '사회불안인을 위한 AIGC 모의 소셜 연습 코치', desc: '가상 소셜 장면을 시뮬레이션합니다' },
|
||||
{ title: '상시 기분 모니터링과 AI 긍정 감정 격려 도우미', desc: '기분 추세를 분석하고 격려 콘텐츠를 생성합니다' }
|
||||
],
|
||||
'entertainment': [
|
||||
{ title: 'LLM 구동 오픈월드 게임 NPC 자율 의사결정 엔진', desc: 'NPC 행동 트리와 LLM 의사결정을 융합합니다' },
|
||||
{ title: '몰입형 추리 게임 AIGC 이야기 추론과 DM 진행 보조 도구', desc: '플레이어 선택이 이야기 분기를 트리거합니다' },
|
||||
{ title: '인터랙티브 소설 결말 생성식 수정기', desc: '독자 선택이 이야기 방향에 영향을 줍니다' },
|
||||
{ title: 'e스포츠 전황 CV 시각 분석과 AI 지능형 해설자', desc: '게임 화면을 실시간 분석합니다' },
|
||||
{ title: '다중 역할 TTS 음성 합성 오디오북 자동 생성 시스템', desc: '텍스트 역할을 배분하고 개인화 음색을 생성합니다' }
|
||||
],
|
||||
'ecommerce': [
|
||||
{ title: '고전환율 AIGC 상품 상세 페이지 대량 생산 도구', desc: '판매 포인트 문안과 장면 설명을 생성합니다' },
|
||||
{ title: '의류 가상 모델 AI 지능형 착용과 전시 영상 생성 공장', desc: '가상 모델 착용 효과를 생성합니다' },
|
||||
{ title: '크로스보더 이커머스 다국어 LLM 현지화 번역과 윤문 도우미', desc: '상품 설명을 여러 언어로 번역합니다' },
|
||||
{ title: '24시간 상시 AIGC 디지털 휴먼 라이브 커머스 시스템', desc: '디지털 휴먼 이미지 + 실시간 화법 생성을 결합합니다' },
|
||||
{ title: '시장 유행 추세 AI 통찰과 히트 상품 예측 엔진', desc: '추세와 핫이슈를 통찰하고 상품 선정 제안을 제공합니다' }
|
||||
],
|
||||
'energy': [
|
||||
{ title: '가정 전력 사용 행동 AI 분석과 절전 전략 고문', desc: '전력 사용 패턴을 분석하고 절전 제안을 생성합니다' },
|
||||
{ title: '태양광 모듈 결함 드론 CV 시각 식별 시스템', desc: '드론 점검 촬영과 열적외선 이미지 분석을 수행합니다' },
|
||||
{ title: '전력 현물 거래 가격 AI 추세 예측과 자동 수익 전략 Agent', desc: '가격 예측 모델과 전략 생성을 제공합니다' },
|
||||
{ title: '기업 전 링크 탄소 배출 AI 자동 산정과 ESG 보고서 생성 도우미', desc: '탄소 배출 계수를 계산하고 ESG 보고서를 생성합니다' },
|
||||
{ title: '전력망 극단 기상 부하 AI 예측과 비상 dispatch 지휘 시스템', desc: '부하 예측 모델과 dispatch 전략을 생성합니다' }
|
||||
],
|
||||
'av-media': [
|
||||
{ title: '장편 영상 하이라이트 AI 식별과 짧은 영상 자동 편집 도구', desc: '영상 내용을 분석하고 키프레임을 식별합니다' },
|
||||
{ title: '영상 배경 소음 AI 지능형 분리와 음성 강화 도우미', desc: '오디오 분리 모델로 배경 소음을 제거합니다' },
|
||||
{ title: '오래된 영상 4K 초해상 복원과 AI 지능형 색 입히기 워크벤치', desc: '영상 초해상도 모델과 AI 자동 색 입히기를 사용합니다' },
|
||||
{ title: '텍스트를 실제 사람 수준 TTS 더빙으로 바꾸는 감정 제어 시스템', desc: '다중 음색 TTS 모델과 감정 제어를 제공합니다' },
|
||||
{ title: '회의 녹음 AI 지능형 전사와 핵심 할 일 추출 도우미', desc: '여러 사람 회의 음성을 분리 전사합니다' }
|
||||
],
|
||||
'ai-marketing': [
|
||||
{ title: 'Xiaohongshu 히트 문안 AIGC 자동 작성 엔진', desc: '추천형 문안을 생성하고 이모지를 최적화합니다' },
|
||||
{ title: '마케팅 포스터 AI 지능형 레이아웃과 다중 사이즈 적응 도구', desc: '포스터 템플릿을 지능적으로 매칭합니다' },
|
||||
{ title: '브랜드 LOGO 창의 AIGC 생성과 VI 체계 구축 플랫폼', desc: 'LOGO 아이디어를 생성하고 VI 규범을 생성합니다' },
|
||||
{ title: '전 웹 핫이슈 AI 추적과 트렌드 활용 마케팅 아이디어 생성 도우미', desc: '마케팅 각도를 분석하고 창의 방안을 생성합니다' },
|
||||
{ title: '짧은 영상 스크립트 아이디어 AIGC 생성과 콘티 지도 도우미', desc: '스크립트와 콘티를 생성하고 촬영 제안을 제공합니다' }
|
||||
],
|
||||
'data-intelligence': [
|
||||
{ title: '자연어를 SQL 문으로 자동 생성하는 도구', desc: '자연어 질의를 SQL로 변환합니다' },
|
||||
{ title: '기업 데이터 자산 목록 지능형 점검과 분류 시스템', desc: '메타데이터를 수집하고 자동 분류합니다' },
|
||||
{ title: '데이터 품질 이상 자동 탐지와 수정 제안 엔진', desc: '규칙 엔진 + ML 모델로 이상을 탐지합니다' },
|
||||
{ title: '지능형 보고서 생성과 시각화 설정 도우미', desc: '대화형으로 보고서 설정을 생성합니다' },
|
||||
{ title: '데이터 지표 정의 지능형 질의응답 도우미', desc: '지표 정의 문서를 바탕으로 지식베이스를 구축합니다' }
|
||||
]
|
||||
}
|
||||
|
||||
// 미리 정의한 추천 경로 매핑 테이블
|
||||
const recommendationMap = {
|
||||
// 관심 지점: 창의 콘텐츠
|
||||
'creative-content': {
|
||||
'increase-efficiency': ['content', 'av-media', 'ai-marketing', 'entertainment'],
|
||||
'reduce-cost': ['content', 'ecommerce', 'ai-marketing'],
|
||||
'improve-experience': ['entertainment', 'emotion', 'travel', 'content'],
|
||||
'innovate-business': ['ai-marketing', 'content', 'av-media', 'entertainment']
|
||||
},
|
||||
// 관심 지점: 기술 서비스
|
||||
'tech-service': {
|
||||
'increase-efficiency': ['programming', 'enterprise', 'data-intelligence', 'customer-service'],
|
||||
'reduce-cost': ['programming', 'enterprise', 'manufacturing'],
|
||||
'improve-experience': ['customer-service', 'enterprise', 'programming'],
|
||||
'innovate-business': ['data-intelligence', 'programming', 'security', 'enterprise']
|
||||
},
|
||||
// 관심 지점: 데이터 지능
|
||||
'data-intel': {
|
||||
'increase-efficiency': ['data-intelligence', 'finance', 'enterprise', 'manufacturing'],
|
||||
'reduce-cost': ['data-intelligence', 'manufacturing', 'energy'],
|
||||
'improve-experience': ['data-intelligence', 'customer-service', 'ecommerce'],
|
||||
'innovate-business': ['data-intelligence', 'finance', 'security', 'ai-marketing']
|
||||
},
|
||||
// 관심 지점: 사용자 서비스
|
||||
'user-service': {
|
||||
'increase-efficiency': ['customer-service', 'ecommerce', 'travel', 'enterprise'],
|
||||
'reduce-cost': ['customer-service', 'ecommerce', 'enterprise'],
|
||||
'improve-experience': ['customer-service', 'emotion', 'travel', 'ecommerce', 'entertainment'],
|
||||
'innovate-business': ['ecommerce', 'travel', 'emotion', 'entertainment']
|
||||
},
|
||||
// 관심 지점: 업계 솔루션
|
||||
'industry-solution': {
|
||||
'increase-efficiency': ['manufacturing', 'healthcare', 'finance', 'government'],
|
||||
'reduce-cost': ['manufacturing', 'energy', 'enterprise', 'finance'],
|
||||
'improve-experience': ['healthcare', 'education', 'government', 'travel'],
|
||||
'innovate-business': ['finance', 'security', 'legal', 'healthcare', 'government']
|
||||
}
|
||||
}
|
||||
|
||||
const interestOptions = [
|
||||
{ label: '창의 콘텐츠 생성', value: 'creative-content', desc: '문안, 이미지, 영상 등 창의 콘텐츠' },
|
||||
{ label: '기술 서비스 도구', value: 'tech-service', desc: '개발 도구, 자동화, 코드 보조' },
|
||||
{ label: '데이터 지능 분석', value: 'data-intel', desc: '데이터 분석, 예측, 지능형 의사결정' },
|
||||
{ label: '사용자 서비스 경험', value: 'user-service', desc: '고객지원, 마케팅, 사용자 경험' },
|
||||
{ label: '업계 솔루션', value: 'industry-solution', desc: '특정 업계의 깊은 적용' }
|
||||
]
|
||||
|
||||
const purposeOptions = [
|
||||
{ label: '효율 향상', value: 'increase-efficiency', desc: '자동화, 프로세스 가속' },
|
||||
{ label: '비용 절감', value: 'reduce-cost', desc: '인력 감소, 자원 최적화' },
|
||||
{ label: '경험 개선', value: 'improve-experience', desc: '사용자 만족도, 서비스 품질' },
|
||||
{ label: '비즈니스 혁신', value: 'innovate-business', desc: '새 제품, 새 모델' }
|
||||
]
|
||||
|
||||
const industries = [
|
||||
{ key: 'manufacturing', name: '산업 제조업', anchor: '#_1-산업-제조업' },
|
||||
{ key: 'customer-service', name: '지능형 고객지원', anchor: '#_2-지능형-고객지원' },
|
||||
{ key: 'education', name: '교육 업계', anchor: '#_3-교육-업계' },
|
||||
{ key: 'programming', name: '지능형 프로그래밍', anchor: '#_4-지능형-프로그래밍' },
|
||||
{ key: 'healthcare', name: '의료 방향', anchor: '#_5-의료-방향' },
|
||||
{ key: 'security', name: '네트워크 보안', anchor: '#_6-네트워크-보안' },
|
||||
{ key: 'finance', name: '금융 관리와 보험 은행업', anchor: '#_7-금융-관리와-보험-은행업' },
|
||||
{ key: 'enterprise', name: '기업 서비스', anchor: '#_8-기업-서비스' },
|
||||
{ key: 'content', name: '콘텐츠 생산과 운영', anchor: '#_9-콘텐츠-생산과-운영' },
|
||||
{ key: 'government', name: '스마트 행정 관리', anchor: '#_10-스마트-행정-관리' },
|
||||
{ key: 'legal', name: '법무와 계약 관리', anchor: '#_11-법무와-계약-관리' },
|
||||
{ key: 'travel', name: '여행과 이동 서비스', anchor: '#_12-여행과-이동-서비스' },
|
||||
{ key: 'emotion', name: '감정적 동행', anchor: '#_13-감정적-동행' },
|
||||
{ key: 'entertainment', name: '휴식과 엔터테인먼트', anchor: '#_14-휴식과-엔터테인먼트' },
|
||||
{ key: 'ecommerce', name: '이커머스 서비스', anchor: '#_15-이커머스-서비스' },
|
||||
{ key: 'energy', name: '에너지', anchor: '#_16-에너지' },
|
||||
{ key: 'av-media', name: '오디오와 비디오', anchor: '#_17-오디오와-비디오' },
|
||||
{ key: 'ai-marketing', name: 'AI 마케팅', anchor: '#_18-ai-마케팅' },
|
||||
{ key: 'data-intelligence', name: '데이터 지능', anchor: '#_19-데이터-지능' }
|
||||
]
|
||||
|
||||
// 추천 결과 계산 - 주제 풀에서 무작위 추출
|
||||
const recommendationTopics = computed(() => {
|
||||
if (!interestPoint.value || !purpose.value) return []
|
||||
|
||||
const keys = recommendationMap[interestPoint.value]?.[purpose.value] || []
|
||||
const topics = []
|
||||
|
||||
// 각 추천 업계에서 주제 1-2개를 무작위로 추출
|
||||
keys.forEach(key => {
|
||||
const industry = industries.find(item => item.key === key)
|
||||
const industryTopics = topicPool[key] || []
|
||||
|
||||
if (industry && industryTopics.length > 0) {
|
||||
// 주제 1-2개를 무작위로 추출
|
||||
const count = Math.floor(Math.random() * 2) + 1
|
||||
const shuffled = [...industryTopics].sort(() => Math.random() - 0.5)
|
||||
const selected = shuffled.slice(0, Math.min(count, shuffled.length))
|
||||
|
||||
selected.forEach(topic => {
|
||||
topics.push({
|
||||
...topic,
|
||||
industryKey: key,
|
||||
industryName: industry.name,
|
||||
industryAnchor: industry.anchor
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
// 무작위 정렬 후 총개수 제한
|
||||
return topics.sort(() => Math.random() - 0.5).slice(0, 8)
|
||||
})
|
||||
|
||||
// 현재 선택의 설명 가져오기
|
||||
const currentSelection = computed(() => {
|
||||
const interest = interestOptions.find(i => i.value === interestPoint.value)
|
||||
const pur = purposeOptions.find(p => p.value === purpose.value)
|
||||
return {
|
||||
interest: interest?.label || '',
|
||||
purpose: pur?.label || ''
|
||||
}
|
||||
})
|
||||
|
||||
const scrollToAnchor = (anchor) => {
|
||||
// DOM 업데이트 완료를 보장하기 위해 지연 스크롤
|
||||
setTimeout(() => {
|
||||
// ID로 찾기 시도(여러 형식 지원)
|
||||
let element = document.querySelector(anchor)
|
||||
|
||||
// 찾지 못하면 다른 가능한 ID 형식 시도
|
||||
if (!element) {
|
||||
// 밑줄 접두사 제거 시도
|
||||
const altAnchor = anchor.replace('#_', '#')
|
||||
element = document.querySelector(altAnchor)
|
||||
}
|
||||
|
||||
// 그래도 찾지 못하면 제목 텍스트로 찾기
|
||||
if (!element) {
|
||||
// 앵커에서 업계 이름 추출
|
||||
const anchorText = decodeURIComponent(anchor.replace('#', '').replace(/^_/, ''))
|
||||
const headings = document.querySelectorAll('h2, h3')
|
||||
|
||||
for (let heading of headings) {
|
||||
const headingText = heading.textContent.trim()
|
||||
// 완전 일치 또는 포함 일치
|
||||
const cleanHeading = headingText.replace(/^\d+\.\s*/, '')
|
||||
if (cleanHeading === anchorText || headingText.includes(anchorText)) {
|
||||
element = heading
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (element) {
|
||||
element.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
})
|
||||
// 목표 문단 강조 표시
|
||||
element.style.backgroundColor = '#f0f9ff'
|
||||
element.style.transition = 'background-color 0.3s'
|
||||
element.style.padding = '8px'
|
||||
element.style.borderRadius = '4px'
|
||||
setTimeout(() => {
|
||||
element.style.backgroundColor = ''
|
||||
element.style.padding = ''
|
||||
}, 2000)
|
||||
}
|
||||
}, 100)
|
||||
}
|
||||
|
||||
const resetSelection = () => {
|
||||
interestPoint.value = ''
|
||||
purpose.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
# B 사이드 산업 앱 장면 방향 참고
|
||||
|
||||
## 장 안내
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['B 사이드 앱', '산업 앱', 'AI 장면', '적용 참고', '업계 방안']" coreOutput="B 사이드 업계 앱 장면 15개 이상 이해" expectedOutput="기업 고객에 맞는 프로젝트 방향 찾기">
|
||||
|
||||
이 문서는 <strong>LLM 대형 모델이 B 사이드 기업 장면에서 실제로 적용되는 앱</strong>을 정리합니다. 사용자 경험과 감정에 관심을 두는 C 사이드와 달리, B 사이드 제품은 <strong>실제 비즈니스 요구 해결, 효율 향상, 비용 절감</strong>을 더 중시합니다. 각 장면은 모두 <strong>실제로 구현 가능한 가능성</strong>을 갖추고 있으며, <strong>요구 분석부터 기술 구현까지</strong>의 완전한 사고를 포함하므로, 기업 고객을 향한 AI 앱 개발자가 참고하기에 적합합니다.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
## 업계 방향 빠른 선택
|
||||
|
||||
<el-card shadow="hover" style="margin-top: 16px; margin-bottom: 24px; border-left: 5px solid #409EFF;">
|
||||
<div style="font-weight: 600; margin-bottom: 8px;">당신에게 맞는 앱 장면 찾기</div>
|
||||
<div style="color: #606266; font-size: 14px; line-height: 1.6; margin-bottom: 12px;">
|
||||
관심 방향과 달성하고 싶은 목적을 선택하면, 시스템이 관련 업계 장면을 추천합니다. 태그를 클릭하면 해당 절로 이동합니다.
|
||||
</div>
|
||||
<el-row :gutter="16">
|
||||
<el-col :span="12">
|
||||
<el-select v-model="interestPoint" placeholder="관심 방향 선택" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in interestOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>{{ item.label }}</span>
|
||||
<span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-select v-model="purpose" placeholder="실현 목적 선택" style="width: 100%;">
|
||||
<el-option
|
||||
v-for="item in purposeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
<div style="display: flex; flex-direction: column;">
|
||||
<span>{{ item.label }}</span>
|
||||
<span style="font-size: 12px; color: #909399;">{{ item.desc }}</span>
|
||||
</div>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<!-- 추천 결과 표시 - 표 형식 -->
|
||||
<div v-if="recommendationTopics.length > 0" style="margin-top: 16px;">
|
||||
<div style="font-weight: 600; margin-bottom: 10px; color: #409EFF;">
|
||||
당신을 위해 앱 장면 {{ recommendationTopics.length }}개 추천
|
||||
<span style="font-weight: normal; color: #909399; font-size: 13px; margin-left: 8px;">
|
||||
({{ currentSelection.interest }} + {{ currentSelection.purpose }})
|
||||
</span>
|
||||
</div>
|
||||
<el-table
|
||||
:data="recommendationTopics"
|
||||
style="width: 100%; cursor: pointer;"
|
||||
@row-click="(row) => scrollToAnchor(row.industryAnchor)"
|
||||
highlight-current-row>
|
||||
<el-table-column prop="title" label="앱 장면" min-width="300">
|
||||
<template #default="scope">
|
||||
<div style="font-weight: 500; color: #303133;">{{ scope.row.title }}</div>
|
||||
<div style="font-size: 12px; color: #909399; margin-top: 4px;">{{ scope.row.desc }}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="industryName" label="소속 업계" width="180" align="center">
|
||||
<template #default="scope">
|
||||
<el-tag type="info" effect="light" size="small">{{ scope.row.industryName }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div style="margin-top: 10px; font-size: 12px; color: #909399;">
|
||||
💡 표의 아무 행이나 클릭하면 해당 업계 절로 이동합니다.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 선택이 완료되지 않았을 때의 안내 -->
|
||||
<div v-else-if="!interestPoint || !purpose" style="margin-top: 14px; color: #909399; font-size: 13px;">
|
||||
<span v-if="!interestPoint && !purpose">💡 관심 방향과 실현 목적을 선택하세요</span>
|
||||
<span v-else-if="!interestPoint">💡 관심 방향을 선택하세요</span>
|
||||
<span v-else>💡 실현 목적을 선택하세요</span>
|
||||
</div>
|
||||
|
||||
<!-- 초기화 버튼 -->
|
||||
<div v-if="interestPoint || purpose" style="margin-top: 12px;">
|
||||
<el-button size="small" @click="resetSelection">다시 선택</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
## 업계 빠른 소개
|
||||
|
||||
### 주요 기술 선택
|
||||
|
||||
AI 앱 개발에서 흔히 쓰는 기술 방향은 다음과 같습니다.
|
||||
|
||||
1. **LLM(대형 언어 모델)**: 대화, 텍스트 생성, 요약, 번역 같은 자연어 작업에 강하며, 지능형 고객지원, 콘텐츠 창작, 지식 질의응답 앱을 만들기에 적합합니다.
|
||||
2. **VLM(시각 언어 모델)**: 시각 이해와 언어 능력을 결합해 이미지 설명, 시각 질의응답, 멀티모달 콘텐츠 생성 등을 구현할 수 있으며, 의료 영상 분석, 산업 품질 검사, 창의 설계 같은 장면에 적합합니다.
|
||||
3. **GenAI(생성형 AI)**: 텍스트 생성, 이미지 생성(예: Stable Diffusion, DALL·E), 영상 생성 등 기술을 포함하며, 창의 콘텐츠를 빠르게 만들 수 있어 설계 보조, 마케팅 소재 제작, 교육훈련 등 영역에 적합합니다.
|
||||
|
||||
### 선택 전략
|
||||
|
||||
학습자는 다음 차원에 따라 자신에게 맞는 앱 방향을 선택할 수 있습니다.
|
||||
|
||||
1. **관심 지향**: 자신이 관심 있는 업계나 기술 방향을 우선 선택해 학습 동력을 유지합니다. 예:
|
||||
- 창의 설계에 관심이 있다면 콘텐츠 생산, 산업 디자인 앱을 시도할 수 있습니다.
|
||||
- 기술 도전에 관심이 있다면 네트워크 보안, 의료 방향의 앱을 시도할 수 있습니다.
|
||||
- 사회적 가치에 관심이 있다면 스마트 행정, 교육 업계 앱을 시도할 수 있습니다.
|
||||
|
||||
2. **업계 적합성**: 자신의 업계 배경이나 자원 우위를 결합해 장면을 선택합니다.
|
||||
- 제조업 종사자: 산업 제조, 기업 서비스형 앱을 우선 고려할 수 있습니다.
|
||||
- 교육 종사자: 교육 업계, 콘텐츠 생산형 앱에 우선 관심을 둘 수 있습니다.
|
||||
- 의료 종사자: 의료 방향, 건강 관리형 앱을 탐색할 수 있습니다.
|
||||
|
||||
3. **기술 난이도**: 자신의 기술 기초에 따라 적합한 복잡도를 선택합니다.
|
||||
- 입문급: 지능형 고객지원, 콘텐츠 창작, 간단한 질의응답 시스템
|
||||
- 발전급: 산업 품질 검사, 의료 영상 분석, 코드 지능형 도우미
|
||||
- 전문급: 금융 리스크 관리, 네트워크 보안, 멀티모달 복합 앱
|
||||
|
||||
## 1. 산업 제조업
|
||||
|
||||
산업 제조업 장면은 주로 설계 보조, 생산 최적화, 지능형 운영 유지보수라는 세 방향을 중심으로 전개됩니다. 흔한 앱에는 AI 보조 제품 외관 설계, 자동화 도면 검토, 기술 문서 지능형 생성, 산업 설비 고장 진단 등이 있으며, 설계 효율을 크게 높이고 운영 유지 비용을 낮출 수 있습니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 구현 참고 |
|
||||
| :--: | ------------ | -------- |
|
||||
| 1 | 신에너지 버스 외관 AI 보조 설계 플랫폼 | 이미지 생성 모델 기반으로 외관 콘셉트 설계를 수행하고, LLM으로 설계 규범 검사와 아이디어 반복을 진행합니다. Three.js 3D 렌더링 서비스를 통합합니다 |
|
||||
| 2 | 지능형 도면 설계와 검토 도우미 | RAG 기술로 기업 설계 규범 지식베이스를 구축하고, DALL·E가 참고 이미지를 생성해 이해를 돕습니다. CAD API를 통합해 도면 자동 파싱을 구현합니다 |
|
||||
| 3 | 기술 문서 자동 생성과 관리 | LLM을 기반으로 제품 데이터베이스에서 제품 사양서와 조작 매뉴얼을 자동 생성하고, ChromaDB 벡터 저장소에 과거 문서를 저장해 지능형 검색을 지원합니다 |
|
||||
| 4 | 생산 설비 점검 보고서 자동 생성 도우미 | 점검 인력이 음성으로 설비 상태를 설명하면 LLM이 구조화된 점검 보고서를 생성합니다. 과거 고장 기록을 자동 연결합니다 |
|
||||
| 5 | 공장 지게차 지능형 dispatch와 경로 계획 시스템 | LLM이 주문 작업과 창고 위치를 해석하고 지도 API와 결합해 최적 dispatch 방안을 생성합니다 |
|
||||
| 6 | LLM 정보 검색 기반 데이터 웨어하우스 | Text-to-SQL 기술로 자연어를 데이터베이스 질의로 변환하고, Superset으로 질의 결과를 시각화합니다. Doris 또는 ClickHouse를 OLAP 엔진으로 사용합니다 |
|
||||
| 7 | 산업 설비 고장 진단 지식 질의응답 도우미 | 과거 고장 사례 기반 벡터 지식베이스를 구축하고, LLM이 고장 설명에 따라 진단 제안과 해결 방안을 제공합니다 |
|
||||
| 8 | 생산 품질 검사 보고서 지능형 생성과 결함 분류 | OCR로 품질 검사 사진 속 결함을 인식하고 LLM이 구조화된 품질 검사 보고서를 생성합니다. 결함 유형과 심각도를 자동 분류합니다 |
|
||||
| 9 | 재고 실사 지능형 도우미와 실사 보고서 생성 | 실사 데이터를 입력하면 LLM이 시스템 재고와 자동 비교하고 차이 보고서를 생성합니다. 이상 재고 경고를 제공합니다 |
|
||||
| 10 | 공정 프로세스 최적화 제안 지능형 질의응답 시스템 | 생산 공정 문서를 바탕으로 RAG 지식베이스를 구축하고, LLM이 생산 문제에 따라 최적화 제안을 제공합니다 |
|
||||
|
||||
## 2. 지능형 고객지원
|
||||
|
||||
지능형 고객지원 장면은 고객 서비스 효율 향상과 사용자 경험 최적화에 집중합니다. 대표 앱에는 다채널 고객지원 통합, 지능형 답변 생성, 고객 감정 분석, 티켓 자동 처리 등이 있으며, 기업이 7×24시간 고객 서비스를 구현하도록 돕습니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 구현 참고 |
|
||||
| :--: | ------------ | -------- |
|
||||
| 1 | 다채널 지능형 고객지원 자동 답변과 티켓 생성 시스템 | WeChat, APP, 공식 웹사이트 등 다채널 메시지를 연결하고, LLM이 의도를 이해한 뒤 답변을 생성하고 티켓을 자동 생성합니다. LangChain으로 대화 흐름을 만들고 MySQL에 티켓 데이터를 저장합니다 |
|
||||
| 2 | 잠재 고객 발굴과 후속 제안 도우미 | LLM이 과거 고객지원 대화 기록을 분석해 구매 의향이 높은 고객 특징을 식별하고 점수를 매깁니다. 추천 시스템은 협업 필터링 알고리즘을 결합합니다 |
|
||||
| 3 | 기업 내부 지식 지능형 검색과 질의응답 매니저 | Confluence와 내부 문서를 바탕으로 벡터 지식베이스를 만들고, LLM이 RAG 기술과 결합해 답변을 생성합니다 |
|
||||
| 4 | 고객 만족도 조사와 서비스 개선 관리 시스템 | LLM이 고객지원 대화 내용을 자동 분석해 감정 분류와 만족도 점수를 수행합니다. BI 보고서로 분석 결과를 표시합니다 |
|
||||
| 5 | 고객지원 대화 지능형 요약과 티켓 생성 도구 | 고객지원 대화 종료 후 LLM이 대화 요약을 자동 생성하고 핵심 정보를 추출합니다. 티켓 필드를 자동 채웁니다 |
|
||||
| 6 | 고객지원 화법 컴플라이언스 자동 검사 도우미 | 고객지원 담당자가 입력한 답변 내용을 LLM이 실시간 검사해 화법 컴플라이언스와 민감어를 확인하고 수정 제안을 제공합니다 |
|
||||
| 7 | 고객지원 티켓 자동 요약과 분류 생성 도구 | LLM이 긴 대화 기록을 요약하고 자동 분류 태그를 생성합니다. Elasticsearch가 티켓 전문 검색을 지원합니다 |
|
||||
| 8 | 고객 감정 모니터링과 이상 경고 도구 | 음성 억양 특징과 문자 감정을 실시간 분석하고 LLM이 이상 감정을 식별해 경고를 트리거합니다. WebSocket으로 경고 메시지를 푸시합니다 |
|
||||
| 9 | 고객지원 베스트 화법 추천 지식베이스 시스템 | LLM이 우수 고객지원 대화 사례를 분석해 베스트 화법 템플릿을 정제합니다. 추천 시스템은 대화 컨텍스트에 따라 실시간으로 화법을 추천합니다 |
|
||||
| 10 | 지능형 아웃바운드 콜 대화 내용 분석과 품질 검사 도우미 | 아웃바운드 콜 녹음을 전사한 뒤, LLM이 대화 내용을 분석해 핵심 정보를 추출합니다. 품질 검사 보고서와 개선 제안을 자동 생성합니다 |
|
||||
|
||||
## 3. 교육 업계
|
||||
|
||||
교육 업계 장면은 개인화 교육과 스마트 교육 관리를 구현하는 데 힘씁니다. 핵심 앱에는 지능형 학습 경로 계획, 과제 자동 채점, 수업안 생성, 학습 상태 분석 등이 있으며, 교육 자원의 최적 배치와 맞춤형 교육을 추진합니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 구현 참고 |
|
||||
| :--: | ------------ | -------- |
|
||||
| 1 | 개인화 언어 학습 경로 계획과 지능형 학습 안내 시스템 | LLM이 학습자의 현재 수준을 평가하고 학습 목표에 따라 매일의 학습 작업을 계획합니다. 추천 알고리즘과 지식 그래프를 결합해 학습 자원을 추천합니다 |
|
||||
| 2 | 수업안 자동 작성과 교육 자료 추천 플랫폼 | LLM이 교과 과정 개요에 따라 수업안 프레임워크와 교수 설계를 생성합니다. 벡터 저장소에 우수 수업안과 수업 자료를 저장해 키워드 검색과 유사 추천을 지원합니다 |
|
||||
| 3 | 과제 자동 채점과 학습 상태 진단 분석 시스템 | LLM이 서술형 문제를 자동 채점하고 채점 제안을 생성하며, 지식 그래프가 학생의 취약 지식 포인트를 찾아냅니다 |
|
||||
| 4 | 인재 직무 역량 모델 구축과 학습 지도 | LLM이 직무 설명을 분석해 역량 요구를 추출하고 직무 역량 프로필을 구축합니다. 격차에 따라 개인화 학습 지도를 생성합니다 |
|
||||
| 5 | 학교 기반 교육과정 체계 구축과 수업 자료 제작 도구 | LLM이 학교 특성과 학생 요구를 분석해 학교 기반 교육과정 프레임워크를 생성합니다. PPT 생성 인터페이스를 통합해 수업 자료를 자동 제작합니다 |
|
||||
| 6 | 외국어 말하기 일대일 상황형 실전 연습 | LLM이 서로 다른 역할을 맡아 말하기 대화를 진행하고, ASR이 발음을 인식해 점수를 매깁니다. TTS가 표준 발음 시범을 생성합니다 |
|
||||
| 7 | 대학 입시 지원 빅데이터 추천과 진로 계획 지도 플랫폼 | LLM이 수험생 점수, 등수, 관심사 등을 분석하고 입학 데이터를 결합해 학교와 전공을 추천합니다 |
|
||||
| 8 | 어린이 코딩 코드 도우미 | LLM이 코드 로직을 설명하고 프로그래밍 지도를 제공하며, 블록 언어와 Python 전환을 지원합니다 |
|
||||
| 9 | 지식 포인트 마인드맵 자동 생성과 학습 경로 추천 도구 | 수업 주제를 입력하면 LLM이 지식 포인트 마인드맵을 자동 생성합니다. 학습 진도에 따라 다음 학습 내용을 추천합니다 |
|
||||
| 10 | 한국어와 영어 작문 자동 채점과 첨삭 엔진 | LLM이 주제 의식, 구조, 언어, 다양성 등 여러 차원에서 점수를 매기고 주석을 생성합니다. 우수 예시 글과 비교합니다 |
|
||||
|
||||
## 4. 지능형 프로그래밍
|
||||
|
||||
지능형 프로그래밍 장면은 개발 효율과 코드 품질을 높이는 것을 목표로 합니다. 대표 앱에는 지능형 코드 완성, 버그 자동 수정, 자동화 테스트 생성, 코드 변환 등이 있으며, 개발자가 반복적인 코딩 작업이 아니라 비즈니스 로직에 집중하게 합니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 구현 참고 |
|
||||
| :--: | ------------ | -------- |
|
||||
| 1 | 지능형 코드 완성과 버그 자동 수정 도우미 | CodeLlama로 코드 모델을 미세조정하고, IDE 플러그인이 실시간 코드 완성 제안을 제공합니다. LLM이 오류 스택을 분석해 버그를 자동 위치 지정하고 수정 코드를 생성합니다 |
|
||||
| 2 | 로우코드 앱 구축과 프로세스 자동화 플랫폼 | 사용자가 자연어로 요구를 설명하면 LLM이 로우코드 설정이나 코드 프레임워크로 변환합니다 |
|
||||
| 3 | 단위 테스트 케이스 생성 시스템 | AST가 소스 코드를 파싱해 함수 로직을 추출하고, LLM이 경계 조건과 예외 장면의 테스트 케이스를 생성합니다. Jest/Pytest를 통합해 테스트를 실행합니다 |
|
||||
| 4 | 코드 지능형 분석과 언어 마이그레이션 도구 | Tree-sitter 기반으로 코드 구조를 파싱하고, LLM이 코드 품질을 분석해 최적화 제안을 제공합니다. 규칙 엔진과 결합해 언어 변환을 구현합니다 |
|
||||
| 5 | 자연어를 SQL 문으로 자동 생성하는 도구 | LLM이 자연어 질의를 SQL로 변환하며, 복잡한 다중 테이블 조인과 집계 질의를 지원합니다 |
|
||||
| 6 | API 인터페이스 자동화 테스트와 문서 생성 플랫폼 | LLM이 코드 주석과 인터페이스 정의를 분석해 테스트 케이스와 API 문서를 자동 생성합니다. Postman 통합 테스트 실행을 지원합니다 |
|
||||
| 7 | UI 테스트 스크립트 지능형 녹화와 유지보수 도구 | 브라우저 플러그인이 사용자 조작 궤적을 녹화하고, LLM이 조작 의도를 분석해 테스트 스크립트를 생성합니다. AI가 실패한 locator를 수정합니다 |
|
||||
| 8 | 시스템 로그 분석과 장애 위치 지정 | ELK Stack이 로그 데이터를 수집하고, LLM이 이상 로그를 분석해 핵심 정보를 추출하며 근본 원인을 찾습니다. 수정 방안을 추천합니다 |
|
||||
| 9 | 프론트엔드 인터페이스(UI) 코드 자동 생성 도구 | 디자인 시안 이미지를 OCR로 인식해 레이아웃 구조를 파악하고, LLM이 반응형 CSS와 컴포넌트 코드를 생성합니다. TailwindCSS를 통합해 여러 스타일 프레임워크를 지원합니다 |
|
||||
| 10 | 데이터베이스 구조 지능형 설계와 모델링 도우미 | 비즈니스 요구 문서를 LLM에 입력하면 ER 다이어그램과 데이터 테이블 구조를 자동 생성합니다. MySQL/PostgreSQL 테이블 생성 스크립트 내보내기를 지원합니다 |
|
||||
|
||||
## 5. 의료 방향
|
||||
|
||||
의료 방향 장면은 진료 효율과 의료 서비스 품질을 높이는 데 힘씁니다. 흔한 앱에는 진료 기록 자동 생성, 의학 지식 질의응답, 영상 분석 보조, 신약 개발 지원 등이 있으며, 의료 업계의 지능화 전환을 추진합니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 구현 참고 |
|
||||
| :--: | ------------ | -------- |
|
||||
| 1 | 의학 검사 보고서 지능형 해석 도우미 | 검사 보고서 이미지를 업로드하면 OCR이 핵심 지표를 인식하고, LLM이 이상값을 해석해 쉬운 설명을 생성합니다 |
|
||||
| 2 | 지식 검색 기술 기반 건강 상담 전문가 | 의학 지식 그래프(ICD-10, 약품 설명서, 진료 지침)를 구축하고 RAG 검색으로 답변을 생성합니다 |
|
||||
| 3 | 임상 연구 데이터 의사결정 분석 플랫폼 | EMR 데이터와 검사 결과를 통합하고, LLM이 통계 분석 코드와 시각화 차트 생성을 보조합니다. 코호트 연구와 생존 분석을 지원합니다 |
|
||||
| 4 | 의학 시험 문제 지능형 생성과 오답 해설 시스템 | 교재 장과 지식 포인트를 입력하면 LLM이 연습 문제와 해설을 생성합니다. 오답을 자동 수집하고 취약점 분석을 생성합니다 |
|
||||
| 5 | 신약 개발 전 과정 지식 그래프 지능형 질의응답 전문가 | 약물-표적-질병 지식 그래프를 구축하고 LLM이 연구개발 관련 질문에 답합니다. 문헌 검색과 실험 방안 추천을 지원합니다 |
|
||||
| 6 | 의약품 설명서 지능형 질의응답 도우미 | 의약품 설명서 이미지를 업로드하거나 약명을 입력하면 LLM이 용법·용량, 이상 반응, 주의사항 등 질문에 답합니다 |
|
||||
| 7 | 질병 지식 대중화 글 생성 도우미 | 질병명과 독자를 입력하면 LLM이 쉽고 이해하기 쉬운 대중화 글을 생성합니다. 여러 버전(환자용/가족용)을 지원합니다 |
|
||||
| 8 | 의학 영상 보고서 자동 생성 도구 | 영상의학과 의사가 영상 특징을 설명하면 LLM이 구조화된 보고서를 자동 생성합니다. 흔한 검사 유형 템플릿을 지원합니다 |
|
||||
| 9 | 수술 기록 지능형 생성과 보관 도우미 | 수술 과정에서 핵심 단계를 음성으로 입력하면 LLM이 구조화된 수술 기록을 생성합니다. 수술 코드를 자동 연결합니다 |
|
||||
| 10 | 만성질환 관리 복약 알림 지능형 도우미 | 환자가 복약 목록을 입력하면 LLM이 개인화 복약 알림을 생성합니다. 복약 금기 검사와 인터랙티브 질의응답을 지원합니다 |
|
||||
|
||||
## 6. 네트워크 보안
|
||||
|
||||
네트워크 보안 장면은 보안 방어와 위험 통제에 집중합니다. 핵심 앱은 취약점 탐지, 위협 인텔리전스 분석, 피싱 메일 식별, 보안 사건 대응 등을 포함하며, 기업을 위해 전방위 지능형 보안 방어 체계를 구축합니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 구현 참고 |
|
||||
| :--: | ------------ | -------- |
|
||||
| 1 | 코드 보안 취약점 탐지와 수정 엔진 | 정적 코드 분석 도구(SAST)가 코드를 스캔하고, LLM이 취약점 원리를 분석해 수정 제안을 생성합니다. CI/CD 파이프라인을 통합합니다 |
|
||||
| 2 | AI 생성형 피싱 메일 지능형 식별과 차단 시스템 | LLM이 메일 내용, 발신자 특징, 링크 안전성을 분석해 AI가 생성한 피싱 메일을 식별합니다. 메일 게이트웨이와 연결해 실시간 차단합니다 |
|
||||
| 3 | 보안 운영 일일 보고서 자동 생성 도우미 | 보안 장비 로그를 모으고 LLM이 핵심 이벤트를 자동 추출해 일일 보고서를 생성합니다. 이상 이벤트를 highlight 표시합니다 |
|
||||
| 4 | 보안 지식베이스 지능형 질의응답 도우미 | 보안 문서와 CVE 라이브러리 기반 벡터 지식베이스를 구축하고, LLM이 보안 기술과 처치 제안 질문에 답합니다 |
|
||||
| 5 | 침투 테스트 보고서 지능형 생성 도우미 | 침투 테스트 완료 후 LLM이 취약점 설명에 따라 보고서를 자동 생성합니다. 취약점 수정 제안을 일괄 생성합니다 |
|
||||
| 6 | 악성 코드 방어와 개인정보 컴플라이언스 모니터링 | 샌드박스로 의심 파일 행동을 분석하고, LLM이 악성 특징을 식별해 시그니처를 생성합니다. 개인정보 식별 스캔을 수행합니다 |
|
||||
| 7 | 보안 설정 컴플라이언스 체크리스트 생성 도구 | 목표 시스템 유형을 입력하면 LLM이 보안 설정 체크리스트를 생성합니다. Multi-Level Protection 2.0, CIS 등 표준을 지원합니다 |
|
||||
| 8 | 위협 인텔리전스 지능형 조회와 분석 도우미 | 여러 출처의 위협 인텔리전스(오픈소스, 상용)를 연결하고, LLM이 정보를 해석해 기업 자산과 연관 짓습니다. 방어 전략을 추천합니다 |
|
||||
| 9 | 보안 사건 회고 보고서 생성 도우미 | 보안 사건 발생 후 LLM이 타임라인에 따라 회고 보고서를 자동 생성합니다. 근본 원인 분석과 개선 제안을 제공합니다 |
|
||||
| 10 | 글로벌 위협 인텔리전스 모니터링과 경고 센터 | 크롤러가 전 세계 보안 뉴스와 취약점 공개를 수집하고, LLM이 핵심 정보를 추출해 영향을 평가합니다. 메일/문자 경고 알림을 제공합니다 |
|
||||
|
||||
## 7. 금융 관리와 보험 은행업
|
||||
|
||||
금융 영역 장면은 위험 통제와 비즈니스 지능화를 중심으로 전개됩니다. 대표 앱에는 신용 리스크 평가, 자산관리 고문, 재무 보고서 생성, 자금세탁 방지 모니터링 등이 있으며, 금융기관의 운영 효율과 위험 통제 능력을 높입니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 구현 참고 |
|
||||
| :--: | ------------ | -------- |
|
||||
| 1 | 신용 실사 보고서 지능형 생성 도우미 | 기업 기본 정보와 재무 데이터를 입력하면 LLM이 신용 실사 보고서를 자동 생성합니다. 위험 지점을 자동 표시합니다 |
|
||||
| 2 | 프라이빗 뱅킹 자산관리 지능형 고문 | LLM이 고객 위험 선호와 재무 목표를 분석하고 자산 배분 제안을 생성합니다. 자산관리 상품과 펀드 라이브러리를 연결합니다 |
|
||||
| 3 | IPO 투자설명서 지능형 생성과 컴플라이언스 검증 도우미 | 투자설명서 모듈형 템플릿에 LLM이 사업 설명과 위험 요인을 자동 채웁니다. 컴플라이언스 검증 규칙 엔진이 앞뒤 일관성을 검사합니다 |
|
||||
| 4 | 기업 재무 보고서 자동 생성과 경영 이상 경고 시스템 | 재무 시스템 데이터를 자동 수집하고 LLM이 재무 분석과 경영진 논의 부분을 생성합니다. 이상 지표 경고 규칙을 제공합니다 |
|
||||
| 5 | 재무 증빙 정보 추출과 질의응답 도우미 | 청구서 이미지를 업로드하면 OCR이 정보를 인식하고, LLM이 증빙 관련 질문에 답합니다. 부가가치세 청구서, 기차표 등을 지원합니다 |
|
||||
| 6 | 컴플라이언스 사례 지능형 검색과 질의응답 도우미 | 감독기관 처벌 사례를 바탕으로 지식베이스를 구축하고, LLM이 컴플라이언스 질문에 답하며 사례 참고를 제공합니다 |
|
||||
| 7 | 보험 설계사 지능형 화법 연습 | LLM이 서로 다른 유형의 고객을 연기해 모의 대화를 진행하고, 설계사 화법의 규정 준수와 설득력을 평가합니다. 녹음 전사 분석을 제공합니다 |
|
||||
| 8 | 보험 상품 조항 분석과 경쟁 상품 비교 플랫폼 | 조항을 구조화해 파싱하고 LLM이 장점 요약과 주의사항을 생성합니다 |
|
||||
| 9 | 고객 화법 감정 인식 서비스 | 음성 감정 인식과 화법 컴플라이언스 검사를 결합해 설계사에게 실시간 개선 제안을 피드백합니다 |
|
||||
| 10 | 보험금 청구 진행 상황 지능형 조회와 대화 도우미 | 사용자가 보험증권 번호나 접수 번호를 입력하면 LLM이 청구 진행 상황을 조회하고 청구 관련 질문에 답합니다 |
|
||||
|
||||
## 8. 기업 서비스
|
||||
|
||||
기업 서비스 장면은 조직 운영 효율과 관리 수준을 높이는 데 힘씁니다. 흔한 앱에는 고객 관계 관리, 영업 예측, 여론 모니터링, HR 지능형 관리 등이 있으며, 기업의 디지털 전환 업그레이드를 돕습니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 구현 참고 |
|
||||
| :--: | ------------ | -------- |
|
||||
| 1 | 고객 유지 분석과 이탈 경고 플랫폼 | 행동 데이터 추적으로 사용자 조작을 수집하고, ML 모델이 이탈 확률을 예측하며, LLM이 유지 제안을 생성합니다 |
|
||||
| 2 | B2B 잠재 고객 도달과 마케팅 메일 플랫폼 | 기업 상공 데이터를 선별해 목표 고객을 찾고, LLM이 개인화 마케팅 콘텐츠를 생성합니다. 메일 대량 발송 플랫폼을 연결합니다 |
|
||||
| 3 | 영업 파이프라인 모니터링과 성과 예측 플랫폼 | CRM 데이터를 자동 수집하고 LLM이 영업 퍼널을 분석해 성과 달성을 예측합니다. 이상 경고를 관리자에게 푸시합니다 |
|
||||
| 4 | 브랜드 여론 모니터링과 위기 경고 레이더 | 전 웹 여론 데이터(소셜 미디어, 뉴스, 포럼)를 수집하고, LLM이 감정과 전파 추세를 분석합니다. 위기 경고를 푸시합니다 |
|
||||
| 5 | 직장 메일 지능형 작성과 커뮤니케이션 감정 관리 도우미 | 메일 컨텍스트를 이해하고 LLM이 전문적인 메일 초안을 생성합니다. 감정 분석으로 개선 제안을 피드백합니다 |
|
||||
| 6 | 이력서 지능형 파싱과 직무 매칭 시스템 | PDF 이력서를 파싱해 핵심 정보를 추출하고, LLM이 적합한 직무를 매칭하며 면접 제안을 생성합니다. ATS 시스템을 연결합니다 |
|
||||
| 7 | 기업 직원 온보딩 안내와 질의응답 도우미 | 온보딩 문서 지식베이스 RAG 검색을 통해 LLM이 신입 직원의 자주 묻는 질문에 답합니다 |
|
||||
| 8 | 직원 성과 피드백과 OKR 목표 관리 플랫폼 | OKR 시스템 데이터를 수집하고 LLM이 목표 완료 상황을 분석해 피드백 제안을 생성합니다. 360도 피드백을 수집합니다 |
|
||||
| 9 | 지능형 회의 기록과 할 일 관리 | 회의 녹음을 전사하고 LLM이 핵심 논의점과 할 일을 추출합니다. 작업 시스템에 할 일을 자동 생성합니다 |
|
||||
| 10 | 청구서 인식과 비용 정산 자동 처리 | OCR이 청구서 정보를 인식하고, 청구서 진위와 비용 정산 컴플라이언스를 자동 검증합니다. 재무 시스템을 연결합니다 |
|
||||
|
||||
## 9. 콘텐츠 생산과 운영
|
||||
|
||||
콘텐츠 생산과 운영 장면은 창의 생성과 트래픽 운영에 집중합니다. 핵심 앱에는 문안 창작, 짧은 영상 제작, 디지털 휴먼 라이브, SEO 최적화 등이 있으며, 기업의 콘텐츠 생산 효율과 마케팅 전환율을 높입니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 구현 참고 |
|
||||
| :--: | ------------ | -------- |
|
||||
| 1 | 영상과 소설 콘텐츠 창작 보조 플랫폼 | LLM이 스토리 개요, 인물 설정, 대사 생성 등 창작 보조를 제공합니다. 마인드맵으로 이야기 구조를 시각화합니다 |
|
||||
| 2 | 기업 브랜드 스토리와 PR 기사 지능형 작성 도우미 | 브랜드 키워드와 제품 정보를 입력하면 LLM이 여러 스타일의 문안 버전을 생성합니다. A/B 테스트 인터페이스를 연결합니다 |
|
||||
| 3 | 가상 디지털 휴먼 라이브 상호작용과 송출 관리 시스템 | 디지털 휴먼 모델링 + TTS 음성 + LLM 대화로 시청자 댓글에 실시간 응답합니다. OBS 송출을 통합합니다 |
|
||||
| 4 | 짧은 영상 스크립트 생성과 지능형 편집 | LLM이 짧은 영상 스크립트와 콘티를 생성하고, Sora/Runway가 영상 클립을 생성합니다. 편집 도구가 자동으로 이어 붙입니다 |
|
||||
| 5 | 영업 대화 음성 전사와 화법 추천 | 전화 녹음 ASR 전사 후 LLM이 대화를 분석하고 베스트 화법을 추천합니다. CRM 시스템을 통합합니다 |
|
||||
| 6 | 마케팅 콘텐츠 지능형 생성과 디자인 시스템 | 제품 정보를 입력하면 LLM이 마케팅 문안과 판매 포인트를 추출합니다. Canva/Gaoding Design 템플릿을 통합합니다 |
|
||||
| 7 | 다중 플랫폼 광고 집행 ROI 실시간 모니터링과 전략 조정 시스템 | 광고 플랫폼 API를 연결해 데이터를 수집하고, LLM이 집행 효과를 분석해 최적화 제안을 생성합니다. 이상 경고를 푸시합니다 |
|
||||
| 8 | 검색엔진 키워드와 트래픽 분석 | Baidu Index, 5118 데이터를 수집하고, LLM이 키워드 추세와 경쟁도를 분석합니다. 콘텐츠 주제를 추천합니다 |
|
||||
| 9 | 경쟁사 광고 집행 분석 플랫폼 | 제3자 데이터 플랫폼 API로 경쟁사 광고를 수집하고, LLM이 집행 전략과 창의 특징을 분석합니다 |
|
||||
| 10 | 전 웹 핫이슈 주제 지능형 분석과 콘텐츠 추천 시스템 | Weibo 핫검색어, Douyin 인기 순위 데이터를 수집하고, LLM이 핫이슈 추세를 분석해 주제 각도를 추천합니다. 캘린더형 콘텐츠 일정을 제공합니다 |
|
||||
|
||||
## 10. 스마트 행정 관리
|
||||
|
||||
스마트 행정 장면은 정부 서비스 효율과 거버넌스 능력을 높이는 데 힘씁니다. 대표 앱에는 공공 민원 핫라인 지능형 안내, 정책 지능형 질의응답, 행정 승인 최적화, 도시 사건 관리 등이 있으며, 디지털 정부 구축을 추진합니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 구현 참고 |
|
||||
| :--: | ------------ | -------- |
|
||||
| 1 | 12345 공공 민원 핫라인 지능형 음성 안내와 자동 배정 시스템 | 시민 전화 음성을 인식하고, LLM이 요구를 이해해 해당 부서로 지능적으로 배정합니다. 티켓 시스템이 자동으로 흐름을 이어갑니다 |
|
||||
| 2 | 공공 서비스 센터 지능형 안내와 정책 질의응답 봇 | 공공 행정 지식베이스 RAG 검색으로 LLM이 업무 처리 흐름과 정책 질문에 답합니다. 번호표 시스템을 연결합니다 |
|
||||
| 3 | 기업 지원 정책 지능형 매칭과 정밀 푸시 플랫폼 | 정책을 구조화해 파싱하고 기업 프로필과 적용 가능한 정책을 자동 매칭합니다. 문자/메일 푸시 알림을 제공합니다 |
|
||||
| 4 | 행정 승인 자료 지능형 사전 검토와 컴플라이언스 검증 도우미 | 자료 OCR 인식과 핵심 정보 추출을 수행하고, LLM이 자료 완전성과 컴플라이언스를 검증합니다 |
|
||||
| 5 | 공공 안전 영상 감시 이상 행동 탐지 시스템 | 영상 스트림을 실시간 분석하고, CV 모델이 이상 행동(싸움, 넘어짐 등)을 탐지합니다. 경고를 푸시합니다 |
|
||||
| 6 | 도시 그리드 사건 지능형 식별과 dispatch 관리 플랫폼 | 도시 감지 데이터(IoT, 카메라)를 수집하고, LLM이 사건 유형을 식별해 배정합니다 |
|
||||
| 7 | 사회 여론 빅데이터 분석과 위험 경고 시스템 | 공공 민원 핫라인, 온라인 여론, 현장 방문 등 다중 출처 데이터를 융합 분석합니다. LLM이 위험 핫스팟을 식별합니다 |
|
||||
| 8 | 공공 기록 디지털화 인식과 지능형 보관 관리 플랫폼 | OCR이 기록 문자를 인식하고, LLM이 핵심 정보를 추출해 자동 분류합니다. 전문 검색을 지원합니다 |
|
||||
| 9 | 돌발 공공 사건 비상 지휘와 구조 자원 지능형 dispatch 플랫폼 | 사건 정보를 수집하고, LLM이 비상 대응 방안을 생성합니다. 자원 dispatch 최적화 알고리즘을 사용합니다 |
|
||||
| 10 | 대기 환경 오염 그리드 모니터링과 정밀 원인 추적 시스템 | 공기질 센서 데이터를 수집하고, CV 모델이 오염원을 식별합니다. LLM이 오염 추세를 분석하고 원인을 추적합니다 |
|
||||
|
||||
## 11. 법무와 계약 관리
|
||||
|
||||
법무 장면은 법률 서비스 효율 향상과 컴플라이언스 관리에 집중합니다. 흔한 앱에는 계약 검토, 사건 분석, 법규 모니터링, 법률 문서 생성 등이 있으며, 법률 종사자에게 지능형 도구 지원을 제공합니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 구현 참고 |
|
||||
| :--: | ------------ | -------- |
|
||||
| 1 | 계약 위험 구멍 원클릭 점검 Agent | 계약 텍스트를 구조화해 파싱하고, LLM이 위험 체크리스트와 대조해 잠재 문제를 식별합니다. 고위험 조항을 표시합니다 |
|
||||
| 2 | 기업 계약 전 생명주기 컴플라이언스 검토와 수정 제안 플랫폼 | 계약 조항을 법규 라이브러리와 비교하고, LLM이 컴플라이언스 검토 보고서를 생성합니다. 수정 제안을 추적합니다 |
|
||||
| 3 | 유사 사건 승소율 AI 지능형 평가 고문 | 사건 특징을 추출하고 유사 판례를 검색해 매칭합니다. LLM이 승소에 영향을 주는 요인을 분석합니다 |
|
||||
| 4 | 법규 변경 실시간 모니터링과 업무 영향 분석 레이더 | 법규 데이터베이스를 실시간 업데이트하고, LLM이 변경 내용을 해석해 업무 영향을 평가합니다. 경고를 푸시합니다 |
|
||||
| 5 | 변호사 내용증명 AIGC 자동 초안 도구 | 사실 진술을 입력하면 LLM이 표준 변호사 서한 템플릿을 생성합니다. 요소 검사와 컴플라이언스 검증을 제공합니다 |
|
||||
| 6 | 재판 녹음 실시간 전사와 쟁점 자동 추출 기록기 | 법정 녹음을 ASR로 전사하고, LLM이 쟁점과 핵심 논점을 추출합니다. 타임스탬프를 표시합니다 |
|
||||
| 7 | 전 웹 지식재산권 침해 단서 자동 모니터링과 블록체인 증거 보전 시스템 | 이커머스 플랫폼, 소셜 미디어 침해를 모니터링합니다. 침해 증거를 자동 수집하고 보전합니다 |
|
||||
| 8 | LLM 기반 IPO 투자설명서 핵심 데이터 일관성 검토와 위험 경고 Agent | 투자설명서 여러 장의 데이터를 비교하고, LLM이 불일치와 데이터 이상을 식별합니다. 위험을 표시합니다 |
|
||||
| 9 | 복잡한 법률 조항을 쉬운 말로 바꾸는 설명 플러그인 | 선택한 법률 조문에 대해 LLM이 쉽고 이해하기 쉬운 설명을 생성합니다 |
|
||||
| 10 | 사건 증거 사슬 지능형 정리와 시각화 표시 시스템 | 증거 자료를 업로드하면 LLM이 증거 관계와 타임라인을 분석합니다 |
|
||||
|
||||
## 12. 여행과 이동 서비스
|
||||
|
||||
여행과 이동 장면은 여행 경험과 서비스 편의성을 높이는 데 힘씁니다. 핵심 앱에는 지능형 일정 계획, 가격 예측, 가상 안내, 번역 서비스 등이 있으며, 여행을 더 쉽고 즐겁게 만듭니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 구현 참고 |
|
||||
| :--: | ------------ | -------- |
|
||||
| 1 | AIGC 기반 게으른 여행 일정 생성기 | 사용자 선호(일수, 예산, 관심사)를 입력하면 LLM이 매일의 일정을 생성합니다. 관광지 API로 운영 시간과 티켓 정보를 가져옵니다 |
|
||||
| 2 | 전 웹 항공권 호텔 가격 추세 예측과 저가 자동 잠금 봇 | OTA 가격 데이터를 수집하고 ML 모델이 가격 추세를 예측합니다. 가격 모니터링 알림을 제공합니다 |
|
||||
| 3 | 항공편 취소 후 여러 항공사 일정 재구성과 비상 방안 추천 고문 | 항공편 상태를 모니터링하고, LLM이 대체 일정 방안을 분석합니다. 여러 항공사 가격 비교를 제공합니다 |
|
||||
| 4 | 비자 자료 지능형 사전 검토와 자동 양식 작성 보조 시스템 | 자료 사진을 업로드하면 OCR이 정보 완전성을 검사합니다. 양식을 자동으로 채웁니다 |
|
||||
| 5 | 해외여행 실시간 음성 번역과 메뉴 시각 번역 매니저 | 오프라인 음성 번역 모델과 메뉴 이미지 OCR 인식 및 번역을 제공합니다 |
|
||||
| 6 | 빅데이터 실제 평가 기반 호텔 위험 회피 가이드 분석기 | 호텔 리뷰 데이터를 수집하고 LLM이 긍정·부정 평가 키워드를 추출합니다 |
|
||||
| 7 | 목적지 몰입형 VR 미리보기와 가상 객실 선택 상호작용 플랫폼 | 360도 파노라마 이미지를 수집하고 VR 기술로 몰입형 미리보기를 구현합니다. 객실 가상 투어를 제공합니다 |
|
||||
| 8 | 여행 발자취 자동 여행기와 소셜 문안 생성 도우미 | 사진의 시간과 장소 정보를 추출하고, LLM이 여행기 문안을 생성합니다. 템플릿 레이아웃을 생성합니다 |
|
||||
| 9 | 기업 출장 청구서 자동 수집과 컴플라이언스 정산 관리 플랫폼 | 출장 플랫폼 API를 연결하고 청구서 정보를 자동 수집합니다. 컴플라이언스 검증을 수행합니다 |
|
||||
| 10 | 관광지 혼잡 실시간 예측과 분산 관람 경로 계획 내비게이션 | 관광지 방문객 데이터를 수집하고 ML 모델이 혼잡 시간대를 예측합니다. 분산 관람을 추천합니다 |
|
||||
|
||||
## 13. 감정적 동행
|
||||
|
||||
감정적 동행 장면은 정신 건강과 감정적 위로에 집중합니다. 대표 앱에는 가상 파트너, 감정 상담, 인지 훈련, 심리 상담 등이 있으며, 사용자에게 상시 동행과 지원을 제공합니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 구현 참고 |
|
||||
| :--: | ------------ | -------- |
|
||||
| 1 | LLM 대형 모델 기반 24시간 깊은 동행 가상 파트너 | 기억 시스템이 대화 기록을 저장하고, LLM이 개인화 답변을 생성합니다. 감정 지원 모듈을 제공합니다 |
|
||||
| 2 | 멀티모달 감정 인식과 심리 상담 AI 고문 | 음성 억양 분석 + 문자 감정 인식으로 LLM이 상담 제안을 생성합니다. 위기 개입 경고를 제공합니다 |
|
||||
| 3 | 알츠하이머 노인 AI 인지 훈련과 기억 깨우기 디지털 휴먼 | 인지 게임(기억, 계산, 언어) 훈련을 제공하고, 오래된 사진/노래가 기억 회상을 트리거합니다 |
|
||||
| 4 | 사회불안인을 위한 AIGC 모의 소셜 연습 코치 | 가상 소셜 장면을 시뮬레이션하고, LLM이 서로 다른 역할을 맡습니다. 소셜 기술 제안을 제공합니다 |
|
||||
| 5 | 생성형 AI 어린이 잠자리 이야기 맞춤 생성기 | 보호자가 주제와 선호를 입력하면 LLM이 맞춤 이야기를 생성합니다. 배경음악 생성을 제공합니다 |
|
||||
| 6 | 고인의 디지털 생명 복원과 LLM 시공간 대화 시스템 | 생전 자료(음성, 문자)로 개인화 모델을 학습하고, 기억 대화를 생성합니다 |
|
||||
| 7 | MBTI 데이터 기반 AI 성격 거울과 공감형 챗봇 | MBTI 테스트 결과를 입력하면 LLM이 성격 분석과 공감 답변을 생성합니다. 성격 매칭 추천을 제공합니다 |
|
||||
| 8 | 상시 기분 모니터링과 AI 긍정 감정 격려 도우미 | 일상 기분 상태를 기록하고, LLM이 추세를 분석해 격려 콘텐츠를 생성합니다. 긍정 알림을 푸시합니다 |
|
||||
| 9 | 개인정보 보호 등급 청소년 AI 고민 털어놓기 공간 | 익명 털어놓기 입구를 제공하고 LLM이 경청과 제안을 제공합니다. 민감어 경고를 제공합니다 |
|
||||
| 10 | 자율 진화 능력을 갖춘 AI 가상 반려동물 키우기 시스템 | 반려동물 성격 모델을 학습하고, 대화 상호작용으로 성장·진화합니다. 가상 꾸미기 시스템을 제공합니다 |
|
||||
|
||||
## 14. 휴식과 엔터테인먼트
|
||||
|
||||
휴식과 엔터테인먼트 장면은 풍부한 디지털 엔터테인먼트 경험을 제공하는 데 힘씁니다. 흔한 앱에는 게임 NPC 지능형 의사결정, 추리 게임 보조, 콘텐츠 창작, 오디오·비디오 처리 등이 있으며, 사용자의 다양한 엔터테인먼트 요구를 만족시킵니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 구현 참고 |
|
||||
| :--: | ------------ | -------- |
|
||||
| 1 | LLM 구동 오픈월드 게임 NPC 자율 의사결정 엔진 | NPC 행동 트리에 LLM 의사결정을 융합하고, 대화 시스템이 개인화 상호작용을 생성합니다. 행동 엔진을 사용합니다 |
|
||||
| 2 | 몰입형 추리 게임 AIGC 이야기 추론과 DM 진행 보조 도구 | 플레이어 선택이 이야기 분기를 트리거하고, LLM이 추리 로직을 생성합니다. 단서 카드를 자동 생성합니다 |
|
||||
| 3 | 인터랙티브 소설 결말 생성식 수정기 | 독자 선택이 이야기 방향에 영향을 주고, LLM이 여러 결말 분기를 생성합니다 |
|
||||
| 4 | 2D 캐릭터 3D 모델링 AIGC 자동 생성 워크벤치 | 설명 텍스트로 캐릭터 스케치를 생성하고, 3D 모델링 도구가 자동 모델링합니다. 재질 텍스처를 렌더링합니다 |
|
||||
| 5 | e스포츠 전황 CV 시각 분석과 AI 지능형 해설자 | 게임 화면을 실시간 분석하고 핵심 순간을 식별합니다. LLM이 해설 문안을 생성합니다 |
|
||||
| 6 | 개인화 유머 콘텐츠 추천 알고리즘 엔진 | 사용자 관심 프로필을 만들고 유머 콘텐츠를 매칭해 추천합니다 |
|
||||
| 7 | AI 지능형 음정 보정과 KTV 보컬 미화 소프트웨어 | 오디오 노이즈 제거와 보컬 강화 처리를 수행합니다. AI 음정 보정 알고리즘을 사용합니다 |
|
||||
| 8 | 영상 드라마 캐릭터 전용 이야기 AI 추출과 편집 도구 | 영상 내용을 분석하고 캐릭터 관련 장면을 추출합니다. 자동 편집으로 생성합니다 |
|
||||
| 9 | 다중 역할 TTS 음성 합성 오디오북 자동 생성 시스템 | 텍스트 역할을 배분하고 개인화 음색을 생성합니다. 배경음악과 효과음을 추가합니다 |
|
||||
| 10 | 보드게임·카드게임 강화학습 대국 회고 코치 | 게임 국면을 분석하고 AI 상대가 모의 대국을 진행합니다. 회고 제안을 생성합니다 |
|
||||
|
||||
## 15. 이커머스 서비스
|
||||
|
||||
이커머스 서비스 장면은 운영 효율과 전환 향상에 집중합니다. 핵심 앱에는 상품 콘텐츠 생성, 라이브 커머스, 고객 서비스, 가격 분석 등이 있으며, 판매자가 지능형 운영을 구현하도록 돕습니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 구현 참고 |
|
||||
| :--: | ------------ | -------- |
|
||||
| 1 | 고전환율 AIGC 상품 상세 페이지 대량 생산 도구 | 상품 정보를 입력하면 LLM이 판매 포인트 문안과 장면 설명을 생성합니다. 배경 이미지를 생성합니다 |
|
||||
| 2 | 의류 가상 모델 AI 지능형 착용과 전시 영상 생성 공장 | 의류 평면 이미지를 처리하고 가상 모델 착용 효과를 생성합니다. 여러 각도 전시 영상을 만듭니다 |
|
||||
| 3 | 크로스보더 이커머스 다국어 LLM 현지화 번역과 윤문 도우미 | 상품 설명을 여러 언어로 번역하고 문화에 맞게 다듬습니다. 여러 플랫폼 게시 인터페이스를 제공합니다 |
|
||||
| 4 | NLP 기반 고객 감정 분석과 지능형 답변 봇 | 문의 대화 감정을 분석하고, 위로 답변을 자동 생성합니다. 긍정·부정 리뷰를 분류합니다 |
|
||||
| 5 | 24시간 상시 AIGC 디지털 휴먼 라이브 커머스 시스템 | 디지털 휴먼 이미지 + 실시간 화법 생성으로 상품 정보를 실시간 호출합니다. 댓글 상호작용 답변을 제공합니다 |
|
||||
| 6 | 전 웹 동일 상품 AI 가격 비교와 추세 예측 플러그인 | 이커머스 플랫폼 가격을 크롤링하고 가격 비교 차트를 표시합니다. 가격 추세를 예측합니다 |
|
||||
| 7 | 구매자 후기 이미지 AI 지능형 선별과 짧은 영상 합성 플랫폼 | 구매자 후기 이미지 품질을 점수화하고 우수 콘텐츠를 자동 추천합니다. 짧은 영상 템플릿 합성을 제공합니다 |
|
||||
| 8 | LLM 기반 실시간 영업 대화 음성 분석과 베스트 화법 추천 | 통화 ASR 전사를 수행하고 실시간 화법 컴플라이언스 검사를 제공합니다. 화법을 추천합니다 |
|
||||
| 9 | 시장 유행 추세 AI 통찰과 히트 상품 예측 엔진 | 소셜 미디어와 이커머스 데이터를 수집·분석하고 LLM이 추세 핫이슈를 통찰합니다. 상품 선정 제안을 추천합니다 |
|
||||
| 10 | 사적 트래픽 사용자 프로필 AI 군집화와 정밀 운영 시스템 | 사용자 행동 데이터를 군집 분석하고 프로필 태그를 생성합니다. 자동화 마케팅을 트리거합니다 |
|
||||
|
||||
## 16. 에너지
|
||||
|
||||
에너지 장면은 에너지 업계의 지능형 관리와 녹색 전환을 구현하는 데 힘씁니다. 대표 앱에는 전력 사용 분석, 설비 검사, 탄소 배출 산정, dispatch 최적화 등이 있으며, 에너지 시스템의 효율적 운영을 추진합니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 구현 참고 |
|
||||
| :--: | ------------ | -------- |
|
||||
| 1 | 가정 전력 사용 행동 AI 분석과 절전 전략 고문 | 스마트 전력계 데이터를 수집하고 전력 사용 패턴을 분석합니다. LLM이 절전 제안을 생성합니다 |
|
||||
| 2 | 태양광 모듈 결함 드론 CV 시각 식별 시스템 | 드론 점검 촬영과 열적외선 이미지 분석을 수행합니다. 결함 탐지 표시를 제공합니다 |
|
||||
| 3 | 전력 현물 거래 가격 AI 추세 예측과 자동 수익 전략 Agent | 전력 시장 데이터를 수집하고 가격 예측 모델을 사용합니다. 전략 생성과 거래 실행을 제공합니다 |
|
||||
| 4 | 에너지 저장 배터리 건강도 AI 비파괴 검사와 열폭주 위험 경고 시스템 | 배터리 운전 데이터를 모니터링하고 건강도 평가 모델을 사용합니다. 위험 경고를 푸시합니다 |
|
||||
| 5 | 기업 전 링크 탄소 배출 AI 자동 산정과 ESG 보고서 생성 도우미 | 에너지 소비 데이터를 수집하고 탄소 배출 계수를 계산합니다. ESG 보고서를 자동 생성합니다 |
|
||||
| 6 | 전력망 극단 기상 부하 AI 예측과 비상 dispatch 지휘 시스템 | 기상 데이터를 연결하고 부하 예측 모델을 사용합니다. dispatch 전략을 생성합니다 |
|
||||
| 7 | 주유소 위반 행동 AI 영상 식별과 경보 감시자 | 영상 감시를 분석하고 위반 행동(전화, 흡연 등)을 탐지합니다. 경고를 푸시합니다 |
|
||||
| 8 | 장거리 송유·가스관 누출 음파 AI 모니터링과 정밀 위치 지정 시스템 | 음파 센서 데이터를 수집하고 누출 탐지 모델을 사용합니다. 위치 지정 알고리즘으로 계산합니다 |
|
||||
| 9 | 가상 발전소 자원 집합과 AI 전력 거래 의사결정 시스템 | 분산 자원을 연결하고 집합 최적 dispatch를 수행합니다. 거래 전략을 실행합니다 |
|
||||
| 10 | 광산 인원 위치 AI 추적과 위험 구역 침입 경보 | UWB/블루투스 위치 지정으로 인원 궤적을 추적합니다. 위험 구역 전자 펜스를 제공합니다 |
|
||||
|
||||
## 17. 오디오와 비디오
|
||||
|
||||
오디오와 비디오 장면은 콘텐츠 생산과 미디어 처리에 집중합니다. 흔한 앱에는 영상 편집, 음성 합성, 자막 생성, 영상 복원 등이 있으며, 오디오·비디오 콘텐츠의 생산 효율과 품질을 높입니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 구현 참고 |
|
||||
| :--: | ------------ | -------- |
|
||||
| 1 | 장편 영상 하이라이트 AI 식별과 짧은 영상 자동 편집 도구 | 영상 내용을 분석하고 키프레임을 식별합니다. 하이라이트 장면을 자동 편집합니다 |
|
||||
| 2 | 영상 배경 소음 AI 지능형 분리와 음성 강화 도우미 | 오디오 분리 모델로 배경 소음을 제거합니다. 음성을 강화 처리합니다 |
|
||||
| 3 | 오래된 영상 4K 초해상 복원과 AI 지능형 색 입히기 워크벤치 | 영상 초해상도 모델로 오래된 화질을 복원합니다. AI가 자동으로 색을 입힙니다 |
|
||||
| 4 | 텍스트를 실제 사람 수준 TTS 더빙으로 바꾸는 감정 제어 시스템 | 다중 음색 TTS 모델과 감정 제어 생성을 제공합니다. 오디오 내보내기를 지원합니다 |
|
||||
| 5 | 영상 음성 ASR 자동 인식과 이중 언어 자막 생성 도구 | 음성 인식으로 자막을 생성하고 여러 언어로 번역합니다. 이중 언어 자막을 겹쳐 표시합니다 |
|
||||
| 6 | 영상 화면 불필요 객체 AI 지능형 지우기 엔진 | 영상 객체 추적, 객체 제거 복원, 프레임 간 일관성 처리를 수행합니다 |
|
||||
| 7 | 저작권 없는 배경음악 AIGC 자동 작곡기 | 음악 생성 모델을 사용하고 감정 스타일을 제어할 수 있습니다. 저작권 검사를 제공합니다 |
|
||||
| 8 | 특정 인물 음색 AI 클론과 변성 변환 소프트웨어 | 소량의 음성 샘플로 음색 모델을 학습합니다. 변성 처리를 제공합니다 |
|
||||
| 9 | 대본 원클릭 콘티 스크립트 변환과 AI 동적 프리비즈 영상 생성 플랫폼 | 대본을 파싱해 콘티를 생성하고, AI가 프리비즈 영상을 생성합니다 |
|
||||
| 10 | 회의 녹음 AI 지능형 전사와 핵심 할 일 추출 도우미 | 여러 사람 회의 음성을 분리 전사하고, LLM이 할 일을 추출합니다. 타임스탬프를 표시합니다 |
|
||||
|
||||
## 18. AI 마케팅
|
||||
|
||||
AI 마케팅 장면은 마케팅 효율과 창의 산출을 높이는 데 힘씁니다. 핵심 앱에는 문안 생성, 포스터 설계, 핫이슈 추적, 경쟁사 분석 등이 있으며, 기업이 정밀 마케팅과 브랜드 전파를 구현하도록 돕습니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 구현 참고 |
|
||||
| :--: | ------------ | -------- |
|
||||
| 1 | Xiaohongshu 히트 문안 AIGC 자동 작성 엔진 | 주제를 입력하면 LLM이 추천형 문안을 생성합니다. 이모지와 주제 태그를 최적화합니다 |
|
||||
| 2 | 마케팅 포스터 AI 지능형 레이아웃과 다중 사이즈 적응 도구 | 문안을 입력하면 포스터 템플릿을 지능적으로 매칭하고 여러 사이즈로 내보냅니다 |
|
||||
| 3 | 브랜드 LOGO 창의 AIGC 생성과 VI 체계 구축 플랫폼 | 브랜드 키워드를 입력하면 LOGO 아이디어를 생성합니다. VI 규범을 생성합니다 |
|
||||
| 4 | 전 웹 핫이슈 AI 추적과 트렌드 활용 마케팅 아이디어 생성 도우미 | 핫이슈 데이터를 수집하고 LLM이 마케팅 각도를 분석합니다. 창의 방안을 생성합니다 |
|
||||
| 5 | 광고 집행 ROI 실시간 모니터링과 AI 예산 입찰 매니저 | 광고 플랫폼 데이터를 연결하고 효과 분석 모델을 사용합니다. 입찰 전략을 최적화합니다 |
|
||||
| 6 | 경쟁사 마케팅 전략 심층 해석과 AI 주간 보고서 생성기 | 경쟁사 콘텐츠를 수집 분석하고 전략을 추출합니다. 주간 보고서를 자동 생성합니다 |
|
||||
| 7 | 검색엔진 키워드 AI 배치와 유입 글 대량 작성 | 키워드를 분석하고 글을 대량 생성합니다. SEO 최적화 제안을 제공합니다 |
|
||||
| 8 | 천인천면 개인화 마케팅 메일 AI 작성 전문가 | 사용자 프로필 데이터로 개인화 콘텐츠를 생성합니다. A/B 테스트를 지원합니다 |
|
||||
| 9 | 브랜드 평판 전 웹 모니터링과 여론 위기 AI 경고 레이더 | 전 웹 여론 데이터를 수집하고 감정을 분석합니다. 위기 경고를 푸시합니다 |
|
||||
| 10 | 짧은 영상 스크립트 아이디어 AIGC 생성과 콘티 지도 도우미 | 주제를 입력하면 스크립트와 콘티를 생성합니다. 촬영 제안을 안내합니다 |
|
||||
|
||||
## 19. 데이터 지능
|
||||
|
||||
데이터 지능 장면은 데이터 분석과 가치 발굴에 집중합니다. 대표 앱에는 자연어 질의, 시각화 생성, 데이터 거버넌스, 지식 그래프 구축 등이 있으며, 기업이 데이터 기반 의사결정 지원을 구현하도록 돕습니다.
|
||||
|
||||
| 번호 | 앱 장면 이름 | 구현 참고 |
|
||||
| :--: | ------------ | -------- |
|
||||
| 1 | Text-to-SQL 기반 자연어 데이터 조회 엔진 | 자연어를 SQL 질의로 변환하고 결과를 시각화해 표시합니다 |
|
||||
| 2 | 대화형 BI: 한 문장으로 시각화 차트 생성 | 데이터 요구를 설명하면 차트를 자동 생성합니다. 여러 차트 유형 전환을 지원합니다 |
|
||||
| 3 | 스크린샷 원클릭 Excel 표 인식 도구 | 스크린샷 업로드 후 VLM이 표 구조와 데이터를 인식합니다. Excel 파일로 내보냅니다 |
|
||||
| 4 | 이미지와 스크린샷을 Excel 표로 바꾸는 AI 인식 도구 | 이미지 OCR이 표 구조를 인식하고 데이터를 Excel로 내보냅니다 |
|
||||
| 5 | 다중 출처 이기종 데이터 지식 그래프 자동 구축 | 여러 데이터 소스를 연결하고 엔티티와 관계를 추출합니다. 그래프 데이터베이스에 저장합니다 |
|
||||
| 6 | 데이터 보고서 지능형 해석과 추세 분석 도우미 | 데이터 보고서 이미지를 업로드하거나 데이터를 입력하면 VLM이 차트 내용을 해석하고 추세를 분석합니다 |
|
||||
| 7 | 데이터베이스 테이블 구조 지능형 해석과 질의 예시 생성 도우미 | 테이블명이나 필드 설명을 입력하면 LLM이 테이블 생성 설명과 예시 SQL 질의를 생성합니다 |
|
||||
| 8 | 기업 마스터 데이터 지능형 정렬과 AI 중복 제거 거버넌스 | 다중 출처 마스터 데이터를 매칭하고 중복 기록을 식별합니다. 병합 규칙 설정을 제공합니다 |
|
||||
| 9 | 데이터 요구 문서 지능형 테스트 케이스 변환 도구 | 데이터 요구 설명을 입력하면 LLM이 테스트 장면과 검증 케이스를 생성합니다 |
|
||||
| 10 | 데이터 지표 정의 지능형 질의응답 도우미 | 지표 정의 문서를 바탕으로 지식베이스를 구축하고, LLM이 지표 정의와 계산 로직 등 질문에 답합니다 |
|
||||
@@ -0,0 +1,497 @@
|
||||
---
|
||||
title: 'Jobs to Be Done으로 사용자가 진짜 완료하고 싶은 일 찾기'
|
||||
description: '제로 베이스 독자를 위한 Jobs to Be Done 입문 글입니다. 사용자는 기능을 사는 것이 아니라 특정 장면에서 제품을 "고용"해 진전을 완성한다는 관점을 이해하고, JTBD로 제품 방향, 인터뷰 질문, AI 프롬프트를 분해하는 법을 배웁니다.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = '약 <strong>1.5시간</strong>'
|
||||
</script>
|
||||
|
||||
# Jobs to Be Done으로 사용자가 진짜 완료하고 싶은 일 찾기
|
||||
|
||||
<a id="top-jtbd"></a>
|
||||
|
||||
## 본 장 안내
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['JTBD', '사용자 수요', '제품 사고', '수요 인사이트']"
|
||||
coreOutput="실제 수요에 더 가까운 JTBD 문장 1개"
|
||||
expectedOutput="흐릿한 아이디어를 더 구체적인 사용자 장면과 MVP 방향으로 수렴할 수 있음"
|
||||
>
|
||||
|
||||
많은 사람이 처음 제품을 만들 때 가장 쉽게 하는 실수는 모든 주의를 "내가 어떤 기능을 만들 것인가"에 두는 것입니다. 다른 제품에 지능형 분류가 있으면 나도 넣고 싶고, 자동 요약이 있으면 나도 붙이고 싶고, 다른 사람이 Agent, 멀티모달, 워크플로우를 만들면 나도 빼면 안 될 것 같습니다.
|
||||
|
||||
하지만 현실에서 사용자는 "이 기능 이름이 멋있어서" 제품을 쓰는 경우가 드뭅니다. 그들은 더 자주 어떤 구체적인 순간에 어떤 일을 앞으로 밀고 싶어 합니다. 그래서 일시적으로 도구, 서비스, 심지어 사람을 "고용"해 그 한 단계를 완성합니다.
|
||||
|
||||
이것이 바로 **Jobs to Be Done(JTBD)** 방법이 우리에게 상기시키는 것입니다. **사용자는 기능 자체를 구매하는 것이 아니라, 자신이 어떤 진전을 완성하도록 도와주는 해결책을 고용합니다.**
|
||||
|
||||
이 글은 가능한 한 쉬운 언어로 JTBD를 처음부터 이해하게 하고, AI 애플리케이션을 만들 때 바로 쓸 수 있는 분석 도구로 바꾸도록 안내합니다.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info 최소 SOP
|
||||
**목적**: 읽고 나면 흐릿한 아이디어를, 기능 이름만 잔뜩 있는 상태가 아니라 실제 사용자 장면이 있는 수요 한 문장으로 수렴하는 법을 더 명확히 알게 됩니다.
|
||||
|
||||
**행동 항목**: 흐릿한 아이디어 1문장을 쓰고, 잠재 사용자 3명에게 "최근 한 번은 어떻게 처리했는지"를 묻고, JTBD 문장 1개로 정리합니다.
|
||||
|
||||
**결과**: 더 명확한 수요 가설을 얻고, 첫 버전에서 무엇을 먼저 해결해야 하는지 알게 됩니다.
|
||||
|
||||
**키워드 이동**: [JTBD란 무엇인가](#jtbd-what) · [한 문장 공식](#jtbd-formula) · [AI는 어떻게 도와줄 수 있나](#jtbd-ai)
|
||||
:::
|
||||
|
||||
## 다음 내용을 배우게 됩니다
|
||||
|
||||
1. Jobs to Be Done이 무엇이고, 왜 "기능 브레인스토밍"보다 실제 수요에 더 가까운지
|
||||
2. "사용자가 원한다고 말한 기능"과 "사용자가 진짜 완료하고 싶은 일"을 구분하는 법
|
||||
3. 간단한 템플릿으로 흐릿한 아이디어를 장면, 트리거, 장애물, 성공 기준으로 분해하는 법
|
||||
4. JTBD를 AI 제품, 인터뷰 질문, 프롬프트 정리에 활용하는 법
|
||||
|
||||
<a id="jtbd-what"></a>
|
||||
## [1. Jobs to Be Done이란 무엇인가](#top-jtbd)
|
||||
|
||||
Jobs to Be Done은 보통 **JTBD**라고 줄여 부릅니다. 그 핵심 생각은 Clayton Christensen 팀이 널리 알린 고전적인 표현과 관련 있습니다. **사용자는 어떤 제품을 "고용"해 하나의 일을 완성한다**는 것입니다.
|
||||
|
||||
여기서 말하는 "일"은 할 일 목록의 표면적 동작이 아니라, 사용자가 자신의 상태에서 일으키고 싶은 어떤 **진전**입니다. 예를 들면 다음과 같습니다.
|
||||
|
||||
- "AI 회의록 도구가 필요하다"가 아니라, "회의 후 10분 안에 핵심, 할 일, 담당자를 정리해서 기억에 의존해 메모를 보충하지 않고 싶다"
|
||||
- "가계부 App이 필요하다"가 아니라, "돈이 정확히 어디로 갔는지 알고 싶어서 월말에 다시 불안해지고 싶지 않다"
|
||||
- "이력서 최적화기가 필요하다"가 아니라, "그럴듯한 이력서를 더 확신 있게 제출하고 싶고, 매번 지원할 때마다 내가 너무 못 쓴 건 아닌지 의심하고 싶지 않다"
|
||||
|
||||
따라서 **JTBD가 주목하는 것은 제품이 어떻게 생겼는지가 아니라, 사용자가 왜 이 순간 그것을 필요로 하는가입니다.**
|
||||
|
||||
그래서 겉으로는 서로 달라 보이는 제품도 실제로는 같은 job을 두고 경쟁할 수 있습니다. 사용자가 "출근길을 덜 지루하게 보내고 싶다"면 고용할 수 있는 대상은 숏폼 영상, 팟캐스트, 게임, 채팅, 심지어 잠깐 조는 것일 수 있습니다. 사용자가 "긴 PDF를 빠르게 이해하고 싶다"면 고용할 수 있는 대상은 AI 요약 도구, 인턴, 동료, 억지로 직접 읽기, 또는 일단 안 읽기일 수 있습니다.
|
||||
|
||||
이 관점으로 문제를 보면 진짜 경쟁자는 대개 "당신과 비슷하게 생긴 다른 App"만이 아니라, **사용자가 현재 받아들일 수 있는 모든 대체 방안**이라는 것을 알게 됩니다.
|
||||
|
||||
## 2. JTBD는 사용자 페르소나, 기능 목록과 무엇이 다른가
|
||||
|
||||
많은 초보자는 수요 분석을 시작할 때 먼저 사용자 페르소나를 씁니다. 25세, 여성, 1선 도시, 직장인, 효율 도구를 좋아하고 새 제품을 시도할 의향이 있음. 이런 정보가 완전히 쓸모없다고 할 수는 없지만, 보통 **한 사람이 왜 이 순간 행동을 취하는지 설명하기에는 부족합니다.**
|
||||
|
||||
JTBD는 아래 질문에 더 관심이 있습니다.
|
||||
|
||||
- 그는 어떤 장면에서 해결책을 찾기로 결정했는가
|
||||
- 당시 정확히 무엇에 막혔는가
|
||||
- 무엇을 다음 단계로 밀고 싶었는가
|
||||
- 지금은 어떤 서툰 방법으로 버티고 있는가
|
||||
- 일이 잘 해결된다면 어떤 결과가 "가치 있었다"고 느끼게 하는가
|
||||
|
||||
즉, **사용자 페르소나는 "이 사람이 대략 누구인가"에 가깝고, JTBD는 "이 사람이 지금 정확히 무엇을 완료하고 싶은가"에 가깝습니다.**
|
||||
|
||||
마찬가지로 기능 목록도 사람을 쉽게 빗나가게 합니다. 사용자가 "Word로 내보내고 싶어요", "AI 문장 개선이 있으면 좋겠어요", "음성 입력이 필요해요"라고 말할 수 있습니다. 하지만 이것들은 모두 표면 표현입니다. JTBD는 계속 아래로 묻습니다.
|
||||
|
||||
- 왜 지금 PDF가 아니라 Word 내보내기가 필요한가?
|
||||
- 문장을 고치고 싶은 이유는 문체가 나빠서인가, 아니면 대상에 맞게 바꿔야 해서인가?
|
||||
- 음성 입력이 필요한 이유는 타이핑이 귀찮아서인가, 아니면 자주 걸으면서, 운전하면서, 회의 직후에 바로 기록해야 해서인가?
|
||||
|
||||
많은 경우 **기능은 job의 임시 번역일 뿐**입니다. 기능만 수집하면 "사용자가 말하는 것을 전부 쌓는" 제품이 되기 쉽습니다. 뒤에 있는 job을 볼 수 있어야 진짜로 쓰기 편하고 경쟁력 있는 솔루션을 만들 가능성이 커집니다.
|
||||
|
||||
## 3. 제로 베이스도 이해할 수 있는 예시
|
||||
|
||||
복잡한 AI 제품을 서둘러 생각하지 말고, 먼저 생활 속 예시에서 시작해 봅시다.
|
||||
|
||||
어떤 사람이 아침에 나가기 전 늘 아침을 먹을 시간이 부족해서 지하철역 입구에서 샌드위치와 커피를 자주 산다고 가정해 봅시다. 표면적으로 그는 "아침 식사"를 구매합니다. 하지만 JTBD로 보면 그가 진짜 완료하고 싶은 일은 이럴 수 있습니다.
|
||||
|
||||
- 바쁜 아침에 가장 머리를 덜 쓰는 방식으로 한 끼를 해결한다.
|
||||
- 회사에 도착하기 전에 배고파 불안해지지 않도록 한다.
|
||||
- 아침 식사 때문에 출근 리듬을 망치지 않는다.
|
||||
|
||||
이때 사용자가 고용한 것은 "어떤 고정 브랜드의 샌드위치"가 아니라, 아침을 순조롭게 앞으로 밀어 주는 해결책입니다. 옆 편의점이 더 빠르고, 더 가깝고, 더 안정적이면 그는 원래 선택을 바로 바꿀 수 있습니다.
|
||||
|
||||
이 논리를 AI 제품으로 옮기면 더 분명해집니다.
|
||||
|
||||
예를 들어 "AI 회의록 도구"를 만들고 싶다고 합시다. 기능 층위에만 머물면 쉽게 이런 생각을 하게 됩니다.
|
||||
|
||||
- 오디오 업로드를 지원할까
|
||||
- 화자 분리를 붙일까
|
||||
- Markdown 내보내기를 할까
|
||||
- 할 일을 자동 생성할까
|
||||
|
||||
이것들은 모두 틀리지 않지만 충분하지 않습니다. JTBD로 한 층 더 물으면 사용자가 진짜 완료하고 싶은 것은 다음일 수 있습니다.
|
||||
|
||||
- 회의 후 10분 안에 참석하지 못한 사람에게 논의 결과를 동기화하고 싶다.
|
||||
- 할 일, 담당자, 마감일을 깔끔하게 뽑아 팀이 기억에 의존해 협업하지 않게 하고 싶다.
|
||||
- 회의 내용을 반복 정리하는 시간을 줄이고, 에너지를 의사결정과 추진에 남기고 싶다.
|
||||
|
||||
job이 명확해지면 많은 기능의 우선순위가 자동으로 떠오릅니다. 첫 버전에서 가장 중요한 것은 "12가지 내보내기 형식 지원"이 아니라 다음일 수 있습니다.
|
||||
|
||||
- 회의록 구조가 충분히 명확해야 한다.
|
||||
- 할 일 추출이 안정적이어야 한다.
|
||||
- 공유 링크가 편리해야 한다.
|
||||
- 출력 결과를 팀에 바로 전달할 수 있을 만큼 믿을 수 있어야 한다.
|
||||
|
||||
이것이 JTBD의 가치입니다. **"어떤 능력을 쌓을까"에서 "사용자가 어떤 진전을 이루도록 도울까"로 되돌려 줍니다.**
|
||||
|
||||
## 4. 쓰기 좋은 JTBD 템플릿
|
||||
|
||||
제로 베이스라면 JTBD를 너무 학술적으로 생각하지 않아도 됩니다. 가장 실용적인 5개 요소만 잡으면 충분합니다.
|
||||
|
||||
### 4.1 장면
|
||||
|
||||
사용자는 어떤 순간, 어떤 환경에서 이 제품을 떠올리는가?
|
||||
|
||||
- 회의가 끝난 뒤인가
|
||||
- 상사가 갑자기 자료를 요구할 때인가
|
||||
- 밤에 이력서를 제출하려고 준비할 때인가
|
||||
- 월말에 돈이 또 부족하다는 것을 발견했을 때인가
|
||||
|
||||
**장면이 없는 수요는 보통 아직 충분히 진짜가 아닙니다.**
|
||||
|
||||
### 4.2 트리거
|
||||
|
||||
무엇이 그를 즉시 해결책을 찾게 만들었는가?
|
||||
|
||||
- 긴 문서에 눌려 어디서부터 봐야 할지 모른다.
|
||||
- 내일 제출해야 하는 자료가 있는데 오늘서야 형식이 엉망이라는 것을 발견했다.
|
||||
- 방금 리더에게 진행 상황을 추궁당했고, 자신이 정리를 제대로 해 두지 않았다는 것을 깨달았다.
|
||||
- 기록을 꾸준히 하고 싶지만 손글씨, 복사, 정리가 모두 너무 번거롭다.
|
||||
|
||||
트리거에는 보통 감정이 함께 있습니다. 이 감정은 매우 중요합니다. 왜냐하면 사용자가 왜 바로 이 순간 행동하게 되는지를 결정하기 때문입니다.
|
||||
|
||||
### 4.3 완료하고 싶은 진전
|
||||
|
||||
그는 단지 "동작 하나"를 하고 싶은 것이 아니라, 자신을 어떤 새로운 상태로 밀어 넣고 싶은가?
|
||||
|
||||
- 혼란에서 명확함으로
|
||||
- 불안에서 안심으로
|
||||
- 미룸에서 시작으로
|
||||
- 비효율에서 매끄러움으로
|
||||
- 설명하지 못함에서 바로 전달 가능함으로
|
||||
|
||||
이 단계에서 "진전"이라는 단어가 매우 중요합니다. 많은 사람이 진짜로 사는 것은 도구가 아니라 **상태 변화**이기 때문입니다.
|
||||
|
||||
### 4.4 현재 대체 방안
|
||||
|
||||
당신의 제품이 없을 때 그는 지금 어떻게 하는가?
|
||||
|
||||
- 수동 복사/붙여넣기
|
||||
- Excel이나 메모장으로 억지로 버티기
|
||||
- 동료에게 부탁하기
|
||||
- 미뤄 두기
|
||||
- 여러 도구 사이를 왔다 갔다 하기
|
||||
|
||||
대체 방안이 누구인지가 곧 당신의 실제 경쟁 환경입니다.
|
||||
|
||||
### 4.5 성공 기준
|
||||
|
||||
어떤 상태가 되어야 일이 진짜 해결되었다고 볼 수 있는가?
|
||||
|
||||
- 10분 안에 공유 가능한 결과를 얻는다.
|
||||
- 크게 다시 고치지 않아도 다른 사람에게 보낼 수 있다.
|
||||
- 누락, 오류, 잊어버림이 쉽게 생기지 않는다.
|
||||
- 처음 써도 다음에 무엇을 해야 하는지 안다.
|
||||
|
||||
"사용자가 어떻게 가치 있다고 판단하는지"조차 말하지 못한다면, 이 방향은 아직 충분히 수렴되지 않았을 가능성이 큽니다.
|
||||
|
||||
<a id="jtbd-formula"></a>
|
||||
## [5. 바로 적용할 수 있는 한 문장 공식](#top-jtbd)
|
||||
|
||||
제품 방향을 정리하고 싶을 때는 먼저 이 매우 실용적인 문장 형식을 사용할 수 있습니다.
|
||||
|
||||
> __________ 할 때, 나는 __________ 하고 싶다. 그래야 __________ 할 수 있다.
|
||||
> 지금은 __________ 방식으로 겨우 이 일을 해내고 있다.
|
||||
|
||||
예를 들면:
|
||||
|
||||
> 정보량이 많은 프로젝트 회의가 끝났을 때, 나는 할 일, 담당자, 마감일이 포함된 회의록을 빠르게 얻고 싶다. 그래야 팀에 바로 동기화하고 실행을 추진할 수 있다.
|
||||
> 지금은 기억을 더듬고, 채팅 기록을 뒤지고, 손으로 정리하는 방식으로 겨우 이 일을 해내고 있다.
|
||||
|
||||
또 다른 예:
|
||||
|
||||
> 새로운 직무에 지원하려고 할 때, 나는 기존 경험을 해당 직무에 더 맞는 표현으로 빠르게 고치고 싶다. 그래야 더 확신 있게 그럴듯한 이력서를 제출할 수 있다.
|
||||
> 지금은 예전 이력서를 반복해서 복사하고, 문구를 손으로 고치고, 마지막에는 점점 더 확신이 없어지는 방식으로 버티고 있다.
|
||||
|
||||
이 한 문장을 이 정도로 명확하게 쓸 수 있다면, 뒤의 페이지 설계, 프롬프트 설계, 기능 우선순위 판단이 훨씬 쉬워집니다.
|
||||
|
||||
## 6. AI 제품을 만들 때 특히 봐야 할 job의 세 층
|
||||
|
||||
많은 AI 제품은 기능 시연 때는 강력해 보이지만 실제 출시 후 사용자를 붙잡지 못합니다. 흔한 이유는 표면 동작만 해결하고 더 깊은 job을 해결하지 못했기 때문입니다.
|
||||
|
||||
하나의 job을 대략 세 층으로 나누어 볼 수 있습니다.
|
||||
|
||||
### 6.1 기능 층
|
||||
|
||||
가장 표면적인 과제는 무엇인가?
|
||||
|
||||
- 문서 요약
|
||||
- 문구 재작성
|
||||
- 할 일 추출
|
||||
- 이미지 생성
|
||||
|
||||
사용자가 말로 가장 쉽게 말하는 층입니다.
|
||||
|
||||
### 6.2 감정 층
|
||||
|
||||
사용자는 어떤 불편한 감정을 줄이거나 어떤 느낌을 얻고 싶은가?
|
||||
|
||||
- 덜 당황하고 싶다.
|
||||
- 덜 비전문적으로 보이고 싶다.
|
||||
- 매번 처음부터 시작하고 싶지 않다.
|
||||
- 더 통제감을 갖고 싶다.
|
||||
|
||||
많은 지불 의향은 실제로 감정 층과 큰 관련이 있습니다.
|
||||
|
||||
### 6.3 사회적 층
|
||||
|
||||
사용자는 다른 사람 눈에 어떤 사람으로 보이고 싶은가?
|
||||
|
||||
- 더 믿음직해 보이고 싶다.
|
||||
- 팀에서 더 조직적인 사람으로 보이고 싶다.
|
||||
- 고객 앞에서 더 전문적으로 보이고 싶다.
|
||||
- 소셜 플랫폼에서 더 잘 표현하는 사람으로 보이고 싶다.
|
||||
|
||||
기능 층만 만들면 제품은 쉽게 대체됩니다. 감정 층과 사회적 층까지 이해하면 진짜 끈적한 가치를 찾기 쉬워집니다.
|
||||
|
||||
## 7. JTBD로 제품 방향을 거꾸로 걸러내기
|
||||
|
||||
이미 제품이 있는 것이 아니라 손에 3~5개의 아이디어가 있고 무엇을 해야 할지 모르겠다면, JTBD는 선별에 매우 적합합니다.
|
||||
|
||||
각 아이디어를 두고 다음 5가지 질문을 해 보세요.
|
||||
|
||||
1. 이 아이디어가 대응하는 장면이 충분히 구체적인가?
|
||||
2. 사용자는 지금 이미 어떤 서툰 방식으로 해결하고 있는가?
|
||||
3. 이 job의 고통감이 충분히 강하거나 충분히 자주 발생하는가?
|
||||
4. 내가 잘 만들면 사용자가 "상태가 좋아졌다"고 분명히 느낄까?
|
||||
5. 첫 버전은 이 job의 핵심 한 단계만 중심으로 작지만 유용하게 만들 수 있을까?
|
||||
|
||||
어떤 방향을 끝까지 말해도 "느낌상 재미있다" 정도밖에 말하지 못하고 트리거, 대체 방안, 성공 기준을 말하지 못한다면, 그것은 아직 성숙한 방향이 아니라 흐릿한 영감일 가능성이 큽니다.
|
||||
|
||||
## 8. 사용자 인터뷰에 바로 가져갈 수 있는 질문
|
||||
|
||||
많은 사람이 조사를 시작하면 "어떤 기능을 원하세요?"라고 묻습니다. 이런 질문은 표면적인 답을 얻기 쉽습니다.
|
||||
|
||||
JTBD에는 아래 질문들이 더 적합합니다.
|
||||
|
||||
- 최근에 이 문제를 만난 것은 언제인가요?
|
||||
- 그때 무엇을 하고 있었고, 왜 막혔나요?
|
||||
- 결국 어떻게 해결했나요?
|
||||
- 이 과정에서 가장 짜증 나고, 느리고, 불안한 지점은 무엇이었나요?
|
||||
- 도구가 도와준다면 어떤 결과가 정말 유용하다고 느껴질까요?
|
||||
- 어떤 대체 방법을 써 봤나요? 왜 충분하지 않았나요?
|
||||
|
||||
이런 질문 방식의 장점은 대화를 상상 속 취향이 아니라 실제 경험으로 되돌린다는 점입니다.
|
||||
|
||||
## 9. AI로 JTBD 분해하기
|
||||
|
||||
JTBD 자체는 AI가 발명한 것이 아니지만, AI는 JTBD를 정리하고 추출하는 데 매우 적합합니다.
|
||||
|
||||
예를 들어 사용자 피드백 5~10개를 이미 모았다면, 그것을 모델에게 던져 아래 구조로 요약하게 할 수 있습니다.
|
||||
|
||||
```text
|
||||
제품 리서치 조수 역할을 해 줘.
|
||||
사용자 원문을 줄 테니 먼저 기능 제안을 하지 말고,
|
||||
Jobs to Be Done 프레임워크에 따라 정리해 줘.
|
||||
|
||||
1. 사용자는 어떤 장면에 있는가
|
||||
2. 사용자가 행동하게 된 트리거는 무엇인가
|
||||
3. 사용자가 진짜 완료하고 싶은 진전은 무엇인가
|
||||
4. 현재 대체 방안은 무엇인가
|
||||
5. 사용자가 가장 중요하게 보는 성공 기준은 무엇인가
|
||||
6. 이 피드백들에서 반복해서 등장하는 감정 단어는 무엇인가
|
||||
|
||||
마지막으로 이 내용을 검증 우선순위가 높은 JTBD 가설 3개로 정리해 줘.
|
||||
```
|
||||
|
||||
이미 아이디어가 있다면 AI에게 1차 수렴을 도와달라고 할 수도 있습니다.
|
||||
|
||||
```text
|
||||
[제품 아이디어]를 만들고 싶어.
|
||||
기능 목록을 바로 주지 말고, Jobs to Be Done 방법으로 분석해 줘.
|
||||
|
||||
1. 이 제품이 섬길 수 있는 구체적인 장면은 무엇인가
|
||||
2. 각 장면에서 사용자가 완료하고 싶은 핵심 job은 무엇인가
|
||||
3. 기존 대체 방안은 무엇인가
|
||||
4. 어떤 job이 MVP 출발점으로 가장 적합한가, 왜 그런가
|
||||
5. 마지막으로 추천하는 job을 명확한 JTBD 문장 한 개로 작성해 줘
|
||||
```
|
||||
|
||||
이렇게 하면 처음부터 AI가 "기능 50개 브레인스토밍"으로 끌고 가지 않고, 먼저 방향을 명확하게 말하게 할 수 있습니다.
|
||||
|
||||
## 10. 초보자가 가장 흔히 하는 4가지 오해
|
||||
|
||||
### 10.1 job을 기능명으로 쓰기
|
||||
|
||||
"AI 요약", "지능형 분류", "자동 생성"은 모두 job이 아닙니다. 그것들은 가능한 구현 방식일 뿐입니다.
|
||||
|
||||
### 10.2 사람군을 너무 넓게 쓰기
|
||||
|
||||
"모든 직장인", "모든 학생", "모든 창업자"는 보통 너무 넓습니다. 넓을수록 실제 장면을 보기 어려워집니다.
|
||||
|
||||
### 10.3 사용자가 말하는 것만 듣고, 실제 행동은 보지 않기
|
||||
|
||||
사용자는 자신이 원하는 것을 설명할 수 있지만, 진짜 우선순위는 지금 어떻게 문제를 임시로 해결하고 있는지에 숨어 있는 경우가 많습니다.
|
||||
|
||||
### 10.4 처음부터 완전한 플랫폼을 만들려고 하기
|
||||
|
||||
JTBD를 올바르게 여는 방식은 보통 "모든 것을 해결하는 큰 플랫폼을 만들겠다"가 아닙니다. 먼저 한 장면에서 가장 중요한 한 단계를 겨냥하고, 그것을 매우 매끄럽게 만드는 것입니다.
|
||||
|
||||
## 11. 정리
|
||||
|
||||
Jobs to Be Done의 가장 가치 있는 점은 새로운 용어를 하나 주는 것이 아니라, 관찰 관점을 바꿔 준다는 것입니다. **제품 기능만 바라보지 말고, 사용자가 어떤 일을 다음 단계로 밀고 싶어 하는지 바라보세요.**
|
||||
|
||||
다음 질문을 반복해 묻기 시작하면:
|
||||
|
||||
- 사용자는 어떤 장면에서 이 제품을 고용하는가
|
||||
- 정확히 어디에서 막혔는가
|
||||
- 지금은 어떤 방식으로 버티고 있는가
|
||||
- 일이 해결되면 상태가 어떻게 변하는가
|
||||
|
||||
원래 흐릿했던 많은 아이디어가 갑자기 선명해지고, 원래 화려해 보였던 많은 기능이 갑자기 그다지 중요하지 않게 됩니다.
|
||||
|
||||
제품을 만들 때, 특히 AI 제품을 만들 때 가장 위험한 것은 처음부터 능력 시연에 빠지는 것입니다. JTBD는 당신의 주의를 진짜 중요한 곳으로 되돌립니다. **사용자가 왜 당신을 필요로 하는가, 그리고 당신은 정확히 어떤 진전을 완성하도록 돕는가.**
|
||||
|
||||
<a id="jtbd-ai"></a>
|
||||
## [12. AI로 JTBD를 실천하는 방법](#top-jtbd)
|
||||
|
||||
JTBD는 AI가 발명한 것이 아니지만, AI는 이 방법 안에서 리서치 조수, 정리 조수, 대조 조수 역할을 하기에 매우 적합합니다. 핵심은 **AI가 사용자를 상상해 대신 결론 내리게 하지 말고, 정리와 확장을 돕게 하는 것**입니다.
|
||||
|
||||
다음처럼 사용할 수 있습니다.
|
||||
|
||||
### 12.1 AI에게 흐릿한 아이디어를 JTBD 가설로 바꾸게 하기
|
||||
|
||||
머릿속에 "대학생이 인턴십을 찾도록 돕는 도구를 만들고 싶다"처럼 흐릿한 설명만 있다면, 먼저 AI에게 여러 가능한 job으로 나눠 보게 할 수 있습니다.
|
||||
|
||||
```text
|
||||
지금 흐릿한 제품 아이디어가 있어: [아이디어]
|
||||
기능 목록을 바로 주지 말고, Jobs to Be Done 방식으로 분석해 줘.
|
||||
1. 어떤 구체적인 장면에 대응할 수 있는가
|
||||
2. 각 장면에서 사용자가 진짜 완료하고 싶은 진전은 무엇인가
|
||||
3. 현재 대체 방안은 무엇일 수 있는가
|
||||
4. 어떤 job이 MVP로 먼저 만들기 가장 적합한가
|
||||
마지막에는 각 job을 명확한 JTBD 문장으로 써 줘.
|
||||
```
|
||||
|
||||
아주 초보적인 입력도 괜찮습니다.
|
||||
|
||||
```text
|
||||
대학생이 인턴십을 찾는 것을 돕는 무언가를 만들고 싶어.
|
||||
나도 아직 구체적으로 뭘 만들지 잘 모르겠어. 사용자가 정확히 어떤 일을 완료하고 싶은지 같이 생각해 줘.
|
||||
```
|
||||
|
||||
AI가 주는 유용한 출력은 이렇게 생겼을 수 있습니다.
|
||||
|
||||
```text
|
||||
가능한 JTBD 방향:
|
||||
|
||||
1. 처음 인턴십 지원을 준비할 때, 먼저 무엇을 준비해야 하는지 빠르게 알고 싶다.
|
||||
그래야 정보가 혼란스러워 계속 지원을 미루지 않을 수 있다.
|
||||
|
||||
2. 어떤 인턴십 공고를 봤을 때, 내가 지원할 가치가 있는지 빠르게 판단하고 싶다.
|
||||
그래야 맞지 않는 공고에 너무 많은 시간을 낭비하지 않을 수 있다.
|
||||
|
||||
3. 지원을 시작할 때, 기존 이력서를 직무에 더 맞는 버전으로 바꾸고 싶다.
|
||||
그래야 더 빨리 지원을 완료하고 통과율을 높일 수 있다.
|
||||
```
|
||||
|
||||
이 출력의 가치는 매우 넓었던 생각 하나를 실제 장면에 가까운 여러 방향으로 나눈다는 데 있습니다.
|
||||
|
||||
### 12.2 AI에게 인터뷰 원문을 정리하게 하기
|
||||
|
||||
사용자 인터뷰를 몇 번 했다면, 인터뷰 기록을 AI에게 주고 반복해서 등장하는 장면, 트리거, 대체 방안, 성공 기준을 추출하게 할 수 있습니다.
|
||||
|
||||
```text
|
||||
아래는 사용자 5명의 인터뷰 원문이야.
|
||||
먼저 해결책을 주지 말고, JTBD 프레임워크에 따라 정리해 줘.
|
||||
1. 사용자는 어떤 장면에 있는가
|
||||
2. 사용자가 행동하게 된 트리거는 무엇인가
|
||||
3. 사용자가 진짜 완료하고 싶은 진전은 무엇인가
|
||||
4. 현재 대체 방안은 무엇인가
|
||||
5. 사용자가 가장 중요하게 여기는 성공 기준은 무엇인가
|
||||
6. 여러 사용자에게 반복해서 나타난 정보는 무엇인가
|
||||
마지막에는 검증 우선순위가 높은 JTBD 가설 3개로 정리해 줘.
|
||||
```
|
||||
|
||||
아주 간단한 초보자 입력도 이렇게 쓸 수 있습니다.
|
||||
|
||||
```text
|
||||
3명에게 물어봤는데, 대략 이렇게 말했어.
|
||||
|
||||
1. 인턴십에 지원할 때마다 이력서를 다시 고쳐야 해서 너무 귀찮다.
|
||||
2. 사실 가장 두려운 건 내가 잘 썼는지 모르겠다는 것이다.
|
||||
3. 지금은 선배에게 먼저 봐 달라고 하는데, 매번 부탁하기가 미안하다.
|
||||
|
||||
그들이 진짜 완료하고 싶은 일이 무엇인지 정리해 줘.
|
||||
```
|
||||
|
||||
AI는 이렇게 출력할 수 있습니다.
|
||||
|
||||
```text
|
||||
정리 결과:
|
||||
|
||||
- 공통 장면: 인턴십 지원 준비 전, 이력서를 처리해야 함
|
||||
- 공통 어려움: "충분히 좋은" 상태까지 수정했는지 판단하지 못함
|
||||
- 현재 대체 방안: 선배에게 봐 달라고 부탁하거나 직접 반복 수정
|
||||
- 가능한 JTBD:
|
||||
인턴십 지원을 준비할 때, 이력서가 이미 지원 가능한 수준인지 더 빨리 판단하고 싶다.
|
||||
그래야 "조금만 더 고쳐 보자"에 계속 막혀 지원을 미루지 않을 수 있다.
|
||||
```
|
||||
|
||||
이 출력은 유용합니다. 흩어진 원문 속에서 더 "수요"에 가까운 것을 뽑아 주기 때문입니다.
|
||||
|
||||
### 12.3 AI에게 가벼운 웹 조사를 한 번 맡기기
|
||||
|
||||
대규모 인터뷰를 시작하기 전, AI에게 아주 가벼운 외부 정보 스캔을 맡길 수 있습니다. 예를 들면 다음입니다.
|
||||
|
||||
- 공개 포럼이나 커뮤니티에서 사람들이 이 문제를 어떻게 불평하는가
|
||||
- 시장에 이미 있는 제품들은 주로 어느 층의 문제를 해결하는가
|
||||
- 사용자가 가장 흔히 쓰는 대체 방안은 무엇인가
|
||||
- 흔한 평가에서 사람들이 가장 만족하고 불만족하는 지점은 무엇인가
|
||||
|
||||
이 조사는 실제 사용자 인터뷰를 대체할 수 없지만, Discover 단계의 워밍업으로 매우 적합하며 먼저 문제 지도를 만드는 데 도움을 줍니다.
|
||||
|
||||
간단한 입력 예시는 다음입니다.
|
||||
|
||||
```text
|
||||
조사해 줘.
|
||||
"대학생이 이력서를 고치고 인턴십에 지원할 때 가장 흔히 겪는 고통은 무엇인가?"
|
||||
공개 포럼, 경험 글, 취업 커뮤니티에서 사람들이 직접 말한 내용을 우선 봐 줘.
|
||||
가장 흔한 문제 5개로 정리해 줘.
|
||||
```
|
||||
|
||||
AI는 이렇게 출력할 수 있습니다.
|
||||
|
||||
```text
|
||||
흔한 고통 정리:
|
||||
|
||||
1. 이력서에 무엇을 써야 할지 모르고 경험이 너무 적다.
|
||||
2. 직무마다 어떻게 다르게 수정해야 할지 모른다.
|
||||
3. 여러 번 고쳤지만 충분히 좋은지 계속 확신하지 못한다.
|
||||
4. 믿을 만한 사람에게 봐 달라고 하기 어렵다.
|
||||
5. 지원 절차가 복잡해 쉽게 미룬다.
|
||||
```
|
||||
|
||||
이런 출력은 최종 결론으로 삼을 수는 없지만, 어떤 문제를 먼저 인터뷰할지 결정하는 데 적합합니다.
|
||||
|
||||
### 12.4 AI에게 "반대편" 역할을 맡기기
|
||||
|
||||
많은 경우 우리는 자기 아이디어에 감정적으로 너무 붙어 있습니다. AI에게 일부러 비판하는 사람 역할을 맡겨 문제를 더 명확하게 말하도록 압박할 수 있습니다.
|
||||
|
||||
```text
|
||||
매우 엄격한 제품 리서치 컨설턴트 역할을 해 줘.
|
||||
아래는 내 JTBD 가설이야: [가설]
|
||||
다음 관점에서 비판해 줘.
|
||||
1. 이 장면이 너무 넓은가
|
||||
2. 이 job이 진짜 진전이 아니라 기능으로 쓰였는가
|
||||
3. 대체 방안이 너무 약한가
|
||||
4. 성공 기준이 충분히 명확하지 않은가
|
||||
5. 이 가설에서 가장 먼저 검증해야 할 위험은 무엇인가
|
||||
```
|
||||
|
||||
이렇게 하면 당신이 수요를 보고 있는지, 아니면 좋아하는 솔루션만 보고 있는지 더 빨리 발견할 수 있습니다.
|
||||
|
||||
## 📚 Assignments
|
||||
|
||||
위 내용을 바탕으로 다음 과제를 완료하세요.
|
||||
|
||||
1. 최근 만들고 싶은 제품 아이디어 하나를 고르고, JTBD 공식 한 문장으로 명확하게 쓰세요.
|
||||
2. 이 아이디어에 5개 요소를 보충하세요: 장면, 트리거, 진전, 대체 방안, 성공 기준.
|
||||
3. 잠재 사용자 3명을 찾아 최소 한 번은 "최근에 이 문제를 만난 것은 언제였나요?"라고 물어보세요.
|
||||
4. 인터뷰 원문을 AI에게 주고 검증 우선순위가 높은 JTBD 가설 3개로 정리하세요.
|
||||
|
||||
## 더 읽어 보기
|
||||
|
||||
- [Christensen Institute: Jobs to Be Done](https://www.christenseninstitute.org/theory/jobs-to-be-done/)
|
||||
- [Harvard Business School Online: What Is Jobs to Be Done?](https://online.hbs.edu/blog/post/jobs-to-be-done)
|
||||
- [Intercom: Jobs-to-be-Done: A framework for customer needs](https://www.intercom.com/blog/jobs-to-be-done-framework/)
|
||||
- [Mural: Jobs to Be Done framework guide](https://www.mural.co/blog/jobs-to-be-done-framework)
|
||||
|
||||
@@ -0,0 +1,590 @@
|
||||
---
|
||||
title: 'The Mom Test: 사용자 인터뷰로 수요를 검증하는 방법'
|
||||
description: '제로 베이스 독자를 위한 The Mom Test 입문 글입니다. 예의상 긍정 피드백을 피하고, 실제 행동, 구체적 사실, 이미 존재하는 문제를 중심으로 사용자 인터뷰를 진행해 "듣기에는 좋다"를 더 신뢰할 수 있는 수요 판단으로 바꾸는 법을 배웁니다.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
const duration = '약 <strong>1.5시간</strong>'
|
||||
</script>
|
||||
|
||||
# The Mom Test: 사용자 인터뷰로 수요를 검증하는 방법
|
||||
|
||||
<a id="top-mom"></a>
|
||||
|
||||
## 본 장 안내
|
||||
|
||||
<ChapterIntroduction
|
||||
:duration="duration"
|
||||
:tags="['사용자 인터뷰', '수요 검증', '사용자 리서치', '제품 조사']"
|
||||
coreOutput="진짜 정보를 더 잘 끌어내는 인터뷰 질문 묶음 1개"
|
||||
expectedOutput="사용자의 예의상 격려를 검증으로 착각하지 않고, 실제 행동으로 방향을 판단할 수 있게 됨"
|
||||
>
|
||||
|
||||
많은 사람이 처음 제품 조사를 할 때 가장 중요한 것이 "사람을 찾아 이야기해 보는 것"이라고 생각합니다. 그래서 친구, 동료, 심지어 가족에게 묻습니다.
|
||||
|
||||
- 내 아이디어 어때?
|
||||
- 이런 제품이 있으면 쓸 것 같아?
|
||||
- 이 기능 괜찮아 보이지 않아?
|
||||
|
||||
상대도 보통 매우 힘이 되는 피드백을 줍니다.
|
||||
|
||||
- 괜찮은데?
|
||||
- 유용해 보인다
|
||||
- 한번 해 봐도 좋을 것 같아
|
||||
|
||||
문제는 이런 답변이 대개 판단에 도움이 되지 않는다는 점입니다. 그것들은 예의, 응원, 또는 그 자리에서 당신의 흥을 깨고 싶지 않은 자연스러운 반응에 더 가깝습니다. 당신은 "시장 검증"을 얻었다고 생각하지만, 사실은 의사결정에 쓰기 어려운 위로만 잔뜩 모은 것일 수 있습니다.
|
||||
|
||||
The Mom Test 방법은 바로 이 문제를 해결하기 위해 만들어졌습니다. 이 방법은 우리에게 이렇게 상기시킵니다. **사용자가 일부러 당신을 속이는 것이 아니라, 당신의 질문 방식이 상대를 듣기 좋지만 쓸모없는 답으로 자연스럽게 이끈다**는 것입니다.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info 최소 SOP
|
||||
**목적**: 읽고 나면 사용자와 어떻게 이야기해야 "듣기 좋다"만 듣지 않고, 방향 판단에 도움이 되는 정보를 실제로 물어낼 수 있는지 더 명확해집니다.
|
||||
|
||||
**행동 항목**: 원래 물어보려던 질문 5개를 바꾸고, 우선 "최근 한 번은 언제였나요", "그때 어떻게 처리했나요"를 묻습니다.
|
||||
|
||||
**결과**: 무엇이 의견이고, 무엇이 판단을 뒷받침하는 증거인지 더 쉽게 구분할 수 있습니다.
|
||||
|
||||
**키워드 이동**: [The Mom Test란 무엇인가](#mom-what) · [세 가지 핵심 원칙](#mom-principles) · [AI는 어떻게 도와줄 수 있나](#mom-ai)
|
||||
:::
|
||||
|
||||
## 다음 내용을 배우게 됩니다
|
||||
|
||||
1. The Mom Test가 정확히 어떤 문제를 해결하는지, 왜 많은 "사용자 조사"가 실제 정보를 조사하지 못하는지
|
||||
2. 이 방법의 핵심 원칙: 의견은 적게 묻고 행동을 더 묻기, 가정보다는 사실을 더 묻기
|
||||
3. 거짓 양성 피드백을 쉽게 얻는 질문을 더 가치 있는 인터뷰 질문으로 바꾸는 법
|
||||
4. The Mom Test를 JTBD, 수요 검증, MVP 판단과 연결해 사용하는 법
|
||||
|
||||
<a id="mom-what"></a>
|
||||
## [1. The Mom Test란 정확히 무엇인가](#top-mom)
|
||||
|
||||
The Mom Test는 Rob Fitzpatrick의 동명 책에서 나온 방법입니다. 이름은 농담처럼 들리지만 핵심을 아주 정확히 찌릅니다.
|
||||
|
||||
**당신의 엄마조차도 "이건 별로인 아이디어야"라고 직접 말하기는 어렵습니다.**
|
||||
|
||||
그 이유는 엄마가 정직하지 않아서가 아닙니다.
|
||||
|
||||
- 당신을 상처 입히고 싶지 않습니다.
|
||||
- 무의식적으로 당신을 격려합니다.
|
||||
- 당신의 표현 방식에 맞춰 쉽게 대답합니다.
|
||||
|
||||
사실 엄마뿐 아니라 친구, 동료, 예전 동창, 심지어 많은 낯선 사람도 당신의 제품 아이디어를 마주하면 비슷한 "긍정 피드백"을 주는 경우가 많습니다. 이것은 수요가 진짜 있다는 뜻이 아니라, 질문을 듣기 좋은 답이 나오기 쉬운 형태로 했다는 뜻입니다.
|
||||
|
||||
그래서 The Mom Test의 핵심은 "엄마에게 묻지 마라"가 아닙니다.
|
||||
|
||||
**누구라도 당신에게 맞장구치게 만드는 형태로 질문하지 말라는 것입니다.**
|
||||
|
||||
이 방법이 진짜로 가르치려는 것은 대화를 통해 실제 수요에 더 가까운 정보를 얻는 법이지, 스스로 기분 좋아지는 댓글을 잔뜩 모으는 법이 아닙니다.
|
||||
|
||||
## 2. 해결하는 핵심 문제는 무엇인가
|
||||
|
||||
The Mom Test가 주로 해결하는 것은 매우 흔한 인지 착각입니다.
|
||||
|
||||
**예의상 긍정 피드백을 실제 수요로 착각하는 것**입니다.
|
||||
|
||||
예를 들어 이렇게 묻는다고 해 봅시다.
|
||||
|
||||
- 이 App 아이디어 어때요?
|
||||
- AI가 이력서를 써 주는 도구를 만들면 쓸 것 같아요?
|
||||
- 이 기능은 가치 있어 보이나요?
|
||||
|
||||
이 질문들의 공통점은 다음입니다.
|
||||
|
||||
- 모두 "의견"을 묻는다.
|
||||
- 모두 약간의 암시를 담고 있다.
|
||||
- 모두 아직 일어나지 않은 미래를 이야기한다.
|
||||
|
||||
사람이 "의견"과 "미래 가정"에 답할 때는 보통 안정적이지 않습니다. 많은 사람은 자신의 흥미, 실행력, 미래 구매 의사를 과대평가합니다.
|
||||
|
||||
그래서 The Mom Test는 이렇게 알려 줍니다.
|
||||
|
||||
- 다른 사람이 내 아이디어를 어떻게 평가하는지 너무 믿지 마세요.
|
||||
- 다른 사람이 미래 행동을 어떻게 예측하는지 너무 믿지 마세요.
|
||||
- 가능한 한 이미 일어난 사용자의 실제 행동으로 돌아가세요.
|
||||
|
||||
"쓸 것 같나요?"보다 "지난번에 이 일을 어떻게 처리했나요?"가 대개 진실에 더 가깝기 때문입니다.
|
||||
|
||||
<a id="mom-principles"></a>
|
||||
## [3. 세 가지 핵심 원칙](#top-mom)
|
||||
|
||||
가장 중요한 부분만 먼저 기억하고 싶다면 아래 세 가지 원칙을 기억하세요.
|
||||
|
||||
### 3.1 내 아이디어는 적게 말하고, 사용자의 과거 실제 경험을 더 이야기하게 하기
|
||||
|
||||
많은 무효 인터뷰는 시작하자마자 자기 솔루션을 설명하고, 자신이 얼마나 신났는지 말하고, 어떤 제품을 만들 준비인지 이야기합니다. 문제는 당신이 너무 많이 말하는 순간, 상대가 "맞춰 주기", "격려하기" 모드로 바뀌기 쉽다는 점입니다.
|
||||
|
||||
반대로 더 좋은 방식은 상대의 경험에 초점을 두는 것입니다.
|
||||
|
||||
- 최근에 이 문제를 만난 것은 언제였나요?
|
||||
- 그때 무엇을 하고 있었나요?
|
||||
- 결국 어떻게 처리했나요?
|
||||
- 어느 단계가 가장 번거로웠나요?
|
||||
|
||||
이런 질문은 대화를 상상 속 선호가 아니라 현실로 더 자연스럽게 되돌립니다.
|
||||
|
||||
### 3.2 추상적 의견은 적게 묻고, 구체적 사실을 더 묻기
|
||||
|
||||
"이 기능 괜찮은 것 같아요", "듣기에는 좋아요", "조금 쓸모 있어 보이네요" 같은 표현은 너무 추상적이라 제품 의사결정에 쓰기 어렵습니다.
|
||||
|
||||
더 가치 있는 정보는 보통 이런 모습입니다.
|
||||
|
||||
- 지난주에 이 일 때문에 2시간을 썼어요.
|
||||
- 지금은 Excel과 WeChat으로 버티고 있어요.
|
||||
- 지난달 이미 비슷한 도구에 돈을 낸 적이 있어요.
|
||||
- 제가 가장 두려운 건 느린 것이 아니라 잘못하는 거예요.
|
||||
|
||||
이런 정보가 문제 강도, 빈도, 지불 가능성을 판단하는 데 진짜 도움이 됩니다.
|
||||
|
||||
### 3.3 사용자가 원하는 솔루션을 적게 묻고, 지금 어떻게 해결하는지 더 보기
|
||||
|
||||
사용자는 자신의 어려움을 설명하는 데는 능숙하지만, 해결책을 설계하는 데 항상 능숙하지는 않습니다.
|
||||
|
||||
이렇게 묻는다면:
|
||||
|
||||
- AI가 자동으로 이걸 해 주면 좋겠어요?
|
||||
- 지능형 기능을 넣으면 도움이 될까요?
|
||||
|
||||
대개 얻는 것은 어떤 솔루션에 대한 흐릿한 태도일 뿐, 수요 자체가 아닙니다.
|
||||
|
||||
더 좋은 질문은 다음입니다.
|
||||
|
||||
- 지금 이 문제를 어떤 방법으로 처리하나요?
|
||||
- 왜 그 방법을 선택했나요?
|
||||
- 그 방법은 어디가 충분하지 않나요?
|
||||
|
||||
기존 대체 방안을 명확히 보는 것은 "무엇을 원하세요?"라고 직접 묻는 것보다 훨씬 중요합니다.
|
||||
|
||||
## 4. 왜 사람들은 늘 듣기 좋지만 쓸모없는 답을 줄까
|
||||
|
||||
이 점을 이해하면 인터뷰에서 오판이 훨씬 줄어듭니다.
|
||||
|
||||
### 4.1 사람은 무의식적으로 예의를 지킨다
|
||||
|
||||
특히 대화 상대와 관계가 있을 때, 상대는 직접 이렇게 말하기 어렵습니다.
|
||||
|
||||
- 이 방향은 별로인 것 같아요.
|
||||
- 저는 절대 안 쓸 것 같아요.
|
||||
- 이 문제는 제게 그렇게 중요하지 않아요.
|
||||
|
||||
대신 "괜찮은데", "기회가 있으면 해 봐도 좋겠다"라고 말할 가능성이 큽니다.
|
||||
|
||||
### 4.2 사람은 미래의 자신을 과대평가한다
|
||||
|
||||
많은 사람은 자신이 미래에 진심으로 이렇게 될 것이라 믿습니다.
|
||||
|
||||
- 더 자율적일 것이다.
|
||||
- 더 열심히 배울 것이다.
|
||||
- 더 기꺼이 돈을 낼 것이다.
|
||||
- 새 도구를 더 기꺼이 시도할 것이다.
|
||||
|
||||
그래서 "있으면 아마 쓸 것 같아요"는 종종 미래에 정말 쓴다는 뜻이 아닙니다.
|
||||
|
||||
### 4.3 질문 방식 자체가 답을 유도한다
|
||||
|
||||
이렇게 물을 때:
|
||||
|
||||
- 내 아이디어 괜찮지 않아?
|
||||
- 이 기능이 당신에게 도움이 되지 않을까?
|
||||
|
||||
사실 질문 안에 이미 "정답"을 몰래 넣은 것입니다.
|
||||
|
||||
그래서 The Mom Test는 특히 강조합니다. **인터뷰를 인정을 구하는 자리로 만들지 마세요.**
|
||||
|
||||
## 5. 직접 비교: 어떤 질문은 망하기 쉽고, 어떤 질문은 더 가치 있는가
|
||||
|
||||
아래 비교는 거의 모든 초보자가 바로 써먹을 수 있습니다.
|
||||
|
||||
| 망하기 쉬운 질문 | 더 가치 있는 질문 |
|
||||
| --- | --- |
|
||||
| 내 아이디어 어때요? | 최근에 이 문제를 만난 것은 언제였나요? |
|
||||
| 이런 제품이 있으면 쓸 건가요? | 지금은 이 일을 어떻게 처리하고 있나요? |
|
||||
| 이 기능에 돈을 낼 의향이 있나요? | 지난번 이 문제 때문에 돈을 쓴 적이 있나요? 무엇에 썼나요? |
|
||||
| 이 기능이 중요하다고 생각하나요? | 이 흐름에서 가장 짜증 나고, 느리고, 불안한 단계는 무엇인가요? |
|
||||
| AI가 자동으로 도와주면 좋겠나요? | 지금 더 편한 해결책을 아직 찾지 못한 이유는 무엇인가요? |
|
||||
|
||||
이 표에서 가장 중요한 것은 구체적인 문장이 아니라 그 뒤의 방향입니다.
|
||||
|
||||
- 의견에서 사실로
|
||||
- 미래에서 과거로
|
||||
- 당신의 솔루션에서 사용자의 문제로
|
||||
|
||||
## 6. 제로 베이스도 바로 사용할 수 있는 인터뷰 리듬
|
||||
|
||||
지금 바로 사람을 찾아 이야기하고 싶다면 아래 순서를 그대로 따라도 됩니다.
|
||||
|
||||
### 6.1 시작: 내가 배우는 중이지 팔려고 온 것이 아니라고 설명하기
|
||||
|
||||
예를 들면:
|
||||
|
||||
> 요즘 사람들이 이 문제를 어떻게 처리하는지 조사하고 있어요. 먼저 실제 상황을 이해하려는 것이지, 뭔가를 팔러 온 것은 아닙니다.
|
||||
|
||||
이 표현은 상대가 "긍정 피드백을 줘야 한다"는 심리적 부담을 내려놓기 쉽게 합니다.
|
||||
|
||||
### 6.2 최근의 실제 경험부터 묻기
|
||||
|
||||
아래 질문으로 시작할 수 있습니다.
|
||||
|
||||
- 최근에 이 문제를 만난 것은 언제였나요?
|
||||
- 그때 정확히 무슨 일이 있었나요?
|
||||
- 처음에는 어떻게 처리하려 했나요?
|
||||
|
||||
대화가 구체적인 사건으로 들어가면 정보 품질은 보통 뚜렷하게 올라갑니다.
|
||||
|
||||
### 6.3 행동, 비용, 대체 방안을 계속 캐묻기
|
||||
|
||||
이어서 묻습니다.
|
||||
|
||||
- 지금은 어떤 방법으로 해결하나요?
|
||||
- 그 방법에서 가장 불편한 점은 무엇인가요?
|
||||
- 이 일 때문에 시간, 돈, 에너지를 얼마나 썼나요?
|
||||
- 다른 방법도 시도해 봤나요? 왜 계속 쓰지 않았나요?
|
||||
|
||||
### 6.4 마지막에 고통감과 우선순위 판단하기
|
||||
|
||||
"아픈가요?"라고 직접 묻지 않아도 됩니다. 세부 정보에서 판단할 수 있습니다.
|
||||
|
||||
- 자주 만나는 문제인가
|
||||
- 이미 적극적으로 보완하고 있는가
|
||||
- 이미 비용을 지불할 의향을 보였는가
|
||||
- 말할 때 뚜렷한 감정이 실려 있는가
|
||||
|
||||
이것들이 "이게 당신의 고통점인가요?"라는 한 문장보다 훨씬 유용합니다.
|
||||
|
||||
## 7. 더 완전한 예시
|
||||
|
||||
"AI가 대학생 이력서 수정을 돕는" 제품을 만들고 싶다고 가정해 봅시다.
|
||||
|
||||
### 잘못된 질문 방식
|
||||
|
||||
동급생에게 이렇게 묻습니다.
|
||||
|
||||
> AI 이력서 최적화 도구를 만들고 싶은데, 어때?
|
||||
> 직무에 따라 이력서를 자동으로 고쳐 준다면 쓸 것 같아?
|
||||
|
||||
이때 상대는 이렇게 말할 가능성이 큽니다.
|
||||
|
||||
- 괜찮아 보여
|
||||
- 유용할 것 같아
|
||||
- 무료면 한번 써 볼게
|
||||
|
||||
이 답변으로는 수요가 얼마나 강한지 거의 판단할 수 없습니다.
|
||||
|
||||
### 더 좋은 질문 방식
|
||||
|
||||
이렇게 바꿔 물을 수 있습니다.
|
||||
|
||||
> 최근에 이력서를 고친 것은 언제였나요?
|
||||
> 그때 왜 고쳐야 했나요?
|
||||
> 어떻게 고쳤나요?
|
||||
> 어느 단계가 가장 막혔나요?
|
||||
> 다른 사람에게 봐 달라고 한 적이 있나요?
|
||||
> 이력서 때문에 돈을 쓰거나 많은 시간을 쓴 적이 있나요?
|
||||
|
||||
이 질문을 통해 다음 정보를 얻을 수 있습니다.
|
||||
|
||||
- 많은 사람은 못 쓰는 것이 아니라 직무별로 어떻게 고쳐야 할지 모른다.
|
||||
- 가장 아픈 것은 레이아웃이 아니라 "어떤 경험을 써야 할지 모르겠다"이다.
|
||||
- 그들이 미루는 것은 게으름 때문이 아니라 매번 이력서 수정이 매우 소모적이기 때문이다.
|
||||
- 그들은 이미 선배 조언, 템플릿 사이트, AI 도구, 친구에게 부탁하기로 겨우 해결하고 있다.
|
||||
|
||||
이제 실제 문제에 훨씬 가까워졌습니다.
|
||||
|
||||
## 8. The Mom Test와 JTBD는 어떻게 함께 쓰는가
|
||||
|
||||
JTBD가 "사용자가 어떤 진전을 이루고 싶어 하는지"를 보게 해 준다면, The Mom Test는 이렇게 가르쳐 주는 것에 가깝습니다.
|
||||
|
||||
**인터뷰를 통해 이 job이 정말 존재하는지 확인하는 방법**입니다.
|
||||
|
||||
둘은 완전히 이어서 쓸 수 있습니다.
|
||||
|
||||
1. 먼저 JTBD로 하나의 job을 가정한다.
|
||||
2. The Mom Test 방식으로 사용자에게 최근의 실제 경험을 묻는다.
|
||||
3. 이 job이 정말 자주 발생하고, 실제이며, 우선 만들 가치가 있는지 본다.
|
||||
|
||||
예를 들어 JTBD 가설이 다음과 같다고 합시다.
|
||||
|
||||
> 인턴십에 지원하려고 할 때, 나는 예전 이력서를 빠르게 직무에 맞는 버전으로 바꾸고 싶다. 그래야 가능한 한 빨리 지원을 완료할 수 있다.
|
||||
|
||||
그러면 The Mom Test 스타일 질문으로 검증할 수 있습니다.
|
||||
|
||||
- 최근에 지원한 것은 언제였나요?
|
||||
- 그때 이력서는 어떻게 고쳤나요?
|
||||
- 어느 문단이 가장 쓰기 어려웠나요?
|
||||
- 다 고친 뒤 충분히 좋은지 어떻게 판단했나요?
|
||||
|
||||
이렇게 방법이 연결됩니다.
|
||||
|
||||
- JTBD는 수요 가설을 정의하게 도와줍니다.
|
||||
- The Mom Test는 인터뷰로 가설을 검증하게 도와줍니다.
|
||||
|
||||
## 9. 초보자가 사용자 인터뷰에서 가장 흔히 하는 오해
|
||||
|
||||
### 9.1 인터뷰를 제품 설명회로 만들기
|
||||
|
||||
자신의 생각을 너무 많이 말하면 상대는 진짜 상황을 말하기보다 당신에게 맞춰 주기 쉽습니다.
|
||||
|
||||
### 9.2 인터뷰 대상이 전부 지인
|
||||
|
||||
지인과 이야기하면 안 되는 것은 아니지만, 지인은 당신을 격려하기 더 쉽습니다. 당신을 지지하는 사람만 찾지 말고, 실제 사용자에 더 가까운 사람을 섞어야 합니다.
|
||||
|
||||
### 9.3 너무 일찍 기능을 추궁하기
|
||||
|
||||
문제를 아직 명확히 하지 못했는데 버튼, 인터페이스, 기능 세부사항을 묻기 시작하면 보통 너무 일찍 해결책으로 들어가는 것입니다.
|
||||
|
||||
### 9.4 "쓸 것 같다" 한마디를 검증 결과로 여기기
|
||||
|
||||
인터뷰는 방향 판단을 도울 뿐, 검증이 완료됐다는 뜻은 아닙니다. 진짜 검증은 결국 사용자가 시간, 전환 비용, 시험 사용 행동, 심지어 지불처럼 실제 비용을 낼 의향이 있는지 봐야 합니다.
|
||||
|
||||
### 9.5 인터뷰 후 정리하지 않기
|
||||
|
||||
이야기하고 그냥 두면 정보는 금방 흐릿한 인상으로 변합니다. 가능한 한 빨리 정리하는 것이 좋습니다.
|
||||
|
||||
- 자주 나타나는 문제
|
||||
- 사용자 원문 속 감정 단어
|
||||
- 현재 대체 방안
|
||||
- 이미 지불한 비용
|
||||
- 자신의 새로운 판단
|
||||
|
||||
## 10. 바로 복사해 쓸 수 있는 질문 목록
|
||||
|
||||
빨리 시작하고 싶다면 충분히 범용적인 질문 묶음이 여기 있습니다.
|
||||
|
||||
### 시작 질문
|
||||
|
||||
- 최근에 이 문제를 만난 것은 언제였나요?
|
||||
- 그때 구체적으로 무슨 일이 있었나요?
|
||||
|
||||
### 행동 질문
|
||||
|
||||
- 그때 어떻게 처리했나요?
|
||||
- 왜 그 방법을 선택했나요?
|
||||
|
||||
### 비용 질문
|
||||
|
||||
- 이 일은 보통 시간이나 에너지를 얼마나 쓰게 하나요?
|
||||
- 이 문제를 해결하려고 돈을 쓴 적이 있나요?
|
||||
|
||||
### 대체 방안 질문
|
||||
|
||||
- 다른 도구나 방법을 시도해 본 적이 있나요?
|
||||
- 왜 결국 계속 쓰지 않았나요?
|
||||
|
||||
### 마무리 질문
|
||||
|
||||
- 앞으로 같은 문제를 다시 만난다면, 가장 이상적인 해결 방식은 어떤 모습이어야 할까요?
|
||||
|
||||
주의하세요. 이 마무리 질문은 물어봐도 되지만, 가장 뒤에 두는 것이 좋습니다. 앞에서는 바람이 아니라 사실을 얻는 것이 더 중요하기 때문입니다.
|
||||
|
||||
## 11. 정리
|
||||
|
||||
The Mom Test의 가장 중요한 기여는 "대화를 더 잘하는" 기술을 주는 것이 아니라, 더 맑은 판단 방식을 세워 주는 것입니다.
|
||||
|
||||
- 다른 사람이 내 아이디어를 칭찬하는 말을 너무 빨리 믿지 마세요.
|
||||
- "있으면 쓸 것 같아요"를 실제 수요로 여기지 마세요.
|
||||
- 인터뷰가 인정을 구하는 자리가 되게 하지 마세요.
|
||||
|
||||
진짜 가치 있는 인터뷰는 가능한 한 다음으로 돌아가야 합니다.
|
||||
|
||||
- 사용자의 최근 실제 경험
|
||||
- 지금은 어떻게 처리하고 있는가
|
||||
- 이미 어떤 비용을 치렀는가
|
||||
- 어디에서 분명히 불편함을 느끼는가
|
||||
|
||||
이렇게 묻기 시작하면 얻는 정보가 때로는 그렇게 듣기 좋지 않을 수 있지만, 보통 훨씬 더 유용합니다.
|
||||
제품을 만들 때는 **쓸모 있는 진실이 듣기 좋은 격려보다 언제나 더 중요합니다.**
|
||||
|
||||
<a id="mom-ai"></a>
|
||||
## [12. AI로 사용자 인터뷰를 돕는 방법](#top-mom)
|
||||
|
||||
The Mom Test는 본질적으로 "진짜 사람과 이야기하는" 방법이므로 AI가 실제 인터뷰를 대체할 수는 없습니다. 하지만 AI는 인터뷰 전, 중, 후에 보조 역할을 하기에 매우 적합하며, 특히 초보자의 진입 장벽을 낮추는 데 좋습니다.
|
||||
|
||||
### 12.1 AI에게 "망하기 쉬운 질문"을 고쳐 쓰게 하기
|
||||
|
||||
많은 사람이 "내 아이디어 어때요"라고 물어보면 안 된다는 것을 알지만, 막상 입을 열면 다시 그런 문장으로 돌아갑니다. 준비한 질문을 AI에게 주고 고쳐 쓰게 할 수 있습니다.
|
||||
|
||||
```text
|
||||
아래는 사용자 인터뷰에서 묻고 싶은 질문들이야.
|
||||
[질문 붙여넣기]
|
||||
|
||||
The Mom Test 원칙으로 고쳐 써 줘.
|
||||
1. 의견형 질문 삭제
|
||||
2. 미래 가정 질문 삭제
|
||||
3. 가능한 한 과거 실제 행동, 기존 대체 방안, 이미 지불한 비용을 중심으로 바꾸기
|
||||
4. 마지막에 바로 인터뷰할 수 있는 질문 8~10개 목록으로 정리
|
||||
```
|
||||
|
||||
아주 초보적인 입력도 괜찮습니다.
|
||||
|
||||
```text
|
||||
사용자에게 이렇게 묻고 싶어.
|
||||
1. AI 이력서 수정 도구를 만들면 어때요?
|
||||
2. 쓸 것 같나요?
|
||||
3. 돈을 낼 의향이 있나요?
|
||||
|
||||
더 좋은 질문으로 바꿔 줘.
|
||||
```
|
||||
|
||||
AI가 주는 유용한 출력은 이런 모습일 수 있습니다.
|
||||
|
||||
```text
|
||||
고친 질문:
|
||||
|
||||
1. 최근에 이력서를 고친 것은 언제였나요?
|
||||
2. 그때 왜 고쳐야 했나요?
|
||||
3. 어떻게 고쳤나요?
|
||||
4. 어느 단계가 가장 시간이 많이 걸렸나요?
|
||||
5. 다른 사람에게 봐 달라고 한 적이 있나요?
|
||||
6. 이전에 이력서 수정에 돈을 쓰거나 많은 시간을 쓴 적이 있나요?
|
||||
```
|
||||
|
||||
이 출력은 매우 도움이 됩니다. 원래 "의견을 묻는" 질문을 바로 "실제 행동을 묻는" 질문으로 바꿔 주기 때문입니다.
|
||||
|
||||
### 12.2 AI에게 대상별 인터뷰 개요를 만들게 하기
|
||||
|
||||
같은 방향이라도 사람군이 다르면 인터뷰의 중점은 달라집니다. 예를 들어 학생, HR, 프리랜서는 관심사가 완전히 다릅니다. AI에게 서로 다른 대상별로 개요를 만들게 할 수 있습니다.
|
||||
|
||||
- 초보 사용자 대상: 최근 한 번의 실제 경험을 중점적으로 이해
|
||||
- 헤비 사용자 대상: 대체 방안과 고통감을 중점적으로 이해
|
||||
- 유료 사용자 대상: 이미 비용을 지불했는지 중점적으로 이해
|
||||
|
||||
이렇게 하면 실제 대화할 때 리듬이 생기고, 모든 사람에게 똑같은 질문만 던지지 않게 됩니다.
|
||||
|
||||
예를 들어 이렇게 바로 입력할 수 있습니다.
|
||||
|
||||
```text
|
||||
두 유형의 사람과 이야기하려고 해.
|
||||
1. 처음 인턴십을 찾는 대학생
|
||||
2. 이미 다른 사람의 이력서를 많이 봐 준 선배
|
||||
|
||||
각각 인터뷰 개요를 만들어 줘. 각 개요는 질문 6개로 해 줘.
|
||||
```
|
||||
|
||||
AI는 이렇게 출력할 수 있습니다.
|
||||
|
||||
```text
|
||||
대학생 대상:
|
||||
1. 최근에 인턴십에 지원한 것은 언제였나요?
|
||||
2. 그때 가장 막힌 단계는 무엇이었나요?
|
||||
3. 본인의 이력서가 지원 가능한지 어떻게 판단했나요?
|
||||
...
|
||||
|
||||
선배 대상:
|
||||
1. 최근에 다른 사람의 이력서를 봐 준 것은 언제였나요?
|
||||
2. 가장 자주 보이는 명확한 문제는 무엇인가요?
|
||||
3. 후배들이 가장 쉽게 막히는 단계는 무엇인가요?
|
||||
...
|
||||
```
|
||||
|
||||
이렇게 하면 스스로 처음부터 질문을 만들 필요가 없어 인터뷰 준비가 훨씬 쉬워집니다.
|
||||
|
||||
### 12.3 AI에게 인터뷰 기록을 정리하게 하기
|
||||
|
||||
인터뷰를 마친 뒤 가장 흔한 문제는 "정보가 없다"가 아니라 "정보가 너무 흩어져 있다"입니다. AI는 조각난 대화를 구조화된 메모로 정리하는 데 매우 적합합니다.
|
||||
|
||||
```text
|
||||
아래는 사용자 3명과의 인터뷰 기록이야.
|
||||
The Mom Test 관점으로 정리해 줘.
|
||||
1. 어떤 내용이 사실이고, 어떤 내용이 의견인가
|
||||
2. 사용자의 최근 실제 행동은 무엇인가
|
||||
3. 현재 대체 방안은 무엇인가
|
||||
4. 사용자가 이미 지불한 시간, 돈, 에너지 비용은 무엇인가
|
||||
5. 반복해서 언급된 문제는 무엇인가
|
||||
6. 듣기에는 긍정적이지만 증거가 부족한 말은 무엇인가
|
||||
```
|
||||
|
||||
이 단계는 특히 가치가 있습니다. "듣기에는 좋다"와 "판단을 뒷받침할 수 있다"를 분리해 주기 때문입니다.
|
||||
|
||||
간단한 입력은 이렇게 쓸 수 있습니다.
|
||||
|
||||
```text
|
||||
한 사용자와 이야기한 기록이야.
|
||||
|
||||
- 도구가 있으면 한번 써 볼 것 같다고 했다.
|
||||
- 지난주 이력서를 고치느라 저녁 시간을 전부 썼다.
|
||||
- 지금은 주로 친구에게 봐 달라고 한다.
|
||||
- 가장 어려운 것은 어느 정도까지 고치면 지원해도 되는지 모른다는 점이라고 했다.
|
||||
|
||||
어떤 것이 의견이고 어떤 것이 사실인지 나눠 줘.
|
||||
```
|
||||
|
||||
AI는 이렇게 출력할 수 있습니다.
|
||||
|
||||
```text
|
||||
의견:
|
||||
- 도구가 있으면 한번 써 볼 것 같다고 했다.
|
||||
|
||||
사실:
|
||||
- 지난주 이력서를 고치느라 저녁 시간을 전부 썼다.
|
||||
- 현재 대체 방안은 친구에게 봐 달라고 하는 것이다.
|
||||
- 가장 어려운 점은 언제 "지원 가능"한 상태인지 모른다는 것이다.
|
||||
|
||||
수요 판단에 쓸 수 있는 핵심:
|
||||
- 이 문제는 최근에 실제로 발생했다.
|
||||
- 사용자는 명확한 시간 비용을 이미 투입했다.
|
||||
- 현재 방안은 다른 사람에게 의존하며 안정적이지 않다.
|
||||
```
|
||||
|
||||
이 출력은 초보자에게 어떤 말이 판단에 쓸 수 있고, 어떤 말은 그냥 들어 두는 정도인지 매우 직관적으로 알려 줍니다.
|
||||
|
||||
### 12.4 AI에게 먼저 가벼운 웹 검색을 시키기
|
||||
|
||||
아직 인터뷰를 시작하지 않았다면, AI에게 아주 가벼운 외부 조사를 맡길 수 있습니다.
|
||||
|
||||
- 공개 커뮤니티에서 사람들이 최근 이 문제를 어떻게 불평하는지
|
||||
- 기존 도구에서 가장 많이 불평받는 부분은 무엇인지
|
||||
- 사용자가 유사한 문제에 이미 돈을 쓴 적이 있는지
|
||||
- 시장에 어떤 대체 방안이 이미 존재하는지
|
||||
|
||||
이 정보는 실제 사람 인터뷰를 대체할 수 없지만, 더 빨리 상태에 들어가고 문제를 어디서부터 파고들지 알게 해 줍니다.
|
||||
|
||||
간단한 입력 예시는 다음입니다.
|
||||
|
||||
```text
|
||||
조사해 줘.
|
||||
"대학생이 이력서를 고칠 때 가장 자주 불평하는 것은 무엇인가"
|
||||
가장 흔한 불평 5개를 쉬운 말로 정리해 줘.
|
||||
```
|
||||
|
||||
AI는 이렇게 출력할 수 있습니다.
|
||||
|
||||
```text
|
||||
흔한 불평:
|
||||
|
||||
1. 이력서에 정확히 무엇을 써야 할지 모른다.
|
||||
2. 직무 하나에 지원할 때마다 바꿔야 해서 너무 힘들다.
|
||||
3. 여러 번 고쳤지만 좋은지 계속 확신이 없다.
|
||||
4. 믿을 만한 피드백을 줄 사람이 없다.
|
||||
5. 아직 준비가 안 된 것 같아 계속 미루게 된다.
|
||||
```
|
||||
|
||||
이 결과의 가치는 인터뷰 진입점을 더 쉽게 찾게 해 준다는 데 있습니다.
|
||||
|
||||
### 12.5 AI에게 "인터뷰 회고 코치" 역할을 맡기기
|
||||
|
||||
방금 끝낸 인터뷰 기록을 AI에게 던져 비판하게 할 수도 있습니다.
|
||||
|
||||
```text
|
||||
아래는 내 사용자 인터뷰 기록이야.
|
||||
The Mom Test 관점으로 회고해 줘.
|
||||
1. 내 질문 중 어떤 것이 인정을 구하는 것처럼 들렸나
|
||||
2. 어떤 질문이 명확하게 유도적이었나
|
||||
3. 원래 사실을 더 캐물어야 했던 부분은 어디인가
|
||||
4. 다시 한다면 이 대화를 어떻게 더 좋게 물어볼 수 있는가
|
||||
```
|
||||
|
||||
초보자에게 특히 도움이 됩니다. "내가 증거를 모으고 있는지, 격려를 모으고 있는지"에 대한 감각을 더 빨리 만들 수 있기 때문입니다.
|
||||
|
||||
## 📚 Assignments
|
||||
|
||||
위 내용을 바탕으로 다음 과제를 완료하세요.
|
||||
|
||||
1. 최근 만들고 싶은 제품 방향 하나를 고르고, 원래 물어봤을 "망하기 쉬운" 질문 5개를 먼저 쓰세요.
|
||||
2. 이 5개 질문을 The Mom Test 스타일에 더 맞는 질문으로 고쳐 쓰세요.
|
||||
3. 잠재 사용자 3명을 찾아 최소 한 번은 "최근에 이 문제를 만난 것은 언제였나요?"라고 물어보세요.
|
||||
4. 인터뷰 후 네 가지 정보를 정리하세요: 실제 행동, 대체 방안, 이미 지불한 비용, 반복해서 나타나는 어려움.
|
||||
|
||||
## 더 읽어 보기
|
||||
|
||||
- [The Mom Test 공식 웹사이트](https://momtestbook.com/)
|
||||
- [Rob Fitzpatrick: The Mom Test](https://www.robfitz.com/the-mom-test/)
|
||||
|
||||
@@ -0,0 +1,607 @@
|
||||
---
|
||||
title: '직접 프로토타입 만들기 - 비즈니스 분석부터 다중 페이지 제품 프로토타입 구현까지'
|
||||
description: '비즈니스 분석부터 다중 페이지 제품 프로토타입 구현까지의 전체 폐쇄 루프를 경험합니다. 비즈니스에 질문하고, 요구사항을 분해하고, AI IDE로 단일 페이지 및 다중 페이지 애플리케이션을 생성하며, 프로토타입을 개선하고 테스트하는 방법을 배웁니다.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = '약 <strong>8시간</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['ko-kr/stage-1/building-prototype'] ?? []
|
||||
</script>
|
||||
|
||||
# 초급 3: 직접 프로토타입 만들기
|
||||
|
||||
## 이 장의 가이드
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['비즈니스 분석', '프로토타입 설계', 'AI 보조 프로그래밍', '다중 페이지 애플리케이션']" coreOutput="이커머스 소재 워크벤치 프로토타입 1개" expectedOutput="상호작용 가능한 Web 프로토타입">
|
||||
|
||||
지난 장에서는 <strong>좋은 아이디어를 찾는 법</strong>을 배웠습니다. 사용자 요구에서 출발해 누군가 기꺼이 비용을 지불할 방향을 찾는 법이었습니다. 하지만 방향을 찾는 것은 첫걸음일 뿐입니다. <strong>제품 관리자를 진짜로 시험하는 것은 모호한 요구를 어떻게 사용할 수 있는 제품으로 바꾸느냐입니다.</strong>
|
||||
|
||||
이번 장에서 우리는 하나의 <strong>현실 문제</strong>를 해결합니다. 사장이 “AI로 상품을 이커머스 플랫폼에 게시하는 효율을 높여 봐”라는 한마디를 던졌을 때, 이것을 어떻게 <strong>사용 가능한 제품 프로토타입</strong>으로 바꿀 수 있을까요?
|
||||
|
||||
앞에서 만든 스네이크나 계산기와 달리, <strong>실제 비즈니스에서는 기능을 허공에서 상상하면 안 됩니다</strong>.
|
||||
|
||||
1. <strong>문제점 명확히 하기</strong>: 운영 담당자와 이야기하며, 모호한 “효율 향상” 속에서 <strong>진짜 문제점</strong>을 파냅니다.
|
||||
2. <strong>중요한 것부터 만들기</strong>: 많은 문제 중에서 먼저 <strong>가장 아픈 문제</strong>를 해결합니다. 한 번에 전부 만들려고 하지 않습니다.
|
||||
3. <strong>빠르게 검증하기</strong>: AI IDE로 먼저 <strong>단일 페이지 프로토타입</strong>을 만들고, 잘 통하면 다중 페이지로 확장합니다.
|
||||
4. <strong>쓸 수 있는 것을 만들기</strong>: 마지막에는 <strong>시연할 수 있고 조작할 수 있는 이커머스 소재 워크벤치</strong>를 전달합니다.
|
||||
|
||||
우리는 <strong>장난감 만들기에서 애플리케이션 만들기로 전환하는 법</strong>을 배우고, <strong>고객의 실제 요구에 공감하고 사고하는 법</strong>을 배우게 됩니다.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
::: info ℹ️ 설명
|
||||
이 글에는 일부 비즈니스 용어가 나올 수 있습니다. 이해가 되지 않는다면 AI에게 설명을 요청해도 됩니다.
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: '요구사항 분석', description: '모호함에서 구체화로' },
|
||||
{ title: '단일 페이지 검증', description: '핵심 플레이 방식 구현' },
|
||||
{ title: '다중 페이지 확장', description: '애플리케이션 구조 보완' },
|
||||
{ title: '미화와 완성', description: '사용자 경험 향상' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 1. 코드를 쓰기 전에 요구사항 확정하기
|
||||
|
||||
앞선 튜토리얼에서는 AI IDE를 사용해 스네이크와 여러 미니게임을 쉽게 생성했습니다. 하지만 이런 것들은 장난감 프로젝트라고 할 수 있을 뿐, 실제 업무와 생활에 적용되기는 어렵습니다. AI 능력이 진짜로 사람들에게 쓰이게 하려면 생활과 업무 장면을 결합해 vibe coding을 해야 합니다.
|
||||
|
||||
지난 장에서는 <strong>누군가 기꺼이 비용을 지불할 좋은 아이디어</strong>를 찾는 법을 배웠습니다. 하지만 방향을 찾는 것은 시작일 뿐입니다. 실제로 제품을 만들다 보면 알게 됩니다. <strong>“무엇을 만들지” 아는 것과 “어떻게 만들지” 아는 것 사이에는 거대한 간극이 있습니다.</strong>
|
||||
|
||||
이 간극이 바로 <strong>요구사항의 구체화</strong>입니다.
|
||||
|
||||
예를 들어 수업이나 개인 프로젝트에서는 보통 가장 단순하게 실행 가능한 기능에서 출발해 제품과 애플리케이션을 만듭니다.
|
||||
|
||||
- “칸반을 만들어서 작업을 나열해줘.”
|
||||
- “그림 그리는 도구를 만들어줘.”
|
||||
- “설문을 수집할 수 있는 소프트웨어를 만들어줘.”
|
||||
|
||||
이것들은 대개 하나의 도구, 하나의 기능 모듈일 뿐이며, 명확한 비즈니스 문제라고 부르기도 어렵습니다. 더 중요한 것은 <strong>이런 생각들이 대부분 “내가 유용하다고 느끼는 것”이지, “사용자가 정말 필요로 하는 것”이 아니라는 점입니다.</strong>
|
||||
|
||||
기업급 프로젝트나 창업 프로젝트에서 제품 관리자와 엔지니어는 보통 더 큰 비즈니스 명제에서 출발합니다. 예를 들어 다음과 같은 상황을 가정해 볼 수 있습니다.
|
||||
|
||||
<el-card shadow="hover" style="border-left: 5px solid #409EFF; background-color: #ecf5ff; margin: 20px 0;">
|
||||
<div style="font-weight: bold; color: #303133; margin-bottom: 10px;">🛍️ 비즈니스 상황:</div>
|
||||
<div style="color: #606266; line-height: 1.6;">
|
||||
<p>당신은 한 매장의 이커머스 운영 제품 관리자입니다. 사장이 모호하지만 압박이 큰 과제를 줬습니다.</p>
|
||||
<p style="font-style: italic; margin-top: 10px;">“요즘 공식 계정들에서 AI로 이미지도 만들고 문구도 만들던데, 보기엔 꽤 쉬워 보이더라. 네가 한번 해 봐. 우리가 Douyin 이커머스에 새 상품을 올릴 때 효율이 좀 높아지게 해줘.”</p>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
이때 당신은 “사장님 또 꿈꾸시네!”라고 생각할 수 있습니다. 하지만 실제 업무에서는 이렇게 모호한 한마디로 의사결정이 내려지는 일이 매우 흔합니다. 심지어 일주일에 밀크티를 주문하는 횟수보다 많을 수도 있습니다. 따라서 괜찮은 직장인이 되기 위해서는, 더 나아가 새롭게 떠오르는 스타트업 CEO가 되기 위해서는, 자기만 쓰는 도구 만들기에서 진짜 제품 프로토타입 만들기로 전환하는 법을 반드시 배워야 합니다.
|
||||
|
||||
AI IDE를 배웠으니, 곰곰이 생각하면 이 요구사항은 사실 아주 간단해 보입니다. AI에게 이 내용을 바탕으로 프롬프트를 하나 만들어 달라고 하고, Agent에게 던지면 끝나는 것 아닐까요?
|
||||
|
||||
```
|
||||
제 요구사항 xxxx를 참고해서,
|
||||
이커머스 소재 워크벤치를 설계해 주세요.
|
||||
상품 설명, 이미지, 동영상 등 소재의 생성과 관리 기능을 포함해 주세요.
|
||||
```
|
||||
|
||||
만약 신나서 이 요구사항을 바로 프로토타입으로 바꾼 다음 사장에게 보낸다면, 축하합니다. 이번 분기 보너스는 취소될 겁니다!
|
||||
|
||||
**왜 그럴까요? 이것이 우리가 해결해야 할 핵심 문제입니다.**
|
||||
|
||||
이전에 AI IDE를 배울 때 만들었던 것은 스네이크나 계산기처럼 **자기가 쓰는 장난감 프로젝트**였습니다. 기능은 단순하고, 자신이 무엇을 원하는지 잘 알고 있으며, 만들어서 스스로 쓰면 됩니다. 하지만 **실제 비즈니스 장면은 완전히 다릅니다**.
|
||||
|
||||
- **당신은 사용자가 아닙니다**: 사장이 원하는 것은 “효율 향상”이지만, 운영 담당자가 매일 구체적으로 어떻게 일하고 어디에서 막히는지 당신은 모릅니다.
|
||||
- **AI도 비즈니스를 모릅니다**: 모호한 요구를 AI에게 던지면 AI는 일반 지식에 기반해 추측할 뿐입니다. 결과물은 그럴듯해 보이지만 실제로는 전혀 쓸 수 없을 수 있습니다.
|
||||
- **좋은 아이디어가 좋은 제품은 아닙니다**: 당신은 “AI 생성 기능을 하나 넣으면 멋지다”고 생각할 수 있지만, 사용자는 전혀 필요로 하지 않거나 오히려 기존보다 더 번거롭다고 느낄 수 있습니다.
|
||||
|
||||
**그래서 우리는 “아이디어를 떠올리는 것에서 사용자를 이해하는 것”으로 나아가는 법을 반드시 배워야 합니다.** 당신의 창의성이 진짜로 다른 사람의 문제를 해결할 때, 질문하고 비즈니스를 깊이 이해할 때, 비로소 진정한 의미에서 가치 있는 일을 만들 수 있습니다. 좋은 아이디어는 때로 좋은 기술보다 더 중요합니다.
|
||||
|
||||
### 1.1 상상에서 현실로: 비즈니스에 질문하는 법 배우기
|
||||
|
||||
::: info 💡 먼저 분명히 하기: 요구사항이란 무엇인가? 비즈니스란 무엇인가?
|
||||
|
||||
**요구사항**은 사용자가 진짜로 원하는 것입니다. 그들이 겪는 불편, 해결하고 싶은 문제입니다. 예를 들어 “사장이 상품 등록을 더 빠르게 하라고 한다”는 하나의 요구사항입니다.
|
||||
|
||||
**비즈니스**는 사용자가 매일 실제로 하는 일과 일하는 방식입니다. 예를 들어 이커머스 운영 담당자가 매일 하는 일은 상품 등록, 가격 수정, 이미지 제작, 데이터 확인 등입니다. 이것들이 모두 비즈니스입니다.
|
||||
|
||||
**왜 비즈니스에 주목해야 할까요?**
|
||||
비즈니스를 이해하지 못하면 만든 도구가 “보기에는 좋지만 아무도 쓰지 않는” 것이 될 수 있기 때문입니다. 사용자가 매일 어떻게 일하고 어디에서 막히는지 진짜로 이해해야, 실제로 도움 되는 것을 만들 수 있습니다.
|
||||
|
||||
:::
|
||||
|
||||
가장 단순한 관점에서 출발한다면, 먼저 자신에게 몇 가지 질문을 던질 수 있습니다.
|
||||
|
||||
- 사장이 말한 “**효율이 좀 높아지게**”는 구체적으로 무슨 뜻일까요? **더 빠르게** 만들고 싶은 걸까요? **비용을 덜 쓰고** 싶은 걸까요? 아니면 **더 많이 팔고** 싶은 걸까요?
|
||||
- 지금은 상품을 어떻게 등록하고 있을까요? **어디가 매끄럽지 않을까요?**
|
||||
- 매일 몇 개의 **신상품**을 처리해야 할까요? 상품마다 몇 장의 **이미지**와 몇 줄의 **문구**가 필요할까요?
|
||||
- 현재 업무에서 **어떤 일이 가장 번거롭고**, **가장 하기 싫은 일**일까요?
|
||||
|
||||
하지만 이것들은 모두 추측에 기반한 질문입니다. 우리는 일선의 Douyin 이커머스 비즈니스 담당자에게 직접 “어떤 어려움이 있고, 무엇에 신경을 쓰고 있나요?”라고 물어야 합니다. 소통을 통해 더 정확한 답을 얻을 수 있습니다.
|
||||
|
||||
::: info 📋 실제 비즈니스 인터뷰 결과
|
||||
|
||||
이커머스 운영을 하는 사람들에게 물어보니, 다음과 같은 고민을 말했습니다.
|
||||
|
||||
**1. 일이 너무 많고 너무 잡다함**
|
||||
- 한 사람이 여러 매장을 관리해야 하고, 매장마다 처리해야 할 상품이 많습니다.
|
||||
- 매일 바쁘게 돌아갑니다. **새 상품 등록**, **가격 수정**, **이미지 제작**, **데이터 확인**을 하다 보면 한 일이 끝나기도 전에 다른 일을 해야 합니다.
|
||||
|
||||
**2. 콘텐츠 제작은 한 번에 끝나는 일이 아니라, 만들면서 테스트하는 일**
|
||||
- 먼저 **제조사에서 준 이미지**, **예전에 사용했던 소재**, 또는 **인터넷에서 찾은 참고 이미지**를 사용해 상품을 빠르게 **등록**해 봅니다.
|
||||
- 적은 비용으로 광고를 조금 돌려서 **구매가 발생하는지 확인**합니다.
|
||||
- **잘 팔리는 상품**에 대해서만 이미지와 상세 설명, 영상을 진지하게 제작합니다.
|
||||
|
||||
:::
|
||||
|
||||
비즈니스 담당자에게 질문을 끝낸 뒤 우리는 열정에 차오릅니다. 이제야말로 비즈니스에 완벽히 맞는 제품 프로토타입을 만들 수 있을 것 같습니다. 하지만 또 틀렸습니다. 우리가 “모든 요구를 한 번에 만족시키려고” 하면 제품은 매우 거대해지고, 수업 시간 안에 구현하기도 어렵습니다. 따라서 더 정리하고 좁혀서 진짜 핵심 문제점을 찾아야 합니다.
|
||||
|
||||
### 1.2 발산에서 수렴으로: 비즈니스의 핵심 문제점과 기능 잠그기
|
||||
|
||||
::: info 💡 왜 “수렴”해야 할까요? “문제점”이란 무엇일까요?
|
||||
|
||||
**문제는 많은데, 무엇을 먼저 할까요?**
|
||||
|
||||
사용자는 A도 번거롭고, B도 번거롭고, C도 번거롭다고 여러 문제를 말할 수 있습니다. 하지만 모든 문제를 한 번에 해결하려고 하면 결국 아무것도 잘 만들지 못할 수 있습니다. 그래서 **수렴**해야 합니다. 많은 문제 중에서 **가장 아프고, 가장 급하고, 가장 해결 가능한** 것을 골라 먼저 시작하는 것입니다.
|
||||
|
||||
**문제점이란 무엇일까요?**
|
||||
사용자가 **가장 짜증나고, 가장 시간을 많이 쓰고, 가장 해결하고 싶어 하는** 구체적인 문제입니다. “내가 유용하다고 생각하는 것”이 아니라, 사용자가 **매일 불평하고, 할 때마다 고통스러워하는** 일입니다.
|
||||
|
||||
:::
|
||||
|
||||
위 인터뷰를 통해 운영 담당자가 겪는 문제는 많다는 것을 알게 되었습니다. 행사 때문에 업무 리듬이 끊기고, 여러 매장을 관리해야 하며, 등록 / 가격 수정 / 이미지 제작 / 데이터 확인 사이를 바쁘게 오갑니다.
|
||||
|
||||
만약 “이 문제들을 전부 해결하겠다”고 하면, 결국 **크고 다 갖췄지만 쓰기 불편한** 도구를 만들게 됩니다.
|
||||
|
||||
이 문제들을 분류해 보겠습니다. AI에게 도와달라고 해도 됩니다. 대략 세 종류가 있습니다.
|
||||
|
||||
1. **리듬 문제**: 언제 상품을 올리고 언제 가격을 조정할 것인가.
|
||||
2. **효율 문제**: 여러 매장과 여러 상품을 어떻게 동시에 잘 관리할 것인가.
|
||||
3. **콘텐츠 문제**: 상품 이미지와 문구를 어떻게 빠르게 만들 것인가.
|
||||
|
||||
우리 수업에 가장 적합하게 먼저 해결할 것은 **세 번째: 콘텐츠 제작 문제**입니다. 하지만 “콘텐츠를 빠르게 만들기”는 여전히 조금 추상적입니다. 비즈니스 담당자에게 구체적으로 어디에서 막히는지 다시 물어봅니다.
|
||||
|
||||
::: info 📋 비즈니스 담당자가 말한 콘텐츠 제작의 가장 고통스러운 두 지점
|
||||
|
||||
**고통 1: 이미지를 대량으로 만들고 문구를 쓰는 일이 너무 힘듦**
|
||||
- 소재가 여기저기 흩어져 있습니다. 클라우드 드라이브, WeChat 기록, 플랫폼 백오피스 등이라서 **찾기가 매우 힘듭니다**.
|
||||
- 한 번에 많은 상품을 올려야 해서 **하나하나 정성 들여 만들 시간이 없습니다**. 대충 조합할 수밖에 없습니다.
|
||||
- 요구 수준은 높지 않습니다. **볼 수 있고, 등록할 수 있으면 됩니다**. 아주 정교할 필요는 없습니다.
|
||||
|
||||
**고통 2: 쓸 만한 방안을 저장해 두고 재사용할 수 없음**
|
||||
- 전에 잘 만들었던 제목과 레이아웃을 **다음에 쓰고 싶어도 찾을 수 없습니다**.
|
||||
- 방안이 채팅 기록이나 예전 상품 링크에 흩어져 있습니다.
|
||||
- 쓰고 싶을 때 **한참 뒤지고, 복사해 붙여 넣고, 한참 고쳐야 합니다**.
|
||||
- **즐겨찾기, 관리, 바로 적용**을 할 수 있는 도구가 없습니다.
|
||||
|
||||
:::
|
||||
|
||||
위 두 문제점을 바탕으로 우리는 간단한 작은 도구를 만들 것입니다. **운영 담당자가 이미지와 문구를 대량으로 만들 수 있게 돕고, 쓸 만한 방안을 저장해 다음에 바로 사용할 수 있게 하는 도구**입니다.
|
||||
|
||||
이 도구는 두 가지만 합니다. AI에게 세부화를 도와달라고 할 수 있으며, 비즈니스 피드백에 따라 기능을 계속 줄이는 것을 기억하세요.
|
||||
|
||||
::: info 기능 1: 이커머스 상품 이미지와 문구 대량 생성
|
||||
|
||||
**무엇을 하는 기능인가요?**
|
||||
시스템에 상품 정보를 주면, 이커머스 플랫폼(Douyin, Taobao 등)에 등록할 때 사용할 수 있는 상품 이미지와 문구를 자동으로 생성합니다.
|
||||
|
||||
**입력**
|
||||
| 유형 | 내용 |
|
||||
|------|------|
|
||||
| 상품 정보 | 이름, 카테고리, 브랜드, 소재, 크기, 색상 등 |
|
||||
| 상품 이미지 | 흰 배경 이미지 또는 간단한 장면 이미지 |
|
||||
| 참고 이미지 | 예전에 잘 팔렸던 상품 스크린샷 또는 참고 링크 |
|
||||
| 가져오기 방식 | Excel 일괄 가져오기 또는 페이지에서 직접 입력 |
|
||||
|
||||
**출력(생성된 이커머스 소재)**
|
||||
- **상품 대표 이미지**: 문구형 판매 포인트가 들어간 제품 표시 이미지. 사용자가 스크롤하다가 처음 보는 이미지입니다.
|
||||
- **상품 제목**: 검색에서 찾힐 수 있는 키워드 조합입니다.
|
||||
- **판매 포인트 문구**: 구매자를 끌어들이는 1-2문장입니다.
|
||||
- 모두 **조금만 고치면 바로 등록할 수 있는** 완성본입니다.
|
||||
|
||||
**효과**
|
||||
- 이전: 상품마다 처음부터 이미지를 만들고 문구를 써야 했습니다.
|
||||
- 현재: 상품 묶음을 시스템에 넣고, 생성된 초안을 고르고 조금 수정하면 됩니다.
|
||||
|
||||
:::
|
||||
|
||||
::: info 기능 2: 쓸 만한 방안을 템플릿으로 저장하기
|
||||
|
||||
**입력**
|
||||
| 유형 | 내용 |
|
||||
|------|------|
|
||||
| 한 세트 전체 | 대표 이미지 + 제목 + 문구 |
|
||||
|
||||
**출력**
|
||||
| 기능 | 설명 |
|
||||
|------|------|
|
||||
| 적용 | 다음에 새 상품을 만들 때 템플릿으로 자동 생성 |
|
||||
| 수정 | 제목과 문구를 직접 수정 |
|
||||
| 관리 | 이름을 붙이고 태그를 달아(예: “남성 가방 템플릿”, “대규모 프로모션 제목”) 찾기 쉽게 함 |
|
||||
|
||||
**효과**
|
||||
1. 새 상품을 가져옵니다.
|
||||
2. 선택합니다. 시스템 기본 생성 또는 **내가 저장한 템플릿 사용**.
|
||||
3. 시스템이 템플릿 스타일을 자동으로 적용해 새로운 이미지와 문구를 출력합니다.
|
||||
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
**방금 우리가 한 일을 돌아봅시다.**
|
||||
|
||||
1. **먼저 질문하기**: 바로 만들기 시작하지 않고, 운영 담당자에게 “무엇이 가장 짜증나는가”를 먼저 물었습니다.
|
||||
2. **문제점 찾기**: 가장 고통스러운 점이 “이미지 만들고 문구 쓰기가 너무 힘듦”과 “쓸 만한 방안을 저장할 수 없음”임을 발견했습니다.
|
||||
3. **범위 수렴하기**: 크고 모든 것을 다 하는 플랫폼을 만들지 않고, “이미지와 문구 대량 생성 + 템플릿 저장” 두 기능만 만들기로 했습니다.
|
||||
|
||||
**왜 이렇게 하는 것이 중요할까요?**
|
||||
|
||||
많은 초보자가 제품을 만들 때 저지르는 오해는 기능이 많을수록 좋다고 생각하는 것입니다. 하지만 사용자가 진짜로 필요한 것은 **가장 아픈 문제를 해결하는 것**입니다. 많은 기능을 만들었지만 전부 쓰기 불편한 것보다, 한두 기능이라도 진짜로 도움 되는 것이 낫습니다.
|
||||
|
||||
**제품과 비즈니스 사고의 핵심:**
|
||||
- “내가 보기에 사용자가 무엇을 필요로 할까”를 혼자 상상하지 않습니다.
|
||||
- 사용자에게 “매일 무엇을 하나요? 어디가 가장 고통스럽나요?”라고 묻습니다.
|
||||
- 많은 문제 중에서 **가장 아프고, 가장 해결 가능한 문제**로 **수렴**합니다.
|
||||
- 먼저 **최소 사용 가능** 버전을 만든 뒤 천천히 반복 개선합니다.
|
||||
|
||||
이것이 코드를 쓰기 전에 분명히 생각해야 할 일입니다. 코드는 도구일 뿐이고, **사용자를 이해하고 문제를 정확히 찾는 것**이 첫걸음입니다.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: '요구사항 분석', description: '모호함에서 구체화로' },
|
||||
{ title: '단일 페이지 검증', description: '핵심 플레이 방식 구현' },
|
||||
{ title: '다중 페이지 확장', description: '애플리케이션 구조 보완' },
|
||||
{ title: '미화와 완성', description: '사용자 경험 향상' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 2. 10분 안에 프로토타입 만들기: AI IDE로 “핵심 플레이 방식” 구현하기
|
||||
|
||||
::: info 💡 프로그래밍 Plan 제안
|
||||
현재 IDE가 충분히 똑똑하지 않다고 느끼거나 사용량을 금방 다 쓸 것 같다면 **프로그래밍 Plan**을 구매해도 됩니다. 미리 [이 글](../../stage-2/backend/modern-cli/)을 예습하여 Claude를 사용한 프로그래밍을 참고하세요.
|
||||
:::
|
||||
|
||||
Thinking은 좋은 일이지만 over thinking은 좋지 않습니다. 과도한 반성을 여기서 멈추고, 단일 페이지부터 프로토타입을 만들어 보겠습니다.
|
||||
|
||||
### 2.1 첫 번째 단계: 쉬운 말로 AI에게 원하는 것을 말하기
|
||||
|
||||
처음부터 완벽한 프롬프트를 추구할 필요는 없습니다. 가장 자연스러운 표현에서 시작하세요. 동료에게 요구사항을 설명하듯 쉬운 말로 AI에게 무엇을 만들고 싶은지 말한 뒤, AI가 더 전문적인 표현으로 다듬도록 하면 됩니다.
|
||||
|
||||
#### 2.1.1 말로 설명하는 것부터 시작하기(초보자에게 추천)
|
||||
|
||||
먼저 자기 말로 아이디어를 설명합니다. 거칠어도 괜찮습니다.
|
||||
|
||||
```
|
||||
이커머스 운영 담당자가 상품 대표 이미지와 문구를 자동으로 생성하도록 돕는 도구를 만들고 싶습니다.
|
||||
운영 담당자는 평소 이미지를 하나하나 만들고 문구를 직접 써야 해서 매우 번거롭습니다.
|
||||
제 생각은 이렇습니다. 상품 정보를 업로드하면 시스템이 초안을 한 묶음 자동으로 생성하고,
|
||||
운영 담당자는 쓸 만한 것을 골라 조금만 수정해서 사용할 수 있습니다.
|
||||
|
||||
먼저 가장 단순한 버전부터 만들겠습니다. 한 페이지이고, 왼쪽에는 상품 정보를 입력하며,
|
||||
오른쪽에는 생성 결과를 보여 줍니다. 이미지를 업로드할 수 있고, 텍스트를 입력할 수 있으며,
|
||||
생성 후에는 대표 이미지 미리보기와 문구를 표시합니다.
|
||||
```
|
||||
|
||||
다음으로 이 문장을 AI(ChatGPT, Claude 등)에게 보내고 확장해 달라고 합니다. AI는 보통 당신이 고려하지 못한 세부 사항을 보충해 주고, 생각을 더 명확하게 정리한 뒤, AI IDE에 보내기 좋은 프롬프트를 생성해 줍니다.
|
||||
|
||||
AI에게 이렇게 말할 수 있습니다.
|
||||
|
||||
```
|
||||
위 아이디어를 확장해서 명확한 비즈니스 로직 문서로 정리해 주세요.
|
||||
그리고 AI IDE(예: Cursor, Trae)에 보내기 좋은 프롬프트를 생성해 주세요.
|
||||
단일 페이지 애플리케이션의 프로토타입 코드를 생성하는 데 사용할 것입니다.
|
||||
```
|
||||
|
||||
AI는 구조화된 요구사항과 대응되는 프롬프트를 반환할 것입니다. 직접 한 번 확인하고, 필요 없는 기능을 줄이고, 문제가 없다고 판단한 뒤 코드 생성에 사용하세요.
|
||||
|
||||
이렇게 하는 장점은 말로 설명한 내용이 가장 진짜 생각이라는 점입니다. 다만 중요한 세부 사항이 빠질 수 있습니다. AI가 확장할 때 “일괄 업로드를 지원할까요?”처럼 생각하지 못한 질문을 던지며 더 검증하게 도와줄 수 있습니다. 피드백에 따라 실제적이지 않은 기능을 보존하거나 삭제하고, 반복 수정하면서 AI에게 줄 첫 번째 프롬프트를 확정할 수 있습니다.
|
||||
|
||||
#### 2.1.2 확장 단계를 건너뛰기: 정리해 둔 비즈니스 문서를 AI에게 바로 던지기
|
||||
|
||||
앞선 장에서 이미 비즈니스 로직 문서(예: 쉬운 말로 쓴 요구사항 설명)를 정리했다면, 아래 형식을 AI IDE에 바로 적용할 수 있습니다. AI에게 확장을 시키는 중간 단계를 생략하는 방식입니다. 요구사항이 이미 명확하고 바로 코드 작성에 들어가고 싶을 때 적합합니다.
|
||||
|
||||
```
|
||||
아래 비즈니스 로직을 참고해 핵심 플레이 기능을 검증할 단일 페이지 애플리케이션을 구현해 주세요.
|
||||
|
||||
비즈니스 로직 참고:
|
||||
1. 운영 담당자가 첫 번째 이미지/문구 초안을 대량 생성하도록 돕기:
|
||||
- **입력(소재 직접 업로드와 일괄 가져오기 지원):**
|
||||
- 상품 기본 정보: 이름, 카테고리, 브랜드, 소재, 크기, 색상, 대상 사용자 등;
|
||||
- 상품 이미지: 흰 배경 이미지 / 간단한 장면 이미지;
|
||||
- 매번 생성할 때 과거 인기 상품 스크린샷이나 참고 링크를 추가로 업로드할 수 있도록 지원하고, 참고물이 있을 수 있게 함;
|
||||
- Excel 일괄 가져오기 또는 페이지에서 온라인 입력 / 업로드를 지원함.
|
||||
- 페이지에서 상품 소재를 소재 라이브러리에 저장할지 지정할 수 있게 하여 다음 사용을 편하게 함
|
||||
- **출력(바로 등록하거나 조금 고치면 등록할 수 있는 내용):**
|
||||
- 각 상품마다 “볼 만하고, 기본 판매 포인트가 들어간” 대표 이미지 초안 한 장;
|
||||
- “구조가 합리적이고, 핵심 키워드가 포함된” 제목 + 1-2문장의 판매 포인트 문구.
|
||||
- **기대하는 사용 방식 변화:**
|
||||
매번 상품 묶음마다 맨땅에서 시작하던 방식에서, 상품 묶음을 시스템에 넣고 시스템이 생성한 초안을 골라 미세 조정하는 방식으로 바뀜.
|
||||
|
||||
먼저 첫 번째 기능을 만들고, 두 번째 기능(템플릿 라이브러리)은 나중에 추가합니다.
|
||||
```
|
||||
|
||||
#### 2.1.3 프로그래머의 방식(심화): AI에게 “프롬프트의 프롬프트”를 작성하게 하기
|
||||
|
||||
코드 생성 과정을 더 세밀하게 제어하고 싶다면, 먼저 AI(ChatGPT 등)에게 요구사항을 바탕으로 AI IDE 전용 프롬프트를 생성하게 할 수 있습니다.
|
||||
|
||||
```
|
||||
아래 아이디어를 바탕으로 coding Agent에게 보낼 코드 작성용 프롬프트를 써 주세요.
|
||||
저는 이 프롬프트를 사용해 코드를 생성하려고 합니다.
|
||||
|
||||
[여기에 비즈니스 로직 설명을 붙여 넣으세요]
|
||||
|
||||
요구사항:
|
||||
1. 프롬프트에 명확한 페이지 레이아웃 설명이 포함되어야 합니다.
|
||||
2. 데이터 구조와 상호작용 로직을 명확히 해야 합니다.
|
||||
3. 기술 스택(예: React + Tailwind)을 지정해야 합니다.
|
||||
4. 구현해야 할 핵심 기능 항목을 나열해야 합니다.
|
||||
```
|
||||
|
||||
보통 AI는 아래와 비슷한 구조화된 프롬프트를 생성합니다.
|
||||
|
||||
|
||||
이 프롬프트를 조금 수정한 뒤 AI IDE에 보내 코드를 생성할 수 있습니다.
|
||||
|
||||
### 2.2 두 번째 단계: AI IDE가 직접 코드를 생성하게 하기
|
||||
|
||||
#### 2.2.1 준비 작업: AI IDE의 기본 조작 이해하기
|
||||
|
||||
AI IDE(Cursor, Trae, Windsurf 등)의 기본 사용 방식이 아직 익숙하지 않다면, 부록의 [IDE 기초 튜토리얼](/ko-kr/appendix/2-development-tools/ide-basics/)을 먼저 보고 다음을 이해하는 것이 좋습니다.
|
||||
- 새 프로젝트 만들기
|
||||
- AI Agent와 대화하기
|
||||
- AI의 코드 생성 과정 이해하기
|
||||
|
||||
#### 2.2.2 코드 생성 시작하기
|
||||
|
||||
이제 초기 프롬프트를 얻었습니다. 첫 번째 프롬프트 스타일을 예로 들어 AI가 코드를 생성하도록 해 보겠습니다. 먼저 창과 해당 폴더를 만들고, 폴더를 엽니다. 원하는 폴더 위치에서 새 프로젝트를 초기화하면 됩니다.
|
||||
|
||||
|
||||
|
||||
사이드바에서 원하는 모델을 하나 선택합니다. gemini, gpt, glm, kimi, minimax 등을 추천합니다. 그런 다음 첫 번째 단계에서 얻은 프롬프트를 입력합니다.
|
||||
|
||||
|
||||
생성을 클릭하면 익숙한 과정을 보게 됩니다. AI는 프롬프트에 따라 프로젝트의 디렉터리 구조, 필요한 파일, 각 파일의 초기 내용을 계획합니다.
|
||||
|
||||
::: warning ⚠️ 특별 주의: AI가 멈춰서 확인을 기다릴 수 있습니다
|
||||
생성 과정에서 AI Agent는 자주 **멈춰서 당신의 입력이나 확인을 기다립니다**. 예를 들어:
|
||||
- 다음 단계로 계속할지 묻습니다.
|
||||
- 어떤 작업을 확인하려고 Enter를 누르라고 합니다.
|
||||
- 어떤 기술 세부 사항을 선택할지 묻습니다.
|
||||
|
||||
**AI가 움직이지 않는 것처럼 보이면 먼저 대화 화면을 확인해, 답변을 기다리고 있는지 보세요.** 많은 초보자는 AI가 생각 중이라고 착각하지만, 사실 이미 거기서 멈춰 당신을 기다리고 있습니다. 직접 답하거나 Enter를 누르면 AI가 계속 작업합니다.
|
||||
:::
|
||||
|
||||
이때도 마찬가지로 Enter를 눌러 정보를 확인하는 것을 잊지 마세요. 그렇지 않으면 대기 상태에 빠질 수 있습니다. 일부 AI IDE는 이 문제에 빠지지 않을 수도 있습니다.
|
||||
|
||||
|
||||
아래와 같은 장면을 만났다면, 이미 로컬에서 서비스가 시작되었다는 뜻입니다. 건너뛰기를 클릭해야 합니다. 그렇지 않으면 이 화면에 머무를 수 있습니다. 코드 생성이 끝났는데 아무것도 나타나지 않으면, 직접 “이 프로젝트를 시작해 줘”라고 말해야 합니다.
|
||||
|
||||
|
||||
::: info 💡 상황 설명
|
||||
**상황 설명**: `npm create vite@latest`로 React + TypeScript 프로젝트(easy-vibe-web)를 만들었습니다. 생성이 끝나면 컴퓨터가 이 웹페이지를 자동으로 “실행”하여 즉시 결과를 볼 수 있게 합니다.
|
||||
|
||||
**로컬 서비스**: 컴퓨터가 임시로 웹페이지 표시 창을 열어 둔 것으로 이해할 수 있습니다. 자신의 컴퓨터에서만 실행되며 다른 사람은 접근할 수 없습니다.
|
||||
|
||||
**localhost(로컬 주소)**: `localhost`는 “이 컴퓨터 자신”이라는 뜻입니다. 브라우저에서 여기에 접속하는 것은 사실 내 컴퓨터에서 실행 중인 웹페이지에 접속하는 것입니다.
|
||||
|
||||
**포트**: 포트는 번호로 이해할 수 있습니다. 같은 컴퓨터에서 실행 중인 서로 다른 웹페이지 서비스를 구분하는 데 쓰이며, 이 프로젝트에서는 5174를 사용합니다.
|
||||
|
||||
**접속 링크 `http://localhost:5174/`**: 이 주소는 “내 컴퓨터에서 번호가 5174인 웹페이지에 접속한다”는 뜻입니다. 브라우저에서 열면 결과를 볼 수 있습니다.
|
||||
|
||||
**이번 상황 설명**: 시스템은 원래 5173을 사용하려 했지만 해당 번호가 이미 사용 중이어서 자동으로 5174로 바꿨습니다. 정상적인 상황입니다.
|
||||
|
||||
**조작 안내**: 브라우저 주소창에 `http://localhost:5174/`를 입력하고 Enter를 누르면 현재 프로젝트 페이지를 볼 수 있습니다.
|
||||
:::
|
||||
|
||||
모두 확인한 뒤 Agent가 잠시 실행되기를 기다리면 아래와 같은 결과를 얻을 수 있습니다.
|
||||
|
||||
|
||||
초기 기능 화면은 생겼지만 프론트엔드 페이지가 너무 못생겼다는 것을 볼 수 있습니다. 이때 AI와 직접 대화하며 인터페이스 표시를 최적화할 수 있습니다.
|
||||
|
||||
|
||||
최적화 후에는 아래와 같은 더 보기 좋은 인터페이스를 얻을 수 있습니다.
|
||||
|
||||
|
||||
자신의 필요에 따라 웹페이지 기능을 수정할 수 있습니다. 스크린샷을 첨부하고 자유롭게 질문해도 됩니다. 예를 들어 “지금은 일괄 가져오기 기능이 필요 없으니 제거해 줘”, “왼쪽 입력 항목이 너무 많으니 xxxxx만 남겨 줘”라고 할 수 있습니다. 더 나아가 다른 성숙한 웹사이트를 참고할 수도 있습니다. 예를 들어 여기서는 Google의 어떤 디자인 제품을 직접 참고해 “참고”할 수 있습니다. 마음에 드는 성숙한 웹사이트의 스크린샷을 붙여 넣어도 됩니다.
|
||||
|
||||
|
||||
마지막으로 다음과 같은 결과를 얻을 수 있습니다.
|
||||
|
||||
|
||||
### 2.3 오류가 나면 어떻게 할까?
|
||||
|
||||
실제 조작 과정에서 오류를 만나는 것은 필연적이며 정상적인 현상입니다. 이것이 당신이 뭔가 잘못했다는 뜻은 아닙니다. 오류를 이해할 필요는 없습니다. “보이는 상황”을 빠짐없이 AI에게 전달하면 됩니다.
|
||||
|
||||
일반적인 처리 방식은 세 가지뿐입니다.
|
||||
|
||||
- **방식 1: 페이지나 터미널에 오류가 표시됨**
|
||||
페이지가 빨갛게 변하거나, 흰 화면이 뜨거나, 터미널에 빨간 글자가 잔뜩 나타나면, 바로 스크린샷을 찍거나 전체 오류 정보를 복사해 AI에게 보내고 고쳐 달라고 합니다.
|
||||
|
||||
- **방식 2: 기능은 틀렸지만 오류는 없음**
|
||||
예를 들어 버튼이 반응하지 않거나, 데이터가 표시되지 않거나, 스타일이 엉켰다면, 쉬운 말로 “지금 무슨 일이 일어났는지 + 원래 무엇을 원했는지”를 설명하고 필요하면 스크린샷을 추가합니다.
|
||||
|
||||
- **방식 3: 문제가 있는지 확실하지 않음**
|
||||
AI에게 바로 물어볼 수 있습니다. “이 기능에 명백한 문제가 있는지, 조정이 필요한지 확인해 줘.”
|
||||
|
||||
#### 2.3.1 초보자가 자주 묻는 질문
|
||||
|
||||
- **Q: 오류 정보가 어디 있는지 모르겠어요.**
|
||||
- A: 일반적으로 모든 “빨간 글자”를 보면 됩니다. 터미널, 콘솔, 페이지에서 빨간 안내 문구를 찾아 전체 선택 후 AI에게 복사해 보내면 됩니다.
|
||||
|
||||
- **Q: AI가 고쳤는데도 같은 오류가 계속 나면 어떻게 하나요?**
|
||||
- A: 흔한 상황입니다. 최신 오류 정보를 계속 스크린샷으로 찍거나 복사해 보내고, 지난 수정 위에서 더 고치게 하세요.
|
||||
|
||||
- **Q: AI의 수정 방안을 완전히 이해해야 하나요?**
|
||||
- A: 한 번에 전부 이해할 필요는 없습니다. 매번 한두 가지만 집중하면 됩니다. 시간이 지나면 영어 단어를 쌓듯 점점 더 많은 코드를 이해하게 됩니다.
|
||||
|
||||
- **Q: 여러 번 고쳤는데도 문제가 해결되지 않으면 어떻게 하나요?**
|
||||
- A: 다음을 시도할 수 있습니다.
|
||||
- IDE의 “버전 되돌리기” 기능을 사용합니다. Agent 대화 위치에서 되돌리기 버튼을 찾아 실행 가능한 버전으로 돌아간 뒤 다시 시작합니다.
|
||||
- 모델을 바꾸거나 프롬프트를 조정하고, 현상과 오류 정보를 더 구체적으로 설명합니다.
|
||||
- “현재 코드 + 오류 로그 + 기대 동작”을 묶어 한 번에 AI에게 보내고, 문제 부분을 전체적으로 재구성하게 합니다.
|
||||
|
||||
## 3. 단일 페이지에서 다중 페이지 애플리케이션으로 확장하기
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: '요구사항 분석', description: '모호함에서 구체화로' },
|
||||
{ title: '단일 페이지 검증', description: '핵심 플레이 방식 구현' },
|
||||
{ title: '다중 페이지 확장', description: '애플리케이션 구조 보완' },
|
||||
{ title: '미화와 완성', description: '사용자 경험 향상' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
핵심 플레이 방식의 로직이 기본적으로 생성된 뒤에는 나머지 부분의 내용을 생성할 수 있습니다. 예를 들어 지금 설정을 클릭하거나 일부 버튼을 눌러도 전혀 작동하지 않을 수 있습니다.
|
||||
|
||||
AI에게 비즈니스 프롬프트 요구사항에 따라 검사하고 아직 생성되지 않은 부분을 만들게 할 수 있습니다. 또는 구현이 끝나지 않은 페이지를 AI에게 바로 보완하게 할 수도 있습니다. 특정 페이지를 지정해 AI에게 구현을 보완하게 해도 됩니다. 페이지가 클릭 가능하고 기능이 정상적으로 상호작용할 때까지 진행합니다.
|
||||
|
||||
|
||||
잠시 기다리면 프로그램이 이전 기반 위에 여러 페이지와 상호작용 기능을 보완한 것을 볼 수 있습니다.
|
||||
|
||||
|
||||
|
||||
|
||||
이제 관심 있는 각 기능과 버튼을 사람이 직접 클릭해 상호작용이 정상인지 확인하면 됩니다. 상호작용이 되지 않는 기능이 있다면 AI와 소통하여 고치게 합니다.
|
||||
|
||||
## 4. 프로토타입을 “그럴듯하게” 만들기
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: '요구사항 분석', description: '모호함에서 구체화로' },
|
||||
{ title: '단일 페이지 검증', description: '핵심 플레이 방식 구현' },
|
||||
{ title: '다중 페이지 확장', description: '애플리케이션 구조 보완' },
|
||||
{ title: '미화와 완성', description: '사용자 경험 향상' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
다중 페이지 구조가 생긴 뒤 마지막 단계는 프로토타입을 “실행은 됨”에서 “사용하기 편하고, 보기에도 전문적으로 보임”으로 바꾸는 것입니다. 이를 위해 전체 흐름(사용자 흐름)을 직접 한 번 경험하고, 실행되지 않는 부분은 AI에게 고치게 해야 합니다. 매번 새로고침한 뒤에도 처음부터 새 사용자를 흉내 내며 전체 흐름을 끝까지 진행하고 기대 결과를 얻을 수 있어야 합니다.
|
||||
|
||||
처음 요구사항을 다시 봅시다.
|
||||
|
||||
```
|
||||
1. 운영 담당자가 첫 번째 이미지/문구 초안을 대량 생성하도록 돕기:
|
||||
- **입력(소재 직접 업로드와 일괄 가져오기 지원):**
|
||||
- 상품 기본 정보: 이름, 카테고리, 브랜드, 소재, 크기, 색상, 대상 사용자 등;
|
||||
- 상품 이미지: 흰 배경 이미지 / 간단한 장면 이미지;
|
||||
- 매번 생성할 때 과거 인기 상품 스크린샷이나 참고 링크를 추가로 업로드할 수 있도록 지원하고, 참고물이 있을 수 있게 함;
|
||||
- Excel 일괄 가져오기 또는 페이지에서 온라인 입력 / 업로드를 지원함.
|
||||
- 페이지에서 상품 소재를 소재 라이브러리에 저장할지 지정할 수 있게 하여 다음 사용을 편하게 함
|
||||
- **출력(바로 등록하거나 조금 고치면 등록할 수 있는 내용):**
|
||||
- 각 상품마다 “볼 만하고, 기본 판매 포인트가 들어간” 대표 이미지 초안 한 장;
|
||||
- “구조가 합리적이고, 핵심 키워드가 포함된” 제목 + 1-2문장의 판매 포인트 문구.
|
||||
- **기대하는 사용 방식 변화:**
|
||||
매번 상품 묶음마다 맨땅에서 시작하던 방식에서, 상품 묶음을 시스템에 넣고 시스템이 생성한 초안을 골라 미세 조정하는 방식으로 바뀜.
|
||||
|
||||
2. 쓸 만한 출력을 재사용 가능한 템플릿 라이브러리로 축적하기:
|
||||
- **무엇을 즐겨찾기할 수 있나요?**
|
||||
- 운영 담당자가 “쓸 만하다”고 느끼는 어떤 출력도 원클릭으로 저장할 수 있습니다.
|
||||
- “대표 이미지 + 제목 + 판매 포인트”의 완전한 조합일 수 있습니다.
|
||||
- 또는 그중 일부만 저장할 수도 있습니다. 예: 어떤 제목 구조, 어떤 판매 포인트 문구.
|
||||
- **저장한 뒤 무엇을 할 수 있나요?**
|
||||
- **재사용:**
|
||||
- 이 저장 항목을 사용해 새 상품 매개변수 묶음에 적용하고, 이미지/문구 초안을 다시 생성합니다.
|
||||
- 또는 같은 상품에서 이 템플릿을 바탕으로 여러 버전을 생성해 A/B 테스트를 합니다.
|
||||
- **편집:**
|
||||
- 제목 문구 / 판매 포인트 문구를 직접 수정합니다.
|
||||
- 이미지 편집을 지원한다면 대표 이미지의 텍스트, 스티커 같은 요소를 미세 조정할 수 있습니다.
|
||||
- **관리:**
|
||||
- 저장 항목에 이름과 태그를 붙입니다. 예: “남성 가방 대표 이미지 템플릿”, “대규모 프로모션 제목 구조”. 매장별 분류를 지원하여 이후 검색이 편하게 합니다.
|
||||
- **다음 신상품 등록 때 어떻게 사용하나요?**
|
||||
- 새 상품을 가져온 뒤 운영 담당자는 선택할 수 있습니다.
|
||||
- 시스템 기본 로직으로 생성하거나,
|
||||
- “내가 저장한 특정 템플릿으로 생성”을 지정합니다.
|
||||
- 시스템은 새 상품 데이터를 바탕으로 템플릿의 구조와 스타일을 자동 적용해 새로운 대표 이미지 + 제목 + 판매 포인트 초안을 출력합니다.
|
||||
```
|
||||
|
||||
테스트할 때마다 직접 새 데이터를 만들어야 한다면 시간이 많이 듭니다. 이때 우리는 보통 “테스트 데이터”라는 방식을 사용합니다. 아래 방식으로 AI와 소통해, 인터페이스에 테스트용 빠른 데이터 진입점을 만들게 할 수 있습니다. 그러면 기능이 정상적으로 끝까지 실행되는지 쉽게 테스트할 수 있습니다.
|
||||
|
||||
```
|
||||
지금 이 사용자 사용 과정을 테스트해서 완전히 끝까지 진행되는지 확인해야 합니다. 아래 요구사항을 결합해 테스트 데이터 진입점을 만들어 주세요. 제가 클릭하면 전체 흐름이 정상인지 빠르게 테스트할 수 있어야 합니다.
|
||||
1. 운영 담당자가 첫 번째 이미지/문구 초안을 대량 생성하도록 돕기:
|
||||
- **입력(소재 직접 업로드와 일괄 가져오기 지원):**
|
||||
- 상품 기본 정보: 이름, 카테고리, 브랜드, 소재, 크기, 색상, 대상 사용자 등;
|
||||
- 상품 이미지: 흰 배경 이미지 / 간단한 장면 이미지;
|
||||
- 매번 생성할 때 과거 인기 상품 스크린샷이나 참고 링크를 추가로 업로드할 수 있도록 지원하고, 참고물이 있을 수 있게 함;
|
||||
- Excel 일괄 가져오기 또는 페이지에서 온라인 입력 / 업로드를 지원함.
|
||||
- 페이지에서 상품 소재를 소재 라이브러리에 저장할지 지정할 수 있게 하여 다음 사용을 편하게 함
|
||||
- **출력(바로 등록하거나 조금 고치면 등록할 수 있는 내용):**
|
||||
- 각 상품마다 “볼 만하고, 기본 판매 포인트가 들어간” 대표 이미지 초안 한 장;
|
||||
- “구조가 합리적이고, 핵심 키워드가 포함된” 제목 + 1-2문장의 판매 포인트 문구.
|
||||
- **기대하는 사용 방식 변화:**
|
||||
매번 상품 묶음마다 맨땅에서 시작하던 방식에서, 상품 묶음을 시스템에 넣고 시스템이 생성한 초안을 골라 미세 조정하는 방식으로 바뀜.
|
||||
```
|
||||
|
||||
결과는 쉽게 얻을 수 있습니다. 데이터 하나가 너무 적다고 느껴지면, AI에게 테스트 케이스를 여러 개 생성하게 할 수 있습니다.
|
||||
|
||||
|
||||
클릭하면 결과를 얻습니다.
|
||||
|
||||
|
||||
이때 우리가 바로 얻는 것은 결과이지, “가상의 생성 과정”이 있는 것은 아닙니다. 실제 생성 과정을 모방하고 싶다면 AI와 직접 대화할 수 있습니다. “실제 생성 과정을 시뮬레이션해 주세요. 클릭한 뒤 일정 시간이 지난 후에 결과를 보여 주세요.”
|
||||
|
||||
|
||||
생성 기능을 끝까지 통과한 뒤에는 템플릿 라이브러리 기능이 정상인지 확인해야 합니다. 페이지의 생성 카드에서 알 수 있듯 템플릿 라이브러리 저장 기능은 구현되지 않았습니다. 이때 AI와 더 깊게 대화해야 합니다. “요구사항 [여기에 위 2번 내용을 붙여 넣기] 이 정상 동작하도록 확인해 주세요. 결과 하나를 클릭해 해당 템플릿을 저장할 수 있고, 열어 보면 생성 매개변수를 볼 수 있어야 합니다.”
|
||||
|
||||
생성은 보통 한 번에 끝나지 않으며, 자주 스크린샷으로 수정해야 합니다.
|
||||
|
||||
|
||||
마지막으로 기대한 결과를 얻습니다.
|
||||
|
||||
|
||||
요구 흐름을 직접 경험하는 것 외에도, AI에게 바로 요구사항 검사를 시킬 수 있습니다. 예를 들면 다음과 같습니다.
|
||||
|
||||
- “처음 요구사항과 대조해 현재 애플리케이션이 모든 핵심 기능을 이미 포함했는지 확인해 주세요.”
|
||||
- “기능 목록을 만들어 어떤 것은 완료되었고, 어떤 것은 아직 구현되지 않았거나 경험이 부족한지 표시해 주세요.”
|
||||
|
||||
AI는 보통 checklist를 출력합니다. 그 결과를 바탕으로 계속 개선할지 생각할 수 있습니다. 반복 수정 후에는 비교적 완성도 높은 프로토타입 결과를 얻을 수 있습니다.
|
||||
|
||||
## 5. 📚 과제: 나만의 Douyin 이커머스 워크벤치 복제하기
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">🚀 도전 과제: 이커머스 소재 워크벤치 복제하기</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
이번 수업의 프롬프트와 내용을 참고해 한 번의 완전한 폐쇄 루프를 완성하세요.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>완전한 폐쇄 루프 실습</strong>
|
||||
<ul>
|
||||
<li>비즈니스 정리 프롬프트 생성 → 단일 페이지 프로토타입 생성 → 다중 페이지 프로토타입 생성</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>결과 공유</strong>
|
||||
<ul>
|
||||
<li>프로그램을 스크린샷으로 찍어 모두에게 공유하세요.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>생각해 볼 질문</strong>
|
||||
<ul>
|
||||
<li>다음 절 “대형 언어 모델(LLM)과 텍스트-이미지 생성 능력 연결”을 위한 공간을 남겨 두고 미리 생각해 보세요. 당신의 워크벤치 안에 “AI 문구 작성 / 이미지 생성 / 스크립트 생성” 같은 능력을 어떻게 넣을 수 있을까요?</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## 다음 단계
|
||||
|
||||
다음 절에서는 이 콘텐츠 생산 워크벤치를 바탕으로 구체적인 AI 능력(텍스트-텍스트, 이미지-텍스트, 텍스트-이미지)을 연결합니다. 예를 들면 다음과 같습니다.
|
||||
|
||||
- 특정 콘텐츠 작업에 대해 문구 초안과 여러 제목 후보를 자동 생성하기
|
||||
- 작업 설명에 따라 이미지 초안 자동 생성하기(텍스트-이미지)
|
||||
- 과거 콘텐츠 작업을 자동 분류하고 요약하여 다음 이벤트의 주제 계획을 돕기
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="계속 학습하기"
|
||||
description="“AI 능력 연결 → 전체 프로젝트 폐쇄 루프 → 디자인 엔지니어링” 순서로 이어서 학습하는 것을 추천합니다."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
@@ -0,0 +1,302 @@
|
||||
---
|
||||
title: '완성 프로젝트 실전 - Demo에서 제품급 프로토타입까지'
|
||||
description: 'Demo 단계를 벗어나 제품 흐름을 완성하고, 실감 나는 Mock Data를 구성하며, 피드백을 통해 빠르게 반복 개선해 최종적으로 보여 줄 수 있고 상호작용 가능한 완성형 AI 제품 프로토타입을 만드는 법을 배웁니다.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = '약 <strong>3일</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['ko-kr/stage-1/complete-project-practice'] ?? []
|
||||
</script>
|
||||
|
||||
# 초급 5: 완성 프로젝트 실전
|
||||
|
||||
## 본 장 안내
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['제품 사고', 'Mock Data', '상호작용 완성', 'LocalStorage']" coreOutput="기능이 완비된 AI 제품 프로토타입 1개" expectedOutput="완전한 흐름과 실제 같은 데이터를 포함한 Web 애플리케이션">
|
||||
|
||||
지난 장에서는 AI 기능을 연결했고, Demo가 실행되기 시작했습니다. 하지만 진짜 "제품"과는 아직 <strong>거리가 멉니다</strong>. 페이지를 새로고침하면 <strong>데이터가 사라지고</strong>, 오류가 나면 <strong>흰 화면</strong>이 되며, 목록에는 "테스트 데이터 1, 테스트 데이터 2"만 있고, 사용자가 잘못 클릭해도 <strong>되돌릴 방법이 없습니다</strong>...
|
||||
|
||||
이번 장에서는 이런 <strong>구멍을 모두 메웁니다</strong>. 우리는 <strong>제품의 완전한 흐름을 보완하고</strong>, AI로 <strong>실감 나는 비즈니스 데이터</strong>를 만들어 가짜 데이터를 대체하며, <strong>오류 처리와 사용자 피드백</strong>을 추가하고, 마지막에는 <strong>남에게 보여 줄 수 있을 만큼 그럴듯한</strong> 완성형 프로토타입으로 다듬습니다.
|
||||
|
||||
이 장은 초급 단계의 <strong>마지막 장</strong>입니다. 이 단계를 마치면 "프로그래밍을 전혀 못함"에서 "<strong>AI 제품 프로토타입을 독립적으로 만들 수 있음</strong>"으로 바뀌는 전환을 완료하게 됩니다.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: '흐름 완성', description: '단일 기능에서 완전한 폐쇄 루프로' },
|
||||
{ title: '영혼 주입', description: '실제 비즈니스 데이터 시뮬레이션' },
|
||||
{ title: '피드백 반복', description: '실제 피드백 기반 경험 보완' },
|
||||
{ title: '최종 과제', description: '당신의 졸업 작품' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 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 파일** | 가장 단순한 방안, 텍스트 내용을 빠르게 기록 | 형식이 자유롭고 호환성이 좋음 |
|
||||
|
||||
**대화 내용 예시:**
|
||||
저장되는 대화 기록은 보통 다음 내용을 포함합니다.
|
||||
|
||||
```json
|
||||
[
|
||||
{
|
||||
"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를 사용하도록 지원해 주세요. 페이지에 들어올 때마다 기존 대화 기록을 자동으로 불러오고, 단일 대화 기록을 조회하고 삭제할 수 있게 해 주세요."
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: '흐름 완성', description: '단일 기능에서 완전한 폐쇄 루프로' },
|
||||
{ title: '영혼 주입', description: '실제 비즈니스 데이터 시뮬레이션' },
|
||||
{ title: '피드백 반복', description: '실제 피드백 기반 경험 보완' },
|
||||
{ title: '최종 과제', description: '당신의 졸업 작품' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 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로 생성하게 해도 돼.)
|
||||
>
|
||||
> **비즈니스 장면 요구사항**:
|
||||
>
|
||||
> 1. 종합 잡화점이라고 가정하고, 상품은 '여성복', '디지털', '뷰티' 세 카테고리를 포함해.
|
||||
> 2. **생성된 제목과 문구는 매우 'Douyin 스타일'이어야 해**: 예를 들어 제목에는 Emoji(🔥, ✨)를 포함하고, 문구는 '대박', '직접 써 보니 좋음' 같은 말투를 사용해.
|
||||
> 3. **이미지 필드**: 모두 `https://picsum.photos/seed/{random_id}/300/400` 형식을 사용해서 각 이미지가 서로 다르게 보이도록 해."
|
||||
|
||||
**생성된 Mock Data 예시:**
|
||||
|
||||
```javascript
|
||||
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`를 결합할 수 있습니다.
|
||||
|
||||
> **프롬프트 예시:**
|
||||
> "데이터 저장 기능을 구현해 줘.
|
||||
>
|
||||
> 1. 우선 `localStorage`에서 데이터를 읽어 와.
|
||||
> 2. `localStorage`가 비어 있으면 방금 생성한 Mock Data로 초기화하고, 그것들을 `localStorage`에 저장해.
|
||||
> 3. 동시에 `addProductTask`와 `deleteProductTask` 함수를 작성해 줘. 매번 작업할 때마다 `localStorage`도 동기화해야 해."
|
||||
|
||||
이 단계를 거치면 프로토타입은 "기억"을 가지게 되고, 사용자 경험은 거의 진짜 제품과 다르지 않게 됩니다.
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: '흐름 완성', description: '단일 기능에서 완전한 폐쇄 루프로' },
|
||||
{ title: '영혼 주입', description: '실제 비즈니스 데이터 시뮬레이션' },
|
||||
{ title: '피드백 반복', description: '실제 피드백 기반 경험 보완' },
|
||||
{ title: '최종 과제', description: '당신의 졸업 작품' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 3. 피드백 수집과 빠른 반복 개선
|
||||
|
||||
문을 닫고 혼자 만들면 좋은 제품은 나오지 않습니다. 이제 당신의 프로토타입은 "핵심 기능" + "완전한 흐름" + "시연 데이터"를 갖췄습니다. 다른 사람에게 보여 줄 때가 되었습니다.
|
||||
|
||||
### 3.1 누구에게 테스트하게 할까? 어떻게 테스트할까?
|
||||
|
||||
- **친구/동료 찾기**: 기술을 알 필요는 없습니다. 그냥 직접 사용해 보게 하면 됩니다.
|
||||
- **유도하지 말고 관찰하기**: "여기를 클릭하세요"라고 말하지 말고, 그들이 어디를 클릭하는지 봅니다. 버튼을 찾지 못한다면 설계에 문제가 있다는 뜻입니다.
|
||||
- **"Wizard of Oz"(오즈의 마법사 방법)**: AI가 아직 제대로 연결되지 않았다면, 백그라운드나 데이터베이스에서 사람이 직접 데이터를 수정해 AI 반환을 흉내 내고, 먼저 사용자가 이 기능을 필요로 하는지 검증할 수 있습니다.
|
||||
|
||||
### 3.2 Bug와 불평을 마주하기
|
||||
|
||||
- **스타일 깨짐**: 화면 크기가 다르면 레이아웃이 깨질 수 있습니다.
|
||||
- **Action**: 스크린샷을 AI IDE에게 보내기 -> "이 화면 너비에서 깨졌어. 고쳐 줘."
|
||||
- **조작이 불편함**: "이 흐름이 너무 번거로워요."
|
||||
- **Action**: 제안을 AI IDE에게 말하기 -> "사용자가 먼저 업로드하고 다시 생성하는 흐름이 너무 느리다고 해. 한 번에 생성하도록 바꿀 수 있을까?"
|
||||
- **새 요구사항**: "이 기능이 있으면 좋겠어요."
|
||||
- **Action**: 핵심인지 평가합니다. 핵심이라면 AI에게 빠르게 간소화 버전을 구현하게 합니다.
|
||||
|
||||
**기억하세요. 이 단계에서 AI는 최고의 수정 조수입니다. 당신은 문제를 발견하기만 하면 되고, 코드 수정은 AI에게 맡기면 됩니다.**
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="3" :items="[
|
||||
{ title: '흐름 완성', description: '단일 기능에서 완전한 폐쇄 루프로' },
|
||||
{ title: '영혼 주입', description: '실제 비즈니스 데이터 시뮬레이션' },
|
||||
{ title: '피드백 반복', description: '실제 피드백 기반 경험 보완' },
|
||||
{ title: '최종 과제', description: '당신의 졸업 작품' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
## 4. 🎓 단계 대과제: 당신의 "졸업 작품" 완성하기
|
||||
|
||||
축하합니다! 당신은 이미 "요구사항"에서 "프로토타입", 그리고 "AI 통합"까지 전 과정을 걸어왔습니다. 이제 최종 결과물을 보여 줄 시간입니다.
|
||||
|
||||
**이번 대과제는 더 이상 "이커머스 소재 워크벤치"에만 제한되지 않습니다**. 자신의 관심사나 산업 배경을 결합해 세상에 하나뿐인 AI 제품 프로토타입을 만들어야 합니다.
|
||||
|
||||
### 주제 선정과 요구사항
|
||||
|
||||
**[산업 다분류 시나리오 방향 참고](../appendix-industry-scenarios/index.md)** 중 가장 가까운 장면을 하나 선택하거나, 자신의 생각에 따라 완전히 새로운 장면을 구상해야 합니다.
|
||||
|
||||
**프로젝트는 앞의 몇 장에서 배운 모든 내용을 종합적으로 활용해야 합니다.**
|
||||
|
||||
1. **프로토타입 구축**: 프론트엔드 기술을 사용해 아름답고 사용하기 쉬운 인터페이스를 만듭니다.
|
||||
2. **요구사항 제어**: 크고 완전한 것을 추구하지 말고, 핵심 기능의 논리적 폐쇄 루프를 추구합니다.
|
||||
3. **API 접목**: 실제 AI 모델(LLM/VLM 등)을 연결해 애플리케이션에 진짜 지능을 부여합니다.
|
||||
4. **가지고 놀 수 있는 애플리케이션 구현**: 단순한 정적 페이지가 아니라 데이터 흐름과 상호작용 피드백이 있는 동적 애플리케이션이어야 합니다.
|
||||
|
||||
### 과제 산출물
|
||||
|
||||
최종적으로 다음 두 가지를 제출해야 합니다.
|
||||
|
||||
1. **완성된 프로토타입 애플리케이션**: 온라인 배포 또는 로컬 실행이 가능하고, 완전한 사용 흐름을 갖춰야 합니다.
|
||||
2. **30초 시연 영상**: 애플리케이션의 사용 장면을 간단히 소개하고 핵심 기능의 실제 조작을 보여 주는 영상을 녹화합니다.
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">🚀 최종 도전 체크리스트</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
이것은 Stage 1의 마지막 전투입니다. 아래 체크리스트에 따라 작품을 확인하세요.
|
||||
</p>
|
||||
|
||||
<div style="font-weight: bold; margin-bottom: 10px;">핵심 기능 자가 점검</div>
|
||||
<ul style="list-style-type: none; padding-left: 0;">
|
||||
<li><label><input type="checkbox" disabled /> <strong>장면 명확성</strong>: 구체적인 산업 또는 애플리케이션 장면을 선택했다</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>논리 폐쇄 루프</strong>: 핵심 흐름이 실행되며, Happy Path만 있는 것이 아니다</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>AI 구동</strong>: 사전 설정 응답이 아니라 실제 대형 모델 API를 호출했다</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>완전한 경험</strong>: Loading, 오류 처리, Mock Data를 포함한다</label></li>
|
||||
</ul>
|
||||
|
||||
<div style="font-weight: bold; margin: 20px 0 10px;">제출물 준비</div>
|
||||
<ul style="list-style-type: none; padding-left: 0;">
|
||||
<li><label><input type="checkbox" disabled /> <strong>프로토타입 애플리케이션</strong>: 코드가 완성되었고 실행 가능하다</label></li>
|
||||
<li><label><input type="checkbox" disabled /> <strong>시연 영상</strong>: 약 30초, 핵심 하이라이트를 명확히 보여 준다</label></li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## 다음 단계
|
||||
|
||||
대과제를 완료했다면, 당신은 이미 "AI 애플리케이션 프로토타입을 독립적으로 개발하는" 능력을 갖춘 것입니다.
|
||||
다음 Stage 2에서는 더 복잡한 풀스택 개발을 깊이 다루며, 이 프로토타입을 실제로 배포 가능하고, 데이터베이스와 사용자 시스템을 갖춘 상업 수준의 애플리케이션으로 바꾸는 법을 배웁니다.
|
||||
|
||||
다음 단계에서 만나요!
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="계속 고급 단계로"
|
||||
description="Stage 1 완료를 축하합니다. 아래 장들은 엔지니어링 개발로 들어가는 데 도움을 줍니다."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,42 @@
|
||||
---
|
||||
title: 'Stage 1 - 아이디어에서 AI 제품 프로토타입까지'
|
||||
description: 'AI IDE를 활용해 아이디어를 정리하고, 제품 프로토타입을 만들고, AI 기능을 붙여 완성도 있는 데모로 다듬는 한국어 Stage 1 학습 경로입니다.'
|
||||
---
|
||||
|
||||
# Stage 1: 아이디어에서 AI 제품 프로토타입까지
|
||||
|
||||
Stage 1은 코드를 깊게 알기 전에 먼저 **말로 제품을 설계하고 AI IDE와 함께 동작하는 프로토타입을 만드는 단계**입니다.
|
||||
|
||||
처음부터 완벽한 서비스를 만들려고 하지 않습니다. 대신 다음 흐름을 따라갑니다.
|
||||
|
||||
1. AI 코딩이 어떤 감각인지 체험한다.
|
||||
2. AI IDE를 설치하고 기본 작업 흐름을 익힌다.
|
||||
3. 만들 아이디어를 고르고 요구사항을 좁힌다.
|
||||
4. 단일 페이지 프로토타입을 만든 뒤 여러 화면으로 확장한다.
|
||||
5. 텍스트, 이미지, 음성 같은 AI 기능을 붙인다.
|
||||
6. 실제 사용자에게 보여줄 수 있는 데모로 다듬는다.
|
||||
|
||||
## 추천 순서
|
||||
|
||||
<NavGrid>
|
||||
<NavCard title="학습 지도" href="/ko-kr/stage-1/learning-map/" />
|
||||
<NavCard title="말할 수 있으면 코딩할 수 있다" href="/ko-kr/stage-1/ai-capabilities-through-games/" />
|
||||
<NavCard title="AI IDE 도구 익히기" href="/ko-kr/stage-1/introduction-to-ai-ide/" />
|
||||
<NavCard title="좋은 아이디어 찾기" href="/ko-kr/stage-1/finding-great-idea/" />
|
||||
<NavCard title="프로토타입 만들기" href="/ko-kr/stage-1/building-prototype/" />
|
||||
<NavCard title="AI 기능 통합하기" href="/ko-kr/stage-1/integrating-ai-capabilities/" />
|
||||
<NavCard title="완성 프로젝트 실습" href="/ko-kr/stage-1/complete-project-practice/" />
|
||||
</NavGrid>
|
||||
|
||||
## 부록
|
||||
|
||||
Stage 1을 진행하다가 제품 기획, 사용자 검증, 오류 처리에서 막히면 부록을 함께 보세요.
|
||||
|
||||
<NavGrid>
|
||||
<NavCard title="제품 사고와 솔루션 설계" href="/ko-kr/stage-1/appendix-a-product-thinking/" />
|
||||
<NavCard title="아이디어 출처 찾기" href="/ko-kr/stage-1/appendix-idea-sources/" />
|
||||
<NavCard title="Double Diamond" href="/ko-kr/stage-1/appendix-double-diamond/" />
|
||||
<NavCard title="Jobs to Be Done" href="/ko-kr/stage-1/appendix-jobs-to-be-done/" />
|
||||
<NavCard title="The Mom Test" href="/ko-kr/stage-1/appendix-mom-test/" />
|
||||
<NavCard title="오류가 났을 때 대처법" href="/ko-kr/stage-1/appendix-b-common-errors/" />
|
||||
</NavGrid>
|
||||
@@ -0,0 +1,808 @@
|
||||
---
|
||||
title: '프로토타입에 AI 능력 추가하기 - 텍스트와 이미지 API 연결'
|
||||
description: '기존 Web 프로토타입에 실제 AI 능력을 연결합니다. API의 핵심 개념을 이해하고, API Key와 공식 예시를 찾는 법을 배우며, DeepSeek 텍스트 모델과 여러 이미지 생성 서비스(SiliconFlow Qwen-Image, Recraft, Seedream)를 실습으로 통합하고, 자주 쓰는 모델 선택 방법을 익힙니다.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const duration = '약 <strong>1일</strong>'
|
||||
const relatedArticles =
|
||||
relatedArticlesMap['ko-kr/stage-1/integrating-ai-capabilities'] ?? []
|
||||
</script>
|
||||
|
||||
# 초급 4: 프로토타입에 AI 능력 주입하기
|
||||
|
||||
## 장 가이드
|
||||
|
||||
<ChapterIntroduction :duration="duration" :tags="['API', '텍스트 모델', '텍스트-이미지', '프로토타입 통합']" coreOutput="프로토타입에 텍스트 모델 1개 + 이미지 모델 1개(선택) 연결" expectedOutput="실제 API를 호출할 수 있는 AI 프로토타입">
|
||||
|
||||
앞선 장에서 우리는 <strong>좋은 아이디어 찾기</strong>부터 <strong>제품 프로토타입 만들기</strong>까지의 전체 흐름을 완성했습니다. 하지만 지금의 프로토타입은 아직 “껍데기”에 가깝습니다. 버튼을 클릭해도 실제로 콘텐츠가 생성되지 않고, 페이지의 데이터도 모두 고정되어 있습니다.
|
||||
|
||||
첫 장에서 강조했던 것을 기억하나요? <strong>우리가 만들려는 것은 “누군가 기꺼이 비용을 지불할 제품”이지, “그럴듯해 보이는 프로토타입”이 아닙니다.</strong> 진짜 가치는 제품이 <strong>실제 문제를 해결</strong>할 수 있는 데서 나오며, 그러려면 프로토타입이 <strong>진짜로 실행</strong>될 수 있어야 합니다.
|
||||
|
||||
이번 장에서는 프로토타입을 <strong>“살아 움직이게”</strong> 만듭니다. <strong>실제 AI 능력</strong>을 연결합니다. API Key를 받는 것부터 시작해 공식 문서를 읽고, AI IDE가 인터페이스를 코드에 통합하도록 돕게 합니다. <strong>DeepSeek 텍스트 모델</strong>을 예로 들어, 애플리케이션이 <strong>실제로 대형 모델을 호출해 콘텐츠를 생성</strong>하게 하는 방법을 배웁니다. 관심이 있다면 <strong>이미지 생성 연결도 선택 실습</strong>으로 할 수 있습니다.
|
||||
|
||||
이 장을 마치면 당신의 프로토타입은 <strong>더 이상 정적인 데모가 아니라</strong>, <strong>실제 AI 능력을 호출하고 실제 문제를 해결할 수 있는 애플리케이션</strong>이 됩니다.
|
||||
|
||||
</ChapterIntroduction>
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="0" :items="[
|
||||
{ title: 'API 기초', description: '핵심 개념과 보안 규범 이해' },
|
||||
{ title: '텍스트 연결', description: 'DeepSeek 텍스트 생성 실습' },
|
||||
{ title: '이미지 연결', description: 'VLM 이미지 이해와 생성' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 1. API 기초 개념
|
||||
|
||||
앞에서 말했듯 우리의 목표는 “AI 능력을 연결”하여 프로토타입이 더 이상 정적인 데모가 아니라 실제 AI 서비스를 호출할 수 있는 도구가 되게 하는 것입니다. 이를 실현하는 핵심은 API(애플리케이션 프로그래밍 인터페이스)를 이해하고 사용하는 데 있습니다.
|
||||
|
||||
API는 컴퓨터 분야의 중요한 추상 개념입니다. 간단히 이해하면, **상대가 요구한 형식에 맞춰 “질문을 보내면”, 상대도 같은 형식에 따라 “결과를 돌려주는” 것**입니다.
|
||||
|
||||
- **당신이 보내는 내용**: 보통 “비밀키(API Key)”와 “무엇을 생성할지”를 포함합니다.
|
||||
- **상대가 돌려주는 내용**: 성공하면 결과를 주고, 실패하면 이유를 알려 줍니다. 예: “키가 틀림”, “잔액 부족”, “파라미터 오류”.
|
||||
|
||||
구체적으로는 다음 핵심 요소를 익혀야 합니다.
|
||||
|
||||
1. **API Key**: 당신의 “통행증”이자 “지갑 열쇠”입니다. 다른 사람이 이것을 얻으면 당신 대신 인터페이스를 호출하고 비용을 발생시킬 수 있습니다.
|
||||
2. **Endpoint(인터페이스 경로)**: API 요청의 구체적인 경로입니다. 서버에 어떤 기능에 접근할지 알려 줍니다. 완전한 요청 주소는 보통 “기본 URL + Endpoint 경로”로 구성됩니다. 예:
|
||||
- 텍스트 생성: 기본 URL (`https://api.service.com`) + Endpoint (`/v1/chat/completions`) = 전체 URL `https://api.service.com/v1/chat/completions`
|
||||
- 이미지 생성: 기본 URL (`https://api.service.com`) + Endpoint (`/v1/images/generations`) = 전체 URL `https://api.service.com/v1/images/generations`
|
||||
3. **호출/요청**: AI 서비스에 작업을 보내고 결과를 받는 과정입니다.
|
||||
4. **요청 내용**: AI에게 보내는 구체적인 내용입니다. 예를 들어 AI가 써야 할 글의 주제, 생성할 이미지 설명 등입니다.
|
||||
5. **응답 결과**: AI가 처리한 뒤 돌려주는 내용입니다. 예를 들어 생성된 글, 이미지 등입니다.
|
||||
6. **오류 처리**: 문제가 생겼을 때(API Key 오류, 요청 빈도 초과 등) 원인을 찾아 해결하는 방법을 아는 것입니다.
|
||||
|
||||
::: info ℹ️ API란 무엇인가
|
||||
API에 대한 더 깊은 설명은 부록 [API 입문](/ko-kr/appendix/4-server-and-backend/api-intro)을 참고하세요.
|
||||
|
||||
::: warning 🔐 **API 보안 주의사항**
|
||||
API Key는 AI 서비스 요청을 위한 “통행증”입니다. 신원 확인과 과금에 쓰이는 비밀번호 문자열입니다.
|
||||
|
||||
API Key는 계정과 비용에 직접 연결되므로 반드시 주의해야 합니다.
|
||||
|
||||
- 절대 **단체 채팅방에 공유하거나, 스크린샷을 인터넷에 올리거나**, 공개 포럼에 게시하지 마세요.
|
||||
- **코드에 하드코딩한 뒤** Git 저장소에 제출하지 마세요. 특히 공개 저장소는 더 위험합니다.
|
||||
- Key가 유출되었다고 의심되면 **즉시 새 Key로 교체**하세요.
|
||||
|
||||
아래 내용에서는 연습을 위해 **API KEY를 AI IDE에 직접 붙여 넣어 조작**합니다. **정식 프로젝트에서는 이렇게 하면 안 됩니다!!** 우리는 연습이기 때문에 이렇게 할 수 있습니다. 더 익숙해지면 AI에게 설정 파일을 생성하게 하고, API KEY는 설정 파일에만 넣으면 됩니다.
|
||||
:::
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="1" :items="[
|
||||
{ title: 'API 기초', description: '핵심 개념과 보안 규범 이해' },
|
||||
{ title: '텍스트 연결', description: 'DeepSeek 텍스트 생성 실습' },
|
||||
{ title: '이미지 연결', description: 'VLM 이미지 이해와 생성' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 2. 텍스트 생성 API 연결하기: DeepSeek
|
||||
|
||||
API에는 이런 기술 개념이 얽혀 있지만, 프로토타입 개발 단계에서 실제 조작은 아주 단순하고 효율적일 수 있습니다. 핵심 생각은 다음입니다.
|
||||
|
||||
> **공식 예시를 찾고, API Key를 얻고, AI IDE에게 버튼에 연결하게 한다.**
|
||||
|
||||
이 개념을 익히면 텍스트 모델을 연결하든 이미지 모델을 연결하든 본질적인 흐름은 같다는 것을 알게 됩니다. 사용자가 버튼을 클릭하면 프론트엔드가 입력을 정리해 요청을 보내고, 인터페이스가 결과를 반환하면 그 결과를 다시 페이지에 표시합니다. 이제 실제 조작으로 이것을 확인해 보겠습니다.
|
||||
|
||||
`1.2 직접 프로토타입 만들기`에서 이미 상호작용 가능한 프로토타입을 만들었습니다. 이제 해야 할 일은 프로토타입 안의 “AI처럼 보이는 기능”을 진짜 사용할 수 있는 능력으로 바꾸는 것입니다. **사용자가 버튼을 클릭하면 프로토타입이 외부 AI 서비스에 요청을 보내고, 반환된 텍스트를 화면에 표시**하게 만듭니다.
|
||||
|
||||
::: info ℹ️ 원리 확장
|
||||
원리 관련 내용을 더 알고 싶다면 부록 [대형 언어 모델(LLM) 입문](/ko-kr/appendix/8-artificial-intelligence/llm-principles)을 확인하세요.
|
||||
::: details 더 알아보기: DeepSeek이란 무엇인가?
|
||||
|
||||
**항저우 DeepSeek 인공지능 기초기술 연구유한회사**(Hangzhou DeepSeek Artificial Intelligence Basic Technology Research Co., Ltd.)는 DeepSeek이라는 상호로 운영되는 **대형 언어 모델(LLMs)을 개발하는 중국 인공지능(AI) 회사**입니다. DeepSeek은 저장성 항저우에 본사를 두고 있으며, 중국 헤지펀드 환팡퀀트(High-Flyer)가 소유하고 자금을 지원합니다. DeepSeek은 환팡퀀트 공동 창업자인 Liang Wenfeng이 2023년 7월 설립했으며, 그는 두 회사의 CEO도 겸하고 있습니다. 이 회사는 2025년 1월 동명의 챗봇과 DeepSeek-R1 모델을 출시했습니다.
|
||||
|
||||
DeepSeek이 GPQA 벤치마크 순위에서 다른 최상위 모델과 어떻게 비교되는지 보겠습니다. 주목할 점은 DeepSeek은 오픈소스(누구나 인터넷에서 모델을 다운로드 가능) 모델이고, Grok, Google Gemini, ChatGPT 같은 일반적인 다른 모델은 폐쇄형이라는 점입니다. 볼 수 있듯 DeepSeek은 이미 상당 부분 1군 모델에 가까워졌습니다.
|
||||
|
||||
|
||||
|
||||
GPQA는 “Graduate-Level Google-Proof Q&A Benchmark”의 약자로, 과학 질의응답 작업을 위한 대학원 수준의 벤치마크입니다. 자세한 소개는 다음과 같습니다.
|
||||
|
||||
GPQA는 448개의 객관식 문제를 포함하며, 생물학, 물리학, 화학의 하위 분야를 다룹니다. 예: 양자역학, 유기화학, 분자생물학 등. 이 문제들은 박사 학위를 보유했거나 박사 과정 중인 61명의 전문가가 작성했고, 엄격한 검증 과정을 거쳤습니다.
|
||||
:::
|
||||
|
||||
이 3단계를 따르면 대형 모델 생성 API를 빠르게 통합할 수 있습니다.
|
||||
|
||||
1. **DeepSeek 플랫폼에서 API Key 만들기**
|
||||
2. **DeepSeek 문서에서 텍스트 생성 예시 찾기**. 보통 바로 복사할 수 있는 코드가 있습니다.
|
||||
3. **AI IDE를 열고 API Key + 공식 예시를 붙여 넣은 뒤**, 구현할 기능을 알려 줍니다.
|
||||
> 이 대형 모델 API를 연결해서 이 애플리케이션의 문구 생성 작업을 지원해 줘.
|
||||
|
||||
이제 시연을 진행합니다. 전체 흐름을 따라 직접 한 번 조작해 보세요. 먼저 [DeepSeek](https://platform.deepseek.com/usage) 계정을 등록하고 API Key를 만든 뒤, 검증을 위해 소액을 충전합니다.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
“API KEYS”를 클릭하고 화면 아래에서 “create new API key”를 찾습니다. 최종적으로 `sk-8573341c39fc44315aadc071c53rh7d2` 같은 API key를 얻게 됩니다.
|
||||
|
||||
|
||||
|
||||
키를 얻으면 모델을 호출할 권한을 가진 것입니다.
|
||||
|
||||
이때 [API](https://api-docs.deepseek.com/) 문서를 바로 읽을 수 있습니다. 보통 curl 또는 Python 호출 예시를 제공합니다.
|
||||
|
||||
|
||||
|
||||
예시를 찾은 뒤, 문서의 모든 내용과 키를 AI IDE의 대화창에 복사해 넣고, 이전에 개발해 둔 프로토타입에 대형 언어 모델을 통합해 달라고 요청할 수 있습니다.
|
||||
|
||||
|
||||
|
||||
참고 프롬프트는 다음과 같습니다.
|
||||
|
||||
```
|
||||
이 호출 방법을 참고해 문구 생성 기능을 지원해 주세요. 상품 정보를 바탕으로 클릭하면 해당 Douyin 이커머스 문구를 여러 스타일로 생성할 수 있어야 합니다.
|
||||
|
||||
아래 참고 자료:
|
||||
api key: sk-8573341c39aefa1efe
|
||||
api 요청 참고:
|
||||
curl \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer ${DEEPSEEK_API_KEY}" \
|
||||
-d '{
|
||||
"model": "deepseek-chat",
|
||||
"messages": [
|
||||
{"role": "system", "content": "You are a helpful assistant."},
|
||||
{"role": "user", "content": "Hello!"}
|
||||
],
|
||||
"stream": false
|
||||
}'
|
||||
```
|
||||
|
||||
AI가 코드를 생성하는 데 약간의 시간이 지나면, 테스트할 수 있는 대응 문구 생성 버튼을 쉽게 얻을 수 있습니다. 입구를 찾을 수 없다면 AI IDE에게 어느 페이지에서 해당 페이지로 들어갈 수 있는지 알려 달라고 하면 됩니다. 정말 찾기 어렵다면 AI IDE에게 당신의 생각을 바탕으로 직접 리팩터링하고 개선하게 하여 최종 문구 생성 결과를 얻을 수 있습니다.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
물론 여기서 이런 질문이 들 수 있습니다. 실제로 대형 모델을 호출한 것인지, 아니면 고정된 답변을 내장한 것인지 어떻게 알 수 있을까요? 사용자 지정 문구를 입력하고, 대형 모델이 당신이 즉시 지정한 사용자 정의 분석을 바탕으로 대응 문구를 생성하게 해 보면 됩니다.
|
||||
|
||||
매번 결과가 다르고 논리적으로도 맞는다면, 이때 API가 정상적으로 호출되어 생성되고 있다고 안심해도 됩니다. [API 사용 관리 플랫폼](https://platform.deepseek.com/usage)에서 성공적으로 호출되었는지도 확인할 수 있습니다. 다만 표시되기까지 몇 분이 걸릴 수 있습니다.
|
||||
|
||||
## 더 많은 텍스트 생성 모델 선택지
|
||||
|
||||
DeepSeek 외에도 다른 대형 언어 모델을 시도할 수 있습니다. 대부분의 모델이 **OpenAI 호환 인터페이스**를 제공하므로 전환은 매우 간단합니다. API Key, 기본 URL, 모델 이름만 바꾸면 됩니다.
|
||||
|
||||
### MiniMax 통합
|
||||
|
||||
::: details 더 알아보기: MiniMax란 무엇인가?
|
||||
|
||||
**MiniMax**는 범용 인공지능 기술 연구 개발에 힘쓰는 중국 인공지능 회사입니다. MiniMax는 자체 연구 개발한 MiniMax-M2.7 대형 언어 모델 시리즈를 출시했으며, 여러 벤치마크 테스트에서 우수한 성능을 보이고 매우 높은 가성비를 가지고 있습니다.
|
||||
|
||||
**MiniMax-M2.7 시리즈의 주요 특징:**
|
||||
|
||||
- **초장문 컨텍스트**: 204,800 tokens 컨텍스트 창을 지원하여 긴 문서와 다중 턴 대화 처리에 적합합니다.
|
||||
- **높은 가성비**: 가격 경쟁력이 매우 높습니다.
|
||||
- **OpenAI 호환 인터페이스**: OpenAI SDK로 바로 호출할 수 있어 새로운 API 형식을 추가로 배울 필요가 없습니다.
|
||||
- **사용 가능한 두 모델**:
|
||||
- `MiniMax-M2.7`: 플래그십 모델로 복잡한 작업에 적합합니다.
|
||||
- `MiniMax-M2.7-highspeed`: 같은 성능을 유지하면서 더 빠른 고속 버전입니다.
|
||||
:::
|
||||
|
||||
연결 방식은 DeepSeek과 동일하며, 세 단계만 필요합니다.
|
||||
|
||||
1. [MiniMax 오픈 플랫폼](https://platform.minimax.io/)으로 가서 계정을 등록하고 API Key를 만듭니다.
|
||||
2. MiniMax 문서에서 호출 예시를 찾습니다.
|
||||
3. API Key + 예시를 AI IDE에 붙여 넣습니다.
|
||||
|
||||
MiniMax는 OpenAI 호환 인터페이스를 제공하므로 아래 curl 예시와 당신의 API Key를 그대로 복사해 AI IDE에 보내 통합할 수 있습니다.
|
||||
|
||||
```bash
|
||||
curl https://api.minimax.io/v1/chat/completions \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer ${MINIMAX_API_KEY}" \
|
||||
-d '{
|
||||
"model": "MiniMax-M2.7",
|
||||
"messages": [
|
||||
{"role": "system", "content": "You are a helpful assistant."},
|
||||
{"role": "user", "content": "Hello!"}
|
||||
],
|
||||
"stream": false
|
||||
}'
|
||||
```
|
||||
|
||||
::: tip ✅ 팁
|
||||
MiniMax의 API 형식은 DeepSeek과 거의 완전히 같습니다. 둘 다 OpenAI 호환 형식입니다. 따라서 이미 DeepSeek을 성공적으로 연결했다면, MiniMax로 전환할 때는 세 곳만 수정하면 됩니다.
|
||||
1. **기본 URL**: `https://api.minimax.io/v1`로 변경
|
||||
2. **API Key**: MiniMax의 API Key 사용
|
||||
3. **모델 이름**: `MiniMax-M2.7` 또는 `MiniMax-M2.7-highspeed`로 변경
|
||||
|
||||
자세한 내용은 [MiniMax OpenAI 호환 인터페이스 문서](https://platform.minimax.io/docs/api-reference/text-openai-api)를 참고하세요.
|
||||
:::
|
||||
|
||||
# 3. 이미지-텍스트 API 연결하기: Qwen3 VL
|
||||
|
||||
::: info ℹ️ 원리 확장
|
||||
원리 관련 내용을 더 알고 싶다면 부록 [비전 언어 모델(VLM) 입문](/ko-kr/appendix/8-artificial-intelligence/multimodal-models)을 확인하세요.
|
||||
|
||||
::: details 더 알아보기: Qwen3 VL이란 무엇인가?
|
||||
|
||||
**Qwen3 VL**은 Alibaba Cloud Tongyi Qianwen 팀이 출시한 멀티모달 비전 언어 모델 시리즈의 최신 버전입니다. VL은 “Vision-Language”, 즉 비전 언어 모델을 의미합니다. 이미지를 이해하고, 이미지에 대한 텍스트 설명을 생성하고, 이미지 관련 질문에 답하고, 이미지 정보를 추출하는 등의 작업을 할 수 있습니다.
|
||||
|
||||
|
||||
|
||||
|
||||
**Qwen3 VL의 주요 능력은 다음과 같습니다.**
|
||||
|
||||
- **이미지 이해**: 이미지 속 물체, 장면, 인물, 문자 등을 인식할 수 있습니다.
|
||||
- **시각 질의응답**: 사용자 질문에 따라 이미지에 관한 질문에 정확히 답할 수 있습니다.
|
||||
- **이미지 설명**: 자세하거나 간결한 이미지 텍스트 설명을 생성합니다.
|
||||
- **다중 이미지 이해**: 여러 이미지를 동시에 처리하고 비교 분석할 수 있습니다.
|
||||
- **텍스트 추출**: 이미지에서 문자 내용을 추출합니다. OCR 능력입니다.
|
||||
|
||||
**왜 Qwen3 VL을 선택할까요?**
|
||||
|
||||
이전 세대 모델과 비교하면 Qwen3 VL은 이미지 이해 정확도에서 뚜렷하게 향상되었고, 더 길고 복잡한 이미지 분석 작업을 지원합니다. 중국어 이해 성능이 우수하고 API 호출 비용이 상대적으로 낮아 가성비가 높습니다. 또한 컨텍스트 창이 더 커서 더 복잡한 시각 추론 작업을 처리할 수 있습니다.
|
||||
|
||||
**대표 적용 장면:**
|
||||
|
||||
- 이커머스: 상품 이미지에서 제목, 설명, 판매 포인트 자동 생성
|
||||
- 콘텐츠 창작: 소재 이미지를 바탕으로 문구나 이미지 제안 자동 생성
|
||||
- 사무: 이미지 내용 추출, 보고서 자동 인식
|
||||
- 교육: 이미지 문제 자동 해석, 지식 포인트 추출
|
||||
|
||||
:::
|
||||
|
||||
앞부분에서 텍스트 생성 API를 연결하는 방법을 설명했습니다. 하지만 앞선 애플리케이션 장면에서는 문제가 하나 있습니다. 우리는 이미지를 업로드합니다. 대형 언어 모델만 사용하면 이미지 안의 내용을 제대로 이해하기 어렵고, 생성 결과가 달라질 가능성이 큽니다.
|
||||
|
||||
우리는 이미지를 텍스트 설명으로 바꿔 줄 수 있는 모델이 필요합니다. 이때 필요한 것이 비전 언어 모델(VLM)입니다. 사례에서는 비전 언어 모델을 사용해 상품의 판매 포인트 설명을 생성하여 사용자 경험을 높입니다.
|
||||
|
||||
편의를 위해 [클라우드 플랫폼 SiliconFlow](https://cloud.siliconflow.cn/me)가 제공하는 API 인터페이스를 사용해 이미지-텍스트 API를 연결합니다.
|
||||
|
||||
::: details 더 알아보기: SiliconFlow란 무엇인가
|
||||
**SiliconFlow**는 중국 내에서 잘 알려진 AI 모델 집계 플랫폼으로, 여러 주요 대형 언어 모델과 비전 언어 모델의 API 인터페이스 서비스를 제공합니다.
|
||||
|
||||
**플랫폼 특징:**
|
||||
|
||||
- **다중 모델 지원**: DeepSeek, Qwen, Llama 계열 등 여러 주요 AI 모델과 오픈소스 모델을 통합합니다.
|
||||
- **기술 최적화**: 오픈소스 모델에 대한 추론 최적화를 수행하여 낮은 지연 시간과 높은 동시성의 API 서비스를 제공합니다.
|
||||
- **인터페이스 호환**: OpenAI 형식과 호환되는 API 인터페이스를 제공하여 기존 애플리케이션 통합이 쉽습니다.
|
||||
- **사용량 기반 과금**: 호출량에 따라 비용을 지불하는 방식을 지원합니다.
|
||||
|
||||
SiliconFlow는 오픈소스 대형 모델 추론 서비스 측면에서 비교적 성숙했으며, 중국산 오픈소스 AI 모델을 사용할 때 자주 선택되는 플랫폼 중 하나입니다.
|
||||
:::
|
||||
|
||||
SiliconFlow 플랫폼의 홈 화면에 들어가면 많은 모델을 선택할 수 있습니다. 왼쪽 위에서 필터를 찾아 펼친 뒤, 비전 태그를 선택하면 여러 이미지-텍스트 모델을 볼 수 있습니다. 예를 들어 Zhipu GLM-4.6V나 Qwen3-VL이 있습니다.
|
||||
|
||||
|
||||
|
||||
테스트를 위해 아무 모델이나 선택할 수 있습니다. 여기서는 `Qwen/Qwen3-VL-8B-Instruct`를 예로 들겠습니다.
|
||||
|
||||
|
||||
|
||||
[SiliconFlow 플랫폼](https://cloud.siliconflow.cn/me/account/ak)에 들어가 API 키에서 “새 API 키”를 클릭해 새로운 API Key를 만듭니다.
|
||||
|
||||
아래 코드를 참고 코드로 사용할 수 있습니다. 생성한 API Key와 함께 AI IDE에 보내 기능을 통합하세요.
|
||||
|
||||
::: details 이미지-텍스트 참고 코드
|
||||
|
||||
```python
|
||||
from openai import OpenAI
|
||||
from typing import Dict, Any, List
|
||||
import base64
|
||||
import os
|
||||
SILICONFLOW_API_KEY: str = ""
|
||||
SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/"
|
||||
MODEL_NAME: str = "Qwen/Qwen3-VL-8B-Instruct"
|
||||
|
||||
def encode_image(image_path: str) -> str:
|
||||
with open(image_path, "rb") as image_file:
|
||||
return base64.b64encode(image_file.read()).decode('utf-8')
|
||||
|
||||
def get_vlm_completion(client: OpenAI, messages: List[Dict[str, Any]]) -> str:
|
||||
response = client.chat.completions.create(
|
||||
model=MODEL_NAME,
|
||||
messages=messages,
|
||||
max_tokens=512,
|
||||
temperature=0.7,
|
||||
top_p=0.7,
|
||||
frequency_penalty=0.5,
|
||||
stream=False,
|
||||
n=1
|
||||
)
|
||||
return response.choices[0].message.content
|
||||
|
||||
def caption_image(image_path: str) -> str:
|
||||
base64_image = encode_image(image_path)
|
||||
messages = [
|
||||
{
|
||||
"role": "user",
|
||||
"content": [
|
||||
{
|
||||
"type": "text",
|
||||
"text": "Please describe this image in detail."
|
||||
},
|
||||
{
|
||||
"type": "image_url",
|
||||
"image_url": {
|
||||
"url": f"data:image/jpeg;base64,{base64_image}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
client = OpenAI(
|
||||
api_key=SILICONFLOW_API_KEY,
|
||||
base_url=SILICONFLOW_BASE_URL
|
||||
)
|
||||
|
||||
return get_vlm_completion(client, messages)
|
||||
|
||||
image_path = "images.jpg"
|
||||
caption = caption_image(image_path)
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
이 장면에서는 AI IDE에게 업로드한 이미지를 바탕으로 이커머스 판매 포인트 텍스트와 키워드를 자동 생성하는 기능을 구현하게 해 봅니다. 아래와 같습니다.
|
||||
|
||||
```
|
||||
아래 이미지-텍스트 API를 바탕으로, 업로드한 이미지에서 이커머스 판매 포인트 텍스트와 키워드를 자동 생성하는 기능을 구현해 주세요.
|
||||
|
||||
<여기서는 코드를 생략했습니다. 직접 키와 참고 코드를 붙여 넣어야 합니다.>
|
||||
```
|
||||
|
||||
마지막으로 생성 결과를 얻습니다.
|
||||
|
||||
|
||||
|
||||
|
||||
<div style="margin: 50px 0;">
|
||||
<ClientOnly>
|
||||
<StepBar :active="2" :items="[
|
||||
{ title: 'API 기초', description: '핵심 개념과 보안 규범 이해' },
|
||||
{ title: '텍스트 연결', description: 'DeepSeek 텍스트 생성 실습' },
|
||||
{ title: '이미지 연결', description: 'VLM 이미지 이해와 생성' }
|
||||
]" />
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
# 4. 이미지 생성 API 연결하기: Seedream
|
||||
|
||||
앞부분에서는 주로 텍스트 관련 작업을 다뤘습니다. 이제 이미지 생성 기능을 연결해 보겠습니다. 텍스트 설명에서 이미지를 생성하거나 이미지를 수정하는 기능을 지원합니다.
|
||||
|
||||
::: info ℹ️ 원리 확장
|
||||
원리 관련 내용을 더 알고 싶다면 부록 [이미지 생성 입문](/ko-kr/appendix/8-artificial-intelligence/image-generation)을 확인하세요.
|
||||
|
||||
::: details 더 알아보기: [Seedream](https://seed.bytedance.com/en/seedream4_5)이란 무엇인가?
|
||||
|
||||
|
||||
|
||||
> 어쩌면 Nano Banana(Google 개발)를 이미 알고 있을 수 있지만, Seedream을 놓치지 않는 것이 좋습니다. Seedream 4.5는 ByteDance가 만든 차세대 이미지 창작 모델입니다. 이미지 생성과 이미지 편집 능력을 하나의 통합 아키텍처에 결합합니다. 이를 통해 지식 기반 생성, 복잡한 추론, 참조 일관성 같은 복잡한 멀티모달 작업을 유연하게 처리할 수 있습니다. 또한 추론 속도는 이전 제품보다 훨씬 빠르며, 최대 4K 해상도의 놀라운 고화질 이미지를 생성할 수 있습니다.
|
||||
>
|
||||
> 
|
||||
> 
|
||||
|
||||
**주요 능력:**
|
||||
|
||||
- **텍스트-이미지**: 텍스트 설명으로 이미지를 생성하며, 다양한 스타일(실사, 카툰, 수묵화, 사이버펑크 등)을 지원합니다.
|
||||
- **스타일 전이**: 이미지를 지정한 예술 스타일로 변환합니다.
|
||||
- **이미지 변형**: 참고 이미지를 바탕으로 유사한 스타일의 새 이미지를 생성합니다.
|
||||
- **해상도 향상**: 이미지 선명도와 세부 사항을 강화합니다.
|
||||
- **이미지 편집**: 자연어 지시에 따라 기존 이미지를 편집하고 수정합니다.
|
||||
|
||||
**왜 Seedream을 선택할까요?**
|
||||
|
||||
- **중국 내 네트워크 안정성**: 중국 내 접속 속도가 빠르고 지연 시간이 낮습니다.
|
||||
- **우수한 결과**: 이커머스와 소재 장면에서 안정적이고 신뢰할 만한 결과를 보입니다.
|
||||
- **중국어 최적화**: 중국어 프롬프트 이해가 더 정확해 중국 사용자를 위한 작업에 적합합니다.
|
||||
- **빠른 속도**: 생성 효율이 높고 응답 시간이 짧습니다.
|
||||
- **안정적인 품질**: 최대 4K 해상도의 고화질 이미지를 생성합니다.
|
||||
|
||||
**대표 적용 장면:**
|
||||
|
||||
- 이커머스: 대표 이미지, 상세 페이지 이미지, 프로모션 포스터 생성
|
||||
- 소셜미디어: 아바타, 이모티콘, 첨부 이미지 생성
|
||||
- 디자인: 콘셉트 이미지, 소재 이미지, 배경 이미지 빠르게 제작
|
||||
- 마케팅: 광고 이미지, 이벤트 banner, 명절 포스터 제작
|
||||
|
||||
**Qwen3 VL과의 조합:**
|
||||
|
||||
이 두 API는 이어서 사용할 수 있습니다. 먼저 Qwen3 VL로 참고 이미지를 분석해 화면 내용을 이해하고, 그다음 Seedream이 분석된 참고 이미지의 프롬프트 내용을 바탕으로 새 이미지를 생성합니다.
|
||||
:::
|
||||
|
||||
Douyin, Bilibili, YouTube에서 볼 수 있는 많은 “AI 포스터 / AI 대표 이미지 / AI 캐릭터 이미지”는 본질적으로 여기서 소개하는 기술을 사용합니다. 당신이 해야 할 일은 간단합니다. 사용자 입력을 한 문장으로 정리하고 이미지 API를 요청한 뒤, 반환된 이미지를 표시하면 됩니다. 이때 사용하는 모델을 이미지 생성 / 이미지 편집 모델이라고 합니다.
|
||||
|
||||
이제 Seedream API를 프로젝트에 통합하는 방법을 단계별로 시연합니다. AI IDE의 도움을 받아 진행합니다.
|
||||
|
||||
[홈페이지](https://www.volcengine.com/experience/ark?launch=seedream)에 접속한 뒤 로그인을 클릭합니다.
|
||||
|
||||
|
||||
|
||||
로그인 후 페이지 오른쪽 위의 충전 옵션을 찾습니다.
|
||||
|
||||
|
||||
|
||||
충전하려면 실명 인증이 필요합니다.
|
||||
|
||||
|
||||
|
||||
인증이 성공하면 [1위안을 충전해 테스트](https://console.volcengine.com/finance/fund/recharge)할 수 있습니다.
|
||||
|
||||
[초기 화면](https://www.volcengine.com/experience/ark?launch=seedream)으로 돌아가 API 접근을 클릭합니다.
|
||||
|
||||
|
||||
|
||||
먼저 API key를 만들고, 선택 옵션을 클릭합니다.
|
||||
|
||||
|
||||
|
||||
그러면 2단계로 이동합니다. 여기에서 호출할 서비스가 Seedream 4.5인지 확인하고, 제공된 호출 예시를 복사해야 합니다. 이 스크린샷은 촬영 시점이 조금 이르기 때문에 모델 버전이 여전히 4.0으로 표시되어 있습니다.
|
||||
|
||||
|
||||
|
||||
API Key와 호출 예시가 준비되면, 그것들을 AI IDE에 바로 붙여 넣어 프론트엔드 상호작용 데모를 생성하거나 기존 프로토타입에 능력을 연결하게 할 수 있습니다. 이미지에서 텍스트-이미지를 선택할지, 여러 이미지로 단일 이미지를 생성할지 선택할 수 있다는 점에 주의하세요. 현재 요구에 맞춰 참고 코드를 선택해야 합니다.
|
||||
|
||||
::: warning ⚠️ 중요 팁
|
||||
여기의 기본 예시는 비교적 복잡합니다. **“워터마크 추가”** 와 **“스트리밍 응답”** 을 비활성화하는 것을 기억하세요. 그래야 워터마크가 생성되지 않고 요청 실패도 줄일 수 있습니다.
|
||||
:::
|
||||
|
||||
이후에 참고 이미지 생성 모드를 사용할 것이므로, 먼저 여러 이미지로 단일 이미지를 생성하는 기능으로 갑니다. 복사한 참고 코드는 다음과 같습니다.
|
||||
|
||||
```
|
||||
curl -X POST https://ark.cn-beijing.volces.com/api/v3/images/generations \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer xxxxxxx" \
|
||||
-d '{
|
||||
"model": "doubao-seedream-4-5-251128",
|
||||
"prompt": "이미지 1의 의상을 이미지 2의 의상으로 바꿔 주세요",
|
||||
"image": ["https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_1.png", "https://ark-project.tos-cn-beijing.volces.com/doc_image/seedream4_imagesToimage_2.png"],
|
||||
"sequential_image_generation": "disabled",
|
||||
"response_format": "url",
|
||||
"size": "2K",
|
||||
"stream": false,
|
||||
"watermark": true
|
||||
}'
|
||||
```
|
||||
|
||||
이미지 참고 코드가 생겼다면 AI IDE에게 이커머스에서 자주 쓰는 이미지 작업 기능을 지원하게 합니다.
|
||||
|
||||
```
|
||||
아래 API를 바탕으로 이 프로젝트에서 이커머스 업무의 일반적인 기능(예: 포스터 생성, Douyin 이커머스 첫 이미지 생성 등)을 구현해 주세요.
|
||||
|
||||
<여기에 API KEY와 이미지 편집 코드를 붙여 넣으세요>
|
||||
```
|
||||
|
||||
구현 결과는 다음과 같습니다.
|
||||
|
||||
|
||||
|
||||
주의할 점은 이미지 생성에서는 이상한 문제를 자주 만날 수 있다는 것입니다. 따라서 AI IDE가 전체 오류 정보를 표시하도록 하는 것이 좋습니다. 그래야 복사해 붙여 넣고 수정하기 쉽습니다. 그렇지 않으면 왜 그런지 모른 채 “생성 실패”만 반복해서 보일 수 있습니다. 예를 들어 이렇게 말할 수 있습니다.
|
||||
|
||||
```
|
||||
이미지 생성 실패라고만 표시하지 말고, 매번 전체 실패 원인을 표시해 주세요. 예: 이미지 불일치, 요청 오류, 타임아웃 등.
|
||||
```
|
||||
|
||||
때로는 수정 후 업데이트가 웹페이지에 적용되지 않을 수 있습니다. 수정 뒤에도 웹페이지가 계속 오류를 내고 있다면(여러 번 반복된다면), AI IDE에게 직접 “이 프로젝트를 재시작해 주세요”라고 말해 보세요.
|
||||
|
||||
이커머스 업무에서는 사용자가 업로드한 옷을 자동으로 사람에게 입혀 보게 하거나, 상품의 매력적인 판매 이미지와 포스터를 자동 생성하게 하고 싶을 수 있습니다. 여기서 우리가 시도한 프롬프트는 이커머스 포스터를 생성하게 하는 것입니다.
|
||||
|
||||
|
||||
|
||||
상상하는 비즈니스 장면에 따라 텍스트-이미지 또는 이미지-이미지 API를 사용해 서로 다른 기능을 구현할 수 있습니다.
|
||||
|
||||
## 더 많은 이미지 서비스 선택지
|
||||
|
||||
아래에 다른 선택지를 제시합니다. 먼저 Qwen 이미지 생성 결과를 끝까지 실행해 본 뒤, 효과와 비용에 따라 아래 서비스를 대체 사용하기를 권장합니다. 실제 사용 감각에 따라 선택하세요.
|
||||
|
||||
### Recraft 통합
|
||||
|
||||
프로토타입이 “디자인 생산” 쪽에 더 가깝다면, 예를 들어 브랜드 스타일 일러스트, 마케팅 포스터, 벡터 스타일 소재를 생성해야 한다면 Recraft가 더 편할 때가 많습니다. 연결 방식은 이전 절과 완전히 같습니다. **Key를 얻고 + 공식 예시를 찾고 + AI IDE가 예시를 버튼/페이지에 적용하게 합니다.**
|
||||
|
||||
::: details 더 알아보기: Recraft란 무엇인가?
|
||||
|
||||
> Recraft는 디자이너, 일러스트레이터, 마케터를 위한 AI 도구입니다. 2022년 미국에서 설립되었고 본사는 런던에 있습니다. 이미지, 벡터 아트, 3D 그래픽 같은 시각 결과물을 생성하고 반복 개선하도록 돕습니다. 고품질 출력(어떤 텍스트 크기/길이든), 정확한 요소 배치, 브랜드 일관성 디자인 등의 장점이 있습니다. 200개 국가/지역의 300만 명 이상 사용자(오길비, Netflix 포함)가 신뢰하며, 3.5억 장 이상의 이미지를 만들었습니다. 이 팀은 Recraft를 필수 디자이너 도구로 만들고, 창작자가 AI 보조 워크플로를 통제할 수 있게 하는 것을 목표로 합니다.
|
||||
>
|
||||
> 
|
||||
> 
|
||||
|
||||
먼저 여전히 [API 입구](https://www.recraft.ai/profile/api)를 찾아 API Key를 얻어야 합니다.
|
||||
|
||||
여기는 무료 한도를 제공하지 않으므로 직접 1,000 크레딧을 충전해야 합니다. 이 웹사이트는 Alipay와 WeChat Pay를 지원하므로 1,000 크레딧을 쉽게 얻을 수 있습니다. 필요한 금액 이상 충전하지 않도록 주의하세요.
|
||||
|
||||
|
||||
|
||||
그 뒤에도 같은 방법을 따릅니다. 공식 문서에서 해당 요청 예시를 찾습니다.
|
||||
|
||||
- <https://www.recraft.ai/docs/api-reference/getting-started>
|
||||
- <https://www.recraft.ai/docs/api-reference/usage>
|
||||
- <https://www.recraft.ai/docs/api-reference/guides>
|
||||
|
||||
:::
|
||||
|
||||
### Qwen Image / Qwen Image Edit 통합
|
||||
|
||||
더 간단한 방식으로 이미지 생성 서비스를 연결하고 싶다면 Qwen Image(Tongyi Wanxiang)를 고려할 수 있습니다. 생각은 마찬가지입니다. 이것을 “이미지 생성 API”로 보고, 프로토타입 버튼에 연결하면 됩니다.
|
||||
|
||||
::: details 더 알아보기: Qwen Image / Qwen Image Edit란 무엇인가?
|
||||
|
||||
**Qwen Image**(Tongyi Wanxiang이라고도 함)는 Alibaba Cloud Tongyi 팀이 출시한 이미지 생성 모델 시리즈이며, 주로 두 가지 큰 모델을 포함합니다.
|
||||
|
||||
**1. Qwen Image - 텍스트-이미지(Text-to-Image) 모델**
|
||||
|
||||
텍스트 설명에 따라 완전히 새로운 이미지를 생성합니다. 프롬프트를 입력하면 모델이 의도를 이해하고 설명에 맞는 이미지를 생성합니다.
|
||||
|
||||
|
||||
|
||||
**주요 능력:**
|
||||
|
||||
- **텍스트-이미지**: 텍스트 설명으로 이미지를 생성하며, 다양한 스타일(실사, 카툰, 수묵화, 사이버펑크 등)을 지원합니다.
|
||||
- **스타일 전이**: 이미지를 지정한 예술 스타일로 변환합니다.
|
||||
- **이미지 변형**: 참고 이미지를 바탕으로 유사한 스타일의 새 이미지를 생성합니다.
|
||||
- **해상도 향상**: 이미지 선명도와 세부 사항을 강화합니다.
|
||||
|
||||
**2. Qwen Image Edit - 이미지-이미지(Image-to-Image) 모델**
|
||||
|
||||
기존 이미지 위에서 편집과 수정을 수행합니다. 자연어 지시를 통해 모델이 수정 의도를 이해하고 결과를 생성하게 합니다.
|
||||
|
||||
**주요 능력:**
|
||||
|
||||
- **부분 교체**: 이미지 속 어떤 물체나 인물을 교체합니다. 예: “배경을 바닷가로 바꿔줘”.
|
||||
- **요소 제거**: 이미지에서 필요 없는 요소를 제거합니다.
|
||||
- **스타일 변환**: 이미지에 필터나 예술 효과를 추가합니다.
|
||||
- **이미지 확장**: 이미지 경계를 확장하고 새 내용을 생성합니다.
|
||||
- **지능형 보정**: 자동 미화, 빛과 그림자 조정, 결함 복구.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
**왜 Qwen Image 시리즈를 선택할까요?**
|
||||
|
||||
- **중국어 최적화**: 중국어 프롬프트 이해가 더 정확해 중국 사용자를 위한 작업에 적합합니다.
|
||||
- **낮은 비용**: 국제 경쟁 제품과 비교해 가격이 더 저렴합니다.
|
||||
- **빠른 속도**: 생성 효율이 높고 응답 시간이 짧습니다.
|
||||
- **안정적인 품질**: 이커머스와 소재 장면에서 안정적이고 신뢰할 만한 결과를 보입니다.
|
||||
- **다양한 스타일**: 여러 예술 스타일과 창의적 효과를 지원합니다.
|
||||
|
||||
**대표 적용 장면:**
|
||||
|
||||
- 이커머스: 대표 이미지, 상세 페이지 이미지, 프로모션 포스터 생성
|
||||
- 소셜미디어: 아바타, 이모티콘, 첨부 이미지 생성
|
||||
- 디자인: 콘셉트 이미지, 소재 이미지, 배경 이미지 빠르게 제작
|
||||
- 마케팅: 광고 이미지, 이벤트 banner, 명절 포스터 제작
|
||||
:::
|
||||
|
||||
[SiliconFlow](https://siliconflow.cn/) 공식 웹사이트를 확인합니다. 왼쪽에는 “Playground” 섹션이 있으며, API 호출 없이 여러 모델을 시험해 볼 수 있습니다. 웹페이지 상단에는 “Filters” 버튼이 있습니다. 클릭하면 오른쪽 모델 목록을 필터링할 수 있습니다.
|
||||
|
||||
“Image”를 선택하면 현재 지원하는 모든 텍스트-이미지 모델만 보입니다. 이 경우 우리는 Qwen/Qwen-Image를 사용할 것입니다.
|
||||
|
||||
|
||||
|
||||
모든 설정이 끝나면 해당 이미지 생성 API 문서를 참고해야 합니다. 공식 문서 페이지에서 “API Reference”라고 표시된 부분을 찾을 수 있습니다. 그것을 클릭한 뒤 [이미지 생성 API 섹션](https://docs.siliconflow.cn/cn/api-reference/images/images-generations)으로 이동해 관련 요청 예시를 찾습니다.
|
||||
|
||||
아래 요청 예시와 API KEY를 함께 AI IDE에 보내면 이미지 생성 기능을 구현할 수 있습니다.
|
||||
|
||||
```bash
|
||||
curl --request POST \
|
||||
--url https://api.siliconflow.cn/v1/images/generations \
|
||||
--header 'Authorization: Bearer <token>' \
|
||||
--header 'Content-Type: application/json' \
|
||||
--data '
|
||||
{
|
||||
"model": "Qwen/Qwen-Image-Edit-2509",
|
||||
"prompt": "an island near sea, with seagulls, moon shining over the sea, light house, boats int he background, fish flying over the sea"
|
||||
}
|
||||
'
|
||||
```
|
||||
|
||||
여기의 모델은 Qwen/Qwen-Image 또는 Qwen/Qwen-Image-Edit-2509를 사용할 수 있습니다.
|
||||
|
||||
::: details 이미지 편집 참고 코드
|
||||
|
||||
아래 코드와 key를 함께 복사해 AI IDE에 보내세요.
|
||||
|
||||
```python
|
||||
import requests
|
||||
import os
|
||||
from typing import Dict, Any, Optional
|
||||
|
||||
SILICONFLOW_API_KEY: str = ""
|
||||
SILICONFLOW_BASE_URL: str = "https://api.siliconflow.cn/v1/images/generations"
|
||||
QWEN_IMAGE_EDIT_MODEL: str = "Qwen/Qwen-Image-Edit-2509"
|
||||
|
||||
def generate_image_edit(
|
||||
prompt: str,
|
||||
image: Optional[str] = None,
|
||||
image2: Optional[str] = None,
|
||||
image3: Optional[str] = None,
|
||||
negative_prompt: Optional[str] = None,
|
||||
cfg: Optional[float] = 4.0,
|
||||
seed: Optional[int] = None
|
||||
) -> Optional[Dict[str, Any]]:
|
||||
payload: Dict[str, Any] = {
|
||||
"model": QWEN_IMAGE_EDIT_MODEL,
|
||||
"prompt": prompt,
|
||||
}
|
||||
if image:
|
||||
payload["image"] = image
|
||||
if image2:
|
||||
payload["image2"] = image2
|
||||
if image3:
|
||||
payload["image3"] = image3
|
||||
if negative_prompt:
|
||||
payload["negative_prompt"] = negative_prompt
|
||||
if cfg is not None:
|
||||
payload["cfg"] = cfg
|
||||
if seed is not None:
|
||||
payload["seed"] = seed
|
||||
|
||||
headers: Dict[str, str] = {
|
||||
"Authorization": f"Bearer {SILICONFLOW_API_KEY}",
|
||||
"Content-Type": "application/json"
|
||||
}
|
||||
|
||||
try:
|
||||
response = requests.post(SILICONFLOW_BASE_URL, json=payload, headers=headers)
|
||||
response.raise_for_status()
|
||||
return response.json()
|
||||
except requests.exceptions.RequestException as e:
|
||||
print(f"Error generating image: {e}")
|
||||
return None
|
||||
|
||||
def save_image_from_url(image_url: str, output_path: str = "image.png") -> bool:
|
||||
try:
|
||||
response = requests.get(image_url)
|
||||
response.raise_for_status()
|
||||
os.makedirs(os.path.dirname(output_path) if os.path.dirname(output_path) else ".", exist_ok=True)
|
||||
with open(output_path, "wb") as f:
|
||||
f.write(response.content)
|
||||
print(f"Image saved successfully to: {output_path}")
|
||||
return True
|
||||
except requests.exceptions.RequestException as e:
|
||||
print(f"Error downloading image: {e}")
|
||||
return False
|
||||
except Exception as e:
|
||||
print(f"Error saving image: {e}")
|
||||
return False
|
||||
|
||||
prompt: str = "하늘을 저녁으로 바꾸고, 달과 별이 보이는 몽환적인 스타일로 만들어 주세요"
|
||||
negative_prompt: str = "흐림, 저품질, 왜곡"
|
||||
image_url: str = "https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641"
|
||||
image2_url: Optional[str] = None
|
||||
image3_url: Optional[str] = None
|
||||
|
||||
cfg: float = 4.0
|
||||
seed: int = 12345
|
||||
output_path: str = "edited_image.png"
|
||||
|
||||
print(f"Generating edited image with prompt: {prompt}")
|
||||
print(f"Input image: {image_url}")
|
||||
print(f"CFG: {cfg}, Seed: {seed}")
|
||||
print("-" * 50)
|
||||
|
||||
result = generate_image_edit(
|
||||
prompt=prompt,
|
||||
image=image_url,
|
||||
image2=image2_url,
|
||||
image3=image3_url,
|
||||
negative_prompt=negative_prompt,
|
||||
cfg=cfg,
|
||||
seed=seed
|
||||
)
|
||||
|
||||
if result and "images" in result:
|
||||
images = result["images"]
|
||||
if images and len(images) > 0:
|
||||
image_url_result = images[0]["url"]
|
||||
print(f"Image edit generated successfully. URL: {image_url_result}")
|
||||
success = save_image_from_url(image_url_result, output_path)
|
||||
if success:
|
||||
print(f"Image saved to: {output_path}")
|
||||
else:
|
||||
print("Failed to save image to local file")
|
||||
else:
|
||||
print("No images found in response")
|
||||
else:
|
||||
print("Image generation failed")
|
||||
if result:
|
||||
print(f"Response: {result}")
|
||||
```
|
||||
|
||||
:::
|
||||
|
||||
# 부록: “현재 더 강한” AI 모델을 찾는 법
|
||||
|
||||
텍스트 모델(흔히 “대형 언어 모델”이라고도 함)의 발전 속도는 매우 빠릅니다. 우리는 항상 우리가 사용하는 모델이 더 나은 성능을 보이는 모델 중 하나인지 확인해야 합니다. 아래 두 웹사이트를 통해 “지금 사람들이 많이 쓰고, 평가도 좋은 모델”을 편하게 볼 수 있습니다.
|
||||
|
||||
일반적으로 이런 웹사이트는 **“모델 경기장”** 으로 이해할 수 있습니다. 두 모델의 출력을 나란히 놓고, 당신이 더 마음에 드는 쪽에 투표합니다. 표가 많은 모델은 보통 더 많은 사람이 “더 쓰기 좋다”고 느낀다는 뜻입니다.
|
||||
|
||||
또한 이런 대형 모델 경기장에서 가끔 신비로운 익명 모델(“Unknown Model”)을 볼 수도 있습니다. 이는 보통 누군가 “내부 테스트 모델”을 몰래 넣어 블라인드 테스트를 하고 있다는 뜻입니다. 더 강한 능력을 미리 체험할 기회일 수도 있습니다.
|
||||
|
||||
## LMArena
|
||||
|
||||
웹사이트: <https://lmarena.ai/>
|
||||
|
||||
LMArena는 “다수의 사람이 어떤 모델의 답변을 더 선호하는지” 판단하는 데 더 적합합니다. 투표가 많고 점수가 높을수록 보통 실제 사용 장면에서 더 안정적이라는 뜻입니다.
|
||||
|
||||
간단한 사용법은 다음과 같습니다.
|
||||
|
||||
1. 순위표(Leaderboard)를 바로 봅니다.
|
||||
2. 먼저 작업 방향을 하나 선택합니다. 예: 일반 대화 / 프로그래밍 / 비전.
|
||||
3. Top 3 안에서 사용할 수 있는 것을 고릅니다. 접근 가능하고, 가격을 감당할 수 있고, 지연 시간도 받아들일 수 있어야 합니다.
|
||||
|
||||
|
||||
|
||||
## Artificial Analysis
|
||||
|
||||
웹사이트: <https://artificialanalysis.ai/>
|
||||
|
||||
Artificial Analysis는 “효과 / 가격 / 속도”를 같은 표에서 비교하는 데 더 적합합니다. 모델 선택을 위한 매개변수 표로 볼 수 있습니다.
|
||||
|
||||
자주 쓰는 방법은 다음과 같습니다.
|
||||
|
||||
1. 관심 있는 모델 범주를 찾습니다. 텍스트 / 이미지 생성 등.
|
||||
2. 품질 지표(Quality) + 가격(Price) + 지연/처리량(Latency/Throughput)을 봅니다.
|
||||
3. 제품에 가장 잘 맞는 “종합 가성비” 모델을 선택합니다.
|
||||
|
||||
::: tip ✅ 제안
|
||||
“어떤 모델이 더 강한가”를 감으로 논쟁하지 마세요. 더 믿을 만한 방법은 같은 입력 묶음으로 2-3개 모델을 동시에 테스트하고, 순위표와 가격을 함께 고려해 결정하는 것입니다.
|
||||
:::
|
||||
|
||||
## 요약
|
||||
|
||||
여러 AI 서비스를 연결할 때 API를 지나치게 복잡하게 생각할 필요는 없습니다. 다음 몇 가지 핵심 개념만 잡으면 대부분의 장면에 대응할 수 있습니다.
|
||||
|
||||
**API의 본질은 통신 다리입니다.** 하는 일은 간단합니다. 당신의 요청을 보내고, 모델의 응답을 다시 가져옵니다. 뒤에서 무슨 일이 일어나는지 신경 쓸 필요는 없습니다. 요청 형식만 올바르게 구성하면 됩니다.
|
||||
|
||||
**SDK는 API의 포장입니다.** API가 raw 인터페이스라면, SDK는 준비된 도구 상자입니다. 요청 서명, 오류 처리, 파라미터 검증 같은 번거로운 세부 사항을 대신 처리합니다. 일상 개발에서는 직접 API를 호출하기보다 SDK를 우선 선택하면 많은 번거로움을 줄일 수 있습니다.
|
||||
|
||||
**문서를 읽을 때는 세 가지만 보면 충분합니다**. 서비스 주소(endpoint), 신원 증명(API key), 그리고 호출 파라미터를 어떻게 채우는지입니다. 이 세 가지를 명확히 하면 연결은 시간문제입니다.
|
||||
|
||||
나머지 작업은 IDE와 현대적인 개발 도구가 도와줄 것입니다. 비즈니스 로직에 집중하고, 하위 호출은 성숙한 SDK와 도구 체인에 맡기세요.
|
||||
|
||||
# 5. 📚 과제: 첫 번째 AI 능력 통합하기
|
||||
|
||||
<el-card shadow="hover" style="margin: 20px 0; border-radius: 12px;">
|
||||
<template #header>
|
||||
<div style="font-weight: bold; font-size: 16px;">🚀 도전 과제: AI 능력을 워크벤치에 통합하기</div>
|
||||
</template>
|
||||
|
||||
<p>
|
||||
이번 수업의 프롬프트와 내용을 참고해 한 번의 완전한 폐쇄 루프를 완성하세요.
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<strong>완전한 폐쇄 루프 실습</strong>
|
||||
<ul>
|
||||
<li>AI 서비스 하나 선택 및 연결(LLM / 텍스트-이미지 / 이미지-이미지) → 프론트엔드와 백엔드 상호작용 구현 → 프로토타입에 통합</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>결과 공유</strong>
|
||||
<ul>
|
||||
<li>기능 페이지를 스크린샷으로 찍어 모두에게 공유하세요.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<strong>생각해 볼 질문</strong>
|
||||
<ul>
|
||||
<li>다음 절 “전체 프로젝트 실습”을 위한 공간을 남겨 두고 미리 생각해 보세요. 이 AI 능력들을 어떻게 조합해서 어떤 재미있는 기능을 만들 계획인가요?</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</el-card>
|
||||
|
||||
## 다음 단계
|
||||
|
||||
다음 절에서는 흩어진 AI 능력들을 연결하고, 실제 비즈니스 장면과 결합해 완전한 제품 하나를 만듭니다.
|
||||
|
||||
- 콘텐츠 기획, 상품 등록, 데이터 분석 등의 단계를 하나의 완전한 비즈니스 흐름으로 연결하기
|
||||
- 이번 수업에서 배운 AI 능력(LLM 문구 생성, 텍스트-이미지, 이미지 편집 등)을 실제 비즈니스 지점에 삽입하기
|
||||
- 고립된 demo가 아니라 진짜 사용할 수 있는 “이커머스 AI 워크벤치” 구현하기
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="관련 글"
|
||||
description="“단일 AI 능력”에서 “완전한 제품 흐름”으로 이어지는 추천 학습 경로입니다."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,274 @@
|
||||
---
|
||||
title: '아이디어에서 AI 제품까지 - Easy-Vibe 학습 로드맵'
|
||||
description: 'AI 프로그래밍을 배우기 위한 전체 로드맵: 제로 베이스에서 풀스택 개발까지. Vibe Coding, Claude Code, Cursor 같은 AI IDE 도구를 익히고, 제품 사고, 풀스택 개발, AI 기능 통합을 배웁니다.'
|
||||
---
|
||||
|
||||
<script setup>
|
||||
import { relatedArticlesMap } from '@theme/data/relatedArticles'
|
||||
|
||||
const relatedArticles = relatedArticlesMap['ko-kr/stage-1/learning-map'] ?? []
|
||||
</script>
|
||||
|
||||
# 아이디어에서 AI 제품까지
|
||||
|
||||
예전에는 소프트웨어를 만들기 위한 문턱이 높았습니다. 프로그래밍을 알아야 했고, 알고리즘도 알아야 했고, 몇 년의 프로젝트 경험도 필요했습니다.
|
||||
지금은 다릅니다. 아이디어만 있다면 AI가 코드를 작성하도록 도와줄 수 있습니다.
|
||||
|
||||
이것은 거대한 변화입니다. **프로그래밍 언어가 자연어로 변하고 있습니다**.
|
||||
|
||||
대형 언어 모델(LLM)의 등장은 개발을 더 이상 "기술 고수만의 전유물"이 아니라, 누구나 시작할 수 있는 도구로 바꾸었습니다. 예전에는 가장 어려운 것이 "코드를 어떻게 쓰는가"였다면, 지금 가장 어려운 것은 "**무엇을 만들 것인가**"입니다.
|
||||
|
||||
> **Vibe Coding이란 무엇인가요?**
|
||||
> 간단히 말하면 "말로 하는 프로그래밍"입니다. Vibe Coding은 직접 코드를 쓰는 대신 AI와 대화하는 방식에 의존해 프로그래밍 프로젝트를 완성하는 것을 뜻합니다.
|
||||
|
||||
물론 AI가 코드를 쓰게 하는 것은 첫걸음일 뿐입니다. 정말 사용할 수 있는 제품을 만들려면 다음과 같은 문제도 만나게 됩니다.
|
||||
|
||||
- AI가 깨끗하고 유지보수 가능한 코드를 쓰게 하려면 어떻게 해야 할까?
|
||||
- 흩어진 코드 조각을 실행 가능한 애플리케이션으로 어떻게 조립할까?
|
||||
- 애플리케이션을 실제로 배포하고 사람들이 쓰게 하려면 어떻게 해야 할까?
|
||||
- 텍스트 생성, 이미지 인식 같은 AI 기능을 내 제품에 어떻게 넣을까?
|
||||
|
||||
이 질문들은 이 강의 안에서 답을 찾게 됩니다.
|
||||
|
||||
학생이든, 교사든, 의사든, 노동자든, 기술을 전혀 모르는 평범한 사람이든 상관없습니다. 몇 년씩 프로그래밍을 먼저 배울 필요 없이, 2주면 실행되고 시연할 수 있는 제품 프로토타입을 만들 수 있습니다.
|
||||
|
||||
| 당신의 정체성 | 이 강의가 도와줄 수 있는 것 |
|
||||
|---------|-------------|
|
||||
| 학생 | 과제, 대회, 창업 프로젝트를 직접 만들고 더 이상 남에게 부탁하지 않기 |
|
||||
| 직장인 | 반복 업무를 자동화하고, 효율을 높이며, 부업까지 개발하기 |
|
||||
| 제품 관리자 / 디자이너 | 아이디어가 종이에 머물지 않고, 상사나 고객에게 보여 줄 Demo를 빠르게 만들기 |
|
||||
| 창업자 / 중소기업 운영자 | 저비용으로 아이디어를 검증하고, 수만 위안을 들여 외주를 맡기지 않아도 MVP 만들기 |
|
||||
| 교사 / 교육 종사자 | 교육 도구, 수업 자료, 자동 문제 출제를 만들어 교육 효율 높이기 |
|
||||
| 의사 / 변호사 / 전문직 | 전문 업무 흐름을 자동화하고 자신만의 효율 도구 만들기 |
|
||||
| 누구나 | AI로 생활과 업무의 구체적인 문제를 해결하고, 불가능해 보였던 일을 가능하게 만들기 |
|
||||
|
||||
AI 시대에는 실행력과 아이디어가 언제나 기술보다 더 중요합니다.
|
||||
|
||||
## 성장 경로: "AI를 쓸 줄 아는 사람"에서 "AI 제품을 만들 줄 아는 사람"으로
|
||||
|
||||
<div class="stage-intro">
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🎮</div>
|
||||
<h3>초보자 입문</h3>
|
||||
<p class="stage-role">AI 프로그래밍 체험</p>
|
||||
<div class="stage-tags">
|
||||
<span>스네이크 미니게임</span>
|
||||
<span>제로 베이스 시작</span>
|
||||
<span>Vibecoding 첫 경험</span>
|
||||
<span>몇 분 만에 생성</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stage-grid">
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🛠️</div>
|
||||
<h3>1단계</h3>
|
||||
<p class="stage-role">제품 관리자 / 운영</p>
|
||||
<div class="stage-tags">
|
||||
<span>AI IDE (Cursor/Claude)</span>
|
||||
<span>요구사항 분해 & 프로토타입</span>
|
||||
<span>AI 기능 접목</span>
|
||||
<span>완성 Demo 개발</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">💻</div>
|
||||
<h3>2단계</h3>
|
||||
<p class="stage-role">초중급 개발자 / 독립 개발자</p>
|
||||
<div class="stage-tags">
|
||||
<span>Figma에서 코드로</span>
|
||||
<span>Supabase 데이터베이스</span>
|
||||
<span>Stripe 결제 통합</span>
|
||||
<span>Dify 지식베이스</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stage-card">
|
||||
<div class="stage-icon">🚀</div>
|
||||
<h3>3단계</h3>
|
||||
<p class="stage-role">고급 개발자 / 아키텍트</p>
|
||||
<div class="stage-tags">
|
||||
<span>Web/미니프로그램/멀티 플랫폼</span>
|
||||
<span>MCP 고급 도구</span>
|
||||
<span>RAG & LangGraph</span>
|
||||
<span>시니어 엔지니어 사고방식</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.stage-intro {
|
||||
margin: 20px auto;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.stage-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 12px;
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.stage-card {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 12px;
|
||||
background-color: var(--vp-c-bg-soft);
|
||||
transition: all 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.stage-card:hover {
|
||||
transform: translateY(-2px);
|
||||
background-color: var(--vp-c-bg-mute);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
|
||||
border-color: var(--vp-c-brand);
|
||||
}
|
||||
|
||||
.stage-icon {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 8px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stage-card h3 {
|
||||
margin: 0 0 4px 0 !important;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.stage-role {
|
||||
margin: 0 0 8px 0 !important;
|
||||
font-size: 0.8rem;
|
||||
color: var(--vp-c-text-2);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stage-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.stage-tags span {
|
||||
font-size: 0.7rem;
|
||||
padding: 1px 6px;
|
||||
border-radius: 3px;
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
color: var(--vp-c-text-2);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
}
|
||||
|
||||
.stage-card:hover .stage-tags span {
|
||||
background-color: var(--vp-c-bg);
|
||||
border-color: var(--vp-c-brand-dimm);
|
||||
color: var(--vp-c-brand-dark);
|
||||
}
|
||||
</style>
|
||||
|
||||
이 완성된 학습 경로를 통해 당신은 다음을 얻게 됩니다.
|
||||
|
||||
- **Vibe Coding 개발 능력:** Vibecoding 사고방식과 AI 코딩 도구를 능숙하게 사용해 개발 효율을 몇 배로 높입니다. 더 이상 문법을 억지로 외우는 것이 아니라, AI가 고품질 코드를 생성하도록 이끄는 방법을 배웁니다.
|
||||
- **풀스택 개발 역량:** UI 디자인에서 프론트엔드 구현까지, 데이터베이스 설계에서 API 개발까지, 로컬 개발에서 클라우드 배포까지 현대 Web 애플리케이션의 전체 기술 스택을 익힙니다.
|
||||
- **AI 기능 통합:** 다양한 멀티모달 AI API를 호출하는 법을 배우고, 텍스트, 이미지, 음성 등 AI 기능을 애플리케이션에 매끄럽게 통합하며, RAG 같은 기술로 지능형 제품을 구축합니다.
|
||||
- **제품 사고와 운영 능력:** 사용자 조사에서 요구사항 분해까지, MVP 설계에서 제품 반복 개선까지, 결제 통합에서 사용자 관리까지, 완전한 제품 개발과 운영의 폐쇄 루프를 형성합니다.
|
||||
|
||||
# 다 배우고 나면 무엇을 할 수 있나요?
|
||||
|
||||
## 1단계: 나의 첫 제품 프로토타입 만들기
|
||||
|
||||
이 단계는 프로그래밍 기초가 전혀 없거나, 조금은 알지만 자신감이 부족한 사람에게 적합합니다. 이론 지식을 잔뜩 먼저 배울 필요 없이, 바로 따라 만들면서 AI 도구로 코드를 작성하는 법을 배웁니다.
|
||||
|
||||
**배우고 나면 할 수 있는 것**:
|
||||
|
||||
- AI 프로그래밍 도구로 웹 애플리케이션 하나를 독립적으로 완성하기
|
||||
- 제품 아이디어를 클릭 가능하고 상호작용 가능한 프로토타입으로 바꾸기
|
||||
- 프로토타입에 AI 기능 추가하기. 예: 텍스트로 이미지 만들기, 지능형 대화
|
||||
- 오류가 났을 때 어떻게 확인하고 해결해야 하는지 알기
|
||||
|
||||
간단히 말하면, "실행되고, 다른 사람에게 시연할 수 있는" 무언가를 만들 수 있게 됩니다.
|
||||
|
||||
먼저 미니게임으로 AI 프로그래밍을 체감하고, AI 프로그래밍 도구가 코드를 작성하고 오류를 고치도록 도와주는 법을 배웁니다. 이어서 간단한 페이지에서 시작해 점차 상호작용 가능한 다중 페이지 애플리케이션을 만들고, 텍스트-이미지 생성, 지능형 대화 같은 AI 기능을 더합니다. 마지막에는 독립적으로 완성 프로젝트를 끝내며, 당신의 아이디어가 실제로 구현될 가능성을 갖게 됩니다.
|
||||
|
||||
# 왜 프로젝트 기반으로 훈련해야 할까요?
|
||||
|
||||
> **현실 세계의 도전**
|
||||
>
|
||||
> 이유는 사실 간단합니다. 대부분의 학습자가 현재 상태로 바로 직장에 들어가면, 실제 프로젝트와 상사/고객의 "사회적 혹독함" 앞에서 한 걸음도 나아가기 어려울 가능성이 큽니다. 현실 세계에서 더 흔한 장면은 이렇습니다.
|
||||
|
||||
> 지도교수 / 상사: 우리는 xxx를 만들려고 해. 목표는 yyy 효과를 내는 거야.
|
||||
>
|
||||
> 문서? 준비된 프레임워크? 상세한 요구사항 설명? 많은 경우 존재하지 않습니다.
|
||||
|
||||
실제 업무 속 많은 과제는 본질적으로 높은 불확실성 속에서 한 번도 본 적 없는 문제를 해결하는 일입니다. 요구사항은 모호하고, 경계는 계속 변하며, 누구도 정답을 알려 주지 않습니다. 스스로 자료를 찾고, 실험하고, 프로토타입을 만들고, 계속 반복 개선한 끝에 "실행되고, 사용할 수 있고, 배포 가능한" 해결책을 내놓아야 합니다.
|
||||
|
||||
이 강의가 하려는 일은 비교적 안전한 환경에서 미리 한 번 "모의 사회적 혹독함"을 겪게 하는 것입니다.
|
||||
|
||||
- 어느 정도 난이도가 있어 보이는 프로젝트 과제를 통해 문제를 분해하고, 방안을 설계하고, 스스로 자료를 찾는 연습을 강제합니다.
|
||||
- 지나치게 "따라 하기만 하면 되는" 스캐폴딩과 코드가 아니라, 중대형 코드베이스를 읽고 이해하고 고치는 법을 배우게 합니다.
|
||||
- 아이디어에서 배포까지 이어지는 완전한 폐쇄 루프를 통해 실제 제품이 0에서 1로 만들어지는 전체 과정을 경험하게 합니다.
|
||||
|
||||
단기적으로는 이런 훈련이 꽤 고통스러울 수 있습니다. 하지만 장기적으로는 구직과 커리어 성장에서 경쟁력을 크게 높여 줍니다. 더 큰 일을 감당할 수 있고, 불확실한 환경에서 돌파구를 찾을 수 있으며, AI를 "Demo를 가지고 노는 단계"에 머물게 하지 않고 실제 제품으로 구현할 능력을 갖추게 됩니다.
|
||||
|
||||
# 질문의 기술: AI 시대의 필수 역량
|
||||
|
||||
AI 시대에는 질문도 일종의 "기본기"입니다. 같은 코드, 같은 오류라도 **어떻게 질문하느냐가 AI가 어떤 답을 줄 수 있는지를 거의 결정합니다**. 두루뭉술한 설명으로 끝날지, 아니면 단계별로 실행 가능한 수정 방법을 줄지가 달라집니다.
|
||||
|
||||
**좋은 습관을 들이세요**: "AI에게 질문하기"를 일상적인 개발 흐름의 일부로 생각하세요. 이해가 안 되거나 막히는 문제가 생기면 바로 질문합니다.
|
||||
|
||||
## 왜 이것이 필수 역량인가요?
|
||||
|
||||
- **현실에는 완전한 문서가 드뭅니다**: 더 자주 마주하는 것은 불명확한 요구사항, 반쯤 만들어진 코드, 흩어진 오류 정보입니다.
|
||||
- **AI는 당신 곁의 멘토이자 동료입니다**: 질문을 잘하는 사람은 AI를 "고품질 페어 프로그래밍 파트너"로 만들 수 있습니다.
|
||||
- **능력의 상한은 소통이 결정합니다**: 핵심 정보를 더 잘 제공하고, 출력 형식을 더 잘 제한할수록 답변은 더 쓸모 있어집니다.
|
||||
|
||||
**흔한 오해**: "왜 오류가 나나요?"라고 한마디만 물으면 대부분 추측만 잔뜩 받게 됩니다. 맥락을 채워 넣어야 실행 가능한 방안을 얻습니다.
|
||||
|
||||
## 정보를 AI에게 "먹이는" 방법: 스크린샷 vs 복사/붙여넣기
|
||||
|
||||
두 방식 모두 가능하지만 용도가 다릅니다.
|
||||
|
||||
| 방식 | 적합한 상황 | 핵심 요구사항 |
|
||||
| ------------ | ----------------------------------------- | ----------------------------------------- |
|
||||
| **복사/붙여넣기** | 오류 스택, 로그, 코드, 설정, API 응답 | 가능한 한 완전하게. 핵심 키워드 한 줄만 자르지 않기 |
|
||||
| **스크린샷** | UI 레이아웃 문제, 상호작용 이상, 도구 화면에서 버튼을 찾기 어려운 경우 | 전체 화면 캡처 + 중요 영역 표시. 가능하면 짧은 설명 한 문장 추가 |
|
||||
|
||||
::: danger ⚠️ 중요한 전제
|
||||
**모든 AI가 이미지 입력을 지원하는 것은 아닙니다.** 스크린샷으로 소통하려면 AI가 멀티모달 능력, 즉 이미지를 이해하고 분석할 수 있는 능력을 갖춰야 합니다. 현재 이미지 입력을 지원하는 AI에는 Claude(Anthropic), GPT-4V/GPT-4o(OpenAI), Gemini(Google), 그리고 일부 중국산 대형 모델인 Tongyi Qianwen, Wenxin Yiyan 등이 있습니다.
|
||||
|
||||
**사용 중인 AI가 이미지 입력을 지원하지 않는다면** 스크린샷은 인식되지 않습니다. 이때는 복사/붙여넣기로 텍스트를 전달하세요.
|
||||
:::
|
||||
|
||||
## AI가 "잘 설명하게" 만드는 프롬프트 기법
|
||||
|
||||
정답만 필요한 것이 아니라 답을 "배우고" 싶다면, 아래와 같은 지시를 쓰면 설명 품질이 크게 올라갑니다.
|
||||
|
||||
> **학습형 질문 예시**
|
||||
>
|
||||
> - "먼저 이 개념을 5문장으로 명확하게 설명한 뒤, 제가 제대로 이해했는지 확인할 질문을 몇 개 해 주세요."
|
||||
> - "이 오류 메시지를 자세히 설명해 주세요. 왜 오류가 나는지 이해가 안 됩니다."
|
||||
|
||||
# 오래 버텼는데도 해결이 안 됩니다. 포기하고 싶어요
|
||||
|
||||
어쩌면 버티는 방법이 맞지 않았을 수 있습니다. 혼자 어둠 속에서 억지로 버티지 말고, 작성자와 조교들에게 이야기해 보세요. 이미 시도한 방법, 만난 구체적인 막힘, 현재의 심리 상태를 솔직하게 말해 주세요. 많은 경우 방향을 조금만 조정하거나 핵심 지식 하나만 보충해도 계속 앞으로 나아갈 수 있습니다.
|
||||
|
||||
# 튜토리얼 설계가 합리적이지 않은 것 같아요
|
||||
|
||||
언제든 작성자에게 연락하거나 issue를 제출하거나, 그룹/수업에서 직접 피드백해 주세요. 우리는 여러분과 함께 이 튜토리얼을 점점 더 좋게 다듬고 싶습니다. 어디가 명확하지 않은지, 어디의 경험이 좋지 않은지, 어디에서 헛수고를 하게 되었는지 솔직하게 지적해 주세요. 더 실제적이고 구체적인 피드백일수록 뒤에 오는 학습자가 덜 헤매도록 도와줍니다.
|
||||
|
||||
# Reference
|
||||
|
||||
- [난징대학교 컴퓨터과학기술학과 컴퓨터 시스템 기초 과정 실험](https://nju-projectn.github.io/ics-pa-gitbook/ics2025/)
|
||||
|
||||
<RelatedArticlesSection
|
||||
title="다음에 무엇을 배울 수 있나요"
|
||||
description="'AI를 쓸 줄 아는 단계'에서 '제품을 만들 줄 아는 단계'로 계속 앞으로 나아갑니다."
|
||||
:items="relatedArticles"
|
||||
/>
|
||||
|
||||
+37
-19
@@ -772,147 +772,165 @@
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/ai-capabilities-through-games/</loc>
|
||||
<lastmod>2026-04-02T13:48:55+08:00</lastmod>
|
||||
<lastmod>2026-05-11T17:11:47+09:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/ai-capabilities-through-games/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/ai-capabilities-through-games/"/>
|
||||
<xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/ai-capabilities-through-games/"/>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-a-product-thinking/</loc>
|
||||
<lastmod>2026-03-06T21:59:45+08:00</lastmod>
|
||||
<lastmod>2026-05-11T17:11:47+09:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-a-product-thinking/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-a-product-thinking/"/>
|
||||
<xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-a-product-thinking/"/>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial/</loc>
|
||||
<lastmod>2026-03-06T17:59:01+08:00</lastmod>
|
||||
<lastmod>2026-05-11T17:11:47+09:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial/"/>
|
||||
<xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-articles/example0-1/vibe-coding-tools-snake-game-tutorial/"/>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents/</loc>
|
||||
<lastmod>2026-02-26T09:33:06+08:00</lastmod>
|
||||
<lastmod>2026-05-11T17:11:47+09:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents/"/>
|
||||
<xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-articles/example0-2/vibe-coding-tools-build-website-with-ai-coding-and-design-agents/"/>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-b-common-errors/</loc>
|
||||
<lastmod>2026-03-06T17:59:01+08:00</lastmod>
|
||||
<lastmod>2026-05-11T17:11:47+09:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-b-common-errors/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-b-common-errors/"/>
|
||||
<xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-b-common-errors/"/>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-c-consumer-scenarios/</loc>
|
||||
<lastmod>2026-03-06T17:59:01+08:00</lastmod>
|
||||
<lastmod>2026-05-11T17:11:47+09:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-c-consumer-scenarios/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-c-consumer-scenarios/"/>
|
||||
<xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-c-consumer-scenarios/"/>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-consumer-scenarios/</loc>
|
||||
<lastmod>2026-03-25T00:28:36+08:00</lastmod>
|
||||
<lastmod>2026-05-11T15:22:02+09:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-consumer-scenarios/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-consumer-scenarios/"/>
|
||||
<xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-consumer-scenarios/"/>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-double-diamond/</loc>
|
||||
<lastmod>2026-03-25T23:02:33+08:00</lastmod>
|
||||
<lastmod>2026-05-11T17:11:47+09:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-double-diamond/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-double-diamond/"/>
|
||||
<xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-double-diamond/"/>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-idea-sources/</loc>
|
||||
<lastmod>2026-03-25T23:02:33+08:00</lastmod>
|
||||
<lastmod>2026-05-11T17:11:47+09:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-idea-sources/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-idea-sources/"/>
|
||||
<xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-idea-sources/"/>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-industry-scenarios/</loc>
|
||||
<lastmod>2026-03-25T00:28:36+08:00</lastmod>
|
||||
<lastmod>2026-05-11T17:11:47+09:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-industry-scenarios/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-industry-scenarios/"/>
|
||||
<xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-industry-scenarios/"/>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-jobs-to-be-done/</loc>
|
||||
<lastmod>2026-03-25T23:02:33+08:00</lastmod>
|
||||
<lastmod>2026-05-11T17:11:47+09:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-jobs-to-be-done/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-jobs-to-be-done/"/>
|
||||
<xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-jobs-to-be-done/"/>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-mom-test/</loc>
|
||||
<lastmod>2026-03-25T23:02:33+08:00</lastmod>
|
||||
<lastmod>2026-05-11T17:11:47+09:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/appendix-mom-test/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/appendix-mom-test/"/>
|
||||
<xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/appendix-mom-test/"/>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/building-prototype/</loc>
|
||||
<lastmod>2026-04-02T13:48:55+08:00</lastmod>
|
||||
<lastmod>2026-05-11T17:11:47+09:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/building-prototype/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/building-prototype/"/>
|
||||
<xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/building-prototype/"/>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/complete-project-practice/</loc>
|
||||
<lastmod>2026-04-02T13:48:55+08:00</lastmod>
|
||||
<lastmod>2026-05-11T17:11:47+09:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/complete-project-practice/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/complete-project-practice/"/>
|
||||
<xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/complete-project-practice/"/>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/finding-great-idea/</loc>
|
||||
<lastmod>2026-04-02T13:48:55+08:00</lastmod>
|
||||
<lastmod>2026-05-11T17:11:47+09:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/finding-great-idea/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/finding-great-idea/"/>
|
||||
<xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/finding-great-idea/"/>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/integrating-ai-capabilities/</loc>
|
||||
<lastmod>2026-04-02T13:48:55+08:00</lastmod>
|
||||
<lastmod>2026-05-11T17:11:47+09:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/integrating-ai-capabilities/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/integrating-ai-capabilities/"/>
|
||||
<xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/integrating-ai-capabilities/"/>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/introduction-to-ai-ide/</loc>
|
||||
<lastmod>2026-04-02T13:48:55+08:00</lastmod>
|
||||
<lastmod>2026-05-11T17:11:47+09:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/introduction-to-ai-ide/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/introduction-to-ai-ide/"/>
|
||||
<xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/introduction-to-ai-ide/"/>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/</loc>
|
||||
<lastmod>2026-04-02T13:48:55+08:00</lastmod>
|
||||
<lastmod>2026-05-11T17:11:47+09:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.9</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-1/learning-map/"/>
|
||||
<xhtml:link rel="alternate" hreflang="en" href="https://datawhalechina.github.io/easy-vibe/en/stage-1/learning-map/"/>
|
||||
<xhtml:link rel="alternate" hreflang="ko" href="https://datawhalechina.github.io/easy-vibe/ko-kr/stage-1/learning-map/"/>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/ai-capabilities/dify-knowledge-base/</loc>
|
||||
@@ -1044,7 +1062,7 @@
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/database-supabase/</loc>
|
||||
<lastmod>2026-04-02T13:48:55+08:00</lastmod>
|
||||
<lastmod>2026-04-19T17:04:12+08:00</lastmod>
|
||||
<changefreq>weekly</changefreq>
|
||||
<priority>0.8</priority>
|
||||
<xhtml:link rel="alternate" hreflang="zh-CN" href="https://datawhalechina.github.io/easy-vibe/zh-cn/stage-2/backend/database-supabase/"/>
|
||||
|
||||
Reference in New Issue
Block a user