CSS는 마법 같은 도구이지만, 작업 시간이 오래 걸리는 것이 사실입니다. 아름답고 기능적이며 접근성 좋은 웹사이트는 사용자에게 큰 만족감을 주지만, 이를 위해 직접 CSS를 작성하는 일은 지루하고 소모적인 작업입니다. 최근 몇 년간 Bootstrap을 비롯한 다양한 CSS 라이브러리가 폭발적인 인기를 얻었으며, 2021년 현재 그 선두에는 Tailwind CSS가 자리 잡고 있습니다.
Rails는 기본적으로 Tailwind를 제공하지 않지만, 이 글에서는 새로운 Ruby on Rails 프로젝트에 Tailwind CSS를 추가하는 방법을 단계별로 소개합니다. 이 가이드를 따라 하면 디자인 구현에 드는 수많은 시간을 절약할 수 있습니다. 또한 Tailwind의 유틸리티 클래스를 활용한 실전 스타일링 과정도 함께 살펴보겠습니다. 앞부분에서는 새 Rails 프로젝트를 생성하면서 처음부터 Tailwind를 추가하는 방법을, 후반부에서는 기존 프로젝트에 Tailwind를 도입하는 방법을 다룹니다.
Tailwind CSS란 무엇인가?
Tailwind CSS는 개발자에게 유틸리티 클래스(utility classes)라는 강력한 도구를 제공합니다. 이렇게 미리 정의된 CSS 클래스들은 HTML에서 바로 어떤 디자인이든 조립할 수 있는 빌딩 블록 역할을 합니다. HTML 요소에 하나 이상의 클래스만 추가하면 원하는 대로 스타일을 지정할 수 있습니다. Tailwind는 방대한 유틸리티 라이브러리로서, 다양한 스타일을 조합해 직접 CSS를 작성하는 것보다 훨씬 빠르게 커스텀 디자인을 완성할 수 있게 해줍니다.
예를 들어, 스타일을 적용할 요소에 몇 개의 클래스만 추가하면 세련된 헤더가 있는 카드 뷰를 손쉽게 만들 수 있습니다:
<div class="text-center max-w-sm rounded overflow-hidden shadow-lg">
<h1 class="text-3xl font-black">This is a styled header inside a styled card element.</h1>
</div>
이게 전부입니다! 원하는 모양을 만들기 위해 클래스를 직접 정의하고 CSS와 씨름하느라 고생할 필요가 없습니다. Tailwind는 이미 가장 흔히 필요한 스타일링 요구를 충족할 만큼 충분한 유틸리티 클래스를 제공합니다.
Tailwind는 지난 1년간 빠르게 입지를 넓혔습니다. 개발 시간을 절약하면서도 일관되게 잘 디자인된 인터페이스를 만들 수 있는 방법으로 각광받고 있으며, 이러한 장점 때문에 Tailwind를 사랑하는 개발자도 있고, HTML이 지저분해진다는 이유로 싫어하는 개발자도 있습니다.
새 Rails 앱에 Tailwind 설정하기
설명의 편의를 위해 처음부터 앱을 만드는 과정, 즉 새로운 Rails 애플리케이션을 생성하는 것부터 시작하겠습니다. 예제에서 사용하는 버전은 다음과 같습니다:
- Rails 6.1
- Ruby 3.0.0
rbenv는 여러 Ruby 버전을 관리하는 표준적인 방법입니다. Homebrew가 설치되어 있다면 brew install rbenv 명령으로 설치할 수 있습니다.
rbenv를 사용 중이라면 rbenv install 3.0.0 명령으로 Ruby 3.0.0을 설치하세요.
그런 다음 rbenv local 3.0.0 명령으로 현재 디렉터리의 Ruby 버전을 3.0.0으로 전환합니다.
새 버전의 Ruby라면 gem install rails로 Rails를 설치해야 합니다.
새 Rails 애플리케이션 생성
Rails 6.1과 Ruby 3.0 환경이 준비되었다면, 다음 명령으로 새 Rails 애플리케이션을 생성할 수 있습니다: rails new tailwind-example.
tailwind-example 부분은 원하는 프로젝트 이름으로 바꾸셔도 됩니다. 단, 이후 코드나 셸 명령에서 프로젝트 이름이 등장하는 부분도 함께 변경해야 한다는 점에 유의하세요.
다음으로 새 프로젝트 디렉터리로 이동합니다: cd tailwind-example.
마지막으로 로컬에서 프로젝트를 실행해 모든 것이 정상 동작하는지 확인합니다: rails server.
그리고 브라우저에서 localhost:3000에 접속하면 Rails 환영 페이지를 볼 수 있습니다. 아래와 비슷한 화면이 보인다면 올바른 경로에 있는 것입니다:
새 Rails 앱이 정상적으로 실행되었다면, 이제 Tailwind를 추가하고 더 빠르게 인터페이스를 만들 준비가 된 것입니다.
Tailwind CSS 설치
먼저 다음 명령으로 TailwindCSS를 의존성으로 추가합니다: yarn add tailwindcss.
다음으로 아래 명령을 실행해 Tailwind 설정 파일을 알맞은 위치에 생성합니다: npx tailwindcss init.
이제 프로젝트를 선호하는 IDE로 열어보세요(VS Code라면 더욱 좋죠!). 프로젝트 루트 디렉터리의 postcss.config.js 파일을 열고 import 목록에 require("tailwindcss"),를 추가합니다. 수정된 postcss 파일은 다음과 같습니다:
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-flexbugs-fixes'),
require("tailwindcss"),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009'
},
stage: 3
})
]
}
다음으로 app/javascript 경로에 application.css 파일을 생성하고, 아래 import 문을 추가합니다:
@import "tailwindcss/base";
@import "tailwindcss/utilities";
@import "tailwindcss/components";
이어서 app/javascript/packs/application.js 파일의 import 목록에 import "../application.css";를 추가합니다. 이렇게 하면 Tailwind import가 Webpacker에 포함됩니다. 완성된 파일은 다음과 같습니다:
// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so that it will be compiled.
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"
import "../application.css";
Rails.start()
Turbolinks.start()
ActiveStorage.start()
애플리케이션 전역에서 Tailwind를 사용하려면 app/views/layouts/application.html.erb에서 이 webpack 참조를 import해야 합니다.
참고로 Tailwind는 PostCSS 8을 요구하지만, 당시 Rails 6는 아직 업데이트되지 않았었습니다. 다행히 공식 문서 덕분에 호환성 빌드(compatibility build)를 설치해 이 문제를 쉽게 해결할 수 있습니다. 다음 명령을 실행하면 됩니다:
npm uninstall tailwindcss postcss autoprefixer
npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
직접 테스트해 보기
새로 설치한 CSS 라이브러리를 확인하기 위해 새로운 뷰, 컨트롤러, 모델을 만들어 보겠습니다. Rails 스캐폴딩(scaffold)을 사용하면 아주 간단합니다: rails generate scaffold User email:string password:string.
다음으로 데이터베이스 마이그레이션을 실행해 User 테이블을 생성합니다: rake db:migrate.
이제 User 모델과 뷰·컨트롤러 액션을 갖춘 기본 CRUD 기능이 준비되었습니다. 사용자 목록 페이지를 애플리케이션의 루트(root)로 지정해 보겠습니다. config/routes.rb에 root 'users#index'를 추가하면 됩니다. 수정된 routes 파일은 다음과 같습니다:
Rails.application.routes.draw do
root 'users#index'
resources :users
# For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end
이렇게 하면 애플리케이션 루트로 들어오는 모든 요청이 사용자 목록 페이지로 연결됩니다. rails server로 서버를 재시작한 뒤 localhost:3000에 접속하면 다음과 같은 화면이 나타납니다:
이 화면이 밋밋한 데에는 두 가지 이유가 있습니다:
- 등록된 사용자가 없습니다.
- 디자인이 투박합니다.
첫 번째 문제는 애플리케이션을 직접 사용해 보면 간단히 해결됩니다. 두 번째 문제는 Tailwind가 해결해 줄 겁니다. 목록 페이지의 "New User" 링크를 클릭해 가상의 비밀번호와 함께 사용자를 몇 명 등록해 보세요.
이제 Tailwind CSS가 프로젝트에 제대로 설정되었는지 확인하기 위해, app/views/users/index.html.erb 파일 맨 위에 다음 HTML을 추가해 보겠습니다:
<div class="max-w-lg mx-auto mt-16 text-center max-w-sm rounded overflow-hidden shadow-lg p-10">
<h1 class="mb-4 text-3xl font-black">Here are all our users!</h1>
<p class="text-lg leading-snug">If this looks nice, it means Tailwind is set up properly.</p>
</div>
헤더와 문단을 감싼 단순한 div입니다. 각 요소에 Tailwind CSS 클래스가 조금씩 적용되어 있습니다. 보시다시피 스타일을 입히기 위해 한 일은 각 요소에 적절한 클래스를 추가하는 것뿐입니다. 설정이 올바르게 되었다면 사용자 페이지가 다음과 같이 표시됩니다:
PurgeCSS로 에셋 크기 줄이기
Tailwind CSS의 에셋은 생각보다 매우 큽니다. 상상할 수 있듯이 수많은 유틸리티 클래스의 정의가 모두 합쳐지기 때문입니다. 따라서 실제로 사용하는 정의만 포함시키는 것이 합리적입니다. 다행히 Tailwind CSS에는 바로 그 역할을 하는 purge(퍼지) 기능이 내장되어 있습니다! 무엇을 남기고 무엇을 삭제할지 일일이 고를 필요조차 없습니다.
할 일은 Tailwind 설정에 검색 위치를 알려주는 것뿐입니다. 그러면 Tailwind가 자동으로 코드를 훑으며 사용되지 않는 CSS 클래스의 정의를 제거합니다. 이를 통해 파일 크기와 성능 두 가지 측면에서 애플리케이션을 최적화하면서도, 언제든 더 많은 유틸리티 클래스를 사용할 수 있는 유연함은 그대로 유지할 수 있습니다.
프로젝트 루트 디렉터리의 tailwind.config.js 파일을 열어보세요. 현재는 다음과 같이 생겼습니다:
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
편리하게도, Tailwind CSS 클래스를 사용했을 가능성이 있는 파일 경로만 지정해 주면 됩니다. 이 예제에서는 .html.erb 파일에서만 Tailwind를 사용했으므로 해당 경로만 추가하면 됩니다. 다만 React나 Vue처럼 프론트엔드 비중이 큰 애플리케이션이라면 해당 경로들도 함께 지정해야 합니다.
경로를 설정 파일에 추가하면 다음과 같습니다:
module.exports = {
purge: [
"./app/**/*.html.erb",
],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
이렇게 설정하면 NODE_ENV가 production으로 지정된 상태에서 컴파일할 때 사용되지 않는 CSS 클래스가 자동으로 제외됩니다.
Tailwind CSS 클래스로 시간 절약하기
Tailwind CSS의 핵심 목표는 더 좋고, 더 일관되며, 더 빠르게 디자인하도록 돕는 것입니다. 페이지 스타일링은 올바른 클래스명을 추가하는 것만큼 간단합니다. 공식 문서를 훑어보는 것만으로도 큰 도움이 되지만, 실제로 사용자 뷰를 꾸며보며 Tailwind가 스타일링을 얼마나 쉽게 만들어 주는지 체감해 보겠습니다.
사용자 목록(Index) 페이지 스타일링
목록 페이지에서 가장 먼저 할 일은 테이블 전체를 div로 감싸 스타일을 한꺼번에 적용할 수 있게 하는 것입니다. 이 div에는 class="p-10", 즉 10px 패딩을 지정합니다. 사용자 목록의 h1 태그에도 스타일을 적용해 보겠습니다. 아래 세 클래스는 대체로 이름만 봐도 의미를 알 수 있지만, mb-4는 하단에 4px 마진을 추가한다는 뜻이라는 점만 짚고 넘어가겠습니다. 변경 후 사용자 목록 페이지 코드는 다음과 같습니다:
<div class="max-w-lg mx-auto mt-16 text-center max-w-sm rounded overflow-hidden shadow-lg p-10">
<h1 class="mb-4 text-3xl font-black">Here are all our users!</h1>
<p class="text-lg leading-snug">If this looks nice, it means Tailwind is set up properly.</p>
</div>
<div class="p-10">
<h1 class="mb-4 text-4xl font-black">Users</h1>
<table>
<thead>
<tr>
<th>Email</th>
<th>Password</th>
<th colspan="3">Actions</th>
</tr>
</thead>
<tbody>
<% @users.each do |user| %>
<tr>
<td><%= user.email %></td>
<td><%= user.password %></td>
<td><%= link_to 'Show', user %></td>
<td><%= link_to 'Edit', edit_user_path(user) %></td>
<td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</tbody>
</table>
<br>
<%= link_to 'New User', new_user_path %>
<div>
아직 기본적인 수준이니 조금 더 다듬어 보겠습니다. 테이블과 버튼에 클래스를 추가한 결과물은 다음과 같습니다:
<div class="max-w-lg mx-auto mt-16 text-center max-w-sm rounded overflow-hidden shadow-lg p-10">
<h1 class="mb-4 text-3xl font-black">Here are all our users!</h1>
<p class="text-lg leading-snug">If this looks nice, it means Tailwind is set up properly.</p>
</div>
<div class="p-10">
<h1 class="mb-4 text-4xl font-black">Users</h1>
<table class="min-w-full table-auto">
<thead class="bg-gray-800 text-gray-300" >
<tr>
<th>Email</th>
<th>Password</th>
<th colspan="3">Actions</th>
</tr>
</thead>
<tbody>
<% @users.each do |user| %>
<tr class="border-4 border-gray-200">
<td><%= user.email %></td>
<td><%= user.password %></td>
<td><%= link_to 'Show', user %></td>
<td><%= link_to 'Edit', edit_user_path(user) %></td>
<td><%= link_to 'Destroy', user, method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</tbody>
</table>
<br>
<%= link_to 'New User', new_user_path, class: "bg-indigo-500 text-white px-4 py-2 border rounded-md hover:bg-white hover:border-indigo-500 hover:text-black" %>
<div>
이 변경 사항을 적용하면 사용자 목록 페이지가 다음과 같이 바뀝니다:
신규 사용자(New User) 페이지 스타일링
이참에 기존의 "New User" 페이지도 새롭게 꾸며 보겠습니다. 현재 페이지는 다음과 같습니다:
먼저 신규 사용자 뷰에 원하는 클래스를 적용합니다. 필자가 작성한 코드는 다음과 같습니다:
<div class="bg-grey-lighter min-h-screen flex flex-col">
<div class="container max-w-sm mx-auto flex-1 flex flex-col items-center justify-center px-2">
<div class="bg-white px-6 py-8 rounded shadow-lg text-black w-full">
<h1 class="mb-8 text-3xl text-center">Sign up</h1>
<%= render 'form', user: @user %>
<div class="text-center text-sm text-grey-dark mt-4">
By signing up, you agree to the
<a class="no-underline border-b border-grey-dark text-grey-dark" href="#">
Terms of Service
</a> and
<a class="no-underline border-b border-grey-dark text-grey-dark" href="#">
Privacy Policy
</a>
</div>
</div>
<div class="text-grey-dark mt-6">
Already have an account?
<%= link_to 'Sign In', '#', class: "no-underline border-b border-blue text-blue"%>
</div>
</div>
</div>
이제 꽤 괜찮아 보이지만, 아직 폼(form) 자체에는 스타일이 적용되지 않았습니다! app/views/users/_form.html.erb 파일도 수정해야 합니다. 필자가 작성한 코드는 다음과 같습니다:
<%= form_with(model: user) do |form| %>
<% if user.errors.any? %>
<div id="error_explanation">
<h2><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2>
<ul>
<% user.errors.each do |error| %>
<li><%= error.full_message %></li>
<% end %>
</ul>
</div>
<% end %>
<div class="field">
<%= form.label :email %>
<%= form.text_field :email, class: "block border border-grey-light w-full p-3 rounded mb-4" %>
</div>
<div class="field">
<%= form.label :password %>
<%= form.text_field :password, class: "block border border-grey-light w-full p-3 rounded mb-4" %>
</div>
<%= form.submit "Sign Up", class: "w-full text-center py-3 rounded bg-indigo-600 text-white hover:bg-green-dark focus:outline-none" %>
<% end %>
수정할 부분이 많고 아직 설명하지 않은 클래스도 등장했지만, 필요한 내용은 모두 공식 문서에서 찾아볼 수 있습니다. 이 클래스들을 적용하면 신규 사용자 페이지가 다음과 같이 완성됩니다!
기존 앱에 Tailwind 추가하기
Tailwind를 사용하고 싶은 개발자가 반드시 백지 상태에서 시작하는 것은 아닙니다. 이미 커스텀 CSS가 많고, 심지어 Bootstrap 같은 다른 프레임워크가 섞여 있는 기존 프로젝트를 진행 중일 수도 있습니다. 전혀 문제없습니다!
기존 애플리케이션이 Webpacker로 실행 중이라면, 앞서 "Tailwind CSS 설치" 섹션에서 안내한 절차를 그대로 따르면 됩니다! Webpacker가 설치되어 있지 않다면 Gemfile에 추가한 뒤 bundle install을 실행하고, 이어서 bundle exec rails webpacker:install을 실행한 후 Tailwind 설치 절차를 진행하세요.
이후에는 기존 CSS와 Tailwind CSS를 자유롭게 섞어 사용할 수 있습니다.
즐거운 스타일링 되세요!