[07] 본격적인 윈도우즈 8 앱 디자인 작업
디자이너가 된 엔지니어 - 07
디자이너이자 크리에이티브 테크놀러지스트이며 저자인 박동윤(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 용 앱을 만들기 위한 정식 팀이 꾸려진 후, 윈도우즈 디자인 팀과 미팅을 하며 알게 된 점이 있는데, 윈도우즈 8 용 앱은 모두 가로 스크롤을 기반으로 한다는 점이었다. 우리가 작업한 디자인 시안은 모두 기존 앱이나 웹에서 흔히 사용하는 수직 스크롤을 기반으로 디자인한 것이었다. 가로 스크롤은 윈도우즈 폰 7부터 사용된 개념인데, 터치 스크린을 기반으로 좌우로 쉽게 스와이프 (쓸어 넘기기) 제스처를 통해 주제 카테고리들을 쉽게 이동하는 개념이었다.
윈도우즈 폰 7의 파노라마 형태 구조이러한 가이드라인을 기반으로 우리는 날씨, 스포츠, 금융, 뮤직 등의 앱들을 가로 스크롤을 기반으로 새롭게 작업하기 시작했다. 기존의 시안에 사용된 콘텐츠를 가로로 레이아웃 하기 시작하니 왠지 모르게 산만하게 보이기 시작했는데, 새로운 방식인 가로 스크롤에 맞게 디자인을 하는 것이 생각보다 쉽지 않았다.
Hero image: 매거진에서 영감을 얻다
스포츠와 금융 앱의 디자인을 담당하게 된 후로 퇴근 후와 주말 시간에 동네에 있는 Barnes & Noble 서점에 들러 다양한 관련 매거진 들을 살펴보았다. 일반적인 서적과는 다르게 매거진이 갖는 독특한 매력이 무엇인가에 대해 생각해보니 전체 페이지를 사진으로 과감하게 채우는 방식과 큼지막한 헤드라인 텍스트의 오버레이 레이아웃 등을 통해 정보 전달 목적보다 시각적인 임팩트와 감성적인 자극을 극대화한다는 점이었다. 이러한 매거진들은 우리가 가로로 넘기며 훑어보며 이미지를 소비하고 흥미를 끄는 주제가 있으면 헤드라인 밑의 좀 더 자세한 텍스트들을 살펴보는 방식으로 윈도우즈 8의 앱이 추구하는 방식과 닮았다고 볼 수 있었다.
이런 식의 강렬한 시각 이미지와 타이포그래피를 각 앱의 시작화면에 가져오면 어떨까 하는 생각에 디자인 작업을 해 보았다. 스포츠와 금융 앱에 그날의 하이라이트에 해당하는 헤드라인 기사와 관련된 고해상도 이미지를 구해 첫 페이지에 배치하고 강렬한 타이포그래피 작업을 해 보았는데, 결과는 상당히 만족스러웠다. 기존 앱들이 다양한 크롬(테두리 및 UI 요소 등 콘텐츠를 둘러싼 영역들)에 둘러싸여 콘텐츠 자체가 뒤로 물러나 있던 느낌이라면, 이 디자인에서는 콘텐츠가 전면에 드러나고 매거진을 보는 듯한 강한 몰입감과 시각적인 인상을 주었다. 메트로 디자인 원칙들 중 Content is King, Content over Chrome이라는 요소와 딱 들어맞는 방향이었다.
이때 엔지니어로서의 내 경험이 걱정을 만들기 시작했다. 이러한 이미지들은 앱을 열 때마다 새로운 컨텐트로 프레쉬하게 업데이트가 되어야 되는데, 과연 이런 이미지 서버의 큐레이션이나 업데이트, 에디토리얼 작업을 팀에서 지원을 받을 수 있을지 기술적으로나 인력적인 측면으로나 걱정이 되었다. 그렇다고 시도도 해보지 않고 지레 겁먹고 멋진 디자인을 포기할 수는 없지 않은가.
Hero image를 이용한 몰입감 있는 랜딩페이지 디자인 시안 - 스포츠 앱나는 이 디자인 시안을 다음 디자인 리뷰에서 팀원들에게 보여주기로 결심했다. 그전에 한 가지 더 준비하고 싶은 것이 있었는데, 바로 프로토타입이었다. 파이워웍스에서 작업한 이미지를 파워포인트 등의 화면으로 아무리 멋지게 보여주어도 실제 기기에서 보이는 화면을 터치하고 만져보고 스크롤해보는 경험만큼 임팩트가 있지 않을 것이라는 생각에서였다. 개인적으로 마이크로소프트에 입사하기 전에 아이폰과 아이패드용 앱을 많이 개발해왔고 익숙하기에 아이패드를 이용해 프로토타입을 만들기로 했다. 당시 팀에는 윈도우즈 블루 (윈도우즈 8의 프로젝트 코드명)를 설치한 터치스크린 기기가 아직 준비되지 않았기에 터치 스크롤을 경험해 볼 수 있는 유일한 방법이기도 했다.
Hero image를 이용한 몰입감 있는 랜딩페이지 디자인 시안 - 파이낸스 앱익숙한 오브젝티브 C 프로그래밍을 통해 아주 간단한 프로토타입을 금방 만들었는데, 바로 iOS에서 터치 스크롤을 지원하는 UIScrollView를 통해 파이어웍스에서 작업한 가로로 긴 시안 이미지를 가로 스크롤이 가능하게 만든 것이다. 단순하게 디자인 시안을 좌우로 스크롤이 가능한 프로토타입이었지만, 나는 큰 희열을 느꼈다. PC에서 작업하던 화면과는 다르게 역시나 직접 만지고 터치하고 움직일 수 있다는 게 크게 다른 느낌을 주었다. 스포츠와 금융 앱의 몇 가지 페이지(가로로 길어서 우리는 파노라마라고 부르기 시작했다) 이미지를 이용해서 몇 가지 프로토타입을 준비했다.
며칠 후 디자인팀 멤버들이 모여서 가로로 작업한 앱들의 시안 리뷰를 했는데, 나는 프로젝터에 화면을 띄워 보여주는 대신, 준비한 아이패드를 회의실 테이블에 올려놓고 프로토타입을 보여주기 시작했다. 모두들 실제 터치하고 스크롤할 수 있다는 점에 흥분했고, 특히 랜딩 페이지 첫 화면에서 보이는 강렬한 시각 이미지와 타이포그래피에 아주 만족스러워했다. 이때 알게 된 점인데, 이렇게 화면을 테두리 여백 없이 꽉 채우는 것을 사람들은 full-bleed라고 표현했다. 우리는 이러한 시각적인 인상이 강한 full-bleed 이미지와 그위에 어떤 데이터를 표한할 수 있을지에 대해 다양한 가능성에 대해 즐겁게 토론하기 시작했다. 우리는 이를 Hero image라고 부르기 시작했는데, 앱의 첫 화면에 등장하는 시그니처 요소였기 때문이다. 그렇게 그토록 하고 싶었던 시각디자인과 타이포그래피를 공부하고 디자이너로서 처음으로 팀에 의미 있는 영향을 준 것 같아 마음이 뿌듯하고 감개무량하기까지 했다. 특히 엔지니어로서의 경험을 살려 이렇게 인터렉티브 한 프로토타입으로 실체 팀원들이 체험하고 이로 인해 더 다양한 아이디어들을 끌어낼 수 있게 한 점에 대해 감사함이 가득한 하루였다.
입사 3개월 UX Designer II가 되다
이렇게 새로운 가로 스크롤 방식 기반의 디자인과 프레임웍이 자리를 잡아가기 시작하며 재미있게 일하던 어느 날, 사내 메신저 링크와 아웃룩 등에서 내 이름 밑에 표시되는 타이틀이 UX DESIGNER에서 UX DESIGNER II로 바뀐 것을 볼 수 있었다. 레벨 61로 입사했기 때문에 원래 UX DESIGNER II 시작하는 것이 적당한 것이긴 했지만, 그래도 기분이 좋았다. 지난 세 달간 과연 미국 회사에서 영어를 쓰며 일을 해낼 수 있을까 하는 의구심이 계속 나의 마음속에 맴돌았지만, 이제 어느 정도 새로운 환경에 적응을 하고 의미 있는 결과물을 조금씩이나마 만들어 내기 시작하는 시점에 이러한 타이틀의 변화는 나에겐 응원의 메시지처럼 느껴졌다. 마치 수습 사원 기간을 무사히 잘 마친 느낌이었다.
스포츠 앱의 디자인 시안들
