[블로그 프로젝트] 1. TailwindCSS + α 로 디자인 구현하기

• 개인 블로그를 개발하며 개발일지를 작성 중이다. 그 중 몇 가지를 하나의 주제로 모아 티스토리에 남기고자 한다.
• 특히 이번 글에서는 블로그의 외관에 관련된 주제로 작성하고자 한다.

---

반응형 디자인 with TailwindCSS

모바일과 웹 모두를 만족시키자

반응형 디자인의 흔적

 

  테일윈드는 오픈소스 CSS 프레임워크로, Utility-First라는 컨셉을 내세우고 있다. 일반적으로 CSS처럼 클래스 이름을 정의하고, 해당 클래스를 스타일링하는 방법이 아닌, 유틸리티 클래스를 작성하여 이를 HTML에 바로 적용하는 방식을 취하는 것이다. 테일윈드에 대한 것은 나중에 조금 더 자세히 다뤄보겠다.

 

  블로그 계획 당시부터 반응형 디자인을 하려 마음먹던 내가 테일윈드를 사용한 이유는 반응형 디자인의 적용이 간편하기 때문이다. 테일윈드는 모든 유틸리티 클래스에 적용할 수 있는 브레이크 포인트 prefix를 제공하며, 이것을 통해 화면의 특정 너비 수치에 따라 각기 다른 스타일을 컴포넌트에 적용하는 것이 가능하다. 이 브레이크 포인트는 테일윈드에서 디폴트로 적용된 값이 존재하고, 원한다면 언제든 Config 파일에서 수치를 수정하거나 자신만의 브레이크 포인트 prefix를 설정하는 것이 가능하다.

 

  한 가지 조심할 점은, 테일윈드의 반응형 시스템은 Mobile-first가 디폴트라는 점이다. 즉 모바일 같이 작은 화면을 우선시 하기에, 브레이크 포인트를 설정한다는 것은 '특정 너비 이하'가 아닌, '특정 너비 이상일 때 해당 스타일 적용'이라고 이해해야 한다. 

 

반응형 디자인이 적용된 모습

 

 

 

next-themes + TailwindCSS 로 다크모드 구현하기

  TailwindCSS에서 다크 모드의 스타일을 지정하기 위해서는 'dark' prefix를 사용하면 된다. 다만 이 방법은 운영체제에 설정된 값에 따라 스타일을 바꾸는 것이다. 다양한 웹사이트에서 확인할 수 있는, 운영체제 설정과 상관없이 테마 전환하기는 별도의 방법을 사용해야 한다. (예시: 테일윈드 공식 문서)

 

  이를 좀더 간편하게 만들어주는 것이 바로 next-themes이다. Next.js에서 사용하기 편한, 테마에 관련된 다양한 기능을 제공한다. 테일윈드와 함께 사용할 수 있으며, next-themes에서 제공하는 useTheme 훅을 사용해 현재 테마 상태를 확인하고 이를 손쉽게 바꿀 수 있다.

 

  주의할 점은 공식 문서에서도 언급하듯, 화면이 완전히 mount 된 상태에서 테마 관련 컴포넌트를 렌더링해야 한다는 것. SSG나 SSR을 할 때는 서버측에서 현재 테마의 상태를 알 수 없으므로, useTheme이 반환하는 theme도 undefined가 된다.

  내 경우 좌측에 위치한 파도 SVG의 색을 useTheme 훅이 반환하는 theme 값에 따라 변하게끔 했는데, 위에서 언급한 점을 미처 고려하지 않아 최초 렌더링 시 파도의 색상이 테마와 맞지 않는 경우가 생겼었다. 이 또한 화면이 마운트될 때까지 렌더링을 하지 않음으로써 해결할 수 있었다.

 

테마 바꾸기가 적용된 모습

 

---

• 블로그를 만들면서 가장 즐거웠던 부분이 디자인 적용이다! 스스로 만든 디자인이라 모자란 부분도 많지만, 원하는 디자인을 구현하기 위해 이런 저런 것들을 알아보며 새로운 것을 알 수 있었다. 역시 하고싶은 것을 할 때 모티베이션이 쭉쭉 올라가는 느낌.
• 사족으로 블로그 현재 개발 상황을 말하자면, 목표한 기능은 상당수 구현이 된 상태다. 남은 부분도 열심히 만들어서 봄이 되기 전엔 배포해보고 싶다!

 

[참고]

테일윈드 공식 문서 https://tailwindcss.com/docs/responsive-design)