청람광학 — 정밀 광학·관측 인프라 기업 사이트

청람광학은 대구경 거울과 분광기, 관측 제어를 다루는 가상의 정밀광학 기업을 위한 기업 사이트 데모입니다. HD현대마린솔루션테크의 IA·타이포·모션 문법을 해양·엔진이 아닌 관측 인프라 업종으로 옮겨, 같은 설계 언어가 다른 산업에서 어떻게 작동하는지 검증하는 것이 목표였습니다. 회사·수치·이미지는 모두 가상입니다.

과제

레퍼런스의 모션과 정보 설계가 업종을 바꿔도 성립하는지 확인해야 했습니다. 재연마·콜리메이션·광해처럼 낯선 광학 어휘를 실제 회사처럼 그럴듯하게 배치하되, 곳곳에 가상임을 명시하면서도 몰입감을 유지하는 균형이 관건이었습니다.

디자인 접근

밤하늘 네이비와 관측 그린을 축으로 Pretendard 가변 폰트의 굵기 대비를 극단적으로 썼습니다. 히어로는 능선 위 돔 관측소 야경을 Ken Burns로 천천히 훑고, 이어지는 핀 스크롤 구간에서는 CHEONGRAM / OPTICS 워드마크가 클립 마스크로 열리면서 단어 사이의 사진 슬롯이 너비를 키웁니다. 모든 이미지는 생성형 AI로 제작해 실제 인물·장소가 아님을 푸터에 명시했습니다.

핵심 인터랙션

• 풀스크린 히어로와 재생/정지 — 100dvh 히어로에 재생·정지 컨트롤과 우측 바로가기 어사이드를 두고, 투명 헤더는 스크롤에 따라 솔리드로 전환됩니다.
• 핀 스크롤 워드마크 — 스크럽 타임라인 위에서 두 줄의 워드마크가 순차 공개되고, 인라인 사진이 0에서 142px로 벌어집니다.
• 호버 확장 비즈니스 카드 — 현장 광학·제작실 카드가 호버 시 flex 비율로 확장되며 하위 페이지 태그 링크를 드러냅니다.
• 관측망 패럴랙스와 카운터 — 밤의 지구 위로 주 관측소 6·협력 관측소 11이 카운트업되고, 대문자 마퀴가 섹션을 마감합니다.

• 높이를 맞춘 채용 보드 — 포스터·스트립 열, 광학 지식·복지 카드 열, 모집 분야 리스트를 담은 합류 카드 열이 서로 다른 구성으로 같은 높이에 정렬됩니다. 카드마다 원형 화살표와 리프트 호버를 넣었습니다.
• 섹션 리모컨과 모바일 GNB — 화면 하단의 리모컨 내비가 현재 섹션을 따라가고, 모바일에서는 풀스크린 아코디언 메뉴로 전환됩니다.

기술 · 성능 · 접근성

• Next.js 16 정적 export — App Router 정적보내기로 빌드해 Cloudflare Pages에 배포하고, _headers로 보안 헤더와 정적 에셋 immutable 캐시를 적용했습니다.
• GSAP + Lenis — 핀·스크럽·리빌은 ScrollTrigger, 스무스 스크롤은 Lenis가 맡고, prefers-reduced-motion에서는 핀과 자동 재생을 건너뜁니다.
• 이미지 파이프라인 — 전량 WebP이며 모든 img에 width·height를 명시해 레이아웃 이동(CLS)을 제거했습니다.
• 접근성 — 스킵 링크, aria 라벨, 보이는 포커스 링, 키보드로 열리는 메가 드롭다운을 갖췄습니다.

라이브 데모: ononc-cheongram-optics.pages.dev