IT ETC/IT 관련 사이트

화면설계 & 프로토 타이핑 툴 사이트

미웡할꺼야 2020. 11. 30. 23:32

[참고] IT 기획 연구소 - https://yslab.kr/94

 

용어 정리

  • 와이어프레임(Wireframe) : UI 중심의 화면 레이아웃.

  • 목업(Mockup) : 실물과 흡사한 정적인 형태의 모형.

  • 프로토타입(Prototype) : 다양한 인터랙션이 결합되어 실제 서비스처럼 작동하는 모형.

  • 스토리보드(Storyboard) : 정책, 프로세스, 와이어프레임, 디스크립션 등이 모두 포함된 설계 문서.

 

프로토 타이핑 툴은 작업 순서에 따라 2가지 그룹으로 구분할 수 있다.

  1. 기획 단계에서 사용하는 툴로 화면 UI 설계 및 인터랙션 적용에 최적화된 툴.

  2. 디자인 작업 후 사용하는 툴로 디자인된 이미지의 인터랙션 적용에 최적화된 툴.

- 화면 설계 툴 -

 

파워 목업

파워 목업은 파워포인트에 추가 메뉴(add-on)를 설치해 목업 기능을 사용할 수 있도록 지원하는 툴입니다. 파워 목업을 설치하면 파워포인트 상단에 PowerMockup 메뉴가 추가되고, 미리 제작해 놓은 레이아웃, 컴포넌트, 내비게이션 등 다양한 목업을 드래그해서 사용할 수 있습니다. 파워포인트에서도 직접 그릴 수도 있지만 미리 만들어놓은 샘플을 바로 사용할 수 있어 화면 설계 시간을 단축할 수 있습니다.

발사믹 목업

스케치한 느낌으로 빠르고 심플하게 서비스 컨셉을 전달할 수 있는 목업 툴입니다. 디테일한 화면 구성은 어렵지만 간단히 스케치할 때는 파워포인트보다 편리하게 작업할 수 있습니다. 영문은 그럴싸하게 보이지만 한글은 살짝 아쉽습니다.

카카오 오븐

전) 다음카카오에서 제작한 온라인 프로토타이핑 툴입니다. 직관적인 인터페이스가 장점으로 처음 사용하는 사용자도 손쉽게 화면을 그릴 수 있고, 온라인으로 제작한 화면을 QR코드 및 단축 URL을 통해 공유할 수 있습니다. 발사믹 목업과 마찬가지로 디테일한 설계보다는 서비스 컨셉을 간단히 공유하기에 적합합니다. 디자인 시안 이미지를 업로드해서 모바일 등의 디바이스에서 테스트해 볼 수도 있습니다.

  • 실행환경 : 웹 브라우저

  • 가격 : 무료

  • 추천 : 아이디어를 단 시간에 빠르게 스케치하고 싶은 사용자에게 적합함.

  • 학습 난이도 : 쉬움

  • 공식 사이트 : https://ovenapp.io/

- 프로토 타이핑 툴 -

 

UX핀 (UXPin)

웹 브라우저를 통해 와이어프레임과 프로토타이핑 작업을 동시에 할 수 있는 툴입니다. 구글 글라스를 포함한 다양한 디바이스 환경에 맞추어 설계가 가능하며, 다양한 목업을 지원하는 것으로 유명합니다. 실제 프로젝트에 UXPin을 도입했던 지인이 몇 가지 단점을 지적해 주셨는데요. 웹 브라우저 기반이다 보니 외국인이 많이 활동하는 저녁 시간 때에 툴의 속도가 느려지고, 윈도우에서 한글 타이핑 지원이 원활하지 않다고 합니다. 맥에서는 잘 된다고 하네요.

  • 실행환경 : 웹 브라우저

  • 가격 : 월정액, 프로 버전 기준 매월 $29

  • 추천 : 와이어프레임부터 프로토타입까지 한 번에 제작하고 싶은 사용자에게 적합함.

  • 학습 난이도 : 어려움

  • 공식 사이트 : https://www.uxpin.com/

액슈어 (AXURE)

위에 소개한 여러 툴들이 화면 UI 설계에 포커스 되어 있는 반면에, Axure는 스토리보드에 포함되는 정책, 플로우 차트, 디스크립션까지 모두 작성할 수 있도록 지원하고 있습니다. 팀 프로젝트로 협업도 가능하기에 국내 기획 환경에 가장 적합한 툴이라고 생각됩니다. 출력물의 경우 옵션을 조금만 설정하면 파워포인트만큼은 아니지만 보기 좋게 구성할 수 있습니다. 단점은 다른 툴들에 비해 가격이 비쌉니다.

- UI 디자인 툴 -

 

스케치 (Sketch)

디자인 툴은 꽤 오랜 시간 동안 포토샵이 독점해왔지만, 최근 네덜란드 '보헤미안 코딩'팀이 만든 UI 디자인 프로그램 스케치가 출시되면서 많은 UI 디자이너들이 이 툴을 사용하기 시작했습니다. 포토샵은 사진 편집에 최적화된 툴이기에 UI 디자인 외에도 광범위한 기능을 제공하고 있는데요. 스케치의 경우 UI 디자인에 꼭 필요한 기능만을 담고 있어 포토샵보다 좀 더 가볍고 편리하게 디자인할 수 있습니다.

 

직접 사용해 본 결과 파워포인트/키노트를 다뤘던 사람이라면 쉽게 적응할 수 있습니다. 따라서, 저와 같은 기획자도 디자인을 할 수 있는 기회가 생겼습니다. 창의적 감각을 발휘해야 하는 아트 디자인은 당연히 어렵겠지만, 다양한 목업&템플릿을 활용한 레이아웃 중심의 디자인이라면 화면 설계를 오래 했던 기획자가 도전해볼 만합니다. 스케치 프로그램과 연동되는 제플린 플러그인(https://zeplin.io)을 설치하면 디자인 가이드까지 자동으로 생성됩니다. 개인적으로는 Axure 외에 꼭 배우고 싶은 툴 중 하나입니다.

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

어도비에서 새롭게 출시한 UI 디자인 & 프로토타이핑 툴입니다. 스케치와 마찬가지로 UI 디자인에 최적화된 툴로 쉽고 직관적인 인터페이스가 장점입니다. 아트보드 기반의 화면 구성은 스케치와 유사하며 포토샵, 일러스트와의 연동을 완벽하게 지원합니다. 또한, 스케치에서 작업한 파일도 불러와서 사용할 수 있습니다. 스케치와 비교한 장점으로는 프로토타입 기능을 탑재하고 있어 UI 디자인 후 인터랙션을 빠르게 적용하고 시연해볼 수 있습니다. 하지만, 스케치 대비 기능이 제약적이고 공유 레퍼런스 및 연동 플러그인이 적어 아직은 스케치를 대체하기 어려울 것으로 보입니다.

- 디자인 산출물로 작업하는 프로토타이핑 툴 -

 

인비전 (Invision)

인비전(InVision)은 우버, 트위터, 에어비앤비 등을 고객사로 두고 있는 프로토타이핑 툴로, 2015년 4,500만 달러(한화 약 514억 원)의 투자를 유치했을 정도로 핫한 서비스입니다.

 

툴 사용방법은 간단합니다. 포토샵, 스케치 등으로 디자이너가 작업한 작업물을 사이트에 업로드한 다음. UI를 연결해 간단한 인터랙션을 적용할 수 있습니다. 인비전의 최고 강점은 협업 기능으로, 프로젝트 참여자 간에 다양한 형태로 피드백을 주고받을 수 있습니다.

프레이머 (Framer)

Coffee Script라고 하는 개발 언어를 사용하는 코드 기반의 프로토타이핑 툴입니다. 다른 프로토타이핑 툴은 html 기반으로 출력되어 인터랙션에 어색한 부분이 발생하기도 하는데, 프레이머는 코드 기반으로 작동되어 실제 작업물과 흡사하게 작동합니다. 하지만 작업 난이도가 있기에 다른 툴들에 비해 어려운 편입니다.

 

* 기획자라면 Axure 툴은 꼭 한 번 배워보길 강력 추천.

'IT ETC > IT 관련 사이트' 카테고리의 다른 글

구직사이트 관련 모음  (0) 2021.01.10
개발 외 지원 사이트  (0) 2020.11.30
개발 공부 및 알고리즘 문제 사이트  (0) 2020.11.03

'IT ETC/IT 관련 사이트'의 다른글

  • 현재글화면설계 & 프로토 타이핑 툴 사이트

관련글

티스토리툴바