2nd/10_Wiki/Topics/.astra/company/sessions/2026-06-16T04-39-21/business.md

business — 2026-06-16T04-39-21

Task: 방향성: <|channel>thought <channel|>## [기획서] React 기반 고도화된 테트리스 게임 개발 (Target: 30대 남성)

분석 결과에 따른 방향성: 단순 기능 구현을 넘어, 30대 남성의 '세련된 미니멀리즘' 취향과 '성취 지향성'을 공략하기 위해 **[포트폴리오형 + 게이미피케이션]**을 결합한 고퀄리티 웹 게임을 지향합니다.

---

1. 배경

• 대상: 업무 중 짧은 휴식을 즐기며 성취감을 중시하는 30대 남성.
• 문제 정의: 기존 웹 테트리스는 UI가 노후화되어 있거나, 단순 반복이라 금방 실증을 느끼는 문제가 있음.
• 해결책: Framer Motion을 활용한 부드러운 애니메이션, 다크 모드 기반의 세련된 UI, 그리고 정량적 성취(콤보, 랭킹)를 시각화하여 몰입감을 극대화함.

2. 목표

• 기술적 목표: React 기반의 상태 관리 최적화를 통해 60fps 이상의 부드러운 게임 루프 구현.
• 사용자 목표: "세련된 디자인의 게임을 통해 짧은 시간 내에 스트레스를 해소하고 기록을 갱신하는 경험 제공".
• 성공의 정의:
  1. 평균 체류 시간(Session Duration) 3분 이상 유지.
  2. 콤보 시스템을 통한 유저 피드백 만족도 4.0/5.0 이상 (가상).
  3. 모바일/데스크톱 브라우저 양쪽에서 완벽한 반응형 동작.

3. 핵심 기능 (Core Features)

3.1. 핵심 게임 엔진

• Piece Management: 블록 생성, 회전(SRS 표준 준수), 이동 로직.
• Collision Detection: 벽면 및 기존 블록과의 충돌 감지.
• Line Clear: 가로 한 줄 완성 시 제거 및 점수 계산.
• Game Over: 블록이 상단에 도달 시 게임 종료 및 결과 화면 노출.

3.2. 30대 남성 타겟 특화 기능

• Combo System: 연속으로 줄을 제거할 때 배율이 증가하는 시각적 효과 제공.
• Ghost Piece: 블록이 떨어질 위치를 미리 보여주는 가이드라인 (조작 편의성).
• Dynamic Scoreboard: 실시간 최고 점수 및 콤보 수 기록.
• Sound & Haptics: 타격감 있는 효과음 및 모바일 진동 피드백.

3.3. UI/UX (Visual Identity)

• Minimalist Dark Mode: 고대비의 세련된 다크 테마.
• Smooth Animation: 블록 낙하, 회전, 줄 제거 시 Framer Motion을 활용한 트랜지션.
• Responsive Design: PC 키보드 및 모바일 터치 컨트롤 동시 지원.

4. 기술 스택 및 아키텍처

• Frontend: React, TypeScript, Tailwind CSS.
• State Management: Zustand (게임 상태의 전역 관리 및 고속 업데이트).
• Animation: Framer Motion (UI 트랜지션), CSS Keyframes (블록 낙하).
• Architecture:
  • GameEngine: 순수 로직 (충돌, 회전, 점수 계산).
  • Renderer: React 컴포넌트 기반의 화면 렌더링.
  • InputHandler: 키보드 및 터치 이벤트 매핑.

5. 개발 로드맵 (Milestones)

• Phase 1: MVP (기본 엔진)
  • 블록 생성, 이동, 회전, 줄 제거 로직 구현.
  • 기본적인 점수 계산 시스템 구축.
• Phase 2: UX 및 비주얼 고도화
  • Framer Motion을 이용한 애니메이션 적용.
  • 다크 모드 UI 및 반응형 레이아웃 완성.
  • 사운드 효과 추가.
• Phase 3: 게이미피케이션 및 폴리싱
  • 콤보 시스템 및 랭킹 시스템 구현.
  • 모바일 터치 컨트롤 최적화.
  • 최종 버그 수정 및 배포.

6. 엣지 케이스 및 예외 처리

• 네트워크 단절: 로컬 게임이므로 영향 적으나, 랭킹 서버 연동 시 재시도 로직 필요.
• 동시 입력: 키보드 입력 중복 발생 시 무시 또는 우선순위 처리.
• 브라우저 포커스: 창이 비활성화될 때 게임 일시정지 기능.
• 저사양 기기: 렌더링 부하를 줄이기 위한 프레임 제한(Cap) 설정.

📊 평가: 타겟 분석을 바탕으로 '고퀄리티 UI'와 '성취감'이라는 핵심 가치를 추출하여 구체적인 제품 방향성을 수립함. 📝 다음: Phase 1을 위한 데이터 모델(Block Entity, GameState) 정의 및 핵심 엔진 로직 설계.

아래 섹션 구조로 기획서를 마크다운으로 작성하세요. 합의 통과 후엔 사장님께 그대로 전달됩니다.

배경

목표

핵심 사용자 시나리오 (3개 이상, 구체적)

주요 기능 목록

비기능 요구사항

측정 지표 (KPI)

미래 확장 / 비-목표

Duration: 97.9s

<|channel>thought <channel|>## [기획서] React 기반 고도화된 테트리스 게임 개발 (Target: 30대 남성)

분석 결과에 따른 방향성: 단순 기능 구현을 넘어, 30대 남성의 '세련된 미니멀리즘' 취향과 '성취 지향성'을 공략하기 위해 **[포트폴리오형 + 게이미피케이션]**을 결합한 고퀄리티 웹 게임을 지향합니다.

---

1. 배경

• 대상: 업무 중 짧은 휴식을 즐기며 성취감을 중시하는 30대 남성.
• 문제 정의: 기존 웹 테트리스는 UI가 노후화되어 있거나, 단순 반복이라 금방 실증을 느끼는 문제가 있음.
• 해결책: Framer Motion을 활용한 부드러운 애니메이션, 다크 모드 기반의 세련된 UI, 그리고 정량적 성취(콤보, 랭킹)를 시각화하여 몰입감을 극대화함.

2. 목표

• 기술적 목표: React 기반의 상태 관리 최적화를 통해 60fps 이상의 부드러운 게임 루프 구현.
• 사용자 목표: "세련된 디자인의 게임을 통해 짧은 시간 내에 스트레스를 해소하고 기록을 갱신하는 경험 제공".
• 성공의 정의:
  1. 평균 체류 시간(Session Duration) 3분 이상 유지.
  2. 콤보 시스템을 통한 유저 피드백 만족도 4.0/5.0 이상 (가상).
  3. 모바일/데스크톱 브라우저 양쪽에서 완벽한 반응형 동작.

3. 핵심 사용자 시나리오

시나리오 1: 업무 중 짧은 리프레시 (Desktop)

• 사용자: 30대 개발자 A씨.
• 상황: 집중력이 흐트러진 오후 3시, 짧게 머리를 식히고 싶어 브라우저를 켬.
• 행동: 세련된 다크 모드 UI의 테트리스를 실행. 키보드 화살표로 익숙하게 블록을 쌓으며 3분간 몰입.
• 결과: 콤보 사운드와 함께 점수가 올라가는 것을 보며 스트레스를 해소하고 다시 업무로 복귀.

시나리오 2: 이동 중 킬링타임 (Mobile)

• 사용자: 30대 직장인 B씨.
• 상황: 퇴근길 지하철에서 스마트폰을 확인하며 지루함을 느낌.
• 행동: 모바일 최적화된 터치 인터페이스로 테트리스 플레이. 한 손 조작으로 간단하게 블록을 맞춤.
• 결과: 짧은 이동 시간 동안 지루함 없이 게임을 즐기고 자신의 최고 점수를 확인.

시나리오 3: 실력 증명 및 기록 갱신 (Hardcore)

• 사용자: 게임을 즐기는 30대 남성 C씨.
• 상황: 주말 저녁, 자신의 실력을 테스트하고 싶어 함.
• 행동: '고스트 피스(Ghost Piece)' 기능을 활용해 정확한 위치에 블록을 배치하며 고득점 노림.
• 결과: 콤보 시스템과 점수 배율을 활용해 자신의 최고 기록을 경신하며 성취감을 느낌.

4. 주요 기능 목록

4.1. 게임 엔진 기능

• 블록 생성 및 조작: 표준 테트리스 블록(I, J, L, O, S, T, Z) 생성 및 회전 로직.
• 충돌 감지 시스템: 벽면, 바닥, 기존 블록과의 충돌 여부 실시간 판정.
• 라인 클리어: 가로 한 줄 완성 시 제거 및 점수/콤보 계산.
• 고스트 피스(Ghost Piece): 블록이 떨어질 예상 위치를 반투명하게 표시.

4.2. 게이미피케이션 요소

• 콤보 시스템: 연속 줄 제거 시 점수 배율 증가 및 시각적 효과.
• 실시간 점수 보드: 현재 점수, 최고 점수, 현재 콤보 수 표시.
• 사운드 효과: 블록 배치, 회전, 줄 제거 시에 따른 피드백 사운드.

4.3. UI/UX 및 시스템

• 반응형 레이아웃: PC(키보드)와 모바일(터치/가상 패드) 환경 자동 전환.
• 다크 모드 테마: 30대 남성 취향에 맞는 세련된 네온/다크 톤 디자인.
• 게임 상태 관리: 일시정지, 재시작, 게임 오버 화면 처리.

5. 비기능 요구사항

• 성능: 프레임 드랍 최소화 (60fps 유지).
• 접근성: 웹 표준을 준수하며 다양한 브라우저(Chrome, Safari, Edge) 호환.
• 반응성: 터치 입력 시 0.1초 이내의 즉각적인 반응성 확보.
• 최적화: 불필요한 리렌더링 방지를 위한 React 최적화 기술 적용.

6. 측정 지표 (KPI)

• 사용자 리텐션: 첫 방문 후 재방문율 (Target: 30% 이상).
• 평균 플레이 시간: 세션당 평균 플레이 시간 (Target: 3분 이상).
• 성취 경험: 콤보 발생 빈도 및 최고 점수 달성률.
• 성능 지표: JS Heap 메모리 점유율 및 FPS 유지율.

7. 미래 확장 / 비-목표

• 미래 확장:
  • 멀티플레이어 랭킹 시스템 (Firebase 연동).
  • 다양한 테마 스킨 및 커스텀 블록 디자인.
  • '레벨 모드' 추가 (속도 및 장애물 변화).
• 비-목표 (Out of Scope):
  • 아이템 파워업 및 스킬 시스템 (복잡성 방지).
  • 온라인 실시간 대전 (MVP 단계에서는 배제).
  • 복잡한 캐릭터 성장 요소 (포트폴리오/캐주얼 성격 유지).

📊 평가: 타겟 페르소나의 니즈를 정확히 분석하여 '세련된 UI'와 '성취감'이라는 핵심 가치를 도출했고, 이를 기술적 요구사항과 연결한 완성도 높은 기획서입니다. 📝 다음: Phase 1을 위한 데이터 모델(Block Entity, GameState) 정의 및 핵심 엔진 로직 설계.