모바일 퍼스트 설계란 웹사이트를 처음부터 모바일 화면 기준으로 제작한 뒤, CSS 미디어 쿼리(Media Query)를 활용해 태블릿이나 데스크톱처럼 더 큰 화면에서 어떻게 보일지 조정하는 방식을 말합니다. 다시 말해, 미디어 쿼리를 통해 반응형 웹사이트(다양한 화면 크기에 맞춰 유연하게 적응하는 사이트)를 만드는 것입니다.
미디어 쿼리를 사용할 때 우리는 이를 브레이크포인트(breakpoint)라고 부릅니다. 예를 들어, 화면 너비가 800px가 되는 시점에 레이아웃이 모바일에서 태블릿 형태로 전환되기를 원한다면 아래와 같은 미디어 쿼리를 작성하면 됩니다.
@media screen and (min-width: 800px) {
/* 여기에 태블릿 스타일 추가 */
}이제 800px가 첫 번째 브레이크포인트가 됩니다.
데스크톱 브레이크포인트를 1200px로 정하기로 했다면 이렇게 작성할 수 있습니다.
@media screen and (min-width: 1200px) {
/* 여기에 데스크톱 스타일 추가 */
}이것이 두 번째 브레이크포인트이며, 총 두 개의 브레이크포인트를 갖게 됩니다.
위의 브레이크포인트 모델을 적용한 레이아웃 데모를 빠르게 살펴보겠습니다.
https://codepen.io/StrengthandFreedom/pen/abzywPd
보시는 것처럼 이제 세 가지 서로 다른 화면 크기 범위가 생깁니다. 모바일은 0~800px, 태블릿은 800~1200px, 데스크톱은 1200px 이상입니다. 이를 구현하기 위해 CSS 미디어 쿼리로 두 개의 브레이크포인트를 만들었습니다.
위 예제는 단순하지만 핵심 개념을 충분히 보여줍니다. 브레이크포인트 사이에서는 글꼴 크기부터 레이아웃 너비까지 모든 요소를 자유롭게 조절할 수 있습니다.
브레이크포인트가 두 개 이상 필요하다면?
상황에 따라서는 더 세밀한 접근이 필요해 브레이크포인트를 몇 개 더 추가해야 할 수도 있습니다. 실제로 100~200px 간격으로 브레이크포인트를 설정해 무려 10개까지 사용하는 웹사이트도 본 적이 있습니다.
하지만 대부분의 경우에는 그것이 과한 처리일 가능성이 높습니다.
웹사이트에 이상적인 브레이크포인트 개수는?
정답은 없습니다. 맥락(context)에 따라 판단해야 합니다. 웹사이트가 복잡할수록, 타깃 오디언스가 사용하는 주요 기기와 화면 크기에서 사이트가 잘 보이도록 하려면 일반적으로 더 많은 브레이크포인트가 필요합니다.
경험상 평균적인 웹사이트라면 대부분의 상황을 커버하는 데 2~4개의 브레이크포인트면 충분합니다. 저는 개인적으로 4개를 선호합니다.
앞서 브레이크포인트 2개를 사용하는 예제를 살펴봤으니, 이번에는 4개를 사용하는 예제를 확인해 보겠습니다.
브레이크포인트 4개로 구성한 반응형 레이아웃
위에서 사용한 동일한 아티클 레이아웃에 브레이크포인트를 몇 개 추가해 더 세밀한 조작권을 확보해 보겠습니다. 개인적으로 모바일 구간에서 0px에서 800px로 바로 넘어가는 건 간격이 너무 크다고 생각합니다. 특히 휴대용 기기를 가로 모드로 사용할 때 이 방식이 잘 맞지 않는 경우가 많습니다.
그 이유는 사용 중인 글꼴 크기가 큰 휴대용 기기에서는 무난하게 작동하지만, h1(헤드라인)이 다소 과하게 커 보이기 때문입니다. 동시에 콘텐츠 너비는 500px를 넘어서는 순간 지나치게 넓어져 행 길이(measure, 한 줄의 문자 수)가 너무 길어져 가독성이 떨어집니다. 최적의 독서 경험을 위해서는 한 줄에 약 40~80자 정도가 이상적입니다.
이 문제를 해결하기 위해 첫 번째 브레이크포인트를 480px에 추가하고, 데스크톱 이상 구간용 브레이크포인트를 1200px 대신 1900px(초대형 화면용)로 하나 더 추가해 보겠습니다.
4개 브레이크포인트 데모는 여기서 확인할 수 있습니다.
https://codepen.io/StrengthandFreedom/pen/mdyMMeL
브라우저 창 크기를 조절해 보면, 브레이크포인트 2개짜리 예제와 비교했을 때 4개짜리 레이아웃에서는 타이포그래피가 훨씬 자연스럽게 확대·축소(적응)되는 것을 알 수 있습니다. 모바일과 태블릿 사이에 추가된 브레이크포인트 덕분에 콘텐츠 너비, 여백(패딩/마진), 글꼴 크기를 더욱 정교하게 제어할 수 있기 때문입니다.
1900px 브레이크포인트는 외부 모니터처럼 정말 큰 화면을 위해 디자인할 때 유용합니다. 요즘은 대형 모니터를 사용하는 사람이 점점 늘고 있으므로 결코 간과해서는 안 되는 영역입니다.
브레이크포인트 하나만으로 웹사이트를 만들 수 있을까?
저는 단순함을 좋아합니다. 시스템의 움직이는 부품이 적을수록 유지 관리가 쉬워지기 때문입니다. 하지만 레이아웃을 단순화하는 데에도 한계는 있습니다.
일부 디자이너와 개발자는 웹사이트 전체에 브레이크포인트를 단 하나만 사용합니다. 브레이크포인트가 하나라는 것은 곧 다음 두 가지 레이아웃만 있다는 의미입니다.
- 모바일 레이아웃
- 데스크톱 레이아웃
이 경우 브레이크포인트는 통상 600~960px 화면 너비 구간에 설정됩니다.
하지만 다양한 화면 크기와 기기 유형에 맞춰 디자인해야 하는 현대에는 이런 접근이 다소 낙관적입니다.
다양한 기기와 화면 크기를 사용하는 폭넓은 사용자에게 좋은 사용자 경험을 제공하고 싶다면, 일반적으로 브레이크포인트 하나 이상은 더 필요합니다.
앞서 강조했던 내용을 다시 한번 말씀드립니다. 맥락이 디자인 결정을 이끌도록 하세요.