brunch

매거진 한상훈 개발로그

라이킷 17 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 한상훈 Oct 16. 2020

HTML CLASS와 디자인 시스템

웹사이트의 전역 스타일 관리와 가독성 CSS 관리를 위한 방법론

간만에 웹개발에 대해서 글을 적어봅니다. 이 글은 웹 프론트 개발에서 클래스 작성법을 다룹니다.

1. Class의 의미

클래스가 가지는 의미 먼저 살펴보죠. 클래스는 여러 HTML 엘리먼트에 동일한 스타일을 적용하는데 사용합니다. CSS를 통해 . 선택자를 사용해서 동일한 스타일을 부여할 수 있습니다. 또한 클래스는 jQuery와 같은 라이브러리 또는 바닐라 자바스크립트에서 선택자로 사용됩니다.

2. 통일된 스타일

클래스는 엘리먼트에 통일된 스타일을 제공하기 때문에 개발자는 고민에 빠지게 됩니다. 개발자들의 고질병이자 강점이기도한 최적화를 위해서 스타일을 통째로 미리 만들어두고, 라이브러리로 가져오게 됩니다. 대표적인 예가 2011년 출시한 부트스트랩(Bootstrap)입니다.

부트스트랩을 보면 스타일 하나를 적용하기 위해서 클래스를 넣는 방식을 사용합니다. 예를 들면 테두리를 넣고 싶을 때 "border"라는 클래스를 추가합니다. 만약 하단 테두리만 필요하다면 "border-bottom" 이라는 클래스를 넣습니다. 이렇게 스타일을 관리하면 강점은 분명합니다. 디자인이 약한 개발자들은 디자인에 크게 신경쓰지 않고, 전역에서 거의 동일한 스타일을 적용할 수 있습니다. 하지만 이와 같이 '하나의 스타일 = 하나의 클래스' 형태는 치명적인 문제점이 있습니다.

3. 컴포넌트 수준의 스타일

프로젝트 규모가 작거나 UI 라이브러리만 사용해서 빠르게 만드는 경우엔 큰 문제가 없습니다. UI 라이브러리에서 제공하는 컴포넌트를 사용하고, 그리드 시스템을 사용하면 미칠듯한 생산성으로 높은 수준의 서비스를 만드는게 가능합니다. 하지만 프로젝트 규모가 커지는 경우가 문제가 됩니다.

예를 들어 여러 페이지에서 동일하게 쓰이는 <h3> 엘리먼트 스타일을 변경해야하는 경우를 생각해봅시다. UI 프레임워크를 사용해서 스타일과 클래스를 일치시킨 경우라면 동일한 <h3>를 찾는것 부터가 어려울 수 있습니다. 아마도 h3 엘리먼트는 이런 식으로 작성됐을 겁니다.

<h3 class="fw-500 fs-20 color-primary border-bottom"></h3>

이 중에서 몇 개의 스타일에 변화를 주려고 클래스를 추가하거나 뺏다면 추적하는건 더 힘들어집니다. 하나하나 스타일을 대조해봐야할 뿐 아니라 override된 클래스가 있는 경우 그것에 대해서 추가 수정작업을 해줘야 합니다. 이러한 이유에서 스타일 하나하나를 모두 클래스로 선언하는 방법은 큰 프로젝트에서는 주의할 필요가 있습니다.

4. 디자인 시스템

이를 위해서는 절대 개발자 혼자서 문제를 해결할 수 없습니다. 중구난방으로 디자인된 걸 본다면 스타일과 클래스를 병렬적으로 작성하는게 빠르고, 쉬운 방법이 될 수 있지만 결코 좋은 방법이 아닙니다. 먼저 디자이너가 디자인 시스템을 만들어 문자 스타일, 컬러 스타일, 컴포넌트 스타일을 정해야합니다.

대표적인 프로토타이핑 툴인 Adobe XD를 보면 해당 기능이 뻔히 존재합니다.

하지만 웹디자이너가 프로토타이핑 툴을 못 다루거나, 포토샵으로 작업하고 최종 단계에서 디자인을 넘기는 경우 '문자 스타일', '색상', '구성요소' 모두 제대로 관리하지 않은 경우가 있습니다. 이 경우엔 개발자가 전체 디자인의 중복 요소를 모두 분석하고, 최적화해 CSS로 작성할 수 있는 능력자가 아니라면 병렬적으로 클래스를 쓰는게 낫게 됩니다.

5. 최선의 Class 작성법

그럼 무엇이 가장 최선의 프로세스이며, 클래스 작성법일까요?

첫번째는 UI 라이브러리에 어느정도 의존할 것인지 정해야 합니다. 커스텀 스타일이 많아지는게 뻔히 보인다면 라이브러리에서 제공하는 클래스는 그리드 시스템, 컬러 시스템, 엘리먼트 정도 사용하고 그 외의 세부적인건 개발 초기부터 사용할 필요는 없습니다. 전달받은 디자인에서 통일된 요소를 추려내고, CSS 골격을 만들고, :root를 통해 전역 변수를 설정해두는 작업을 먼저하는게 좋습니다.

두번째는 클래스의 개수를 줄입니다. 클래스의 개수가 비정상적으로 길어지는 경우가 있습니다. A라는 엘리먼트에 클래스가 8~9개씩 달려있다면 나중에 A를 다른 곳에서 사용할 때 똑같이 8~9개의 클래스를 가져와야 합니다. 이를 통합 관리하거나 묶어야 합니다. 그래야 HTML 코드의 가독성을 높이고, 개발자의 생산성도 높아집니다.

클래스의 개수는 서두에서 소개한 클래스 선택자와도 연결되는 부분입니다. 요즘은 React, Vue 등을 사용하다보니 엘리먼트 선택을 하기보다는 상태관리를 통해 처리하는 경우가 많지만, 오래된 라이브러리나 jQuery를 활용해 제작된 라이브러리의 경우 클래스 이름에 영향을 받을 수 있습니다. 이런 경우 엘리먼트당 클래스 개수가 너무 많아지면 클래스를 찾고, 읽는 것만으로도 힘든 일이 됩니다.

세번째는 불필요한 스타일에 대한 제거가 필요합니다. CSS에서 C가 cascading이라는 걸 기억해야합니다. 프로젝트가 커짐에 따라서 불필요한 스타일은 반드시 생기고, override는 흔해집니다. 이 과정에서 클래스를 만들고, 지우고, 특정 부분만 스타일을 바꾸고, 추가하는 일이 반복되면 의미없는 스타일이 코드로 남겨지게 됩니다. 특히 클래스의 개수가 엄청 많아진다면 개발자가 이를 트레킹하는 것부터가 일입니다.

이 과정을 묵혀두다보면 나중엔 최악의 상황까지 이르기도 합니다. 나쁜 CSS 습관이라는 글에서도 이야기했듯 와일드카드나 !important를 사용해서 작성된 스타일이 많다면 이를 해결해야하는 개발자는 머리가 터질 수 있습니다.

keyword