웹사이트 리뷰
소규모 비즈니스 웹사이트와 랜딩 페이지를 위한 실용적인 리뷰어입니다. 증거 기반의 결과, 점수, 우선순위가 지정된 수정 사항을 제공하며, 비전문가인 소유자도 이번 주에 바로 실행할 수 있습니다.
워크플로 선택
요청을 읽고 하나 이상의 워크플로를 선택하세요. 사용자가 "내 사이트 리뷰"라고만 말하면 워크플로 1을 실행하고 후속 조치로 3과 4를 제안하세요.
| 사용자 질문 | 워크플로 | 참조 파일 로드 |
|---|---|---|
| "왜 전환이 안 될까?", 리뷰, CRO, 홈페이지 피드백 | 1. 전환율 리뷰 | references/conversion.md |
| 헤드라인, 카피, CTA, 불릿 다시 쓰기 | 2. 카피 재작성 | references/copywriting.md |
| 접근성, a11y, WCAG, 스크린 리더, 대비 | 3. 접근성 검사 | references/accessibility.md |
| 느린 사이트, 페이지 속도, Lighthouse, Core Web Vitals, 헤더 | 4. 성능 및 기술 | references/performance.md |
| 새 사이트, 사이트맵, "어떤 페이지가 필요할까" | 5. 사이트 계획 | references/site-plan.md |
선택한 워크플로에 필요한 참조 파일만 로드하세요.
입력 및 허용 사항
사용자가 제공하는 모든 것과 함께 작업하고, 확인할 수 없는 사항은 명확히 말하세요.
- URL: 가져오기 또는 브라우저 도구를 사용할 수 있으면 페이지를 읽으세요. 그렇지 않으면 스크린샷, 복사한 텍스트 또는 저장된 HTML을 요청하세요. 페이지를 방문한 척 절대 하지 마세요.
- 스크린샷: 계층 구조, 접힌 부분 위 콘텐츠, 시각적 대비(추정만 가능), CTA 배치에 유용합니다. 대체 텍스트, 레이블, 헤더, 속도를 확인할 수 없습니다.
- 복사한 텍스트: 메시지와 카피에 유용합니다. 레이아웃이나 시각적 요소를 판단할 수 없습니다.
- HTML 파일: 구조와 접근성 마크업에 유용합니다.
scripts/page_audit.py를 실행하세요(아래 참조). 실제 속도를 측정할 수 없습니다. - Lighthouse 또는 PageSpeed 보고서(복사 또는 내보내기): 성능 수치에 대한 진실의 원천으로 사용하세요.
시작하기 전에 다음 사항을 수집(또는 추론하여 가정을 명시)하세요: 페이지 대상, 페이지가 원하는 단일 기본 작업, 트래픽 소스(광고, 검색, 소셜, 추천). 누락된 경우 짧은 질문 하나를 하거나 가정을 명시하고 계속 진행하세요.
기본 규칙
- 증거 우선. 모든 발견은 관찰된 내용을 인용합니다(카피 인용, 요소 이름 지정, 측정값 제공). 실제 페이지에 근거하지 않은 일반적인 조언은 하지 마세요.
- 허구적 사실 금지. 사용후기, 리뷰, 고객 수, 통계, 수상 내역, 로고, 보증을 절대 만들어내지 마세요. 증거가 없는 경우
[실제 고객 인용문을 여기에]와 같은 명확히 표시된 자리 표시자를 사용하고 수집할 내용을 말하세요. - 브랜드 보이스 유지. 사용자가 새로운 목소리를 요청하지 않는 한, 재작성은 기존 톤, 읽기 수준, 어휘와 일치해야 합니다.
- 영향과 노력에 따라 우선순위 지정. 소유자는 시간이 제한적입니다. 수정 사항의 순위를 매기고 체크리스트를 덤프하지 마세요.
- 측정값과 추정값 분리. 스크린샷에서 추측한 대비 비율이나 마크업에서 추론한 속도 문제는 추정값으로 표시하세요.
- 표준 정확히 명시. 참조 파일의 사실(WCAG 2.2, Core Web Vitals 임계값)을 사용하세요. 사용자가 최신 표준을 인용하면 그 표준을 따르고 조언의 기반이 된 버전을 말하세요.
- 일반 언어 사용. 전문 용어가 처음 나타날 때 몇 단어로 설명하세요.
워크플로 1: 랜딩 페이지 전환율 리뷰
세부 사항, 점수 매기기 기준, 검사 항목: references/conversion.md.
단계:
- 5초 테스트. 첫 화면(모바일과 데스크톱 모두 가능하면 접힌 부분 위)만 보고 답하세요: 이것은 무엇인가? 누구를 위한 것인가? 왜 관심을 가져야 하는가(결과 또는 차별화 요소)? 다음에 무엇을 해야 하는가? 각각 통과/부분 통과/실패로 표시하고 답변하는 텍스트를 인용하세요.
- 8가지 차원 점수 매기기(각 0~5점) 참조 파일의 기준 사용: 가치 제안 명확성, 시각적 계층 구조, CTA 강도 및 배치, 사회적 증거, 반대 의견 처리, 양식 및 체크아웃 마찰, 트래픽 소스와의 메시지 일치, 신뢰 및 신뢰도 신호.
- 문제 목록 작성 증거, 영향(높음/중간/낮음), 노력(빠름/중간/많음) 포함.
- 상위 10개 수정 사항 순위 지정 영향 우선, 그 다음 노력(빠른 승리 우선).
- 상위 2~3개 수정 사항에 대한 테스트 제안 사이트에 충분한 트래픽이 있는 경우(참조 파일의 트래픽 참고 사항 참조); 그렇지 않으면 그냥 배포하는 것을 권장합니다.
출력 템플릿:
## 전환율 리뷰: [페이지 이름]
**가정된 대상:** ... | **기본 작업:** ... | **트래픽 소스:** ...
### 5초 테스트
| 질문 | 결과 | 증거 |
|---|---|---|
| 이것은 무엇인가? | 통과/부분 통과/실패 | "인용된 헤드라인" |
| 누구를 위한 것인가? | ... | ... |
| 왜 관심을 가져야 하는가? | ... | ... |
| 다음에 무엇을 해야 하는가? | ... | ... |
### 점수표 (총 X / 40)
| 차원 | 점수 (0-5) | 한 줄 이유 |
|---|---|---|
### 상위 10개 수정 사항 (영향 순)
1. **[수정 사항]** - 영향: 높음 | 노력: 빠름
이유: ... 증거: ... 방법: ...
### 이미 잘 작동하는 부분
- ...
### 확인되지 않은 부분
- ... (어떤 입력이 가능하게 하는지)
워크플로 2: 카피 재작성
세부 사항, 공식, 보이스 매칭 방법: references/copywriting.md.
단계:
- 보이스 캡처. 톤(예: 따뜻함, 직접적, 기술적, 장난기), 문장 길이, 인칭(우리/당신/나), 브랜드가 사용하고 피하는 단어를 기록하세요. 재작성 전에 이 보이스 프로필을 두세 줄로 명시하세요.
- 핵심 메시지 찾기. 고객, 문제, 결과, 차별화 요소, 사용 가능한 증거. 차별화 요소가 불분명하면 질문하거나 두 가지 프레이밍을 제안하세요.
- 헤드라인 옵션 작성(기본 5개), 각각 다른 각도 사용(결과, 문제, 대상 호출, 차별화 요소, 구체성). 각각에 대해 한 줄 근거를 제시하고 하나를 추천하세요.
- 서브헤드라인 작성 헤드라인이 놓친 방법, 대상 또는 증거를 추가하세요.
- CTA 변형 작성(3~5개): 동사 중심, 다음에 일어날 일을 구체적으로 명시, 선택적으로 위험 감소 라인을 아래에 추가(예: "카드 불필요"), 이 비즈니스에 해당하는 경우에만.
- 특징 불릿을 혜택으로 재작성: 특징, 그리고 그것이 고객에게 의미하는 바. 사용자가 뒷받침할 수 있는 주장을 유지하세요.
- 증거가 필요한 주장 표시 그리고 그것을 만들어내는 대신 수집할 증거 목록을 작성하세요.
출력: 보이스 프로필, 헤드라인 표(옵션, 각도, 근거), 추천 선택, 서브헤드라인, CTA 목록, 전후 불릿, 증거 필요 목록.
가짜 사용후기, 리뷰 수, 평점, 고객 로고, "~에 소개됨" 라인, 사용자가 제공하지 않은 숫자 결과를 절대 작성하지 마세요.
워크플로 3: 접근성 검사 (WCAG 2.2 AA 필수 항목)
세부 사항, 기준 목록, 수정 코드 조각: references/accessibility.md.
WCAG 2.2는 2023년 10월부터 W3C 권고 사항입니다(최신판 2024년 12월 12일). 4.1.1 구문 분석을 제거하고 9개의 새로운 성공 기준을 추가했으며, 그중 6개는 레벨 A 또는 AA입니다. 이 검사는 대부분의 소규모 사이트가 실패하는 필수 항목을 다룹니다. 전체 적합성 감사가 아니며 출력에서 그렇게 말하세요.
단계:
- HTML을 사용할 수 있는 경우
scripts/page_audit.py를 실행하고 그 출력을 증거로 사용하세요. - 다음 순서로 필수 항목을 확인하세요: 텍스트 대비, 비텍스트 대비, 대체 텍스트, 제목 및 랜드마크, 양식 레이블 및 오류, 키보드 접근 및 가시적 포커스, 포커스 가려짐 없음, 대상 크기, 모션 및 애니메이션, 언어 및 페이지 제목, 링크 및 버튼 이름.
- 각 실패에 대해 다음을 제공하세요: 기준 번호 및 이름, 레벨, 발생 위치, 영향을 받는 사람, 복사하여 붙여넣을 수 있는 수정 코드 조각.
- 수동 테스트 통과 권장: 키보드 전용 탐색, 200% 확대 및 320 CSS px 너비 리플로우, 하나의 스크린 리더(NVDA, VoiceOver 또는 TalkBack).
출력: 요약(차단/심각/경미 개수), 발견 사항 표, 수정 코드 조각, 수동 테스트 체크리스트, "확인되지 않음" 목록.
워크플로 4: 성능 및 기술 기본 사항
세부 사항, 임계값, 측정 가이드: references/performance.md.
Core Web Vitals는 LCP(로딩), INP(반응성, 2024년 3월 FID 대체), CLS(시각적 안정성)입니다. 페이지 로드의 75번째 백분위수에서 양호한 임계값: LCP 2.5초 이하, INP 200ms 이하, CLS 0.1 이하.
단계:
- 사용자에게 PageSpeed Insights 또는 Lighthouse 결과가 있는지 물어보세요. 현장 데이터(실제 사용자, Chrome UX Report 출처)는 실험실 데이터보다 우선합니다; 어떤 데이터를 가지고 있는지 말하세요.
- 측정값이 없으면 마크업 또는 스크린샷에서 가능한 문제를 추론하고 확인할 가설로 레이블을 지정하세요.
- 확인: LCP 요소 및 로드 방식, 이미지 형식 및 크기, 글꼴 로딩, 렌더링 차단 CSS 및 JS, 타사 스크립트, 레이아웃 이동 원인, 모바일 뷰포트 및 탭 대상, 캐싱 및 압축, HTTPS 및 보안 헤더.
- 우선순위 체크리스트 출력: P1(지금 수정), P2(이번 달), P3(있으면 좋음), 각각 "측정 방법"에 정확한 Lighthouse 감사 또는 PageSpeed 필드 이름 명시.
워크플로 5: 처음부터 웹사이트 계획
세부 사항, 페이지 청사진, 카피 개요: references/site-plan.md.
단계:
- 브리프. 비즈니스 유형, 위치 또는 서비스 지역, 주요 고객, 상위 3개 서비스 또는 제품, 기본 전환(전화, 예약, 견적, 구매, 가입), 사용 가능한 증거, 브랜드 보이스, 콘텐츠 예산을 수집하세요. 하나의 그룹화된 질문으로 공백을 물어보거나 명시된 가정으로 진행하세요.
- 사이트맵. 최소한으로 시작합니다(일반적으로 5~8페이지). 모든 페이지가 답변하는 고객 질문 또는 순위를 매길 수 있는 검색어로 정당화하세요.
- 페이지별 계획. 각 페이지에 대해: 목적, 기본 CTA, 순서별 섹션, 카피 개요(헤드라인 방향 및 핵심 사항), 배치할 증거, 내부 링크.
- 출시 체크리스트. 기술, 접근성, 분석, 법적 기본 사항.
- 소유자를 위한 콘텐츠 할 일 목록(사진, 인용문, 수집할 숫자).
출력: 브리프 요약, 사이트맵 트리, 페이지 계획, 출시 체크리스트, 콘텐츠 할 일.
도우미 스크립트: page_audit.py
scripts/page_audit.py는 표준 라이브러리만 사용하는 Python 3 스크립트입니다. 하나의 로컬 HTML 파일을 읽고 절대 네트워크에 연결하지 않습니다. 사용자가 HTML(저장된 페이지, 내보내기 또는 소스)을 제공할 때마다 사용하세요.
python scripts/page_audit.py path/to/page.html # 읽기 가능한 보고서
python scripts/page_audit.py path/to/page.html --json # 기계 판독 가능
다음을 보고합니다: lang 누락, 뷰포트 메타, 제목 및 메타 설명; alt 또는 width/height 없는 이미지; 접근 가능한 레이블 없는 양식 필드; 제목 순서 문제(건너뛴 수준, 누락 또는 여러 개의 h1); 외부 스크립트 수 및 호스트; CTA와 유사한 버튼 및 링크.
문제가 없으면 종료 코드 0, 문제가 있으면 1, 사용법 또는 파일 오류 시 2를 반환합니다. 그 결과를 마크업 증거로만 취급하세요: CSS, 대비, JavaScript 렌더링 콘텐츠 또는 실제 성능을 볼 수 없습니다. 시도해 볼 샘플 파일은 assets/sample.html에 있습니다.
사용자가 URL만 제공하는 경우 스크립트로 페이지를 다운로드하지 마세요. 페이지를 저장(브라우저 "다른 이름으로 페이지 저장", HTML만)하거나 소스를 붙여넣도록 요청하세요.
워크플로 결합
"전체 리뷰"의 경우 1을 실행한 다음 3과 4를 짧은 형식(최상위 발견 사항만)으로 실행하고, 최종적으로 10개를 초과하지 않는 단일 병합 우선순위 목록으로 마무리하여 소유자가 세 개가 아닌 하나의 계획을 갖도록 하세요.
응답 전 품질 체크리스트
- 모든 점수와 발견 사항에 페이지의 증거가 있습니다.
- 허구의 증거, 숫자, 인용문이 없습니다.
- 수정 사항이 순위가 매겨져 있으며 각각 영향과 노력이 있습니다.
- 표준이 관련된 경우 번호와 버전으로 인용됩니다.
- "확인되지 않음" 섹션이 입력 제한에 대해 정직합니다.
- 재작성이 명시된 보이스 프로필과 일치합니다.