[12] 윈도우즈 폰 8용 앱 디자인
디자이너가 된 엔지니어 - 12
디자이너이자 크리에이티브 테크놀러지스트이며 저자인 박동윤(Yoon Park)은 현재 미국 시애틀 마이크로소프트 본사의 Mixed Reality Design & UX Research 팀에서 Principal UX Designer로서 홀로렌즈 및 혼합현실 서비스와 관련된 디자인을 담당하고 있다. 전자공학을 전공하고 반도체 설계 및 모바일 소프트웨어 연구원으로 일하다 그래픽 디자인이 너무 좋아 시각 디자인을 다시 공부하여 디자이너로서의 커리어를 새롭게 시작했다. 타이포그래피에 대한 관심을 바탕으로 2011년 Typography Insight앱을 출시했으며, 현실 공간에서 타입 레이아웃을 가능하게 하는 Type In Space라는 홀로렌즈용 앱을 만들기도 했다.
홈페이지 - http://dongyoonpark.com
링크드인 - https://www.linkedin.com/in/cre8ivepark/
전자공학을 전공하고 소프트웨어 엔지니어로 일하던 저자가 직장을 그만두고 시각디자인을 다시 공부하여 미국 마이크로소프트에서 10여 년간 UX 디자이너로 일해온 경험을 공유합니다
윈도우즈 8 앱들의 성공적인 출시에 이어 팀에서는 다음 프로젝트로 윈도우즈 폰 8(Windows Phone 8)을 주목하기 시작했다. 브라이언을 비롯한 리더십 팀은 윈도우즈 폰 8의 유저 베이스와 플랫폼의 향후 전망을 면밀히 살피며 비즈니스적으로 윈도우즈 폰 8에 우리의 앱들을 포팅하는 것이 올바른 결정일지를 고심하였다. 당시 우리 AppEx (Application Experiences) 팀이 속한 그룹 (OSG, Online Services Group)의 리더인 치 루 (Qi Lu)의 서포트와 함께 윈도우즈 폰 8 프로젝트를 시작하게 되었다.
윈도우즈 폰 8과 매트로 디자인 언어 (Metro Design Language)
마이크로소프트의 휴대용 뮤직 플레이어 기기인 준(Zune)은 그다지 성공적이지 못했지만, 매트로 디자인이라는 마이크로소프트의 새로운 디자인 언어의 근간을 확립한 제품이었다. 그리드와 타이포그래피 기반의, 장식적인 크롬을 최대한 배제하고 콘텐츠가 주가 되도록 하는 매트로 디자인의 철학은 윈도우즈 폰 7.5 (코드명 Mango)를 거쳐 윈도우즈 폰 8에 이르러 한층 성숙한 모습으로 다듬어졌다.
Microsoft Zune의 소프트웨어 디자인 - 지금은 흔해 보이지만 당시로서는 파격적인 디자인이었다
매트로 이전 시절의 디자인 - 불필요한 장식적인 요소들로 시각적 노이즈가 많다Metro Design Principle 중의 하나가 'Content not Chrome' 였는데, 즉 불필요한 장식적인 크롬 요소를 최대한 배제하고 사용자가 콘텐츠에 집중할 수 있도록 하자는 의미로, 위의 전통적인 윈도즈의 GUI 디자인과 아래의 매트로 디자인을 비교해 보면 이해할 수 있다.
매트로 디자인 기반의 윈도우즈 폰 UI
윈도우즈 폰 8의 UX 패턴 - 페이지 구조, 내비게이션 및 메뉴의 구성 등은 윈도우즈 8과 근본적으로 동일했기에, 디자인 작업을 쉽게 시작할 수 있었다. 윈도우즈 8과 마찬가지로 파노라마 스타일의 랜딩 페이지에서 앱의 전반적인 부분들을 가로로 스와이핑 하며 살펴볼 수 있고, 각 피봇에서 세로 스크롤이 가능하거나 깊게 드릴 다운할 수 있는 방식이었다.
마이크로소프트에서 일하기 전 이미 개인적으로 iOS 앱들을 많이 디자인하고 개발했던 나에게는 정말 즐거운 프로젝트가 아닐 수 없었다. 윈도우즈 폰 프로젝트가 시작될 것 같다는 소식을 듣자마자 나는 윈도우즈 폰에 대한 디자인 템플릿들을 찾아 내가 담당했던 스포츠와 파이낸스 앱이 윈도우즈 폰에서 어떤 느낌으로 보일지에 대한 작업을 했고, 팀에 전체 메일로 공유를 했다. 프로그램 매니저들과 엔지니어들은 프로젝트의 기획을 준비하는 초기 단계였지만, 이러한 시각적인 디자인 목업을 보고 완성된 앱의 모습을 보다 쉽게 상상할 수 있었고, 보다 더 에너지 넘치게 추진을 하기 시작했다. 이렇게 디자인 작업을 통해서 팀에 비전을 보여주고 멤버들에게 동기부여를 해 줄 수 있다는 점에서 많은 보람을 느낄 수 있는 순간이었다.
Common UX로의 디자인 담당 영역의 변화 및 성장
윈도우즈 폰 프로젝트를 시작하면서 매니저인 디에고와의 1:1 대화에서 나의 업무에 대한 변화에 대한 이야기를 듣게 되었는데, 성공적인 윈도우즈 8 프로젝트를 경험했으니, 이제 스포츠와 파이낸스 앱의 세부 적인 디자인 작업보다 서서히 좀 더 Horizontal 한 공통적인 UX (Common UX)를 담당하면 좋겠다는 것이었다. 이러한 제안에 따라, 인도 디자인 팀에서 스포츠와 파이낸스 앱을 도와주던 야시와 바이밥이 좀 더 각각의 앱 디자인 작업에서 더 많은 부분을 담당하도록 하고, 나는 보다 공통적인 UX 요소들 - 전체적인 인포메이션 아키텍쳐(IA, Information Architecture), 내비게이션 구조 (Navigation Structure), 공통 UI 컨트롤(Common UI Controls) 등 - 을 담당하게 되었다. 나의 역할은 이러한 공통적인 UX 요소를 기반으로, 우리 팀에서 작업하는 여러 가지 앱들 - 뉴스, 스포츠, 파이낸스, 날씨, 음식, 여행 - 이 일관적인 사용자 경험을 제공할 수 있도록 하는 것이었다.
이러한 Common UX 관련 작업은 이전까지는 디에고가 담당을 해왔으나, 이 부분을 나한테 넘겨주고, 디에고는 보다 큰 앱 전반의 디자인 디렉션을 담당하는 부분으로의 업무 전환을 시작했다. 이런 식으로 프로젝트를 하나하나 진행할 때마다, 나와 매니저, 그리고 팀 멤버들이 서서히 성장해 가는 모습을 볼 수 있었는데, 특히 매니징과 디자인 실무 작업 모두 탁월한 감각을 보여주는 디에고의 성장을 곁에서 지켜보는 것 역시 큰 즐거움이었다.
내비게이션 구조 및 인포메이션 아키텍처 작업
랜딩페이지 파노라마 구조 디자인
여러 앱에서 공통적으로 사용되는 검색 기능 플로우 및 컨트롤 디자인패밀리룩&필
윈도우즈 폰 프로젝트의 Common UX를 담당하면서 또 한 가지 중요한 포커스는 윈도우즈 8 앱들과의 일관된 패밀리룩을 구현하는 것이었다. 일관성 있는 비주얼 디자인을 통해 연결된 브랜딩 및 사용자 경험을 제공하는 것이 목표였는데, 예를 들면 스포츠 앱의 경우는 배경에 사용된 필드의 이미지나 스포츠 리그별 액센트 컬러, 데이터 타일의 레이아웃 등의 디자인 요소에서 통일감 있는 디자인을 구현하고자 노력했다.
스포츠 앱의 디자인 일관성의 예
XAML 프런트 앤드
이전 윈도우즈 8 앱 프로젝트의 후반 구현 작업에서 이미 매니저와 나는 직접 프런트 앤드 디자인 작업에 손을 대면서 최종 디자인 빌드의 퀄리티를 높이는 경험을 했기에, 자연스럽게 윈도우즈 폰 8의 앱은 어떤 방식으로 프런트 앤드가 구현되는지 리서치를 했다. 윈도우즈 폰 8 은 마이크로소프트의 마크업 언어인 XAML이라는 언어로 프런트 앤드를 구현하고 있었는데, 블랜더라는 레이아웃 편집 툴이 있어서, 보다 쉽게 디자인의 프런트 앤드 작업을 할 수 있었다. 윈도우즈 8 프로젝트에서 프런트 앤드 작업에 대한 자신감을 갖게 된 디에고와 나는, 이번 윈도우즈 폰 8 프로젝트에서는 초기부터 엔지니어링 팀으로부터 코드 액세스 권한을 얻고 프런트 앤드가 어떻게 구현이 되는지 탐구하기 시작했다. 그리고, 앱의 초기 작업이 이루어지고 어느 정도의 기능들이 개발자들에 의해 구현되기 시작할 때 직접 뛰어들어 우리가 디자인한 시안에 맞게 XAML을 업데이트하고 다듬어 pixel-perfect 한 디자인을 달성할 수 있었다. 이렇게 다듬어진 화면들로 실제 동작하는 앱을 본 팀 멤버들은 더 사기가 올라 열정적으로 프로젝트를 진행하였다.
XAML을 이용한 프런트 앤드 작업 - 최종 빌드 결과물의 디자인을 직접 픽셀-퍼펙트하게 다듬는 과정은 항상 즐거운 경험이었다윈도우즈 폰 8 프로젝트에는 국내에는 출시되지 않은 삼성의 Ativ S라는 모델을 주로 사용했는데, 잘 다듬어진 기구 디자인과 부드러운 속도 및 완성도로 팀원들이 만족해했었고, 삼성 출신인 나로서는 뿌듯함을 느끼지 않을 수 없었다.
당시 앱 개발에 사용했던 삼성의 Ativ S 디자인팀 멤버의 증가
윈도우즈 폰 프로젝트를 하면서, 인도 마이크로소프트의 디자인 팀에도 몇몇 디자이너를 추가로 채용했고, 시애틀에도 디자인 팀 멤버가 늘어나게 되었다. 인도 디자인팀에는 늘어난 팀 멤버의 효율적 운용을 위해 새로운 디자인 리드인 산데시가 합류하였다. 산데시를 통해서 보다 자율적으로 인도 디자인팀의 디자인 작업 관리 및 추진이 가능해졌고, 인도 디자인팀도 시애틀에 주기적으로 방문하여 직접적인 협업을 진행하기도 하였다.
디자이너가 된 엔지니어 시리즈
