유지보수하기 쉬운 CSS 전략(슬라이드)

CSS 자체는 어렵지 않습니다. 그러나 유연하고 간단한 이 언어를 복잡하고 큰 프로젝트에 적용할 때는 난점이 따릅니다. 충돌 문제를 해결하기가 쉽지 않은 것이죠.

때문에 CSS를 효과적으로 조직화하기 위한 방법론들이 개발돼 왔습니다.

최근 유행하는 테일윈드 CSS_{(Tailwindcss)}의 유틸리티 퍼스트_{(Utility-First)} CSS 방법론 같은 것이 그 예입니다.

제가 주로 사용해 온 방법은 객체 지향 CSS_{(OOCSS, Object Oriented CSS)}입니다. 유틸리티 퍼스트도 OOCSS에서 영감을 얻었다고 하죠.

CSS 방법론들의 공통점

OOCSS를 비롯해 실용적인 CSS 방법론들은 CSS를 콘텐츠의 내용으로부터 독립시킵니다.

예를 들면 새 소식이라고 해서 .news라는 클래스명을 사용하지는 말자는 것이죠. 모양을 바탕으로 .simple-list 같은 클래스명을 사용하는 것이 재사용하기 더 좋다는 것입니다. .news는 새 소식 외의 콘텐츠에는 사용을 할 수가 없으니 말입니다.

개발자 입장에서도 .news라는 클래스명은 새 소식 콘텐츠에 이 클래스를 사용한다는 것 외에 어떤 정보도 얻을 수 없습니다. 그런데 CSS는 모양을 담당하는 언어입니다. .simple-list처럼 모양을 표현하는 이름을 짓는 것이 개발자에게도 훨씬 유용합니다.

또한 이 방법론들은 한 객체가 어디에서나 일관된 모양을 표현할 수 있어야 한다고 규정합니다. 예를 들면, .u-h2라는 클래스가 20px의 글자 크기를 나타낸다면, 이 클래스는 헤더에 있든 푸터에 있든 어디에 있든간에 글자 크기가 20px이어야 한다는 것입니다.

OOCSS는 이를 위해 중첩 선택자 사용을 금지합니다. 유틸리티 퍼스트 역시 그렇습니다.

그래서 2016년 12월에 열린 WSConf에서 “유지보수하기 쉬운 CSS 전략“이라는 제목으로 이런 내용의 발표를 진행했습니다.

맨 아래에서 슬라이드를 보실 수 있습니다.

OOCSS_{(객체 지향 CSS)}

OOCSS는 CSS를 객체 단위로 끊어서 구현할 것을 권합니다. 그 결과 개발자는 한 무더기의 CSS 객체들을 가지게 되고, 사이트 전반에 걸쳐 이 객체들로 디자인을 구현하게 됩니다. CSS 수정 시간이 줄어들고, 시간이 갈수록 개발 속도가 빨라지게 됩니다.

OOCSS에 대해 더 알아 보고 싶다면 이 글을 읽어 보시기를 추천합니다: 객체 지향 CSS 소개, HTML 시맨틱과 프론트엔드 아키텍처에 대해

관련 개념을 익히는 데 SMACSS도 참고할 만합니다_{(SMACSS는 확장 가능한 모듈식 CSS 구조, Scalable and Modular Architecture for CSS의 약자입니다. “스맥스”라고 읽습니다)}. OOCSS와 같진 않지만 그에 필요한 기반 개념은 동일합니다. 책인 만큼 개념을 상세하게 다루고 있으므로 OOCSS의 기반이 되는 개념을 이해하는 데 큰 도움이 됩니다.

참고서로 《SMACSS : 복잡한 CSS를 관리하는 5가지 스타일 가이드》를 추천합니다. 방법론의 창시자가 쓴 책이죠.

유틸리티 퍼스트

tailwindcss가 사용하는 유틸리티 퍼스트 방법론은 OOCSS가 발전시킨 방법론을 수용하면서, 그보다 한 발 더 나아갑니다. 다른 객체들은 모두 배제하고 아예 유틸리티 객체만 사용하자는 것입니다.

유틸리티 객체란 스타일 정의를 하나만 가지고 있는 CSS 클래스를 가리킵니다. 예컨대 tailwindcss의 text-center 같은 클래스가 바로 유틸리티 객체입니다.

효과는 분명합니다. OOCSS보다 객체를 더 잘게 분할해 아예 HTML 구조로부터 CSS를 완전히 독립시키는 것이죠. 이로써 유틸리티 퍼스트 방법론은 OOCSS를 어렵게 만드는 제약 — 객체의 범위를 설정하는 기준을 잡기 어렵고, 여전히 객체 내에서는 HTML 구조에 CSS가 묶여 있다는 문제를 해결해 버립니다.

물론 저는 아직 유틸리티 퍼스트를 실전에 사용해 보지 못했고, 유틸리티 객체의 과다 사용이 HTML 해석을 어렵게 만드는 경향이 있다고 여전히 생각합니다. 프로젝트 전반에 걸쳐 있는 컴포넌트를 수정할 때 유틸리티 퍼스트 방법론으로 구현하면 수정이 어려워진다는 점도 걸립니다(물론 tailwindcss에서는 react, vue, blade 등의 템플릿을 활용해 해결하는 게 더 논리적이라고 말합니다).

때문에 아직은 OOCSS와 유틸리티 퍼스트 둘 중 뭐가 더 낫다고 말하기는 힘들 것 같습니다. 학습을 하고 실전에 사용해 보면서 결론을 내리려고 합니다.

유튜브 생중계로 tailwindcss에 대한 학습을 진행중입니다. 첫 번째 학습에서 위에서 말한 내용을 다뤘습니다. 관심이 있다면 “객체지향CSS와 유틸리티 퍼스트 CSS의 공통점과 차이점” 영상을 확인해 보세요.

아래는 2016년 12월 발표에 사용한 슬라이드입니다.

다운로드 | slideshare에서 보기

안형우 – 유지보수하기 쉬운 CSS 전략 [WSConf. Seoul 2016/2017] from WSConf.