첫 해커톤! JUNCTION ASIA 2023 후기

 

첫 해커톤

두려움 반 귀찮음 반으로 해커톤을 한 번도 해본 적이 없던 나였는데, 글또에서 모집글을 보고 팀에 들어가게 되었다. 모집글을 올리신 분이 원래 다른 모임을 같이 하던 분이라 조금 더 진입장벽이 낮았던 것 같다.

프론트에서 사용할 사용 기술 스택은 React, Vite, SCSS, RQ, Jotai 였고 RQ와 Jotai는 써본 적이 없어서 아주 쪼금씩 학습을 하고 있었다.

하지만 처음 받은 결과는..

탈락

 

탈락은 아쉽지만, 신기술이고 뭐고 편안하게 놀고 있던 그때! 기대도 안했던 추가 합격 메일을 받았다.

해커톤 팀 신청할 때의 마음가짐은 '경험' 이었지만 추가합격으로 붙고 나니 경험 이상의 것, 예를 들면 수상 ㅎㅎ 을 꿈꾸며 부산으로 출발했다.

 

 

같이 하기로 한 팀원들을 만나서 이야기도 나누고 작업을 어떤 방식으로 할지 컨벤션 등을 맞춰보았다. 지금의 회사에서는 어려운, 같은 웹 프론트엔드 개발자와 작업하고 컨벤션을 맞추는 과정이 너무 감사하고 신기했다ㅠㅠ 지금 내가 회사에서 사용하고 있는 컨벤션도 오래전에 다른 동아리 활동했을 때 사용하던 것(아토믹 패턴)이었고, 쓰다보니 개선, 변경이 필요하다고 느끼는 시점에 유익한 정보들을 알게 되어서 도움이 많이 되었다. 🥹

 

컨벤션:

- 기능(feature) 중심의 폴더 구조

- 브랜치/커밋 작성 포맷

- 이벤트 네이밍

- Typescript, useState, RQ를 사용할 때 주의할 점들

 

 

 

2박 3일동안

입장 선물과 들어가자마자 어둡지만 열정이 느껴지는 모습과 조명에 기분이 들떴다!

JUNCTION은 원산지가 물건너온 해커톤이라 그런지 오피셜 언어는 영어여서 아주 조금은 해외 해커톤에 참여하는 기분을 느낄 수 있었다.

첫 날은 해커톤과 트랙(주제)들에 대한 설명을 듣고 만들 서비스를 기획하고 결정한다.

주제를 들을 때는 "아 이건 진짜 못하겠다" 싶었던 것들도 있었지만 팀원들과 의견을 수렴하다보니 "어쩌면 다 할만할수도..?" 생각이 들었다.

결국은 트랙3의 주제인 "ESL을 더 스마트하게 사용하는 서비스"를 선택했고 ESL에 이름표 및 개인 일정 관리 등의 기능을 포함하므로서 ESL을 통해 전통적인 회사를 "스마트 오피스"화하는 방향으로 가게 되었다.

ESL: Electronic Shelf Label (전자 라벨)

ESL 예시

주제를 정하고서도 과연 어떤 방향으로 가야 할지, "기업의 매출과 현실성 vs 내가 하고싶은것/ 아이디어의 재미" 를 많이 고민했던 것 같다. 다만 지금 해커톤이 끝나고 드는 생각은, "기존에 있는 문제를 해결하는 방향"이었어야 했나.. 싶다. 어찌 보면 문제를 해결할 수 있어야 기업의 매출과도 관련되기 때문에 단순히 기존에 있던 것을 "개선"하는 게 아닌 "해결"하는 제품을.. 다음에는 만들어보고 싶다.

 

12시까지 주제와 만들 제품을 정하는 미션1을 끝낸 뒤에는 제품의 MVP를 정했고, 주된 기능은 "사용자가 커스텀한 이름표를 나타내기"가 되었다. 여기까지 확정하고 나니 그때부터는 디자이너 타임이라 개발자들은 환경 세팅, 개발자들끼리의 역할 분담 등을 진행했다. 이때까지는 크게 할 일이 없어서 조금 여유로웠다.

 

여담으로 우리 팀이 받은 자리는 1번 석이어서 맨 앞이라 간식 존이랑도 가깝고, 한 쪽에만 책상이 붙어있어서 다른 한 쪽을 널널하게 사용했다. 

 

내 메인 역할은 파트너사에서 제공하는 api와 웹사이트를 통해 ESL 단말기를 제어하는 기능이었다. 이전에 html2canvas라는 라이브러리를 사용해서 DOM 엘리먼트를 이미지화하는 기능을 만들어봤기 때문이었다.

 

사용자 플로우:

1. 사용자가 자신의 이름표를 커스텀하면 DOM 엘리먼트로 미리보기를 볼 수 있다.

2. 사용자가 "확인"하면 DOM 엘리먼트가 이미지로 변경되고, 전송 api를 통해 자신의 ESL 이름표에 표시된다.

const handleCreatePreviewClick = async () => {
    if (domRef.current) {
      const canvas = await html2canvas(domRef.current, {
        width,
        height,
        scale: 1,
      });
      mutation.mutate({ img: canvas.toDataURL() });
    }
};

 

🤡 큰 삽질 세 가지

1. 처음에 이미지 파일 포맷이 blob인지 base64인지 몰라서 blob를 기본으로 놓고 작업했는데, 하다가 물어보니 base64였다. 진작 그냥 물어볼걸!!! 🤬

2. 처음에 프론트 -> api서버로 이미지 전송 후, 그 데이터를 다시 -> 파트너사의 api 사용해서 ESL에 올리는 방식으로 작업했는데, 이 과정에서 1번 문제와 겹쳐져서 blob파일을 제대로 못받아오는 문제로 불필요한 삽질을 했다.. 결국은 우리 api서버를 거치지 않고 프론트에서 바로 파트너사의 api 사용하는 방식으로 바꿨다. 당시에는 그냥 기술적으로 이걸 성공시키고 싶다!!! 라는 생각 때문에 붙잡고 매달렸던거같다. 하지만 실무나 해커톤에서는 그러면 안되겠다.. 진행 중에도 피봇팅은 필요한 것 같다. 

3. 2번 작업을 하다가 base64인걸 알고 나서는, 내가 canvas.toDataURL() 한 결과값이 온갖 쑈를 해도 올바르지 않은 이미지 사이즈라는 응답을 받아서 고통스러웠다. 결국 파트너사 홈페이지에서 request하는 데이터와 나의 코드가 만들어내는 결과물 데이터를 비교해보면서 값이 다르다는 걸 이해했고, 그래서 위 코드처럼 width, height, scale 값을 DOM 엘리먼트와 canvas에 박으니까 마침내 기능이 정상 동작했다.

 

동작하는걸 본 뒤로는 기력이 빠져서 무지성 CSS 할 수 있는 작업들만 진행했다 ㅎㅎ 이마저도 그럭저럭 완성도는 챙긴 것 같아서 이후에는 피피티 작업을 함께했고, 목업을 만들었는데 디자이너분에게 인정받아서 기분이 좋았당😎

 

 

우리 팀은 Card Me라는 서비스를 만들었고 깔끔한 결과물이 나와서 매우 만족했다!! (레포)

발표했을 때 반응도 좋(다고 생각했)고 완성도 있는 서비스라 수상을 기대했지만 마음 속에서만 수상했던 걸로..

2박 3일동안 합쳐서 4시간정도 잔 것 같다. 기획대로 만들기만 할 때는 왠지 일하는 것 같았다..😇 (외주 느낌..)

 

 

 

배운 점

- 같은 웹 프론트엔드 개발자와 작업 + 디자이너, 무려 두 분과 오프라인 작업하는 경험.. 최고. 가장 기분좋았던 점이다.

- 그리고 많은 사람들이 열정을 갖고 2박 3일동안 잘 사육당하며 열심히 하는 모습들이 보기좋았고 나도 그 속에 있다는게 자랑스러웠다.

- 내심 아는 (글또) 사람 한명은 있지 않을까 기대했는데 없었고, 2021년에 같이 프로젝트 했던 분을 여기에서 만나서 정말 반가웠다!!

- 주최 측에서 많은 이벤트들을 준비해주셨지만 현실적으로 그 모든 것을 즐기기는 어려운 상황이었던 것 같다. 다음에는 옆 팀에 말을 걸어본다던가, 운영 쪽에서 준비해주신 것들을 더 즐겨보고 싶다. (하지만 이벤트로 받은 오쏘몰 이뮨은 짱..!)

- 그리고 서비스의 주제도 "문제 해결" 위주로, 발표 내용에도 "시장 조사 / 수익 모델" 등을 포함할 수 있도록 구성해야겠다.

 

 

다음 계획

- 우리 팀에는 나를 포함한 3명이 첫 해커톤 참가였는데, 다들 해커톤의 매력에 빠져서 또다른 해커톤 참여를 고대하고 있다. 여담으로, JUNCTION은 좀 빡쎈 편이고, 소셜과 재미 위주의 해커톤도 있다고 하니 그런 것들도 참여해보고 싶다.

- 언젠가부터 지원을 안하게 되었던 IT 동아리 활동도 다시 지원해서 해보고 싶어졌다. 좋은 친구들도 사귀고, 프로젝트를 팀 단위로 기획하고 출시하는 능력을 더 쌓을 수 있지 않을까 한다.

- 각 트랙에서 수상한 팀들의 서비스를 보면 수상을 납득하게 된다. 아쉽게도 어떤 주제의 서비스를 했는지는 트랙별 1등만 보여주지만 (2,3등 팀도 너무 궁금하다) 팀들의 발표를 보다보니 "문제 상황 - 해결 방법(서비스) - 가능성 (시장 규모, 매출 증가 계획)" 으로 구성된, 진짜 창업 발표같은 구조를 가지고 있었다는 점이 인상적이었다. 그래서 결론은.. 기획 공부를 하자!! 그리고 소비자(투자자 입장)가 진짜 원하는 정보들이 뭘까를 생각해보면서 기획 내용을 구체화하는 능력을 키우고 싶다.

- 체력 키우기, 영어 공부 하기.. 🫠