2탄. 앱 디자인 만드는 방법 및 꿀팁 (feat. 컴공 캡스톤 디자인 앱 개발 방법)

 

1탄. 공대생이 알려주는 어플 만드는 법 (feat. 컴공 캡스톤 디자인 앱 개발)

 

- 1탄에서 어플을 만드는 순서와 와이어프레임이 무엇인지에 대해 이야기했다.

 

- 이번 편에선 앱 디자인을 어떻게 만들어 가는지 기초적인 부분에 대해서 이야기를 하고자 한다.

 

---

 

디자인: 템플릿을 많이 활용하자

 

1. 디자인 툴

 

 

- 앱 디자이너는 1~2명이면 충분하다. 우리 팀의 경우 나 혼자 앱 디자인을 맡았고, 디자인 작업엔 4일 정도 걸렸다.

 

- 앱 디자인을 할 때 사용되는 툴은 보통 어도비 XD와 피그마로 나뉜다.

 

- 개발자가 개발할 때 VS Code를 사용하는 것처럼 앱 디자이너가 디자인을 할 때는 어도비 XD나 피그마같은 디자인 툴을 사용한다고 보면 된다.

 

- 어도비XD는 유료고 피그마는 부분 유료다.

 

- 두 툴 모두 기능은 비슷하니 마음에 드는 디자인 툴을 선택하면 될 거 같다.

 

- 나는 유튜브에 있는 어도비 XD 강좌 퀄리티가 좋아서 어도비 XD로 했다. 어도비 XD 자체가 무척 쉬운 디자인 툴이라 하루 정도만 만져봐도 대충 감이 오지만 강의를 보는 게 역시 가장 좋긴 하다.

 

- 만약 어도비 XD를 사용한다면 유튜버 마디아님 강의를 추천한다. 그 분 강의가 정말 상세하게 잘 나와있다.

 

 

재플린

 

- 앱을 디자인 할 때는 어도비 XD를 사용하고, 디자인 한 걸 다른 사람들과 공유할 때는 재플린이란 걸 사용한다.

 

- 이쯤되면 머리가 슬슬 아플 때가 됐다.

 

- 아직 개발에 대해선 이야기도 안 했는데 뭐 이렇게 디자인 관련해서 알아야 할 게 많을까 싶을 수 있다.

 

- 일단 너무 걱정하지 말라고 이야기하고 싶다. 디자인 툴들 자체가 직관적이고 이해하기 쉬워서 하루 이틀이면 익힌다.

 

- 그리고 재플린의 경우 개발자도 반드시 사용법을 알아놔야 한다. 앱 개발을 할 땐 디자이너와 협업해서 하는 일이 많은데 디자이너가 만든 작업물을 보통 이 재플린이란 걸 통해서 공유하기 때문이다.

 

 

- 재플린은 디자인 작업물 공유 툴이다. 어도비 XD 혹은 피그마에서 만든 앱 디자인을 XML 로 변환한 뒤, 팀원들과 디자인 작업물을 공유하는데 쓸 수 있다.

 

- 위의 이미지를 보면 로그인 페이지 디자인이 왼쪽에 보이고, 로그인 페이지의 이메일 입력란을 클릭하면 그 입력란의 XML 코드를 오른쪽에서 보여주는 걸 확인할 수 있다.

 

- 여기서 XML을 몰라도 괜찮다. 앱 개발을 할 때 가장 먼저 다루고, 배우게 될 XML이라 개발하면 금방 알게 된다.

 

- 일단은 디자인 작업물을 재플린이란 걸로 공유하는 구나~ 정도로만 알아두면 된다.

  

 

2. 템플릿

 

- 개발을 할 때 다른 사람이 만든 라이브러리를 사용해서 개발을 보통 한다. 디자인도 마찬가지다.

 

- 디자인 작업을 할 땐 꼭, 꼬옥! 다른 사람이 만든 템플릿을 사용해서 만드는 걸 추천한다. 개발하는데도 시간이 정말 촉박한데 디자인을 백지부터 시작해서 작업하면 시간이 정말 오래 걸린다.

 

- 어도비 XD를 사용한다면 아래 사이트에서 앱 디자인 템플릿을 다운받아서 사용할 수 있다.

 

https://xdfile.com/category/adobe-xd-templates/xd-mobile-templates/#google_vignette

Adobe XD Mobile App Templates - Xd File

 

 

- 피그마도 어도비 XD 처럼 템플릿을 다운받아서 사용할 수 있으니 꼭 템플릿을 사용해서 개발을 하는 걸 추천한다.

 

 

3. 만든 앱 디자인

 

 

 

 

- 4일간 만든 앱 디자인 일부다. 앱 디자인을 어떻게 만들었는지 핵심적인 부분만 이야기하고자 한다.

 

- 일단 앱 디자인을 만들 때는 앱을 켰을 때 3초 정도 보이는 첫 번째 화면을 스플래시 화면이라 한다. JJ란 로고가 있는 부분이 스플래시 화면이다. 보통 스플래시 화면엔 앱 로고만 띄워둔다.

 

 

JJ 로고 비하인드 스토리 - '더보기'를 클릭하면 확인 가능합니다.

 

 

- 앱 로고가 실제 우리 학교 앱 로고 같다면서 잘 만들었다고 친구가 칭찬했다. 

 

- 일반 글꼴에 그라데이션 입힌 건데 잘 만들었다고 해주니 뿌듯했다.

 

- 디자인 작업에 뿌듯해 하는 내 모습을 보며 문득 개발자 정체성이 사라지는 거 같단 생각이 들었다. 

 

 

 

- 스플래시가 엄청 중요한 페이지는 아니지만 스플래시가 없으면 교수님들께서 스플래시는 어디있어? 하는 부분이라 꼭 만들어야 했다.

 

- 스플래시 화면이 3초 정도 뜬 뒤에 로그인 페이지가 뜨고, 사용자가 아이디가 없다면 회원가입 페이지로 넘어가도록 해줘야 한다.

 

- 정석으로 디자인을 만들면 사용자가 이메일을 입력하지 않았을 때, 비밀번호를 입력하지 않았을 때의 디자인도 만들어 줘야 한다. 또 로그인 페이지에서 비밀번호나 이메일을 잘못 입력했을 때의 경우도 고려해서 디자인을 추가로 만들어야 한다.

 

- 하지만 스토어에 정식으로 출시할 앱이 아니고, 학과 교수님들께 보여줄 시연 영상 용 앱을 만드는 거라면 세부적인 디자인까지 모두 다 만들 필요없다. 핵심만 보여줘도 시간이 빠듯하다.

 

- 그러니 핵심적으로 만들어야 할 페이지만 만들고, 세부적인 건 나중에 필요해지면 만드는 걸 추천한다.

 

- 로그인을 하면 보통 메인 페이지가 바로 나온다. 위의 화면이 메인 페이지다.

 

- 우리 팀이 만들 앱은 모교 동아리 앱이었다.

 

- 모교에 어떤 동아리 혹은 스터디가 있는지 쉽게 알 수 있도록 하기 위해 만든 앱이다.

 

- 또한 동아리나 스터디를 운영하는 학생들이 부원 모집에 어려움을 겪고 있기도 해서 모임(동아리+스터디)을 운영하는 학생들이 모교 학생들에게 본인의 동아리를 소개하고, 부원을 모집하고, 관리할 수 있도록 했다.

 

- 그래서 메인 페이지에는 현재 모교에서 운영되는 모임(동아리+스터디)를 모아서 볼 수 있다.

 

- 메인 페이지 스크롤을 내리면 내 MBTI에 맞춰서 모임(동아리 + 스터디)을 추천해주기도 한다.

 

- MBTI 검사를 하기 전 사용자라면 사용자에게 맞는 MBTI 별 모임을 추천할 수 없으니 해당 부분은 블러처리되서 보이고, MBTI 검사를 한 사용자에 한해서 블러처리가 사라지고 사용자 맞춤 모임을 추천해준다.

 

 

 

 

 

- 특정 동아리를 클릭하면 동아리에 대한 소개와 게시판, 일정을 기록할 수 있는 캘린더 등을 확인할 수 있다.

 

- 앱 상단을 보면 동아리에 관심있는 사람들이 자주 궁금해 하는 회비, 면접 유무, 동아리원 모집 기간 등을 확인할 수 있도록 해놨다.

 

- 앱에 쓰는 아이콘은 flaticon 사이트에서 다운 받거나 혹은 구글에 어도비 xd 아이콘 이라고 검색해서 아이콘들을 다운받았다.

 

 

- 우리 앱은 사용자의 MBTI 성향에 맞춰서 동아리를 추천해 주는 기능도 있어서 간단한 MBTI 검사 페이지도 만들어야 했었다.

 

 

- 12개의 질문을 모두 거치면 위와 같이 MBTI 결과가 뜬다.

 

- 위에서 쓰인 캐릭터 일러스트는 freepik이란 사이트에서 다운받았다. 이런 고퀄 이미지를 무료로 배포해주시는 분들께 무한 감사인사를 드린다.

 

 

 

- 일단 간략히 내가 만들었던 핵심적인 페이지만 보여줬다. 이런 핵심 페이지만 만들어도 70페이지가 넘어간다. 그래서 위에서 무조건 템플릿을 사용하라고 한 거기도 했다.

 

- 나는 템플릿을 사용해서 만드는 것 보단 처음부터 직접 만드는 걸 좋아하기도 하고, 작업도 금방 끝나서 그냥 백지부터 시작해서 만들었다. 

 

- 추가로 디자인 작업할 때 유용한 사이트 링크를 공유하고자 한다. 저장해 두면 유용하게 쓸 수 있다.

 

디자인 작업 하면서 유용했던 사이트

 

디자인 작업하면서 유용했던 사이트들 링크다.

 

핀터레스트 - 앱, 웹 UI 벤치마킹 할 만한 이미지가 많다.

notfolio - 핀터레스트와 마찬가지로 벤치마킹 할 이미지가 많으나 더 실용적인 디자인이 많은 곳이다.

canva - 로고 제작해주는 사이트다. 앱 로고 제작할 때 참고했다.

free pick - 고퀄리티 일러스트가 정말 많다.

flaticon - ppt, 판넬, 앱, 웹에 넣을 아이콘 다운받기 좋은 사이트다.

 

 

 

- 다음 편은 대망의 앱 개발 과정 편이다!

 

3탄. 공대생이 알려주는 앱 개발 하는 방법 (feat. 컴공 캡스톤 디자인, 컴공 팀플)