[05] 윈도우즈 8 용 앱 디자인의 시작
디자이너가 된 엔지니어 - 05
디자이너이자 크리에이티브 테크놀러지스트이며 저자인 박동윤(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 용 스포츠와 금융 앱
팀 멤버들과 몇몇 미팅을 하면서 빙 검색엔진의 여러 디자인 요소들에 대해 배워가던 중 어느 날 그룹의 부사장인 브라이언 맥 (인터뷰 과정에서 잠깐 만났던)이 미팅을 소집했다. 마이크로소프트는 한창 윈도우즈 7의 차세대 버전을 준비 중이 었는데, 마침 컴퓨텍스 2011 행사에서 개발 중인 윈도우즈 8의 짤막한 데모를 공개했다. 기존의 윈도우즈와는 완전 다른 타이포그래피와 그리드, 부드러운 애니메이션, 그리고 공간을 활용한 모던한 디자인에 나는 흠뻑 매료되었다.
역시나 브라이언의 미팅은 윈도우즈 8에 관한 것이었는데, 윈도우즈에 기본 탑재될 앱 들에 대한 이야기였다. 이전 인터뷰에서도 느껴지긴 했었지만, 브라이언은 아이패드나 여러 기기의 다양한 모바일 앱에 대해서 꿰차고 있었다. 빙의 콘텐츠를 활용한 차세대 윈도우즈에 탑재될 앱 들에 대한 아이디어 및 시안을 작업해서 윈도우즈 팀에 제안을 하고자 하는 내용이었다.
당시 처음 공개된 윈도우즈 8의 화면미팅이 끝난 다음날 디에고가 수, 토니, 그리고 나를 팀의 한편에 있는 화이트보드 앞에 불러 모았다. 어제 브라이언의 미팅에서 언급된 대표적인 기본 앱인 뉴스, 날씨, 스포츠, 파이낸스(금융), 뮤직 이 네 가지를 우리가 나누어 디자인 시안 작업을 하기로 했다는 것이다. 우선 아이패드 앱 작업으로 이미 경험이 많은 디에고가 공통적인 내비게이션 등 근간이 되는 프레임웍 UX를 담당하기로 했다. 나는 스포츠와 파이낸스를 담당하게 되었고 수는 날씨와 뉴스 앱을, 토니는 뮤직 앱을 담당하게 되었다. 일단 가장 시급한 것은 윈도우즈 8의 앱의 구조를 파악하는 일이었는데, 아직 개발 초기단계라 제대로 된 관련 문서를 윈도우즈 팀으로부터 받지 못해, 컴퓨텍스의 데모에서 시연된 유튜브 영상을 통해서 대략적인 구조를 파악했다. 아마도 아직 공식적으로 우리 빙 그룹에서 이러한 앱들을 만든다는 것이 협의가 된 상황이 아니기에 그런 것 같았다.
빙 디자인 팀의 작업은 어도비의 파이어웍스 (Fireworks)를 이용했는데, 포토샵과 같이 비트맵 이미지 작업도 가능하면서 일러스트레이터와 같이 벡터 기반의 그래픽 작업도 가능했기에, 다양한 웹이나 모바일 등의 GUI 및 콘텐츠 레이아웃 및 디자인 작업에 유용했다. 우리는 미팅을 통해서 어느 정도 앱의 공통적인 레이아웃에 대한 구조를 결정했고 디에고가 이를 파이어웍스를 이용해 템플릿으로 만들어 공유를 하기로 했다. 이를 기반으로 각자 맡게 된 앱의 성격에 따라 디자인을 하기로 했는데, 나는 이를 위해 며칠간 스포츠와 금융/증권 앱들을 리서치를 했다.
인포메이션 아키텍처 및 내비게이션
새로운 윈도우즈 8의 내비게이션 구조에 맞게 공통적인 프레임웍을 짜는 작업은 디에고가 담당을 하기로 했는데, 하루 만에 디에고로부터 팀원들에게 메일이 왔다. 파워포인트 덱이 하나 첨부되어 있었는데, 열어보고는 감탄을 금치 못했다. 그 짧은 시간 안에 이렇게 전체적인 IA와 내비게이션의 구조에 대해 깔끔하고 상세하게 정리하고 디자인 시스템을 시각적으로 커뮤니케이션할 수 있다는 점에 대해 놀랐고, 팀에서 매니저들과 다른 멤버들에게 좋은 평가를 받고 있는 이유를 쉽게 알 수 있었다. 디에고가 공유한 이 덱은 아직까지도 강한 첫인상으로 남아있다.
디에고가 작업한 인포메이션 아키텍처브라이언과의 첫 디자인 리뷰
메트로 디자인에서 가장 마음에 들었던 부분은 과감한 이미지의 사용과 장식적인 요소를 배제한 깨끗한 레이아웃이었는데, 그동안 디자이너가 되면 제일 하고 싶었던 에디토리얼 디자인과 유사한 면이 있는 작업이었다. 특히 스포츠의 경우 시각적인 이미지와 다양한 수치 데이터를 다루어야 하기에 디자이너로서는 더할 나위 없이 즐거운 요리 재료가 아닐 수 없었다. 윈도우즈 팀에서 공유해준 새로운 타이포그래피 가이드라인을 따라 다양한 스포츠 데이터들을 이미지 콘텐츠와 조화롭게 배치를 해 나가며 작업을 했다.
타이포그래피와 그리드 중심의 과감한 장식적인 요소의 절제 이외에 또 한 가지의 요소가 순수한 컬러 과감한 활용이었다. 우리가 준비하는 앱들에 대해서도 테마 컬러를 정했는데, 내가 담당한 스포츠와 금융 앱은 블루와 그린으로 방향을 잡았다. 이때 알게 된 재미있는 사실이 바로 미국 주식시장에서는 초록색은 상승을, 붉은색은 하락을 의미한다. 우리나라와는 정 반대의 의미를 가지고 있는 것이다.
입사 후 주어진 제대로 된 첫 프로젝트의 과제인 만큼 퇴근 시간과 관계없이 즐겁게 작업을 했다. 스포츠 앱에서는 일단 내가 가장 잘 알고 좋아하는 야구를 중심으로 목업 디자인을 했는데, 랜딩 페이지, 팀 페이지, 플레이어 페이지 등을 만들었고, 금융 앱은 랜딩 페이지와 특정 주식의 상세 페이지를 디자인했다.
약 일주일이 안되어 브라이언과 첫 리뷰를 가지게 되었는데, 일단 완성도보다는 해당 주제의 앱들이 윈도우즈 8의 메트로 디자인 언어를 기반으로 하는 경우 어떻게 보일지에 대한 감을 함께 보자는 취지의 미팅이었다. 우리가 준비한 날씨, 스포츠, 금융, 뮤직 등 몇 가지 앱의 초기 시안 화면들을 이미지로 저장하고, 하나의 파워포인트 파일에 모아 프레젠테이션을 했다. 스포츠 앱의 시안을 리뷰 하던 중 브라이언이 말했다.
“I kind of like the information architecture going around here.”
“여기 정보의 구조가 마음에 드네.”
나의 첫 디자인 시안 작업 — 스포츠 앱첫 출근날부터 과연 미국 회사에서 제대로 일을 해내고 살아남을 수 있을까 하는 걱정이 컸고 영어에 대한 스트레스가 계속 내 마음을 무겁게 짓누르고 있었지만, 이런 마음이 한결 가벼워지는 순간이었다. 이후의 금융 앱을 비롯하여 우리가 준비한 시안에 대한 첫 프레젠테이션은 모두 좋은 반응과 긍정적인 피드백으로 마무리가 되었다. 입사 후 첫 큰 디자인 리뷰 미팅에서 이런 좋은 반응을 얻게 된 것에 대해 정말 감사하고 스스로가 대견하게 느껴졌다.
