AI 코딩 동화 스튜디오
디자인 시스템 쇼케이스
Phase 0에서 구현한 디자인 토큰, 타이포그래피, 모션 시스템, 공용 UI 컴포넌트 7종을 한눈에 확인합니다.
7컴포넌트
5스프링
8모션 변형
40+디자인 토큰
컬러 팔레트
배경 & 텍스트
Surface#FFF8F0
Raised#FFFFFF
Sunken#F5EDE3
Primary#2D2016
Secondary#6B5B45
Muted#9A8B72
브랜드 (앰버)
50
100
200
300
400
500
600
700
800
900
블록 카테고리
캐릭터#FB923C
스토리#60A5FA
로직#A78BFA
시맨틱
Success#34D399
Warning#FBBF24
Danger#F87171
Info#60A5FA
AI#818CF8
타이포그래피
Display: 가구 손글씨페이지 타이틀
Gaegu 700 / 2.5remHeading 1: 제목 스타일섹션 타이틀
Gaegu 700 / 2remHeading 2: 섹션 제목카드 타이틀
Pretendard 600 / 1.5remHeading 3: 소제목서브 타이틀
Pretendard 600 / 1.25remBody Large: 큰 본문 텍스트강조 본문
1.125remBody: 기본 본문 텍스트일반 본문
1remBody Small: 작은 본문보조 텍스트
0.875remCaption: 캡션, 라벨메타 정보
0.75remCode: 블록 라벨, 코딩 개념코드 블록
D2Coding / 0.875remStory: 동화 본문 전용 (넓은 행간)동화 읽기
1.125rem / lh 1.8카드
Default 카드
기본 카드 스타일입니다. 배경은 surface-raised, 둥근 모서리는 radius-xl입니다.
Outlined 카드
테두리만 있는 투명 카드입니다. 배경이 비치는 레이아웃에 적합합니다.
Elevated 카드
호버 시 살짝 떠오르는 인터랙티브 카드입니다. 클릭 가능한 항목에 사용합니다.
Category 카드
왼쪽에 카테고리 색상 바가 표시됩니다. 블록 카테고리 구분에 사용합니다.
캐릭터: 등장인물 설정
스토리: 이야기 흐름
로직: 조건/반복
입력 필드
학생용 (큰 사이즈)
틀렸어요! 다시 한번 생각해 보세요.
멋진 이름이에요!
강사용 (작은 사이즈)
올바른 이메일 형식이 아닙니다.
사용 가능한 비밀번호입니다.
모달
AnimatePresence 기반 모달. ESC 키 / 오버레이 클릭으로 닫기. bouncy spring 전환.
프로그레스 바
Step 변형
동화 선택
2
블록 코딩3
AI 분석4
퀴즈Linear 변형
65%
Score 변형 (AI 이해도)
0%
어휘 이해
85
줄거리 파악
72
인과관계
68
주제 이해
88
로딩
Spinner
Skeleton
AI Magic
✨✨✨
🤖
AI가 분석 중...
72%
Skeleton: image
Skeleton: card
토스트
버튼을 클릭하면 하단 중앙에 토스트가 표시됩니다. 4초 후 자동으로 사라집니다.
모션 시스템
Spring 프리셋 5종
Snappy
버튼, 토글
s:500d:30
Smooth
페이지 전환
s:300d:30
Bouncy
카드 등장
s:400d:20
Playful
스티커 획득
s:300d:15
Gentle
분위기 변화
s:200d:20
Variant 애니메이션
Sticker Earn
회전하며 팝업되는 스티커 획득 효과
AI Glow
AI 요소에 적용되는 펄스 글로우
Shake
오류 피드백용 쉐이크
Confetti Pop
정답 시 축하 파티클
Stagger Container
1
2
3
4
5
6
7
8
그림자 & 반경
Shadow 스케일
sm--shadow-sm
md--shadow-md
lg--shadow-lg
xl--shadow-xl
glow--shadow-glow
Radius 스케일
sm8px
md12px
lg16px
xl24px
full9999px
간격 스케일
space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-5
20px
space-6
24px
space-8
32px
space-10
40px
space-12
48px
space-16
64px