brunch

You can make anything
by writing

C.S.Lewis

by Jongmin Kim Nov 10. 2017

UX 엔지니어

UX 엔지니어는 무엇을 하는가?

몇 년 전부터 기업들이 디자인의 중요성에 대해 관심을 보이기 시작하더니 이제는 본격적으로 디자인을 제품의 중요한 부분 중 하나로 내세우고 있다. 멋지게 흘러가는 하나의 완성도 있는 제품을 만들기 위해 개발과 디자인의 연계가 강화되었는데, 이는 잘된 한 장의 디자인이 컷 별로 보이는 구조가 아니라 디자인과 디자인 사이에 흐름까지 디자인을 하는, 어떻게 보면 개발이 디자인에 녹아든 현상이기도 하다.


이런 흐름에 맞춰 디자인 작업을 단순히 시안 한 장으로 끝내는 것이 아닌, 실제로 작동되는 프로토타입(Prototype)으로 구현해보는 일이 많아졌다. 이로 인해 프로토타이퍼(Prototyper)라는 새로운 롤이 생겨났고, 구글에선 이를 UX 엔지니어라고 부른다.


UX 엔지니어들은 디자이너들과 밀접하게 일하며, 새로운 디자인 아이디어나 시안들을 프로토타입으로 만드는 역할을 한다. 제품 전체의 사용자 경험이 올바르게 흘러갈 수 있도록 화면 전환이나 유저의 인터랙션 같은 중요한 뼈대부터 작은 버튼의 디테일한 애니메이션까지, 디자이너가 2D로 그려진 몇 장의 시안으로는 보여주기 힘든 부분을 제작한다.


그 외 팀 내의 사이드 프로젝트(Side Projects)나 (실제 제품과는 상관없지만) 재미있는 아이디어를 구현하기도 하는데, 이는 UX 엔지니어들이 일반 엔지니어들과는 다르게 좀 더 디자인 쪽에 가깝기 때문일 것이다.





필요한 능력


1. 디자인/모션 감각

디자이너가 만든 디자인을 개발자가 프로토타입으로 혹은 실제 제품으로 바로 만들어도 되지만, 그렇게 하지 않고 프로토타이퍼의 손을 거치는 가장 큰 이유는 디자인/모션 감각일 것이다.

같은 제품이라도 디자인/모션 감각이 있는 사람과 아닌 사람의 작업물에는 (말로 설명하기 힘든, 느낌 같은 느낌의) 완성도 차이가 있다. 모든 개발자들에게 디자인/모션 감각을 요구할 수 없으니 이런 감각을 가진 사람들이 먼저 개발을 진행해보고 문제점을 찾고 개선해서 실제 개발 작업에서 발생할 수 있는 실수를 줄이고 제품의 완성도를 높여준다.


디자인 감각이 좋은 UX 엔지니어가 만든 작업을 일반 엔지니어들이 똑같이 만들었을 때 '왜 다른 결과물이 나오냐'라는 피드백을 자주 접하곤 하는데, 이 때문에 UX 엔지니어들은 애니메이션에 사용한 코드를 따로 정리해서 실제 제품을 구현하는 엔지니어들에게 전달하기도 한다. 이는 UX 엔지니어들의 작업이 단순히 디자인을 실제 디바이스에서 볼 수 있도록 구현해보는 것을 넘어, 엔지니어들에겐 모션 가이드의 역할도 할 수 있음을 보여준다.


2. 코딩 능력

UX 엔지니어의 실제 작업은 코드를 사용해서 뭔가를 만들어내는 것이다. 디자이너와 밀접하게 일하지만 정식 명칭이 엔지니어인 이유인데, 코딩 능력은 기본으로 중요하다고 할 수 있다.

웹 개발을 위한 Javascript나 iOS/Android 개발을 위한 프로그래밍 언어들을 사용해서 개발을 진행한다. 프로토타이핑 시장이 커지면서 코드에 친숙하지 않은 디자이너들을 위한 프로토타이핑 툴(Prototyping tool)이 많이 등장했지만, UX 엔지니어는 이런 툴과는 상관없는 직업으로 네이티브 코드(Native code)를 사용해서 작업을 진행한다. 이유는 툴로는 표현하기 힘든 한계점까지 표현해야 하는 경우가 많아서인데, 구글의 UX 엔지니어팀은 프로토타입이지만 실제 제품과 동일한 수준의 완성도를 만드는 것을 목표로 하고 있다.


3. 문제 해결 능력

프로토타입은 실제 개발 전에 진행되는 선행작업인 만큼 많은 문제와 맞닥뜨리게 된다. 제품으로 출시하기 전 다양한 문제를 발견하고 해결방법을 찾는 것인데, 이때 요구되는 것이 문제 해결 능력이다.

개발을 어느 정도 공부하다 보면 개발 코드에만 갇혀서 유연한 사고를 하기 힘든 시기가 오기도 한다. UX 엔지니어는 이런 코드의 룰을 뛰어넘어 비주얼을 구현하기 위한 트릭을 찾는 스킬이 중요하다.


문제 해결에 대해 내가 진행했던 프로젝트 중 하나를 예를 들어보면, CSS transform을 이용한 애니메이션 트릭이다. HTML의 높이/넓이 같은 속성은 애니메이션에 많은 자원을 필요로 해서 모바일 웹에서는 느리게 보이는데, 이때 GPU 가속을 할 수 있는 CSS transform만을 사용해서 애니메이션을 만듦으로써 문제를 해결할 수 있었다. 이는 크기를 변경하려면 높이/넓이 속성을 바꿔야 한다는 당연함을 뒤집는 발상의 전환이 있었기에 가능했는데, UX 엔지니어에겐 이런 트릭을 생각해내는 능력이 중요하다고 생각한다.


4. 새로운 시선

모든 선행작업 롤이 그렇듯이 프로토타입도 일종의 선행작업으로 항상 새로운 것에 대한 감각이 필요하다. 이는 굳이 UX 엔지니어가 아니라 모든 디자이너에게도 해당되는 이야기겠지만, 트렌디한 모션 감과 디자인에 대한 꾸준한 관심은 제품의 완성도에 큰 도움을 준다.





장점

UX 엔지니어로 일하면서 가장 좋은 점은 다양한 브라우저, 혹은 디바이스에서 잘 작동되는지 확인하지 않아도 된다는 점이다. 이를 호환성 테스트라고 부르는데, 프론트엔드 엔지니어로 일할 땐 개발이 끝난 결과물을 여러 디바이스에서 돌려보며 버그나 문제점을 수정하곤 했다. 사실 이 작업은 중요하지만 조금은 지루하고 재미없는 작업이다. 프로토타입은 한두 개의 정해진 브라우저/디바이스에서 테스트하기 때문에 호환성 체크를 하지 않고, 작업시간을 온전히 완성도 높은 결과물을 만드는데 쓸 수 있다.


어느 회사던 그들만의 코딩 룰이 있으며, 제품을 런칭하거나 업데이트할 때 이 까다로운 코딩 검사를 거치는 것이 일반적이다. 프로토타입은 출시하는 제품을 만드는 것이 아니기 때문에 코드 규칙이나 라이브러리 사용 등에서도 다른 엔지니어들 보단 비교적 자유로운 편이다.


또 다른 장점은 재미있는 아이디어를 먼저 접해볼 수 있다는 것인데, 제품이 완성되기 전 아이디어 단계에 참여해서 더 나은 제품으로 발전시키는 성취감을 느낄 수 있다.





단점

UX 엔지니어의 가장 큰 단점은 하나의 완성된 제품을 만들지 않는다는 것이다. 일반적인 작업자들에겐 내가 만든 제품이 세상에 런칭되는 희열을 느낄 수 있는 순간이 있다. 하지만 UX 엔지니어는 프로토타입 단계의 작업을 진행하기 때문에 참여한 제품이 런칭될 땐 이미 다른 작업을 진행 중인 경우가 많다.


게다가 도중 프로젝트가 무산되거나, 중간중간 수많은 수정사항으로 처음과 다른 버전을 여러 개 만들어야 하는 등의 힘든 점이 있다. 이는 프로토타입의 특성인데, 중간에 프로젝트의 방향이 바뀌어서 지금까지 만든 것이 쓸모없게 되더라도 화내거나 실망하지 않고 쿨하게 다시 시작할 수 있는 여유로운 자세가 필요하다.





비전

이전의 디자이너와 개발자의 관계와는 다르게, 더 이상 디자인과 개발을 따로 취급하지 않는 시대가 되고 있다. 단순히 잘 만들어진 한 장의 디자인을 넘어 좀 더 시선을 끌어줄 수 있는 모션에 힘이 실리고, 제품 전체에 일관된 사용자 경험을 보여주는 것이 중요해졌다. 코드를 바탕으로 디자인과 인터랙션의 퀄리티를 높여주는 작업이 어느 때보다 중요해진 요즘이다.


구글의 UX 엔지니어 팀 역시 이런 추세에 맞게 계속 성장 중이며 올해만도 30명 이상을 채용했다. 앞서 말한 디자인과 개발을 동시에 이해하는 사람들은 흔하지 않기 때문에 항상 좋은 인력을 영입하려고 노력하고 있다. 혹시 이 글을 읽는 본인이 코드와 디자인에 소질이 있다고 생각되면 cmiscm@gmail.com으로 포트폴리오와 함께 연락을 주시길 바란다.

작가의 이전글 어떻게 쉽게 HTML5 개발자로 전환할 수 있었을까?
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari