17장. 실전 - 공통 레이아웃

헤더, 푸터, 기본 레이아웃

공통 레이아웃은 모든 페이지에 반복 적용되는 헤더, 푸터, 글로벌 내비게이션을 포함한다. 이 요소들이 일관되게 설계되어야 사용자가 어느 페이지에서든 동일한 탐색 경험을 얻는다.

공통 레이아웃 설계의 핵심은 반복과 일관성이다. 헤더의 검색창 위치, 장바구니 아이콘, 로그인 버튼이 페이지마다 달라지면 사용자는 매번 위치를 다시 찾아야 한다. Figma Make로 공통 레이아웃을 먼저 생성하고, 이를 컴포넌트화하여 전체 페이지에 적용한다.

실전은 커뮤니티의 템플릿을 사용하지 않고, 하얀 화면에서 시작할 예정이다. 템플릿으로 해도 무방하지만, 좀 더 확실한 연습을 위해 아무것도 없는 빈화면부터 시작한다.

브레이크포인트 정의

Figma Make에 프롬프트를 입력하기 전에 브레이크포인트를 먼저 확정한다. 5장에서 정의한 타깃(모바일 80%, 20~30대 여성)을 고려하면 모바일 퍼스트 접근이 필수다.

프로젝트 브레이크포인트

모바일: 390px 또는 Full (iPhone 14 기준)
데스크톱: 1440px 또는 Full (일반 모니터 기준)

태블릿(768px)은 MVP에서 제외한다. 모바일과 데스크톱 두 뷰만 설계하되, 모바일 레이아웃이 태블릿에서도 자연스럽게 확장되도록 유연한 그리드를 적용한다.

프레임 설정

모바일 프레임: 390 × 844px
데스크톱 프레임: 1440 × 900px

헤더 설계: 검색/카트/로그인

헤더는 모든 페이지의 상단에 고정되며, 사용자의 핵심 액션(검색, 장바구니, 로그인)에 즉시 접근할 수 있어야 한다.

데스크톱 헤더 프롬프트

기본 헤더 생성

데스크톱용 이커머스 헤더를 만들어줘 (너비 1440px, 높이 80px).

왼쪽 영역:
- 로고 플레이스홀더 (140 × 40px)

가운데 영역:
- 검색창과 검색 아이콘 (너비 480px, 높이 44px)
- 플레이스홀더 텍스트: "검색어를 입력하세요"

오른쪽 영역 (가로 배치, 간격 24px):
- 하트 아이콘과 "찜" 라벨
- 쇼핑백 아이콘에 "3" 숫자 배지, "장바구니" 라벨
- 사람 아이콘과 "로그인" 라벨

스타일:
- 배경: 흰색
- 하단 테두리: 1px 실선 #E5E5E5
- 폰트: Inter, 14px
- 아이콘 크기: 24px
- 라벨은 아이콘 아래 배치

카테고리 내비게이션 추가

헤더 아래에 카테고리 내비게이션 바를 추가해줘 (너비 1440px, 높이 48px).

내비게이션 항목 (가로 중앙 정렬, 간격 40px):
- 전체
- 의류
- 뷰티
- 액세서리
- 세일

스타일:
- 배경: 흰색
- 폰트: Inter Medium, 14px
- 텍스트 색상: #333333
- 호버 상태: 밑줄, 색상 #000000
- 활성 상태: 폰트 굵게, 밑줄
- 하단 테두리: 1px 실선 #F0F0F0

로그인 상태 변형

헤더 오른쪽 영역의 로그인 상태 변형을 만들어줘.
"로그인"을 다음으로 교체:
- 사용자 아바타 원형 (32px)
- 드롭다운 화살표 아이콘
- 클릭 시: "마이페이지", "주문내역", "로그아웃" 드롭다운 메뉴 표시

모바일 헤더 Make 프롬프트

기본 모바일 헤더 생성

모바일 이커머스 헤더를 만들어줘 (너비 390px, 높이 56px).

레이아웃 (가로, 양쪽 정렬):
- 왼쪽: 햄버거 메뉴 아이콘 (24px)
- 가운데: 로고 플레이스홀더 (100 × 28px)
- 오른쪽: 검색 아이콘 + 장바구니 아이콘에 "3" 배지 (간격 24px)

스타일:
- 배경: 흰색
- 하단 테두리: 1px 실선 #E5E5E5
- 아이콘 크기: 24px
- 배지: 빨간 원형 (16px), 흰색 텍스트 "3"

모바일 검색 확장 상태

모바일 헤더의 검색 확장 상태를 만들어줘.

검색 아이콘 탭 시:
- 헤더가 전체 너비 검색창으로 변환
- 왼쪽: 뒤로가기 화살표 아이콘
- 가운데: 검색 입력창 (전체 너비 - 80px)
- 오른쪽: X 아이콘으로 입력 내용 삭제

스타일:
- 입력창 높이: 40px
- 플레이스홀더: "검색어를 입력하세요"
- 배경: #F5F5F5
- 모서리 둥글기: 8px

햄버거 메뉴 드로어

모바일용 슬라이드 드로어 메뉴를 만들어줘 (너비 320px, 전체 높이).

상단 영역:
- 닫기 X 아이콘 (오른쪽 상단)
- 로그인 상태: "홍길동님"과 아바타
- 비로그인 상태: "로그인 / 회원가입" 링크

메뉴 항목 (세로 배치, 간격 16px):
- 전체 상품
- 의류
- 뷰티
- 액세서리
- 세일
- (구분선)
- 마이페이지
- 주문내역
- 고객센터

스타일:
- 배경: 흰색
- 폰트: 16px
- 패딩: 24px
- 각 항목: 높이 48px, 왼쪽 정렬
- 카테고리 항목에 오른쪽 화살표 아이콘

헤더 상태별 변형

장바구니 배지 상태 : 해당 레이아웃은 디자인에서 컴포넌트에 활용할 수 있다.

장바구니 아이콘 변형을 만들어줘:
1. 비어있음: 장바구니 아이콘만, 배지 없음
2. 상품 있음: 장바구니 아이콘 + 숫자 빨간 배지 (최대 "99+")
3. 업데이트됨: 장바구니 아이콘 + 배지에 펄스 애니메이션 표시

푸터 설계: 정책/고객센터

푸터는 법적 필수 정보(사업자 정보, 이용약관, 개인정보처리방침)와 고객 지원 링크를 포함한다. 전자상거래법상 사업자 정보 표기는 의무사항이다.

데스크톱 푸터 Make 프롬프트

4컬럼 푸터 생성

데스크톱용 4컬럼 푸터를 만들어줘 (너비 1440px).

컬럼 1 - 고객센터:
- 제목: "고객센터"
- 전화번호: "1588-0000"
- 운영시간: "평일 10:00 - 18:00 (점심 12:00 - 13:00)"
- "1:1 문의하기" 링크

컬럼 2 - 쇼핑 안내:
- 제목: "쇼핑 안내"
- 링크: 배송 안내, 반품/교환, 쿠폰 안내, 회원 등급

컬럼 3 - 고객 지원:
- 제목: "고객 지원"
- 링크: 자주 묻는 질문, 공지사항, 이벤트, 리뷰 작성

컬럼 4 - 회사 정보:
- 제목: "회사 정보"
- 링크: 회사 소개, 입점 문의, 제휴 문의

스타일:
- 배경: #F8F8F8
- 패딩: 60px 120px
- 컬럼 간격: 80px
- 제목: 14px 굵게, #333
- 링크: 14px 기본, #666, 호버 시 #000
- 줄 높이: 2.0

사업자 정보 영역

4컬럼 아래에 사업자 정보 영역을 추가해줘.

내용 (한 줄, " | "로 구분):
- 상호명: (주)쇼핑몰
- 대표: 홍길동
- 사업자등록번호: 123-45-67890
- 통신판매업신고: 2025-서울강남-0000
- 주소: 서울시 강남구 테헤란로 123

그 아래:
- "이용약관 | 개인정보처리방침 | 청소년보호정책"
- 저작권: "© 2025 쇼핑몰. All rights reserved."

스타일:
- 상단 테두리: 1px 실선 #E5E5E5
- 상단 패딩: 24px
- 폰트: 12px, #999
- "개인정보처리방침" 굵게 (법적 강조)

모바일 푸터 Make 프롬프트

아코디언 푸터 생성

아코디언 섹션이 있는 모바일 푸터를 만들어줘 (너비 390px).

상단 영역 - 고객센터 (항상 표시):
- 큰 전화번호: "1588-0000"
- 운영시간: "평일 10:00 - 18:00"
- "1:1 문의하기" 버튼 (테두리 스타일)

아코디언 섹션:
- "쇼핑 안내" (기본 접힘)
- "고객 지원" (기본 접힘)
- "회사 정보" (기본 접힘)

각 아코디언:
- 탭하여 펼침/접힘
- 화살표 아이콘 펼침 시 회전
- 내용은 데스크톱 컬럼과 동일

스타일:
- 배경: #F8F8F8
- 패딩: 24px 16px
- 아코디언 헤더: 높이 48px
- 폰트: 14px

간소화된 사업자 정보

모바일 푸터용 간소화된 사업자 정보를 추가해줘.

내용 (세로 배치):
- "(주)쇼핑몰 | 대표: 홍길동"
- "사업자등록번호: 123-45-67890"
- "통신판매업신고: 2025-서울강남-0000"

링크 행:
- "이용약관 | 개인정보처리방침"

저작권:
- "© 2025 쇼핑몰"

스타일:
- 폰트: 11px, #999
- 줄 높이: 1.8
- 패딩: 16px
- "개인정보처리방침" 굵게

글로벌 내비게이션

글로벌 내비게이션은 카테고리 탐색과 현재 위치 표시(브레드크럼)를 담당한다.

데스크톱 메가메뉴 Make 프롬프트

메가메뉴 드롭다운

데스크톱 카테고리 내비게이션용 메가메뉴 드롭다운을 만들어줘.

트리거: "의류" 카테고리에 마우스 호버

드롭다운 패널 (너비 800px, 중앙 정렬):
- 왼쪽 컬럼 (200px): 서브카테고리 목록
- 전체 보기
- 상의
- 하의
- 아우터
- 원피스
- 오른쪽 영역 (580px): 상품 썸네일 그리드
- 상품 카드 4개 (각 120 × 150px)
- 위에 "인기 상품" 라벨
- 하단: "의류 전체보기 >" 링크

스타일:
- 배경: 흰색
- 박스 그림자: 0 4px 12px rgba(0,0,0,0.1)
- 패딩: 32px
- 서브카테고리 호버: 배경 #F5F5F5

브레드크럼 Make 프롬프트

브레드크럼 내비게이션

브레드크럼 내비게이션 컴포넌트를 만들어줘.

내용 예시:
홈 > 의류 > 상의 > 티셔츠

스타일:
- 폰트: 13px, #666
- 구분자: " > " (#CCC)
- 현재 페이지 (마지막 항목): #333, 링크 없음
- 이전 항목들: #666, 호버 시 밑줄
- 패딩: 16px 0
- 최대 너비: 콘텐츠 너비 (데스크톱 1200px)

모바일 브레드크럼

간소화된 모바일 브레드크럼을 만들어줘.

표시: "< 상의" (상위 카테고리로 돌아가기)만

스타일:
- 왼쪽 화살표 아이콘 + 카테고리명
- 폰트: 14px
- 탭 영역: 전체 너비, 높이 44px
- 배경: #F8F8F8

반응형 레이아웃 구조

그리드 시스템 Make 프롬프트

데스크톱 그리드

1440px 프레임용 데스크톱 레이아웃 그리드를 만들어줘.

그리드 설정:
- 콘텐츠 너비: 1200px (중앙 정렬)
- 컬럼: 12개
- 거터: 24px
- 마진: 120px (양쪽)

레이아웃 영역:
- 헤더: 전체 너비 (1440px)
- 콘텐츠: 1200px 중앙 정렬
- 푸터: 전체 너비 (1440px)

모바일 그리드

390px 프레임용 모바일 레이아웃 그리드를 만들어줘.

그리드 설정:
- 콘텐츠 너비: 358px (중앙 정렬)
- 컬럼: 4개
- 거터: 16px
- 마진: 16px (양쪽)

레이아웃 영역:
- 헤더: 전체 너비 (390px)
- 콘텐츠: 358px, 패딩 16px
- 푸터: 전체 너비 (390px)

여기까지 진행되면 전체적인 공통 레이아웃은 완료된다. 이후에는 앞서 16장에서 작성했던 figma design 파일로 옮겨서 문서화 작업을 진행하면 된다.

NOTE 섹션 작성

디자인으로 생성한 공통 레이아웃에 다음 NOTE를 추가한다.

헤더 NOTE

N.기능.헤더.01

모든 페이지 상단 고정. 검색·장바구니·로그인 즉시 접근 제공

N.상태.헤더.02

로그인 전: '로그인' 텍스트 표시
로그인 후: 사용자 아바타 + 드롭다운

N.데이터.헤더.03

장바구니 배지: cart.items.length
최대 표시: 99+
0개: 배지 숨김

N.이벤트.헤더.04

모바일 햄버거 탭: 좌측에서 드로어 슬라이드
검색 아이콘 탭: 헤더가 검색 입력 모드로 전환

푸터 NOTE

N.기능.푸터.01

전자상거래법 필수 표기 사항 포함.
사업자등록번호, 통신판매업신고 필수

N.상태.푸터.02

모바일: 아코디언 기본 접힘 상태
고객센터 전화번호만 항상 노출

N.데이터.푸터.03

개인정보처리방침: bold 처리 (법적 강조)
링크는 새 탭에서 열림

반응형 NOTE

N.기능.반응형.01

브레이크포인트: 모바일 390px, 데스크톱 1440px
태블릿은 모바일 레이아웃 확장 적용

N.상태.반응형.02

데스크톱: 메가메뉴 호버로 표시
모바일: 햄버거 메뉴 탭으로 드로어 표시

N.이벤트.반응형.03

모바일 하단 내비: 현재 페이지 아이콘 활성화
페이지 전환 시 아이콘 상태 동기화

컴포넌트화

디자인으로 생성한 요소를 Figma 컴포넌트로 등록한다.

컴포넌트 등록 순서

1. 헤더 선택 → 우클릭 → Create Component

이름: Header/Desktop/Default

2. Variants 추가

- Header/Desktop/LoggedIn

- Header/Mobile/Default

- Header/Mobile/SearchExpanded

3. 푸터 선택 → Create Component

이름: Footer/Desktop/Default

Variants: Footer/Mobile/Default

4. 하단 내비 선택 → Create Component

이름: BottomNav/Default

Variants: 각 탭 활성화 상태 5개

90_Spec_Components 페이지 정리

Section: Layout Components
├── Header/Desktop/Default
├── Header/Desktop/LoggedIn
├── Header/Mobile/Default
├── Header/Mobile/SearchExpanded
├── Footer/Desktop/Default
├── Footer/Mobile/Default
├── BottomNav/Default
├── BottomNav/Home_Active
├── BottomNav/Category_Active
├── BottomNav/Search_Active
├── BottomNav/Wishlist_Active
└── BottomNav/My_Active

체크리스트

공통 레이아웃 설계 완료 후 점검 항목

헤더
[ ] 로고 클릭 시 홈으로 이동
[ ] 검색창 placeholder 텍스트 확인
[ ] 장바구니 배지 0/1이상/99+ 세 가지 상태
[ ] 로그인/로그아웃 상태 전환
[ ] 모바일 햄버거 메뉴 동작

푸터
[ ] 사업자등록번호 표기
[ ] 통신판매업신고 표기
[ ] 개인정보처리방침 bold 처리
[ ] 고객센터 운영시간 정확성
[ ] 모바일 아코디언 동작

반응형
[ ] 390px에서 요소 잘림 없음
[ ] 1440px에서 콘텐츠 중앙 정렬
[ ] 터치 타겟 최소 44px (모바일)
[ ] 하단 내비 Safe Area 대응

공통 레이아웃이 확정되면 18장 홈 화면부터 각 페이지별 콘텐츠 영역을 설계한다. 모든 페이지는 이 장에서 만든 헤더·푸터·내비게이션 컴포넌트를 재사용한다.

---

지금까지 진행했던 요구사항을 바탕으로 공통 레이아웃부터 만들어간다. 요구사항 정리가 없으면 처음부터 어떤 것을 만들어야 할지 막막할 수 있다. 정리된 요구사항이 있다면 만드는 건 어렵지 않다.

이미지는 make 생성된 페이지만 캡처하고, design은 NOTE와 컴포넌트 제작요령만 기재했다. 이전에도 언급했지만, 적어도 figma는 다룰 수 있어야 하며, 이 연재에서는 figma 사용법에 대해서는 다루지 않는다.

---