담당들의 기술이 만나면.
버튼 담당, 모션 담당, 폼 담당, 접근성 담당 — 각자의 손끝을 합치면 페이지의 한 덩어리가 됩니다. 이 갤러리는 여러 담당의 기술을 합쳐 만든 재사용 섹션 모듈 20종과, 토큰만 바꿔 리브랜딩하는 완성형 데모 페이지 3종을 한 곳에 모았습니다. 전부 외부 라이브러리 0, 접근성·reduced-motion 내장.
완성형 데모 페이지 3종
모듈을 모아 끝까지 조립한 한 페이지. 디자인 토큰(색·폰트·라운드)만 바꾸면 그대로 다른 브랜드가 됩니다.
조합 모듈 — 섹션 패턴 10종
페이지 어디에든 끼워 넣는 한 덩어리. 각 글에서 라이브로 동작합니다.
기능 그리드
아이콘·제목·설명을 정렬한 반응형 기능 소개 블록.
성과 지표
숫자가 올라가는 카운트업 성과 지표 밴드.
요금
월·연 토글이 붙은 비교형 요금 카드.
검색 FAQ
입력하면 즉시 걸러지는 검색형 자주 묻는 질문.
CTA 밴드
행동을 유도하는 강조 색 전환 유도 밴드.
타임라인
스크롤에 맞춰 채워지는 진행 단계 타임라인.
비교
두 선택지를 항목별로 대조하는 비교 표.
문의 모듈
검증·상태 피드백이 붙은 문의 폼 블록.
갤러리
라이트박스로 확대되는 이미지 갤러리 그리드.
신뢰
로고·후기·인증을 모은 신뢰 신호 블록.
조합 모듈 — 페이지·시스템 10종
한 섹션을 넘어 페이지 골격과 디자인 시스템을 만드는 모듈.
히어로
첫 화면을 책임지는 시선 잡는 히어로 패턴.
테마
다크·라이트를 전환하는 토큰 기반 테마.
견적 계산기
입력에 따라 즉시 합산되는 견적 계산기.
검색 결과
타이핑에 맞춰 좁혀지는 검색 결과 리스트.
로딩
내용을 기다리는 동안 보이는 스켈레톤 로딩.
타이포 시스템
화면 폭에 맞춰 늘어나는 유동 타이포 스케일.
컬러 시스템
대비를 지키며 파생되는 컬러 토큰 팔레트.
접근성
포커스·대비·ARIA를 점검하는 접근성 패턴.
모션 시스템
reduced-motion을 존중하는 모션 토큰 모음.
대시보드
지표·차트·표를 한 화면에 모은 대시보드 레이아웃.