가상 프로그램 웹 구축 기록: 실패를 줄이는 설계 판단

처음 목표

가상 Windows 프로그램을 카드로 보여주고, 카드를 누르면 상세 내용을 보고, Telegram·Kakao 문의와 향후 결제까지 이어지는 웹사이트를 만들고 싶었습니다. 프로그램을 계속 upload하려면 관리자 화면도 필요했습니다.

1단계: 정적 homepage

React나 복잡한 backend 없이도 프로그램 카드, 상세 modal, 검색, 문의 button은 정적 웹으로 빠르게 배포할 수 있었습니다. 이 단계는 Cloudflare Pages에 잘 맞았습니다.

2단계: 관리자 기능의 현실

관리자 login, 프로그램 저장, 설치 파일 upload는 화면만으로 작동하지 않습니다. 그래서 Database는 D1, 파일은 R2, API는 Workers로 나누는 방향이 필요했습니다.

실제로 생긴 혼선

• GitHub 연결과 새 repository 생성 action을 같은 것으로 착각
• Cloudflare 공개 page 권한과 account 내부 배포 권한을 혼동
• 수정된 code가 아닌 예전 Worker entry가 배포됨
• temporary URL과 production URL을 섞어 사용
• 정적 Pages에서 동적 관리자 기능까지 바로 될 것으로 기대

최종 교훈

1. 먼저 결과물의 종류를 정적/동적으로 나눕니다.
2. repository, branch, deployment URL을 문서에 고정합니다.
3. 수정 후 commit SHA와 Cloudflare deployment SHA가 같은지 확인합니다.
4. 실제 API test를 통과한 뒤 사용자에게 주소를 전달합니다.
5. 사용자에게 필요한 클릭은 한 번으로 줄이고, 나머지는 script로 자동화합니다.

왜 가이드 웹을 별도로 만들었나

프로그램 판매 site는 고객에게 제품을 보여주는 곳이고, 이 가이드 site는 배포 방법을 검색해 들어오는 정보형 blog입니다. 목적이 다르므로 navigation과 SEO, 광고 운영도 분리하는 것이 맞습니다.