시멘틱 ui의 커스터마이징

시멘틱 ui(이하 시멘틱)를 커스터마이징하면서 겪었던 여러가지 문제 상황과 해결 내용을 조금 적어볼까 합니다.

시멘틱에서는 기본적으로 커스터마이징을 위한 세가지 인터페이스를 제공합니다.

1. 테마
2. 레스변수
3. 오버라이드

1. 테마는 누군가가 만들어놓은 레스변수와 오버라이드의 세트라고 할 수 있습니다.

시멘틱 웹페이지에서 볼 수 있는 기본적인 웹 컴포넌트(이하 컴포넌트)들은 모두 시멘틱에서 제공하는 베이직 테마입니다.

그리고 각 컴포넌트 별로 다른 테마를 적용할 수 있습니다.

예를 들어 버튼은 베이직 테마, 메뉴는 부트스트랩 테마... 식으로.

처음 시멘틱을 커스터마이징했을 때는 제가 작성한 레스변수나 오버라이드 소스를 테마로 만들어서 배포하면 이후에도 같은 테마를 사용할 수 있을 것으로 기대했기 때문에 테마를 적극 사용하려고 했으나 현재 미티어에서는 사용자 정의 테마를 로드할 수 없는 문제가 있습니다. (이 문제에 대해서는 더 좋은 방안이 있을 것 같습니다.)

참고 : 시멘틱에서는 각 컴포넌트별로 적어도 하나의 테마를 선택해야 합니다. 보통 커스터마이징을 할 때는 베이직 테마를 기본으로 설정합니다.

2. 레스변수는 특정 속성에 대해서 값을 변경할 수 있게 만들어놓은 통로입니다.

가령 버튼의 색상을 변경하고 싶으면 @buttonColor: #aabbcc;로 설정하는 식입니다.

부트스트랩도 비슷한 방식으로 커스터마이징을 지원합니다.

간단한 디자인의 웹페이지를 대상으로 빠르게 커스터마이징하고 싶을 때는 이 방법이 아주 제격입니다.

그러나 이 방법은 한계가 있습니다.

제본 프로젝트를 진행하면서 같은 컴포넌트라 할지라도 여러가지 스타일의 요소가 많이 등장합니다.

예를 들어서 같은 버튼인데도 모서리가 둥근 모양의 버튼도 등장하고 직사각형의 버튼도 등장합니다.

또, 메인 메뉴에 이어서 내 계정으로 들어가면 다른 스타일의 서브 메뉴가 다시 나오는 등도 같은 경우입니다.

레스변수는 전체 테마에 관통하여 스타일을 주는 용도이기 때문에 제본 프로젝트에는 적용하기 어렵다는 판단이 들었습니다.

레스변수의 또 다른 한계는 시멘틱에서 제공하는 레스변수 이외의 스타일은 수정할 수 없다는 것입니다.

이 단점을 보완하기 위해서 시멘틱은 오버라이드를 제공합니다.

3. 오버라이드는 레스변수를 제외한 그 어떤 레스 문법(css 문법)도 사용할 수 있는 파일입니다.

여기서 잠깐 시멘틱의 캐스캐이딩 순서를 살펴보겠습니다.

테마 로드  =>  레스변수 로드  =>  오버라이드 로드

오버라이드 파일을 가장 나중에 로드하므로 이전에 정의된 속성을 오버라이드 파일에서 재정의 할 수 있습니다.

오버라이드는 레스변수에서 제공하지 않는 속성도 정의할 수 있다는 장점이 있지만 여전히 여러가지 스타일의 컴포넌트를 만들지는 못합니다.

그래서 다음과 같이 클래스를 이용하여 스타일이 다른 각 컴포넌트에 네임스페이스를 부여했습니다.

.ui.button.rounded_button {
    border-radius: 3px;
}


.ui.button.rectangle_button {
    border-radius: 0px;
}
 

이렇게 되면 다음과 같이 스타일이 다른 두 개의 버튼을 만들어 낼 수 있습니다.

<div class="ui button rounded_button">둥근버튼</div>
<div class="ui button rectangle_button">사각버튼</div>
 

제본 프로젝트를 진행하면서 각 컴포넌트에 네이밍을 하고 싶었지만 글로벌 가이드가 없는 상황이고 제플린 파일도 뒤죽박죽인 상황에서 퍼블리싱을 진행하면서 얼마나 다양한 종류의 컴포넌트가 나올지 어떤 유형의 컴포넌트가 나올지 전혀 예상이 되지 않는 상황이었기 때문에 현실적으로 제대로된 네이밍을 하기란 불가능한 상황이었습니다.

그래서 네이밍을 단순화하기 위해 style_0, style_1, style_2, ... 식의 네이밍을 붙여 진행했습니다.

이 네이밍 방식은 직관적으로 어떤 스타일인지는 알 수 없으나 막힘없이 진행되어 좀더 빠르게 진행할 수 있었습니다.

레스 문법은 꼭 오버라이드 파일에 적어야 적용되는 것은 아니기 때문에 이후 미티어의 컴포넌트의 레스 파일에 시멘틱의 커스터마이징 소스를 같이 실어도 문제가 없어 보입니다. (처음에 언급한 해결방안이 될 수도 있을 것 같습니다.)

그리고 시멘틱에는 꽤 괜찮은 컴포넌트들이 많은 것 같습니다.

단, 모달 컴포넌트는 여러가지 버그가 있었습니다.

• 모달을 여는 버튼이 스크롤 아래에 위치하면 화면 하단에 모달이 뜨는 버그.

• 모달의 디머에 인버트를 준 상황에서 두개 이상의 모달을 달면 처음 모달을 열때만 인버트가 먹히는 버그.

• 모달 자체가 길어지면 모달이 뜰 때 스크롤이 맨 아래로 내려가는 버그.

첫번째와 두번째 버그는 어느정도 픽스를 해놓은 상태지만 세번째 버그는 아직 해결하지 못한 상황입니다.

이러한 버그가 있음에도 불구하고 전체적으로 판단했을 때 시멘틱은 상당히 안정적이고 유용한 컴포넌트들도 많고 커스터마이징도 어렵지 않아서 다양한 스타일의 컴포넌트 예시 라이브러리를 구축하기에 좋아 보였습니다.

처음 블로그에 글을 적는데 쉬운 내용이지만 나름대로 공부한 내용을 정리한다 생각하고 적었습니다!

글을 다 쓰고 보니 별 내용도 없고 뻘글이 되어 버렸네요.

다음부터는 스마트링크 블로그의 수준을 떨어뜨리지 않도록 각별히 유의하겠습니다.