# 07. Design System

## 1. 디자인 방향

운영 도구처럼 차갑게 만들면 지역성과 기부 동기가 사라지고, 관광 랜딩처럼 과장하면 공공성과 신뢰가 약해진다. 신규 서비스는 지역 콘텐츠의 따뜻함과 기부/세액공제의 신뢰성을 동시에 가져야 한다.

키워드:

- 신뢰
- 지역성
- 명료한 혜택
- 탐색 효율
- 모바일 우선
- 운영 가능한 컴포넌트

## 2. 타이포그래피

권장:

- 기본: Pretendard
- 숫자/금액: tabular nums 설정
- 본문 최소 15px
- 모바일 CTA/금액 영역은 줄바꿈 기준을 명시

금지:

- 레거시 돋움/굴림 혼용.
- viewport width 기반 폰트 스케일.
- 버튼 안 긴 문구의 한 줄 강제.

## 3. 컬러 원칙

기능 색:

| 용도 | 색상 |
|---|---|
| Primary | 신뢰감 있는 블루/그린 계열 |
| Success | 기부/완료/가능 상태 |
| Warning | 검증 대기/한도 임박 |
| Error | 주소지 불가/검증 실패 |
| Neutral | 표, 필터, 관리자 UI |

주의:

- 단일 노랑/주황 톤으로 전체를 지배하지 않는다.
- 기부금액/세액공제/답례품 가치는 색상만으로 구분하지 않는다.

## 4. 핵심 컴포넌트

### Region Card

필수 요소:

- 지역명
- 대표 이미지
- 한 줄 소개
- 가능한 활동: 여행/답례품/지정기부
- 관심 저장 버튼

### Travel Card

필수 요소:

- 유형: 체험/숙소/캠핑
- 지역
- 대표 이미지
- 가격 또는 시작가
- 예약 가능 상태
- 지역 기부 연결 표시

### Gift Card

필수 요소:

- 답례품명
- 지역
- 필요 기부금액
- 예상 세액공제
- 답례품 평가액 또는 포인트
- 재고/배송 상태

문구 원칙:

- "가격"보다 "기부금액" 우선.
- "10만원 기부 시 예상 공제 10만원"처럼 기부자 언어 사용.

### Campaign Card

필수 요소:

- 캠페인명
- 지역
- 분야 태그
- 목표금액
- 모금액/달성률
- 마감일
- 사용처 요약

### Tax Benefit Calculator

입력:

- 기부금액
- 지자체
- 특별재난지역 여부

출력:

- 예상 세액공제
- 답례품 최대 한도
- 본인 세액에 따라 실제 공제액이 달라질 수 있음
- 이월공제 미적용 안내

## 5. 화면 패턴

### 홈

배치:

1. 통합 검색
2. 20만원 기부 혜택 계산 진입
3. 추천 지역
4. 인기 여행
5. 인기 답례품
6. 마감 임박 지정기부
7. 지역 스토리 피드

### 지역 홈

상단은 지역명을 명확히 보여준다. 지역 홈에서는 여행/답례품/지정기부가 탭으로만 숨어 있으면 안 되고, 첫 화면에서 각각의 카드가 보여야 한다.

### 답례품 상세

정보 우선순위:

1. 답례품 사진/명칭
2. 필요 기부금액
3. 예상 세액공제
4. 답례품/포인트 가치
5. 기부 가능한 지역 조건
6. 배송/교환/품절 안내

### 지정기부 상세

정보 우선순위:

1. 문제/사업 스토리
2. 목표금액/모금액/달성률
3. 사용처
4. 지자체/수행 주체
5. 기부 CTA
6. 결과보고 또는 보고 예정일

## 6. 접근성/반응형

- 모바일 390px 기준으로 금액/CTA/필터가 깨지지 않아야 한다.
- 모든 필터는 키보드 접근 가능해야 한다.
- 색상만으로 상태를 전달하지 않는다.
- 금액 계산 결과는 screen reader가 읽을 수 있는 텍스트로 제공한다.
- 이미지에는 상품/지역을 이해할 수 있는 alt를 제공한다.

## 7. 관리자 UI

관리자 화면은 마케팅 사이트처럼 꾸미지 않는다. 데이터 밀도, 필터, 상태 변경, 변경 이력, 검수 큐를 우선한다.

필수 패턴:

- 상태 배지.
- 변경 이력 패널.
- 승인/반려 모달.
- 필터 가능한 테이블.
- CSV 다운로드.
- 오류 재시도 버튼.