---
id: legal-luminance-design
service: Luminance
website: https://www.luminance.com
category: legal
document: design.md
source_prompt: legal-luminance-representative
language: ko
generated: 2026-07-18
---

# Luminance design.md

> 법률 서비스 서비스의 디자인 시스템, 화면 구조, 컴포넌트 상태, 접근성 기준을 바로 복사해 프로젝트 디자인 기준으로 쓰기 위한 문서다. 참고 서비스 Luminance에서는 정보 구조만 활용하며 로고, 고유 문구, 이미지, 화면 배치는 복제하지 않는다.

## 사용 목적

이 문서는 사이트나 앱을 만들기 전에 디자인 방향을 고정하는 **디자인 전용 기준서**다. AI 빌더, 디자이너, 프론트엔드 개발자에게 그대로 전달해 초기 화면 설계와 UI 구현의 기준으로 사용할 수 있다.

- 참고 서비스: [Luminance](https://www.luminance.com)
- 서비스 계열: 법률 서비스
- 화면 패턴: 법률 업무 화면
- 핵심 목표: 법률 정보와 사건 관리
- 핵심 객체: 사건·문서·기한
- 디자인 리스크: 정확성·버전·서명 상태

## 디자인 브리프

Luminance 계열의 공개 서비스에서 참고할 점은 법률 정보와 사건 관리 목표를 지원하는 정보 우선순위와 사용자의 판단 흐름이다. 새 제품은 독립적인 브랜드로 설계하고, 사건·문서·기한의 현재 상태와 다음 행동을 사용자가 3초 안에 이해하게 한다.

- 첫 화면은 사용자가 지금 할 수 있는 가장 중요한 행동 1개와 보조 행동 2개까지만 강조한다.
- 정확성·버전·서명 상태에 해당하는 정보는 숨기지 않고 결정 직전에 다시 확인하게 한다.
- 목록, 카드, 상세, 확인, 완료 상태가 같은 토큰과 컴포넌트 규칙을 공유해야 한다.
- 시각적 장식보다 실제 데이터, 상태, 에러 복구 경로를 우선한다.

## 공개 인터페이스 디자인 분석

- 분석 기준: 공개 첫 화면과 대표 작업 흐름에서 반복되는 시각·구조 패턴이다. 서비스 업데이트에 따라 달라질 수 있으므로 실사이트 캡처로 최종 확인한다.
- 화면 원형: 운영 콘솔
- 톤 & 매너: 보수적이고 안전 중심
- 정보 밀도: 높음
- 색채 전략: 잉크 중심의 제한된 강조색 (#6C4CF1)
- 탐색 구조: 사이드바 중심 컨텍스트 전환
- 구조 순서: 조회/요약 → 상태 타임라인 → 예외 안내 → 지원/검토
- 재사용할 패턴: 사건 요약 · 문서 표 · 기한 타임라인 · 서명 상태 · 검토 행동
- 독립 적용 규칙: 순서와 판단 원칙만 참고하고, 로고·카피·이미지·아이콘·고유 화면 배치는 복제하지 않는다.

## 화면 구조

### 1. 첫 화면

- 목적: 기한, 문서 버전, 서명 상태와 책임 소재를 명확히 해 실수를 줄인다.
- 상단 영역: 서비스명, 핵심 검색/입력/탐색 행동, 사용자 상태를 배치한다.
- 본문 영역: 사건 요약, 문서 목록, 기한 타임라인, 서명 상태, 검토 CTA 같은 컴포넌트로 우선순위가 높은 정보부터 배치한다.
- 하단 또는 보조 영역: 도움말, 정책, 최근 활동, 추천 또는 다음 행동을 둔다.

### 2. 목록과 탐색

- 카드는 제목, 핵심 메타, 상태, 주요 행동을 같은 순서로 보여준다.
- 필터는 최대 5개 우선 노출하고 나머지는 고급 필터로 접는다.
- 정렬 기준이 결과를 크게 바꾸는 경우 현재 정렬 값을 항상 표시한다.
- 빈 결과는 조건 초기화, 추천 조건, 수동 입력 대안을 함께 제공한다.

### 3. 상세와 결정

- 상세 화면은 요약, 근거, 위험/제약, 주요 CTA 순서로 구성한다.
- 금액, 시간, 권한, 개인정보, 취소 조건처럼 되돌리기 어려운 정보는 CTA 근처에 반복한다.
- 완료 후에는 다음 행동, 기록 위치, 되돌리기 가능 여부를 명확히 알려준다.

## 디자인 토큰

```css
:root {
  --color-primary: #6C4CF1;
  --color-ink: #17201D;
  --color-canvas: #F6F8F7;
  --color-surface: #FFFFFF;
  --color-tint: #6C4CF122;
  --color-danger: #DC2626;
  --color-success: #15803d;
  --color-warning: #b45309;
  --color-line: color-mix(in srgb, var(--color-ink) 14%, transparent);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --font-sans: Inter, Pretendard, "Noto Sans KR", system-ui, sans-serif;
}
```

## 타이포그래피

- H1: 32~44px, 한 화면의 목적을 한 문장으로 말한다.
- H2: 22~28px, 섹션의 작업 단위를 표현한다.
- Body: 15~16px, 실제 한국어 문장 길이에서 줄 간격 1.6 이상을 유지한다.
- Caption: 12~13px, 메타 정보와 보조 설명에만 사용한다.
- 숫자와 상태값은 tabular number가 가능한 글꼴 설정을 사용한다.

## 컴포넌트 명세

### 내비게이션

- 현재 위치, 되돌아갈 경로, 주요 작업 진입점을 항상 보여준다.
- 모바일에서는 하단 고정 내비게이션 또는 상단 접힘 메뉴 중 하나만 사용한다.

### 카드

- 제목, 핵심 메타, 상태, CTA 순서를 고정한다.
- 카드 전체 클릭과 내부 버튼 클릭이 충돌하지 않게 한다.
- 선택 상태는 배경색만이 아니라 테두리와 텍스트 상태로도 구분한다.

### 폼과 입력

- 라벨은 placeholder에 의존하지 않는다.
- 필수/선택, 형식, 오류 메시지를 입력 전부터 예측 가능하게 둔다.
- 오류 문구는 원인, 수정 방법, 보존된 입력값을 함께 알려준다.

### 버튼

- primary는 화면당 1개를 원칙으로 한다.
- destructive 행동은 즉시 실행하지 않고 확인 단계나 undo를 제공한다.
- disabled 버튼은 왜 비활성인지 보조 문구로 설명한다.

## 상태 설계

- Loading: 스켈레톤은 최종 레이아웃과 같은 크기로 제공해 레이아웃 이동을 막는다.
- Empty: 사용자가 다음에 할 수 있는 생성, 검색 초기화, 예시 보기 행동을 제공한다.
- Error: 재시도, 다른 경로, 고객지원 또는 수동 처리 방법을 함께 제공한다.
- Partial data: 일부 데이터만 최신이 아닐 때 마지막 갱신 시간과 영향 범위를 표시한다.
- Success: 완료 결과, 다음 행동, 기록 위치를 한 화면에서 확인하게 한다.
- Permission: 권한 요청 이유와 관리자에게 요청할 정보를 제공한다.

## 반응형 기준

- 360px: 단일 열, 핵심 CTA 우선, 보조 메타는 접힘 영역으로 이동한다.
- 768px: 목록과 상세를 순차 탐색으로 유지하되 필터를 상단 고정 영역에 둔다.
- 1280px: 목록+상세 또는 사이드바+본문 구조를 사용해 반복 작업 속도를 높인다.
- 고정 높이 카드에는 aspect-ratio, min-height, line-clamp를 사용해 텍스트 넘침을 막는다.

## 접근성 기준

- 모든 인터랙션은 키보드만으로 도달하고 실행할 수 있어야 한다.
- focus-visible은 배경과 3:1 이상 대비가 나야 한다.
- 터치 타깃은 최소 44px를 유지한다.
- 색상만으로 상태를 전달하지 말고 아이콘, 텍스트, aria 속성을 함께 사용한다.
- 모션은 prefers-reduced-motion에서 제거하거나 즉시 완료 상태로 대체한다.

## UX 라이팅

- CTA는 "확인", "다음" 대신 사용자의 결과를 말한다.
- 오류는 사용자를 탓하지 않고 수정 가능한 행동을 제시한다.
- 정확성·버전·서명 상태 관련 문구는 짧고 직접적으로 쓰며 숨은 조건을 만들지 않는다.
- 전문 용어가 필요한 경우 첫 등장에 쉬운 설명을 붙인다.

## AI 빌더에 붙여 넣는 디자인 지시문

```text
아래 design.md를 기준으로 법률 서비스 제품 화면을 설계해줘.
참고 대상: Luminance. 브랜드 자산, 고유 문구, 이미지, 화면 배치를 복제하지 않는다.
화면 패턴은 법률 업무 화면이며 핵심 목표는 법률 정보와 사건 관리이다.
사건·문서·기한의 상태와 다음 행동이 3초 안에 이해되도록 정보 위계를 만든다.
정확성·버전·서명 상태에 관한 예방, 설명, 복구 경로를 화면 안에 포함한다.
360px, 768px, 1280px 반응형과 loading, empty, error, partial-data, success, permission 상태를 모두 설계한다.
디자인 토큰, 컴포넌트 목록, 접근성 기준, UX 라이팅 예시, 완료 체크리스트를 결과에 포함한다.
```

## 완료 체크리스트

- [ ] 첫 화면에서 핵심 행동 1개가 가장 먼저 보인다.
- [ ] 사건·문서·기한의 상태, 관계, 다음 행동이 명확하다.
- [ ] 정확성·버전·서명 상태에 관한 설명과 복구 경로가 있다.
- [ ] 모든 핵심 컴포넌트에 loading, empty, error, success 상태가 있다.
- [ ] 360px, 768px, 1280px에서 텍스트와 버튼이 겹치지 않는다.
- [ ] 키보드 포커스, 스크린리더 이름, 터치 타깃, 대비 기준을 검수했다.
- [ ] Luminance의 로고, 고유 카피, 이미지, 픽셀 레이아웃을 복제하지 않았다.