본문으로 바로가기
블로그 포스트 썸네일: 색상과 접근성: 모든 사용자가 구분할 수 있는 색상 설계 - 색각이상, 저시력 사용자도 웹사이트를 쉽게 사용할 수 있도록 하는 색상 설계 가이드. WCAG 명도 대비 기준부터 실무 팁까지, 포용적 색상 선택의 모든 것을 다룹니다. (https://www.codeslog.com/ko/posts/color-accessibility/)

색상과 접근성: 모든 사용자가 구분할 수 있는 색상 설계

들어가며 “빨강과 초록으로 구분했으니까 괜찮을 거야.” 개발하다 보면 한 번쯤 이런 생각을 해보게 됩니다. 그런데 생각보다 많은 사람들이 이 두 색을 잘 구분하지 못합니다. 북유럽 혈통 기준 통계에서는 남성 약 1/12, 여성 약 1/200이 적색-녹색 색각이상을 가지고 있다고 알려져 있어요. 지역과 유전적 배경에 따라 비율은 달라질 수 있지만, 빨강-초록 구분이 어려운 사용자가 꾸준히 존재한다는 사실은 변하지 않습니다. ...

글 작성일: 2026-03-06 · 글 읽기 시간: 19 분 · 글 단어 수: 9209 단어 · 글쓴이: Isaac
블로그 포스트 썸네일: WCAG 3.0 확장된 적용 범위: 웹을 넘어서 - WCAG 3.0 Draft는 ‘웹’을 넘어 모바일, 웨어러블, Web of Things, XR, 도구 생태계까지 범위를 확장하고 있습니다. WCAG 2.2와 비교하며 실무 질문이 어떻게 바뀌는지 정리합니다. (https://www.codeslog.com/ko/posts/wcag-3-expanded-scope-beyond-web/)

WCAG 3.0 확장된 적용 범위: 웹을 넘어서

들어가며 WCAG 3.0 시리즈의 여섯 번째 글입니다. 이번 글은 **“웹을 넘어서”**라는 문장을 실제로 무엇을 의미하는지 정리해보려 합니다. 앞선 글에서 구조와 테스트, Assertions를 살펴봤다면, 이제는 **“어디까지가 범위인가”**를 분명히 해야 할 차례입니다. ...

글 작성일: 2026-02-23 · 글 읽기 시간: 9 분 · 글 단어 수: 4424 단어 · 글쓴이: Isaac
블로그 포스트 썸네일: 키보드 접근성 A to Z: 모든 사용자가 키보드로 사용할 수 있는 웹사이트 만들기 - 마우스 없이도 완전히 이용 가능한 웹사이트를 만드는 키보드 접근성 완벽 가이드. 포커스 관리, Tab 순서, 커스텀 위젯 구현까지 실무 코드 예제와 함께 담았습니다. (https://www.codeslog.com/ko/posts/keyboard-accessibility-a-to-z/)

키보드 접근성 A to Z: 모든 사용자가 키보드로 사용할 수 있는 웹사이트 만들기

들어가며 혹시 마우스 없이 인터넷을 쓴 경험이 있으신가요? 대부분의 사람들은 마우스를 당연하게 사용합니다. 하지만 세상에는 마우스를 쓸 수 없는 사람들이 있어요. 신체 장애로 인해 마우스를 조작할 수 없는 사람 손목터널증후군 같은 반복성 긴장 장애가 있는 사람 일시적으로 팔이 다친 사람 단순히 키보드가 더 효율적이라고 생각하는 파워 유저 이런 사용자들에게 “키보드로 이 사이트를 쓸 수 있나요?“라는 질문은 매우 중요합니다. ...

글 작성일: 2026-02-03 · 글 읽기 시간: 18 분 · 글 단어 수: 8554 단어 · 글쓴이: Isaac
블로그 포스트 썸네일: Assertions: 접근성 평가의 새로운 단위 - WCAG 3.0의 Assertions 개념을 WCAG 2.2와 비교하며 설명합니다. 접근성 절차 문서화의 새로운 기준과 실무 적용 전략을 알아봅니다. (https://www.codeslog.com/ko/posts/wcag-3-assertions/)

Assertions: 접근성 평가의 새로운 단위

들어가며 Atomic Tests vs. Holistic Tests: 새로운 테스트 방법론에서는 Atomic/Holistic 테스트의 균형을 이야기했습니다. 이제 그 결과를 어떤 방식으로 ‘주장’하고 ‘기록’할 것인지가 남습니다. 이 역할을 맡는 것이 바로 Assertions입니다. ...

글 작성일: 2026-02-01 · 글 읽기 시간: 5 분 · 글 단어 수: 2139 단어 · 글쓴이: Isaac
블로그 포스트 썸네일: Atomic Tests vs. Holistic Tests: 새로운 테스트 방법론 - WCAG 3.0에서 제안되는 정량/정성 테스트 흐름을 WCAG 2.2의 성공 기준 기반 평가와 비교합니다. Atomic/Holistic 개념, 뷰·프로세스 단위 평가, 점수 모델과의 연결을 실무 관점에서 정리합니다. (https://www.codeslog.com/ko/posts/wcag-3-atomic-holistic-tests/)

Atomic Tests vs. Holistic Tests: 새로운 테스트 방법론

들어가며 접근성 테스트라고 하면 보통 체크리스트를 떠올립니다. “이 버튼에 대체 텍스트가 있나?”, “명도 대비는 기준을 넘나?” 같은 질문들이죠. WCAG 2.2는 이런 명확한 통과/실패 판정을 중심으로 작동했습니다. ...

글 작성일: 2026-01-26 · 글 읽기 시간: 5 분 · 글 단어 수: 2315 단어 · 글쓴이: Isaac
블로그 포스트 썸네일: WCAG 3.0 적합성 모델: A/AA/AAA 이후의 변화 - WCAG 3.0 Editor's Draft를 기준으로 Foundational/Supplemental/Assertions 중심의 적합성 모델과 WCAG 2.2와의 차이를 정리합니다. (https://www.codeslog.com/ko/posts/wcag-3-scoring-conformance/)

WCAG 3.0 적합성 모델: A/AA/AAA 이후의 변화

들어가며 지난 글에서는 WCAG 3.0이 “성공 기준(Success Criteria)“을 “아웃컴(Outcomes)“으로 재구성한 이유를 살펴봤습니다. ...

글 작성일: 2026-01-25 · 글 읽기 시간: 7 분 · 글 단어 수: 3120 단어 · 글쓴이: Isaac
블로그 포스트 썸네일: ARIA 실전 가이드: 접근 가능한 웹 인터페이스 구현하기 - ARIA를 실제 프로젝트에서 어떻게 활용할까요? 언제 써야 하고, 어떻게 효과적으로 사용하는지 라이브 리전, 커스텀 위젯, 모달 패턴을 통해 알아봅니다. (https://www.codeslog.com/ko/posts/aria-practical-guide/)

ARIA 실전 가이드: 접근 가능한 웹 인터페이스 구현하기

ARIA를 배운 개발자들이 자주 하는 실수가 있습니다. ARIA의 개념은 이해했지만, 실제 프로젝트에서 어떻게 적용할지, 언제 써야 하는지 확실하지 않은 거죠. ARIA 실전 가이드 - 코드 에디터 화면에 ARIA 속성이 강조된 메인 비주얼 커버 이미지(예시): ARIA 속성 적용 흐름을 상징하는 비주얼 · 제작: Nanobanana AI “ARIA는 마지막 수단이다"라는 말이 있습니다. 먼저 시맨틱 HTML을 사용하고, HTML의 기본 기능으로 부족할 때만 ARIA를 더하는 거예요. 이 가이드는 이 원칙을 바탕으로 실제 프로젝트에서 ARIA를 효과적으로 활용하는 방법을 다룹니다. ...

글 작성일: 2026-01-22 · 글 읽기 시간: 20 분 · 글 단어 수: 9853 단어 · 글쓴이: Isaac
블로그 포스트 썸네일: WCAG 3.0 구조 해부: Success Criteria에서 Outcomes로 - WCAG 3.0의 혁신적인 구조 변화를 깊이 파헤칩니다. Guidelines에서 Outcomes로, 체크리스트에서 사용자 경험 중심 평가로의 전환을 실전 예제와 함께 알아보세요. (https://www.codeslog.com/ko/posts/wcag-3-structure-outcomes/)

WCAG 3.0 구조 해부: Success Criteria에서 Outcomes로

들어가며 “1.3.1 정보와 관계(Info and Relationships) - Level A” WCAG 2.2를 다뤄본 분이라면 이런 형식의 성공 기준(Success Criteria)에 익숙하실 겁니다. 번호가 있고, 레벨이 있고, 명확한 테스트 조건이 있죠. 이 구조는 15년 넘게 웹 접근성의 표준이었습니다. ...

글 작성일: 2026-01-19 · 글 읽기 시간: 21 분 · 글 단어 수: 10439 단어 · 글쓴이: Isaac
WCAG 3.0 시대의 시작 - 전통적인 WCAG 2.x 체크리스트에서 사용자 중심의 WCAG 3.0으로의 변화를 시각적으로 표현한 썸네일 이미지. 부드러운 그라데이션 배경 위에 포스트 제목과 주요 개념이 표시되어 있음

WCAG 3.0 시대의 시작: 왜 새로운 가이드라인이 필요한가?

들어가며 “우리 사이트는 WCAG 2.1 AA를 100% 통과했는데, 실제 스크린 리더 사용자가 회원가입을 못하더라고요.” 지난해 웹사이트 개발자에게 들었던 이 말이 아직도 귀에 맴돕니다. 접근성 감사를 통과하고, 녹색 배지를 받았지만, 정작 장애가 있는 사용자는 핵심 기능을 사용할 수 없었다는 이야기. 이것이 바로 현재 WCAG 2.x가 직면한 가장 큰 딜레마입니다. ...

글 작성일: 2026-01-12 · 글 읽기 시간: 18 분 · 글 단어 수: 8595 단어 · 글쓴이: Isaac
블로그 포스트 썸네일: 시맨틱 HTML 완벽 가이드 - div 지옥에서 벗어나 의미있는 HTML을 작성하는 방법을 알아봅니다.

시맨틱 HTML 완벽 가이드: div 지옥에서 벗어나는 방법

들어가며 웹 개발을 하다 보면 이런 코드를 마주하게 됩니다: html 라인 넘버 읽기: OFF 라인 넘버 읽기 기능 이 버튼은 스크린 리더 사용자를 위한 기능입니다. ...

글 작성일: 2025-12-23 · 글 읽기 시간: 19 분 · 글 단어 수: 9174 단어 · 글쓴이: Isaac