프로토타이핑 툴에 대한 소고

#프로토타이핑 툴에 VS? 랭킹? 이 웬 말이냐

아r유 씨리어쓰?

프로토타이핑 툴은 기획의 영역일까? 디자인의 영역일까? 참고로 UX와 GUI를 착각하면 안 된다. ( 혹시 만약에 프로토타이핑 툴을 사용하는 작업을 UX라고 하는 팀에서 일하고 있다면... 시각적인 것에 현혹되어버린 조직, 떠나라-)

프로토타이핑 툴은 애초에 존재의 목적 자체가 그럴싸해 보이는 것을 만드는 것이다. 보는 사람이 그럴싸해 보이게 만든 건데 만드는 사람이 그 그럴싸함에 매몰되어서는 안 되지 않는가. 만드는 사람이라면 만드는 본질에 집중해야 한다. 그게 Sketch 건 피그마 할아버지가 오건, 결국 툴일 뿐 그 자체로 의미가 있는 것이 아니다. 프로토타이핑은 디자인 씽킹의 수많은 절차 중 온라인 서비스에 국한된 아이디어를 표현하는 하나에 도구에 불과하다. ( =원 오브 뎀)

그 흔한 프로토타이핑

운전면허증 딴지 4,5년 차가 가장 위험하다고.. 종종 GUI를 설계함에 있어 PPT면 충분하네, 스케치가 좋네, 또는 XD, 인디고, Axure 등의 얘기들이 있는데.. 단언컨대 더 좋고 나쁨은 없다. 단지 취향과 여건에 맞게 선택하면 그만이다. 라이선스가 부담스러우면 그냥 무료 서비스 중 하나를 선택해서 사용하다 그게 다시 유료로 전환되면 다시 다른 새로운 서비스로 갈아탈 수 있어야 한다. 물론 지정된 서비스를 지속적으로 사용하면 형상관리에 도움이 되겠지만 목적(신속하게 서비스를 릴리즈를 위해 참여자들이 공유하는 커뮤니케이션)의 전체 흐름에서 툴에 대한 가타부타는 그렇게 신경 쓸 부분이 아니다. 프로토타이핑 구간은 하나의 툴을 장인처럼 잘 쓰면 잘하는 구간이 아니라 환경과 요구사항에 따라 그때그때 유연하게 최선의 도구를 '골라' 적정 수준으로(만)재빠르게 쓸 수 있어야 하는 구간이다. 

디자인 씽킹하면 바로 따라오는 키워드가 '사람을 깊이 공감하는 혁신적 사고와 창의력'과 같은 거창한 말들이 따라오는데... 한 가지 툴을 사용해서 어떻게 혁신적 사고를 하고 창의력을 발휘할 수 있겠는가.. 프로토타이핑에 익숙해질수록 새로운 asset이나 인터랙션 하나 더 추가하는 게 최선의 창의적인 표현으로 전락할 수 있으니 조심할 필요가 있다.  

 

#개인적인 경우,

가장 처음에는 포스트잇을 사용한다. 어느 정도 플로우와 구성요소가 정리되면 그때 소프트웨어 툴로 이동하는 편이다. 소프트웨어 툴을 사용할 때는 구축용이 아닌 단순 아이디어 제안용이라면 PPT를 사용하고 클라이언트가 프로토타핑 보는 경우에는 Axure, 자사 서비스를 기획하는 경우에는 프로토타이핑을 하는 경우에는 XD 사용하고 있다. (최근엔 유튜브 알고리즘이 계속해서 피그마를 추천하기게 얼떨껼에 한번 따라가 봤다가 7 분만에.. 오! 이거 하면 제플린 안 해도 되겠는데? 하는 생각으로 뒤늦게? 딥 다이빙하는 중이다.) 

 

#프로토타이핑의 나쁜 예

프로토타핑를 학습하는 가장 큰 이유는 플로우나 인터렉션이 아닐까 한다. 실제 구축한 것처럼 뭐가 튀어나오고 뭐가 사라지거나 이동하는 것들을 보다가 어느정도 익숙해지면.. 그제서야 다시 업무의 효율을 찾는다. 

때론 기획자가 만든 프로토타핑 결과를 보고 디자이너가 다시 프로토타이핑을 하는 웃지? 못할 상황이 연출되기도 한다. 여기서 멈추지 않고 일부 조직은 프로토타이핑 결과를 기반으로 다시 화면 설계서를 그리기도 한다.  

만약.. 자신의 상황에 해당한다면.. 사람은 도구를 만들고 도구가 사람을 먹어 삼키고 있는 과정을 직접, 몸소 경험하고 있는 사실을 하루빨리 인지할 수 있기를 바란다. 

 

#작업순서

그래서 프로토타이핑 툴을 PPT 같이 쓰지 않기 위한 학습(또는 업무) 준비? 순서들을 정리해본다.

1. 전반적인 GUI 플로우 스케치해보기 

2. 필요한 아이콘, 버튼 나열하기 -> asset 구성 

   -  export 했을 때 아이콘마다 가로 x 세로가 동일하게, 그리고 px이 짝수인지 홀수 인지도 주의 깊게 봐야 한다. 

3. 텍스트 및 컬러의 유형 정의하기 -> asset 구성

   - 사이즈는 변경될 수 있어도 h1, h2, 본문, 버튼 등 유형별로 구성해두는 것이 좋다 

4. 디테일보다 구성요소 덩어리부터 그리기

5. 구성요소의 디테일은 앞에 2, 3번 asset으로만 구성하기  

6. 플로우 설정하기

7. 인터렉션 표현하기 

 

#asset은 모두의 작업

위 절차는 asset에 주목하고 있다. 결국 재사용될 수 있는 UI kit을 유형과 용도를 정의하고 공유하는 것이 포인트이다. 종종.. 이건 너무 디테일한 작업인데? 디자이너가 해야 하는 거 아니야? 할 수 있지만, 사실 우리는 이미 이런 작업을 해왔다. 이건 단지 화면 설계 시작 전에 구성요소들을 설명하는 장표와 다를 게 없는 과정이다. 

 

#asset의 효과

물론 디테일한 스타일은 디자이너의 영역이겠지만, 앞단에서 정의된 유형별 asset 세트가 있다면 그때부터 디자이너와 대화라는 걸 할 수 있다. 최소한 화려하면서 심플한 그거를 디자인해달라는 요청은 안 하게 되는 것이다. 이때 디자이너에게 보다 또렷한 테스크가 생기고 그 타깃에 자신의 역량을 집중을 할 수 있게 된다.

뿐만 아니라 제플린 또는 피그마를 사용하는 경우, 이러한 요소들이 사전에 얼마나 꼼꼼히 정의되었느냐에 따라 디자인 작업 전이나 동시에 병행할 수 있는 여건을 마련할 수 있게 된다.

 

#추천 레퍼런스 

Figma의 경우 Variants 기능이 있는데 매우 유용한 것 같다. 개인적으로 도움이 되고 있는 블로그와 유튜브가 있어 공유해본다.  

https://nicecarrot2.tistory.com/179

[피그마] figma 업데이트된 Variants 기능을 알아보자(+기존 컴포넌트 레이어 정리하기)

https://www.youtube.com/watch?v=lMOJ1ijO9hs 

 

 

#마지막으로, 프로토타이핑 앞 뒤의 과정과 프로토타이핑을 몇번이나 효율적으로 공유하고 반복하는지가 가장 중요하다고 생각한다. 프로토타이핑은 잘 만들어서 한번에 딱- 끝내는 작업이 아니라 수시로 만들고 공유하고 개선하는 과정(도구)이다. 

 

 

#끝

많은 조직에서 오해하고 있는데.. 협업과 분업은 분명히 다르다. 이어달리기가 분업이라면 협업은 2인 3각이다. 뭐가 더 좋고 나쁨은 없다. 취향과 선택의 문제이다. 다만, 이어달리기는 잘 뛰는 선발의 활약으로 승패가 갈리고, 패의 경우 기쁨은 없다. 반면 2인 3각은 선발 후발할 것 없이 모두가 참여하고 승리하지 않아도 가슴 뜨끈한 뭔가가 오랫동안 우릴 웃게 해 준다. 

당신에게 프로토타입 툴(Figma? Sketch? XD?) 은 이어달리기인가 2인 3각인가?