🔗 [UX/UI] 국내외 Prototype Tool 및 경험상 난이도 (3/6)

 

저는 Figma를 Prototuype Tool 로 사용하고 있는데, 

간단한 인터렉션(주로 이동)만 구현해서 

빠르고 쉽게 의견을 나눌 수 있어 좋은 듯 합니다. 
그리고 사용하다보면, 스킬이 늘어서 점점 디자인스럽게 구현을 하게 된다는... 🏄🏻‍♀️🤸🏻‍♂️🤾🏻‍♂️

 

 

 

 

3. Prototyping

1) Adobe Photoshop 
- Adobe에서 만든 그래픽 디자인 툴
- http://www.photoshop.com/ 

Photoshop apps - desktop, mobile, and tablet | Photoshop.com

 

 

 

2) Sketch3 
- Symbols과 Shared Style 등을 통해  UI 요소를 만들고,
  Zeplin과 연동하여 개발자와 결과물을 공유할 수 있는 툴
 단, Mac에서 작업하는 파일로, 웹에서 보기 어려운 단점이 있음 
- https://www.sketchapp.com/ 

It all starts with Sketch

 

- 웹에서 Sketch 파일 볼 수 있는 뷰어 
- https://animaapp.github.io/sketch-web-viewer/

Sketch Web Viewer

 

 

 

3) Protopie ☆☆
- 깔끔한 UI와 학습하기 쉬운 기능 및 3D 터치와 디바이스 센서를 통한 인터랙션까지 구현 가능한 프로토타이핑 툴.

- 국산 툴로 알고 있는데, 사용하다가 피그마로 옮겨가긴 했지만 좋은 툴이라고 생각합니다. 
- https://www.protopie.io/ 

ProtoPie | The interactive digital prototyping tool

 

 

 

 

4) Origami 
- 페이스북 디자이너가 만든 Mac용 프로토타이핑 툴.
  Sketch와 연동되며 실시간으로 결과물 확인 가능

- http://origami.design/ 

Origami Studio — Origami Studio 3

 

 

 

5) Marvel 
- Sketch, Photoshop과 연동 가능한 프로토타이핑 툴. 
  심플한 UI로 쉽게 인터랙션과 플로우 설계 가능
- https://marvelapp.com/ 

Marvel - The design platform for digital products. Get started for free.

 

 

 

6) FLINTO 
- Mac에서 구동 가능한 프로토타이핑 툴.
  간단한 조작만으로 매우 상세한 인터랙션과 플로우 추가 가능 

- https://www.flinto.com/ 

Flinto

 

 

 

7) Invision 
- 쉽게 GUI 디자인에 인터랙션을 추가 및 협업자와 피드백을 주고 받을 수 있는 툴
- https://www.invisionapp.com/ 

 

 

 

 

Figma

 

8) Figma ★★★
-  간단한 인터랙션을 추가하여 의견/피드백을 주고 받을 수 있는 프로토타이핑 툴.  
-  https://www.figma.com/

Figma: the collaborative interface design tool.

☞ Beta 버전 더 예뻐졌네요~ 
https://www.figma.com/file/Tu7BBU3J7IeGUUNsDfRbvW/Untitled?node-id=0%3A1

 

 

 

 

---

 

 

다음엔 Analytics & Metrics Tool 을 소개할게요~