개요
2월 중순 대전광역시와 KAIST가 공동 주최한 SPARCS Service Hackathon 2024 (스팍스 서비스 해커톤 2024)에 다녀왔습니다.
행사를 주관한 SPARCS는 카이스트 학부 총학생회 산하의 개발 특별기구/자치단체라고 합니다.
행사는 2월 14일부터 16일까지 카이스트와 롯데시티호텔 대전, 대전드림아레나(대전 이스포츠경기장)를 오가며 진행되었습니다. 다만, 행사 일주일가량 전인 2월 8일에 주제가 공개되었고 11일부터 공식적으로 개발이 허용되었기 때문에, 대전에 있었던 시간인 3일뿐 아니라 설 연휴 전후를 포함한 더 많은 시간을 쏟았다고 볼 수 있습니다.
타임라인
지원서 작성
동아리 정보 공유 채널에 올라온 해커톤 지원자 모집 공지를 보고 지원해야 하나 고민하고 있었는데, 어쩌다 보니…, 이미 지원서를 작성하고 있었습니다.
특별한 내용을 적지는 않았지만, 정말 혹시라도 누군가에게 도움이 될 수도 있을 것 같아서 언급하자면, 지원서에는 개발자로서의 다른 직군과의 협업 경험 부족, 오픈소스 기여 경험, 교내 동아리 해커톤 참여 경험 및 깨달은 점, 대규모 행사에서 기대해 볼 수 있는 참가자들의 높은 수준, 심사위원들로부터의 값진 피드백에 대해 주로 작성했습니다.
200명 정도가 지원하여 80명이 선발되었고, 4명으로 이루어진 20개의 팀이 구성되었습니다. 지원할 때 혼자서 지원하거나 2명을 미리 구성하여 지원할 수 있었는데, 저희 팀의 4명은 모두 단독 지원한 케이스였습니다.
주제 및 과제 공개와 기획 회의
이번 SPARCS Service Hackathon 2024의 테마는 지역 사회 문제 해결하기입니다. 테마에 맞는 각 팀만의 서비스를 기대합니다.
지역 사회 문제 해결하기
라는 주제로 진행된 이번 해커톤에는 최종 서비스를 개발하는 메인 과제와 별도로 두 번째 날 정오까지 제출해야 하는 데이터 분석 및 시각화 미션이 있었습니다.
데이터 분석 및 시각화 미션은 후원사 중 하나였던 엘리스를 통해 제공되는 Streamlit으로 나만의 웹 애플리케이션 만들기
강의를 대전으로 내려가기 전까지 수강한 뒤, 각종 온라인 데이터베이스에서 대전광역시의 특징이나 문제점을 발굴하여 데이터 분석 보고서 형태로 제출하는 과제였습니다.
메인 과제인 서비스 개발의 경우 첫 번째 과제에서 도출된 내용을 바탕으로 두 번째 과제의 의미를 제시하는 것은 선택 사항이었지만, 저희는 두 번째 과제를 통해 개발된 서비스가 대전에 필요한 이유를 첫 번째 과제에서 발견한 내용으로 발표 때 간략하게나마 설명하였습니다.
저희 팀은 주제가 공개된 2월 8일부터 Google Meet을 통해 회의를 진행했습니다. 저희 팀은 프론트엔드 개발자 2명(재형님께서는 거의 PM, 데브옵스 역할까지 하신 것 같아요.), 백엔드 개발자 1명, 기획자 1명으로 이루어져 있었고, 디자이너가 따로 없는 팀이라 UI 디자인은 제가 하는 것으로 결정되었습니다. 프로토타입 디자인 없이 바로 퍼블리싱한 것에 가깝기는 했지만요.
서비스 아이디어의 경우, 대전에 훌륭한 산책 코스가 많지만, 이것이 잘 알려지지 않은 사실이라는 점에는 모두가 동감하여 이 부분을 활용하는 것이 좋겠다는 의견의 일치가 있었습니다. 다만, 이 점을 산책 코스 → 지역사회 연결
로 풀어내야 할지, 쓰레기 문제 → 플로깅 코스
로 풀어내야 할지는 의문이었습니다. 산책하며 쓰레기를 줍는 트렌드인 플로깅
으로 아이디어를 풀어내는 경우에도 이를 코스 추천
에 집중해야 할지 플로깅 모임 주선
에 집중해야 할지가 첫 회의 이후에도 의문으로 남아 있었습니다. 이 부분은 실제로 개발하며 쓰레기라는 사회적 문제를 배경으로 플로깅 코스를 제안하고, 코스 추천과 플로깅 모임 주선의 경우 둘을 적절히 혼합하여 제시하는 방향으로 자연스럽게 정해졌습니다.
개발 스택의 경우 TypeScript, Next.js(React), Emotion, TanStack Query 정도를 사용하는 것으로 (당시에는) 결론을 냈습니다. Emotion이 아직 Next.js에서 정식 지원이 되지 않아 해당 문제를 해결한 경험이 있으셨던 재형님께서 손봐주셨습니다.
첫 번째 날
자꾸 대전에 가게 됩니다. 2020년에 한 번, 2022년에 두 번, 2023년에 한 번, 2024년에 한 번. 묘하게 끌리는 도시인 것 같습니다.
카이스트 본원 N1 김병호·김삼열 IT 융합빌딩에 참가자들이 모였고, 개회식과 단체 사진 촬영 등으로 약간의 시간을 보낸 뒤 거의 바로 개발을 시작했습니다. 위 사진을 비롯하여 본 글에 등장하는 몇 개의 사진은 SPARCS 관계자분들께서 촬영해 주셨습니다.
다음 날까지 제출해야 했던 데이터 분석 및 시각화 미션에 팀원분들께서 많은 공을 들여 주셨습니다. 저는 데이터 분석
의 ㄷ
도 모르는 사람이었기에 해당 과제는 데이터 분석 경험이 있으셨던 혜인님께서 담당하시고, 재형님께서 Python 코드 작성과 배포를 담당하셨습니다. 저는… 화면 녹화를 했습니다. 😹
저희 팀은 타 대전 문제 해결 아이디어 공모전에서 제시된 아이디어에 대한 공감 수와 대전광역시 폐기물 발생·처리 현황과 같은 자료를 활용하여 대전광역시의 쓰레기 문제는 우리가 마주해야 하는 현실일 뿐만 아니라 폐기물을 수거하는 인력과 자원이 당장 부족한 상황이라는 결론을 내렸습니다.
대전으로 내려가기 며칠 전부터 깨작대고 있었던 온보딩 화면을 비롯한 몇 가지 페이지들을 시작으로, 혜인님께서 제작해 주셨던 Figma 와이어프레임을 참고하여 저희의 서비스였던 WALK FOR US의 메인 플로우에 필요한 페이지들을 작업했습니다.
제가 Emotion을 사용하며 빠르게 작업하는 데에 어려움이 있었기에, Tailwind CSS를 병행하여 사용하기로 결정을 내렸습니다. 이 블로그도 emotion과 비슷한 방식인 styled-components로 CSS를 작성했지만, 디자인을 공장처럼 찍어내는 데에는 Tailwind CSS가 참 좋은 것 같다고 생각했습니다.
저녁 식사는 카이스트 교수회관에서 제공되었고, 21시에 모든 참가자가 롯데시티호텔 대전으로 함께 이동하였습니다.
방은 둘로 나뉘어 있었지만, 한 방에 모여 야식으로 교촌치킨을 먹으면서 개발했습니다. 원래 교촌 한 마리 양이 이렇게 많았었는지 고민해 보는 시간을 가졌습니다.
두 번째 날
위 스크린샷과 같은 디자인을 바탕으로 계속 개발하고 있었는데, 네온 느낌이 나는 배색(굳이 비유하자면 치지직 같은 컬러 스킴)은 어떨까 싶어서 팀원들과 고민했었습니다. 다만 너무 유행을 따르는 것처럼 보이기도 하고, 무엇보다 발표 자료에서 스크린샷 속 내용이 잘 드러나지 않을 것 같다는 의견이 있어서 기존 색상을 유지했습니다.
재형님께서 카카오맵 API를 활용하여 플로깅 코스와 진행 상황을 띄울 수 있는 지도 컴포넌트와 코스 제작 유틸리티를 개발하셨습니다. 수미님께서는 백엔드 개발 중간중간 재형님께서 만드신 코스 제작 유틸리티로 진짜 있을 법한 코스를 많이 만들어 주셔서 서비스 시연할 때 더 풍부한 내용을 보여줄 수 있었습니다.
동측 식당에서 점심을 먹고 오리를 구경하려고 했지만, 비가 와서 제대로 못 봤습니다. 그리고 저는 거위가 보고 싶었어요. ㅠㅠ
메인 플로우였던 혼자 플로깅 시작 → 완료
와 함께 플로깅 시작 → 완료
에 필요한 페이지들은 두 번째 날 오후쯤에는 거의 퍼블리싱이 완료된 상태였습니다. 따라서 모의 플로깅, 플로깅 시작 전 보이는 날씨, 이미지 공유, AI 추천 폼과 같이 체리 온 탑이 될 가능성이 있는 기능을 디자인하며 저녁 시간을 보냈습니다.
막판에 만든 AI 추천 폼 예쁘지 않나요? Gemini나 CLOVA X 같은 AI 챗봇 서비스에서 그라디언트를 적극적으로 활용하는 것을 보고 좀 따라 해 봤는데, 만들고 나서 보니 고민했었던 치지직스러운
디자인을 일부 활용한 것처럼 보이기도 했습니다.
두 번째 날 저녁부터는 개발보다는 발표자셨던 혜인님을 중심으로 발표 자료 제작을 비롯한 발표 준비에 힘썼습니다.
후원사 관련 퀴즈 이벤트에서 3등을 해서 받게 된 배달의민족 상품권으로 보쌈을 시켜서 야식으로 먹었습니다. 어쩌다 보니 대전에서 참 잘 먹고 갑니다….
마지막 날
마지막 날은 개발은 접어두고 발표와 시연 준비에 시간을 들였습니다. 두 번째 날보다 약간 늦게 일어난 뒤 밖에서 아침 식사를 했습니다.
발표 후반에 웹 브라우저 등을 띄워 서비스를 직접 시연할 수 있는 줄 알았는데, 모든 발표와 평가가 끝난 뒤 진행되는 부스에서만 시연이 진행된다는 점을 깨닫고 많이 아쉬웠습니다. 모의 플로깅 화면을 모든 심사위원분께서 보셨다면 더 뿌듯했을 텐데… 🥲
아무튼 예상했던 것보다 훨씬 큰 행사장이었던 대전드림아레나에서 혜인님께서 멋진 발표를 해 주셨습니다.
시연 부스에서, 심사위원이셨던 카이스트 교수님 한 분께서는 토스 만보기와 같은 앱테크 서비스와의 차이점이 무엇인지
, 산책하면서 쓰레기를 줍는 행위를 진짜 하는 사람이 있는지
, 산책하면서 쓰레기 줍는 일이 어떻게 지역사회의 발전으로 이어질 수 있는 것인지
와 같은 수많은 의문을 제기하셔서 걱정이 조금 생겼었습니다.
반면, 후원사 루센트블록 관계자분께서는 회사 차원에서 봉사활동으로 플로깅을 주기적으로 하고 계신다
고 말씀하시는 것을 듣고 약간이나마 기대를 걸어보았던 것 같습니다.
결과적으로는, 놀랍게도 대상을 받을 수 있었습니다. 정말 혹시나 상을 받더라도 대상일 것 같지는 않다고 생각하고 있었기 때문에, 팀 이름이 호명되었을 때 많이 놀랐습니다. 이렇게 초췌한 모습으로 사진이 찍혔는지도 전혀 몰랐습니다. ㅋㅋㅋ
이후 행사를 모두 마치고, 팀원들과 약간의 뒤풀이를 하고 헤어졌습니다. 대전에 올 때마다 항상 그랬듯이 성심당 빵을 왕창 사서 북쪽으로 돌아갔습니다.
결론
옳았던 결정들
일반적인 서비스 개발 환경에서 잘한 점은 아마 절대 아닐 것 같고, 2박 3일 해커톤이라는 특수한 상황에서 저희 팀이 내린 적절한 의사 결정이라고 보는 것이 좋을 것 같습니다.
조금 오만하게 보일 수도 있을 것 같지만 저희 팀이 잘했다고 생각한 점을 정리해 보았습니다.
- 여러 개의 조각난 기능 대신 플로우 하나를 완성했습니다.
- Figma 프로토타이핑에 거의 시간을 들이지 않았습니다. (대신 와이어프레임은 정말 큰 도움이 되었습니다.)
- 불필요한 구현을 하드코딩으로 대체하고 더 있어 보이는 것을 여러 개 만들었습니다. (지도, 모의 플로깅, AI 등)
- Emotion에서 Tailwind CSS로 빠르게 전환했습니다.
근데 사실 또 모르겠습니다. 상을 타고 나서 보니까 잘한 점이지, 결과가 이렇게 좋지 않았다면 같은 내용이라도 잘한 점이 아니라 아쉬웠던 점이 될 수도 있을 것 같습니다. ㅋㅋㅋ
마무리
좋은 팀원들과 함께해서 너무 감사하고 이미 좋은 시간이었는데, 상까지 받게 되어 잊지 못할 경험이 되었습니다. 팀원들로부터 개발과 관련한 부분이든, 아니든 많은 점을 배운 것 같습니다.
또, 다른 팀의 발표도 모두 인상깊게 들었습니다. 모든 팀이 기획, 디자인, 개발 모두 깊게 고민하고 공을 들였다는 게 느껴져서, 우리나라에 이렇게 멋진 대학생들이 많구나 싶었습니다.
행사 운영과 관련해서는, 다른 밤샘 2일 해커톤과 달리, 조금씩이라도 자면서(그것도 4성 비즈니스 호텔에서) 3일간 개발할 수 있는 환경이 제공되어서 너무 만족스러웠습니다. 대전광역시 최고 카이스트 최고 스팍스 최고.
그리고 저는 이미 다음 해커톤을 신청했습니다…. 3월 말에 만나요.