# 과제: 브라우저 확장 프로그램 스타일 재설계

## 개요

탄소 발자국 브라우저 확장 프로그램의 HTML 구조를 구축했으니, 이제 시각적으로 매력적이고 사용자 친화적으로 만들어야 할 시간입니다. 훌륭한 디자인은 사용자 경험을 향상시키고 확장 프로그램을 더욱 전문적이고 흥미롭게 만듭니다.

확장 프로그램에는 기본 CSS 스타일이 포함되어 있지만, 이번 과제에서는 우수한 사용성을 유지하면서 개인 스타일을 반영하는 독창적인 시각적 아이덴티티를 만드는 데 도전합니다.

## 지침

### 1부: 현재 디자인 분석

변경하기 전에 기존 CSS 구조를 검토하세요:

1. 확장 프로젝트 내 CSS 파일 **찾기**
2. 현재 스타일링 방식과 색상 구성 **검토**
3. 레이아웃, 타이포그래피, 시각적 계층 구조 개선점 **확인**
4. 디자인이 사용자 목표(쉬운 폼 작성 및 명확한 데이터 표시)를 얼마나 지원하는지 **고려**

### 2부: 맞춤 스타일 디자인

다음 내용을 포함하는 일관된 시각 디자인을 만드세요:

**색상 구성:**
- 환경 테마를 반영하는 기본 색상 팔레트 선택
- 접근성 확보를 위한 충분한 대비 유지(WebAIM 대비 검사기 등 도구 사용)
- 다양한 브라우저 테마에서 색상 표현 고려

**타이포그래피:**
- 작은 확장 크기에서도 잘 읽히는 글꼴 선택
- 적절한 글꼴 크기와 굵기로 명확한 계층 구조 설정
- 밝은 테마와 어두운 테마 모두에서 텍스트 가독성 확보

**레이아웃 및 간격:**
- 폼 요소와 데이터 표시의 시각적 구성 개선
- 가독성 향상을 위한 적절한 패딩과 마진 추가
- 다양한 화면 크기를 위한 반응형 디자인 원칙 고려

### 3부: 디자인 구현

디자인을 구현하기 위해 CSS 파일을 수정하세요:

```css
/* Example starting points for customization */

.form-data {
    /* Style the configuration form */
    background: /* your choice */;
    padding: /* your spacing */;
    border-radius: /* your preference */;
}

.result-container {
    /* Style the data display area */
    background: /* complementary color */;
    border: /* your border style */;
    margin: /* your spacing */;
}

/* Add your custom styles here */
```
  
**스타일링 주요 영역:**
- **폼 요소**: 입력 필드, 라벨, 제출 버튼
- **결과 표시**: 데이터 컨테이너, 텍스트 스타일링, 로딩 상태
- **인터랙티브 요소**: 호버 효과, 버튼 상태, 전환 효과
- **전체 레이아웃**: 컨테이너 간격, 배경색, 시각적 계층 구조

### 4부: 테스트 및 보완

1. `npm run build`로 확장 프로그램 **빌드**
2. 업데이트된 확장 프로그램을 브라우저에 **로딩**
3. 모든 시각 상태(폼 입력, 로딩, 결과 표시, 오류) **테스트**
4. 브라우저 개발자 도구로 접근성 **검증**
5. 실제 사용에 기반해 스타일 **수정 및 보완**

## 창의적 도전 과제

### 기본 수준
- 색상과 글꼴 업데이트로 일관된 테마 구성
- 전반적인 간격과 정렬 개선
- 인터랙티브 요소에 미묘한 호버 효과 추가

### 중간 수준
- 확장 프로그램용 커스텀 아이콘 또는 그래픽 디자인
- 상태별 부드러운 전환 효과 구현
- API 호출에 고유한 로딩 애니메이션 제작

### 고급 수준
- 다중 테마 옵션(밝음/어둠/고대비) 디자인
- 다양한 브라우저 창 크기를 위한 반응형 디자인 구현
- 사용자 경험을 향상시키는 마이크로 인터랙션 추가

## 제출 지침

완성된 과제에는 다음이 포함되어야 합니다:

- 사용자 지정 스타일이 적용된 **수정된 CSS 파일**
- 확장 프로그램의 다양한 상태(폼, 로딩, 결과)를 보여주는 **스크린샷**
- 디자인 선택 이유 및 사용자 경험 개선 방법을 간략히 설명한 **2~3문장 설명**

## 평가 기준표

| 기준 | 우수 (4) | 보통 (3) | 발전 중 (2) | 초보 (1) |
|----------|---------------|----------------|----------------|----------------|
| **시각 디자인** | 창의적이고 일관된 디자인으로 사용성 향상 및 뛰어난 디자인 원칙 반영 | 일관성 있는 스타일링과 명확한 계층 구조 | 기본적인 디자인 개선, 일관성 문제 일부 존재 | 최소한의 스타일 변경 또는 일관성 없는 디자인 |
| **기능성** | 모든 상태와 브라우저 환경에서 완벽한 스타일 작동 | 일부 경계 상황에서 사소한 문제 있지만 전반적으로 잘 작동 | 대부분 스타일 작동하나 일부 표시 문제 | 사용성에 영향을 미치는 심각한 스타일 문제 |
| **코드 품질** | 깔끔하고 잘 조직된 CSS, 의미 있는 클래스 이름과 효율적인 선택자 사용 | 적절한 선택자와 속성 사용으로 좋은 CSS 구조 | 일부 조직 문제 있는 수용 가능한 CSS | 복잡하거나 구조가 불량한 CSS |
| **접근성** | 탁월한 색상 대비, 가독성 높은 글꼴, 장애 사용자 배려 | 일부 개선점 있지만 좋은 접근성 관행 | 접근성 고려는 있으나 문제 있음 | 접근성 요구사항에 대한 주의 부족 |

## 성공을 위한 팁

> 💡 **디자인 팁**: 미묘한 변경부터 시작해 점차 더 극적인 스타일링으로 확장하세요. 타이포그래피와 간격의 작은 개선만으로도 인지 품질에 큰 차이를 만듭니다.

**따라야 할 모범 사례:**
- 밝은 테마와 어두운 테마 모두에서 확장 프로그램 **테스트**
- 더 나은 확장성을 위해 상대 단위(em, rem) **사용**
- CSS 커스텀 속성으로 일관된 간격 **유지**
- 다양한 시각적 필요를 가진 사용자를 고려한 디자인 **고려**
- CSS 문법이 올바른지 반드시 **검증**

> ⚠️ **일반적인 실수**: 시각적 매력을 위해 사용성을 희생하지 마세요. 확장 프로그램은 아름답고 기능적이어야 합니다.

**기억할 점:**
- 중요한 정보는 쉽게 읽을 수 있게 **유지**
- 버튼과 인터랙티브 요소는 클릭하기 쉽게 **보장**
- 사용자 동작에 대해 명확한 시각적 피드백 **유지**
- 실제 데이터로 디자인 **테스트**, 자리 표시자 텍스트만으로 하지 말 것

기능적이면서도 시각적으로 훌륭한 브라우저 확장 프로그램 제작에 행운을 빕니다!

---

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