[멋사 교내 해커톤 후기1] 스프링과 리액트를 사용한 첫 개발

 

 

이번에 금오공대 멋쟁이사자처럼 동아리에서 교내 해커톤을 진행하였다. 

나에게는 멋사에서 진행한 첫 프로젝트이자 스프링과 리액트를 사용한 첫 프로젝트여서 의미가 있었던 시간이었다.

물론 힘든 점도 있었지만 정말 재미있었다! 이 기억을 남기기 위해 회고록을 써보려고 한다.

 

 

해커톤 진행 기간

6월 24일에 첫 회의를 시작하고 2주간 개발을 진행한 후, 7월 7일과 8일에 무박2일로 교내 해커톤을 진행하였다. (일수로 따지면 총 15일이 걸렸다)

• 6월 24일 첫 주제회의
• 6월 27일 화면설계 회의
• 6월 28일부터 거의 매일 백엔드 회의
• 7월 4일 전체 회의
• 7월 7~8일 해커톤!

작성된 회의록들 ..

 

해커톤 주제

 

해커톤 주제는 이전에 진행한 아이디어톤의 주제를 그대로 가져왔다. 해커톤 프로젝트의 주제를 3줄로만 요약하면 다음과 같다.

• 분리배출 방법을 알려주는 서비스
• 분리배출을 인증하여 나무를 키우고, 포인트를 받을 수 있는 서비스
• 친환경 펀딩을 등록/후원할 수 있는 서비스(포인트 사용 가능)

 

 

이후로는 아이디어톤 때 주제를 생각해낸 이야기를 하려고 한다. 지루할 수 있으니 다음 큰제목으로 뛰어넘는 것을 추천한다! 

 

<아이디어톤 주제회의 이야기>

이전에 멋사에서 아이디어톤을 했는데, 운이 좋게 우리 팀의 아이디어가 대구경북 2차 예선으로 진출하게 되었다!

물론 대구경북에서는 1등을 하지 못해 본선에 나가지 못했지만, 선행자료를 찾고 회의하고 발표자료도 만들다보니 해당 프로젝트에 애정이 많이 생겨 있었다. 교내 해커톤에서는 팀원이 조금 바뀌었지만, 아이디어톤을 같이 진행했던 팀원들이 다수였고 새로 들어온 팀원들도 아이디어를 마음에 들어해서 해당 주제로 교내해커톤에서 개발을 진행했다. 

 

아이디어의 첫 출발은 분리배출 방법을 알려주는 서비스였다. 

창의설계프로젝트 과목 담당교수님께서는 우리가 생각한 아이디어는 대부분 기존에 존재하고, 완전히 새로운 서비스를 만들어내는 것은 불가능에 가까우니 기존에 있는 서비스에서 출발해여 차별점을 가지는 게 맞다고 하셨다. 당연하게도 분리배출 방법을 알려주는 서비스는 기존에 많이 존재했고, 시시하다는 이유로 아이디어 후보에서 탈락할 뻔 하였다.

하지만 다른 사람들이 생각해온 아이디어를 결합하니 조금씩 차별점이 보이기 시작하였고, 선행자료를 조사하며 다듬다보니 그럴듯한 아이디어가 탄생하였다! 선행자료에 있던 포인트로 쇼핑을 하는 시스템은 펀딩시스템이 되었고, forest게임의 뜻에 대해 생각하다 나무키우기 게임이 탄생하였다. 그리고 게임을 하는 사람들이 티어라는 시스템을 생각하여 나무키우기 게임이 더욱 구체화되었다. 

 

이 아이디어는 혼자서는 절대 생각할 수 없었던 아이디어였고, 팀원들의 생각과 경험 그리고 교양지식등이 다 합쳐져서 탄생하였다. 이렇게 그럴듯한 아이디어가 정해졌을 때 팀플이 중요한 이유를 느낄 수 있었다!

 

 

 

개발의 순서

이전에 플러터와 스프링부트를 이용하여 프로젝트를 진행한 경험이 있었고, 그 때 나쁘지 않은 성과를 냈었기 때문에 사람들의 의견을 물은 뒤 이 방법으로 진행하기로 하였다. 처음 계획했던 개발의 순서를 요약하면 다음과 같다.

 

1. 아이디어 정하기
2. 명확한 기능 확정하기(usecase 그리기)
3. 화면 설계하기 
   • 디자인 요소는 최대한 적게
   • 필요한 데이터는 다 넣기
4. (백엔드) erd그리기 
5. (백엔드 + 프론트엔드) 필요한 api명세 작성하기
6. 분리배출 검색, Q&A 기능 개발 후 첫 번째 배포
7. 나무기능 개발 후 두 번째 배포
8. 펀딩기능 개발 후 세 번째 배포

 

1, 2, 3, 4, 5 단계는 디자인, 프론트, 백엔드 모두 모여 대면으로 진행하였다. 디스코드로 진행할 수도 있었지만 확실히 대면으로 하는 게 의사결정도 빠르고 좋았다. (다음 해커톤 때도 이 단계는 꼭 대면으로 만나 진행할 생각이다)

5단계를 다 끝내려니 시간이 너무 늦어져서 나머지 api명세는 백엔드 팀이 작성하였다.

 

그 다음날부터 바로 개발을 시작했다. 개발은 에자일 방법론에 따라 기능을 하나하나 완성해 나가기로 하였다. 중요한 기능부터 나열하여 중요한 것부터 빠르게 완성시키는 것이 목표였다. 기능의 중요도는 팀원들과 협의하여 정하였고, 가장 중요한 기능인 분리배출 검색, Q&A 기능이 백엔드에서 모두 완성되면 배포 후 통신을 하기로 하였다. 

 

에자일 방법론을 선택한 이유는 본격적인 개발 시작이 6월 27일부터였고, 7월 7일에 해커톤이었기 때문에 3일에 하나씩 기능을 완성해야하는 상황이었기 때문이다. 그래서 백엔드에서는 하루하루 시간을 쪼개면서 거의 매일 회의를 진행했었다. 

 

 

 

개발 결과물

개발 과정은 다음 글에서 적으려고 한다. 일단 완성된 결과물을 소개하겠다!

 

화질구지.. 나무가 움직이는 걸 보여주고 싶었음

이 사진은 우리 서비스의 메인화면이다.

사람들 모두가 키우는 나무인데, 설명을 못적어서 아쉽다ㅜㅜ

나무는 gimp라는 이미지 편집도구를 이용하여 움직이도록 만들었다. 

 

 

 

분리배출 검색 화면이다.

조회수를 기준으로 검색 랭킹을 만들어 5위까지 보여준다.

오늘의 꿀팁은 랜덤으로 꿀팁 데이터베이스에서 하나 가져와 보여준다.

 

 

텍스트가 변경되면 아래에 관련 검색 내용이 보인다. 

 

자세한 내용으로 들어가면 다음과같이 버리는 법과 상세 설명이 보인다. 

추가 정보를 위해 댓글을 허용하였고, 신고 시스템과 좋아요 시스템이 존재한다.

 

 

 

좋아요기능은 로그인을 해야 이용할 수 있다.

 

 

로그인 화면은 다음과 같다

 

 

회원가입도 가능하다. 

아이디와 닉네임은 겹칠 수 없기 때문에 중복확인이 필요하고, 비밀번호 확인과 추천인 등록 기능도 있다.

추천인을 등록하면 해당 사람에게 포인트가 지급된다.

 

 

 

분리배출 정보에 등록되지 않은 정보가 있거나, 잘못된 정보가 등록되었을 경우 수정요청을 할 수 있다.

Q&A는 분류가 있고, 답변이 달릴 수 있다. 

 

 

Q&A 상세보기 화면이다.

 

글 작성 페이지는 다음과 같다!

 

 

나무키우기 화면이다. 나무 경험치와 티어가 있고, 현재 가진 에코 포인트를 확인할 수 있으며, 분리배출 횟수도 표시된다.

 

 

분리배출한 사진을 넣어 인증이 가능하다

 

 

 

 

친환경 펀딩 서비스 화면이다. 

최신순/ 인기순/ 마감임박순으로 정렬이 가능하며, 카테고리별로 나뉠 수 있다.

 

 

상세 페이지

 

 

프로젝트 올리기

 

 

 

여기는 마이페이지다. 

나의 에코포인트와 좋아요한 펀딩이 보인다.

 

 

 

에코포인트 충전이 가능하다

테스트 충전은 IAMPORT를 사용하였다.

 

 

포인트가 잘 충전되는 것을 확인할 수 있다.

 

 

 

 

후기 및 아쉬운 점

 시간상 구현이 덜 된 부분이 많아서 아쉬웠다. 시간 내에 다 만들지 못할 것을 예상하긴 했었지만 아이디어톤 주제를 그대로 가져가고싶은 마음에 기능을 쳐내지 못한 게 후회된다. (Q&A 기능을 없앴다면 훨씬 완성도 높은 결과가 나왔을 것 같다)

기능이 많아질수록 관리자 화면도 많이 필요했고, 결국 프론트엔드가 만들어야할 화면이 너무 많아졌다.

 

 백엔드는 기간내에 필요한 기능을 다 만들 수 있었지만, 프론트엔드가 작성해야할 코드의 양이 백엔드보다 훨씬 많다는 걸 몰랐다. 프론트엔드 깃허브 기록에 4만줄을 작성하신 분도 있었는데 너무 죄송했다. 다음 해커톤때는 프론트엔드를 많이 생각하며 구현가능성에 초점을 두고 더욱 완성도 있는 작품을 만들고 싶다.

 

 이런 멋진 서비스를 만드느라 고생하신 팀원분들에게 너무 감사하다.