Mockup, Prototyping 도구 소개

제가 사용해 본 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 공유 가능