typography 디자인 시스템 구축 과정

💬 타이틀, 서브 텍스트 등과 같이 모든 페이지에서 동일한 글꼴 크기, 색상, 굵기를 사용하고 있음에도 매번 css를 각각 직접 지정해주고 있었다. 공통된 텍스트 css를 매번 새로 지정하고 있는 비효율을 없애고, 동일한 글꼴 크기, 색상, 굵기를 사용하는 곳이라면 한 번에 가져와 사용할 수 있게 만들고 싶어서 typography design system을 구축하게 되었다.

기술스택

⚙️ next.js, tailwind css, postcss 기술스택에서 타이포그래피 디자인 시스템 구축
- tailwind만 쓰고 postcss는 결합되어있지 않았다면 @apply로 묶어서 디자인 시스템을 구축하는 방식을 사용하지 못함.

> `@apply`는 Tailwind CSS에서 유틸리티 클래스들을 CSS 안에서 재사용 가능하게 해주는 문법     입니다.

PostCSS가 있어야 @apply가 동작합니다.
(@apply는 CSS의 표준 문법이 아니라 Tailwind가 PostCSS 플러그인을 통해 확장한 기능이기 때문입니다.)
➡️ 예전에 인턴할 때도 타이포그래피 속성을 묶고싶었는데, 그때도 tailwind를 쓰고있었으나 PostCSS를 결합하지 않고 기본 Tailwind CSS만 사용했기 때문에 @apply 문법 적용이 안돼서 실패한 기억이 있어 이번 프로젝트에서는 처음부터 Tailwind를 PostCSS와 함께 설치했다.

2. 내가 원했던 것 ex)
   • h1에 해당하는 사이즈, 폰트 굵기, 줄간격 등을 하나의 분류로 묶고 싶었음
   • 반응형 적용할 수 있도록 하고 싶었음 (ex. 같은 h1임에도 모바일에서는 크기 몇, 데스크탑에서는 크기 몇 이런 식으로)
3. 내가 적용한 방식
   • app> styles> globals.css, typography.css
     (globals.css는 기본적으로 root에 있고 layout.tsx에서 import하고 있으므로, styles폴더로 옮길 경우 layout.tsx에서 import 경로 수정 필수!)
   • globals.css에서 typography.css를 import

     @import "tailwindcss";
     @import "tw-animate-css";
     
     @import "./typography.css";

   • typography.css 작성

     • 주의 : tailwind css import하는건 globals.css에서만 해야함 (typography.css에서는 @layer base { } 만 작성해야 함

       @import "tailwindcss";
       @import "tw-animate-css";

     • 예시

       @layer base {
           /* Headings */
           .h1 {
             @apply text-[32px] font-bold leading-[1.31em];
           }
         
           .h2 {
             @apply text-[30px] font-bold leading-[1.4em];
           }
         
           .h3 {
             @apply text-2xl font-semibold leading-tight;
           }
         }