지난 글 보기

1. Tailwind CSS 적용기1편 (설치, 사용)

Tailwind&Figma

지난 포스트에서는 TailwindCSS를 React환경에 적용하는 방법을 소개 했었습니다. 이 포스트에서는

Tailwind와 Figma를 통해 퍼블리싱 작업을 한 과정을 소개하려고 합니다.

😦퍼블리싱을 해라!

이번에 신규 프로젝트의 Front-end개발을 지원하게 되었습니다. 그런데 저에게 주어진 것은 Figma 프로젝트와 화면설계서가 전부였습니다.

출처 : GIPHY

화면 요소를 일일히 만드는 작업은 해본 적 없었던 저는 Figma에서 각 요소의 Inspect를 보며 Tailwind 클래스를 작성해야 하는구나..하고 생각하고 있었습니다. 그래서 개발자답게 좀 더 쉬운 방법을 찾아보았습니다

😮Figma Plugin

Figma는 굉장히 다양한 무료 Plugin들을 지원합니다.

Tailwind에 대한 수많은 플러그인들

그 중에 Inspect - Export to HTML, React, TailwindCSS 라는 플러그인을 사용해보았습니다. 이 플러그인은 피그마의 요소를 HTML 이나 JSX로 변환해주고, Tailwind에 적용할 수 있도록 클래스를 작성해주거나, 인라인 스타일을 작성해주는 강력한 플러그인입니다.

사용방법

플러그인 사용방법

사용방법은 Tailwind로 추출하고자 하는 Figma 요소를 우클릭해서 plugins > Inspect - Export to HTML...을 클릭하면 다음과 같은 화면이 나옵니다.

HTML + Tailwind

선택한 요소가 HTML + Tailwind형태로 출력됩니다. 이 정도로도 놀라운 기능이지만, 우리는 React를 사용하기 때문에 JSX(TSX) 양식이 필요했습니다. 그런데 이 플러그인은 JSX도 지원합니다.

JSX + Tailwind

위 추출한 결과를 Preview로 확인할 수 있고, Asset 요소가 있다면 별도로 다운받을 수 있도록 하는 기능도 지원합니다.

프리뷰 기능

Asset 추출 기능

프로젝트에 적용

위 코드를 복사해서 프로젝트 코드에 붙여넣기 하면 끝이다. 프로젝트에 적용하면 다음과 같이 나옵니다.

피그마 요소하고 비교해보면 조금씩 차이는 있지만, 손쉽게 화면 요소를 작성할 수 있었습니다. 이제 화면에 맞게 조금씩 스타일을 수정해주고, 이미지 연결하고, 색상은 Tailwind config에 정의해놓은 것으로 변환해주면 다음과 같이 요소가 완성된다.

완성된 요소

⚙️피그마 스타일가이드 & TailwindCSS Config

또한 Figma 파일에 스타일가이드가 있다면, Tailwind config에서 상세하게 프리셋을 설정해줄 수 있습니다.

프로젝트 스타일가이드

색상

// tailwind.config.js
module.exports = {
  ...,
  theme: {
    extend: {
      ...,
      colors: {
        accent: {
          DEFAULT: '#7F43F5',
          1: '#9364F2',
          2: '#A884EF',
          3: '#BCA4EB',
          4: '#D0C5E8',
          5: 'rgba(0, 0, 0, 0.1)',
        },
        gray: {
          DEFAULT: '#FFFFFF',
          1: '#E5E5E5',
          2: '#AEB0B4',
          3: '#707885',
          4: '#353C49',
        },
        black: '#000000',
        bg1: '#F6F9FF',
        line: '#E5E5E5',
        text: {
          DEFAULT: '#353C49',
          1: '#707885',
          2: '#AEB0B4',
          3: '#7F43F5',
          4: '#5B75EC',
          5: '#EC6A65',
          6: '#399B54',
        },
        placeholder: '#B5B5B5',
        googleButton: '#F5F5F5',
        toast: '#79D1DF',
      },
      ...,
    },
  },
...,
}

색상 설정은 colors 로 정의해서 사용합니다. key는 색상 분류이고, value는 색상값입니다. 위 스타일가이드에서 Gray 0~4, Black, Accent 0~4, Black 과 Text 0~7 으로 정의된 색상은 같은 분류에 여러 값이 있는 것이라 value를 object로 하여 세분화를 해주었습니다.

간격

// tailwind.config.js
module.exports = {
    ...,
  theme: {
    extend: {
            ...,
      },
      spacing: {
        '1oct': '8px',
        '2oct': '16px',
        '3oct': '24px',
        '4oct': '32px',
        '5oct': '48px',
        '6oct': '64px',
        '7oct': '80px',
      },
    },
  },
  ...,
}

간격 설정은 spacing 로 정의해서 사용합니다. oct 라는 단위는 같이 프로젝트 작업한 동료와 같이 합의해서 설정한 임의의 단위입니다.

활용

<p className='text-[24px] text-left leading-[32px] tracking-[-0.5px]'>
    <span className='text-[24px] font-bold text-left text-text-3 leading-[32px] tracking-[-0.5px]'>
      키워드,
  </span>
  <br />
  <span className='text-[24px] font-medium text-left text-text leading-[32px] tracking-[-0.5px]'>
      검색량만 보고 계신가요?
  </span>
</p>
<p className='text-[14px] text-left text-text-1 mt-1oct leading-[20px] tracking-[-0.5px]'>
    <span className='text-[14px] text-left text-text-1 leading-[20px] tracking-[-0.5px]'>
        버즈량, 긍부정율, 연관어 등 다양한 데이터를 통해
    </span>
    <br />
    <span className='text-[14px] text-left text-text-1 leading-[20px] tracking-[-0.5px]'>
        키워드 영향력을 파악하고 브랜드 키워드를 관리하세요
    </span>
</p>
<div className='w-full h-[172px] relative overflow-hidden bg-white shadow-input mt-2oct p-[6px] rounded-[12px]'>
    <img src='img1.png' className='w-full round-[10px]'/>
</div>

<button
    onClick={() => {}}
  className='bg-accent px-4 py-2 text-white text-[14px] font-robot rounded-[32px] font-medium'
>Logout</button>

스타일가이드에 있는 색상이나 간격 등 세밀하게 사전 정의를 해놓을 수 있는 속성들이 있다면 TailwindCSS config에 정의를 해 두고 사용할 수 있습니다. 이렇게 정의를 해 두면 코드 작성이 수월해지고 가독성도 올라가는 장점이 있었습니다. 자세한 config 설정법은 여기를 참고 해주세요.

👋 퍼블리싱 후기

저는 프론트 작업을 할 때 가장 기피했던 부분이 직접 css파일을 작성해서 화면 요소를 디자인하고 위치시키는 작업이었습니다. 그런데 이번 프로젝트를 진행하면서 TailwindCSS를 처음 접하게 되었고, Figma와 함께 사용하면서 퍼블리셔 없이 퍼블리싱과 프론트 작업을 작업해보니 TailwindCSS의 강력함을 느낄 수 있었습니다.

퍼블리싱이 되어있지 않은 프로젝트라 작업 소요 기간을 약 3주~4주 정도로 잡고 진행했는데, TailwindCSS와 Figma 플러그인을 활용하니 약 2주 만에 프로젝트를 완료할 수 있었습니다.

만약 프론트 작업할 때 피그마로 디자인 시안이 주어진다면, TailwindCSS와 플러그인을 활용해서 작업 하시면 더 빠른 속도로 작업을 완료하실 수 있을것입니다. 읽어주셔서 감사합니다.

🚀 김우주 (universpace@datamarketing.co.kr) Development Team Back-End Developer

이 포스트에서는 TailwindCSS 를 React 환경에서 사용하는 방법을 소개하려고 합니다.

🤔TailwindCSS?

새로운 프로젝트를 들어가는데 TailwindCSS를 도입하자는 의견이 나왔고 결정이 되었습니다.

TailwindCss는 Utility-First컨셉을 가진 CSS 프레임워크입니다.

부트스트랩과 비슷하게 m-1, flex, transition-all 등과 같이 프레임워크 내에 정의된 유틸리티 클래스를 이용해서 css를 별도로 작성 할 필요 없이 HTML 안에서 빠르게 스타일링이 가능해집니다.

👉시작

프로젝트 생성

Tailwind를 적용할 리액트 프로젝트가 있어야겠죠 ? create-react-app의 typescript옵션을 이용해 typescript템플릿으로 리액트 앱을 생성합니다.

npx create-react-app [프로젝트 이름] --template typescript

npm으로 TailwindCSS 설치

Tailwind CSS v2 부터는 IE를 지원하지 않기 때문에 PostCSS의 autoprefixer 등을 함께 사용해야 한다.

npm install --save tailwindcss@latest postcss@latest autoprefixer@latest

또는

yarn add tailwindcss@latest postcss@latest autoprefixer@latest

postcss 플러그인에 tailwindCss 추가하기

// 루트경로의 postcss.config.js 등 postcss의 설정파일입니다
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

TailwindCss 초기화파일 생성

npx tailwind init -p

명령을 실행하면 아래와 같은 파일이 생성됩니다 !

해당 파일을 통해 기본 스타일, 변수 등 웬만한 것을 커스텀 가능

기본 설정 커스텀

content 설정에 대한 정보는 여기서 자세히 확인 가능합니다.

설정 커스텀에 대해서는 뒤에서 조금 더 다루어 보겠습니다.

module.exports = {
    // Tailwind의 class이름이 포함된 파일에 대한 경로를 구성하는 부분을 추가합니다.
    // src경로 내부에 자바스크립트, 타입스크립트, jsx를 리턴하는 파일들을 모두 작성 해줍니다.
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tailwind 지시어 CSS파일에 추가하기

프로젝트 css초기화파일에 테일윈드 지시어를 추가해줍니다.

CRA로 생성된 프로직트 이므로 src/index.css에 추가 해줍시다.

IntelliSense 설치 (vscode)

Intellisence for VScode

VS Code Extention인 IntelliSense를 설치하면 훨씬 빠르고 쉽게 스타일을 적용 가능하다.

자동완성, 오류, 버그를 강조해주고 클래스 이름에 마우스를 hover시 해당 클래스가 가지는 스타일을 보여주는 편리한 Extention이니 Tailwind를 쓴다면 같이 사용해주자.

사용하기

위와 같이 클래스명 입력만으로 스타일링이 가능하게 됩니다 !

각 클래스명이 가지는 스타일은은 여기서 자세히 확인이 가능합니다.

Tailwind config 커스텀하기

위에서 말했듯 tailwind.config.js를 통해 기본 스타일 값을 쉽게 커스텀할 수 있습니다.

위와 같이 커스텀 컬러를 정의해둔 후 아까 작성했던 버튼의 클래스명을 아래와 같이 바꿔볼까요 ?

tailwind.config.js파일에 작성 한 커스텀 컬러가 잘 적용이 됐습니다.

커스텀 컬러 작성 시 주의할 점은 기존 tailwind에 정의된 클래스 네임과 겹치는 컬러 값을 재정의 할 경우

extend 객체 안에 넣어주지 않으면 tailwind의 기본 스타일이 덮어써지므로 extend객체를 잘 활용해야 합니다.

🤟마치며

이번에 신규 프로젝트를 Tailwind CSS를 사용하여 개발하면서 클래스 이름을 고민 할 필요가 없어지고, css파일과 html 템플릿 파일을 왔다갔다 하며 작업 할 필요도 없었고, 마크업 개발에 대한 만족도가 매우 높아졌습니다.

특히 피그마를 활용한 디자이너 ↔ 개발자 간 협업에서 Tailwind는 더욱 높은 만족감을 안겨 주었습니다.

다음 편에선 피그마를 활용한 디자인 템플릿이 있을 때 데이터마케팅코리아 Front-End파트에서 어떻게 빠르게 마크업을 진행했는지에 대해서 포스팅을 이어나가겠습니다!