탐색LandingAI 헬스케어 랜딩 — 비교 카드와 스티키 How it works 스텝

1 / 1

Framer 프리뷰에서 AI 헬스 랜딩을 스크롤하며 비교 카드 섹션에서 고정 제목과 번호 단계(Connect, Understand)가 이어지는 How it works 섹션으로 넘어가는 영상이다.

Landing

AI 헬스케어 랜딩 — 비교 카드와 스티키 How it works 스텝

2026-05-10 · 동영상 1

AI 분석

웜 크림 배경에 세리프 헤드라인, 비교 카드, 스크롤 연동 단계 섹션을 둔 AI 헬스 랜딩 페이지다.

고정 헤더 아래에 큰 세리프 헤드라인과 두 장의 비교 카드가 나란히 놓이고, 이어지는 How it works 섹션은 왼쪽 제목이 고정된 채 오른쪽에 번호 매긴 단계가 세로선을 따라 스크롤된다. 웜 크림 배경과 짙은 플럼 텍스트, 마지막 단어만 연한 모브 톤으로 바꾼 세리프 헤드라인, 레몬 옐로 CTA 버튼이 차분한 대비를 만든다. 흰 체크리스트 카드와 꽃 사진을 깐 다크 카드가 이전 방식과 새 방식을 대비시키고, 단계마다 스켈레톤 UI 카드·아이콘 원형 칩·파형 그래프로 구성된 추상 제품 일러스트가 붙는다. 스크롤 시 헤드라인 페이드인과 버튼 호버 색 전환도 보인다. 웰니스·헬스 SaaS 랜딩에서 단계형 설명 섹션과 부드러운 에디토리얼 톤을 설계할 때 참고하기 좋다.

editorial · minimal · light-mode · soft-gradient