2023.03. - Now · 사이드 프로젝트

프론트 1, 백엔드 1, 디자인 1

칼국수 - 캘린더 구독 서비스

산재된 일정을 하나로 통합하기 위한 솔루션

🔖 개요

2023년 복학 후, 학업과 외주 업무를 병행했습니다. 일정 관리는 저에게 큰 도전이었는데요, 그중에서도 계속해서 변경되는 학사 일정은 하나의 골칫거리였습니다.

칼국수는 이 문제를 해결하기 위해 탄생한 iCal 기반의 구독 캘린더입니다. 1시간 단위로 동작하는 크롤러가 학사 일정을 수집하고, 수집된 데이터는 사용자의 애플 캘린더 혹은 구글 캘린더와 동기화됩니다.

2024년 12월 14일 기준 600명이 넘는 사용자가 이용하고 있습니다.

📅 기간

2023.03. - Now
아이디어를 빠르게 구현하여 이틀이 채 되지 않은 시간에 서비스를 런칭했습니다. 2024년 4월에는 새로운 디자인을 적용하여 현재 모습이 되었습니다.

📚 기술 스택

React, Next.js, TypeScript, styled-components

프론트엔드에서 사용된 기술 스택은 위와 같습니다.

SEO(검색 엔진 최적화)를 위해 Next.js 프레임워크를 도입했습니다. 지금은 구독을 위한 정적 페이지만 제공하고 있어 프레임워크 도입이 다소 오버엔지니어링이 되었다고 생각합니다.

학생회와 같은 단체에서 직접 캘린더를 생성하고 배포할 수 있도록 관리자 페이지를 추가하고 있고, 이 과정에서 Next.js의 장점을 적극적으로 활용하려 합니다.

🌊 FullyFlow

칼국수에는 사용자가 캘린더 구독에 집중할 수 있도록 FullyFlow라는 이름의 컴포넌트를 구현했습니다. 이 컴포넌트는 아래와 같이 구성됩니다.

<FullyFlow>
  <Section>
    <IntroduceSection />
  </Section>
  <Section>
    <ScheduleSection />
  </Section>
  <Section>
    <SubscribeSection />
  </Section>
  <Section>
    <CompleteSection />
  </Section>
</FullyFlow>

<FullyFlow>
  <Section>
    <IntroduceSection />
  </Section>
  <Section>
    <ScheduleSection />
  </Section>
  <Section>
    <SubscribeSection />
  </Section>
  <Section>
    <CompleteSection />
  </Section>
</FullyFlow>

여기에서 Section은 높이가 100%인 뷰를 의미하는데요, 사용자가 다음 스탭으로 넘길 때 현재 스탭이 위로 올라가고, 아래의 스탭은 끌어올려져 자연스럽고 부드럽게 전환됩니다.

처음에는 이 뷰를 직접 구현할 생각은 없었습니다. 저는 이 당시 라이브러리를 사용하면 항상 좋다는 생각을 하고 있었고(예를 들어, 폼 관리에는 react-form-hook을 사용하고, 전역 상태 관리에는 recoil이나 mobx를 사용해야 한다는 생각이 있었죠.), fullpage.js나 swiper.js와 같은 강력한 라이브러리가 이미 존재했기 때문입니다.

그렇지만 저의 요구사항은 ① 버튼을 트리거로 사용해야 하고, ② 가로가 아닌 세로로 전환이 되어야 하며, ③ 라이선스 문제가 없어야 했습니다. 이에 맞는 라이브러리를 찾지 못해 직접 구현하게 되었으며, 컴포넌트를 FullyFlow라는 이름으로 배포 준비 중입니다.

이 경험 이후 저는 '라이브러리를 굳이 사용할 필요가 없다.'는 생각을 할 수 있었고, 꼭 필요하다고 판단되지 않을 경우, 직접 구현하는 것을 선호하고 있습니다.