te6.in
Blog
글 코드 조각 태그
글
코드 조각
태그
  • iOS 7
  • 소셜 미디어 6
  • 생산성 5
  • 팁 5
  • 회고 5
  • Google 4
  • iPhone 4
  • macOS 4
  • 단축어 4
  • 자동화 4
  • 해커톤 4
  • 후기 4
  • AI 3
  • LLM 3
  • TypeScript 3
  • 뉴스레터 3
  • 대전 3
  • 영문학 3
  • 일상 3
  • GitHub 2
  • iCloud 2
  • Instagram 2
  • 군대 2
  • 디자인 시스템 2
  • 유틸리티 2
  • 카카오톡 2
  • 캘린더 2
  • AirDrop 1
  • Apps Script 1
  • Astro 1
  • BeReal 1
  • ChatGPT 1
  • Gemini 1
  • Git 1
  • Homebrew 1
  • iMessage 1
  • JavaScript 1
  • JSON 1
  • KAIST 1
  • KUCC 1
  • NameDrop 1
  • Next.js 1
  • Node.js 1
  • Perplexity 1
  • Raycast 1
  • SaaS 1
  • SPARCS 1
  • Spotlight 1
  • Swift 1
  • UX 1
  • UX 라이팅 1
  • 공군해커톤 1
  • 당근 1
  • 돈 1
  • 디지털 권리 1
  • 멀티모달 1
  • 번역 1
  • 법률 1
  • 브랜딩 1
  • 블로그 1
  • 스프레드시트 1
  • 신한 1
  • 절약 1
  • 텔레그램 1
  • 핀테크 1
  • 현지화 1

SPARCS 서비스 해커톤 2024 후기: 대상을 받다

우리나라에 멋진 대학생이 이렇게나 많다니

  • 대전 3
  • KAIST 1
  • SPARCS 1
  • 해커톤 4
  • 회고 5
  • 찬휘 te6
작성 2024. 3. 3.
대전광역시 시장상 팻말을 들고 있는 사람
목차
  1. 개요
  2. 타임라인
    1. 지원서 작성
    2. 주제 및 과제 공개와 기획 회의
    3. 첫 번째 날
    4. 두 번째 날
    5. 마지막 날
  3. 결론
    1. 옳았던 결정들
    2. 마무리
반응 댓글

개요

2월 중순 대전광역시와 KAIST가 공동 주최한 SPARCS Service Hackathon 2024 (스팍스 서비스 해커톤 2024)에 다녀왔습니다.

행사를 주관한 SPARCS 는 카이스트 학부 총학생회 산하의 개발 특별기구/자치단체라고 합니다.

SPARCS 2024 서비스 해커톤 포스터, 모집 1. 17 - 1.28 / 행사 일정 2. 14 - 2. 16 2박 3일간 대전에서 / 지원 및 자세한 사항은 event.sparcs.org/ssh24

행사는 2월 14일부터 16일까지 카이스트와 롯데시티호텔 대전, 대전드림아레나(대전 이스포츠경기장)를 오가며 진행되었습니다. 다만, 행사 일주일가량 전인 2월 8일에 주제가 공개되었고 11일부터 공식적으로 개발이 허용되었기 때문에, 대전에 있었던 시간인 3일뿐 아니라 설 연휴 전후를 포함한 더 많은 시간을 쏟았다고 볼 수 있습니다.

타임라인

지원서 작성

동아리 정보 공유 채널에 올라온 해커톤 지원자 모집 공지를 보고 지원해야 하나 고민하고 있었는데, 어쩌다 보니…, 이미 지원서를 작성하고 있었습니다.

특별한 내용을 적지는 않았지만, 정말 혹시라도 누군가에게 도움이 될 수도 있을 것 같아서 언급하자면, 지원서에는 개발자로서의 다른 직군과의 협업 경험 부족, 오픈소스 기여 경험, 교내 동아리 해커톤 참여 경험 및 깨달은 점 , 대규모 행사에서 기대해 볼 수 있는 참가자들의 높은 수준, 심사위원들로부터의 값진 피드백에 대해 주로 작성했습니다.

iMessage 스크린샷, "[SPARCS 서비스 해커톤 2024] 안녕하세요, 주찬휘 지원자님. 축하합니다! 귀하께서는 본 행사에 합격 하였습니다. 참가비 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년에 한 번. 묘하게 끌리는 도시인 것 같습니다.

행사장 전경, 개회사 KAIST 교학부총장 이동만 행사장 전경, 개회사 KAIST 교학부총장 이동만

카이스트 본원 N1 김병호·김삼열 IT 융합빌딩에 참가자들이 모였고, 개회식과 단체 사진 촬영 등으로 약간의 시간을 보낸 뒤 거의 바로 개발을 시작했습니다. 위 사진을 비롯하여 본 글에 등장하는 몇 개의 사진은 SPARCS 관계자분들께서 촬영해 주셨습니다.

시간표, 1일차 (2/14) 개회식 / 아이스브레이킹 / 교육 / 석식 / 데이터 분석 미션 진행 / 숙소로 이동 및 짐 풀기 / 네트워킹, 2일차 (2/15) 조식 / 개발 / 중식 및 KAIST 오리연못 투어 / 개발 (이벤트 및 퀴즈 등 포함) / 석식 / 개발, 3일차 (2/16) 조식 / 개발 / 중식 / 기업 소개 / 발표 및 심사 / 최종 결과물 공유 / 폐회식 / 자유 네트워킹 및 귀가

다음 날까지 제출해야 했던 데이터 분석 및 시각화 미션에 팀원분들께서 많은 공을 들여 주셨습니다. 저는 데이터 분석의 ㄷ도 모르는 사람이었기에 해당 과제는 데이터 분석 경험이 있으셨던 혜인님께서 담당하시고, 재형님께서 Python 코드 작성과 배포를 담당하셨습니다. 저는… 화면 녹화를 했습니다. 😹

재생

저희 팀은 타 대전 문제 해결 아이디어 공모전에서 제시된 아이디어 에 대한 공감 수와 대전광역시 폐기물 발생·처리 현황과 같은 자료를 활용하여 대전광역시의 쓰레기 문제는 우리가 마주해야 하는 현실일 뿐만 아니라 폐기물을 수거하는 인력과 자원이 당장 부족한 상황이라는 결론을 내렸습니다.

WALK FOR US 온보딩 화면 스크린샷, 평소 함께 산책하는 분이 있나요? 여러 항목을 선택할 수 있어요. 혼자 / 반려견과 / 가족과 / 친구와, 다음 버튼 WALK FOR US 홈 화면 스크린샷, 반가워요, 성유님 함께 건강한 대전, 건강한 나를 만들어요!, 2월 통계, 우리 동네에 예정되어 있는 플로깅, 가장 빨리 시작하는 플로깅 모임 WALK FOR US 재활용 잘 하는 법 스크린샷, 두 가지 이상의 재질이 혼합된 포장재는 일반 종량제봉투! 예: 성수지 용기, 폴리스티렌페이퍼(PSP), 종이팩, 샴푸통 • 플라스틱류 부착상표와 다른 재질로 된 부분 제거. 분리가 어렵다면 종량제봉투 • 비닐류 이물질이 묻었다면 제거 , 어렵다면 종량제봉투 • 스티로폼 테이프, 운송장 완전히 제거, 어렵다면 쪼개서 종량제봉투 • 유리병류 안에 이물질이 없는지 확인 , 거울, 깨진 유리, 도자기류,유리 식기류는 종량제봉투 or 전용마대, 알겠어요 버튼

대전으로 내려가기 며칠 전부터 깨작대고 있었던 온보딩 화면을 비롯한 몇 가지 페이지들을 시작으로, 혜인님께서 제작해 주셨던 Figma 와이어프레임을 참고하여 저희의 서비스였던 WALK FOR US의 메인 플로우에 필요한 페이지들을 작업했습니다.

제가 Emotion을 사용하며 빠르게 작업하는 데에 어려움이 있었기에, Tailwind CSS를 병행하여 사용하기로 결정을 내렸습니다. 이 블로그도 emotion과 비슷한 방식인 styled-components로 CSS를 작성했지만, 디자인을 공장처럼 찍어내는 데에는 Tailwind CSS가 참 좋은 것 같다고 생각했습니다.

SPARCS 2024 서비스 해커톤 포스터와 "해커톤 행사장 ←"라고 적힌 종이가 벽에 붙어 있는 모습

저녁 식사는 카이스트 교수회관에서 제공되었고, 21시에 모든 참가자가 롯데시티호텔 대전으로 함께 이동하였습니다.

책상 위에 올려진 펩시 콜라와 교촌치킨 롯데시티호텔 대전 앞 거리 야경

방은 둘로 나뉘어 있었지만, 한 방에 모여 야식으로 교촌치킨을 먹으면서 개발했습니다. 원래 교촌 한 마리 양이 이렇게 많았었는지 고민해 보는 시간을 가졌습니다.

두 번째 날

WALK FOR US 추천 플로깅 코스 목록 스크린샷, 오늘은 어떤 코스에서 플로깅을 즐겨 볼까요? 짧은 소요시간 순으로 정렬됨 WALK FOR US 공원에서 함께하는 간단 플로깅 스크린샷, 코스 지도, 바로 시작하기 버튼, 담아두기 버튼 WALK FOR US 플로깅 화면 스크린샷, 성유님의 첫 번째 플로깅, 화이팅! 첫 번째 깃발은 성진빌딩 앞 신호등에 있어요!, 코스 지도, 쓰레기가 많은 지역을 발견하면 사진을 찍어주세요. 많이 올릴수록 점수도 올라가요!, 쓰레기 요 놈 걸렸다 버튼, 중도 포기 버튼

위 스크린샷과 같은 디자인을 바탕으로 계속 개발하고 있었는데, 네온 느낌이 나는 배색(굳이 비유하자면 치지직 같은 컬러 스킴)은 어떨까 싶어서 팀원들과 고민했었습니다. 다만 너무 유행을 따르는 것처럼 보이기도 하고, 무엇보다 발표 자료에서 스크린샷 속 내용이 잘 드러나지 않을 것 같다는 의견이 있어서 기존 색상을 유지했습니다.

WALK FOR US 코스 제작 유틸리티

재형님께서 카카오맵 API를 활용하여 플로깅 코스와 진행 상황을 띄울 수 있는 지도 컴포넌트와 코스 제작 유틸리티를 개발하셨습니다. 수미님께서는 백엔드 개발 중간중간 재형님께서 만드신 코스 제작 유틸리티로 진짜 있을 법한 코스를 많이 만들어 주셔서 서비스 시연할 때 더 풍부한 내용을 보여줄 수 있었습니다.

돈까스 정식 카이스트 오리 연못에 보이는 오리

동측 식당에서 점심을 먹고 오리를 구경하려고 했지만, 비가 와서 제대로 못 봤습니다. 그리고 저는 거위가 보고 싶었어요. ㅠㅠ

WALK FOR US 플로깅 준비 화면 스크린샷, 플로깅을 시작하기 전에, 꼭 읽어봐야 하는 준비 사항을 알려드려요! 서구 가장동 9°C • 쓰레기를 담을 봉투, 장갑과 집게 준비해요. 여러 번 재사용할 수 있는 소재이면 더 좋아요! • 편한 옷차림과 신발은 필수에요. • 쓰레기를 주울 땐 허리가 아닌 엉덩이, 허벅지 힘으로 들어야 다치치 않아요. • 들고 간 봉투가 찢어지지 않을 정도로 담아주세요. • 이번 플로깅은 낮에 이루어져요. 자외선에 오래 노출되지 않도록 주의하세요., 알겠어요 버튼 WALK FOR US 모의 플로깅 화면 스크린샷, 성유님의 첫 번째 플로깅, 화이팅! 첫 번째 깃발은 성진빌딩 앞 신호등에 있어요!, 코스 지도, 쓰레기가 많은 지역을 발견하면 사진을 찍어주세요. 많이 올릴수록 점수도 올라가요!, 쓰레기 요 놈 걸렸다 버튼, 중도 포기 버튼 WALK FOR US 플로깅 결과 화면, 오늘의 플로깅으로 내일의 대전이 더 깨끗해졌어요!, 쓰레기봉투 사진, 이미지 공유 버튼, 이 플로깅 코스를 추천하시나요?

메인 플로우였던 혼자 플로깅 시작 → 완료와 함께 플로깅 시작 → 완료에 필요한 페이지들은 두 번째 날 오후쯤에는 거의 퍼블리싱이 완료된 상태였습니다. 따라서 모의 플로깅, 플로깅 시작 전 보이는 날씨, 이미지 공유, AI 추천 폼과 같이 체리 온 탑이 될 가능성이 있는 기능을 디자인하며 저녁 시간을 보냈습니다.

WALK FOR US 추천 플로깅 코스 목록 스크린샷, AI 추천, AI 입맛대로 맞추기, 누구와 함께하시나요? 혼자 / 친구 / 애인, 선호하는 코스가 있으신가요? 편안한 산책로 / 쓰레기통 많은 / 역사적 의미가 있는 / 자연 경관이 아름다운, 피하고 싶으신 곳이 있나요? 사람 많은 곳 / 가로등 적은 곳 / 가로수 적은 곳 / 복잡한 길 / 좁은 골목, 이대로 추천 받기 버튼

막판에 만든 AI 추천 폼 예쁘지 않나요? Gemini나 CLOVA X 같은 AI 챗봇 서비스에서 그라디언트를 적극적으로 활용하는 것을 보고 좀 따라 해 봤는데, 만들고 나서 보니 고민했었던 치지직스러운 디자인을 일부 활용한 것처럼 보이기도 했습니다.

WALK FOR US 발표 자료, 핵심 기술: LLM 활용 경로 추천 서비스 • 대전 지역의 다양한 플로깅 경로를 미리 분석 • 쓰레기 분포, 주변 자연 환경과 같은 요소를 LLM으로 처리 • 사용자가 제공한 태그와 현재 위치 정보를 바탕으로 최적화된 플로깅 코스 제공 WALK FOR US 발표 자료, 핵심 기술: 카카오맵을 활용한 경로 시각화 모듈 및 에디터 • 카카오맵의 마커와 폴리라인 기능을 이용 • 직관적이고 사용하기 쉬운 플로깅 경로 시각화 제공 • 사용자와 관리자가 몇 번의 클릭만으로 쉽게 플로깅 코스를 맞춤 설정할 수 있는 편집 도구 개발 완료 WALK FOR US 발표 자료, 페이지 구성 및 유저 프로세스: 플로깅 진행

두 번째 날 저녁부터는 개발보다는 발표자셨던 혜인님을 중심으로 발표 자료 제작을 비롯한 발표 준비에 힘썼습니다.

보쌈 정식

후원사 관련 퀴즈 이벤트에서 3등을 해서 받게 된 배달의민족 상품권으로 보쌈을 시켜서 야식으로 먹었습니다. 어쩌다 보니 대전에서 참 잘 먹고 갑니다…

마지막 날

책상 위에 놓인 국밥 한빛탑과 꿈돌이

마지막 날은 개발은 접어두고 발표와 시연 준비에 시간을 들였습니다. 두 번째 날보다 약간 늦게 일어난 뒤 밖에서 아침 식사를 했습니다.

발표 후반에 웹 브라우저 등을 띄워 서비스를 직접 시연할 수 있는 줄 알았는데, 모든 발표와 평가가 끝난 뒤 진행되는 부스에서만 시연이 진행된다는 점을 깨닫고 많이 아쉬웠습니다. 모의 플로깅 화면을 모든 심사위원분께서 보셨다면 더 뿌듯했을 텐데… 🥲

대전드림아레나 행사장 내부 전경 대전드림아레나 행사장 내부 전경 WALK FOR US 발표 현장 WALK FOR US 발표 현장 WALK FOR US 발표 현장 WALK FOR US 발표 현장

아무튼 예상했던 것보다 훨씬 큰 행사장이었던 대전드림아레나에서 혜인님께서 멋진 발표를 해 주셨습니다.

재생

시연 부스에서, 심사위원이셨던 카이스트 교수님 한 분께서는 토스 만보기와 같은 앱테크 서비스와의 차이점이 무엇인지, 산책하면서 쓰레기를 줍는 행위를 진짜 하는 사람이 있는지, 산책하면서 쓰레기 줍는 일이 어떻게 지역사회의 발전으로 이어질 수 있는 것인지와 같은 수많은 의문을 제기하셔서 걱정이 조금 생겼었습니다.

반면, 후원사 루센트블록 관계자분께서는 회사 차원에서 봉사활동으로 플로깅을 주기적으로 하고 계신다고 말씀하시는 것을 듣고 약간이나마 기대를 걸어보았던 것 같습니다.

대전광역시 시장상, 상금 200만원, 장호종 대전광역시 경제과학부시장님이 시상하는 모습 장호종 대전광역시 경제과학부시장님이 시상하는 모습

결과적으로는, 놀랍게도 대상을 받을 수 있었습니다. 정말 혹시나 상을 받더라도 대상일 것 같지는 않다고 생각하고 있었기 때문에, 팀 이름이 호명되었을 때 많이 놀랐습니다. 이렇게 초췌한 모습으로 사진이 찍혔는지도 전혀 몰랐습니다. ㅋㅋㅋ

철판 위에서 구워지고 있는 삼겹살과 반찬들 아이스크림이 올려진 카페 음료들 각종 성심당 빵이 담긴 종이 봉투 2개

이후 행사를 모두 마치고, 팀원들과 약간의 뒤풀이를 하고 헤어졌습니다. 대전에 올 때마다 항상 그랬듯이 성심당 빵을 왕창 사서 북쪽으로 돌아갔습니다.

결론

옳았던 결정들

일반적인 서비스 개발 환경에서 잘한 점은 아마 절대 아닐 것 같고, 2박 3일 해커톤이라는 특수한 상황에서 저희 팀이 내린 적절한 의사 결정이라고 보는 것이 좋을 것 같습니다.

조금 오만하게 보일 수도 있을 것 같지만 저희 팀이 잘했다고 생각한 점을 정리해 보았습니다.

잘한 점

  1. 여러 개의 조각난 기능 대신 플로우 하나를 완성했습니다.
  2. Figma 프로토타이핑에 거의 시간을 들이지 않았습니다. (대신 와이어프레임은 정말 큰 도움이 되었습니다.)
  3. 불필요한 구현을 하드코딩으로 대체하고 더 있어 보이는 것을 여러 개 만들었습니다. (지도, 모의 플로깅, AI 등)
  4. Emotion에서 Tailwind CSS로 빠르게 전환했습니다.

근데 사실 또 모르겠습니다. 상을 타고 나서 보니까 잘한 점이지, 결과가 이렇게 좋지 않았다면 같은 내용이라도 잘한 점이 아니라 아쉬웠던 점이 될 수도 있을 것 같습니다. ㅋㅋㅋ

마무리

좋은 팀원들과 함께해서 너무 감사하고 이미 좋은 시간이었는데, 상까지 받게 되어 잊지 못할 경험이 되었습니다. 팀원들로부터 개발과 관련한 부분이든, 아니든 많은 점을 배운 것 같습니다.

또, 다른 팀의 발표도 모두 인상깊게 들었습니다. 모든 팀이 기획, 디자인, 개발 모두 깊게 고민하고 공을 들였다는 게 느껴져서, 우리나라에 이렇게 멋진 대학생들이 많구나 싶었습니다.

행사 운영과 관련해서는, 다른 밤샘 2일 해커톤과 달리, 조금씩이라도 자면서(그것도 4성 비즈니스 호텔에서) 3일간 개발할 수 있는 환경이 제공되어서 너무 만족스러웠습니다. 대전광역시 최고 카이스트 최고 스팍스 최고.


그리고 저는 이미 다음 해커톤 을 신청했습니다… 3월 말에 만나요.

2023년 돌아보기
이전 글
고층 빌딩이 밀집된 홍콩의 스카이라인과 넓은 강, 멀리 작은 비행기가 떠 있는 맑은 하늘
Homebrew로 맥 초기 세팅 끝내기
다음 글
Homebrew macOS 초기 세팅, 맥주잔 속에 빠진 사과의 일러스트레이션
모든 글 보기
블로그 마지막 업데이트 2025년 11월 10일 01:48

microsoft/fluentui-emoji is licensed under the MIT License.
Copyright (c) Microsoft Corporation.