Mockup, Prototyping 도구 소개
Published in
4 min readDec 10, 2020
제가 사용해 본 Prototyping 도구(PowerMockup, Oven, Figma)에 대해서 소개하겠습니다. 프로토타이핑 도구를 사용하면 단순히 그림을 넘어 UX측면에 더 집중하고, 누락된 흐름을 찾을 수 있어서 좋았습니다.
1. PowerMockup
Power Point를 활용한 Mockup 및 Wireframe 도구
1.1. 기본 정보
- 제작사 : Wulfsoft
- URL : https://www.powermockup.com/
- 가격 : 유료 (Trial version 제공)
- 학습 난이도 : 하 (PPT만 쓸줄 알면 OK)
1.2. 장점
- Power point로 작성하기때문에 새로 배울 필요가 없음
- PPT의 기본도형으로 미리 잘 작성된 컴포넌트들을 그대로 사용
- 다른 도구로 작성하면 산출물용/보고용 문서로 다시 만들어야 하지만, PPT로 만들기 때문에 다시 옮길 필요가 없음(PPT로 옮기고 있다면 강력 추천!)
- 파일을 받는 사람도 PPT로 공유 가능
1.3. 만들어본 화면
- 테스트/시연
- PPT 프리젠테이션 기능으로 수행 - 아이콘/컨트롤 등
2. Oven (Beta)
HTML5기반 무료 웹/앱 프로토타이핑 도구
2.1. 기본 정보
- 제작사 : Kakao Corp.
- URL : https://ovenapp.io/
- 가격 : 무료
- 학습 난이도 : 중(일반적인 저작도구 쓸줄 알면 OK)
2.2. 장점
- 웹기반으로 작성 후 링크를 쉽게 공유가능
- 미리 작성된 컨트롤들을 사용
2.3. 만들어본 화면
- 테스트/시연
- 링크로 쉽게 전달하고 폰/Web에서 테스트 가능
- 아이콘/컨트롤 등
- Share
- QR코드와 URL로 공유 가능
3. Figma
Web기반 실시간 공동 협업이 가능한 UI 도구
3.1. 기본 정보
- 제작사 : Figma Design
- URL : https://www.figma.com/
- 가격 : 3개 프로젝트, 2명 사용자까지는 무료
- 학습 난이도 : 상(UI디자인 도구 수준으로 사용 가능)
3.2. 장점
- Web기반 실시간 여러사람이 공동으로 편집이 가능
- 웹기반으로 작성 후 Present 링크를 쉽게 공유가능
- 직관적인 인터페이스로 UI 상호작용 및 애니메이션 제작이 가능
- 클릭/호버/버튼 동작 등으로 동적인 프로토타이핑 가능
- 외곽 핀을 조정하는 것만으로도 컴포넌트들을 크기에 맞게 자동 조정
3.3. 만들어본 화면
- 간단한 기능은 쉽게 배울 수 있지만, 직관적으로 사용하기는 어려움
- 화면 전환, 메뉴, 다이얼로그 전환 animation 등 처리 가능
- 테스트/시연
- Share
- URL로 link 공유 가능