함수형 CSS, Tachyons

2019-03-29


Tachyons라이브러리로 함수형 CSS를 작성해보자. 이 블로그도 Tachyons를 사용해 만들어졌고, 디자인없이 기본 틀을 잡는데 굉장히 효과적임을 느꼈다. 처음에는 클래스명을 알고 쓰는 게 불가능할 거 같았는데 기존 css 속성 값을 줄인 형식으로 대부분 이루어져 있어서 몇 번 쓰고 나니 금세 익숙해졌다. 예를 들어 margin-top은 mt의 클래스를 가지게 된다.

나는 css를 싫어하지 않지만, css든 sass든 큰 계획 없이 코드를 하다 보면 금세 지저분해지는 경험을 늘 해야 했다. 개인 프로젝트를 할 때는 디자인을 구체적으로 생각하지 않고 거의 마음 가는 데로 해보고, 다양한 비주얼을 시도해보려고 하다 보니 css를 깔끔하게 유지하는 게 거의 불가능했다. 그리고 리액트를 주로 쓸 때는 더더욱이나 파일을 옮겨 다녀야 하는 게 너무 귀찮았다.

항상 그냥 css를 작성하지 않고 클래스를 입력하면 바로 원하는 속성만 적용시킬 수는 없을까 생각했고, 역시나 나와 같은 생각을 하는 사람들이 많았던지 Functional CSS라는 콘셉트도 있었고, 나와 같은 문제점을 해결하고자 하는 다양한 라이브러리를 찾을 수 있었다.

기존의 부트스트랩이나 스타일을 제공하는 프레임워크, 라이브러리와 다른 점은 함수형 css 라이브러리는 특정 형태를 만들 수 있는 모듈화 된 클래스 제공하지 않는다. 버튼 클래스, 내비게이션 스타일 클래스 이런 식으로 특정 형태의 클래스가 있는 게 아니고 css의 각각의 속성을 각각의 클래스로 만들어서 제공한다. 어떻게 보면 inline-css와도 비슷할 수 있는데 중요한 건 고정된 스케일 값을 사용함으로써 arbitrary 한 값들이 들어가는 것을 방지한다.

이 부분이 굉장히 중요하다고 생각하는데, 확고한 디자인 시스템이 없는 상황에서는 직관에 의해서 여기저기 arbitrary 한 고정값으로 시작을 하게 되고, 그렇게 되다 보면 결국 의미를 알 수 없는 값들이 난무하게 된다. 이런 고정값들을 빼는 일이 얼마나 힘든지.. 그리고 그 값의 의미를 파악하기 위한 디버깅이 얼마나 불가능한지.. 잘 알고 있기에 Tachyons가 4기준의 스케일 시스템을 쓰는것이 큰 장점으로 와 닿았다.

4기준의 스케일 시스템은 이미 구글과 애플에서 사용하는 디자인 시스템으로 4, 8, 12, 16, 20,..이렇게 4의 배수로 간격을 사용하는 개념이다. 브라우저의 기본 폰트값이 대부분 16px이라 4배수의 스케일 시스템이 잘 맞아 떨어진다.

관련글 : Designing your design system

주요 링크