컴포넌트 & 레이아웃 설계: 마스터 가이드

지난 섹션에서 배운 타이포그래피, 컬러, 이미지, 아이콘, 그림자, 테두리 곡률, 화이트스페이스, 시각적 계층 구조는
“무엇을 그려야 하는지”를 알려주었다면,
이 섹션은 **“그린 것들을 어떻게 배치해서 실제 작동하는 페이지로 만드는지”**의 로드맵입니다.

---

🔍 전체 워크플로우

1. 기본 요소(Elements) 정의
   • 텍스트(헤딩·단락): 의미 단위마다 스타일 통일
   • 버튼: 상태(hover, focus, disabled)까지 설계
   • 이미지: srcset, 레이지 로딩, ARIA 텍스트
   • 입력(form) 요소: 유효성·접근성 메시지
   • 태그/뱃지: 상태·카테고리 표시
2. 컴포넌트(Components) 설계
   • 널리 쓰이는 UI 블록을 Atomic하게 재사용
   • BEM·Atomic CSS·Tailwind 등으로 모듈화
3. 레이아웃 패턴(Layout Patterns) 적용
   • 그리드·플렉스·CSS 그리드로 반응형 처리
   • 카드 그리드, Z‑패턴, 리스트+상세 뷰 등
4. 페이지 조립(Page Assembly)
   • 네비게이션 → 히어로 → 기능 섹션 → 튜토리얼/후기 → 푸터
   • ARIA landmark(header, main, nav, footer) 지정

🛠️ Tip: 프로토타입(Figma/Sketch) → 사용자 테스트(Usability Test) → 코드 구현 순으로 진행하면 품질 보장!

---

1️⃣ 기본 요소(Elements)

1.1 텍스트 블록

• 섹션 오프너:
  • 작게 강조된 소제목 + 대형 헤딩
  • SVG 언더라인·컬러 강조
• 본문 가독성:
  • 최대 75자 줄 길이
  • line-height: 1.5~1.8
• 접근성:
  • 모든 헤딩(h1~h6) 단계별 사용

1.2 버튼(Button)

• 버튼 유형:
  • Primary / Secondary / Ghost / Link
• 크기 & 여백:
  • padding: 0.5rem 1rem 이상 → 터치 영역 충분히
• 상태 디자인:
  • Hover, Focus (outline), Active, Disabled
• 아이콘 포함:
  • <button><svg/> 라벨</button> 구조로 스크린리더 지원

1.3 이미지(Image)

• 반응형:
  • <picture> + <source> → WebP/AVIF 지원
• 레이지 로딩:
  • loading="lazy"
• ARIA:
  • alt 텍스트로 의미 전달
• 고해상도:
  • srcset="img@2x.png 2x"

1.4 폼(Forms)

• 레이블:
  • <label for="id"> + id 매핑
  • 플로팅 레이블 + placeholder 대체 검토
• 유효성 메시지:
  • <div role="alert">로 오류 알림
• 접근성:
  • aria-required="true", aria-invalid="true"

1.5 태그/뱃지(Tags / Badges)

• 상태·카테고리 표현
• 색상 일관성 유지:
  • Success / Warning / Error / Info

---

2️⃣ 컴포넌트(Components)

컴포넌트용도핵심 포인트

Breadcrumbs	깊이 있는 네비게이션 안내	<nav aria-label="breadcrumb"> 활용
Pagination	리스트 페이징	Prev/Next 명확히, 페이지 수 제한 고려
Alert/Status	중요 공지·상태 표시	dismissible, role="alert"
Statistics	KPI·주요 수치 강조	모션 애니메이션(카운트 업) 검토
Image Gallery	포트폴리오·상품 진열	lightbox·스크롤 트리거
Feature Box	서비스·기능 간단 요약	아이콘 + 헤딩 + 짧은 설명
Profile Card	사용자·상품 프로필 요약	클릭 영역(전체 카드) 고려
Accordion	FAQ·내용 토글	aria-expanded 상태 관리
Tabs	콘텐츠 섹션 전환	role="tablist"·role="tabpanel"
Carousel	이미지·카드 자동 순환	접근성(스와이프, 키보드) 지원
Testimonials	고객 후기 스니펫	신뢰성 위해 사진·이름·소속 포함
Logo Grid	고객사·언론사, SNS 로고 모음	Grayscale hover 컬러 효과
Steps	프로세스·서비스 사용 가이드	번호+간단 설명, 진행 상태 강조
Sign-up/Login	계정 관련 폼	소셜 로그인 버튼, 입력 검증
Table	데이터 비교·정렬	헤더 고정·반응형·스크린리더 지원
Pricing Table	요금제 비교	추천 요금제 하이라이트, Toggle 월/연 단위
Modal/Popup	중요 상호작용·경고	role="dialog"·포커스 트랩

 

Tip: 컴포넌트당 1개의 책임(Single Responsibility Principle)을 지켜 유지보수성을 높이세요.

---

3️⃣ 레이아웃 패턴(Layout Patterns)

1. 카드 그리드
   • display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
2. 히어로 + 투컬럼
   • 좌측: 텍스트·CTA, 우측: 이미지
3. F‑패턴 / Z‑패턴
   • 사용자 시선 경로에 맞춘 배치
4. 리스트 + 디테일
   • 메일·채팅 UI 마스터/디테일 뷰
5. 풀스크린 스크롤
   • scroll-snap-type으로 섹션별 고정
6. 스플릿스크린
   • 50:50 대칭 또는 대조 컬러 분할

주의: 모바일·태블릿에서도 각 패턴이 깨지지 않도록 미디어쿼리를 설계하세요.

---

4️⃣ 페이지 조립(Page Assembly)

1. Header / Nav (<header>, <nav>)
2. Hero Section (<section id="hero">)
3. Features / Services
4. Social Proof (Testimonials, Logos)
5. How It Works / Steps
6. Pricing / Plans
7. FAQ / Accordion
8. CTA / Newsletter
9. Footer (<footer>)

Tip: <main> 섹션 하나만 두고, <article>, <section>으로 의미 단위 구조화!

---

✅ 정리

• Atomic → Component → Layout → Page 순으로 설계
• 재사용성, 접근성, 반응형 고려는 필수
• 인기 UI 키트(Tailwind UI, Radix, Flowbite) 활용해 개발 생산성 UP