웹디자인을 하던 모바일 디자인을 하던 UI 디자인(User Interface Design)을 하기 위해 지금까지 중심이 되어 온 툴은 포토샵이였다. 비교적 근래에 업종으로 자리 잡게된 UI 디자인(웹디자인/모바일 디자인)은 주로 시각디자인을 전공하던 그래픽디자이너나 편집디자이너, 제품디자이너 등이 작업하기 시작했으며 전용 툴이 없던 UI디자인은 시각디자이너들에게 익숙한 포토샵을 주로 사용하게 되었다.
매크로미디어의 파이어폭스나 Adobe의 이미지레디 등 여러 업체들이 UI디자인 전용 툴을 개발하기 위해 시도는 했으나 대부분 실패했고 아직도 범용 디자인 툴인 포토샵이 UI디자인 툴로써 긴 명맥을 유지하고 있었다.
그러다가 몇 년전 부터 슬슬 변화의 바람이 불기 시작했다. 보헤미안(Bohemian)이라는 회사에서 스케치라는 UX/UI 전용 디자인 툴을 출시하였는데 기존의 툴과는 좀 다른 형태로 접근을 하면서 UX/UI 디자이너에게 많은 사랑을 받기 시작했다. 커뮤니티를 통해 사용자의 요구를 반영하며 지금까지도 지속적으로 성장을 하고 있다.
스케치의 구성 형태는 UX/UI디자인 툴의 기본 형태가 되었고 Adobe 마져도 스케치의 구성 형태를 참고하여 Adobe XD라는 툴을 출시하게 되었다.
어찌되었든 스케치가 유명세를 타면서 몇년 전 부터 많은 UI디자이너들이 포토샵에서 스케치 쪽으로 넘어가고 있다. 스케치의 출현이 단지 UI디자인 툴 하나가 바뀌는 것에 의미를 둔다기보다는 UX/UI디자인 업계가 변화하고 있다고 보는 것이 맞을 것이다.
UX/UI디자인의 트렌드 변화
UI디자인에 있어 기존에 범용적으로 사용하는 포토샵은 예전에 업계 표준 개발 방식이였던 워터폴(Waterfall)방식과 어느 정도 궁합이 맞았으나 현재 많이 사용되고 있는 애자일 개발 방법론과는 뭔가 매칭이 부자연스러운 것이 사실이였다. 이렇게 기민하고 빠르게 개발 해야하는 애자일 개발 방법론과 궁합이 딱 맞게 만들어진 스케치가 사랑받는 이유가 여기 있다.
기존의 개발 방식 (AS-IS)
상황에 따라 약간씩 다르긴 하겠지만 보통 기존의 디자인 요청은 위와 같이 진행이 되었다.
먼저 기획자가 PPT로 와이어프레임을 제작하여 UI디자이너에게 디자인을 요청하면 UI디자이너는 포토샵을 이용하여 와이어프레임의 요청 대로 디자인을 한다. 디자인 된 이미지를 기획자에게 전달을 하면 기획자는 이미지를 PPT로 정리 하여 현업 담당자에게 컨펌을 요청한다. 바로 컨펌이 되면 다음 단계로 넘어가지만 수정 요청이 있으면 처음 1단계로 되돌아가서 다시 UI디자이너에게 수정요청을 하고 수정된 UI디자인 이미지를 현업 담당자에게 다시 컨펌을 받게 된다.
컨펌이 되었다면 컨펌된 이미지를 토대로 HTML을 작성하거나 PPT로 디자인 가이드라인을 만들어서 개발자에게 전달을 하게 된다.
이렇게 할 경우 산출물은 PPT 2개 이상, 포토샵 파일 1개 이상, HTML 등 최소한 4개 이상의 산출물이 남게 된다. 불편했지만 불편한 줄 모르고 사용해왔던 방식이다.
애자일 개발 방식 (TO-BE)
스케치툴을 중심으로 한 개발 방법도 상황에 따라 다르긴 하겠지만 보통 위와 같은 프로세스로 진행이 된다.
먼저 기획자가 스케치툴을 활용하여 와이어프레임을 제작한다. 이 스케치 파일은 앱스트릭트(git을 디자이너들이 편리하게 사용할 수 있게 해주는 서비스)를 통해 UI디자이너에게 공유를 한다. UI디자이너는 와이어프레임이 있는 동일한 파일에 UI디자인 작업을 한다. 디자인이 완료되면 UI디자이너는 결과물을 인비전(invision)으로 익스포트를 한다. 인비전(invision)으로 익스포트된 프로토타입은 실기간으로 기획자와 디자이너와 현업 담당자가 검토를 하고 수정 요청이나 컨펌을 하게 된다. 모두가 보고 있기 때문에 UI디자이너는 바로 바로 수정하여 갱신하며 빠르게 컨펌을 유도한다. 그렇게 컨펌된 스케치 결과물은 제플린(가이드라인 자동생성 툴)으로 바로 익스포트하여 개발자에게 전달한다. 개발자는 해당 가이드라인을 통해 개발을 진행하게 된다.
보관해야 할 산출물은 Sketch파일 1개다. 더군다나 이 파일도 앱스트릭트를 통해 버전관리까지 할 수 있다.
# 결론
전세계적으로 많은 UI디자이너들이 스케치쪽으로 툴을 변경하고 있는 추세이다. 현재 많이 넘어간 상태이고 여기에 위기를 느낀 Adobe는 XD라는 스케치와 비슷한 툴을 출시해서 포토샵에서 스케치로 빼았긴 고객들을 다시 흡수하기 위해 XD 무료 사용, 플러그인 개발을 유도하기 위해 많은 자금 투입 등 공격적인 행보를 하고 있는 중이다.
어찌되었든 현재의 UI디자인 트렌드는 범용디자인 툴인 포토샵에서 UI디자인 전용툴인 스케치나 Adobe XD로 넘어가고 있다는 것이다.
스케치가 아쉽게도 맥(MAC)에서만 실행되고 윈도우 버전이 없는 것이 최대 약점인 가운데 맥(MAC) 버전 뿐만 아니라 윈도우 버전까지 모두 가지고 있는 Adobe XD를 살리기 위한 Adobe의 절실한 노력이 성과를 거둘 수 있을지가 관전 포인트이다.
