헷갈리는 용어 정리
- 와이어프레임(wireFrame) : UI 중심의 화면 레이아웃
- 목업(Mockup) : 실물과 흡사한 정적인 형태의 모형
- 프로토타입(Prototype) : 다양한 인터랙션이 결합되어 실제 서비스처럼 작동하는 모형
- 스토리보드(Storyboard) : 정책, 프로세스, 와이어프레임, 디스크립션 등이 모두 포함된 설계문서
컨셉 > 와이어 프레임(UI 중심 레이아웃) > 목업디자인 (정적) >프로토타입(동적) > 퍼블리싱
일반적인 프로세스
프로토타이핑 툴은 작업 순서에 따라 2가지 그룹으로 구분할수 있음
- 기획 단계에서 사용하는 툴로 화면 UI 설계 및 인터랙션 적용에 최적화된 툴
- 디자인 작업 후 사용하는 툴로 디자인된 이미지의 인터랙션 적용에 최적화된 툴
화면 설계 툴
- 파워 목업
– 파워 목업은 파워포인트에 추가 메뉴(add-on) 을 설치해 목업 기능을 사용할수 있도록 지원하는 툴. 미리 제작해 놓은 레이아웃, 컴포넌트, 네비게이션 등 다양한 목업을 드래그해서 사용 가능 - 발사믹 목업
– 스케치한 느낌으로 빠르고 심플하게 서비스 컨셉을 전달할 수 있는 목업 툴. 디테일한 화면 구성은 어려우나 간단히 스케치할때는 파워포인트보다 편리하게 작업 가능 - 카카오 오븐
– 다음 카카오에서 제작한 온라인 프로토타이핑 툴. 직관적인 인터페이스가 장점으로 처음 사용하는 사용자도 손쉽게 화면을 그릴 수 있고, 온라인으로 제작한 화면을 QR코드 및 단축 url을 통해 공유할 수 있음. 발사믹 목업과 마찬가지로 디테일한 설계보다는 서비스 컨셉을 간단히 공유하기에 적합
프로토타이핑 툴
- UX핀 (UXPin)
– 웹 브라우저를 통해 와이어프레임과 프로토타이핑 작업을 동시에 할 수 있는 툴. 구글 글라스를 포함한 다양한 디바이스 환경에 맞추어 설계가 가능하며, 다양한 목업을 지원하는 걸로 유명함.
단점 : 외국인이 많이 활동하는 저녁 시간때에 툴의 속도가 느려짐 ㅋㅋㅋㅋ
>> 와이어프레임부터 프로토타입까지 한 번에 제작하고 싶은 사용자에게 적합 - 액슈어(AXURE)
– 위에 소개한 여러 툴들이 화면 UI 설계에 포커스 되어있는 반면, Axure는 스토리보드에 포함되는 정책, 플로우 차트, 디스크립션까지 모두 작성가능하도록 지원하고 있음. 팀프로젝트 협업도 가능하기때문에 국내 기획환경에 가장 적합한 툴
단점 : 가격이 비쌈 - 네이버 프로토나우
– 네이버에서 만든 프로토타이핑 툴. Axure와 비교하면 전체적인 완성도가 떨어지지만, 무료로 사용할 수 있다는 점이 메리트
UI 디자인 툴
- 스케치 (Sketch)
– 디자인 툴은 꽤 오랜시간 포토샵이 독점했으나, 최근 네덜란드 ‘보헤미안 코딩’팀이 만든 UI 디자인 프로그램 스케치가 출시되면서 많은 디자이너가 이용중 - Adobe XD
– 어도비에서 출시한 UI 디자인 & 프로토타이핑 툴. 스케치와 마찬가지로 UI디자인에 최적화된 툴로 쉽고 직관적인 인터페이스가 장점. 프로토타입 기능을 탑재하고 있어 UI디자인 후 인터랙션을 빠르게 적용하고 시연해볼 수 있음.
디자인 산출물로 작업하는 프로토타이핑 툴
- 인비전 (Invision)
– 디자이너가 작업한 작업물을 사이트에 업로드한 다음, UI를 연결해 간단한 인터랙션 적용 가능. 최고 강점은 협업 기능으로, 프로젝트 참여자간 다양한 형태로 피드백 주고받기 가능 - 픽사에이트(Pixate)
– 구글이 인수한 프로토타이핑 툴로, 모바일 앱 프로토타이핑에 특화되어 있음. 인비전, 마블, 플린토보다 더욱 디에틸한 인터랙션을 설정할 수 있음
