윈도8 '메트로 앱 디자이너'를 위한 조언

아이패드와 안드로이드 태블릿 사용자들은 그 사용자인터페이스(UI)에 대해 기존 스마트폰에서 화면만 키운 것 아니냐는 반응을 보이곤 한다. 그런데 현업의 애플리케이션(이하 '앱') 개발 환경에서는 그 화면 크기 하나가 결정적 차이를 만들어낸다. 하반기 출시를 예고한 윈도8 태블릿은 어떨까?

일명 '메트로UI'는 사뭇 다른 겉모습뿐아니라 터치스크린, 마우스, 키보드 혼용을 전제하는 환경이다. 메트로스타일 앱을 만들 때 고려할 변수는 화면 크기뿐이 아니라 낯선 UI 디자인과 사용자 입력장치 포함한다는 얘기다. 다시 말해 마이크로소프트(MS)가 윈도8 전면에 내세운 메트로UI는 앱개발 관련 업계 종사자들에게 전혀 다른 디자인 철학을 요구한다.

이에 따라 올하반기 등장할 윈도8 태블릿이 인기를 끌 경우 앱디자인 전문가들에게 새로운 화두로 떠오를 전망이다. 국내서 단말 출시에 대비해 윈도8 앱개발을 진행중인 개발자와 디자이너들을 위한 현업 컨설턴트의 조언을 정리해 봤다.

25일 디자인 컨설팅업체 디누오의 이충도 대표는 국내서 경험한 윈도8 메트로UI 앱 컨설팅 프로젝트를 바탕으로 메트로UI 디자인 환경의 특징과 장단점을 주의깊게 언급했다.

우선 기존 태블릿과 다른 특징 하나는 단말기를 기본적으로 어느 방향으로 놓고 쓰도록 권장되느냐다. 이 대표에 따르면 윈도8 태블릿은 기본적으로 단말기를 수평으로 길게 놓고 쓰도록 고안됐다. 가로화면 UI가 중심이란 얘기다. 이는 노트북이나 PC와의 연속성뿐아니라 메트로UI 자체의 특징때문인 것으로 평가된다.

한가지 힌트는 초기화면으로 돌아가는 '홈(home)' 단추다. 화면을 수직방향으로 길게 놓고 쓰는 휴대폰일 경우 모두 '아래'에 놓인다. 기존 태블릿에 장착된 홈 단추 위치도 같다. 게임과 멀티미디어 스트리밍 앱을 제외하면 아이패드와 안드로이드 태블릿도 위아래가 긴 방향으로 놓고 쓰는 경우가 많다. 휴대폰처럼 홈 단추가 '아래'에 놓이는 경우가 대부분이란 얘기다.

여기서 가로화면UI가 과연 사용자 입장에서 '편한가'에 대한 의문이 불거진다. 수평UI는 '두 손으로' 단말기 측면을 잡고 쓰는 게 자연스럽다는 지적이다. 한 손만으로 잡으면 무게중심이 쏠려 들기 어려울 수 있다. 이는 상황에 따라 한손만 써서 잡아도 되는 수직방향 UI 중심의 태블릿에 비해 불리한 점이 아니겠느냔 지적이다. 이는 물론 반드시 손을 써서 단말기를 지탱할 때 얘기일 뿐, 팔위에 얹는 등 다른 조건에 따라 오히려 기존보다 나을 수도 있어 보인다.

윈도8 단말기가 기본적으로 수평방향이란 단서는 메트로UI의 화면 움직임(스크롤)에서도 나온다. 스크롤은 표시할 콘텐츠 분량이 한 화면을 다 채우고도 남을 때 반드시 필요한 요소다. 메트로UI는 수준이 동등한 메뉴를 나열하거나 선택지를 제시할 때 기본 스크롤 방향을 왼쪽에서 오른쪽 방향으로 펼쳐지는 형식을 제안한다. MS는 UI가이드라인에서 가로스크롤을 권장하고 있다. 개발자와 디자이너들에게 새로운 설계상의 이점을 마련해준 반면 전에 없던 고민을 야기한 지점이기도 하다.

■콘텐츠 배열 제약 완화와 동적인 속도감 장점

윈도8 메트로UI가 시각적 측면에서 주는 디자인상의 이점은 명료하다. 콘텐츠 길이에 대한 제약이 기존보다 줄어 콘텐츠 배치 방식이 달라진다. 한 화면에 요소를 격자형태로 늘어뜨리는 '그리드' 설계에 대한 고민을 덜 수 있다는 지적이다. 또 내장된 UI 자체가 단순하고 큼직한 타이포그래피 중심의 시각화를 지향해 동적인 이미지, 양방향성이란 느낌을 담아내기 쉽다는 설명이다.

이 대표는 기존과 전혀 다른 콘텐츠 배치 방식을 적용하게 되는데 공간적인 제한의 부담은 줄어들 것으로 예상된다며 애니메이션을 적용하는 요령은 아이패드와 비슷한데 '시맨틱 줌' 기능이 특이해 콘텐츠 분류가 아닌 해당 내용 자체를 위해 쓰면 좋은 UX를 구현할 수 있을 듯하다고 언급했다. 이어 그리고 일반 사용자들이 기존 윈도를 쓰면서 15년간 축적된 사용자경험(UX) 때문에 메트로UI 앱을 받아들이긴 쉽지 않겠다 싶었는데 사실 횡방향 움직임이란 UX는 '책읽기'라는 경험 덕분에 낯설지 않게 적응할 수 있어 보인다고 말했다.

엄밀히 말해 메트로UI가 책읽기 환경에서 뭔가를 직접 차용한 인터페이스라 단정하긴 어렵다. 실제 메트로UI 설계에 영감을 준 대상은 공항에서 사람들이 알아보기 쉽도록 단순한 픽토그램과 큼직한 타이포그래피 중심으로 만들어진 표지의 이미지라고 한다.

다만 단말기를 '양손으로 좌우 측면을 잡고' 쓰면서 콘텐츠를 넘기거나 되돌리기 위해 엄지손가락으로 화면 테두리를 끌어당기는 방식을 책에 대한 은유로 받아들일 수는 있다. 여기에 정적인 아날로그 책 읽기에 비하면 메트로UI 기반의 콘텐츠 경험이 주는 속도감은 훨씬 크다는 평가다. 또 서체를 활용한 디자인도 텍스트가 중심이 되는 책이란 매체의 경험과 연관성이 높아 보인다.

이 대표는 다만 앱에 타이포그래피를 구현할 때 기본 로마자 글꼴을 쓰면 시각적으로 미려한 반면 내장된 한글 서체는 아쉬운 점이 많아 고민이 컸다면서 실제 앱 디자인 과정에선 고민을 줄이기 위해 로마자 글꼴을 많이 썼지만 내장 한글 글꼴도 이 정도면 양호하다는 생각이 든다고 평했다.

■태블릿-데스크톱 UI 혼선에 대한 우려

사용자 입장에선 동적인 느낌과 타이포그래피 중심의 세련된 디자인이 호기심을 유발하면서 쉽게 적응할 수 있도록 도와주는 게 장점으로 요약된다. 다만 개발자와 디자이너들은 태블릿의 터치스크린을 우선 지원할 것인지 또는 데스크톱의 마우스와 키보드 환경을 함께 쓰도록 할 것인지에 따라 디자인 과정상 고민을 더할 것으로 예상된다.

이 대표는 세부적으로 선택해 들어가는 메뉴를 품은 어떤 화면이 수평방향으로 흐르게 만들었을 때 화면이 이동하면 기본상태인 화면 왼쪽 메뉴가 오른쪽으로 갔을 때 안 보이게 된다며 터치스크린 환경으로는 상관이 없지만 마우스 화살표로 움직이는 환경에서는 문제가 될 부분이라고 말했다. 이어 터치스크린은 손으로 화면을 잡아 움직이면서 빠르게 이동할 수 있지만 화면상에 메뉴가 없는 환경에서 마우스 조작으로는 스크롤막대에 의존해야 하기 때문에 UX 측면에서 대체 메뉴를 어디에 놔야 하는지가 최대 고민이라고 덧붙였다.

메트로UI가 태블릿과 터치스크린에 대응해 만들어진 것은 맞지만 MS는 이를 PC에서 마우스와 키보드만으로도 쓸 수 있게 만들었다. 개발자들은 해당 하드웨어가 터치스크린이 가능한지, 마우스와 키보드도 쓸 수 있는지, 터치스크린이 안 되는지도 디자인에 반영해야 한다는 점에 당황스러워할 수도 있다. 어쩌면 다른 모바일 앱 장터에서 운영체제(OS) 버전과 지원 단말기 종류, 하드웨어 사양 등으로 구분한 것처럼 메트로UI 앱은 사용자 인터페이스 환경에 대한 조건을 제시해야 할지도 모른다.

이 대표는 메트로앱을 사고팔수 있게 만든 '윈도스토어'는 데스크톱이든 태블릿이든 접근할 수 있게 열려 있다며 특정 인터페이스에만 맞춰 개발된 앱들이 등장하고 그런 수가 많아진다면 새로운 UI를 기존 데스크톱과 새로운 태블릿 영역을 아우르려던 MS의 시도가 실패한 것으로 비칠 수 있다고 말했다.

■기존 데스크톱 전용 앱도 메트로스타일로 만들어라

이같은 난점이 있지만 접근방식에 따라 윈도8 메트로UI 자체 특성으로 이를 극복하는 방식도 고려할 수 있다는 게 이 대표 의견이다. 한 화면에 복잡한 메뉴를 많이 집어넣는 앱을 만들기보다는 특정 서비스 단위로 분리된 앱을 만들고 이를 메트로UI상에서 배치할 수 있게 유도하는 방식이 제안된다.

예를 들어 아이패드용 모바일뱅킹 서비스를 쓰려면 한 은행이 만든 앱을 켜고 그 안에서 잔고 확인, 계좌 이체 등을 처리해야 한다. 이를 메트로UI 환경에 가져오겠다고 앱 자체를 포팅하면 UI 설계상의 혼란을 초래하기 쉽다. 오히려 잔고확인을 위한 단일 페이지 앱과 계좌이체를 위한 단일페이지 앱을 분리된 모듈로 설계하는 게 유리할 수도 있다는 얘기다.