놀이터 NoriTer — v11 (파이프라인+에이전트 통합)

📋 놀이터 NoriTer — 화면 인터랙션 정의서 v2

모든 화면은 홈(단일 페이지) 위에 모달로 동작. 프로젝트 상세는 슬라이드 업 카드 모달 (아래에서 위로 올라옴)

📌 노란 박스 = 인터랙션 설명 | 노란 점선 = 클릭 가능 요소

🗺️ 전체 모달 구조

┌──────────────────────────── 홈 (항상 배경) ────────────────────────────┐
│                                                                      │
│  [게임 생성] ──→ 일반 모달 (가운데 팝업)                                 │
│  [내 프로젝트] ──→ 일반 모달 (가운데 팝업)                               │
│  [감사 로그] ──→ 일반 모달 (가운데 팝업)                                 │
│  [설정] ──→ 일반 모달 (가운데 팝업)                                      │
│  [플레이▶] ──→ 게임 iframe 모달 (가운데 팝업)                            │
│                                                                      │
│  프로젝트 카드 클릭 / 게임 생성 완료 ──→ 슬라이드 업 카드 모달             │
│  ┌────────────────────────────────────────────┐ ← 둥근 모서리          │
│  │  ──── (핸들 바)                              │ ← 상단 드래그 핸들      │
│  │  ← 돌아가기              [중단] [삭제]        │                       │
│  │                                            │                       │
│  │  뱀파이어 서바이벌  🔄 진행중                  │                       │
│  │  [✓]──[✓]──[✓]──[🔄]──[○]──[○]           │ ← 파이프라인            │
│  │                                            │                       │
│  │  [개요] [로그] [대화] [미리보기] [소스코드]     │ ← 탭 전환              │
│  │                                            │                       │
│  │  (탭 콘텐츠)                                 │                       │
│  │                                            │                       │
│  └────────────────────────────────────────────┘ ← 아래에서 슬라이드 업   │
└──────────────────────────────────────────────────────────────────────┘

🖱️ 인터랙션 요약 (모든 요소)

위치	요소	이벤트	동작	API
헤더	로고/[홈]	클릭	모든 모달 닫기 → 홈	—
헤더	[내 프로젝트]	일반 모달	프로젝트 목록 모달 팝업	API-PRJ-002
헤더	[감사 로그]	일반 모달	감사 로그 모달 팝업	API-LOG-003
헤더	[설정]	일반 모달	설정 모달 팝업	API-SET-001
헤더	🌙 토글	클릭	라이트↔다크 테마 전환	—
히어로	[🎮 30초 데모]	일반 모달	게임 생성 모달 (DEMO 뱃지 표시)	—
히어로	[👀 구경하기]	스크롤	플레이그라운드로 스무스 스크롤	—
파이프라인	자동 재생	뷰포트 진입	6단계 순차 애니메이션 자동 시작	—
파이프라인	에이전트 활성화	자동	아이콘 활성 + 채팅 버블 + 상세 패널 자동 열림	—
파이프라인	프로그레스 바	자동	진행에 따라 코랄 로딩 → 완료 시 QA 뒤 초록 전환	—
파이프라인	[게임 완성!] 카드	슬라이드 업	클릭 → 프로젝트 상세 모달 열기	API-PRJ-003
파이프라인	[↻ 다시 보기]	클릭	파이프라인 애니메이션 처음부터 재시작	—
파이프라인	[🎮 30초 데모]	일반 모달	게임 생성 모달 (DEMO 뱃지 표시)	—
생성 모달	장르 태그	클릭	단일 선택 (토글)	—
생성 모달	요구사항 입력	입력	실시간 글자수 카운트, 10자 이상 시 버튼 활성화	검증: NT-ERR-V001
생성 모달	[게임 생성 요청]	API 호출	모달 닫기 → 슬라이드 업 상세 모달 열기 → SSE 연결	API-PRJ-001
플레이그라운드	[플레이▶]	일반 모달	게임 iframe 팝업 (바로 플레이)	API-GAM-001
플레이그라운드	게임 카드 영역	슬라이드 업	프로젝트 상세 슬라이드 업 카드 모달	API-PRJ-003
플레이그라운드	빈 카드 (✨)	일반 모달	게임 생성 모달	—
목록 모달	프로젝트 카드	슬라이드 업	목록 닫기 → 슬라이드 업 상세 열기	API-PRJ-003
상세 모달	← 돌아가기	클릭	슬라이드 다운 닫기 → 홈 복귀, SSE 해제	—
상세 모달	[중단]	API 호출	확인 다이얼로그 → 상태 CANCELLED	API-PRJ-007
상세 모달	[삭제]	API 호출	확인 다이얼로그 → 삭제 → 슬라이드 닫기	API-PRJ-005
상세 > 개요	산출물 카드	클릭	산출물 JSON 내용 모달	로컬 데이터
상세 > 로그	레벨/에이전트 필터	클릭	로그 필터링	API-LOG-001
상세 > 로그	실시간 추가	SSE 수신	하단에 자동 추가 + 자동 스크롤	SSE: log
상세 > 대화	실시간 추가	SSE 수신	채팅 버블 실시간 추가	SSE: agent-msg
상세 > 미리보기	[📥 다운로드]	API 호출	ZIP 파일 다운로드	API-GAM-004
상세 > 미리보기	[수정 요청]	API 호출	상태 REVISION → 파이프라인 재실행	API-PRJ-006
상세 > 소스	파일 트리 클릭	API 호출	해당 파일 코드 뷰어에 표시	API-GAM-003
설정 모달	[유효성 검증]	API 호출	입력한 키 검증 → 유효/무효 결과	API-SET-003
설정 모달	[저장]	API 호출	API 키 암호화 저장	API-SET-002
공통	ESC 키	키보드	가장 위 모달/슬라이드 닫기	—
공통	오버레이 클릭	클릭	일반 모달 닫기 (슬라이드는 해당없음)	—

📡 SSE 실시간 이벤트 (프로젝트 상세 슬라이드 모달)

이벤트	UI 반영	대상
log	로그 탭 하단 실시간 추가 + 자동 스크롤	로그 탭
stage-update	파이프라인 아이콘 변경 + 진행률 갱신	파이프라인 + 프로그레스바
agent-msg	대화 탭 채팅 버블 실시간 추가	대화 탭
error	에러 토스트 + 로그 탭 에러 추가	토스트 + 로그 탭
complete	상태→COMPLETED, 미리보기 활성화, 완성 토스트	전체
cancelled	상태→CANCELLED, SSE 해제	전체

📱 모바일 대응 사양 (구현 시 참조)

항목	데스크톱 (≥769px)	모바일 (≤768px)	초소형 (≤380px)
네비게이션	상단 헤더 텍스트 메뉴	상단 로고만 + 하단 고정 아이콘 네비 (5개 탭)	좌동
히어로	h1 52px, 버튼 가로 배치	h1 28px, 버튼 세로 풀너비	h1 24px
에이전트 카드	6열 그리드	3열 그리드, 아이콘·폰트 축소	2열 그리드
게임 카드	auto-fill 280px 그리드	1열 풀너비, 썸네일 140px	좌동
일반 모달	가운데 팝업 (560/800px)	가운데 팝업 (100vw - 32px), 90vh	좌동
풀스크린 모달	슬라이드 업 카드 (100vh - 40px)	슬라이드 업 카드 (100vh - 20px)	좌동
모달 열기	일반: scale(0.92)→1 + fadeIn 0.4s / 풀스크린: translateY(100%)→0 스프링 0.7s
모달 닫기	일반: scale→0.92 + fadeOut 0.4s / 풀스크린: translateY→100% ease-in 0.45s + 오버레이 동기 페이드
모달 닫기 방법	ESC, 오버레이 클릭, 닫기 버튼	ESC, 닫기 버튼 + 핸들/헤더 드래그 디스미스 (150px 이상 끌면 닫힘)	좌동
탭 (상세 모달)	균등 분할 5개	수평 스크롤, flex-none, 12px	좌동
파이프라인 (상세)	dot 36px, label 11px	dot 30px, label 9px	dot 26px, label 8px
파이프라인 프리뷰	가로 6개 노드 + 프로그레스 바	세로 스택 (라인 숨김), 노드 가로 배치 (아이콘+이름+버블)	좌동
에이전트 상세 패널	가로 2열 (설명 \| 예시)	세로 1열 스택	좌동
데모 모드	30초 데모 버튼 → 생성 모달에 DEMO 뱃지 표시, 일반 생성과 동일 플로우 (더미 에이전트)
풀페이지 스냅	히어로 → 파이프라인 mandatory 스냅, 플레이그라운드 이후 자유 스크롤
소스코드	좌 파일트리 + 우 코드뷰어	상 파일트리(가로 스크롤) + 하 코드뷰어	좌동
개요 그리드	2열	1열 스택	좌동
필터 바	flex-wrap	가로 스크롤 (nowrap)	좌동
터치 인터랙션	—	탭 하이라이트 제거, iOS 모멘텀 스크롤, 드래그 디스미스	좌동
하단 여백	footer 기본 패딩	footer 하단 80px (하단 네비 고려)	좌동

시각	이벤트	프로젝트	상세
14:55	STAGE_COMPLETED	뱀파이어 서바이벌	QA 완료
14:30	PROJECT_CREATED	뱀파이어 서바이벌	장르: 액션
14:00	SETTING_CHANGED	—	API 키 변경됨

📋 놀이터 NoriTer — 화면 인터랙션 정의서 v2

🗺️ 전체 모달 구조

🖱️ 인터랙션 요약 (모든 요소)

📡 SSE 실시간 이벤트 (프로젝트 상세 슬라이드 모달)

📱 모바일 대응 사양 (구현 시 참조)

상상하면,게임이 돼요

상상하면,
게임이 돼요