모노산달로스의 행보

[경기대학교] 컴퓨터공학부 3학년 기초캡스톤 프로젝트를 끝내며 (1/2) 본문

Side Project/Project

[경기대학교] 컴퓨터공학부 3학년 기초캡스톤 프로젝트를 끝내며 (1/2)

모노산달로스 2024. 6. 13. 20:31

기초 캡스톤 디자인 프로젝트

 

 

What is capstone design

 

캡스톤 디자인이란? 돌 산을 쌓을 때 가장 윗부분을 캡스톤이라고 합니다. 지금 까지 배운 내용들을 통해 모두가 힘을 모아서 마지막 윗부분을 만드는 것, 그것이 바로 캡스톤 디자인입니다.

 

경기대학교에서 컴퓨터공학부 3학년이라면 모두가 기초 캡스톤에 참여합니다. 실력이 좋은 사람, 자신이 없는 사람, 자신의 능력을 모르는 사람 등 모두가 팀을 이루어 결과물을 발표하고 경쟁합니다. 글쓴이 또한 2024년 3학년을 맞이하여 기초 캡스톤에 참여하게 되었습니다.

 

해당 포스트는 3월부터 6월까지 경기대학교에서 수행한 기초캡스톤 프로젝트 진행 과정을 필자 시점으로 정리한 내용입니다. 긴 글이 되어 두 개로 나누어 작성하게 되었습니다.

 

기초캡스톤 프로젝트를 끝내며(2/2)

 


팀 결성

 

총팀원은 8명으로 구성되었습니다. 처음에는 14명이 모였는데, 앱을 개발할 팀과 자율주행을 개발할 팀으로 나누어졌습니다. 그리고 글쓴이는 팀장이 되었습니다. 팀원으로 있으면 답답함을 느끼고는 했기에 기본적으로 팀장 역할을 마다하지 않았습니다. 이러한 본격적인 프로젝트는 처음이었지만 그동안 공부한 내용을 바탕으로 잘 이끌 수 있을 것이라 생각하였습니다.

 

개발자들은 디스코드를 많이 사용한다

 

가장 먼저 디스코드로 회의를 통해 앞으로의 계획과 팀원들의 전력을 파악했습니다. 다섯 명의 팀원은 이미 알고 있던 친구들로 모두 백앤드를 공부하고 있었습니다. 다른 두 팀원아직 아무것도 모르는 상태였습니다. 이미 백앤드 기술자가 많으므로 배움이 필요한 2명은 프론트를 맡아야 했습니다. 따라서 한 달의 시간을 주어 2명이 프론트 공부를 하도록 하였고 그전까지는 혼자 개발하게 되었습니다.

 

아이디어 회의

 

이후 무작정 모여 아이디어를 짜내기 시작했습니다. 약 2주에 걸쳐 회의가 진행되었고 결론은 '아이들의 사회성'을 증진시키는 앱을 만들게 되었습니다. 구체화 한 아이디어는 다음과 같습니다.

선생님이 사회 활동에 관한 미션을 제시하고 도장을 보상으로 제공한다. 이를 통해 아이들이 사회활동 참여를 유도한다.

 

 

자료 정리를 위해 노션 페이지를 만들었습니다. 올해 초 동아리와 다른 프로젝트에서 노션을 접하게 되었는데 실제로 협업 과정에서 중요하게 사용된다는 것을 알게 되었습니다. 따라서 우리 팀도 노션을 사용해 아이디어를 정리하고 서로의 작업을 나누고자 했습니다. 특히나 학교 구글 계정이 있다면 노션 에듀케이션 플랜을 사용할 수 있다는 것이 유용했습니다.

 

다만, 노션을 프로젝트 후반까지 100% 사용하지 못했다는 점은 아쉽습니다. 요구사항 명세서프로덕트 백로그 등등 미리 정해야 하는 것들이 있다는 것을 나중에 알게 되었고, 당시에는 주어진 시간이 길지 않으므로 빨리 개발을 시작해야겠다는 생각에 휩싸였었습니다.

 

 


전반 작업

 

피그마를 통해 작업한 와이어 프레임

 

위와같이 피그마를 이용하여 각자 생각하는 UI를 만들었습니다. 당시에는 몰랐지만 현재는 이를 '와이어 프레임'과 같은 용어로 부른다는 것을 알게 되었습니다. 작업을 시작하기 전 어떻게 UI를 구성하고 기능을 집어넣을지 정하는 단계였습니다.

 

여러 가지 기능이 들어있었는데, 교수님과의 미팅 과정에서 '필요한 것을 추려내라'라는 평가를 받았습니다. 지금 다시 보면 난장판이지만 당시에는 쉽게 빼내지 못했었습니다.

 

 

 

 

다음으로 깃허브 레포지토리를 만들고 작업을 시작했습니다. 위와 같은 전략으로 브랜치를 나누어 사용하고자 했는데, 이 점 또한 아쉬움이 남는 부분입니다.

 

왜냐하면 개발 분야별로 각각의 레포지토리를 만드는 것이 조금 더 낫다는 것을 나중에 알게 되었기 때문입니다. 실제로 하나의 레포지토리를 만들고 위와 같이 브랜치를 구성하니 작업물이 꼬여 조금 힘들었던 기억이 있습니다.

 

012
당시 만들어졌던 UI 클릭하면 커집니다.

 

구현의 시작은 굉장히 막막했습니다. 누군가가 api를 짜야한다는 이야기를 들었다고는 하지만 모두가 그것이 왜 필요한지, 어떻게 해야 하는지 조차도 모르는 상황이었습니다. 그래도 8명이 머리를 맞대고 어떻게든 바퀴를 굴리기 위해 노력했습니다.

 

프론트의 경우 혼자 위와 같이 UI를 만들었습니다. 디자이너가 없기 때문에 いらすとや의 무료 이미지를 사용했습니다. 아기자기한 이미지가 아동용 애플리케이션이라는 콘셉트와도 잘 맞아 유용했습니다. 방학 동안 공부한 Flutter의 성과를 보는 것과도 같아 기분이 좋았습니다.

 

백엔드로그인, 회원가입, 도장 기능, 미션 기능의 작업을 나누어 진행했습니다. 스프링과 h2를 통해서 진행했는데, 자세한 작업 과정을 모르기에 계속 재촉하게 되었습니다...(미안) 어찌 되었건 백엔드 팀원들이 각자 역할을 잘 수행하여 결과물을 내놓았습니다.

 

이러한 작업과 동시에 논문 또한 작성해야했습니다. 프론트에는 남는 손이 없었기에 백엔드에서 한 명이 논문을 도맡아 작성하게 되었습니다.

 


처음 손 잡는 프론트와 백

 

백엔드 작업(Spring boot)에 관한 지식이 없다보니 작업이 끝났는데, 그것을 사용하는 방법을 공부해야만 했습니다. 이렇게 프로젝트를 진행하면서 플러터에서 http를 통해 백과 통신을 처음 해보았습니다.

 

 

막막했었지만, 깃허브와 유튜브를 뒤져보며 다른 사람들이 Flutter에서 어떻게 http를 통해 통신했는지 공부했습니다. User 정보를 위한 Model도 만들고 json 형태로 값을 보내보기도 하고... 여러 가지 시도를 계속 이어갔습니다.

 

 

그 결과, 처음으로 database에 회원 정보가 등록되는 것을 확인하고 큰 기쁨을 느꼈습니다. 정말 사소한 작업이지만 직접 내 손으로 팀원들과 해냈다는 것이 뿌듯했습니다.

 

굉장히 어색했지만 작업 후반으로 갈 수록 숨 쉬듯이 통신하는 코드를 작성하게 되었습니다. 이렇게 백엔드와의 통신을 공부하면서, 백엔드에 대한 공부도 조금 필요하지 않을까?라는 고민도 하게 되었습니다.

 


빈약한 아이디어 바로잡기

 

전반 작업이 끝나고 중간고사가 시작되었습니다. 잠시 프로젝트가 중단되고 각자의 공부를 이어나갔습니다. 이후 다시 모였을 때, 글쓴이는 고민에 빠지게 되었습니다. 현재 주요 기능인 '미션과 도장'은 너무나 빈약하다는 생각이 들었습니다. 단순한 CRUD기능 구현에 지나지 않기 때문이었습니다.

 

핵심은 '선생님 없이 아이들의 사회활동을 앱에서 인식' 해야한다는 점입니다.따라서 긴급하게 회의를 소집하였고, 두 가지의 핵심 아이디어를 얻어낼 수 있었습니다. 그것은 바로 '하이파이브''모이자' 기능이었습니다.

 

Zenly bump: https://mosg.tv/2019/02/24/app-track-friends-ridiculously-creepy/

 

첫 번째 기능 '하이파이브'Zenly 애플리케이션의 bump라는 기능에서 착안했습니다. 두 아이가 물리적으로 가까이 있다는 것을 인식하는 방법으로 사용하기 좋다고 생각했습니다. 핸드폰을 흔드는 행동 또한 발표장에서 보여주기 정말 좋겠다고 생각했습니다. 글쓴이는 자료 수집 과정에서 bump api라는 것이 있다는 글을 보고 그것을 통해 쉽게 구현할 수 있겠다고 생각했습니다. (사실 그런 것은 없었고 정말 힘들게 구현하게 되었습니다.)

 

google map을 사용하고자 했습니다.

 

두 번째 기능 '모이자'는 다음과 같습니다. 먼저 앱에 지도를 추가하여 다른 아이들의 위치를 확인할 수 있습니다. 그리고 장소를 터치하여  거기서 모이자는 알림을 보낼 수 있는 기능입니다.

 

위 두가지 핵심 기능이 추가되고 비로소 앱의 방향이 결정되었습니다. '아이들의 사회성 증진'이라는 목적 또한 더 잘 설명할 수 있게 되었습니다.

 

목표가 명확해졌으니, 이제 개발에 집중할 일만 남았습니다.

 

 

 

 

 

 

 

 

2편에서 계속...