docs(10_Wiki): 위키 구조 정리 — 언어 튜토리얼 카테고리 폴더 제거 + 신규 자산 동기화

Topic_CSS/Topic_HTML/Topic_JavaScript/Topic_Prompt/Topic_Comfyui 등 기존 카테고리 폴더를 정리하고, Topic_Graphic/Dev 등 신규 산출물과 Topics 내부 세션/메모리 기록을 동기화.
2026-07-05 00:10:59 +09:00
parent a397bc4720
commit 1cfd3bbb56
1495 changed files with 68534 additions and 27 deletions
@@ -0,0 +1,12 @@
+# Brief — 2026-06-16T04-39-21
+
+## User Prompt
+react 기반으로 테트리스 게임을 만들고 싶어. 대상은 30대 남성이고. 어덯게 개발하면 좋을지 기획문서 작성해줘.
+
+## Summary
+[Pipeline: 기획서까지만 (검수 사이클)] react 기반으로 테트리스 게임을 만들고 싶어. 대상은 30대 남성이고. 어덯게 개발하면 좋을지 기획문서 작성해줘.
+
+## Dispatched Tasks
+1. **[직군:researcher]** — 시장 조사
+2. **[직군:planner]** — 방향성 정의
+3. **[직군:planner]** — 기획문서
@@ -0,0 +1,14 @@
+# Report — 2026-06-16T04-39-21
+
+## ✅ 완료된 작업
+- **유진**: **"사례 1: Tetris.com (Official Web Version)"** 등 3가지 유사 사례를 분석하고, 30대 남성의 페르소나를 바탕으로 '성취 지향성'과 '세련된 UX'가 필요함을 도출함.
+- **도윤**: **"시나리오 1: 업무 중 짧은 리프레시 (Desktop)"** 등 3가지 구체적인 사용자 시나리오를 작성하고, **"콤보 시스템"**과 **"다크 모드 테마"**를 핵심 차별화 요소로 정의함.
+
+## 🚀 다음 액션 (Top 3)
+1. **도윤** — 도출된 핵심 기능(콤보 시스템, Ghost Piece 등)을 바탕으로 **상세한 데이터 모델(State Structure) 정의** 및 **게임 로직의 의사 코드(Pseudocode) 작성**.
+2. **유진** — 도출된 수익화 모델 중, 1인 기업으로서 **가장 현실적이고 구현 난이도가 낮은 수익 모델(예: 광고 제외 기능)**을 최종 결정하고, 예상 수익 구조 명세화.
+3. **나 (CEO)** — **[전체 검토]** 도윤이 정의한 데이터 모델과 유진이 확정한 수익 모델을 통합하여, 최종 개발 범위(Scope)와 추정 개발 공수(Effort Estimate) 산정.
+
+## 💡 인사이트
+- 시장은 단순 구현보다 **'세련된 경험(UX/UI)'**에 대한 요구가 높으며, 30대 남성 타겟은 **'정량적 성취(콤보, 랭킹)'**를 통해 만족감을 느낄 것으로 예측됨.
+- 기획이 구체화되었으므로, 다음 단계는 추상적 기능 정의를 넘어, **실제 코드로 구현 가능한 데이터 구조(State)** 정의가 최우선 과제임.
@@ -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) 정의 및 핵심 엔진 로직 설계.
@@ -0,0 +1,79 @@
+# researcher — 2026-06-16T04-39-21
+**Task:** 사용자 요청: react 기반으로 테트리스 게임을 만들고 싶어. 대상은 30대 남성이고. 어덯게 개발하면 좋을지 기획문서 작성해줘.
+
+이 요청 맥락에서 *시장 측면*을 조사하세요. 추측 금지, 데이터/사례 기반.
+- 비슷한 시도가 이미 있나 (3개 이상)
+- 시장 크기·고객 페르소나
+- 가격대·수익화 패턴
+결과는 "출처(또는 일반론임을 명시)" 표시.
+**Duration:** 81.3s
+---
+<|channel>thought
+<channel|>## [시장 조사 보고서] React 기반 테트리스 게임 개발 및 타겟 분석
+
+**분석 목적**: React 기반 테트리스 게임 개발의 시장성 및 사용자 수용성을 확인하기 위한 사전 시장 조사.
+**분석 대상**: 30대 남성 타겟의 캐주얼 퍼즐 게임 시장.
+
+---
+
+### 1. 유사 사례 분석 (Benchmark)
+테트리스는 고전 게임으로, 이미 다양한 플랫폼에서 검증된 사례가 존재합니다. React 및 웹 기술 기반의 사례를 포함하여 3개를 선정했습니다.
+
+*   **사례 1: Tetris.com (Official Web Version)**
+    *   **특징**: 공식 웹 플랫폼으로, HTML5 Canvas를 활용해 브라우저에서 즉각적인 플레이 경험 제공.
+    *   **시사점**: 웹 환경에서의 접근성(Zero-install)이 여전히 강력한 핵심 가치임을 증명.
+*   **사례 2: Open Source Tetris Clones (GitHub, Itch.io)**
+    *   **특징**: React, Vue, Unity를 활용한 수많은 오픈소스 및 인디 게임 존재.
+    *   **시사점**: 개발 난이도가 낮아 공급이 과잉된 상태임. 따라서 '단순 기능 구현' 이상의 **UX 차별화(UI/UX, 테마, 사운드)**가 필수적임.
+*   **사례 3: Mobile Puzzle Games (Candy Crush, Royal Match 등 - 장르적 유사성)**
+    *   **특징**: 퍼즐 게임의 수익 모델로 '스테이지 기반 구조'와 '수집 요소'를 결합.
+    *   **시사점**: 단순 점수 경쟁보다는 목표 지향적(Level-up) 구조가 유저 리텐션에 유리함.
+
+*(출처: 일반적인 게임 시장 트렌드 및 웹 게임 플랫폼 분석 기반)*
+
+---
+
+### 2. 시장 크기 및 고객 페르소나
+**[시장 크기]**
+*   **캐주얼 게임 시장**: 전 세계 모바일/웹 캐주얼 게임 시장은 매년 수십억 달러 규모로 성장 중. 특히 '하이퍼 캐주얼(Hyper-casual)' 영역은 낮은 진입장벽으로 인해 지속적인 트래픽이 발생함.
+*   **웹 기반 게임**: 설치가 필요 없는 웹 게임은 업무 중 틈새 시간(Micro-break)을 활용하는 직장인 층에서 높은 점유율을 보임.
+
+**[고객 페르소나: 30대 남성]**
+*   **핵심 특징**: 
+    *   **시간적 제약**: 업무와 일상으로 인해 긴 플레이 타임보다는 5~10분 내외의 짧고 강렬한 몰입을 선호.
+    *   **성취 지향성**: 단순 반복보다는 기록 갱신, 콤보 달성 등 정량적 성취를 확인하고 싶어 함.
+    *   **심리적 기제**: 스트레스 해소 및 '뇌를 비우는(Brain-off)' 경험을 위해 익숙한 고전 게임을 찾는 경향이 강함.
+*   **UX 요구사항**: 직관적인 컨트롤, 세련된 다크 모드 UI, 경쟁심을 자극하는 랭킹 시스템.
+
+*(출처: 일반적인 게임 산업 타겟 분석 및 사용자 행동 패턴 기반)*
+
+---
+
+### 3. 가격대 및 수익화 패턴
+테트리스와 같은 퍼즐 게임의 일반적인 수익화 모델은 다음과 같습니다.
+
+*   **수익 모델 1: 광고 기반 (Ad-supported)**
+    *   **방식**: 게임 종료 시 보상형 광고(Reward Video) 또는 하단 배너 광고.
+    *   **적합성**: 무료 배포를 목표로 할 때 가장 일반적임.
+*   **수익 모델 2: 인앱 결제 (IAP)**
+    *   **방식**: 스킨(테마), 특수 아이템(블록 제거권), 광고 제거 기능 판매.
+    *   **적합성**: 충성도가 높은 유저층 확보 시 유리.
+*   **수익 모델 3: B2B / 프로모션**
+    *   **방식**: 특정 브랜드와 협업하여 브랜드 컬러/아이템을 적용한 한정판 테트리스 제공.
+    *   **적합성**: 1인 기업으로서 마케팅 협업 시 고려 가능한 모델.
+
+*(출처: 모바일/웹 캐주얼 게임 일반 수익 구조 기반)*
+
+---
+
+### 4. 시니어 리서처의 해석 및 권고
+**[해석]**
+단순히 "React로 테트리스를 만든다"는 것은 이미 레드오션인 시장에 진입하는 것과 같습니다. 30대 남성을 타겟으로 할 경우, **'생산성 도구와의 결합'**이나 **'고급스러운 미니멀리즘 UI'** 같은 차별화 포인트가 필요합니다.
+
+**[권고 (3안)]**
+1.  **[포트폴리오형]** 고도화된 애니메이션(Framer Motion)과 완벽한 반응형 UI를 적용한 '가장 세련된 웹 테트리스'. (디자인 역량 강조)
+2.  **[게이미피케이션형]** 랭킹 시스템 및 콤보 시스템을 강화하여 친구들과 경쟁할 수 있는 '실시간 기록 경쟁형 테트리스'. (기술적 완성도 강조)
+3.  **[생산성 결합형]** AstraAI 프로젝트 맥락을 활용하여, 특정 작업 완료 시 보상으로 플레이할 수 있는 '업무 보상형 테트리스'. (사용자 맥락 활용)
+
+📊 **평가**: 시장 분석을 통해 단순 구현보다 '타겟 맞춤형 UX'와 '차별화된 UI'가 핵심임을 도출함.
+📝 **다음**: 선택한 권고안에 맞춰 구체적인 기능 명세(Feature List) 및 기술 스택 확정.