프론트엔드
인프콘 티저 페이지 개발기 (like 해커톤)
두줄요약
SEO와 짧은 개발 기간을 고려해 Next.js 정적 페이지를 Cloudflare Pages에 배포했습니다. Mantine 초기 렌더링 이슈와 GA 누락을 운영 직전 보완한 경험을 공유합니다.
문제 상황
- 이틀의 짧은 개발 기간과 TF 업무 병행 조건의 인프콘 홍보 티저 페이지 개발
- SEO 확보와 정적 홍보 페이지의 간편한 운영 필요
선택 이유
- SSR 및 static HTML export 지원 경험을 바탕으로 Next.js 선택
- 동적 URL·SSR 요구 부재와 서버 관리 최소화를 위한 정적 페이지 배포
- 무료 플랜의 무제한 대역폭·사이트·요청 지원을 고려한 Cloudflare Pages 선택
- 마크업 작업 단축과 전역 테마·컴포넌트 커스텀 지원을 위한 Mantine 도입
문제 상황
- 배포 첫 로드에서 Mantine 스타일 미적용
- 모바일 초기 렌더링에서 데스크톱 스타일이 먼저 노출
- 오픈 직전까지 GA 미등록
해결 방법
- Mantine의 정적 페이지 지원 방안과 속성 적용으로 첫 로드 스타일 문제 해소
- useMediaQuery 초깃값 제약에 따라 데스크톱 뷰 우선 선택
- 피드백 후 GA를 긴급 등록해 유입·경로 추세 확인 기반 마련
