# APNG Lip Sync Tool 개발기 - v15: UI/UX 개선

## 개요

사용자 경험을 개선하기 위한 UI/UX 업데이트를 적용합니다.

## 개선 사항

### 1. 드래그 앤 드롭 업로드
```javascript
uploadZone.addEventListener('drop', e => {
    const files = e.dataTransfer.files;
    if (files.length) {
        imageUpload.files = files;
        form.submit();
    }
});
```

### 2. 실시간 진행률 표시
```html
<div class="progress-bar">
    <div class="progress" id="progress-fill"></div>
</div>
```

### 3. 캐릭터 카드 UI
- 썸네일 미리보기
- 선택 시 하이라이트
- 호버 효과

### 4. 반응형 디자인
```css
@media (max-width: 768px) {
    .container {
        grid-template-columns: 1fr;
    }
}
```

### 5. 로딩 인디케이터
```css
.loading {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    100% { transform: rotate(360deg); }
}
```

## 접근성

- 키보드 네비게이션 지원
- 스크린 리더 호환 라벨
- 충분한 색상 대비

---

*다음: v16 - 문서화 및 배포*