노바 패밀리 · 2단계 인증

N OTP 디자인 가이드

하루에 여러 번, 몇 초 동안 여는 앱이에요. 사람들은 숫자 여섯 개를 읽고 다른 앱에 옮겨 적어요. 이 가이드의 모든 결정은 그 몇 초를 실수 없이 끝내게 하려는 거예요.

기준: 노바 패밀리 디자인 시스템 :nova-design 위에 OTP 앱만의 결정을 적었어요. 원문 docs/DESIGN-2026-10-07.md · 2026-10-08 개정판

이 앱의 얼굴

코드가 주인공

화면에서 가장 큰 글자는 언제나 코드예요. 38sp 고정폭 숫자로 써요.

잘못 옮길 틈을 없앤다

3자리씩 띄우고, 바뀌기 5초 전엔 색으로 알리며 다음 코드를 미리 보여 줘요.

조용하다

장식·그라디언트·움직임을 줄여요. 움직이는 건 남은 시간 원 하나뿐이에요.

목록 카드

가장 중요한 부품이에요. 아래 카드는 실제 TOTP(RFC 6238, 30초) 계산으로 움직이는 시연이에요. 시연용 설정 키 JBSWY3DPEHPK3PXP를 써요. 카드를 누르면 복사돼요.

N OTP검색 · 설정
5초 이하가 되면 코드가 빨개지고 다음 코드가 나타나요.
카드surface, 모서리 16, 안쪽 좌우 16·위아래 14, 카드 사이 8. 카드 전체가 누르는 자리예요(복사).
이니셜 원40dp, 발급자 첫 글자. 바탕은 이름 해시로 고른 노바 팔레트 6색의 옅은 판. 브랜드 로고는 쓰지 않아요(상표).
코드평소 textPrimary, 5초 이하 danger. 색만으로 알리지 않고 원이 비어 가고 다음 코드가 나타나요(WCAG 1.4.1).
남은 시간 원지름 28dp, 두께 3dp, 바탕 divider. 1초 단위가 아니라 매끄럽게 줄어요. 움직임 줄이기가 켜져 있으면 1초 단위로.
화면 읽기카드 한 덩어리로 「Gitea, qa@nova, 코드 4 8 2 9 1 3, 12초 남음」.
변형HOTP는 원 대신 새로고침 단추(48dp). 코드 가리기를 켜면 ● ● ● ● ● ● + 「눌러서 보기」.

색

색은 토큰 이름으로만 써요. 패밀리 색이 바뀌면 이 앱도 따라가요. 칩의 왼쪽은 밝은 판, 오른쪽은 어두운 판이에요.

주황 accent는 흰 바탕에서 대비가 2.6:1이라 글자에 쓰지 않아요. 주황 글자가 필요하면 onAccentSoft(밝은 판 #C45A00)를 써요.

글자

패밀리 글꼴은 Pretendard예요(SIL OFL 1.1, 10/6 패밀리 규격). 이 페이지는 Pretendard가 없는 기기에서 비슷한 고딕으로 보여요.

역할토큰크기·굵기쓰는 곳
코드numericDisplay38sp · Bold · 고정폭 숫자카드의 코드 여섯 자리
이름display32sp · Bold스플래시의 「N OTP」
화면 제목titleLarge24sp · Bold홈 상단 바 「N OTP」
발급자bodyStrong14sp · SemiBold카드의 서비스 이름
본문body · bodyLarge14 · 16sp안내 문구, 스플래시 한 줄 약속
보조caption13sp계정, 다음 코드, 남은 시간
  • 문구는 해요체예요. 「—」는 쓰지 않아요(빌드가 검사해요).
  • 글자 크기 200%에서도 카드가 잘리지 않아요. 코드는 자동 축소하지 않고 카드가 높아져요.

화면별 규칙

화면규칙
홈상단 바 「N OTP」, 오른쪽 검색·설정. 비면 열쇠 그림 + 「아직 계정이 없어요」 + 「계정 추가」·「백업에서 되살리기」. 오른쪽 아래 ＋ 단추 56dp. 복사하면 아래쪽 알림 2초 + 가벼운 진동 한 번. 길게 누르면 선택 모드(이름 바꾸기·지우기·위로·아래로).
추가 시트네 줄: QR 코드 스캔 · 사진에서 QR 읽기 · 설정 키 직접 입력 · 구글 OTP 에서 가져오기. 줄마다 아이콘 + 제목 + 한 줄 설명.
스캐너검은 바탕 전체 화면 카메라, 가운데 둥근 사각 틀 240dp(모서리 24, 흰 테두리), 바깥은 60% 어둡게. 읽히면 진동 한 번(iOS 는 틀이 아쿠아로) 뒤 확인 화면으로. 출시판은 화면 캡처를 막아요.
확인QR·링크로 들어온 것을 저장 전에 보여 줘요. 발급자·계정은 고칠 수 있고, 지금 코드를 미리 보여 줘요. 여러 개면 「N개 저장」.
직접 입력서비스 이름 · 계정(선택) · 설정 키(비밀 칸, 영문 자판, 자동 고침 끔). 「고급 설정」: 종류 · SHA1/256/512 · 6~8자리 · 주기. 키는 입력하는 동안 검사해요.
잠금가운데 앱 표지 64dp + 「N OTP 가 잠겨 있어요」 + 「잠금 해제」. 돌아오면 인증 창을 한 번 자동으로 띄워요. 처음 켤 때는 스플래시가 끝난 뒤 띄워요.
백업비밀번호 두 칸(8자 이상) + 앰버 안내 「비밀번호를 잊으면 이 백업을 열 수 없어요」. 되살리기 결과는 「3개를 더했어요(2개는 이미 있어서 건너뛰었어요)」처럼.
옮기기 QR계정을 전부 고른 채로 열려요. QR은 어두운 판에서도 흰 바탕 검은 점(반전 QR을 못 읽는 스캐너가 있어요). 위에 코랄 안내 「이 QR 에는 비밀 키가 들어 있어요」. 보기 전에 본인 확인.
지우기코랄 대화상자 「Gitea 계정을 지울까요?」 + 「지우면 이 계정의 코드를 다시 만들 수 없어요…」, 확인 단추는 위험 표시.

스플래시

패밀리 규칙은 「뜻이 있는 1초」예요. 흩어진 것이 하나로 맞춰지고, 마지막 장면이 앱 아이콘이 돼요. N OTP에서는 흩어져 깜빡이던 숫자 여섯이 방패 안 점 여섯으로 잠겨요.

흩어져 깜빡임
방패로 모임
잠김 · 이름
머무름
사라짐
  • 700ms: 방패가 주황으로 채워지고 점이 흰색이 되는 순간 햅틱 한 번(Confirm)과 방패 파문.
  • 앱을 가리기만 해요. 아래 화면은 그대로 떠서 금고를 열어요. 금고가 열린 뒤 시작해요(Android 시스템 시작 화면 뒤에서 먼저 지나가지 않게).
  • 한 번 본 뒤(회전·복귀)엔 다시 안 떠요. 움직임 줄이기가 켜져 있으면 마지막 장면만 보여요.
  • 바탕은 앱 바탕색. 이름은 display, 한 줄 약속 「여섯 자리를 안전하게」는 bodyLarge 보조색.

아이콘과 이름

패밀리 주황 바탕 둥근 사각 위에 흰 방패와 여섯 점(3+3). N 트리거와 같은 바탕색이라 패밀리로 읽혀요. Android는 적응형과 단색 테마 아이콘을 함께 둬요.

기기에 보이는 이름 N OTP
  • 홈 화면 · 스플래시 · 상단 바 · 잠금 · 설정 · 권한 안내
  • 한국어·영어 같아요. 디버그 빌드는 「N OTP DEV」
정식 이름 노바 OTP
  • 스토어 등록명 · 스토어 설명 · 개인정보 처리방침
  • 식별자 com.eys.novaotp, 백업 확장자 .novaotp는 그대로

노바 패밀리 공통 규칙이에요(대표님 10/8). N 트리거 · N 월렛 · N 어시스트도 같아요.

접근성

  • 대비: 코드는 textPrimary. 주황은 면에만, 주황 글자는 onAccentSoft.
  • 색만으로 알리지 않기: 5초 전 빨강과 함께 원이 비고 다음 코드가 나와요.
  • 터치: 모든 단추 48dp 이상, 아이콘 단추엔 설명.
  • 움직임 줄이기: 원은 1초 단위, 스플래시는 마지막 장면만.
  • 대비 높이기: Android 14+ 대비 설정·고대비 글자, iOS 「색상 대비 증가」를 따라요.
  • 화면 읽기: 카드는 한 덩어리로 읽고, 선택 모드에는 순서 바꾸기 대신 「위로·아래로」도 있어요.