[Tailwind CSS] Tailwind CSS로 다양한 스타일 작성하기 (3d 애니메이션, bg gradient & image url, 반응형 디자인)

✏️ 이 글은 사이드프로젝트 "스무디"를 개발하며 알게된 점은 정리하여 기록한 글입니다. 

 

 

 

"스무디"는 위 프로젝트 이름으로, 작년 여름 부트캠프 팀 프로젝트로 6명이 함께 작업한 사이드 프로젝트였다.

이번에 여러가지 이유와 목적으로 개인 사이드 프로젝트로 처음부터 다시 작업을 했다.

 

기존 프로젝트에서는 CSS module을 사용해서 스타일을 작성했고, 이번 프로젝트에서는 Tailwind CSS를 적용하기로 했다. 기존에 이미 작성했던 CSS 코드도 있었기 때문에, Tailwind에 익숙해지기만 하면 빠르게 적용할 수 있을 줄 알았는데, 생각보다 이런저런 고비가 많았다. 예상보다 시간 또한 오래 걸렸다.

 

그 중 프로젝트 초창기 마주했던 문제들의 해결 과정을 정리해보려 한다.

💅 Tailwind CSS로 무엇을 구현하려 했냐하면...

1. Flip 효과를 위한 3d 애니메이션
  ➕ 부모 요소를 hover 했을 때 자식 요소 Flip 구현
2. background gradient 적용 (inline 스타일 적용하기)
3. background image에 url 삽입
4. 반응형 디자인: mobile first

 

 

 1. Flip 효과를 위한 3d 애니메이션 

💬 Tailwind에서는 3D 효과를 위한 유틸리티 클래스가 충분히 제공되지 않는다. 그래서 처음에는 Flip 효과를 위해 라이브러리를 사용해야 하나 생각했다. 하지만 스무디 프로젝트에서 구상한 3D 효과는 카드를 Flip하는 효과 하나밖에 없었기 때문에 라이브러리 없이 직접 구현하기로 했다. 결과적으로 라이브러리 없이도 충분히 직접 구현할 수 있었다.

 

초기 컴포넌트와 스타일링은 아래와 같다.

 

CARD WRAPPER를 hover하면 CARD VIEW가 Flip되는 효과를 구현해보자.

 

CARD WRAPPER에 hover로 index.css에서 추가했던 유틸리티 클래스 'rotate-y-180'을 추가하면 우선 카드가 움직이기는 한다. 하지만 내가 원하는 대로 동작을 하게 만들기 위해서는 조건이 몇 가지 있었다.

 

① 초기에는 BACK이 아닌 FRONT가 보여야 한다.

• 이 작업은 상상력을 필요로 한다.
카드의 FRONT 요소와 BACK 요소는 각각 앞, 뒷면이 존재하고 FRONT의 뒷면과 BACK의 앞면은 붙어있다고 상상한다. 마치 종이 두 장이 붙어 하나의 카드(CARD VIEW)를 만든 것 같은 모습이다.

• 초기 BACK은 이미 Flip된 형태로 있어야 한다. (그렇게 해야 앞면이 Flip 되면서 자연스럽게 뒷면이 보이게 되기 때문이다.)
  ➡️ BACK에 rotate-y-180 적용

• 마지막으로, FRONT와 BACK은 Flip이 될 때 카드 각각의 뒷면은 보이지 않아야 한다.
  ➡️ CSS에 backface-visibility: hidden 추가

 

위 조건이 추가된 코드는 아래와 같다.

 

② CARD WRAPPER가 hover되면 CARD VIEW가 Flip되어야 한다.

즉, 부모 요소를 hover 했을 때 자식 요소가 Flip 되어야 한다.

➕ 부모요소를 hover 했을 때 자식요소 Flip 구현

🔗 출처: https://tailwindcss.com/docs/hover-focus-and-other-states#styling-based-on-parent-state

 

생각보다 매우 간단하다. 부모요소에 group 클래스를 지정해주고, 타겟이 되는 자식요소에는 group-{modifier}와 같이 지정해주면 된다.

 

아래와 같이 코드를 작성할 수 있다.

 

• 부모요소인 CARD WRAPPER에 group을 설정하고, 타겟이 되는 자식 요소인 CARD VIEW에 hover 효과를 작성했다.

• 3D 애니메이션을 위한 CSS로는 perspective, preserve-3d, duration을 적용해주었다.

  • perspective는 3D 요소에 원근감을 표현할 때 사용하고,

  • transform-style: preserve-3d를 적용하면 자식요소가 3D 공간에 배치된다.

  • duration-500으로 rotate의 시간을 정해주어 움직임이 보이도록 하였다.

 

 

 

전체코드 ⬇︎

function App() {
  return (
    <div className="flex flex-col itmes-center justify-center gap-10 h-screen bg-slate-200 p-10">
      <Card />
    </div>
  )
}

function Card() {
  return (
    // CARD WRAPPER를 hover하면 CARD VIEW가 Flip되는 효과
    <div className="group h-[348px] [perspective:1100px]"> {/* CARD WRAPPER */}
      <div className="relative w-full h-full duration-500 [transform-style:preserve-3d] group-hover:rotate-y-180"> {/* CARD VIEW */} 
        <div className="card-dynamic-size card-front-back">FRONT</div>
        <div className="card-dynamic-size card-front-back rotate-y-180">BACK</div>
      </div>
  </div>
  )
}

export default App

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .card-static-size {
    @apply w-[282px] h-[348px];
  }

  .card-dynamic-size {
    @apply absolute top-0 left-0 w-full h-full;
  }

  .card-front-back {
    @apply z-10 flex flex-col px-6 py-7 bg-white rounded-[20px] shadow-md;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
}

@layer utilities {
  .rotate-y-180 {
    transform:rotateY(180deg)
  }
}

 

 

 

 2. background Linear gradient 적용 (inline 스타일 적용하기) 

💬 두번째 난관이었다. 내가 원하던 카드는 사선으로 나뉘어진 background가 있어야 했고, 기존 프로젝트에서는 아래 CSS 코드를 사용해 아래와 같은 background를 만들었다.

 

Tailwind에서는 Linear gradients가 top, bottom, left, right의 방향으로만 가능한 것 같았다.

 

 

하지만 아래와 같은 inline 스타일로 linear-gradient를 직접 지정해줄 수 있다.

(역시 찾아보면 방법은 다 있고, 안되는건 없다…)

 

• 대괄호 []를 사용해 기존 CSS 스타일 적용 가능

  🔗 출처: https://tailwindcss.com/docs/adding-custom-styles#using-arbitrary-values

• 속성 사이의 공백은 ‘_’로 표현 가능

  🔗 출처: https://tailwindcss.com/docs/adding-custom-styles#handling-whitespace

 

 

 3. background image에 url 삽입 

🔗 출처: https://tailwindcss.com/docs/background-image#customizing-your-theme

 

스타일을 작성하다보면 background image를 삽입해야 하는 일도 종종 있는데, 아래와 같이 inline으로 경로를 작성하니 안그래도 지저분해 보이던 코드가 더 지저분해 보여서 tailwind.config.js 추가하는 방법을 사용하기로 했다.

 

background image를 tailwind.config.js에 추가하고,
해당 이미지를 컴포넌트에서 불러와 사용하는 방법을 알아보자.

tailwind.config.js

해당 컴포넌트

 

컴포넌트에서는 위와 같이 Tailwind 유틸리티 클래스를 사용하는 것처럼 불러올 수 있다.

이 때 주의할 점은 이미지를 가져오는 경로는 컴포넌트 내에서 inline으로 작성한다고 해도 tailwind.config.js 기준으로 해야 한다. 경로 설정 때문에 초반에 조금 헤맸었다.

 

 

 4. 반응형 디자인: mobile first 

Tailwind에서는 Responsive Design을 할 때 기본적으로 mobile-first 작업을 한다.

🔗 출처: https://tailwindcss.com/docs/responsive-design#working-mobile-first

 

기본적인 Breakpoint는 아래와 같고, 필요하다면 커스터마이징 가능하다.

 

---

 

스무디 프로젝트의 Header의 경우 아래와 같이 반응형 작업을 했다.

 

width 640px 이상일 경우

width 640px 미만일 경우

640px을 기준으로 햄버거 버튼이 생겼다 사라지는걸 구현하기 위해 header 박스 자체를 스크린 크기에 따라 숨기고, 보여주는 방식을 선택했다.

---

 

또 다른 예시로는 프로젝트 카드를 보여주는 리스트가 있는데,
이는 스크린의 크기에 따라 grid의 배치가 달라지도록 작업했다.

💬 나는 항상 PC 부터 작업을 해왔었는데, 모바일 first로 작업하려고 하니 은근 헷갈렸다. 하지만 이것도 사용하다 보니 적응이 되었고, 간단한 클래스 작성만으로 반응형 디자인을 쉽게 구현할 수 있어서 좋은 경험이었다.

 

🙂