디자인 아틀라스▭랜딩 페이지 패턴
히어로, 로고 클라우드, 가격표, 후기 월 — 마케팅 페이지를 이루는 섹션의 이름. — 18개 항목
히어로 섹션Hero section
페이지 최상단에서 제품의 핵심 가치를 한 문장으로 전달하고 첫 행동을 유도하는 영역.
로고 클라우드Logo cloud
고객사·파트너 로고를 나란히 배치해 "이미 이만큼 쓰인다"는 신뢰를 짧게 전달하는 줄.
피처 그리드Feature grid
아이콘·제목·설명 한 세트를 균일한 칸에 반복 배치해 제품의 핵심 기능들을 나열하는 섹션.
벤토 피처 섹션Bento features
칸 크기를 다르게 줘서 기능 하나는 크게, 나머지는 보조로 보여주는 비대칭 기능 섹션.
프라이싱 테이블Pricing table
요금제를 카드로 나열하고 하나를 강조해 선택을 유도하며, 월간/연간 토글로 가격을 전환하는 섹션.
테스티모니얼 월Testimonial wall
고객 후기 카드를 여러 줄로 흘려보내거나 격자로 채워, 많은 사람이 쓰고 있다는 인상을 주는 섹션.
FAQ 섹션FAQ section
자주 묻는 질문을 아코디언으로 접어두고, 남은 반박·불안 요소를 마지막에 해소하는 섹션.
CTA 밴드CTA band
페이지 하단(또는 섹션 사이)에 배경색을 바꿔 넣는, 단 하나의 행동만 요구하는 전면 띠.
스탯 밴드Stats band
큰 숫자 3~4개를 나열해 규모·성과를 즉각적으로 전달하는, 카운트업 애니메이션이 딸린 섹션.
비교 테이블Comparison table
요금제(또는 경쟁 제품)별 기능 포함 여부를 행×열 표로 정리해 한눈에 대조하게 하는 섹션.
메가 푸터Mega footer
제품·회사·리소스별 링크를 여러 열로 나눠 담고, 뉴스레터·법적 고지까지 마무리하는 페이지 최하단 영역.
공지 바Announcement bar
헤더 바로 위, 사이트 최상단에 얹혀 프로모션이나 공지를 짧게 알리는 닫을 수 있는 얇은 띠.
프로덕트 스크린샷 프레임Product screenshot frame
제품 화면을 브라우저·기기 틀 안에 넣어, 실제 쓰는 모습처럼 맥락을 부여하는 시각 장치.
작동 방식 스텝How it works steps
제품을 쓰는 과정을 1-2-3 숫자로 쪼개, 진행선으로 이어 보여주는 설명 섹션.
스티키 CTASticky CTA
스크롤해도 화면에 계속 붙어 있는 CTA 바로, 본문 CTA를 놓친 방문자에게 언제든 행동할 기회를 줍니다.
뉴스레터 가입Newsletter signup
이메일 하나만 받는 최소한의 폼으로, 지금 당장 결제·가입까진 안 갈 방문자를 이메일로라도 붙잡는 섹션.
대기 명단 히어로Waitlist hero
아직 출시 전인 제품이 이메일만으로 관심을 등록받고, 이미 모인 인원 수로 얼리어답터의 기대를 끌어올리는 히어로.
체인지로그 피드Changelog feed
제품 업데이트를 최신순으로 나열해, 이 제품이 계속 활발히 개선되고 있다는 걸 보여주는 타임라인 피드.