by
Apr 14. 2021
프로토타이핑이라고 들어봤니?
툴이라 쓰고 피그마라고 읽는다.
몇 달 전 굿즈 만들기 프로그램에 참여했을 때 일이었다.
"그림 그리기 전에 초안을 그려봅시다."
오, 초안을 그리라고? 그냥 순간 그림을 뚝딱뚝딱 그리면 되는 줄 알았던 내 머릿속을 멍-하게 만들어주는 단어였다. 개인 굿즈샵을 운영 중이신 프로그램 리더님은 굿즈에 들어갈 그림을 그리기 전에 꼭 어떻게 그릴 지 구상 작업을 한다고 한다. 예를 들면, 동물을 그릴 때 눈코입 모양, 포즈, 귀여워 보이는 몸의 비율 등 모든 것들을 감안해서 스케치하신다고 한다.
한 번만 그리는 게 아니라 지인들에게 보여주고 바꾸고 또 바꾸고, 이런 반복의 과정을 거듭해서 하나의 캐릭터를 탄생시킨다고 한다. 그렇게 했을 때 굿즈 반응도 좋다고. 와우, 캐릭터 하나도 이런 과정이 필요하다니.
최근 웹디자인, UXUI 디자인을 공부하다가 비슷한 개념을 발견했다. 바로 프로토타이핑. 오늘은 요 아이에 대해 탐구해 볼 예정이다.
프로토타이핑이 뭐야?
프로토타이핑. 웹디자이너 특히 UXUI디자이너를 꿈꾸는 사람들이라면 한 번쯤은 들어봤을 것이다. 아니, 사실 제일 먼저 들었을 지도.
인터넷 초록창 백과사전에서는 제품 초기 모델을 간단히 만들어 사람들에게 먼저 보여주고, 개선점이 생기면 기능을 보완해 초기 모델을 재정비하는 과정이라고 설명하고 있다. 여기서 초기 모델을 프로토타입이라고 부른다. 아, 잘 모르겠고, 제품 출시 전에 시연하고 개선하는 과정이라고 생각하는 것이 쉬울 것 같다.
웹디자이너, 특히 UXUI 디자이너들도 웹사이트나 모바일 시스템을 구축할 때 프로토타이핑 작업을 한다. 그 예로 기획자에게 받은 시안으로 웹사이트를 만들어보고 기능이 괜찮은 지, 각 메뉴 아이콘들의 위치는 적당한 지, 메뉴바나 버튼들을 눌렀을 때 어떻게 기능할지 등등을 미리 데모 모델로 만들어 놓고 실험하고 개선하는 반복 과정을 거친다. 여기서 사용되는 도구가 바로 피그마라고 불리는 친구다.
프로토타이핑계의 포토샵, '피그마'
사실 프로토타이핑이라고 하면 제일 먼저 생각나는 디자인 툴은 바로 스케치이다. 그러나 스케치는 현재 A사 노트북만 지원하고 있어, S사 노트북을 이용하는 나는 어깨너머로 나마 그냥 존재만 아는 정도이다^^; 이래서 디자이너들은 '사과'들을 쓰는 건가 싶기도 하다.
그러나 S사를 이용하는 디자이너들도 프로토타이핑 작업할 수 있는 툴이 필요하지 않는가. 피그마가 바로 S사 유저들에게 더할 나위 없이 좋은 툴이다. 물론 포토샵으로도 충분히 웹사이트 시안을 만들 수 있지만, 그냥 대충 어떤 모습인 정도만 가늠을 할 수 있었다. 그러나 피그마를 사용하면 목업을 통해서 간접적으로 어떻게 실현될 것인지를 경험할 수 있다.
실제 내가 연습한 예시게다가 피그마는 디자인을 처음 공부하는 예비 디자이너들에게 좋은 기능이 많다. 플러그인으로 웹상이나 모바일 ui디자인 실무에서 자주 쓰이는 아이콘들을 다운로드할 수 있어, 아이콘을 어떻게 디자인하면 되는지에 대한 가이드라인을 받을 수 있었다. 또한 피그마에는 커뮤니티도 존재해 현직 uxui 웹디자이너들이 실제로 작업한 프로토타이핑을 볼 수 있어, 작업이 막막하다면 충분히 참고해볼 만하다.
프로토타이핑을 처음 공부하는 사람들에게
