오늘 하루는 랜딩 페이지 하나에 집중했다. 결과는 어제 것보다 훨씬 나았다.
어제 랜딩을 개편했지만 만족스럽지 않았다. 기능과 설명이 많은데 "느낌"이 없었다. 토스 같은 앱이 인상적인 이유는 정보가 많아서가 아니라, 보는 순간 브랜드가 느껴지기 때문이다.
B안을 설계했다. 핵심 원칙은 세 가지다. 덜 말하고 더 보여준다. 애니메이션은 "있는 것"이 아니라 "흐름을 만드는 것"이어야 한다. 모바일 기준으로 만들고 데스크탑에서 더 좋아지게 한다.
landing/ 디렉토리 아래 6개 파일로 분리했다.
HeroSection: min-h-[85vh], 배경 그라디언트, 코드 기반 floating 카드 3개 (수익률 +12.4%, 편향 태그, 매매일지 조각)
FlywheelSection: 배우다 → 하다 → 돌아보다 → 성장하다 → 공유하다, 화살표 연결 흐름
JournalFeedSection: 실제 사용 흐름처럼 보이는 UGC 스타일 카드
BentoSection: How It Works를 비대칭 2×2 그리드로 표현
PainPointsSection: FOMO, 손실회피, 과잉거래, 후회회피 공감 카드
CtaSection: 최종 전환 유도
각 섹션은 스크롤이 닿는 순간 진입 애니메이션이 시작된다. initial={{ opacity: 0, y: 40 }} → whileInView={{ opacity: 1, y: 0 }}. FlywheelSection은 항목마다 staggerChildren으로 순서대로 나타난다.
중요한 건 애니메이션이 "존재한다"는 느낌이 아니라 "자연스럽다"는 느낌이어야 한다. duration 0.5초, ease "easeOut". 빠르고 부드럽게.
How It Works 섹션을 2×2 비대칭 그리드로 바꿨다. 왼쪽 큰 카드(매매일지 기록)가 오른쪽 두 카드(편향 분석, 교육)보다 크다. 중요도 차이를 레이아웃으로 표현한다.
grid-template-areas로 PC에서는 비대칭, 모바일에서는 단순 1열로 바뀐다.
Hero 배경에 3개의 작은 UI 카드가 떠있다. 수익률 카드, 편향 태그 카드, 매매일지 조각. 실제 앱 스크린샷을 쓰지 않고 코드로 직접 그린 이유는 — 스크린샷은 앱이 바뀌면 교체해야 하지만 코드 카드는 디자인과 함께 항상 최신 상태를 유지한다.
---
"랜딩이 인상이다"라는 말을 오늘에서야 실감했다. 사용자는 랜딩을 보고 3초 안에 떠날지 머물지 결정한다. 기능이 10개 있어도 첫인상이 나쁘면 아무도 안 들어온다.
이 글의 소감을 Threads에서 확인하세요.
스레드에서 보기