docs: 자루 속 공 비율 섹션을 인터랙티브 단일 페이지로 통합, 모니터 스크린/크롬 기준 컴포넌트 배치 상세화
This commit is contained in:
parent
64b93e17bd
commit
adc3fe2b80
@ -4,7 +4,7 @@
|
||||
**발표자**: 김종태
|
||||
**참가자**: 강일신, 곽서현, 김하영, 홍태주, 문유리, 문정현, 김종태 (7명)
|
||||
**발표 시간**: 30분
|
||||
**페이지 수**: 20페이지 (타이틀 포함)
|
||||
**페이지 수**: 8페이지 (타이틀 포함, 인터랙티브 섹션 포함)
|
||||
|
||||
## 발표 목적
|
||||
|
||||
@ -12,21 +12,26 @@
|
||||
|
||||
## 발표 구조
|
||||
|
||||
### 1. 퀴즈 섹션 (3-4페이지)
|
||||
### 1. 퀴즈 섹션 (페이지 2, 인터랙티브 단일 페이지)
|
||||
- 자루 속 흰공/검은공 비율 추정
|
||||
- 7명이 각자 초기 확률 입력
|
||||
- 공을 하나씩 꺼내며 베이지안 업데이트 (5회)
|
||||
- 실제 비율 공개
|
||||
- 섹션 1: 7명이 각자 초기 확률 입력
|
||||
- 섹션 2: 공을 하나씩 꺼내며 베이지안 업데이트 (5회, 동적 표시)
|
||||
- 섹션 3: 실제 비율 공개
|
||||
- 섹션별 표시/숨김 처리로 하나의 페이지에서 진행
|
||||
|
||||
### 2. 스타트업 IR 평가 섹션 (8-12페이지)
|
||||
- 실제 IR Deck 선택
|
||||
- 단계별 정보 공개 (대표자 프로필, 사업 규모, BM, 시장 규모, 매출액)
|
||||
### 2. 스타트업 IR 평가 섹션 (페이지 3, 인터랙티브 단일 페이지)
|
||||
- 섹션 1: 실제 IR Deck 선택
|
||||
- 섹션 2: 단계별 정보 공개 (대표자 프로필, 사업 규모, BM, 시장 규모, 매출액)
|
||||
- 각 정보 공개 후 7명이 성공 확률 업데이트
|
||||
- 섹션 3: 최종 평가 비교
|
||||
- 실시간 확률 분포 그래프
|
||||
- 섹션별 표시/숨김 처리로 하나의 페이지에서 진행
|
||||
|
||||
### 3. 로빙 소개 및 마무리 (3-4페이지)
|
||||
- 로빙이 이렇게 평가합니다
|
||||
- 슬랙 시연 (IR 콜드메일 → 분석 → Slack Lists 등록)
|
||||
### 3. 로빙 소개 및 마무리 (페이지 4-7)
|
||||
- 페이지 4: 로빙이 이렇게 평가합니다
|
||||
- 페이지 5: 로빙의 평가 과정
|
||||
- 페이지 6: Slack Lists 자동 등록
|
||||
- 페이지 7: 마무리
|
||||
|
||||
## 디자인 요구사항
|
||||
|
||||
@ -46,12 +51,25 @@
|
||||
- 로빙 브랜드 포인트는 파란색 계열로 강조
|
||||
- 산세리프 폰트 사용 (가독성)
|
||||
|
||||
## 화면 구성 요구사항
|
||||
|
||||
### 디스플레이 환경
|
||||
- 모니터 스크린: 1920x1080 기준 (일반적인 발표 환경)
|
||||
- 브라우저: Chrome (크롬)
|
||||
- 전체 레이아웃: 상단 제목 영역(10%), 중앙 콘텐츠 영역(80%), 하단 버튼 영역(10%)
|
||||
|
||||
### 인터랙티브 요소
|
||||
- 섹션별 표시/숨김 처리 (단일 페이지 내에서 상태 관리)
|
||||
- 실시간 그래프 업데이트 (Chart.js 또는 Recharts)
|
||||
- 애니메이션 효과 (공 꺼내기, 섹션 전환)
|
||||
- 입력 필드 실시간 검증 및 피드백
|
||||
|
||||
## 기술 요구사항
|
||||
|
||||
- 반응형 인터랙티브 웹페이지 (프론트엔드 + 백엔드)
|
||||
- 실시간 그래프 (Chart.js 또는 Recharts)
|
||||
- 베이지안 계산 로직
|
||||
- 슬라이드 네비게이션
|
||||
- 상태 관리 (섹션 표시/숨김, 입력 데이터)
|
||||
- 7명 입력 필드 및 결과 저장
|
||||
|
||||
## 구현 예정
|
||||
|
||||
@ -16,41 +16,52 @@
|
||||
- 로빙 아이콘/로고를 미묘하게 배치 (흰색 또는 파란색 포인트)
|
||||
- "시작하기" 버튼 또는 자동으로 다음 페이지로 전환
|
||||
|
||||
### 1. 퀴즈: 자루 속 공의 비율 (3-4페이지)
|
||||
### 1. 퀴즈: 자루 속 공의 비율 (1페이지, 섹션별 표시/숨김)
|
||||
|
||||
**페이지 2**: "자루 속 공의 비율은?"
|
||||
**페이지 2**: "자루 속 공의 비율은?" (인터랙티브 단일 페이지)
|
||||
|
||||
**레이아웃**:
|
||||
- 상단: "자루 속 공의 비율은?" 제목 (큰 폰트, 중앙 정렬)
|
||||
- 중앙: 자루 일러스트 (선택, 왼쪽 또는 중앙)
|
||||
- 하단: 7개 입력 카드 (2x4 그리드 또는 세로 리스트)
|
||||
- 최하단: "다음" 버튼 (비활성화 상태, 모두 입력 시 활성화)
|
||||
**화면 구성** (모니터 스크린 1920x1080 기준, 크롬 브라우저):
|
||||
- 전체 레이아웃: 상단 제목 영역(10%), 중앙 콘텐츠 영역(80%), 하단 버튼 영역(10%)
|
||||
|
||||
**입력 카드 구성** (각 카드):
|
||||
- 왼쪽: 이름 입력 필드 (텍스트)
|
||||
- 오른쪽: 확률 입력 (슬라이더 + 숫자 표시)
|
||||
**섹션 1: 초기 확률 입력** (기본 표시)
|
||||
- 상단: "자루 속 공의 비율은?" 제목 (큰 폰트, 중앙 정렬, 상단 고정)
|
||||
- 좌측 상단: 자루 일러스트 (400x400px, 선택)
|
||||
- 우측: 7개 입력 카드 (세로 리스트, 각 카드 80px 높이)
|
||||
- 각 카드: 이름 입력 필드(왼쪽 200px) + 확률 슬라이더(오른쪽, 0-100%)
|
||||
- 입력 완료 시 체크 아이콘 표시
|
||||
- 하단 중앙: "다음" 버튼 (비활성화 상태, 모두 입력 시 활성화, 보라색 배경)
|
||||
|
||||
**섹션 2: 공 꺼내기** (입력 완료 후 표시, 섹션 1 숨김)
|
||||
- 상단: "공을 꺼냅니다..." 제목
|
||||
- 좌측: 공 꺼내기 영역 (600px 너비)
|
||||
- 자루 이미지 + 꺼낸 공 표시 (애니메이션)
|
||||
- 꺼낸 공 색상 표시 (흰색/검은색 원형 아이콘)
|
||||
- 회차 표시 (1/5, 2/5, ...)
|
||||
- 우측: 베이지안 업데이트 영역 (600px 너비)
|
||||
- 상단: 베이지안 공식 시각화 (사전확률 → 우도 → 사후확률)
|
||||
- 하단: 7명의 업데이트된 확률 실시간 그래프 (막대 그래프 또는 선 그래프)
|
||||
- 하단: "다음 공 꺼내기" 버튼 (5회 반복)
|
||||
|
||||
**섹션 3: 정답 공개** (5회 완료 후 표시, 섹션 2 숨김)
|
||||
- 상단: "정답 공개" 제목
|
||||
- 중앙: 비교 차트
|
||||
- 좌측: 실제 비율 표시 (원형 차트 또는 큰 숫자)
|
||||
- 우측: 7명의 최종 추정 vs 실제 비율 비교 (막대 그래프)
|
||||
- 하단: "다음" 버튼 (스타트업 IR 평가로 이동)
|
||||
|
||||
**디자인**:
|
||||
- 배경: 흰색 또는 밝은 회색
|
||||
- 카드: 흰색 배경, 그림자, 둥근 모서리
|
||||
- 슬라이더: 보라색(#5C00E6) 트랙, 파란색 핸들
|
||||
- 버튼: 모두 입력 완료 시 보라색 배경, 흰색 텍스트
|
||||
- 버튼: 활성화 시 보라색 배경, 흰색 텍스트
|
||||
- 그래프: 보라색 그라데이션
|
||||
|
||||
**페이지 3-7**: 공 꺼내기 (5회)
|
||||
- 각 회차마다 공 색상 표시 (애니메이션)
|
||||
- 7명의 업데이트된 확률을 실시간 그래프로 표시
|
||||
- 베이지안 공식 시각화 (사전확률 → 우도 → 사후확률)
|
||||
### 2. 스타트업 IR 평가 (페이지 3)
|
||||
|
||||
**페이지 8**: 정답 공개
|
||||
- 실제 비율 vs 7명의 최종 추정 비교 차트
|
||||
|
||||
### 2. 스타트업 IR 평가 (9-15페이지)
|
||||
|
||||
**페이지 9**: "이제 스타트업을 평가해봅시다"
|
||||
**페이지 3**: "이제 스타트업을 평가해봅시다"
|
||||
- 실제 IR Deck 선택 (예시 1-2개 준비)
|
||||
|
||||
**페이지 10-14**: IR 정보 단계별 공개
|
||||
**페이지 3 - 섹션 2**: IR 정보 단계별 공개 (섹션별 표시/숨김)
|
||||
- 각 페이지마다 하나의 정보 공개:
|
||||
- 대표자 프로필 (나이, 경력, 학력)
|
||||
- 사업 규모 (직원 수, 설립년도)
|
||||
@ -60,23 +71,23 @@
|
||||
- 각 정보 공개 후 7명이 성공 확률 업데이트
|
||||
- 실시간 확률 분포 그래프 업데이트
|
||||
|
||||
**페이지 15**: 최종 평가 비교
|
||||
**페이지 3 - 섹션 3**: 최종 평가 비교
|
||||
- 7명의 최종 확률 vs 로빙의 평가 점수/등급
|
||||
|
||||
### 3. 로빙 소개 및 마무리 (16-19페이지)
|
||||
### 3. 로빙 소개 및 마무리 (페이지 4-7)
|
||||
|
||||
**페이지 16**: "로빙은 이렇게 평가합니다"
|
||||
**페이지 4**: "로빙은 이렇게 평가합니다"
|
||||
- 슬랙 화면 캡처/시뮬레이션
|
||||
- IR 콜드메일 도착 → 로빙 분석 시작
|
||||
|
||||
**페이지 17**: 로빙의 평가 과정
|
||||
**페이지 5**: 로빙의 평가 과정
|
||||
- 평가 항목별 점수 표 (10가지 스토리)
|
||||
- 베이지안 업데이트 과정 시각화
|
||||
|
||||
**페이지 18**: Slack Lists 자동 등록
|
||||
**페이지 6**: Slack Lists 자동 등록
|
||||
- 구조화된 데이터 저장 화면
|
||||
|
||||
**페이지 19**: 마무리
|
||||
**페이지 7**: 마무리
|
||||
- "기억하고 성장하는 존재형 AI 에이전트"
|
||||
|
||||
## 인터랙티브 요소
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user