패턴 조합
소개와 설득 페이지기능 하나를 깊게 설명하고, 연동 범위와 경쟁 제품 대비 차이, 실제 도입 사례까지 붙이는 구성입니다.
랜딩에서 기능 카드를 눌러 들어온 방문자에게 그 기능만 자세히 설명할 때 사용합니다.
패턴은 전부 자립형입니다. 필요한 폴더만 복사해 넣으면 추가 의존성도, 빌드 설정도 없이 그대로 동작합니다.
색은 리터럴이 아니라 의미 단위 토큰을 참조합니다. 토큰만 바꾸면 라이트와 다크가 동시에 우리 브랜드가 됩니다.
캔버스 패턴은 뷰포트를 벗어나면 rAF를 반납하고, 입자가 다 사라지면 루프 자체를 끝냅니다. 스크롤이 무거워지지 않습니다.
좌우 교차는 CSS :nth-child(even)이 순서를 보고 정합니다. 마크업에 방향을 박으면 항목 하나를 지웠을 때 그 아래가 전부 뒤집힙니다.
기능이 많다를 보여줄 땐 feature-grid, 하나하나 크게 설명할 땐 이걸 쓰세요.
검증된 패턴
랜딩에서 반복 검증된 섹션·인터랙션을 자립형으로 적립했습니다. 폴더 하나를 복사하면 바로 동작합니다.
접근성 기본
reduced-motion·no-JS 폴백 포함
토큰 기반
다크 대응
뷰 밖이면 정지
캔버스도 rAF를 반납합니다
SSR 안전
하이드레이션 불일치 없음
의존성 0
span은 1x1·2x1·1x2·2x2 조합만 허용합니다. 자유 입력을 막아 4열 배치가 깨지지 않게 했습니다. 모바일은 전부 1열 풀폭입니다.
9개
Chatly
팀 채팅으로 알림 전송
커뮤니케이션Mailgrid
이메일 캠페인 동기화
커뮤니케이션Postbase
PostgreSQL 실시간 동기화
데이터Metrix
이벤트·퍼널 분석
데이터PayFlow
구독 결제 처리
결제Nimbus
객체 스토리지 연결
인프라Branchly
배포 파이프라인 트리거
인프라Slotcal
일정·미팅 예약
생산성AutoBot
반복 업무 자동화
생산성검색은 이름과 설명 양쪽을 보고, 대소문자·앞뒤 공백을 무시합니다. 카테고리와 함께 걸립니다.
결과가 없을 때 빈 상태 문구를 반드시 냅니다. 빈 화면만 두면 "고장 났나" 싶어지는데 흔히 빠뜨리는 부분입니다.
| 비교 항목 | 스타터 | 프로추천 | 엔터프라이즈 |
|---|---|---|---|
| 페이지 수 | 3개 | 무제한 | 무제한 |
| 커스텀 도메인 | 미지원 | 지원 | 지원 |
| A/B 테스트 | 미지원 | 지원 | 지원 |
| 애널리틱스 | 기본 | 고급 | 고급 + 원본 로그 |
| SSO · 감사 로그 | 미지원 | 미지원 | 지원 |
| 전용 인프라 | 미지원 | 미지원 | 지원 |
| 지원 | 커뮤니티 | 우선 지원 | 전담 매니저 |
| SLA | 미지원 | 미지원 | 99.9% |
진짜 <table>입니다. div 그리드로 만들면 스크린리더가 "프로 열, 커스텀 도메인 행"을 못 읽습니다. 체크/대시 아이콘엔 sr-only 텍스트를 함께 넣었습니다.
좁은 화면에서는 항목마다 카드로 다시 쌓입니다(가로 스크롤 표는 못 읽으므로).
랜딩을 킷으로 다시 조립하고 A/B 테스트를 두 번 돌려 결제 전환을 끌어올렸습니다.
“개발팀 리소스를 거의 안 썼는데 랜딩 품질이 확 달라졌어요.”김도윤 · 마케팅 리드
디자이너 없이도 브랜드 톤을 유지하려고 토큰 기반 킷으로 전환했습니다.
“브랜드 색만 바꿨는데 라이트·다크가 한 번에 우리 것이 됐습니다.”이서연 · 프로덕트
접근성 심사를 통과해야 해서 reduced-motion과 스크린리더 대응이 기본인 킷이 필요했습니다.
“접근성 리뷰를 따로 준비할 게 없었습니다. 그냥 통과했어요.”박지호 · 프론트엔드
후기(testimonials)가 감상이라면 이건 숫자입니다. 지표를 앞세우고 인용은 근거로 받칩니다.
지표는 문자열로 받습니다("+312%", "3.4배"). 숫자로 받아 포맷하면 단위·기호·로케일마다 예외가 쌓입니다.
저작권 연도는 소비 측이 넘깁니다. 서버에서 계산하면 배포 시점에 굳고, 클라이언트에서 계산하면 하이드레이션 불일치가 납니다.