소개
제작 배경과 제작 주제
코딩학원에서 논술지도하는 강사입니다. It특성화고 입시를 주로 맡고 있습니다. 코딩은 하나도 모르고요, 어쩌다 보니 코딩학원에서 글쓰기 지도를 하고 있습니다. (입시에서 실적설명서, 자기소개서 적성, 면접)등을 맡고 있습니다. 코딩은 사실 하나도 모릅니다. 그래서 이것저것 공부해가며 학생들을 지도하고 있습니다. 첫 주 수업에서 배운 내용을 참고로 학생들에게 개발 단계에 대해 수업하기 위한 교안을 만들어 보았습니다. 신기할 따름이네요.
진행 방법
도구 :Antigravity
사용한 프롬프트
2번 내용은 제미나이에게 기본 교안을 물어보니 준 프롬프트 내용입니다.
처음에는 Antigravity로 작업할 생각을 안하고 수업 할 내용을 제미나이에게 얻었어요. 얻고 나니 배웠던 Antigravity 료를 만들어야겠다는 생각이 들어 제미나이에서 얻은 내용을 같이 넣었습니다.
- 첫 번째 프롬프트
너는 디미고 특별전형 입시에서 실적설명서 자기소개서 등 글쓰기 영역을 맞고 있는 전문가야. 코딩은 잘 모르지만 학생들에게 프로그램을 개발하기 위한 전체 과정을 총괄하고 있어. 디미고 입시를 위한 실적물제작, 실적설명서 작성을 위한 수업 교안 웹앱을 만들어줘.
1. 형식 : HTML, CSS, Javascript가 모두 포함된 '단일 HTML 파일' 코드로 작성해줘.
2. 다음은 개발과정에 대한 일반적 단계를 설명하고 구체적인 예시를 든 교안 내용이야.
``` 중3 학생들이 디미고 특별 전형 실적물(포트폴리오)을 준비할 때, 각 단계에서 어떤 생각을 해야 하는지 명확히 알 수 있도록 구체적인 설명과 3가지 서로 다른 테마의 예시를 정리했습니다. --- ## 🚀 실적물 제작 8단계 가이드 (수업용) ### 1. 문제 인식 (Problem Identification) * 설명: 일상 속 불편함, 사회적 문제, 혹은 본인이 꼭 해결하고 싶은 개인적인 갈증을 찾는 단계입니다. "왜 이게 안 되지?"라는 의문에서 시작합니다. * 예시 1 (생활): 학교 근처 편의점에 갈 때마다 사고 싶은 과자가 품절이라 헛걸음을 함. * 예시 2 (학습): 영단어를 외워도 금방 잊어버리고, 내가 어떤 단어를 틀렸는지 데이터로 보기 힘듦. * 예시 3 (사회): 동네 유기견 보호소의 입양 홍보가 잘 안 되어 입양률이 낮다는 뉴스를 접함. ### 2. 문제 분석 (Deep Analysis) * 설명: 문제가 발생하는 구체적인 상황과 원인을 파고듭니다. '누가, 언제, 어디서, 왜' 불편한지 데이터나 상황으로 정의합니다. * 예시 1: 재고 확인 시스템이 점주 전용이라 외부인은 알 수 없고, 전화로 물어보기엔 서로 번거로움. * 예시 2: 무작정 외우기만 할 뿐, '에빙하우스의 망각 곡선'처럼 과학적인 복습 주기가 적용되지 않음. * 예시 3: 유기견 정보가 텍스트 위주라 딱딱하고, 강아지의 성격이나 특징을 한눈에 파악하기 어려움. ### 3. 문제 해결 방안 탐색 (Solution Search) * 설명: 기존 방식의 한계를 파악하고, IT 기술(앱, 웹, IoT 등)을 활용한 나만의 해결책을 구상합니다. * 예시 1: 사용자들이 서로 재고 상태를 실시간으로 공유하는 '커뮤니티형 재고 지도' 고안. * 예시 2: 틀린 단어만 모아 자동으로 복습 주기를 알려주는 '지능형 플래시 카드' 알고리즘 구상. * 예시 3: 강아지의 특징(성격, 크기, 에너지)을 태그로 분류하고, MBTI처럼 사용자와 성향을 매칭해 주는 웹사이트 기획. ### 4. 계획 수립 (Planning) * 설명: 어떤 도구로 만들지 정하고(Python, Arduino, React 등), 핵심 기능을 목록화하여 개발 일정을 짭니다. * 예시 1: Google Maps API와 Firebase(DB)를 사용해 실시간 위치 기반 정보 공유 앱 기획. * 예시 2: Python의 SQLite로 단어장을 관리하고, 알림 기능 구현을 위해 모바일 라이브러리 조사. * 예시 3: HTML/CSS/JS로 웹 페이지를 구성하고, 강아지 사진 업로드를 위한 스토리지 계획 수립. ### 5. 구현 (Implementation) * 설명: 계획한 기능을 코드로 옮깁니다. 한꺼번에 만들지 말고, 가장 핵심이 되는 기능부터 하나씩 완성합니다. * 예시 1: 지도를 화면에 띄우고 사용자가 핀을 꽂아 '재고 있음/없음'을 표시하는 기본 기능 구현. * 예시 2: 단어를 입력하면 DB에 저장되고, 정해진 시간(1일 후, 3일 후)에 퀴즈 팝업이 뜨도록 코딩. * 예시 3: 유기견 카드 레이아웃을 만들고, 필터 버튼을 누르면 조건에 맞는 유기견만 필터링되는 로직 작성. ### 6. 테스트 및 디버깅 (Testing & Debugging) * 설명: 예상치 못한 오류를 잡습니다. 사용자가 잘못된 값을 입력하거나 네트워크가 끊겼을 때의 상황을 대비합니다. * 예시 1: 여러 명이 동시에 핀을 꽂을 때 데이터가 꼬이는 버그 발견 후 동기화 로직 수정. * 예시 2: 단어장에 이미 있는 단어를 넣었을 때 중복 오류가 발생하는 것을 확인하고 예외 처리 추가. * 예시 3: 사진 용량이 너무 커서 로딩이 느려지는 문제 해결을 위해 이미지 압축 코드 적용. ### 7. 결과 분석 및 개선 (Evaluation & Iteration) * 설명: 완성된 결과물을 직접 써보거나 주변의 피드백을 받아 더 좋게 업그레이드합니다. * 예시 1: "가짜 정보가 올라오면 어떡하냐"는 피드백에 '신뢰도 점수' 시스템 추가. * 예시 2: 텍스트만 있으니 지루하다는 의견에 단어 뜻에 맞는 이미지를 자동으로 생성해 주는 AI 기능 추가. * 예시 3: 실제 보호소 봉사자에게 보여준 뒤, '입양 신청서 양식 다운로드' 기능을 추가하여 실무 편의성 증대. ### 8. 문서화 및 발표 (Documentation) * 설명: 개발 과정을 정리하고, 왜 이 프로젝트가 가치 있는지 보여주는 발표 자료나 포트폴리오를 만듭니다. * 예시 1: "우리 동네 품절 대란 해결"이라는 타이틀로 사용자 간 협력의 가치를 강조한 발표. * 예시 2: 학습 효율이 얼마나 상승했는지 본인의 테스트 데이터를 그래프로 시각화하여 제출. * 예시 3: 단순 코딩 실력을 넘어 '유기견 입양 활성화'라는 사회적 기여를 강조한 개발 일지 작성. ```
3. 세련되고 깔끔한 미래 이미지로 만들어주고.
4. 파일을 자동 생성해줘.
- 두 번째 프롬프트
1. 주제별로 묶어서 하지 말고 단계별로 탭을 누르면 페이지가 나오도록 구성해줘.
2. 아래 내용을 참고해서 각단계별 숙지 사항을 구체적으로 넣어줘.
3. 각 단계별 실 사례는 3개씩 들어줘.
-세 번째 프롬프트
1. 파일을 지금처럼 다시 생성해 줘.
2. 문제 인식에서 '사용자 불편함, 사회적 문제, 개인의 필요'이렇게 세 개의 예시로 바꾸어서 들어주고, 각 항목마다 적용해줘.활용 이미지나 캡처 화면
-처음에 만들어진 이미지 => 단계가 한꺼번에 나와 산만해 보임.
-단계별로 다시 만든 이미지코드 전문 ( / 을 눌러 '코드 블록'을 선택)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DIMIGO | 실적물 마스터 클래스</title>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root {
--bg-color: #050a14;
--header-bg: rgba(10, 20, 40, 0.8);
--card-bg: rgba(20, 30, 50, 0.6);
--accent-blue: #00f2ff;
--accent-purple: #8140ff;
--accent-green: #00ff88;
--text-white: #ffffff;
--text-gray: #b0b8c4;
--border-glow: 0 0 10px rgba(0, 242, 255, 0.2);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: var(--bg-color);
background-image:
radial-gradient(circle at 0% 0%, rgba(129, 64, 255, 0.1) 0%, transparent 40%),
radial-gradient(circle at 100% 100%, rgba(0, 242, 255, 0.1) 0%, transparent 40%);
color: var(--text-white);
font-family: 'Noto Sans KR', sans-serif;
min-height: 100vh;
overflow-x: hidden;
}
/* 헤더 */
header {
padding: 40px 20px;
text-align: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
background: var(--header-bg);
backdrop-filter: blur(20px);
position: sticky;
top: 0;
z-index: 100;
}
.logo {
font-family: 'Orbitron', sans-serif;
font-size: 0.9rem;
letter-spacing: 5px;
color: var(--accent-blue);
margin-bottom: 10px;
}
h1 { font-size: 2rem; font-weight: 700; margin-bottom: 20px; }
/* 탭 시스템 */
.tabs-container {
max-width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
background: rgba(0,0,0,0.3);
border-radius: 12px;
padding: 10px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
.tab-btn {
background: transparent;
border: none;
color: var(--text-gray);
padding: 12px 18px;
cursor: pointer;
border-radius: 10px;
transition: all 0.3s;
font-family: 'Orbitron', sans-serif;
font-weight: 700;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
}
.tab-btn span { font-size: 0.7rem; font-family: 'Noto Sans KR'; font-weight: 400; opacity: 0.6; }
.tab-btn.active {
background: var(--accent-blue);
color: var(--bg-color);
box-shadow: var(--border-glow);
}
.tab-btn.active span { opacity: 1; font-weight: 700; }
/* 메인 콘텐츠 */
.content-area {
max-width: 1100px;
margin: 40px auto;
padding: 0 20px;
animation: slideUp 0.6s ease;
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.step-info {
background: var(--card-bg);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 24px;
padding: 40px;
margin-bottom: 40px;
backdrop-filter: blur(10px);
}
.step-badge {
display: inline-block;
padding: 6px 15px;
background: rgba(129, 64, 255, 0.2);
border: 1px solid var(--accent-purple);
border-radius: 50px;
color: var(--accent-purple);
font-size: 0.9rem;
font-weight: 700;
margin-bottom: 20px;
}
.step-main-title { font-size: 2.2rem; margin-bottom: 20px; color: var(--accent-blue); }
.step-main-desc { font-size: 1.1rem; color: var(--text-gray); margin-bottom: 30px; line-height: 1.8; }
/* 숙지 사항 섹션 */
.pro-guide {
background: rgba(129, 64, 255, 0.1);
border-radius: 15px;
padding: 25px;
border-left: 5px solid var(--accent-purple);
margin-bottom: 40px;
}
.pro-guide h4 { font-size: 1.1rem; color: #fff; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; }
.pro-guide ul { list-style: none; }
.pro-guide li { margin-bottom: 10px; position: relative; padding-left: 20px; color: var(--text-gray); }
.pro-guide li::before { content: '→'; position: absolute; left: 0; color: var(--accent-purple); }
/* 사례 그리드 */
.examples-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.example-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 15px;
padding: 25px;
transition: all 0.3s;
}
.example-card:hover { background: rgba(255, 255, 255, 0.07); transform: translateY(-5px); border-color: var(--accent-blue); }
.type-tag { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; display: inline-block; padding: 4px 8px; border-radius: 4px; }
.type-life { background: #4dabf7; color: #fff; }
.type-study { background: #51cf66; color: #fff; }
.type-social { background: #ff922b; color: #fff; }
.example-text { font-size: 1rem; line-height: 1.6; color: #fff; }
/* 내비게이션 버튼 */
.nav-controls {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 50px;
}
.nav-btn {
background: transparent;
border: 1px solid var(--accent-blue);
color: var(--accent-blue);
padding: 12px 40px;
border-radius: 50px;
cursor: pointer;
font-size: 1rem;
transition: all 0.3s;
font-weight: 500;
}
.nav-btn:hover { background: var(--accent-blue); color: var(--bg-color); }
.nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
@media (max-width: 900px) {
.examples-grid { grid-template-columns: 1fr; }
.tabs-container { overflow-x: auto; justify-content: flex-start; }
.tab-btn { flex: none; width: 100px; }
h1 { font-size: 1.5rem; }
}
</style>
</head>
<body>
<header>
<div class="logo">DIMIGO PORTFOLIO MASTERCLASS</div>
<h1>실적물 제작 8단계 가이드</h1>
<div class="tabs-container" id="tabs">
<!-- 탭은 JS에서 생성 -->
</div>
</header>
<main class="content-area" id="main-content">
<!-- 콘텐츠는 JS에서 생성 -->
</main>
<div class="nav-controls">
<button class="nav-btn" id="prev-btn" onclick="goToStep(-1)">이전 단계</button>
<button class="nav-btn" id="next-btn" onclick="goToStep(1)">다음 단계</button>
</div>
<script>
const steps = [
{
title: "문제 인식",
engTitle: "Identification",
desc: "나만의 관점으로 문제를 발견하는 단계입니다. IT 실적물의 '뿌리'가 되는 부분이며, 왜 이 프로그램을 만들어야만 했는지에 대한 당위성을 설명합니다.",
guides: [
"평소에 본인 혹은 지인이 직접 겪은 불편한 상황을 구체적으로 포착하세요.",
"단순히 '멋진 기술을 쓰고 싶어서'가 아니라 '문제가 심각해서' 기술을 선택했음을 보여주어야 합니다.",
"문제를 찾게 된 '계기'가 개인적인 이야기일수록 진정성이 높아집니다."
],
examples: [
{ type: "life", text: "상가 편의점 재고가 온라인으로 연동되지 않아, 사고 싶은 물건을 찾으러 여러 군데를 헛걸음했던 경험" },
{ type: "study", text: "시험 기간마다 모르는 단어만 따로 정리하고 싶지만, 수동으로 옮겨 적기엔 시간이 너무 부족하다는 어려움" },
{ type: "social", text: "유기견 보호소의 입양 공고가 일원화되어 있지 않아 입양 희망자들이 정보를 얻기 어렵고 입양률이 떨어지는 사회적 현실" }
]
},
{
title: "문제 분석",
engTitle: "Deep Analysis",
desc: "문제가 왜 발생하는가? 그리고 얼마나 심각한가? 주관적인 느낌을 객관적인 데이터로 바꾸는 과정입니다.",
guides: [
"문제 상황의 원인을 '사용자' 입장에서 세부적으로 쪼개어 분석하세요.",
"통계 자료, 기사, 또는 본인이 시행한 설문조사 데이터를 활용하면 설득력이 폭발합니다.",
"누가(Who), 언제(When), 무엇 때문에(Why) 불편한지를 명확하게 정의해야 합니다."
],
examples: [
{ type: "life", text: "편의점 앱은 점주 중심으로 설계되어 있어 실시간 재고 반영이 느리며, 품절 여부를 전화로만 확인 가능한 비효율 분석" },
{ type: "study", text: "뇌과학의 '망각 곡선' 이론을 바탕으로, 사람이 단어를 잊어버리는 주기와 개인별 학습 격차 데이터 수집" },
{ type: "social", text: "보호소 웹사이트의 복잡한 UI와 검색 필터의 부재로 인해 사용자들이 5분 이내에 이탈하는 현상 파악" }
]
},
{
title: "해결 방안 탐색",
engTitle: "Solution Search",
desc: "분석된 문제를 IT 기술로 어떻게 해결할지 혁신적인 아이디어를 구상합니다.",
guides: [
"기존의 해결 방식(아날로그 혹은 기존 앱)의 한계를 명확히 짚어주세요.",
"IT 기술이 도입되었을 때 시간 단축, 편의성 향상 등의 'Value'를 구체적으로 제시하세요.",
"단순 기능 나열이 아닌, 전체적인 서비스의 핵심 로직(Logic)을 구상해야 합니다."
],
examples: [
{ type: "life", text: "사용자들끼리 재고 상태를 실시간으로 업데이트하여 지도 위에 공유하는 '커뮤니티 기반 재고 지도' 제안" },
{ type: "study", text: "맞춤형 오답 관리 알고리즘을 통해 사용자가 틀리는 단어만 가중치를 두어 노출하는 지능형 학습 시스템" },
{ type: "social", text: "유기견의 성격과 보호자의 MBTI/라이프스타일을 매칭해주는 초정밀 매칭 추천 서비스" }
]
},
{
title: "계획 수립",
engTitle: "Planning",
desc: "개발 도구(Stack)를 선정하고 전체적인 설계도와 일정을 짜는 단계입니다.",
guides: [
"사용한 언어나 프레임워크를 선택한 이유가 논리적이어야 합니다. (예: 데이터 실시간성이 중요해서 Firebase 선택)",
"흐름도(Flowchart)나 와이어프레임(Wireframe)을 그려서 구조를 구체화하세요.",
"제한된 시간 내에 핵심 기능을 먼저 완성하는 MVP(최소 기능 제품) 개발 전략을 세우세요."
],
examples: [
{ type: "life", text: "Google Maps API와 Firebase Realtime Database를 연동하여 지도 서비스 구조화 및 사용자 위치 권한 설계" },
{ type: "study", text: "SQLite를 활용한 데이터베이스 스키마 설계 및 Python 언어 기반의 학습 알림 스케줄러 기획" },
{ type: "social", text: "React로 반응형 웹 UI를 설계하고 유기견 API와 연동하기 위한 데이터 크롤링 모듈 계획" }
]
},
{
title: "구현",
engTitle: "Implementation",
desc: "코드를 작성하여 실제 동작하는 결과물을 만듭니다. '핵심 알고리즘'에 집중하세요.",
guides: [
"모든 코드를 나열하기보다, 가장 핵심이 되는 로직의 구조와 창의적인 해결 방식을 강조하세요.",
"Git 등을 활용한 버전 관리 로깅 기록이 있다면 매우 좋은 평가 요소가 됩니다.",
"구현 과정에서 가장 공들인 부분과 그 이유를 주석이나 문서로 남겨두세요."
],
examples: [
{ type: "life", text: "지도의 마커를 클릭했을 때 말풍선 내에 마지막 업데이트 시간과 수량을 표시하는 핵심 컴포넌트 구현" },
{ type: "study", text: "오답률 데이터에 로그 함수를 적용하여 복습 주기를 자동으로 계산하는 자가 학습 알고리즘 코딩" },
{ type: "social", text: "강아지의 특징(태그)별 가중치 합산 방식을 활용한 취향 저격 매칭 연산 로직 작성" }
]
},
{
title: "테스트 및 디버깅",
engTitle: "Testing",
desc: "프로그램의 완성도를 높이는 작업입니다. 예상치 못한 동작과 오류를 찾아 해결합니다.",
guides: [
"정상적인 입력 외에 예외적인 값(잘못된 형식, 데이터 없음 등)을 넣었을 때 어떻게 처리했는지 보여주세요.",
"발생한 에러(Bug)를 어떤 디버깅 도구로 찾았고, 어떻게 '근본적'으로 해결했는지 과정을 서술하세요.",
"테스트 케이스를 만들어 검증한 기록은 개발자로서의 꼼꼼함을 증명합니다."
],
examples: [
{ type: "life", text: "다수의 동시 접속자가 핀 정보를 수정할 때 발생하는 데이터 충돌 해결을 위한 뮤텍스(Mutex) 개념 적용 테스트" },
{ type: "study", text: "중복된 단어가 저장될 때 발생하는 인덱스 오류를 잡기 위한 데이터 전처리 과정 및 예외 처리 로직 추가" },
{ type: "social", text: "이미지 로딩 속도가 느려 웹 서비스가 멈추는 현상을 발견하고 이미지 리사이징 기법 및 비동기 처리 도입" }
]
},
{
title: "결과 분석 및 개선",
engTitle: "Evaluation",
desc: "결과물이 실제 문제를 얼마나 해결했는지 검증하고 피드백을 수용하는 단계입니다.",
guides: [
"친구나 가족, 혹은 실제 타겟 사용자에게 써보게 하고 장단점 피드백을 구체적으로 적으세요.",
"초기에 설정했던 목표(가설)를 얼마나 달성했는지 수치나 비율로 분석하면 좋습니다.",
"실력의 정체는 '완성'이 아니라 '개선'에 있습니다. 향후 어떤 기능을 추가할지 로드맵을 제시하세요."
],
examples: [
{ type: "life", text: "\"허위 입력을 막아달라\"는 피드백을 반영해 사용자 신뢰도 포인트 시스템을 도입하여 정보의 질 향상" },
{ type: "study", text: "자가 테스트 결과, 기존 종이 단어장 학습 대비 평균 암기 시간이 30% 단축되었음을 확인하고 UI 직관성 개선" },
{ type: "social", text: "실제 보호소 운영자 인터뷰 후 '입양 신청서 자동 생성' 기능을 추가하여 실질적 업무 도움 평가" }
]
},
{
title: "문서화 및 발표",
engTitle: "Documentation",
desc: "지금까지의 모든 과정을 매력적으로 포장하여 전달하는 마무리 단계입니다.",
guides: [
"표지부터 마지막 페이지까지 하나의 '스토리라인'이 이어지도록 구성하세요.",
"텍스트만 가득한 문서가 아닌 다이어그램, 스크린샷, 그래프를 적절히 배치해야 가독성이 높아집니다.",
"이 프로젝트를 통해 본인이 어떻게 성장했는지 '성찰 기록'을 꼭 포함하세요."
],
examples: [
{ type: "life", text: "우리 동네 품절 대란의 협력적 해결이라는 사회적 가치와 위치 정보의 정밀성을 강조한 PDF 포트폴리오 완성" },
{ type: "study", text: "과학적 학습 설계와 데이터 시각화를 중심으로, 학습 효율 극대화 과정을 논리적으로 서술한 개발 일지 작성" },
{ type: "social", text: "기술을 넘어 '생명 존엄성'이라는 철학적 가치를 반영하고, 사회 복공헌 모델로 확장 가능성을 시사하는 발표 자료 제작" }
]
}
];
let currentStep = 0;
function init() {
const tabsContainer = document.getElementById('tabs');
steps.forEach((step, index) => {
const btn = document.createElement('button');
btn.className = `tab-btn ${index === 0 ? 'active' : ''}`;
btn.id = `tab-${index}`;
btn.onclick = () => showStep(index);
btn.innerHTML = `Step ${index + 1} <span>${step.title}</span>`;
tabsContainer.appendChild(btn);
});
showStep(0);
}
function showStep(index) {
currentStep = index;
const step = steps[index];
// 탭 활성화
document.querySelectorAll('.tab-btn').forEach((btn, i) => {
if (i === index) btn.classList.add('active');
else btn.classList.remove('active');
});
// 애니메이션 효과를 위해 opacity 조절
const mainContent = document.getElementById('main-content');
mainContent.style.opacity = '0';
setTimeout(() => {
mainContent.innerHTML = `
<div class="step-info">
<div class="step-badge">STAGE ${index + 1}</div>
<h2 class="step-main-title">${step.title} <span style="font-size: 1.2rem; color: var(--accent-purple); font-family: 'Orbitron'; font-weight: 400; opacity: 0.7;">[${step.engTitle}]</span></h2>
<p class="step-main-desc">${step.desc}</p>
<div class="pro-guide">
<h4>💡 전문가 숙지 사항 (Admissions Strategy)</h4>
<ul>
${step.guides.map(guide => `<li>${guide}</li>`).join('')}
</ul>
</div>
<h4 style="margin-bottom: 20px; color: var(--accent-green);">📍 분야별 실사례 (Case Studies)</h4>
<div class="examples-grid">
<div class="example-card">
<span class="type-tag type-life">주변 생활 개선</span>
<p class="example-text">${step.examples[0].text}</p>
</div>
<div class="example-card">
<span class="type-tag type-study">학습 효율 향상</span>
<p class="example-text">${step.examples[1].text}</p>
</div>
<div class="example-card">
<span class="type-tag type-social">사회 문제 해결</span>
<p class="example-text">${step.examples[2].text}</p>
</div>
</div>
</div>
`;
mainContent.style.opacity = '1';
}, 100);
// 버튼 상태 업데이트
document.getElementById('prev-btn').disabled = index === 0;
document.getElementById('next-btn').disabled = index === steps.length - 1;
// 스크롤 상단으로
window.scrollTo({ top: 0, behavior: 'smooth' });
}
function goToStep(delta) {
let nextIndex = currentStep + delta;
if (nextIndex >= 0 && nextIndex < steps.length) {
showStep(nextIndex);
}
}
init();
</script>
</body>
</html>
4. 결과
배포는 못해서 링크를 못 올리네요~
5. 시행착오
목요일 수업을 마치고 주셨던 프롬프트를 살짝 변형해 맞춤법 공부 웹앱을 만들었어요.
그런데 수정하는 과정에서 인공지능에게 내가 원하는 대로 전달하는 게 어렵게 느껴졌습니다.
마인크래프트 느낌으로 만들어 달라고 했더니 이렇게 만들어줬어요.
그런데 각 탭에 마인크래프트 캐릭터 이미지가 들어가면 좋겠다고 생각해서 수정해 달라고 했더니 이렇게 만들어주더라고요.
아이콘은 만들어졌지만 크기 조절에 실패했다 싶어,
크기 관련해서 계속 프롬프트를 넣었지만 못 알아듣더라고요.
솔직히 이대 이런 생각이 들었어요.
-프롬프트를 내가 만든 게 아니라 선생님이 만들어준 대로 넣어야 하면 과연 앞으로 혼자 만들 수 있을까? ('HTML, CSS, Javascript가 모두 포함된 '단일 HTML 파일' 코드로 작성해줘.'이런 문구를 내가 만들 수 있나....)
-HTML을 할 줄 알면 코드에서 직접 크기 조절을 할 수 있을텐테...
-결국 어느 정도 코딩을 할 줄 알아야 원하는 결과물을 얻을 수 있지 않나..
그런데!!!
게시글에 올리신 분들의 제작 과정을 보면서 내가 너무 어렵게만 생각했다는 것을 깨달았어요.
그냥 아는 만큼 프롬프트에 넣다보면 뭔가 만들어지고 그렇게 계속 하다 보면 조금씩 지식이 쌓이면서 조금씩 구체적인 프롬프트를 작성할 수 있게 되겠지요. 이 점이 서로에게 긍정적 시너지를 주는 커뮤니티의 힘이구나 싶었습니다.
내일 학생들 앞에서 웹 교안을 열 생각을 하니 너무 신납니다.
앞으로의 계획
사실 교육용 앱을 만드는 것도 신나는 일이지만 업무 자동화에 대해서도 관심이 많아요.
우선 웹앱 만드는 프롬프트를 좀더 연습해 본 후, AI에이전트 활용를 활용하며 업무 자동화하는 것도 더 공부해 보고 싶습니다.
6. 도움 받은 글 (옵션)
교육용 앱 게시글 제 앞에 올리신 분들 모두 참고가 되었습니다 .
감사합니다^^
