인터랙티브 디자이너는 어떤 일을 할까?

Intro -

처음으로 브런치에 글을 올려보네요.  사실 이 글의 초안을 적은 게 3년 전인데, 3년이 지난 후에야 다시 글을 쓰고 있습니다.

---

오늘은 제가 하고 있는 일에 대해서 얘기해보려고 합니다. 저는 네이버에서 인터랙티브 디자이너로 일을 하고 있습니다. 사실 인터랙티브 디자이너라는 직군이 생소하실 텐데요. 저희 팀은 인터랙션을 전문적으로 하는 팀인데, 이렇게 UI Animation 만을 하는 디자이너는 많지는 않을 것 같네요. 

저는 주로 디자인 화면이 나오면 그 화면들을 동적으로 연결시키는 프로토타입 작업을 합니다. 저도 디자이너이니까 프로토타입 작업을 하면서 개선할 UX 포인트가 있으면 시안을 설계한 디자이너와 의견을 주고 받아요.

구글에서는 김종민님이 UX 엔지니어라는 직군으로 일을 하고 계시죠. 구글 UX 엔지니어도 프로토타입 작업을 하지만, 저희 팀에서 하는 작업보다 훨씬 더 완전한 제품에 가깝게 작업을 한다고 들었습니다. 프런트엔드 이상의 개발 지식을 가지고 있는 디자이너라고 보면 되겠네요. 

저희 팀은 좀 더 영상에 치중한 작업을 하기도 합니다. 에프터이펙트로 화면을 연결시킬 때도 있고, lottie를 이용해서 마이크로 애니메이션 작업도 많이 하고 있습니다.

저는 프로토타입툴을 이용해서 인터랙션 작업을 하는데요. PC 인터랙션 같은 경우는 자바스크립트와 CSS를 이용해서 작업을 하기도 하지만, 모바일 인터랙션 같은 경우는 프로토타입툴로 주로 작업을 합니다. 제가 예전에 했던 작업을 보시면 좀 더 이해가 빠를 수도 있겠네요.

네이버 쇼핑에 브랜드스토어에 적용되어 있는 인터랙션 작업입니다. 브랜드스토어를 운영하는 사용자에게 다양한 인터랙션을 제공해주는 것이 이 작업의 컨셉이였습니다. 해당 화면은 모바일의 다양한 형태 중에 아치형과 원형 화면에 적용된 프로토타입입니다.

브랜드스토어 모바일 아치형 프로토타입

그리고 이건 실제 개발된 버전입니다. 프로토타입과 거의 동일한 인터랙션으로 개발된 걸 볼 수 있습니다.  

모바일 아치형 실제 개발버전

이건 모바일 원형 인터랙션으로 작업한 프로토타입입니다.  

브랜드스토어 모바일 원형 프로토타입

이건 실제 개발된 버전입니다. 프로토타입과 약간 다르죠. 개발하기 전에 프로토타입을 토대로 어느 정도 개발 검토를 한다고 해도 실제 개발하다 보면 다양한 변수가 존재하죠. 그래서 만약 프로토타입대로 개발이 어려우면 거기서도 다양하게 다른 대안을 제시하는 것도 저희 역할입니다.  

모바일 원형 실제 개발버전

이렇듯 화면을 동적으로 연결시키는 인터랙션 설계 작업을 하면서, 제안한 인터랙션이 개발까지 이어질 수 있도록 역할을 하는 것이 인터랙티브 디자이너입니다. 브런치에는 처음 글을 적어보는데 앞으로는 다양한 주제로 글을 적어보도록 하겠습니다.

이미지 및 영상은 상업적 용도가 아닌 시안으로 작업된 것입니다. 혹시 문제가 된다면 내리도록 하겠습니다.