디자인 UI 프로토타입 카카오오븐과 마블앱

처음 앱을 디자인 하기 시작할 때 무엇부터 해야할지 굉장히 막막했다.

사수도 없고 오로지 내가 찾아보고 직접 만들어봐야 했다.

구글에 '디자인 프로토타입'을 검색했을 때 수많은 유로 또는 무료 프로토타입 툴들이 존재하는데 그 중에 내가 사용한 툴을 남기고자 한다. 그 첫 번째는 바로 카카오 오븐(kakao oven) 그리고 마블앱(marvel app)이다.

카카오 오븐

https://ovenapp.io

이 사이트에 들어가면 일단 무료로 가입, 무료로 이용할 수 있다는 점이 가장 끌렸다.

처음에 로그인 후 들어가면 이렇게 프로젝트 대시보드를 생성할 수 있다.

왼쪽에는 생성된 대시보드들이고 오른쪽에는 UI 키트들이 있는데 외부에서 불러와도 되지만 필요한 툴을 거의 있다고 해도 무방하다.

-빠르고 쉽게 만들 수 있다.

-대시보드를 늘려서 사이즈를 조절하기 쉽다.

-링크를 연결해서 앱 구현을 할 수 있다.

-다른 사람과 공유하기 쉽다.

물론 이걸 만들기 전 기획 및 분석 단계에서는 아래와 같은 수고들이 있었지만 충분히 큰 역할을 한 프로토타입 툴이라고 볼 수 있다. 

맨 처음 사진은 손으로 먼저 그려본 프로토타입이다.

(카카오 오븐을 활용하여 만든 대시보드 1,2,3)

이렇게 만들어놓고 개발자와 같이 디자이너와 함께 보면서 고민하고 다시 수정하는 단계를 거친 후에 본격적인 앱 디자인을 시작할 수 있었다.

(카카오 오븐을 활용하여 만든 총 48개의 프로토타입)

그렇다면 이것이 끝이었는가?

아쉽지만 아니었다.

실제 앱에서는 어떻게 사용이 되는지 궁금했던 나는 개발자의 도움없이 핸드폰에서 직접 구현이 가능해보이는 앱을 발견했다.

마블 앱

https://marvelapp.com

웹으로도 직접 만들 수 있지만 내가 마블 앱을 활용한 것은 진짜 핸드폰에 담아 구현하는 것! 

핸드폰을 켜서 'Pop by Marvel' 앱을 다운받고 마블앱 사이트나 나처럼 카카오오븐에서 만들어놓은 프로토타입을 핸드폰으로 다운받는다. 

사실 바로 연동되게 하려면 마블앱 웹사이트에서 하는 것이 편하지만 카카오오븐이 더 편했기 때문에 하나씩 IMPORT해서 옮겼다. 

https://marvelapp.com/6j86ci3/screen/45120943

이게 내가 만든 앱 디자인 프로토타입인데, 공유하면 웹에서도 볼 수 있고 본인 핸드폰으로 키면 진짜 앱이 구현되듯이 움직인다.(내가 만들어놓은 링크에 따라)

(마블앱 프로토타입으로 만들어 본 Bngo 프로젝트)

카카오 오븐 그리고 마블앱을 무료로 이용하면서 실제 앱을 구현한 듯한 효과까지 줄 수 있어 앱디자인을 하는데 정말 많은 도움을 주었다.

카카오 오븐 사이트 : https://ovenapp.io

마블앱 사이트 : https://marvelapp.com