마크다운 문법 제대로 쓰기 — 자주 밟는 함정과 접근성까지
"표로 정리해줘"라고 부탁했더니 AI가 세로줄(|)과 붙임표(-)가 잔뜩 섞인 텍스트를 내놓은 적 있으신가요? 채팅 화면에서는 말끔한 표였는데, 복사해서 메신저에 붙였더니 기호 범벅이 되는 경험이요. ...
Scroll-Driven Animation: 스크롤이 타임라인이 되는 순간
들어가며: 스크롤을 "시간"으로 다루는 감각 스크롤 기반 애니메이션을 만들다 보면 이런 순간이 있습니다. "스크롤 위치를 그냥 이벤트로 처리하지 말고" "이걸 타임라인처럼 다루면 훨씬 깔끔할 텐데?" Scroll-Driven Animation은 바로 그 감각을 공식화한 접근입니다. 스크롤을 단순한 입력이 아니라 애니메이션의 시간 축(timeline)으로 바라보는 방식이죠. ...
테스트 문화·면접·다음 단계 — 프론트엔드 테스트 시리즈를 마치며
「프론트엔드 테스트 제대로 하기」 시리즈의 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%를 넘으면 "이제 써도 되겠네" 하죠. ...
WCAG 3, 지금 어디까지 왔나 — 2026년 3월 초안 총정리
↻ 2026-09-10 업데이트 2026년 9월 10일 새 Working Draft가 공개되면서 이 글의 「Bronze/Silver/Gold가 돌아왔다」 절의 전제가 바뀌었습니다. 9월 초안은 적합성을 Core 요구사항 전부 충족 하나로 두고, Bronze/Silver/Gold를 적합성 등급이 아닌 보고 등급(reporting tier)으로 옮겼습니다. 요구사항도 182개에서 216개로 늘었습니다. 이 글은 3월 초안 기준 기록으로 그대로 두고, 바뀐 내용은 WCAG 3 2026년 9월 초안, 무엇이 바뀌었나 — 등급이 적합성에서 보고로에 따로 정리했습니다. 들어가며 "WCAG 3"를 검색하면 여전히 2021년 초안을 설명하는 글이 상단에 뜹니다. 점수를 매겨 등급을 정하던 시절 이야기, 지금은 문서에서 완전히 사라진 개념들이죠. 웹 표준 초안은 꽤 자주 바뀌는데, 그 속도를 따라가는 한국어 자료는 생각보다 적습니다. ...
커버리지 읽는 법과 품질 지표
「프론트엔드 테스트 제대로 하기」 시리즈의 18편입니다. 전체 목차 보기 · 용어집 커버리지 리포트를 열면 숫자가 네 종류나 나옵니다 — Stmts, Branch, Funcs, Lines. 뭘 봐야 할까요? 이 글은 그 리포트를 읽는 법입니다: 어떤 숫자가 정직한지(스포일러: 브랜치), 빨간 줄에서 무엇을 채울지, 그리고 숫자가 못 보여주는 팀 건강은 어디서 볼지까지. ...
GitHub Actions로 테스트·접근성 게이트 만들기
「프론트엔드 테스트 제대로 하기」 시리즈의 17편입니다. 전체 목차 보기 · 용어집 테스트는 '로컬에서 가끔 돌리는 것'일 때는 힘이 없습니다. PR마다 자동으로 도는 관문이 될 때 비로소 팀을 지키죠. 이 글은 GitHub Actions로 그 관문 — 단위 테스트·E2E·접근성 검사가 통과해야만 코드가 합쳐지는 머지 게이트 — 를 워크플로우 파일 하나로 세우는 방법입니다. CI가 처음이어도 됩니다. 용어부터 3분 정리하고 시작해요. ...