화면 설계 UI 설계 4/4

화면 설계 UI 설계

UI 설계 도구

UI 설계 도구의 개념

• 사용자와 시스템 사이에 의사소통할 수 있도록 일시적 또는 영구적인 접근을 목적으로 만들어진 물리적, 가상적 매개체인 UI의 설계를 지원하는 도구

UI 개발 단계별 활용 가능한 설계 도구

분석

• UI 디자이너 역할 : UI 표준설계
• 개발자 역할 : 화면 프로토타이핑, 화면 정의, 보고서 정의
• UI 패턴, UI 모델링

설계

• UI 디자이너 역할 : 디자인 시안 제작, 화면 뎀플릿 제작
• 개발자 역할 : 화면 설계, 보고서 설계, 응용 아키텍처 구현
• UI 설계

구현

•  
• 개발자 역할 : 화면 개발
• 프로토타이핑 툴

UI 설계 도구의 유형

화면 설계 도구

파워 목업(Power Mockup)

• 파워포인트에 추가 메뉴를 설치해 목업 기능을 사용할 수 있도록 지원하는 툴
• 파워포인트에서 미리 제작해 놓은 레이아웃, 컴포넌트, 내비게이션 등 다양한 목업을 드래그해서 사용할 수 있음

발사믹 목업(Balsamiq Mockups)

• 스케치한 느낌으로 빠르고 심플하게 서비스 콘셉트를 전달할 수 있는 목업 도구
• 디테일한 화면 구성보다는 간단한 스케치에 활용

카카오 오븐(Oven)

• 카카오에서 제작한 온라인 프로토타이핑 도구
• 직관적인 인터페이스가 장점으로 처음 사용하는 사용자도 손쉽게 화면을 그릴 수 있고, 온라인으로 제작한 화면을 QR코드와 단축 URL을 통해 공유

프로토타이핑 도구

UX핀(UXPin)

• 웹 브라우저를 통해 와이어프레임과 프로토타이핑 작업을 동시에 할 수 있는 도구
• 구글 글라스에 포함한 다양한 디바이스 환경에 맞추어 설계할 수 있으며, 다양한 목업 지원 가능

액슈어(AXURE)

• UI 설계보다는 스토리보드에 포함되는 정책, 플로 차트, 디스크립션까지 모두 작성 가능한 도구

네이버 프로토나우(ProtoNOW)

• 네이버에서 만든 프로토타이핑 툴로 스토리보드, 플로 차트 등의 기능 지원 가능 도구

UI 디자인 도구

스케치(Sketch)

• 다양한 목업 & 템플릿을 활용한 레이아웃 중심의 UI 디자인 설계 지원 도구

어도비 익스피리언스 디자인 CC(Adobe XD)

• UI 디자인에 최적화된 툴로 쉽고 직관적인 인터페이스를 제공하는 도구
• 포토샵, 일러스트와 연동 지원

UI 디자인 산출물로 작업하는 프로토타이핑 도구

인비전(Invision)

• 포토샵, 스케치 등으로 디자이너가 작업한 작업 결과를 사이트에 업로드한 다음, UI를 연결해 간단한 인터랙션 적용이 가능한 도구

픽사에이트(Pixate)

• 2015년 구글이 인수한 프로토타이핑 툴로 현재 아마존, 애플, 페이스북, 구글 등 다양한 회사에서 사용
• 모바일 앱 프로토타이핑에 최적화되어 있고, 디테일한 인터랙션을 설정할 수 있는 도구

프레이머(Framer)

• 커피 스크립트(Coffee Script)라고 하는 개발 언어를 사용하는 코드 기반의 프로토타이핑 도구
• 코드 기반으로 작동되어 실제 작업물과 흡사하게 작동