사이드 프로젝트로 처음 앱을 기획하고 디자인하는 방법 (2)디자인

BACKGROUND

사이드 프로젝트를 통해 성장하고싶은 분들을 위해

제가 아는 한에서 사이드 프로젝트를 시작하는 방법을 (1)기획 ,(2)디자인 2편에 나누어 공유드리려 합니다. 

앞선 (1)기획편에 이어서 (2)디자인편을 써보려고 합니다.

사이드 프로젝트 과정

제가 정리해본 사이드 프로젝트의 과정입니다. 

(2) 디자인

5. 와이어프레임

기획과 디자인의 경계에 있는 와이어프레임 단계입니다. 

구글스프린트를 기반으로 하여 앱의 기능을 확정하였다면, 와이어프레임을 간단하게 그려봅니다.

손그림이나 XD,SKETCH 등 알아볼 수만 있다면 툴은 상관없습니다.

와이어 프레임 = 'WIRE' + 'FRAME' 

와이어(철사)로 프레임(뼈대,골격,구조)를 그린다는 의미로, 처음에는 가볍게 손그림으로 시작하는 편입니다. 

그 이후 조금씩 고도화하여 디자인만 얹으면 완성될 수 있도록 만들어갑니다.

 

예시로 제가 진행했던 사이드 프로젝트의 와이어프레임 진행과정을 가져와봤습니다.

완성된 모습을 보고싶으시다면..  https://www.behance.net/gallery/78871589/Weather-Bear

                       

워크플로우 = 'WORK' + 'FLOW'

워크(작동) + FLOW(흐름)이라는 의미로, 어떻게 작동될 것인지 흐름을 정리하는 단계입니다. 

사용자입장에서 모든 인터랙션이 유기적으로 작동하도록 설계해야합니다.

     와이어프레임에 워크플로우가 추가된 모습입니다.

6. UI / GUI 디자인하기 (XD,SKETCH)

디자인을 할 때에는, 섬세하게 신경쓸 부분이 참 많습니다. 폰트,색상, 타이포그래피 등등..

이 글은 사이드 프로젝트의 과정을 요약하여 소개하는 글이기에 

가장 기본적인 부분과 제가 중요하다고 생각하는 부분을 위주로 설명하겠습니다. 

폰트

꼭 필요한 경우를 제외하고는, 저는 기본 시스템 폰트를 사용하는 편입니다. 

그 외 폰트를 사용하고 싶다면, 비상업적용도 및 상업적 용도 사용 가능 여부를 체크하여야합니다.

아래는 운영체제 별 기본 시스템 폰트입니다.

-안드로이드

영어: ROBOTO  

한글:  본고딕 (NotoSans)

-아이폰

영어:  SF (SANFRANCISCO)

한글:  SD고딕Neo (산돌 고딕 네오)

아이콘

-안드로이드 

머터리얼 디자인 아이콘 참고 https://material.io/resources/icons/?style=baseline

-IOS

IOS 휴먼가이드 아이콘 참고 https://developer.apple.com/design/resources/

에셋 관리

디자인 시 제가 요즘 가장 신경쓰는 부분은 스타일가이드와 에셋 관리입니다. 

이러한 스타일가이드와 에셋 관리가 있으면 개발과 디자인에 있어서 훨씬 체계적으로 ,효율적으로 디자인할 수 있습니다. 

하지만, 역시 어려운 부분이라 저도 조금씩 체득 중입니다 :) 

스타일 가이드 제작과 에셋 관리를 위해서 우선 체계적인 네이밍이 기본 뼈대라고 생각합니다.

제가 주로 사용하고 있는 에셋 네이밍 규칙입니다

 ( 이 글을 많이 참고하여 효과적으로 사용중입니다. https://brunch.co.kr/@pizzakim/26 )

-에셋 네이밍

'효율적인 관리', '소통'을 위해서 그리고 '이름만 봐도 어떤 아이콘인지 잘 알기 위해서' 에셋의 잘 정리된 이름(네이밍)이 필요합니다. 

개발자분들마다 네이밍 방식이 조금 다를 수 있는데, 이 부분을 합의해두면 좋습니다. 

저의 경우는, 이런식으로 네이밍하면 괜찮을까요? 여쭤보는 편입니다. 

7. 제플린 업로드

     제가 했던 사이드 프로젝트의 제플린 화면입니다

디자이너가 화면을 제플린에 업로드하면, 개발자는 필요에 따라 다양한 크기와 확장자로 다운받을 수 있습니다.

스타일 가이드도 관리할 수 있기에 매우 편리합니다.

-제플린 업로드 시 참고

• 참고 사이트(일회용 메일): yopmail.com

• 디자이너들끼리는 메일주소를 만들어 공유하고있습니다.

8. 인터랙션 만들기 (에프터이펙트&로티)

위와 같은 인터랙션을 만들기 위해서 LOTTIE를 주로 사용합니다.

LOTTIE는 에어비앤비에서 효과적인 인터랙션을 위해 개발되었습니다. 

사용방법은 

(1) 애프터이펙트에 BODYMOVIN 플러그인을 설치하고, 

(2) 애프터이펙트로 영상작업을 한 후 내보내기만 하면 됩니다. 

(3) BODYMOVIN이 개발자가 사용할수있도록 json파일로 내보내기를 해줍니다. 

(4) json파일을 개발자에게 전달합니다.

개발자가 이미지 파일 위치에 json파일을 넣어주면 앱에 인터랙션을 탑재할 수 있습니다.

-참고 링크

BODYMOVIN 플러그인 다운로드 https://github.com/airbnb/lottie-web

로티 예시 및 미리보기 사이트 https://lottiefiles.com/