프론트엔드 개발에서 사용자가 선택할 수 있는 테마 변경 기능은 UI/UX를 크게 향상시킬 수 있는 중요한 요소입니다. 이번 블로그 포스트에서는 Vue.js와 Tailwind CSS를 활용하여 사용자가 직접 테마를 변경할 수 있는 기능을 구현해보겠습니다.

프로젝트 시작하기

먼저 Vue.js와 Tailwind CSS를 사용할 수 있는 새로운 프로젝트를 생성해야 합니다. Vue CLI를 사용하여 새로운 Vue 프로젝트를 생성하는 방법은 다음과 같습니다.

vue create theme-switcher
cd theme-switcher

프로젝트가 생성되면 Tailwind CSS를 설치합니다. Tailwind CSS의 설치 방법은 다음과 같습니다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
tailwind.config.js 파일을 열어 Tailwind의 기본 설정을 수정합니다. 
module.exports = {
  content: ['./src/*/.{vue,js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Tailwind CSS 스타일 적용하기

src/assets/tailwind.css 파일을 생성하고 아래의 Tailwind CSS 기본 스타일을 추가합니다. 
@tailwind base;
@tailwind components;
@tailwind utilities;

이제 main.js 파일에서 Tailwind CSS를 import해 주어야 합니다.

import { createApp } from 'vue'
import App from './App.vue'
import './assets/tailwind.css'

createApp(App).mount('#app')

테마 변경 기능 구현하기

이제 본격적으로 테마 변경 기능을 구현해보겠습니다. 먼저 App.vue 파일을 열어 기본적인 레이아웃을 설정합니다.

<template>
  <div :class="theme">
    <header class="p-4">
      <h1 class="text-3xl font-bold">테마 선택기</h1>
      <select @change="changeTheme" class="mt-2">
        <option value="light">Light Theme</option>
        <option value="dark">Dark Theme</option>
      </select>
    </header>
    <main class="p-4">
      <p>테마를 선택하세요!</p>
    </main>
  </div>
</template>

<script>
export default {
  data() {
    return {
      theme: 'light', // 기본 테마
    }
  },
  methods: {
    changeTheme(event) {
      this.theme = event.target.value;
    },
  },
}
</script>

<style scoped>
.light {
  background-color: #ffffff;
  color: #000000;
}

.dark {
  background-color: #000000;
  color: #ffffff;
}
</style>

위의 코드에서 <select> 요소를 사용하여 사용자가 테마를 선택할 수 있도록 하였습니다. changeTheme 메소드를 통해 선택된 테마를 theme 데이터 속성에 저장하고, 이 값에 따라 클래스가 변경됩니다.

테마 저장하기

사용자가 선택한 테마를 로컬 스토리지에 저장하여 페이지를 새로 고침하더라도 선택한 테마가 유지되도록 할 수 있습니다. created 라이프사이클 훅을 사용하여 초기 테마를 설정하고, changeTheme 메소드 안에서 로컬 스토리지에 테마를 저장합니다.

created() {
  const savedTheme = localStorage.getItem('theme');
  if (savedTheme) {
    this.theme = savedTheme;
  }
},
methods: {
  changeTheme(event) {
    this.theme = event.target.value;
    localStorage.setItem('theme', this.theme);
  },
},

추가적인 스타일링

Tailwind CSS의 유틸리티 클래스를 활용하여 각 테마에 맞는 스타일을 추가해보겠습니다. 다음은 테마에 따라 색상이 변경되는 예시입니다.

.light {
  @apply bg-gray-100 text-gray-800;
}

.dark {
  @apply bg-gray-800 text-gray-100;
}

이렇게 하면 Tailwind CSS의 유틸리티 클래스를 사용하여 각 테마에 대한 스타일을 손쉽게 관리할 수 있습니다.

마무리

이번 포스트에서는 Vue.js와 Tailwind CSS를 활용하여 사용자가 선택할 수 있는 테마 변경 기능을 구현했습니다. 로컬 스토리지를 통해 선택된 테마를 저장하고, 페이지 새로 고침 시에도 유지될 수 있도록 하였습니다. 이와 같은 기능은 사용자 경험을 개선하고, 웹 어플리케이션의 접근성을 높이는 데 큰 도움이 됩니다. 여러분도 이 방법을 바탕으로 나만의 테마 변경 기능을 구현해보세요!