컴포넌트

큰 블록 1 · 중간 2 · 작은 3을 혼합 스팬으로 짠 올리브 톤 영문 벤토 기능 블록 3종

4개 요금제를 20개 항목으로 대조하는 비교 매트릭스. 상단 요약 카드 4개, sticky 헤더 행 + 고정 첫 열, 기능 그룹 4단, 시안 강조 열로 구성했다.

체크박스 peer-checked 상태만으로 월간·연간 요금이 바뀌는 포레스트 톤 3단 요금표, 밝은·다크·컴팩트 3변형.

네이비 딥 다크 푸터 3변형 — 구독 밴드·4열 내비·사업자 정보·언어 선택

라디얼 인디고 글로우 다크 배경 위에 공지 pill·대형 헤드라인·인라인 이메일 폼·신뢰 지표를 얹은 히어로 3변형

Hahmlet 세리프 대형 제목과 세로 이미지를 좌우로 가른 플럼 톤 에디토리얼 히어로 3변형

details 기반 2단 계층 + 검색 상자

아바타형 + 유형 아이콘형 + 다크 감사 로그

정보·성공·주의·오류 + 상단 바 · 토스트

소셜 로그인·비밀번호 보기 토글·오류 상태 4종

스텝 인디케이터·비밀번호 강도·약관 동의

겹침 스택·상태 점·+N 표기·크기 3단계

로고형과 뱃지 수치형으로 정리한 수상·인증 블록

상태·카운트·아이콘·제거·아바타·필터 칩 6그룹

기본·그라데이션·아이콘형·카운트 포함 상단 바 4종

하단 바·카드·상세 설정 3가지 동의 UI

대표글 가로형 + 3열 카드 목록

월 그리드 + 시간 슬롯 + 선택 요약 자동 반영

부서 필터 + 근무형태 배지 + 지역 표기

품목 목록 + 스티키 결제 패널 + 진행 단계

아이콘형 8개 · 이미지형 6개 · 리스트형 진입 타일

대화창 + 전송 상태 모음 + 다크 테마

배송지 + 결제수단 라디오 카드 + 약관 + 최종 금액

정렬·작성 폼 + 대댓글 들여쓰기 + 컴팩트 목록

직접·외주·자사를 대조하고 자사 열을 강조한 표

좌측 다크 연락처 · 우측 입력 폼

전화·카카오·이메일 3버튼 + 운영시간 뱃지

사용가능 · 사용됨 · 만료 · 다운로드 4종 상태

스토어 버튼·QR·폰 목업을 갖춘 앱 설치 유도 블록

블루→바이올렛 그라디언트 CTA 카드, 버튼 2종 + 각주

각진 버튼과 대형 타이포로 마감한 다크 풀폭 CTA

좌 카피·우 구독 폼으로 구성한 소프트 카드 CTA

좌 실사·우 카피로 나눈 상담 유도 CTA 카드

성과 지표 카드 3장 뒤에 전환 바를 붙인 신뢰 유도 CTA

KPI 4종 + 유입 채널 순위 + 목표 진행률

정렬·행 선택·상태 배지·행 액션을 갖춘 관리 테이블

텍스트 중앙·아이콘·그라데이션 포함 구분선 6종

파일 유형 아이콘 · 용량 · 등록일 · 다중 선택

검색 결과 없음·데이터 없음·오류·권한 없음

404 페이지와 500 다크 페이지 2종

details/summary 기반 무스크립트 FAQ 아코디언 5문항

좌측 고정 안내와 우측 카테고리별 아코디언

이미지와 카피를 좌우 교차 배치한 3단계 설명

크기가 다른 카드 조합으로 구성한 기능 소개

아이콘 6기능을 3열로 정리한 기본 피처 섹션

좌측 탭 목록과 우측 이미지 패널이 CSS만으로 전환

브랜드·링크 3열·소셜·사업자 정보를 갖춘 다크 푸터

뉴스레터 폼과 3열 링크를 담은 화이트 푸터

기본·포커스·오류·성공·비활성 등 상태 모음

진행 바·현재 단계·이전/다음 버튼 4종

검색창·드롭다운 필터·선택 칩·초기화 4종

카테고리 필터 + 호버 오버레이 매스너리

호버로 열리는 2단 드롭다운 헤더 (무스크립트)

우측에 CSS 폰 프레임 목업을 배치한 앱 소개 히어로

세리프 대형 타이포와 여백으로 매거진 톤을 낸 히어로

컬러 오브 배경 위에 반투명 유리 패널을 얹은 히어로

다크 그리드 배경 + 그라디언트 텍스트의 센터 히어로

풀블리드 사진에 다크 그라디언트를 덮은 하단 정렬 히어로

무채색과 여백만으로 구성한 스튜디오형 중앙정렬 히어로

중앙 검색바와 인기 키워드 칩을 배치한 포털·디렉토리형 히어로

좌 카피·우 지표 카드 목업의 스플릿 히어로 — 이미지 없이 완성

포스터 이미지·재생 버튼·하단 지표 바로 구성한 히어로

카드·목록·표·프로필 로딩 뼈대 4종

SVG 워드마크 6개의 모노톤 로고 클라우드 — hover 착색

지도 자리 + 교통편 탭 + 연락처 목록

확인·삭제 경고·폼 포함 모달 3종

기본·홈아이콘·칩·축약 4가지 경로 표시

언더라인·세그먼트·필·수직 4가지 탭

인라인·카드·다크 밴드·성공 상태까지 구독 폼 4종

고정 공지·새 글 배지·첨부·조회수 게시판

드롭다운 패널 + 날짜 그룹 페이지 + 다크 컴팩트

4단계 인디케이터 + 배송 이력 타임라인

2열 정의형 표 + 담당 부서 목록 + 이용 안내

번호·간소·더보기·로딩·도구바 5가지 페이지 이동

채널 헤더·구독 + 에피소드 목록 + 미니 플레이어

강조 카드 1개를 둔 3단 가격표 — 반응형 1→3열

월/연 토글 + 12개 항목 기능 비교 + 추천 강조

좌 혜택 목록·우 다크 가격 패널로 나눈 단일 플랜형

다크 배경 3단 가격표, 중앙 플랜 그라디언트 강조

체크박스만으로 월/연 가격을 전환하는 3단 가격표

번호 원형 + 연결선, 가로형·세로형·다크형

필터 칩 + 4열 상품 카드 (배지·품절·찜)

이미지 갤러리 + 옵션·수량·구매 패널

기본·통계 포함·팔로우 버튼형 프로필 카드 3종

남은 시간 숫자 박스와 쿠폰 코드가 들어간 프로모션 바 3종

기본·따옴표 강조·저자 카드·다크 인용문 4종

별점 선택 + 태그 칩 + 리뷰 폼 + 평점 요약

평균 별점 + 점수 분포 막대 + 후기 카드 3장

원형 아이콘·라벨형·링크 복사·드롭다운·세로 고정

그룹 라벨·활성 상태·배지·하단 프로필

탭 전환 치수표 + 측정 방법 안내

평점·리뷰 수·아바타 스택·인증 배지를 묶은 신뢰 요소

원형 게이지 2종 + 목표별 막대 진행 목록

풀블리드 다크 스트립에 지표 4개 — 섹션 사이 삽입용

번호 스텝·점 인디케이터·퍼센트 바 3계열

좌측 연결선과 번호 배지로 그린 세로 4단계

검색 + 매장 목록 + 영업 상태 배지 + 거리

사진 없이 이니셜 아바타로 완성한 팀 소개 그리드

세로 인물 사진 4열에 호버 소개를 얹은 팀 섹션

한 건의 인용을 크게 세우고 성과 지표로 뒷받침

고객사 워드마크 6개와 짧은 후기 3매의 다크 조합

별점·인용·이니셜 아바타의 후기 카드 6매 그리드

좌우 교차형 + 단일 열형 + 압축 요약형

4방향 툴팁과 팝오버 카드, 스크립트 없이 CSS로만

대표형 + 그리드형 + 목록형 (재생시간·진행바)

선택 상품 썸네일 스택 + 비교하기 액션