design0gam

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

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

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

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

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

겟캡

https://getkap.co

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

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

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

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

스타트업에서 웹과 앱디자인을 구축하면서 앞으로 이 브랜드를 어떻게 홍보 시킬 것인가에 대한 고민을 했다.

당연히 SNS 를 통해 알리는 것이 내 업무 중 하나라서,

페이스북. 인스타그램. 블로그. 트위터 이 4가지 플랫폼을 활용해서 브랜드 홍보 마케팅을 할 예정이다.

좋은 글이 있어서 가져왔다. 

출처 : 흡입력 있는 카드 뉴스 만들기 http://edgerank.co.kr/facebook_cardnews_1/

1. 클릭을 부르는 첫 장

첫 장에서 독자들에게 어떤 이득이 있는지 확실히 보여주는 것이 중요!

타이포그래피만으로도 눈에 띄게 주제를 전달 할 수 있다.

마찬가지로 '00가지의 00' 이라는 말로 독자들이 공감할 수 있는 정보를 제공하는 것이 중요

예컨대, 

1.여행갈 때 알아두면 좋은 팁!

2.여행갈 때 필요한 필수 앱 7가지

3.여행가기 전 체크리스트 7가지

등 이 사이에 끼워두면 자연스럽게 브랜드 홍보가 가능할 것이다.

- 핵심 정보를 첫 이미지에 넣어 관심 유도

2. 스토리텔링의 중요성

하반기 커리큘럼을 위한 탐구 시간

2018 상반기 커리큘럼 : 

스타트업 기획 단계부터 스타트업 웹사이트 구축

에펙 강의 3개월 듣고 홍보 영상 제작

2018 중반기 커리큘럼 : 

UX/UI웹디자인 3개월 듣고 웹사이트 구축1

스타트업 앱디자인

해커톤 2018

dailyui 100

2018 하반기 커리큘럼 : 

스타트업 홍보 마케팅 및 미팅

앱 디자인 강의 3개월 듣고 앱 구축1

오픈컬리지 디자인

2가지 새로운 툴 공부(인비전, 스케치)

포트폴리오

2017 작업물 스토리보드

2018 작업물 스토리보드(특히 스타트업)

개인이력서 (이동)

개인 프로젝트 : 

개인 프로젝트1

개인 프로젝트2

영상

그림

장기목표 : 

1. 일러스트 책 cocopinky /pinky 이야기

2. 2019 상반기 에이전시 이전(스타트업 실적확인 후)

3. 일본어 정복

스타트업 디자이너로 일하다보면 다양한 방법들이 필요하다.

출처 : http://www.mobiinside.com/kr/2017/01/19/andrewyhc_3_design/

이 글에서는 스타트업에서 디자이너가 아닌 문돌이가 디자이너 역할을 하기 위한 방법을 알려주고 있다.

1. CollectUI.com

콜렉트UI는 아까 얘기한 각 기능섹션 또는 유저태스크 별로 필요한 화면 디자인이나 인터렉션 디자인들이 잘 정리된 아카이브인데, 그 하나하나 퀄리티가 매우 뛰어나다. 예를들어서 온보딩 관련 디자인을 찾아보고 싶으면 왼쪽 사이드바에서 ‘onboarding’을 검색해 보면 해당 메뉴가 나오고 수 많은 앱들의 온보딩 화면들이 모아져 있다. 주로 아이폰 위주이긴 한데 가끔 안드로이드에 최적화된 디자인도 찾을 수 있다.

2. Behance의 Interaction Gallery

비핸스는 비전공자들도 많이 찾아보는 유명한 사이트가 됐지만, 이 갤러리를 아는 사람들은 드물거라 생각한다. 원래 옛날에 앱디자인갤러리 (http://www.appdesignserved.co/)라는 사이트가 비핸스에서 저런 고퀄 디자인 아트워크만 묶어서 보여줬었는데, 어도비에서 비핸스로 통합시킨 것 같다. 아무튼 전 세계의 잘나가는 디자이너들의 수려한 아트워크를 볼 수 있는 갤러리인데, 여기서 내 앱과 기능요건이 유사하거나 비슷한 분야에 있는 앱 위주로 아트워크를 찾아서 클리핑 한다.

3. 핀터레스트 검색

핀터레스트를 모르는 사람은 없어도 내 주변에 ‘핀터레스트 하고 있어’라고 말하는 사람은 한국에서 본 적이 없을 정도로 아직 우리나라 사람들한테는 생소한 사이트이다. 여기는 사람들이 스크랩 하고 싶은 자료들을 마치 냉장고나 칠판에 핀 꼽아서 수집해 놓듯이 모아놓는 사이트인데 역시 디자이너들이 많이 쓴다. 내가 만일 앱 온보딩 디자인을 여기서 찾고자 하면 Mobile app onboarding라고 치고, 특정 버전의 온보딩만 검색해 보고자 하면 app onboarding iOS, 또는 app onboarding android 이런 식으로 검색하면 된다.

이 외에도 초보 디자이너를 위한 방법이 공유되어있다.

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

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

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

디자인 스킬을 쌓는 다양한 방법 중, 좋은 사이트를 발견해서 공유하려고 한다.

Dailyui(데일리유아이)라는 사이트인데 무료고 주말을 제외한 주 5일동안 디자인 주제를 던져준다.

http://www.dailyui.co/

이 사이트에 이메일만 넣고 가입하면 주 5일 디자인 주제를 던져주면 이 주제를 스스로 분석하고 찾아보면서 만들어 올리면 된다.

예를 들어,

이런 식으로 Daily UI #001 Sign Up 이라는 주제로 이메일이 오면 이 주제에 맞는 'Sign Up'디자인을 자유롭게 찾아보고 분석하면서 만들면 된다.

현재 Daily UI #003까지 한 결과물은 다음과 같고, 내 드리블에 올려놓았다.

https://dribbble.com/kimsodyssey

#001 Sign Up

#002 Credit Card Checkout

#003 Landing Page

이런 식으로 데일리 UI를 찾아보고 분석해보면서 직접 만들 수 있는데 총 100일동안 진행이 된다. 약 3개월 이상(주말제외니까) 동안 스스로 디자인에 대해 고민하고 무엇보다 다른 사람들의 작품도 찾아보면서 디자인 스킬을 쌓기 좋다.

앞으로 100개의 daily ui를 모두 마친 뒤 비핸스에 #001-#100을 한 번에 올려 정리하는 것이 목표이다.

디자인 스킬 쌓기, 개인 프로젝트로도 손상이 없으니 도전 해보길!

디자인영감 드리블 ->

https://dribbble.com/design0gam

디자이너라면 필수인 포트폴리오, 그 중에 브랜드 디자인, UI/UX에 관심이 생겨 찾아보던 와중에 '해외 유명 브랜드 디자이너 포트폴리오'를 담은 사이트를 보게 되었다. 하나의 작업물에도 엄청난 툴과 노력이 엿보이는 사이트인데 하나씩 보고 분석하기 위해 사이트를 공유하기로 했다.

해외 유명 브랜드 디자이너 포트폴리오

http://cofolios.com/#modal-close

이 사이트에 들어가면 

페이스북을 비롯해서 구글, 애플, 아마존 등 다양한 브랜드의 디자이너들이 남긴 포트폴리오 사이트로 넘어갈 수 있다.

매우 흥미로운 작업물들이 많아서 포트폴리오를 만들 때 참고 할 수 있을 것이다.

디자인을 업으로 삼고, 내 삶의 주체가 나라는 것을 명심한다.

현실에 안주하지 말고 무엇이든지 성장할 수 있는 사람이 되어야 한다.

티스토리에 디자인을 주제로 한 내 블로그를 새롭게 파면서 디자인 목표, 크게는 내 인생 목표를 세우고 싶었다.

인생 목표

1. 커다란 인생 목표

디자인에 대한 두려움 극복, 디자인 전문가가 되기.

2. 10년간 목표

디자인 업무를 기획하고 진행하면서 계속해서 이직하고 실력을 쌓는 디자이너가 되기

3. 1년간 목표

Bngo 프로젝트가 마무리 되고 디자인 업무가 마무리 된다면 포트폴리오를 가지고 2019년 상반기 전으로 에이전시로 이전하기

4. 6개월 목표

-Bngo 프로젝트 및 개인 프로젝트를 진행하기

-개인 프로젝트 : 아이콘 만들기, 채식빵 사이트 만들기, 레코드 브랜드 디자인 하기, 리디자인 하기

5. 3개월 목표

-데일리 UI 100일 챌린지를 통해 UI 스스로 배워나가기

-최대한 많이 보기 많이 분석하기

6. 1개월 목표

-개인 프로젝트 1개월 단위로 만들어 비핸스와 노트폴리오에 올리기

-드리블에는 데일리로 올릴 수 있는 작업물들

-공모전에 도전하기

7. 데일리 목표

-데일리 UI 챌린지 하루에 한 개씩

-디자인 전문 서적 일주일에 한 권씩 읽고 티스토리에 남기기

-디자인 정보들 팁들 특히 툴에 관련하여 많이 보고 티스토리에 하루에 한 개씩 남기기

이외의 내 인생을 즐기기 위한 나만의 라이프스타일 만들기 +

- 직장인 모임 이주일에 한 번 이상 참여(배드민턴, 영화, 와인, 전시, 독서, 일본어, 디자인, 여행)

- 가족과 함께 보내는 시간(식사, 운동, 여행)

- 10월에 일본 여행 엄마랑 가기

- 내가 그리고 싶어하는 일러스트 부담없이 스트레스 받지 말고 그리기

- 일본어 한 달 3만원 투자해서 공부하기 제 2외국어는 절대로 낭비가 아니다.

내 인생의 주체는 나다. 그걸 명심하자. 내가 행복한 것, 나를 불안하게 만드는 것들로 나를 갉아먹지 않게 하자.

내가 불안한 이유는 아무것도 안하기 때문이다. 하나씩 내가 좋아하는 것들 내가 잘할 수 있는 것들을 만들자.

디자인을 업으로 얻었다면 개인 작업을 저장하고 이를 포트폴리오로 활용할 수 있어야 한다.

그래서 티스토리를 새롭게 만들었고 내 작업물들, 공유하고 싶은 디자인 소스들, 그리고 디자인 영감에 대한 글들을 올리고자 한다.

첫 번째 나의 티스토리 글은, 우선 디자인 포트폴리오를 만드는 사이트에 대해 적을 것이다.

너무 많은 사이트가 있지만 내가 사용하고 있는 드리블, 비핸스, 노트폴리오를 손꼽아보았다.

1. 드리블 (https://dribbble.com)

가장 쉽게 올릴 수 있는 드리블, 드리블에 가입하게 되면 400*300 또는 800*600사이즈로 된 작업물을 올리게 된다. 엄청난 퀄리티의 완성된 작업물이 올라오는 비핸스보다는 상대적으로 작품을 올리는데 부담은 없다. 로고, 아이콘, 일러스트, UI등 하루에 한 개 씩 올리기에 적합한 사이트이다. 현재 데일리유아이라는 사이트로 디자인 챌린지 100일을 진행하고 있고 그 작업물을 드리블에 올리고 있다.

2. 비핸스(https://www.behance.net)

비핸스는 뭔가 고퀄이다. 하나의 작업물도 완성도가 있어야 올릴 수 있는 느낌?! 그래서 현재 비핸스에는 작업물을 하나도 올리지 못한 상황이다. 개인 프로젝트로 로고부터 시장분석 그리고 웹, 앱까지 만들어지고 난 뒤 한 개씩 올리기 시작할 것이다. 물론 현재 스타트업 회사에서 진행 중인 프로젝트도 비핸스에 올리기에 적합할 것으로 보인다.

3. 노토폴리오 (https://notefolio.net)

새롭게 만들어진 한국형 비핸스, 노토폴리오이다. 지금 작업물을 3개 올려놓았지만 이곳에서도 비핸스와 마찬가지로 작업물을 조금 더 고퀄로 만들어 올릴 필요가 있다. 다양한 매거진, 스토어, 아카데미, 공모전을 공유할 수 있고 해외형보다는 국내형이라서 만약 국내 디자인 업계에 취업을 선호한다면 노트폴리오도 나쁘지 않아 보인다.

앞으로 이 세가지 플랫폼에 내 디자인 작업들이 차곡차곡 올라올 것이다.

디자인을 급하게 하지말되 많이 보면서 꾸준히 만들어 성장해보자.