포트폴리오로 돌아가기

서울렛 (Seoullette)

서울렛은 서울 지역 모임에서 장소 선택의 고민을 해결하기 위한 웹 기반 룰렛 애플리케이션입니다.

Next.jsReactTypeScriptTailwind CSS
라이브 사이트GitHub
서울렛 (Seoullette)

서울렛 (Seoullette)

목적

“서울 모임 장소, 룰렛으로 30초 만에 결정!” 장소 선택으로 생기는 의견 충돌과 시간-낭비를 게임화된 룰렛으로 해결합니다.

1. 구조 & 아키텍처

  • 프런트 단일 앱: Next.js (App Router) + TypeScript

    → 정적 배포만으로 동작, 서버·DB 필요 없음

  • 데이터 보관: 브라우저 LocalStorage

    → 새로고침·재방문 시 후보 목록 자동 복원

  • 모듈 분리
    • components/ UI - lib/roulette-engine.ts 비즈니스 로직
    • hooks/useRoulette.ts 상태 관리

2. 핵심 기능

기능
설명
장소 입력
최소 2 ~ 최대 10 개, 중복·빈값 실시간 검증
룰렛 생성/회전
후보 수만큼 컬러 섹션 자동 생성, CSS 애니메이션 60 fps
무작위 선택
Math.random + 공정성 테스트(시뮬레이션)
결과 모달
축하 메시지·콘페티 연출, “다시 돌리기” & “확인”
데이터 영속
LocalStorage 저장/복원, “전체 삭제” 지원

3. 개발 방식 (Cursor AI + Rules)

  1. Cursor Rules 작성 → PRD, UI/아키텍처 원칙, 코딩 스타일 명문화
  2. Rules 기반 Task 리스트(T001~T015)로 세분화 → “작업 → 즉시 테스트 → 통합” 반복
  3. AI가 규칙 위반·린트·리팩토링 제안 → 품질과 일관성 확보

4. 디자인 & UX 포인트

  • 2 컬럼 레이아웃: 입력(좌) ↔ 룰렛(우) ― 모바일에선 세로 스택
  • 게임화된 피드백: 이모지·애니메이션·무작위 축하 멘트로 몰입감 강화
  • 접근성 고려: 명도 대비 팔레트, aria-label, prefers-reduced-motion 대응
  • 키보드 지원: Enter/Space로 스핀, Tab 탐색 순서 최적화

5. 기술 스택 & 툴

  • Next.js 15 / React 19 / TypeScript 5
  • Tailwind CSS (유틸리티-퍼스트, 반응형·다크모드)
  • pnpm + ESLint + Prettier → CI에서 타입·빌드 오류 차단
  • Vercel 정적 호스팅 → 초기 로딩 < 3 초