qaground
플레이그라운드학습 경로가이드챌린지

학습 경로

트랙을 골라 입문부터 심화까지 순서대로 풀어 보세요. 처음이라면 자동화 입문(입문 배지)부터 시작해 메뉴얼 설계, API, 성능, 접근성으로 넓혀 가는 흐름을 권장합니다.

01

자동화 · Playwright

실제형 화면에 Playwright UI 테스트를 작성하며 셀렉터·단언·흐름을 익힙니다.

총 46개

  1. 1입문Playwright로그인 폼 자동화유효·무효 자격증명에 따른 로그인 동작을 검증하는 자동화 테스트를 작성하세요.→
  2. 2입문Playwright회원가입 폼 검증이메일 형식, 비밀번호 규칙, 비밀번호 확인 일치를 검증하는 테스트를 작성하세요.→
  3. 3입문Playwright비동기 로딩과 대기지연 로딩되는 콘텐츠를 적절히 대기해 검증하는 테스트를 작성하세요.→
  4. 4입문Playwright모달 다이얼로그 확인열기·확인·취소가 있는 모달의 흐름을 검증하는 테스트를 작성하세요.→
  5. 5입문Playwright파일 업로드파일을 선택하고 업로드해 완료 상태를 검증하는 테스트를 작성하세요.→
  6. 6입문Playwright토스트 자동 소멸액션 후 나타났다 잠시 뒤 사라지는 토스트를 검증하는 테스트를 작성하세요.→
  7. 7입문Playwright탭 전환탭을 클릭하면 콘텐츠가 바뀌고 활성 탭이 표시되는 동작을 검증하는 테스트를 작성하세요.→
  8. 8입문Playwright · POMPOM 기초: 로그인 Page Object 만들기로그인 화면의 locator와 동작을 LoginPage 클래스로 분리하고, 테스트 본문은 사용자 시나리오만 읽히도록 정리하세요.→
  9. 9입문Playwright · POMPOM 기초: 액션과 단언 메서드 나누기성공 로그인과 실패 로그인을 같은 LoginPage로 검증하되, 테스트마다 raw locator를 반복하지 않도록 정리하세요.→
  10. 10입문Playwright · POMPOM 기초: 폼 검증 메시지 캡슐화회원가입 폼의 입력, 제출, 필드별 에러 검증을 SignupPage 메서드로 분리해 검증 메시지 테스트를 작성하세요.→
  11. 11입문Playwright페이지 전환 내비게이션내비게이션으로 페이지를 전환하고 뒤로가기로 직전 페이지로 돌아가는 동작을 검증하는 테스트를 작성하세요.→
  12. 12입문Playwright위시리스트 토글상품별 찜 토글과 개수 배지 갱신을 검증하는 테스트를 작성하세요.→
  13. 13입문Playwright할 일 관리(Todo) CRUD할 일 관리 위젯의 기본 동작을 검증하는 자동화 테스트를 작성하라. 추가·완료·수정·삭제·필터·남은 개수가 명세대로 동작하는지 직접 케이스를 설계해야 한다. [명세] 입력 후 추가하면 목록에 생기고 입력창이 비워진다(공백만이면 추가 안 됨). 체크박스로 완료/미완료를 전환한다(완료는 취소선). 수정→저장으로 텍스트를 바꾸고, 삭제로 항목을 제거한다. 필터는 전체/미완료/완료이며, 남은 일 개수는 미완료 항목 수다.→
  14. 14중급Playwright프로필 등록 폼 다중 검증이름 길이, 전화번호 형식, 나이 범위, 약관 동의 등 서로 다른 유형의 유효성 규칙을 검증하는 테스트를 작성하세요.→
  15. 15중급Playwright데이터 테이블 검색·정렬·페이지네이션검색 필터, 컬럼 정렬, 페이지 이동이 있는 테이블을 검증하는 테스트를 작성하세요.→
  16. 16중급Playwright드래그앤드롭 배치HTML5 드래그앤드롭으로 위젯을 드롭존에 배치하는 동작을 검증하는 테스트를 작성하세요.→
  17. 17중급Playwright세션 만료와 재로그인로그인·세션 만료·재로그인으로 이어지는 상태 전이를 검증하는 테스트를 작성하세요.→
  18. 18중급Playwright무한 스크롤 더 불러오기더 불러오기로 항목이 비동기 추가되고 끝에 도달하면 멈추는 목록을 검증하는 테스트를 작성하세요.→
  19. 19중급Playwright다단계 위저드 폼단계별 검증·이동·이전 복귀가 있는 3단계 위저드 폼을 검증하는 테스트를 작성하세요.→
  20. 20중급Playwright실시간 인라인 검증입력 즉시 이메일 형식·비밀번호 강도를 표시하고 둘 다 유효할 때만 제출이 활성화되는 폼을 검증하세요.→
  21. 21중급Playwright날짜 선택기입력을 누르면 달력이 열리고 날짜를 고르면 입력에 반영되는 동작을 검증하는 테스트를 작성하세요.→
  22. 22중급Playwright · POMPOM 기초: beforeEach와 페이지 상태 초기화내비게이션 화면을 NavigationPage로 감싸고, beforeEach에서 매 테스트의 시작 상태를 일관되게 준비하세요.→
  23. 23중급Playwright · POMPOM 기초: 플로우를 여러 Page Object로 나누기장바구니 플로우를 CatalogPage와 CartPage로 나누고, 테스트 본문에서는 사용자의 구매 여정만 보이게 작성하세요.→
  24. 24중급Playwright · POM · FixturePOM 기초: fixture로 Page Object 주입하기스펙에서 Page Object를 직접 new 하지 않고 test.extend fixture로 주입해 테스트 본문을 더 얇게 만드세요.→
  25. 25중급Playwright · POMPOM 기초: 테이블 검색·정렬 Page Object데이터 테이블의 검색, 정렬, 페이지 이동, 결과 검증을 DataTablePage로 묶어 목록 테스트를 읽기 쉽게 만드세요.→
  26. 26중급Playwright · POMPOM 기초: 모달 다이얼로그 Page Object모달 열기, 취소, 확인, 결과 메시지 검증을 ModalPage로 캡슐화해 분기 흐름을 안정적으로 테스트하세요.→
  27. 27중급Playwright · POM · E2EPOM 실전: 장바구니 E2E 여정 구성하기상품 탐색부터 장바구니, 배송 정보, 결제 선택, 주문 완료까지 하나의 E2E 여정을 여러 Page Object로 조합하세요.→
  28. 28중급Playwright · POM · Auth FixturePOM 실전: 인증 세션을 재사용하는 E2E매 테스트마다 로그인하지 않고 인증 상태를 fixture로 준비한 뒤, 보호 화면 E2E를 빠르고 안정적으로 검증하세요.→
  29. 29중급Playwright토큰 저장·세션 유지로그인 성공 시 토큰이 localStorage 에 저장되고 로그아웃 시 제거되는지 검증하는 테스트를 작성하세요.→
  30. 30중급Playwright폼 임시저장·복원입력을 localStorage 에 자동 저장하고 재방문 시 복원하며 초기화/제출로 비우는 동작을 검증하는 테스트를 작성하세요.→
  31. 31중급Playwright상품 필터·정렬카테고리 필터·가격 정렬·검색으로 상품 목록을 좁히는 동작을 검증하는 테스트를 작성하세요.→
  32. 32중급Playwright상품 옵션 선택사이즈·색상 옵션을 모두 선택해야 담기에 성공하는 필수 옵션 검증 테스트를 작성하세요.→
  33. 33중급Playwright게시판 검색·페이지네이션게시판의 검색·필터·페이지네이션·글 작성을 검증하는 자동화 테스트를 작성하라. 어떤 경계·조합 케이스가 필요한지는 직접 판단해야 한다. [명세] 목록은 페이지당 5개씩 보이고 이전/다음과 "현재/전체" 페이지가 표시된다. 제목 검색은 부분 일치로 필터하며 결과 수와 페이지가 갱신된다. 카테고리(전체/공지/질문/자유) 필터가 있다. 글을 작성하면 목록 맨 위에 추가된다.→
  34. 34중급Playwright실시간 채팅 메시지 전송채팅 화면의 메시지 전송과 자동 응답을 검증하는 자동화 테스트를 작성하라. 비동기 응답을 어떻게 기다릴지, 어떤 케이스가 필요한지 직접 설계해야 한다. [명세] 메시지를 입력해 전송하면 내 메시지가 목록 끝에 추가되고 입력창이 비워진다. 공백만 입력하면 전송되지 않는다. 전송 후 잠시 뒤(약 0.7초) 상대(봇) 자동 응답이 목록에 추가된다. Enter 로도 전송된다.→
  35. 35중급Playwright쇼핑몰 장바구니 금액 계산qashop 장바구니의 금액 계산(수량·쿠폰·배송비)을 검증하는 테스트를 작성하라. 경계값을 직접 도출해야 한다. [규칙] 배송비는 3,000원이고 상품합계 50,000원 이상이면 무료배송이다. 쿠폰 SAVE10은 10%, WELCOME20은 20% 할인이며 그 외 코드는 거부된다. 줄별 수량 증감·삭제가 합계에 즉시 반영된다.→
  36. 36심화Playwright장바구니 체크아웃수량 변경에 따라 소계·배송비·쿠폰 할인이 연쇄로 합계에 반영되는 장바구니를 검증하세요. 재고 한도와 쿠폰 최소 금액 규칙이 얽혀 있습니다.→
  37. 37심화Playwright계좌 송금계좌 형식·금액 한도·잔액(수수료 포함) 검증을 거쳐 확인 단계 후 송금하는 흐름을 검증하세요.→
  38. 38심화Playwright · POM · RegressionPOM 실전: 스모크 회귀 스위트 구성하기핵심 사용자 여정을 Page Object로 재사용하면서 빠르게 도는 스모크 회귀 스위트를 구성하세요.→
  39. 39심화Playwright · POM · RegressionPOM 실전: 위험 기반 회귀 시나리오 나누기모든 것을 한 테스트에 넣지 않고 결제, 데이터 변경, 접근 제어처럼 위험도가 높은 영역을 회귀 시나리오로 나누세요.→
  40. 40심화Playwright라우트 가드(접근 제어)미인증 사용자의 보호 페이지 접근을 차단하고 로그인 후 진입시키는 접근 제어 흐름을 검증하는 테스트를 작성하세요.→
  41. 41심화Playwright주문 결제 E2E상품 선택부터 장바구니·배송 정보·결제수단·주문 완료까지 이어지는 전체 결제 여정을 검증하는 테스트를 작성하세요.→
  42. 42심화Playwright콘서트 좌석 예매소규모 콘서트 예매 페이지가 오픈됐는데 "예매가 이상하다"는 제보가 쏟아진다. 아래 명세를 분석해, 페이지가 명세대로 동작하는지 검증하는 자동화 테스트를 작성하라. 어떤 케이스(경계·엣지)가 필요한지는 직접 판단해야 한다. [명세] 좌석은 A1~A5·B1~B5(10석)이고 A3·B2 는 이미 매진이다. 매진 좌석은 고를 수 없고, 한 사람은 최대 4석까지 선택할 수 있다(초과 시 경고). 좌석당 50,000원이며 선택 수와 총액이 표시된다. 1석 이상 골라야 예매할 수 있고, 예매하면 고른 좌석이 매진으로 바뀌며 예매번호가 나온다.→
  43. 43심화Playwright포인트 정산쇼핑몰 결제 화면에 "포인트 적립·결제액이 안 맞다"는 제보가 들어왔다. 아래 정산 규칙을 분석해, 화면이 규칙대로 계산하는지 검증하는 자동화 테스트를 작성하라. 경계값·예외는 직접 도출해야 한다. [규칙] 회원 등급 적립률은 일반 1%·실버 2%·골드 5%. 포인트는 최소 1,000p 부터 사용 가능하고(미만이면 미적용), 주문 금액의 50%까지만 쓸 수 있다(초과 시 미적용). 잘못된 포인트 입력은 에러를 띄우고 계산에 반영하지 않는다. 최종 결제액 = 주문금액 − 사용포인트, 적립 예정 = (주문금액 − 사용포인트) × 등급 적립률(원 단위 내림).→
  44. 44심화Playwright주문 취소 처리쇼핑몰 운영팀에 "주문 취소가 상태마다 다르게 동작해 헷갈린다"는 제보가 들어왔다. 아래 정책을 분석해, 주문 상태에 따라 취소가 올바르게 처리되는지 검증하는 자동화 테스트를 작성하라. 어떤 상태·전이 케이스가 필요한지는 직접 판단해야 한다. [정책] 주문 상태는 결제완료·배송준비중·배송중·배송완료가 있다. 결제완료·배송준비중에서만 취소할 수 있고, 취소하면 전액(50,000원) 환불되며 상태가 취소됨으로 바뀐다. 배송중·배송완료에서는 취소할 수 없고 안내가 노출된다. 이미 취소된 주문은 다시 취소할 수 없다. (현재 상태는 상단 버튼으로 바꿔 테스트할 수 있다.)→
  45. 45심화Playwright쇼핑몰 주문 전체 흐름(E2E)실제 쇼핑몰(qashop)에서 상품을 찾아 주문 완료까지 가는 전체 흐름을 검증하는 E2E 테스트를 작성하라. 어떤 단계·경계 케이스가 필요한지는 직접 설계해야 한다. [흐름] 상품목록(검색·카테고리·정렬) → 상세(옵션·수량) → 장바구니(수량·삭제·쿠폰·배송비) → 결제(폼 검증) → 주문완료(주문번호). [규칙] 품절 상품은 담기 불가, 옵션 있는 상품은 사이즈 선택 후 담기, 상품합계 50,000원 이상이면 무료배송, 쿠폰 SAVE10/WELCOME20만 유효, 전화번호는 010-0000-0000 형식.→
  46. 46심화Playwright뱅킹 이체·거래내역뱅킹 대시보드(qabank)에서 계좌 이체와 거래내역을 검증하는 테스트를 작성하라. 경계·예외 케이스는 직접 도출해야 한다. [규칙] 받는 계좌·예금주·금액은 필수이고 금액은 0보다 커야 한다. 출금액이 잔액보다 크면 "잔액 부족"으로 거부되고, 1회 이체 한도는 5,000,000원이다. 이체 성공 시 출금 계좌 잔액이 줄고 거래내역 맨 위에 출금 내역이 추가되며 출금 후 잔액이 표시된다. 거래내역은 전체/입금/출금 필터와 검색을 지원한다.→
02

메뉴얼 · 테스트 설계

요구사항을 분석해 케이스를 설계하고 결함을 리포트하는 기본기를 다집니다.

총 8개

  1. 1입문Testea테스트 케이스 작성: 할인 쿠폰할인 쿠폰 적용 기능의 테스트 케이스를 작성하세요. 정상·예외·경계 시나리오를 표로 정리하는 연습입니다.→
  2. 2입문Testea테스트 케이스 작성: 예약 시간대 선택시간대 예약 기능의 테스트 케이스를 작성하세요. 영업시간·마감·중복 예약 같은 정상·예외 흐름을 표로 정리하는 연습입니다.→
  3. 3중급Testea버그 찾기: 주문 폼주문 폼에 의도적으로 심은 결함을 탐색적 테스트로 찾고, 결함 리포트를 작성해 제출하세요. 제출하면 정답과 피드백을 보여줍니다.→
  4. 4중급Testea테스트 케이스 설계: 비밀번호 재설정비밀번호 재설정 기능의 테스트 케이스를 설계하세요. 정상·예외·경계 시나리오를 빠짐없이 도출하는 메뉴얼 테스트 연습입니다.→
  5. 5중급Testea탐색적 테스트 차터 작성주어진 기능의 탐색적 테스트 세션 차터를 작성하세요. 무엇을·왜·어떻게 탐색할지 한 세션 분량으로 설계하는 연습입니다.→
  6. 6중급Testea테스트 케이스 설계: 로그인 잠금 정책로그인 실패 잠금 정책의 테스트 케이스를 설계하세요. 실패 누적·잠금·해제·카운터 리셋을 경계값과 함께 빠짐없이 도출하는 연습입니다.→
  7. 7중급Testea테스트 케이스 설계: 배송비 정책주문 배송비 정책의 테스트 케이스를 설계하세요. 무료배송 임계값·도서산간 가산·조합을 경계값과 함께 도출하는 연습입니다.→
  8. 8중급Testea테스트 케이스 설계: 회원 등급 산정구매액 기준 회원 등급 산정의 테스트 케이스를 설계하세요. 등급 구간의 경계값을 빠짐없이 도출하는 동등 분할·경계값 연습입니다.→
03

API · Postman

요청을 구성하고 상태 코드·응답을 단언하며 API 테스트를 연습합니다.

총 18개

  1. 1입문Postman파일 메타데이터 API: 형식·용량 검증JSON 기반 파일 메타데이터 업로드 API로 MIME type, 파일 크기, 단건 메타데이터 조회를 검증하세요.→
  2. 2입문Postman알림 API: 읽음 처리와 unread count알림 목록과 읽음 처리 API에서 unreadOnly 필터, unreadCount, 없는 알림 처리와 멱등적 PATCH 응답을 검증하세요.→
  3. 3입문Postman운영 API: 헬스체크와 장애 응답헬스체크 API에서 정상 상태와 degraded 상태의 HTTP status, JSON checks 필드를 검증하세요.→
  4. 4입문Postman사용자 API: 페이지네이션·단건 조회사용자 목록 API의 페이지네이션 메타데이터와 단건 조회(존재·404·잘못된 ID)를 검증하세요.→
  5. 5입문Postman상태 코드 API 입문: 200·404 검증상태 코드 시뮬레이터로 API 응답의 status code와 JSON 본문을 함께 검증하는 입문 챌린지입니다. 성공 응답과 실패 응답을 나란히 확인하며 기본 단언 흐름을 익히세요.→
  6. 6중급Postman상품 REST API 자동화상품 REST API의 목록·조회·생성·삭제와 인증을 검증하는 API 테스트를 작성하세요. 브라우저가 아니라 HTTP 요청으로 검증합니다.→
  7. 7중급Postman인증·세션 API: 토큰 만료와 갱신로그인 후 보호된 /me API를 호출하고, 누락·만료·잘못된 토큰과 refresh token 갱신 경로를 검증하세요.→
  8. 8중급Postman예약 API: 슬롯 조회와 중복 방지날짜별 예약 가능 슬롯을 조회하고, 만석 슬롯·잘못된 날짜·필수값 누락 같은 예약 API 경계 조건을 검증하세요.→
  9. 9중급Postman권한 API: 관리자 전용 리포트관리자 전용 API에서 미인증 401, 일반 사용자 403, 관리자 200 경계를 구분해 검증하세요.→
  10. 10중급Postman검색 API: 키워드·태그·정렬 조합문서 검색 API에서 q, tag, sort, order 파라미터 조합과 total 메타데이터를 검증하세요.→
  11. 11중급Postman지갑 API: 잔액과 송금 검증지갑 잔액·거래내역 조회와 송금 API에서 금액 검증, 잔액 부족, 거래내역 필터를 검증하세요.→
  12. 12중급Postman콘텐츠 API: 댓글·신고·금칙어게시글 생성, 댓글 작성, 신고 API에서 금칙어, 삭제된 글 댓글 금지, 중복 신고 같은 콘텐츠 정책을 검증하세요.→
  13. 13중급Postman고객지원 티켓 API: 필터·상태 변경고객지원 티켓 API에서 상태·우선순위·담당자 필터, 티켓 생성 입력 검증, 보호된 상태 변경 API를 검증하세요. 실무 API 테스트에서 자주 만나는 목록 메타데이터와 권한 경계, 부분 수정(PATCH)을 함께 연습합니다.→
  14. 14중급Postman상품 관리 API: 인증·CRUD 검증로그인으로 토큰을 발급받고, 보호된 상품 생성·수정·삭제 API의 인증, 입력 검증, 상태 코드를 검증하세요. 성공 경로뿐 아니라 401·400·404·204 같은 API 경계 응답까지 함께 확인해야 합니다.→
  15. 15중급Postman상품 목록 API: 검색·정렬·필터상품 목록 API의 검색(q)·정렬(sort/order)·재고 필터(inStock)·페이지네이션 경계를 검증하는 API 테스트를 작성하세요. 어떤 조합·경계를 확인할지는 직접 설계해야 합니다.→
  16. 16중급Postman주문 생성 API: 입력 검증·합계주문 생성 API의 입력 검증(필수·수량·가격)과 합계 계산, 단건 조회를 검증하세요. 견고한 자동화는 성공 경로뿐 아니라 검증 실패(400)도 확인합니다.→
  17. 17중급Postman에러 처리·상태 코드 검증상태 코드 시뮬레이터로 다양한 4xx/5xx 응답과 에러 본문을 검증하세요. 실패 경로까지 단언하는 것이 견고한 API 자동화의 핵심입니다.→
  18. 18심화Postman웹훅 API: 서명 검증과 중복 이벤트결제 웹훅 수신 API에서 서명 헤더, payload 검증, 중복 eventId 처리를 검증하세요.→
04

성능 · Web Vitals

Core Web Vitals, 네트워크, 리소스 병목을 측정하고 재현 가능한 성능 리포트로 정리합니다.

총 12개

  1. 1입문Lighthouse · DevToolsCore Web Vitals 성능 점검랜딩 페이지를 기준으로 Core Web Vitals와 주요 리소스 병목을 점검하는 성능 테스트 계획을 작성하세요.→
  2. 2입문DevTools · k6API 응답 시간 SLO 점검상품 목록과 주문 생성 API를 기준으로 응답 시간 목표와 측정 방법을 정의하는 성능 테스트 케이스를 작성하세요.→
  3. 3입문Network · Lighthouse웹폰트 로딩 성능 점검웹폰트가 렌더링 지연, 레이아웃 변화, 텍스트 표시 경험에 미치는 영향을 검증하는 성능 테스트 케이스를 작성하세요.→
  4. 4중급Lighthouse · Network이미지 로딩 성능 점검상품 카드와 상세 화면의 이미지가 LCP와 네트워크 비용에 미치는 영향을 검증하는 성능 테스트 계획을 작성하세요.→
  5. 5중급Bundle Analyzer · Lighthouse CI번들 크기 회귀 예산 점검새 기능 추가 후 JavaScript 번들 크기와 초기 로딩 지표가 회귀하지 않았는지 확인하는 성능 게이트를 설계하세요.→
  6. 6중급Performance · Network · Lighthouse서드파티 스크립트 성능 영향 점검분석, 채팅, 광고 같은 서드파티 스크립트가 초기 로딩과 상호작용 지연에 미치는 영향을 검증하는 성능 테스트 계획을 작성하세요.→
  7. 7중급Network · Headers · Lighthouse캐시와 재검증 성능 점검정적 자산과 API 응답의 캐시 정책이 반복 방문 성능과 데이터 신선도에 미치는 영향을 검증하는 테스트 케이스를 작성하세요.→
  8. 8중급Performance · React Profiler검색 결과 렌더링 성능 점검검색 결과가 많아질 때 렌더링 비용과 스크롤 성능이 악화되지 않는지 검증하는 성능 테스트 케이스를 작성하세요.→
  9. 9중급Network · WebPageTest서버 렌더링 TTFB 점검SSR/동적 페이지에서 서버 응답 지연이 초기 표시 성능에 미치는 영향을 검증하는 성능 테스트 케이스를 작성하세요.→
  10. 10심화k6 · Grafana체크아웃 부하 테스트 설계동시 주문 상황에서 체크아웃 API가 지연·실패·중복 주문 없이 동작하는지 검증하는 부하 테스트 계획을 작성하세요.→
  11. 11심화Performance · CPU Throttling모바일 상호작용 지연 점검저사양 모바일 환경에서 검색, 필터, 입력 같은 상호작용이 지연 없이 반응하는지 검증하는 성능 테스트 계획을 작성하세요.→
  12. 12심화Memory · Performance Monitor장시간 사용 메모리 누수 점검대시보드나 리스트 화면을 장시간 사용할 때 메모리 사용량이 계속 증가하지 않는지 검증하는 성능 테스트 계획을 작성하세요.→
05

접근성 · Keyboard & Screen Reader

키보드 탐색, 포커스, 라벨, 에러 전달, 색 대비를 점검하는 접근성 테스트를 연습합니다.

총 12개

  1. 1입문NVDA · VoiceOver · Accessibility Tree스크린리더 폼 접근성 점검회원가입 폼에서 스크린리더 사용자가 입력 목적과 오류를 이해할 수 있는지 검증하는 접근성 테스트 케이스를 작성하세요.→
  2. 2입문Keyboard · Screen Reader랜드마크와 본문 건너뛰기 점검반복되는 네비게이션을 건너뛰고 페이지 구조를 빠르게 파악할 수 있는지 검증하는 접근성 테스트 케이스를 작성하세요.→
  3. 3입문Screen Reader · Keyboard빈 상태와 로딩 상태 접근성 점검목록의 빈 상태, 로딩, 오류 상태가 시각 사용자와 보조기술 사용자 모두에게 명확히 전달되는지 검증하세요.→
  4. 4입문Keyboard · Screen Reader · axe키보드 접근성 점검로그인/폼 화면을 기준으로 키보드 탐색, 포커스 표시, 라벨·에러 전달을 점검하는 접근성 테스트 케이스를 작성하세요.→
  5. 5중급Keyboard · Screen Reader모달 포커스 접근성 점검삭제 확인 모달이 키보드와 보조기술 사용자에게 안전하게 동작하는지 검증하는 접근성 테스트 케이스를 작성하세요.→
  6. 6중급axe · Contrast Checker색 대비와 상태 표현 점검상태 배지, 버튼, 에러 메시지가 색에만 의존하지 않고 충분한 대비로 전달되는지 검증하는 접근성 테스트 계획을 작성하세요.→
  7. 7중급Screen Reader · Keyboard동적 알림 접근성 점검토스트, 저장 완료, 오류 배너처럼 동적으로 나타나는 메시지가 보조기술 사용자에게 적절히 전달되는지 검증하세요.→
  8. 8중급Mobile Viewport · axe모바일 터치 타깃 접근성 점검모바일 화면에서 버튼, 링크, 체크박스 같은 조작 대상이 충분한 크기와 간격을 갖는지 검증하는 접근성 테스트 계획을 작성하세요.→
  9. 9중급Keyboard · Screen Reader폼 오류 요약 접근성 점검여러 필드 오류가 동시에 발생했을 때 사용자가 오류 위치와 수정 방법을 빠르게 이해할 수 있는지 검증하세요.→
  10. 10중급Screen Reader · HTML Validator언어와 다국어 접근성 점검한국어/영문이 섞인 화면에서 문서 언어와 부분 언어 표시가 올바르게 전달되는지 검증하는 접근성 테스트 케이스를 작성하세요.→
  11. 11심화Screen Reader · Keyboard · axe데이터 테이블 접근성 점검검색·정렬·페이지네이션이 있는 데이터 테이블을 스크린리더와 키보드로 탐색 가능한지 검증하는 접근성 테스트 케이스를 작성하세요.→
  12. 12심화prefers-reduced-motion · DevTools모션 민감 사용자 설정 점검애니메이션과 전환 효과가 모션 민감 사용자에게 부담을 주지 않도록 reduced motion 설정을 검증하는 접근성 테스트 케이스를 작성하세요.→

처음이라면

사용법·채점 방식이 궁금하면 가이드를 먼저 읽어 보세요.

가이드 보기전체 챌린지