반응형 브레이크포인트를 콘텐츠 기준으로 정하는 방법

반응형 브레이크포인트는 콘텐츠에 다른 배치가 필요해지는 너비를 기준으로 정합니다. 가장 좁으면서도 사용 가능한 레이아웃에서 시작해 화면을 넓히고, 열이나 사이드바, 펼쳐진 내비게이션을 배치할 공간이 생길 때 구조를 바꿉니다. 모바일, 태블릿, 데스크톱 프레임은 그 결과를 보여 주는 예시일 뿐, 세 가지 화면 너비만으로 중간 구간의 동작까지 정해지지는 않습니다.

강좌 목록이라면 카드와 필터를 함께 읽고 사용할 수 있는지가 중요합니다. Pixso의 반응형 웹 디자인 작업 공간에서 배치안을 비교한 뒤, 각 배치를 연결하는 너비 규칙을 개발자에게 전달할 수 있습니다. 익숙한 기기 크기 목록부터 고르기보다 실제 콘텐츠가 들어갈 공간부터 확인하세요.

브레이크포인트는 규칙이고 프레임 너비는 예시입니다

브레이크포인트는 레이아웃의 동작이 바뀌는 조건입니다. 디자인 프레임은 그 동작을 보여 주는 한 가지 상태입니다. 두 열 배치를 600px부터 사용한다면 768px 프레임으로 그 모습을 보여 줄 수 있지만, 그렇다고 768px가 브레이크포인트가 되는 것은 아닙니다.

브레이크포인트 없이 연속적으로 바뀌는 속성도 있습니다. 내용 영역은 최대 너비에 도달할 때까지 늘어나고, 이미지는 비율을 유지하며 그 영역을 채울 수 있습니다. 반면 필터 사이드바를 검색 결과 위로 옮기거나, 카드 열을 추가하거나, 내비게이션을 접는 동작은 특정 조건에서 구조가 달라지는 변화입니다.

두 종류의 규칙을 나누어 적으세요. ‘검색 결과 영역은 남은 너비를 사용한다’는 크기 규칙입니다. ‘읽기 편한 카드 두 열을 유지할 공간이 있을 때만 필터 사이드바를 옆에 표시한다’는 구조 변경 조건입니다.

Google의 반응형 디자인 안내(영문)도 인기 기기보다 콘텐츠를 기준으로 브레이크포인트를 정하도록 권합니다. 프레임워크에 있는 기준값을 쓰지 말라는 뜻은 아닙니다. 그 값이 실제 페이지에서도 적절한지 확인해야 한다는 의미입니다.

콘텐츠를 읽고 사용할 수 있는 최소 너비 찾기

예시의 강좌 목록에는 필터 영역과 강좌 카드가 있습니다. 카드에는 썸네일, 제목, 짧은 설명, ‘강좌 보기’ 버튼이 들어갑니다. 카드가 얼마나 좁아져도 되는지 판단하기 전에 ‘접근성을 고려한 인터페이스 디자인 입문’처럼 실제 길이의 제목을 넣어 보세요.

내용을 비교한 뒤 팀이 이 카드의 최소 너비를 264px로 정했다고 가정하겠습니다. 이 값은 예시 카드에 대한 설계 결정이며 모든 카드의 최소 너비는 아닙니다. 가격과 배지가 많은 상품 카드는 더 넓어야 할 수 있고, 설명이 짧은 미디어 타일은 더 좁아도 될 수 있습니다.

필터 사이드바는 224px, 사이드바와 결과 영역 사이는 24px, 카드 사이는 24px, 페이지의 좌우 여백은 각각 24px로 정합니다. 이 조건을 바탕으로 각 배치가 들어갈 수 있는 너비를 계산할 수 있습니다.

요소	예시 너비	이 조건을 정한 이유
강좌 카드	최소 264px	가장 긴 예시 제목과 버튼을 읽고 사용할 수 있음
필터 사이드바	224px	레이블과 선택 항목이 지나치게 줄바꿈되지 않음
영역 또는 카드 사이 간격	24px	공간을 과도하게 차지하지 않으면서 그룹을 구분함
페이지 바깥 여백	좌우 각각 24px	콘텐츠가 뷰포트 가장자리에 붙지 않음

계산에는 실제 컨테이너 너비를 사용해야 합니다. 앱 안의 페이지에는 고정 내비게이션이나 다른 패널이 있을 수 있습니다. 브라우저가 넓어도 이런 영역이 차지하는 공간은 콘텐츠에 사용할 수 없습니다.

배치가 바뀌는 너비 계산하기

사이드바 없이 264px 카드 두 개를 놓으려면 24px 간격과 좌우 여백 48px가 필요합니다. 따라서 이 예시의 기준 너비는 264 + 264 + 24 + 48 = 600px입니다. 그보다 좁으면 한 열을 사용하고, 600px 이상이면 현재 조건에서 두 열이 들어갑니다.

두 열 옆에 사이드바를 표시하려면 사이드바 224px와 결과 영역까지의 간격 24px를 더합니다. 600 + 224 + 24 = 848px입니다. 848px보다 좁을 때는 카드를 최소 너비보다 줄이지 말고 필터 진입점을 결과 위에 둡니다.

카드를 세 열로 늘리려면 카드 하나와 간격 하나를 더합니다. 848 + 264 + 24 = 1136px입니다. 세 열의 결과 영역을 지원하는 디자인이라면 1136px를 다음 전환 후보로 검토할 수 있습니다. 화면이 넓어진다고 계속 열을 추가해야 하는 것은 아닙니다. 최대 내용 너비를 정하는 편이 읽기 좋을 수도 있습니다.

예시 뷰포트 너비	검색 결과	필터
600px 미만	카드 한 열	결과 위의 필터 버튼으로 선택 항목 열기
600~847px	카드 두 열	같은 필터 진입점을 결과 위에 유지
848~1135px	카드 두 열	결과 옆에 224px 사이드바 표시
1136px 이상	내용 컨테이너의 공간이 충분하면 카드 세 열	사이드바 계속 표시

계산 결과는 검토할 후보값입니다. 테두리, 스크롤바, 최종 글꼴, 페이지를 둘러싼 앱 구조에 따라 사용할 수 있는 공간이 달라질 수 있습니다. 디자이너와 개발자는 경계 너비에서 실제 구현 결과를 확인해야 합니다. 계산만으로 화면이 올바르게 표시되는지까지 판단할 수는 없습니다.

필터와 읽는 순서 유지하기

사이드바가 사라져도 필터는 찾을 수 있어야 합니다. 강좌 결과 위에 명확한 이름의 필터 버튼을 두고, 적용된 필터가 있는지 보여 주며, 해제할 방법도 제공합니다. 컨트롤의 위치가 바뀌었다고 선택값을 초기화해서는 안 됩니다.

접힌 필터 화면의 동작을 정한 뒤 그리세요. 항목이 많다면 패널이나 시트를 사용할 수 있지만, 적용하거나 닫는 방법과 검색 결과의 관계가 명확해야 합니다. 레이아웃이 바뀌면서 필터 적용 방식까지 설명 없이 달라지지 않게 합니다.

페이지 제목, 검색이나 필터 컨트롤, 결과 정보, 강좌 순으로 자연스럽게 읽을 수 있게 구성하세요. 데스크톱의 시각적 배치와 실제 콘텐츠 순서가 어긋나지 않도록 주의합니다. CSS로 요소를 문서 순서와 멀리 떨어진 위치에 배치할 수 있으므로 키보드와 스크린 리더의 동작은 구현 단계에서 확인해야 합니다.

좁은 화면에 카드를 더 많이 넣으려고 중요한 설명이나 버튼을 없애지 마세요. 먼저 열 수와 정보의 우선순위를 다시 살펴보세요. 강좌의 차이를 숨긴 작은 카드 두 열보다 필요한 정보를 모두 보여 주는 한 열이 선택에 도움이 될 수 있습니다.

Pixso에서 경계 전후의 화면 비교하기

390px, 768px, 1024px 너비의 기준 프레임을 만듭니다. 위 규칙에서는 각각 한 열, 사이드바 없는 두 열, 사이드바가 있는 두 열을 보여 줍니다. 같은 강좌 내용을 재사용해야 문구나 이미지의 차이가 아니라 배치의 차이를 비교할 수 있습니다.

Auto Layout과 재사용 가능한 컴포넌트로 카드 내부의 구성을 유지하며 너비를 비교합니다. 제목과 설명이 늘어날 수 있게 하고, 어떤 요소가 남은 공간을 채우는지 지정하세요. 각 배치 옆에는 전환 너비와 그 이유를 함께 적습니다.

이어서 599px와 600px, 847px와 848px, 1135px와 1136px를 확인합니다. 여유 있는 화면보다 배치가 바뀌기 직전의 화면에서 문제를 더 쉽게 발견할 수 있습니다. 제목이 어색하게 줄바꿈되는지, 버튼이 다른 내용과 충돌하는지, 카드가 사용하기 어려울 정도로 좁아지는지 살펴보세요.

디자인 파일에는 이런 상태를 기록하고 팀과 함께 검토할 수 있습니다. 하지만 프로덕션 웹사이트의 미디어 쿼리 동작이 자동으로 설정되지는 않습니다. 개발자가 세 장의 화면만 보고 추측하지 않도록 의도한 규칙을 전달하세요.

페이지와 컴포넌트 중 무엇을 기준으로 바꿀지 정하기

뷰포트 기준 브레이크포인트는 필터를 결과 옆에 배치하는 것처럼 페이지 전체의 구조를 바꿀 때 유용합니다. 반면 재사용하는 카드는 자신에게 주어진 공간에 맞춰 바뀌어야 할 수 있습니다. 같은 카드가 좁은 페이지의 전체 너비를 쓰기도 하고, 넓은 화면의 작은 패널 안에 들어가기도 하기 때문입니다.

‘휴대전화에서는 모바일 카드를 사용한다’보다 ‘컨테이너에 가로 배치를 넣을 공간이 없으면 간소화한 카드를 사용한다’고 요구사항을 설명하세요. 개발자는 지원 브라우저와 컴포넌트 구조에 맞춰 컨테이너 쿼리, 유연한 레이아웃 등의 구현 방법을 선택할 수 있습니다.

이유 없이 모든 컴포넌트에 개별 기준값을 만들지는 마세요. 페이지 전체의 전환 규칙을 소수로 공유하면 경험을 일관되게 유지하기 쉽습니다. 서로 다른 컨테이너에 들어가는 컴포넌트에는 해당 공간에 맞춘 조정이 필요합니다. 두 방식은 함께 사용할 수 있습니다.

긴 번역문과 확대 상태에서도 확인하기

긴 강좌명, 번역된 레이블, 큰 글자, 오류나 상태 메시지를 넣고 경계 너비를 다시 확인하세요. 레이블 하나가 길어졌다는 이유로 브레이크포인트를 추가하기 전에 줄바꿈, 정보 그룹, 컨트롤 배치를 개선할 수 있는지 살펴봅니다.

브라우저 확대는 레이아웃에 사용할 수 있는 공간을 바꾸고, 텍스트 확대는 또 다른 문제를 드러낼 수 있습니다. 세 개의 정적인 프레임에서는 멀쩡해도 내용을 확대하면 가로 스크롤이 생기거나 컨트롤이 가려질 수 있습니다. W3C의 리플로 안내(영문)에는 접근성 요구사항과 본질적으로 2차원 배치가 필요한 콘텐츠의 예외가 설명되어 있습니다.

마지막으로 최소 사용 너비, 전환 후보값, 각 경계에서 바뀌는 요소, 경계 사이의 연속적인 크기 규칙을 전달합니다. 강좌 목록의 목표는 명확합니다. 발표용으로 고른 몇 가지 너비뿐 아니라 모든 너비에서 강좌를 읽고 필터를 사용할 수 있어야 합니다.