운소 관측소 — 풀페이지 스크롤로 설계한 산정상 천문대 데모

운소(UNSO)는 태백 산정상에 자리한 가상의 천문 관측소를 위해 디자인·개발한 풀페이지 스크롤 데모 사이트입니다. 밤하늘 팔레트 위에서 휠 한 번에 정확히 한 섹션씩 이동하는 커스텀 풀페이지 엔진을 프레임워크 없이 직접 설계했습니다.

커스텀 풀페이지 스크롤 엔진

휠 델타를 누적해 의도된 스크롤만 섹션 전환으로 변환하고, 전환 중에는 800ms 게이트로 입력을 직렬화해 중간에 끼어드는 스크롤을 차단했습니다. 트랙패드 지터(deltaY=0 이벤트)는 무시하고, 마지막 섹션에서는 푸터가 자연스럽게 이어지는 데드엔드 구조를 적용했습니다. 우측 원격 내비게이션, 키보드(화살표·PageUp/Down·Home/End), 해시 기반 서브페이지 진입까지 모두 같은 step 파이프라인을 탑니다.

시설 슬라이더와 내부 스크롤 분리

시설 소개 섹션은 가로 슬라이더가 내부 제스처를 우선 소비하고, 끝에 도달했을 때만 페이지 전환으로 넘기도록 설계했습니다. 중첩된 스크롤 축이 충돌하지 않아 슬라이더를 끝까지 탐색해도 섹션이 과도하게 넘어가지 않습니다.

캠퍼스 아코디언과 직렬화된 확장

야영지·관측 돔·광학 공방 등 여덟 개 시설을 소개하는 캠퍼스 섹션은 클릭 전용 아코디언으로 동작합니다. 항목을 전환할 때 열려 있는 항목을 먼저 닫고(0.24s) 다음 항목을 여는(0.45s) 직렬화 타이밍을 적용해, 두 항목이 동시에 벌어지며 화면이 흔들리는 현상을 구조적으로 제거했습니다. 지도 위 핫스팟과 목록은 같은 상태를 공유하며, 폰트 크기를 min(vw, dvh)으로 제한해 넓고 낮은 창에서도 목록이 잘리지 않습니다.

기술 스택

• Next.js(App Router, static export) + TypeScript
• 라이브러리 없이 구현한 커스텀 풀페이지 스크롤 엔진
• dvh/vw 기반 반응형 타이포그래피와 세로로 짧은 화면 대응
• Cloudflare Pages 배포

라이브 데모 보기