프론트엔드 개발과 디자인 사이 - UX 엔지니어

UX 엔지니어라고?

흔한 용어는 아니지만 짐작은 가지 않는가? 이름으로 미루어보아 대략 UX 디자인과 프론트엔드 개발이 연관돼 있을 것 같다. 그게 맞다. UX 엔지니어는 디자인과 엔지니어링의 가교 역할을 하는 프론트엔드 개발자다.

이를 처음 접하게 된 것은 구글 UX 엔지니어 김종민님 덕분이다. 유튜브에서 그의 작업물을 접한 날은 머리를 한대 얻어맞은 기분이었다. 웹으로 이런 것까지 가능하구나, 이런 사람도 있구나 지평을 열어준 계기였다. 터치 디자이너(TouchDesigner)라는 소프트웨어로 인터랙티브한 애니메이션을 만든 경험이 있다. 사용자의 터치, 움직임 등의 인터랙션이 디자인을 완성시키고 동적으로 만드는 것은 참 매력적이다. 그렇지만 당시 나는 개발을 막 시작한 초심자로써 배워야 할 것들이 많았고 그런 것들까지 신경쓸 여력이 없었다. 언젠가는 해보고 싶다는 막연한 바램만 간직하고 떠나보냈다.

돌아가고, 잊혀져도 언젠가는 관심사로 회귀하는 법. 나의 개발 커리어를 어디에 집중하면 좋을까 고민하다가 문득 UX라는 키워드가 떠올랐고 오래전 묻어뒀던 UX 엔지니어가 고개를 들었다.

 

UX 엔지니어가 하는 일

구글에 검색해보니 역시나 흔한 직종은 아닌 것으로 보인다. 그나마 UX에 진심인 토스에서 UX 엔지니어 관련 아티클을 찾을 수 있었다.

https://blog.toss.im/article/ux-engineer-interview

구글, 애플에 있는 UX 엔지니어가 토스에 있는 이유

위 글에서 UX 엔지니어로써 역할을 세 가지로 정리하였다.

1. 연구하기 - 제품의 비주얼, 인터랙션 요소 개발
2. 도구화하기 - 개발한 기술 도구화
3. 워크플로우 개선하기  - 디자이너와 개발자간의 업무 시스템화

예시 중에 상품권 구매 서비스에 3D 애니메이션과 인터랙션을 추가했는데 지표가 개선되었다는 점, 토스만의 디자인 시스템을 구축하고 자동화하는 것이 참 인상적이었다.

한편, 앞서 말한 구글의 김종민 님은 UX 엔지니어로써 새로운 디자인 아이디어나 시안을 프로토타입으로 구현하는 역할을 한다고 한다. (UX 엔지니어) 실리콘밸리에서 일하는 한 개발자 분께서는 디자인 시안을 구체화하고 테스트를 위한 프로토타입을 구현한다고 한다.(첫 번째 인터뷰: UX Engineer)

UX 엔지니어란 직종이 잘 정착된 것은 아니다보니 기업마다 정의하는 역할은 다소 다를 수 있을 것 같다. 개인적으로 UX 엔지니어의 역할을 정리해보자면 디자이너와 개발자 간의 통합 과정에서 일어나는 비효율과 간극을 메꾸는 작업인 것 같다. 개발을 하다보면 최대한 디자인 시안을 살리면서 디자인에서 다 정의하지 못하는 UX적인 측면을 어떻게 개발적으로 해결하여 사용자에게 높은 사용성을 전달할 수 있을까 고민하게 될 때가 많다. 예를 들어 이미지 로딩이나 API 호출 등으로 컨텐츠가 비동기적으로 처리될 때 적절하게 로딩 상태를 표시하는 것을 생각할 수 있다. 이러한 질문을 붙잡고 발전시켜나가는 것이 UX 엔지니어링이 아닐까 한다.

 

필요한 기술

아래 글에서 UX Enginner로써 필요한 기술을 구체적으로 설명하고 있어서 가져와봤다.

https://www.freecodecamp.org/news/what-is-a-ux-engineer/

What is a UX Engineer? User Experience Engineer Role Explained

 

프론트엔드 개발 HTML, CSS, JavaScript를 비롯한 프론트엔드 지식이 필요하다. React와 같은 유명한 JS 라이브러리도 알아야 할 것이다.

CSS 전문성 CSS에 관한 전문가가 되어야 한다. Sass, Less같은 전처리기를 사용할 수 있고, 스타일드 컴포넌트나 Emotion과 같은 Css-in-JS 라이브러리 사용 경험이 있으면 좋다.

UI/UX 디자인 low-fidelity나 high-fidelity의 디자인 프로토타입을 제작해야 할 수 있다. Figma, Sketch와 같은 디자인 툴의 사용법을 아는 것이 좋다. 디자인 시스템과도 관련된다.

Storybook UI 컴포넌트를 빌드, 테스트, 디스플레이할 수 있는 툴이다. 디자인 시스템이나 컴포넌트 라이브러리를 작업할 경우 Storybook을 사용할 확률이 높다.

접근성 접근성을 준수하여 모든 사용자를 고려할 수 있어야 한다. 접근성을 테스트하고 개선할 수 있는 스킬이 매우 유익하다.

반응형 디자인 디자이너가 전달한 몇 가지의 스크린 사이즈에 대한 디자인 시안을 가지고 작업할 수 있어야 한다. 각 스크린 사이즈간의 갭을 자연스럽게 전환하기 위해 기술적인 의사결정이 필요할 것이다.

 

마무리

이 글은 존 손메즈의 <커리어 스킬>이라는 책에서 시작되었다.

좋은 프로그래머가 되고 높은 기술력을 갖추는 것도 물론 중요하다. 하지만 그것만으로는 경력을 발전시키는 데 한계가 있다. 정말 뛰어난 개발자가 되고 싶다면, 자신의 경력을 한 단계 끌어올리고 싶다면 자신을 마케팅하고 개인 브랜드를 만드는 방법을 배워서 좋은 평판을 구축해야 한다. 그러면 모두에게 닫혀 있던 기회의 문이 열릴 것이다. <커리어 스킬, 존 손메즈>, p577

 

저자는 중간 정도의 실력에 높은 명성을 얻는 게 높은 실력에 아무 명성도 없는 것보다 낫다고 단언한다. 그리고 명성을 쌓으려면 아주 작은 영역에 집중하는 것이 효과적이라고 한다. 퍼스널 브랜딩의 중요성과 효과에 나도 동의하기에 이 블로그와 개발 커리어를 어디에 집중시키면 좋을까 생각하게 됐다. 지금까지 커리어와 관심사를 종합해본 결과 UX라는 키워드를 도출할 수 있었고 프론드엔드 개발과 UX 디자인의 접점으로 UX 엔지니어링 분야를 알게 되었다. 살펴보니 UX의 엔지니어의 역할과 요구되는 기술도 나와 궁합이 잘 맞는 것 같다. 그래서 오늘부터 나의 정체성은 UX 엔지니어로.