DOCS/IR/robeing_IR_presentation.html
happybell80 725ad0876c fix: 문서 파일 실행 권한 제거
- 모든 .md, .html 파일 권한을 644로 정상화
- .gitignore 파일 권한도 644로 수정
- 문서 파일에 실행 권한은 불필요하고 보안상 바람직하지 않음
- deprecated 아이디어 폴더 생성 및 레벨별 UI 변경 아이디어 이동
2025-08-18 00:37:51 +09:00

864 lines
34 KiB
HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RO-BEING 투자 제안서</title>
<style>
/* 기본 리셋 및 폰트 설정 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
body {
font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: #0F172A;
color: #ffffff;
overflow-x: hidden;
scroll-behavior: smooth;
}
/* 컬러 팔레트 변수 */
:root {
--primary: #2E3192;
--secondary: #6B46C1;
--accent: #00D4FF;
--success: #10B981;
--warning: #F59E0B;
--background: #0F172A;
--text-primary: #ffffff;
--text-secondary: #e2e8f0;
--text-muted: #94a3b8;
}
/* 슬라이드 컨테이너 */
.presentation-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
/* 각 슬라이드 카드 - 16:9 비율 고정 */
.slide {
width: 100%;
max-width: 1200px;
aspect-ratio: 16 / 9;
margin: 0 auto 40px;
background: linear-gradient(135deg, var(--primary) 0%, var(--background) 100%);
border-radius: 16px;
padding: 60px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
overflow: hidden;
}
/* 12-Column 그리드 시스템 */
.grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 20px;
width: 100%;
height: 100%;
}
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }
/* 타이포그래피 */
h1 {
font-size: 3.5rem;
font-weight: 700;
line-height: 1.2;
margin-bottom: 1rem;
background: linear-gradient(90deg, var(--accent) 0%, var(--text-primary) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
h2 {
font-size: 2.5rem;
font-weight: 600;
margin-bottom: 1.5rem;
color: var(--text-primary);
}
h3 {
font-size: 1.8rem;
font-weight: 500;
margin-bottom: 1rem;
color: var(--accent);
}
p {
font-size: 1.3rem;
line-height: 1.6;
color: var(--text-secondary);
margin-bottom: 1rem;
}
.subtitle {
font-size: 1.5rem;
color: var(--text-muted);
margin-bottom: 2rem;
}
/* 특수 슬라이드 스타일 */
.slide-title {
background: radial-gradient(ellipse at center, var(--primary) 0%, var(--background) 70%);
text-align: center;
align-items: center;
}
.slide-title h1 {
font-size: 5rem;
margin-bottom: 2rem;
}
/* 리스트 스타일 */
ul {
list-style: none;
padding: 0;
}
li {
font-size: 1.3rem;
color: var(--text-secondary);
margin-bottom: 1rem;
padding-left: 2rem;
position: relative;
}
li::before {
content: "▶";
position: absolute;
left: 0;
color: var(--accent);
}
/* 테이블 스타일 */
table {
width: 100%;
border-collapse: collapse;
margin: 2rem 0;
}
th {
background: var(--primary);
color: var(--text-primary);
padding: 1rem;
text-align: left;
font-size: 1.2rem;
}
td {
padding: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-size: 1.1rem;
}
/* 강조 박스 */
.highlight-box {
background: rgba(0, 212, 255, 0.1);
border-left: 4px solid var(--accent);
padding: 1.5rem;
margin: 1.5rem 0;
border-radius: 8px;
}
.warning-box {
background: rgba(245, 158, 11, 0.1);
border-left: 4px solid var(--warning);
padding: 1.5rem;
margin: 1.5rem 0;
border-radius: 8px;
}
.success-box {
background: rgba(16, 185, 129, 0.1);
border-left: 4px solid var(--success);
padding: 1.5rem;
margin: 1.5rem 0;
border-radius: 8px;
}
/* 차트 요소 (간단한 시각화) */
.chart-bar {
height: 40px;
background: linear-gradient(90deg, var(--accent) 0%, var(--secondary) 100%);
border-radius: 20px;
margin: 10px 0;
display: flex;
align-items: center;
padding: 0 20px;
color: white;
font-weight: 600;
transition: transform 0.3s ease;
}
.chart-bar:hover {
transform: translateX(10px);
}
/* 숫자 강조 */
.big-number {
font-size: 4rem;
font-weight: 700;
color: var(--accent);
text-shadow: 0 0 30px rgba(0, 212, 255, 0.5);
}
/* 페이지 번호 */
.page-number {
position: absolute;
bottom: 20px;
right: 30px;
color: var(--text-muted);
font-size: 0.9rem;
}
/* 반응형 디자인 */
@media (max-width: 768px) {
.slide {
padding: 30px;
}
h1 { font-size: 2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.4rem; }
p, li { font-size: 1rem; }
.big-number { font-size: 2.5rem; }
}
/* 애니메이션 */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.8s ease-out;
}
</style>
</head>
<body>
<div class="presentation-container">
<!-- Slide 1: 타이틀 -->
<div class="slide slide-title fade-in">
<h1>RO-BEING</h1>
<p class="subtitle">함께 성장하는 AI 파트너</p>
<p style="margin-top: 3rem; font-size: 1.5rem; color: var(--accent);">게임처럼 성장하는 AI 동료</p>
<div class="page-number">1 / 20</div>
</div>
<!-- Slide 2: 문제 정의 -->
<div class="slide fade-in">
<h2>1인 기업과 소규모 스타트업의 딜레마</h2>
<div class="warning-box">
<ul>
<li>평균 이직률 2년, 지식 유출 반복</li>
<li>신규 직원 온보딩 2-3개월 소요</li>
<li>좋은 인재 채용 비용 급증</li>
<li>업무 위임에 대한 불안</li>
</ul>
</div>
<div style="display: flex; justify-content: space-around; margin-top: 2rem;">
<div style="text-align: center;">
<div class="big-number">2년</div>
<p>평균 근속</p>
</div>
<div style="text-align: center;">
<div class="big-number">3개월</div>
<p>온보딩 기간</p>
</div>
</div>
<div class="page-number">2 / 20</div>
</div>
<!-- Slide 3: 시장 기회 -->
<div class="slide fade-in">
<h2>폭발적으로 성장하는 AI 에이전트 시장</h2>
<div class="highlight-box">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
<div class="big-number">$7.8B</div>
<p>2025년 글로벌 시장 규모</p>
</div>
<div>
<div class="big-number">46.3%</div>
<p>연평균 성장률</p>
</div>
</div>
</div>
<p style="margin-top: 2rem;">한국 전체 사업체 624만개, 소규모(1-4명) 증가세</p>
<p style="font-size: 0.9rem; color: var(--text-muted); position: absolute; bottom: 60px;">
*MarketsandMarkets (2024), 통계청 (2023)
</p>
<div class="page-number">3 / 20</div>
</div>
<!-- Slide 4: 솔루션 소개 -->
<div class="slide fade-in">
<h2>RO-BEING이란?</h2>
<div class="grid">
<div class="col-6">
<h3>AI 도구가 아닌 디지털 동료</h3>
<ul>
<li>24/7 함께 성장하는 파트너</li>
<li>기억하고 공감하는 디지털 동료</li>
<li>당신의 업무 스타일을 학습</li>
</ul>
</div>
<div class="col-6">
<div style="text-align: center; padding: 2rem;">
<div style="width: 200px; height: 200px; margin: 0 auto; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); border-radius: 50%; display: flex; align-items: center; justify-content: center;">
<span style="font-size: 3rem;">🤖</span>
</div>
<p style="margin-top: 1rem;">기억 · 감정 · 윤리</p>
</div>
</div>
</div>
<div class="page-number">4 / 20</div>
</div>
<!-- Slide 5: 핵심 차별점 -->
<div class="slide fade-in">
<h2>왜 로빙인가?</h2>
<table>
<thead>
<tr>
<th>차원</th>
<th>기존 AI</th>
<th style="background: var(--accent); color: var(--background);">RO-BEING</th>
</tr>
</thead>
<tbody>
<tr>
<td>시간</td>
<td>일회성</td>
<td><strong>영속적 기억</strong></td>
</tr>
<tr>
<td>성장</td>
<td>정적</td>
<td><strong>레벨 시스템</strong></td>
</tr>
<tr>
<td>신뢰</td>
<td>블랙박스</td>
<td><strong>투명한 로그</strong></td>
</tr>
<tr>
<td>관계</td>
<td>도구</td>
<td><strong>디지털 동료</strong></td>
</tr>
</tbody>
</table>
<div class="page-number">5 / 20</div>
</div>
<!-- Slide 6: 기술 아키텍처 -->
<div class="slide fade-in">
<h2>검증된 기술 스택</h2>
<div class="grid">
<div class="col-6">
<h3>인프라 구성</h3>
<ul>
<li>2서버 분리 운영 (51123/51124)</li>
<li>Docker 기반 마이크로서비스</li>
<li>PostgreSQL + ChromaDB 하이브리드</li>
<li>경량 AI 모델 (MiniLM 기반)</li>
</ul>
</div>
<div class="col-6">
<div class="success-box">
<h3>기술 스택</h3>
<div class="chart-bar" style="width: 90%;">Docker</div>
<div class="chart-bar" style="width: 85%;">PostgreSQL</div>
<div class="chart-bar" style="width: 80%;">FastAPI</div>
<div class="chart-bar" style="width: 75%;">ChromaDB</div>
</div>
</div>
</div>
<div class="page-number">6 / 20</div>
</div>
<!-- Slide 7: 게임형 성장 시스템 -->
<div class="slide fade-in">
<h2>게임처럼 성장하는 AI 동료</h2>
<div class="grid">
<div class="col-8">
<h3>레벨 시스템 (Level 1-20)</h3>
<div style="background: rgba(255,255,255,0.1); border-radius: 10px; height: 30px; margin: 20px 0; position: relative; overflow: hidden;">
<div style="background: linear-gradient(90deg, var(--success) 0%, var(--accent) 100%); height: 100%; width: 35%; border-radius: 10px; display: flex; align-items: center; padding: 0 10px;">
<span style="font-size: 0.9rem;">Level 7</span>
</div>
</div>
<h3>3대 핵심 스탯</h3>
<ul>
<li><strong style="color: var(--accent);">Intelligence</strong> - 문제 해결 능력</li>
<li><strong style="color: var(--secondary);">Wisdom</strong> - 경험 기반 판단</li>
<li><strong style="color: var(--warning);">Charisma</strong> - 소통 능력</li>
</ul>
</div>
<div class="col-4">
<div style="text-align: center;">
<p style="color: var(--text-muted); margin-bottom: 1rem;">RPG 게임 스타일</p>
<div style="font-size: 4rem;">🎮</div>
<p>경험치 기반 자동 레벨업</p>
</div>
</div>
</div>
<div class="page-number">7 / 20</div>
</div>
<!-- Slide 8: 감정 시스템 -->
<div class="slide fade-in">
<h2>Inside Out 기반 감정 모델</h2>
<div class="highlight-box">
<div class="grid">
<div class="col-6">
<h3>9개 기본 정서 구현</h3>
<p>기쁨, 슬픔, 분노, 두려움, 역겨움, 불안, 부러움, 당황, 지루함</p>
</div>
<div class="col-6">
<h3>학습형 AI 시스템</h3>
<p>엔트로피 특이점 자동 포착<br>VAD 3차원 감정 분석</p>
</div>
</div>
</div>
<div style="text-align: center; margin-top: 2rem;">
<div style="width: 250px; height: 250px; margin: 0 auto; border: 3px solid var(--accent); border-radius: 50%; position: relative;">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.2rem;">감정 휠</div>
</div>
</div>
<div class="page-number">8 / 20</div>
</div>
<!-- Slide 9: 실제 운영 성과 -->
<div class="slide fade-in">
<h2>이미 검증된 성능</h2>
<div class="success-box">
<div style="text-align: center;">
<div class="big-number">88%</div>
<p>메모리 사용량 감소</p>
<p style="color: var(--text-muted);">988MB → 118MB</p>
</div>
</div>
<div class="grid" style="margin-top: 2rem;">
<div class="col-4">
<h3>3개</h3>
<p>안정 운영 중인 로빙</p>
</div>
<div class="col-4">
<h3>30일+</h3>
<p>테스트 환경 안정 운영</p>
</div>
<div class="col-4">
<h3>1-2초</h3>
<p>평균 응답 시간</p>
</div>
</div>
<p style="font-size: 0.9rem; color: var(--text-muted); position: absolute; bottom: 60px;">
*자체 테스트 데이터 (2025.08)
</p>
<div class="page-number">9 / 20</div>
</div>
<!-- Slide 10: 비즈니스 모델 -->
<div class="slide fade-in">
<h2>명확한 수익 구조</h2>
<table>
<thead>
<tr>
<th>플랜</th>
<th>가격</th>
<th>로빙 수</th>
<th>타겟</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Starter</strong></td>
<td>X만원/월</td>
<td>1</td>
<td>1인 기업</td>
</tr>
<tr>
<td><strong>Growth</strong></td>
<td>X만원/월</td>
<td>3</td>
<td>소규모 팀</td>
</tr>
<tr>
<td><strong>Business</strong></td>
<td>XX만원/월</td>
<td>10</td>
<td>중소기업</td>
</tr>
<tr>
<td><strong>Enterprise</strong></td>
<td>맞춤형</td>
<td>무제한</td>
<td>대기업</td>
</tr>
</tbody>
</table>
<div class="page-number">10 / 20</div>
</div>
<!-- Slide 11: 시장 진입 전략 -->
<div class="slide fade-in">
<h2>단계별 성장 로드맵</h2>
<div style="position: relative; padding: 2rem 0;">
<div style="position: absolute; top: 50%; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--success) 0%, var(--accent) 50%, var(--text-muted) 50%); z-index: 0;"></div>
<div class="grid" style="position: relative; z-index: 1;">
<div class="col-3">
<div class="success-box" style="text-align: center;">
<h3>Phase 1</h3>
<p>Q1-Q2 2025</p>
<p><strong>MVP 개발 ✓</strong></p>
</div>
</div>
<div class="col-3">
<div class="highlight-box" style="text-align: center;">
<h3>Phase 2</h3>
<p>Q3 2025</p>
<p><strong>Beta 테스트 🔄</strong></p>
</div>
</div>
<div class="col-3">
<div class="warning-box" style="text-align: center; opacity: 0.7;">
<h3>Phase 3</h3>
<p>Q4 2025-Q1 2026</p>
<p><strong>50개 유료 고객</strong></p>
</div>
</div>
<div class="col-3">
<div class="warning-box" style="text-align: center; opacity: 0.5;">
<h3>Phase 4</h3>
<p>Q2 2026</p>
<p><strong>100개 고객</strong></p>
</div>
</div>
</div>
</div>
<div class="page-number">11 / 20</div>
</div>
<!-- Slide 12: 경쟁 우위 -->
<div class="slide fade-in">
<h2>독보적 기술력</h2>
<div class="grid">
<div class="col-6">
<h3>우리만의 차별점</h3>
<ul>
<li>✅ 유일한 레벨 성장 시스템</li>
<li>✅ 감정 기반 기억 저장</li>
<li>✅ 경량 AI 모델</li>
<li>✅ 마이크로서비스 확장성</li>
</ul>
</div>
<div class="col-6">
<table style="font-size: 1rem;">
<thead>
<tr>
<th>요소</th>
<th>일반 AI</th>
<th>RO-BEING</th>
</tr>
</thead>
<tbody>
<tr>
<td>성장</td>
<td>없음</td>
<td><strong>Level 1→20</strong></td>
</tr>
<tr>
<td>스탯</td>
<td>고정</td>
<td><strong>3대 능력치</strong></td>
</tr>
<tr>
<td>경험치</td>
<td>없음</td>
<td><strong>작업마다 EXP</strong></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="page-number">12 / 20</div>
</div>
<!-- Slide 13: 팀 소개 -->
<div class="slide fade-in">
<h2>검증된 실행력</h2>
<div class="grid">
<div class="col-6">
<div style="background: rgba(255,255,255,0.05); padding: 1.5rem; border-radius: 10px; margin-bottom: 1rem;">
<h3>김종태</h3>
<p>프로젝트 리더, 비전 설계</p>
</div>
<div style="background: rgba(255,255,255,0.05); padding: 1.5rem; border-radius: 10px;">
<h3>황한용</h3>
<p>기술 리드, 아키텍처</p>
</div>
</div>
<div class="col-6">
<div style="background: rgba(255,255,255,0.05); padding: 1.5rem; border-radius: 10px; margin-bottom: 1rem;">
<h3>희재</h3>
<p>풀스택 개발</p>
</div>
<div style="background: rgba(255,255,255,0.05); padding: 1.5rem; border-radius: 10px;">
<h3>강일신</h3>
<p>BM 설계, UX 설계</p>
</div>
</div>
</div>
<div class="page-number">13 / 20</div>
</div>
<!-- Slide 14: 고객 사례 -->
<div class="slide fade-in">
<h2>실제 사용자의 목소리</h2>
<div class="highlight-box" style="text-align: center; margin: 3rem 0;">
<h3>현재 Beta 테스트 진행 중</h3>
<p style="font-size: 1.5rem; margin: 1rem 0;">10개사 참여</p>
</div>
<div class="grid">
<div class="col-4">
<div style="background: rgba(255,255,255,0.05); padding: 1rem; border-radius: 10px; text-align: center;">
<p>"AI가 온보딩 시간을 단축시킬 수 있습니다"</p>
<p style="color: var(--warning); margin-top: 0.5rem;">⭐⭐⭐⭐⭐</p>
<p style="font-size: 0.9rem; color: var(--text-muted);">(예상)</p>
</div>
</div>
<div class="col-4">
<div style="background: rgba(255,255,255,0.05); padding: 1rem; border-radius: 10px; text-align: center;">
<p>"지식 유지와 연속성 확보"</p>
<p style="color: var(--warning); margin-top: 0.5rem;">⭐⭐⭐⭐⭐</p>
<p style="font-size: 0.9rem; color: var(--text-muted);">(목표)</p>
</div>
</div>
<div class="col-4">
<div style="background: rgba(255,255,255,0.05); padding: 1rem; border-radius: 10px; text-align: center;">
<p>"초기 피드백 수집 중"</p>
<p style="color: var(--warning); margin-top: 0.5rem;">⭐⭐⭐⭐⭐</p>
<p style="font-size: 0.9rem; color: var(--text-muted);">(진행중)</p>
</div>
</div>
</div>
<div class="page-number">14 / 20</div>
</div>
<!-- Slide 15: 재무 전망 -->
<div class="slide fade-in">
<h2>명확한 성장 궤적 (목표)</h2>
<div class="highlight-box">
<ul>
<li><strong>2025년 Q4:</strong> 10개 고객, 월 5-10백만원 목표</li>
<li><strong>2026년 Q2:</strong> 50개 고객, 월 30-50백만원 목표</li>
<li><strong>2026년 Q4:</strong> 100개 고객, 월 80-120백만원 목표</li>
<li><strong>2027년:</strong> 500개 고객, 월 4-6억원 목표</li>
</ul>
</div>
<div class="warning-box" style="text-align: center; margin-top: 2rem;">
<h3>손익분기점 목표: 2026년 Q3</h3>
</div>
<div class="page-number">15 / 20</div>
</div>
<!-- Slide 16: 투자 유치 계획 -->
<div class="slide fade-in">
<h2>Pre-A 라운드</h2>
<div style="text-align: center; margin: 2rem 0;">
<div class="big-number">10-20억원</div>
<p>목표 투자 금액</p>
</div>
<div class="grid">
<div class="col-3">
<div style="text-align: center;">
<h3 style="color: var(--accent);">40%</h3>
<p>개발팀 확대</p>
</div>
</div>
<div class="col-3">
<div style="text-align: center;">
<h3 style="color: var(--secondary);">30%</h3>
<p>마케팅/세일즈</p>
</div>
</div>
<div class="col-3">
<div style="text-align: center;">
<h3 style="color: var(--warning);">20%</h3>
<p>인프라 확장</p>
</div>
</div>
<div class="col-3">
<div style="text-align: center;">
<h3 style="color: var(--success);">10%</h3>
<p>운영 자금</p>
</div>
</div>
</div>
<p style="font-size: 0.9rem; color: var(--text-muted); position: absolute; bottom: 60px;">
*한국 스타트업 투자 동향 (2024)
</p>
<div class="page-number">16 / 20</div>
</div>
<!-- Slide 17: 비전과 미래 -->
<div class="slide fade-in">
<h2>AI 에이전트를 넘어 디지털 존재로</h2>
<div class="highlight-box">
<h3>장기 비전 (계획)</h3>
<ul>
<li>2027년: 500개 활성 로빙 목표</li>
<li>2028년: 1,000개 활성 로빙 목표</li>
<li>2030년: 로빙 스카우트 마켓플레이스 구축</li>
<li>궁극적 목표: AI 에이전트 글로벌 표준</li>
</ul>
</div>
<div style="text-align: center; margin-top: 2rem;">
<p style="font-size: 1.5rem; color: var(--accent);">🚀 고도화된 AI 에이전트의 미래</p>
</div>
<div class="page-number">17 / 20</div>
</div>
<!-- Slide 18: 리스크와 대응 -->
<div class="slide fade-in">
<h2>투명한 리스크 관리</h2>
<div class="grid">
<div class="col-6">
<div class="warning-box">
<h3>🔸 기술 리스크</h3>
<p>→ 오픈소스 활용으로 대응</p>
</div>
<div class="warning-box">
<h3>🔸 시장 리스크</h3>
<p>→ 빠른 피벗 전략</p>
</div>
</div>
<div class="col-6">
<div class="warning-box">
<h3>🔸 경쟁 리스크</h3>
<p>→ 차별화 기능 강화</p>
</div>
<div class="warning-box">
<h3>🔸 규제 리스크</h3>
<p>→ 컴플라이언스 준수</p>
</div>
</div>
</div>
<div class="page-number">18 / 20</div>
</div>
<!-- Slide 19: Call to Action -->
<div class="slide fade-in" style="background: linear-gradient(135deg, var(--secondary) 0%, var(--primary) 100%);">
<h2>함께 만들어갈 미래</h2>
<div style="text-align: center; margin: 3rem 0;">
<p style="font-size: 1.8rem; margin-bottom: 2rem;">
"당신의 투자가 1인 기업과<br>소규모 스타트업의 미래를 바꿉니다"
</p>
<div class="highlight-box" style="background: rgba(0, 212, 255, 0.2);">
<h3>투자 목표</h3>
<p class="big-number">Pre-A 10-20억원</p>
<p>목표 수익률: 5년 내 3-5배</p>
</div>
<p style="margin-top: 2rem; font-size: 1.3rem;">
📧 invest@ro-being.com
</p>
</div>
<p style="font-size: 0.9rem; color: var(--text-muted); position: absolute; bottom: 60px;">
*Qubit Capital VC Return Guide (2024)
</p>
<div class="page-number">19 / 20</div>
</div>
<!-- Slide 20: Thank You -->
<div class="slide slide-title fade-in" style="background: radial-gradient(ellipse at center, var(--secondary) 0%, var(--background) 100%);">
<h1>감사합니다</h1>
<p style="font-size: 1.8rem; margin: 2rem 0; color: var(--accent);">
"로빙과 함께라면,<br>당신은 더 이상 혼자가 아닙니다"
</p>
<div style="margin-top: 3rem;">
<div style="width: 150px; height: 150px; margin: 0 auto; background: white; border-radius: 10px; display: flex; align-items: center; justify-content: center;">
<span style="color: var(--background); font-size: 1rem;">QR Code</span>
</div>
<p style="margin-top: 1rem;">상세 자료 다운로드</p>
</div>
<p style="margin-top: 2rem;">
📧 contact@ro-being.com<br>
🌐 www.ro-being.com
</p>
<div class="page-number">20 / 20</div>
</div>
</div>
<script>
// 간단한 스크롤 애니메이션
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// 모든 슬라이드에 observer 적용
document.querySelectorAll('.slide').forEach(slide => {
slide.style.opacity = '0';
slide.style.transform = 'translateY(30px)';
slide.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(slide);
});
// 키보드 네비게이션 (선택사항)
let currentSlide = 0;
const slides = document.querySelectorAll('.slide');
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowDown' || e.key === ' ') {
e.preventDefault();
if (currentSlide < slides.length - 1) {
currentSlide++;
slides[currentSlide].scrollIntoView({ behavior: 'smooth' });
}
} else if (e.key === 'ArrowUp') {
e.preventDefault();
if (currentSlide > 0) {
currentSlide--;
slides[currentSlide].scrollIntoView({ behavior: 'smooth' });
}
}
});
</script>
</body>
</html>