2026 스타트업 랜딩페이지 트렌드 리포트
요즘 잘나가는 스타트업들의 첫 화면(랜딩페이지)이 실제로 어떻게 만들어졌는지 궁금할 때, 감이 아니라 직접 측정한 데이터로 트렌드를 뽑아본 리포트다. 화제의 스타트업 10곳의 페이지를 자동화 도구로 열어 폰트·색·애니메이션 방식 등을 뜯어보고 공통 패턴을 정리했다.
먼저 알아둘 용어: 랜딩페이지는 사이트에 처음 도착했을 때 보는 첫 페이지, 히어로(hero)는 그 첫 화면 맨 위 큰 영역, CTA(Call To Action)는 "가입하기" 같은 핵심 행동 유도 버튼, YC W26은 유명 스타트업 액셀러레이터 Y Combinator의 2026년 겨울 기수를 뜻한다.
조사 방법
- 대상: 2026년 7월 기준 글로벌 화제 스타트업 10곳 (YC W26 신생 2곳 + 2025~26 브레이크아웃 dev tool/AI 기업 8곳)
- 도구: Playwright(브라우저를 코드로 자동 조작해 캡처·측정하는 도구, Chromium 엔진 사용)로 각 사이트를 1440px/375px 뷰포트에서 실측 — 히어로·스크롤 25/50/75%·CTA 호버·모바일 스크린샷 + computed style(브라우저가 실제로 적용한 최종 CSS 값)·폰트·
@keyframes수(CSS 애니메이션 정의 개수)·애니메이션 라이브러리·canvas·video 개수 추출 - 한계: 봇월 없이 전 사이트 정상 캡처. 호버 캡처 2곳(granola, heypocket)은 모달 간섭
| 사이트 | 분류 | 테마 | h1 | keyframes | video/canvas | 스타일 한 줄 정의 |
|---|---|---|---|---|---|---|
| cursor.com | AI 에디터 | 라이트 #f7f7f4 | 26px/400 | 28 | 1/0 | 인상파 회화 배경의 에디토리얼 미니멀 |
| lovable.dev | vibe coding | 라이트 #fafafa | (비주얼 별도) | 36 | 3/0 | 오로라 그라디언트 챗-퍼스트 |
| granola.ai | AI 노트 | 라이트 #fff + grain | 86px/400 세리프 | 76 | 0/6 | 세리프 에디토리얼 × 라이브 DOM 데모 |
| browserbase.com | 에이전트 인프라 | 라이트 | — | 6 | 5/1 | 스위스 괘선 × 픽셀 디더링 레트로 |
| modal.com | GPU 인프라 | 다크 #000 | 64px/500 | 9 | 8/2 | 네온 그린 발광 3D 다크 럭셔리 |
| mintlify.com | docs 플랫폼 | 라이트 종이색 | 50px/400 세리프 | 17 | 0/15 | 프린트 감성 라이트 스위스 |
| resend.com | 이메일 API | 다크 #000 | 96px/400 세리프 | 61 | 5/1 | 다크 럭셔리 + 세리프 에디토리얼 |
| elevenlabs.io | AI 오디오 | 라이트 #fdfcfc + grain | 48px/300 | 0 | 0/3 | 웜 화이트 스위스 + grain 오브 |
| heypocket.com (YC W26) | AI 하드웨어 | 라이트 #fff | — | 28 | 10/0 | 애플식 미니멀 D2C |
| usecardboard.com (YC W26) | AI 영상편집 | 다크 #1a1a1a | 60px/100 세리프 | 37 | 56/0 | 다크 시네마틱 + 세리프 |
핵심 발견 8가지 (빈도순)
1. JS 애니메이션 라이브러리 전멸 — 10/10
GSAP, Framer Motion, Lenis, Three.js 전부 0곳 검출. 모션은 세 갈래로 재편됐다.
- CSS
@keyframes(전 사이트, 6~76개) - CSS Scroll-Driven Animations (
animation-timeline: scroll()/view()) — granola, resend, browserbase, heypocket 4/10이 프로덕션 실사용. 폴리필·라이브러리 없이 스크롤 리빌·단계 전환·카운터 구현 - React 상태 기반 전환 (탭·캐러셀·아코디언)
2024~25의 "GSAP + ScrollTrigger 기본 장착" 공식이 끝났다. 번들 0kb 모션이 새 기본값.
2. 사전 렌더 비디오가 WebGL을 대체 — 7/10
three.js 0곳인데 3D 비주얼은 어디에나 있다. 비결은 루프 비디오.
- modal: 발광 3D 큐브 = video 8개
- resend: 회전 루빅스 큐브 = video 5개
- heypocket: 제품 360° = video 10개
- cardboard: 데모·갤러리 = video 56개
실시간 canvas는 렌더 비용이 싼 장식 레이어에만 사용 (mintlify 등고선 라인아트 15개, granola 6개, elevenlabs grain 오브 3개). "무거운 건 굽고, 가벼운 것만 실시간" 분업.
3. 세리프 디스플레이 헤드라인의 귀환 — 5/10
granola(quadrant 86px), resend(domaine 96px), mintlify(arizonaFlare 50px), cardboard(Denton 60px weight 100), heypocket(세리프 로고). 공통 공식:
3계열 역할 분리가 표준 페어링. 모노는 장식이 아니라 시맨틱 용도(타임코드, 수치 배지, 라벨)로만.
4. 다크 클리셰 퇴조, 웜 오프화이트 지배 — 7/10 라이트
"dev tool = 다크"가 깨졌다. 라이트 7곳도 순백이 아닌 웜 오프화이트(#f7f7f4, #fdfcfc, 종이색)에 순흑 아닌 잉크 텍스트(#262521, rgba(18,18,18,0.75)). 다크 3곳(modal·resend·cardboard)은 전부 "럭셔리" 연출로 차별화 — 다크가 기본값이 아니라 선택된 무대.
5. 단일 액센트 + 시맨틱 컬러 규율 — 8/10
액센트 컬러는 하나만, 그것도 의미 있는 곳에만: cursor(오렌지=링크), browserbase(오렌지=호버·하이라이트), cardboard(블루=밑줄·커서), heypocket(블루=CTA), granola(올리브=CTA), modal(네온그린=키워드). resend는 색을 상태 배지(Delivered/Bounced)에만 사용. 채도는 콘텐츠(제품 렌더·영상·오브)가 담당하고 UI는 무채색으로 후퇴.
6. 질감은 필수, 수단은 제각각 — 9/10
flat 순수 배경은 lovable 정도. 나머지는 전부 어떤 형태로든 질감을 깔았다:
| 수단 | 사이트 |
|---|---|
| grain 노이즈 | granola, elevenlabs |
| 픽셀 디더링 일러스트 | browserbase |
| 인상파 회화 배경 | cursor |
| canvas 라인아트(등고선) | mintlify |
| 3D 렌더 표면 텍스처 | modal, resend |
| 노출 괘선(hairline) 그리드 | browserbase, mintlify, elevenlabs |
"AI 생성물 같은 무균 flat"에 대한 반작용 — 사람 손 흔적(손그림 밑줄, 회화, 디더링)이 프리미엄 신호.
7. 히어로 = 스크린샷이 아니라 체험 — 6/10
- lovable: 히어로 CTA가 버튼이 아니라 실제 작동하는 프롬프트 입력창
- cursor: HTML로 재구축한 목업 — 호버하면 요소 라벨 표시
- granola: 실시간 타이핑·전사되는 라이브 노트패드 (캡처마다 내용이 다름)
- elevenlabs: 재생 가능한 오디오 위젯 + 상주 Voice chat
- cardboard: 폴드 안에 실제 에디터 UI
- mintlify: 실시간 갱신되는 "Agent traffic" 카운터 배지
제품 데모를 이미지/영상이 아닌 DOM으로 재구성 → 텍스트 선명, 인터랙션 가능, 스크롤 동기화 가능.
8. 통념과 실측의 괴리 — 벤토는 과대평가
트렌드 기사들이 "벤토 그리드 표준화(SaaS 67%)"를 말하지만 실측은 2/10(mintlify, elevenlabs)만 명확한 벤토. 대세는 오히려:
- 에디토리얼 2단 스플릿 (좌 텍스트 / 우 비주얼) — 6곳
- 스티키 스텝 스크롤리텔링 (좌 목록 활성 전환 / 우 고정 비주얼) — granola, cardboard, lovable
- 섹션 배경 반전 리듬 (다크↔라이트 챕터) — modal
h1 크기도 양극화: 96px 세리프(resend) vs 26px(cursor)·20px(lovable). 후자는 크기 대신 여백과 문장형 카피로 위계를 만든다 — "크기 경쟁 종료".
부록 A — 자주 쓰인 마이크로 패턴
| 패턴 | 구현 비용 | 사례 |
|---|---|---|
키워드 컬러 스플릿 h1 (<span> 액센트) | CSS 한 줄 | modal, lovable(2톤 회색) |
형광펜 하이라이트 헤딩 (background + box-decoration-break: clone) | CSS 두 줄 | browserbase |
| 손그림 SVG 밑줄 | SVG 1장 | cardboard |
| 십자(+) 코너 마커 그리드 (가상요소) | CSS | elevenlabs |
| 모노 폰트 라이브 카운터 배지 | JS 소량 | mintlify |
| CTA 호버 시 키보드 단축키 툴팁 | CSS+JS 소량 | resend |
| 타이프라이터 placeholder 로테이션 | JS 소량 | lovable |
| 역방향 다중 마퀴 (프롬프트 칩) | CSS keyframes | cardboard, heypocket |
| 스크롤 시 내비 → 플로팅 필(pill) 응축 | CSS+IO | granola, cardboard |
| 오도미터 숫자 카운터 | CSS/JS | browserbase |
부록 B — 모바일 대응 관찰
10곳 전부 오버플로/붕괴 없음. 눈에 띈 상위 전략:
- 콘텐츠 우선순위 재설계: cardboard는 데스크톱 에디터 목업 대신 AI 채팅 카드로 교체 — 축소가 아니라 재편집
- 핵심 인터랙션 보존: lovable 입력창, elevenlabs 오디오 데모를 모바일에서도 삭제하지 않음
- 크롭 > 축소: cursor는 데모를 통째로 줄이는 대신 좌측 크롭으로 밀도 유지
부록 C — bblog 적용 후보 (저비용 순)
- 세리프 제목 + 모노 메타데이터 페어링 — 포스트 제목 세리프, 날짜·태그·읽기시간 모노. CSS만으로 템플릿 탈피 (mintlify/resend 공식)
- 잉크 텍스트 + 단일 액센트 규율 —
rgba(18,18,18,0.75)본문 + 액센트 1색 링크 (heypocket/cursor) - CSS Scroll-Driven Animations — TOC 진행 인디케이터, 글 목록 진입 리빌.
@supports (animation-timeline: view())폴백. 그 자체가 기술 포스트 소재 - 1px 헤어라인 괘선 구획 + 십자 마커 — 그림자·카드 대신 보더로 밀도 (browserbase/mintlify/elevenlabs)
- 형광펜 하이라이트 헤딩 —
box-decoration-break두 줄 (browserbase) - video 대신 DOM 타이핑 데모 — 코드 블록이 실제로 타이핑되는 CSS 애니메이션. GIF 대비 선명·경량 (granola/cursor)
- 스티키 아코디언 스크롤 내러티브 — 시리즈/프로젝트 소개 페이지에
position: sticky+ 활성 항목 저대비 처리 (cardboard/granola)
측정 데이터: Playwright 캡처 60장 + signals.json 10건 (2026-07-11 실측). 사이트별 상세 분석은 별도 문서.