한 화면이, 모든 크기에 맞아야 합니다.

입사하고 처음 받은 피드백이 아직도 기억납니다. 데스크톱에서 완벽하던 화면을 팀장이 폰으로 열자, 글자가 화면 밖으로 삐져나가고 가로 스크롤이 생겼습니다. “디자인은 예쁜데, 손에 안 들어오네.” 그날 이후 저는 화면을 ‘하나의 고정된 그림’이 아니라 ‘너비에 따라 변하는 액체’로 봅니다.

그래서, 직접 줄여보세요

말로 설명하면 길지만, 슬라이더를 한 번 당기면 끝입니다. 아래 너비를 좁혀보세요. 카드가 3열에서 2열로, 다시 1열로 스스로 자리를 바꿉니다.

왜 데스크톱이 아니라 ‘모바일 우선’으로 시작할까요?

좁은 화면부터 만들면 강제로 우선순위를 매기게 됩니다. 폭이 작으니 정말 중요한 것만 남길 수밖에 없죠. 거기서 화면이 넓어질 때 요소를 ‘더하는’ 방식이 모바일 우선입니다. 반대로 데스크톱부터 만들고 모바일에서 ‘덜어내면’ 보통 무거운 코드가 남고, 폰에서 느려집니다. 한국은 방문자 대다수가 모바일이라, 시작점을 모바일로 두는 게 합리적입니다.

브레이크포인트는 몇 개나 둬야 할까요?

흔한 오해가 ‘아이폰용, 갤럭시용, 아이패드용을 따로 맞춘다’는 생각입니다. 저는 기기 모델이 아니라 레이아웃이 어색해지는 너비에서 선을 긋습니다. 대개 모바일(좁음)·태블릿(중간)·데스크톱(넓음) 세 구간이면 충분하고, 콘텐츠가 깨지는 지점에 한두 개를 더합니다. 특정 폰 해상도에 맞추면 다음 신제품이 나오는 순간 무너집니다.

제가 실제로 긋는 선은 이 세 구간이 뼈대입니다 — 기기 이름이 아니라 카드가 몇 열로 설지로 나눕니다.

위 ‘디바이스 리사이저’를 320→1000px로 당기면 카드가 1→2→3열로 바뀌는 지점이 바로 이 선들입니다.

고정 폭으로 짜면 무엇이 잘못될까요?

버튼이나 카드를 width:320px 같은 고정값으로 짜면, 화면이 그보다 좁아지는 순간 밖으로 삐져나가 가로 스크롤이 생깁니다. 저는 그래서 %·fr(그리드)·rem 같은 유연한 단위로 짭니다. 위 리사이저의 카드도 고정 px이 아니라 유연한 그리드라, 너비를 줄이면 코드를 한 줄도 안 바꾸고 알아서 다시 배치됩니다.

좁아질 때, 무엇을 숨기고 무엇을 남길까요?

제 원칙은 ‘숨기지 말고 재배치한다’입니다. 모바일에서 안 보여줘도 되는 정보라면, 사실 데스크톱에서도 군더더기일 때가 많습니다. 그래서 지우는 대신 순서를 바꿉니다. 좁아질수록 가장 중요한 것(가격·문의 버튼)을 위로 올리고, 나란히 있던 3열을 위아래 1열로 쌓습니다. ‘보이느냐’보다 ‘무엇이 먼저 보이느냐’가 핵심입니다.

반응형은 눈으로만 확인하면 될까요?

아닙니다. 저는 브라우저 창을 천천히 줄였다 늘리며 ‘중간 너비’를 꼭 봅니다. 깨지는 건 늘 360px도 1440px도 아닌 어중간한 600~800px 사이에서 나옵니다. 글자가 두 줄로 넘치거나, 이미지와 텍스트가 어정쩡하게 붙는 그 구간이요. 위 리사이저를 320에서 1000까지 천천히 당겨보면, 카드가 바뀌는 ‘그 순간’이 바로 제가 매일 들여다보는 지점입니다.

터치와 마우스는 같은 화면이어도 다릅니다

같은 버튼이라도 마우스로는 한 번에 누르지만, 엄지로는 빗나갑니다. 그래서 좁은 화면에서는 버튼을 더 크게(최소 44px), 간격도 넓게 둡니다. 호버(마우스 올림)에만 정보를 숨겨두면 터치 사용자는 영영 못 봅니다. 반응형은 ‘크기’만이 아니라 ‘입력 방식’까지 함께 바꾸는 일입니다.

화면 너비를 이렇게 보는 사람이, 사이트 전체를 만듭니다

반응형은 사이트에서 가장 안 보이지만 가장 많이 쓰이는 일입니다. 모든 방문자가 자기 화면에서 그 결과를 매일 만나니까요. 그 어중간한 너비 하나까지 진지하게 다루는 사람이라면, 레이아웃도 속도도 같은 태도로 다룹니다. Findable에서는 이런 디테일이 기본값입니다. 당신의 사이트, 어떤 화면에서 보일까요?