애플과 반응형 디자인

by Anthony Colangelo

이 글은 A List Part에 기고된 "Apple and Responsive Design"을 번역한 것입니다.


애플은 반응형 디자인과는 영 거리가 먼 회사였다. 자사 홈페이지 조차도 아직 데스크탑 버전만 지원한다.

물론 화면의 크기가 달라질 때 마다 UI를 “한땀 한땀” 새롭게 구성하는 방식이 애플답기는 하다. 아이폰을 처음 발표했을 때에도 반쪽짜리 기능을 제공하는 모바일 웹이 아닌 풀(full) 웹을 브라우징을 ‘핀치 줌’을 통해 가능하다라는 장점을 부각시켜왔다. 그래서 마치 애플이 일부러 할 수 있는데도 안하고 있는 것일까 하는 착각을 불러 일으키기도 한다.

만야 아이폰이 3.5인치의 크기로 계속 머물러 있었다면 애플은 이러한 고집을 끝까지 지켜나갔을 수도 있었을 것이다. 하지만 몇 년 사이에 10인치 아이패드, 4인치 아이폰, 7인치 아이패드 미니가 출시되었고, 올해 가을에는 화면이 더 큰 아이폰이 출시될 것이라고 한다.

애플과 iOS 개발자들이 새로운 기기 화면크기에 맞는 앱을 개발하기 위해서 취해온 접근 방식은 지난 10년간 웹개발자들이 취해온 방식과 많은 부분이 닮아있다. '적응형(adaptive)' 먼저, 그 다음에 '반응형(responsive)'으로 개발하는 것이다. (Responsive vs. Adaptive Design 참조)

아이패드가 처음 도입되었을 때 개발자들은 아이폰과 아이패드를 위해 각각의 페이지를 만들었다. 웹으로 치면 모바일과 PC 버전의 두 개의 페이지를 별도로 만드는 것과 같다. 레이아웃, 스타일, 인터랙션 방법 등을 기기의 종류 수 만큼 제작하였고, 이런 방식을 적응형이라고 한다. 당시에는 지원해야 할 기기의 종류가 많지 않았기 때문에 이 방법은 먹혀들었다.

iOS 6와 함께 세로로 더 길어진 아이폰 5가 출시되었다. 애플은 오토 레이아웃(Auto Layout)이라 불리는 규칙기반의 레이아웃 엔진을 도입하였다. 별도의 페이지를 만들어야 했던 아이패드와는 달리 오토 레이아웃을 제대로 적용하기만 하면 하나의 앱으로 3.5인치와 4인치 아이폰에 각각 최적화 될 수 있도록 화면 구성을 할 수 있었다. 오토 레이아웃은 반응형 디자인에 접근하기 위해 처음으로 제대로 접근한 시도라고 할 수 있다. 웹과 마찬가지로 동일한 코드(컨텐츠) 기반에 다양한 레이아웃 규칙을 적용할 수 있었기 때문이다.

지난 주에 애플은 iOS 8과 함께 어댑티브 UI(Adaptive UI)라고 불리는 개념을 발표하였다. 어댑티브 UI의 주요 기능은, 레이아웃 규칙을 사이즈 클래스(Size Classes) 기반으로 정할 수 있게 해준다. 쉽게 말하면, 화면의 크기를 임의로 '경계점(breakpoint)'에 의해서 분류하고 (가령 아이폰의 가로 크기는 '작은' 크기, 아이패드의 가로 크기는 '일반' 크기) 각각에 해당하는 레이아웃 규칙을 따로 정의할 수 있게 하는 것이다. 이 경계점은 애플에 의해서 정의되었다.

이제 개발자들은 하나의 코드(컨텐츠)에 이러한 경계점(breakpoint)에 따라 다양한 레이아웃 규칙을 정하기만 하면, 모든 크기의 기기들을 지원할 수 있게 되었다. 지금은 컴팩트(Compact)와 레귤러(Regular), 총 2개의 사이즈 클래스밖에 존재하지 않지만 나중에 얼마든지 더 추가될 수 있을 것이다. 개발자에게 이 경계점를 직접 정의하도록 할 수도 있을 것이다.

용어 자체에 adaptive라는 단어가 포함되어 있기 때문에, 또한 경계점이 이미 정해져 있기 때문에 적응형 방식이 아닌가 싶겠지만, 내장 iOS 앱들에 우선 적용된 것을 보면 반응형 디자인으로 가고 있음을 알 수 있다. 향후 애플이 정적(static) 디자인으로부터 적응형, 반응형으로 발전을 이루어가는 과정을 지켜보는 것은 흥미로울 것이다. 또한 유저들이 이러한 반응형 앱 디자인에 익숙해짐에 따라 써드파티 개발자들이 이를 충분히 잘 활용한 앱들을 만들어 내는 것을 지켜보는 것은 더더욱 흥미로울 것이다.

애플이 먼 길을 돌아서 이제야 반응형 디자인에 신경을 쓰게 되었다. 이와 관련된 WWDC 2014 세션도 있다. 당장 내년에 애플이 제대로 된 반응형으로 홈페이지를 리뉴얼 한다고 해도 이제는 그리 놀랄 일은 아닐 것 같다.

comments powered by Disqus