고등학생들이 팀을 이루어 1월 15일~16일 무박 2일로 진행되는 해커톤에 참가했습니다. EASY라는 서비스를 개발하게 되었고 EASY로 대상을 수상하게 됐습니다. 해커톤 후기와 기술을 사용하면서 얻은 지식(?)을 공유 하려고 합니다. 그리고 저만 알고있던 해커톤의 꿀팁과 팀 빌딩 과정 그리고 대상을 받을 수 밖에 없었던 계획들을 공유해보도록 하겠습니다.

해커톤

해커톤(Hackathon)은 해킹(Hacking)과 마라톤(Marathon)의 합성어입니다.

소프트웨어 개발 분야의 프로그래머나 그래픽 디자이너, UI설계자 등 다양한 분야의 전문가들이 모여 제한 된 시간 동안 아이디어를 도출하고 결과물을 만들어내는 이벤트입니다.

현대사회는 IoT(사물인터넷), AI(인공지능), 블록체인, 빅데이터에 대한 관심이 높아졌고, 정부와 기업들은 해당 산업을 부흥시키기 위해 다양한 시도를 하고있습니다. ‘해커톤’은 이러한 맥락의 일환으로 새로운 기술과 아이디어를 접목시켜 보려는 시도입니다.

하이톤 소개

하이톤이란, 고등학생들이 더 높은 미래를 향해 힘차게 비상하자는 의미를 담고 있습니다. 여러 SW 특성화고 및 마이스터고 학생들이 자발적으로 결성하고 운영하고 있으며, 참가 학생들끼리 기획과 디자인을 담당하여 친근한 분위기 속에서 서로 네트워킹하고 상호 작용할 수 있는 무박 2일 해커톤입니다.

하이톤 소개 페이스북

하이톤에 참가한 이유 ?

한창 모집 기간이였을때 친구들이랑 얘기 하다가 “페이스북에 하이톤을 개최하는 거 봤냐 우리 학교 애들도 운영진이던데”라고 할 때 이야기는 시작되었습니다. 참가비를 걷는다는 문구를 보고 안해야겠다! 다짐했습니다. 날짜는 1월 15일에서 16일이였습니다. 서울로 출근한 첫 주 였고, 첫 주말인데 해커톤을?? 라는 생각에 더더욱 마음을 굳혔습니다. 하지만 그래도 꾸준히 해커톤에 참여 했어서 욕심이 났습니다. 무엇보다 저녁식사로 배민 쿠폰을 준다고 해서 참여하게 되었습니다. 😁😁

참가 인원 그리고 힘들었던 팀 빌딩

참가인원

참가자 모집 인원은 개발자 60명 + 디자이너 20명으로 4인 1팀 (개발자 3, 디자이너 1), 총 20팀으로 구성된다고 합니다.

팀 빌딩

팀 빌딩은 자유 형태로 이루어졌으며 참가자들끼리 연락을 하면서 팀원을 꾸리는 형태로 이루어져 있었습니다. 1주일 동안 팀빌딩을 할 수 있었고 다른 학생들은 팀을 꾸리기 위해 어필을 하기 시작했습니다.

불운의 시작

하지만 저는 되게 게으른 편이였고, 팀 빌딩에 있어서 욕심 조차 나지 않았습니다. 그래도 일단 디자이너는 구해야 되기 때문에 디자이너 한분은 꼬셔서 프론트엔드 2명과 디자이너 1명이 팀을 이루고 있었습니다. 😆

하지만 저희는 디자이너를 구하고 약 4일 동안 팀 빌딩 마감 마지막 날까지 나머지 팀원 한명을 구할 생각도 의지도.. 아무런.... 반응도 없었습니다 😅 여기서 잘못됐다는 걸 느끼게 되었습니다. 아마 서로 다 귀찮아서 아무런 반응도 없었을 것 같습니다..

팀원을 구하려고 했지만 팀 빌딩 마지막 날에 이렇게 물어보고 있으니.. 계속 까이고 까이고 까였습니다... 하하핳 팀을 구하는게 제일 어렵다는 것을 느끼게 되었고, 미리 구하지 않았던 제 자신을 성찰하고 반성하며 이번 해커톤 그냥 신나게 놀고 즐기자!! 라고 마음을 먹었습니다.

팀이 꾸려지다?

그리고 프론트엔드 한분께서 답이 오셨고 같이 하게 되었습니다.

순탄히 넘어가지 않는 팀빌딩

하지만 여기서 또.... 구글 폼 제출 한다는 것을 팀원 전체가 까먹어 버린 상태여서 팀 빌딩이 랜덤으로 될 판이 놓이게 되었습니다 ㅎㅎ;; 그래서 급하게 운영진 분들에게 물어보게 되었고 결국은 같이 하기로 결정 되었습니다.

나름 철저했던 하이톤 계획

너의 계획이 뭔데

팀 빌딩이 이루어지기 전에 친구에게 저의 계획을 주저리 주저리 풀기 시작했습니다.

‘2일동안 진행하는 해커톤이라 하더라도 개발하는 시간, 발표하는 시간, 심사하는 시간이 다 포함된 것이 2일이기 때문에 정말로 개발할 수 있는 순수 시간은 10시간에서 12시간이야. 밥도 먹어야 하고, 낮잠도 잘거고, 디자인 기다려야 되지, 아이디어 계획 하는 시간이 정말 많이 잡아 먹을 건데 여기서 API 연동까지 하겠다고?? 대체 뭘 할건데 무슨 API가 필요한데?? 그럴 바에는 프론트엔드 3명이서 더 많은 페이지 만들어보자 데이터는 노드 서버 하나 만들어서 간단하게 쓰던가 파이어베이스 쓰면 되지’

따지는 듯한 말투로 제안을 시작했습니다. 결국 제말에 설득되어 클라이언트끼리 삐까뻔쩍하게 만들어 보자 했습니다.

그래서 저희는 백엔드 없이 클라이언트 3명이서 완벽한 UI를 만들어야겠다고 계획했습니다. (한번 서버의 어려움을 부딪혀 봐야 깨달음이라도 느끼겠지 했습니다.)

어찌보면 저의 계획들이 이상하게 느껴질 수도 있지만 이번 하이톤에서는 백엔드를 가져가는 것은 바보같다(?)라고 느껴졌습니다. ‘아니 개발 기간이 하루인데 뭔 백엔드가 필요한가? 사람들은 왜 서버가 있어야 서비스가 된다고 하는거지?’라는 의문이 돌게 되었고 하루만에 퍼블리싱도 해야되고 기능 구현 그리고 API 연동까지 진행한다면 UI와 UX에 별로 힘을 못 쏟을 것이라고 생각이 들었습니다.

그래서 저희는 남들과 다르게 UI, UX에 힘쓰자 그리고 open api를 마음껏 활용하여 서버가 있으면 뻔히 할(CRUD) 기능들은 보이지 않게 백엔드를 흐리멍텅하게 만들어야겠다고 다짐했습니다. 그리고 서버 없이 뭐든 만들 수 있으니 ‘서버 언제 나와’(?) 라는 서버의 의존하는 클라이언트 개발자들의 하나의 깨우침(?)과 비슷한 것들을 사라지게 만들고 싶었습니다.

그래서 뭐 만든거야?

7번째 하이톤의 주제는 "함께 뭐뭐할 수 있는 학교" 였습니다.

다양한 관점에서 학교라는 주제를 보던 와중, IT업계의 마이스터고나 특성화 고등학교에 재학중인 학생들의 커뮤니케이션이나 취업정보 & 면접 질문에 관련된 정보 공유가 부족하단 것을 인지하게 되었습니다.

그래서 저희는 함께 취업 성공 할 수 있는 학교를 주제로 EASY를 개발했습니다.

기획 이유

백엔드가 없으니 서버 없이 어떤 것을 만들 수 있을까 생각하다가 팀원끼리 Open API를 활용하자 했습니다. Naver Map을 활용하여 만들면 굳이 서버를 개발할 필요가 없다고 생각했습니다. 그리고 지도만 있으면 부족한 기능이 있으니 너무 뻔한 CRUD(절대로 남을 비하하는 것이 아니라 저의 해커톤 경험에서 깨달은 경험담입니다😅)를 앞지를 것이 뭐 있지 하다가 요즘 뜨고있는 인공지능을 넣어서 차별화를 두자(!) 했습니다.

첫째날 그리고 날샘..

11시에 게더 타운에 입장을 하고 키노트 세션을 진행한다음 학교라는 주제로 해커톤 시작이 되었습니다.

아이스브레이킹

운영진을 따라가니 아이스브레이킹으로 운동장을 달려 서로 어색함을 달랜다고 계주를 한다고 했습니다. 상위 팀들은 배달의 민족 쿠폰을 준다고 하길래 팀원 4명이서 열심히 달렸습니다. 결론은 못받았습니다.

주제 정하기

어떤 것을 개발할지 고민하니까 3시가 되었고 빠르게 정해야 겠다고 생각이 들어 학생들의 취업처를 보여주고, 해당 회사에 대한 면접 질문을 공유가 가능하고 모의 면접을 볼 수 있는 서비스를 만들면 좋을 것 같았습니다. 그리고 기능을 좀 더 붙여서 자신의 팁들을 공유 할 수 있는 커뮤니티를 만들자해서 개발을 시작하게 되었습니다.

개발 시작

프론트엔드는 Typescript, React, recoil 을 사용하여 개발했습니다.

저녁 6시 정도 됐을 때 부터 디자인이 하나씩 나오기 시작했습니다.

지도를 구현하기 위해서 Naver Cloud Platform에서 client id를 발급 받아 지도를 불러왔습니다.

로그인 & 회원가입

로그인과 회원가입은 학생 이름과 학교명 그리고 학교 이메일을 받아 회원가입을 구현했습니다.

첫번째 기능 feat.면접 후기 등록

학생들에게 회사의 면접 후기를 공유하기 위해서 면접 후기를 등록할 수 있는 폼을 만들었습니다.

폼에서는 등록할 회사, 회사 위치, 지원 분야, 면접 난이도, 질문 리스트를 등록 할 수 있습니다.

고민했던 문제 (Geocoding api)

사용자는 위와 같이 회사를 등록을 하게 되는데 회사의 위치를 가져오기 위해서 naver cloud platform의 Geocoding API를 사용해야 했습니다.

하지만 Geocoding은 도로명 주소를 받아야 지도의 x, y 축을 반환하게 되어있습니다. 그래서 처음에 회사를 등록할때 도로명 주소를 받아야 되는 경우가 생기게 되었습니다. 그래서 저희는 카카오(다음) 우편 번호 서비스 API 를 사용하여 도로명 주소로 변환했습니다. 그리고 변환 받은 도로명 주소로 장소의 x, y 좌표를 불러 지도에 마커를 찍을 수 있었습니다.

회사 위치 마커 찍기

두번째 기능 feat.음성인식

취업 성공 할 수 있는 학교가 저희팀의 주제였기 때문에 “어떻게 해야 성공 할 수 있을까?” 같이 고민한 결과, 학생들이 모의 면접을 볼 수 있게하면 좋을 것 같았습니다. 학교에서도 모의 면접을 진행 할 수 있지만 학생 수가 많아 자연스러운 답변이 나올 때까지 하지 못하는 경우가 대부분입니다. 그래서 정말 학생들이 면접 후기도 올리면서 면접 질문을 받고 그 질문에 대한 모의 면접을 보면 좋을 것 같다는 생각을 했습니다.

그래서 저희는 질문을 읽어주고(TTS), 사용자의 **음성을 텍스트로 입력(STT)**하는 기능을 추가하기로 했습니다.

TTS & STT

면접 질문을 읽어줄때 자연스러운 목소리와 면접관님이 질문 하시는 것과 같은 목소리를 원해서 음성 합성 API(네이버 클로바) 를 알아보았는데 무료가 아닌 유료여서.. 클로바를 사용하지 못했습니다. 그래서 TTS는 자바스크립트에서 제공하는 내장 함수를 사용하기로 했습니다.

빠른 개발을 위해 라이브러리를 사용하기로 했고 정말 쉬운 예제들이 많았습니다. 사용자의 음성을 받아 텍스트로 변환해주는 react-speech-kit 를 사용했고, 면접 질문을 읽어주기 위해 자바스크립트 내장 함수를 사용했습니다.

npm install --save react-speech-kit

const [value, setValue] = useState("");

function speak(text, opt_prop) {
    if (
      typeof SpeechSynthesisUtterance === "undefined" ||
      typeof window.speechSynthesis === "undefined"
    ) {
      alert("이 브라우저는 음성 합성을 지원하지 않습니다.");
      return;
    }

    const prop = opt_prop || {};

    const speechMsg = new SpeechSynthesisUtterance();
    speechMsg.rate = prop.rate || 1; // 속도: 0.1 ~ 10
    speechMsg.pitch = prop.pitch || 1; // 음높이: 0 ~ 2
    speechMsg.lang = prop.lang || "ko-KR";
    speechMsg.text = text;

    window.speechSynthesis.speak(speechMsg);
  }

// text를 읽어줍니다.
const textRead = (e) => {
    speak(item.title, {
      rate: 1,
      pitch: 0.8,
    });
  };

// 음성 변환
const { listen, stop } = useSpeechRecognition({
  onResult: (result) => {
    setValue(result);
  },
});

정말 간단한 코드로 STT, TTS를 구현했습니다.

세번째 기능 feat.피드

면접 후기를 작성하고 모의 면접을 볼 수 있는건 너무 심심할 것 같았고 생각보다 위에 기능 구현하는 것이 어렵지 않아 좀 더 추가하고 싶어 SNS 처럼 여러 글을 올릴 수 있는 커뮤니티를 추가하고자했습니다.

활발한 소통을 위하여 실명을 사용하는 것보다 익명 사용자로 글 올리는 것에 대한 부담감을 덜어냈습니다. 피드에 대한 다양한 카테고리들이 있고 그 카테고리에 해당되는 글을 작성 할 수도 있습니다. 또한 피드에 대한 공감도 넣을 수 있게 만들자 했습니다.

피드 필터링 & 공감

다양한 분야별로 피드를 볼 수 있고 공감 버튼을 눌러 자신의 반응을 표현 할 수 있습니다.

피드 작성

피드는 자유로운 형태로 작성하도록 했습니다.

개발 끝

토요일 오후 6시부터 개발을 시작해 다음날 아침 6시 정도에 잠이 들었습니다. 12시간 정도 개발을 진행했는데 빡빡할 줄만 알았지만 12시간 동안 계속 개발 한 것이 아닌 게더타운에서 레크레이션도 하고 집에서 새벽에 배달도 시켜먹고 낮잠도 자고 지금까지 했던 해커톤중 되게 여유롭게 진행한 해커톤이였던 것 같습니다. 하지만 밤을 샌 이후로는... 정말 죽는줄 알았습니다. 다음날이 너무너무 힘들고 눈이 왜 이렇게 무거운지 절대로 밤새서 코딩하지 마세요.

그렇게 10시에 일어나 발표 준비와 영상 제작을 했습니다. 해커톤은 결과물 보단 발표톤이라는 말이 돌 정도로 발표만 잘하면 커버친다라고 생각했기에 팀원끼리 발표 준비도 열심히 했습니다. 저희 팀은 여유롭게 끝냈고 만족스러운 결과물 덕에 진짜 딱 봐도 무조건 대상은 우리꺼다 라고 생각했습니다. 아이디어도 좋았고 다 완성도 했고 완벽하다고 생각이 들었습니다. 무엇보다 디자인 하신 분께서 PPT를 제작하셨는데 ㄷ... PPT만 봐도 무조건이였습니다.

그리고 발표 끝나고 질문도 있어서 질문 답변이 정말정말 중요하게 느껴져서 저희는 질문 리스트 별로 답변을 다 준비했던 것 같습니다🤗.

발표 시작

하이톤을 마무리 한다는 식으로 저희 팀이 마지막 발표로 배정받았습니다. 발표 순서 조차 대상 느낌이 났습니다.

3시에 발표를 시작했는데 저희는 마지막 순서여서 5시 20분 정도에 발표를 시작했습니다.

저희 팀이 마지막 발표순서여서 앞에분들 발표도 다 보고 저희 하는 거여서 더 떨렸던 것 같습니다. 팀원 분이 발표를 하시는데 정말 제가 더 떨려가지고... 완전 난리 났던 것 같아요.

시상식

6시 정도에 시상식이 진행되었는데 정말 너무 떨렸습니다. 팀원 분들도 다 떨려하시고 하지만 저희는 정말 확신했었습니다. 저희가 제일 잘 만들었다고 생각했고, 21팀 중에 겹친 주제도 없어서 완전 유니크한 주제가 되어서 대상을 확신한 상황에** 대상을 수상하게 되었습니다!**

하필 팀 이름도 EASY여서 완전 재밌었어요 ㅋㅋㅋ

제가 했던 해커톤 중 가장 편하게 했던 것 같았고, 부담감도 없어서 더 즐거웠던 것 같습니다. 무엇보다도 상을 받았으니 그 뿌듯함이 더 컸습니다.

팀원들끼리 너무 재밌게 개발했고 기억하고 싶은 것 중 하나라 이렇게 글을 남겨봅니다! 감사합니다 😁

EASY Github EASY 시연 영상