우여곡절 블로그 개발 4

tailwind logo

tailwind로 블로그 디자인 하기

백엔드와 프론트엔드가 어느정도 완성 되었을때 프론트엔드 디자인을 만들어야 했었다.
다른 블로그들은 어떻게 디자인이 되었나 확인차 여러 블로그들을 둘러보면서 우연히 tailwind가 적용된 블로그를 보면서 tailwind를 알게되었고
기존 만들어놨던 css가 있었지만 마음에 안들기도 했고 새로운걸 배워볼겸 tailwind를 적용해 보기로 했다.

tailwind란 부트스트랩 과 같이 미리 만들어진 css 코드 조각들을 가져다 조합해서 원하는 스타일을 적용하는 css 프레임 워크이다.
html 코드에 className으로 직접 적용하는 방식인데 미리 정의된 내용이들이 짧고 간결해서 css 코드를 일일이 작성할 필요없이 빠르게 디자인이 가능했다.
내가 느낀점은 마치 css 코드를 아주 세세하게 나눠서 레고를 조립하듯이 작성하는게 간결하면서도 개발을 빠르게 하는게 참 좋았다.
물론 크고 복잡한 css 일수록 가독성이 심각하게 떨어지지만.

tailwind를 시작하기 전에

먼저 PostCSS의 존재를 알아보자. 간단하게 말하자면 PostCSS란 javaScript를 사용하여 css를 변환 시켜주는 도구이다.
PostCSS의 공식 문서에서는 css 에 사용자 지정 구문을 만들어낼수 있는 플러그인이라고 소개하고있다.
근데 이걸 대체 왜 알아야 하냐고? tailwind 자체가 postCSS의 플러그인중 하나이다. 실제 tailwind 문서에서 소개하고있는 설치방법에 postCSS가 포함되어있는데 최소한 이게 뭐고 뭐때문에 필요한지는 알아야 하지 않는가?
(사실 tailwind 문서에 있던 postCSS 가 뭔지 몰라서 계속 찾아봤는데 설명은 없고 설치방법만 복붙한 영양가 없는 글들만 있어서 화가나서 그럼)

tailwind 설치하기

아래의 방법은 next.js 프레임워크에 tailwind를 적용하는 공식문서에서 소개하고있는 방법이다.
먼저 필요한 패키지를 설치하고 init 명령어를 실행해서 tailwind.config.js 파일을 만든다.
-p 옵션은 postcss.config.js 파일도 같이 생성하는 옵션이다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

init 명령을 실행하고나면 `tailwind.config.js` 파일과 `postcss.config.js` 파일이 생성된다. 그리고 tailwind.config 파일을 수정한다. 여기서 content 는 tailwind가 적용되어야할 모든 파일들이 있는 경로다.

//tailwind.config.js
module.exports = {
  content: [
      "./pages/**/*.{js,ts,jsx,tsx}",
      "./src/**/*.{html,js}"
      ],
  theme: {
    extend: {},
  },
  plugins: [],
}

프로젝트의 메인이 될 css 파일을 만들고 아래와 같이 작성한다.
참고로 create-next-app 명령어로 생성한 프로젝트는 기본적으로 global.css 파일에 이렇게 작성하는데 여기선 다른 css파일을 직접 생성했다.

//tailwind.css
@tailwind base;
@tailwind components;
@tailwind utilities;

마지막으로 메인 css 파일을 _app.js 파일에서 임포트 시켜준다.

import '../src/tailwind.css'
    /*
        ...nextjs의 app.js 내용
    */

이제 /pages 와 /src 안에 있는 모든 파일에 tailwind 문법이 적용되었다.
tailwind를 사용하는 방법은 html 태그 className에 직접 써주면 바로 적용된다.

export default function Home() {
  return (
    <h1 className="text-3xl font-bold underline">
      Hello world!
    </h1>
  )
}

블로그 디자인 제작 후기

사실 나는 css를 정말 못다룬다. 이때까지 해봤던건 css module로 작성하는것만 해봤었고 사실 처음에 css를 적용할때는 css module 방식으로 직접 작성했었다. 그러다 다른 블로그들의 디자인을 참조하려고 많은 블로그들을 둘러봤었다.

이건 내가 참고했던 블로그들 목록이다.
내가 원했던 디자인은 복잡하지않고 단순하며 핵심내용인 포스팅만 보면 그만인 그런걸 원했고 가장 적합한게 yceffort 블로그에 적용된 디자인이었다.
그래서 저 디자인을 최대한 베껴서 나만의 ui를 만들고자 했었다. 마침 저 ui도 tailwind로 만들어져있어서 뭔가 막히는게 있으면 바로 코드를 보고 고칠수도 있었다.
그렇게 80% 쯤 디자인을 완성했을때 깨달은 사실이지만 사실 저 ui는 github에 있는 무료 탬플릿이었다는 거였다.
https://github.com/timlrx/tailwind-nextjs-starter-blog 바로 이거 였는데 이 탬플릿을 쓰는 블로그들도 많이 있더라 하지만 이런들 어떠하랴 처음부터 직접 손으로 만들어 내다니 여간 기합이 아닐수가 없다.
아무튼 tailwind를 사용하면서 쉽고 빠르게 css 완성할수 있었다. 특히 이미 만들어진 컴포넌트 예제들도 꽤나 있었다.
styled component , css module , tailwind 중 무엇이 가장 좋다라고 정할순 없지만 간단한 css 디자인이라면 나는 tailwind를 선택할것 같다.

우여곡절 블로그 개발 4

2022.11.20

tailwind로 블로그 디자인 하기

tailwind를 시작하기 전에

tailwind 설치하기

블로그 디자인 제작 후기