원문
그날 밤 그는 아주아주아주 빠른 속도로 골목을 빠져나갔다.
제안
그날 밤 그는 몹시 빠른 속도로 골목을 빠져나갔다.
같은 부사를 반복해 강조하는 표현은 출판물에서 권장하지 않는 구어 표현입니다.
00 · Intro
디자인 시스템 v1.2
editorial은 교정·교열·윤문을 제공하는 AI 도서편집자 서비스입니다.
컴포넌트 인벤토리 — 우선순위
랜딩(/)과 로그인(/login)을 그릴 때 즉시 필요한 컴포넌트를 P0으로, 인증 후 화면(/library, /documents/:id)에 필요한 컴포넌트를 P1로 분류합니다.
| tier | component | 화면 | 본 문서 수록 |
|---|---|---|---|
| P0 | Button (light + dark, 3 sizes, icon, loading, group) | /, /login, 전 화면 | v1.1 |
| P0 | Text input · Password · Search | /login, 검색 | v1.1 |
| P0 | Field (label + helper + error) | /login, 설정 | v1.1 |
| P0 | Checkbox · Radio · Toggle | 설정, 필터, 옵션 | v1.1 |
| P0 | Top navigation (미인증) | /, /login, /about, /pricing | v1.1 |
| P0 | Sidebar (인증 후) | /library, /documents/:id | v1.1 |
| P0 | Tabs · Breadcrumb · Pagination | /library, /settings | v1.1 |
| P0 | File drop zone | /, 업로드 모달 | v1.2 예정 |
| P0 | Modal (사이즈, 헤더·본문·푸터 구조) | 로그인 모달, 업로드 모달, 공유 모달 | v1.2 |
| P0 | Social login button (kakao·naver·google) | /login, 로그인 모달 | v1.2 예정 |
| P1 | Toast · Inline alert | 전 화면 | v1.2 예정 |
| P1 | Tooltip · Popover | 전 화면 | v1.2 예정 |
| P1 | Dropdown menu | /library, 보고서 | v1.2 예정 |
| P1 | Badge · Tag · Filter chip · Status indicator · Format pill | /library, 보고서, 랜딩 | v1.2 예정 |
| P1 | Table | /library | v1.2 예정 |
| P1 | Card · Divider · 보고서 항목 카드 | /documents/:id | v1.2 예정 |
| P1 | Progress · Skeleton · Empty state | 업로드, 로딩, /library | v1.2 예정 |
| P2 | Patterns — 로그인 모달, 업로드 카드, 보고서 항목 | 플로우 조립 | v1.3 예정 |
v1.1 범위본 문서는 인벤토리의 상단 — Foundations + P0 컴포넌트 중 Button·Form·Choice·Navigation·Tabs/Breadcrumb/Pagination — 까지를 담습니다. 이후 v1.2에서 Overlay/Feedback/Display, v1.3에서 Patterns를 이어 작업합니다.
BR · Brand
Logo system
로고는 시스템에서 가장 자주 노출되는 단일 요소입니다. 워드마크와 심볼 두 단위로 구성되고, 두 단위 모두 Magnolia Script Regular를 기반으로 합니다.
font asset본 문서는 Magnolia Script Regular의 로컬 파일을
fonts/MagnoliaScript-Regular.woff2에 두는 것을 전제로 합니다. 파일 없는 환경에서는 fallback으로 Sacramento(Google Fonts)가 렌더링됩니다. 배포 전 파일 배치 필수.워드마크 — anatomy
wordmark소문자로만 표기. font-style normal — Magnolia Script는 italic variant가 없으므로 faux italic 적용 금지.
wordmark · large
editorial
familyMagnolia Script Regular
caselowercase — 문장 시작에서도 소문자
tracking-0.02em
stylenormal (no italic)
inline boost1.25em (주변 텍스트 대비)
색상 변형
color배경별 워드마크 색을 고정 매핑합니다. 그라데이션·이미지 위에는 직접 배치 금지 — 솔리드 패널 필수.
editorial
editorial
editorial
editorial
| 배경 | 워드마크 | 적용 |
|---|---|---|
| light (White ~ Gray 100) | Press Black #111111 | 앱 내부, 밝은 랜딩 섹션 |
| dark (Press Black ~ Ink Black) | White #FFFFFF | /, /login, /brand |
| gradient | White #FFFFFF | 랜딩 그라데이션 레이어 위 |
| Tiger Orange | Press Black #111111 | 액센트 패널, 캠페인 키 비주얼 |
| image | 사용 금지 | 솔리드 패널 위에 배치 필수 |
사이즈 · 클리어 스페이스
size · clearance최소 너비 96px (web) / 25mm (print). 클리어 스페이스는 로고 높이의 50%를 상하좌우.
clearance
editorial
| 컴텍스트 | 높이 | 비고 |
|---|---|---|
| 랜딩 히어로 — 중앙 | ~48px (font-size 4.8rem 점유) | 랜딩 완전 알림 필요 시 적용 |
| topnav (미인증) | 26px | 공통 탑 내비 |
| sidebar (인증 후) | 24px | 좌측 사이드바 상단 |
| /login 히어로 | 32px | 독립 인증 페이지 중앙 |
| inline 표기 | 1.25em | 본문 안 editorial 언급 시 |
| min (web) | 96px width | 이하 사용 금지 |
| min (print) | 25mm width | 인쇄 최소 규격 |
심볼 'e' — anatomy
symbol워드마크의 'e' 글리프 단독 사용. 시계 방향 7° 회전 + 하단 언더라인. 128×128 정방형 프레임.
| token | 값 | 설명 |
|---|---|---|
| frame | 128 × 128 | 정방형 컬레이 영역 |
| padding-top | 16 | 프레임 상단에서 e bbox까지 |
| padding-x | 24 | 좌우 여백 |
| e bbox (rotated) | 80 × 84 | 회전 후 외접 사각형 |
| rotation | +7° clockwise | CSS rotate(7deg) |
| underline | 80 × 2.5 | square cap. 회전하지 않음 |
| underline gap | 8 | e 어그리어 하단에서 언더라인 상단까지 |
| bottom area | 28 | gap + underline + 그 아래 여백 면적 |
사용처: 파비콘, 앱 아이콘, 라이브러리 로딩, 보고서 PDF 워터마크, 공유 섬네일. 워드마크가 들어갈 수 없을 때 대체 표기.
사용 금지
don't| 항목 | 규칙 |
|---|---|
| 회전 | 로고 자체의 추가 회전 금지. 심볼의 7°는 시스템 일부이므로 변경 대상이 아님 |
| 색상 | 규정 외 색상 변경 금지 |
| 효과 | 그림자, 아웃라인, 글로우 금지 |
| 반복 | 패턴/장식으로 반복 배치 금지 |
| 이미지 위 | 이미지 위 직접 배치 금지 — 솔리드 패널 위에 배치 |
| 가짜 이탤릭 | font-style: italic 적용 금지 (Magnolia Script는 italic variant가 없음) |
| 대소문자 | 대문자 표기 금지 — 문장 시작에서도 소문자 유지 |
| 인라인 보정 누락 | 본문 안에 워드마크 둘 때 1.25em 사이즈 보정 필수 |
01 · Foundations
Color
플레이북 §3의 코어 팔레트를 토큰 단위로 시각화하고, 다크/라이트 양 테마의 surface 계층을 v1.1에서 신설합니다.
코어 팔레트
coreLight 테마 — Surface · Border · Text
light앱 진입 후(/library, /documents 등)에 적용. 미색지 언더톤을 가진 웜 그레이.
| token | hex | 역할 | |
|---|---|---|---|
| surface/canvas | #FFFFFF | 메인 콘텐츠 배경 | |
| surface/raised | #FAFAF8 | 사이드바, 카드, 호버 행 | |
| surface/sunken | #F2F1EE | 인풋 비활성, 테이블 zebra | |
| border/default | #E5E4E0 | 구분선, 인풋 보더 | |
| border/strong · text/disabled | #D1D0CC | 비활성, 플레이스홀더 | |
| text/tertiary | #A8A6A0 | 아이콘 기본, 캡션 | |
| text/secondary | #6F6D67 | 본문 보조 | |
| text/primary | #111111 | 본문, 헤딩, CTA |
Dark 테마 — Surface · Border · Text
dark퍼블릭(/, /about 일부, /pricing 일부, /brand, /login)에 적용. Press Black 위의 elevation은 알파 대신 별도 hex 토큰으로 정의 — 인쇄잉크의 누적 농도 비유.
| token | hex / alpha | 역할 | |
|---|---|---|---|
| surface/page | #111111 | 페이지 배경 (Press Black) | |
| surface/raised-1 | #181715 | 카드, 인풋 배경 | |
| surface/raised-2 | #1F1E1C | 모달, 드롭다운 (Warm Black) | |
| surface/raised-3 | #26241F | 호버, 활성 | |
| border/default | rgba(255,255,255,.12) | 구분선, 카드 보더 | |
| border/strong | rgba(255,255,255,.22) | 포커스 외 강조 보더 | |
| text/primary | #FFFFFF | 헤딩, 강조 | |
| text/secondary | rgba(255,255,255,.7) | 본문 | |
| text/tertiary | rgba(255,255,255,.4) | 캡션, 메타 |
시맨틱 컬러
semantic익숙한 UI 컨벤션을 채택. warning·destructive는 vivid red, success는 채도 높은 green. Tiger Red는 브랜드 팔레트에만 유지하고 UI 시맨틱 알림에서는 분리합니다.
| role | light | dark | 적용 | |
|---|---|---|---|---|
| interaction | #F96815 | #F96815 | 포커스 링, 호버 전환, 진행 상태 | |
| warning / destructive | #DC2626 | #F87171 | 에러 메시지, 폼 검증 실패, 삭제 액션 | |
| success | #16A34A | #4ADE80 | 완료, 승인, 저장됨 | |
| info / neutral | #2C2A26 | #FFFFFF | 중립 안내 — 별도 색 도입하지 않음. 본문색으로 처리 |
02 · Foundations
Typography
Pretendard Variable 단일 스택. Magnolia Script는 로고와 인라인 editorial 표기에 한정.
스케일
scale4의 배수 + 15px 예외. rem base 62.5% (1rem = 10px).
specimen
display
교정·교열·윤문
title
원고를 받습니다
heading
교정 보고서
subtitle
제안 253건
body
합쇼체 기반 서술. 한 문장 한 메시지. 능동태 우선. 이중 부정 금지.
caption
2026.05.23 · 생성됨
확정15px 본문 유지. 16px 시스템이 만드는 "늙은 서비스" 인상을 피하고 밀도 키워드와 부합. 모바일은 rem 스케일 56.25%로 환산 시 13.5px까지 내려가지만 line-height 1.7과 웨이트 500이 가독성을 보조.
웨이트
weight다크 배경에서 400은 가늘게 보이므로 500부터 시작. Pretendard Variable 환경 보장.
weight
regular 500
편집자의 옆에 앉아 있습니다.
mid 650
편집자의 옆에 앉아 있습니다.
bold 800
편집자의 옆에 앉아 있습니다.
note650은 비표준 웨이트입니다. Variable 폰트가 로드되지 않는 fallback 환경에서는 700으로 라운딩됩니다. 600 표준 매핑으로 변경 검토 가능 — 단 현재 톤은 650의 두께가 만드는 "절제된 단단함"에 의존하므로 v1.1은 유지.
Magnolia Script — 워드마크 인라인
brand type본 문서는 Magnolia Script 라이선스 제약으로 Sacramento를 fallback으로 표시합니다. 실제 배포에서는 Magnolia Script Regular 우선.
inline
editorial은 설득하지 않습니다. 대신 설명합니다.
평문 안에서 1.25em 사이즈 보정, letter-spacing -0.02em, 항상 소문자.
03 · Foundations
Spacing
베이스 유닛 8px. 미세 유닛 4px은 아이콘 패딩과 인라인 간격에 한정.
scale
xs4 / 0.4rem
sm8 / 0.8rem
md16 / 1.6rem
lg24 / 2.4rem
xl32 / 3.2rem
2xl48 / 4.8rem
3xl64 / 6.4rem
컴포넌트 패딩 규칙
| component | horizontal | vertical | gap |
|---|---|---|---|
| button sm | 12px | — | 6px |
| button md | 16px | — | 8px |
| button lg | 20px | — | 8px |
| input | 12px | — | — |
| card | 24px | 24px | 16px (heading→body) |
| modal | 32px | 32px | 24px (header→body→footer) |
| table cell | 16px | 14px | — |
| sidebar nav-item | 12px | 10px | 12px (icon→label) |
| toast | 16px | 14px | 12px |
04 · Foundations
Radius
v1 플레이북에 미정의. 활자 인쇄의 직각 비유를 살려 작은 라운딩만 허용.
scale
none · 0
xs · 2px
sm · 4px
md · 6px
lg · 10px
pill · 999
| token | 적용 |
|---|---|
| none | 테이블 셀, 풀블리드 카드, 인쇄 영역 |
| xs · 2 | 체크박스, 아이콘 백그라운드 |
| sm · 4 | 버튼, 인풋, 토스트, 카드, 모달 — 표준 |
| md · 6 | 업로드 카드 등 강조 컨테이너 |
| lg · 10 | 이미지 컨테이너, 일러스트 프레임 |
| pill | 토글, 태그, 칩, 배지 |
05 · Foundations
Motion
UI 트랜지션 + 히어로 회전부. 한 화면에 다이내믹 요소는 하나만.
| token | duration | easing | 적용 |
|---|---|---|---|
| fast | 120ms | ease-out | 버튼·인풋 hover/focus, 작은 색 변화 |
| med | 200ms | ease-out | 드롭다운 열기, 토스트 입장 |
| slow | 320ms | ease-in-out | 모달, 탭 전환 |
| ambient | 16–20s | ease-in-out | 그라데이션 블롭 드리프트 (플레이북 §2.3) |
원칙한 화면에 다이내믹 요소는 하나만(플레이북 §5.6). UI 트랜지션은 항상 짧고 비독립적 — 사용자의 액션에 즉시 반응. 자동 재생되는 모션은 그라데이션과 히어로 회전부에 한정.
텍스트 트랜지션 — 히어로 회전부
hero rotator랜딩 히어로의 회전부 모션. 새 문장이 위에서 내려와 자리를 잡고, 기존 문장은 아래로 사라집니다. 문장이 자리를 남고 갈아끼워지는 구조.
live · descending
교정·교열·윤문,
미묘한 표현 하나까지
사소한 문장 하나까지
원고 전체를 한번에
| token | 값 | 설명 |
|---|---|---|
| hold | 3000ms | 한 문장이 정지된 채 머무르는 시간 |
| transition | 300ms | 새 문장 in (translateY -100→ 0) · 기존 문장 out (0 → +100) 동시 진행 |
| direction | top ↓ middle ↓ bottom | 새 문장은 위에서 진입, 기존 문장은 아래로 퇴장 |
| opacity | 0 ↔ 1 | translateY와 동기 적용. 순수 슬라이드 아닌 페이드 병행 |
| easing | cubic-bezier(.2,.7,.2,1) | ease-out — 활자가 멈춰서는 무게감 |
| cycle per phrase | 3300ms | hold 3000 + transition 300 |
| full cycle (3문) | 9.9s | 3 phrases × 3.3s |
| reduced motion | 정적 | prefers-reduced-motion 감지 시 첫 문장만 노출, 회전 중단 |
v1 → v2v1 정적: 새로고침마다 3문 중 1문 랜덤 선택, 애니메이션 없음. v2 회전: 상기 스펙. 그라데이션 스냅샷이 정적이므로 텍스트 회전이 단일 다이내믹 요소.
문안 확정3문자. 마침표 없음. "편집자의 첫번째 시선"은 핸드오프 §4.4에서 삭제.
06 · Foundations
Icons
Remix Icon 채택. 2px 스트로크, 스퀘어 코너의 line 버전을 기본으로 하고, fill은 활성·선택 상태에 한정.
소스 · 사이즈
source · size오픈소스 셋 — Apache 2.0. CDN 또는 SVG 직접 임베드 모두 허용. 본 문서는 webfont 방식으로 로드.
size
24 · 기본
20 · 캡션급
16 · 인라인
| size | 적용 |
|---|---|
| 24 px | 버튼 내, 사이드바, 일반 액션 — 기본 |
| 20 px | 인풋 affix, 테이블 행 액션, 캡션과 동행 |
| 16 px | 본문 인라인, 메타 정보, 작은 배지 |
Line vs Fill
variantLine 기본, Fill은 선택됨·on·활성 상태에 한정. 같은 컴포넌트 안에서 line/fill 혼용 금지.
line · fill
line · 기본
fill · 활성
line · 일반
fill · 알림
컬러 · 상태
color아이콘은 텍스트와 동행 시 텍스트와 같은 색을 따릅니다. 단독 사용 시 컨텍스트별 컬러 매핑.
light
primary
#111 — 본문색
secondary
#6F6D67 — 본문 보조
tertiary
#A8A6A0 — 캡션, affix
interaction
Tiger Orange — 활성, 호버
destructive
#DC2626 — 삭제, 경고
success
#16A34A — 승인, 완료
disabled
#D1D0CC — 비활성
dark
primary
#FFF
secondary
rgba(255,255,255,.7)
tertiary
rgba(255,255,255,.4)
interaction
Tiger Orange
자주 쓰이는 아이콘
commoneditorial 시스템에서 반복 등장하는 아이콘 모음. 같은 의미에는 같은 아이콘만.
common
upload-line업로드
folder-2-line라이브러리
file-text-line원고·문서
bank-card-line결제·플랜
settings-3-line설정
chat-3-line문의
logout-circle-r로그아웃
search-line검색
filter-3-line필터
notification-3알림
download-line받기
share-line공유
bookmark-line북마크
check-line승인
close-line무시·닫기
more-2-fill더보기
eye-line비밀번호 보기
edit-line편집
delete-bin-line삭제
arrow-left-s이전
arrow-right-s다음
arrow-down-s펼치기
error-warning경고·에러
information-line정보
교정 전용 아이콘 — TBD
custom교정 부호(가운뎃점, 띄어쓰기 표시 등) 전용 아이콘이 필요한 경우 Remix와 동일 스펙(2px 스트로크, 스퀘어 코너, 24×24 그리드)으로 커스텀 제작. 보고서 뷰의 항목 카드와 다운로드된 주석본에서 사용.
사용 규칙
| do | don't |
|---|---|
| 텍스트와 동행 시 같은 색·같은 베이스라인 | 아이콘만 별도 색 (강조하려면 라벨도 동일 색) |
| line/fill 한 화면 내 한 가지로 통일 | 같은 컴포넌트 안에 line + fill 혼용 |
| 중요 액션은 라벨과 함께 | 아이콘만으로 의미 전달 (접근성 ↓) |
| 버튼 내 아이콘은 라벨 앞에 | 같은 버튼군에서 정렬 방향이 일관되지 않음 |
| 같은 의미에는 같은 아이콘만 | upload/cloud-upload 등 동의 아이콘 병행 |
07 · Components
Buttons
4티어 × 3사이즈 × 라이트·다크 변형. primary 호버 시 오렌지 전환은 "블랙이 반응하면 오렌지가 드러난다"는 다크 랜딩 내러티브와 일관.
티어 (light theme)
tier · light
light
primary
secondary
tertiary
ghost
state
default
hover
disabled
loading
티어 (dark theme)
tier · dark
dark
primary
secondary
tertiary
ghost
사이즈
size
size
sm · 32
md · 40 (기본)
lg · 48
| size | height | padding-x | font | 주 사용처 |
|---|---|---|---|---|
| sm | 32 | 12 | 13/500 | 테이블 행 액션, 필터 칩 옆 |
| md | 40 | 16 | 14/650 | 폼, 모달, 일반 액션 (기본) |
| lg | 48 | 20 | 15/650 | 랜딩 CTA, 결제 CTA |
아이콘 · 버튼 그룹
icon · group
variants
segmented (filter)
사용 규칙
| do | don't |
|---|---|
| 한 화면 안 primary는 1개 — 가장 중요한 액션 1개에만 | 같은 카드/모달 안 primary 2개 이상 |
| destructive는 secondary + Tiger Red text 조합 | destructive에 primary fill 적용 (Tiger Red가 한 화면에서 두 의미를 가짐) |
| 버튼 라벨은 개조식 동사 종결 — "업로드", "분석 시작" | ~하기, ~해보세요 — 해요체 금지 |
| 로딩 시 라벨 교체 — "분석 중", "저장 중" | 스피너만 표시 + 라벨 유지 (사용자가 무엇이 진행 중인지 모름) |
08 · Components
Form
Field는 label + control + helper의 3단 구조. 에러는 helper 영역에 인라인 표시 — 별도 토스트로 분리하지 않습니다.
Text Input (light)
input · light
states
default
이메일업무용 이메일 권장
hover
이메일
focus
이메일
filled
이메일
error
이메일이메일 형식이 아닙니다
disabled
이메일
Text Input (dark)
input · dark
states
default
이메일
focus
이메일
filled
이메일
error
이메일이메일 형식이 아닙니다
Password · Search · Affix
variants
variants
password
비밀번호
search
원고 검색
prefix label
서브 도메인
editorial.kr/
Textarea · Select
complex
complex
요청 메모
선택 입력 · 최대 500자
파일 포맷
원본 포맷 그대로 다운로드됩니다
UX 라이팅 규칙 (필드 카피)
| slot | rule | 예시 |
|---|---|---|
| label | 명사 종결 | 이메일 / 비밀번호 / 요청 메모 |
| placeholder | 형식 예시 또는 동사 종결 | name@example.com / 원고 제목으로 검색 |
| helper | 합쇼체 또는 개조식 | 업무용 이메일 권장 / 선택 입력 |
| error | 개조식 — 무엇이 문제인지 명시 | 이메일 형식이 아닙니다 / 비밀번호 8자 이상 |
tone"~해주세요" 시오체 금지. "올바른 이메일을 입력해주세요" → "이메일 형식이 아닙니다". 청자(편집자) 앞에서 행동을 지시하지 않고 상태를 알립니다.
09 · Components
Choice — Check · Radio · Toggle
선택 UI 3종. Checkbox·Radio는 라이트에서 Press Black, 다크에서 Tiger Orange로 활성색이 분기합니다.
light
checkbox
radio
toggle
dark
checkbox
radio
toggle
사용 규칙
| component | 사용 | 금지 |
|---|---|---|
| checkbox | 다중 선택, on/off 동의 | 2개 옵션 중 택1 (radio 사용) |
| radio | 2~5개 옵션 중 단일 선택, 옵션이 한 화면에 다 보임 | 6개 이상 (select 사용) |
| toggle | 즉시 적용되는 설정 — 저장 버튼 없음 | 폼 안 — 제출 시 적용되는 옵션 (checkbox 사용) |
11 · Components
Tabs · Breadcrumb · Pagination
화면 내 내비게이션 3종. 설정 페이지, 보고서 필터, 라이브러리 페이지네이션에 각각 사용.
Tabs
in-page nav
light
tab panel
dark
tab panel
spec라이트는 언더라인 Press Black + 라벨 weight 650. 다크는 언더라인 Tiger Orange로 분기 (다크에서 검정 언더라인은 보이지 않음). 라벨 옆 카운트는 같은 weight, 같은 색.
Breadcrumb
crumbsspec구분자는 슬래시(/). 마지막 항목은 링크 아님, 현재 위치. 사용처: /documents/:id 상단 (라이브러리로 돌아가는 동선). /library는 단일 뎁스이므로 breadcrumb 미사용.
Pagination
page nav
light
···
spec10건/페이지 (프로덕트 §11.3). 활성 페이지는 Press Black fill + White text. 첫 페이지에서 prev disabled, 마지막에서 next disabled. 페이지 수 ≤ 7이면 ellipsis 미사용.
12 · Components
Modal
컨텍스트를 유지한 채 사용자의 결정을 요청하거나 보조 정보를 표시하는 오버레이. 페이지 전환을 대체하기 위한 것이지, 정보를 숨기기 위한 것이 아닙니다.
언제 모달을 쓰는가
when| do | don't |
|---|---|
| 현재 컨텍스트(원고, 보고서)를 잃지 않고 결정해야 하는 액션 — 공유 링크 생성, 비용 확인, 계정 삭제 | 풀 페이지가 더 자연스러운 작업 — 결제 체크아웃, 상세 설정 |
| 인라인 처리하기엔 비중이 큰 다단계 입력 — 업로드 5단계 | 인라인으로 충분한 입력 — 한 줄짜리 폼, 단순 토글 |
| 토스트로는 부족한 경고, 비가역 액션 직전 확인 | 단순 알림, 일시적 피드백 — 토스트로 |
| 한 화면에 한 모달만 | 모달 위 모달 — 동선이 깊어지면 페이지로 |
Anatomy
structure3단 구조 — Header(제목 + 닫기) / Body(콘텐츠) / Footer(액션). Header와 Footer는 선택적이지만, Header 없는 모달은 Body 시작 패딩을 추가합니다.
anatomy · md 560
공유 링크를 생성합니다
이 링크를 가진 누구나 보고서를 열람할 수 있습니다. 미출간 원고가 인터넷에 노출되는 것이므로 만료 기간을 짧게 설정하시기 바랍니다.
| region | padding (T R B L) | type / 사이즈 |
|---|---|---|
| header | 20 · 24 · 12 · 24 | subtitle · 20/650 |
| body | 0 · 24 · 0 · 24, overflow scroll | body · 15/500/1.7 |
| footer | 16 · 24 · 20 · 24 | button md, gap 8, 우측 정렬 |
| close button | 32 × 32 | icon 18 |
| radius | 6 (r-md) | — |
| backdrop | — | rgba(17,17,17,.55) |
| shadow (light) | — | 0 20 60 rgba(0,0,0,.18) + 0 2 6 rgba(0,0,0,.06) |
| max-height | — | calc(100vh - 4rem), 내부 스크롤 |
사이즈
size콘텐츠 양에 따라 sm 400 / md 560 / lg 720. 너비는 정해진 3단계 밖으로 가지 않습니다. 높이는 콘텐츠에 따라 가변, 뷰포트의 100% - 4rem 초과 시 Body 내부 스크롤.
정말 삭제하시겠습니까
이 원고와 보고서를 더는 불러올 수 없습니다.
결제수단 변경
카드 번호
원고 업로드
총 글자수 42,318자. 구독 잔여(50,000자) 내에서 처리됩니다. 추가 비용 없음.
변형
variantsDestructive — 비가역 액션
비가역 액션의 confirm 모달은 primary 자리에 btn--destructive (vivid red #DC2626). 라벨에 결과를 명시 — "삭제" / "영구 삭제" / "취소(환불 불가)" 같은 구체적 동사.
계정 삭제
계정을 삭제하면 모든 원고와 보고서를 더는 불러올 수 없습니다. 진행 중인 구독은 즉시 종료되며, 잔여 기간에 대한 환불은 제공되지 않습니다.
No Header — 단일 메시지 + 단일 액션
제목 없이 본문 한 문장 + CTA 하나로 끝나는 가벼운 모달. 닫기 X는 좌상단 우측에 절제된 크기로.
보고서 PDF를 다운로드 폴더에 저장했습니다.
Dark — 미인증 컨텍스트 (로그인 모달)
미인증 상태(/, /pricing 등 다크 페이지)에서 액션 시 띄우는 로그인 모달은 다크 변형. 워드마크가 헤더 자리에 절제된 사이즈로.
editorial
계속하려면 로그인이 필요합니다
또는
note로그인 모달은 패턴 v1.3에서 완성. 본 데모는 다크 모달 + 로고/소셜/디바이더/폼이 들어갈 공간을 보여주는 1차안.
Backdrop · Dismiss
behavior| 트리거 | 기본 동작 | 예외 |
|---|---|---|
| Backdrop 클릭 | 닫음 | 입력 중인 폼이 있는 모달, 다단계 모달, destructive — 닫지 않음 |
| Esc 키 | 닫음 | 제출 직전 단계 — 확인 후 닫음 |
| X 버튼 | 항상 닫음 | 없음 (구현 가능하지만 권장 X) |
| Cancel 버튼 | 닫음 + 진행 사항 폐기 | — |
| Primary 액션 | 액션 후 닫음 (대부분) | 다단계 모달 — 다음 스텝으로 |
접근성 · 행동
a11y| 항목 | 구현 |
|---|---|
| Focus trap | 열리는 순간 첫 인터랙티브 요소로 포커스, Tab 순환은 모달 내부로 제한 |
| 이전 포커스 복원 | 닫히면 모달을 띄운 요소로 포커스 복귀 |
| Body scroll lock | 모달 열린 동안 body overflow hidden |
| aria-modal | true 설정, role="dialog" |
| aria-labelledby | 모달 title id 참조 |
| aria-describedby | 모달 body 첫 단락 id 참조 (옵션) |
| 닫기 버튼 aria-label | "닫기" |
| 모션 | 입장 320ms ease-in-out fade + scale 0.96→1, 퇴장 200ms ease-out |
| reduced-motion | scale 제거, opacity만 적용 |
UX 라이팅 — 모달 카피
| slot | rule | 예시 |
|---|---|---|
| title | 명사 또는 동사 종결. 무엇을 하는 모달인지 한 문장으로 | 공유 링크를 생성합니다 / 계정 삭제 / 결제수단 변경 |
| body | 합쇼체. 결과와 영향을 명시. 군더더기 없이 | 이 링크를 가진 누구나 보고서를 열람할 수 있습니다. |
| primary button | 구체적 동사. "확인" 대신 결과를 명시한 동사 | 링크 생성 / 영구 삭제 / 교정 시작 |
| cancel button | "취소" 통일 | 취소 |
| destructive | 버튼에 결과를 명시. 본문에 비가역성 언급 | 영구 삭제 + "더는 불러올 수 없습니다" |
tone"~하시겠습니까" 같은 시오체 회피. "정말 삭제하시겠습니까" → "계정 삭제" (제목) + 본문에 결과 설명 + 버튼 "영구 삭제".
13 · Components
Dropdown menu
트리거 옆에 나타나는 옵션 목록. 액션 메뉴(kebab → 컨텍스트 액션)와 선택 메뉴(필터·옵션) 두 변형.
Anatomy · Light
light
action menu
Anatomy · Dark
dark
dark
스펙 · 행동
| 항목 | 값 |
|---|---|
| min-width | 200 |
| item padding | 8 · 12 |
| icon size | 16 |
| radius | 4 (menu), 2 (item) |
| shadow | 0 8 24 rgba(0,0,0,.10) + 0 2 4 rgba(0,0,0,.04) |
| open | fade + translateY(-4 → 0), 120ms ease-out |
| 키보드 — ↑↓ | 아이템 포커스 이동 |
| 키보드 — Enter | 활성 아이템 실행 |
| 키보드 — Esc | 닫기, 트리거로 포커스 복원 |
| 키보드 — Tab | 닫고 다음 포커스로 |
| backdrop 클릭 | 닫기 (외부 클릭) |
| aria role | menu, menuitem |
사용 규칙
| do | don't |
|---|---|
| 5~8개 옵션 — 짧은 목록 | 10개 이상 — 검색/모달로 |
| destructive는 마지막, divider로 분리 | destructive를 일반 액션 사이에 끼움 |
| 아이콘 + 라벨 정렬 통일 | 일부만 아이콘 |
| 토글 가능한 옵션은 활성 아이템에 check 표시 | 다중 선택은 select 패널로 |
14 · Components
Tooltip
아이콘 버튼처럼 라벨이 생략된 요소에 부가 설명을 붙입니다. 한 줄 짧은 텍스트만, 인터랙티브 요소 없음.
방향
position
positions
⌘K · 검색
top
필터
bottom
공유
left
교정 근거 보기
right
스펙 · 행동
| 항목 | 값 |
|---|---|
| 배경 | Press Black #111111 |
| 텍스트 | White, 12/500 |
| padding | 6 · 9 |
| radius | 2 (xs) |
| arrow | 8 × 8 정사각형 45° 회전 |
| offset | 트리거에서 8px |
| delay in | 300ms |
| delay out | 0ms |
| 트리거 | hover, focus (모바일에서 미노출) |
| 위치 자동 보정 | 뷰포트 가장자리에서 반대 방향으로 전환 |
| 최대 길이 | 한 줄. 두 줄 이상 — popover로 승격 |
don't인터랙티브 요소 안 (링크, 버튼). 모바일에서 호버 없음 — aria-label로 대체 필요. 핵심 정보를 툴팁에만 의존하지 않음.
15 · Components
Toast · Inline alert
시스템 피드백 두 종. Toast는 일시적·위치 외부(우상단), Alert는 페이지 안 인라인. 둘 다 무드는 절제 — 깜빡임·진동 없음.
Toast
temporary우상단에 고정, 자동 dismiss. 아이콘 + 메시지 + 액션(선택) + 닫기 버튼.
variants
보고서를 다운로드 폴더에 저장했습니다.
네트워크 연결이 끊겼습니다. 저장된 진행 사항은 보존됩니다.
분석이 완료되었습니다. 비용을 확인해주세요.
북마크 위치를 저장했습니다.
| variant | auto-dismiss | 적용 |
|---|---|---|
| success | 3s | 완료, 저장됨 |
| info | 4s | 알림, 안내 |
| warning | 수동 dismiss | 실패, 에러, 주의 |
| neutral (기본) | 3s | 일반 피드백 |
| position | — | top: 24, right: 24 (데스크톱) / top: 12 (모바일) |
| 스택 | — | 최대 3개. 4번째 발생 시 가장 오래된 것 dismiss |
| 모션 | — | 입장 slide-in 우→좌 200ms, 퇴장 fade 160ms |
| 액션 슬롯 | — | 1개 — "다시 시도", "열기" 등 동사 종결 |
Inline Alert
persistent페이지 안에 머무는 알림. 폼 검증, 상황 안내, 결제 누락 등. 사용자가 직접 닫기 전까지 표시.
variants
저장됨변경 사항을 모두 반영했습니다.
이메일 형식이 아닙니다예: name@example.com 형식으로 입력해주세요.
구독이 7일 후 만료됩니다플랜 변경 또는 갱신을 진행해주세요.
북마크 위치마지막으로 본 항목 #128. 이어보기를 누르면 해당 위치로 이동합니다.
tone제목(strong)은 결론. 본문은 한 줄 보조 설명. "방법을 알려드릴게요" 같은 친절 보장 어휘 없이 구조로 친절 — 무엇이 일어났고 무엇을 하면 되는지만.
16 · Components
Progress · Skeleton · Empty
로딩과 비어있음의 세 표현. Progress(진행률 있음), Skeleton(레이아웃 유지하며 대기), Empty(데이터 없음).
Progress
progress
determinate · indeterminate
교정 진행62%
구독 사용량31,840 / 50,000 자
분석 중—
| variant | 적용 |
|---|---|
| determinate · neutral | 구독 사용량 등 통계 |
| determinate · orange | 능동적 진행 — 교정, 업로드 |
| indeterminate | 시간 예측 불가 — "분석 중" |
| height | 6px (얇음) / 4px (인라인 셀) |
| radius | pill |
Skeleton
layout-preserving load레이아웃을 유지하면서 콘텐츠가 도착하기를 기다림. 스피너 대신 사용 — 사용자가 화면 구조를 미리 인지.
card skeleton
| variant | shape |
|---|---|
| text | 1em 높이, 라인별 — 마지막 라인 60% 너비 |
| box | 이미지·카드 영역 |
| circle | 아바타, 아이콘 |
| shimmer | 1.6s loop, 좌→우 그라데이션 |
| color | Gray 100 base + White 60% shimmer |
Empty state
no data아직 데이터가 없거나 검색 결과가 없을 때. 아이콘(또는 일러스트 슬롯) + 제목 + 본문 + 1개 CTA.
empty
아직 원고가 없습니다
교정·교열·윤문은 원고를 받는 순간 시작됩니다.
검색 결과 없음
"김작가 미공개"로 검색했습니다. 다른 키워드로 다시 시도해주세요.
tone제목은 사실 — "아직 원고가 없습니다". 본문은 다음 행동 안내 — 명령형 아닌 서술. CTA 1개만, 가장 자연스러운 다음 행동.
17 · Components
Markers — Badge · Tag · Chip · Pill · Status
짧은 라벨 5종. 의미와 모양이 다르므로 혼용 금지.
Badge — 카운트 · 라벨
badge숫자 또는 짧은 라벨. 항상 컴포넌트 옆에 종속(독립 사용 X).
badge
128
NEW
PRO
완료
실패
초안
Status indicator — dot + label
status처리 상태 4종. 점 + 라벨 조합으로 라이브러리 테이블·보고서 메타에 사용.
status
대기
분석 중
완료
실패
| state | color | animation |
|---|---|---|
| queued | Gray 400 | — |
| processing | Tiger Orange | pulse 1.4s |
| done | #16A34A | — |
| failed | #DC2626 | — |
Tag — 텍스트 라벨
tag분류·메타. 사각 라운드, 작은 폰트, 가능하면 제거 가능(×).
tag
단행본
논픽션
윌북
2026년 가을
김작가
Filter chip
chip클릭하면 필터가 적용되는 토글 칩. 카운트 부속 표시 가능. 활성 시 Press Black fill.
filter
Format pill — 파일 포맷
format업로드 카드, 라이브러리 행, 다운로드 옵션에서 사용. 모노스페이스, 전체 대문자.
light
PDF
DOCX
HWP
HWPX
dark
PDF
DOCX
HWP
HWPX
specHWP·HWPX는 Tiger Orange 액센트 변형 — editorial이 한국어 출판에 최적화되어 있다는 시그널. PDF·DOCX는 중립 그레이.
차이 정리
| marker | shape | 독립 | 인터랙션 | 주 사용처 |
|---|---|---|---|---|
| Badge | pill, 작음 | X — 컴포넌트 부속 | X | 카운트, 상태 라벨 |
| Status | dot + 라벨 | O | X | 처리 상태 4종 |
| Tag | 사각, 작음 | O | 제거 가능 | 분류, 메타 |
| Filter chip | pill, 보통 | O | 클릭 토글 | 필터 선택 |
| Format pill | 사각 미니, 모노 | O | X | 파일 포맷 |
18 · Components
Table
/library의 메인 표시 컴포넌트. 헤더(정렬) + 행(호버·액션) + zebra 없음 — 인쇄지의 간결함.
library table
| 파일 이름 | 포맷 | 요청 날짜 | 글자수 | 상태 | |
|---|---|---|---|---|---|
| 미공개 단행본 — 김작가 원고 | HWP | 2026.05.22 14:32 | 128,420자 | 완료 |
|
| 에세이집 초고 v3 | DOCX | 2026.05.20 11:08 | 87,310자 | 분석 중 |
|
| 번역 원고 — 이태리 단편선 | HWPX | 2026.05.18 09:44 | 156,920자 | 완료 |
|
| 시집 교정본 | 2026.05.15 16:20 | 22,840자 | 실패 |
|
| region | spec |
|---|---|
| header | 11.5/650, uppercase, letter-spacing 0.06em, Gray 500 |
| cell padding | 14 · 16 |
| row hover | Gray 50 background, row actions fade-in |
| border | Gray 200 between rows, Gray 300 below header |
| zebra | 없음 (인쇄지 간결함) |
| row actions | opacity 0 → 1 on hover, 우측 정렬 |
| sort indicator | caret 4px, Gray 300(idle) → Press Black(active) |
| row height | auto (최소 56px) |
19 · Components
Card · Divider
컨테이너와 구분선. Card는 정보 그룹핑, Divider는 의미적 분리.
Card
card
variants
기본 카드
Default1px Gray 200 보더 + Gray 200 채움 없음. 라이브러리 카드, 설정 패널 등.
Raised 카드
Raised보더 대신 그림자. 모달 위 부유 요소, 카드 단독으로 도드라져야 할 때.
Divider
divider섹션 사이의 의미적 분리. 단순 라인 또는 텍스트 라벨 포함.
divider
또는
2026년 5월
divider · dark
또는
use"또는" — 로그인 폼에서 소셜과 이메일 사이. "2026년 5월" — 라이브러리 테이블에서 월별 그룹핑. 의미 없는 분리는 spacing으로.
20 · Components
File drop zone
랜딩의 업로드 카드 핵심 + 업로드 모달의 1단계. 드래그 영역 + 포맷 배지 + CTA + 디스크립션 슬롯.
상태
states · dark랜딩(/)은 다크 테마, 업로드 모달은 라이트 테마. 양쪽 모두 동일 anatomy.
landing · dark
원고를 드래그하거나 클릭하여 업로드
PDF
DOCX
HWP
HWPX
최소 1,000자. 비밀번호 PDF는 해제 후 업로드해주세요.
dragover · is-dragover
놓으면 분석을 시작합니다
error · is-error
지원하지 않는 포맷
PDF · DOCX · HWP · HWPX 중 하나로 다시 시도해주세요.
스펙
| state | border | background |
|---|---|---|
| default | 1.5px dashed Gray 300 | White (light) / rgba(255,255,255,.02) (dark) |
| hover | 1.5px dashed Gray 400 | Gray 50 |
| dragover | 1.5px solid Tiger Orange | rgba(249,104,21,.04) |
| error | 1.5px dashed #DC2626 | rgba(220,38,38,.04) |
| disabled | 1.5px dashed Gray 200 | Gray 50 — 인터랙션 없음 |
| radius | 6 (r-md) | — |
| padding | 64 · 32 | — |
카피 슬롯
| slot | 예시 | tone |
|---|---|---|
| main | 원고를 드래그하거나 클릭하여 업로드 | 개조식, 동사 종결 |
| format pills | PDF · DOCX · HWP · HWPX | 고정 |
| helper | 최소 1,000자. 비밀번호 PDF는 해제 후 업로드해주세요. | 합쇼체 · 1줄 |
| CTA | 분석 시작 | 개조식 동사 |
| dragover | 놓으면 분석을 시작합니다 | 합쇼체 |
| error | 지원하지 않는 포맷 + 보조 안내 | 사실 명시 → 다음 행동 |
22 · Product patterns
제품 화면 패턴
실제 editorial 화면에서 반복되는 상위 패턴. 컴포넌트 조합의 목적과 상태 표현을 문서화해 랜딩, 라이브러리, 보고서가 같은 언어로 움직이도록 합니다.
인증 헤더 · 앱 셸
로그인 상태의 랜딩 헤더는 데스크톱/태블릿에서 알림, 프로필 칩, 라이브러리 버튼 순서로 배치합니다. 모바일 768 미만에서는 헤더 밀도를 낮추기 위해 알림과 프로필 칩을 숨기고 라이브러리 버튼만 유지합니다. 사이드패널이 있는 앱 화면은 이미 라이브러리 진입점이 있으므로 데스크톱/태블릿 topbar에는 알림과 프로필 칩만 두고, 모바일 앱 셸은 알림을 햄버거 패널 상단으로 이동합니다.
app shell · centered main container
미공개 단행본 — 김작가 원고
사이드패널을 제외한 메인 콘텐츠는 최대 1280px 컨테이너 안에서 중앙 정렬합니다.
상태 표시 · 분석 진행
라이브러리 테이블의 분석 중 상태는 진행률이 핵심 정보이므로 원형 진행률과 퍼센트를 함께 씁니다. 간단한 배지나 리스트 안의 처리 상태는 점형 status-dot을 사용합니다.
분석 중 40%
완료
실패
대기
보고서 제안 항목
보고서의 반복 카드 구조는 원문, 제안, 근거, 액션 순서를 유지합니다. 무시는 삭제가 아니므로 destructive 버튼이 아니라 secondary/ghost 계열로 표현합니다.
업로드 · 교정 진행
업로드 모달의 교정 단계는 구조, 맞춤법, 어법, 문체, 일관성 순서로 고정합니다. 완료는 체크, 진행 중은 주황색 pulse, 예정은 빈 원으로 표시합니다.
36%
맞춤법을 검토하고 있습니다.
표기 오류와 문장부호 등 명확한 교정 후보를 추립니다.
구조
맞춤법
어법
문체
일관성
다운로드 옵션 그룹
다운로드 모달은 포함할 제안 상태와 받을 파일을 분리합니다. 토글/체크박스 카드가 같은 밀도와 대비를 유지해야 하며, 하위 상태는 간결한 라벨만 씁니다.
23 · 다음
다음 작업
v1.2 — Overlay · Feedback · Display (다음 라운드)
| component | 핵심 결정사항 |
|---|---|
| File drop zone | 랜딩용 업로드 카드 — 드래그 영역, 포맷 배지, CTA, 하단 디스크립션 슬롯 |
| Dropdown menu | 액션 메뉴 vs 셀렉트 메뉴 구분, 키보드 내비, 아이콘+라벨 정렬 |
| Tooltip · Popover | 딜레이 (300ms in / 0 out), 위치 자동 보정, 포커스 트리거 |
| Toast · Inline alert | 위치 (우상단), 자동 dismiss 시간, action 슬롯, success/warning/error 분기 |
| Progress · Skeleton | 업로드 5단계(분석→비용→교정→검증→보고서) 시각화 패턴 |
| Empty state | /library 빈 상태, 검색 결과 없음 — 카피 + 일러스트 슬롯 규칙 |
| Badge · Tag · Filter chip · Format pill | 상태/카운트/필터 3계열. PDF·DOCX·HWP·HWPX 포맷 배지 |
| Status indicator | 분석중·완료·실패 상태 표기 — 보고서 행, 라이브러리 테이블 |
| Table | /library 테이블 — 정렬, 호버, 행 액션, 빈 상태 |
| Card · Divider | 일반 카드, 보고서 항목 카드(원문→제안→근거) |
| Social login button | kakao · naver · google — 브랜드 컬러 매핑 |
v1.3 — Patterns (조립)
| pattern | 구성 |
|---|---|
| 로그인 모달 | 워드마크 + 소셜 4 + 디바이더 + 이메일 폼 + 하단 링크 |
| 업로드 카드 (랜딩) | 드롭존 + 포맷 배지 + CTA + 디스크립션 |
| 업로드 모달 5단계 | 분석 → 비용 확인 게이트 → 교정 → 검증 → 보고서 |
| 보고서 항목 카드 | 원문 → 수정 제안 → 교정 근거 → 승인/무시 |
| 공유 모달 | 경고 → 만료 기간 → 링크 생성 → 복사 |
21 · Components
Social login buttons
SSO 3종 — 카카오 · 네이버 · Google. 브랜드 컬러 그대로, 가입·로그인 통합이므로 동사는 "시작".