[제 8회 UNITON] 2박3일의 온라인 해커톤 참여 후기

약 2년만에 해커톤에 참여했습니다. 그리고 두번째 언택트 해커톤으로 하게 됐습니다.

실은 첫 언택트 해커톤이었던 ibm 해커톤은 굉장히 어색했는데 코로나의 장기화로 인해

사이드프로젝트와 넥스터즈를 활동하면서 온라인 프로젝트에 익숙해져서 이번 해커톤은 평온한 상태였습니다:) 

오랜만에 참여했던 해커톤인 만큼, 이번 해커톤을 하면서 생각했던 부분, 디자인을 진행했던 과정 등을 가볍게 회고하고자 이렇게 글을 적게됐습니다.

 

 

해커톤 나갈래?

 

 

이번 해커톤의 참여는 이러했어요. 평범했던 어느 날, 하나의 카톡을 받게 되었습니다.

해커톤을 할 체력이 있을지 스스로에게 좀 의문점이 있었던 저는 처음에는 좀 망설였던거 같아요.

이때 아주 구미가 땡기는 말이 있었습니다.

"빡세게 안해. 즐기면서 할거야"

 

그래서 오케이! 가보자고~! 라는 마인드로 재밌는 추억도 만들겸

오랜만에 대학생때 여러 해커톤나갔었을때 느꼈던 열정을 다시 느끼고 싶어서

참여하게 됐습니다.

 

저희팀은 저에게 먼저 제안을 해줬던 팀장님 중심으로 드래곤볼처럼 한명한명 모여서

기획 1, 디자인 1, 프론트 2, 서버 1 이렇게 5명이 팀을 이뤘습니다.

 

 

 

 그럼 제가 참여했던 UNITHON에 대해서 알려드릴게요.

 

UNIT이 주관하는 IT 커뮤니티 연합 해커톤입니다. UNIT는 대학교 동아리, 연합 단체, 온오프라인 커뮤니티 운영과 해커톤, 경진대회, 컨퍼런스 등의 IT 대외활동 참여를 통해 느낀 문제점을 해결하고자 설립한 단체입니다. 그래서 여러 IT 동아리와도 긴밀하게 관계를 맺고 있고 여러 회사에서 후원도 받고 있답니다.

 

이번 해커톤은 제 8회를 맞이했으며, 2022. 3. 4(금) 오후 7시 ~ 6(일) 오후 3시까지 진행되었습니다. 해커톤 자체는 온라인을 기반으로 했지만 몇몇 팀은 방역수칙에 준수하여 오프라인으로 모여서도 하고 있었습니다! 저희 팀은 온라인 베이스로 게더와 디스코드를 이용해서 참여했습니다.

 

이번 유니톤은 온라인으로 진행되면서 디스코드, 줌, 노션을 툴로 사용했습니다. 

 

여담으로, 저도 요즘 사이드프로젝트하거나 넥스터즈할때 저희팀은 디스코드를 사용하는데 확실히 디스코드가 게임하는 분들이 써서 그런지 음질도 좋고 화면도 공유 잘되더라구요. 무엇보다 각 채널별로 음성방/채팅방 만들 수 있어서 협업하기 매우 좋아요 :)

 

 

 

 

 

 

 이번 UNITHON의 주제는

 

 

이번에 제시된 키워드는 공유자원, 평화, z세대, 갓생, 레트로, 자연 이렇게 총 6개였고

4명의 연사분들이 하나씩 주제에서 제외할 키워드를 뽑기로 뽑아주셨고

남은 두가지 키워드가 주제가 되는 방식이었습니다.

유니톤은 매번 추첨을 통해 두개의 주제가 발탁되고 그 두개의 주제를 합쳐서 각 팀별로 아이디어를 도출하여 해커톤을 진행하게 되는데요.​

 

그래서 이번 주제는 Z세대와 레트로 였습니다.

 

처음에 주제를 들었었을 때는

'엥?' 했습니다.  z세대와 레트로요..? 저는 z세대의 취향과 마음을 아직 잘 모르겠는데 레트로랑 어떻게 섞을 수 있을지 고민했었습니다.

 

그러다가 저희팀 유일한 z세대였던 지원님께서 교환일기라는 아이디어를 내셨고

저희는 이 교환일기를 온라인 가상공간(a.k.a 메타버스)에 접목시켜 요즘 z세대의 감성에 맞는 교환일기를 만들게 됐습니다.

 

 

 

 

그래서 탄생한 '퐁당퐁당'

 

z세대의 특징 중 하나는 비대면으로 인간관계를 맺는 것에 거리낌이 없으며, 인간관계가 자존감을 높이는 가장 중요한 요소라고 생각합니다.

저희는 그래서 이들의 특징을 잘 살려서 '본인의 인간관계가 얼마나 끈끈한지 보여줄 수 있는 장치'를 만들어주려고 했습니다. 그래서 그 장치를 공유해서 남들에게 자랑할 수 있도록 하자,라고 의견을 모았습니다.

그래서 저희는 일반적인 교환일기가 아닌, '자랑하고 공유할 수 있는'  교환일기를 만들었어요. 가상의 연못을 통해서 말이죠.

퐁당퐁당은 친구와 내가 교환일기를 작성하면 작성할수록 빈 연못에서 점차 예쁘고 아기자기하게 꾸며집니다. 

해당 연못은 공유가 가능하고, 공유받은사람은 '게스트모드'로 해당 연못을 구경할 수 있습니다.

추후에는 얼마나 적었는지에 따라 열리는 테마도 생길거고, 배경음악의 종류도 많아지게 확장할 생각이었습니다.

 

 

 

발표자료 중 교환일기 기능 내용

 

 

 

그 밖에 교환일기이기 때문에 당연히 친구 초대기능이 있는데요. 해당 일기는 초대된 사람들끼리만 작성할 수 있는 권한이 생깁니다. 

또한 다이어리에는 나의 기분을 쉽게 표현할 수 있는 '기분날씨'가 있으며 오늘 하루에 대해 일기를 적을 수 있는 텍스트박스가 있습니다.

발표자료 중 교환일기 기능 내용

 

 

 

 

 

퐁당퐁당 브랜딩 및 디자인 이야기

 

 

퐁당퐁당의 이름은 사람의 감정을 '물결'에 비유하면서 만들어진 이름입니다. 교환일기를 쓸수록 물결의 파동이 많아지고 넓어질것이며

그 파동은 상대방에게 위로와 감정을 전할거라는 의미를 담아 퐁당퐁당이라는 이름을 짓게 됐습니다.

 

이번에 해커톤을 참여하면서 저는 전반적인 디자인을 맡게 됐는데요.

퐁당퐁당이란 이름, 그리고 교환일기라는 아이템, 그리고 연못이란 가상공간을 잘 어우를 수 있는

브랜드 컬러를 뽑기 위해 고민이 됐었습니다.

 

처음에는 무채색,베이지 톤으로 메인 컬러를 뽑았다가

좀더 마음의 안정을 줄 수 있는 컬러가 뭐가 있을까 고민하게 됐고

'자연의 컬러'면 좋겠다, 라는 생각을 해서 연못에 어떤 색이 있을까 고민했어요.

 

처음엔 '파란색'을 메인으로 삼았다가 연못 자체가 파란색인데 cta나 하이라이트컬러까지 파란색이면 강조될 부분들이 묻힐것 같아서

연못 근처에 있는 '풀', '나무'가 생각이 났고 그래서 초록 계열의 차분한 톤으로 메인컬러를 잡게 됐습니다.

뽑힌 컬러들은 2박 3일 해커톤에 맞춰서 진짜 필요한 컬러들만 뽑아서 컬러 시스템을 만들었습니다.

실은 뷰가 적어서 시스템을 안만들어도 되었겠지만, 실 프로덕트처럼 세세하게는 못짜더라도

해커톤인 만큼 디자인 수정이 바로바로 되어야겠다 생각이 들어서

 

개발단과 디자인의 일치화가 필요하다고 생각이 들어서 컬러 및 폰트 초기 셋팅을 했습니다.

 

 

 

 

그리고 해커톤인만큼 '메인기능'만 딱 잡고 가보자!라고 생각이 들었고, 2박3일동안 개발 및 디자인을 클리어할 수 있는 스펙을 짰습니다.

그래서 일단 '친구 초대', '공유', '연못', '일기 쓰기' 이렇게 네가지 메인기능으로 mvp를 설계했습니다.

 

중요 기능만 뽑아서 짠 설계도

 

 

또한 저희팀은 프론트 개발자분들이 웹프론트 개발자분들이었기 때문에, 웹 서비스를 만들었어야했는데요.

완전한 반응형으로 개발하게되면 2박 3일 해커톤동안 기능개발보다 비율에 따른 디자인 대응만 계속해야할 것 같다는

생각이 들어서 width 값을 고정하여 모바일 퍼스트 뷰를 만들게 됐습니다.

 

 

 

 유니톤을 마치고

 

저희팀은 아쉽게도 상을 타진 못했습니다. 오랜만에 하는 해커톤이었고 오랜만에 짧은 시간 안에 결과물을 뽑기 위해 굉장하 집중력을 발휘해서 작업을 해서 재밌었습니다.

팀장 오빠를 중심으로 모였던 팀이었던 만큼, 처음 만나는 사이들이 많았는데요. 그럼에도 불구하고 손발이 척척 잘 맞았고 2박3일동안

굉장히 재밌게 해커톤을 진행했어요.

처음보는 분들과 해커톤한 것도 첫 경험이였어서 저도 신선했는데, 다들 긍정적이시고 아무래도 현업자들이 많아서 그랬는지 척하면 척- 

소통이 잘됐습니다.

 

 

그리고 유니톤 웰컴키트가, 일반적인 오프라인 해커톤보다 엄청 빵빵했었습니다.

박스 한가득 간식, 책, 마스크, 스티커 등 다양한 선물들이 들어 있었고, 무엇보다도 제가 감탄했던 것은 유니톤 메인컬러이 보라색인데요. 손소독제랑 가글까지 보라색으로 맞춰서 보내줬다는 것이었어요.(이번 유니톤만 보라색이 메인인건지, 원래 보라색이 브랜딩컬러인지는 잘 모르겠지만요..)

 

 

또,  유니톤 측에서 여러 이벤트를 준비해주셔서 2박3일동안 소소하게 이벤트 참여도 했었고

배달의 민족 쿠폰으로 식대도 지원해주셔서 랜선 회식처럼 저녁도 맛있게 먹으면서

해커톤을 참여했습니다.

이벤트 내용

 

해커톤이 끝나고 서버 비용 등으로 인해 바로 서버를 내려서 실 서비스는 공유드리지 못하지만.

프로토타입 링크 공유해봅니다 :)

Figma