드디어 미림 해커톤(미톤)이 끝났다! 지난번 글에서 "기록하는 사람은 같은 문제를 두 번 반복하지 않는다"라고 썼던 다짐을 지키기 위해, 비몽사몽한 정신을 붙잡고 이번 해커톤의 회고를 남겨보려 한다.

이번 해커톤은 성수동 알파코 제1캠퍼스에서 무박 2일로 진행됐다. 밤을 새우며 코드를 치는 게 힘들기도 했지만, 팀원들과 함께 머리를 맞대고 하나의 프로덕트를 만들어내는 과정은 역시나 짜릿했다.

단순히 "재미있었다"로 끝내지 않기 위해, 우리가 왜 이 프로젝트를 시작했고, 어떤 문제를 겪었으며, 무엇을 해결했는지 개발자의 시선으로 정리해 본다.

"우리가 1학년이라서 안 된다고? 아니, 우리는 더 듣고 더 소통했기에 가능했다."

Prologue. 시작하며

무박 2일, 24시간. 짧다면 짧고 길다면 긴 이 시간 동안 우리는 '무언가'를 만들어내야 했다. 미림 마이스터고의 해커톤, 미톤(Mithon). 이번 대회는 나에게 있어 단순한 교내 행사가 아니었다. 프론트엔드 개발자를 꿈꾸는 내가, 팀원들과 함께 머릿속의 아이디어를 실제 돌아가는 서비스로 구현해낸 첫 번째 해커톤였기 때문이다.

결과부터 말하자면, 우리 팀은 수상(Award)을 했다. 1학년 팀이 쟁쟁한 선배님들 사이에서 상을 받을 수 있었던 이유, 그리고 그 치열했던 Respeak(리스픽) 개발 과정을 아주 상세하게 남겨보려 한다.

1. 프로젝트 개요 : Respeak (리스픽)

프로젝트명: Respeak (Re + Speak, 다시 말하기를 시작하다)

슬로건: 스크린 너머, 진짜 대화를 되찾다.

선정 주제: ② 디지털 중독 + ③ 사람과 연결

팀 구성: 백엔드 2, 디자인 1, 프론트엔드 2

Problem : 우리는 왜 '말'을 못 하게 되었을까?

우리 팀은 "디지털 중독"이라는 주제를 조금 다르게 해석했다. 단순히 스마트폰을 오래 보는 것이 문제가 아니다. 텍스트와 숏폼, 밈(Meme)에 익숙해지면서, 직접 얼굴을 보며 긴 호흡으로 내 생각을 논리적으로 말하는 능력이 퇴화하고 있다는 점에 주목했다.

친구들과 대화할 때 "아 그... 뭐냐, 그거 있잖아", "약간 그런 느낌?"이라며 얼버무리는 모습. 이것을 해결하기 위해 우리는 '토론'을 게임처럼 즐기며 성장시키는 플랫폼을 기획했다.

Solution : 토론 성장형 플랫폼

레벨 시스템: 초급(단순 취향)부터 고급(철학/윤리)까지 단계별 성장.

AI 코칭: 내 말을 AI가 분석해 '논리 점수'를 매겨주는 피드백 시스템.

매칭 & 연결: 나와 비슷한 실력을 가진 친구와 실시간으로 연결되는 경험.

2. 1학년이 상을 받은 진짜 비결 : "노트북을 덮어라" 💻🚫

기술적인 이야기를 하기 전에, 우리 팀의 가장 강력한 무기였던 협업 방식을 먼저 이야기하고 싶다. 감히 말하건대, 우리가 상을 받은 이유는 코딩 실력이 뛰어나서가 아니라 '싱크(Sync)'를 맞추는 데 집착했기 때문이다.

Rule 1. 아이디어가 확정되기 전까지 노트북 금지

해커톤 현장은 급박하다. 주제가 발표되면 다들 노트북을 열고 레퍼런스를 찾거나 개발 환경부터 세팅한다. 하지만 우리는 노트북을 덮었다.

노트북 화면을 보는 순간, 서로의 눈을 보지 않게 된다. 각자 다른 생각을 하며 "어, 그거 좋은데?" 하고 넘어가면 나중에 개발할 때 "어? 나는 기능 A인 줄 알았는데 너는 B를 만들고 있었어?" 하는 대참사가 벌어진다. 우리는 1학년이라 개발 속도가 느릴 수밖에 없었기에, 이런 시행착오를 겪을 시간이 없었다.

그래서 우리는 2~3시간 동안 펜과 종이만 들고 서로의 눈을 보며 이야기했다. "우리가 해결하려는 문제가 진짜 맞아?" "이 기능이 있으면 사용자가 정말 토론을 잘하게 될까?" 모두가 완벽하게 같은 그림을 머릿속에 그릴 때까지, 우리는 노트북을 펴지 않았다. 딴짓을 원천 봉쇄하고 오로지 서로의 말에 집중했다.

Rule 2. 무한 피드백 루프 (The Feedback Loop)

우리끼리 "완벽해!"라고 생각하는 건 위험하다. 우리는 '확정'을 내리기 전에 끊임없이 검증받았다.

지나가시는 선생님을 붙잡고: "선생님, 학생들이 이런 앱을 쓰면 정말 도움이 될까요?"

멘토링 선배님을 찾아가서: "이 UI 흐름에서 어색한 부분이 없을까요?"

피드백을 받을 때마다 기획이 수정되고 기능이 빠지기도 했다. 그 과정이 힘들지 않았다고 하면 거짓말이다. 하지만 수십 번의 "Why?"를 견뎌내고 살아남은 아이디어는 단단했다. 이 과정이 있었기에 심사위원분들의 날카로운 질문에도 당황하지 않고 우리의 의도를 명확하게 설명할 수 있었다. 이것이 바로 팀워크였다.

3. Frontend Development Log : 디자인을 현실로

이제 본격적인 개발 이야기다. 프론트엔드 개발자로서 나의 미션은 "디자이너가 Figma에 그려준 수십 장의 화면을, 단 1픽셀의 오차도 없이, 그리고 생동감 있게 웹으로 구현하는 것"이었다.

(참고: 업로드된 전체 UI 흐름도)

1. UI/UX Implementation Strategy

우리 앱의 메인 컬러는 Orange였다. 활기차고 긍정적인 에너지를 주는 색이지만, 자칫하면 촌스러워 보일 수 있어 화이트 스페이스(여백)를 많이 활용했다.

전체 흐름 구현 (Flow):

Onboarding & Login: 심플한 로고와 카카오/구글 소셜 로그인 버튼 배치.

Main Dashboard: 현재 나의 레벨과 토론 가능한 주제 카드(Swiper UI 적용) 배치.

In-Game (Debate): 가장 공들인 화면. 상단에는 주제와 남은 시간 타이머, 중앙에는 말풍선 채팅 UI, 하단에는 마이크 버튼을 배치했다.

Result Report: 스크롤이 긴 화면. AI 분석 멘트와 5각형 방사형 차트(Radar Chart)를 통해 내 점수를 시각화했다.

2. Core Feature : Web Speech API (STT)

Respeak의 핵심은 음성 인식이다. 사용자가 마이크 버튼을 누르고 말하면, 그 내용이 실시간으로 텍스트로 변환되어 화면에 떠야 했다. 별도의 무거운 라이브러리 대신, 브라우저 내장 API인 Web Speech API를 사용해 가볍게 구현했고, 발언 시간에 맞춰 타이머가 작동하도록 로직을 짰다.

4. Trouble Shooting : 이상과 현실의 차이 💥

해커톤은 역시 계획대로 흘러가지 않았다. 특히 외부 API와 데이터베이스 부분에서 큰 벽을 만났다.

Issue 1. "무료 API는 없다" : 뉴스 API의 배신

상황: 기획 단계에서는 실시간으로 뜨는 뉴스 기사를 가져와서 토론 주제로 던져주려고 했다. 당연히 무료 뉴스 API가 있을 거라 생각하고 신나게 검색했지만, 쓸만한 API는 전부 유료(Paid)이거나 하루 호출 횟수 제한이 극도로 적었다. 설상가상으로 어렵게 찾은 해외 무료 API는 CORS(Cross-Origin Resource Sharing) 에러를 뿜어내며 데이터를 주지 않았다.

해결 (Pivot):

현실 직시: "지금 API 결제할 돈도, 서버 우회 코드를 짤 시간도 없다."

대안 모색: API 연동에 매몰되어 시간을 날리는 대신, 기능의 '보여줌'에 집중하기로 했다.

Mock Data 활용: 뉴스 데이터 구조(JSON)를 미리 만들어두고, 마치 API가 호출된 것처럼 더미 데이터를 화면에 뿌려주는 방식으로 시연을 준비했다. 비록 실시간 연동은 못 했지만, 서비스의 흐름을 보여주는 데는 성공했다.

Issue 2. MongoDB의 반란 : 연결이 왜 안 돼?

상황: 우리 팀은 데이터 구조가 유연한 MongoDB를 사용하기로 했다. 하지만 로컬 환경에서는 잘 되던 DB가 배포 환경이나 팀원들의 다른 컴퓨터에서는 연결이 자꾸 끊기는(Connection Refused) 문제가 발생했다. 특히 백엔드에서 데이터를 보냈다고 하는데, 프론트엔드에서는 계속 undefined나 null 값만 들어오는 상황이 반복됐다. 또한 우리는 1학년들로만 구성된 팀이였기에 DB나 구조를 짜는건 특히 약해, 백엔드를 맡은 친구들이 꽤나 고생을 많이 했다.

해결 (Collaboration):

원인 파악: 알고 보니 MongoDB Atlas의 IP 화이트리스트(Network Access) 설정 문제와, 비동기 처리를 기다리지 않고 데이터를 렌더링 하려던 나의 실수(Frontend)가 겹쳐 있었다.

협업: 백엔드 친구와 모니터 하나를 두고 같이 디버깅을 했다. 백엔드 로그와 프론트엔드 콘솔 창을 동시에 띄워두고, 데이터가 어디서 증발하는지 추적했다.

수정: async/await를 사용하여 데이터가 확실히 넘어온 뒤에 화면을 그리도록 코드를 수정하고, DB 접속 권한을 모든 IP(0.0.0.0/0)로 임시로 열어서 해결했다.

5. Epilogue : 기록을 마치며

새벽 5시, 졸린 눈을 비비며 마지막 커밋(Commit)을 날렸을 때의 그 짜릿함을 잊을 수 없다.

이번 미톤을 통해 배운 것은 명확하다. "개발은 코딩이 아니라 문제 해결이다."

유료 API의 벽에 부딪혔을 때 포기하지 않고 우회로를 찾은 것, DB 연결이 안 될 때 남 탓을 하기보다 모니터를 맞대고 같이 해결책을 찾은 것. 이 모든 과정이 우리를 성장시켰다.

우리가 1학년임에도 좋은 결과를 얻을 수 있었던 건, 화려한 기술 스택 때문이 아니었다. "노트북을 덮고" 서로의 생각에 귀 기울였던 그 시간, 그리고 끝까지 포기하지 않고 디자인 시안을 100% 구현하려 노력했던 집요함 덕분이었다.

함께 고생한 우리 팀원들, 그리고 많은 조언을 해주신 선생님과 선배님들께 깊은 감사를 드린다. 내년에는 대상을 노린다. 진짜로. 🔥