N 어시스트N 어시스트 디자인 가이드
원본 docs/DESIGN-GUIDE-2026-10-08.md · 부품 명세 전문은 DESIGN-2026-10-07.md
2026-10-08 · 10/7 디자인 명세
DESIGN-2026-10-07.md(1,752줄 — 디렉터 검토 D1~D25, 화면·부품의 Compose 파라미터 수준 명세, ko/en 문구 전문)를 지금 앱 그대로 한 장으로 줄인 가이드다. 새 화면·부품을 만들 때 먼저 이 문서를 보고, 숫자 하나까지 필요하면 원본 명세를 본다. 시안 SVG 는docs/design/. 웹페이지판: https://138.3.221.237.sslip.io/docs/novaassist/design-guide.html · 짝 문서: 기획PRD-2026-10-08.md· 현황STATUS-2026-10-08.md
0. 한눈에
| # | 정한 것 | 까닭 |
|---|---|---|
| 1 | AI 답은 말풍선 없이 전체 폭, 사용자 말은 오른쪽 말풍선 | 답은 표·코드·목록이 섞인 「문서」라 폭이 곧 가독성이다 |
| 2 | 대화 바탕 chatCanvas: 어두운 판 #1A1B1D, 밝은 판 흰색 | 읽는 화면만 흰 종이. 회색 바탕 위 긴 글은 탁하다 |
| 3 | 주황은 드물게: 보내기 단추·스트리밍 커서·켜진 웹 검색 칩·선택 상태만 | 주황이 보이면 「지금 AI 가 일한다」 또는 「누를 곳」 |
| 4 | 홈 = 빈 새 대화(시간대 인사 + 입력창 위 추천 카드). 탭 바 없음, 목록은 왼쪽 서랍(840dp 이상은 고정 사이드바) | 첫 화면에서 바로 묻는다. 추천은 엄지 거리에 |
| 5 | 지금 답하는 AI 는 상단 가운데 엔진 배지로 늘 보임 | 같은 질문도 엔진마다 다르고, 외부 AI 는 대화가 밖으로 나간다 |
| 6 | 웹 검색은 입력창 칩(자동/켬/끔) | 끄는 스위치가 눈앞에 있어야 한다 |
| 7 | 외부 앱 승인은 세로 세 단추: 이번 한 번만 허용(주, 맨 위) · 항상 허용 · 허용 안 함 | 처음 보는 앱에 「계속 허용」을 가장 무거운 단추로 두지 않는다 |
| 8 | 새 색은 nova-design 을 고치지 않고 앱 모듈 NovaChatColors 에 | 패밀리 디자인 모듈은 다른 앱이 쓰는 중 |
1. 원칙
- 답이 주인공이다. 가장 큰 덩어리는 언제나 답 글. 테두리·카드로 가두지 않고, 장식은 답이 끝난 뒤 그 아래(동작 줄·출처)에만.
- 지금 무엇을 하는지 말한다. 「웹에서 찾아보는 중이에요」 → 「글 3개를 읽는 중이에요」 → 답. 빈 회전 동그라미만 두지 않는다. 움직임 줄이기에서도 경과 초를 보인다.
- 대화가 어디로 가는지 숨기지 않는다. 엔진과 외부 앱의 요청은 늘 이름으로 적는다(엔진 배지, 「‘○○’의 요청」 띠).
- 멈출 수 있어야 한다. 답이 흐르는 동안 보내기 단추가 같은 자리에서 「중단」으로.
- 주황은 드물어야 보인다. 한 화면에 주황 면은 하나.
- 짧게, 해요체. 안내 한 줄 40자 이하, 칩 16자 이하, 화면 문구에 「—」 금지. 오류는 「무슨 일이 / 무엇을 하면 되는지」 두 마디.
2. 이름·아이콘·스플래시
| 항목 | 규칙 |
|---|---|
| 이름 | 홈 화면·앱 머리·스토어 아이콘 아래: 「N 어시스트 / N Assist」. 문장 속: 「노바 어시스트 / Nova Assist」(예: 「노바 어시스트에게 물어보세요」). 시스템 설정에 보이는 이름을 가리킬 땐 「N 어시스트」 |
| 아이콘 | 노바 패밀리 규칙(_nova-brand/ICON-SYSTEM.md): 주황 그라디언트 바탕 + 흰 말풍선 + 말풍선 안 주황 별 하나. 원본 docs/design/icon.svg(안전 영역 가운데 66%) |
| 스플래시 | 「흩어진 말이 하나의 답으로」: 말 조각 말풍선 다섯·타자 점이 흩어져 있다가(0~420ms) 휘어 모이며 말풍선 윤곽이 그려지고(~720ms) 큰 별이 반짝·빛살(진동 1회) → 이름 + 「물어보면, 찾아서 답해요」. 전체 1.1초 + 머무름 1.3초 + 사라짐 0.26초. 켤 때마다 한 번, 회전·복귀엔 다시 안 뜸 |
| 스플래시 구현 | ui/components/SplashIntro.kt — 프레임 시각(withFrameNanos)으로 그린다. 시스템 애니메이션 배율 0 기기(팜·대표님 S22)에서도 돈다. 앱 설정 「움직임 줄이기 켜기」일 때만 마지막 장면 0.2초 페이드 |
3. 색
3-1. 패밀리 토큰(nova-design, 어두운 / 밝은)
| 토큰 | 값 | 쓰임 |
|---|---|---|
background | #1A1B1D / #F4F5F6 | 설정·서랍 바탕 |
surface | #2E3033 / #FFFFFF | 설정 그룹 카드, 출처 카드 |
surfaceSelected | #FF7B00 16% / #FFF4E5 | 서랍의 지금 대화, 고른 엔진 |
border·divider | #45484C / #E8E9EA | 표 칸·구분선 |
textPrimary/Secondary/Tertiary | #FFF/#D1D3D5/#96999D · #1A1B1D/#45484C/#5F6368 | 본문 / 보조 / 시각·각주 |
accent·onAccent | #FF7B00 · 흰색 | 보내기 면, 커서, 켜진 칩 |
live | #4FD889 / #0B7A3B | 「연결됨」 점 |
흰 바탕 위 작은 주황 글자에
#FF7B00금지(2.60:1). 14sp 이하 주황 글자는accentInk(밝은#A34B005.42:1 / 어두운#FFAC4D).
3-2. 앱 토큰 NovaChatColors(ui/theme/NovaChatColors.kt)
| 이름 | 어두운 | 밝은 | 쓰임 |
|---|---|---|---|
chatCanvas | #1A1B1D | #FFFFFF | 대화 바탕 |
userBubble | #2E3033 | #F4F5F6 | 사용자 말풍선 |
composerSurface·composerBorder | #2E3033·#45484C | #FFFFFF·#D1D3D5 | 입력창(밝은 판은 그림자 10%) |
codeSurface·codeHeader | #111214·#232528 | #F4F5F6·#E8E9EA | 코드 블록(어두운 판은 바탕보다 한 단계 깊게) |
citationSurface·citationBorder | #2E3033·#45484C | #FFFFFF·#E8E9EA | 출처 알약·카드 |
info·infoSoft | #6AA8FF·#172A44 | #125AC0·#E8F1FF | 외부 앱에서 온 대화, 외부 AI 배지 |
homeGlow | accent 7% 방사형 | accent 5% | 빈 홈에만, 입력을 시작하면 240ms 에 사라짐 |
| 구문 강조 | 키워드 #FF9E64 · 문자열 #9ECE6A · 주석 #8B9096 · 함수 #7DCFFF | #B5480B · #2E7D32 · #5F6368 · #0B5CAD | 코드(모두 4.5:1 이상) |
4. 글자
| 자리 | 크기/줄 | 메모 |
|---|---|---|
| 홈 인사 | 24/33.6 Bold | 왼쪽 정렬 |
| 상단 바 제목 | 18/25.2 SemiBold | 한 줄 말줄임 |
| AI 답 본문·사용자 말 | 16/25.6 | 읽는 글이라 16. 한국어 줄바꿈 LineBreak 구 단위·Strict, 하이픈 없음 |
| 답 속 H1 / H2 / H3 | 20/28 Bold · 18/26 SemiBold · 16/24 SemiBold | 본문보다 작은 제목 금지 |
| 코드 | 고정폭 13/20(최소 12) | 인라인 코드는 14, 바탕 inlineCode |
| 표 | 14/22.4, 숫자 열 오른쪽·tnum | 가로 스크롤 |
| 단계·시각·각주 | 13/20.8 | textTertiary |
| 칩·배지 | 12/16.8 SemiBold |
글꼴은 패밀리 Pretendard 3굵기. 앱 「글자 크기」(작게 0.9 · 보통 · 크게 1.15 · 아주 크게 1.3)는 시스템 배율 위에 곱하고 상한 2.0, 앱 전체에 곱한다. 읽기 열은 넓은 화면에서 최대 720dp 를 가운데.
5. 모양·간격
- 간격 4dp 격자(
NovaSpace4·8·12·16·20·24·32), 화면 좌우 16, 터치 최소 48dp. - 모서리: 사용자 말풍선
20,20,6,20(오른쪽 아래만 덜 둥글게) · 입력창 24 · 코드·표·출처 카드·사진 12 · 칩·배지 알약 · 시트 위 24.
6. 화면 뼈대
| 화면 | 규칙 |
|---|---|
| 홈 | 상단 바(☰ · 엔진 배지 · 새 대화) → 별 + 시간대 인사 + 「무엇을 도와드릴까요?」 + 지금 엔진 한 줄 → 「이렇게 물어보세요」 가로 추천 카드(12장 중 날마다 돌림, 엔진 능력별로 빼기, 📌 저장한 프롬프트) → 입력창 |
| 대화 | 답 위에 엔진 이름(바뀔 때만) · 조사 단계/「글 n개 읽음」 요약 줄 · 답 · 출처 카드 줄 · 동작 줄(복사·다시 만들기·읽어 주기·⋮·걸린 시간) · 이어 물을 거리 3개 |
| 서랍 | 새 대화 · 검색칸 · 고정됨 · 오늘 · 어제 · 날짜별 · 「○○ 앱」 묶음(외부 앱 대화) · 설정 |
| 입력창 | ＋(사진·프롬프트) · 웹 검색 칩 · 🎙 · 보내기/중단. 여러 줄은 Snappy 스프링으로 늘어남, 글자 수 한도 근처에서만 숫자 |
| 설정 | AI(답할 AI·웹 검색·이어 물을 거리) · 음성 · 화면(외관·글자 크기·진동·언어) · 데이터(모두 내보내기·저장한 프롬프트·다른 앱 연동·모두 지우기) · 정보(개인정보 안내·오픈소스) |
| 넓은 화면 | 840dp 이상: 서랍이 고정 사이드바(접기 가능), 읽기 열 720dp |
| AI 토론방 첫 화면(10/12) | 머리 카드(연결된 AI 아바타 겹침 · 「여러 AI 에게 한 번에 물어보세요」 · 한 줄 설명 · 「＋ 새 토론 시작」, 옅은 강조색이 아래로 사라지는 바탕) → 「최근 토론」 줄(아바타 겹침 · 제목 · 「토론 · 2라운드 · AI 3개」 · ›). 길게 누르면 삭제 |
| 새 토론 | 한 화면 위→아래: 참여할 AI(카드 · 고르면 화자 색 테두리와 순서 번호 배지, 「2/4」) → 진행 방식(그림 카드 셋) → (토론) 라운드 1~5 알약 · 정리할 AI 칩 → 웹 검색 알약 → 주제(여러 줄 + 예시 셋). 아래 고정 막대: 「AI 2개 · 토론 2라운드」 요약 + 「토론 시작」 |
| 토론방 | 머리(← · 방 이름 · 「토론 · 2라운드 · AI 2개」 · ⋮ 이름 바꾸기·삭제) → 참여 AI 칩 줄(말하는 AI 는 고리가 숨 쉼) → 주제 카드(「주제」 강조색 작은 대문자 + 굵은 질문) → 「웹 글 n개를 읽었어요」 → 라운드 구분선(가운데 「1라운드」) → 화자 줄 → 정리 카드. 아래: 「한 라운드 더」·「정리하기」 칩, 「○○ 가 말하는 중이에요」, 입력창 + 보내기/■ |
7. 부품
| 부품 | 규칙 |
|---|---|
| 엔진 배지 | 초록 점(연결됨) + 엔진 아이콘 + 이름 + ⌄. 누르면 엔진 바꾸기 시트 |
| 출처 | 본문 속 사이트 이름 알약(번호 대신, D15), 답 아래 출처 카드(파비콘·사이트·번호·제목). 파비콘을 못 받으면 도메인 해시 색 원 + 첫 글자 |
| 조사 단계 | 별 + 「생각하는 중 3초」, 단계 줄(✓ 로 바뀜), 끝나면 「글 2개 읽음 ›」 한 줄로 접힘 |
| 오류 카드 | 「무슨 일 / 할 일」 두 마디 + 한 단추(다시 시도·이어 쓰기·설정으로). HTTP 코드는 「자세히」 안에만 |
| 외부 AI 동의 | 「○○ 로 대화를 보낼까요?」 — 보내는 곳(호스트) · 요금은 내 키 계정 · 구독엔 API 없음 · 되돌리기 |
| 승인 창 | 앱 아이콘·이름·서명 지문 앞 8자, 「지금 AI: …」 줄(외부 AI 면 경고 띠), 세 단추 세로 |
| 요청 띠(방식 B) | 대화 위 고정 띠: 「‘○○’의 요청」(이름을 모르면 「다른 앱의 요청」) · 취소 · 결과 보내기(답이 생기면 활성) |
| 결과 보내기 시트 | 마지막 답 · 답 직접 고르기 · 대화 요약 · 직접 고쳐서 보내기, 미리 보기 + 글자 수 |
| 받은 글 시트 | 「노바 어시스트에게 보내기」: 받은 것 미리 보기 · 할 일 칩(다듬기·요약·번역·직접 묻기) · 덧붙일 말 · 보내기 |
| 토론방 화자 색(10/12) | 참여 AI 마다 한 색 — 남색 #4F5BD5·청록 #0E8A7E·보라 #8A4FD8·장미 #D63E6B(어둡게는 한 단계 밝은 #8D97FF·#3FD2C0·#BC92FF·#FF7FA3). 브랜드 주황은 쓰지 않는다 — 주황은 사용자와 앱 동작(단추·주제 이름표·정리 테두리)의 색. 같은 색을 아바타·이름·순서 배지·비교 카드 띠에 함께 써서 글을 읽기 전에 누가 말했는지 안다 |
| 토론방 아바타 | 16% 색 바탕 원 + 같은 색 그림(외부 AI: 이름 첫 글자 굵게, 내 Gemma: 서버, 기기 안: 휴대폰). 말하는 중이면 바깥 2dp 고리가 0.7초 주기로 숨 쉼(움직임 줄이기면 고정) |
| 진행 방식 그림 | 56×40 캔버스: 라운드테이블=선으로 이은 세 점, 토론=두 점 사이 두 줄(주고받음), 비교=나란한 세 막대. 고르면 선이 강조색 |
| 화자 줄 | 30dp 아바타 · 이름(화자 색, 굵게) + 모델(옅게) · 본문(일반 답과 같은 마크다운). 근거 번호 [n] 은 「(사이트 이름)」으로. 받는 중 빈 본문은 「생각하는 중…」 반짝 글자, 멈춤은 「멈췄어요」, 실패는 일반 대화와 같은 오류 카드 |
| 정리 카드 | 둥근 16dp · 강조색 45% 테두리 · 「정리」 배지 + 정리한 AI. 앞에 「정리」 구분선 |
| 비교(넓은 화면 600dp+) | 같은 차례 답을 나란한 카드로 — 카드 위 3dp 화자 색 띠. 좁은 화면은 위아래로 |
| 고르기 알약 | 움푹한 바탕 위 칸 나눔, 고른 칸만 떠오른 바탕 + 테두리(라운드 수·웹 검색) |
8. 움직임
- 곡선·길이는
NovaChatMotion이름만 쓴다(숫자 리터럴 금지): Standard · EmphasizedDecelerate(들어옴) · EmphasizedAccelerate(나감) · Breath(숨쉬기) / Micro 100 · Short 160 · Medium 240 · Long 360 · Snappy 스프링. - 들어오는 것은 나가는 것보다 길다(240 대 160). 한 번에 움직이는 것은 셋까지.
- 타자기(초당 40자, 밀리면 1.5초 안에 따라잡음) + 마지막 6글자 꼬리 페이드 + 커서 깜빡임(900ms).
- 보낸 질문은 위로 고정 스크롤(질문이 화면 위에 남고 답이 아래로 흐름).
- 움직임 줄이기: 앱 설정 「시스템 따라가기 / 켜기 / 끄기」. 시스템 배율 0 이면 줄이기로 읽어 타자기를 끄지만, 기다림에는 경과 초를 보이고 스플래시는 프레임 시각으로 돈다(배율 0 기기에서 「끝난 것처럼」 보이지 않게, 10/8).
9. 접근성
- 모든 아이콘 단추에 이름(「답 중단」「다시 만들기」「복사」), 터치 48dp, 대비 4.5:1(작은 주황은
accentInk). - 스트리밍 중에는 토큰마다 읽지 않고 끝났을 때 한 번 「답이 끝났어요」.
- 시스템 글자 200% 에서 잘림 없음, 표는 셀 단위 읽기 순서, 코드 블록 [복사].
- 엔진 배지·외부 요청 띠는 스크린리더가 「답할 AI, 내 Gemma, 연결됨. 바꾸려면 두 번 누르세요」처럼 읽는다.
10. 문구
- 해요체, 「—」 금지, 느낌표 남발 금지, 사용자 탓하지 않기, 키·주소 원문 넣지 않기(주소는 호스트만).
- 같은 원인은 같은 문구(외부 API 메시지와 공유). 예: 「서버에 닿지 않아요. 주소와 네트워크를 확인해 주세요.」 · 「키가 맞지 않아요. 설정에서 키를 다시 넣어 주세요.」 · 「지금은 웹 검색이 잘 안 돼요. 검색 없이 답했어요.」
- 한국어·영어 두 벌(
composeResources/values,values-en), 키 집합과 「—」·이스케이프는 시험(StringResourcesTest·checkResourceEscapes)이 막는다.