피그마 (Figma) 무료 템플릿 - 테일윈드 CSS 스타일 (Tailwind CSS Styles)

Tailwind CSS 스타일를 기본 템플릿으로 써야 하는 이유

웹 프로젝트를 진행한다고 할 때 이제 테일윈드는 거의 기본 구성처럼 자리를 잡기 시작했습니다. 'shadcn', 'radix' 등 테일윈드를 기반으로 한 UI 라이브러리들이 점점 더 많은 사람들에 의해 개발되고 이용되고 있으며, 테일윈드는 이제 조금 심하게 말해서 CSS의 기본 스펙처럼 여겨지고 있는 것 같기도 합니다. 이는 테일윈드가 부트스트랩 등의 기본 UI 라이브러리와는 다르게 프레임워크 형식으로 가장 미니멀한 구조만 제공하고, 그 위에 실제 컴포넌트를 구성하거나 이용환경에 맞게 변경하는 것은 전적으로 이용자에게 달려있는 특성 때문인 것으로 보입니다.

테일윈드 공식 피그마 템플릿이 존재하는데, 이 또한 기본적인 레이아웃과 색상, 스타일에 대한 내용만 제공할 뿐 보다 구체화된 버튼과 같은 컴포넌트에 대한 정의는 사용자가 직접 내려야 합니다. 그럼에도 테일윈드가 제공하는 디자인과 개발상의 규격과 토큰을 그대로 활용할 수 있게 때문에, 손쉽게 디자인 체계를 구성하고 또 개발로 바로 활용될 수 있는 형태로 구성이 가능합니다.

디자인을 할 때에도, 작업량을 매우 덜어줄 수 있도록 기본 틀을 제공해 주기 때문에 디자이너 입장에서도 굳이 쓰지 말아야 할 이유가 없다고 생각이 되고, 개발자 입장에서도 명세화된 프레임워크 위에서 디자인이 이루어지기 때문에 개발 환경과 구현 방식 등에 있어서 새로 학습해야 할 요소가 적고, 재사용이 가능한 구조를 매우 쉽게 구성할 수 있습니다. 특히 토큰을 기반으로 한 디자인시스템 구현에 유리하기 때문에, 일회성 랜딩페이지가 아닌 웹 어플리케이션 형태의 재사용이 가능한 디자인시스템이 필요한 프로젝트에는 더욱 더 유용한 프레임워크 및 디자인 템플릿이라고 볼 수 있습니다.

Tailwind CSS 스타일의 공식 Figma 템플릿 소개

🚀 디자인 워크플로우를 향상시키는 Tailwind CSS Figma 템플릿

Tailwind CSS 스타일 템플릿은 UI 및 프론트엔드 개발자에게 혁신을 가져다줍니다. 이 포괄적인 Figma 파일은 필수적인 Tailwind CSS 스타일, 구성 요소 및 유틸리티를 모두 포함하여, 개발 프로젝트에서 사용할 정확한 사양으로 디자인할 수 있도록 도와줍니다.

🌟 주요 특징:

1. 완전한 Tailwind 팔레트: Tailwind CSS의 전체 색상 및 그라디언트 사용 가능.
2. 타이포그래피: Tailwind의 모든 텍스트 스타일이 사전 구성되어 즉시 적용 가능.
3. 유틸리티 클래스: 간편하게 간격, 테두리, 그림자 등을 통합.
4. 구성 요소: 버튼, 양식, 카드 및 기타 UI 요소를 즉시 사용 가능.

🚀 혜택:

• 일관성: 디자인과 개발이 완벽하게 일치.
• 효율성: 미리 만들어진 스타일과 구성 요소로 디자인 워크플로우 가속화.
• 정확성: 정확한 Tailwind CSS 설정으로 추측 작업 제거.

간략한 사용법:

토큰화된 디자인 스타일 프리셋을 커스텀하세요

폰트 크기 등을 일일히 새롭게 지정하기 보다는, 이미 지정되어 있는 가장 범용적으로 쓰이는 스타일 프리셋을 기반으로 내가 원하는 방식으로 커스텀을 가하는 것을 추천합니다. 특히 컬러의 경우에는 브랜드에 따른 커스텀 요구가 높을 수 있는데, 색상에 맞춰 값을 변경하거나, 별도 브랜드 컬러 팔레트를 신규로 작성하는 것도 방법이 될 것 같습니다. 이러한 프리셋 커스텀을 통해 디자인 과정에서 일관된 스타일 적용이 손쉽게 가능하며, 개발로 핸드오프 시에도 개발자가 한눈에 무엇을 커스텀으로 설정해야 하는지 알 수 있고, 그 외 내용은 프리셋을 활용하면 되기 때문에 작업 효율을 매우 크게 높일 수 있습니다.

프리셋 스타일을 커스텀해서, 기존 테일윈드 디자인 시스템 체계를 활용

규격화된 반응형 레이아웃을 활용하세요

웹 프로젝트는 반응형과의 싸움이 아주 골치 아플 때가 많습니다. 특히 디자인 할 때에도 많은 리소스와 시간이 소요됩니다. 몇 px로 반응형을 잡아야 하는지에서부터, 브레이크포인트는 어떻게 해야 하는지까지 크리에이티브 업무 외적으로 또 반복적으로 발생하는 업무들입니다. 테일윈드는 가장 범용적으로 쓰이는 반응형 레이아웃을 제공해 주기 때문에 이를 활용하여 디자인을 하면 됩니다. 필요하지 않은 브레이크포인트는 사용하지 않아도 되며, 이 기준에 맞춰서만 디자인이 된다면 이미 토큰화된 규격에 대해서 개발자도 인지를 하고 있을 것이기 때문에 개발자와 불필요한 반응형 구간 논쟁을 피할 수 있습니다.

개발자와의 반응형 싸움을 멈추게 해 줄 반응형 레이아웃

안전하게 구현하는 디지털 타이포그래피

디지털 타이포그래피는 UI 디자인에서 가장 중요하면서도 가끔씩 쉽게 간괴되는 영역이기도 합니다. 디바이스에 적합하지 않은 크기를 지정한다든지 무한으로 폰트 사이즈 변형을 늘린다던가 하는 디자인 방식은 전체 제품 품질에 큰 악영향을 줍니다. 범용적으로 쓰이는 폰트 크기와, 줄간격 등을 기본 프리셋으로 제공해 주며, 이는 테일윈드에 토큰화가 되어 있어 개발자가 언제든 유틸리티 클래스로 재사용이 가능합니다. 폰트 스타일의 조정이 필요한 경우 앞서 말한 스타일에서 값을 변경하도록 하며, 변경된 값을 적용하여 전체 화면에서 동일한 타이포그래피가 구현될 수 있도록 합니다.

필요한 색에 대한 고민만 하게 해 주는 팔레트

타이포그래피와 마찬가지로 범용적으로 안전한 색상 위주로 프리셋 팔레트가 구현되어 있습니다. 브랜드에 따라 색상 사용은 다를 수 있기 때문에 스타일 중 별도로 브랜드 컬러 팔레트를 추가하거나, 기존 색상을 조금씩 변형하는 식으로 활용이 가능할 것으로 보입니다. 원색에 가까운 비비드한 색상 위주 팔레트인 면이 있어 톤에 변화를 주고 싶거나 한다면 전체 색상을 커스텀하는 작업이 별도 필요할 것으로 보이긴 합니다. 그럼에도 잘 짜여지고 누구나 이해하기 쉬운 컬러 베리에이션 체계를 기반으로 구성이 되어 있고, 이 모든 것들이 코드로 바로 치환될 수 있도록 토큰화가 되어 있기 때문에 커스텀을 하여도 여전히 개발하기 쉽고 관리하기 쉬운 컬러 팔레트 구성이 가능할 것입니다.

커스텀을 하더라도 체계화된 틀 안에서 하여, 색상의 난립을 방지

스페이싱(여백) 주는 방식을 정의

UI 디자인은 여러 컴포넌트의 배치로 이뤄지며 이 컴포넌트 간의 간격을 조절하는 것 또한 일관적으로 고민되어야 할 사항 중 하나입니다. 테일윈드의 가장 큰 장점 중 하나는 이런 스페이싱에 대한 스타일 정의가 매우 잘 되어 있고, 유틸리티 클래스를 활용해서 여백 주는 작업이 극단적으로 효율화될 수 있다는 점입니다. 가장 흔히 쓰이는 8pt 스페이싱 원칙을 기반으로 작은 단위에서는 0.5pt에서 2pt와 4pt 단위로도 구성이 가능합니다. 필요한 경우 별도 단위의 추가도 가능합니다. 아쉽게도 현재 2024년 7월 버전에서는 스페이싱은 로컬 베리어블로 등록이 안 되어 있습니다. 별도 베리어블 추가를 통해 전역 적용이 가능할 것으로 보입니다.

8pt 스페이싱 중심의 스페이싱 체계. 2024년 7월 확인 버전에는 베리어블 등록이 안 되어 있어 별도 값으로 활용하려면 베리어블을 등록해 줘야 한다.

모서리 둥글기 기본 스타일

모서리 둥글기 또한 기존 제공되는 스타일을 활용할 수 있으며, 필요한 경우 스타일을 변경하여 토큰 값에 맞춰 규격화된 스타일 지정이 가능합니다. 다만 스페이싱과 마찬가지로 로컬 베리어블로 지정이 되어 있지 않아, 로컬 베리어블로 지정하여 값을 손쉽게 할당하고 싶은 경우 별도 변수 선언이 필요합니다.

베리어블로 활용하고 싶은 경우 별도 값 지정이 필요하다.

그림자 스타일

그림자의 경우 로컬 스타일로 전역에서 활용이 가능하도록 적용이 되어 있습니다. 색상과 마찬가지로 별도 커스텀이 필요한 경우 이 스타일을 변경하여 손쉽게 다른 곳에서 재사용이 가능하며, 개발로도 바로 변경값 적용이 가능한 구조로 커스텀이 가능합니다.

로컬 스타일로 지정이 되어 있어 스타일 값을 변경하여 전역에 변경값을 적용하는 것이 가능하다.

팁 : 로컬 베리어블 추가하는 방법

위에서 말한 스페이싱과 테두리 모서리의 값을 변수로 지정하여 전역에서 활용한 로컬 베리어블로 활용하는 방법을 간략하게 안내 드리고자 합니다. 피그마 디자인 패널에서 확인 가능한 해당 값이 있는 인풋으로 커서를 옮깁니다. 그러면 육각형 모양의 버튼이 오른쪽에 활성화되는데 해당 버튼을 클릭한 후 'Local Variables'로 분류를 선택하여 로컬 베리어블의 추가가 가능합니다. 일단 값과 이름의 할당은 동일하게 하거나 이름은 원하는 대로 변경하면 됩니다. 그 이후 로컬 베리어블 전체 값을 관리할 수 있는 버튼을 피그마 디자인 패널에서 선택하여, 값들을 그룹핑해 주면 됩니다. Border Radius, Spacing처럼 그룹핑 이름을 나눠서 정해 주면 됩니다. 이후부터는 값을 지정할 때 위에서처럼 육각형 모양의 아이콘을 클릭하면 로컬 베리어블 값을 지정할 수 있습니다. 약간의 노가다가 될 수 있지만, 적용 이후부터는 더욱 편리하게 값 지정이 가능하게 됩니다.

육각형 모양 아이콘을 클릭해 신규 로컬 베리어블을 지정한 후, 그룹핑. 이후 육각형 버튼에서 해당 값을 바로 적용 가능

총평

개인적으로 웹 프로젝트 또는 최근에는 일부 하이브리드 기반 모바일 어플리케이션 작업에 있어서도 테일윈드는 매우 훌륭한 템플릿으로 활용될 수 있다고 생각합니다. 특별한 제약이 없다면 2024년 7월 기준으로 테일윈드는 반드시 기본 환경으로 설정하여 작업을 진행하고 있으며, 꼭 유틸리티 클래스를 활용한 스타일링 코드 작성이 아니더라도, 디자인 시스템을 구축하고 관리하며 글로벌 스타일링 방식인 Sass/SCSS 스택을 활용하여 코딩을 할 때에도 매우 유용하게 사용됩니다. 웹을 자주 활용하는 디자이너 분들이면 반드시 이 테일윈드에 대한 내용은 확인하시기를 권장드리며, 이 템플릿을 활용하여 작업 효율도 늘려 보시길 추천합니다.

공식 Tailwind CSS Figma 템플릿을 사용하여 코드로 쉽게 변환되는 아름답고 기능적인 디자인을 시작하세요.

무료 템플릿 다운로드 (테일윈드 CSS 스타일)

• 테일윈드 CSS 스타일 무료로 다운로드 (공식 템플릿 페이지 이동)