brunch

라이킷 126 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by designsystemguy Apr 23. 2023

반응형 웹 제대로 알고 디자인하기 1

브레이크 포인트에 대해 이야기해봐요.

웹이라는 드넓은 세상은 다양한 스크린에 존재할 수 있으며, 프로덕트 디자이너는 그에 맞게 디자인할 수 있어야 합니다. 오늘은 웹에 대해 더 가까워지는 시간을 가져보려 합니다.

반응형 웹, 솔직히 처음 들으면 한국말로도 이해가 쉽지 않습니다. ‘반응형 웹? 반응하는 웹? 뭐가 반응하지?’ 라는 느낌을 받을테니까요. 한국말 그대로 해석해보자면 ‘(화면너비에 맞게) 반응을 하는 웹’이 맞긴 맞습니다. 다양한 화면 너비에 따라 UI가 재배치되고, 그 안에 있는 요소들의 크기가 늘어나거나 줄어들 수 있다는 의미에서 그 뜻을 이해해주시면 좋을 것 같습니다.

반응형 웹 디자인의 이해 첫 걸음

반응형 웹 디자인을 이해하기 위해서는 두 가지를 짚고 넘어갈 필요가 있습니다.

웹은 구간 별로 나눠진 다는 것을 이해한다.

각 구간 안에서 정해지는 규칙이 있다는 것을 이해한다.

구간 별로 나누어진다?

Breakpoint라는 용어를 들어보셨을 거예요. 구간을 자르는 종단점이죠. 화면은 브레이크포인트 기준으로 레이아웃이나 사이즈, 간격 등 규칙이 바뀔 수 있어요. 또 하나 아셔야할게, 브레이크포인트에 따라 나뉘어지는 구간은 페이지 별로 다를 수 있고요, 심지어 개별 요소마다 다를 수도 있어요.

가령 한 프로덕트 내에서도 브런치의 상세 페이지같은 Manuscript형태의 페이지와 아티클을 모아놓은 Grid형태의 페이지는 브레이크포인트가 다를 수도 있다는 거예요. 아래처럼요.

A Type (Manuscript) : A. 1024 미만 / B. 1024 이상

B Type (Grid) : A. 768 미만 / B. 768 이상 1280 미만 / C. 1280 이상

요소마다 다를 수도 있다는 것도 꼭 아셔야해요. 여기서 요소란 포괄적으로 어떤 섹션이 될 수도 있고요, 어떤 컴포넌트가 될 수도있고, 심지어 어떤 텍스트, 아이콘도 될 수 있어요.

좌측 사이드바가 있는 레이아웃이 있다고 가정했을 때, 아래와 같은 예시가 있을 수 있어요.

사이드바가 1024를 기준으로 그 미만이면 사라지고, 그 이상이면 나타남.

페이지 전체를 아우르는 텍스트의 크기는 1280기준으로 바뀜. 1280미만의 fontSize 14px, 1280이상은 16px.

페이지의 좌우 여백은 1280기준으로 미만은 16px, 이상은 24px.

위 예시에서 사이드바의 브레이크포인트는 1024이며,폰트사이즈와 양쪽 여백은 1280기준으로 바뀌고 있어요. 이처럼 페이지 내에서도 각각의 모든 요소에 따라 브레이크포인트를 다르게 적용할 수 있다는 점을 이해하셔야 합니다.

디자인하며 중요한 것은 브레이크포인트에 따른 UI의 복잡성이 올라갈 수록 프론트엔드 개발에 시간이 더 필요하게되며, 그만큼의 복잡도가 있다는 것을 서로가 이해하도록 긴밀하게 소통하셔야해요. 프론트엔드 개발자는 브레이크포인트에 따른 UI의 변화를 육안으로 모두 알아차리기는 어렵거든요.

추천하는 방법은 변화하는 UI의 복잡성을 최대한 낮추는 거에요. 복잡성을 낮추면 어떤 화면구간에서는 안이쁠수도있어요. 하지만, 개발자 입장에서 어쩌면 뻔하게 보이는 UI 변화 패턴을 이해하기 쉽고 빠르고 정확하게 개발할 수 있을거예요. 그렇게 시작을 하면서, 화면에 보이는 모든 구간을 만족시킬 수 있도록 점점 구간별 UI의 복잡도를 올려나가보세요.

아무 소통 없이 디자인해서 개발자한테 떤지지 말고요, 적어도 개발자와 해당 UI가 구간별로 어떻게 변화하는지, 왜 이 구간에서 변화해야하는지 ‘Responsiveness’를 주제로 심도있는 미팅이나 대화를 나눠본 다음에 하세요. 그러면 당신은 이 부분에 있어 압도적으로 성장하리라 확신합니다.

그럼 브레이크포인트는 어떻게 정할까요?

브레이크 포인트는 다섯가지 정도를 확인해보고, 정하면 좋을 것 같아요. 지피지기면 백전백승이라는 말이 있잖아요? 딱 그 말이 어울리는 순간이에요.

이 세상의 모든 디바이스에 존재하는 화면 사이즈 분포도를 이해한다.

우리가 집중해야하는 대다수의 유저군의 화면 너비를 파악한다.

우리가 만들어낼 화면들의 레이아웃은 어떤 것들이 있는지 확인한다.

tailwindCSS, Bootstrap 등의 CSS framework에서는 Breakpoint를 어떻게 지정했고, 왜 그렇게 지정했는지 생각해본다.

Adobe Spectrum, GitLab Pajamas 등 반응형 웹 기반 디자인시스템에서는 Breakpoint를 어떻게 지정했고, 왜 그렇게 지정했는지 생각해본다.

그렇게 우리가 프로덕트안에서 사용할 모든 브레이크포인트 목록이 정하고요. 그 다음에 전체 옵션지 중 화면별, 요소별로 사용할 브레이크포인트를 선택해서 구간별로 UI에 변화를 주면 됩니다. 예시) 우리(프로덕트 디자이너,프론트엔드 개발자)가 이 프로덕트 안에서 사용할 브레이크포인트는 768, 1024, 1280, 1600이야! 꼭 이 중에서만 필요한 상황에서 골라쓰자!

번외. Responsive Web vs Desktop&Mobile Web

반응형 웹을 개발하는 것과 데스크탑/모바일 웹을 개발하는 것에는 차이가 있습니다. 반응형 웹은 동일한 URL에 대해 아주 줄여놨을 때와 아주 늘려놨을 때 메타몽처럼 자연스럽게 늘어나고 줄어드는 재주를 가진 친구라고 생각하시면 되고, 데스크탑/모바일 웹 개발의 경우 반응하지 않는 데스크탑용 웹과 모바일용 웹 두벌을 만드는 것이라 생각하시면 될 것 같습니다.

(확실하지는 않지만) 웬만하면 반응형 웹으로 만드는게 한 벌의 UI에서 API 통신 등을 한번에 처리하므로 개발이 깔끔할 것이라는 생각이 듭니다. 대신, 반응형 웹 디자인은 특정 한 화면을 만든다기 보다는 전구간에 걸쳐서 자연스럽게 보이게하는 것이 궁극적인 목적이므로 마크업에 있어 꼼꼼해야한다는 건 사실입니다.

Desktop&Mobile Web으로 두벌로 만드는 케이스는 네이버나 마켓컬리가 대표적입니다. 두가지 사례도 살짝 다른데, 네이버는 모바일웹을 위해 URL앞에 m을 붙였고, 컬리의 경우 접속한 userAgent를 파악하여 동일한 URL일지라도 모바일용 화면으로 나타나도록 제공하고 있습니다.