반응형 (PC·Tablet·Mobile)
PC·Tablet·Mobile은 서로 다른 기기 종류가 아닙니다. 정확히 말하면 “브라우저 창이 지금 몇 px 너비인가”라는 하나의 연속된 숫자를 사람이 알아보기 쉽게 세 구간으로 나눠 부르는 이름일 뿐입니다.
왜 “기기”가 아니라 “너비”인가
같은 노트북, 같은 브라우저에서도 창 너비는 계속 바뀝니다.
- 창을 최대화하면 → PC(Desktop) 구간
- 다른 창과 나란히 절반씩 띄우면 → 그 순간 Tablet 구간
- 화면을 캡처하려고 창을 작게 줄이면 → Phone 구간
기기를 바꾼 게 아니라 같은 화면에서 창 너비만 바뀐 것입니다. 반응형 디자인은 “아이폰용, 아이패드용, 데스크톱용을 각각 만드는 것”이 아니라, 어떤 너비로 보든 깨지지 않게 레이아웃 규칙을 정해두는 것입니다.
실제로 이렇게 재배치됩니다
말로는 감이 안 오니, 같은 페이지(내비게이션 + 히어로 + 카드 3개)가 너비에 따라 실제로 어떻게 재배치되는지 보세요.
- 내비게이션 — PC에서는 메뉴 4개가 다 보이지만, 폭이 좁아질수록 일부가 숨겨지고 Phone에서는 햄버거 아이콘 하나로 압축됩니다.
- 히어로 — PC·Tablet에서는 글과 이미지가 나란히(가로) 배치되지만, Phone에서는 세로로 쌓입니다. 가로로 배치할 공간 자체가 없기 때문입니다.
- 카드 3개 — PC에서는 한 줄에 3개, Tablet에서는 2개+1개로 줄바꿈, Phone에서는 1개씩 세로로 쌓입니다.
이 재배치는 자동으로 일어나지 않습니다. Framer에서 브레이크포인트별로 직접 지정해야 합니다. Desktop 레이아웃만 만들고 Tablet·Phone을 그대로 두면, 좁은 화면에서 그대로 찌그러지거나 넘칩니다.
”우리는 태블릿 유저가 없는데요?” — 흔한 오해
프로젝트를 하다 보면 꼭 나오는 말입니다. “애널리틱스 보니 태블릿 유저 거의 없던데, Tablet 레이아웃까지 신경 써야 하나요?”
결론부터 말하면, 네, 반드시 신경 써야 합니다. 이유는 이렇습니다.
애널리틱스의 “기기” 항목은 보통 실제 태블릿 기기(아이패드 등)를 들고 있는 사람만 셉니다. 하지만 Tablet 너비로 사이트를 보는 사람은 훨씬 많습니다 — 창을 절반만 띄운 노트북 사용자, 세로로 놓은 외부 모니터 사용자, 브라우저를 확대(줌)해서 보는 사용자까지 전부 실제로는 Tablet 폭으로 렌더링되지만, 애널리틱스에는 “데스크톱”으로 잡힙니다.
즉 “태블릿 기기 소유자 수”와 “태블릿 너비로 보는 방문자 수”는 전혀 다른 숫자입니다. 후자를 놓치면, 실제로는 상당한 비율의 “데스크톱 사용자”가 깨진 화면을 보고 있을 수 있습니다.
Framer에서 반응형 다루는 법
브레이크포인트 전환기 확인
캔버스 상단에 Desktop · Tablet · Phone 전환 탭이 있습니다. 지금 디자인 중인 게 어느 구간인지 여기서 확인합니다.
Desktop부터 완성
가장 넓은 Desktop 레이아웃을 먼저 완성합니다. 이후 좁은 구간은 Desktop을 기준으로 “무엇을 다르게 할지”만 조정하면 됩니다.
Tablet·Phone에서 필요한 부분만 재정의
Stack의 방향(가로→세로), 카드 개수, 내비게이션 메뉴의 숨김 여부, 글자 크기 등 좁은 화면에서 어색해지는 요소만 그 구간에서 다시 지정합니다. 나머지는 Desktop 값을 그대로 물려받습니다.
자주 하는 실수
- Desktop만 만들고 끝내기 — 방문자의 상당수가 Tablet·Phone 너비로 접속한다는 걸 잊기 쉽습니다.
- Tablet을 Phone과 똑같이 취급 — Tablet은 “작은 Desktop”에 가깝고 Phone은 “완전히 다른 레이아웃”이 필요한 경우가 많습니다. 카드가 1개씩 쌓이는 건 Phone에서나 자연스럽습니다.
- 크기를 Desktop 값 그대로 유지 — 큰 제목 글자 크기를 Phone에서도 그대로 두면 화면을 넘치거나 줄바꿈이 어색해집니다.
다음 단계
크기 (Fixed·Fill·Fit) 또는 글자 개요로 돌아가세요.