8/30 - Vanila Extract 적용

vanila extract 시작

vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.

vanilla-extract — Zero-runtime Stylesheets-in-TypeScript.

오늘은 대부분의 시간을 vanilla-extract을 배우고, 적용하는데 시간을 보냈다.

 

설치는 공식 페이지의

Next.js — vanilla-extract

Next.js — vanilla-extract

해당 항목을 따라가면 어렵지 않게 설치 가능했다.

 

우선은 스타일보다 테마를 지정하고 싶어서, 테마란의 내용을 확인했다.

공식 페이지의 테마 부분 소개

페이지를 확인하니, vanilla extract는 CSS 변수의 기능을 사용한다는게 와닿았다.

우리가 vanilla extract의 사용법에 따라 css.ts 파일을 작성하면,

컴파일 시에 CSS 시트로 변환되고, CSS 시트 내용을 확인하면 CSS 변수를 통해 테마의 특정 값을 사용할 수 있음을 알 수 있다.

 

createVar — vanilla-extract

createVar — vanilla-extract

또한 createVar을 통해 공통된 변수 값을 가지는 변수를 만들 수도 있다.

createVar로 생성한 변수는 다크모드에 적용이 가능할 것 같다.

px과 em, rem

매번 헷갈리는 폰트 단위 rem, em 제대로 이해하기 (brunch.co.kr)

매번 헷갈리는 폰트 단위 rem, em 제대로 이해하기

전반적인 레이아웃 작성에 들어가기 전에, 헤더(상단 네비게이션)의 사이즈를 어떻게 할지 고민하고있다.

 

웹 디자이너가 PX대신 REM을 사용해야 하는 이유 | 요즘IT (wishket.com)

웹 디자이너가 PX대신 REM을 사용해야 하는 이유 | 요즘IT

윗 글에 따르면,

폰트 사이즈는 기본적으로 브라우저에서 설정할 수 있는데,

이 사이즈를 페이지에서 임의의 px로 조정하게 되면, 사용자의 설정 값을 덮어씌워버리는 심각한 접근성 문제가 생길 수 있다고 말한다.

 

반응형 작업을 위한 폰트 단위 em / rem 사용 (tistory.com)

반응형 작업을 위한 폰트 단위 em / rem 사용

또한 이 윗 글에 따르면,

html의 전반적인 폰트 사이즈만 지정해놓고, 레이아웃을 em, rem으로 작성하게 되면 반응형에 매우 유리하다는 내용도 있었다.

+

직접 작성해보니 폰트 사이즈를 지정하는 것 자체가 사용자의 설정을 덮어 씌우기 때문에 접근성을 해치는 것으로 확인했다. 

 

그러므로 이전 프로젝트는 모두 px로 작업을 했었는데, 이번 프로젝트에서는 em과 rem을 적극 사용해 보려고 한다.

SEO에 맞춰 작성하려면 어떻게 해야할까

Next.js, SEO 최적화 (velog.io)

Next.js, SEO 최적화

중요한건 title과 meta 데이터를 적절하게 맞춰주는 것이고,

h1 ~ h6 등의 태그를 적절히 사용해야 하며, img 태그의 alt 속성도 작성해주는 것이 좋다고 한다.

 

본격적인 작업에 앞서 SSR 프레임워크인 Next.js를 쓰는 이유가 SEO의 향상의 목적을 했던 것을 생각하며,

이번에는 코드를 작성할때 위의 내용을 유의하여 작성해보고자 한다.

 

CSS-in-JS 사용에 대한 고민

다음.js vanilla-extract를 실행하는 13개의 앱 라우터 (zenn.dev)

Next.js 13 の App Routerでvanilla-extractを動作させる

윗 글을 읽어보았다.

정리하자면 Next.js 13 에서 vanilla-extract은 appDir : true라는 설정을 통해 작동이 될 수는 있지만,

기본적으로 공식문서에서 Client Component에서만 지원한다고 말했다.

Next.js 13 이 App Routing 방식으로 변경되었으므로, 이는 app 폴더의 컴포넌트가 기본적으로 Server Component로 작동하게 되었음을 말한다.

그러므로 vanilla-extract은 Server Component가 중요 기술인 Next.js 13 과는 의도적으로 맞지 않는다고 생각하게 되었다.

 

그래서 결국 어제의 Emotion 사용 고민을 넘어 vanilla-extract을 사용하기로 했지만,

해당 라이브러리도 Next.js 13의 목적에 알맞다고는 생각하지 않게 되었다.

 

아직은 vanilla-extract을 사용할 수 있는 방법을 고민하고있지만,

윗 글에서도 권장하듯이 CSS Module 방식으로 바꿔야할지 다시 고민해봐야할 시점인 것 같다..