치킨톤 해커톤
치킨톤 해커톤 - 하룻밤 사이에 아이디어를 현실로!, 꿈을 이루는 12시간의 여정
blueberry-team.com
저는 이번에 치킨 먹는 해커톤 - 치킨톤에 참가했습니다.
오후 10시부터 오전 10시까지 12시간을 달리는 치킨톤에 참여하면서
플러터를 하나도 모르던 제가 12시간 동안 앱을 만들고 발표한 과정을 회고해보려 합니다.
해커톤, 그 무언가 큰 산
저는 밤새서 코딩하고 다 같이 즐기는 해커톤을 참가하는 로망이 있었습니다.
하지만 12시면 칼잠을 자고 6시에 일어나는 저에게는 해커톤이 무리였고
인원 모집이나 외부 장소에서 한다는 것 때문에 계속해서 미뤄왔습니다.
온라인이고 치킨도 먹을 수 있는 해커톤
그러던 와중 제가 활동 중인 안드로이드 개발 Q&A 및 팁 오픈채팅방에
블루베리(오픈채팅 활동명)님께서 해커톤을 개최하신다 해서 관심을 가지게 되었습니다.
직관적이고 간결한 프로세스
강의로 쉽게 환경설정을 할 수 있었고 서포터분들도 정말 많이 도와주셨습니다.
- 온라인으로 진행
- 플러터로 진행하지만 초심자도 OK(강의, 서포터분들의 강력한 지원)
- 강의 제공(환경 설정, 디자인, 아이디어 기획)
- 상품은 치킨 (제일 중요)
저는 네이티브 안드로이드 개발자로서 플러터 & 다트는 처음이었지만,
초심자도 쉽게 접근할 수 있다는 안내와 마침 만들고 싶던 아이디어가 있어 참여를 결심했습니다.
환경설정부터 디자인, 기획까지 프리패스
막상 치킨톤을 신청했지만 플러터를 다뤄본 적이 없어서
환경설정을 어떻게 해야 되나 했지만
짧고 간결한 강의를 제공해 주셔서 금방 환경 설정에 성공했습니다.
고등학생일 때 자바를 처음 배워보려 했지만
환경 설정 때문에 때려치운 전적이 있는 저도 강의를 보며 쉽게 환경설정할 수 있었습니다.
그때당시 자바는 절대 하지 말아야지 생각했지만 공교롭게도 지금은 JVM 기반 언어인 코틀린을 다루고 있네요
디자인 - Stitch + figma
디자인에 똥손인 저도 Stitch라는 AI를 통해 간결하고 직관적인 디자인을 뽑을 수 있었습니다.
챗지피티한테 대략적인 기획을 설명해 주고 Stitch에 넣을 것이라고 설명을 하면
그에 맞게 기획서를 작성해 줍니다
이렇게 블라블라 적어준 내용을 Stitch에 복붙을 하게 된다면 적절한 UI를 만들어줍니다
앱에 적절한 일관성 있는 UI, 색상을 적용해 줘서 만족했습니다.
물론 한 번에 만족스러운 UI를 만들어주지는 않았지만
여러 번 핑퐁 해서 구상하고 있던 UI를 만들었습니다.
이 UI를 다운로드하고 피그마에 적용시키고 해당 내용을 바탕으로 windsurf를 돌렸더니
꽤 적절한 앱을 만들어줬습니다.
기획, 선택과 집중
시간제한이 있기 때문에 최대한 이 앱의 중요한 것만 추려서 작업했습니다.
- 가계부에서 수입은 빼고 지출만 작성
- 가계부에 감정을 등록할 수 있어야 한다
- 감정별로 가계부를 필터링해야 한다
- 그래프로 감정별 퍼센티지를 보여줘야 한다
- 감정은 변경 가능하며 지출 화면에서 변경 이력을 짧게나마 보여줘야 한다
- 감정이 변경되는 이유는 작성되어야 한다
부차적인 요소는 빼거나 간소화했습니다.
- 금액은 최대 100만 원 (오버플로우 방지)
- 지출 카테고리는 4개만
- 감정 변경은 한 번만
- 날짜별로 필터링 X
- Local DB(Hive) 사용
- 서버 연동 X
지출 화면, 지출 추가 화면을 작성하고 기본적인 CRUD부터 작업한 후에
감정 변경, 감정별 그래프 작업을 하였습니다
Flutter를 모르는 내가 5시간 만에 앱 빌드?
치킨톤은 개발을 잘 모르는 분들도 쉽게 개발할 수 있게 탬플릿을 제공했습니다.
Firebase 설정, figma MVP 연동, MVC 디자인 패턴,
그리고 탬플릿에 대해서도 설명을 해주셔서 플러터에 대한 대략적인 틀을 이해할 수 있었습니다.
플러터는 몰랐지만 샘플 코드를 보니 Jetpack Compose와 비슷한 형태였습니다.
선언형 UI이고 Material 위젯 구조여서 대략적인 이해가 쉬웠습니다.
프로젝트 코드의 일부지만 Jetpack Compose와 비슷했습니다.
그래서 로직은 어떻게 작성하나요?
가장 큰 난관 중 하나인 코드 작성입니다.
Dart 언어를 사용해 본 적이 없어서 걱정이 많았지만
windsurf와 개발을 진행했습니다.(모델은 claude Sonnet 4.5)
AI는 실수를 하거나 갑자기 이상한 결괏값을 뱉어낼 수 있어서
항상 검토 후에 적용시켰습니다.
그리고 테스트 코드를 매번 작성했습니다.
테스트 코드를 작성하면 AI가 이상한 값을 적용했을 때
테스트 코드에서 에러가 발생하니 확인하기 쉬웠습니다.
UI 테스트 코드 작성 및 LocalDB 선정
UI를 제외하더라도 CRUD 테스트를 작성했습니다.
새벽에 신나게 핑퐁을 하다 보니 크레딧을 270개 정도 써버렸습니다.
시간 가는 줄 모르고 즐겁게 코딩했네요
서포터분들에게 도움을 받고 다 같이 개발하자!
중간중간 서포터분들에게 도움을 받을 수 있는 시간이 있어서 유용하게 사용했습니다.
그리고 디스코드 음성방에 다 모여있어서 다 같이 개발하는 기분도 들어서 좋았습니다.
중간중간 퀴즈도 진행해서 먹을 것도 나눠주셔서 좋았습니다.
저는 처음에 퀴즈라 해서 개발에 관련된 것인 줄 알았지만
초성으로 게임 맞추기, 국기보고 나라 맞추기, 노래 듣고 제목 맞추기 등등
졸리고 피곤한 새벽을 깨워주는 좋은 퀴즈였습니다
발표와 시상
12시간의 여정이 끝나고 프로젝트 발표를 했습니다.
저의 프로젝트에 대해서 설명하고 강조하고 싶었던 것 추후 계획 등을 발표했습니다.
발표 후 “화면 파일의 역할이 너무 많다”는 피드백을 듣고, 즉시 구조를 분리하며 리팩터링을 진행했습니다.
저보다 더 완성도가 높으신 분들도 있었고 아이디어도 정말 다양했습니다.
같은 시간을 쓴 게 맞나 싶을 정도로 고도화가 되어있었고 Firebase도 연동하신 분도 계셨습니다..
아쉽게도 치킨을 받지 못했지만 즐거웠던 경험이었습니다.
아쉬웠던 점
보다 고도화할 수 없었을까 하는 아쉬움과
내가 플러터에 대한 이해도가 있고 다트 언어를 알았더라면 더 코드를 다듬을 수 있지 않았을까 하는 아쉬움이 있었습니다.
(날짜별 필터링, 원 그래프, 더 많은 카테고리)
치킨을 받지 못해서 아쉬웠다 (더 최선을 다해서 할걸)
이것들은 저에게 숙제가 되어 저를 더 앞으로 나아가게 하는 원동력이 될 거 같습니다
좋았던 점
좋았던 점은 플러터를 경험해 봤다는 것입니다
그리고 개발자분들, 블루베리팀과 교류를 한 거 같아서 좋았습니다.
Stitch나 figma 플러그인에 대해서 알게 되고 사용해 봐서 좋았습니다.
공백기가 길어지며 개발에 대한 감흥이 사라져 가던 중, 다시 열정을 되살려준 계기가 되었습니다.
End? And!
저는 이 프로젝트를 구상할 때부터 해커톤 용도로 일회용이 아닌 지속적으로 발전시키고 싶다는 생각이 있었습니다.
그리고 좋은 제안을 받게 되어서 해당 프로젝트를 더 고도화할 수 있게 되었습니다.
(해당 내용은 추후 포스팅 할 예정)
더 고도화하고 싶은 것들이 많아서 다듬다 보면 더 좋은 앱이 될 거 같습니다.
이번 치킨톤을 통해서 성장하였고 앞으로 달려갈 수 있을 거 같습니다.
이번 치킨톤을 준비해 주신 블루베리팀에 감사드립니다!
개발을 잘 모르시더라도 다음 치킨톤이 개최된다면 참여해 보시는 거 어떤가요!
치킨톤 강력 추천합니다!
https://github.com/hegunhee/todo-list
GitHub - hegunhee/todo-list: 치킨먹는 해커톤 치킨톤에서 발표한 쓰는 가계부
치킨먹는 해커톤 치킨톤에서 발표한 쓰는 가계부. Contribute to hegunhee/todo-list development by creating an account on GitHub.
github.com
해당 링크는 제가 작업했던 내용을 볼 수 있는 깃헙 레포지토리입니다.