앱을 만들 때 알아두면 좋은 것들

앱을 만들 때 알아두면 좋은 것들

일반적으로 앱을 만들 땐 기획, 디자인, 개발 이렇게 나뉘는 경우가 많다. 보통 각 분야를 한명씩 맡아서 하게 된다. 혼자서 할 땐 이 3가지를 모두 스스로 해야하는데, 실제로 개발에 들어가기 전에 알아두면 좋은 것들을 정리해보았다.


#간단한 기획

제대로 된 앱 디자인을 하기 전에 간단하게 기획서를 적는 것이 좋다. 처음부터 이것 저것 다양한 기능을 넣는 것 보다는 간단하게 한두 가지의 기능만 생각하는 것이 좋다. 간단하게 기획서를 작성했으면 실제로 사용자가 어떠한 순서로 어떠한 화면을 거쳐가게 만들건지 스케치를 해본다.

예) 첫 화면 -> 로그인 버튼 탭 -> 로그인 화면 -> 앱 홈 화면
|-> 회원가입 버튼 탭 -> 회원가입 화면 -> 앱 홈 화면

각 화면에 어떤 버튼과 메뉴 그리고 정보를 나타 낼 건지 간단한 스케치를 만들어준다.


#디자인 툴

바로 개발에 들어가기 보다는 실제로 구현하려고 하는 화면을 미리 디자인 해 보는 것이 좋다. 개발을 하면서 이것저것 시도하며 바꿔보는 것 보다는, 디자인을 어느정도 만들어 놓고서 그걸 그대로 따라서 어떻게 구현 할 것인지에만 집중해서 개발하는게 훨씬 쉽다. 실무에서 디자이너와 개발자가 따로 나뉘어져 있는 이유이기도 하다.

디자인 툴로는 자주 쓰이는 것들로 크게 3가지 툴이 있다.

  • Sketch: 맥 전용. 한번 구입시 지속 사용 가능. 업그레이드 하고 싶을 땐 추가 비용 지출
  • Figma: 개인 사용 무료
  • Adobe XD: 개인 사용 무료

1~2년 전까지만 해도 무료로 사용 할 수 있는 툴이 없었다. 실무에서 다양한 사람들과 협업을 해야 한다면 유료 플랜을 비교해가며 사용하는 것이 좋겠지만 (다른 사람들이 사용하고 있는 툴에 맞춰야 할 필요도 있겠다), 개인적으로 사용할 거라면 Figma 혹은 XD가 지금은 무료로 사용 할 수 있는 플랜이 있고, 엄청 전문적인 걸 하지 않는 이상 기본적인 것들은 둘 다 가능하기 때문에 둘 중 아무거나 사용하면 된다.

어느 프로그램을 사용하든 iOS와 Android의 기본적인 디자인 UI Kit는 다운 받는 것이 좋다. 아이콘과 컴포넌트들을 복사 붙여넣기로 쉽게 사용할 수 있기 때문이다.


#디자인 아이디어

디자인 아이디어를 얻을 수 있는 사이트들을 둘러보면 좋다. iOS든 Android든 기본적인 가이드라인을 제시하고 있다. iOS는 Flat Design, Android는 Material Design을 기본 틀로 잡고 있다.

가이드라인을 보면 기본 폰트, 폰트 크기, 마진 같이 필수 요소들에 대한 가이드를 제시하고 있다. 이것들만 잘 따른다면 비전문가도 무난한 앱 디자인을 만들 수 있기 때문에 시간이 있을 때 간단하게라도 훑어보는 것을 추천한다.

그 밖에 다른 사람들이 만든 디자인을 공유하고 있는 사이트들을 둘러보며 참고하는 것도 좋은 방법이다.


#색깔 아이디어

디자인에 있어 색깔은 중요한 요소이다. 너무 다양한 색깔을 사용하는 것도 좋지 않다. 색깔의 조합을 올려 놓은 사이트에서 아이디어를 얻으면 좋다.


#폰트

폰트도 중요한 디자인 요소 중에 하나다. 하지만 너무 다양한 폰트를 사용하는 건 오히려 디자인을 망칠 수 있기 때문에 왠만하면 1~2가지, 최대 3가지 정도로 한정해서 쓰는 것이 좋다. 폰트도 저작권이 있기 때문에 사용하기 전에 잘 알아보고 사용해야 한다. 잘 모를 경우는 그냥 애플에서 제공하는 기본 폰트인 San Fransico를 사용하는 것도 나쁘지 않다고 생각한다.

그 외의 폰트들은 구글 폰트에 올라와 있는 것들을 사용하면 저작권 걱정을 하지 않아도 된다. 구글 폰트에 올라와 있는 폰트들은 모두 오픈 라이센스가 적용되어 있기 때문에 상업적 이용도 가능하다.


#일러스트 & 아이콘

전문적인 디자이너가 아니면 일러스트와 아이콘을 만드는 건 매우 어려운 일이다. 다행히도 무료로 사용 할 수 있는 그레픽과 아이콘을 모아둔 사이트가 있다.

일러스트, 로고, 포스트 등을 간단하게 만드는 걸 도와주는 사이트도 있다.

애플과 구글도 각각 아이콘 세트를 공개하고 있다.

물론 웹 개발자들은 모를 수 없는 Font Awesome도 빼먹을 수 없다.


이번 포스트에선 실제 개발에 들어가기 전에 알아두면 좋은 것들을 정리해보았습니다. 혹시 다른 좋은 추천 리소스/사이트가 있으면 댓글로 남겨주시면 반영하겠습니다 :)