반응형 레이아웃을 설계할 때 브레이크포인트는 어떤 기준으로 정하나요?

실제 경험으로 답변 구성하기

면접에서는 특정 기기 해상도 숫자를 외워서 말하기보다, 화면 폭을 조절할 때 실제 콘텐츠가 겹치거나 줄 길이가 읽기 불편해지는 지점을 찾아 전환점을 정한다고 설명하는 것이 좋습니다. 작은 화면의 1열 기본 배치에서 출발해 폭을 넓혀 가며 다단 배치, 탐색 메뉴, 여백이 바뀌어야 하는 구간을 기록하는 흐름으로 정리해 보세요. 직접 설계한 경험이 있다면 검증한 화면 폭과 글꼴 확대 테스트 방법을 덧붙이고, 없다면 이러한 콘텐츠 중심 설계 절차를 제안하면 됩니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 다국어 번역문이나 브라우저 글꼴 확대가 적용되면 같은 화면 너비에서도 줄바꿈이나 넘침이 훨씬 일찍 발생할 수 있습니다.
2. 전체 화면 배치는 미디어 쿼리로 다루고, 어디에 놓일지 모르는 재사용 카드 컴포넌트는 컨테이너 쿼리로 가용 폭을 판단하면 유리합니다.

면접에서 자주 하는 실수

특정 스마트폰이나 태블릿의 가로 픽셀 값을 모든 프로젝트의 절대적인 표준 브레이크포인트라고 말하지 않도록 주의합니다.