개발/해커톤

JUNCTION ASIA 2022 참가 후기 (3)

havana723 2022. 10. 2. 18:47

JUNCTION ASIA 2022 참가 후기 (1)

 

JUNCTION ASIA 2022 참가 후기 (1)

어쩌다보니 정션 아시아 2022 해커톤에 참여하게 되었습니다. 사실 너무 귀찮아서 블로그 글을 쓰지 않으려고 했는데, 기억이 사라지기 전에 조금이나마 남겨보고자 글을 적게 되었습니다. 끝까

blog.havana.moe

JUNCTION ASIA 2022 참가 후기 (2)

 

JUNCTION ASIA 2022 참가 후기 (1)

어쩌다보니 정션 아시아 2022 해커톤에 참여하게 되었습니다. 사실 너무 귀찮아서 블로그 글을 쓰지 않으려고 했는데, 기억이 사라지기 전에 조금이나마 남겨보고자 글을 적게 되었습니다. 끝까

blog.havana.moe

 

정말정말 오랜만에 다시 쓰는 정션 후기입니다. 다 까먹어서 이제 뭘 적어야 할 지도 모르겠지만, 댓글로 후기가 재밌었다고 말해주신 분이 계서서 다시 쓰게 됐습니다. 감사해요. 그치만 까먹어서 재미가 없을 수도 있어요... 죄송합니다...

 

둘째 날의 시작

둘째 날의 아침이 밝았습니다. 이제 정말 개발을 시작할 때입니다. 이제 와서 소개하기는 조금 늦은거 같지만 매번 동아리 선배, 또는 동아리 선배가 데려오신 지인분, 룸메의 회사 동료 등으로 호칭하기는 번거로울 것 같으므로 개발 얘기를 하기 전에 팀원을 소개해보도록 하겠습니다.

 

첫 번째로는 전에도 언급했던 shiftpsh 님입니다. 항상 감사한 분입니다. 두 번째로는 동아리 선배인 susemeee 님입니다. 동아리 내의 (개발 동아리 아님 천문 동아리임) KUAAA Telecom이라는 소모임을 통해 웹 개발 기초 스터디를 열어주시는 등 제 길지 않은 개발 활동에 많은 도움을 주신 분입니다. 몇몇 토이 프로젝트의 배포를 도와주시기도 했습니다. 마지막으로는 susemeee 선배의 지인이자 룸메이트의 회사 동료인 rita 님입니다. 이번 해커톤에서 처음 뵈었는데, 어리버리하는 저를 데리고 인생네컷을 찍어주시는 등 엄청난 친화력을 보여주셨습니다. 프론트 개발도 거의 다 하시고 엄청 멋있었어요.

 

다시 본론으로 돌아와서, 개발 이야기를 해보고자 합니다. 우선 아침에 모여 제공된 식권으로 밥을 먹고, rita 님과 susemee 님이 각각 프론트와 백엔드 셋업을 시작했습니다. shiftpsh 님은 디자인 시스템을 만들기 시작했고, 저는 figma를 이용해 페이지 레이아웃을 짰습니다.

 

페이지 레이아웃

페이지 레이아웃

 

피그마를 이용해 1차적으로 만든 페이지 레이아웃입니다. 전날 이야기했던 프로젝트 기획을 바탕으로 메인페이지-마이페이지-꾸미기페이지-상점페이지로 구성된 간단한 레이아웃을 만들었습니다. 바로 디자인하지 않고 먼저 레이아웃을 만든 것은 처음인데, 디자인 초기 구상을 하기에도 좋고 작업이 엄청 빨라져서 만족스러웠습니다.

 

디자인 시스템

제가 레이아웃과 싸우고 있는 와중에, shiftpsh님이 엄청 멋진 배경색과 로고를 만들어주셨습니다.

 

정말 너무 예쁜 디자인

 

약간 인스타스러운 느낌도 나고 색은 화려하면서 로고는 검은색인 점이 마음에 들었습니다. 이 둘 이외에도 노트북 베이스 이미지나 스티커들, 그리고 페이지에 사용될 아이콘들 등 디자인을 위한 asset들을 제작해주셨습니다. 덕분에 디자인하기 엄청엄청 수월했어요.

 

디자인

최종 디자인

 

그렇게 해서 최종적으로 확정된 디자인입니다. shiftpsh 님께서 뽑아주신 색을 중심으로 디자인하였고, 그 외의 요소는 최대한 심플하게 가려고 했습니다. 전문적으로 디자인을 배우신 분들에게는 못미치겠지만, 제가 한 디자인 중에서는 꽤 마음에 드는 편입니다. 특히 마이페이지 쪽이 가장 마음에 드는데, 프로필 카드를 복사하여 블러처리 한 게 진짜 예쁜거 같아요.

 

다만 아쉬운 점은 프론트에서 구현할 것을 깊게 생각하지 않고 디자인 했다는 점인거 같습니다. 빠르게 올리기 위해 tailwind를 사용하기로 했는데, 보면 알듯이 tailwind로 구현하기에는 그렇게 적합한 디자인은 아니었던 거 같습니다. 결국 중간에는 emotion과 섞어 쓰기도 했고요. 좀 심플하더라고 구현이 빠르게 되는 디자인을 했다면 어땠을까 하는 아쉬움은 남습니다.

 

이전 편이 기억에 남는 분들이라면 여기까지 읽었을 때 한 가지 의문이 들 수 있습니다. 디자인은 shiftpsh 님이 하고 저는 프론트를 하기로 했지 않느냐, 하는 의문일 텐데 이건 제가 할 말이 없습니다. 초반에는 디자인 인력이 생각보다 많이 필요했고... 저는 디자인이 너무너무 재밌었고... 프론트를 하기에는 제 프론트 실력이 shiftpsh 님이나 rita 님에 비해 모자랐기 때문에... (프론트를 만지기도 했는데 이상한 부분에서 집착하느라 rita 님을 계속 귀찮게 했습니다 죄송합니다죄송합니다) 그냥 디자인을 했습니다. 재밌어서 좋았지만 이건 해커톤에 (개발자로) 참가했다고 할 수 있는 걸까요? 조금 양심에 찔려요.

 

그리고 진짜 개발

그리고 진짜진짜 프론트엔드 개발을 시작했습니다. rita님이 프로젝트 셋업해주신 것을 기반으로, navigation 바를 만들었습니다. 이후 rita님이 백엔드와의 연결 부분을 작업하시는 동안, 메인 화면 부분을 개발하였습니다. 여기까지가 오후 5시 쯤 됐었던 걸로 기억합니다. 중간에 점심도 먹고 shiftpsh 님과 rita 님의 지인도 만나고 등등의 일들을 하면서 쭉 개발에 힘을 쏟았습니다.

 

개인적으로는 tailwind 쓰는 것이 꽤 어려웠는데, 1편에서도 말했듯이 써보지 않은 기술 스택을 안일하게 시도한 점을 반성하게 되었습니다. 한 두시간 만져보고 나서는 tailwind를 좀 이해할 수 있게 되었는데, tailwind로는 구현하기 어려운 부분들이 있다고 생각해서 emotion도 같이 쓰는 방향으로 선회했습니다.

 

꽤 challenging 할 거라고 생각했던 스티커 에디터 부분은 shiftpsh 님께서 작업해주셨습니다. 작업한 거 만져봤는데 누르면 스티커가 찍히는 게 너무너무 신기했어요.

 

여기까지 하고 나서는 뭔가 많이 한 거 같지 않은데도 시간이 많이 흘러 있어서 놀랐습니다. 조금 개발하다가 정신 차리니 저녁 먹을 시간이고... 또 조금 하다가 정신 차리니 야식 먹을 시간이고... (먹는 얘기만 있는 거 같다면 착각입니다) 밤에는 너무 졸려서 빈백에서 개발하다가 새벽 3시 쯤에 호텔로 가서 각자 작업하기로 하였습니다. 디스코드를 켜고 개발하기로 했지만... 정말 필수적인 기능만 개발하고는 모두 지쳐서 쓰러졌던 거 같습니다. 여기까지가 둘째 날의 이야기입니다.

 

대망의 마지막

마지막 준비

여기서부터는 해커톤 마지막 날의 이야기입니다. 전날 새벽 5시쯤 잠든 저는, 아침에 맞춘 알람에 겨우 일어나 9시에 대회장으로 향했습니다. 너무너무 졸렸지만 아직 마지막으로 좀 더 개발해야 할 부분이 남았고, 발표 준비도 하고 데모 영상도 찍어야 했기에 비몽사몽한 상태의 몸을 끌고 갔습니다.

 

발표는 제가 맡기로 했는데, 둘째 날에 잠깐 시간이 비기도 했고 나름 외국에 살다 왔기에 (그렇다고 영어를 잘 하는 건 정말 아니지만) 영어로 발표한 적이 꽤 있었기 때문입니다. 대본은 따로 작성하지 않고 발표 자료를 만들면서 머리속에서 말해야 하는 부분을 정리하는 식으로 준비했는데, 긴장하면 말이 빨라지는 버릇이 있기 때문에 일부러 주어진 발표 시간보다 조금 길게 준비했습니다. 발표 준비한다고 개발하는 팀원들 붙잡고 들어보라면서 대본을 랩하듯이 말했는데 바쁜 와중에도 다들 잘 들어주셔서 감사했습니다.

 

아무튼 9시에 회장에 도착해서 정말정말 빠르게 상점과 스티커 구매 기능을 만들고 (이게 전날에 완성이 안 됐다는 게 놀라운데 진짜 너무 졸렸습니다...) shiftpsh 님의 맥북으로 데모 영상을 찍었습니다. 편집까지 shiftpsh 님이 해주시고, 마감 30분 전에 마지막 결과물을 제출했습니다. 이게 뭐라고... 긴장감이 풀리면서 힘이 쭉 빠졌던 기억이 있습니다.

 

발표

그러나 여기서 끝이 아닙니다. 발표라는 마지막 단계가 기다리고 있습니다. 정션 아시아의 발표는 각 트랙 별로 심사위원들이 나와 테이블을 돌아다니며 발표를 듣는 방식이었습니다. 이후 트랙 별 우승자는 따로 단상에 올라가 발표하고, 최종 우승자를 가립니다. 처음부터 단상에 나가서 발표하는 것으로 알고 있었는데, 아니라서 상당히 다행이었습니다. 덕분에 긴장을 조금 덜 수 있었습니다.

 

저희 팀은 마지막에 가깝게 진행되었는데 기다리는 동안 다른 팀의 발표를 기웃거렸습니다. 사람들이 많이 몰려서 듣기는 어려웠지만, 발표가 어떻게 진행되는지 감을 잡을 수 있었습니다. 그렇게 기다리다가... 발표를 했습니다! 많이 떨릴 줄 알았는데, 생각보다 그렇게 떨지는 않았던 거 같습니다.

 

연습한 보람이 있는지 무난하게 발표를 마치고, 모든 긴장이 풀려 테이블에 엎어져있었습니다. rita 님과 susemeee 선배는 뒤에 빈 백에 쉬러 가셨습니다. 다들 밤새 개발해서 피곤한 모양인지 빈백이 되게 인기였습니다. 그렇게 쉬고 있는데 갑자기 shiftpsh 님이 저를 급하게 깨웁니다. Chainapsis 트랙 측 분들이 오셔, 혹시 간단하게 다시 한 번 소개해 줄 수 있냐고 물어보셨다는 겁니다. 이게 무슨 일일까요? 반쯤 자고 있던 저는 영문도 모른 채 발표 대본을 읊었습니다. 사실 뭐라고 말했는지도 잘 기억이 나지 않습니다. 그리고 질문 몇 개를 하시고 돌아가셨습니다. 이 타이밍에 질문을 하러 오다니 혹시...?

 

수상자 발표

이어서 트랙 별 수상자 발표가 시작되었습니다. 각 트랙의 1등이 공개되었고, 1등 팀들이 나와 발표를 진행했습니다. 저희 팀은 1등은 아니었습니다. 트랙 1등 팀들의 발표 모두 흥미롭게 들었는데, 그 중에서도 AWS 트랙 1등 팀의 발표가 가장 기억에 남았습니다. AI에게 키워드를 주고 그림을 그리게 하는 것을 반대로 뒤집어, AI가 그린 그림을 보고 키워드를 맞추는 게임이었는데 어떻게 저런 발상을 하지 싶었습니다. 이후에는 최종 우승자를 가리기 위한 투표를 하였는데, 실제 투표 결과는 어떤지 모르지만 역시 AWS 트랙 팀이 최종 상을 받았습니다.

 

그리고 저희 팀은... 놀랍게도 Chainapsis 트랙의 2등상을 받았습니다! 사실 발표 시간에 다시 한 번 와서 물어보셨기에, 저희 팀이 어딘가의 보더라인에 있을 것이라고 추측하였습니다. 3등상을 어떻게 할지 고민하고 계셨던 거라고 생각했고, 그래서 3등상에 다른 팀이 호명되었을 때 아 아쉽다 하고 생각하였습니다. 그런데 생각치도 못한 2등이라니... 다른 팀들은 다 기쁘게 앞으로 나갔던 거 같은데, 저희 팀은 어리둥절하면서 나갔던 기억이 있습니다. 그만큼 예상치 못한 상이었습니다.

 

2등상!!!!!!

 

수상을 크게 기대하지는 않았지만, 그래도 수상하니 역시 엄청 기뻤습니다. 처음으로 나간 해커톤에서 좋은 성적을 거두었던지라, 더 기뻤던 거 같습니다. 기쁘다는 얘기를 다섯 문단은 할 수 있을 것 같지만, 문단을 아끼겠습니다. 그렇게 3일간의 여정은 끝이 나고, 큰 성취와 함께 뿌듯한 마음으로 서울에 돌아갈 수 있었습니다.

 

마치며

사실 더 생각해보면 자잘하게 쓸 이야기들이 많을 것 같지만, 해커톤이 끝난지 시간이 꽤 지나기도 했고 대부분의 기억이 휘발되어 이 정도 쓰는 것으로 만족하기로 했습니다. 여기까지 읽어주셔서 감사합니다. 다른 분들은 어떻게 느낄 지 모르겠지만, 저에게는 첫 해커톤이고, 처음으로 3명 이상의 사람들과 협업하여 프로덕트를 만들고, 다른 걱정 없이 개발에만 몰두할 수 있었던 정말 잊을 수 없는 기억이었습니다.

 

정션 아시아 2022를 열어주신 SHIFT, 저와 같이 팀을 해주신 shiftpsh 님, rita 님, susemeee님, 트랙 후원사였던 chainapsis, 그리고 다른 모든 참여자와 후원사 분들에게 감사 인사를 전하고 싶습니다. 다음에도 이런 기회가 있으면 다시 한 번 참가하고 싶습니다. 다들 수고하셨습니다!

'개발 > 해커톤' 카테고리의 다른 글

JUNCTION ASIA 2022 참가 후기 (2)  (2) 2022.08.29
JUNCTION ASIA 2022 참가 후기 (1)  (0) 2022.08.28