맑은 메시징 디자인 가이드 · Relay-inspired v1.0
Less chrome,
more clarity.
무채색 ink 11단 + 단일 그린 액센트, 1px hairline, 저밀도. 토큰·컴포넌트·발송 아키텍처를 한 페이지에 정리한 살아있는 레퍼런스입니다.
§ 1 · 01
디자인 원칙
모든 화면에 일관 적용되는 7가지 원칙.
Calm by default
채도 높은 색은 상태(error/success)에만. 평상시 무채색.
Information first
카드 그라데이션·장식 금지. 데이터에 시선이 먼저.
Single accent
#00DC82 한 가지. 페이지당 4–6회 이내.
Type over boxes
박스 겹치기보다 폰트로 위계.
Tabular numbers
모든 수치는 JetBrains Mono + tabular-nums.
Hairline > shadows
1px solid #ececec 기본. 그림자는 floating UI만.
AI is quiet
AI는 ✨ + 그린만. 보라·무지개 금지.
§ 2 · 02
컬러 시스템
ink 무채색 11단으로 90%, accent·semantic은 강조에만. 색은 항상 CSS 변수.
Ink Scale (≈ Tailwind zinc)
Accent — Green
Semantic (Nuxt UI 토큰)
Channel dots (점 표시 전용)
SMSKakaoRCSEmailPushFlow
§ 3 · 03
타이포그래피
Inter(UI) · JetBrains Mono(숫자/ID) · Pretendard(한국어 fallback).
§ 4 · 04
간격 스케일
4px 베이스. 카드 패딩 16–20, 카드 간 24, Shell 32.
4px
6px
8px
10px
12px
16px
20px
24px
32px
§ 4 · 05
라운드 · 그림자 · 보더
카드는 그림자 없이 1px hairline만. 그림자는 floating UI 전용.
Radius
r-sm
4px
kbd · 작은 요소
r-md
6px
버튼 · 입력 · pill
r-lg
8px
카드 · 모달
r-full
9999px
아바타
Shadow
soft
0 1px 2px /.04
tooltip · segmented
popover
0 4px 12px /.08
dropdown · toast
modal
0 12px 32px /.12
모달
§ 5.1 · 07
Pill · 유틸 액션
GNB 우측 상시 노출. r-md 6px.
§ 6.3 · 08
폼 입력
paper BG, focus 시 white + ink-300 border. 에러는 인풋 아래 빨간 텍스트.
올바른 형식이 아닙니다.
Radio
Checkbox · Segmented
§ 6.6 · 09
배지 · 태그
6 tone · dot prop으로 색 점 prefix.
발송 완료 일부 실패 발송 실패 SMS 알림톡 RCS 이메일 VIP 고객 템플릿 잠금
§ 6.2 · 10
카드
흰 BG · 1px line · r-lg. 그림자·그라데이션 없음.
발신 정보 *
3개 등록됨수신자 *
발신 프로필과 템플릿을 먼저 선택해 주세요.
§ 6.5 · 11
테이블
mono UPPERCASE 헤더 · row hover paper · 선택 accent-soft.
| 채널 | 제목 | 수신자 | 상태 | 발송 시각 |
|---|---|---|---|---|
| SMS | [몰리몰리] 주문이 출고되었습니다. | 142 | 완료 | 오늘 14:23 |
| KAKAO | 회원가입 환영 메시지 (자동) | 38 | 완료 | 오늘 11:05 |
| 5월 뉴스레터 — 신상품 12종 | 1,024 | 일부 실패 | 어제 18:00 |
A · B · C 테이블 스타일
목록 화면은 검색 방식에 따라 3가지로 구분 — 액션 영역(.list-toolbar)은 공통, 검색 위치만 다르다. 상세 = doc/DESIGN.md §6.5.
A별도 필터 영역 + 액션 영역다중 조건 검색(조회·이력) ·
data-table-style="a" · ref AppHistoryView 메시지 아이디 · 메시지 채널 · 요청 일시 · 발송 상태 · 수신 상태
B액션 영역만 (검색 없음)소규모·검색 불필요 목록 ·
data-table-style="b" · ref sender/numbers 발신 번호 유형 · 발신 번호 · 승인 상태 · 요청 일시 · 승인 일시
C액션 영역 + 인라인 검색란단일 검색어 목록 ·
data-table-style="c" · ref sender/domains 도메인 · 도메인 소유 인증 상태 · 인증 일시
§ 6.7 · 12
빈 상태
아이콘 박스 + 메시지 + 1차 액션.
아직 발송 이력이 없습니다.
첫 메시지를 발송해 보세요.
수신자를 선택해 주세요.
직접 입력하거나 주소록에서 선택할 수 있습니다.
§ 6.7 · 13
토스트 알림
Nuxt UI useToast().add({…}). 우측 하단, 자동 dismiss.
§ 6.8 · 14
미리보기 폰
채널마다 다른 shell. 280×520 기준.
SMS · iMessage
9:41•••5G100%
1
1588-1234
문자 메시지
오늘 오후 2:30
[몰리몰리] 주문이 정상 접수되었습니다.
주문번호: ORD-20260518-0042
알림톡
9:41•••5G100%
← (주)몰리몰리≡
(주)몰리몰리
🟡
알림톡 도착
안녕하세요 #{이름}님,
주문이 정상 접수되었습니다.
RCS
9:41•••5G100%
몰리몰리
인증된 발신자
대표 이미지
VIP 등급으로 승급되셨습니다!
이메일
[몰리몰리] 5월 특별 혜택
최대 40% 할인 이벤트가 진행 중입니다.
PUSH
9:41
9:41
6월 6일 월요일
타임세일 시작!
VIP 전용 타임세일이 시작되었어요.
몰리몰리 · 지금
밀어서 잠금 해제
§ 5 · 15
레이아웃
1400px 컨테이너 · 320px 보조 컬럼 · 56px 토pbar.
메인 (1fr)
보조 (320px)
1024px 미만에서 1단 전환, 보조 영역이 위로.
페이지 헤더 패턴
메시지 발송 · 문자메시지
SMS 발송
SMS · LMS · MMS 단발 발송. 한 건당 9.9 C부터.
§ 12 · 16
발송 페이지 카드 골격
모든 발송 페이지(SMS/알림톡/RCS/이메일/PUSH/Flow) 공통 구조 — 템플릿 선택 · 수신자 설정 · 메시지 설정 · 발송 설정의 3+1 카드.
①
템플릿 선택템플릿 사용유무 + 샘플 템플릿 선택 (AppSendFormCard)
②
수신자 설정직접 입력 · 주소록 · 별칭 클릭 수정 · 삭제 + 치환자 (AppRecipientCard)
③
메시지 설정발신 정보 · 발송 목적/유형 · 본문 + 우측 채널 미리보기 (AppSendFormCard)
④
발송 설정즉시 / 예약 발송 + datetime (AppSendOptionsCard)
—
AppSendActionsBar초기화 + 발송하기(primary)
채널별 차이 매트릭스
| 속성 | SMS | 알림톡 | RCS | 이메일 | PUSH | Flow |
|---|---|---|---|---|---|---|
| 발신 식별자 | 발신번호 | 프로필 검색 | 브랜드+번호 | 이메일 | 토큰 | 플로우 |
| 템플릿 | 선택 | 필수 | 선택 | 선택 | 선택 | 플로우 |
| AI 다듬기 | ✓ | — | ✓ | ✓ | — | — |
| 치환자 | 템플릿시 | ✓ | ✓ | 템플릿시 | — | ✓ |
| 미리보기 | iMessage | 카카오 | RCS | 이메일 | 잠금화면(AOS/iOS) | 선택 노드 |
| 단가(C) | 9.9 | 8.0 | 12.0 | 0.65 | 0.0 | 노드 합산 |
§ 10 · 17
톤 · 마이크로카피
존댓말 기본. 사실 + 즉시 가능한 액션. 한국어 우선.
| 상황 | 좋은 문장 | 피할 문장 |
|---|---|---|
| 빈 목록 | ✓ 아직 발송 이력이 없습니다. | ✗ 데이터 없음 |
| 신규 유도 | ✓ 첫 발송 시작하기 | ✗ 발송하기 (맥락 없음) |
| 일반 오류 | ✓ 오류가 발생했습니다. 잠시 후 다시 시도해 주세요. | ✗ Error 500 |
| 권한 부족 | ✓ 이 작업을 수행할 권한이 없습니다. | ✗ Forbidden |
| 한도 초과 | ✓ 이번 달 발송 한도(SMS 5,000건)를 초과했습니다. | ✗ Rate limit exceeded |
| 삭제 컨펌 | ✓ 정말 삭제하시겠습니까? 되돌릴 수 없습니다. | ✗ Are you sure? |