Unithon(유니톤) 이란?

유니톤 포스터

UNITHON(유니톤)은 UNIT, NEXTERS, REAL, YAPP 4개의 IT 연합단체가 주최 ・ 주관하는 대학생 연합 해커톤이다. 제 5회 UNITHON은 연합동아리, 각 학교 IT 동아리, 학과 소모임에 한해 초청제로 진행되었다.

1일차

나는 디프만 동아리 소속 웹 개발자로 해커톤에 참가하였다. 팀 빌딩은 참가신청시 기입했던 개발언어, 사용 툴, 희망 플랫폼을 토대로 UNITHON 운영진이 팀을 구성한다. 우리 팀은 7팀이었고 웹 기획자 1명, 디자이너 1명, 서버 개발자 2명, 웹 개발자 3명으로 구성되었다. 팀명은 유니톤의 UNI와 7팀의 7을 따서 ‘UNI77’으로 정했다. 아이디어를 정하는 것은 매우 어려운 일이었다. 밤 늦게까지 회의를 하다가 정해지지 않아서 다음날 아침에 다시 모이기로 결정하였다.

2일차

상을 받기 위해서는 후원사들의 기술을 적용하는 것이 유리하다고 생각되서 네이버 로그인과 아마존과 농협핀테크와 Microsoft Cognitive Services를 사용하여 가계부를 만들기로 결정했다. 다른 팀들에 비해 조금 늦게 주제를 정했지만 서둘러 개발을 시작하였다. 협업 툴로는 잔디의 후원을 받아 가입하긴 했지만, 이벤트와 공지사항을 받는 용도였고 github와 zeplin을 사용하여 협업하였다.

프로젝트 (KOK - 프로귀찮러를 위한 지출관리 시스템)

단순한 가계부가 아닌, Microsoft Cognitive Services를 이용하여 사진을 찍은 다음 인식하여 어떤 결제내역인지 저장하는 서비스이다.

문제
1. 대다수의 사람들은 지출관리의 필요성을 느끼고 있지만 일일이 내역을 적는 것에 귀찮음을 느낀다. 그 과정이 번거롭기 때문에 가계부 사용자는 많지 않다.
2. 기존 금융권의 결제 내역을 보면 알 수 없는 명칭(ex.이니시스, 주식회사 등)으로 등록되어있어, 내가 어떤 물건을 소비했는지 파악하기 어렵다.
해결
1. AI이미지 인식서비스를 이용하여 클릭 한번으로 지출관리가 가능할 수 있도록, 어떠한 상품을 지출했는지 사용자에게 알려줄 수 있도록
2. 금융 계좌 입출금 내역을 연동하여 사용자의 지출 내역을 자동으로 정리, 보관할 수 있도록

개발자들이 웹 개발자이고, 디자이너는 ios디자이너라서 웹앱을 만들기로 결정하고 Node.js와 Vue.js를 이용하여 개발을 하기로 하였다. 웹 개발자 중에서 한명 빼고 Next를 처음 사용해봐서 배우면서 개발을 해야 했다. 디자인이 빠르게 나오고, 메인 페이지와 로그인화면 등을 구현하였다. 하지만 농협핀테크 사용을 하기 위해서는 기업또는 기관 인증을 해야 되서 운영진에 물어보았더니, ‘이러한 API를 사용할 계획이다’라고 발표하면 된다고 하여 주제를 바꾸지 않고 진행할 수 있었다. 2일차에 거의 모든 개발을 밤새서 했다.

3일차

PPT와 시연영상 등 발표자료를 준비하였다.

시스템 구성도

결과

프로젝트는 완벽하게 완성하지 못해서 아쉬웠지만 최선을 다해서 만들었다. 그 결과….!!

AWS 특별상을 받았다. 전제민 PS팀 리더님께서 역삼역에 있는 아마존웹서비스 코리아에 초대도 해주셨다!!!

마치면서

처음 참여해본 해커톤이었지만 Vue.js를 배워가면서 하는 재미가 있었고, React.js를 써보다가 Vue.js를 써보니 비교적 쉽다는 느낌을 받았다. 아이디어가 늦게 나온 만큼 시간도 부족했기 때문에 프로젝트는 완벽하게 완성하지 못하였다. Frontend와 Backend 연결을 하지 못했고, 웹앱에서 디바이스의 카메라 접근을 하지 못하였다. 하지만 열심히 노력한 결과 특별상까지 받게 되어서 좋았다. (+이벤트를 많이해서 사은품도 많이 받았음bb)

Unithon(유니톤) 이란?

1일차

2일차

프로젝트 (KOK - 프로귀찮러를 위한 지출관리 시스템)

3일차

시스템 구성도

발표자료

시연영상

Github Repository

결과

마치면서