2021 국방오픈소스아카데미 해커톤 참여 후기(Feat. 싸지방에서 개발하기)

프로젝트 소개 : https://sunrinnote.tistory.com/138

우선 나는 20년 10월 19일에 육군 정보보호병으로 입대해서 열심히 임무 수행중이다.

8월 초에 우연히 알게된 대회가 있는데 국방오픈소스아카데미에서 진행하는 해커톤이다. 

2021 국방오픈소스아카데미 온라인 해커톤 대회 일정

8월 7일부터 바로 시작했다. 이론평가는 다트랑 플러터 강의들 듣고 대학 시험처럼 객관식으로 30문제정도 푸는거였다. 강의 성실히 들었으면 충분히 90점 이상은 나올 문제들이었다. 나는 95점 맞았다. 근데 강의 듣는게 너무 힘들었다. Flutlab에서 빌드하면서 강의 들었는데 자동완성도 없고 빌드 시간은 오래걸리고 해서 진도가 잘 안나갔다. 전체적으로 강의가 어림잡아 100시간정도 있었는데 체감상 훨씬 더 오래 걸린 것 같다.

코딩테스트는 별도 페이지에서 응시했는데 작년에 쉽게 나왔다고 해서 만만하게 보고 들어갔는데 생각보다 난이도가 높았다. 400점 중 302점 맞았다. 순위권에는 들지 못했다.

개발계획서는 내일의 일기를 미리 쓰고 다음날에 완성을 하는 새로운 일기 패러다임을 제시하는 내용의 계획서를 썼다.

다행히 해커톤 참여자로 선발되었다. 200명을 뽑았는데 같은 부대 정보보호병 후임이랑 같이 선발되서 둘이 팀을 꾸리기로 했다. 팀원 모집도 하려고 했는데 연락이 안와서 그냥 둘이 하기로 했다.

9월 16일부터 본격적인 개발이 시작되었다. 우리는 일과와 근무시간을 제외한 나머지 시간을 쓸 수 있었다. 평일은 18시~20시 반, 주말은 09시~20시 반, 연등은 매일 22시부터 24시까지. 사이버방호실 일과랑 당직상황병, 식당 근무는 정상적으로 했다. 컴퓨터 사양은 램 4기가 컴퓨터에 모니터 하나. 주어진 개발환경인 Github Codespaces는 2코어.

기획은 노션으로 했고, 디자인은 피그마, 개발은 Github Codespaces, 발표자료는 Google 프레젠테이션, 영상은 MangoBoard로 했다.

Flutter 개발 환경에서 정말 할 얘기가 많은데 우선 웹으로 디버깅을 하는 형식이고, 핫 리로드 기능은 수동으로 해주어야하며, 같은 환경에서 어떨 땐 되고, 어떨 땐 안되고를 반복한다. 자동완성도 Ctrl+Space 하고 1~2초 기다려야 가능하고 release로 .apk 만들려고 하면 95%정도 확률로 뻗어버린다.. 10월정도부터는 우리끼리 새로 github Team 플랜으로 우리 돈 내고(두 명, 10000원) 코드스페이스 4기가(시간당 500원정도)로 만들어서 플젝 fork뜨고 contribute하는 식으로 개발했다.

릴리즈하기로 맘 먹은 다음부턴 실제 기기 테스트가 필요했다. apk로 만들면 그 파일을 노션에 올린다. 안드로이드 휴대폰으로 노션에 접속해서 그 파일을 받고 깔면 그걸로 디버깅을 했다. 우선 싸지방에선 Nox같은 에뮬레이터는 다 막혀있고, 된다고 하더라도 램이 부족해서 크롬이랑 동시에 못띄운다.. 개발환경에 대한 불평은 여기까지 하고 프로젝트 개발 과정으로 넘어가겠다.

https://github.com/osamhack2021/app_TomorrowDiary_TomorrowDiary

여기가 우리 깃 주소이다.

프로젝트 시작

9월 13일에 당직을 섰는데 그 때 국방망 PC로 새벽에 시간 남을 때 ppt로 디자인을 했다. 그땐 완전 프로토타입이고, 내일 일기, 오늘 일기에 대한 개념도 확실하게 선게 아니어서 데모버전 느낌이 물씬 나는 디자인을 하게 되었다. 팀원 보여줬더니 실망한 것 같았다. ㅋㅋ 그래도 뭘 표현할 생각인지는 알겠다고 했다. 먼저 첫 멘토링 전에 그 디자인을 바탕으로 UI를 미리 짜보고 있었는데 생각보다 진도가 더뎠다. 여기까진 맘에 들지 않았다.

osam.kr쪽에서 해커톤 가이드북을 줬다. 그거 보고 따라하면서 깃허브 설정, codespaces 사용, 프로젝트 진행 과정에 대한 전체적인 감을 잡았다. 멘토 매칭 결과는 최주호 멘토님이다. 해커톤 참가자 선발을 위한 강의를 직접 녹화하신 분이었다. (물론 우리가 1지망으로 썼다.)

첫 멘토링

9월 18일에 최주호멘토님과 첫 만남이 있었다. 이 때 멘토님은 우선 https://dribbble.com/ 여기에서 디자인 맘에 드는걸 고르고, 이걸 참고해서 하고 싶은 뷰들을 모두 그려보라고 하셨다. 그리고 GetX 공부와 Firebase 공부를 추천하셨다. 멘토님께서 19일에 Firestore 강의를 직접 찍어서 주시고, 안그래도 의욕이 안났던 나는 멘토님 믿고 열심히 따랐다.

18일 저녁까지 팀원(범준)과 디자인을 고르고, 프로그램은 숭실대 유어슈에서 디자이너들이 Figma 얘기 많이 해서 나도 한번 해보려고 무작정 피그마를 선택했다. Adobe XD를 소마때 사용해본 경험이 있기 때문에 적응하는데 시간이 오래 걸리진 않았다.

피그마 링크

Figma

2~3일정도에 걸쳐서 열심히 디자인을 했다. 멘토님한테 컨펌을 받고, GetX와 Firestore, 그리고 그 두개를 연동하는 공부를 일주일에 걸쳐서 했다. 공부 노트에 정리도 해 가면서 열심히 했다.

두 번째 멘토링

2주차 멘토링은 9월 25일 토요일에 한 시간 정도 했다. 공부 한 것을 점검하고, 이번주 안으로 UI/기획을 확정시키고, 스키마 설계하는 것을 목표로 했다. 나중에 시간 남으면 AWS Rekognition을 이용해서 인물 표정을 분석하고 감정 데이터를 얻어온 후, 자동으로 기분을 이모티콘으로 바꿔주는 기능을 추가해보라고 제안하셨다.

26일까지 GetX와 Firebase 공부를 다 끝내고, 이제 본격적으로 프로젝트를 시작해도 되는지 멘토님한테 허락을 받았고, 새로운 2코어짜리 codespaces 만들기로 막을 올렸다. 

파일 구조부터 짰는데 https://github.com/rdbhagat999/fluttergetxcontactapp 여기서 참고를 많이 했다.

역할 분담 : 나는 홈 화면, 범준이는 로그인/회원가입 쪽을 맡고, 시작했다.

홈 화면에서 가장 중요한 것은 캘린더이다. 좋은 라이브러리들도 많이 나와 있었지만 다 내 맘에 들지 않았다. 너무 방대해서 공부하다가 시간 다 갈 것 같은 느낌의 라이브러리도 있었고 우리와 맞지 않는 디자인과 UX를 갖고 있는 라이브러리도 있었다. 그래서 그냥 내가 만들었다. 처음엔 7개의 Column을 Row로 감싼 형태로 만들었지만 추후에 GridView가 더 적합하겠다고 생각해서 리펙토링 했다. 다 만들어놓고 나니 문득 라이브러리화 시켜보고 싶었다. 소마할 때 민섭이형이 단어구름 마인드맵을 라이브러리화 시켰던 것이 너무 멋있어보여서 나도 해보고 싶었다. 우선 플젝이 급하니 완성부터 하고 라이브러리화 시키자고 다짐했다.

세 번째 멘토링

일주일동안 개인정비 시간을 전부 싸지방에 쏟아부었다. 그 결과 UI가 피그마랑 어느정도 비슷하게 나왔고, 수많은 시행착오를 겪으면서 UI 개발이 서서히 익숙해져갔다.

세 번째 멘토링은 10월 2일에 있었다. 따로 검사는 없었고 이 시간에는 멘토님께서 해야 할 것만 말해주셨다. Firebase 연동, UI 마무리를 요번 주 안에 끝내보라고 하셨다. 

스키마 설계가 의외로 복병이었다. 날짜를 클릭하면 해당 유저의 해당 날짜에 있는 오늘의 일기, 내일의 일기, TodoList 세 개를 전부 가져와야 했다. 그래서 결정한 구조는 User 데이터 안에 Diary 데이터를 두고 그 Diary 데이터는 '2021-10-23'같은 날짜 document로 이루어져 있다. 하나의 document는 오늘의 일기, 내일의 일기, Todo-List를 담고 있으며 사용자가 달력에 있는 날짜를 클릭할 때 마다 해당 날짜의 document 전체 데이터를 binding 하게 코드를 짰다.

스키마를 짜고, Firebase와 연동을 하고, GetX로 상태 관리를 하는게 모두 끝나니 일주일이 지나가있었다.

네 번째 멘토링

10월 9일에 있었는데 30분밖에 못했다. 교차 멘토링 Day라서 AI 멘토링 신청은 했는데 따로 연락이 안와서 못하게 되었다. 아쉽다. 그냥 진행상황 체크정도만 하고 끝났다. 

기능들이 거의 다 개발이 되어서 같은 생활관 동기인 승운이한테 디자인적으로 조언을 좀 얻었다. 우선 처음 디자인에선 청색계열만 있어서 전체적으로 차가운 느낌이 들고, 밋밋하다고 했다. 메인컬러, 포인트컬러 두개만 골라서 디자인 보완하는게 좋겠다고 했다. 그래서 우리의 포인트컬러는 밝은 갈색이 되었다. 일기는 주로 밤에, 혼자 있을 때 쓰기 때문에 눈이 아프면 안되고, 그렇다고 밋밋하면 안되는 애매한 경계에서 남색을 메인으로, 밝은 갈색을 포인트로 주었더니 한 층 보기 좋아졌다. 아이콘 디자인도 시도해봤다. 처음엔 토스나 카카오처럼 그림이 메인이 되는 아이콘을 모티브로 설계해봤는데 "내일"을 잘 나타내는 그림이 아무리 생각해도 없어서 그냥 글자로 하기로 했다. 영어 약자로 하려니(TD) 무슨 앱인지 모르겠고, 풀어서 쓰면 글씨 크기가 너무 작아지고 해서 한글로 했다. 그렇게 완성된 아이콘은..

심사숙고해서 만든 아이콘이다.

디자인은 너무 어렵다. 디자이너들 모두 존경한다.

디자인도 손봐서 조금 널널해진 나는 범준이가 애니메이션을 손 보는 동안 pub.dev에 내가 만든 캘린더를 라이브러리화 시키는 작업을 했다. 사실 이것도 쉽지 않았다. 내 개인 계정에 만들고싶은데 개인 계정으로는 codespaces를 사용할 수 없다. 그래서 내 개인 계정에 레포지토리만 파놓고 Fork기능으로 codespaces를 사용했다.

기존 프로젝트에서 의존성을 떼는 작업은 그리 오래 걸리지 않았다. GetX 라이브러리로 현재 연도, 날짜, 선택된 날을 받아오는거 빼고는 딱히 의존하고 있는게 없었다. 

다른 사용자가 커스텀할 수 있게 버튼 위젯, 크기, 패딩 등등을 설정할 수 있는 constructor을 넣어주고 최소한의 기능으로 pub.dev에 올려두기를 시도해봤다. 한글로 잘 나와있지 않아서 영어 문서를 한땀한땀 번역하면서 출시했다. 처음 publish 했더니 awaiting이 떠서 언제되려나 조마조마 했지만 1~2일 정도 뒤에 확인해보니 올라가있었다.

https://pub.dev/packages/simple_quick_calendar

simple_quick_calendar | Flutter Package

내가 직접 만든 라이브러리를 테스트해봤다.

잘 된다 ㅎㅎ

취지 그대로 이것저것 설정할 필요 없이 연도와 달만 주면 알아서 캘린더를 빌드해준다. simple-quick-calendar. 첫 publish는 10월 12일에 했고, 대회 끝나고 천천히 발전시켜나갈 것이다.

릴리즈 준비도 했다. 근데 생각보다 신경써야 할 것이 너무 많았다. 가장 처음 마주했던 문제는 .apk로 빌드하면 codespaces가 뻗는 문제다. 터미널에서 flutter build apk --debug를 치면 십중팔구는 튕긴다.. 그래서 범준이랑 나랑 속한 동아리 이름으로 team 계정을 만들고 10000원을 주고 유료플랜을 샀다. 이 계정에 우리 프로젝트를 fork뜨고 4코어짜리 codespaces(1인 한시간당 500원)를 내돈내산했다. 두 번째 문제는 웹에서 되던 우리 앱이 .apk로 빌드해서 실제 폰에서 돌려보니 안되는 현상이었다. 사실 이건 firebase에서 안드로이드 앱을 아직 만들어주지 않아서 그랬다. ㅎㅎ 만들어주고 google-services.json 올려주고 키값도 주니 잘 된다. 세 번째 문제는 예상치 못했던 버그가 너무 많은 것이다. todo list에서 시간을 선택하고 picker가 pop되면 버튼 text가 안바뀌는 문제, 특정 구간에서 navigator가 pop이 안되는 문제, text가 overflow되는 문제 등등 무수한 버그가 발견되었다. 이슈를 추가하고 범준이랑 하나씩 맞춰서 해결했다.

가장 큰 문제는 테스트 환경이 너무 열악하다는 것이었다. .apk파일로 다운받아서 이걸 노션에 .zip파일로 올리고 안드로이드 폰에서 그걸 다운받고 압축을 풀어서 .apk를 다운받는 이 과정은 최소 5분씩은 걸렸다. 안드로이드 스튜디오 hot reload 기능을 사용하면 0.x초만에 바뀌는건데... 심지어 내 폰은 아이폰이어서 빌드 할 때마다 팀원한테 양해를 구하고 기기를 빌려썼다.

빌드하는 중간중간 시간이 남을 때 발표자료 작업을 했다. google drive의 google presentation을 이용해서 만들었다. 사실 국방부용 한쇼로 작업을 하다가 중간에 블루스크린을 시도때도 없이 만나서 데이터가 싹 지워지는 바람에(사지방은 재부팅하면 초기 설정으로 되돌아간다.) 클라우드 환경으로 갈아탔다.

16일 오전에 중대 후임인 재만이한테 mango board라는 플랫폼을 소개받아서 영상작업을 시작했다. 역시 이것도 유료다. 일주일에 19,000원짜리 프로 플랜인데 눈물을 머금고 구입했다... 막상 했더니 좋긴 좋다. 슬라이드 형태로 되어있어서 난이도가 그리 어렵지 않았고, 자동저장 기능 덕분에 조금만 버벅거리면 꺼지는 우리 사지방 PC에서도 작업내용을 잃지 않고 진행할 수 있었다.

16일 오후에는 빌드한 앱 번들을 갖고 구글 플레이스토어 개발자계정을 사서 앱 출시 버튼을 눌러보았다. 수많은 시행착오가 있었지만 드디어 출시해보나 했는데 앱 검토 중에서 그대로 멈췄다. 찾아보니 코로나19로 출시가 3~7일정도 소요된다고 한다. 큰일이다 제출 전까지 출시되어야 하는데... 중간에 리젝먹고 출시 취소되거나 출시가 안된다면 릴리즈때문에 4~5일정도를 그냥 날린 셈이 된다. 어쩌다 보니 도박이 되어버렸다.

다섯 번째 멘토링

10월 17일 오후에 있었던 마지막 멘토링에선 지금까지 했던 것들을 리뷰했다. pub.dev에 올린 simple_quick_calendar는 잘 된다고 하셨고, 앱 퀄리티도 좋다고 하셨고, 발표자료는 핵심만 담아서 다시 만들라고 하셨고, 영상도 나쁘지 않다고 하셨다. 몇 가지 개선할 점들도 간략하게 언급하시고, 기술 스택이 살짝 부족한 것 같다고 하시며 문장감정분석을 넣는 것을 제안하셨다. 원래 목표는 파이썬으로 모델을 만들어서 감정분석을 하는 것이었는데, 범준이가 다음날 aws comprehend로 금방 구현했다. 허허 내가 하려고 했는데 까비. 암튼 개선된 기능을 넣은 앱 번들을 또 빌드해서 검토중인 버전 위에 새로운 버전으로 출시를 눌렀다. 검토중 두 개 떠있는거 보니까 마음이 착잡하다.

나는 발표자료랑 영상자료, 개발문서(깃허브 README.md)를 다듬었다. 제출이 20일까지여서 다른거 신경 쓸 겨를 없이 다듬는 작업만 계속 했다. 프로젝트 구조가 명시된게 있었으면 좋겠다고 판단해서 피그마로 그렸다.

우리 프로젝트의 구조다. 만들 당시에 Google Play Release는 없었다.

그렇게 19일, 제출 하루 전이 되었다. 일과 끝나고 18시에 사지방으로 달려가서 컴퓨터를 켜고 Google Play 릴리즈가 되었는지 확인해봤다. 오 앱 상태에 검토중이 아닌 프로덕션이라는 글이 써져있었다. 설마하는 마음에 이것저것 눌러보다가 Google Play 링크를 발견했다. https://play.google.com/store/apps/details?id=com.TDiary.tomorrow_diary 

내일 일기 - 내일을 시작하는 첫 발걸음 - Google Play 앱

드디어 출시가 된 것이다. 경고 몇개는 있지만 오류는 없어서 등록이 된 것 같다. 정말 다행이라는 생각을 했고, 도박은 성공적이었다. 두 개의 버전이 모두 출시가 완료되어있었다.

바로 발표자료랑 영상, 개발문서를 수정하고 수상권에 들 수 있겠다는 희망을 가지게 되었다. 설레는 마음으로 범준이 폰에 다운을 받아봤는데 엥? 로그인이 안된다. 설마하는 마음으로 google play console 무결성 탭에 있는 sha-1, sha-256 키를 Firebase에 추가해줬다. 오 그랬더니 로그인이 된다. 다행이다. 데이터 읽기 쓰기, 오늘의 기분, 문장 감정 분석 다 잘 된다. 딱히 큰 버그는 없었고 아직 업적은 추가를 안했지만 나중에 추가해야겠다. 업적은 노가다 작업이 많아서..

프로젝트 제출

10월 20일, 해커톤의 마지막 날이다. 마지막까지 발표자료, 영상, 개발문서를 검토하고 osam.kr에 등록 완료했다.

다 제출하고 다른 팀들의 프로젝트는 어떤지 봤다. 다들 생각보다 잘해서 깜짝 놀랐다. 특히 앱 로고를 다들 잘 그렸다. 그래도 앱 출시까지 한 팀은 우리밖에 없는 것 같다. pub.dev에 라이브러리 출시한 팀도 우리밖에 없는 것 같다. 근데 이번엔 AI가 유난히 많다. 주제도 겹치는게 꽤 많았다.

아무튼 다 제출하고 나니 속이 다 후련하다. 이번 프로젝트로 내가 얻은 것은 무엇이 있을까? 첫째로, 사지방에서 개발이 힘들지만 가능하다는 것을 알았다. 생각보다 많은 돈이 필요하지만 열정이 있다면 푼돈이지 않을까? 둘째로, 나도 flutter로 개발할 수 있고, 앱 출시도 가능하고, 오픈소스 기여도 가능하다는 것을 깨달았다. 과정은 복잡하고 힘들고 시간도 많이 걸리지만 결과가 다행스럽게도 좋아서 더욱 뿌듯한 것 같다. 셋째로, 코딩 실력이 늘었다. 입대 후에 간간히 알고리즘만 하다가 제대로 된 프로젝트를 하면서 경험하지 않으면 알 수 없는 것들을 많이 알았다. 군대 입대하기 전에 실력 떨어지는건 어쩔 수 없지만 할 수 있는거면 해보자! 라는 각오로 입대했는데 어느정도 이룬 것 같다.

처음엔 그저 휴가만 바라보고 시작했지만 의외로 얻은게 많았다. 비록 상은 타지 못했지만 시간을 버린 느낌은 아니다. 이제 알고리즘 해야지..

프로젝트 소개는 : https://sunrinnote.tistory.com/138