🎆SSR 환경에서 CSS 어떻게?
프로젝트에서 Next.js13을 사용하기 위해 떠난 험난한 여정..
어떻게 해야 마크업 작업 시간을 줄이고 개발에 집중할 수 있을지를 고민하다보니 CSS에 대해 많은 걸 배울 수 있었다.
1. figma와 tailwind
- figma의 dev mode로 디자인된 컴포넌트를 코드로 변경할 수 있었다. 근데 모든 엘리먼트가
div로 나타나고 인라인 스타일로 css가 지정되어있었다.- 바로 사용하기엔 무리라고 생각해 다른 프레임워크들을 찾아봤다.
- 테오님의 강의 - 함수형 css와 피그마 협업
- 시맨틱하지 않은 css 네이밍, 그리고 가독성떨어지는 jsx가 결국 쓰기 편하다는 결론을 인정할수밖에없었다.
- tailwind가 좋다고는 하는데 공식 웹사이트에선 컴포넌트와 템플릿이 유료여서, 다른 방법도 찾아보기로 했다.
2. MUI
- 만들어진 UI를 찾다 MUI를 Next.js에서 써보기로했다.
- 사실 css-in-js가 서버사이드렌더링에 친화적이지는 않아서 추가 설정이 필요하다는 것을 알았다.
- mui측에서 만들어놓은 샘플코드를 발견했다.
- 그리고 여기엔 next.js에서 사용을 위해 emotion config파일이 추가되어있다.- Github: emotion config
- 근데 리드미를 읽었더니, emotion은 서버컴포넌트를 지원하지 않는다는 설명이 있다.
- 런타임 자바스크립트가 필요한 CSS-in-JS 라이브러리는 현재 서버 컴포넌트에서 지원되지 않는다.
- 서버컴포넌트를 사용하려면
Panda-CSS나Vanilla Extract와 같은 제로 런타임 솔루션을 고려할 수 있다.
3. 제로런타임 CSS
- 런타임에 css생성하지않아 페이지를 더 빨리 로드 가능
- 첫 load는 빠르지만, 첫 paint는 느릴 수 있다.
- near-zero runtime : Atomic CSS
- 필요한 수치를 입력을 해두면 필요한 CSS를 자동으로 생성을 해두는 주문형(on-demand) 패러다임
- Next.js와 매우 잘맞는 .. 결국 tailwind - Styling: Tailwind CSS
4. figma → tailwind
Tailwind CSS 적용기 2편 - 개발자가 퍼블리싱 하는 방법(Feat.TailwindCSS & Figma)
- 놀랍게도.. figma 디자인에서 jsx+tailwind로 변환시켜주는 플러그인이 있었다.
처음부터 알았다면.. 이런삽질을 하지 않았겠지..
5. 결론
- CSS 프레임워크를 결정하는 과정이.. 그렇게 단순한 문제가 아니라는걸 깨달았다. 가독성도 물론 중요하겠지만, 프론트엔드 개발 방법에 따라 CSS가 로드되는 방법도 달라지기때문에 종합적인 고려를해서 결정해야한다는 걸 배웠다.
- tailwind를 받아들이자… 사람들이 쓰는데는 이유가있는 법이다….
State of CSS 2023: CSS Frameworks
