2021 한이음ICT멘토링 : 아파트 청약 자격 판단 웹 서비스 프로젝트

목차
1. 프로젝트 내용
2. 지원동기
3. 인원부족으로 충원
4. 첫 회의
5. 수행계획서
6. 플로우 차트 다이어그램 정의
7. 디자인
8. 프론트엔드 개발 시작
9. 중간점검보고서
10. 공모전 1차와 2차
11. 엑스포 작품 소개서
12. 최종 결과 보고서 및 완료 절차
13. 프로그램 등록
14. 개발하면서 가장 어려웠던 점
15. 개발하면서 잘했다고 생각하는 점
16. 한이음ICT멘토링을 하려는 사람들에게 하고 싶은 말

 

프로젝트 내용

아파트 청약을 신청하고 나서 부적격을 받는 비율이 높기 때문에 부적격 비율을 줄이고자 아파트 청약을 신청하기 전에 신청자가 자격을 판단할 수 있는 서비스를 제작한다

 

지원동기

첫번째 문단은 청년의 청약 당첨률이 낮다는 점을 이용해 청년들에게도 좋은 서비스임을 어필하였고, 두번째 문단은 청년들 사이에서도 언급되는 키워드를 주로 삼고 그중에서도 프로젝트와 관련된 '부동산'이라는 시장에 대해 더 알고 싶다고 어필하였다. 아래는 지원 당시 작성했던 내용의 일부이다.

작년, 재작년까지만 해도 청년이 그나마 쉽게 집을 구할 수 있는 제도가 청약 뿐이었는데 현재 청약 경쟁률이 너무 올라가면서 청약통장을 만들어 관리하고 있지만 청년이 당첨되기에는 너무 어려운 상황으로 알고 있습니다. 저희 역시 청약을 들고 있는 상황에다가 청약 사이트를 들어가보곤 하는데 들어가보면 원하는 집은 경쟁률이 너무 세서 신청하는 데 고민이 되었습니다. 마침 한이음 프로젝트에 관련 프로젝트가 올라와서 개요서를 자세히 보게 되었고, 개요에 수긍을 하게 되어 같이 프로젝트를 진행해서 프로그램까지 등록하여 저희같은 청년들이나 삼각지대의 사람들에게 많은 도움이 된다면 좋을 것 같습니다. 작년까지만 해도 청년들의 대화 주제 중 가장 대두가 되었던 주제는 부동산과 주식이라고 생각합니다. 저희도 취업할 시기가 다가오니까 자취도 하고 싶어지고, 여느 때보다 부동산에 관심이 많아졌습니다. 아무래도 부동산의 내용이 워낙 많다보니 빠르게 이해하기에는 어려움이 있었습니다. 마침 한이음 프로젝트에 관련 프로젝트가 올라와서 개요서를 자세히 보게 되었고, 개요에 수긍을 하게 되었습니다. 그래서 같이 프로젝트를 진행해서 부동산 시장에 대해 좀 더 쉽게 이해하고,  다른 앱들보다 더 빨리 매물 정보 데이터들을 전송할 수 있는 앱을 완성하고 싶어서 지원하게 되었습니다.

 

인원 부족으로 충원

멘토님 측에서 인원이 부족하니까 2~3명 정도 더 충원하여 팀으로 신청하라고 하셔서 급하게 친구들을 모았다. 그래서 5명이서 팀이 되어 프로젝트를 진행하게 되었다.

 

첫 회의

우리 팀은 첫 회의 때 각자의 친구들을 모았기 때문에 처음보는 친구들도 있어서 자기소개부터 했고 팀 목표를 설정했다. 또 팀명은 개발하는언니들, 서비스명은 청약패스로 정해졌다. 그리고 그라운드 룰을 정하고, 기존에 아파트 청약에 대해 어느정도 지식을 가지고 있는지 공유했다. 그다음은 역할 분담을 했는데 나는 프론트엔드, 디자인을 맡게 되었다. 개발 환경에 대해서도 더 이야기를 했는데 이때 당시에는 OS가 모두 동일하게 Windows 10이었기 때문에 수월하게 진행이 되었다.

 

수행계획서

수행계획서를 작성하는데 예상 결과물을 이미지로 집어넣어야 하는 부분이 있었다. 수행계획서 예시도 PPT로 되어있고 멘토님도 PPT로 작성한다고 해서 도전할까 하다가 기한이 있어서 나는 내가 활용할 수 있는 툴이었던 포토샵으로 만들었다. 아래는 수행계획서에 들어간 이미지이다.

0123456

 

플로우 차트 다이어그램 정의

우리는 멘토님께서 플로우 차트 다이어그램을 정의해보는 것 어떠냐고 하셔서 검색해보니까 정말 우리 팀에 필요한 내용이었고 플로우 차트를 멘토님의 피드백을 받으며 작성해나갔다. 노션에 Whimscal이라는 툴이 있어서 사용해봤는데 플로우 차트를 그리기에 딱 맞는 툴이라 최대한 활용했다.

팀 노션에 임베디드해둔 플로우 차트 다이어그램

 

디자인

나는 디자인툴에 더 좋은 것이 없을까 찾다가 피그마라는 툴이 있다는 것을 알고 피그마 툴을 공부하면서 프로토타입까지 만들었다. 그렇게 우리는 5월까지 디자인을 모두 완료했다. 그렇지만 1920x1080 해상도 기준으로 만들어서 Z키 한번은 눌러줘야 한다 ... 아래 사진을 누르면 프로토타입 링크로 이동한다.

피그마 보드에서 보는 디자인

프론트엔드 팀에서의 진행현황 기록

 

프론트엔드 개발 시작

한이음에서는 형상 관리를 Gitlab으로만 해야하기 때문에 더욱 신경을 쓸 수 밖에 없었다. 그래서 우선 전체 회의에서는 Gitflow 전략으로 브랜치 전략을 따르자고 하여 그렇게 정했다. 프론트엔드팀은 React, Javascript 스택을 쓰기로 결정했고, 백엔드팀은 Spring Boot를 사용했다.

우선 나는 개발 시작을 하면서 React를 입문하는 팀원을 위해서라도 프로젝트 구조를 더더욱 처음부터 잘 짜야했었다. 아래는 최종적으로 프로젝트에서 사용한 디렉토리 구조이다. 정리하자면 다음과 같다. 컴포넌트와 페이지의 자세한 것은 여기를 클릭해서 봐주기를 바란다.

chungyakpass
└── frontend
    ├── public
    └── src
        ├── assets
        ├── client
        ├── components
        ├── pages
        ├── services
        │   └── api
        ├── shared
        │   ├── footer
        │   └── header
        └── store
            ├── actions
            └── reducers

한이음 측에서 스파르타코딩클럽과 손을 잡고 필요하다면 강의도 들을 수 있게 지원해주었는데 나는 앱개발 종합반, 리액트 심화반, 노드 기초반을 들었다. 여기서 리액트 심화반을 들으면서 Firebase로 배포하는 방법을 알게 되어 Firebase를 이용해서 프론트엔드는 배포하게 되었다.

 

중간점검 보고서

한이음 멘토링은 프로젝트 개발 및 완료계획 수립을 지원하고 수행과정 상의 애로사항 및 요청사항 등의 문제해결을 지원하기 위해 중간점검 차 보고서를 작성해야한다. 양식은 수행계획서와 크게 다르지 않았으나 중간점검 보고서부터는 화면설계서를 첨부해야했다. 다음은 내가 주로 작업했던 화면설계서 파트 부분이다. 설문조사 결과서와 인터뷰 결과서도 편집해서 올렸었다. 당시 조사방법론이라는 수업을 듣고 있어서 더 수월하게 작업할 수 있었다.

디자인을 할 때 아예 컬러 팔레트와 폰트 스타일, 레이아웃 등을 정했었다. 개발하면서 레이아웃의 경우는 많이 지켜지지 않았지만 컬러 팔레트와 폰트 스타일의 경우는 디자인 시스템이 따로 있지 않았음에도 가이드가 있어서 그런지 확실히 지켜졌다.

01234567

 

공모전 1차와 2차

우리 팀의 목표는 한이음 ICT멘토링 공모전에 출전하는 것도 있었기 때문에 공모전에 신청하고 1차 서면평가와 2차 심층평가를 위해 서류를 작성했었다. 중간점검보고서와 크게 다르지는 않았지만 결과물들이 나오고 있었다. 그렇지만 생각보다 목표만큼의 결과물은 아니었기 때문에 서류를 작성하는 데 약간의 어려움은 있었다.

2차 심층평가가 끝나고 3차 종합평가 자격이 주어지는지에 대해 결과가 나왔는데 우리 팀은 아쉽게도 입선에 그쳤다.

 

엑스포 작품 소개서와 시연 영상

공모전 입선이어도 엑스포에 출전은 할 수 있어서 우리는 작품 소개서와 시연 영상을 준비해야했다. 작품소개서도 공모전 1차, 2차 서류와 별반 다를 게 없었고 거기서 더 구현한 내용을 추가하는 방향으로 작성했다. 나는 작품 소개서보다는 영상 편집을 할 수 있었기 때문에 시연 영상을 만들었다. 1분 안에 모든 내용이 다 들어가게끔 해야해서 배속으로 돌리다보니 급해진 감이 있지만 ... 그래도 왜 이 서비스를 만들었는지에 대한 이야기도 있고 기능들도 모두 보여주어서 만족 ...

 

최종 결과 보고서 및 완료 절차

한이음ICT멘토링은 엑스포까지 모두 마무리가 되고 나면 최종 결과 보고서를 제출하고 완료 절차를 밟는다. 이 결과보고서도 공모전 1, 2차 서류와는 크게 다르지 않고 더 디벨롭된 내용이 있으면 추가해서 제출하는 것이다.

 

프로그램 등록

한이음ICT멘토링에서는 한국저작권위원회에 저작권 등록할 수 있는 비용을 지원해주는데 (물론 선납후지원) 5만원~6만원 가량으로 알고 있다. 아무튼 이 프로그램을 한국저작권위원회에 등록하면 저작물로써 법적 보호를 받을 수 있다.

 

프로젝트하면서 어려웠던 점

React를 처음 다뤄봐서 React 관련 내용은 모두 어려웠다. 특히 주소를 입력해야하는 기능은 Daum Post Code 라이브러리를 사용했는데 이것도 처음 써봐서 어떻게 써야하는지 잘 몰랐고, 새 창 띄우는 것도 라이브러리 없이는 띄울 수 없고, props 전달을 어떻게 해야하는지 몰라서 여기에 시간을 많이 쏟았다. (지금은 이때보다 훨씬 여유롭게 React를 쓰는 것 같다. 당연하다. 그만큼 많이 썼다.) component라는 개념을 이용해야 하는데 나는 이 component에서 props를 왔다갔다 할 수 있을 정도의 수준은 아니었던 것이다. 애초에 Javascript도 제대로 몰랐으니 활용도 제대로 못하고 지금 생각해보면 완전 바보 같다. 그래도 ... 돌아갔던 게 신기 ...

이후 Javascript와 React를 좀 더 공부했고, 친구와 스터디 하면서 좀 더 개념인 비동기, 동기, React의 상태관리와 생태 주기에 대해 공부했고 하고 있다.

이때는 Axios에서 받아온 값을 무조건 Redux를 이용해 관리했는데 전역으로 관리해야하는 값들만 관리하는 것이었다. 그래서 유저정보 위주로 Redux를 활용하는 것이었다. (이때는 왜 쓰는지도 모르고 그냥 막 썼다.) 더 찾아보니까 이래이래 저래저래 써야 했던 이유가 있었던 것.

왜?에 대한 질문이 없었다. 시간이 부족하다보니까 급하게 구현을 마무리하는 게 더 중요했다. 가장 후회되는 일. 다시 돌아간다면 왜?라는 질문을 더 많이 하고 싶다. 왜 리액트를 썼는지, 왜 리덕스를 써야만 하는지 ... 지금 중요하다고 생각하는 것을 그때 알았더라면 하는 바람.

그리고 마지막에 배포하고 나서 CORS 에러 떠서 진짜 어이없었다. 이런 거 보면 배포와 자동화는 프로젝트 시작할 때 설정해두는 게 편한 것 같다.

 

프로젝트하면서 잘했다고 생각하는 점

설계를 할 때 산출물을 기록으로 남긴 것이 잘했다고 생각한다. 이때의 산출물들로 제출 서류들을 채우다보니 금방 채워졌다.

할 수 있는 능력을 최대한 활용한 것이 잘했다고 생각한다. 우선 내가 할 수 있는 능력은 포토샵을 활용하여 디자인하는 것과 영상 편집을 할 수 있는 것이었다. 이를 활용해 제출서류를 채우기도 하고 영상물을 제작하기도 하면서 팀에 기여해 기분이 좋았다.

막상 적다 보니까 잘했다고 생각하는 점은 어려웠던 점에 비해 너무 적네 ...

 

한이음ICT멘토링을 하려는 사람들에게 하고 싶은 말

1. 멘토분이 설명해주시겠지만 기록을 최대한 많이 하시길. 주요 키워드는 프로세스 흐름도, 플로우 차트, 와이어 프레임, 기능 명세서.
2. 기간의 50%는 기획과 설계에 쓰고, 나머지 50%는 구현에 쓰시길.
3. 웹이 지망이라면 공모전 수상은 거의 가능성이 없다. (나중에 제출하고 공모전 입선작들을 보니까 우리 팀만 웹이었다. 나머지 팀은 거의 AI, ML 관련 내용이거나 앱이었다.)
4. 이벤트는 모두 참가하시길.
5. 스파르타코딩클럽 최대한 활용하시길. 강의내용이 좋고 따라하는 것만으로 엄청난 도움이 되었다. 매번 전화와서 관리하는 건 불편했다. (한이음 연계면 무조건 전화 관리해야한다고 해서 그냥 스코 측에 괜찮으니까 전화 안해주셔도 된다고 전달했다.)