배포 플랫폼 선택하기

완성된 웹사이트를 실제 사용자에게 서비스하기 위해서는 배포가 필요합니다. 여러 플랫폼을 비교한 결과, Cloudflare Pages를 선택했습니다.

주요 배포 플랫폼 비교

플랫폼	무료 한도	장점	단점
Cloudflare Pages	무제한	빠른 CDN, 무료 SSL	빌드 제한
Netlify	100GB/월	쉬운 설정	대역폭 제한
Vercel	100GB/월	Next.js 최적화	가격
GitHub Pages	1GB	간단함	기능 제한

Cloudflare Pages를 선택한 이유

• 무제한 대역폭: 트래픽이 많아져도 걱정 없음
• 전 세계 CDN: 빠른 로딩 속도
• 자동 HTTPS: 무료 SSL 인증서
• Git 연동: 푸시만 하면 자동 배포
• 프리뷰 배포: PR마다 미리보기 생성

배포 준비하기

1. Git 저장소 생성

먼저 프로젝트를 Git 저장소로 관리해야 합니다.

# Git 초기화
git init

# .gitignore 파일 생성
echo "node_modules/" > .gitignore
echo ".env" >> .gitignore
echo ".DS_Store" >> .gitignore

# 첫 커밋
git add .
git commit -m "Initial commit: 심리 테스트 허브 웹사이트"

# GitHub 저장소 생성 후 연결
git remote add origin https://github.com/username/psychological-test-hub.git
git branch -M main
git push -u origin main

2. 프로젝트 구조 확인

Cloudflare Pages는 정적 사이트를 호스팅하므로, 모든 파일이 올바른 경로에 있는지 확인합니다.

프로젝트/
├── index.html           ← 루트에 위치
├── css/
├── js/
├── blog/
│   ├── index.html
│   └── posts/
└── README.md

Cloudflare Pages 배포하기

1단계: Cloudflare 계정 생성

cloudflare.com에 접속하여 무료 계정을 만듭니다.

2단계: Pages 프로젝트 생성

1. Cloudflare 대시보드에서 "Pages" 선택
2. "Create a project" 클릭
3. "Connect to Git" 선택
4. GitHub 계정 연동
5. 배포할 저장소 선택

3단계: 빌드 설정

정적 사이트이므로 빌드 과정이 필요 없습니다.

프로젝트 이름: psychological-test-hub
프로덕션 브랜치: main
빌드 명령: (비워둠)
빌드 출력 디렉토리: /
루트 디렉토리: /

4단계: 환경 변수 설정 (필요시)

Google Analytics ID 등 환경 변수가 있다면 설정합니다.

GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX
ADSENSE_CLIENT_ID=ca-pub-XXXXXXXX

5단계: 배포 완료

"Save and Deploy" 버튼을 클릭하면 자동으로 배포가 시작됩니다. 약 1-2분 후 배포가 완료되고, https://프로젝트이름.pages.dev 주소가 생성됩니다.

커스텀 도메인 연결

1. 도메인 구매

Cloudflare Registrar나 다른 도메인 제공업체에서 도메인을 구매합니다.

• Cloudflare Registrar (추천)
• Namecheap
• GoDaddy
• 가비아 (한국)

2. DNS 설정

Cloudflare Pages에서 제공하는 DNS 레코드를 추가합니다.

Type: CNAME
Name: @
Target: 프로젝트이름.pages.dev
Proxy status: Proxied (주황색 구름)

3. SSL/TLS 설정

Cloudflare는 자동으로 무료 SSL 인증서를 발급합니다. 약 24시간 이내에 HTTPS가 활성화됩니다.

자동 배포 설정

이제 GitHub에 코드를 푸시하면 자동으로 배포됩니다.

# 코드 수정 후
git add .
git commit -m "Add new feature: 테스트 결과 공유 기능"
git push origin main

# Cloudflare Pages가 자동으로 배포 시작
# 약 1-2분 후 변경사항이 반영됨

브랜치별 배포

개발 브랜치를 만들어 테스트할 수 있습니다.

# 개발 브랜치 생성
git checkout -b develop
git push origin develop

# Cloudflare가 자동으로 미리보기 배포 생성
# https://develop.프로젝트이름.pages.dev

성능 최적화 설정

1. Caching 설정

Cloudflare 대시보드에서 캐싱 규칙을 설정합니다.

정적 파일 (CSS, JS, 이미지): 1개월 캐싱
HTML: 1시간 캐싱
API 응답: 캐싱 안 함

2. 압축 활성화

Brotli와 Gzip 압축을 활성화하여 전송 크기를 줄입니다.

3. HTTP/2 & HTTP/3

Cloudflare는 자동으로 HTTP/2와 HTTP/3를 지원합니다.

모니터링과 분석

1. Cloudflare Analytics

무료로 제공되는 분석 도구로 트래픽을 모니터링합니다.

• 방문자 수
• 대역폭 사용량
• 인기 페이지
• 트래픽 지역 분포

2. Google Analytics 연동

<!-- index.html의 head에 추가 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

3. 에러 모니터링

프로덕션 환경에서 발생하는 에러를 추적합니다.

// 전역 에러 핸들러
window.addEventListener('error', (event) => {
    // 에러 로깅 서비스에 전송
    logError({
        message: event.message,
        filename: event.filename,
        lineno: event.lineno,
        colno: event.colno,
        stack: event.error?.stack
    });
});

// Promise 에러 핸들러
window.addEventListener('unhandledrejection', (event) => {
    logError({
        type: 'unhandled_promise_rejection',
        reason: event.reason
    });
});

보안 설정

1. 보안 헤더 추가

Cloudflare Workers를 사용하여 보안 헤더를 추가할 수 있습니다.

// _headers 파일 생성
/*
  X-Frame-Options: DENY
  X-Content-Type-Options: nosniff
  Referrer-Policy: strict-origin-when-cross-origin
  Permissions-Policy: geolocation=(), microphone=(), camera=()

2. DDoS 보호

Cloudflare가 자동으로 DDoS 공격을 차단합니다.

3. Bot 관리

악의적인 봇을 차단하고 정상적인 검색엔진 봇은 허용합니다.

운영 체크리스트

배포 후 확인사항

• ✅ 모든 페이지가 정상적으로 로드되는지 확인
• ✅ 모바일에서도 제대로 표시되는지 테스트
• ✅ HTTPS가 활성화되어 있는지 확인
• ✅ Google Analytics가 데이터를 수집하는지 확인
• ✅ 404 페이지가 제대로 작동하는지 테스트
• ✅ 모든 링크가 정상 작동하는지 확인

정기 점검 항목

• 주간: 트래픽 및 에러 로그 확인
• 월간: 성능 지표 분석
• 월간: 보안 업데이트 확인
• 분기: 사용자 피드백 반영

비용 예상

Cloudflare Pages 무료 플랜으로 충분합니다:

• 호스팅: $0 (무료)
• 대역폭: $0 (무제한)
• SSL: $0 (무료)
• 도메인: $10-15/년
• 총 비용: 약 $15/년

트러블슈팅

문제: 배포 후 JavaScript 모듈이 로드되지 않음

해결: MIME 타입 확인. _headers 파일에 추가:

/*.js
  Content-Type: application/javascript

문제: 404 에러 발생

해결: 경로가 올바른지 확인. 절대 경로 대신 상대 경로 사용.

문제: 변경사항이 반영되지 않음

해결: 캐시 퍼지. Cloudflare 대시보드에서 "Purge Cache" 실행.

다음 단계

배포가 완료되었다면 이제 다음 단계로 나아갈 차례입니다:

1. Google Search Console에 사이트 등록
2. AdSense 신청
3. 소셜 미디어 계정 생성 및 홍보
4. 사용자 피드백 수집 시스템 구축
5. A/B 테스트로 전환율 개선
6. 새로운 심리 테스트 추가

"배포는 끝이 아니라 새로운 시작입니다. 지속적인 개선과 사용자 피드백을 통해 서비스를 발전시켜 나가세요."