N 봇N 봇 디자인 가이드 — 2026-10-22
원본 docs/DESIGN-GUIDE-2026-10-22.md
한 줄: 개발 도구(IDE)처럼. 남먹색 판 위에 패널을 겹겹이, 주황은 지금 도는 것·주 행동·선택에만, 코드·선택자·로그는 고정폭과 문법 색. 코드:
ui/bot/BotTheme.kt(색·글자) ·ui/bot/Widgets.kt(패널·도구 단추·코드 칸·그림 기호) ·ui/bot/ConsolePanel.kt·ui/bot/BotSplash.kt· 화면MacrosScreen·ScrapeScreen·ScheduleScreen·SettingsScreen· 껍데기App.kt. N 트리거에서 가져온 화면(단계 편집기·대화상자)은 N 트리거 디자인 가이드(NovaTheme)를 그대로 따르되, 바탕색은BotPalette.nova()로 이 앱 판을 입는다.
1. 원칙
- 상태가 먼저 보인다 — 무엇이 돌고 있나(실행 막대·꼬리표·흐름의 빛), 다음은 언제인가(예약 카운트다운), 무슨 일이 있었나(콘솔).
- 주황은 아낀다 — 실행·주 단추·고른 것·지금 단계. 나머지는 무채색 단계.
- 글자는 두 벌 — 사람 말은 Pretendard, 기계 말(코드·선택자·시각·로그·숫자)은 고정폭.
- 움직임은 일의 흐름 — 흐름선 위로 흐르는 점선(0.9초 한 바퀴), 실행 꼬리표 맥박(0.7초), 탭 사이 흐림 전환. 「움직임 줄이기」면 모두 멈춘다(빛은 남는다).
2. 색(어두운 판 / 밝은 판)
| 토큰 | 어두운 | 밝은 | 쓰임 |
|---|---|---|---|
| bg | #0E1014 | #F1F3F6 | 바탕 |
| panel / panel2 / raised / sunken | #14171C #1A1E24 #20252D #0B0D10 | #FFFFFF #F7F8FA #FFFFFF #E9ECF0 | 패널·머리·띄움·입력/콘솔 |
| border / borderSoft | #2A3039 / #20252C | #DCE0E6 / #E8EBEF | 선 |
| text / textDim / textMute | #E8ECF2 #AEB6C2 #79828F | #15181D #454B55 #656C77 | 글자 단계 |
| accent / accentText | #FF7B00 / #FFAC4D | #FF7B00 / #C45A00 | 패밀리 주황 |
| ok / warn / err / info | #3FD68A #FFB547 #FF6B81 #6AA8FF | #0B7A3B #A34B00 #B30A28 #125AC0 | 성공·주의·실패·정보(웹 단계) |
| 문법 | 키워드 #FF9A3D · 글 #A6E3A1 · 수 #79C0FF · 주석 #6E7681 · 선택자 #D2A8FF · 속성 #FFCB6B · 태그 #FF7B72 | 밝은 판은 같은 뜻의 짙은 색 | 코드 칸·미리 보기 |
단계 종류 색(흐름 보기): 누르기·넘기기·시스템 = 주황 · 기다리기 = 회색 · 웹·추출 = info 파랑 · 묶음·조건·변수·코드 = 보라(선택자 색) · 이미지/글자/색 찾기 = 초록.
3. 부품
- 패널 — 머리 38dp(작은 대문자 이름 + 오른쪽 도구 단추) + 내용, 모서리 12, 선 1.
- 도구 단추 — 32dp, 기호(+글). 주 행동은 주황 면, 켜짐은 주황 옅은 면, 위험은 빨강 글.
- 꼬리표 — 점 + 고정폭 글. 실행 중이면 점이 맥박.
- 코드 칸 — 고정폭, 치는 동안 문법 색(CSS·정규식·JSON 경로·주소·코드·HTML).
- 흐름 보기 — 번호 원(28dp, 종류 색 테두리) + 노드 카드 + 흐름선(2dp). 지난 단계의 선은 주황 점선이 흐르고, 지금 노드는 주황 면·테두리. 묶음 노드는 안쪽 단계를 들여 쓴 작은 줄로(8개까지).
- 콘솔 — 시각(ms) · 수준 점 · 출처(54dp 고정 폭, 색) · 글. 출처별 걸러 보기.
- 예약 카운트다운 — 고정폭 30sp 가는 굵기 「0:29:59.97」, 하루 넘으면 「2일 03:04:05」.
4. 배치
- 넓은 화면(≥ 900dp): 왼쪽 레일 196dp(로고·탭 넷·아래 「예약 n개 켜짐 · 표준시 ±ms」) + 위 실행 막대 + 본문 + 아래 콘솔 200dp(접으면 마지막 한 줄 띠).
- 매크로: 목록 300dp | 흐름/목록 보기. 수집: 설정 360dp | 미리 보기 | 결과 표 420dp + 실행 기록. 예약: 카운트다운 띠 + 목록 | 편집 400dp.
- 휴대폰: 위 머리(로고·탭 이름·콘솔 단추) + 실행 막대 + 본문 + 아래 탭 넷. 콘솔은 처음엔 접힘, 펼치면 본문 아래 220dp. 수집은 설정·미리 보기·결과 세 쪽 고르개.
5. 아이콘·스플래시(패밀리 규칙 _nova-brand/ICON-SYSTEM.md)
- 아이콘: 주황 대각 그라데이션 + 흰 로봇 머리(둥근 네모 + 안테나, 상징) + 주황 눈 둘(디테일). 글자·그림자 없음. 만드는 곳
scripts/make_icon.py(Android 전경·바탕·단색·알림, 옛 mipmap, PC png/ico/icns, iOS 1024, 웹). 좌표는 앱 안drawBotFace와 같다._nova-brand/glyphs.py에 합칠 땐 이 좌표를 옮긴다. - 스플래시(1.1초 + 0.2 + 0.26): 「흩어진 단계 점 여섯(종류 색)이 세로 흐름으로 모여 선으로 이어지고(햅틱) — 주황 판이 차고 흰 로봇 머리가 커진 뒤 주황 눈을 뜬다」 → 「N 봇」 + 「반복은 맡기고, 필요한 것만 모아요」. 마지막 장면 = 아이콘.
6. 말투
- 짧고 사실대로: 「수집 끝 — 5줄 · 3장 · 1줄 새로」, 「⏱ 출석 아침 실행 (오차 3ms)」.
- 범용으로: 특정 용도(예매 등) 전용 표현을 쓰지 않는다. 지키기 안내(robots·간격·약관)는 늘 보이게.