프론트엔드 개발에 있어 Svelte와 Tailwind CSS는 매우 인기 있는 조합입니다. Svelte는 컴파일러 기반의 프레임워크로, 빠르고 반응성이 뛰어난 애플리케이션을 만드는 데 유용합니다. Tailwind CSS는 유틸리티 퍼스트 CSS 프레임워크로, 빠르고 효율적인 스타일링을 가능하게 합니다. 이번 튜토리얼에서는 Svelte와 Tailwind CSS를 사용하여 간단한 반응형 웹 애플리케이션을 만드는 방법을 안내하겠습니다. TypeScript를 사용해 타입 안전성을 높여보겠습니다.

1. 프로젝트 설정

먼저, Svelte 프로젝트를 생성해야 합니다. 아래 명령어를 실행하여 Svelte 프로젝트를 초기화합니다.

npx degit sveltejs/template svelte-tailwind-app
cd svelte-tailwind-app
npm install

이제 프로젝트 디렉토리로 이동한 후, TypeScript를 설치하겠습니다.

npm install --save-dev typescript svelte-preprocess
tsconfig.json 파일을 생성하고 다음과 같이 설정합니다. 
{
  "extends": "@sveltejs/tsconfig",
  "include": ["src/*/"],
  "exclude": ["node_modules"]
}

이제 svelte.config.js 파일을 수정하여 svelte-preprocess를 추가합니다.

const sveltePreprocess = require('svelte-preprocess');

module.exports = {
  preprocess: sveltePreprocess(),
  // 기타 설정
};

2. Tailwind CSS 설치

Tailwind CSS를 설치하기 위해 필요한 패키지를 추가합니다.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

이제 tailwind.config.js 파일을 다음과 같이 수정합니다.

module.exports = {
  purge: ['./src/*/.{svelte,js,ts}', './public/index.html'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};
postcss.config.js 파일도 생성하여 다음과 같이 설정합니다. 
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

이제 src/global.css 파일을 생성하고 Tailwind CSS의 기본 스타일을 추가합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;
src/main.ts 파일에서 전역 스타일을 임포트합니다. 
import App from './App.svelte';
import './global.css';

const app = new App({
  target: document.body,
});

export default app;

3. 간단한 컴포넌트 만들기

이제 간단한 반응형 컴포넌트를 만들어 보겠습니다. src/App.svelte 파일을 다음과 같이 수정합니다.

<script lang="ts">
  let title: string = "Svelte와 Tailwind CSS로 만든 앱";
</script>

<main class="flex flex-col items-center justify-center min-h-screen bg-gray-100">
  <h1 class="text-3xl font-bold text-center text-blue-600">{title}</h1>
  <p class="mt-4 text-gray-700">이 애플리케이션은 Svelte와 Tailwind CSS를 사용하여 만들어졌습니다.</p>
  <button class="mt-6 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
    클릭하세요
  </button>
</main>

위의 코드는 기본적인 애플리케이션 구조를 설정합니다. flex, min-h-screen, bg-gray-100과 같은 Tailwind CSS 클래스를 사용하여 전체 레이아웃과 스타일을 지정했습니다.

4. 반응형 디자인

Tailwind CSS의 유틸리티 클래스를 사용하여 반응형 디자인을 쉽게 구현할 수 있습니다. <h1> 태그의 경우 화면 크기에 따라 글자 크기를 조절해보겠습니다.

<h1 class="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold text-center text-blue-600">{title}</h1>

위 코드는 화면의 크기에 따라 제목의 크기를 조절하여 다양한 디바이스에서 적절한 크기로 표시될 수 있도록 합니다.

5. 애플리케이션 실행

이제 모든 설정이 완료되었습니다. 아래 명령어를 통해 애플리케이션을 실행할 수 있습니다.

npm run dev

브라우저에서 http://localhost:5000에 접속하면 Svelte와 Tailwind CSS로 만든 간단한 반응형 웹 애플리케이션을 확인할 수 있습니다.

마무리

이번 튜토리얼을 통해 Svelte와 Tailwind CSS를 사용하여 간단한 반응형 웹 애플리케이션을 만드는 방법을 살펴보았습니다. Svelte의 우수한 성능과 Tailwind CSS의 직관적인 스타일링을 활용하여 빠르고 효율적인 웹 애플리케이션을 개발할 수 있습니다. TypeScript를 도입하여 코드의 안정성을 높일 수 있었던 점도 큰 장점입니다. 이 기법들을 활용하여 더 복잡한 애플리케이션을 만들어보세요!