ThinkGen 앱은 아이가 카드를 고르고, 모듈을 연결하고, 말로 스킬을 만드는 피지컬 AI 놀이·학습 도구입니다. 이 문서는 앱 화면의 디자인 언어를 정의합니다. 웹사이트는 ThinkGen Web 가이드라인을 따릅니다.
1. 무드
따뜻한 크림 종이 위에서 노는 카드 게임. 모든 모서리는 둥글고, UI는 플랫하며, 색의 풍부함은 카드 일러스트에만 허용됩니다. 화면당 포커스는 하나(중앙 카드), 손가락 타깃은 최소 48px.
2. 컬러
Cream · #F9EEDC — 앱 배경
Dot Blue · #9FD3EE — 배경 도트
Tan · #CFA98C — UI 크롬 · 프로필 칩
Taupe · #6F635B — 패널 · 툴팁
Deep Taupe · #57493F — 로그인 배경
ThinkGen Blue · #6FC0EA — 브랜드 · 토글 on · AI 말풍선
Sun Yellow · #F7E84B — 사용자 말풍선 · 강조 · 마이 스킬
카드 카테고리 컬러
Croc Green · #1F7A55
Racer Blue · #2C4FA3
Swing Pink · #E0607E
Desert Tan · #C9A187
규칙: 카드 보더 · 타이틀 필 · 카드 뒷면 포인트는 해당 카드의 카테고리 컬러 하나만 쓴다. 타이틀 필의 글자는 항상 Sun Yellow.
3. 타이포그래피
| 용도 | 스타일 |
|---|---|
| 타이틀 필 (카드 이름) | 라운드 고딕 800 · 22~26px · Sun Yellow on 카드색 [확인 필요: 실제 서체명] |
| 패널 라벨 (레벨·파워·센서) | 라운드 고딕 700 · 15~17px · 필 형태 |
| 본문 · 스킬 설명 | 라운드 고딕 500 · 16~18px · 줄간 1.5 · 아이 말투 |
| 말풍선 | 600 · 16~18px |
말투 규칙 (앱): 아이에게 말하듯 짧고 신나게 — “앙! 하고 깨물어버릴 수 있는 능력!” · AI 말풍선은 다정한 존댓말 “만들어줄께요!” 톤. 금지: 딱딱한 안내문, 법률투.
4. 카드 시스템
| 면 | 구성 |
|---|---|
| 앞면 | 풀블리드 일러스트 + 카테고리색 장식 보더 + 코너 아이콘(좌상 마스코트 · 우상 카테고리 심볼) + 보더 ✽ 패턴 |
| 뒷면 (스펙) | 연그린 패널 위 필 라벨: 레벨파워센서기본 스킬 + 아이 말투 설명 + 하단 모듈 상태 |
| QR 면 | 회색 카드 + 코너 브래킷 + 중앙 QR(마스코트 로고 삽입) |
아앙 악어
타이틀 필 — 카드색 배경 + Sun Yellow 글자, 화면 하단 중앙 고정
5. 컴포넌트
모듈 연결 토글 + 패널
모듈 자동선택 ▾ (M5 Atom · M5 Stack · Arduino)
버전 V 1.0
버전 V 1.0
최신상태
업데이트 필요
토글: off=탠, on=ThinkGen Blue. 상태 배지: 정상=흰색, 조치 필요=Sun Yellow.
말풍선 (스킬 만들기 대화)
4번에 한번 무는 ‘스킬’ 만들어줘
좋아요! 4번에 한번 입이 닫히는 스킬 만들어줄께요!
4번에 한번 스킬 만들었습니다. ▶ 실행
사용자=Yellow(우측), AI=Blue(좌측), 완료 메시지의 스킬명은 Yellow 글자. 실행 버튼은 말풍선 밖 원형.
그 외
| 프로필 칩 | 하단 좌측 고정, 탠 필: 사진(원형)+이름+설정 기어. 비로그인 = 실루엣+”로그인” |
| 스킬 패널 | 타우프 패널: 카드 스킬(Blue 행+아이콘) / 마이 스킬 3슬롯(Yellow, “- 비어 있음 -“) + 메뉴(이름수정·스킬수정·스킬삭제) |
| 설정 패널 | 언어(드롭다운+검색) · 모드(놀이/학습 토글) · 설명(on/off) |
| 툴팁 | 타우프 라운드 + 제스처 아이콘: “클릭 > 뒤집기” · “더블 클릭 > 선택” · “뒤로” |
| 입력 바 | 하단 흰 필: + 첨부 · 텍스트 · 마이크(활성 시 Yellow 원) |
| 로그인 | Deep Taupe 배경 + 크림 카드: id/pw, Blue 로그인 버튼(Yellow 글자), or 소셜 3원 · 가입 = 학생(Yellow 카드)/선생(Blue 카드) 픽커 |
6. 인터랙션 · 모션
| 제스처 | 동작 |
|---|---|
| 클릭(탭) | 카드 뒤집기 (3D 플립, 350ms ease-out) |
| 더블 클릭 | 카드 선택 — 해당 카드 모드 진입 |
| 좌우 스와이프 | 카드 캐러셀 — 중앙 카드만 선명, 양옆은 반투명 |
| 왼쪽 엣지 | 뒤로 |
모션 정책: 통통 튀되 짧게 — UI 전환 200~300ms, ease-out만. 무한 반복 애니메이션 금지(모듈 연결 대기 제외). prefers-reduced-motion 존중.
7. Do / Don’t
Do
· 한 화면 한 포커스 (중앙 카드)
· 카드색은 카테고리당 1색 고정
· 아이 말투, 문장 짧게, 느낌표는 진심일 때만
· 상태는 색+텍스트 이중 표기 (업데이트 필요 = Yellow + 라벨)
· 한 화면 한 포커스 (중앙 카드)
· 카드색은 카테고리당 1색 고정
· 아이 말투, 문장 짧게, 느낌표는 진심일 때만
· 상태는 색+텍스트 이중 표기 (업데이트 필요 = Yellow + 라벨)
Don’t
· UI 표면에 그라데이션·그림자 남용 금지 (일러스트 내부만 허용)
· 카드색을 UI 크롬(토글·칩)에 섞지 않기
· 한 화면에 Yellow 강조 2개 이상 금지
· 웹의 corporate 문체를 앱에 가져오지 않기
· UI 표면에 그라데이션·그림자 남용 금지 (일러스트 내부만 허용)
· 카드색을 UI 크롬(토글·칩)에 섞지 않기
· 한 화면에 Yellow 강조 2개 이상 금지
· 웹의 corporate 문체를 앱에 가져오지 않기