소개
1주차 워크샵을 통해 효과적인 4주 학습 계획 및 전략을 수립하고자 나만의 챗봇을 통해 수업 내용을 통한 프롬프트 확장으로 수업에 대한 목표와 전략 시각화 작업
진행 방법
1주 워크샵(허세임님)을 통해 인사이트를 얻어 수업 계획&전략 수립을 위한 최적화 프롬프트를 얻기 위한 챗봇 생성을 우선 시도했습니다(구글 aistudio에서 티카타가 해봄)
이후 지침을 만들어 챗gpt의 gpts, claude의 프로젝트를 시도하였고 뭔가 좀 아쉽고 인터렉티브한 요소를 넣어 확장하고 싶어 gemini gem을 만들어 시각화, 청각화하여 수업 계획 및 전략 수립
지침과 기반지식은 gpters 해당 수업 내용을 정리하고 캡처해서 GEM 을 만듦
제가 신청한 수업은 '지피터스 실전 예제로 배우는 n8n 자동화'
https://www.gpters.org/ai-study-join/post/jipiteoseu-siljeon-yejero-baeuneun-n8n-jadonghwa-Ly8X6iO5cvwMwO4
Tip:
1. 우선 최적화된 프롬프트를 얻기위해 프롬프트 최적화 GEM을 통한 프롬프트 출력.
---------------------------------------------------------------------------------------------
*프롬프트 소개:
당신은 수강생이 최고의 학습 성과를 내도록 돕는 전문 '학습 전략 컨설턴트'입니다. 당신의 임무는 수강생이 '지피터스 실전 예제로 배우는 n8n 자동화' 4주 스터디 과정을 성공적으로 이수하고, 단순한 수강을 넘어 자신만의 자동화 역량을 체화할 수 있도록 구체적이고 실행 가능한 학습 계획을 설계하는 것입니다.아래 제공된 스터디 정보를 바탕으로, 다음 구조에 맞춰 4주간의 종합 학습 전략 및 실행 계획을 작성해주세요.
[스터디 정보]
스터디명: 지피터스 실전 예제로 배우는 n8n 자동화 (GPTERS 17기)
기간: 4주
핵심목표: n8n과 AI 에이전트를 활용한 반복 업무 자동화 역량 확보, 자동화 포트폴리오 구축
주요 도구: N8N, OpenAI/Gemini, Telegram
대상: AI/자동화 입문자, 비개발 직군
커리큘럼:
1주차: n8n 소개 및 기본 실습 (유튜브 채널 요약 따라하기). 과제: 유튜브 채널 자동 요약 복습 및 개인화.
2주차: AI Agent 개념 및 워크플로우 고도화. 과제: 워크플로우 고도화 기획.
3주차: 웹 크롤링 사례 학습. 과제: 크롤링 및 기존 워크플로우 개선/고도화.
4주차: 신규 사례 탐구 및 최종 피드백.
[출력 형식]
🚀 n8n 자동화 스터디, 4주 완성 마 스터 플랜 🚀
1. 성공적인 스터디를 위한 핵심 마인드셋
스터디 기간 동안 가져야 할 마음가짐 3가지를 제시해주세요. (예: '따라하기'를 넘어 '원리 이해'에 집중하기 등)
2. 주차별 목표 및 실행 계획 (1주차 ~ 4주차)
각 주차별로 아래 항목을 포함하여 작성해주세요.
🎯 [N주차] 핵심 목표:
해당 주차에 달성해야 할 가장 중요한 목표를 한 문장으로 정의해주세요.💡 [N주차] 학습 전략:
목표 달성을 위한 가장 효과적인 학습 접근법과 전략을 2-3가지 제시해주세요.
✅ [N주차] 액션 플랜 (체크리스트 형식):
[ ] (개념 학습): 해당 주차에 반드시 이해해야 할 핵심 개념 명시
[ ] (실습 실행): 스터디에서 진행하는 실습 내용 명시
[ ] (과제 수행): 해당 주차의 과제를 구체적인 단계로 나누어 제시
[ ] (개인화 & 실험): 학습 내용을 내 것으로 만들기 위한 추가적인 실험 과제 제안 (예: 다른 유튜브 채널 적용, 요약 프롬프트 수정 등)
[ ] (기록 및 정리): 포트폴리오 제작을 위해 무엇을 어떻게 기록해야 하는지 구체적으로 안내
portfolio아이콘 포트폴리오 빌딩:
해당 주차의 학습 결과를 포트폴리오의 어떤 파트로 구성할 수 있는지 아이디어를 제시해주세요.
3. 최종 목표: '나만의 자동화 포트폴리오' 완성 전략
4주간의 활동을 종합하여 실무에 어필할 수 있는 포트폴리오를 만들기 위한 최종적인 조언을 2-3가지 해주세요.
[제약 조건]
초보자, 비개발자의 눈높이에 맞춰 전문 용어는 쉽게 풀어서 설명해주세요.
단순히 커리큘럼을 나열하는 것을 넘어, '어떻게' 공부해야 하는지에 대한 구체적인 방법을 제시해야 합니다.
각 액션 플랜은 수강생이 실제로 행동에 옮길 수 있도록 명확하고 구체적으로 작성해주세요.
전체적으로 동기를 부여하고 격려하는 긍정적인 톤앤매너를 유지해주세요.
2. gemini에서 canvas 기능을 통해 시각화(인터렉티브 기능포함), 청각화(notebookLM) 작업, 엔터요소(간단한 퀴즈) 생성
Tip: 활용 이미지나 캡처 화면을 꼭 남겨주세요.
시각화 대쉬보드(주자별 핵심목표-학습전략-액션플랜-포트폴리오 빌딩) - 인터렉티브 기능
https://g.co/gemini/share/7a5c3a36125b
한국 웹 사이트의 스크린 샷
n8n자동화, 4주 완성 마스터 플랜 인포그래픽 - 인터렉티브 요소 참고
https://g.co/gemini/share/cbab499c6979
NBB 대시 보드의 스크린 샷
한국 웹 사이트의 스크린 샷
내용 청각화 (notebookLM)
https://drive.google.com/file/d/1wC5O6cgGuYRkLUGFfMY9FQKLwqYzA6mg/view?usp=drive_link관련 수업 내용에 대한 간단한 퀴즈 섹션(엔터테인먼트 요소)
https://gemini.google.com/share/f80cc6c0aadb
Tip: 코드 전문은 코드블록에 감싸서 작성해주세요. ( / 을 눌러 '코드 블록'을 선택)
대시보드 코드 첨부(인포그래픽 코드는 위 해당링크 참조)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>n8n 자동화 스터디, 4주 완성 마스터 플랜 (Gemini 탑재)</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
<!-- Chosen Palette: Warm Neutrals -->
<!-- Application Structure Plan: A dashboard-style layout is chosen to transform the linear study plan into an interactive journey. It uses a vertical stepper for weekly navigation, allowing users to focus on one week at a time. The core content is organized into tabs (Goal, Strategy, Action Plan, Portfolio) for clarity. Key interactions include a dynamic skills growth chart that visualizes progress and an interactive checklist in the Action Plan. This structure enhances user engagement and provides a clear sense of progression, which is more effective for a learning context than a static document. -->
<!-- Visualization & Content Choices:
- Mindsets -> Inform -> Icon-accented cards -> Static Display -> Emphasizes core principles upfront.
- Weekly Navigation -> Guide -> Vertical Stepper/Tabs -> Click to Navigate -> Intuitive navigation for a step-by-step plan.
- Weekly Content -> Organize -> Tabbed Panels -> Click to Switch -> Prevents information overload and structures dense content.
- Action Plan -> Track Progress -> Interactive Checkboxes -> Click to check -> Fosters a sense of accomplishment.
- Skill Growth -> Show Progress -> Bar Chart (Chart.js) -> Updates on week change -> Visually represents learning milestones, boosting motivation.
- Final Tips -> Summarize -> Highlighted Cards -> Static Display -> Delivers final advice clearly.
- Gemini Features -> Augment Learning -> API Call on Button Click -> Generates personalized tips and portfolio text, adding significant value.
-->
<!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
<style>
body { font-family: 'Noto Sans KR', sans-serif; }
.tab-active {
background-color: #4338ca; /* Indigo 700 */
color: #ffffff;
font-weight: 700;
}
.nav-active {
background-color: #eef2ff; /* Indigo 50 */
border-color: #4338ca; /* Indigo 700 */
color: #312e81; /* Indigo 900 */
font-weight: 700;
}
.content-fade-in {
animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.checkbox-custom:checked + label .checkbox-icon {
transform: scale(1);
}
.checkbox-custom:checked + label {
text-decoration: line-through;
color: #9ca3af; /* Gray 400 */
}
.gemini-btn {
background-color: #ede9fe; /* Violet 100 */
color: #5b21b6; /* Violet 800 */
border: 1px solid #c4b5fd; /* Violet 300 */
}
.gemini-btn:hover {
background-color: #d8b4fe; /* Violet 200 */
}
.spinner {
border-top-color: #4f46e5;
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<div class="container mx-auto p-4 md:p-8 max-w-7xl">
<header class="text-center mb-10 md:mb-16">
<h1 class="text-3xl md:text-5xl font-bold text-indigo-900 mb-2">🚀 n8n 자동화 스터디, 4주 완성 마스터 플랜</h1>
<p class="text-lg md:text-xl text-gray-600">자동화 전문가로 거듭나기 위한 당신의 상세 내비게이션</p>
</header>
<section id="mindset" class="mb-12">
<h2 class="text-2xl font-bold text-center mb-8 text-gray-800">성공적인 스터디를 위한 핵심 마인드셋</h2>
<div class="grid md:grid-cols-3 gap-6 text-center">
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div class="text-4xl mb-3">🎯</div>
<h3 class="font-bold text-lg mb-2 text-indigo-800">'내 문제'에 대입하기</h3>
<p class="text-sm text-gray-600 leading-relaxed">강의 예제를 넘어, '내 상황이라면 어떻게 쓸 수 있을까?'를 끊임없이 고민하며 자신만의 미션을 만드세요. 이것이 가장 강력한 동기 부여가 됩니다.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div class="text-4xl mb-3">💡</div>
<h3 class="font-bold text-lg mb-2 text-indigo-800">'완성'과 '데이터'</h3>
<p class="text-sm text-gray-600 leading-relaxed">처음부터 완벽을 추구하기보다 작은 성공을 만드세요. 오류는 실패가 아닌, 더 나은 시스템을 위한 귀중한 '힌트'이자 '데이터'입니다.</p>
</div>
<div class="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
<div class="text-4xl mb-3">📚</div>
<h3 class="font-bold text-lg mb-2 text-indigo-800">'나만의 레시피 북'</h3>
<p class="text-sm text-gray-600 leading-relaxed">모든 고민과 해결의 과정을 기록하세요. 이 기록들이 쌓여 당신의 역량을 증명하는 최고의 포트폴리오가 될 것입니다.</p>
</div>
</div>
</section>
<main class="md:flex md:gap-8">
<aside class="md:w-1/4 mb-8 md:mb-0">
<h3 class="text-xl font-bold mb-4 text-gray-800">The 4-Week Journey</h3>
<nav id="week-nav" class="flex flex-row md:flex-col gap-2">
<button data-week="1" class="w-full text-left p-4 rounded-lg border-l-4 border-transparent transition-all duration-200 hover:bg-indigo-50">1주차: n8n과 친구 되기</button>
<button data-week="2" class="w-full text-left p-4 rounded-lg border-l-4 border-transparent transition-all duration-200 hover:bg-indigo-50">2주차: 레시피 응용하기</button>
<button data-week="3" class="w-full text-left p-4 rounded-lg border-l-4 border-transparent transition-all duration-200 hover:bg-indigo-50">3주차: 진주 찾기(크롤링)</button>
<button data-week="4" class="w-full text-left p-4 rounded-lg border-l-4 border-transparent transition-all duration-200 hover:bg-indigo-50">4주차: 시스템 완성하기</p></button>
</nav>
<div class="mt-8 bg-white p-4 rounded-lg shadow-sm border border-gray-200">
<h3 class="font-bold text-lg mb-2 text-center text-gray-700">주차별 획득 역량</h3>
<div class="chart-container relative w-full max-w-lg mx-auto h-64 md:h-80">
<canvas id="skillsChart"></canvas>
</div>
</div>
</aside>
<div id="content-area" class="md:w-3/4 bg-white p-6 md:p-8 rounded-lg shadow-md border border-gray-200">
</div>
</main>
<section id="final-goal" class="mt-12">
<h2 class="text-2xl font-bold text-center mb-8 text-gray-800">'나만의 자동화 포트폴리오' 완성 전략</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-indigo-50 p-6 rounded-lg border-l-4 border-indigo-500">
<h3 class="font-bold text-lg mb-2 text-indigo-900">1. '문제-과정-결과' 스토리텔링</h3>
<p class="text-sm text-gray-700 leading-relaxed">단순 기능 나열이 아닌, '어떤 문제를' '어떻게 해결하여' '어떤 성과를 냈는지' 구체적인 수치(시간, 비용 절감)를 포함하여 스토리를 만드세요.</p>
</div>
<div class="bg-indigo-50 p-6 rounded-lg border-l-4 border-indigo-500">
<h3 class="font-bold text-lg mb-2 text-indigo-900">2. 시각적 증명 (영상)</h3>
<p class="text-sm text-gray-700 leading-relaxed">워크플로우 실행부터 결과물이 도착하는 전 과정을 짧은 영상(gif/mp4)으로 녹화하세요. 백 마디 말보다 하나의 영상이 당신의 실행력을 증명합니다.</p>
</div>
<div class="bg-indigo-50 p-6 rounded-lg border-l-4 border-indigo-500">
<h3 class="font-bold text-lg mb-2 text-indigo-900">3. '확장 가능성' 제시</h3>
<p class="text-sm text-gray-700 leading-relaxed">만든 시스템이 다른 영역으로 어떻게 확장될 수 있는지 비전을 어필하세요. 당신이 기술 사용자를 넘어 비즈니스 가치를 창출하는 인재임을 보여줍니다.</p>
</div>
</div>
</section>
</div>
<div id="gemini-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden items-center justify-center p-4">
<div class="bg-white rounded-lg shadow-xl w-11/12 md:w-1/2 max-w-2xl flex flex-col">
<div class="p-6 border-b">
<h3 id="modal-title" class="text-xl font-bold text-gray-800"></h3>
</div>
<div id="modal-content" class="p-6 text-gray-700 max-h-[60vh] overflow-y-auto leading-relaxed"></div>
<div class="p-4 bg-gray-50 border-t text-right">
<button id="modal-close" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors">닫기</button>
</div>
</div>
</div>
<script>
const studyData = {
1: {
title: '1주차: n8n과 친구 되기',
goal: '첫 자동화 워크플로우를 완성하고 n8n의 기본 작동 원리를 이해합니다. 레고 블록을 조립하듯, 각 노드를 연결하며 자동화의 첫걸음을 뗍니다.',
strategy: [
{ title: '무작정 따라하기', desc: '처음엔 깊은 이해보다, 안내에 따라 클릭하고 연결하며 자동화의 감을 잡는 데 집중합니다.' },
{ title: '노드(Node) 단위로 이해', desc: '전체 흐름보다, 각 노드가 ‘무엇을 받아, 어떤 일을 하고, 무엇을 넘기는지’ 개별 블록의 역할을 파악합니다.' },
{ title: '데이터 흐름 쫓아가기', desc: '노드 실행 후 결과 창의 Table/JSON 뷰를 번갈아보며 데이터가 어떻게 변신하는지 시각적으로 따라갑니다.' },
],
actionPlan: [
{ type: '개념 학습', task: '워크플로우, 노드, 트리거, API, Expression의 기본 개념을 내 언어로 설명할 수 있도록 이해하기.' },
{ type: '실습 실행', task: '스터디에서 제공하는 ‘유튜브 채널 자동 요약’ 워크플로우를 처음부터 끝까지 직접 따라 만들어보기.' },
{ type: '과제 수행', task: '만들어진 워크플로우를 복제하여, 내가 좋아하는 다른 유튜브 채널의 RSS 주소로 변경하고 실행해보기.' },
{ type: '개인화 & 실험', task: 'AI 노드의 프롬프트를 수정하여 요약 결과물의 스타일( 말투, 길이, 형식 등)을 바꿔보기.' },
{ type: '기록 및 정리', task: '완성된 워크플로우 스크린샷과 결과물을 캡처하여 ‘나만의 레시피 북’에 첫 프로젝트를 기록하기.' },
],
portfolio: {
title: '나만의 콘텐츠 큐레이션 봇',
desc: '매일 쏟아지는 특정 분야 유튜브 영상들을 일일이 확인할 필요 없이, 새 영상의 핵심만 요약하여 자동으로 받아보는 시스템입니다. 정보 탐색 시간을 획기적으로 줄이고 중요한 인사이트를 놓치지 않게 됩니다.'
},
skills: [80, 20, 10, 10]
},
2: {
title: '2주차: 자동화 레시피 응용하기',
goal: 'AI 에이전트 개념을 더해 워크플로우를 더 똑똑하게 만듭니다. IF, Switch와 같은 조건 노드를 사용하여 상황에 따라 다르게 작동하는 자동화를 구현합니다.',
strategy: [
{ title: '‘만약에(IF)’ 상상하기', desc: '“만약 제목에 ‘광고’가 포함되면?”처럼 조건에 따라 다른 행동을 하는 시나리오를 상상하고, 이를 조건 노드로 구현하는 방법을 고민합니다.' },
{ title: '데이터 구조 살펴보기', desc: '결과(Output) 창을 보물 지도처럼 유심히 살펴보세요. 데이터의 이름표(Key)를 확인하면 다음 노드에서 어떻게 활용할지 아이디어를 얻을 수 있습니다.' },
{ title: '기획에 시간 투자하기', desc: '바로 만들기보다, 노트에 ‘어떤 정보를 -> 어떻게 가공하고 -> 어디로 보낼지’ 먼저 그리는 것이 훨씬 효율적입니다.' },
],
actionPlan: [
{ type: '개념 학습', task: '조건 분기(IF/Switch), 데이터 구조(JSON)의 기본 개념을 ‘잘 정리된 서랍장’ 비유를 떠올리며 이해하기.' },
{ type: '실습 실행', task: '1주차 워크플로우에 IF, Switch 노드를 추가하여 특정 조건의 영상만 요약하거나, 요약 방식을 다르게 하는 실습 진행하기.' },
{ type: '과제 수행', task: '나의 실제 업무/일상의 반복 작업을 자동화하기 위한 워크플로우를 손으로 그리거나 글로 기획해보기.' },
{ type: '개인화 & 실험', task: '영상 설명(description)란에 ‘유료 광고 포함’ 문구가 있으면 요약하지 않고 건너뛰게 만드는 조건 추가해보기.' },
{ type: '기록 및 정리', task: '‘워크플로우 고도화 기획안’을 문서로 정리하고, 구현한 부분까지 스크린샷과 함께 기록하기.' },
],
portfolio: {
title: '문제 해결을 위한 자동화 프로세스 기획 능력',
desc: '단순히 기능을 따라 하는 것을 넘어, 실제 문제를 발견하고 해결책을 논리적인 흐름(워크플로우)으로 설계할 수 있는 역량을 보여줍니다. 문제 해결 능력을 어필하는 중요한 자료가 됩니다.'
},
skills: [90, 85, 30, 20]
},
3: {
title: '3주차: 정보의 바다에서 진주 찾기 (웹 크롤링)',
goal: '웹 크롤링으로 원하는 데이터를 직접 수집합니다. 웹사이트의 구조를 이해하고, CSS 선택자를 활용하여 흩어져 있는 정보를 자동으로 가져옵니다.',
strategy: [
{ title: 'F12 개발자 도구와 친해지기', desc: '웹사이트의 설계도(HTML)를 보고 원하는 정보가 어떤 태그 안에 있는지 ‘보물찾기’ 하듯 탐색합니다. Inspector 기능은 필수!' },
{ title: '선택자(Selector) 개념 정복', desc: '수많은 코드 속에서 원하는 정보를 정확히 집어내기 위한 ‘고유 주소’ 개념을 익힙니다. 원리만 이해하면 충분합니다.' },
{ title: '기존 워크플로우와 연결하기', desc: '크롤링으로 얻은 데이터를 기존 요약/알림 워크플로우의 ‘신선한 재료’로 넣어보며 시너지를 만듭니다.' },
],
actionPlan: [
{ type: '개념 학습', task: '크롤링, HTML 기본 구조(태그, 클래스), CSS 선택자의 기본 개념 이해하기.' },
{ type: '실습 실행', task: '‘알뜰구매 정보 사이트’ 크롤링을 따라 하며, 특정 상품 목록을 가져오는 과정을 직접 경험하기.' },
{ type: '과제 수행', task: '내가 관심 있는 다른 사이트(커뮤니티, 뉴스, 쇼핑몰 등)의 특정 정보를 직접 크롤링 해보기.' },
{ type: '개인화 & 실험', task: '크롤링 워크플로우의 트리거를 ‘Schedule’ 노드로 바꿔, 매일 정해진 시간에 자동으로 정보를 가져오도록 설정하기.' },
{ type: '기록 및 정리', task: '크롤링에 성공한 워크플로우 스크린샷과 함께, ‘어떤 정보(CSS 선택자 포함)’를 가져왔는지 명확하게 기록하기.' },
],
portfolio: {
title: '실시간 트렌드/정보 수집 및 분석 자동화',
desc: '흩어져 있는 커뮤니티나 뉴스의 핵심 정보를 실시간으로 파악하기 위해, n8n 크롤링 기능으로 데이터를 정기 수집하고 AI로 분석하여 가치 있는 정보만 받아보는 시스템입니다.'
},
skills: [95, 90, 90, 50]
},
4: {
title: '4주차: 나만의 자동화 시스템 완성하고 설명하기',
goal: '4주간의 결과물을 종합하여 나만의 ‘킬러 콘텐츠’를 완성하고, 다른 사람에게 그 가치를 명확하게 설명할 수 있는 능력을 기릅니다.',
strategy: [
{ title: '나만의 ‘킬러 콘텐츠’ 정하기', desc: '가장 만족스럽고, 나의 역량을 잘 보여주는 대표 프로젝트 하나를 선정하여 집중적으로 다듬습니다.' },
{ title: '‘왜?’라고 5번 질문하기', desc: '“이 자동화는 왜 필요한가?” 질문을 파고들다 보면 프로젝트의 핵심 가치를 발견하게 됩니다.' },
{ title: '동료의 프로젝트에서 영감 얻기', desc: '최종 피드백 시간을 통해 다른 사람들의 번뜩이는 아이디어를 배우고 내 프로젝트를 발전시킬 힌트를 찾습니다.' },
],
actionPlan: [
{ type: '개념 학습', task: '그동안 배운 n8n의 핵심 기능(트리거, 노드, API, 크롤링)을 전체적으로 복습하고 큰 그림으로 이해하기.' },
{ type: '실습 실행', task: '스터디의 신규 사례를 탐구하며 내 대표 프로젝트에 적용하여 완성도를 높일 아이디어를 얻기.' },
{ type: '과제 수행', task: '4주간의 결과물을 ‘포트폴리오’ 형태로 최종 정리하는 데 온전히 집중하기.' },
{ type: '개인화 & 실험', task: '만든 워크플로우를 IT를 잘 모르는 친구에게 1분 안에 설명해보는 ‘엘리베이터 피치’ 연습하기.' },
{ type: '기록 및 정리', task: '최종 포트폴리오 초안을 ‘문제-과정-결과’ 구조에 맞춰 작성하고, 4주간의 회고를 정리하기.' },
],
portfolio: {
title: '최종 포트폴리오 완성',
desc: '당신의 성장 과정과 결과물을 체계적으로 보여주는 핵심 자료입니다. 1~3주차에 쌓아온 기록들을 바탕으로, 하나의 완성된 ‘자동화 전문가 포트폴리오’ 문서를 만듭니다.'
},
skills: [100, 100, 100, 100]
}
};
const contentArea = document.getElementById('content-area');
const weekNav = document.getElementById('week-nav');
const modal = document.getElementById('gemini-modal');
const modalTitle = document.getElementById('modal-title');
const modalContent = document.getElementById('modal-content');
const modalCloseBtn = document.getElementById('modal-close');
let activeWeek = 1;
let activeTab = 'goal';
const skillsChartCtx = document.getElementById('skillsChart').getContext('2d');
const skillsChart = new Chart(skillsChartCtx, {
type: 'bar',
data: {
labels: ['기본 워크플로우', '조건/논리 설계', '데이터 추출(크롤링)', '포트폴리오 구성'],
datasets: [{
label: '획득 역량',
data: [0,0,0,0],
backgroundColor: [
'rgba(165, 180, 252, 0.6)',
'rgba(129, 140, 248, 0.6)',
'rgba(99, 102, 241, 0.6)',
'rgba(79, 70, 229, 0.6)',
],
borderColor: [
'#a5b4fc',
'#818cf8',
'#6366f1',
'#4f46e5',
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
indexAxis: 'y',
scales: {
x: { beginAtZero: true, max: 100, grid: { display: false } },
y: { grid: { display: false } }
},
plugins: {
legend: { display: false },
tooltip: { enabled: false }
}
}
});
async function callGeminiAPI(prompt) {
const apiKey = "";
const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/gemini-2.0-flash:generateContent?key=${apiKey}`;
const payload = {
contents: [{
role: "user",
parts: [{ "text": prompt }]
}]
};
try {
const response = await fetch(apiUrl, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload)
});
if (!response.ok) {
throw new Error(`API 요청 실패: ${response.status}`);
}
const result = await response.json();
if (result.candidates && result.candidates.length > 0 &&
result.candidates[0].content && result.candidates[0].content.parts &&
result.candidates[0].content.parts.length > 0) {
return result.candidates[0].content.parts[0].text;
} else {
return "AI로부터 답변을 받는 데 실패했습니다. 응답 형식이 올바르지 않습니다.";
}
} catch (error) {
console.error("Gemini API 호출 중 오류 발생:", error);
return "AI 모델 호출 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.";
}
}
function showLoading(title) {
modalTitle.innerText = title;
modalContent.innerHTML = `
<div class="flex justify-center items-center p-8">
<div class="spinner w-12 h-12 rounded-full border-4 border-gray-200"></div>
<p class="ml-4 text-gray-600">AI가 답변을 생성 중입니다...</p>
</div>`;
modal.classList.remove('hidden');
modal.classList.add('flex');
}
function openModal(title, content) {
modalTitle.innerText = title;
modalContent.innerHTML = content.replace(/\n/g, '<br>');
modal.classList.remove('hidden');
modal.classList.add('flex');
}
function closeModal() {
modal.classList.add('hidden');
modal.classList.remove('flex');
}
modalCloseBtn.addEventListener('click', closeModal);
async function handleAICoachClick() {
const data = studyData[activeWeek];
const prompt = `당신은 전문 AI 자동화 학습 코치입니다. 한 수강생이 n8n 자동화 스터디 ${activeWeek}주차 과정을 진행 중입니다. 이번 주 주제는 '${data.title}'이고, 목표는 '${data.goal}'입니다. 이 수강생이 이번 주 개념을 완벽히 자기 것으로 만들 수 있도록, 구체적이고 창의적인 프로젝트 아이디어나 심화 학습 팁 3가지를 제안해주세요. 답변은 격려하는 톤으로, 한국어로 작성해주세요.`;
showLoading("✨ AI 학습 조언");
const result = await callGeminiAPI(prompt);
openModal("✨ AI 학습 조언", result);
}
async function handlePortfolioEnhancerClick(button) {
const data = studyData[activeWeek];
const originalDesc = data.portfolio.desc;
const prompt = `당신은 매력적인 포트폴리오 콘텐츠를 작성하는 전문 테크 라이터입니다. 한 수강생이 n8n 자동화 스터디에서 '${data.portfolio.title}'라는 프로젝트를 완성했습니다. 수강생이 작성한 기본 설명은 다음과 같습니다: "${originalDesc}". 이 설명을 실제 포트폴리오에 사용하기에 적합하도록, 해결한 문제, 사용된 기술, 비즈니스 가치를 강조하여 더 전문적이고 인상적인 내용으로 재작성해주세요. 답변은 한국어로 작성해주세요.`;
button.disabled = true;
button.innerHTML = '<span class="mr-2">⏳</span>생성 중...';
const result = await callGeminiAPI(prompt);
const portfolioDescElement = document.querySelector('#portfolio-content p');
if(portfolioDescElement) {
portfolioDescElement.innerHTML = result.replace(/\n/g, '<br>') + ' <span class="text-xs font-bold text-violet-600">[✨ AI 생성]</span>';
}
button.disabled = false;
button.innerHTML = '<span class="mr-2">✨</span>포트폴리오 설명 강화 완료!';
}
function renderContent(week) {
const data = studyData[week];
if (!data) return;
let actionPlanHtml = data.actionPlan.map((item, index) => `
<div class="flex items-start gap-3 mb-3">
<input type="checkbox" id="check-${week}-${index}" class="checkbox-custom hidden">
<label for="check-${week}-${index}" class="flex items-start cursor-pointer text-gray-700 transition-colors">
<span class="w-5 h-5 border-2 border-gray-300 rounded-sm mr-3 flex-shrink-0 flex items-center justify-center">
<span class="checkbox-icon w-3 h-3 bg-indigo-600 rounded-sm transform scale-0 transition-transform"></span>
</span>
<span><span class="font-bold text-indigo-700">${item.type}:</span> ${item.task}</span>
</label>
</div>
`).join('');
let strategyHtml = data.strategy.map(item => `
<div class="mb-4">
<h4 class="font-bold text-gray-800">💡 ${item.title}</h4>
<p class="text-sm text-gray-600 pl-6">${item.desc}</p>
</div>
`).join('') + `<div class="mt-6 text-center"><button id="ai-coach-btn" class="gemini-btn font-bold py-2 px-4 rounded-lg transition-colors inline-flex items-center"><span class="mr-2">✨</span>AI 학습 조언 보기</button></div>`;
let portfolioHtml = `
<div class="bg-gray-100 p-5 rounded-lg border border-gray-200">
<h4 class="font-bold text-lg text-gray-800 mb-2">${data.portfolio.title}</h4>
<p class="text-gray-700 leading-relaxed">${data.portfolio.desc}</p>
<div class="mt-4 text-right">
<button id="portfolio-enhancer-btn" class="gemini-btn text-sm font-bold py-2 px-3 rounded-lg transition-colors inline-flex items-center"><span class="mr-2">✨</span>포트폴리오 설명 강화하기</button>
</div>
</div>`;
const contentHtml = `
<div class="content-fade-in">
<h2 class="text-2xl md:text-3xl font-bold mb-4 text-gray-800">${data.title}</h2>
<div class="border-b border-gray-200 mb-6">
<nav id="content-tabs" class="flex flex-wrap gap-2 -mb-px">
<button data-tab="goal" class="px-4 py-2 text-sm font-medium border-b-2 border-transparent hover:text-indigo-600 hover:border-indigo-300 transition-colors">🎯 핵심 목표</button>
<button data-tab="strategy" class="px-4 py-2 text-sm font-medium border-b-2 border-transparent hover:text-indigo-600 hover:border-indigo-300 transition-colors">💡 학습 전략</button>
<button data-tab="actionPlan" class="px-4 py-2 text-sm font-medium border-b-2 border-transparent hover:text-indigo-600 hover:border-indigo-300 transition-colors">✅ 액션 플랜</button>
<button data-tab="portfolio" class="px-4 py-2 text-sm font-medium border-b-2 border-transparent hover:text-indigo-600 hover:border-indigo-300 transition-colors">💼 포트폴리오 빌딩</button>
</nav>
</div>
<div id="tab-content">
<div id="goal-content" class="tab-pane hidden"><p class="text-lg leading-relaxed text-gray-700 p-4 bg-indigo-50 rounded-lg">${data.goal}</p></div>
<div id="strategy-content" class="tab-pane hidden">${strategyHtml}</div>
<div id="actionPlan-content" class="tab-pane hidden">${actionPlanHtml}</div>
<div id="portfolio-content" class="tab-pane hidden">${portfolioHtml}</div>
</div>
</div>
`;
contentArea.innerHTML = contentHtml;
updateNav(week);
updateChart(week);
setupTabs();
showTab(activeTab);
document.getElementById('ai-coach-btn')?.addEventListener('click', handleAICoachClick);
document.getElementById('portfolio-enhancer-btn')?.addEventListener('click', (e) => handlePortfolioEnhancerClick(e.currentTarget));
}
function setupTabs() {
const contentTabs = document.getElementById('content-tabs');
contentTabs.addEventListener('click', (e) => {
if (e.target.tagName === 'BUTTON') {
activeTab = e.target.dataset.tab;
showTab(activeTab);
}
});
}
function showTab(tabId) {
document.querySelectorAll('.tab-pane').forEach(pane => pane.classList.add('hidden'));
document.getElementById(`${tabId}-content`).classList.remove('hidden');
document.querySelectorAll('#content-tabs button').forEach(button => {
button.classList.remove('text-indigo-600', 'border-indigo-500', 'font-bold');
if (button.dataset.tab === tabId) {
button.classList.add('text-indigo-600', 'border-indigo-500', 'font-bold');
}
});
}
function updateNav(week) {
document.querySelectorAll('#week-nav button').forEach(button => {
button.classList.remove('nav-active');
if (parseInt(button.dataset.week) === parseInt(week)) {
button.classList.add('nav-active');
}
});
}
function updateChart(week) {
const data = studyData[week];
if (data && data.skills) {
skillsChart.data.datasets[0].data = data.skills;
skillsChart.update();
}
}
weekNav.addEventListener('click', (e) => {
if (e.target.tagName === 'BUTTON') {
activeWeek = parseInt(e.target.dataset.week);
renderContent(activeWeek);
}
});
renderContent(1);
</script>
</body>
</html>
결과와 배운 점
배운 점과 나만의 꿀팁을 알려주세요.
-프롬프트의 기본원칙(P-T-C-F-(Example))에 따른 프롬프트 생성을 통해 자료 출력시 인터렉티브 요소를 첨가한 시각화 대시보드화 함으로써 프로젝트의 계획 수립,수정 그리고 목표달성을 좀 더 용이하게 할 수 있게 되었다..
-팁은 지피티나 클로드나 제미나이나 나만의 챗봇을 만드는 것이 중요하며 챗봇을 잘 만드는 것이 70%이상 이미 결과를 내는 것이라 생각합니다.
과정 중에 어떤 시행착오를 겪었나요?
-LLM마다 특성이 있어 지침을 만드는 과정에서 나에 대한 학습능력 차이가 있기에 그런 부분을 수동으로 작성하는 시행착오가 있었다.
도움이 필요한 부분이 있나요?
-LLM이 결과를 잘 낼 수 있는 프롬프트 생성 챗봇을 좀 더 발전시켜 보고 싶다.
앞으로의 계획이 있다면 들려주세요.
-이러한 모든 과정을 자동화할 수 있도면 해 보고 싶다.
참고한 지피터스 글이나 외부 사례를 알려주세요.
-17기 1주차 워크샵(허세임님)
-GPT PARK'S AI 채널 유튜브
