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

- 어플 개발이 처음이라면 어플 만드는 법이 막막할 수도 있을 거 같다.

 

- 이번에 내가 컴공에서 캡스톤 디자인을 했는데 이때 어플(앱) 기획부터 디자인과 개발까지 모두 참여했었다.

 

- 이 경험을 토대로 앱 개발이 어떻게 이루어지는지 설명하고, 앱 개발할 때 도움이 될 꿀팁들을 작성하고자 한다.

 

*캡스톤 디자인은 졸업작품이라고 생각하면 된다. 4년 동안 컴공에서 배운 실력을 토대로 해서 웹사이트나 핸드폰 어플 등을 만드는 것이다.

 

 

- 학부생이 작성한 글이라 부족한 점이 많지만 앱 개발을 준비하시는 분 혹은 컴공 캡스톤 디자인을 앱 개발로 준비하는 분들께 조금이나마 도움이 되는 글이었음 한다.

 

 

* 담당 교수님이 있다는 가정 하에 작성된 글이다.

 

 

 

앱 개발 과정은 크게 아래와 같다.

 

1. 앱 기획서 작성

2. 와이어프레임 짜기

3. 앱 디자인 작업

4. 개발

 

- 실제 플레이 스토어에 게시한다면 배포와 유지보수 단계도 포함할 수 있지만 일단 위의 단계는 플레이 스토어에 앱을 배포하진 않는다고 가정하고 작성했다.

 

- 위의 4개만 하더라도 해야 할 게 참 많아서 팀으로 해도 3개월은 기본으로 걸린다. 차근차근 한 개씩 살펴보자.

 

- 일단 첫 번째로 기획부터 설명하겠다.

 

기획: 최대한 빨리 깨지자

 

1. 기획서 작성 방법

 

 

- 앱을 만들 땐 기획서를 작성해야 한다.

 

- 기획서를 작성할 때는 왜 그 앱을 기획했는지, 기획 동기부터 시작해서 내가 만들고자 하는 앱과 유사한 제품들의 단점,  그리고 해당 단점들을 보안해서 어떤 차별성을 내세우는지 등을 작성해야 한다.

 

- 기획서의 짧은 예시는 아래와 같다.

 

주제
- 전주대학교 위키피디아


기획동기
- 학교 신입생의 경우 대학교와 관련된 부분에 있어서 궁금한 점이 많다.

- 그런데 궁금한 정보를 찾기까지 오랜 시간이 소요된다.

- 전주대학교 학생들이 자주 물어보는 질문에 대한 답변만 모아놓은 위키피디아 사이트를 만들어서 학생들이 빠르게 원하는 정보를 찾을 수 있게 하는 사이트를 개발하고자 한다.


차별성
- 기존의 위키피디아 사이트는 넓은 범위의 주제 가령 사과, 엘리자베스와 같은 포괄적인 주제를 다뤘다. 하지만 우리가 기획하는 웹사이트는 전주대 학생들이 궁금해 하는 대학생활 정보만을 다루는 웹사이트다.

- 기존의 위키피디아는 모든 사람들이 수정이 가능했지만, 이번에 기획한 위키피디아 사이트는 전주대 학생만 문서 내용 수정이 가능하다. 

 

- 아주 간략하게 작성한 기획서 예시다. 실제로 작성한다면 위의 내용보단 더 상세히 작성해야 할 것이다.

 

- 앱 개발 연습용으로 만든다면 굳이 차별성까지 생각할 필요는 없지만, 연습용이 아니라 학교 과제로 제출하는 거라면 차별성 정도는 생각해두는 게 좋다. 교수님께서 반드시 물어보는 질문 중에 하나가 바로 차별성이다.

 

- 기획 주제를 찾을 땐 유튜브랑 구글링, 깃허브 사이트를 살펴보면서 다른 사람들은 뭘 했는지 최대한 많이 찾아보면 좋다.

 

- 혼자서 앱 개발을 한다면 기획서를 작성하고, 바로 와이어프레임 작업에 들어가면 된다. 와이어 프레임은 바로 아래 소주제에 작성해 놨으니 스크롤을 내리면 확인이 가능하다.

 

- 만약 협업해서 하는 앱 개발이고, 피드백을 해주실 분이 계시다면 아래와 같은 과정을 추천한다.

 

- 기획 주제를 모든 팀원이 찾아본 뒤 회의 때 이야기해서 가장 좋은 기획 주제 3가지를 선정한다. 그리고 각 주제의 동기와 차별성 등을 팀원들과 상의해서 작성한다.

 

- 기획서를 정리할 사람을 뽑아서 회의 때 나온 기획 내용을 정리한다. 모든 인원이 다 기획서 정리할 필요는 없다.

 

- 기획서가 정리되는대로 교수님께 찾아가서 피드백을 받는다. 높은 확률로 교수님께 제시했던 3가지 주제 모두 깨질 것이다. 

 

- 교수님께서 피드백을 주실 때 교수님이 원하는 방향을 이야기 주실 거다. 가령 우리 팀 교수님의 경우 기술적인 면에 있어서 차별성이 있길 바라셨다.

 

- 예시로 교수님께선 chat-GPT에 대해서 이야기를 주셨는데 나왔는데 일반 사람들이 chat-GPT 사용할 때 원하는 대답을 얻는 걸 어려워하니 이런 어려움을 극복할 수 있는 챗봇 사이트를 만드는 건 어떠냐는 이야기를 하셨다, 

 

- 우리 팀에 주어진 시간은 4개월이었는데 기한 내에 할 수 있는 게 아니어서 위의 내용은 패스했다.

 

팀에서 만들어진 기획서 초안

 

- 최종적으로 우리 팀은 모교 학생들이 스터디나 동아리 등을 모아서 볼 수 있고, 부원 모집 신청까지 가능한 동아리 앱을 만들기로 기획했다.

 

- 아래에서 우리 팀 기획서 샘플 파일을 확인할 수 있다. 캡스톤 디자인을 준비하고 있다면 아래 기획서를 참고하면 좋을 거 같아 첨부해 본다.

 

 

2023-1-캡스톤디자인-중간보고서.hwp

0.34MB

 

 

와이어 프레임 제작하기

 

- 기획 주제가 결정됐다면 이제 와이어프레임을 만들 차례다.

 

- 와이어프레임은 쉽게 말해 디자인 초안 같은 느낌이다.

 

조잡한 와이어프레임. 실제로 와이어프레임 그릴 때 이렇게 그리면 혼난다.

 

- 위의 그림을 토대로 예시를 들어보겠다. 중간 부분에 로그인 페이지가 보일 것이다.

 

- 이때 로그인 페이지는 어떻게 구성할지를 두고 누군가는 이메일과 비밀번호를 입력하게 하자고 할 수 있고, 다른 누군가는 아이디와 비밀번호를 입력하는 형태로 구성할 수 있다. 이런 기초적인 구성을 설계하는 단계다.

 

- 로그인 페이지에서 어떤 버튼을 클릭해서 회원가입 페이지로 넘어가는지, 로그인 페이지에서 만약 로그인 하기 버튼을 클릭했다면 어떤 화면으로 넘어가는지 등을 와이어프레임 단계에서 모두 정한다.

 

- 웹툰 작가분들을 보면 낙서한 것 처럼 초안을 그리고, 선을 따고, 그림을 그려나간다. 앱 디자인에 들어가기 전에도 대략적인 틀을 어떻게 구성할지 짜야한다. 그 단계가 와이어프레임 단계다.

 

- 와이어프레임을 짤 땐 칠판이 딸린 회의실 한 개를 잡은 뒤 팀원들이랑 다 같이 칠판에 와이어프레임을 그려가며 만들어 갔다.

 

- 보통 앱 하나당 기본 70개 이상의 페이지가 만들어진다.

 

- 첫 화면인 스플래시 화면부터 시작해, 로그인 페이지, 회원가입 페이지, 메인 페이지, 설정 페이지, 마이 페이지 등등 만들어야 할 페이지가 정말 많다. 아주 간단한 앱이라면 이틀에서 삼일 정도면 와이어프레임을 완성할 수 있다.

 

- 와이어프레임이 완성됐다면 디자인에 들어가면 된다.

 

 

- 그렇다면 어떻게 앱 디자인을 해야 할까?

 

- 2탄에서 계속!

 

 

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