> ## Documentation Index
> Fetch the complete documentation index at: https://docs.agencyhandy.com/llms.txt
> Use this file to discover all available pages before exploring further.

# AgencyHandy 워크스페이스 색상 테마 커스터마이징

> 에이전시 브랜드 색상을 AgencyHandy 사이드바와 인터페이스에 적용하세요 — 기본 색상, 배경, 텍스트, 호버 상태 — 즉시 모든 사용자에게 반영됩니다.

외관 설정을 통해 AgencyHandy 워크스페이스의 모양을 완전히 제어할 수 있습니다. 기본 색상, 사이드바 배경, 사이드바 텍스트 색상, 사이드바 내비게이션 항목의 호버 하이라이트 색상을 커스터마이징하여 플랫폼의 색상 테마를 에이전시 브랜드 정체성에 맞게 조정할 수 있습니다. 저장하는 모든 변경 사항은 페이지 새로고침 없이 즉시 모든 사용자의 전체 워크스페이스에 적용됩니다.

<Note>
  외관 설정에 접근하고 수정할 수 있는 권한은 **슈퍼 관리자**와 **관리자**에게만 있습니다. **워크스페이스 구성** 아래에서 이 옵션이 보이지 않으면 슈퍼 관리자에게 역할 검토를 요청하세요.
</Note>

## 외관 설정 접근하기

<Steps>
  <Step title="워크스페이스 구성 열기">
    왼쪽 내비게이션 메뉴에서 **워크스페이스 구성**을 클릭하세요.
  </Step>

  <Step title="외관 선택">
    하위 메뉴에서 **외관** (경우에 따라 **시각적 설정**으로 표시)을 클릭하세요.
  </Step>
</Steps>

***

## 각 시각적 요소 커스터마이징

### 기본 색상

기본 색상은 플랫폼 전체의 버튼, 활성 링크, 하이라이트 상태, 주요 인터페이스 요소에 적용됩니다.

* 핵심 브랜드 정체성을 반영하는 색상을 선택하세요.
* UI 전체에 나타나기 때문에 가장 영향력 있는 색상 설정입니다.

### 사이드바 배경 색상

사이드바 배경은 왼쪽 내비게이션 패널의 기본 색조를 설정합니다.

* 사이드바와 메인 콘텐츠 영역 사이의 명확한 시각적 구분을 만드는 색상을 사용하세요.
* 밝은 텍스트가 있는 어두운 배경이 일반적으로 가독성에 가장 효과적입니다.

### 사이드바 텍스트 색상

사이드바 텍스트 색상은 왼쪽 메뉴의 모든 내비게이션 항목의 레이블 색상을 제어합니다.

* 항상 사이드바 배경 색상과 강한 대비를 이루는 색상을 선택하세요.
* 대비가 낮으면 링크를 읽기 어렵고 접근성이 낮아집니다.

### 사이드바 호버 배경 색상

이 색상은 사용자가 사이드바 내비게이션 항목 위로 커서를 이동할 때 배경 하이라이트로 나타납니다.

* 상호작용을 신호하고 사용자가 클릭하려는 항목을 이해하는 데 도움을 줍니다.
* 기본 사이드바 배경과 활성 항목 색상 모두와 시각적으로 구별되는 색상을 선택하세요.

***

## 색상 선택 적용하기

<Steps>
  <Step title="각 필드의 색상 선택기 열기">
    기본 색상, 사이드바 배경, 사이드바 텍스트 색상, 사이드바 호버 배경 색상 중 하나의 색상 견본을 클릭하여 색상 선택기를 여세요.
  </Step>

  <Step title="헥스 코드 입력 또는 색상 선택">
    브랜드의 정확한 헥스 코드 (예: `#3B5BDB`)를 입력란에 직접 입력하거나 시각적 선택기를 사용하여 색조를 선택하세요.
  </Step>

  <Step title="변경 사항 미리보기">
    저장하기 전에 업데이트된 색상이 사이드바와 인터페이스 전체에서 어떻게 보이는지 확인하세요.
  </Step>

  <Step title="변경 사항 저장 클릭">
    결과에 만족하면 **변경 사항 저장**을 클릭하세요. 업데이트된 외관이 워크스페이스의 모든 사용자에게 전역으로 즉시 적용됩니다.
  </Step>
</Steps>

<Tip>
  브랜드의 헥스 색상 코드를 접근하기 쉬운 곳 (브랜드 스타일 가이드 또는 메모 파일)에 기록해 두세요. 동일한 값을 일관성 있게 재사용해야 합니다 — 특히 외관 설정을 재설정하고 다시 구성해야 할 때 유용합니다.
</Tip>

***

## 기본 테마로 초기화

모든 커스텀 브랜딩을 제거하고 원래 AgencyHandy 색상 테마를 복원하려면 외관 페이지의 **기본 설정으로 초기화** 버튼을 클릭하세요.

<Warning>
  기본값으로 초기화하면 모든 커스텀 색상 변경 사항이 영구적으로 삭제됩니다. 이 작업은 취소할 수 없습니다. 현재 설정을 유지하려면 초기화 전에 헥스 코드를 기록해 두세요.
</Warning>

***

## 색상 대비 모범 사례

좋은 색상 대비는 단순한 디자인 선호도가 아닙니다 — 팀과 클라이언트의 가독성과 접근성에 직접적인 영향을 미칩니다.

<CardGroup cols={2}>
  <Card title="WCAG AA 대비율 목표" icon="eye">
    일반 본문 텍스트의 경우 텍스트와 배경 사이에 최소 **4.5:1** 대비율을 사용하세요. 큰 텍스트나 아이콘의 경우 **3:1** 비율도 허용됩니다. [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/)와 같은 도구를 사용하여 확인하세요.
  </Card>

  <Card title="낮은 대비 조합 피하기" icon="triangle-exclamation">
    흰 바탕에 밝은 회색 텍스트, 흰 바탕에 노란색 텍스트 등의 색상 조합을 사용하지 마세요 — 이러한 조합은 접근성 기준에 미달하고 장시간 사용 시 눈의 피로를 유발합니다.
  </Card>

  <Card title="호버 상태 의도적으로 테스트" icon="arrow-pointer">
    호버 색상은 기본 상태와 활성 상태 모두와 눈에 띄게 달라야 합니다. 동일하게 보이면 사용자가 중요한 시각적 피드백을 잃게 됩니다.
  </Card>

  <Card title="브랜드와 일관성 유지" icon="paintbrush">
    웹사이트, 제안서, 청구서와 동일한 기본 색상을 여기에도 사용하세요. 일관성은 모든 클라이언트 접점에서 인지도와 전문성을 구축합니다.
  </Card>
</CardGroup>

***

## 중요 사항

* **즉각적인 전역 효과:** 저장된 모든 외관 변경 사항은 전체 워크스페이스에 즉시 적용됩니다. 로그인한 모든 사용자는 다음 내비게이션 작업 시 업데이트를 볼 수 있습니다.
* **하나의 활성 테마:** 다중 테마 지원이 없습니다 — 하나의 색상 세트가 모든 역할의 전체 워크스페이스에 적용됩니다.
* **역할 제한:** 슈퍼 관리자와 관리자만 외관 변경을 할 수 있습니다. 일반 팀원과 클라이언트는 색상을 수정할 수 없습니다.
* **초기화는 영구적:** **기본 설정으로 초기화** 버튼은 취소할 수 없으므로, 모든 커스텀 색상을 의도적으로 제거하려는 경우에만 사용하세요.