index.html 하나로 완성형 AI 교육 웹앱 만들기

소개

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

AI 교육 콘텐츠를 강의 현장에서 매번 PPT나 PDF로 나눠줬는데, 수강생들이 "나중에 다시 보고 싶은데 어디서 찾아요?"라는 질문을 반복했어요. 그때마다 파일을 다시 보내는 것도 번거롭고, 내용이 업데이트될 때마다 관리도 힘들었죠.

그래서 생각한 것이 딱 하나였어요.

"AI를 공부하는 콘텐츠를, AI로 직접 만든 웹사이트에서 보여주자."

단순히 링크 하나를 공유하면 누구나 어디서든 접속할 수 있고, 내용이 바뀌면 그 링크 하나만 업데이트하면 되니까요. 코딩을 전혀 모르는 상태에서, Claude AI와 함께 'index.html'을 허브(Hub) 페이지로 삼고, 각 과정별 HTML 파일을 링크로 연결하는 멀티페이지 웹앱 구조를 완성했습니다.

결과물이 바로 nugunaaistudy.netlify.app — AI 윤리부터 바이브코딩까지 6단계 완성 커리큘럼을 담은 NuGuNaAi Studio예요.

✅ 결과물 : 이렇게 대장 index.html + 6개의 커리큘럼을 묶어서 하나의 웹앱으로 구성하였습니다.

진행 방법

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

🛠️ 사용 도구

도구

역할

Claude AI (claude.ai)

HTML/CSS 코드 생성, 구조 설계, 오류 수정

Netlify

무료 웹 호스팅 및 배포 (드래그앤드롭 업로드)

VS Code (선택)

파일 편집 및 확인 (메모장도 가능)

📁 핵심 구조: index.html이 대문, 나머지 HTML이 방

처음에는 하나의 HTML 파일에 모든 내용을 다 넣으려고 했어요. 그런데 Claude가 이렇게 제안했죠.

"내용이 많으면 파일 하나가 너무 무거워져요. index.html은 메인 랜딩 페이지로 쓰고, 각 코스는 별도 HTML 파일로 만들어서 링크로 연결하세요."

그 한 마디가 구조 설계의 핵심이었어요!

📂 nugunaaistudy (폴더 전체를 Netlify에 업로드)
├── index.html          ← 메인 허브 페이지 (대문)
├── ai-ethics-master.html   ← COURSE 01 AI 윤리
├── ai-master.html          ← COURSE 02 생성형 AI 개념
├── gpt-master.html         ← COURSE 03 ChatGPT
├── gemini-master.html      ← COURSE 04 Gemini
├── claude-master.html      ← COURSE 05 Claude
└── vibe-master.html        ← COURSE 06 바이브코딩

💬 실제 사용한 핵심 프롬프트 전문

[Step 1] 전체 구조 설계 요청

나는 AI 교육 콘텐츠를 웹사이트로 만들고 싶어.
코딩을 전혀 모르는 비개발자야.

다음 조건으로 HTML 웹앱을 만들어줘:
- 메인 페이지(index.html)에서 6개 코스로 이동할 수 있어야 해
- 각 코스는 별도 HTML 파일로 만들어
- 코스 목록: AI윤리, 생성형AI 개념, ChatGPT, Gemini, Claude, 바이브코딩
- 디자인은 보라색 계열로, 현대적이고 깔끔하게
- 모바일에서도 잘 보여야 해 (반응형)
- Netlify에 업로드만 하면 바로 배포되는 구조로

[Step 2] 개별 코스 페이지 생성 요청

이제 COURSE 01 'AI 윤리 가이드' 페이지(ai-ethics-master.html)를 만들어줘.

포함할 내용:
- AI 윤리의 정의와 왜 중요한지
- 한국 AI 기본법 (2026년 1월 시행) 설명
- 교육자가 알아야 할 AI 윤리 원칙
- 마지막에 10문항 퀴즈 (정답 즉시 확인되는 인터랙티브 방식)
- 상단에 'index.html로 돌아가기' 버튼 포함
- 전체 디자인은 index.html과 통일성 있게

[Step 3] 링크 연결 확인 및 수정 요청

index.html에서 각 코스 카드를 클릭하면 해당 HTML 파일로 이동해야 해.
현재 링크가 제대로 연결됐는지 확인하고,
Netlify 배포 후 작동하도록 상대경로(/ai-ethics-master 형태)로 수정해줘.

🖼️ 사이트 구조 시각화

[index.html - 메인 허브]
        |
  ┌─────┼─────┐
  ↓     ↓     ↓  ... (6개 연결)
[AI윤리] [ChatGPT] [Claude] ...
각 페이지 하단에 → [← 메인으로 돌아가기] 버튼

Netlify 배포 방법 (진짜 쉬워요!)

netlify.com 접속 → 무료 가입
대시보드에서 HTML 파일들이 담긴 폴더 전체를 드래그앤드롭
자동으로 URL 생성됨 (커스텀 도메인 설정도 가능)
끝! 🎉

결과와 배운 점

✅ 배운 점 & 나만의 꿀팁

1. index.html은 '대문'이자 '지도'다 메인 페이지가 전체 사이트의 네비게이션을 담당해요. 사용자가 길을 잃지 않도록 각 코스 카드에 설명과 링크를 명확하게 달아두는 게 핵심이에요.

2. 각 HTML 파일에 반드시 '돌아가기 버튼'을 넣어라 처음엔 이걸 빠뜨렸다가 "어떻게 다시 돌아가요?"라는 피드백을 받았어요. 각 코스 페이지 상단과 하단 양쪽에 메인으로 돌아가는 버튼을 꼭 넣으세요.

3. Netlify 배포 시 파일명 = URL 경로 ai-ethics-master.html로 파일명을 만들면 도메인/ai-ethics-master로 접근돼요. 파일명을 깔끔하게 영문 소문자+하이픈으로 정하면 URL도 예뻐져요.

4. Claude에게 "통일성"을 반드시 명시할 것 페이지마다 따로 요청하면 디자인이 제각각이 돼요. 처음 index.html을 만들 때 색상 코드(#7C3AED 등)와 폰트를 확정하고, 이후 요청마다 "index.html과 동일한 디자인 시스템 적용"이라고 명시해야 해요.

🔧 시행착오

링크 경로 오류: 처음에 href="ai-ethics-master.html"로 했더니 로컬에선 됐는데 Netlify에선 안 됐어요. → /ai-ethics-master처럼 확장자 없는 절대경로로 수정하니 해결!
모바일 깨짐: 그냥 만들면 PC 기준이라 모바일에서 레이아웃이 깨져요. → Claude에게 처음부터 "반응형(responsive)"을 명시하는 게 필수예요.
파일 개수가 많아질수록 관리가 어려워짐: 6개 파일을 따로 수정할 때 하나씩 Claude에게 붙여넣어야 해서 번거로웠어요. → 나중엔 공통 CSS를 별도 파일(style.css)로 분리하는 걸 배웠어요.

🙋 도움이 필요한 부분

각 코스 페이지의 퀴즈 결과를 저장해서 수강생별 학습 이력을 관리하고 싶은데, 순수 HTML만으로는 한계가 있어요. DB 연동 없이 간단히 구현하는 방법 아시는 분 계시면 댓글 부탁드려요!

🚀 앞으로의 계획

현재 6개 코스를 더 세분화해서 청소년 전용 버전과 의료·간호 전문직 버전으로 분기할 예정이에요.
AI NEXUS CAMP 2026(중3·고1 대상 2박3일 캠프) 참가자들이 수업 전에 예습할 수 있도록 이 사이트를 사전 학습 플랫폼으로 연계할 계획이에요.
바이브코딩을 제대로 배운 지금은, 이 구조를 넘어서 React 기반 단일 페이지 앱(SPA)으로 업그레이드하는 것도 도전해보고 싶어요!

💡 엘리 교수의 한 줄 요약 코딩을 몰라도 괜찮아요. AI 시대에는 뛰어난 재능이나 기술 지식이 부족해도, AI를 세컨드 브레인으로 어떤 방향으로 활용하느냐가 훨씬 더 중요하니까요. index.html 하나에서 시작한 이 작은 도전이, 지금은 수백 명의 수강생이 찾아오는 교육 플랫폼이 됐습니다. 🔥

🔥<24기 AI 스터디> 10/2 오후 3시까지 신청·변경 가능 🔥