초보자가 사용하기 쉬운 UI Prototype 그리는 툴 카카오오븐(Kakao oven)

나는 GUI디자이너, UI/UX 기획자가 아닌 한낱 개발자이다.

그런데 어떤 우연한 계기로 모바일 UI 프로토타입을 만들어야할 일이 생겼다.

내가 사용해야할 GUI 그래픽은 지도, 메신저, 각종 아이콘, 이미지를 로드하여 쓸 수 있는 것이었다.

처음에는 Fluid UI를 사용하여 그렸는데, 이 온라인 툴을 사용하여 이미지를 로드하기 위해서는 비용이 들어서 다른걸 찾아보았다.

그러다가 접하게 된 온라인 UI 구성 툴이 카카오에서 나온 Kakao Oven이다.

Kakao Oven

https://ovenapp.io/

1. 카카오 오븐은?

HTML5-Powered Free Web/App Prototyping Tool by Kakao 이며, 카카오에서 카카오 UI를 기획하기 위해 개발한 툴이다.

카카오 내에서만 쓰다가 많은 사람들이 편하게 사용하면 좋겠다 라는 생각으로 무료로 배포하여 사용할 수 있게 만들었다.

2. 카카오 오븐에서 제공하는 기능

- 온라인 툴이기 때문에 인터넷만 되면 어디에서든 수정이 가능하다.

- 공유 기능으로 특정인에게 공유하거나, 전체 공유를 할 수 있다.

- 각종 버튼, 레이블, 키보드, 지도, 아이콘, 텍스트뷰, 테이블 등 UI를 기획할 수 있는 요소들을 제공한다.

- 사용자가 만든 이미지를 로드하여 UI에 추가할 수 있다.

- 손쉬운 내려받기 기능으로 완성된 UI를 이미지파일로 다운받을 수 있다.

- 그 외에도 텍스트 컬러 바꾸기, PNG아이콘 색깔 바꾸기 등의 다양한 기능을 제공한다.

- 프로젝트 대쉬보드를 제공하여 프로젝트 관리에 용이하다.

- 프로젝트 복사로 재사용이 가능하다.

- UI 동작 미리보기

3. 카카오 오븐 맛보기

새로운 프로젝트 만들기를 하면 프로젝트 이름, 설명, 기본화면사이즈 선택, 테스트 URL공유 옵션을 선택할 수 있다.

프로젝트를 만들었을 때 첫화면이다.

왼쪽에는 페이지를 추가할 수 있는 칸이 있고, 가운데가 UI를 꾸밀 수 있는 구역이고, 오른쪽이 요소, 아이콘, 이미지, 보관함이 있다.

오른쪽 칸에서 다양한 컴포넌트들을 끌어와 배치하면 된다.

요소탭에서 제공하는 이미지들 중 일부이다.

왠만한 UI는 꾸밀 수 있도록 엄청 다양한 이미지들을 제공하고 있다.

아이콘탭의 이미지들이다. 

흑백 아이콘을 제공하는데, 색깔은 바꿀 수 있다.

아이콘 탭도 왠만한 아이콘은 다 있어서 따로 아이콘을 구하지 않아도 된다.

샘플을 만들어 보았다. 

위에 메신저 창을 만드는데 5분도 채 걸리지 않는다.

기본으로 제공하는 이미지들의 색감이 워낙 좋아서, 나같은 색깔알못 초보자들이 사용하기에 좋다.