TOHFU/ux-huristic-research-skill

Skills UX 휴리스틱 연구 스킬

인간 중심 디자인의 지식에 기반한 휴리스틱 평가를 수행하고, 그 결과를 보고서로 출력합니다.

전제 조건

휴리스틱 평가를 수행하기 전에 지시된 프롬프트에서 아래 조건을 확인합니다. 이 조건을 확인할 수 없는 경우 적절히 질문합니다. 이러한 조건을 확인할 수 없거나 충족되지 않는 환경에서 평가를 수행하는 경우, 결과가 충분히 출력되지 않을 수 있음을 사전에 통지합니다.

대상 확정

• 평가는 다음 두 가지 패턴 중 하나를 선택할 수 있습니다.
  • 페이지 전체 방식: 지정된 웹사이트의 각 페이지 전체를 빠짐없이 평가합니다.
  • 여정 재현 방식: 지정된 고객 여정을 실현하는 과정의 경험을 평가합니다.
• 평가 대상(페이지 전체 방식의 경우 웹사이트 목록, 여정 재현 방식의 경우 여정의 시작점이 되는 URL)이 명확합니다.
• 여정 재현 방식의 경우, 대상이 되는 고객 여정의 개요(예: XX라는 정보를 조사한다, 문의를 한다 등)가 명확합니다.

대상 환경 확정

• 대상 사용자가 접속하는 환경(PC/모바일 디바이스)을 명확히 합니다.

조사 방법 이용 확인

• 대상 웹사이트의 소스 코드(HTML, CSS, JavaScript)를 획득할 수 있어야 합니다.
• Playwright 또는 이에 상응하는 E2E 도구를 사용할 수 있어야 합니다.
• E2E 도구를 사용하여 대상 웹사이트에 접속하고 조작할 수 있어야 합니다.

원칙

• 평가 결과는 일본어로 출력합니다.
• 평가는 Nielsen의 사용성 10원칙에 따라 수행하며, 각 원칙에 대해 10단계 평가를 진행합니다.
• 각 원칙에 대해 구체적인 지적 사항이 있는 경우, 이를 빠짐없이 보고합니다.

평가 프로세스

평가는 다음 단계에 따라 단계적으로 실행합니다.

1. 사이트 구조·화면 전이도 작성

• Playwright 등의 E2E 도구를 사용하여 화면 조작을 수행하고, 다음을 실행합니다.
  • 페이지 전체 방식의 경우, 목록화된 웹사이트의 화면 전이를 파악하여 사이트 구조를 작성합니다.
  • 여정 재현 방식의 경우, 고객 여정을 실현하기 위한 전이를 화면 전이도로 작성합니다.

2. 동적·E2E 검증(대상 고객 여정 확인)

• 페이지 전체 방식의 경우, Playwright 등의 E2E 도구를 사용하여 각 웹사이트에 접속하고 주요 UI를 조작합니다.
  • 화면 조작을 수행하면서 사용성 원칙을 충족하는지 확인하고 평가를 진행합니다.
• 여정 재현 방식의 경우, Playwright 등의 E2E 도구를 사용하여 대상 고객 여정을 재현합니다.
  • 여정을 실현하는 과정에서 사용성 원칙을 충족하는지 확인하고 평가를 진행합니다.

3. 정적 코드 분석

• 목록 또는 전이하는 웹 페이지의 소스 코드(HTML, CSS, JavaScript)를 읽어 DOM 구조의 타당성, 시맨틱 태그 사용 현황, 속성의 타당성, WAI-ARIA 구성 등을 검증합니다.

판정 상태 정의

각 원칙의 평가 결과에는 반드시 다음 상태 중 하나를 할당합니다.

• 1~10: 10이 가장 높고 1이 가장 낮은 10단계 평가입니다.
• 대상 없음: 대상 원칙에 해당하는 기능이나 콘텐츠 요소가 존재하지 않습니다.

출력 형식

평가 결과는 다음 마크다운 구조로 정리된 md 파일과 대상 웹 페이지 전체의 스크린샷 이미지(문제 위치를 빨간색 프레임으로 표시하고 문제 번호를 기재)를 파일로 출력합니다. 폴더 구성은 다음과 같습니다.

├ huristic-research-result-[도메인명].md
└ screenshots
  ├ screenshot-[웹사이트 URL].png
  └ ...

---

휴리스틱 평가 보고서

1. 평가 개요

• 평가 일시
• (여정 재현 방식의 경우)대상 여정
• 대상 URL 목록
• 검증 환경(PC/모바일)

사이트 구조·화면 전이도

사이트 구조 또는 화면 전이도를 Mermaid 문법의 코드 블록으로 기재합니다.

종합 결과 요약

원칙	평가 점수	근거/코멘트
1. 시스템 상태의 가시화	1~10 또는 대상 없음	근거/코멘트 기재
2. 현실 세계와의 일치	1~10 또는 대상 없음	근거/코멘트 기재
3. 사용자 제어 및 자유	1~10 또는 대상 없음	근거/코멘트 기재
4. 일관성 및 표준	1~10 또는 대상 없음	근거/코멘트 기재
5. 오류 방지	1~10 또는 대상 없음	근거/코멘트 기재
6. 기억보다는 인식	1~10 또는 대상 없음	근거/코멘트 기재
7. 사용의 유연성 및 효율성	1~10 또는 대상 없음	근거/코멘트 기재
8. 미니멀리즘 디자인	1~10 또는 대상 없음	근거/코멘트 기재
9. 오류 인식, 진단 및 복구 지원	1~10 또는 대상 없음	근거/코멘트 기재
10. 도움말 및 문서	1~10 또는 대상 없음	근거/코멘트 기재

---

2. 문제 목록 및 개선 제안

구체적인 문제 사항에 대해 해당 원칙을 기재한 후, 다음 형식으로 보고합니다.

Issue-XX: [문제 번호, 문제점의 간단한 제목]

• 해당 원칙: 해당 원칙의 이름을 기재합니다.
• 해당 위치: 대상 페이지의 URL, CSS 선택자 또는 코드 위치를 기재합니다.
• 문제 위치: 대상 페이지의 어느 위치인지 간결한 문장으로 기재합니다(예: 메인 비주얼 하단의 제목).
• 조작 내용: 화면 육안 확인, 또는 어떤 조작을 통해 발생하는지 기재합니다.
• 문제점: 어떤 문제가 발생하고 있는지 기재합니다.
• 영향을 받는 사용자 예: 특히 영향을 받는 사용자를 기재합니다(예: 스크린 리더 사용자, 키보드 조작 사용자, 저시력자 등).
• 해결 방법: 해결 방법에 대한 안을 기재합니다. 구체적인 수정안이 있는 경우 다음 형식으로 코드 예를 제시합니다.
  • 문제가 있는 코드 예 (Before):

    <!-- 문제가 있는 구현 패턴 -->
    

  • 권장되는 코드 예 (After):

    <!-- 문제를 해결하는 구현 패턴 -->
    

3. 추가 관찰

평가 중 특기 사항이 있으면 기재합니다 (JavaScript 오류나 동작 불량 등).

---

참고 자료

• references/hcd-10-usability-heuristics.md - Nielsen의 사용성 10원칙(원문·영어)
• references/hcd-standards.md - HCD 관련 ISO 규격 개요. 사용성 정의에 대해서는 여기를 참조합니다.
• references/examples_01.md - 출력 형식에 기반한 평가 예 1
• references/huristic-research-result-www.soumu.go.jp.md - 출력 형식에 기반한 평가 예 2 (총무성 홈페이지 평가 결과)
• /references/screenshots/screenshot-https_www.soumu.go.jp.png - 출력 형식에 기반한 평가 예 2 (총무성 홈페이지 평가 결과)
• /references/huristic-research-result-www.digital.go.jp.md - 출력 형식에 기반한 평가 예 3 (디지털청 홈페이지 평가 결과)