깊게 보기 · 04
“반응형으로 해주세요”가
실제로 뜻하는 것
반응형은 “화면이 알아서 줄어드는 것”이 아닙니다. 어느 폭에서 무엇이 어떻게 바뀔지를 사람이 정해주는 것입니다. 아래 손잡이를 움직여보세요.
폭을 바꿔보세요
아래 막대를 드래그하면 미리보기 화면의 폭이 바뀝니다. 레이아웃이 어떻게 재배치되는지 보세요.
데스크톱 — 사이드바 노출 · 카드 4열 · 메뉴 펼침
“알아서 줄어드는 것”이 아니라 1024px에서 사이드바를 접고, 768px에서 카드를 2열로, 480px에서 메뉴를 햄버거로 바꾸겠다고 사람이 정한 결과입니다.
바뀌는 지점에 이름 붙이기
레이아웃이 변하는 기준 폭을 브레이크포인트라고 합니다.
| 구간 | 폭 | 보통 이렇게 바뀝니다 |
|---|---|---|
| 모바일 | ~ 767px | 1열 · 메뉴는 햄버거 · 표는 가로 스크롤 |
| 태블릿 | 768 ~ 1023px | 2열 · 사이드바 접힘 |
| 데스크톱 | 1024px ~ | 사이드바 노출 · 3~4열 |
“아이폰에서는 한 줄로 해주세요” — 아이폰도 기종마다 폭이 다릅니다. SE는 375px, Pro Max는 430px입니다.
“767px 이하에서는 카드를 1열로, 메뉴를 햄버거로 바꿔주세요.”
기기 이름이 아니라 숫자로 말하세요. 그리고 정한 브레이크포인트는 문서에 남겨 프로젝트 전체에서 같은 값을 쓰게 하세요.
비슷해 보이지만 견적이 다릅니다
반응형 Responsive
레이아웃 1벌을 만들고 폭에 따라 유연하게 변형합니다.
· 중간 크기에서도 자연스러움
· 관리할 코드가 하나
· 요즘의 기본값
적응형 Adaptive
정해진 크기별로 레이아웃을 따로 만듭니다.
· 각 크기에 최적화 가능
· 만들 것이 여러 벌 = 공수↑
· 국내 m.도메인 분리형이 여기
계약서에 어느 쪽인지 적으세요. “반응형”이라고만 쓰면 나중에 “PC랑 모바일이 완전히 달라야 하는데요”라는 요구가 들어올 수 있고, 그건 적응형입니다.
반응형 = 한 벌이 유연하게. 적응형 = 여러 벌을 따로. 말은 비슷한데 작업량이 다릅니다.
모바일에서만 터지는 것들
PC에서 잘 되던 게 모바일에서 깨지는 대표적인 경우입니다.
아이콘은 작아도 누를 수 있는 범위는 44×44px 이상이어야 합니다.
하단 고정 버튼이 홈 바에 가립니다. 아이폰에서만 나타납니다.
모바일 브라우저는 주소창이 사라졌다 나타나며 높이가 변합니다. “화면 높이 100%”가 튑니다. 개발자에게 100dvh를 언급하세요.
모바일 이슈는 실제 기기로 열어봐야 보입니다. 브라우저 개발자도구의 모바일 모드로는 세이프 에어리어와 주소창 문제가 재현되지 않습니다.
이제 이렇게 요청하세요
반응형으로 만들어주세요. 브레이크포인트는 모바일 ~767px / 태블릿 768~1023px / 데스크톱 1024px~로 하고, 모바일에서는 카드 1열 · 메뉴는 햄버거 · 사이드바는 숨김으로 해주세요.
모바일에서 표는 가로 스크롤되게 해주세요. 페이지 전체가 좌우로 움직이면 안 되고, 표 영역 안에서만 스크롤되게 해주세요.
모든 버튼과 아이콘의 터치 영역을 최소 44×44px로 확보해주세요. 아이콘 크기는 유지하고 주변 여백으로 채워주세요.
하단 고정 버튼에 세이프 에어리어를 적용해주세요. 아이폰 홈 인디케이터에 가리지 않아야 합니다.
전체 화면 높이는 100vh 대신 100dvh를 써주세요. 모바일에서 주소창 때문에 높이가 튀지 않아야 합니다.
반응형 요청은 구간별로 무엇이 어떻게 바뀌는지를 문장으로 적어야 합니다. “반응형으로”만으로는 아무것도 정해지지 않습니다.
WHY THIS MATTERS
반응형은 기능이 아니라
결정의 목록입니다.
어느 폭에서 · 무엇을 · 어떻게 바꿀지. 이 결정을 안 하면 개발자가 대신 하고, 그 결과가 시안과 다르다고 다시 요청하게 됩니다. 결정을 문서로 남기는 것이 반응형 작업의 절반입니다.