주요 내용으로 건너뛰기

(번역) Stop using device breakpoints

Adam Silver의 Stop using device breakpoints 번역

+ 수정1 (2018.10.28): Velog에 내용을 좀 더 다듬어서 새로 업로드했습니다. 참고해주세요! 



나는 매번 자기가 가장 좋아하는 기기에 따라 중단점(breakpoint)을 설정하는 디자이너 혹은 개발자를 마주친다.우리는 언제쯤 과거의 습관에서 벗어날 수 있을까?

웹이 처음 나왔을 때, 우리는 가로 640 픽셀을 기준으로 삼았다. 그리고 몇 년쯤 지나 더 큰 모니터가 등장했고 우리는 기준을 960 픽셀로 바꿨다. 우리는 더 이상 작은 모니터를 신경쓰지 않았다.

더 많은 시간이 지나고 모바일 웹의 시대가 왔다. 더 정확하게 말하면 우리는 웹 사이트를 작은 화면의 모바일 기기에서도 이용할 수 있게 되었다. 수 많은 브라우저와 기기가 나타났고, 우리는 미디어쿼리(media queries)를 사용하게 되었다. 

이때쯤 우리는 모바일 기기의 기준을 320 픽셀로 설정했다. 왜냐고? 많은 사람들이 아이폰을 가지고 있었고, 아이폰의 기본 너비(portrait mode width)는 320 픽셀이었으니까.

그 다음엔 가로 모드, 태블릿, 데스크탑이 있고, 뭐라고 불러야할지 모를 엄청난 사이즈의 모니터들이 있다. 그리고 TV, 웨어러블 그리고 ...

이제 핵심에 도달했다. 웹은 고정된 크기의 인쇄물이 아니다. 웹은 웹 자체이며 우리는 유저가 어떤 사이즈의 스크린을 사용할지 알 수 없고, 어떤 툭정 기기만 사용하라고 할 수도 없다. 만약 그렇게 할 수 있다하더라도, 더 많은 종류의 기기가 등장하면 어떤 한 기기에 대한 디자인은 전혀 쓸모가 없어진다.

물론 우리가 알 수 있는 것도 있다. 브랜드와 UI 그리고 컨텐츠가 그렇다. 

우리는 항상 컨텐츠에서부터 출발해야 한다. 컨텐츠 없는 디자인은 쓸모가 없다. 디자인의 목표는 유저가 컨텐츠를 잘 소비할 수 있게 돕는 것이지, 단지 디자인만을 보여주는 것이 아니다.

우리는 종종 박스에서부터 디자인을 시작한다. 그리고 더 작은 박스들을 그 안에 집어넣는다. 그리고나서야 박스 안에 컨텐츠를 집어넣는다.

Frank Chimero의 책 The Web’s Grain에 따르면 이런 방식은 최악의 디자인 방식이다.

그렇다면 우리는 컨텐츠에 대해 알기 전까지 어떻게 디자인을 할 수 있을까?

나는 디자이너들이 자신의 목업 디자인(mock-ups)을 마치고, 컨텐츠를 짜는 디자이너들에게 디자인에 컨텐츠를 맞추라고 부탁하는 장면을 목격한다. 심지어는 유저 친화적인 컨텐츠를 디자인에 맞추기 위해 크기를 줄이라고 하기까지 한다. 이런 부탁은 디자이너에게는 유용할 지 모르지만 유저에게는 그렇지 않다.

그리고나서 그들은 가로 모드 혹은 자기가 가진 것과 다른 종류의 기기에서 디자인을 확인하곤 분노에 휩싸인다. 하지만그들이 규칙이라고 부르는 기기 중단점(device breakpoint)은 실제로는 디자인에 대해 굉장히 불필요한 제약이다.

대신 우리는 컨텐츠를 기준으로 삼아야한다. 우리는 컨텐츠의 배치를 재조정할 필요가 있을 때, 중단점을 설정해야 한다. 우리는 Frank가 재조정점(points of reassembly)이라고 칭하는 이러한 형태의 중단점을 컨텐츠 중단점(content breakpoint) 이라 부를 수 있다.

MaintainableCSS의 구독 폼을 예로 들어보자. 컨텐츠 중심, 작은 스크린 중심 접근법에 따라 구독버튼은 텍스트 박스 아래에 있다. 그리고 화면이 가로로 넓어지면 버튼이 텍스트 박스 오른쪽으로 간다.

MaintainableCSS의 구독 폼

여기서 미디어쿼리는 중단점으로 36em을 사용한다. 왜 그럴까? 그 지점에서 컨텐츠를 재조정할만 공간이 발생하기 때문이다. 버튼이나 텍스트 박스는 넓은 화면에서 보면 너무 가로로 길어진다. 그래서 36em을 기준으로 디자인을 재조정하는 것이다.

이런 재조정은 오직 구독 폼에만 적용된다. 왜냐하면 36em의 사이즈를 모든 컨텐츠를 포괄하는 절대적인 중단점으로 삼긴 어렵기 때문이다. 중단점은 오직 컨텐츠의 특정 부분의 요구만을 반영해야한다.

기술적으로 기기 중단점이나 컨텐츠 중단점 모두 그냥 미디어쿼리일 뿐이다. 하지만 마음가짐과 접근방법에서 컨텐츠 중단점은 기기 중단점과 다르다. 디자인은 컨텐츠를 보조할 뿐 다른 어떤 것도 건드리지 않는다.

이러한 점이 CSS 프레임워크가 문제점을 발생시키는 이유다. CSS 프레임워크는 미리 정해진 크기의 그리드에 컨텐츠를 집어넣길 요구한다. 하지만 그들은 우리의 컨텐츠에 대해 알지 못한다.

모바일 중심이라는 용어는 우리가 기기를 중심으로 생각하게 한다. 하지만 웹은 기기의 폭에 의해 결정되지 않는다. 오히려 웹은 continuum of edgelessness(과학 용어라서 pass ... 연속적인 물질? 정도로 이해할 수 있을 듯)다. 이 문장이 개인적으로 가장 멋지다고 생각한다.

전문용어에 대해 사과하겠다. 내 말은 어떤 특정 기기 중단점에 맞춰서 작업을 한 뒤에 또 다른 기기 중단점을 설정하는 일이 전혀 쓸모가 없다는 말이었다.

기기 중단점은 잘 해봐야 제약일 뿐이고 잘못 쓰면 문제만 생긴다.

대신 컨텐츠를 길잡이로 만들어라. 만약 컨텐츠가 이상하게 보인다면 그 때 필요한 만큼 컨텐츠 중단점을 설정해라.

Responsive design은 우리를 "모든 기기에 맞게 디자인해야한다"는 불가능한 과제로부터 자유롭게 한다. 컨텐츠 중단점은 유저가 어떤 크기의 기기를 사용하더라도 더 나은 경험을 제공한다.

원문 출처: Stop using device breakpoints (medium)

이준형 님의 창작활동을 응원하고 싶으세요?

댓글

SNS 계정으로 간편하게 로그인하고 댓글을 남겨주세요.