아이폰5

애플 아이폰 5의 해상도는 640px * 1136px이다. 초미니 해상도가 디바이스에 깜찍함을 부여하긴 했지만, 모바일 웹 개발에 있어서는 마냥 깜찍하지만은 않다.

아이폰 5와 그에 상응하는 디바이스의 사파리 뷰포트는 320px이다. 아이폰 6의 뷰포트 사이즈는 375px, 아이폰 6 plus의 뷰포트 사이즈는 414px로 아이폰 5보다 각각 17%, 29% 크다.

이는 320px 기준으로 모바일 웹을 개발하면, 아이폰6에서는 17%, 아이폰 6 plus에서는 29% 많은 여백이 생기는 것을 뜻한다.

HTML & CSS

보통 뷰포트의 가로를 기준으로 CSS 스타일링을 한다. 스크롤이 세로 방향이라 요소를 가로에 맞추는 것이다.

가로와 세로 길이 각각에 대한 비율을 지정할 수는 있지만, 가로 길이를 비율로 지정한다고 해서 세로 길이가 가로 길이에 비례해 변하지는 않는다.

예를들어 2:1크기의 상자를 만들어야 한다면, 200px * 100px등 픽셀단위로 고정을 해야 한다. 가로 100%, 세로50%로 지정하면 절대 2:1 비율이 나오지 않는다.

Viewport Units

이런 문제를 해결하는 것이 Viewport Units다. 1vw는 Viewport Width의 1%이며 이 단위는 height에도 사용할 수 있다. 가로 100vw, 세로 50vw로 설정하면 화면에 꽉 찬 2:1 비율의 상자를 그릴 수 있는 것이다.

vieport size가 가변인 경우에도 언제나 꽉 차게 렌더링 할 수 있다.

그러나 vw를 사용할 수 없는 몇가지 경우가 있는데, 첫째로 IE11 미만 브라우저에서 사용할 수 없고, 둘째로 부모요소의 max-width가 정해진 경우다. 예를 들어, 앱의 최대 너비가 640px이고 이보다 클 경우 중앙정렬되어 보여진다고 할 때 자식요소의 단위가 vw일 경우 무조건 viewport size 비율로 렌더링된다.

이런 경우에는 media query로 분기처리 해야 한다.

320px viewport + HTML/CSS

375px에 맞춰 디자인했다.

320px에서는 못생기게 나온다.

한 줄에 2개씩 나오는 배너를 그려야 할 경우에, 아이폰6에 맞춰 디자인을 하고 구현을 하면, 375px에서는 완벽하게 보이던 배너가 320px에서는 아주 못생기게 나온다.

문제는 비용

가로 375px 정도로 디자인을 뽑으면 태블릿까지는 아니더라도 대부분의 모바일 디바이스는 커버 가능하다. 문제는 375px 미만 디바이스다.

이를 해결하기 위해서는 주요 디바이스 크기마다 break point를 걸어 완성도 있는 반응형으로 구현해야 한다.

현실적으로 힘들다. 소규모 팀일수록 힘들다. 디자이너에게도, 개발자에게도 고역이다. 일 할 사람이 많으면 상관없다. 그러나 혼자서 클라우드 인프라 설계, api 서버 개발, 프론트엔드 개발, 백오피스 개발, UI개발, 마크업을 처리하는 현 상황에서 불가능한 일이다.

적당히 타협해야 한다.

마치며

320px 디바이스가 아직까지 현역으로 뛰고있어서 힘들다.

하루빨리 320px 디바이스가 이 세상에서 자취를 감췄으면 좋겠다.