UI/UX 설계 및 프로토타입 가이드 추가

- 프로토타입 작성 가이드 문서 추가 (claude/uiux-prototype.md)
- 스타일 가이드 업데이트 및 백업 파일 추가
- UI/UX 설계서 수정
- 참조용 샘플 이미지 추가 (대시보드, 회의록, Todo 목록)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yabo0812
2025-10-21 16:59:10 +09:00
parent 5555eab4b0
commit 4f2fdadf50
8 changed files with 2302 additions and 1665 deletions
+73
View File
@@ -0,0 +1,73 @@
# 프로토타입작성가이드
[요청사항]
- <작성원칙>을 준용하여 설계
- <작성순서>에 따라 설계
- [결과파일] 안내에 따라 파일 작성
- Sequential MCP와 Playwright MCP 이용
[가이드]
<작성원칙>
- **UI/UX설계서와 매칭**되어야 함. **불필요한 추가 개발 금지**
- 스타일가이드를 준수하여 개발
<작성순서>
- 준비: 참고자료 분석 및 이해
- 실행:
- <병렬처리> 전략에 따라 프로토타입 개발
- 예제 데이터는 화면 간 일관성 있게 개발
- 각 화면간 전환이 되도록 개발
- 검토:
- <작성원칙> 준수 검토
- '[체크리스트]'에 따라 검토하고 수정
- 테스트:
- 프로토타입을 웹브라우저에 실행하여 테스트
- 버그 수정 및 화면 개선
<병렬처리>
- 서브 에이전트 활용: Task 도구로 서비스별 동시 작업
- 의존성 기반 그룹화: 의존 관계에 따른 순차/병렬 처리 결정
- 통합 검증: 병렬 작업 완료 후 전체적 일관성 검증
[참고자료]
- design/uiux/style-guide.md
- design/uiux/uiux.md
[결과파일]
- 프로토타입: design/uiux/prototype/{화면순서번호 2자리}-{화면명}.html
- 화면명은 한글로 작성
[체크리스트]
1. 화면별 기능 동작 체크
아래 체크 템플릿을 이용하여 화면별 기능 동작 체크
{화면명}
| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 |
|-----------|-----------|-----------|------|------|
| [수행할 액션] | [기대하는 동작] | [실제 확인된 동작] | 성공/실패/부분성공 | [특이사항] |
예시)
메인/홈 화면
| 기능/액션 | 예상 결과 | 실제 결과 | 상태 | 비고 |
|-----------|-----------|-----------|------|------|
| 로고 클릭 | 메인 페이지 새로고침/유지 | | 성공 | |
| 메인 메뉴 클릭 | 해당 페이지로 이동 | | 부분성공 | |
2. 화면간 데이터 일관성 체크
아래 체크 템플릿을 이용하여 데이터 일관성 체크
| 데이터 | 데이터 사용 화면 | 일관성 | 비고 |
|-------------|-------|-------|-------|
| [데이터명] | [화면명] | 일치/불일치 | [차이점] |
예시)
| 데이터 | 데이터 사용 화면 | 일관성 | 비고 |
|-------------|-------|-------|-------|
| 상품정보 | 메인화면, 상품상세화면 | 불일치| 메인화면에서 클릭한 상품정보와 상품 상세화면이 다름 |
3. 화면간 연결성 체크
아래 체크 템플릿을 이용하여 화면별 연결성 체크
| 출발화면 | 연결방법 | 도착화면 | 예상 동작 | 실제 동작 | 상태 |
|-----------|-----------|-----------|-----------|-----------|------|
| [화면A] | [버튼/링크명] | [화면B] | [동작설명] | [확인결과] | 정상/비정상 |
예시)
| 출발화면 | 연결방법 | 도착화면 | 예상동작 | 실제동작 | 상태 |
|--------|----------|--------|------|------|
| 모든 화면 | 로고 클릭 | 메인 화면 | 메인화면 리프레시 | 동작안함 | 비정상 |
| 모든 화면 | 메인 메뉴 | 각 주요 화면 | 각 화면 연결 | 정상 연결됨 | 정상 |