주니어 기획자를 위한 반응형 웹 기획서 필수 체크리스트 5가지 (Figma 기준)
주니어 기획자를 위한 반응형 웹 기획서 필수 체크리스트 5가지
“태블릿에서는요?” “글자 길어지면 내려가나요?” 그 질문을 받는 순간, 피그마 화면이 갑자기 ‘퀴즈’가 되는 경험… 익숙하죠. 반응형 기획은 화면을 줄이는 작업이 아니라 환경이 바뀔 때 지켜야 할 규칙을 설계하는 일입니다.
키워드: 반응형 웹 기획서 · Figma · Auto Layout
목표: 개발 질문을 “대화”로 바꾸기
결과물: 기획서에 바로 붙여넣는 템플릿 포함
서론: 반응형 기획서가 ‘설계도’인 이유
피그마로 예쁜 화면을 그렸는데 개발자에게
“태블릿에서는 어떻게 보여요?”, “텍스트 길면 줄바꿈 돼요?”
같은 질문을 받고 머릿속이 하얘지는 순간이 있습니다.
반응형 기획의 핵심은 픽셀이 아니라 규칙입니다. “이 화면은 360px에서 이렇게, 768px에서는 이렇게, 1200px 이상에서는 이렇게 행동한다”를 문서로 고정하면, 개발과 QA가 훨씬 빨라집니다.
아래 체크리스트 5가지는 주니어 기획자가 피그마(Figma)로 반응형 웹 기획서를 작성할 때 “절대 놓치면 안 되는 항목”만 뽑아 압축한 버전입니다.
본문: 반응형 웹 기획서 필수 체크리스트 5가지 (Figma 기준)
포인트: “화면별 시안”을 많이 그리는 것보다, 해상도 변화 시 UI가 어떤 규칙으로 변하는지를 명확히 적는 게 더 강력합니다.
1. 중단점(Breakpoint)과 그리드 시스템 명시
반응형의 시작은 “어디서 화면이 변하는가”를 정하는 일입니다.
체크리스트
- Mobile / Tablet / PC 기준 해상도(브레이크포인트)를 수치로 명시
- 각 해상도별 컬럼 수(Column), 여백(Gutter), 좌우 마진(Margin)을 표로 정리
Figma 실무 팁
Layout Grid를 적용해 “그리드가 있는 화면”을 기획서의 기본값으로 만들기- 프레임 옆에 작은 표(텍스트 박스)로 그리드 스펙을 고정해 두기
기획서 문구 템플릿
[Breakpoint 정의]
- Mobile: 360~767px
- Tablet: 768~1199px
- PC: 1200px~
[Grid 정의]
- Mobile: 4 columns / Gutter 16 / Margin 16
- Tablet: 8 columns / Gutter 20 / Margin 24
- PC: 12 columns / Gutter 24 / Max content width 1200
2. 오토 레이아웃(Auto Layout)의 Resizing 규칙
부모가 커질 때 자식이 어떻게 반응하는지, 그 “성격”을 지정해야 합니다.
체크리스트
- 가로/세로 Resizing이 Fixed / Fill / Hug 중 무엇인지 명시
- 리스트/카드 UI의 간격(Spacing)과 패딩(Padding) 규칙 명시
Figma 실무 팁
- 가능하면 실제로
Auto Layout을 적용해 두기 (Inspect에서 바로 보임) - 버튼/뱃지 같은 컴포넌트는 Hug, 컨테이너 영역은 Fill 조합이 자주 쓰임
기획서 문구 템플릿
[Auto Layout Resizing]
- CTA 버튼: Hug(Width) / Fixed(Height=44)
- 카드 컨테이너: Fill(Width) / Hug(Height)
- 카드 내부 텍스트 영역: Fill(Width), 2줄 제한 + Ellipsis
- 카드 간격: 12px, 컨테이너 padding: 16px
3. 텍스트/이미지 가변 처리 (Wrapping)
화면이 좁아질 때, 글자와 이미지가 “어떻게 버틸지”를 정합니다.
체크리스트
- 텍스트가 줄바꿈되는지, 말줄임표(Ellipsis)인지 명시
- 텍스트 라인 제한(예: 1줄/2줄/3줄)과 초과 시 처리 정의
- 이미지: 비율 유지(Ratio) vs 크롭(Crop) 방식 명시
Figma 실무 팁
- 가장 긴 케이스(긴 상품명/긴 닉네임/긴 버튼 라벨)로 “스트레스 테스트 프레임”을 하나 만들어 두기
- 예외 케이스는 그림만으로 부족하니, 기획서 옆에 문장으로 고정
기획서 문구 템플릿
[Text Wrapping]
- 제목: 2줄까지 노출, 초과 시 말줄임(…)
- 본문 요약: 3줄까지 노출, 초과 시 '더보기' 버튼 노출
- 버튼 라벨: 10자 초과 시 줄바꿈 금지, 말줄임 처리
[Image]
- 썸네일: 1:1 유지, 영역 초과분은 Crop (center)
4. 내비게이션 및 컴포넌트 변화 (GNB/LNB)
PC 메뉴가 모바일 햄버거로 변하는 순간, 설명이 없으면 추측 게임이 시작됩니다.
체크리스트
- 해상도별로 노출/비노출 되는 메뉴 항목 정의
- 상태(State) 변화: 기본/스크롤/열림/선택/비활성 등 정의
- 전환 규칙: “언제” 햄버거로 바뀌는지(브레이크포인트와 연결)
Figma 실무 팁
Component Variants로 GNB 상태를 한 컴포넌트에 묶기- 가능하면 “열림” 상태까지 프로토타입으로 연결
기획서 문구 템플릿
[Navigation 변화 규칙]
- PC(>=1200): 상단 GNB 전체 노출
- Tablet(768~1199): 주요 메뉴 5개만 노출, 나머지는 '더보기'로 이동
- Mobile(<768): 햄버거 메뉴로 전환
- 햄버거 열림 시: 우측 드로어(80% width), 배경 dim 처리
- 로그인/알림은 상단 고정 영역에 유지
5. 최소/최대 폭(Min/Max Width) 설정
무한대로 늘어나는 UI는 사용자 경험을 해칩니다.
체크리스트
- 콘텐츠 영역 max-width 수치 명시 (예: 1200px)
- 최소 너비 min-width 및 축소 시 우선순위(숨김/축약/줄바꿈) 정의
- 큰 화면(예: 4K)에서의 정렬 규칙: 중앙 정렬 + 여백 등 명시
Figma 실무 팁
- PC 프레임을 “최대 폭” 기준으로 하나 더 만들어 두기 (1200, 1440 등)
- 배경이 넓어질 때는 콘텐츠가 아니라 “배경(컬러/패턴)”이 확장되도록 설계
기획서 문구 템플릿
[Min/Max Width]
- Content max-width: 1200px, center aligned
- Page padding: 좌/우 24px (PC), 16px (Mobile)
- Min width: 320px
- 4K 대응: 콘텐츠는 1200 고정, 배경만 확장
한 눈에 보는 “반응형 기획서 요약표”
기획서 첫 페이지에 붙여두면, 개발자 질문이 요약표로 빨려 들어갑니다.
| 항목 | 기획서에 반드시 써야 하는 것 | 피그마에서 확인 포인트 |
|---|---|---|
| Breakpoint | Mobile/Tablet/PC 수치 + 전환 기준 | 프레임 폭, 그리드 표기 |
| Grid | 컬럼/거터/마진 | Layout Grid 설정 |
| Resizing | Fixed/Fill/Hug, padding/spacing | Auto Layout + Inspect |
| Wrapping | 줄수 제한, ellipsis, 더보기 조건 | 긴 텍스트 테스트 프레임 |
| Navigation | 노출 규칙, 상태/전환(햄버거 등) | Variants/Prototype |
| Min/Max | max-width/min-width, 중앙정렬 | PC 최대폭 프레임 |
결론: 규칙 하나가 화면 열 개를 이긴다
반응형 기획서는 ‘그림’이 아니라 ‘설계도’입니다. 위 5가지만 지켜도 개발자와의 소통 비용이 크게 줄어듭니다. 완벽한 화면 하나보다, 유연하게 대처하는 규칙 하나가 더 좋은 기획이라는 점을 기억해 주세요.
다음에 “태블릿에서는요?” 질문이 들어오면 이렇게 답해보세요:
“브레이크포인트 기준과 리사이징 규칙은 기획서 요약표에 있어요.”
FAQ: 반응형 웹 기획서에서 자주 나오는 질문
Q1. 브레이크포인트는 꼭 360/768/1200으로 해야 하나요?
고정값 자체가 정답이라기보다, 팀이 합의한 기준을 “문서로 고정”하는 게 핵심입니다. 서비스 성격과 타겟 디바이스 비중에 맞춰 375/834/1440 같은 조합도 흔합니다. 중요한 건 “어느 폭에서 레이아웃이 바뀌는지”를 개발·QA가 똑같이 이해하는 상태입니다.
Q2. 피그마에서 Auto Layout을 꼭 다 적용해야 하나요?
전부 다는 아니어도, 가변이 발생하는 핵심 컴포넌트(카드, 리스트, 버튼, 내비게이션)에는 적용해 두는 편이 소통 비용이 크게 줄어듭니다. 개발자는 Inspect로 “Fill/Hug/Fixed” 힌트를 얻고 구현을 빠르게 확정할 수 있습니다.
Q3. 텍스트 말줄임(…) vs 줄바꿈, 무엇을 기준으로 선택하나요?
정보의 우선순위로 결정합니다.
- 정확히 읽어야 하는 정보(상품명/경고문/약관 핵심)는 줄바꿈 우선
- 스캔이 중요한 목록형 UI(피드/리스트)는 1~2줄 + 말줄임이 안정적
그리고 “몇 줄까지”와 “초과 시 더보기 노출” 같은 조건을 꼭 같이 적어야 논쟁이 끝납니다.
Q4. 내비게이션 변환(햄버거 메뉴)은 어떻게 기획서에 가장 깔끔하게 쓰나요?
“해상도별 노출 규칙” + “열림 상태의 동작(드로어 폭, dim, 스크롤 잠금)”을 템플릿처럼 적는 게 가장 깔끔합니다. 피그마에서는 GNB를 Variants로 묶고, 프로토타입으로 열림 상태까지 보여주면 이해 속도가 훨씬 빨라집니다.
Q5. max-width는 왜 중요한가요?
화면이 넓어질수록 텍스트 줄 길이가 지나치게 길어져 가독성이 떨어지고, UI가 흩어져 보일 수 있습니다. 그래서 콘텐츠 영역은 max-width로 제한하고, 배경만 확장하는 패턴을 많이 씁니다.