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

청람광학은 대구경 거울과 분광기, 관측 제어를 다루는 가상의 정밀광학 기업을 위한 기업 사이트 데모입니다. 복잡한 관측 인프라를 강한 타이포그래피, 절제된 모션, 체계적인 정보 구조로 명료한 기업 서사로 정리했습니다. 회사·수치·이미지는 모두 가상입니다.

과제

재연마·콜리메이션·광해처럼 낯선 광학 어휘를 실제 기업의 서비스 언어처럼 명료하고 설득력 있게 정리해야 했습니다. 기술 업무를 이해하기 쉽게 설명하고 신뢰감을 형성하면서도, 프로젝트가 가상이라는 사실을 분명히 알리는 균형이 관건이었습니다.

디자인 접근

밤하늘 네이비와 관측 그린을 축으로 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