forked from kisdevan/lginnotek
-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
220 lines (200 loc) · 17.3 KB
/
Copy pathindex.html
File metadata and controls
220 lines (200 loc) · 17.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 활용 역량 7단계 프레임워크</title>
<!-- 디자인을 위한 Tailwind CSS 불러오기 -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- React를 브라우저에서 바로 실행하기 위한 스크립트 -->
<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<!-- JSX 문법을 브라우저가 이해하게 변환해주는 Babel 스크립트 -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body class="bg-gray-50 font-sans">
<!-- 리액트 앱이 화면에 그려질 빈 공간 -->
<div id="root"></div>
<!-- 여기서부터 실제 동작하는 코드 (type="text/babel"이 핵심) -->
<script type="text/babel">
const { useState } = React;
// 외부 아이콘 패키지 대신 직접 그린 아이콘(SVG) 데이터
const IconUser = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>;
const IconTerminal = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/></svg>;
const IconBrainCircuit = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.54 4 4 0 1 0 7.967 0 4 4 0 0 0 .556-6.54A4 4 0 0 0 12 5Z"/><path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.54 4 4 0 1 1-7.967 0 4 4 0 0 1-.556-6.54A4 4 0 0 1 12 5Z"/><path d="M12 20v-2"/><path d="M12 10v-2"/><path d="M9 14h6"/></svg>;
const IconDatabase = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></svg>;
const IconLayers = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 12 12 17 22 12"/><polyline points="2 17 12 22 22 17"/></svg>;
const IconBlocks = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>;
const IconCpu = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg>;
const IconZap = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>;
const IconArrowRight = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>;
const IconSettings = ({className}) => <svg className={className} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>;
const levels = [
{
id: 1, name: "단순 사용자", en: "Naïve User", color: "bg-slate-100", activeColor: "bg-slate-500", textColor: "text-slate-700",
icon: <IconUser className="w-6 h-6" />,
summary: "AI를 단순 검색 엔진이나 번역기처럼 사용하는 기초 단계",
details: {
prompt: "단답형 질문이나 단어 위주의 짧은 명령을 입력합니다.",
context: "이전 대화의 맥락을 고려하지 않고 매번 새로운 질문을 던지며 결과만 요구합니다.",
harness: "웹 브라우저에서 챗봇 인터페이스에 직접 타이핑하는 수준입니다."
}
},
{
id: 2, name: "기초 프롬프트 엔지니어", en: "Basic Prompter", color: "bg-blue-100", activeColor: "bg-blue-500", textColor: "text-blue-700",
icon: <IconTerminal className="w-6 h-6" />,
summary: "AI가 더 나은 답변을 하도록 질문의 형태를 가다듬는 단계",
details: {
prompt: "페르소나(역할) 부여, 출력 형식 지정(표, 개조식), 구체적인 조건 지시를 할 수 있습니다.",
context: "멀티 턴(Multi-turn) 대화를 통해 추가 질문을 하며 답변을 좁혀나갑니다.",
harness: "웹 인터페이스 내에서 여러 세션(채팅방)을 목적에 맞게 분리하고 관리합니다."
}
},
{
id: 3, name: "심화 프롬프트 엔지니어", en: "Advanced Prompter", color: "bg-indigo-100", activeColor: "bg-indigo-500", textColor: "text-indigo-700",
icon: <IconBrainCircuit className="w-6 h-6" />,
summary: "논리적 추론을 유도하는 기법을 이해하고 적용하는 단계",
details: {
prompt: "Few-Shot(예시 제공), CoT(단계별 추론 지시) 등 논리적 프롬프팅 기법을 활용합니다.",
context: "장문의 텍스트나 문서를 직접 복사/붙여넣기 하여 배경 지식을 바탕으로 지시합니다.",
harness: "자주 쓰는 프롬프트를 템플릿화하여 노션 등에 저장해 두고 재사용합니다."
}
},
{
id: 4, name: "기초 컨텍스트 설계자", en: "Context Shaper", color: "bg-purple-100", activeColor: "bg-purple-500", textColor: "text-purple-700",
icon: <IconDatabase className="w-6 h-6" />,
summary: "외부 데이터와 맥락을 적극적으로 주입하여 답변을 제어하는 단계",
details: {
prompt: "할루시네이션(환각)을 통제하기 위해 범위 제한 및 예외 처리 프롬프트를 능숙하게 작성합니다.",
context: "파일 업로드를 활용하고, 토큰 제한(Context Window)을 이해하여 입력 데이터 양을 조절합니다.",
harness: "Custom Instructions나 System Prompt를 설정하여 AI의 기본 동작 방식을 사전 세팅합니다."
}
},
{
id: 5, name: "워크플로우 설계자", en: "Context Integrator", color: "bg-fuchsia-100", activeColor: "bg-fuchsia-500", textColor: "text-fuchsia-700",
icon: <IconLayers className="w-6 h-6" />,
summary: "AI를 외부 지식 베이스 및 다른 도구와 결합하기 시작하는 단계",
details: {
prompt: "API/시스템에 전달될 시스템 프롬프트와 유저 프롬프트를 명확히 구분하여 설계합니다.",
context: "RAG(검색 증강 생성)의 개념과 아키텍처를 이해하여 외부 데이터베이스 연동의 필요성을 압니다.",
harness: "Zapier, Make 등 노코드 툴을 활용하거나 GPTs를 만들어 반복 업무를 자동화합니다."
}
},
{
id: 6, name: "AI 파이프라인 빌더", en: "Harness Builder", color: "bg-rose-100", activeColor: "bg-rose-500", textColor: "text-rose-700",
icon: <IconBlocks className="w-6 h-6" />,
summary: "코드를 활용해 AI 작업 환경을 구축하고 자동화하는 단계",
details: {
prompt: "AI가 스스로 판단하여 도구(Function Calling / Tool Use)를 사용할 수 있도록 유도합니다.",
context: "RAG 시스템을 직접 구현(벡터 DB 활용, 청킹 전략 수립 등)하여 컨텍스트 파이프라인을 최적화합니다.",
harness: "Python과 LangChain 등을 사용하여 단일 프롬프트가 아닌 '연속된 AI 작업 체인'을 구축합니다."
}
},
{
id: 7, name: "AI 시스템 아키텍트", en: "System Architect", color: "bg-orange-100", activeColor: "bg-orange-500", textColor: "text-orange-700",
icon: <IconCpu className="w-6 h-6" />,
summary: "독립적이고 안정적인 에이전트 시스템을 설계하고 평가하는 최고 수준",
details: {
prompt: "복잡한 에이전트 워크플로우를 위한 메타 프롬프트를 설계하고, 보안/인젝션 방어 로직을 구성합니다.",
context: "무한한 맥락을 처리하기 위해 메모리 관리 체계(단기/장기 분리 등)를 시스템적으로 설계합니다.",
harness: "자율형 AI 에이전트를 구축하고, LLM-as-a-Judge 기법 등을 활용해 자체 평가 시스템을 개발합니다."
}
}
];
function App() {
const [selectedLevel, setSelectedLevel] = useState(levels[0]);
return (
<div className="min-h-screen bg-gray-50 p-4 md:p-8 font-sans">
<div className="max-w-6xl mx-auto space-y-6">
{/* Header */}
<div className="bg-white p-6 rounded-2xl shadow-sm border border-gray-100 text-center">
<h1 className="text-3xl md:text-4xl font-bold text-gray-800 mb-2">AI 활용 역량 7단계 프레임워크</h1>
<p className="text-gray-500">프롬프트, 컨텍스트, 하네스 엔지니어링을 기준으로 본 역량 성숙도 모델</p>
</div>
<div className="flex flex-col lg:flex-row gap-6">
{/* Left Column: The Roadmap */}
<div className="w-full lg:w-1/3 space-y-3">
<h2 className="text-lg font-semibold text-gray-700 px-2 mb-4">역량 발전 단계</h2>
<div className="flex flex-col gap-3 relative">
<div className="absolute left-6 top-6 bottom-6 w-0.5 bg-gray-200 z-0"></div>
{levels.map((level) => (
<button
key={level.id}
onClick={() => setSelectedLevel(level)}
className={`relative z-10 flex items-center p-4 rounded-xl transition-all duration-200 text-left w-full
${selectedLevel.id === level.id
? `${level.activeColor} text-white shadow-md transform scale-[1.02]`
: `bg-white hover:bg-gray-50 border border-gray-100 text-gray-600 hover:shadow-sm`
}`}
>
<div className={`flex items-center justify-center w-10 h-10 rounded-full shrink-0 mr-4
${selectedLevel.id === level.id ? 'bg-white/20' : level.color} ${selectedLevel.id !== level.id && level.textColor}`}>
{selectedLevel.id === level.id ? <IconZap className="w-5 h-5" /> : <span className="font-bold">{level.id}</span>}
</div>
<div className="flex-1">
<div className="text-sm opacity-80 font-medium">Level {level.id}</div>
<div className="font-bold text-lg">{level.name}</div>
</div>
{selectedLevel.id === level.id && <IconArrowRight className="w-5 h-5 opacity-70" />}
</button>
))}
</div>
</div>
{/* Right Column: Details Panel */}
<div className="w-full lg:w-2/3">
<div className="bg-white rounded-2xl shadow-lg border border-gray-100 p-6 md:p-8 sticky top-8 transition-all">
<div className="flex items-start gap-4 mb-8 border-b pb-6">
<div className={`p-4 rounded-2xl ${selectedLevel.color} ${selectedLevel.textColor}`}>
{selectedLevel.icon}
</div>
<div>
<div className="text-sm font-bold text-gray-400 mb-1">LEVEL {selectedLevel.id}</div>
<h2 className="text-2xl md:text-3xl font-bold text-gray-800 mb-2">{selectedLevel.name}</h2>
<p className="text-gray-500 italic">"{selectedLevel.en}"</p>
<p className="text-gray-700 mt-3 font-medium bg-gray-50 inline-block px-4 py-2 rounded-lg border border-gray-200">
{selectedLevel.summary}
</p>
</div>
</div>
<div className="space-y-4">
<div className="bg-slate-50 p-5 rounded-xl border border-slate-200 flex gap-4 items-start">
<div className="bg-slate-200 p-2 rounded-lg shrink-0 text-slate-700">
<IconTerminal className="w-6 h-6" />
</div>
<div>
<h3 className="font-bold text-slate-800 text-lg mb-1">프롬프트 엔지니어링</h3>
<p className="text-slate-600 leading-relaxed">{selectedLevel.details.prompt}</p>
</div>
</div>
<div className="bg-blue-50 p-5 rounded-xl border border-blue-200 flex gap-4 items-start">
<div className="bg-blue-200 p-2 rounded-lg shrink-0 text-blue-700">
<IconDatabase className="w-6 h-6" />
</div>
<div>
<h3 className="font-bold text-blue-800 text-lg mb-1">컨텍스트 엔지니어링</h3>
<p className="text-blue-600 leading-relaxed">{selectedLevel.details.context}</p>
</div>
</div>
<div className="bg-purple-50 p-5 rounded-xl border border-purple-200 flex gap-4 items-start">
<div className="bg-purple-200 p-2 rounded-lg shrink-0 text-purple-700">
<IconSettings className="w-6 h-6" />
</div>
<div>
<h3 className="font-bold text-purple-800 text-lg mb-1">하네스 엔지니어링</h3>
<p className="text-purple-600 leading-relaxed">{selectedLevel.details.harness}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
// React 앱 렌더링
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
</script>
</body>
</html>