본문으로 바로가기
반응형

홈페이지를 만들 때 배경 이미지 혹은 배경 색상을 넣고 그 위에 텍스트를 씌우는 경우는 매우 흔합니다. 이 경우, 배경 색상에 따라 텍스트의 색상을 조절해 주어야 합니다.

  • 배경 이미지가 밝은 색: 텍스트는 어두운 색
  • 배경 이미지가 어두운 색: 텍스트는 밝은 색

 

전체적으로 페이지의 톤이 통일되어 있다면 별 문제는 없겠죠?

하지만, 경우에 따라서 어떤 경우는 밝은 배경, 어떤 경우는 어두운 배경을 사용하고 싶은 경우도 있을 것입니다. 이 경우 배경 색상의 톤에 따라서 텍스트 색상과 관련된 설정들을 변경해주어야 하는데요...

하나 둘 하다 보면 은근히 번거로운 작업일 수 있습니다.

 

이러한 작업을 도와주기 위해서 Uncode에서는 '스킨'이라는 개념을 도입했습니다. 이번 글에서는 Uncode의 스킨에 대해서 알아보도록 하겠습니다.

 

1. Uncode 스킨의 개념

Uncode 테마에서는 스킨의 개념을 도입하여 배경이 어두운 경우(Dark Skin)와 배경이 밝은 경우(Light Skin)에 따라서 텍스트, 메뉴 색상 등에 대해서 미리 설정해주고 페이지 내에서 각 섹션별로 스킨을 선택하여 간단하게 작업하도록 도와줍니다. 

아래 그림을 볼까요?

 

 

그림에 보이듯이 배경이 어두운 경우에는 밝은 글씨가, 배경이 밝은 경우에는 어두운 글씨가 더 보기 좋습니다. Uncode의 '스킨'은 "Light"와 "Dark" 두 가지 모드를 제공하며, 텍스트, 제목, 메뉴 또는 로고와 같은 주요 엘리먼트의 색상을 배경의 색상에 따라 미리 설정된 최적의 대비를 제공하는 값을 사용할 수 있게 해 줍니다.

  • Light Skin : 밝은 배경인 경우 사용하는 스킨입니다. (어두운 텍스트)
  • Dark Skin : 어두운 배경인 경우 사용하는 스킨입니다. (밝은 텍스트)

 

2. Skin의 기본 설정 

Theme Options → Customize을 들어가 보면 Light Skin, Dark Skin 각각에 대한 설정 화면이 나와 있습니다. 여러 가지 옵션이 있긴 하지만, 기본적으로 Light Skin의 Heading, Text 등은 어두운 색상, Dark Skin의 Heading, Text 색상은 밝은 색상을 나타내는 것을 확인할 수 있습니다. 물론 원하는 색상으로 customizing 할 수 있습니다.

 

Light Skin과 Dark Skin Option

 

스킨을 적용하는 데 있어서 사이트의 다양한 영역에 대해서 기본 스킨을 설정할 수 있습니다. Theme Options → Customize에서 메뉴, 콘텐츠, footer의 기본 스킨을 설정할 수 있습니다. 이를 통해 사이트의 다양한 영역에 대해 서로 다른 스킨을 설정할 수 있습니다. 

 

 

3. 페이지에서 스킨 적용하기

앞에서 글로벌로 스킨의 영역별 기본값을 설정할 수 있는 것을 확인했습니다.

하지만 사이트를 만들다 보면 페이지 별, 또는 동일 페이지 내에서도 섹션 별로 Light, Dark Skin을 별도로 적용해야 할 경우가 있습니다. 예를 들어, 기본값은 Light 스킨을 사용하는 중, 일부 섹션에서 어두운 배경을 사용하고 싶은 경우가 있을 것입니다.

이러한 경우, Uncode 테마에서는 각 텍스트의 색상을 다시 지정할 필요 없이 단순하게 스킨을 변경하는 것 만으로 간단하게 배경에 적합한 텍스트 색상으로 변경할 수 있습니다. 방법은 다음과 같습니다.

 

원하는 페이지에서 "페이지 편집"을 선택하여 Page Builder 화면으로 들어갑니다. 여기서 원하는 컬럼의 에디팅을 선택하고 "style" 탭에서 Skin을 원하는 설정으로 변경해줍니다.

 

선택값은 "Inherit", "Light", "Dark"가 있으며 "inherit"의 경우 (default) 글로벌 옵션으로 설정된 값을 사용합니다.

 

 

 

이런 방식으로 글로벌로 설정된 값과 상관없이 각 컬럼 섹션 별로 서로 다른 스킨 옵션을 적용할 수 있습니다. 

아래는 여러 섹션 별로 Dark 스킨과 Light 스킨을 나눠서 설정한 예제입니다. 스킨만 변경해주기 때문에 페이지 내에서 텍스트, 배경의 색상을 별도로 지정하지 않아도 원하는 결과를 얻을 수 있습니다.

 

클릭하면 실제 사이트로 연결됩니다.

 

특이한 것은 메뉴가 투명한 경우에는 그 밑 섹션의 스킨 설정에 따라서 메뉴의 스킨도 자동으로 변경됩니다. 위의 경우에는 Header 부분이 어두운 배경으로 Dark Skin으로 설정되어 있으므로 메뉴 역시 Dark Skin 옵션 기준으로 밝은 색의 글씨로 표시되게 됩니다.

 

4. 맺음말

이번 글에서는 Uncode 테마의 "Skin" 기능에 대해서 살펴보았습니다. 스킨 기능을 이용하면 배경 등에 따라서 매번 다시 색상을 설정할 필요 없이 배경의 색상에 따른 텍스트 컬러 조정이 가능합니다. 제작한 곳에서는 Uncode에서 유니크한 기능이다!라고 하는데, 다른 테마에 비슷한 내용이 있는지는 모르겠네요 ^^ 

아무튼 여러모로 편리한 기능임에는 틀림없는 것 같습니다.

 

반응형