# 모던 CSS로 은행 앱 스타일링하기

## 프로젝트 개요

기능적인 은행 애플리케이션을 시각적으로 매력적이고 전문적인 웹 앱으로 변환하세요. 현대적인 CSS 기법을 사용하여 사용자 경험을 향상시키면서 접근성과 반응형 디자인 원칙을 유지하는 일관된 디자인 시스템을 만듭니다.

이 과제는 최신 웹 디자인 패턴을 적용하고, 일관된 시각적 정체성을 구현하며, 사용자가 매력적이고 직관적으로 탐색할 수 있는 인터페이스를 만드는 도전을 제공합니다.

## 지침

### 1단계: 스타일시트 설정하기

**CSS 기초 만들기:**

1. 프로젝트 루트에 `styles.css`라는 새 파일을 만드세요.
2. `index.html` 파일에 스타일시트를 연결하세요:
   ```html
   <link rel="stylesheet" href="styles.css">
   ```
3. CSS 리셋과 현대적인 기본값으로 시작하세요:
   ```css
   /* Modern CSS reset and base styles */
   * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
   }
   
   body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     line-height: 1.6;
     color: #333;
   }
   ```

### 2단계: 디자인 시스템 요구사항

**다음 필수 디자인 요소를 구현하세요:**

#### 색상 팔레트
- **기본 색상**: 버튼과 하이라이트에 적합한 전문적인 색상 선택
- **보조 색상**: 강조 및 보조 동작을 위한 보색
- **중립 색상**: 텍스트, 테두리, 배경에 사용할 회색
- **성공/오류 색상**: 성공 상태에 녹색, 오류에 빨강색 사용

#### 타이포그래피
- **헤딩 계층 구조**: H1, H2, H3 요소 간 명확한 구분
- **본문 텍스트**: 읽기 쉬운 글자 크기(최소 16px)와 적절한 줄 높이
- **폼 라벨**: 명확하고 접근성 높은 텍스트 스타일링

#### 레이아웃 및 간격
- **일관된 간격**: 8px, 16px, 24px, 32px 스케일 사용
- **그리드 시스템**: 폼과 콘텐츠 섹션을 위한 체계적인 레이아웃
- **반응형 디자인**: 모바일 우선 접근법과 브레이크포인트 적용

### 3단계: 컴포넌트 스타일링

**다음 특정 컴포넌트를 스타일링하세요:**

#### 폼
- **입력 필드**: 전문적인 테두리, 포커스 상태, 유효성 검사 스타일링
- **버튼**: 호버 효과, 비활성 상태, 로딩 표시기
- **라벨**: 명확한 위치 지정과 필수 입력 표시기
- **오류 메시지**: 눈에 띄는 오류 스타일과 유용한 메시지

#### 내비게이션
- **헤더**: 깔끔하고 브랜드화된 내비게이션 영역
- **링크**: 명확한 호버 상태와 활성 표시기
- **로고/타이틀**: 독특한 브랜드 요소

#### 콘텐츠 영역
- **섹션**: 서로 다른 영역 간 명확한 시각적 구분
- **카드**: 카드 기반 레이아웃 사용 시 그림자와 테두리 포함
- **배경**: 적절한 여백과 은은한 배경 활용

### 4단계: 고급 기능 (선택 사항)

**다음 고급 기능 구현을 고려하세요:**
- **다크 모드**: 밝은 테마와 어두운 테마 간 전환
- **애니메이션**: 부드러운 전환 및 마이크로 인터랙션
- **로딩 상태**: 폼 제출 중 시각적 피드백
- **반응형 이미지**: 다양한 화면 크기에 최적화된 이미지

## 디자인 영감

**모던 은행 앱 특징:**
- **깔끔하고 미니멀한 디자인**과 충분한 여백
- **전문적인 색상 조합**(파랑, 녹색 또는 세련된 중립색)
- **명확한 시각적 계층 구조**와 눈에 띄는 CTA 버튼
- **WCAG 기준을 충족하는 접근성 대비 비율**
- **모든 기기에서 작동하는 모바일 반응형 레이아웃**

## 기술 요구 사항

### CSS 구성
```css
/* 1. CSS Custom Properties (Variables) */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  /* Add more variables */
}

/* 2. Base Styles */
/* Reset, typography, general elements */

/* 3. Layout */
/* Grid, flexbox, positioning */

/* 4. Components */
/* Forms, buttons, cards */

/* 5. Utilities */
/* Helper classes, responsive utilities */

/* 6. Media Queries */
/* Responsive breakpoints */
```

### 접근성 요구사항
- **색상 대비**: 일반 텍스트에 대해 최소 4.5:1 비율 보장
- **포커스 표시기**: 키보드 네비게이션을 위한 명확한 포커스 상태
- **폼 라벨**: 입력 요소와 적절히 연관
- **반응형 디자인**: 320px에서 1920px 너비 화면에서 사용 가능

## 평가 기준

| 기준 | 우수(A) | 보통(B) | 발전(C) | 부족(F) |
|----------|---------------|----------------|----------------|----------------------|
| **디자인 시스템** | 색상, 타이포그래피, 간격을 일관성 있게 적용한 포괄적인 디자인 시스템 구현 | 명확한 디자인 패턴과 좋은 시각적 계층 구조로 일관된 스타일링 사용 | 일부 일관성 문제 또는 디자인 요소 누락이 있는 기본 스타일링 적용 | 최소한의 스타일링으로 일관성 없거나 상충하는 디자인 선택 |
| **사용자 경험** | 뛰어난 사용 편의성과 시각적 매력을 갖춘 직관적이고 전문적인 인터페이스 생성 | 명확한 내비게이션과 읽기 쉬운 콘텐츠를 제공하여 좋은 사용자 경험 유지 | 일부 UX 개선이 필요한 기본적인 사용성 | 사용성이 부족하여 탐색이나 읽기 어려움 |
| **기술 구현** | 현대적인 CSS 기법 사용, 잘 조직된 코드 구조, 모범 사례 준수 | 적절한 기법과 좋은 조직으로 CSS 효과적 구현 | CSS는 작동하지만 조직과 현대적 접근법 부족 | 기술적 문제나 브라우저 호환성 문제를 포함한 열악한 CSS 구현 |
| **반응형 디자인** | 모든 기기 크기에서 완벽하게 작동하는 완전한 반응형 디자인 | 일부 화면 크기에서 경미한 문제를 제외한 좋은 반응형 동작 | 일부 레이아웃 문제를 포함한 기본 반응형 구현 | 반응형이 아니거나 모바일 기기에서 심각한 문제 존재 |
| **접근성** | 뛰어난 키보드 네비게이션과 스크린 리더 지원으로 WCAG 가이드라인 충족 | 적절한 대비 및 포커스 표시기로 좋은 접근성 유지 | 일부 요소 누락이 있는 기본적인 접근성 고려 | 장애 사용자에게 어려운 부족한 접근성 |

## 제출 안내

**제출 시 포함할 내용:**
- **styles.css**: 완성된 스타일시트
- **수정된 HTML**: 변경한 HTML 파일
- **스크린샷**: 데스크톱 및 모바일에서의 디자인 이미지
- **README**: 디자인 선택과 색상 팔레트에 대한 간단한 설명

**보너스 점수:**
- 유지 관리가 쉬운 테마 적용을 위한 **CSS 사용자 정의 속성**
- 그리드, 플렉스박스 또는 CSS 애니메이션과 같은 **고급 CSS 기능**
- 최적화된 CSS 및 최소 파일 크기 등 **성능 고려사항**
- 다양한 브라우저 간 **호환성 테스트**

> 💡 **전문가 팁**: 모바일 디자인부터 시작한 후, 큰 화면에 맞게 향상시키세요. 이 모바일 우선 접근법은 모든 기기에서 앱이 잘 작동하도록 보장하며 최신 웹 개발 모범 사례를 따릅니다.

---

<!-- CO-OP TRANSLATOR DISCLAIMER START -->
**면책 조항**:  
이 문서는 AI 번역 서비스 [Co-op Translator](https://github.com/Azure/co-op-translator)를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확한 부분이 있을 수 있음을 유의해 주시기 바랍니다. 원본 문서는 해당 언어의 원문이 권위 있는 출처로 간주되어야 합니다. 중요한 정보에 대해서는 전문적인 인간 번역을 권장합니다. 본 번역 사용으로 인해 발생하는 오해나 오해에 대하여 당사는 책임을 지지 않습니다.
<!-- CO-OP TRANSLATOR DISCLAIMER END -->