docs(10_Wiki): 위키 구조 정리 — 언어 튜토리얼 카테고리 폴더 제거 + 신규 자산 동기화
Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고, Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.
This commit is contained in:
Antigravity Agent
@@ -0,0 +1,162 @@
|
||||
# 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) 정의 및 핵심 엔진 로직 설계.
|
||||
Reference in New Issue
Block a user