소개
1) 시도한 것
이번 에는 PRD 기반의 MVP를 보다 뾰족하게 만들고, 실제 데이터를 넣어 작동하는 영어 VOCA 웹앱을 만들어보는 것을 목표로 했습니다.
이번 1차 목표는 다음과 같았습니다.
DAY 1 어휘 학습 기능 구현
영어 단어, 한글 뜻, 예문 표시
음성 재생 기능 적용
모바일 앱처럼 보이는 화면 구성
GitHub 연동 및 배포
Cloudflare 활용
Codex와 Claude Code를 비교하며 화면 개선
이후 쿠폰 인증과 관리자 페이지로 확장할 수 있는 구조 확인
2) 목표
이번 주에는 전체 60DAY를 다 만드는 것이 아니라, 우선 DAY 1만 완성해 실제 개발·배포 흐름을 끝까지 경험하는 데 집중했습니다.
즉, “될 것 같다”가 아니라 “일단 하나는 실제로 된다”까지 가보는 것이 목표였습니다.
진행 방법
1) 작업에 사용한 도구
이번 작업에는 여러 도구를 함께 사용했습니다.
Stitch: 초기 앱 화면 디자인 구성
ChatGPT: 기획 정리, 작업 지시서 작성, 판단 기준 정리
Codex: 실제 코드 개발, 수정, 빌드, 배포 흐름 진행
Claude Code: 별도 복사본에서 디자인 대안 제작
GitHub: 코드 백업 및 버전 관리
Cloudflare: Preview 배포 및 PWA 검수 환경 확인
2) 각 도구의 역할
Stitch에서는 먼저 앱의 전체적인 화면 방향을 잡았습니다.
홈, 학습, 복습, 테스트, 전체 듣기 같은 주요 화면을 시각적으로 구성하면서 “어떤 앱이 되어야 하는지”를 먼저 확인했습니다.
디자인은 만족할 만했지만, 매번 달라지는 디자인 때문에 많이 힘들었습니다.
흐름도(설계도), 기능 정의, 디자인 구성, 링크 연결 등 대부분 이곳에서 작업을 하고 수정이 반영 안 된 부분은 Codex에서 했습니다.
한국어로 된 비즈니스 프로세스 다이어그램
한국 초콜릿을 만드는 과정을 보여주는 다이어그램
검은 화면에 한국 이름 목록
파란색과 노란색 배경의 웹사이트 스크린샷
ChatGPT에서는 기획 방향과 작업 순서를 정리했습니다.
특히 비개발자 입장에서 Codex나 Claude Code에 어떤 식으로 지시해야 안전한지, 원본을 건드리지 않으려면 어떤 조건을 넣어야 하는지 정리하는 데 도움을 받았습니다.
Codex에서는 이 디자인을 바탕으로 실제 웹앱 개발을 진행했습니다.
DAY 1 데이터를 넣고, 음성 재생과 학습 화면을 구성하고, 모바일에서 앱처럼 보이도록 수정했습니다.
Claude Code는 원본 프로젝트를 건드리지 않고 복사본에서만 디자인 대안을 만들게 했습니다.
이를 통해 Codex안과 Claude Code안을 비교하면서 더 나은 부분을 선별할 수 있었습니다.
GitHub와 Cloudflare는 실제 서비스 운영을 염두에 두고 활용했습니다.
단순히 로컬에서 실행되는 결과물이 아니라, 배포와 백업까지 이어지는 흐름을 경험해본 것이 이번 작업의 중요한 부분이었습니다.
3) 구체적인 작업 내용
이번에 진행한 핵심 작업은 다음과 같습니다.
영어 VOCA 웹앱의 DAY 1 학습 화면 구현
영어 단어, 품사, 한글 뜻, 예문, 해석 표시
영어 음성 및 한글 뜻 음성 재생 구조 적용
모바일 기준 화면 가독성 개선
하단 탭 구조 정리
전체 듣기 화면 구성
테스트 기능 확장 가능성 확인
GitHub 연동 및 코드 백업
Cloudflare를 활용한 배포 흐름 확인
Claude Code로 별도 디자인 시안 제작
Codex 작업물과 Claude Code 작업물 비교 검토
작업 과정에서 특히 중요하게 본 것은 “웹페이지처럼 보이지 않고 실제 앱처럼 느껴지는가”였습니다.
처음에는 화면이 조금 길게 느껴지거나, 모바일에서 일부 정보가 작게 보이는 문제가 있었습니다. 그래서 글자를 무조건 줄이는 방식이 아니라, 중요하지 않은 설명과 장식, 과도한 여백을 줄이는 방식으로 조정했습니다.
예를 들어 전체 듣기 화면에서는 재생목록의 모든 단어가 한 화면에 보일 필요가 없다고 판단했습니다. 대신 현재 재생 중인 단어와 뜻이 잘 보이도록 하고, 목록은 일부만 보이게 한 뒤 내부 스크롤로 처리하는 방향을 검토했습니다.
또 이번에는 GitHub Pages용 빌드와 Cloudflare용 빌드를 분리하는 작업도 진행했습니다.
그 결과 mobile-ui-v2 브랜치 기준으로 Cloudflare Preview 배포가 가능해졌고, 현재 검수용 Preview 주소에서 DAY 1 학습 화면과 PWA 관련 자산을 확인할 수 있는 상태가 되었습니다.
4) 최종 결과물
현재는 DAY 1 기준으로 실제 앱 개발과 1차 배포 흐름까지 완료한 상태입니다.
이번 단계에서 완성한 것은 전체 서비스의 최종본이라기보다, 앞으로 확장할 수 있는 첫 번째 작동 버전입니다.
현재 완료된 범위는 다음과 같습니다.
DAY 1 학습 기능 1차 완성
모바일 앱형 화면 구성
영어·한국어 음성 재생 기능 적용
학습자료 및 테스트 확장 구조 확인
GitHub 연동
Cloudflare Preview 배포
PWA 홈 화면 설치 검수 가능 상태 확인
Codex와 Claude Code 비교 수정 진행
검수용 도메인으로 별도 연결하려고 했지만, 현재 기존 랜딩 도메인의 DNS가 Cloudflare가 아니라 가비아에서 관리되고 있어 바로 연결하기는 어렵다는 점도 확인했습니다.
Cloudflare Preview 브랜치에 커스텀 도메인을 안전하게 연결하려면 Cloudflare의 Proxied DNS가 필요했기 때문에, 무리하게 DNS를 변경하지 않고 중단했습니다.
현재는 정식 도메인이나 기존 도메인 구조를 건드리지 않고, Cloudflare의 pages.dev Preview 주소로 별도 검수를 진행하는 방향으로 정리했습니다.
다음 단계에서는 쿠폰 인증 기능과 관리자 페이지를 개발할 예정입니다.
DAY 10 이후 콘텐츠에 접근할 수 있도록 하는 구조가 핵심 과제가 될 것 같습니다.
결과와 배운 점
1) 배운 점과 나만의 꿀팁을 알려주세요.
이번 작업에서 가장 크게 배운 점은 AI 도구를 하나만 쓰는 것보다, 역할을 나누어 쓰는 것이 훨씬 효과적이라는 점이었습니다.
기획과 화면 구상은 Stitch가 빠르고, 실제 개발과 수정은 Codex가 강점이 있었습니다.
Claude Code는 원본을 건드리지 않는 복사본에서 디자인 대안을 만들게 하니 비교용으로 유용했습니다.
특히 비개발자 입장에서는 “원본을 망가뜨리지 않는 구조”가 정말 중요했습니다.
그래서 Claude Code에는 다음과 같이 명확히 지시했습니다.
원본 프로젝트는 절대 수정하지 말고, 복사본에서만 작업해줘.
Git 커밋, 푸시, 배포는 하지 말 것.
수정 후 화면 캡처와 변경 이유만 알려줘.이렇게 해두니 마음 놓고 대안을 실험할 수 있었습니다.
또 하나의 팁은 처음부터 전체 기능을 만들려고 하지 않는 것입니다.
DAY 1만 먼저 해보니 필요한 데이터, 음성, 화면, 배포 흐름을 훨씬 선명하게 파악할 수 있었습니다.
이때 여러 기준들을 확정해서 이후 작업들에 적용할 예정입니다.
2) 과정 중에 어떤 시행착오를 겪었나요?
(1) 가장 큰 시행착오는 원본과 복사본을 동시에 다루면서 어느 쪽 화면을 보고 있는지 헷갈린 점이었습니다.
Claude Code는 복사본을 수정하고 있었는데, 처음에는 브라우저에서 원본 서버 화면을 보고 있었습니다. 나중에 포트를 확인하고 나서야 수정본 서버와 원본 서버가 다르다는 것을 알게 되었습니다.
이번 경험을 통해 앞으로는 다음을 꼭 확인해야겠다고 생각했습니다.
지금 보고 있는 화면이 원본인지 복사본인지
로컬 서버 포트가 어느 프로젝트와 연결되어 있는지
GitHub에 올라간 버전과 로컬 수정본이 같은지
Cloudflare Preview와 production이 구분되어 있는지
모바일에서 실제로 봤을 때도 괜찮은지
(2) 모바일 앱은 PC 브라우저에서 보는 것과 실제 휴대전화에서 보는 느낌이 다르다는 점도 확인했습니다. 글자 크기, 손가락 조작감, 상하단 고정 느낌은 실제 모바일 확인이 꼭 필요했습니다.
(3) 처음에는 임시 도메인을 붙이면 검수용으로 공유하기 좋겠다고 생각했습니다. 그런데 확인해보니 현재 도메인의 DNS가 가비아에서 관리되고 있어 Cloudflare Preview 브랜치와 바로 연결하기 어렵다는 점을 알게 되었습니다.
그래서 정식 도메인이나 DNS 구조를 무리하게 건드리지 않고, 우선 Cloudflare Preview 주소로 검수를 진행하기로 했습니다. 이 과정에서 “배포 주소를 예쁘게 만드는 것”보다 “기존 서비스와 도메인을 안전하게 유지하는 것”이 더 중요하다는 점을 배웠습니다.
3) 도움이 필요한 부분이 있나요?
다음 단계에서는 쿠폰 인증과 관리자 페이지를 만들어야 합니다.
고민되는 부분은 다음과 같습니다.
교재 구매자만 DAY 10 이후를 볼 수 있게 하는 쿠폰 구조
쿠폰 등록을 너무 복잡하지 않게 만드는 방법
관리자 페이지에서 쿠폰을 생성하고 관리하는 방식
학습 기록을 어디까지 저장할 것인지
로그인 없이 운영할지, 최소한의 인증을 둘지
DAY 2 이후 데이터를 어떤 순서로 확장할지
실제는 웹의 형태인 PWA 특성을 어떻게 하면 앱처럼 보이게 할지
비용적 측면
현재는 수험생이 최대한 쉽게 접근하는 것이 중요하다고 보고 있습니다.
그래서 로그인은 최소화하고, 교재 구매 인증에 필요한 쿠폰 기능을 중심으로 설계하려고 합니다.
4) 앞으로의 계획이 있다면 들려주세요.
앞으로의 계획은 다음과 같습니다.
Codex안과 Claude Code안을 비교해 더 나은 모바일 화면 반영
Cloudflare Preview 주소로 검수 진행
실제 휴대전화에서 DAY 1 학습 흐름 점검
앱 아이콘 및 iPhone/Android 홈 화면 추가 기능 정리
DAY 1 기준 최종 검수
쿠폰 인증 기능 개발
관리자 페이지 개발
DAY 2 이후 콘텐츠 확장 준비
전체 DAY 데이터와 음성 파일 연결 구조 정리
이번 작업은 아직 최종 완성이 아니라 1차 완성입니다.
하지만 비개발자도 AI 도구를 잘 조합하면 기획, 디자인, 개발, 배포까지 실제 서비스의 첫 버전을 만들 수 있다는 점을 확인한 의미 있는 단계였습니다.
도움 받은 글
스터디장님 & 조코딩 책과 유튜브 영상 & 8월 1일 오프라인 모각
