한 화면 위에서 스크롤로 흐르는 시퀀스
외부에 600vh 컨테이너를 두고 내부를 sticky로 고정. 단일 진행도(0~1) 위에 3개 phase의 등장·퇴장 타이밍을 겹쳐 한 번에 안무합니다. 아래 다시 보기로 시퀀스를 처음부터 재생할 수 있습니다.
생각을 코드로,코드를 경험으로.
아이디어가 인터페이스가 되고, 인터페이스가 흐름이 되는 순간.
저는 그 사이를 잇는 디테일에 집중합니다.
숫자로 보는 발자취
Years
프론트엔드 경력
Projects
출시 및 운영
Tech Stack
라이브러리 / 프레임워크
AI Workflow
AI 협업 비율
AI와 함께 더 깊이,
사람이 마무리하는 마감.
디자인을 그대로 코드로
시맨틱 구조와 접근성을 지키면서, AI로 보일러플레이트는 빠르게 정리합니다.
로그가 이야기를 시작한다
스택 트레이스를 함께 읽고, 가설을 빠르게 검증합니다. 결정과 책임은 사람의 몫.
복잡함을 흐름으로
엣지 케이스를 함께 탐색하고, 가독성과 성능 사이의 트레이드오프를 명확히 합니다.
Phase 윈도우
progress 0~1 위에서 각 phase가 차지하는 구간.
- 0.00 → 0.32
Phase 1 — Hero copy
타이틀은 진입 즉시 노출, eyebrow와 subcopy는 부드럽게 fade-in. progress 0.22~0.32 구간에서 위로 빠지며 다음 phase로 넘어갑니다.
- 0.30 → 0.65
Phase 2 — Counting stats
4장의 글래스 카드가 각자 다른 시작점으로 stagger 등장. 각 숫자는 카드별 진행도에 cubic ease-out을 곱해 0 → 목표값으로 카운트업.
- 0.62 → 1.00
Phase 3 — AI tracks
3장의 트랙 카드가 stagger로 등장. 후반부에 emerald orb가 뒤에서 추가로 들어와 색감을 환기합니다.
구성 요소
시퀀스를 받치는 핵심 부품.
useScrollProgress (sticky mode)
외부 컨테이너 600vh, 내부 sticky h-screen. 컨테이너의 진입~탈출 비율을 0~1 progress로 환산해 모든 phase 안무가 같은 단일 progress에서 파생됩니다.
Phase window mapRange
각 phase는 [from,to] 윈도우만 정의하고 mapRange(progress, from, to, 0, 1)로 0~1 로컬값을 계산. 시퀀스 안무를 한 곳에서 조율할 수 있습니다.
PhaseBackground orbs
radial-gradient orb 4개가 progress에 따라 scale·opacity가 변하며 phase별로 다른 색감 분위기를 만듭니다. 후반에 emerald orb가 합류.
Phase indicator dots
우측에 3개 dot이 phase 도달 시 길이가 늘어나 현재 위치를 표시. 데스크탑 전용 (max-lg:hidden).
재사용
app/main/_components/UnifiedHeroSequence.tsx를 그대로 import. STATS · AI_TRACKS 배열을 props화하면 다른 도메인의 인트로 시퀀스로도 재활용할 수 있습니다.