반응형 웹 기획이 처음인가요? 화면 너비와 그리드 설정, 이것만 따라 하세요
반응형 웹 기획이 처음인가요? 화면 너비와 그리드 설정, 이것만 따라 하세요
모바일에서 보든, PC에서 보든 자연스럽게 화면이 변하는 ‘반응형 웹’.
그런데 기획자가 피그마 캔버스를 “그냥 크게”만 쓰면, 협업은 곧바로 이런 대화로 굴러갑니다.
“이 화면은 1440 기준이에요? 1920이에요? 콘텐츠 폭은요?” 😵💫
정답은 하나입니다. 디자이너·개발자와 약속한 표준 규격 안에서 기획해야 수정과 소통 비용이 확 줄어듭니다.
오늘은 “웹 기획서는 가로를 몇 px로 잡아야 하나요?”에 바로 답하는, 초보 기획자용 기준 세트를 드릴게요.
1) 웹 기획의 표준, 프레임(Frame) 사이즈 정하기
기획자는 “구현 가능한 설계도”를 만드는 사람입니다. 설계도는 자부터 맞춰야 해요.
✅ 데스크톱(PC 웹) 기준: 1440px
- 추천: 1440px을 ‘작업 기준 프레임’으로 잡습니다.
- 이유: 피그마의 데스크톱 프리셋이 1440 폭을 기준으로 제공되는 경우가 많아 협업 기준점으로 쓰기 좋습니다.
- 주의: 1440은 “최대 화면”이 아니라 “기획 기준”입니다. 실제 구현은 반응형으로 늘고 줄 수 있어야 합니다.
✅ 모바일(모바일 웹) 기준: 360px 또는 390px
- 360: 안드로이드 쪽에서 자주 쓰는 기본 폭(기준점)으로 잡기 좋습니다.
- 390: 최근 아이폰 라인업에서 많이 보이는 폭(포인트 기준)이라 체크용으로 유용합니다.
피그마에서 프레임 만드는 순서(진짜로 이대로만)
- 단축키 F로 Frame 툴 선택
- 오른쪽 패널에서 Desktop 프리셋(예: 1440) 선택
- 같은 방식으로 Mobile 프리셋(360 또는 390)도 추가
- 프레임 이름은 [Web] Home_1440, [M] Home_360처럼 규칙적으로
2) 반응형 기획 체크포인트(모바일·태블릿·데스크톱)
반응형은 “모든 폭을 다 그린다”가 아니라, 깨지기 쉬운 구간을 대표 사이즈로 점검하는 게임입니다.
- Mobile: 360 / 390
- Tablet: 768 또는 1024(팀 기준에 맞춰 1개만 고정해도 충분)
- Desktop: 1440
처음엔 3개만 있어도 됩니다. 프레임이 10개를 넘는 순간, 기획이 아니라 “프레임 수집”이 됩니다. 🧺
3) 반응형의 핵심, 그리드(Layout Grid) 설정하기
반응형 웹은 화면이 줄어들 때 콘텐츠가 “규칙”에 따라 움직여야 합니다. 그 규칙을 시각화하는 도구가 Layout Grid예요.
그리드 추가 방법
- 그리드를 적용할 프레임 선택
- 오른쪽 패널에서 Layout grid 옆 + 클릭
- Grid 타입을 Columns로 변경
데스크톱(1440) 추천: 12 컬럼 그리드
12 컬럼은 웹에서 가장 널리 쓰이는 방식이라 개발 협업이 편합니다.
- Count: 12
- Type: Center (중앙 정렬)
- Gutter: 24
- Column width: 78 (권장 예시)
왜 78/24 조합? 12컬럼에서 78×12 + 24×11 = 1200이 되어, 아래 ‘안전 영역(콘텐츠 폭)’과 딱 맞게 떨어집니다.
모바일(360/390) 추천: “단순한 그리드”로 시작
모바일에서 12컬럼을 억지로 유지하면 오히려 복잡해질 수 있습니다. 팀 규칙이 없다면 아래 중 하나로 고정하세요.
- 옵션 A: 4 컬럼(모바일 레이아웃 정리용)
- 옵션 B: 12 컬럼 유지(웹 전용 팀 규칙이 확실할 때)
4) 기획자가 꼭 알아야 할 안전 영역(Safe Area)
브라우저 너비는 사람마다 다릅니다. 그래서 “중요한 콘텐츠가 들어가는 폭”을 따로 잡습니다.
추천 안전 영역 폭
- 가장 무난: 1200px (콘텐츠가 여유롭고, 흔한 컨테이너 폭 범위에 잘 들어옵니다)
- 조금 타이트: 1080px (정보 밀도가 높은 서비스에서 깔끔)
- 프레임 1440 기준 여백: 1200을 쓰면 양쪽 여백이 120px씩 생겨 “숨 쉴 공간”이 생깁니다
피그마에서 안전 영역 라인 만드는 가장 쉬운 방법
- 가로 1200px짜리 사각형(Rectangle)을 하나 만들기
- Fill은 끄고(없애고), Stroke만 얇게 켜기
- 프레임 중앙 정렬 후, Lock해서 기준선으로 쓰기
이 선을 넘지 않게 텍스트와 주요 UI를 배치하면, 넓은 모니터에서도 ‘중앙 정렬 + 안정감’이 유지됩니다.
5) 8단위 법칙: 간격의 마법(8px 룰)
디자인이 깔끔해 보이는 비밀은 “색”이 아니라 간격의 일관성입니다.
가장 쉬운 규칙은 이것:
모든 간격을 8의 배수(8, 16, 24, 32, 40, 48…)로 통일
바로 적용 가능한 예시 규칙
- 버튼 안쪽 패딩: 16
- 텍스트와 요소 사이: 8 또는 16
- 카드/섹션 내부 여백: 24 또는 32
- 섹션과 섹션 사이: 64 또는 80
이 규칙을 지키면, 디자이너는 “의도 해석” 대신 “구현”에 집중하고, 개발자는 “간격 질문” 대신 “기능 구현”에 집중합니다. 모두가 행복해지는 희귀 이벤트 🎯
6) 초보 기획자 사이즈 팁(폰트·배율)
- 본문 글자 크기: 웹 기준 14~16px에서 시작하면 안정적입니다. 12px 이하는 가독성 이슈가 빨리 생깁니다.
- 배율 고민 금지: 1440 기준으로 구조를 잡아두면, 디자이너가 더 큰 해상도(예: 1920)로 확장할 때 비율과 여백을 정리하기 쉽습니다.
- 기획자의 역할: 픽셀 아티스트가 아니라 “구조 설계자”입니다. 그리드 안에서 구조를 정확히 잡는 게 핵심입니다.
7) 30초 체크리스트
- 프레임 기준이 정해졌는가? (Desktop 1440 / Mobile 360 또는 390)
- 대표 체크포인트가 3개 이내인가? (Mobile/Tablet/Desktop)
- 데스크톱은 12컬럼 그리드를 적용했는가?
- 안전 영역(예: 1200)을 기준선으로 고정했는가?
- 간격이 8의 배수로 통일되어 있는가?
FAQ
Q 데스크톱은 1920으로 잡아야 더 “현실적” 아닌가요?
A1920은 “최대 화면”에 가깝고, 실제 사용자는 더 작은 뷰포트(브라우저 창 크기)로 보는 경우도 많습니다. 그래서 1440 같은 ‘기준 프레임’을 잡고, 콘텐츠 폭(안전 영역)을 중심으로 반응형 확장을 전제로 기획하는 방식이 협업에 유리합니다.
Q 모바일은 360이랑 390 중에 하나만 쓰면 안 되나요?
A가능합니다. 팀이 안드로이드 비중이 높으면 360, iOS 비중이 높으면 390을 기준으로 고정하고, 나머지는 “체크용”으로만 두면 됩니다.
Q 그리드 숫자(컬럼/거터/폭)는 꼭 그대로 써야 하나요?
A팀 표준이 있으면 그걸 따르는 게 최우선입니다. 표준이 없다면 “12컬럼 + 거터 24 + 안전영역 1200”처럼 계산이 깔끔한 조합을 먼저 고정해 두는 게 좋습니다.
Q 안전 영역을 1200으로 잡는 이유가 있나요?
A많은 웹 레이아웃이 ‘고정 컨테이너 폭’을 사용하며, 1140~1320 같은 범위를 흔히 씁니다. 1200은 그 중간쯤이라 실무에서 기준선으로 쓰기 편합니다.
Q 8px 룰은 무조건인가요?
A무조건이라기보다 “가장 쉬운 통일 규칙”입니다. 팀에 4px 베이스(더 촘촘한 스케일)가 있다면 그걸 쓰면 됩니다. 핵심은 배수가 ‘일관’해야 한다는 점입니다.