[2주차] 영어 학습 PWA, Claude 생태계로 '프로토타입 → 정식 서비스' 워크플로우 설계하기

[2주차] 영어 VOCA PWA 웹앱 어떻게 만들고 어디로 갈 것인가?

Claude 생태계로 "프로토타입 → 정식 서비스" 워크플로우 설계하기

* Claude 생태계를 단계적으로 익히는 것에서 출발했습니다.

Claude Code까지 확장해서 실제 배포 가능한 앱을 만들어보는 것이 목표였습니다.

소개: 시도한 것과 그 이유

시도한 것

영어 수험생을 위한 어휘 반복 학습 앱(PWA) 직접 기획·구현·배포
Claude 웹(기획·디자인) → Lovable(랜딩 페이지) → Claude Code(앱 개발) → Netlify(배포) 워크플로우 실전 적용
눈에 안 보이는 기초 작업까지: 쿠폰 발행 시스템, 음성 파일 구조 설계, 웹 페이지 연동 등

목표 *[1주차] "단일 도구로 결과물 만들기"

Claude 웹과 Claude Code의 역할 차이를 직접 체감하기
각 도구를 연결해서 하나의 제품 파이프라인 완성하기
"빠른 프로토타입으로 검증 → 정식 스택으로 확장"이라는 2단계 전략 설계하기

진행 방법

작업에 사용한 도구들

각 도구의 역할들

Claude 웹 — 기획·설계·미리보기

화면 구조 설계: 대화로 방향을 잡고, 미리보기 위젯으로 6번 반복 수정해서 확정
확정된 홈 화면 구조: 타이틀 + 순공시간 타이머 + DAY 그리드 + 복습 콘텐츠
코드 없이 "이렇게 바꿔줘 → 즉시 확인" 가능한 것이 강점
단, 실제 파일 수정은 불가 → 방향 확정 후 Claude Code로 넘김

Lovable — 랜딩 페이지

마케팅 페이지 제작
무료 체험 안내 / 쿠폰 등록 / PWA 설치 가이드 포함
시행착오: 디자인 수정 시 삽질 예방을 위해 클로드 디자인을 예시로 삽입했더니 거의 변화 없이 생성함
핵심 발견: Lovable = 랜딩, Claude Code = 앱. 역할을 나누니 각자 완성도가 높아짐

Claude Code — 앱 기능 개발

실제 파일을 직접 읽고 수정하는 것이 Claude 웹과의 가장 큰 차이

"지금 코드 기반으로 이 부분만 고쳐줘"가 가능해서 기존 기능을 안 깨고 새 기능만 추가할 수 있었음.

이번에 추가한 기능들:

🌓 다크/화이트 모드
✅ 3단계 체크
🔖 오답 복습
⭐ 즐겨찾기
🔊 음성 재생
📱 스마트폰 레이아웃
🔗 랜딩 ↔ 앱 연동 — Lovable 랜딩 페이지 URL 연결

대표 코드 — 다크/라이트 테마

처음엔 요소마다 색을 일일이 지정해서 50줄 넘게 중복됐는데, CSS 변수로 통합하니 5줄로 해결됨 → 클로드 코드가 다 해줌

// CSS 변수로 통합 관리 → 단 몇 줄로 전체 색상 전환
function setTheme(t) {
  localStorage.setItem('voca_theme', t);
  document.body.className = t === 'light' ? 'light' : '';
  render();
}

:root      { --bg:#0d1520; --text:#e5ebf5; --accent:#4a9ee0; } /* 다크 */
body.light { --bg:#f5f7fa; --text:#1a202c; --accent:#185fa5; } /* 라이트 */

Netlify 배포 (코딩 불필요)

쿠폰 발행 (Python + Claude Code)

눈에 보이지 않지만 앱웹 실현을 위한 기초 작업도 병행:

쿠폰 엑셀·CSV 대량 생성 완료
1쿠폰 = 1계정

최종 결과물: '앱'(상단) 하단의 '자료실' 클릭 시 '웹 페이지'(하단)로 이동

포함된 기능:

VOCA 학습 카드
3단계 체크 + 오답 복습 + 즐겨찾기
다크/라이트
순공시간 타이머
쿠폰 시스템
음성 재생
스마트폰 레이아웃

전체 워크플로우

현재(임시) → 정식 전환 계획:

결과와 배운 점

배운 점 & 나만의 꿀팁

💡 꿀팁 1: Claude 웹과 Claude Code의 역할을 나눠라

먼저 Claude 웹으로 방향을 잡고, Claude Code에 "이 부분만 고쳐줘"로 넘기면 서로의 약점을 보완할 수 있음.

💡 꿀팁 2: Lovable은 랜딩, 앱은 Claude Code로 분리

둘을 같은 곳에서 하려다 시행착오를 겪음. 역할을 나누니 각자 완성도가 높아지고 관리도 편해짐.

💡 꿀팁 3: 구체적인 내용을 제시할수록 클로드 코드가 제대로 구현해줌

요소별 색상 지정(50줄) → CSS 변수 + body.light 토글(5줄). 기능 추가할 때도 변수만 따르면 되니 실수가 없음.

시행착오

renderHome을 처음부터 새로 짜려다 기존 기능이 깨짐
→ "기존 코드 기반으로 이 부분만"으로 지시 방식 변경 후 해결
즐겨찾기·체크가 DAY 바뀌면 섞임
→ 인덱스만 저장하다 생긴 문제. DAY 정보 함께 저장해서 해결
라이트 모드 배경이 너무 밝음
→ 디자인 수정

SOS: 도움이 필요한 부분

Claude 웹 ↔ Claude Code 더 매끄럽게 연결하는 방법
지금은 파일을 zip으로 받아서 넘기는데, 더 나은 방법이 있는지?
컴퓨터가 다를 때 작업 이어가기
GitHub로 옮기면 해결될지? Claude Code의 로컬 작업도 이어갈 수 있는지?

향후 계획

Android Chrome 음성 안정화 추가 테스트
콘텐츠 추가
Supabase 쿠폰·회원 DB 연결 (Firebase → Supabase 전환)
Vercel + GitHub 자동 배포 전환
2단계(Claude Cowork)로 발전: 콘텐츠 업데이트 워크플로우 자동화
3단계(Claude Code)로 발전: 앱 버전 제작
관리자 페이지 생성

도움 받은 글

스터디장님 사례글 (Claude Design 활용)
Claude Code 워크플로 영상
https://www.youtube.com/watch?v=CDTEtw90G04

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