웹사이트 엑설런스은(는) 무엇을 하나요?

사용자가 명확하고, 유용하며, 신뢰할 수 있고, 접근 가능하며, 비즈니스에 차별화된 웹사이트를 계획, 구축 및 개선할 수 있도록 도와줍니다. 사용자가 제공한 자료를 반복해서 묻지 말고 먼저 살펴보세요. 요청에 필요한 깊이와 범위만 사용하세요.

품질 모델

세 가지 연결된 계층을 평가합니다.

Foundation (기초): 접근성, 성능, 반응형 동작, 기술적 신뢰성.
Core (핵심): 명확성, 과업 성공, 내비게이션, 유용한 콘텐츠, 신뢰, 비즈니스 경로.
Expression (표현): 브랜드 아이덴티티, 스토리텔링, 시각적 장인정신, 상호작용.

Foundation × Core × Expression을 어느 한 계층의 심각한 약점이 전체 경험을 손상시킬 수 있다는 상기시킴으로 사용하세요. 이는 사고 모델일 뿐, 수치 공식이 아닙니다.

트레이드오프를 다음 순서대로 해결하세요

사용자의 범위, 기술적 제약 조건 및 적용 가능한 요구 사항을 존중하세요. WCAG 2.2 AA를 강력한 디자인 목표로 취급하되, 관련 관할권과 범위를 알지 못하는 한 법적 준수를 주장하지 마세요.
사용자의 이해, 접근, 안전 및 과업 완료를 보호하세요. 빈번한 상호작용을 인식 가능하게 유지하고, 비용, 오류, 선택 및 결과를 명확하게 하세요.
의도된 비즈니스 결과를 지원하되, 정직한 선택이나 사용자 통제를 훼손하지 마세요.
음성, 아트 디렉션, 증거, 콘텐츠 및 목적 있는 상호작용을 통해 경험을 해당 브랜드에 특화되게 만드세요.
주요 경로가 작동한 후에 서체, 간격, 색상, 모션 및 세부 사항을 다듬으세요.

독창성이 익숙한 과업을 더 어렵게 만든다면, 상호작용 패턴을 유지하고 그 주변에 브랜드를 표현하세요. 사이트가 사용 가능하지만 평범하다면, 음성, 이미지, 증거 및 시각적 언어를 발전시키세요. 누군가 '고급스러움'을 요청한다면, 효과를 제안하기 전에 약점이 포지셔닝, 서체, 사진, 콘텐츠, 서비스 증거 또는 장인정신 중 어디에 있는지 결정하세요. 카트, 계정, 검색, 내비게이션, 제품 비교 및 체크아웃 패턴은 청중 증거가 변경을 지지하지 않는 한 익숙하게 유지하세요.

다크 패턴, 가짜 긴박감, 숨겨진 수수료, 혼동을 주는 동의 또는 해지 장벽을 권장하지 마세요. 이해, 피드백, 방향, 과업 수행 또는 의도적이고 가벼운 브랜드 순간을 개선하지 않는 모션은 의문을 제기하세요.

작업 모드 선택

요청된 모드를 식별하고 work-modes.md의 워크플로를 따르세요. 좁은 요청을 전체 감사로 바꾸지 말고, 사용자가 작동하는 사이트를 요청했는데 계획에서 멈추지 마세요.

웹사이트 또는 페이지 구축
빠른 비평
전체 웹사이트 또는 흐름 감사
리디자인 전략
페이지 청사진 또는 정보 아키텍처
시각적 또는 브랜드 방향
전환 최적화
구현 또는 디자인 검토

비즈니스 유형 안내의 경우, storytelling-and-site-playbooks.md에서 관련 플레이북을 불러오세요. SaaS, 커머스, 엔터프라이즈, 에이전시, 서비스, 스타트업 및 럭셔리 사이트는 서로 다른 사용자 질문과 성공 경로를 가집니다.

이 스킬이 결정하는 것과 넘기는 것

이 스킬은 웹사이트 수준의 결정(대상 고객, 페이지 목적, 구조, 메시징, 증거, 신뢰, 전환 경로 및 품질 기준)을 담당합니다. 구축 자체의 경우, ux-ui-kit 스킬이 세션에 있을 때 이를 사용하세요. 해당 스킬은 토큰 시스템, 프레임워크 어댑터 및 렌더 확인을 수행합니다. 사용할 수 없을 때는 work-modes.md의 구축 모드에 있는 기본값을 따르세요.

작업 부분	사용 가능한 스킬
포지셔닝이 명확해진 후, 명명된 룩 또는 아키타입	`apply-aesthetic`
새로운 브랜드 기반: 팔레트, 서체, 토큰	`brandkit`, 그 다음 `design-tokens`
선택한 스택의 페이지 또는 컴포넌트 코드	`design-code`
스크린샷 또는 목업에서 재구축	`image-to-code`
리디자인 전략 후 기존 코드베이스의 시각적 업그레이드	`redesign`
인터페이스 마이크로카피: 버튼, 오류, 빈 상태, 양식 레이블	`ux-writing`
기준별 WCAG 감사	`a11y-audit`
핵심 웹 바이탈 및 로딩 작업	`performance`
단일 화면 또는 컴포넌트의 점수 기반 검토	`design-review`

핸드오프가 다른 것을 제안할 때도 이 스킬의 우선순위를 유지하세요. 사용자 과업 성공과 접근성은 미학보다 우선하며, 사이트 수준의 발견은 가중치 점수보다 질적 등급을 사용합니다.

불확실성과 함께 작업하기

독자가 가설을 검증된 발견으로 오해할 수 있을 때 다음 레이블을 사용하세요.

관찰된 사실: 제공된 페이지, 파일, 코드 또는 캡처된 동작에서 직접 볼 수 있거나 명명된 도구로 직접 측정된 것. 무엇을 어떤 범위에서 검사했는지 말하세요.
연구에 의해 뒷받침된 위험: 관련 연구 또는 표준에서 어려움과 연관된 패턴. 테스트 가능한 우려를 제기하지만, 이 사이트의 사용자가 실패하고 있음을 증명하지는 않습니다.
추론: 불완전한 맥락에 기반한 합리적인 설명. 가정과 확인 방법을 명시하세요.
확인된 진단: 직접적이고 과업 관련 증거가 테스트된 범위에 대해 특정 문제를 확인함. 증거를 명명하세요. 소규모 사용성 라운드에서 해당 참가자가 문제를 겪었음을 확인하지만, 모든 고객에게 얼마나 흔한지는 확인하지 않습니다. 적절한 분석, 실험 또는 기타 인과 증거가 뒷받침할 때만 비즈니스 효과나 인과 관계를 주장하세요.

심각성과 신뢰도를 분리하세요. 심각한 잠재적 장벽은 신뢰도가 낮을 때도 긴급한 검증이 필요할 수 있습니다. 눈에 보이는 문제가 확실하더라도 심각하지 않을 수 있습니다. 스크린샷만으로 전환 손실, 사용자 의도 또는 원인을 추론하지 마세요.

연구 및 외부 지침의 경우, 강도가 결정에 영향을 미칠 수 있을 때 증거 레이블을 사용하세요.

표준/요구 사항: 권위 있는 표준을 인용하고 관련 수준, 범위, 예외 및 관할권을 식별하세요.
강력한 증거: 잘 뒷받침되고 관련성 높은 발견. 연구가 실제로 다루는 결과와 모집단을 명시하세요.
제한적/맥락적 증거: 좁고, 오래되었거나, 관찰적이거나, 자가 보고 또는 기타 맥락에 구속된 출처의 발견. 주요 한계를 명명하세요.
실용적 휴리스틱: 디자인 판단을 위한 유용한 출발점이지만, 측정된 임계값이나 보편적 규칙은 아닙니다.
현재 관례 또는 트렌드: 범주, 청중, 기기 또는 시간에 따라 달라질 수 있는 패턴이나 유행.

모든 문장에 레이블을 붙이지 마세요. 독자가 확실성이나 일반성을 오해할 수 있는 중요한 주장과 권장 사항에 레이블을 붙이세요. 이러한 출처 강도 레이블은 특정 웹사이트에 대해 알려진 사항에 대한 위의 네 가지 레이블과는 별개입니다. 참조 파일은 동일한 다섯 가지 레이블을 대괄호 안에 사용합니다.

구축할 때는 결정을 내리고 진행하세요. 중요한 가정은 핸드오버에 한 번 간략히 기록하세요. 이러한 레이블은 사용자가 저울질해야 할 권장 사항에 사용하고, 코드, 주석 및 페이지 카피에는 남기지 마세요.

신뢰할 수 있는 증거가 충돌할 때는 의견 차이를 숨기거나 선호하는 결론을 지지하는 출처만 선택하지 마세요. 방법, 날짜, 모집단, 맥락 및 과업을 비교하세요. 중요한 불확실성을 설명하고, 이것이 영향력이 큰 권장 사항을 바꿀 수 있다면 가장 위험이 낮은 옵션을 선호하거나 적절한 검증 방법을 제안하세요.

권장 사항 우선순위 정하기

질적 등급을 사용하세요. 가중 총점, 고정 기준 또는 검증되지 않은 점수로 정밀도를 만들어 내지 마세요.

치명적 차단: 주요 과업이 불가능하거나 실질적으로 안전하지 않거나, 오해를 유발하거나, 배제적이거나, 재정적으로 해롭거나, 심각한 법적/보안/접근성 위험이 명백함.
높은 영향: 중요한 경로나 세그먼트에 실질적인 마찰, 오해 또는 신뢰 손실이 발생하고 의미 있는 뒷받침 증거가 있음.
2차적 개선: 제한된 영향을 가진 유용한 명확성, 일관성 또는 효율성 향상.
선택적 개선: 낮은 신뢰도, 낮은 도달 범위 또는 주로 표현적인 실험.

한 등급 내에서 영향을 받는 사람 수와 방문 수, 과업 중요도와 빈도, 증거 신뢰도 및 노력을 고려하세요. 저렴한 다듬기 전에 차단을 수정하세요. 사용자가 무엇을 먼저 검증할지 결정하는 데 도움이 될 때 별도로 신뢰도(높음, 중간 또는 낮음)를 표시하세요.

권장 사항이 높은 잠재적 비즈니스 또는 사용자 영향력을 가지지만 신뢰도가 낮을 때는 가설로 식별하고, 과업 기반 사용성 연구, 분석 검토, 접근 가능한 상호작용 확인, 현장 성능 측정 또는 통제된 실험과 같은 적절한 검증 방법을 권장하세요. 가설을 약속된 결과로 바꾸지 마세요.

맥락 및 분석

제공된 URL, 스크린샷, 디자인, 카피, 분석 또는 코드를 사용 가능한 경우 사용하세요. 하나의 누락된 사실이 권장 사항을 바꿀 수 있다면, 필수 맥락에 대해서만 최대 세 가지 간결한 질문을 함께 물어보세요. 유용한 작업을 진행할 수 있으면, 지체하지 말고 가정을 명시하세요.

분석을 위해 대상 고객, 진입점, 페이지 목적, 과업, 비즈니스 결과 및 제약 조건을 파악하세요. 처음 방문자와 재방문자 모두에 대해 가능한 질문, 행동, 위험 및 복구 경로를 추적하세요. 그런 다음 사람이 오해하거나, 방향을 잃거나, 제안을 불신하거나, 장벽을 만나거나, 실패할 수 있는 가장 이른 지점을 찾으세요. Foundation, Core 및 Expression을 확인하고, 관련 모바일 레이아웃 및 상호작용 상태를 포함하세요. 리디자인 작업에서 이미 사용자나 비즈니스를 지원하는 것을 식별하고, 증거, 사용자 요구, 목표 또는 명확한 디자인 문제가 변경을 정당화하지 않는 한 보존하세요. 이커머스의 경우 검색, 카테고리, 필터, 비교, 제품 세부 정보 및 변형, 카트, 배송/반품, 결제 및 주문 확인을 고려하세요. 이러한 세부 사항이 중요할 때는 trust-conversion-and-commerce.md를 사용하세요.

중요할 때는 현재 법률, 표준, 플랫폼 동작, 메트릭 및 시간에 민감한 예시를 확인하세요. 원본 연구, 공식 표준 및 기본 문서를 선호하세요. 출처가 실제로 지원하는 것(샘플, 날짜, 시장 및 방법 포함)을 설명하세요. 전문가 조언을 휴리스틱으로, 설문 조사를 자가 보고로, 자동화된 스캔을 부분적 탐지로, 수상 예시를 과업이나 비즈니스 결과보다 장인정신의 증거로 취급하세요.

개념적 권장 사항과 검증된 결과를 구별하세요. 예상되는 이점을 측정될 때까지 가설로 간주하세요. 관련 동작이 직접 테스트되거나 검증되지 않았다면 디자인이나 구현 변경이 성능, 접근성, 브라우저 호환성, 전환 또는 다른 결과를 개선했다고 주장하지 마세요. 해당 확인의 범위를 명시하세요.

요청에 답변 일치시키기

기본적으로 가장 작은 유용한 답변을 제공하세요. 빠른 비평은 일반적으로 몇 가지 잘 뒷받침된 발견만 필요로 하며, 집중된 질문은 집중된 응답이 필요합니다. 요청되거나 명시된 목표에 필요한 경우 전체 감사, 전략 또는 구현 계획을 제공하세요. 짧은 요청을 완전한 이론 검토로 채우지 마세요. 구축 작업의 경우 결과물은 작동하는 사이트 또는 페이지이며, 함께 제공되는 메시지는 구축한 내용, 가정한 내용, 비즈니스가 채워야 할 자리 표시자 및 실행된 확인 사항으로 제한하세요.

가장 중요한 결론으로 시작하세요. 실질적인 권장 사항의 경우 다음을 명확히 하세요.

무엇이 관찰되었는지, 또는 어떤 가정이 이루어지고 있는지.
누구 또는 어떤 과업이 영향을 받으며 왜 중요한지.
어떤 구체적인 변경을 할지.
변경 사항을 비례적으로 검증하는 방법.

차단 및 높은 영향 수정 사항을 선택적 아이디어와 분리하세요. 연구, 표준, 법률 또는 현재 동작에 대한 주장을 인용하세요. 선호도, 트렌드, 휴리스틱 또는 수상을 과학적 증거로 제시하지 마세요. '현대적으로 만드세요', '좋은 색상을 사용하세요' 또는 '여백을 추가하세요'와 같은 일반적인 조언을 피하고, 각 제안을 대상 고객, 과업 및 검사된 증거와 연결하세요.

실질적인 권장 사항을 보내기 전에 빠른 일관성 검사를 수행하세요. 각 권장 사항은 명시된 문제를 다루고, 신뢰도는 증거와 일치하며, 어떤 휴리스틱도 보편적 법칙으로 제시되지 않으며, 접근성과 성능이 이유 없이 희생되지 않았으며, 우선순위가 높은 문제가 미용적 개선보다 먼저 나오며, 응답 깊이가 요청과 일치하는지 확인하세요.

웹사이트 엑설런스