💙 큐시즘이란?

💡한국대학생 IT 경영학회로, 매 기수 70-80명의 대학생들이 모여 각각 기획, 디자인, 개발(프론트/백엔드) 파트를 맡아 IT 프로덕트를 만드는 학회

기업과 연계하여 진행되는 기업 프로젝트, 자체적으로 서비스를 만드는 밋업 프로젝트 등 실무형 커리큘럼과 각종 네트워킹까지 다양한 활동을 할 수 있는 학회입니다.

이 중 이번에는 큐시즘 인원들끼리 팀을 꾸려 기획자 분들이 아이디어를 발제하여 그것에 대한 mvp를 만드는 밋업 프로젝트에 대해서 간단하게 설명을 해드리고 회고를 해보려고 합니다.
이번 밋업프로젝트는 총 두달간 진행되었는데요 그 과정을 함께 보시죠

---

💡 아이디어 발제 및 커피챗

아이디어 발제

커피챗

큐시즘의 메인 프로젝트인 밋업프로젝트의 시작을 알리는 아이디어 발제 및 커피챗 세션을 진행하였습니다. 사전 아이디어톤을 통해 선발된 8개 아이디어에 대해서 발표하고, 이야기를 나누는 시간을 가졌습니다.

8개 아이디어 전부 너무 훌륭한 아이디어여서 선택을 하는 과정에서 정말 많은 고민을 했었습니다.

아이디어 선택 기준

아이디어를 선정할 때 저는 다음 세 가지 기준을 중심으로 고민했습니다:

1. 프론트엔드 개발자로서 새로운 기술이나 도전을 경험할 수 있는가?

2. 제한된 기간 내에 MVP를 완성할 수 있는 적정 규모인가?

3. 실제 사용자 확보가 비교적 수월한 주제인가?

---

🪖 사랑꾼

이런 기준을 세우고 아이디어를 고른 결과 사랑꾼이란 곰신 커플들을 위한 서비스를 선택하게 되었습니다.

기존의 군인/곰신 커플은 군대라는 장소와 연락의 제약으로 인해 많은 문제를 겪어왔습니다. 상호 단절이 자연스럽고, 이에 불화가 생길 시에 풀기 어려운 문제가 발생합니다. 이러한 문제점이 더욱 가중될 수 있다는 것은 군인/곰신 커플이 가지는 필연적인 어려움입니다.

사랑꾼은 상호 이해(감정, 일정)를 바탕으로 표현을 도와주어 군인과 곰신의 관계 유지를 돕는 커플 공유 캘린더 서비스입니다.

선택 이유

이번 프로젝트에서는 단순한 웹 서비스가 아닌, 앱에 가까운 경험을 제공할 수 있는 PWA로 개발해야 했습니다. 여기에 푸시 알림 기능까지 더해져 사용자에게 감정과 일정을 효과적으로 전달하는 것이 중요한 과제였죠.

특히 핵심 기능 중 하나인 캘린더는 단순한 날짜 표시 이상의 역할을 해야 했기 때문에, 기존 라이브러리를 사용하는 대신 직접 캘린더를 구현할 수도 있겠다는 부담과 기대가 공존했습니다.
이런 기술적인 도전이 오히려 제게는 큰 동기부여가 되었고, 프론트엔드 개발자로서 한 단계 성장할 수 있는 좋은 기회라고 판단했습니다.

기능적으로는 일정 공유, 감정 상태 전달, 푸시 알림 등 주요 기능들이 명확했고, 두 달이라는 기간 안에 충분히 구현 가능한 규모라 생각했습니다.
무엇보다 팀의 기획자분이 곰신 사용자들의 니즈를 직접 조사하고, 유사 서비스와의 차별점을 명확하게 제시해준 덕분에 사용자 확보에 대한 확신도 들었습니다. 이 점이 최종 선택에 큰 영향을 주었습니다.

기술스택

기술	설명
TypeScript	타입 안정성을 통해 유지보수성과 리팩터링 효율 향상
React + Vite	컴포넌트 기반 구조 + 빠른 번들링과 HMR 제공
PWA	모바일 설치 가능, 웹 푸시 알림 등 기능 제공
Tailwind CSS	유틸리티 기반 CSS로 빠르고 일관된 스타일링
shadcn/ui	접근성과 커스터마이징이 강력한 UI 컴포넌트 라이브러리
Zustand	간단하고 가벼운 전역 상태 관리
React Query (@tanstack/react-query)	서버 상태 관리, 캐싱, 리페칭 자동화
Axios	HTTP 요청/응답 처리 및 인터셉터 설정
MSW	API mocking으로 프론트 개발 병렬화 지원
Vitest	Vite와 통합된 빠른 테스트 실행 환경

이번 프로젝트에서는 PWA 적용이 필수 조건 중 하나였습니다. 이전 프로젝트에서 간단히 PWA를 도입해본 경험이 있었는데, 그때 가장 까다로웠던 부분은 메니페스트와 서비스 워커 등록 과정이었습니다.

⚡️ Vite + PWA

공식문서 링크

이번에는 그 어려움을 줄이기 위해 많은 리서치를 했고, 다행히도 Vite에서 PWA를 쉽게 적용할 수 있도록 지원해주는 플러그인을 발견했습니다.
해당 플러그인을 통해 PWA 설정을 간편하게 구성할 수 있었고, 공식 문서에 따라 메니페스트와 서비스 워커 등록까지 수월하게 진행할 수 있었습니다.
이로 인해 PWA 도입에 대한 기술적 장벽을 크게 낮출 수 있었고, 앱처럼 동작하는 사용자 경험을 안정적으로 제공할 수 있었습니다.

🧩 MSW (Mock Service Worker)

프론트엔드 개발을 하다 보면 종종 백엔드 API가 준비되지 않은 상태에서 UI 개발을 먼저 진행해야 할 상황이 생깁니다.
이번 프로젝트 초반에는 MSW를 활용해 API 요청/응답을 가짜로 처리하고, 백엔드와 동시에 개발을 진행하려는 계획이 있었습니다. MSW를 활용하면 실제 서버가 없어도 UI와 데이터 흐름을 테스트할 수 있어 개발 효율을 높일 수 있기 때문입니다.

하지만 예상보다 프로젝트 초기 세팅과 UI 개발에 시간이 많이 소요되었고, 일정이 타이트했던 탓에 MSW를 실제로 적용할 시간은 확보하지 못했습니다.
그럼에도 불구하고 백엔드와는 요청/응답 타입을 명확히 정의하고 협의하면서 개발을 진행했기에, 향후 리팩토링 단계에서 MSW를 활용한 예외 케이스 테스트나 에러 시나리오 처리를 추가해볼 계획입니다.

🧪 Vitest

이번 프로젝트에서는 날짜 기반의 일정 관리 기능이 핵심 중 하나였습니다.
백엔드에서 전달받는 날짜 데이터는 DATE 형식이었고, 이를 사용자가 보기 쉽게 가공하거나, 사용자의 선택 값을 다시 백엔드에서 처리 가능한 형식으로 변환하는 작업이 필요했습니다.
이 과정에서 여러 개의 날짜 변환 함수들이 작성되었고, 공통 유틸로 분리해 재사용성을 높였습니다. 하지만 다양한 입력값에 따라 예외가 발생하기 쉬운 구조였기에 신뢰성 있는 단위 테스트가 꼭 필요했습니다.

그래서 해당 함수들에 대해 Vitest를 활용한 테스트 코드를 작성해, 입력값이 원하는 결과로 정확히 변환되는지 검증했습니다. 이 덕분에 코드의 안정성과 유지보수성이 높아졌습니다.

향후에는 주요 컴포넌트 간 상호작용과 사용자 플로우가 잘 작동하는지 확인하기 위해, 통합 테스트 및 E2E 테스트까지 확장해 나갈 계획입니다.

✅ 테스트 코드 (formatDate.test.ts)

import { describe, it, expect } from 'vitest'
import { formatDate } from './formatDate'

describe('formatDate 함수', () => {
  it('Date 객체를 "YYYY-MM-DD" 형식의 문자열로 변환한다', () => {
    const input = new Date('2025-12-12T00:00:00Z')
    const result = formatDate(input)
    expect(result).toBe('2025-12-12')
  })

  it('한 자리 수 월과 일을 0으로 채워서 반환한다', () => {
    const input = new Date('2025-01-05T00:00:00Z')
    const result = formatDate(input)
    expect(result).toBe('2025-01-05')
  })
})

---

🔥 개발 과정

팀이 꾸려진 이후, 매주 토요일마다 총 5번의 집중 협업 세션이 진행되었습니다. 각 팀은 정해진 시간 동안 함께 모여 프로젝트 개발에 힘을 쏟았고, 매 세션마다 점점 더 탄탄해지는 결과물을 만들어갔습니다.

하지만 개발에만 집중하다 보면 지치기 마련이죠. 그래서 중간중간에는 잠시 쉬어가는 시간도 마련되었습니다.
각 파트별로 모여, 익명으로 제출된 고민들을 주제로 자유롭게 이야기 나누는 토크 세션이 열렸습니다.
준비된 고민 카드 중에서 하나를 뽑아도 되고, 하고 싶은 이야기를 꺼내도 되는 방식으로 편안한 분위기 속에서 서로의 이야기에 공감하고, 함께 고민을 나누며 유대감을 키울 수 있었습니다. 다른 팀의 사람들과도 이야기하며 새로운 관점과 조언을 얻는 뜻깊은 시간이었습니다.

그리고 세션이 시작되기 전, 특별한 시간이 찾아왔습니다. 바로 ‘큐밀리 라디오’!
기프팀, MT, 세션 외 회의나 회식, 소모임, 스터디 등에서 고마웠던 순간들을 되새기며, 따뜻한 마음을 담은 익명 사연이 소개되는 시간이었습니다.
기프팀 전체를 향한 메시지부터, 큐밀리 개개인을 향한 고마운 이야기들까지. 웃음과 감동이 가득했던 큐밀리 라디오는 모두의 마음에 잔잔한 여운을 남겼습니다.

---

🚀 밋업 데이

발표

큐시즘 활동의 피날레라 할 수 있는 밋업데이가 열렸습니다.
각 팀은 발제한 아이디어를 바탕으로 직접 구현한 MVP를 발표하고, 시연하는 시간을 가졌습니다.
이번 밋업데이는 큐시즘 외부인도 신청을 통해 참여할 수 있었기에, 다양한 관람객이 자리를 함께해 더욱 활기찬 분위기 속에서 진행되었습니다.

또한, 유튜브 라이브로 행사 전체가 실시간 송출되며 녹화되었기 때문에 큐시즘에서 탄생한 멋진 서비스들을 더 널리 알릴 수 있는 소중한 기회가 되었습니다.

---

부스 운영

발표 이후에는 각 팀이 부스를 열고, 자신들이 만든 서비스를 직접 시연하는 시간을 가졌습니다.
부스를 찾은 참가자들은 실제 서비스를 체험해보고, 피드백을 주고받으며 활발한 소통이 이루어졌습니다.

저희 팀 부스에도 많은 분들이 찾아주셨는데요.
그중에는 현직 기획자, 디자이너, 개발자분들도 계셔서 전문적인 조언을 들을 수 있었고, 실제 곰신 커플 분들도 방문해 주셔서 사용자 입장에서의 소중한 피드백을 들을 수 있었습니다.
서비스에 대한 다양한 의견을 직접 들을 수 있는 뜻깊고 감사한 시간이었습니다.

---

🏃🏿 끝이 아니라 시작

2월에 시작된 큐시즘 여정이 어느덧 막을 내렸습니다.
하지만 우리 팀에게 이 끝은 진짜 시작에 불과합니다.

팀원 모두가 우리가 만든 서비스를 실제로 세상에 선보이고 싶은 열정으로 가득 차 있습니다.
그래서 큐시즘 활동이 종료된 이후에도 지속적으로 만나며, 서비스를 더욱 발전시켜 나가기로 했습니다.

아직 해결해야 할 문제들이 많지만, 하나씩 풀어나가며 앱스토어와 플레이스토어에 정식 출시하고, 실제 사용자들과 함께 서비스 운영을 경험해보려 합니다.

앞으로의 여정도 함께 지켜봐 주신다면 정말 감사하겠습니다.

그리고 방산소년단 다들 힘들겠지만 항상 웃으면서 지금처럼 쭉 계속해보자 화이팅 🫡

깃허브 주소
https://github.com/Gomushim/frontend

서비스 주소 (아마 잘 안될거임 빨리 고쳐볼게유 ㅠ)
https://www.sarangkkun.site/