현재 회사에서 기존에 서비스하던 웹뷰 페이지를 컨버팅하는 일을 맡게 되었습니다. 지금까지 웹뷰는 빠르게 만들어서 배포해야 하는 특성이 있어 페이지들의 breakpoint가 모두 다른 상황이었습니다. breakpoint에 대한 합의없이 디자인이 나오고 작업을 하다가 디자인이 깨지면 breakpoint를 추가하다보니 개발 팀과 디자인 팀과의 커뮤니케이션 리소스가 커지면서 개발에 어려움을 겪게 되었습니다.
앞으로는 기준점을 명확하게 하여 커뮤니케이션 리소스를 줄이고 페이지 간에 스타일 통일성을 가져가고자 했습니다. 컨버팅을 진행하면서 기준점을 잡기 위해 고민했던 부분에 대해 공유해보려고 합니다.
모바일 우선 vs 웹 우선
페이지를 디자인할 때 모바일을 우선을 할 수도 있고, 웹 디자인을 우선시할 수도 있습니다.
-
모바일 우선
모바일을 우선 시한다면, 모바일 디자인을 기준으로 디바이스의 크기가 커질 때마다 스타일을 추가합니다. 보통 모바일 우선 디자인의 경우엔 min-width를 중단점으로 사용합니다. -
웹 우선
웹을 우선 시한다면, 웹 디자인을 기준으로 디바이스 크기가 작아질 때마다 스타일을 제거하는 방식을 사용합니다. 보통 웹 우선 디자인의 경우에는 max-width를 중단점으로 사용하게 됩니다.
웹뷰
어플리케이션을 서비스 하다보면 업데이트 하는 과정이 필연적으로 수반됩니다. 어플리케이션을 업데이트할 때는 스토어에 올려서 심사를 받는 과정이 필요합니다. 그러나 단기간 이벤트 페이지, 사용자의 반응을 보는 실험적인 기능 페이지 등의 경우에는 매번 스토어에 올려 심사를 받기보다는 이를 웹뷰로 구현하여 어플리케이션 내부에 삽입하는 방식을 사용하기도 합니다.
웹뷰의 특성 상 모바일 어플 내부에 링크를 삽입하여 브라우저 새 창으로 띄우거나, 어플 내부에 삽입하는 형태로 사용이 되기 때문에 모바일 유저들의 진입이 훨씬 높습니다. 따라서 웹뷰의 경우에는 모바일을 기준으로 min-width를 breakpoint로 잡아서 기준보다 화면이 커질 때마다 스타일을 변경하도록 스타일링을 진행했습니다.
장치 기반 중단점과 콘텐츠 기반 중단점
장치를 몇 개로 제한하고 중단점을 선택할 수도 있고, 콘텐츠마다 보이는 지점이 이상할 때 이를 break point로 지정하여 디자인을 변경할 수도 있습니다.
콘텐츠를 기반해서 중단점을 설정하는 경우, 초기에 발생했던 문제처럼 각 페이지마다 breakpoint가 다를 수 있고 개발자가 개발을 하면서 디자인이 깨지는 경우를 찾아 디자이너와 추가 합의를 해야 한다는 단점이 있습니다. 장치 기반 중단점의 경우엔 이미 디자인 시작 전부터 중단점을 합의했기 때문에 개발에 편의성이 올라간다는 장점이 있지만 한편으로는 디자인에 있어 한계를 설정하는 것이기 때문에 디자인의 측면에서 다양성이 줄어든다는 단점이 있습니다.
두 방식 모두 장단점이 있지만, 디자인의 다양성보다는 개발할 때의 커뮤니케이션 비용을 줄이는 것이 우선시되어야 한다고 생각했기 때문에 장치 기반 중단점 을 채택하기로 했습니다.
일반적인 중단점
- 모바일 장치 : 320px — 480px
- IPad 및 태블릿 : 481px — 768px
- 노트북과 같은 작은 화면 : 769px — 1024px
- 데스크탑과 같은 대형 화면 : 1025px — 1200px
- TV와 같은 초대형 화면 : 1201px 이상
다음 포스팅에서 추가적으로 설명해보도록 하겠습니다.
