01Branding
브랜드 리뉴얼
핀테크 스타트업의 아이덴티티를 다시 설계하고 디자인 시스템으로 묶었습니다.
Interaction
아래로 스크롤하면
카드가 옆으로 흐릅니다
세로 스크롤 진행도를 가로 이동(translateX)으로 변환합니다. 카드는 중앙에 들어올 때 살짝 커지고 또렷해집니다.
스크롤
01
08
02Product
대시보드 UX
복잡한 데이터를 한눈에 읽히도록 정보 위계와 차트 패턴을 재구성했습니다.
03Motion
모션 시스템
스크롤·전환·마이크로 인터랙션을 하나의 이징 토큰으로 통일했습니다.
04Commerce
커머스 리디자인
탐색부터 결제까지 이탈 구간을 좁히는 흐름으로 전체 퍼널을 다듬었습니다.
05System
디자인 토큰
색·간격·타이포를 코드와 디자인이 공유하는 단일 토큰으로 연결했습니다.
06Growth
온보딩 플로우
첫 5분의 경험을 단계형 가이드와 진행 인디케이터로 매끄럽게 만들었습니다.
07Campaign
랜딩 캠페인
스크롤 시퀀스로 제품 가치를 단계별로 펼쳐 보이는 캠페인 페이지입니다.
08A11y
접근성 감사
키보드·스크린리더·대비를 점검해 모든 사용자가 닿을 수 있게 보강했습니다.
계속 스크롤해서 카드를 끝까지 넘겨보세요
끝까지 오셨네요 👋
translateX는 스크롤 진행도 한 값에서 파생됩니다. 카드 수·간격만 바꾸면 어떤 콘텐츠든 같은 핀 고정 흐름으로 보여줄 수 있습니다.