Skip to content

DESIGN_DIFFERENCES.md

Latest commit

 

History

History
172 lines (118 loc) · 3.95 KB

DESIGN_DIFFERENCES.md

File metadata and controls

172 lines (118 loc) · 3.95 KB

디자인 차이점 분석 및 개선 계획

GitHub Repository 정보

현재 구현 상태

구현된 컴포넌트

  • ✅ Header (기본 네비게이션)
  • ✅ Footer
  • ✅ Button (기본 스타일)
  • ✅ Input (기본 스타일)
  • ✅ Card (기본 스타일)
  • ✅ Modal, Toast, Sidebar, Loading

현재 디자인 특징

  • 색상: Blue 계열 (blue-600)
  • 레이아웃: Container 기반 중앙 정렬
  • 스타일: 기본 Tailwind CSS 유틸리티 클래스

예상되는 차이점

1. 색상 시스템

현재는 blue-600을 주로 사용하지만, wireframe에서는 다른 색상 팔레트를 사용할 수 있습니다.

확인 필요:

  • Primary 색상 (현재: blue-600)
  • Secondary 색상
  • Accent 색상
  • 텍스트 색상 계층

2. 타이포그래피

현재는 기본 폰트 크기와 weight를 사용합니다.

확인 필요:

  • 제목 폰트 크기 (h1, h2, h3 등)
  • 본문 폰트 크기
  • 폰트 weight (bold, semibold 등)
  • 줄 간격 (line-height)

3. 간격 시스템

현재는 Tailwind의 기본 간격을 사용합니다.

확인 필요:

  • 섹션 간격
  • 컴포넌트 간격
  • 내부 패딩

4. 버튼 스타일

현재는 기본적인 버튼 스타일만 있습니다.

확인 필요:

  • 버튼 크기 (sm, md, lg)
  • 버튼 색상 변형
  • 버튼 모서리 둥글기
  • 버튼 그림자 효과

5. 카드 스타일

현재는 기본 카드 스타일입니다.

확인 필요:

  • 카드 그림자
  • 카드 모서리 둥글기
  • 카드 호버 효과
  • 카드 내부 간격

6. 입력 필드 스타일

현재는 기본 입력 필드 스타일입니다.

확인 필요:

  • 입력 필드 높이
  • 입력 필드 테두리
  • 포커스 상태 스타일
  • 에러 상태 스타일

7. 레이아웃 구조

확인 필요:

  • Header 높이 및 스타일
  • Footer 높이 및 스타일
  • 메인 콘텐츠 영역 최대 너비
  • 사이드바 (있는 경우)

8. 게시글 카드 레이아웃

확인 필요:

  • 이미지 비율
  • 제목/내용 표시 방식
  • 가격 정보 표시 위치
  • 카드 그리드 레이아웃

개선 제안

1. 디자인 토큰 시스템 구축

// src/lib/design-tokens.ts
export const colors = {
  primary: {
    50: "#eff6ff",
    100: "#dbeafe",
    // ...
    600: "#2563eb", // 현재 사용 중
    700: "#1d4ed8",
  },
  // ...
};

export const spacing = {
  xs: "0.5rem",
  sm: "1rem",
  md: "1.5rem",
  // ...
};

2. 컴포넌트 스타일 개선

  • 더 구체적인 색상 사용
  • 일관된 간격 시스템
  • 향상된 호버/포커스 효과

3. 반응형 디자인 강화

  • 모바일 우선 접근
  • 브레이크포인트별 레이아웃 조정

다음 단계

  1. 저장소 파일 확인 방법:

    • 저장소를 클론하여 실제 컴포넌트 파일 확인
    • 또는 구체적인 차이점을 알려주시면 해당 부분 수정

  2. 차이점 공유:

    • 스크린샷 또는 구체적인 설명
    • 예: "버튼 색상이 더 진한 파란색이어야 함"
    • 예: "카드 그림자가 더 진해야 함"

  3. 우선순위 설정:

    • 가장 중요한 차이점부터 수정
    • 전체적인 디자인 시스템 통일

확인 요청

다음 정보를 공유해주시면 정확하게 수정하겠습니다:

  1. 색상: Primary 색상 코드 또는 Tailwind 클래스
  2. 타이포그래피: 제목/본문 폰트 크기
  3. 간격: 주요 섹션 간격
  4. 컴포넌트: 구체적인 스타일 차이점
  5. 레이아웃: 구조적 차이점

또는 저장소의 주요 컴포넌트 파일 내용을 공유해주시면 바로 적용하겠습니다.