프로덕트 매니저의 툴, UI 디자이너의 툴
스케치, Adobe XD, Figma, Axure, ProtoPie 등등
불과 10년 전만 하더라도 UI 설계는 파워포인트로 UI 디자인은 포토샵&일러스트의 조합을 정석으로 사용해왔습니다. 하지만 디바이스가 다양해지고 작업환경이 변화되면서 스케치, Adobe XD, Figma 등 여러 가지 강력한 툴이 등장하기 시작했는데요. 이렇게 툴이 다양해진 배경과 여러분에게 맞는 툴은 어떤 게 있을지 정리해보겠습니다.
1. UI 설계와 UI 디자인의 업무 차이
UI 설계 단에서는 프로젝트 멤버 간의 커뮤니케이션을 위해 만들고자 하는 프로덕트의 목업(UI)을 결정하고 디자인과 개발에 필요한 내용을 Flowchart와 Description으로 상세하게 정리합니다. 이후 설계 문서를 바탕으로 디자인과 개발을 진행하게 됩니다.
UI 디자인 단에서는 프로덕트의 전체적인 레이아웃을 결정하고, 디자인 작업을 하고, 디자인이 완료되면 각 디바이스별 해상도에 맞게 이미지를 추출하는 작업을 진행합니다.
UX 업무는 UI 설계와 UI 디자인의 정중앙에 있는데 UI를 설계하거나 디자인을 할 때에는 UX를 함께 고려해야 합니다. 때문에 조직에 따라 UX 업무를 설계 팀에서 담당하는 경우도 있고 디자인 팀에서 담당하는 경우도 있습니다.
그렇다고 각각의 업무 영역이 명확히 구분돼서 진행되지는 않습니다. UI 디자이너가 설계 업무를 포함하는 경우도 있고 반대로 UI 설계자가 디자이너 업무를 함께 수행하는 경우도 있습니다.
UI 디자이너의 경쟁력은?
과거에는 웹/모바일 디자인에 자유도가 높았기에 디자인 퀄리티를 높이는 게 자신의 경쟁력을 높이는 차별화 요소였습니다. 하지만 지금은 안드로이드, iOS 가이드를 일정 수준 따르다 보니 자유도에 한계가 발생할 수밖에 없습니다. 대부분의 Product들의 닮아가고 있는 이유이기도 합니다. 그렇기 때문에 반대로 UX를 포함한 설계 업무를 수행할 수 있는 디자이너의 경쟁력이 높아지고 있습니다. 회사 관점에서는 2명을 쓰는 것보다는 1명을 쓰는 게 비용적으로 더 유리하기 때문이죠.
UI 설계업무를 담당하는 프로덕트 매니저(기획자)의 경쟁력은?
UI 디자이너가 설계 업무로 확장하다 보니 내 영역이 점차 좁아지고 위기의식이 생깁니다. 디자인도 잘하는데 심지어 저보다 설계를 더 잘하기도 합니다. 이 경우 선택지는 크게 두 가지가 있습니다. 요즘에는 UI 디자인 툴이 많이 좋아졌기에 UI 설계를 하시던 분들은 UI 디자인을 할 수 있습니다. 물론 감각적인 부분은 차이가 있겠지만 할 수는 있습니다 ^^;; 다른 하나는 설계 쪽의 스페셜리스트가 되는 겁니다. Admin을 포함한 복잡한 프로덕트일수록 디자이너가 접근하기 어려운 영역인데요. 이런 영역을 모두 소화할 수 있는 스페셜리스트 설계자가 된다면 나만의 경쟁력을 갖출 수가 있습니다.
저의 경우 스케치로 디자인해서 2개의 앱을 출시해봤습니다.
파워포인트를 잘 사용한다면 기획자도 디자인 툴에 쉽게 적응할 수 있습니다.
자, 다음으로 넘어가 볼게요!
2. 파워포인트와 포토샵
UI 설계 툴에서는 사실 파워포인트를 대체할 만한 툴이 거의 없습니다. MS Office를 사용한다는 전제 하에 파워포인트는 대부분 무료로 사용할 수 있고 사용성 또한 익숙합니다. 그렇기 때문에 누구나 편집이 가능하고 산출물 관리에도 용이합니다.
단점으로는 태생이 문서 편집 툴이다 보니 UI 설계를 진행함에 있어서 비효율적인 부분도 많고 반복 작업도 많이 발생합니다. 화면 크기에 제약이 있다 보니 페이지가 길어지면 다음 페이지로 넘기거나 한 화면에 억지로 욱여넣게 되는데 이러한 과정에서 시각적 왜곡이 발생하고 직관적으로 전달하기에 어려움이 있습니다. 또한 최신 버전 관리에도 어려움이 있는데요. 개발자, 디자이너, 기획자가 바라보는 문서의 버전이 다른 경우도 발생합니다. 이러한 여러 가지 이유로 커뮤니케이션 미스가 발생하기도 하죠.
UI 디자인 툴에서는 포토샵이 꽤 오랜 시간 독점하고 있었습니다. 정말 많은 기능이 있는 데다가 대체제가 없었기 때문인데요. 포토샵의 태생은 사진 편집 툴이었기에 UI 디자인을 하기에는 불필요한 기능도 많고 가격이 비싸기도 했습니다. 그래서 이러한 Pain 포인트를 개선하기 위해 스케치, Adobe XD, Figma 등의 툴이 하나 둘 등장하기 시작했습니다.
3. UI 목업 툴과 UI 디자인 툴
UI 목업 툴은 파워 목업, 발사믹 목업, 카카오 오븐이 있습니다. 파워 목업은 파워포인트에 Add-on 되는 플러그인으로 파워포인트에 파워 목업을 설치하면 자주 사용하는 UI 템플릿을 한 번의 클릭으로 사용할 수 있습니다. 파워포인트로 설계를 하신다면 파워 목업은 꼭 설치해두시기를 추천드립니다.
발사믹 목업과 카카오 오븐은 온라인에서 클라우드로 작업할 수 있는 게 특징인데요. 아이데이션 단계에서 빠르게 UI 목업을 제작할 때 효과적입니다. 하지만 플로우차트와 디스크립션을 작성하기에는 한계가 있고 지금 소개할 UI 디자인 툴로도 충분히 대체할 수 있기에 지금은 거의 사용하고 있지 않는 것 같습니다.
UI 디자인 툴은 포토샵과 비교했을 때 크게 네 가지 특징이 있습니다. ①UI 디자인에 최적화되어 기능이 복잡하지 않고 작업효율을 높일 수 있는 다양한 기능을 지원합니다. ②개발에 필요한 디바이스별 스타일 가이드를 자동으로 생성할 수 있습니다. ③하나의 디자인 작업으로 디바이스별 해상도에 맞게 이미지를 한 번에 추출할 수 있습니다. ④프로토타이핑을 위한 간단한 인터랙션을 지원합니다.
가장 먼저 인기를 끌었던 툴은 스케치인데 다양한 플러그인과 연동되어 확장성이 높고, 커뮤니티를 통해 다양한 템플릿을 지원하는 게 장점입니다. 단점으로는 맥에서만 사용이 가능합니다.
다음으로는 Adobe XD인데요. 포토샵의 제작사 Adobe에서 UI 디자인을 위해 새롭게 출시한 툴이라고 이해하면 됩니다. Adobe XD의 가장 큰 장점은 포토샵, 일러스트 등 Adobe의 모든 제품과 호환이 되고 윈도우, 맥, 클라우드를 모두 지원합니다. 대신에 스케치와 비교했을 때는 플러그인, 템플릿, 커뮤니티가 적은 편입니다.
마지막으로 Figma는 최근에 가장 뜨고 있는 툴인데요. UI 디자인에 필요한 대부분의 기능을 담고 있으면서도 클라우드로 작업된다는 점이 특징입니다. 구글 Docs처럼 여러 명이 동시에 작업을 할 수도 있고 실시간으로 피드백을 남길 수도 있습니다. 스케치와 Adobe XD의 유저들도 Fimga로 많이 넘어오고 있는 추세인 것 같습니다.
4. 전문 프로토타이핑 툴
전문 프로토타이핑 툴로는 Axure, ProtoPie, Framer가 있습니다. 위에서 언급한 디자인 툴 3종도 프로토타입 제작을 위한 인터랙션 기능을 지원하지만 전체 인터랙션의 20~30% 정도의 간단한 인터랙션만 지원하고 있습니다.
지금 소개하는 3가지 툴은 저희가 눈으로 확인할 수 있는 거의 대부분의 인터랙션을 지원한다고 이해하면 쉽습니다. 기본적으로 UI 디자인 툴(스케치, Adobe XD, Figma)에서 제작한 디자인을 import 해오는 기능이 있습니다. 때문에 디자인 작업 후 조금 더 다양한 인터랙션을 넣고 싶은 경우에 아래 툴로 확장을 하게 됩니다.
Axure의 특징은 UI 설계 기반의 프로토타이핑 툴이라는 점입니다. 설계에 필요한 UI 목업, 플로우차트, 디스크립션을 효율적으로 작성할 수 있고 대부분의 인터랙션을 구현할 수 있습니다.
프로토파이는 디자이너 중심의 인터랙션 툴이라고 이해하면 좋을 것 같습니다. 마우스 클릭 몇 번으로 실제 서비스와 흡사하게 돌아가는 인터랙션을 쉽게 구현할 수 있습니다.
프레이머는 개발 프레임워크 중 하나인 React를 기반으로 제작된 툴입니다. 프레이머로 프로토타입을 제작하면 React 코드를 추출할 수 있고 여기서 생성된 코드는 어느 정도 참조해서 실제 개발에 적용할 수 있다고 합니다.
잠깐 이용해본 개인적인 경험으로는 프레이머보다는 프로토파이가 사용성 측면에서 좀 더 쉽게 느껴졌는데요. 개발자가 프로토타입을 제작할 때는 프레이머를 조금 더 선호하는 것 같습니다.
네, 여기까지 전체적인 툴의 변화과정을 살펴봤는데요. 그렇다면 우리는 어떤 툴을 선택해야 할까요?
개인적인 경험을 바탕으로 간단히 정리해보겠습니다.
프로덕트 매니저&기획자
파워포인트 커뮤니케이션이 익숙하고 산출물 관리가 중요한 조직. 툴을 위한 비용 지출이 어려운 조직에서는 파워포인트가 정답입니다. 일단 산출물 관리가 들어가는 순간 여기에 소개된 어떤 툴도 파워포인트를 대체할 수는 없습니다.
UI 설계와 UI 디자인을 이어서 하고 싶고 프로젝트 멤버들과 클라우드 기반으로 빠르게 소통하고 싶은 조직에서는 Figma가 적합합니다.
설계 분야에서 스페셜리스트가 되고 싶고 Admin 작업이 많은 경우에는 Axure를 추천합니다. 물론 파워포인트로도 충분히 스페셜리스트가 될 수 있습니다. 툴은 거들뿐!
UI 디자이너
전문 영역이 아니어서 잘 모르겠습니다. 스케치, Adobe XD, Figma 중 본인에게 잘 맞는 툴을 선택하고 인터랙션 확장이 필요한 경우에는 ProtoPie, Framer로 확장하면 좋을 것 같습니다.
네, 여기까지 프로덕트 매니저(기획자)와 디자이너의 툴의 변화과정을 정리해봤습니다.
영상으로도 정리했으니 관심 있는 분들은 한 번씩 봐주시면 감사하겠습니다!
