IMAGINE AX 2026 랜딩페이지 — Figma에서 Next.js로

맥락

IMAGINE AX 2026은 CongKong이 준비 중인 행사다. 4월 30일, Figma 시안이 확정되자마자 랜딩페이지 개발을 시작했다.

기술 스택은 Next.js + Tailwind CSS. Firebase Hosting으로 배포하고, 정적 export(output: 'export')로 구성했다.

개발 흐름

초기 셋업 → 반응형 → 애니메이션 순서로

첫 커밋에서 전체 섹션 구조를 잡고 (Hero / Invitation / Agenda / Location / FAQ / Footer), 그다음 날 반응형을 붙였다.

Figma 시안이 데스크톱 기준으로만 나와 있어서 모바일 레이아웃은 직접 판단해야 했다. 결국 모바일에서는 Hero, Location, Footer만 노출하고 Invitation/Agenda/FAQ는 숨기는 방향으로 결정했다. 행사 초대 컨텍스트상 모바일 유저에게 필요한 건 날짜/장소/등록 버튼이니까.

Hero 섹션 삽질 로그

Hero에서 가장 많이 헤맸다.

이중 스크롤바 문제: Hero를 fullscreen으로 잡으면서 100vw + overflow-x: hidden 조합이 body 스크롤바 너비를 계산에서 빠뜨려 오른쪽에 갭이 생겼다. 100dvh로 교체하고 scrollbar-gutter: stable을 추가해서 해결.

Hero 콘텐츠 음수 left: 스크롤 시 Hero content div의 left 값이 음수로 가서 화면 밖으로 잘리는 현상. transform 기반 parallax를 position 기반으로 교체.

이미지 로드 전 애니메이션 튀는 현상: 배경 이미지가 로드되기 전에 fade-in 애니메이션이 먼저 실행돼서 빈 화면이 번쩍이는 문제. onLoad 이벤트 뒤에 animation class를 붙이는 방식으로 처리.

FAQ ↔ Location 섹션 경계

blur glow 효과를 쓰는 FAQ 섹션 상단과 gradient 처리된 Location 섹션 하단이 맞닿으면서 경계선이 눈에 띄게 생겼다. gradient bridge 레이어를 둘 사이에 끼워 자연스럽게 이어지도록 했다.

배포

Firebase Hosting에 정적 파일로 배포. CI는 GitHub Actions.

next export가 생성한 out/ 폴더를 그대로 올리는 구조라 CDN 캐시와 잘 맞는다.