스플래시 & 온보딩

Splash · Onboarding · 첫인상의 따뜻함

화면 목업 (3장)

실

실벗

혼자가 아닌 삶

🤖

AI 말벗과 대화하세요

언제든 친구처럼
이야기를 들어주는
나의 AI 말벗

👨‍👩‍👧

가족과 연결됩니다

자녀에게 안부 전하고
화상통화도 한번에
쉽게 할 수 있어요

🆘

위험할 때 바로 SOS

버튼 한 번이면
가족과 119에
즉시 연결돼요

기능 요구사항 (Functional Spec)

항목	설명
스플래시 시간	최대 2초 (서비스워커 등록 + 토큰 확인)
온보딩 표시 조건	localStorage에 onboarded=true 없을 때만
스킵 옵션	우측 상단 "건너뛰기" 텍스트 (작은 폰트)
음성 안내	각 화면 진입 시 자동 음성으로 내용 읽기 (TTS, 끄기 가능)
접근성	스와이프 + 큰 다음 버튼 동시 지원
마지막 화면	"시작하기" → /register.html 또는 /login.html

바로 사용 가능한 HTML 코드 (요약)

<!-- splash.html -->
<div class="splash">
  <div class="logo-circle">실</div>
  <h1>실벗</h1>
  <p>혼자가 아닌 삶</p>
</div>
<script>
  setTimeout(() => {
    const done = localStorage.getItem('onboarded');
    location.href = done ? '/login.html' : '/onboarding.html';
  }, 2000);
</script>