Codeslog — 웹접근성과 프론트엔드 개발 기록

AI 시대의 마크다운 — CLAUDE.md·AGENTS.md·DESIGN.md

오랜만에 남의 저장소를 열었다가 낯선 파일들을 보신 적 있으신가요. README.md 옆에 CLAUDE.md가 있고, AGENTS.md도 보이고, 어떤 곳엔 DESIGN.md까지 있습니다. 죄다 확장자가 .md인데 정체는 잘 모르겠고요. ...

마크다운 문법 제대로 쓰기 — 자주 밟는 함정과 접근성까지

“표로 정리해줘"라고 부탁했더니 AI가 세로줄(|)과 붙임표(-)가 잔뜩 섞인 텍스트를 내놓은 적 있으신가요? 채팅 화면에서는 말끔한 표였는데, 복사해서 메신저에 붙였더니 기호 범벅이 되는 경험이요. ...

Scroll-Driven Animation: 스크롤이 타임라인이 되는 순간

들어가며: 스크롤을 “시간"으로 다루는 감각 스크롤 기반 애니메이션을 만들다 보면 이런 순간이 있습니다. “스크롤 위치를 그냥 이벤트로 처리하지 말고” “이걸 타임라인처럼 다루면 훨씬 깔끔할 텐데?” Scroll-Driven Animation은 바로 그 감각을 공식화한 접근입니다. 스크롤을 단순한 입력이 아니라 애니메이션의 시간 축(timeline)으로 바라보는 방식이죠. ...

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

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

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

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

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

「프론트엔드 테스트 제대로 하기」 시리즈의 20편입니다. 전체 목차 보기 · 용어집 AI가 테스트 코드를 ‘짜주는’ 것까지는 이제 익숙하죠. 그런데 요즘은 한 걸음 더 나갑니다 — AI가 브라우저를 직접 열고, 클릭하고, 잘 되는지 확인하기 시작했어요. ...

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

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

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

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

WCAG 3, 지금 어디까지 왔나 — 2026년 3월 초안 총정리

들어가며 “WCAG 3"를 검색하면 여전히 2021년 초안을 설명하는 글이 상단에 뜹니다. 점수를 매겨 등급을 정하던 시절 이야기, 지금은 문서에서 완전히 사라진 개념들이죠. 웹 표준 초안은 꽤 자주 바뀌는데, 그 속도를 따라가는 한국어 자료는 생각보다 적습니다. ...

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

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