design0gam

간혹 그라데이션, 또는 목업이 필요할 때가 있는데 이 때 필요한 두 가지 사이트가 있다.

(가끔씩 이렇게 좋은 사이트를 가져올테다.)

WebGradients

이 사이트에 들어가면 psd 또는 sketch로 180여가지의 그라데이션을 (유료)로 다운받을 수 있다.

개별로 사용하는건 무료이니 한꺼번에 받는 것이 아니라면 유용한 그라데이션 사이트이다.

Mockuuups

맥뿐 아니라 윈도우에서도 목업을 할 수 있는 좋은 프로그램이다. 무료로 이용할 수 있어서 요긴하게 사용할 수 있다. 앱을 소개하는데 있어 다양한 목업을 활용하는 것은 정말 중요한 요소 중 하나지만 적합한 목업을 찾고, 거기에 맞춰 앱 또는 서비스 화면을 등록하는 것이 그리 쉬운 일은 아니다. 'Mockuuups’은 다양한 목업에 원하는 이미지를 바로 삽입해 한 눈에 확인이 가능하며, 바로 다운로드를 할 수 있도록 도와주는 아주 유용한 툴이다. 무료로도 사용 가능하지만, 월 5달러를 결제할 경우 프리미엄 콜렉션이라는 이름으로 제공되는 색다른 목업을 제공해주며 포토샵과 스케치로 불러와 작업을 할 수 있다.

앱 디자인을 포토샵으로 무사히 마치고 프로토타입을 시현하려고 하니 예전에 만든 마블말고 다른 프로그램을 사용하고 싶었다.

맥 프로를 가지고 있어서 스케치, 인비전, 크래프트, 인비전 스튜디오, 플린토 등등 안 찾아본 것이 없었다.

디자이너들이 가장 많이 사용한다는 툴을 사용해보고 싶었기에 스케치 완전 구매, 인비전 달별로 구매를 해서 프로토타입을 하려고 했더니!!!!!

도대체 애니메이션은 어떻게 GIF 로 만들 수 있는거야??

그래서 찾아낸 화면 리코딩 하는 프로그램 '겟캡'

겟캡

https://getkap.co

이 사이트에 들어가서 무료로 다운로드 받으면 화면캡처가 가능하다.

그 전에 애니메이션을 할 수 있는건 일단 인비전 스튜디오로 가능! 

유튜브 채널 중에 인비전 공식 채널이 있어서 튜토리얼 보고 배우려고 한다.

https://www.youtube.com/watch?v=TxdMkuyZURQ

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

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

구글에 '디자인 프로토타입'을 검색했을 때 수많은 유로 또는 무료 프로토타입 툴들이 존재하는데 그 중에 내가 사용한 툴을 남기고자 한다. 그 첫 번째는 바로 카카오 오븐(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