소개
시도하고자 했던 것과 그 이유를 알려주세요.
Claude + Netlify로 영어 학습 웹앱페이지 만들고 배포까지 완료했습니다
(코딩 몰라도 됩니다 — Claude Project 설정부터 기획, 배포까지)
이번 22기 스터디는 클로드만 가지고 클로드 생태계를 학습하는 만큼 1주차 수업 내용을 복습하는 것에서부터 출발했습니다.
Claude Project 설정 -> 1주차 복습 & 5/23 오프라인 스터디 -> 디자인 설계 -> NotebookLM 학습&생성&업로드 -> 배포
검은 화 면에 표시된 한국어 앱 스크린샷
시도한 것
수험 영어 웹앱페이지를 직접 기획·제작·배포해봤습니다.
Claude Project 기능으로 지침을 세팅하고, Artifacts로 실제 작동하는 웹앱을 생성했습니다. 디자인 단계에서는 Claude Design과 Gemini(PRD 작성)도 비교 활용했고, 최종 결과물은 Netlify로 배포까지 완료했습니다.
목표
Claude Project의 Custom Instructions로 반복 세팅 없이 맥락 재사용하기
Artifacts로 실제 배포 가능한 웹앱 생성하기
Claude Design / Gemini PRD 비교를 통해 도구별 강점 파악하기
작업한 내용을 지피터스 사례게시글 양식대로 정리해 보기
진행 방법
작업에 사용한 도구들
검은 화면에 한국어 스크린샷
각 도구의 역할들
NotebookLM
NotebookLM에 동일 자료(Day 01 VOCA)를 넣고 모든 자료들을 실행해봄 & 지침 수정
-> 내가 목표로 하는 콘텐츠 형태로 맞춤형 지침을 수정 & 확정함(메모로 저장)
-> 맞춤형 오디오 / 동영상 강의 가능 (단, 플래시카드는 디자인 한계가 있어서 별도 제작)
-> 웹앱 페이지에 업로드
한국어 채팅 앱 스크린샷
Netlify 배포 (코딩 불필요)
Claude Artifacts에서 생성된 HTML 파일을 저장
폴더 전체를 드래그앤드롭 → 30초 후 URL 자동 생성
* 재배포할 때는 반드시 로그인 후 기존 사이트에서
Netlify Drop(비로그인)으로 재업로드하면 매번 새 URL이 생성됨
기존 링크를 유지하려면 로그인 → 기존 사이트 → Deploys 탭에서 드롭해야 함
이걸 몰라서 수정 파일을 올려도 기존 링크가 안 바뀌는 상황이 발생
최종 결과물
포함된 기능:
VOCA 학습 카드 (단어/뜻/예문 + 음성)
플래시카드 복습 테스트 & 워드 파일의 복습 테스트지(NotebookLM으로 생성)
오디오 복습 (m4a) - NotebookLM으로 생성
암기 동영상 강의 (mp4) - NotebookLM으로 생성
학습 달력 + 타이머
쿠폰 시스템 (Day 1~5 무료 / Day 6~30 교재 쿠폰)
휴대폰에 있는 한국어 앱의 스크린샷
파란색 배경의 달력 스크린샷
Voca 앱의 스크린샷
한국어 앱 스크린샷
결과와 배운 점
배운 점 & 나만의 꿀팁
💡 꿀팁 1: Claude Project 지침이 핵심이다
지침에 한 번 세팅해두면 모든 대화에서 맥락이 유지됩니다.
💡 꿀팁 2: 단일 HTML + Netlify = 코딩 몰라도 배포 가능
"단일 HTML 파일로 만들어줘"라고 요청하면 Netlify에 드래그앤드롭으로 즉시 배포됩니다. 서버 지식 불필요!
💡 꿀팁 3: Netlify 재배포는 반드시 로그인 후 기존 사이트에서
비로그인 Drop은 매번 새 URL이 생깁니다. 기존 링크를 유지하려면 로그인 → 기존 사이트 → Deploys 탭에서 재배포해야 해요.
💡 꿀팁 4: 컨텍스트 한계에 걸리면 코드만 들고 새 대화창으로
한 대화창에서 코드 수정을 반복하면 "이 대화는 더 이상 압축할 수 없습니다" 오류가 납니다.
최종 코드를 복사해서 새 대화창에 붙여넣고 이어가면 됩니다. Project 지침이 있으면 맥락은 자동 유지!
💡 꿀팁 5: 배포 폴더에 미디어 파일도 꼭 포함하기
HTML 파일만 올리면 오디오·영상이 빠집니다.
audio/, video/ 폴더까지 함께 배포 폴더에 넣어야 해요.
시행착오
검은 화면에 한국어 단어 목록
SOS
Android Chrome에서도 음성이 간헐적으로 끊기는 경우 해결법? (음성 문제 있음)
Netlify 무료 플랜 파일 용량 한계가 있나요?
향후 계획
Android Chrome 음성 안정화 추가 테스트
Day 2~30 콘텐츠 추가 (오디오, 영상, 플래시카드)
Claude Design ↔ Artifacts 하이브리드 워크플로 정립
헤르메스(Hermes) 연동 — VOCA 데이터 파이프라인 효율화
2단계(Claude Cowork)로 발전: 콘텐츠 업데이트 워크플로 자동화
3단계(Claude Code)로 발전: 앱 버전 제작
도움 받은 글 (옵션)
참고한 지피터스 글이나 외부 사례를 알려주세요.
지피터스 [1기][1단계] Claude + NotebookLM으로 나만의 지식베이스 만들기
1주차 스터디장님 자료 + 5/23 오프라인 강의
