https://www.codeslog.com/posts/ Recent content in Posts on Codeslog https://www.codeslog.com/images/default-cover.png?v=20260114T1436 https://www.codeslog.com/images/default-cover.png?v=20260114T1436 Hugo -- 0.150.0 ko Sat, 08 Aug 2026 01:12:00 +0900 https://www.codeslog.com/posts/frontend-testing-wrap/ Sat, 08 Aug 2026 01:12:00 +0900 https://www.codeslog.com/posts/frontend-testing-wrap/ 프론트엔드 테스트 시리즈를 마치며. 작은 앱 하나에 쌓인 다섯 층을 결산하고, 테스트가 팀 문화와 면접에서 갖는 의미, 테스트 없는 레거시에서 시작하는 법, API 계약·뮤테이션 테스트로 뻗어갈 다음 단계를 정리합니다. https://www.codeslog.com/posts/frontend-testing-ai-pitfalls/ Fri, 07 Aug 2026 14:59:00 +0900 https://www.codeslog.com/posts/frontend-testing-ai-pitfalls/ AI가 짜준 코드는 그럴듯하게 틀립니다. 라벨 없는 입력·div 버튼처럼 반복되는 누락 일곱 가지를 짚고, role 쿼리와 axe로 잡아내는 법, 그리고 적어두지 않은 약속은 테스트도 못 잡는다는 실측까지 담았습니다. https://www.codeslog.com/posts/frontend-testing-ai-playwright/ Thu, 06 Aug 2026 01:11:00 +0900 https://www.codeslog.com/posts/frontend-testing-ai-playwright/ AI가 브라우저를 직접 조작하는 시대. Playwright codegen과 MCP 에이전트를 실무 기준으로 짚고, MCP가 스크린샷이 아니라 접근성 트리를 읽는다는 점, 자가치유 셀렉터가 왜 Playwright 기능이 아닌지까지 정리합니다. https://www.codeslog.com/posts/frontend-testing-ai-generate/ Thu, 06 Aug 2026 00:46:00 +0900 https://www.codeslog.com/posts/frontend-testing-ai-generate/ 「프론트엔드 테스트 제대로 하기」 시리즈 19편. ChatGPT·Claude 같은 LLM에게 테스트를 맡기면 경계·실패·접근성 케이스를 조용히 빼먹곤 합니다. 좋은 초안을 받는 요령부터 뮤테이션 테스트로 AI가 짠 테스트를 검증하는 체크리스트까지 다룹니다. https://www.codeslog.com/posts/browser-features-accessibility-2026/ Wed, 05 Aug 2026 15:07:00 +0900 https://www.codeslog.com/posts/browser-features-accessibility-2026/ 브라우저 지원표가 초록불이어도 접근성까지 초록불인 건 아닙니다. popover·앵커 포지셔닝·dialog·뷰 트랜지션 네 가지 기능을 2026년 8월 기준으로 점검하고, 브라우저가 대신 해주는 것과 개발자가 직접 챙겨야 하는 것을 실제 데모와 함께 정리했습니다. https://www.codeslog.com/posts/wcag-3-status-2026/ Tue, 04 Aug 2026 09:08:00 +0900 https://www.codeslog.com/posts/wcag-3-status-2026/ WCAG 3(3.0) 2026년 3월 Working Draft 기준 현황을 정리합니다. 12개 카테고리·44개 가이드라인 구조, 요구사항 실측 개수, Bronze/Silver/Gold 복귀, 아직 비어 있는 부분까지 짚습니다. https://www.codeslog.com/posts/frontend-testing-coverage-metrics/ Tue, 04 Aug 2026 09:08:00 +0900 https://www.codeslog.com/posts/frontend-testing-coverage-metrics/ 커버리지 리포트의 Stmts·Branch·Funcs·Lines, 이 네 숫자 중 뭘 믿어야 할까요? 라인은 후하고 브랜치가 정직한 이유를 실제 리포트로 확인하고, flaky 비율·MTTR 같은 커버리지 너머의 팀 건강 지표까지 다룹니다. https://www.codeslog.com/posts/frontend-testing-ci-github-actions/ Mon, 03 Aug 2026 01:59:00 +0900 https://www.codeslog.com/posts/frontend-testing-ci-github-actions/ PR을 열 때마다 단위·E2E·접근성(axe) 검사가 자동으로 도는 파이프라인을 GitHub Actions로 세팅합니다. 잡을 병렬로 나눠 속도를 올리고, branch protection으로 진짜 머지 게이트를 만드는 법까지 다룹니다. https://www.codeslog.com/posts/wcag-3-migration-strategy/ Mon, 03 Aug 2026 01:37:27 +0900 https://www.codeslog.com/posts/wcag-3-migration-strategy/ WCAG 3(3.0) 마이그레이션, 지금 필요할까요? 아직 Working Draft인 이유부터, 준수가 아닌 개선 관점으로 Core·Outcomes 사고방식을 미리 들여오는 전략과 시기별 준비 로드맵을 정리했습니다. https://www.codeslog.com/posts/eu-ai-act-accessibility/ Thu, 30 Jul 2026 01:02:04 +0900 https://www.codeslog.com/posts/eu-ai-act-accessibility/ 2026년 8월 2일부터 EU AI 법의 고위험 시스템 의무가 시작됩니다. 제16조에 웹 접근성 지침과 유럽접근성법(EAA) 준수 조항이 들어 있어, 개발자에게 실제로 무엇이 달라지는지, 한국 AI 기본법과는 어떻게 다른지 짚었습니다. https://www.codeslog.com/posts/frontend-testing-visual-regression/ Wed, 29 Jul 2026 15:01:36 +0900 https://www.codeslog.com/posts/frontend-testing-visual-regression/ '기능은 되는데 레이아웃이 깨졌어요.' Playwright의 toHaveScreenshot으로 baseline과 픽셀을 비교하는 시각적 회귀 테스트를 구현하고, 애니메이션·시간을 고정하는 법과 macOS·Linux 폰트 렌더링 차이라는 환경 복병까지 다룹니다. https://www.codeslog.com/posts/disability-pride-month-2026/ Tue, 28 Jul 2026 01:44:21 +0900 https://www.codeslog.com/posts/disability-pride-month-2026/ 7월은 장애 프라이드의 달입니다. ADA 서명일에서 시작된 유래, 접근성 때문에 다시 디자인된 프라이드 깃발, 2026년 테마 'The World Works Better With Us'의 의미를 개발자의 자리에서 생각해봅니다. https://www.codeslog.com/posts/webaim-million-2026/ Tue, 28 Jul 2026 01:42:21 +0900 https://www.codeslog.com/posts/webaim-million-2026/ 상위 100만 웹사이트를 WAVE로 분석한 WebAIM Million 2026 결과, 페이지당 평균 WCAG 오류가 56.1개로 1년 새 10.1% 늘며 접근성이 후퇴했습니다. 6대 단골 오류와 ARIA의 역설을 정리합니다. https://www.codeslog.com/posts/page-sampling-algorithm/ Tue, 28 Jul 2026 00:47:04 +0900 https://www.codeslog.com/posts/page-sampling-algorithm/ 웹 접근성 검사에서 수천 개 페이지를 다 볼 수도, 홈 하나만 볼 수도 없습니다. WCAG-EM 2.0의 층화 표집을 참고해 URL 템플릿 클러스터링으로, 본문을 내려받지 않고도 대표 페이지를 결정적으로 뽑는 알고리즘을 만든 기록입니다. https://www.codeslog.com/posts/frontend-testing-axe-e2e/ Mon, 27 Jul 2026 14:38:51 +0900 https://www.codeslog.com/posts/frontend-testing-axe-e2e/ 실제 브라우저에 그려진 화면을 axe-core 엔진으로 스캔해 접근성 위반을 자동으로 잡아냅니다. @axe-core/playwright로 E2E에 붙이고, 글씨 색을 살짝 흐리게 바꿔 color-contrast 위반이 실패로 잡히는 과정을 확인합니다. https://www.codeslog.com/posts/wcag-em-2-evaluation-methodology/ Fri, 24 Jul 2026 10:05:57 +0900 https://www.codeslog.com/posts/wcag-em-2-evaluation-methodology/ W3C가 12년 만에 접근성 평가 방법론 WCAG-EM 2.0을 정식 발행했습니다. 웹사이트에서 앱·전자책·키오스크까지 넓어진 평가 대상과 5단계 절차, 1.0과 달라진 점, 한국 웹 접근성 품질인증(KWCAG)과의 관계까지 정리했습니다. https://www.codeslog.com/posts/vercel-deployment-protection-zombie-task/ Fri, 24 Jul 2026 01:45:00 +0900 https://www.codeslog.com/posts/vercel-deployment-protection-zombie-task/ 서비스 오픈 직후, 검사 2건이 몇 시간째 '검사중'에 멈춰 있었습니다. 원인이라 확신한 수정이 두 번 빗나가고, 세 번째에야 진짜 범인 — Vercel Deployment Protection이 내부 호출을 401로 막고 있었다 — 을 찾은 서버리스 큐 디버깅 회고입니다. https://www.codeslog.com/posts/a11ychk-accessibility-audit/ Thu, 23 Jul 2026 13:28:00 +0900 https://www.codeslog.com/posts/a11ychk-accessibility-audit/ 웹접근성 점검 도구 알리첵(A11y Check) 소개. WCAG 2.2와 KWCAG를 함께 보는 자동 검사로 위반을 찾아 AI 개선 가이드를 주고, 준수율·인증 배지까지 제공합니다. axe-core 기반을 왜 오픈소스로 열었는지도 이야기해요. https://www.codeslog.com/posts/frontend-testing-playwright-debug/ Wed, 22 Jul 2026 01:30:00 +0900 https://www.codeslog.com/posts/frontend-testing-playwright-debug/ 테스트가 CI에서만 깨질 때, 무엇을 봐야 할까요? Playwright 트레이스 뷰어로 실패 순간의 DOM·네트워크·콘솔을 되감아 보고, UI·디버그 모드와 리트라이를 '해결'이 아닌 flaky 신호로 읽는 법을 다룹니다. https://www.codeslog.com/posts/frontend-testing-playwright-fixtures/ Tue, 21 Jul 2026 01:25:00 +0900 https://www.codeslog.com/posts/frontend-testing-playwright-fixtures/ 매 테스트마다 같은 준비를 반복하고 있나요? Playwright의 base.extend 커스텀 픽스처와 Page Object로 반복을 없애고, storageState로 로그인을 한 번만, fullyParallel 병렬 실행에서 테스트 격리 지키는 법까지 다룹니다. https://www.codeslog.com/posts/opacity-contrast-trap/ Tue, 21 Jul 2026 00:30:00 +0900 https://www.codeslog.com/posts/opacity-contrast-trap/ CSS에 진한 회색을 넣었는데 접근성 검사기는 대비 미달이라고 합니다. 범인은 opacity예요. opacity가 글자색을 배경과 섞어 대비를 깎는 원리와, 실제 블로그에서 겪은 사례·계산·해결법을 초보 눈높이로 정리합니다. https://www.codeslog.com/posts/frontend-testing-playwright-locators/ Sat, 18 Jul 2026 23:06:00 +0900 https://www.codeslog.com/posts/frontend-testing-playwright-locators/ E2E가 가끔 실패하는 진짜 이유와 해법. getByLabel이 두 요소에 매칭돼 strict mode 위반이 났던 실제 사례로 로케이터의 지연 평가를 이해하고, auto-wait로 waitForTimeout(sleep) 없이 flaky 테스트를 줄입니다. https://www.codeslog.com/posts/high-contrast-mode/ Sat, 18 Jul 2026 22:47:00 +0900 https://www.codeslog.com/posts/high-contrast-mode/ 다크모드는 내가 색을 고르는 일이지만, 고대비 모드는 OS가 강제하는 색에 응답하는 일입니다. forced-colors 미디어 쿼리와 시스템 색 키워드, prefers-contrast로 저시력 사용자까지 지원하는 법을 실전 코드로 정리합니다. https://www.codeslog.com/posts/dark-mode-implementation/ Sat, 18 Jul 2026 02:44:00 +0900 https://www.codeslog.com/posts/dark-mode-implementation/ 다크모드를 색 반전으로 구현하면 오히려 읽기 어려워집니다. CSS 변수로 다크모드 전용 디자인 토큰을 설계하고, prefers-color-scheme과 JS 토글, 색 대비 검증, FOUC 방지까지 실전 코드로 다룹니다. https://www.codeslog.com/posts/frontend-testing-playwright-intro/ Sat, 18 Jul 2026 02:25:00 +0900 https://www.codeslog.com/posts/frontend-testing-playwright-intro/ 진짜 브라우저에서 사용자 흐름 전체를 검증하는 E2E. Playwright를 설치하고 webServer로 dev 서버를 자동 실행해, getByRole로 찾고 검증하는 첫 시나리오를 통과시킵니다. 단위·컴포넌트 테스트와 역할을 어떻게 나눌지도 정리합니다. https://www.codeslog.com/posts/frontend-testing-a11y-queries/ Fri, 17 Jul 2026 01:37:00 +0900 https://www.codeslog.com/posts/frontend-testing-a11y-queries/ 「프론트엔드 테스트 제대로 하기」 시리즈 10편. 잘 짠 컴포넌트 테스트는 그 자체로 접근성 검증이 됩니다. role 기반 쿼리와 접근 가능한 이름(accessible name)으로 div 버튼, 사라지는 포커스 같은 접근성 회귀를 잡는 법을 다룹니다. https://www.codeslog.com/posts/kisa-blockchain-nuridan-2026/ Thu, 16 Jul 2026 14:00:00 +0900 https://www.codeslog.com/posts/kisa-blockchain-nuridan-2026/ 한국인터넷진흥원(KISA)이 운영하는 2026 블록체인 누리단 단원으로 위촉됐습니다. 블록체인 누리단이 어떤 활동을 하는 프로그램인지, 지원 동기부터 위촉장을 받기까지의 과정, 12월까지 이어질 활동 계획을 솔직하게 기록합니다. https://www.codeslog.com/posts/ict-maintenance-manager-completion-2026/ Thu, 16 Jul 2026 10:37:00 +0900 https://www.codeslog.com/posts/ict-maintenance-manager-completion-2026/ 정보통신설비 유지보수 관리자 인정교육 사흘(22시간) 비대면 실시간 화상교육 수강기입니다. 기술자 2차 교육과 같은 진행 방식, 평가 없이 출석으로 이수하는 구조, 수료증 발급과 선임 요건 완성까지 — 마지막 날 남은 이야기도 함께 담았습니다. https://www.codeslog.com/posts/javascript-nullish-coalescing/ Tue, 14 Jul 2026 23:52:00 +0900 https://www.codeslog.com/posts/javascript-nullish-coalescing/ ?? 연산자(nullish coalescing)와 ||의 결정적 차이 — 0과 빈 문자열이 기본값에 먹히는 버그의 원인입니다. falsy의 함정, ??= 할당, 옵셔널 체이닝 조합, 그리고 둘을 섞으면 SyntaxError가 나는 이유까지 정리했습니다. https://www.codeslog.com/posts/frontend-testing-msw/ Tue, 14 Jul 2026 01:05:00 +0900 https://www.codeslog.com/posts/frontend-testing-msw/ 테스트에서 진짜 API를 부르면 느리고 불안정합니다. MSW(Mock Service Worker) v2로 네트워크 경계를 가로채 성공·실패 응답을 마음대로 시뮬레이션하고, fetch를 직접 모킹하지 않는 이유까지 다룹니다. https://www.codeslog.com/posts/eaa-carrefour-ruling/ Tue, 14 Jul 2026 00:40:00 +0900 https://www.codeslog.com/posts/eaa-carrefour-ruling/ 2026년 6월 4일 프랑스 캉 법원이 카르푸에 내린 유럽접근성법(EAA) 최초의 이행 강제 판결을 분석합니다. RGAA 기준 71% 준수로도 부족했던 이유와, 6개월 내 미이행 시 하루 500유로 강제금, 한국 대법원 판결과의 비교를 다룹니다. https://www.codeslog.com/posts/frontend-testing-user-event/ Mon, 13 Jul 2026 23:39:00 +0900 https://www.codeslog.com/posts/frontend-testing-user-event/ 타이핑, 클릭, 지우기 버튼까지 — user-event로 실제 사용자의 상호작용을 재현합니다. 검색 컴포넌트를 서버 연동으로 업그레이드하며 findBy로 비동기 로딩을 기다리고, 포커스 이동까지 검증해 fireEvent와 다른 이유를 확인합니다. https://www.codeslog.com/posts/frontend-testing-testing-library/ Fri, 10 Jul 2026 01:27:00 +0900 https://www.codeslog.com/posts/frontend-testing-testing-library/ React Testing Library의 핵심 철학 '사용자처럼 테스트하기'. getByRole 중심의 쿼리 우선순위와 getBy·queryBy·findBy 3형제를 익히고, htmlFor를 지워도 눈으로는 멀쩡하지만 테스트는 빨간불이 되는 이유까지 확인합니다. https://www.codeslog.com/posts/frontend-testing-test-doubles/ Fri, 10 Jul 2026 00:44:00 +0900 https://www.codeslog.com/posts/frontend-testing-test-doubles/ mock, stub, spy, fake… 헷갈리는 테스트 더블 용어를 정리합니다. Vitest vi.fn() 하나로 셋을 다루는 법(Jest도 거의 동일)과 의존성 주입으로 분석 로거를 테스트하며, 어디까지 가짜로 바꿀지의 경계 원칙까지 짚습니다. https://www.codeslog.com/posts/typescript-7-native-compiler/ Thu, 09 Jul 2026 23:05:00 +0900 https://www.codeslog.com/posts/typescript-7-native-compiler/ Go로 다시 태어난 TypeScript 7이 정식 출시됐습니다. VSCode 125초→10초 실측 벤치마크, strict 기본값 등 달라진 설정, 6.x 병행 설치 마이그레이션까지 — 지금 갈아타도 되는지 판단 기준을 정리했습니다. https://www.codeslog.com/posts/frontend-testing-async/ Wed, 08 Jul 2026 00:27:00 +0900 https://www.codeslog.com/posts/frontend-testing-async/ Promise, setTimeout, 그리고 실패 케이스. Vitest의 resolves·rejects 매처와 가짜 타이머(fake timers)로 디바운스 같은 비동기 코드를 테스트합니다. await를 빠뜨리면 왜 거짓 초록불이 뜨는지도 직접 확인해봅니다. https://www.codeslog.com/posts/frontend-testing-unit-basics/ Mon, 06 Jul 2026 00:20:00 +0900 https://www.codeslog.com/posts/frontend-testing-unit-basics/ 가장 튼튼한 기초, 단위 테스트. filterByQuery 순수 함수로 경계값·AAA(Arrange-Act-Assert) 패턴을 Vitest 실전 예제로 익히고, trim()을 일부러 지워 빨간불을 확인하며 toBe·toEqual의 차이까지 다룹니다. https://www.codeslog.com/posts/frontend-testing-setup-vitest/ Sun, 05 Jul 2026 00:05:00 +0900 https://www.codeslog.com/posts/frontend-testing-setup-vitest/ React + Vite + TypeScript 데모 앱에 Vitest·Testing Library·jsdom을 설치하고 vite.config.ts로 설정해 첫 테스트를 초록불로 만듭니다. document is not defined 같은 흔한 세팅 오류도 짚습니다. https://www.codeslog.com/posts/frontend-testing-strategy-coverage/ Sat, 04 Jul 2026 22:34:00 +0900 https://www.codeslog.com/posts/frontend-testing-strategy-coverage/ 테스트는 많이 짤수록 좋은 걸까요? 무엇을 먼저 테스트할지 고르는 기준과, assert 없는 테스트·스냅샷 남발·구현 박제처럼 커버리지 숫자만 올리고 사용자는 못 지키는 함정들을 데모 코드로 짚고, 단위-컴포넌트-E2E로 쌓는 이 시리즈의 전략을 정리합니다. https://www.codeslog.com/posts/frontend-testing-glossary/ Sat, 04 Jul 2026 22:30:00 +0900 https://www.codeslog.com/posts/frontend-testing-glossary/ 단위 테스트부터 flaky, 픽스처, MCP까지 — 「프론트엔드 테스트 제대로 하기」 시리즈에 나오는 용어를 학습 순서대로 초보자도 이해할 수 있게 풀어 정리했습니다. 읽다가 낯선 단어를 만나면 언제든 이 페이지로 돌아오세요. https://www.codeslog.com/posts/ict-maintenance-manager-education-2026/ Sat, 04 Jul 2026 00:03:00 +0900 https://www.codeslog.com/posts/ict-maintenance-manager-education-2026/ 정보통신설비 유지보수 관리자는 시험이 아니라 선임 제도입니다. 정보통신공사업법 개정에 따른 규모별 선임 의무 시행 시기와 요구 기술자 등급, 인정교육(20시간) 신청과 대기 상황, 수강료 15만 원과 기술자부터 총 52만 원의 비용까지 정리합니다. https://www.codeslog.com/posts/frontend-testing-why-now/ Fri, 03 Jul 2026 22:40:00 +0900 https://www.codeslog.com/posts/frontend-testing-why-now/ AI가 코드를 쏟아내는 시대일수록 테스트가 더 중요해졌습니다. 「프론트엔드 테스트 제대로 하기」 시리즈의 첫 글로, 테스트가 주는 것과 피라미드·트로피 전략을 정리하고, Vitest·Playwright·axe-core로 함께 만들 커리큘럼을 소개합니다. https://www.codeslog.com/posts/ict-technician-realtime-education-2026/ Wed, 01 Jul 2026 10:00:00 +0900 https://www.codeslog.com/posts/ict-technician-realtime-education-2026/ 정보통신기술자 특급 2차 비대면 실시간 화상교육(Webex) 수강기입니다. 강의실 접속과 테스트 미팅 준비, 카메라·실명 출석, 이틀 세 번의 평가와 실습평가 요령, 98점 합격과 수료증·KICA 경력수첩 발급까지 차례로 정리합니다. https://www.codeslog.com/posts/dr-lee-pomodoro-timer/ Mon, 22 Jun 2026 01:30:00 +0900 https://www.codeslog.com/posts/dr-lee-pomodoro-timer/ 카이스트 박사가 개발한 닥터리 뇌과학 뽀모도로 타이머를 내돈내산으로 직접 써본 솔직 리뷰입니다. 중력 센서로 시간을 맞추는 디지털 플립 타이머의 좋았던 점 7가지와 아쉬운 점 3가지를, 접근성 관점까지 곁들여 정리했습니다. https://www.codeslog.com/posts/strategic-pivot-book-review/ Fri, 19 Jun 2026 23:00:00 +0900 https://www.codeslog.com/posts/strategic-pivot-book-review/ 경영 전략서 『전략적 피벗』(최연성) 서평입니다. 버티기가 아니라 핵심 역량을 유지한 채 방향을 재배치하는 '피벗' 전략을, 풀스택에서 접근성 특화 프론트엔드로 집중하고 다시 통신·보안 재확장을 고민하는 개발자의 시선으로 읽었습니다. https://www.codeslog.com/posts/ict-technician-online-education-2026/ Sat, 23 May 2026 23:30:00 +0900 https://www.codeslog.com/posts/ict-technician-online-education-2026/ 정보통신기술자 특급 1차 온라인 교육(ICT폴리테크대학 LMS) 수강기입니다. 20시간 과정 구성과 교육비 27만 원, 진도율 100%와 시험 응시 순서, 총점 92점 수료와 이수확인서, 2차 화상교육 신청에서 대기번호를 받은 이야기까지 담았습니다. https://www.codeslog.com/posts/ict-technician-screening-2026/ Fri, 22 May 2026 13:00:00 +0900 https://www.codeslog.com/posts/ict-technician-screening-2026/ 정보통신기술자 특급을 KICA 경력신고로 취득한 기록입니다. 온라인경력신고시스템 신청 절차와 준비 서류, 공식 경력확인서·4대보험 보완 요청, 수수료 10만 원과 23일의 처리 기간, 학·경력자에게 특급이 열린 시행령 개정까지 정리합니다. https://www.codeslog.com/posts/gaad-2026-accessibility-for-everyone/ Wed, 20 May 2026 00:01:00 +0900 https://www.codeslog.com/posts/gaad-2026-accessibility-for-everyone/ 자막, 다크모드, 한 손 스마트폰 조작... 당신도 이미 웹 접근성 기능을 쓰고 있습니다. GAAD(세계 접근성 인식의 날) 2026을 맞아 영구적·일시적·상황적 장애 유형과 커브컷 효과로 '모든 사람을 위한 접근성'의 의미를 짚어봅니다. https://www.codeslog.com/posts/daoncard-a11y-card-family-month/ Fri, 08 May 2026 23:25:57 +0900 https://www.codeslog.com/posts/daoncard-a11y-card-family-month/ 가정의달 5월, 디지털 카드조차 보내기 어려운 시각장애인·고령자 이야기와 함께 직접 만든 무료 카드 서비스 다온카드(daoncard.com)를 소개합니다. 키보드 전체 조작, 실시간 색상 대비 검사 등 WCAG 2.2 AA 구현 내용을 담았습니다. https://www.codeslog.com/posts/moduweb-accessibility-seminar/ Thu, 23 Apr 2026 22:30:00 +0900 https://www.codeslog.com/posts/moduweb-accessibility-seminar/ 디지털접근성표준화포럼 주최 AI Accessibility 세미나에서 오버레이 웹접근성 도구 모두웹(ModuWeb)을 발표한 후기입니다. 오버레이 도구를 둘러싼 논란에 대한 솔직한 생각과, 함께한 다른 발표자들의 세션 내용도 정리했습니다. https://www.codeslog.com/posts/president-site-redesign-accessibility/ Tue, 21 Apr 2026 00:00:57 +0900 https://www.codeslog.com/posts/president-site-redesign-accessibility/ 개편된 청와대 홈페이지(president.go.kr)를 KWCAG 2.2 기준으로 점검했습니다. 스킵 내비게이션·다크모드 등 좋아진 점과 ARIA 랜드마크 미활용·tabindex 오류·이미지 alt 누락 같은 개선점을 현황·영향·개선 방안·검증 방법까지 짚었습니다. https://www.codeslog.com/posts/disability-day-commendation-2026/ Mon, 20 Apr 2026 22:50:00 +0900 https://www.codeslog.com/posts/disability-day-commendation-2026/ 2010년부터 15년간 대학 웹접근성 업무를 해온 경험을 돌아봅니다. 2014년 전국 최초 강의실 웹접근성 품질인증 취득, 자체 개발 도구 ModuWeb 오픈소스 공개를 거쳐 제46회 장애인의 날 교육부장관 표창을 받기까지의 기록입니다. https://www.codeslog.com/posts/mssql-varchar-nvarchar-unicode/ Mon, 20 Apr 2026 00:42:48 +0900 https://www.codeslog.com/posts/mssql-varchar-nvarchar-unicode/ HWP에서 복사한 한글·특수문자가 MSSQL에 저장하면 물음표(?)로 깨지는 이유를 분석합니다. VARCHAR와 NVARCHAR의 차이, 코드 페이지 개념, N 접두사 사용법, 다른 DB와의 비교까지 원인과 해결책을 정리합니다. https://www.codeslog.com/posts/form-accessibility-mastery/ Sat, 11 Apr 2026 00:00:00 +0900 https://www.codeslog.com/posts/form-accessibility-mastery/ 회원가입 폼도 접근성 없이는 완전한 장벽이 됩니다. 라벨 연결, aria-describedby로 입력 형식 안내, 에러 처리, fieldset 그룹화, 키보드 내비게이션까지 WCAG 2.2 기준으로 직접 만든 데모와 함께 정리했습니다. https://www.codeslog.com/posts/javascript-promise-methods/ Wed, 08 Apr 2026 01:00:00 +0900 https://www.codeslog.com/posts/javascript-promise-methods/ Promise.all은 하나라도 실패하면 전체가 날아갑니다. 대시보드가 통째로 흰 화면이 된 경험 있으신가요? Promise.all과 Promise.allSettled의 핵심 차이를 실무 예제로 살펴보고, 언제 어떤 걸 써야 하는지 정리합니다. https://www.codeslog.com/posts/javascript-function-hoisting/ Sat, 04 Apr 2026 02:30:00 +0900 https://www.codeslog.com/posts/javascript-function-hoisting/ 함수를 선언 전에 호출했는데 왜 어떤 코드는 되고 어떤 코드는 TypeError가 날까요? 함수 선언식과 표현식의 차이, 호이스팅(Hoisting) 동작 원리, 화살표 함수까지 실무 예제와 함께 한 번에 정리합니다. https://www.codeslog.com/posts/2025-web-accessibility-survey/ Mon, 30 Mar 2026 23:40:00 +0900 https://www.codeslog.com/posts/2025-web-accessibility-survey/ 2025년 웹사이트 정보접근성 실태조사 결과를 분석합니다. KWCAG 2.2 기준 전체 평균 70.4점, 그중 대체 텍스트 준수율은 17.1%로 32개 항목 중 최하위였습니다. 교육서비스업만 유일하게 점수가 하락한 이유도 짚었습니다. https://www.codeslog.com/posts/google-antigravity-accessibility/ Tue, 17 Mar 2026 16:00:00 +0900 https://www.codeslog.com/posts/google-antigravity-accessibility/ Google Antigravity 홈페이지의 히어로 텍스트를 알파벳 하나하나 div로 감싼 구조가 스크린 리더와 브라우저 번역 기능을 어떻게 무력화하는지 분석하고, WCAG 2.2 기준과 개선 코드까지 함께 정리합니다. https://www.codeslog.com/posts/color-accessibility/ Fri, 06 Mar 2026 00:00:00 +0900 https://www.codeslog.com/posts/color-accessibility/ 색각이상과 저시력 사용자까지 고려한 색상 설계 가이드. WCAG 2.2 명도 대비 4.5:1 기준과 계산법, 색상만으로 정보를 전달하지 않는 법, 다크 모드 대비, 브랜드 색이 기준에 미달할 때 디자이너와 합의하는 방법까지 다룹니다. https://www.codeslog.com/posts/wcag-3-expanded-scope-beyond-web/ Mon, 23 Feb 2026 00:00:00 +0900 https://www.codeslog.com/posts/wcag-3-expanded-scope-beyond-web/ WCAG 3(3.0) 초안은 웹 콘텐츠를 넘어 웨어러블·Web of Things·VR/AR·도구 생태계까지 적용 범위를 넓힙니다. 한국의 키오스크 접근성 의무화와 디지털포용법 시행이 이 확장과 어떻게 맞닿아 있는지 정리했습니다. https://www.codeslog.com/posts/seollal-gov-accessibility/ Sun, 15 Feb 2026 02:40:12 +0900 https://www.codeslog.com/posts/seollal-gov-accessibility/ 디지털포용법 시행 한 달, 청와대 설 연휴 카드뉴스의 접근성을 점검합니다. 정보가 이미지 안에만 있고 대체 텍스트도 없는 문제를, 텍스트로 정보를 제공한 보건복지부와 비교해 공공 웹사이트 접근성의 현실을 짚어봅니다. https://www.codeslog.com/posts/blog-writing-thoughts/ Thu, 05 Feb 2026 00:35:12 +0900 https://www.codeslog.com/posts/blog-writing-thoughts/ 웹접근성과 프론트엔드 글을 오래 써오며 느낀 고민을 정리합니다. 코드 위주 글이 읽는 흐름을 끊는다는 걸 깨닫고, 설명과 맥락을 먼저 쓰고 코드는 분리하는 방향으로 글쓰기 방식을 바꾸기로 한 이유와, 피드백을 받고 싶은 솔직한 마음을 담았습니다. https://www.codeslog.com/posts/keyboard-accessibility-a-to-z/ Tue, 03 Feb 2026 00:01:00 +0900 https://www.codeslog.com/posts/keyboard-accessibility-a-to-z/ 마우스 없이 키보드만으로 쓸 수 있는 웹을 만드는 법. tabindex와 Tab 순서, 스킵 링크, 모달의 포커스 트랩과 포커스 복원, :focus-visible 포커스 스타일, 드래그 앤 드롭 대체 수단까지 코드 예제로 정리했습니다. https://www.codeslog.com/posts/wcag-3-assertions/ Sun, 01 Feb 2026 00:10:00 +0900 https://www.codeslog.com/posts/wcag-3-assertions/ WCAG 3(3.0)의 Assertions는 자동 검사로 못 잡는 접근성 절차를 조직이 문서로 진술하는 새 평가 단위입니다. 2026년 3월 초안 기준 28개 항목과 WCAG 2.2 Conformance Claim의 차이를 정리했습니다. https://www.codeslog.com/posts/github-actions-scheduled-publish-check/ Fri, 30 Jan 2026 08:00:00 +0900 https://www.codeslog.com/posts/github-actions-scheduled-publish-check/ 정적 블로그의 예약 발행과 Cloudflare 빌드 제한, 두 가지 과제를 동시에 해결하는 방법을 공유합니다. GitHub Actions로 3시간마다 퍼블리시 체크를 돌리고, 조건이 맞을 때만 빌드하는 운영 전략을 정리했어요. https://www.codeslog.com/posts/wcag-3-atomic-holistic-tests/ Mon, 26 Jan 2026 01:00:00 +0900 https://www.codeslog.com/posts/wcag-3-atomic-holistic-tests/ WCAG 3(3.0)이 제안하는 정량·정성 테스트 흐름을 WCAG 2.2의 성공 기준 기반 평가와 비교합니다. Atomic/Holistic 개념과 뷰·프로세스 단위 평가, 점수 모델과의 연결을 실무 관점에서 정리했습니다. https://www.codeslog.com/posts/wcag-3-scoring-conformance/ Sun, 25 Jan 2026 00:10:00 +0900 https://www.codeslog.com/posts/wcag-3-scoring-conformance/ WCAG 3(3.0) 적합성 모델이 A/AA/AAA를 넘어 어떻게 변하는지 알아봅니다. Core/Supplemental/Assertions 구조와 돌아온 Bronze/Silver/Gold 등급, views·processes 범위 정의를 2026년 3월 초안 기준으로 정리했습니다. https://www.codeslog.com/posts/language-switcher-banner/ Fri, 23 Jan 2026 08:00:00 +0900 https://www.codeslog.com/posts/language-switcher-banner/ 브라우저 언어(navigator.language)를 감지해 적절한 언어 버전을 자동으로 제안하는 배너를 Hugo 블로그에 직접 구현했습니다. WCAG 2.2 AA 기준의 키보드 네비게이션과 스크린 리더 지원까지 다룬 구현 과정을 공유합니다. https://www.codeslog.com/posts/aria-practical-guide/ Thu, 22 Jan 2026 02:00:00 +0900 https://www.codeslog.com/posts/aria-practical-guide/ ARIA를 실제 프로젝트에 적용하는 실전 가이드입니다. 언제 ARIA를 쓰고 언제 쓰지 말아야 하는지부터, aria-live 라이브 리전, 탭·아코디언·드롭다운 커스텀 위젯, 모달 다이얼로그 패턴까지 코드로 정리했습니다. https://www.codeslog.com/posts/wcag-3-structure-outcomes/ Mon, 19 Jan 2026 08:30:00 +0900 https://www.codeslog.com/posts/wcag-3-structure-outcomes/ WCAG 3(3.0)의 구조를 Guidelines-Outcomes-Methods로 해부합니다. 요구사항 153개(Core 92+Supplemental 61)와 Atomic/Holistic 테스트를 로그인 폼 실전 예제로 WCAG 2.2와 비교했습니다. https://www.codeslog.com/posts/blog-comment-visibility-features/ Fri, 16 Jan 2026 18:00:00 +0900 https://www.codeslog.com/posts/blog-comment-visibility-features/ Hugo 정적 블로그에 Giscus 댓글 수, 최근 댓글, 전체 댓글 페이지를 붙인 과정입니다. GitHub GraphQL API 호출과 토큰 설정, Cloudflare Pages 환경 변수, localStorage 캐싱, 접근성 처리까지 코드로 정리했습니다. https://www.codeslog.com/posts/wcag-3-era-why-new-guidelines/ Mon, 12 Jan 2026 23:00:00 +0900 https://www.codeslog.com/posts/wcag-3-era-why-new-guidelines/ WCAG(웹 콘텐츠 접근성 지침) 1.0부터 2.2까지 26년의 역사를 훑고, All or Nothing 판정과 체크박스 접근성의 한계를 짚어 WCAG 3(3.0)이 왜 필요한지 W3C 최신 초안 기준으로 정리했습니다. https://www.codeslog.com/posts/code-block-accessibility-improvement/ Fri, 09 Jan 2026 20:00:00 +0900 https://www.codeslog.com/posts/code-block-accessibility-improvement/ Hugo PaperMod 블로그의 코드 블록을 개선한 기록입니다. 라인 넘버를 table 태그 대신 CSS Counter로 다시 구현해, 스크린 리더 사용자가 불필요한 표 정보 없이 코드를 읽을 수 있도록 더 시맨틱하고 접근성 높게 바꾼 과정을 정리합니다. https://www.codeslog.com/posts/ai-basic-act-accessibility/ Wed, 07 Jan 2026 18:59:00 +0900 https://www.codeslog.com/posts/ai-basic-act-accessibility/ 2026년 1월 22일 시행되는 AI 기본법을 웹접근성 전문가 시각에서 읽습니다. WCAG 인식·운용·이해·견고성 4대 원칙에 투명성·설명가능성·고영향 AI·생성형 AI 표시 의무를 대응시켜 실무 체크포인트로 정리했습니다. https://www.codeslog.com/posts/digital-inclusion-act/ Tue, 06 Jan 2026 18:59:00 +0900 https://www.codeslog.com/posts/digital-inclusion-act/ 2026년 1월 22일 시행되는 디지털포용법을 사람 중심 관점에서 정리합니다. 지능정보화 기본법과 무엇이 다른지, 키오스크(무인정보단말기) 이용 편의 의무·디지털포용 영향평가 등 개발자·기획자가 챙겨야 할 조항을 짚었습니다. https://www.codeslog.com/posts/digital-inclusion-new-era/ Mon, 05 Jan 2026 23:50:00 +0900 https://www.codeslog.com/posts/digital-inclusion-new-era/ 웹접근성 인증을 받고 점검도 통과했는데, 왜 여전히 사용하지 못하는 사람이 있을까요? 접근성과 디지털포용이 실제로 어떻게 다른지 현장 사례로 짚고, 2026년 1월 22일 시행되는 디지털포용법이 던지는 질문을 정리합니다. https://www.codeslog.com/posts/ai-evaluation-review/ Wed, 31 Dec 2025 01:51:00 +0900 https://www.codeslog.com/posts/ai-evaluation-review/ NIA가 주최한 AI 에이전트 시나리오 공모전 국민평가단 활동을 마치고, 대국민 AI 서비스를 바라볼 때 가장 중요하게 여긴 기준을 정리했습니다. 접근성, 장애 상황 대응, 소통 설계에 대해 현장에서 던졌던 질문들을 기록으로 남깁니다. https://www.codeslog.com/posts/evaluation-panel-seoul/ Tue, 30 Dec 2025 01:07:37 +0900 https://www.codeslog.com/posts/evaluation-panel-seoul/ 하루를 통째로 쓰고 교통비도 직접 부담하지만 보상은 5만 원뿐인 AI 에이전트 공모전 국민평가단 활동. 그래도 서울에 가기로 한 이유와, 손해처럼 보이는 선택이 어떻게 경험과 커리어 자산으로 쌓이는지를 솔직하게 정리했습니다. https://www.codeslog.com/posts/semantic-html-guide/ Tue, 23 Dec 2025 02:32:17 +0900 https://www.codeslog.com/posts/semantic-html-guide/ div만 쓰던 마크업을 시맨틱 HTML로 바꾸는 방법을 정리했습니다. header·nav·main·article·section을 언제 쓰는지, article과 section은 뭐가 다른지, 제목 계층과 ARIA 랜드마크까지 Before/After 예제로 살펴봅니다. https://www.codeslog.com/posts/web-accessibility-ai-era/ Tue, 23 Dec 2025 00:29:12 +0900 https://www.codeslog.com/posts/web-accessibility-ai-era/ AI가 만든 웹, 과연 모두가 쓸 수 있을까요. 생성형 AI가 놓치기 쉬운 접근성 허점부터 WCAG 2.2 네 가지 원칙(인식·운용·이해·견고성)의 코드 적용, AI로 대체 텍스트 생성하기, 접근 가능한 AI 챗봇 구현까지 정리했습니다. https://www.codeslog.com/posts/first-post/ Mon, 22 Sep 2025 02:08:23 +0900 https://www.codeslog.com/posts/first-post/ 새로 시작한 개발 블로그의 첫 글입니다. 스스로를 만년 초보 개발자라 부르며, 프론트엔드·백엔드 개발과 웹접근성, 개발 환경 자동화, 사이드 프로젝트에서 겪은 시행착오를 기록하고 동료 개발자와 나누려는 이유를 담았습니다.