[서평] Refactoring UI - Adam Wathan & Steve Schoger

 

개 요

프론트엔드건 백엔드건 개발자들이 가장 싫어하는 코드는 당연 누가 뭐래도 CSS일 것이다.

여러가지 이유가 있겠지만 개인적인 생각은 (지극히 개인적인 생각)

1. 에러가 나지 않아 디버깅하기 힘들고, 

2. 중복된 코드 속에서도 cascading 우선 순위 구조때문에 어느 것이 상위 우선순위로 적용되지는 알기 힘들고

3. 마지막으로는 개발자는 공돌이니깐 미적감각이 없다고 생각한다.

 

이 책에서는 그런 편견을 깨주는 tailwind css의 철학에 대해서 이야기해준다.

Tailwind CSS의 창시자 Adam Wathan과 공동창시자인 Steve Schoger이 2018년에 "Refactoring UI"라는 이름의 책을 출판했다. Adam Wathan은 풀스택 개발자이고 Steve Schoger는 디자이너라서 공동저자라는 사실이 개발자 혹은 디자이너 한 쪽에만 치우친 이야기가 아닐 것이기에 책을 읽어보게 되었다.

252페이지이지만 그림이 대부분이라 쉽께 빨리 넘겨볼 수 있다.

 

내 용

간단히 (개발자 입장에서) 중요한 내용만 정리하면 다음과 같다.

Layout을 고민하지말고, 기능부터 시작하라

CSS를 어렵게 생각하는 이유 중 하나는 완벽주의 때문이다. 처음 디자인할 때 전체 layout은 어떻게 하지? header와 footer는 어떻게 디자인하지?라면서 껍데기부터 생각해서 막막해지는 것이다. Web app이란 기능의 합집합이다. Shell이 아닌 기능부터 만들자.

Detail은 나중에, 선택권을 단계적으로 한정시켜라

위 색의 차이를 구분하는 고객이 있는가. 1678만가지 색상 사이에서 고민하지 말고,

font를 12px로 할지 13px로 할 지 고민하지 말고 선택권을 줄여라.

실제로 tailwind의 utility class는 이런 선택권을 줄인다.

공식문서를 보면 font-size는 이렇게 단계별로 정하고 있고,

 

위에서 보듯이 단지 rem을 이용해 폰트 사이즈를 쓰지 않고 line-height까지 같이 세트로 적용하고 있다.

 

색상도 HSL 좌표계에서 같은 Hue 선상에서 11단계로 나눠놓았다.

 

 

그 외 많은 디자인 노하우들이 담겨있는 책이다.

좋은 디자인을 위한 가장 중요한 것은 미적 감각이 아니라 몇 가지 팁들에서 온다는 내용이다.

 

개발자에게 강력 추천할만한 책이다.