마크업 목업 호스팅 마이그레이션 - Neocities에서 Cloudflare Pages로
마크업 목업 호스팅 마이그레이션 - Neocities에서 Cloudflare Pages로
목차
배경
- 마크업 개발 업무에서 실제 서비스에 반영되기 전 화면 검수용
정적 목업(mock-up)을 별도 호스팅으로 공유하는 과정이 필요함 - 기존에는 무료 정적 호스팅 서비스인
Neocities를 활용해 목업 결과물을 업로드하고 URL을 공유하는 방식으로 운영해 옴 - SM(시스템 유지보수) 특성상 화면 요청 → 마크업 작업 → 목업 검수 → 실서비스 반영의 사이클이 빈번하게 반복되는데, 이 과정에서 업로드 방식의 비효율이 누적되어 호스팅 환경 자체를 재검토하게 됨
기존 환경의 한계 - Neocities
- Neocities는 브라우저 기반 파일 매니저 또는 수동 업로드 방식에 의존하는 구조라 다음과 같은 문제가 있었음
- 파일 단위 업로드/드래그 앤 드롭 방식이라 폴더 구조가 복잡해질수록 관리가 번거로움
- 버전 관리 개념이 없어 이전 목업으로 되돌리거나 변경 이력을 추적하기 어려움
- HTTPS는 지원하나 커스텀 도메인 연결이나 캐시 정책 등 세부 설정의 자유도가 낮음
- 무엇보다
업로드 자체가 수동 작업이라 형상관리(Git)와 결과물(호스팅)이 분리되어 있어 이중 관리가 발생함
# 기존 방식 - 매번 수동으로 zip 압축 후 웹 UI에서 업로드
zip -r mockup_20260101.zip ./dist
# → Neocities 웹 대시보드 접속 → 파일 업로드 → 경로 재배치
Cloudflare Pages를 선택한 이유
- Cloudflare Pages는 정적 사이트 호스팅에 특화된 서비스로, 아래 조건을 만족함
- Git 저장소 연동을 전제로 하는 구조라
커밋 = 배포라는 흐름을 만들 수 있음 - 빌드 로그와 배포 히스토리가 자동으로 남아 롤백이 가능함
- 브랜치별 프리뷰 배포(Preview Deployment)를 지원해 작업 브랜치 단위로 별도 URL을 즉시 확인할 수 있음
- CDN 기반이라 응답 속도와 안정성이 Neocities 대비 우수함
- 무료 티어 내에서도 커스텀 도메인, HTTPS, 무제한 대역폭 등을 제공함
- Git 저장소 연동을 전제로 하는 구조라
핵심은 단순 호스팅 교체가 아니라
수동 업로드 → Git 기반 배포로 워크플로우 자체를 바꾸는 것이었음
마이그레이션 과정
디렉토리 구조 정리
- 기존 Neocities에 올라가 있던 목업 파일들은 프로젝트별 네이밍 규칙이 통일되어 있지 않아, 이관 전 디렉토리 구조부터 재정리함
mockups/
├── jeju-air-app/
│ ├── index.html
│ └── assets/
├── change-management/
│ ├── index.html
│ └── assets/
└── design-system/
├── index.html
└── assets/
- 프로젝트 단위 하위 폴더로 분리하고, 각 폴더가 곧 하나의 목업 페이지 진입점이 되도록 구성함
배포 방식 비교
| 구분 | Neocities | Cloudflare Pages |
|---|---|---|
| 배포 트리거 | 수동 업로드 | Git push (연동 시) |
| 버전 이력 | 없음 | 배포 히스토리 자동 기록 |
| 브랜치별 미리보기 | 불가 | 가능 (Preview URL) |
| 롤백 | 직접 재업로드 | 대시보드에서 이전 배포로 즉시 전환 |
- 우선 1단계로는 Cloudflare Pages 대시보드에서
직접 업로드(Direct Upload)방식으로 빌드 결과물을 배포하는 방식부터 적용함 - Git 저장소 연동 없이도 Neocities보다 안정적인 URL과 롤백 기능을 확보할 수 있어, 완전 자동화 이전 단계에서도 실질적인 개선 효과가 있었음
향후 계획 - GitLab 기반 자동 배포
- 현재 사내 형상관리는 GitLab을 사용하고 있어,
git push만으로 목업이 자동 배포되는 파이프라인 구축이 다음 목표임 - Cloudflare Pages는 GitHub 연동은 기본 지원하지만 GitLab의 경우
GitLab CI/CD + Wrangler CLI조합으로 배포 스크립트를 직접 구성해야 함
# .gitlab-ci.yml (예정 - 구성 예시)
deploy_mockup:
stage: deploy
image: node:20
script:
- npm install -g wrangler
- wrangler pages deploy ./dist --project-name=mockups
only:
- main
- 이 방식이 적용되면 목업 결과물 병합(merge) 시점에 자동으로 배포가 트리거되어, 앞서 언급한 수동 업로드 단계 자체가 사라지게 됨
- 아직 파이프라인 구현 전 단계로,
Wrangler CLI 인증 토큰의 GitLab CI 변수 등록및프로젝트별 배포 대상 분기 처리부분을 검토 중임
요약
- 목업 검수 공유 방식을 Neocities의 수동 업로드에서 Cloudflare Pages로 전환하며, 배포 안정성과 URL 관리 효율을 개선함
- 1단계로 Direct Upload 방식을 우선 적용해 즉시 체감 가능한 개선(롤백, 배포 이력)을 확보함
- 2단계로 GitLab CI/CD와 Wrangler CLI를 연동해
커밋 = 배포가 되는 완전 자동화 파이프라인을 구축할 예정이며, 이는 현재 진행 중인 과제임 - 단순한 호스팅 서비스 교체가 아니라, 반복되던 수동 작업을 형상관리 흐름 안으로 통합하는 프로세스 개선의 관점에서 접근한 것이 이번 마이그레이션의 핵심임