Visual Design Philosophy

피처링 프로덕트의 시각 디자인 원칙을 정리한 문서입니다. AI agent가 디자인을 생성하거나 변경할 때 이 규칙을 따르면 됩니다.

디자인 원칙

원칙 1: 데이터 중심 레이아웃

UI 요소는 콘텐츠보다 덜 눈에 띄어야 합니다. 프로필 이미지, 지표 숫자, 차트가 주요 정보이고, 레이블과 구분선은 보조 역할입니다.

적용 기준

• 본문 텍스트: fontWeight-light (300) 기본
• 제목: fontWeight-semiBold (600)까지 사용. fontWeight-bold (700)은 사용하지 않음
• 본문 line-height: 1.75
• 페이지 좌우 여백을 충분히 확보
• 리포트/상세 영역은 고정 너비(약 920px)로 제한

원칙 2: 절제된 깊이감

깊이는 얇은 테두리와 미세한 그림자로만 표현합니다. 장식적 그라디언트는 사용하지 않습니다.

색상

• 브랜드 컬러 #5e51ff (primary-60)은 CTA, 활성 인디케이터 등 강조 요소에만 사용
• 인터랙션 배경(hover, 선택 카드, 정보 뱃지)은 연한 브랜드 톤(primary-10~primary-20) 사용
• 배경은 흰색 또는 gray-5~gray-10 위주
• 본문 텍스트는 gray-90. 순수 블랙(#000)은 사용하지 않음
• 시스템 컬러(빨강, 초록, 노랑, 파랑)는 채도를 낮춘 버전 사용

형태

• 테두리는 항상 1px. 2px 이상은 사용하지 않음
• 모서리는 모두 약간 둥글게 처리. radius-0을 쓰지 않음
• 그림자는 4단계 elevation 시스템. 최대 opacity 0.1을 넘지 않음

그라디언트

• 기본 UI: 회색/흰색 페이드만 허용 (스크롤 마스크 등)
• AI 기능 영역: 스펙트럼 그라디언트 허용 — 다른 기능과 시각적으로 구분

원칙 3: 점진적 공개

한 화면에 모든 정보를 노출하지 않습니다. 복잡한 작업은 단계로 나누고, 고급 설정은 접어 둡니다.

적용 기준

• 복잡한 폼은 위저드 단계로 분할. 상단에 진행 인디케이터 표시
• 선택값에 따라 관련 필드만 노출 (조건부 필드)
• 필터: 기본 필터는 펼쳐 두고, 고급 필터는 접음
• 상세 정보: 사이드시트로 열어 목록 맥락 유지
• 접기/펼치기: 기본 정보 섹션을 접을 수 있도록
• 복잡한 지표 설명: 툴팁/팝오버로 hover 시 노출
• 필터는 즉시 반영이 아닌 명시적 "적용" 버튼

원칙 4: 일관된 리듬

스페이싱, 모션, 피드백 패턴은 전체 UI에서 동일하게 적용합니다.

스페이싱

• 요소 내부 간격: spacing-200 (8px)
• 섹션 내 간격: spacing-400 (16px)
• 섹션 간 간격: spacing-800 (32px)
• 페이지 좌우 패딩: spacing-800 (32px)

모션

• 진입: 0.2~0.4초, ease-out
• 퇴장: 0.1~0.2초, ease-in
• hover: 0.2초
• 로딩 pulse: 6초 주기
• 애니메이션 속성은 transform과 opacity만 사용 (GPU 가속)
• UI 전환은 0.5초를 넘기지 않음 (로딩 제외)

피드백

• hover: 연한 브랜드 컬러 배경 전환
• selected: hover 상태 + 테두리 추가 (일시적 vs 영구적 신호 구분)
• error: 빨간 테두리 (빨간 배경은 사용하지 않음)
• disabled: 투명도 감소 + 툴팁으로 비활성 이유 설명

원칙 5: 브랜드 팔레트

피처링 브랜드 컬러는 #5e51ff (primary-60) 인디고 계열입니다. 데이터 전문성과 크리에이티브 산업을 동시에 표현하는 색입니다.

팔레트 구성

• Primary: 인디고 바이올렛 10단계 (primary-10 ~ primary-100)
• Gray: 차가운 그레이 11단계 (gray-5 ~ gray-90)
• 시스템 컬러: 빨강, 초록, 노랑, 파랑, 주황, 갈색 (각 3단계)
• 배경 스케일: background-1 ~ background-5 (흰색 → 진회색)
• 텍스트 스케일: text-1 ~ text-6 (가장 진한 그레이 → 흰색)
• 테두리 스케일: border-default ~ border-strong (5단계)
• 상태 컬러: support-error(빨강), support-warning(주황), support-success(초록), support-info(브랜드 컬러)

우선순위

여러 원칙이 충돌할 때 우선순위:

데이터 가독성 > 일관성 > 인터랙션 풍부함 > 시각적 장식

DO / DON'T

DO

• 밝은 배경 위에 콘텐츠를 배치한다
• 본문 텍스트는 fontWeight-light (300)으로 둔다
• 테두리는 항상 1px
• 그림자는 최대 opacity 0.1 이하로 사용한다
• hover는 연한 브랜드 컬러 배경 전환만으로 표현한다
• 여백을 충분히 확보한다
• 모서리는 모두 약간 둥글게 처리한다
• 리포트/상세는 고정 너비로 시선을 집중시킨다
• AI 영역은 스펙트럼 그라디언트로 다른 기능과 구분한다

DON'T

• 브랜드 컬러를 넓은 면적에 사용하지 않는다 (강조 전용)
• 2px 이상의 테두리를 사용하지 않는다
• 장식용 그라디언트를 사용하지 않는다 (AI 영역 예외)
• 에러를 빨간 배경으로 표시하지 않는다 (빨간 테두리 사용)
• fontWeight-bold (700)을 사용하지 않는다 (fontWeight-semiBold까지)
• 본문에 순수 블랙(#000)을 사용하지 않는다
• 완전히 각진 모서리를 사용하지 않는다
• UI 전환을 0.5초 이상 끌지 않는다 (로딩 제외)