웹사이트를 막 리뉴얼했습니다. 회의실의 대형 모니터에서는 멋져 보이고, 모두가 제공 내용을 알고 눈을 감고도 주문을 완료할 수 있습니다. 하지만 고객은 휴대전화로 접속하고, 회사를 전혀 모른 채 첫 번째 혼란스러운 지점에서 떠납니다. 그렇기 때문에 웹사이트가 보기 좋은지만 확인하는 것으로는 충분하지 않습니다.
이 체크리스트의 원래 버전은 웹사이트와 온라인 쇼핑몰을 위한 폭넓은 목록으로 사용했습니다. 시간이 지나면서 보편적이지 않은 도구와 개별 규칙이 쌓였습니다. 이번 버전은 핵심으로 돌아갑니다. 사용자가 무엇을 할 수 있어야 하는지, 무엇을 확인해야 하는지, 트래픽에 비용을 투입하기 전에 문제를 어떻게 발견할 수 있는지를 다룹니다.
먼저 가장 중요한 세 가지 여정을 파악합니다
웹사이트 전체의 UX 감사는 쉽게 수백 개의 의견으로 쪼개질 수 있습니다. 그래서 저는 분석을 시작하기 전에 비즈니스에 가장 중요한 세 가지 여정을 선택합니다. 일반적으로는 다음과 같습니다.
- 신규 방문자가 제공 내용을 이해하고 문의를 보냅니다.
- 고객이 제품을 찾고 장바구니에 담아 결제합니다.
- 기존 고객이 지원, 문서 또는 연락처 정보를 찾습니다.
각 여정에 대해 시작점, 예상되는 끝점, 주요 장애물을 적어 보세요. 그러면 체크리스트를 기계적으로 작성하는 것이 아니라, 웹사이트가 특정 의사결정을 지원하는지 확인하게 됩니다.
1. 회의에 참석하지 않은 사람에게도 제공 내용이 명확해야 합니다
- 첫 화면에서 무엇을 제공하며 누구를 위한 것인지 분명합니까?
- 주요 제목이 회사 슬로건이 아니라 결과나 문제를 설명합니까?
- 메뉴를 뒤지지 않아도 다음 단계가 보입니까?
- 방문자가 개별 서비스나 선택지를 구분할 수 있습니까?
- 의사결정에 실제로 영향을 미치는 조건과 제한 사항을 명시했습니까?
회사를 모르는 사람에게 테스트해 보세요. 몇 초 동안 페이지를 보여 준 뒤 닫고, 회사가 무엇을 하는지와 다음에 무엇을 할 것인지 물어보세요. 과학적 연구는 아니지만, 회사 내부 사람들만 이해하는 표현을 빠르게 드러낼 수 있습니다.
2. 탐색은 생각하거나 마우스를 사용하지 않아도 작동해야 합니다
- 항목 이름이 방문자가 찾는 표현과 일치합니까?
- 링크, 로고 및 이전 단계로 돌아가기가 작동합니까?
- 모바일 메뉴를 읽고 닫을 수 있으며 중요한 콘텐츠를 가리지 않습니까?
- 구조가 긴 경우 현재 위치가 분명합니까?
- 모든 중요한 컨트롤에 Tab 키로 접근할 수 있습니까?
- 키보드를 사용할 때 포커스가 보이고 사용자가 갇히지 않습니까?
접근성은 일부 사람을 위한 특별한 모드가 아닙니다. 충분한 대비는 햇빛 아래 휴대전화를 사용할 때도 도움이 되고, 명확한 양식은 급한 사람에게도 도움이 됩니다. 빠르게 확인하려면 W3C의 쉬운 점검 항목을 사용할 수 있습니다. 이는 첫 번째 점검일 뿐, 완전한 WCAG 준수를 확인하는 것은 아닙니다.
3. 콘텐츠는 시선과 의사결정을 모두 이끌어야 합니다
- 주요 제목이 하나이고 이후 제목들이 논리적인 구조를 갖추고 있습니까?
- 문단을 읽기 쉽고, 훑어볼 때 중요한 정보를 쉽게 찾을 수 있습니까?
- 링크와 버튼이 클릭한 결과를 설명합니까?
- 의미가 색상, 이미지 또는 호버 효과에만 의존합니까?
- 정보를 제공하는 이미지에 의미 있는 대체 텍스트가 있습니까?
- 애니메이션이 제공 내용을 방해하며, 사용자가 동작 줄이기 설정을 적용할 수 있습니까?
강한 색상만으로 전환 버튼이 만들어지는 것은 아닙니다. 먼저 클릭 후 어떤 일이 일어나는지 분명해야 합니다. “제출”은 기술적인 설명입니다. “소개 통화 예약”은 불확실성을 줄여 줍니다.
4. 양식에는 회사가 실제로 사용할 정보만 요청해야 합니다
- 모든 필드에 눈에 보이고 프로그래밍 방식으로 연결된 레이블이 있습니까?
- 어떤 데이터가 필수이며 왜 필요한지 분명합니까?
- 사용자가 휴대전화와 키보드로 양식을 완료할 수 있습니까?
- 오류 메시지가 문제와 해결 방법을 모두 설명합니까?
- 오류가 발생해도 올바르게 입력한 데이터가 남아 있습니까?
- 제출 후 사용자에게 명확한 확인 메시지와 다음 단계에 대한 정보가 제공됩니까?
접근 가능한 양식에 관한 가이드에서 W3C은 프로세스를 완료하는 데 필요한 데이터만 요청하라고 권장합니다. 필드가 하나 추가될 때마다 사용자의 주의가 필요하고 데이터 처리 업무가 늘어납니다. 비즈니스에서 해당 정보를 사용하지 않는다면 삭제하세요.
5. 온라인 쇼핑몰은 보기 좋은 제품 페이지만이 아니라 전체 구매 과정을 처리해야 합니다
카테고리 및 검색
- 필터가 사람들이 선택하는 방식과 맞고 쉽게 지울 수 있습니까?
- 검색 결과가 없을 때 유용한 안내가 제공되고 다른 경로를 제시합니까?
- 제품 카드에 이름, 가격, 재고 여부 및 읽기 쉬운 이미지가 포함되어 있습니까?
- 휴대전화에서도 정렬과 필터링을 사용할 수 있습니까?
제품 상세 정보
- 장바구니에 추가하기 전에 옵션, 가격, 부가가치세, 재고 및 배송 정보가 설명되어 있습니까?
- 사진이 고객이 판단하는 데 필요한 내용을 보여 줍니까?
- 콘텐츠를 가리지 않고 장바구니 추가 버튼이 보입니까?
- 품절되었거나 판매가 중단된 제품에 대안과 합리적인 복귀 방법이 제공됩니까?
장바구니 및 주문
- 다른 데이터를 잃지 않고 상품, 옵션 및 수량을 변경할 수 있습니까?
- 배송비와 수수료를 포함한 최종 가격을 제때 알 수 있습니까?
- 비즈니스상 이유 없이 회원가입을 요구하지 않습니까?
- 결제에 실패했을 때 사용자가 이해할 수 있는 상태로 돌아갑니까?
- 주문 확인이 모호하지 않고 실수로 반복 구매하는 것을 방지합니까?
“장바구니에는 탐색 기능이 없어야 한다”는 규칙이 항상 유효한 것은 아닙니다. 단순한 구매에서는 방해 요소를 줄이는 것이 도움이 될 수 있습니다. 하지만 복잡한 제공 내용에서는 고객이 조건이나 제품 상세 정보를 찾아야 합니다. 정해진 규칙이 아니라 실제 행동을 테스트하세요.
6. 웹사이트는 모바일, 느린 네트워크 및 오류를 견뎌야 합니다
- 큰 레이아웃 이동 없이 주요 콘텐츠가 빠르게 로드됩니까?
- 페이지가 눈에 띄는 지연 없이 클릭과 입력에 반응합니까?
- 이미지의 크기가 적절하고 필요한 품질로만 로드됩니까?
- 외부 스크립트 오류가 주문이나 양식을 막을 수 있습니까?
- 주요 여정이 최신 주요 브라우저와 실제 휴대전화에서 작동합니까?
- 중요한 단계에서 가용성과 오류를 모니터링합니까?
실험실 점수는 지침일 뿐 비즈니스 성과가 아닙니다. 실제 사용자와 주요 여정도 관찰하세요. 광고 픽셀이 구매 버튼보다 중요해서는 안 됩니다.
7. 코드가 존재하는지 확인하는 것이 아니라 테스트로 측정을 검증해야 합니다
모든 중요한 여정에서 테스트 문의나 주문을 진행하세요. 이벤트가 올바른 이름, 값, 통화 및 거래 식별자와 함께 한 번만 전송되는지 확인합니다. 그런 다음 대상 시스템에서 이를 확인하고 실제 주문과 일치하는지 검증합니다.
- 감사 페이지 URL을 여는 것만으로 구매 이벤트가 전송됩니까?
- 페이지를 새로 고칠 때 이벤트가 중복됩니까?
- 태그가 동의 상태를 준수합니까?
- 데이터 레이어에 포함되어서는 안 되는 개인정보가 들어 있습니까?
- 컨테이너에 회사가 사용하는 서비스만 포함되어 있습니까?
- 측정 담당자와 마지막 점검 기록이 있습니까?
구현 방법은 Google Tag Manager를 올바르게 설정하는 방법을, 이벤트의 의미는 Google Analytics 4 가이드를 참고하세요. 세션 녹화나 히트맵은 사각지대를 드러낼 수 있지만, 민감한 필드를 마스킹하고 동의 규칙에 따라 목적을 분명히 하여 사용하세요. “혹시 모르니” 모든 것을 녹화하는 것은 연구 계획이 아닙니다.
월간 워크숍 없이 체크리스트를 사용하는 방법
- 가장 중요한 여정 하나를 선택하고 휴대전화에서 진행합니다.
- 키보드만 사용하여 같은 과정을 진행합니다.
- 회사 외부의 누군가에게 작업을 완료하게 하되 안내하지 않습니다.
- 자신이 제안하는 해결책이 아니라 그 사람이 망설인 지점을 기록합니다.
- 분석, 지원 데이터 또는 추가 테스트로 문제를 검증합니다.
- 장애물 하나를 해결한 뒤 측정을 포함하여 전체 여정을 다시 진행합니다.
한 번의 작업으로 웹사이트를 “UX 완료”라고 선언하려 하지 마세요. 제공 내용, 기기 및 사람들의 기대는 변합니다. 이 체크리스트의 목적은 가장 큰 비용을 초래하는 마찰을 정기적으로 발견하고 무엇을 먼저 해결할지 결정하는 것입니다.
더 넓은 비즈니스 맥락에서 웹사이트를 검토하려면 온라인 마케팅 체크리스트도 사용하세요. UX, 측정 및 고객 확보의 우선순위를 정해야 한다면 문의 페이지를 통해 주요 여정을 설명해 주세요.