"프론트엔드" 태그 글 모음

aria-live가 안 읽힐 때 — ARIA 라이브 리전 제대로 쓰기

"저장되었습니다"라는 초록색 토스트가 화면 오른쪽 아래에 뜹니다. 2초 뒤 사라지고요. 마우스를 쓰는 사람에게는 완결된 피드백입니다. 그런데 화면을 보지 않는 사람에게는요? 그 토스트는 일어나지 않은 일입니다. 저장이 됐는지 안 됐는지 알 방법이 없어요. ...

테스트 문화·면접·다음 단계 — 프론트엔드 테스트 시리즈를 마치며

「프론트엔드 테스트 제대로 하기」 시리즈의 22편입니다. 전체 목차 보기 · 용어집 작은 앱 하나에 테스트를 한 겹씩 쌓으면 무엇이 되는지 — 이 글은 그 여정의 회고이자, 프론트엔드 테스트 전체의 지도입니다. ...

AI가 만든 코드의 함정 — 접근성·엣지케이스 누락

「프론트엔드 테스트 제대로 하기」 시리즈의 21편입니다. 전체 목차 보기 · 용어집 AI가 짠 코드는 빠르고, 돌아가고, 화면도 예쁩니다. 문제는 그럴듯하게 틀린다는 것이에요. ...

Playwright × AI — codegen·MCP·자가치유 셀렉터

↻ 2026-10-02 업데이트 AI 에이전트가 받는 스냅샷 설명을 바로잡았습니다. 처음 실은 스냅샷은 테스트에서 쓰는 Playwright 기본 aria 스냅샷이었는데, Playwright MCP가 모델에게 건네는 건 mode: 'ai'로 찍은 스냅샷이라 모양이 다릅니다. 다시 찍어 보니 div 버튼도 이름 없는 generic으로 남아 번호(ref)로 누를 수 있었어요. 실습 저장소가 쓰던 1.61에서도 같았으니, 버전이 바뀐 게 아니라 처음부터 잘못 짚은 것입니다. 그래서 "스크린 리더 사용자가 못 쓰는 화면은 AI 에이전트도 못 쓴다"는 단정을 거두고, 에이전트 도구마다 받는 트리가 다르다는 내용으로 고쳤습니다. role과 이름을 챙기라는 결론은 그대로예요. 「프론트엔드 테스트 제대로 하기」 시리즈의 20편입니다. 전체 목차 보기 · 용어집 ...

AI로 테스트 생성·보강 — 검증의 몫은 사람

「프론트엔드 테스트 제대로 하기」 시리즈의 19편입니다. 전체 목차 보기 · 용어집 AI(ChatGPT·Claude 같은 대형 언어 모델, LLM)에게 테스트를 짜달라고 하면 될까요? 됩니다. 다만 그대로 믿으면 안 돼요. AI는 그럴듯한 테스트를 몇 초 만에 뽑아주지만, 정작 중요한 경계·실패·접근성 케이스를 조용히 빼먹는 경향이 있거든요. 이 글은 AI를 테스트 작성의 조수로 제대로 부리는 법입니다 — 좋은 초안을 받는 요령부터, 받은 테스트가 진짜 일하는지 검증하는 체크리스트까지. ...

popover·앵커 포지셔닝·dialog, 접근성 관점에서 지금 써도 될까

새 기능을 도입할 때 우리가 보는 건 대개 지원표입니다. caniuse에 들어가서 초록색 칸이 몇 퍼센트인지 확인하고, 90%를 넘으면 "이제 써도 되겠네" 하죠. ...

커버리지 읽는 법과 품질 지표

「프론트엔드 테스트 제대로 하기」 시리즈의 18편입니다. 전체 목차 보기 · 용어집 커버리지 리포트를 열면 숫자가 네 종류나 나옵니다 — Stmts, Branch, Funcs, Lines. 뭘 봐야 할까요? 이 글은 그 리포트를 읽는 법입니다: 어떤 숫자가 정직한지(스포일러: 브랜치), 빨간 줄에서 무엇을 채울지, 그리고 숫자가 못 보여주는 팀 건강은 어디서 볼지까지. ...

GitHub Actions로 테스트·접근성 게이트 만들기

「프론트엔드 테스트 제대로 하기」 시리즈의 17편입니다. 전체 목차 보기 · 용어집 테스트는 '로컬에서 가끔 돌리는 것'일 때는 힘이 없습니다. PR마다 자동으로 도는 관문이 될 때 비로소 팀을 지키죠. 이 글은 GitHub Actions로 그 관문 — 단위 테스트·E2E·접근성 검사가 통과해야만 코드가 합쳐지는 머지 게이트 — 를 워크플로우 파일 하나로 세우는 방법입니다. CI가 처음이어도 됩니다. 용어부터 3분 정리하고 시작해요. ...

시각적 회귀 테스트 — 스크린샷 비교

「프론트엔드 테스트 제대로 하기」 시리즈의 16편입니다. 전체 목차 보기 · 용어집 모든 테스트가 초록불인데 화면이 깨진 적, 있으시죠? 로직은 멀쩡한데 CSS 하나가 레이아웃을 무너뜨린 경우요. 시각적 회귀 테스트는 기준 스크린샷(baseline)을 저장해두고 픽셀을 비교해서, 이런 "눈으로 봐야 아는 회귀"를 자동으로 잡는 기법입니다. Playwright에 내장돼 있어 한 줄이면 시작해요 — 대신 흔들리지 않게 찍는 요령과 환경 차이라는 복병까지, 이 글에서 다 짚습니다. ...

픽스처·인증 재사용·병렬 실행

「프론트엔드 테스트 제대로 하기」 시리즈의 13편입니다. 전체 목차 보기 · 용어집 E2E 테스트가 열 개를 넘어가면 두 가지가 아파옵니다. 테스트마다 복붙되는 준비 코드, 그리고 순서대로 도느라 느려지는 스위트. Playwright의 픽스처(반복 준비를 테스트에 주입하는 장치)와 병렬 실행이 이 둘을 한 번에 해결합니다 — 이 글에서 커스텀 픽스처, 인증 재사용(storageState), 병렬 안전 수칙까지 정리해요. ...