From d1bb9d0231be8832f18c17165ea6d9730357f6e1 Mon Sep 17 00:00:00 2001 From: doyeon Date: Mon, 20 Oct 2025 13:20:01 +0900 Subject: [PATCH] uiux --- claude/uiux-design.md | 52 ++++++++++++++++++++++++++++ claude/uiux-prototype.md | 73 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 125 insertions(+) create mode 100644 claude/uiux-design.md create mode 100644 claude/uiux-prototype.md diff --git a/claude/uiux-design.md b/claude/uiux-design.md new file mode 100644 index 0000000..1eca232 --- /dev/null +++ b/claude/uiux-design.md @@ -0,0 +1,52 @@ +# UI/UX설계가이드 + +[요청사항] +- <작성원칙>을 준용하여 설계 +- <작성순서>에 따라 설계 +- [결과파일] 안내에 따라 파일 작성 + +[가이드] +<작성원칙> +- **유저스토리와 매칭**되어야 함. **불필요한 추가 설계 금지** +<작성순서> +아래 순서에 따라 순차적으로 작성 +- 준비 + - 유저스토리의 분석 및 이해 + - 설계 계획 +- UI/UX 설계서 작성: 아래 항목을 반드시 포함하고 필요 시 항목 추가 + - 프로토타입 화면 목록 정의 + - 화면 간 사용자 플로우 정의 + - 화면별 상세 설계: + - 개요: 목적, 관련 유저스토리, 비즈니스 중요도 + - 주요 기능 + - UI 구성요소 + - 인터랙션 + - 화면간 전환 및 네비게이션 + - 반응형 설계 전략 + - 접근성 보장 방안 + - 성능 최적화 방안 + - 변경 이력 +- UI/UX 스타일 가이드 작성: 아래 항목을 반드시 포함하고 필요 시 항목 추가 + - 브랜드 아이덴티티: 디자인 컨셉 등 + - 디자인 원칙 + - 컬러 시스템 + - 타이포그래피 + - 간격 시스템 + - 컴포넌트 스타일 + - 반응형 브레이크포인트 + - 대상 서비스 특화 컴포넌트 + - 인터랙션 패턴 + - 변경 이력 +- 검토: + - <작성원칙> 준수 검토 + - 스쿼드 팀원 리뷰: 누락 및 개선 사항 검토 + - 수정 사항 선택 및 반영 + +[참고자료] +- 유저스토리 + +[결과파일] +- 스타일가이드: design/uiux/style-guide.md +- UI/UX설계서: design/uiux/uiux.md +- 화면명은 한글로 작성 + 예시) 01-대시보드.svg diff --git a/claude/uiux-prototype.md b/claude/uiux-prototype.md new file mode 100644 index 0000000..db9bf21 --- /dev/null +++ b/claude/uiux-prototype.md @@ -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] | [동작설명] | [확인결과] | 정상/비정상 | + + 예시) + | 출발화면 | 연결방법 | 도착화면 | 예상동작 | 실제동작 | 상태 | + |--------|----------|--------|------|------| + | 모든 화면 | 로고 클릭 | 메인 화면 | 메인화면 리프레시 | 동작안함 | 비정상 | + | 모든 화면 | 메인 메뉴 | 각 주요 화면 | 각 화면 연결 | 정상 연결됨 | 정상 |