Overview
개인 프로젝트 · 2026.06 · 기획·풀스택 구축
온라인에 함께 모여 서로의 목표 달성을 돕는 그룹 협업 도구 'Tatispa'를 혼자 기획·개발했다. 그룹(방) 단위의 공유 달력과 접속(집중) 시간 추적·랭킹을 하나의 크롬 확장 프로그램(+웹)으로 묶어 제공한다.
- Google 로그인 → 비공개 '방' 생성·초대(8자리 코드, 선택 비밀번호)로 그룹 구성 (계정당 방 30개·방당 30명)
- 공유 달력 — 멤버 누구나 일정 추가·수정·삭제, Firestore
onSnapshot기반 실시간 동기화, 멤버 태그·리마인더 알림 - 접속 시간 추적 — 참여/휴식/퇴장으로 집중 시간 기록, 오늘·주간·월간 리더보드, 모든 방 전역 체크인
- 랭킹 — 방/개인(전체·주간·월간, 합산·평균)
- YouTube 함께보기·플립 시계·사다리타기 등 "함께하는" 재미 요소
- 크롬 확장(MV3) + 웹 이중 제공, Service Worker 알림·Webpack 빌드까지 풀스택
- Skill: 서비스 기획·풀스택 구축, 실시간 데이터 모델 설계(Firestore), 크롬 확장(MV3) 설계, 인증·권한 설계
- Stack: JavaScript(Vanilla), Firebase Auth·Firestore, Chrome Extension(MV3), Webpack 5, Firebase Hosting
Problem
혼자 세운 목표는 지키기 어렵다. 스터디·팀·모임처럼 함께 활동하는 사람들은 같은 일정을 공유하고 서로의 집중을 확인하며 동기를 얻고 싶지만, 캘린더·타이머·랭킹이 서로 흩어져 있어 "같은 공간에 모여 함께 목표를 향한다"는 경험을 한곳에서 주기 어렵다.
Solution
- 방(공간) 기반 그룹 — 8자리 초대 코드로 참여하는 비공개 방 안에서 일정과 접속 시간을 함께 공유
- 실시간 공유 달력 — Firestore
onSnapshot구독으로 일정 변경을 모든 멤버에게 즉시 반영, 멤버 태그·시작 전 리마인더(데스크톱 알림) - 집중 시간 추적·경쟁 — 참여/휴식/퇴장으로 집중 시간을 기록하고 오늘·주간·월간 리더보드로 서로의 몰입을 가시화(휴식 시간 제외, 장시간 휴식 자동 퇴장 등 규칙 설계)
- 이중 채널 — 하나의 Firebase 백엔드 위에 크롬 확장(MV3)과 웹을 함께 얹어, 사용자 맥락에 맞게 선택
Result
- 공유 달력 + 접속 시간 추적 + 랭킹을 한 서비스로 묶어 함께 목표를 향하는 공간 구현
- Firestore 실시간 동기화·인증·권한(방장 강퇴·위임·삭제)까지 갖춘 운영 가능한 서비스 완성
- Chrome 웹스토어 출시 + 웹(tatispa.com) 이중 제공
- 기획 → 실시간 데이터 모델 → 구현 → 배포를 혼자 완주한 풀스택 개인 프로젝트
Retrospective
혼자서 끝까지 — 기획부터 실시간 데이터 모델 설계, 크롬 확장·웹 배포까지 개인 프로젝트로 완주하며 풀스택 실행력을 스스로 검증했다.
실시간·협업의 난도 — 여러 멤버의 동시 편집과 상태(참여/휴식) 동기화를 Firestore 구독으로 풀며, 실시간 협업 UX의 엣지 케이스와 데이터 모델 설계를 경험했다.
"함께"가 동기를 만든다 — 같은 공간에 모여 서로의 집중을 확인하는 구조가 목표 달성의 동기가 된다는 가설을, 직접 제품으로 구현해 검증했다.