패턴 조합
소개와 설득 페이지제품 첫인상부터 기능 설명, 요금제 비교, 문의 유도까지 방문자가 위에서 아래로 한 번에 읽는 구성입니다.
검색이나 광고로 처음 들어온 방문자에게 제품을 설명하고 가입이나 문의로 연결할 때 사용합니다.
↑ 페이지 최상단 공지 바. 닫으면 다시 뜨지 않습니다.
storageKey에 버전을 넣는 게 요령입니다(promo-2026-q3).
키를 고정하면 한 번 닫은 사용자가 다음 공지를 영영 못 봅니다. 내용이 바뀌면 키도 바꿔야 합니다.
이미 이런 팀들이 쓰고 있습니다
기본은 단색화로 톤을 눌러 두고 호버 때만 본색을 돌려줍니다. 로고 하나하나가 아니라 "많다"가 메시지이기 때문입니다. 이미 정돈된 로고라면 muted={false}로 끕니다.
흐르는 버전이 필요하면 marquee 패턴을 쓰세요.
빠른 적용
폴더 하나 복사하면 끝. 빌드 설정이나 추가 의존성이 필요 없습니다.
접근성 기본
reduced-motion·스크린리더·no-JS 폴백을 패턴마다 기본으로 챙겼습니다.
토큰 기반
디자인 토큰만 바꾸면 라이트·다크 양쪽이 한 번에 우리 브랜드가 됩니다.
가벼운 성능
캔버스 패턴도 뷰 밖이면 rAF를 멈춰 메인 스레드를 돌려줍니다.
모바일 우선
좁은 화면에서 레이아웃이 무너지지 않게 브레이크포인트를 미리 잡았습니다.
조합 가능
모든 패턴이 자립형이라 원하는 것만 골라 서로 겹쳐 쓸 수 있습니다.
아이콘은 ReactNode로 받아 특정 아이콘 라이브러리에 묶이지 않습니다. cols로 2·3·4열 선택, 모바일은 자동 1열.
스타터
₩29,000/월
랜딩 한 장으로 시작하는 팀
프로
₩79,000/월
본격적으로 전환을 키우는 팀
엔터프라이즈
별도 문의
보안·규모가 중요한 조직
연 결제 토글은 할인율(기본 20%)만큼 자동 계산합니다. 플랜마다 가격을 두 번 쓸 필요가 없습니다. 숫자가 아닌 플랜은 토글 영향을 받지 않습니다.
붙이자마자 전환이 눈에 띄게 올라갔어요. 개발팀 리소스를 거의 안 썼는데도 랜딩 품질이 확 달라졌습니다.
디자이너 없이도 일관된 톤이 유지됩니다. 토큰 기반이라 우리 브랜드 색만 바꾸면 바로 우리 것이 돼요.
무엇보다 가볍습니다. 다른 킷은 애니메이션 켜면 모바일이 버벅였는데 여긴 그런 게 없네요.
문서보다 데모가 낫습니다. 라이브로 보고 바로 갖다 쓰면 끝이라 온보딩이 사실상 없어요.
reduced-motion까지 챙겨둔 킷은 처음 봤어요. 접근성 리뷰를 그냥 통과했습니다.
CSS 멀티컬럼이라 카드 높이가 달라도 빈틈 없이 채워집니다(JS 없음). 아바타 색은 이름 해시라 SSR/CSR이 항상 일치합니다.
duolabs 랜딩에서 실서비스로 운영하며 검증된 구조를 그대로 가져왔습니다. 높이 애니메이션은 grid 트랙(0fr↔1fr)만 사용해 JS 측정 없이 부드럽게 동작합니다.
답변 콘텐츠는 항상 DOM에 렌더되고 overflow clip으로만 가려집니다. 검색엔진과 no-JS 환경 모두 전체 내용을 읽을 수 있습니다.
네. 각 항목이 독립적으로 열림 상태를 가지므로 원하는 만큼 동시에 펼칠 수 있습니다.
저작권 연도는 소비 측이 넘깁니다. 서버에서 계산하면 배포 시점에 굳고, 클라이언트에서 계산하면 하이드레이션 불일치가 납니다.