패턴 조합
소개와 설득 페이지행사 안내 페이지
행사 소개와 남은 시간, 일정, 연사, 자주 묻는 질문, 알림 신청까지 이어지는 행사 안내 구성입니다.
컨퍼런스나 웨비나처럼 신청 마감이 있는 행사를 알리고 참가 신청을 받을 때 사용합니다.
사용한 패턴 7개
조합 미리보기
HIMALAYA / 05:42히말라야 고산 지대를
히말라야 고산 지대를
12일 동안 걷습니다.
전문 가이드와 함께 해발 4,800m 고개를 넘는 소규모 트레킹입니다. 숙박과 장비 운송이 일정에 포함됩니다.
4,800m최고 고도
12 days원정 기간
8 seats남은 자리
2027년까지 남은 시간 (KST 기준)
--일
--시간
--분
--초
아래 버튼을 눌러 마감 동작을 확인해 보세요.
마운트 전에는 --를 렌더합니다. 서버에서 남은 시간을 계산하면 하이드레이션이 깨지고, SSG면 빌드 시각에 굳어 버립니다.
틱은 매번 다음 초 경계까지만 기다립니다(고정 1000ms면 드리프트가 쌓여 초가 튐).targetISO엔 반드시 오프셋을 넣으세요. "2026-12-31"만 주면 UTC 자정으로 파싱돼 한국 사용자에겐 9시간 어긋납니다.
2026.03
패턴 킷 착수
랜딩에서 반복 검증된 섹션을 자립형으로 뽑아내기 시작.
2026.05
1차 10종 적립
히어로·섹션·모션·배경 4개 카테고리로 갈래를 잡았습니다.
2026.07
오버레이·타이포 확장
모달 계열과 타이포그래피 기법을 대거 추가.
2026.09
테마 프리셋
브랜드 색만 넣으면 킷 전체 톤이 맞춰지는 프리셋 예정.
status로 점 모양이 달라집니다. done(채움) · active(링 펄스) · todo(비움). reduced-motion이면 펄스만 멈춥니다.
김도윤
대표 · 프로덕트
제품이 팔리는 이유를 만드는 사람.
이서연
디자인 리드
토큰과 리듬으로 일관성을 지킵니다.
박지호
프론트엔드
60fps가 아니면 잠이 안 옵니다.
최민서
백엔드 · 인프라
배포는 지루해야 한다고 믿습니다.
사진이 없어도 이니셜 아바타로 대체합니다. 팀 소개는 사진이 늦게 준비되는 일이 잦습니다.
아바타 색은 이름 해시라 SSR/CSR이 항상 일치합니다(랜덤이면 하이드레이션이 깨집니다).
duolabs 랜딩에서 실서비스로 운영하며 검증된 구조를 그대로 가져왔습니다. 높이 애니메이션은 grid 트랙(0fr↔1fr)만 사용해 JS 측정 없이 부드럽게 동작합니다.
답변 콘텐츠는 항상 DOM에 렌더되고 overflow clip으로만 가려집니다. 검색엔진과 no-JS 환경 모두 전체 내용을 읽을 수 있습니다.
네. 각 항목이 독립적으로 열림 상태를 가지므로 원하는 만큼 동시에 펼칠 수 있습니다.
잘못된 주소를 넣고 눌러 보세요. 검증은 브라우저에 맡기고(type="email"), 메시지만 받아와 우리 UI로 보여줍니다. 직접 정규식을 쓰면 유효한 주소를 틀리게 막기 쉽습니다.
이 데모는 아무 데도 전송하지 않습니다. 실제 전송은 onSubmit으로 위임합니다.
저작권 연도는 소비 측이 넘깁니다. 서버에서 계산하면 배포 시점에 굳고, 클라이언트에서 계산하면 하이드레이션 불일치가 납니다.