배경
현재 팀내에선 qr/nfc오더를 개발하는 과정에 있었는데 현 회사에서 처음 참여하게된 B2C개발이였다.
B2B서비스와는 다르게 일관된 디자인적 요소를 제공하는것이 중요하다고 판단하여 디자인 시스템을 전부다 구성할 수 있으면 좋겠지만, 일정상 디자인과 개발을 함께 진행해야 하는 상황에서 가장 기초가되는 파운데이션만큼이라도 가져가자고했다.
tailwindCSS를 선택하게된이유
- tailwindCss는 utility-first CSS framework로, 제공하는 config파일을통해 color palette이나, typography를 쉽게 정의가 가능하고, 일관된 방식으로 css를 작성할 수 있다는점이 좋다고 생각했다.
- 물론 다른 css-in-js방식또한 변수로써 관리를 할 수 있지만, tailwindCSS를 사용하면서 의사클래스 사용,반응형처리나 불필요한 css변수명을 짓지 않아도 된다는점등에서 빠른 개발이 가능하다고 생각했다.
color palette정의하기
color palette를 정의하는의유는 개발 생산성측면에서도 있지만, 디자이너와의 소통을 위한 측면도있다.(더이상 #5a93f3와같은 헥사코드로의 소통을 지양하자)
우선global.css를 root폴더위치에 생성하고, 피그마에서 정의된 color palette를 변수로 작성해주자.
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
/* color palette 정의 */
--gray-100: #f7f7f7;
--gray-95: #eeeeee;
--gray-90: #dcdcdc;
--gray-80: #c4c4c4;
--gray-70: #b0b0b0;
--gray-60: #9b9b9b;
--gray-50: #8a8a8a;
--gray-40: #737373;
--gray-30: #5c5c5c;
--gray-20: #474747;
--gray-15: #303030;
--gray-10: #202020;
--gray-5: #171717;
}
이제 ide에서 자동완성으로 적용할 수 있게 위의 변수로 tailwind.config파일을 수정해주자
// tailwind.config.ts
import type { Config } from 'tailwindcss';
const config = {
content: ['./src/**/*.{ts,tsx}'],
prefix: '',
theme: {
extend: {
colors: {
gray: {
100: 'var(--gray-100)',
95: 'var(--gray-95)',
90: 'var(--gray-90)',
80: 'var(--gray-80)',
70: 'var(--gray-70)',
60: 'var(--gray-60)',
50: 'var(--gray-50)',
40: 'var(--gray-40)',
30: 'var(--gray-30)',
20: 'var(--gray-20)',
15: 'var(--gray-15)',
10: 'var(--gray-10)',
5: 'var(--gray-5)',
},
},
},
},
} satisfies Config;
export default config;
tailwind.config파일까지 수정해준다면 아래와같이 color palette에서 정의한 색상을 사용할 수 있게된다.
typography 정의하기
우선 서비스에서 사용되고있는 텍스트관련 속성은 다음과같이 총5가지다.
- font-size
- font-weight
- line-height
- letter-spacing
- color
모든 속성을 사용할때마다 작성해주는건 매우 번거로우며, 실수할 가능성이 높다.
color를 정의했던 방식과 동일하게 위의 속성중font-size, font-weight, line-height, letter-spacing 을 변수로 정의하자
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
/* color palette 정의 */
--gray-100: #f7f7f7;
--gray-95: #eeeeee;
--gray-90: #dcdcdc;
--gray-80: #c4c4c4;
--gray-70: #b0b0b0;
--gray-60: #9b9b9b;
--gray-50: #8a8a8a;
--gray-40: #737373;
--gray-30: #5c5c5c;
--gray-20: #474747;
--gray-15: #303030;
--gray-10: #202020;
--gray-5: #171717;
/* typography관련 속성 정의 */
--font-size-sall: 0.5rem;
--font-weight-regular: 400;
--line-height-small: 0.5rem;
--letter-spacing-small: -0.01em;
}
마찬가지로 ide에서 자동완성으로 적용할 수 있게 위의 변수로 tailwind.config파일을 수정해주자.
공식문서에따르면 fontSize에대해선 object표기법을 허용해준다. 맞춰서 작성해주자. 예시로는 typographyH1이름으로 작성해보겠다.
https://tailwindcss.com/docs/font-size#customizing-your-theme
You can also specify a default line height using the object syntax, which allows you to also provide default letter-spacing and font-weight values. You can do this using a tuple of the form [fontSize, { lineHeight?, letterSpacing?, fontWeight? }].
// tailwind.config.ts
import type { Config } from 'tailwindcss';
const config = {
content: ['./src/**/*.{ts,tsx}'],
prefix: '',
theme: {
extend: {
colors: {
gray: {
100: 'var(--gray-100)',
95: 'var(--gray-95)',
90: 'var(--gray-90)',
80: 'var(--gray-80)',
70: 'var(--gray-70)',
60: 'var(--gray-60)',
50: 'var(--gray-50)',
40: 'var(--gray-40)',
30: 'var(--gray-30)',
20: 'var(--gray-20)',
15: 'var(--gray-15)',
10: 'var(--gray-10)',
5: 'var(--gray-5)',
},
},
fontSize: {
typographyH1: [
"var(--font-size-sall)",
{
fontWeight: "var(--line-height-small)",
lineHeight: "var(--line-height-small)",
letterSpacing: "var(--letter-spacing-small)",
},
],
},
},
},
} satisfies Config;
export default config;
tailwind.config파일까지 수정해준다면 아래와같이 typographyH1로 정의한 속성을 사용할 수 있게된다.
결론
이렇게 정의함으로써 디자이너와 소통을할때 동일한 언어로 소통이 가능하며(ex. gray100, --letter-spacing-small), 수정사항이 발생했을때 더이상 모든파일을 일일이 수정하지 않아도되게 되었다. 또한 일관된 개발자 경험을 제공함으로써 개발속도또한 상승할 수 있게되었다.