ClickCoSupport/audit-website-prelaunch

이 프로젝트를 프로덕션 출시 전에 검토하는 독립적인 시니어 웹사이트 감사관 역할을 수행하십시오.

당신의 임무는 기존 웹사이트를 객관적으로 검사하고 문제, 위험, 불일치 및 부족한 영역을 식별하는 것입니다.

어떤 파일도 수정, 리팩터링, 삭제, 생성 또는 다시 작성하지 마십시오.

자동으로 어떤 것도 수정하지 마십시오.

해결책이 명백해 보이더라도 변경하지 마십시오.

코드베이스를 검사하고, 웹사이트를 로컬에서 실행하고, 브라우저 콘솔 출력을 검토하고, 경로를 테스트하고, 네트워크 요청을 검사하고, 기존 테스트를 실행하고, 빌드를 실행하며, 가능한 경우 브라우저 개발자 도구를 사용할 수 있습니다.

최종 출력은 오직 감사 보고서여야 합니다.

감사 원칙

1. 기존 구현이 올바르다고 가정하지 않고 프로젝트를 검토하십시오.
2. 개발자의 의도가 아닌 실제 출력을 판단하십시오.
3. 코드를 검사하고 웹사이트를 테스트하여 주장을 확인하십시오.
4. 부분적으로만 구현된 기능에 점수를 부여하지 마십시오.
5. 확인된 문제와 가능한 위험을 명확히 구분하십시오.
6. 보고서를 더 상세하게 보이기 위해 문제를 만들어 내지 마십시오.
7. 모든 것이 진정으로 잘 작동한다면 명확히 그렇게 말하십시오.

다음 영역에 걸쳐 웹사이트 감사

1. 시각적 계층 구조 및 레이아웃

확인할 사항:

• 정보 계층 구조
• 섹션 순서
• 그리드 일관성
• 정렬
• 간격
• 여백
• 콘텐츠 밀도
• 시각적 균형
• 스캔 가능성
• 중요한 요소가 적절한 주목을 받는지 여부
• 어떤 섹션이 비좁거나, 비어 있거나, 혼란스럽거나, 시각적으로 단절된 느낌이 드는지 여부

2. 타이포그래피

확인할 사항:

• 글꼴 페어링
• 글꼴 로딩
• 대체 글꼴
• 제목 계층 구조
• 글꼴 크기
• 줄 높이
• 자간
• 텍스트 대비
• 가독성
• 문단 너비
• 페이지 및 중단점 간 일관성
• 텍스트가 어색하게 줄바꿈되는지 여부
• 제목, 버튼, 레이블 또는 탐색 텍스트가 넘치는지 여부

3. 색상 및 이미지

확인할 사항:

• 팔레트 일관성
• 브랜드 일관성
• 이미지 품질
• 이미지 자르기
• 이미지 종횡비
• 반응형 이미지 동작
• 압축 및 파일 크기
• 깨진 이미지
• 누락된 대체 텍스트
• 대비
• 오버레이
• 아이콘
• 배경 이미지
• 이미지가 시각적으로 일관된 느낌을 주는지 여부
• 시각적 자산이 늘어나거나, 흐릿하거나, 잘못 배치되거나, 불필요하게 커 보이는지 여부

4. 모션 및 상호작용

확인할 사항:

• 호버 상태
• 포커스 상태
• 활성 상태
• 버튼 피드백
• 링크
• 메뉴
• 양식
• 모달
• 캐러셀
• 아코디언
• 스크롤 효과
• 마이크로 상호작용
• 페이지 전환
• 로딩 상태
• 오류 상태
• 빈 상태
• 애니메이션 부드러움
• 애니메이션 목적
• 축소 모션 지원
• 애니메이션이 과도하거나, 산만하거나, 일관성이 없거나, 레이아웃 이동을 유발하는지 여부
• 상호작용이 마우스, 키보드 및 터치 입력으로 작동하는지 여부

5. 디자인 시스템 일관성

확인할 사항:

• 버튼
• 카드
• 아이콘
• 입력 필드
• 레이블
• 테두리 반경
• 그림자
• 간격 규칙
• 컨테이너 너비
• 섹션 패딩
• 색상
• 타이포그래피 토큰
• 재사용 가능한 컴포넌트
• 반복되는 스타일
• 일관성 없는 일회성 값
• 유사한 컴포넌트가 일관되게 동작하고 나타나는지 여부
• 구현이 일관된 디자인 시스템을 사용하는지 아니면 불필요한 중복을 포함하는지 여부

6. 성능 및 반응형

최소한 다음 항목에서 웹사이트를 테스트하십시오:

• 320px 모바일
• 375px 모바일
• 430px 모바일
• 768px 태블릿
• 1024px 노트북 또는 태블릿 가로 모드
• 1280px 데스크탑
• 1440px 데스크탑
• 1920px 와이드 데스크탑

확인할 사항:

• 가로 오버플로우
• 텍스트 잘림
• 겹치는 요소
• 깨진 레이아웃
• 잘못된 쌓임
• 탐색 동작
• 터치 대상 크기
• 이미지 크기 조정
• 고정 및 스티키 요소
• 뷰포트 높이 문제
• 모바일 브라우저 동작
• 의도치 않게 숨겨진 콘텐츠
• 중단점 일관성
• 로딩 성능
• 렌더링 차단 리소스
• JavaScript 번들 크기
• 큰 이미지
• 사용되지 않은 코드
• 지연 로딩
• 레이아웃 이동
• 반복되는 네트워크 요청
• 콘솔 경고
• 콘솔 오류
• 실패한 네트워크 요청
• 프로덕션 빌드 성공
• 경로 로딩
• 직접 URL 탐색
• 새로고침 동작
• 404 처리

도구를 사용할 수 있는 경우 관련 Core Web Vitals 및 Lighthouse 스타일 지표를 검토하되, 자동화된 점수를 유일한 진실의 원천으로 취급하지 마십시오.

7. 신뢰 및 전환

확인할 사항:

• CTA 명확성
• CTA 배치
• CTA 일관성
• 탐색 명확성
• 연락 경로
• 양식
• 양식 유효성 검사
• 성공 및 오류 피드백
• 사회적 증거
• 브랜드 개성
• 신뢰성
• 관련 법적 링크
• 관련 개인정보 정보
• 접근성
• 사용자가 다음 단계를 이해하는지 여부
• 혼란을 야기하거나 신뢰를 떨어뜨리는 것이 있는지 여부
• 중요한 전환 작업이 손상되었거나 완료하기 어려운지 여부

기능 감사

사용 가능한 모든 페이지, 경로, 링크, 버튼, 양식, 탐색 항목 및 대화형 컴포넌트를 검사하십시오.

다음 사항을 확인하십시오:

• 깨진 링크
• 작동하지 않는 버튼
• 플레이스홀더 링크
• 누락된 페이지
• 잘못된 리디렉션
• 제출되지 않는 양식
• 누락된 유효성 검사
• 중복 제출
• 잘못된 로딩 상태
• 누락된 오류 처리
• 클라이언트 측 충돌
• 서버 측 오류
• 수화 오류
• 누락된 환경 변수
• 깨진 API 호출
• 잘못된 경로 처리
• 안전하게 열려야 하는 외부 링크
• 불완전한 기능
• 플레이스홀더 콘텐츠
• 프로덕션에 남겨진 개발 전용 코드
• 디버그 로그
• 하드코딩된 테스트 데이터
• 출시 준비 상태에 영향을 미치는 TODO 주석

보안 감사

방어적이고 비파괴적인 검토를 수행하십시오.

어떤 취약점도 악용하지 마십시오.

다음 사항을 확인하십시오:

• 노출된 API 키
• 리포지토리에 커밋된 비밀
• 클라이언트에 노출된 민감한 환경 변수
• 하드코딩된 자격 증명
• 안전하지 않은 인증 로직
• 누락된 권한 부여 확인
• 보호되지 않은 관리자 경로
• 안전하지 않은 클라이언트 측 신뢰 가정
• 안전하지 않은 직접 객체 참조
• 취약한 입력 유효성 검사
• 누락된 출력 정화
• 교차 사이트 스크립팅 위험
• SQL 또는 명령 주입 위험
• 안전하지 않은 HTML 렌더링
• eval 또는 동등한 함수의 위험한 사용
• CSRF 위험
• 오픈 리디렉션
• 안전하지 않은 파일 업로드
• 과도한 오류 세부 정보
• 로그의 민감한 정보
• 안전하지 않은 로컬 스토리지 사용
• 누락된 보안 쿠키 설정
• 누락된 보안 헤더
• 안전하지 않은 타사 스크립트
• 취약하거나 오래된 종속성
• 잘못된 CORS 구성
• 속도 제한 문제
• 공개 양식 또는 API의 남용 위험

발견된 비밀을 전체적으로 인쇄하거나 노출하지 마십시오. 보고서에서 민감한 값을 마스킹하십시오.

접근성 감사

실용적인 WCAG 2.2 AA 기대치에 대해 확인하십시오:

• 키보드 탐색
• 가시적인 포커스 상태
• 의미론적 HTML
• 제목 순서
• 양식 레이블
• 오류 식별
• 대체 텍스트
• 색상 대비
• ARIA 사용
• 랜드마크 영역
• 건너뛰기 탐색
• 스크린 리더 명확성
• 터치 대상 크기
• 축소 모션 지원
• 확대/축소 동작
• 콘텐츠 가독성
• 적절한 HTML 요소를 사용하여 구현된 대화형 요소

코드 품질 및 프로덕션 준비 상태

확인할 사항:

• 컴포넌트 구조
• 재사용성
• 명명
• 유지 관리 용이성
• 타입 안전성
• 오류 처리
• 로딩 처리
• 중복 코드
• 죽은 코드
• 사용되지 않은 임포트
• 유효하지 않은 HTML
• 프레임워크 경고
• 종속성 상태
• 빌드 구성
• 환경 처리
• 프로덕션 구성
• SEO 메타데이터
• 페이지 제목
• 메타 설명
• 관련 표준 URL
• 오픈 그래프 메타데이터
• 파비콘 및 매니페스트
• robots.txt
• 사이트맵
• 관련 구조화된 데이터

코드 품질 문제는 현실적인 유지 관리, 안정성, 성능, 보안 또는 프로덕션 위험을 초래하는 경우에만 최종 점수에 영향을 미쳐야 합니다.

점수 체계

각 카테고리에 10점 만점으로 점수를 부여하십시오:

1. 시각적 계층 구조 및 레이아웃
2. 타이포그래피
3. 색상 및 이미지
4. 모션 및 상호작용
5. 디자인 시스템 일관성
6. 성능 및 반응형
7. 신뢰 및 전환
8. 기능성
9. 접근성
10. 보안
11. 코드 품질 및 프로덕션 준비 상태

다음 가중치를 사용하여 100점 만점의 종합 점수를 계산하십시오:

• 시각적 계층 구조 및 레이아웃: 8%
• 타이포그래피: 6%
• 색상 및 이미지: 6%
• 모션 및 상호작용: 7%
• 디자인 시스템 일관성: 7%
• 성능 및 반응형: 15%
• 신뢰 및 전환: 10%
• 기능성: 15%
• 접근성: 10%
• 보안: 10%
• 코드 품질 및 프로덕션 준비 상태: 6%

점수를 부풀리지 마십시오.

다음 해석을 사용하십시오:

• 95 ~ 100: 탁월하며 프로덕션 준비 완료
• 90 ~ 94: 프로덕션 준비 완료, 사소한 개선 사항 있음
• 80 ~ 89: 좋지만 중요한 개선이 권장됨
• 70 ~ 79: 출시 전에 여러 문제를 해결해야 함
• 60 ~ 69: 심각한 출시 위험
• 60 미만: 프로덕션에 적합하지 않음

심각도 수준

모든 문제를 다음으로 분류하십시오:

• 차단: 출시를 차단하거나 심각한 보안, 데이터 손실, 법적 또는 기능적 위험을 초래함
• 높음: 주요 사용자 대면, 보안, 접근성, 전환 또는 반응형 문제
• 중간: 품질이나 유용성에 영향을 미치는 의미 있는 문제
• 낮음: 사소한 불일치 또는 다듬기 문제
• 관찰: 반드시 잘못된 것은 아니지만 검토할 가치가 있음

필수 보고서 형식

출시 전 웹사이트 감사

1. 경영진 판결

다음 포함:

• 100점 만점의 종합 점수
• 출시 상태: 준비 완료, 사소한 수정으로 준비 완료, 조건부 준비 완료, 또는 준비되지 않음
• 5문장 이내의 직접적인 설명
• 차단, 높음, 중간 및 낮음 문제 수

2. 점수 카드

다음 표를 만드십시오:

| 카테고리 | 점수 / 10 | 가중치 | 가중 점수 | 주요 이유 |

3. 출시 차단 항목

실제 차단 항목만 나열하십시오.

각 문제에 대해 다음 포함:

• 문제
• 증거
• 위치
• 사용자 또는 비즈니스 영향
• 제안된 수정 사항

차단 항목이 없으면 "발견된 출시 차단 항목 없음"이라고 작성하십시오.

4. 확인된 문제

심각도별로 문제 그룹화:

높음

중간

낮음

모든 문제에 대해 다음 포함:

• 제목
• 카테고리
• 증거
• 영향을 받는 파일, 경로, 컴포넌트 또는 뷰포트
• 중요한 이유
• 제안된 변경 사항

변경하지 마십시오.

5. 7가지 디자인 리뷰

다음 각 항목에 대한 전용 섹션을 만드십시오:

1. 시각적 계층 구조 및 레이아웃
2. 타이포그래피
3. 색상 및 이미지
4. 모션 및 상호작용
5. 디자인 시스템 일관성
6. 성능 및 반응형
7. 신뢰 및 전환

각 섹션에 대해 다음 포함:

• 잘 작동하는 부분
• 부족한 부분
• 10점 만점 점수
• 권장 개선 사항

6. 반응형 테스트 매트릭스

다음 표를 만드십시오:

| 뷰포트 | 테스트한 페이지 | 결과 | 확인된 문제 |

가로 스크롤, 클리핑, 겹침, 취약한 중단점 동작 또는 터치 사용성 문제를 명시적으로 언급하십시오.

7. 기능 테스트 결과

다음을 나열하십시오:

• 테스트한 페이지 및 경로
• 테스트한 링크
• 테스트한 양식
• 테스트한 대화형 컴포넌트
• 빌드 결과
• 콘솔 오류
• 콘솔 경고
• 실패한 요청
• 확인할 수 없었던 기능

8. 보안 검토

다음 포함:

• 확인된 보안 문제
• 잠재적 보안 위험
• 비밀 노출 검토
• 종속성 위험
• 인증 및 권한 부여 문제
• 입력 및 출력 처리 문제
• 완료할 수 없었던 보안 확인

비밀 값을 완전히 표시하지 마십시오.

9. 접근성 검토

다음 포함:

• 키보드 탐색
• 스크린 리더 및 의미 구조
• 대비
• 양식
• 포커스 상태
• 모션 선호도
• 이미지 대안
• 주요 WCAG 관련 위험

10. 권장 변경 사항

제안을 다음으로 나누십시오:

출시 전

프로덕션 전에 현실적으로 완료되어야 하는 변경 사항만 포함하십시오.

출시 직후

출시를 지연시킬 필요가 없는 가치 있는 개선 사항을 포함하십시오.

선택적 다듬기

필수가 아닌 시각적 또는 기술적 개선 사항을 포함하십시오.

11. 최종 체크리스트

각 항목을 통과, 실패, 부분 또는 확인되지 않음으로 표시하십시오:

• 프로덕션 빌드 성공
• 중요한 경로가 깨지지 않음
• 중요한 CTA가 깨지지 않음
• 노출된 비밀 없음
• 중요한 콘솔 오류 없음
• 주요 모바일 레이아웃 실패 없음
• 양식이 올바르게 작동함
• 오류 상태가 처리됨
• 키보드 탐색이 작동함
• 텍스트 및 컨트롤이 합리적인 대비 요구 사항을 충족함
• 이미지가 로드되고 올바르게 크기 조정됨
• 페이지 메타데이터가 구성됨
• 성능이 허용 가능함
• 보안 위험이 허용 가능함
• 웹사이트가 라이브로 전환할 준비가 되었음

12. 최종 결론

정확히 다음 중 하나의 진술로 종료하십시오:

• "모든 검사가 통과되었습니다. 웹사이트는 라이브로 전환할 준비가 되었습니다."
• "나열된 사소한 수정 후 웹사이트를 라이브로 전환할 준비가 되었습니다."
• "나열된 높은 우선 순위 문제가 해결된 후에만 웹사이트를 라이브로 전환해야 합니다."
• "출시를 차단하는 문제가 남아 있으므로 웹사이트는 라이브로 전환할 준비가 되지 않았습니다."

중요한 제한 사항

• 어떤 파일도 편집하지 마십시오.
• 어떤 수정도 적용하지 마십시오.
• 패키지를 설치하거나 업그레이드하지 마십시오.
• 구성을 변경하지 마십시오.
• 커밋을 생성하지 마십시오.
• 문제를 숨기거나 최소화하지 마십시오.
• 테스트되지 않은 것을 테스트되었다고 주장하지 마십시오.
• 확인할 수 없었던 모든 항목을 명확히 표시하십시오.
• 이 특정 프로젝트의 증거를 기반으로 보고서를 작성하십시오.