🧩 인지편향 마스터 실습 웹앱 제작 사례

< 소개 >

안녕하세요 21기 교육앱 스터디를 듣는 하이호입니다~~
이 사례글은 안티그래비티가 뽑아준 초안을 제가 읽어보면서 수정한 것입니다.

(안티가 저보다 글을 더 잘쓰네요. 당연한 이야기)

시도하고자 했던 것과 그 이유를 알려주세요.

21기 교육앱 스터디에서는, OT날에 강의자료를 만들어 보는 실습을 했습니다!

평소에 관심있던 '인지편향(Cognitive Bias)'이라는 주제를 재밌고 가볍게 학습할 수 있도록 "인지편향 마스터 실습 웹앱"을 만들어 배포하고자 했습니다.

거창하게 서버와 백엔드를 구축하기보다, 관리와 공유가 쉬운 '단일 HTML 파일(Single HTML File)'만으로 모든 기능과 인터랙션이 구동되도록 기획했습니다. (스터디 권장사항)

제가 지루해하지 않도록 스케치북 낙서, 무지개, 레고, 팩맨 같은 귀엽고 자유분방한 디자인 컨셉을 적용하고, 실시간 프롬프트 생성기와 빙고 퀴즈 같은 인터랙티브 요소를 꽉꽉 채워 넣었습니다.(스터디 권장사항)

< 진행 방법 >

어떤 도구를 사용했고, 어떻게 활용하셨나요?

AI 코딩 에이전트(안티그래비티)를 활용하여 단일 HTML 구조를 짜고, 스타일링은 Tailwind CSS, 아이콘은 Lucide Icons, 폭죽 효과는 canvas-confetti 등 모두 외부 웹링크(CDN) 라이브러리를 단일 문서에 직접 붙여 넣어 활용했습니다. 배포는 Vercel CLI를 사용했습니다.

📝 사용한 프롬프트 전문:

역할: 너는 교육 공학 전문가이자 구글 기술에 정통한 시니어 웹 프론트엔드 개발자야.
작업: 우리의 강사인 '하이호' 님의 강의에 쓰일 "인지편향 마스터 실습 웹앱"을 만들어줘.
형식: HTML, CSS, Javascript가 모두 포함된 '단일 HTML 파일' 코드로 작성해줘.

<필수 조건 및 디자인 가이드>
1. 화면 디자인 컨셉: 유치한, 자유분방한, 스케치북 낙서 같은, 컬러풀한 무지개색, 블럭 디자인, 레고, 팩맨, 장난스러운 퍼즐.
2. 기능 탭: [개념 정리], [비교 정리], [관련 이론과 퀴즈], [심층탐구 프롬프트 추천], [미니 빙고 퀴즈] 4가지 메뉴 탭을 만들어줘.
3. 텍스트 요소: 화면 헤더와 하단 푸터에 항상 "Designed for students by 하이호" 이라는 문구가 명확하게 나타나게 해줘.
4. 심층탐구 프롬프트 추천 탭: 주제 키워드, 개인상황, 형식을 입력하면 하단에 결과가 실시간으로 조합되며, '복사하기' 버튼이 작동해야 해.
5. 애니메이션: 탭을 전환하거나 버튼에 마우스를 올리면 부드러운 애니메이션이 있고, 퀴즈 정답을 맞추면 폭죽(canvas-confetti)이 터지게 해줘.
6. 환경: 외부 라이브러리는 Tailwind CSS와 Lucide Icons를 CDN 링크로 포함해야 해.

🎨 꿀팁: 이미지 업로드 없이, 코드로 그린 '애니메이션 SVG 파비콘'

웹앱 접속 시 인터넷 탭 왼쪽에 뜨는 아이콘(Favicon)도 이미지 파일 다운로드 없이 HTML 파일 안에 SVG 형식의 애니메이션 코드로 욱여넣었습니다. 별도 이미지 호스팅이 필요 없어 정말 편합니다!

<!-- 무지개색으로 변하며 위아래로 통통 튀는 퍼즐 조각 파비콘 코드 -->
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cstyle%3E@keyframes bounce { 0% { transform: translateY(0); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0); } } @keyframes color { 0% { fill: %23FF6B6B; } 20% { fill: %23FFA94D; } 35% { fill: %23FFD43B; } 50% { fill: %2369DB7C; } 65% { fill: %234DABF7; } 80% { fill: %23DA77F2; } 100% { fill: %23FF6B6B; } } .puzzle { animation: bounce 1s infinite ease-in-out, color 3s infinite linear; }%3C/style%3E%3Cg class='puzzle'%3E%3Cpath d='M30 30h15v-10a10 10 0 0 1 20 0v10h15v15h10a10 10 0 0 1 0 20h-10v15h-15v10a10 10 0 0 1-20 0v-10h-15v-15h-10a10 10 0 0 1 0-20h10v-15z'/%3E%3C/g%3E%3C/svg%3E">

📸

ALT

한국 웹사이트의 홈페이지

ALT

한국어 앱 스크린샷

📸

결과물 구경하기👉 [https://cognitive-bias-master.vercel.app]

< 결과와 배운 점 >

과정 중에 어떤 시행착오를 겪었나요?

이 사례글을 쓰게 만든 역대급 시행착오가 있었습니다. 완성된 HTML을 배포하려고 터미널에서 vercel --prod 명령어를 쳤는데, 로그인 인증까지 성공적으로 마쳤음에도 불구하고 아래와 같은 괴상한 에러를 뿜으며 계속 배포가 튕겼습니다.

Error: An unexpected error occurred in linked project does not have "id".

알고 보니 배포가 터진 이유는 제 작업 폴더 이름인 강사 랜딩페이지 때문이었습니다. Vercel 배포 도구(CLI)는 폴더 이름에 영문이 아닌 한글, 혹은 띄어쓰기가 포함되어 있으면 본인의 온라인 프로젝트 ID를 정상적으로 찾지 못하고 뻗어버리는 아주 치명적인 버그를 가지고 있었습니다. 파일 경로가 꼬여 애꿎은 곳에 임시 폴더를 만들어 우회하느라 (안티그래비티가 저한테) 꽤나 혼쭐이 났습니다 😂

배운 점과 나만의 꿀팁을 알려주세요.

• 교훈 1: Vercel이나 Github 등의 개발 도구(CLI)를 사용해 작업물을 업로드할 때 발생하는 찝찝한 오류를 예방하는 디자인 패턴 제1원칙은 "작업 폴더명은 무조건 직관적인 소문자 영문과 하이픈(-) 조합으로 써라" 입니다. 결국 폴더명을 cognitive-bias-master로 올바르게 변경하니 거짓말처럼 1초 만에 배포되었습니다!

• 교훈 2: 복잡한 서버 로직이 당장 필요 없는 가벼운 교육용 툴이나 인터랙티브 자료들은 단일 HTML 파일 + 외부 라이브러리 조합 구조가 압도적으로 빠르고 관리에 편리하다는 것을 다시 한번 체감했습니다.

도움이 필요한 부분이 있나요? / 앞으로의 계획

단일 HTML 웹앱은 초기 제작과 배포는 압도적으로 빠르지만, 나중에 학생들이 푼 퀴즈 점수나 프롬프트 조합 데이터를 수집하고 통계를 내고 싶다면 어떻게 해야 할지 고민입니다. (확실히 통계 내면 난이도 조절하기 유용하긴 하겠네요)

Supabase나 Firebase 같은 가벼운 BaaS(백엔드 서비스)를 하나 붙여 간단한 통계용 DB를 설계해 볼까 계획 중입니다😊 (라고 하네요 제 의견은 아닙니다 안티그래비티의 의견입니다)

도움 받은 글 (옵션)

• https://www.gpters.org/research/post/end-googles-vibe-coding-TFKSV1i40iYB30t

  https://www.gpters.org/research/post/end-googles-vibe-coding-TFKSV1i40iYB30t

• https://www.gpters.org/nocode/post/stepbystep-guide-creating-educational-5cVgegHLUr1D7af