Design-Guide

EduTrack - 디자인 가이드

1. 색상 팔레트

일관된 브랜드 이미지를 위해 색상 체계를 정의합니다.

주 색상 (Primary): #3F51B5 (깊은 파란색) - 주요 인터페이스 요소에 사용
보조 색상 (Secondary): #FF4081 (밝은 분홍색) - 강조 요소 및 버튼 등에 사용
배경색 (Background): #F5F5F5 (밝은 회색) - 전체적인 배경 설정
텍스트 색상 (Text): #333333 (진한 회색) - 기본 본문 및 제목 색상
경고 및 알림 (Alert): #FF5722 (강렬한 주황색) - 에러 메시지, 중요한 경고 요소

2. 타이포그래피

가독성과 일관성을 유지하는 폰트 스타일을 정의합니다.

제목 (Heading): Roboto, 24px, Bold
부제목 (Subheading): Roboto, 18px, Medium
본문 (Body): Open Sans, 16px, Regular
캡션 및 보조 텍스트: Open Sans, 14px, Light
버튼 텍스트: Roboto, 16px, Bold

3. 아이콘 및 그래픽 스타일

Material Design 아이콘 활용 (https://fonts.google.com/icons)
단순하고 직관적인 UI를 위한 벡터 기반 아이콘 사용
SVG 및 PNG 지원 (최적화된 크기 유지 필요)
일관된 여백 및 패딩 적용 (아이콘 크기 24px 기본)

4. 레이아웃 및 UI 컴포넌트

4.1 반응형 디자인

다양한 기기에서 원활한 사용 경험을 제공하기 위해 반응형 디자인을 적용합니다.

모바일 (Mobile, < 768px): 상단 내비게이션 바 및 햄버거 메뉴 사용
태블릿 (Tablet, 768px - 1024px): 네비게이션 바 확장 가능, 카드 기반 레이아웃 적용
데스크톱 (Desktop, > 1024px): 좌측 사이드바 메뉴 및 3열 레이아웃 구성 가능

4.2 네비게이션 시스템

모바일: 상단 내비게이션 바 + 햄버거 메뉴 (position: fixed 적용)
데스크톱: 좌측 네비게이션 바 고정 (width: 250px)
상태 기반 UI: 사용자의 진행 상태를 표시하는 프로그레스 바 활용

4.3 카드 및 리스트 스타일

카드 디자인: 그림자 효과 (box-shadow), 둥근 모서리 (border-radius: 8px)
리스트 아이템: 적절한 간격 및 텍스트 정렬 (line-height: 1.5)
버튼 스타일: 라운드 처리, 기본 크기 (padding: 12px 20px)

5. 접근성 (Accessibility) 및 UX 고려사항

명확한 대비 (Contrast Ratio) 유지: 텍스트와 배경의 명확한 구분
키보드 네비게이션 지원: tab을 이용한 UI 이동 가능하도록 설정
폼 요소 및 입력 필드: 충분한 클릭 영역 제공 (min-height: 44px)
애니메이션 최소화: 사용자의 피로도를 고려한 부드러운 트랜지션 적용 (ease-in-out 사용)

6. 코드 예제 및 적용 방식

body {
    font-family: 'Open Sans', sans-serif;
    background-color: #F5F5F5;
    color: #333333;
    margin: 0;
    padding: 0;
}

button {
    background-color: #3F51B5;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;
}

button:hover {
    background-color: #303F9F;
}

7. 결론

개발자는 UI/UX 디자인 가이드를 준수하여 일관된 사용자 경험을 제공해야 합니다. 이 가이드라인을 따르면 프로젝트 전반의 디자인 품질이 향상되고, 유지보수가 용이해집니다. 앞으로도 지속적으로 가이드를 개선하여 더 나은 디자인 환경을 구축해 나가겠습니다.