웹사이트 해부도 · Website Anatomy

00

Global Chrome · 전역 크롬

페이지 경계 바깥 · 모든 페이지에 공통으로 걸리는 요소.

[00.01] Skip Link 스킵 링크 · 본문 바로가기

Skip to main content

세부정보

When to use: 모든 페이지 최상단. 스크린리더·키보드 사용자를 위해 필수.
Alternatives: Skip Navigation · Bypass Block
a11y: WCAG 2.4.1. 포커스 받기 전 숨기고, 포커스 시 노출.

[00.02] Announcement Bar 어나운스먼트 바 · 상단 알림 띠

무료 배송 이벤트 · 오늘까지 x

세부정보

When to use: 프로모션, 공지, 긴급 안내. 헤더 위 고정 띠.
Alternatives: Promo Bar · Top Bar · Notification Bar
a11y: 닫기 버튼 제공. role="region" + aria-label.

[00.03] Cookie Banner 쿠키 배너 · 동의 UI

이 사이트는 쿠키를 사용합니다.

거부수락

세부정보

When to use: GDPR · ePrivacy · 국내 개인정보보호법 적용 시 최초 방문.
Alternatives: Consent Banner · CMP
a11y: 키보드로 수락·거부 모두 도달. 자동 초점 이동 금지.

01

Header · 헤더

브랜드 식별 · 주 내비게이션 · 전역 유틸리티가 모이는 상단 바.

[01.01] Logo / Wordmark로고 · 워드마크

ACME

세부정보

When to use: 헤더 좌측. 링크는 항상 홈으로.
Alternatives: Brand Mark · Brandmark(심볼만)
a11y: img에 alt="ACME 홈". SVG는 title/desc 제공.

[01.02] Primary Nav프라이머리 내비 · 주 메뉴

ProductPricingDocsBlog

세부정보

When to use: 최상위 사이트 구획 링크. 5+-2개 적정.
Alternatives: Top Nav · Main Menu · Global Nav
a11y: <nav aria-label="주 메뉴">. aria-current="page".

[01.03] Mega Menu메가 메뉴 · 확장 드롭다운

Product v

Col 1

Col 2

Col 3

세부정보

When to use: 카테고리 20+ 깊고 계층 있을 때.
Alternatives: Flyout · Dropdown Menu
a11y: button[aria-expanded] + Escape로 닫힘.

[01.04] Utility Nav유틸리티 내비 · 보조 메뉴

Sign in|Contact

세부정보

When to use: 로그인 · 언어 · 고객지원 보조 링크.
Alternatives: Secondary Nav · Meta Nav
a11y: 별도 <nav aria-label="보조 메뉴">.

[01.05] Search글로벌 서치 · 전역 검색

SearchCmd+K

세부정보

When to use: 콘텐츠가 많은 사이트(문서·커머스).
Alternatives: Command Palette · Site Search
a11y: <input type="search"> + <label>.

[01.06] Locale Switcher로케일 스위처 · 언어/지역 선택

KOENJA

세부정보

When to use: 다국어 사이트.
Alternatives: Language Picker · Region Switcher
a11y: 언어 이름은 각 언어로 표기. hreflang 병기.

[01.07] Header CTA헤더 CTA · 전환 버튼

Get started

세부정보

When to use: 헤더 우측 끝. 주 전환 목표 직행.
Alternatives: Primary Action · Sign-up Button
a11y: 명령형 2-4단어.

[01.08] Hamburger햄버거 · 모바일 메뉴 토글

세부정보

When to use: 모바일·태블릿에서 메뉴 접을 때.
Alternatives: Menu Button · Nav Toggle
a11y: button + aria-expanded + aria-controls.

[01.09] Breadcrumb브레드크럼 · 경로 표시

Home > Products > Runner

세부정보

When to use: 계층 2단계 이상 페이지.
Alternatives: Path Navigation · Location Trail
a11y: <nav aria-label="breadcrumb"> + <ol>.

02

Hero · 히어로 영역

페이지 최상단. 1-2초 안에 "무엇인지 · 누구를 위한지 · 다음 행동"을 전달.

[02.01] Eyebrow아이브로우 · 헤드라인 위 소제목

NEW · v4.6

Headline follows

세부정보

When to use: 카테고리·릴리즈를 헤드라인 위에 고정.
Alternatives: Kicker · Pre-headline · Overline
a11y: 헤딩으로 쓰지 말 것. 시각 강조만.

[02.02] Headline헤드라인 · 대표 문장

The fastest way to ship.

세부정보

When to use: 페이지당 1개. 가치 제안 한 문장.
Alternatives: H1 · Hero Title · Value Proposition
a11y: 페이지 유일한 <h1>. 60자 이내.

[02.03] Subheadline서브헤드라인 · 보조 제목

Headline

보조 제목으로 맥락을 한 겹 더.

세부정보

When to use: 헤드라인만으로 불충분할 때. 생략 가능.
Alternatives: Deck · Dek · Strap
a11y: <h2> 또는 <p>. 헤딩 레벨 일관.

[02.04] Lede리드문 · 도입 단락

서비스의 맥락·대상·차별점을 2-3문장으로 풀어주는 도입 단락.

세부정보

When to use: 에디토리얼 톤·콘텐츠 중심 페이지.
Alternatives: Lead Paragraph · Intro Copy
a11y: <p> 본문보다 +2~3px, line-height 1.5+.

[02.05] Primary CTA프라이머리 CTA · 주 전환 버튼

Start free trial

세부정보

When to use: 페이지 가장 중요한 단일 액션.
Alternatives: Hero CTA · Conversion Button
a11y: 포커스 링, 색 대비 4.5:1.

[02.06] Secondary CTA세컨더리 CTA · 보조 버튼

StartSee demo

세부정보

When to use: 주 전환 거부 사용자 대안 경로.
Alternatives: Ghost Button · Outline Button
a11y: Primary와 위계 구분은 색·굵기 모두.

[02.07] Hero Media히어로 미디어 · 비주얼

image / video / 3D

세부정보

When to use: 제품 스크린샷·3D·루프 영상.
Alternatives: Hero Image · Hero Video
a11y: 자동재생 시 무음 + 정지 컨트롤.

[02.08] Social Proof Strip소셜 프루프 스트립 · 신뢰 지표 띠

TRUSTED BY

LOGOLOGOLOGO

세부정보

When to use: 히어로 하단. 유명 고객사·수치.
Alternatives: Logo Wall · Trust Row
a11y: 로고 각각에 의미있는 alt.

[02.09] Scroll Indicator스크롤 인디케이터

SCROLLv

세부정보

When to use: 풀스크린 히어로에서 아래 콘텐츠 알림.
Alternatives: Scroll Cue · Chevron Hint
a11y: 장식이면 aria-hidden. 모션 감소 존중.

03

Content Sections · 본문 섹션

히어로 이후 반복되는 섹션 단위. 스토리·기능·증거·가격·전환 리듬.

[03.01] Feature Grid피처 그리드 · 기능 격자

F1

F2

F3

F4

세부정보

When to use: 기능 3-6개 나열. 아이콘 + 제목 + 1-2줄.
Alternatives: Feature Matrix · Capability Grid
a11y: <ul>. 아이콘 장식이면 aria-hidden.

[03.02] Bento Grid벤토 그리드 · 비정형 격자

LG

SM

세부정보

When to use: 기능 중요도 차이. Apple·Linear 스타일.
Alternatives: Asymmetric Grid · Feature Mosaic
a11y: 시각 순서와 DOM 순서 일치 확인.

[03.03] Card카드 · 콘텐츠 단위

Title

짧은 요약.

세부정보

When to use: 균일 구조 항목 리스트.
Alternatives: Tile · Panel · Block
a11y: 카드 전체 링크 시 내부 중복 링크 금지.

[03.04] Stat Block스탯 블록 · 수치 지표

99.9%UPTIME

10k+USERS

세부정보

When to use: 규모·성과·신뢰도 한눈에. 3-4개 적정.
Alternatives: Metrics · KPI Row
a11y: 숫자만으론 의미 불충분 — 라벨 병기.

[03.05] Testimonial테스티모니얼 · 고객 후기

"게임 체인저였다."

— JANE DOE, ACME

세부정보

When to use: 실명·직함·사진 병기로 신뢰 상승.
Alternatives: Quote · Review · Endorsement
a11y: <blockquote> + <cite>.

[03.06] Logo Cloud로고 클라우드 · 고객사 로고 월

LG

세부정보

When to use: B2B 신뢰 획득.
Alternatives: Client Wall · Customer Marquee
a11y: 각 로고 alt="회사명".

[03.07] Pricing Table프라이싱 테이블 · 요금제 비교표

FREE

PRO

TEAM

세부정보

When to use: SaaS. 추천 플랜 시각 강조.
Alternatives: Plan Comparison · Tier Grid
a11y: <table> + <caption>/<th scope>.

[03.08] FAQFAQ · 자주 묻는 질문

Q1. 결제는 안전한가요? +

Q2. 환불 정책은? +

세부정보

When to use: 전환 직전 잔존 의심 해소.
Alternatives: Accordion · Q&A
a11y: <details>/<summary> 또는 ARIA disclosure.

[03.09] Timeline타임라인 · 시간 흐름

2024 Seed

2025 Launch

세부정보

When to use: 연혁·로드맵·프로세스.
Alternatives: Roadmap · Milestones
a11y: <ol>로 마크업.

[03.10] Tabs탭 · 병렬 콘텐츠 전환

OverviewDetails

Panel

세부정보

When to use: 유사 구조 병렬 콘텐츠. 4-5개 이하.
Alternatives: Segmented Control · Pill Tabs
a11y: role="tablist/tab/tabpanel" + 좌우 화살표.

[03.11] Carousel캐러셀 · 회전 슬라이더

Slide

세부정보

When to use: 공간 제약 + 병렬 아이템.
Alternatives: Slider · Swiper · Marquee
a11y: 일시정지 필수. WCAG 2.2.2.

[03.12] Gallery / Masonry갤러리 · 메이슨리

세부정보

When to use: 이미지 중심 사이트(포트폴리오).
Alternatives: Image Grid · Pinterest-style
a11y: 라이트박스: 포커스 트랩 + Esc 닫기.

[03.13] CTA BannerCTA 배너 · 전환 블록

Ready to ship?

Get started

세부정보

When to use: 본문 중간·하단 전환 압박. 페이지당 1-2개.
Alternatives: Conversion Block · End-cap CTA
a11y: 헤드라인은 <h2/h3>.

[03.14] Blog Teaser블로그 티저 · 콘텐츠 프리뷰

2026-04-17

포스트 제목

세부정보

When to use: 콘텐츠 마케팅 사이트. 최신 포스트 노출.
Alternatives: Post Card · Article Preview
a11y: 카드 전체 또는 제목만 링크.

[03.15] Newsletter Signup뉴스레터 가입 · 구독 폼

SUBSCRIBE

Go

세부정보

When to use: 리드 수집. 히어로·본문·푸터.
Alternatives: Email Capture · Lead Magnet Form
a11y: <label> 필수. 성공·오류 aria-live.

04

Forms & Inputs · 폼과 입력

사용자 입력을 받는 모든 필드·버튼·상태 표기.

[04.01] Text Input텍스트 인풋 · 한 줄 입력

세부정보

When to use: 단문 입력(이름·이메일).
Alternatives: Single-line Field · Text Field
a11y: <label> 명시 연결. placeholder는 라벨 대체 금지.

[04.02] Textarea텍스트에어리어 · 여러 줄 입력

세부정보

When to use: 길이 예측 불가 자유 입력.
Alternatives: Multi-line Input
a11y: 글자 수 제한 시 남은 수 aria-live.

[04.03] Select셀렉트 · 드롭다운

세부정보

When to use: 선택지 5개 이상. 2-4개는 Radio.
Alternatives: Combobox · Listbox
a11y: 네이티브 <select> 우선.

[04.04] Checkbox체크박스 · 다중 선택

이메일 수신 SMS 수신

세부정보

When to use: 다중 선택 · 단일 on/off.
Alternatives: Tick Box · Toggle(단일)
a11y: <label> + <fieldset>+<legend>.

[04.05] Radio Group라디오 그룹 · 단일 선택

월간 연간

세부정보

When to use: 2-5개 중 하나. 상호 배타.
Alternatives: Segmented Control
a11y: 같은 name. <fieldset>+<legend>.

[04.06] Toggle / Switch토글 · 스위치

세부정보

When to use: 즉시 반영 on/off. 저장 버튼 없이.
Alternatives: Switch · Binary Control
a11y: role="switch" + aria-checked.

[04.07] Button Variants버튼 변형 · Primary/Secondary/Ghost

PrimarySecondaryGhost

세부정보

When to use: 위계 3단계. Primary 1개.
Alternatives: Filled/Outlined/Text(Material)
a11y: 색상만으로 위계 금지. 크기·굵기 병행.

[04.08] Field Label필드 라벨 · 항목명

Email

세부정보

When to use: 모든 필드. 필수는 * + aria-required.
Alternatives: Floating Label
a11y: for=id 연결. placeholder 대체 금지.

[04.09] Helper Text헬퍼 텍스트 · 보조 설명

8자 이상, 숫자 포함

세부정보

When to use: 포맷·길이·보안 규칙 예방 안내.
Alternatives: Assistive Text · Hint
a11y: aria-describedby로 연결.

[04.10] Error Message에러 메시지 · 검증 실패

! 올바른 이메일 형식이 아닙니다

세부정보

When to use: 제출 시점 또는 blur 후 검증.
Alternatives: Validation Error · Inline Error
a11y: aria-invalid + aria-describedby. role="alert".

[04.11] Field Group필드 그룹 · 묶음

ADDRESS

세부정보

When to use: 의미상 묶이는 필드(주소·결제).
Alternatives: Field Section · Form Group
a11y: <fieldset>+<legend>.

[04.12] Submit서브밋 · 폼 액션

CancelSubmit

세부정보

When to use: 폼 하단. 진행/취소 쌍.
Alternatives: Form Footer · Action Bar
a11y: Enter submit 동작. 중복 제출 방지.

[04.13] File Upload파일 업로드 · 드롭존

드래그하거나 클릭하여 선택

세부정보

When to use: 이미지·문서·미디어 업로드.
Alternatives: Dropzone · Attachment
a11y: <input type="file"> 병행 필수.

05

Overlays · 오버레이

페이지 위에 떠올라 일시적 집중을 요구하는 레이어.

[05.01] Modal모달 · 다이얼로그

Confirmx

정말 삭제하시겠습니까?

취소삭제

세부정보

When to use: 결정적 행동 확인. 다른 작업 차단.
Alternatives: Dialog · Lightbox
a11y: role="dialog" + aria-modal + 포커스 트랩 + Esc.

[05.02] Drawer / Sheet드로어 · 사이드 시트

Side Panel

세부정보

When to use: 맥락 유지 + 보조 작업(필터·장바구니).
Alternatives: Side Sheet · Off-canvas
a11y: 모달과 동일 규칙.

[05.03] Toast토스트 · 자동 소멸 알림

OK 저장되었습니다

세부정보

When to use: 비차단 성공/알림. 3-5초 자동 소멸.
Alternatives: Notification · Flash Message
a11y: role="status". 중요 정보는 토스트만으로 금지.

[05.04] Snackbar스낵바 · 액션 포함 토스트

삭제됨 실행 취소

세부정보

When to use: 되돌릴 수 있는 작업. Undo 동반.
Alternatives: Action Toast · Undo Bar
a11y: role="status" + focusable 버튼.

[05.05] Tooltip툴팁 · 호버 설명

i

부가 설명

세부정보

When to use: 아이콘·약어 보조. 본질적 정보 금지.
Alternatives: Hint · Hover Help
a11y: role="tooltip" + aria-describedby.

[05.06] Popover팝오버 · 리치 팝

Preview

상호작용 가능한 콘텐츠

세부정보

When to use: 툴팁보다 풍부(버튼·링크 포함).
Alternatives: Hover Card · Flyout
a11y: button[aria-expanded] + Esc 닫기.

[05.07] Chat Widget챗 위젯 · 상담 버블

Chat

세부정보

When to use: 라이브챗·봇 진입점. 우하단 고정.
Alternatives: Support Bubble · Help Launcher
a11y: 키보드 포커스 가능. aria-expanded.

[05.08] Skeleton스켈레톤 · 로딩 자리표시

세부정보

When to use: 네트워크 로딩 중 레이아웃 유지.
Alternatives: Placeholder · Shimmer · Spinner
a11y: aria-busy="true". 완료 시 aria-live.

06

E-Commerce · 이커머스 전용

제품 탐색 · 결정 · 결제에 특화된 패턴.

[06.01] Product Card프로덕트 카드 · 상품 카드

IMG

Runner 01

W89,000

세부정보

When to use: 카테고리·검색·추천 리스트.
Alternatives: SKU Card · Item Tile
a11y: 카드 전체 링크 권장.

[06.02] Product Gallery프로덕트 갤러리 · 상품 이미지

Main

1

2

3

세부정보

When to use: PDP 좌측. 메인 + 썸네일 + 확대.
Alternatives: PDP Media · Image Viewer
a11y: 썸네일 role="tab". 확대뷰 포커스 트랩.

[06.03] Price / Strike프라이스 · 할인 표기

W69,000W89,000-22%

세부정보

When to use: 현재가 · 정가 · 할인율 3요소.
Alternatives: Compare at Price · Sale Price
a11y: 취소선은 시각 — sr용 "정가" 텍스트 병기.

[06.04] Add to Cart장바구니 담기 · ATC 버튼

-+

장바구니 담기

세부정보

When to use: PDP 우측. 옵션 선택 후 활성.
Alternatives: ATC · Buy Now(즉시 결제)
a11y: input type="number" + min/max. aria-live.

[06.05] Cart Drawer카트 드로어 · 미니 카트

장바구니 (2)

Runner 01 x 1
Socks x 2

합계 W119,000

세부정보

When to use: ATC 직후 자동 슬라이드인.
Alternatives: Mini Cart · Slide Cart
a11y: 금액 변동 aria-live.

[06.06] Checkout Stepper체크아웃 스테퍼 · 결제 단계

1 Cart2 Ship3 Pay

세부정보

When to use: 다단계 결제. 현재/완료/미완료 구분.
Alternatives: Progress Steps · Wizard
a11y: <ol> + aria-current="step".

[06.07] Filter / Facet필터 · 패싯

가격 5만원 이하 5-10만원

세부정보

When to use: 리스트 좌측(데스크톱) / 드로어(모바일).
Alternatives: Refinement · Facet Navigation
a11y: fieldset 그룹. 결과 갱신 aria-live.

[06.08] Sort소트 · 정렬

세부정보

When to use: 리스트 우상단.
Alternatives: Sort Order · Ordering
a11y: 변경 시 aria-live 공지.

[06.09] Pagination페이지네이션 · 쪽나눔

Prev123Next

세부정보

When to use: 결과 수 많고 순서 탐색. SEO 유리.
Alternatives: Load More · Infinite Scroll
a11y: <nav aria-label="페이지"> + aria-current.

[06.10] Wishlist / Save위시리스트 · 찜

SaveSaved

세부정보

When to use: 구매 지연 사용자 저장.
Alternatives: Favorite · Bookmark
a11y: aria-pressed. 변경 aria-live.

[06.11] Review / Rating리뷰 · 평점

* * * * *

"배송 빠르고 핏 좋음."

— JANE

세부정보

When to use: PDP 하단. 별·수치·글·사진.
Alternatives: Star Rating · UGC Block
a11y: aria-label="4.2점 5점 만점".

07

Footer · 푸터

페이지 하단. 사이트맵 · 법적 고지 · 신뢰 표식.

[07.01] Sitemap Columns사이트맵 컬럼 · 링크 목록

Product
Features

Company
About

Legal
Terms

세부정보

When to use: 푸터 중앙. 3-5컬럼.
Alternatives: Footer Nav · Link Columns
a11y: <nav aria-label="푸터"> + <h3> 제목.

[07.02] Social Links소셜 링크 · SNS 아이콘

XIGYT

세부정보

When to use: 브랜드 SNS 채널.
Alternatives: Social Icons · Follow Us
a11y: aria-label="Instagram" 등. target="_blank" 안내.

[07.03] Legal Links리걸 링크 · 법적 고지

Terms · Privacy · Cookies

세부정보

When to use: 푸터 하단. 필수: 약관·개인정보·쿠키.
Alternatives: Policy Links
a11y: 접근성 선언 링크 포함 권장.

c 2026 ACME Inc.

세부정보

When to use: 푸터 최하단.
Alternatives: Attribution · Imprint
a11y: 장식 텍스트. role 불필요.

[07.05] Payment Icons페이먼트 아이콘 · 결제 수단

VISAMCAMEX

세부정보

When to use: 이커머스 푸터·체크아웃.
Alternatives: Accepted Payments
a11y: 각 아이콘 alt="Visa".

[07.06] Back to Top백투탑 · 상단 이동

^

세부정보

When to use: 긴 페이지 우하단 플로팅.
Alternatives: Scroll to Top
a11y: button + aria-label="맨 위로".

[07.07] Trust Badge트러스트 배지 · 인증

SOC 2GDPRISO

세부정보

When to use: B2B SaaS · 핀테크 · 헬스.
Alternatives: Compliance Seal
a11y: alt에 인증 풀네임.

08

System Pages · 시스템 페이지

정상 흐름을 벗어난 상황 · 오류 · 빈 상태 · 성공을 위한 전용 화면.

[08.01] 404 Not Found404 · 경로 없음

404페이지를 찾을 수 없습니다홈으로

세부정보

When to use: 존재하지 않는 URL. 회복 경로 제공.
Alternatives: Not Found Page
a11y: HTTP 404 응답 필수. soft 404 금지.

[08.02] 500 Server Error500 · 서버 오류

500일시적인 오류재시도

세부정보

When to use: 서버 장애. 스택트레이스 노출 금지.
Alternatives: Internal Error · 503
a11y: 사용자 친화적 메시지.

[08.03] Empty State엠프티 스테이트 · 빈 상태

0아직 항목이 없습니다+ 새로 만들기

세부정보

When to use: 데이터 없음. 다음 행동 유도.
Alternatives: Zero State · Blank Slate
a11y: 의미있는 설명 텍스트.

[08.04] Maintenance유지보수 · 점검

[MAINT]서비스 점검 중ETA: 04:00 KST

세부정보

When to use: 계획된 다운타임. 복구 시각 명시.
Alternatives: Scheduled Maintenance
a11y: HTTP 503 + Retry-After 헤더.

[08.05] Loading / Splash로딩 · 스플래시

LOADING

세부정보

When to use: 앱 초기 부팅. 3초 초과 시 진행 표시.
Alternatives: Spinner · Skeleton(선호)
a11y: aria-live="polite". 모션 감소 시 정적.

[08.06] Success석세스 · 완료 화면

OK주문이 완료되었습니다#ORD-2026-0417

세부정보

When to use: 체크아웃·가입·폼 제출 직후.
Alternatives: Thank You Page · Confirmation
a11y: 포커스를 완료 헤딩으로 이동.

웹사이트 해부도
Website Anatomy Map

Legend

Global Chrome · 전역 크롬

Header · 헤더

Hero · 히어로 영역

Content Sections · 본문 섹션

Forms & Inputs · 폼과 입력

Overlays · 오버레이

E-Commerce · 이커머스 전용

Footer · 푸터

System Pages · 시스템 페이지

—