[08] 디자인인테그레이션:픽셀 퍼펙트 디자인을 위하여
디자이너가 된 엔지니어 - 08
디자이너이자 크리에이티브 테크놀러지스트이며 저자인 박동윤(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 디자이너로 일해온 경험을 공유합니다
마이크로소프트 인도 디자인팀을 방문하다
인도에 있는 프로그램 매니저들과 개발자들과 원격으로 계속 협업을 하던 중 보다 긴밀한 협업을 위해 디자인팀이 인도 마이크로소프트를 방문하기로 했다. 하이데라바드(Hyderabad)라는 IT 회사들이 몰려 있는 도시인데, 브라이언이나 로드니 등 몇몇 리더십 팀 멤버들은 이미 몇 차례 출장을 다녀왔다고 한다. 인도 마이크로소프트에는 작긴 하지만, 디자인 팀도 있었는데, 바이밥 이라는 디자이너가 기존 빙 팀에서 디자인을 담당하다가 함께 우리의 윈도우즈 8 앱 프로젝트를 진행하기로 되었다고 한다.
시애틀에서 하이데라바드로 갈 때 유럽 쪽을 통해 두바이를 거쳐서 가나 아시아 쪽으로 한국을 거쳐서 가나 둘 다 비슷하게 20시간 넘게 걸리기에 첫 출장은 한국을 경유해 싱가포르를 거쳐 갔다. 첫 출장이라는 설렘이 컸지만, 20시간이 넘는 비행은 상당한 체력을 필요로 했기에, 하이데라바드에 도착해서는 녹초가 되었다. 하이데라바드는 건조하고 더운 내륙에 바위가 많은 환경이었는데, 주위에 엔비디아, 구글, 페이스북 등 다양한 IT 회사들의 건물들이 보였다.
Microsoft India Development Center
다음날 드디어 인도 마이크로소프트에 도착해서 사무실을 방문했는데, 곳곳에 미식축구 공이나 NBA 경기 포스터, 월스트릿 표지판 등 스포츠와 금융에 관련된 것들이 걸려 있어서 쉽게 사무실을 찾을 수 있었다. 바이밥을 만나고 프로젝트에 대한 미팅을 통해 바이밥은 파이낸스 앱을 디자인하는데 합류하기로 했다.
그 이후 개발팀의 엔지니어들을 만났는데, 스포츠 앱 팀의 데브 리드인 챤단은 서글서글한 동네 형 느낌의 개발자로, 그동안 개발이 진행된 초기 버전의 스포츠 앱을 보여주며 프로젝트에 대해 큰 열정을 보였다. 챤단의 팀에서 함께 일하는 살로니라는 엔지니어도 열정적으로 현재 앱의 개발상황을 설명해 주며, 내가 디자이너로서 궁금한 것들 — 프런트 앤드가 어떻게 구현되고 스타일링이 어떻게 입혀지는지 등 — 에 대한 질문들에 즐겁게 대답해 주었다. 방문 당시 마이크로소프트의 지역 사회 기부를 위한 사내 행사 중 하나인 ‘Give’라는 이벤트가 진행되고 있었는데, 장기 자랑을 통한 모금 행사에서 살로니는 엄청난 춤 실력을 발휘하여 큰 호응을 얻어 많은 기부금액을 모았다. 마이크로소프트 인도 캠퍼스 바로 앞 길가에는 인도의 전통차를 파는 오토바이가 있었는데, 우리는 종종 가서 밀크티를 함께 마셨다.
파이낸스 개발팀에도 젊은 엔지니어들이 많았는데, 데브 리드인 라마를 비롯하여, 앙쿠르, 챤드라 등 개발자들 모두, 우리 디자이너들의 방문을 적극 환영했고, 멋진 앱을 만들기 위한 앞으로의 협업에 대해 큰 기대를 표시했다.
개발팀과의 협업 — 레드라인이란?
전통적으로 디자인 팀과 엔지니어링 팀의 협업에서 필요한 과정이 디자인이 어느 정도 완성이 되면 정확한 디자인 스펙 (콘텐츠와 UI의 레이아웃 위치, 크기, 마진, 패딩, 텍스트의 크기, 폰트, 컬러 등을 기술한 문서)을 디자인 팀에서 제작해 개발팀에 전달을 하고, 개발팀에서 그 디자인 스펙 (회사에 따라 가이드라인이라고 부르기도 한다)에 따라 프론트앤드(내부에서 돌아가는 로직이 아닌, 사용자에게 화면에 직접 보이고 사용되는 것들)를 구현한다.
이러한 디자인 스펙을 레드라인(redline)이라고도 부르는데, 상세한 디자인 스펙을 빨간색의 선 들로 표현해 정보를 기술하기 때문이다. 이때 흔히 일어나는 문제가 아무리 정확하고 상세하게 레드라인을 만들고 전달해도, 특정 UI 요소의 위치가 어긋나 있다던지, 잘못된 마진이 잡혀 있다던지, 잘못된 폰트나 컬러가 적용되어 있다 던 지 하는 점이다. 이는 개발자마다 다르게 나타나기도 하는데, 디자인에 관심이 있고, 어느 정도 비주얼 디테일을 잘 보고 신경을 쓰는 개발자는 픽셀 하나 틀리지 않게 스펙 그대로 완성을 하지만, 그렇지 않고 대략 비슷한 경우 넘어가는 경우도 상당히 많다.
레드라인의 예 - 랜딩 페이지의 다양한 요소들의 레이아웃에 대한 구체적인 수치들을 기술하고 있다
레드라인의 예 - 스포츠 앱의 데이터 타일문제는 이러한 사소하게 보일 수 있는 디테일한 요소들 (1픽셀이 어긋나 있는 요소라던지, 폰트가 Segoe UI Semi Light이 아닌 Light이 적용된 것 이라던지)이 쌓이기 시작하면 전체적인 사용자 경험에 큰 영향을 준다는 것이다. 실제 앱스토어에 있는 수많은 앱들을 사용해 보면, 어딘가 엉성해 보이고, 신뢰도가 떨어지는 앱들은 바로 이러한 요소들의 문제가 크다고 볼 수 있다. 이러한 요소들을 바로잡고 다듬기 위해, 개발팀과 디자인팀 간에 수많은 반복적인 빌드 리뷰(실제 개발 중인 앱을 테스트하며 리뷰하는 것)와 피드백이 필요로 하게 된다. 어찌 보면 상당히 시간과 에너지를 불필요한 커뮤니케이션에 낭비를 하는 것이다.
코드 액세스 권한을 얻다
아직까지는 앱의 디자인/개발 초기 단계여서 중요한 몇 가지 페이지들에 대해서만 레드라인을 개발팀에 전달을 했지만, 많은 부분이 아직 엉성하고 올바르지 않게 구현이 되어 있었다. 이러한 마감 퀄리티를 핏 앤 피니시 (Fit & Finish)라고 하는데, 사진, 영상, 텍스트, 내비게이션 UI, 메뉴 등 다양한 요소가 섞여 있는, 방대한 페이지들을 포함하는 앱에서 1픽셀 단위까지 완벽한 (Pixel Perfect) 디자인을 어떻게 하면 구현을 할 수 있을지 디에고와 나는 고민을 하기 시작했다.
다행히도 디에고 역시 어느 정도 프론트앤드 프로그래밍 경험이 있었고, 이미 프로토타이핑도 많이 해왔기에 우리가 직접 프론트앤드를 다듬는 작업을 하면 어떨까 하는 생각이 들었다. 디에고와 이야기한 결과 긍정적인 반응을 보였는데, 당시 앱들은 WinJS 기반으로 CSS와 유사한 방법으로 프론트앤드를 구현하고 있었기에 한결 쉽게 작업이 가능할 것 같았다.
앱의 데브 리드를 만나 우리의 아이디어를 표현했지만, 처음에는 디자이너들이 개발팀의 코드를 액세스하고 코드를 변경하는 것에 대해 불안해하는 모습이었다. 그 후 개발자들의 자리에 가서 함께 앉아서 좀 더 자세하게 현재 프론트앤드가 구현되는 방식을 관찰하고, 직접 디자인 스펙에 맞게 다듬는 과정의 예를 보여주어 어느 정도 개발팀의 신뢰를 얻게 되었고, 우리는 결국 코드 리포지토리에 액세스 및 커밋을 할 수 있는 권한을 얻게 되었다.
프론트앤드 작업의 시작
우리는 프로젝트의 코드 액세스를 얻게 된 사실에 흥분했는데, 우리 디자인팀이 직접 프론트앤드를 수정할 수 있기 때문이다. 이것은 디자인 변경 사항이 있거나 실험해보고 싶은 디자인이 있을 때 쉽게 적용해보고 테스트해보고 실제 메인 코드에 반영을 할 수 있다는 의미이다. 이러한 자잘한 디자인 요소들에 대해서는 솔직히 개발팀에 요청을 하기 쉽지 않은데, 요청을 하고서 개발자가 요청 내용을 반영을 하고 실제 빌드에서 볼 수 있게 되기까지 시간도 많이 걸리기 때문이다.
프론트앤드 작업을 시작하며 엉망인 레이아웃과 디자인 디테일을 다듬어 가기 시작했다. 이 과정에서 우리는 .less 라는 Leaner Cascading Style Sheet을 활용했는데, 앱에서 사용되는 다양한 공통적인 스타일들을 정의해서 쉽게 적용하고 일관성을 유지할 수 있게 하기 위함이었다. 점점 우리는 프론트앤드 작업을 하는데 익숙해졌고, 개발팀에서도 우리가 작업한 내용들을 코드 리뷰 하고 머지하는데 잘 적응을 하기 시작했다. 이렇게 해서 우리는 점점 픽셀 퍼펙트한 디자인에 한 걸음씩 다가서기 시작했다. 이렇게 디에고와 함께 시작한 디자인팀에서의 프론트엔드 작업은 훗날 훌륭한 사례로 그룹에 공유가 되었고, 디자인 인테그레이션(Design Integration, 디자인 시안을 실제 코드로 구현하는 일)이라는 직군을 만들어 정착을 시키기도 하였다.
리치 컨텐트
디자인팀과 개발팀이 열심히 앱을 만들어 나가고 있는 중에, 리더십팀은 세계 각국의 다양한 컨텐트 파트너들과의 계약을 속속 성사시켜 나갔다. 뉴스, 스포츠, 금융 등 여러 앱들은 세계 각국의 콘텐츠 및 데이터가 필수적이기에 이들을 제공할 사업자들을 찾는 것이 중요한 일이었다. 이미 마이크로소프트에는 MSN이라는 포털 사이트를 통해 각국의 다양한 콘텐츠 파트너들과의 관계를 맺고 있었다.
스포츠 앱의 경우는 유명 스포츠 뉴스 제공사와의 콘텐츠 데이터 협업을 통해 다양한 스포츠 데이터 및 이미지를 활용할 수가 있었는데, 감사하게도 여러 스포츠 리그에 대해 내가 디자인했던 시안에 맞게 배경이 투명한 선수들의 프로필 헤드샷을 사용할 수 있게 되었다. 콘셉트 및 시안 단계에서 좋은 반응을 얻긴 했지만, 과연 수많은 스포츠 리그 선수들의 고해상도 헤드샷 이미지를 투명한 배경으로 구할 수 있을지 걱정이 되었었다. 이 외에 각 리그 및 선수별 중요 스탯(stats) 데이터들을 풍부하게 활용할 수 있게 되어 좀 더 깊이 있는 데이터 시각화를 할 수 있게 되었다. 디자이너에게 이러한 풍부한 콘텐츠 및 데이터가 제공되는 것은, 마치 요리사가 다양한 요리 재료를 확보해서 풍부한 다양한 요리를 할 수 있게 된 것과 같았다.
스포츠 선수들의 헤드샷과 로고 이미지를 기반으로 한 데이터 타일 디자인파이낸스 앱의 경우는 다양한 주식 및 펀드에 대한 뉴스 및 데이터를 활용할 수 있게 되어 역시 디자인 작업을 할 거리가 많이 생겼다.
타이포그래피
다양한 뉴스와 데이터가 콘텐츠의 중심이 되는 앱인 만큼, 텍스트의 중요성은 더욱 높았다. 콘텐츠의 가독성, 정보의 위계 구조, 사용성과 더불어 만족감을 주는 사용자 경험을 위해서는 일관성 있고 효율적인 타이포그래피의 시스템적인 적용이 매우 중요했다. 우리는 윈도우즈 팀에서 제공한 기본 타입 램프를 우리의 앱이 제공하는 콘텐츠에 알맞게 보완을 했고, 개발팀과 협업을 통해 이런 타입 시스템이 일관성 있게 잘 적용될 수 있도록 노력했다.
앱에서 사용된 타입 램프