# 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) 정의 및 핵심 엔진 로직 설계.