Visual Design Philosophy

이 문서는 피처링의 시각 디자인 철학입니다. AI agent는 이 원칙을 따라 피처링 브랜드에 맞는 디자인을 생성할 수 있습니다.

핵심 선언

"전문가를 위한 도구는 스스로를 과시하지 않는다."

피처링은 인플루언서 마케팅의 복잡한 데이터를 다루는 B2B SaaS 플랫폼이다. 화려한 크리에이터 이코노미를 다루지만, 사용자(브랜드 마케터)는 냉철한 ROI를 원한다. 우리 디자인은 이 이중성을 해결한다 — 크리에이티브하되 신뢰할 수 있는 시각 언어.

디자인 원칙

원칙 1: 데이터가 주인공이다 (Data Takes the Stage)

기능적 측면

인터페이스의 모든 요소는 데이터를 돕는 역할이다. 텍스트는 가볍게(font-weight 300~500), 여백은 넉넉하게, 보더는 얇게(1px). UI 요소가 콘텐츠보다 시선을 끌면 안 된다. 인플루언서 프로필 이미지, 성과 숫자, 차트가 화면의 주인공이고, 레이블과 구분선은 조용한 조연이다.

감성적 측면

사용자는 "데이터를 분석하고 있다"가 아니라 **"인사이트를 발견하고 있다"**고 느낀다. 도구가 투명해질수록 사용자의 판단력이 빛난다.

적용 기준

• 본문 텍스트는 가벼운 무게(300)를 기본으로 한다 — 글씨가 겸손해야 데이터가 돋보인다
• 제목은 semi-bold(600)까지만 — 700(bold)은 선언적이고 강압적이다. 우리는 제시한다
• 본문 줄 간격은 넉넉하게(1.75) — 빠른 스캔이 아니라 이해를 위한 읽기
• 페이지 좌우에 충분한 여백을 둔다 — 콘텐츠가 화면 가장자리에서 숨을 쉰다
• 리포트/상세 영역은 고정 너비(~920px)로 시선을 집중시킨다

원칙 2: 조용한 신뢰 (Quiet Confidence)

기능적 측면

피처링의 시각 언어는 "정밀한 네오-플랫"이다. 완전한 플랫은 너무 차갑고, 머티리얼 디자인의 elevation은 너무 무겁다. 우리는 **아주 얇은 보더(1px)**와 극도로 절제된 그림자를 조합해서 깊이를 표현한다. 장식적 그라디언트는 사용하지 않는다. 브랜드 컬러(인디고 바이올렛)는 강하지만, 쓰는 빈도와 방식은 극도로 자제한다.

감성적 측면

사용자는 **"이 도구는 신뢰할 수 있다"**고 느낀다. 과시하지 않는 자신감. Bloomberg Terminal의 조밀함도, Notion의 미니멀리즘도 아닌, 에디토리얼 수준의 정돈된 전문성.

적용 기준

색상:

• 브랜드 컬러 #4232FF(딥 인디고 바이올렛)은 CTA 버튼, 활성 인디케이터 등 강조에만 사용
• 연한 브랜드 컬러가 인터랙션 언어 — hover 배경, 선택 카드 배경, 정보 뱃지
• 배경은 밝고 에어리하게 — 흰색과 연회색이 지배적
• 본문 텍스트는 순수 블랙 대신 다크 그레이 — 덜 공격적이지만 충분히 읽힌다
• 시스템 컬러(빨강, 초록, 노랑, 파랑)는 포화도를 낮춰 감정을 전달하되 지배하지 않는다

형태:

• 보더 두께는 항상 1px — 2px는 없다. 이 절제가 UI를 가볍게 만든다
• 모든 모서리를 약간 둥글게 — 각진 요소 없음. 기술적 정밀함에 인간적 온기를 더한다
• 그림자는 4단계 depth 시스템, 최대 opacity 0.1 — 존재를 증명하는 게 아니라 공간을 암시

그라디언트:

• 기본: 회색/흰색 페이드뿐 — 스크롤 끝에서 "더 있음"을 암시하는 마스크
• 예외: AI 기능 영역에서만 스펙트럼 그라디언트 허용 — "AI = 다른 차원"이라는 시각적 선언
• 나머지 UI가 절제를 유지하기에, AI 영역의 그라디언트가 극적인 차별성을 갖는다

원칙 3: 점진적 공개 (Progressive Revelation)

기능적 측면

모든 정보를 한꺼번에 보여주지 않는다. 복잡한 과업은 단계(위저드)로 나누고, 고급 필터는 펼쳐야 보이게 하고, 상세 정보는 사이드시트로 열어본다. 필터 적용도 즉시 반영이 아닌 명시적 "적용" 버튼을 둔다 — 사용자가 준비됐을 때 결과를 본다.

감성적 측면

사용자는 **"압도되지 않고, 한 걸음씩 이해해간다"**고 느낀다. 복잡한 인플루언서 마케팅 데이터가 소화 가능한 크기로 다가온다. 전문가도 처음 보는 화면에서 길을 잃지 않는다.

적용 기준

• 복잡한 폼은 위저드로 단계 분리, 상단에 진행 인디케이터 표시
• 조건부 필드: 선택에 따라 관련 필드만 노출
• 필터: 기본 키워드 필터 + 펼쳐야 보이는 고급 필터
• 상세 정보: 사이드시트로 열어 목록 맥락을 유지
• 접기/펼치기: 기본 정보 섹션을 접어 요약만 보여줄 수 있도록
• 툴팁/팝오버: 복잡한 지표의 설명을 hover 시에만 노출

원칙 4: 예측 가능한 리듬 (Predictable Rhythm)

기능적 측면

일관된 스페이싱 스케일, 일관된 모션 타이밍, 일관된 피드백 패턴. 모든 카드의 패딩이 같고, 모든 hover가 같은 속도(0.2초)로 반응하고, 모든 진입 애니메이션이 같은 easing을 쓴다. 예외가 적을수록 사용자의 인지 부하가 줄어든다.

감성적 측면

사용자는 **"어디서든 같은 방식으로 동작한다"**는 안심을 느낀다. 새로운 기능을 처음 써도 이미 익숙한 것 같은 친숙함.

적용 기준

스페이싱:

• 요소 내부 간격: 8px 기본
• 섹션 내 간격: 16px
• 섹션 간 간격: 32px
• 페이지 좌우 패딩: 32px
• 이 리듬을 전체 UI에 일관되게 적용

모션:

• 진입: 0.2~0.4초, easeOut — 여유 있게 등장
• 퇴장: 0.1~0.2초, easeIn — 빠르게 비켜줌 (비대칭: 새 콘텐츠에 관심이 있지, 사라지는 것에 없다)
• 호버: 0.2초 — 의도를 인정하는 최소한의 예의
• 연속 애니메이션(로딩): 6초 주기 pulse — 시스템이 살아 있다는 고요한 호흡
• GPU 최적화: transform과 opacity만 애니메이트

피드백:

• hover = 연한 브랜드 컬러 배경 전환만으로 충분
• selected = hover + 보더 추가 (일시적 vs 영구적 신호 구분)
• error = 빨간 배경이 아닌 빨간 보더 — 최소 면적, 최대 명확함
• disabled = 투명도 감소 + "왜" 비활성인지 툴팁 설명

원칙 5: 크리에이티브한 전문성 (Creative Professionalism)

기능적 측면

피처링의 브랜드 컬러는 파란색과 보라색 경계의 딥 인디고 바이올렛(#4232FF)이다. 순수한 파란색의 신뢰에 보라색의 창의성을 더했다. 이 색은 인플루언서 마케팅의 본질 — 데이터와 크리에이티비티의 공존 — 을 한 색으로 압축한다. 차가운 그레이 톤과 결합하면 "정확하고 프로페셔널하면서도 창의적인" 분위기가 된다.

감성적 측면

사용자는 **"이 도구로 일하면 내가 더 스마트해 보인다"**고 느낀다. 데이터의 냉철함과 크리에이터 이코노미의 활력이 공존하는, 피처링만의 독특한 전문성.

적용 기준

• 프라이머리 팔레트: 11단계 인디고 바이올렛 (연한 → 진한)
• 그레이 팔레트: 11단계 차가운 그레이 (따뜻한 기운 배제)
• 시스템 컬러: 빨강, 초록, 노랑, 파랑, 주황, 갈색 (각 3단계: 연한/기본/진한)
• 의미론적 색상 계층:
  • 배경: 4단계 (흰색 → 연회색 → 회색 → 진회색)
  • 텍스트: 6단계 (가장 진한 → 흰색)
  • 보더: 5단계 (기본 → 강조)
  • 상태: error=빨강, warning=주황, success=초록, info=브랜드 컬러

트레이드오프 기준

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

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

• 데이터가 잘 읽히는 것이 최우선
• 그 다음은 예측 가능한 일관성
• 인터랙션은 필요한 만큼만
• 장식은 거의 하지 않는다

DO / DON'T

DO

• 밝고 에어리한 배경 위에 콘텐츠를 배치한다
• 텍스트는 가볍게 — 데이터가 주인공
• 보더는 항상 1px, 색상 변화로 상태를 표현한다
• 그림자는 극도로 미묘하게 — 의식되지 않지만 공간감을 준다
• hover는 연한 브랜드 컬러 배경 전환만으로 충분하다
• 여백을 넉넉히 — 콘텐츠가 숨을 쉰다
• 모든 모서리를 약간 둥글게
• 진입은 느리게, 퇴장은 빠르게 — 비대칭 모션
• 고정 너비로 콘텐츠 집중 유도 (리포트/상세)
• AI 영역은 나머지 UI와 시각적으로 분리 (스펙트럼 그라디언트 허용)

DON'T

• 브랜드 컬러를 넓은 면적에 쓰지 않는다 — 강조에만
• 2px 이상의 보더를 사용하지 않는다
• 장식적 그라디언트를 쓰지 않는다 (AI 영역 제외)
• 빨간 배경으로 에러를 표시하지 않는다 — 빨간 보더로
• 정보를 빽빽하게 채우지 않는다 — 여백이 정보다
• 0.5초 이상의 UI 전환을 사용하지 않는다 (로딩 제외)
• font-weight 700(bold)을 사용하지 않는다 — 600까지
• 순수 블랙을 텍스트에 쓰지 않는다 — 다크 그레이 사용
• 완전히 각진 모서리를 사용하지 않는다

피처링 디자인의 감정 키워드

전문적  ·  절제된  ·  에어리한  ·  신뢰할 수 있는
조용한  ·  정밀한  ·  겸손한  ·  크리에이티브한