다양한 예제로 배우는 CSS 설계 실전가이드 - 제이펍

다양한 예제로 배우는 CSS 설계 실전 가이드
한다 아츠시 지음, 김연수 옮김 / 제이펍 / 2021년 2월

다양한 예제로 배우는 CSS 설계 실전가이드 - 제이펍

나는 흔히 말 하는 “백엔드 개발자”이다. 업계 통념, 아니 현실적으로 프론트 영역은 정말 답이 나오질 않을 정도로 잼병이다. 업계라고 하면 안되겠다. 그냥 내가 그러하다. CSS 를 정말 제대로 공부하고 싶어도 대부분 HTML5 책에 부록처럼 일부 끼워져 있거나 필요할 때마다 인터넷 검색을 통해 찾아 쓰면 된다는 추천이 많아 진지하게 배워보지 않았다. 이 책을 백엔드 개발자가 보게 된다면 프론트 엔드 개발자를 이해하게 될 것이고, 프론트 엔드 개발자가 보게 된다면 단순한 사용법을 지나 설계의 영역을 경험… 아니 매운 맛을 보게 되리라 감히 짐작해본다.

이 책에 대한 리뷰를 신청함에 백엔드 개발자의 입장에서 CSS 의 매운 맛을 보겠다 했다.

CSS 는 Structure 를 담당하는 HTML 에 Decorations 을 담당하는 정도로만 알고 있고, 실제 프로젝트에서는 inline 방식을 필요시 눈치 껏(?) 사용하는 정도에 그쳤었다. 이 책을 읽으면서 가장 맘에 들었던 것은 CSS 가 백엔드 개발자에게만 낯설고 어려운 것이 아니라 프론트 개발자에게도 혼돈스러운 영역이라는 점을 명확히 고백한다는 점이다. 점점 더 규모가 커지고 복잡해지는 웹 프로젝트에서 CSS 가 감당해야 하는 부분이 커지게 되면서 발생하는 문제들을 알려준다.

CSS 사용법을 알려주는가 싶더니 딱 내가 알고 있는 수준인 셀렉터(선택자) 사용법에 대한 내용으로 단 4 페이지 분량으로 끝난다. 사실 백엔드 개발자가 이 정도만 알고 있어도 다행이다 싶다. 프론트 개발자라면 앞 부분 20 페이지는 그냥 넘기기 바란다. 그대들의 고통을 진심 이해하는 바이다.

좋은 CSS 에 대한 네 가지 기준을 제시한다.

예측 가능해야 하며, 재사용이 가능해야 한다.

유지보수가 가능해야 하며 확장이 가능해야 한다.

이것은 프로그래밍 코드에 대한 설명과 다를 바 없다는 생각이 문득 든다. 그렇다. 이 책의 제목이 왜 “CSS 설계” 인지 2 장에서 명확히 보여준다. 프로그래머가 입문을 할 때 문법을 떼고 기술자로 성장하면서 가장 먼저 익히는 것이 선형적이며 절차적인 수준의 프로그래밍에서 벗어나 객체 지향 언어의 이해와 효과적인 구현에 대한 지혜를 담은 여러 구현 방법을 익히게 되는데 (백엔드 개발자의 용어 사용을 자제하고 설명한다.) 프론트 영역에서도 유사한 방법으로 CSS 를 구성하고 유지하고 활용하고 있음을 알게 되었다.

그저 HTML 을 꾸미는데 역할을 하는 줄 알았던 CSS 가 잘 구성된 구조와 역할 분리에 따른 다양한 설계기법에 대한 소개는 그저 혼란스럽고 복잡하게만 생각한 CSS에 편견을 충분히 무너트렸다.

레이아웃을 잡고 재사용이 가능하도록 모듈화하고, 모듈이 모여 템플릿을 만들어 내는 과정이 담겨있다. 개인적으로 CSS 에 대한 연습이나 단순한 학습의 영역을 뛰어넘어 프로젝트 또는 조직에서 CSS 를 어떻게 관리하고 설계하고 활용할 것인지에 대한 가이드 역할을 하는 책으로 보인다.

책장에 꽂혀 있는 많은 Web 개발과 html, css 에 대한 그 어떤 책에서도 만나보지 못한 내용들이 담겨있다. 어쩌면 너무나 당연하게 생각한 문제, “CSS 는 모두 전역이다.” 를 어떻게 감당하고 이겨내고 관리하고 활용하는지에 대한 수준 높은 가이드 북이라 생각한다.

여전히 프론트의 영역을 두려워하는 백엔드 개발자, CSS 의 설계 영역과 가이드를 자신의 것으로 만들어 팀을 이끄는 역량을 갖고자 하는 프론트 개발자 모두에게 추천하는 바이다.

얼마 전, Node Js 라는 녀석을 공부했고, NPM 을 알게 되면서 프론트 영역의 훌륭한 라이브러리들을 실시간으로 받아내는 놀라움을 경험하고 있다. 흔한 기술이겠지만, 백엔드 개발자에겐 신세계다. 언젠가 받게 될 라이브러리에 이 책을 읽고 성장한 프론트 개발자 그대의 이름을 볼 수 있게 되기를 바란다.