✨ 미림 해커톤(미톤) 회고록 : 기록하는 사람은 같은 실수를 반복하지 않는다
드디어… 미림 해커톤(미톤)이 끝났다!
지난번 글에서
“기록하는 사람은 같은 문제를 두 번 반복하지 않는다”
라고 썼던 다짐을 지키기 위해,
이번 해커톤의 회고를 꼭 남겨보려고 한다 ✍️
이번 해커톤은 성수동 알파코 제1캠퍼스에서
무박 2일로 진행됐다.
밤을 새우며 코드를 치는 게 솔직히 쉽진 않았지만,
팀원들이랑 머리를 맞대고 하나의 프로덕트를 만들어가는 과정은…
힘들면서도 이상하게 계속 기억에 남는다 🥹
단순히 “재밌었다!”로 끝내기엔 너무 많은 일이 있었고,
그래서
- 우리가 왜 이 프로젝트를 시작했는지
- 어떤 문제를 겪었고
- 그걸 어떻게 해결했는지
를 개발자의 시선으로 차근차근 정리해보려고 한다.
1학년들끼리 진행해서 더 빠듯했고 더 힘들 수도 있었지만,
오히려 1학년들끼리였기 때문에 가능했던 것들도 분명히 있었다고 생각한다.
그래서 더더욱, 이 기록이 의미 있다고 느껴진다 ✨
Prologue. 시작하며
무박 2일, 24시간.
짧다면 짧고, 길다면 정말 긴 이 시간 동안
우리는 반드시 ‘무언가’를 만들어내야 했다.
미림 마이스터고의 해커톤, 미톤(Mithon).
이번 대회는 나에게 단순한 교내 행사가 아니었다.
프론트엔드 개발자를 꿈꾸는 내가
팀원들과 함께 머릿속 아이디어를
실제로 돌아가는 서비스로 만들어낸
첫 번째 해커톤이었기 때문이다.
결과부터 말하자면…
👉 우리 팀은 수상했다 🏆
쟁쟁한 선배님들 사이에서
1학년 팀이 상을 받을 수 있었던 이유,
그리고 Re:speak(리스픽)을 만들어간 전 과정을
아주 솔직하게, 아주 자세하게 남겨보려 한다.
1. 프로젝트 개요 : Re:speak (리스픽)
프로젝트명 : Re:speak (Re + Speak, 다시 말하기를 시작하다)
슬로건 :
스크린 너머, 진짜 대화를 되찾다
선정 주제
- ② 디지털 중독
- ③ 사람과 연결
팀 구성
- 백엔드 2
- 디자인 1
- 프론트엔드 2
Problem : 우리는 왜 ‘말’을 못 하게 되었을까?
우리 팀은 ‘디지털 중독’이라는 키워드를 조금 다르게 바라봤다.
단순히 스마트폰을 오래 보는 게 문제가 아니라,
텍스트, 숏폼, 밈(Meme)에 너무 익숙해진 나머지
👉 직접 얼굴을 보며 내 생각을 논리적으로 말하는 능력이
점점 사라지고 있다는 점에 주목했다.
친구랑 대화하다가
- “아 그… 뭐냐…”
- “약간 그런 느낌?”
이렇게 말이 흐려지는 순간들.
이 문제를 해결하고 싶었다.
그래서 우리는 ‘토론’을 게임처럼 즐기며 성장하는 플랫폼을 기획했다.
Solution : 토론 성장형 플랫폼
-
레벨 시스템
초급(취향 토론) → 중급 → 고급(철학·윤리)까지 단계별 성장 -
AI 코칭
사용자의 발언을 분석해 ‘논리 점수’를 매기는 피드백 -
매칭 & 연결
비슷한 실력의 사람과 실시간 토론 연결
2. 1학년이 상을 받은 진짜 비결 : “노트북을 덮어라”
기술 이야기를 하기 전에,
우리 팀의 가장 강력했던 무기부터 이야기하고 싶다.
솔직히 말해서,
우리가 상을 받은 이유는
👉 코딩 실력이 뛰어나서가 아니라
👉 ‘싱크 맞추기’에 집착했기 때문이라고 생각한다.
Rule 1. 아이디어 확정 전까지 노트북 금지
해커톤 현장은 항상 급하다.
주제가 발표되면 다들 노트북부터 연다.
근데 우리는… 노트북을 덮었다.
노트북을 여는 순간
사람은 화면을 보고,
눈은 서로를 안 보게 된다.
그러면
“어, 그거 괜찮다~” 하고 넘어가고
나중에 개발 단계에서
“어? 나는 A인 줄 알았는데?”
“나는 B 만들고 있었어…”
이런 참사가 터진다....
우리는 1학년이라 개발 속도가 느릴 수밖에 없었고,
이런 시행착오를 겪을 시간이 없었다.
그래서 2~3시간 동안 펜과 종이만 들고
서로 눈을 보며 끝까지 이야기했다.
- 우리가 풀려는 문제가 진짜 맞는지
- 이 기능이 사용자에게 진짜 도움이 되는지
모두가 같은 그림을 그릴 때까지.
그때서야 노트북을 열었다.
Rule 2. 무한 피드백 루프
우리끼리 “이거 완벽해!”는 제일 위험하다.
그래서 우리는 계속 검증받았다.
- 지나가시는 선생님 붙잡고
- 멘토링 선배님 찾아가서
- UI 흐름, 기능 의도 하나하나 질문하기
피드백 받을 때마다
기획은 바뀌고, 기능은 빠지기도 했다.
솔직히 힘들었다.
하지만 수십 번의 “왜?”를 버텨낸 아이디어는
정말 단단해졌다.
그래서 심사위원 질문에도
당황하지 않고
“우리는 이걸 해결하고 싶었습니다”라고 말할 수 있었다.
이게 바로 팀워크라고 생각한다.
3. Frontend Development Log : 디자인을 현실로
프론트엔드 개발자로서 나의 미션은 딱 하나였다.
“피그마 속 디자인을
오차 없이,구현하기”
UI/UX 전략
메인 컬러는 Orange.
활기차지만 자칫하면 촌스러워질 수 있어서
화이트 스페이스를 최대한 활용했다.
전체 흐름
-
Onboarding & Login
→ 심플한 로고 + 소셜 로그인 -
Main Dashboard
→ 내 레벨 + 토론 주제 카드 (Swiper UI) -
Debate 화면
→ 타이머 / 말풍선 채팅 / 마이크 버튼 -
Result Report
→ AI 분석 멘트 + Radar Chart 시각화
Core Feature : Web Speech API
Respeak의 핵심은 음성 인식(STT).
무거운 라이브러리 대신
브라우저 내장 Web Speech API를 사용해
가볍고 빠르게 구현했다.
4. Trouble Shooting : 이상과 현실의 차이 💥
Issue 1. 무료 API가 없다
뉴스 API…
있을 줄 알았다.
근데 쓸만한 건 전부 유료였다 😭
그래서 Mock Data로 구조를 만들어
서비스 흐름을 보여주는 쪽으로 방향을 틀었다.
5. Epilogue : 기록을 마치며
새벽 5시,
마지막 커밋을 날리던 순간의 짜릿함은
아직도 잊히지 않는다.
이번 미톤을 통해 확실히 배운 게 있다.
개발은 코딩이 아니라 문제 해결이다.
우리는 기술이 아니라
태도로 성장했다.
내년에는?
대상이다. 진짜로 🔥
06. 미톤 📸📸
팀원도 이쁘게 꾸며줬다 ⭐⭐
드라이 샴푸도 팀원이 사다줌… 🩷🩷
미톤 가기 전 롯데월드 몰에서 엔하이픈 팝업도 갔다 왔다…
정원이 덕에 상 탄 걸 수도 있다…ㅎㅎ
정원아 사랑해
그럼 오늘도
즐코! 😆🤍
