Tailwind CSS 기반

이 디자인 가이드는 Tailwind CSS를 기준으로 작성되었습니다.

모든 스타일과 컴포넌트는 Tailwind CSS 유틸리티 클래스를 활용하여 구현됩니다.

디자인 시스템

웹 디자인 가이드

웹페이지의 일관된 UI/UX를 위한 디자인 시스템과 컴포넌트 가이드입니다.

컬러 팔레트

주요 컬러

Primary

#6366f1

Secondary

#a855f7

Success

#10b981

Warning

#f59e0b

그라데이션

타이포그래피

Heading 1

text-4xl md:text-5xl font-bold

Heading 2

text-3xl font-bold

Heading 3

text-xl font-semibold

Body Large - 주요 설명 텍스트

text-lg text-gray-600

Body Regular - 일반 본문 텍스트

text-base text-gray-600

Caption - 보조 설명 텍스트

text-sm text-gray-500

컴포넌트

버튼

/* CSS Classes */
.btn-primary
.btn-secondary  
.btn-discord
.btn-save

카드

Feature Card

카드 컴포넌트의 예시입니다. 호버 효과와 그라데이션 배경이 적용됩니다.

<div className="bg-white/60 backdrop-blur-sm 
  rounded-3xl p-6 border border-white/40 
  shadow-lg hover:shadow-2xl transition-all 
  duration-300 hover:scale-[1.02]">
  ...
</div>

입력 필드

<input className="w-full px-4 py-3 border 
  border-gray-300 rounded-xl focus:outline-none 
  focus:ring-2 focus:ring-indigo-500 
  focus:border-indigo-500 transition-all 
  duration-200 bg-white/50 backdrop-blur-sm" />

배지

PrimarySuccessWarningError
✨ 강력한 기능들📖 명령어 가이드
<span className="inline-flex items-center 
  px-3 py-1 rounded-full text-xs font-medium 
  bg-indigo-100 text-indigo-800">Label</span>

레이아웃 패턴

Hero Section

중앙 정렬된 메인 콘텐츠 영역

flex flex-col items-center justify-center min-h-screen

Grid Layout

반응형 그리드 레이아웃

grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8

Container

컨텐츠 최대 너비 제한

max-w-6xl mx-auto px-4 sm:px-8

애니메이션

Fade In

animate-fade-in

Soft Pulse

animate-soft-pulse

Hover Effects

hover:scale-105 transition-transform duration-300

반응형 디자인

브레이크포인트

xs: 475px - 소형 모바일
sm: 640px - 모바일
md: 768px - 태블릿
lg: 1024px - 데스크톱
xl: 1280px - 대형 데스크톱

모바일 우선 접근법

text-sm sm:text-base md:text-lg

접근성

색상 대비

WCAG 2.1 AA 기준을 준수하는 색상 대비 비율 사용

모션 감소

prefers-reduced-motion 설정을 고려한 애니메이션 제어

포커스 관리

키보드 네비게이션을 위한 focus 스타일 제공

코드 예시

기본 페이지 템플릿

"use client";
import React from "react";
import BackgroundWrapper from "@/app/components/common/BackgroundWrapper";

export default function NewPage() {
  return (
    <BackgroundWrapper>
      <div className="container mx-auto px-4 py-20 max-w-6xl">
        {/* 헤더 */}
        <div className="text-center mb-16">
          <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6 tracking-tight">
            <span className="bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
              페이지 제목
            </span>
          </h1>
          <p className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
            페이지 설명
          </p>
        </div>

        {/* 컨텐츠 */}
        <div className="bg-white/60 backdrop-blur-sm rounded-2xl p-6 border border-white/40 shadow-lg">
          {/* 여기에 컨텐츠 추가 */}
        </div>
      </div>
    </BackgroundWrapper>
  );
}

기본 컴포넌트 템플릿

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faIcon } from "@fortawesome/free-solid-svg-icons";

interface ComponentProps {
  title: string;
  description?: string;
  children?: React.ReactNode;
}

export default function Component({ title, description, children }: ComponentProps) {
  return (
    <div className="bg-white/60 backdrop-blur-sm rounded-2xl p-6 border border-white/40 shadow-lg hover:shadow-2xl transition-all duration-300">
      <div className="flex items-center gap-3 mb-4">
        <div className="w-12 h-12 bg-gradient-to-br from-indigo-50 to-indigo-100 rounded-2xl flex items-center justify-center">
          <FontAwesomeIcon icon={faIcon} className="text-indigo-500" />
        </div>
        <h3 className="text-lg font-semibold text-gray-800">{title}</h3>
      </div>
      
      {description && (
        <p className="text-gray-600 text-sm mb-4">{description}</p>
      )}
      
      {children}
    </div>
  );
}

이 디자인 가이드는 하양 프로젝트의 일관성 있는 UI/UX와 웹 디자이너에게 도움을 주기 위해 작성되었습니다.

우리의 디자인 가이드가 마음에 들었으면 좋겠습니다!