Wix 에디터: 색상 테마 사용자 지정하기

4 분 분량
색상 테마를 추가하는 것은 사이트 디자인 과정에서 중요한 단계입니다. 일관된 색상을 사용하면 분위기를 조성하고 방문자에게 브랜드를 소개할 수 있습니다. 
색상 테마 패널을 보여주는 스크린샷.
색상 테마는 사이트 전체와 추가 패널의 "추천" 요소에 자동으로 사용됩니다. 사이트의 모든 요소에 테마 색상을 적용할 수도 있습니다.
다음 도움말을 참고하세요.

색상 테마 사용자 지정하기

사이트에 적용할 수 있는 다양한 색상 테마 사전 설정이 있습니다. 이러한 테마들은 세련되고 섬세한 파스텔 팔레트에서 대담하고 밝은 팔레트까지 다양한 스타일을 다루는 상호 보완적인 색상들로 세심하게 구성되어 있습니다. 사전 설정을 둘러보고 브랜드에 완벽하게 어울리는 옵션을 선택하세요. 

색상 테마 사전 설정을 선택한 후 개별 색상을 사용자 지정할 수도 있습니다. 

색상 테마를 선택하고 사용자 지정하려면:

  1. 에디터 왼쪽에서 사이트 디자인을 클릭합니다.
  2. 색상 및 텍스트 테마에 마우스오버하고 사용자 지정을 클릭합니다.
  3. 현재 테마에서 색상 클릭합니다.
  4. 색상 테마에 마우스오버하고 변경을 클릭합니다. 
  5. 사전 설정을 둘러보고 새로운 테마를 클릭해 선택합니다. 
사이트 디자인 패널을 보여주는 스크린샷. 커서가 사이트 테마를 선택하기 위해 마우스오버하고 있습니다.
  1. (선택사항) 테마의 색상을 사용자 지정하려면:
    1. 현재 테마에 마우스오버하고 색상을 클릭합니다.
    2. 해당 색상 옆의 색상 편집 아이콘을 클릭합니다.
    3. 커서를 사용해 새 색상을 찾고 선택하거나 HEX, RGB, HSB 값에 정확한 색상을 입력해 새 색상을 선택합니다.
새 색상을 선택하는 커서를 보여주는 GIF.
  1. (선택사항) 색상 스케일에서 음영을 클릭하고 채도와 밝기를 설정해 색상을 취향에 맞게 조정합니다.
음영 채도 및 밝기를 조정할 수 있는 위치를 보여주는 패널 스크린샷.

사이트 요소에 테마 색상 적용하기

사이트의 모든 요소에 테마 색상을 적용할 수 있습니다. 테마 색상은 디자인 패널의 색상 차트에 저장됩니다.
컨테이너 상자 디자인에서 연 색상 차트 패널을 보여주는 스크린샷.
도움말:
테마에 속하지 않은 사용자 지정 색상을 색상 차트에 저장할 수도 있습니다. 내 색상 옆에 있는 + 추가를 클릭해 새 색상을 선택하세요.
또한 에디터 추가 패널 내의 추천 요소는 이미 테마 색상을 특징으로 하므로(예: 추천 버튼, 상자 및 선) 사이트와 어울리도록 수동으로 조정하는 것을 걱정할 필요가 없습니다.  
추가 패널에서 추가할 수 있는 추천 요소를 보여주는 스크린샷.

사이트에 테마 색상이 사용되는 방법 이해하기

색상 차트에 표시되는 것과 마찬가지로 테마 색상은 사이트에서 다음과 같이 사용됩니다.

색상 1: 배경 및 텍스트

색상 1은 사이트 배경 및 텍스트에 사용됩니다. 사이트에 Wix 앱(예: Wix Stores, Wix 블로그 등)을 추가한 경우, 해당 페이지는 동일한 배경 및 텍스트 색상을 사용합니다. 
대부분의 경우 가장 밝은 색조(1)가 배경에 사용되고 가장 어두운 색조(2)는 텍스트에 사용된다는 것을 확인할 수 있습니다. 사이트의 정보를 쉽게 읽을 수 있도록 대비가 큰 쌍을 추가하는 것이 좋습니다.
색상 1을 보여주는 스크린샷

색상 2: 액션 색상

눈에 띄는 액션 색상을 선택해 방문자의 클릭을 유도해 보세요. 이 색상은 링크, 버튼 및 메뉴 요소 등 액션을 취할 수 있는 요소에 사용됩니다. 또한, 버튼 및 상자 등의 추천 요소와 Wix앱(예: Wix Stores, Wix 블로그 등) 관련 페이지에도 표시됩니다.
중간에 있는 색조가 가장 자주 사용되기 때문에, 배경과 대비되는 것을 고르는 것이 좋습니다. 이는 사이트에서 가장 중요한 요소에 액세스할 수 있으며, 요소가 눈에 띌 수 있도록 합니다.
색상 2를 보여주는 스크린샷

색상 3, 4, 5: 추가 색상

색상 구성을 완성하려면 3개의 추가 색상을 선택하세요. 이 색상들은 사이트의 다양한 위치에 표시되기 때문에 이미 선택된 다른 색상들와 어울리고 상호 보완적이어야 합니다.
색상 3, 4, 5를 보여주는 스크린샷

도움이 되었나요?

|