feat: 2024-10-10 블로그 수정

기술세미나/_posts/2024-10-10-about-a11y.md

@@ -14,52 +14,54 @@ banner:
 
 # 들어가는 말
 
-자기소개를 하는 멘트에 저는 “UX 측면에 신경을 많이 쓰는 것 같다.”라고 이야기 합니다. 그러나 “디자이너가 동일한 디자인 파일을 넘겨주었을 때, 개발자는 어떻게 하면 스스로의 역량을 가장 잘 나타낼 수 있을까요?”라는 질문을 받았습니다. 그에 대한 답을 고민해보고 a11y에 대해 설명하려고 합니다.
+자기소개를 하는 멘트에 저는 “**UX**측면에 신경을 많이 쓴다.”라고 이야기 합니다. 그런데 어느 날, 답변에 대한 후속 질문으로 “디자이너가 동일한 디자인 파일을 넘겨주었을 때, 개발자는 어떻게 하면 스스로의 역량을 가장 잘 나타낼 수 있을까요?”라는 질문을 받았습니다. 그에 대한 답을 고민하던 중 a11y(웹 접근성)에 대해 알게되었습니다. a11y란 무엇인지 어떤 이점이 있는지 이야기해보려 합니다.
+
+<br/>
 
 # 개발자가 고려할 수 있는 UX
 
 - **성능 최적화**
-  - 이미지 최적화, 지연 로딩(lazy loading), 코드 스플리팅 등으로 사용자가 불편함 없이 빠르게 페이지를 사용할 수 있습니다.
+  - 이미지 최적화, 지연 로딩(lazy loading), 코드 스필리팅 등으로 사용자가 불편함 없이 빠르게 페이지를 사용할 수 있습니다.
 - 에러 처리 및 예외 상황 관리
   - **유연한 에러 처리**: 사용자가 오류를 겪을 때 적절한 에러 메시지를 제공하고, 입력 오류가 발생했을 때 이를 명확히 알려줍니다.
 
 등등 다양한 요소를 고려하며 똑같은 디자인 파일을 보고 개발을 진행하여도 더 나은 결과를 만들어 낼 수 있을 것입니다.
 
 그러나 여기서 저는 UX를 더 넓은 의미로 보아야할 필요성이 있다고 느꼈습니다.
-
 더 나은 성능에 집중하는 것도 매우 필요하지만, 누구든 어떤 환경에서든 해당 서비스를 충분히 이용해야합니다.
+이런 시각에서 개발자고 고려할 수 있는 UX는 어떤 것이 있을까요?
 
-그런 시각에서 개발자고 고려할 수 있는 UX는 어떤 것이 있을까요?
+<br/>
 
 # 웹 접근성이란?
 
-웹의 창시자는 웹을 "장애에 구애 없이 모든 사람들이 손쉽게 정보를 공유할 수 있는 공간"이라고 이야기했습니다.
+웹의 창시자는 웹을 "장애에 구애 없이 **모든 사람들이 손쉽게 정보를 공유할 수 있는 공간**"이라고 이야기했습니다.
 
-이런 개념에서 웹의 정의의 시각에서 본다면 접근성이 매우 중요한 요소로 여겨질 수 있습니다. **접근성이란 남녀노소, 장애 유무와 상관없이 누구든 어디서든 모두가 동등하게 불편 없이 이용할 수 있도록 제품, 서비스, 환경 등을 디자인하는 것**을 의미합니다. 누구든지 어떤 상황, 능력에 구애받지 않고 모두에게 동일한 기회가 주어지는 것입니다. 이는 장애인만을 대상으로 한다고 느껴질 수 있지만 실제로는 모바일 장치를 사용하는 사람이나 느린 네트워크 연결을 사용하는 사람들도 포함하여 모든 사용자를 대상합니다.
+이런 개념에서 웹의 정의의 시각에서 본다면 `접근성`이 매우 중요한 요소로 여겨질 수 있습니다. **`접근성`이란 남녀노소, 장애 유무와 상관없이 누구든 어디서든 모두가 동등하게 불편 없이 이용할 수 있도록 제품, 서비스, 환경 등을 디자인하는 것**을 의미합니다. 누구든지 어떤 상황, 능력에 구애받지 않고 모두에게 동일한 기회가 주어지는 것입니다. 이는 장애인만을 대상으로 한다고 느껴질 수 있지만 실제로는 **모바일 장치를 사용하는 사람**들을 포함하여 모든 사용자를 대상합니다.
 
 그러면 접근성 중에서도 **웹 접근성**이라는 요소에 대해서 이야기해보려고 합니다.
 
 웹 접근성(Web Accessibility)은 모든 사용자가 신체적·환경적 조건에 관계없이 웹 사이트에서 제공하는 정보를 동등하게 이용할 수 있도록 보장하는 것을 말합니다.
 
-웹 접근성 너무 나도 좋은 취지이고 기업의 이미지에도 긍정적인 영향을 줄 수 있습니다. 따라서 필수적인 요소는 아니지만 필수여도 나쁘지 않은 요소라고 생각이 됩니다.
-
-그러나 왜 우리는 웹 접근성이라는 단어에 익숙하지 못한 것일까요?
+웹 접근성의 목적은 너무나 긍정적이고, 기업의 이미지에도 좋은 영향을 줄 수 있습니다. 긍정적인 효과뿐인데 왜 우리는 웹 접근성이라는 단어에 익숙하지 못한 것일까요?
 
 그 이유는 아마도 `굳이…?` 라는 단어가 따라오기 좋은 주제여서 그럴지도 모르겠습니다.
 
 코드가 복잡해지고, 개발 기간이 늘어나고, 우리 서비스가 그정도로 잘 될지도 모르겠고… 다양한 이유가 있습니다.
 
 그러나 UX에 관심이 있는 저로서는 고려를 해서 개발을 해보고 싶었고, 이런 분야도 있다! 라고 공유 드리고 싶었습니다.
 
+<br/>
+
 # 웹 접근성을 높이는 방법(시멘틱 웹)
 
-“상황에 맞는 적절한 태그를 사용해야한다!”라는 이야기는 종종 들어보셨을 것입니다.
+“상황에 맞는 **적절한 태그**를 사용해야한다!”라는 이야기는 종종 들어보셨을 것입니다.
 
-시맨틱 태그를 사용하면 웹의 모든 데이터를 기계가 이해할 수 있는 형태로 제작할 수 있게 되며 이를 시맨틱 웹이라고 부릅니다. 시맨틱 웹은 `스크린 리더`, `화면 돋보기`, `음성 인식`, `키보드 오버레이` 등의 다양한 보조 장치들이 문서를 이해하기 쉽게 해주기 때문에 **접근성을 높이는 데 도움**이 됩니다.
+**시맨틱 태그**를 사용하면 웹의 모든 데이터를 기계가 이해할 수 있는 형태로 제작할 수 있게 되며 이를 **시맨틱 웹**이라고 부릅니다. 시맨틱 웹은 `스크린 리더`, `화면 돋보기`, `음성 인식`, `키보드 오버레이` 등의 다양한 보조 장치들이 문서를 이해하기 쉽게 해주기 때문에 **접근성을 높이는 데 도움**이 됩니다.
 
 추가적으로 검색 엔진도 HTML 문서를 읽는 기계이기 때문에 시맨틱 태그를 사용해 웹을 개발하게 되면 **SEO(Search Engine Optimization, 검색 최적화)에도 도움**이 됩니다.
 
-이런 장점들을 기반으로 우리는 상황에 맞는 적절한 태그를 활용하는 시맨틱 웹으로 개발하는 것이 무작정 div 쌓아가며 개발하는 것 보다 더 나은 성능을 보일 것입니다.
+이런 장점들을 기반으로 우리는 상황에 맞는 적절한 태그를 활용하는 시맨틱 웹으로 개발하는 것이 무작정 div 쌓아가며 개발하는 것보다 더 나은 성능을 보일 것입니다.
 
 간단한 예시를 살펴보겠습니다.
 
@@ -84,6 +86,8 @@ banner:
 
 적절한 태그를 활용하면, 접근성을 높힐뿐더러 검색 최적화와 개발이 더 쉬워진다는 장점도 있습니다.
 
+<br/>
+
 # 좋은 시멘틱-**문자 콘텐츠**
 
 ```jsx
@@ -115,7 +119,7 @@ banner:
 
 ```
 
-위 예시처럼 적절한 태그를 활용하여 웹 페이지 마크업을 구성하게 된다면 스크린 리더를 활용하여 페이지를 보다 **“잘”**읽을 수 있습니다.
+위 예시처럼 적절한 태그를 활용하여 웹 페이지 마크업을 구성하게 된다면 스크린 리더를 활용하여 페이지를 보다 **잘**읽을 수 있습니다.
 
 1. 콘텐츠를 읽어나가는 동안 스크린 리더가 어떤 것이 헤딩이고, 어떤 것이 문단인지를 알려주면서 각각의 헤더를 읽어줍니다.
 2. 사용자가 편안한 속도로 탐색을 진행할 수 있도록 하나의 요소가 끝나면 멈춥니다.
@@ -124,21 +128,23 @@ banner:
 
 와 같은 장점을 제공합니다.
 
+<br/>
+
 # 좋은 시멘틱-**페이지 레이아웃**
 
-페이지를 구성하다보면 우리는 `Header`, `Footer`, `Main`, `Nav` 등등 다양한 태그를 쓰곤 합니다. 그러나 쓰지 않는 경우도 있죠. 그렇다면 div를 나열한 레이아웃과 적절한 태그를 활용한 레이아웃이 무엇이 다를까요?
+페이지를 구성하다보면 우리는 `Header`, `Footer`, `Main`, `Nav` 등등 다양한 태그를 쓰곤 합니다. 그러나 쓰지 않는 경우도 있죠. 그렇다면 `div를 나열한 레이아웃`과 `적절한 태그를 활용한 레이아웃`이 무엇이 다를까요?
 
 이 또한 스크린 리더로 페이지를 읽어본다면 차이를 알 수 있습니다.
 
-div혹은 table을 통해 만든 레이아웃은 컨텐츠를 스크린 리더로 읽을 때 마크 업이 끼어들어 사용자에게 혼란을 줄 수 있습니다. 그러나 적절한 태그를 활용한 곳에서는 그런일이 일어나지 않습니다. 또한, 코드 측면에서도 적절한 의미가 담겨있는 코드는 다른 개발자가 보기에 이해가 더 잘됩니다. 이는 유지보수 측면에서도 큰 이점을 가지고 옵니다.
+div혹은 table을 통해 만든 레이아웃은 컨텐츠를 **스크린 리더로 읽을 때** 마크 업이 끼어들어 사용자에게 혼란을 줄 수 있습니다. 그러나 적절한 태그를 활용한 곳에서는 그런일이 일어나지 않습니다. 또한, 코드 측면에서도 적절한 의미가 담겨있는 코드는 다른 개발자가 보기에 이해가 더 잘됩니다. 이는 **유지보수** 측면에서도 큰 이점을 가지고 옵니다.
 
 - 네비게이션 메뉴는 [`<nav>`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/nav)
 - 푸터는 [`<footer>`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/footer)
 - 반복되는 콘텐츠 단위는 [`<article>`](https://developer.mozilla.org/ko/docs/Web/HTML/Element/article)
 
 등 적절한 섹션 요소를 사용하는 것이 개발하는 것이 접근성과 유지보수에서의 장점을 제공합니다.
 
-참고: [스크린 리더의 HTML5 섹션 요소 지원](https://www.accessibilityoz.com/2020/02/html5-sectioning-elements-and-screen-readers/)
+<br/>
 
 # 좋은 시멘틱-UI 컨트롤
 
@@ -190,36 +196,48 @@ UI 컨트롤의 예시는 다양한 input이 있는 form에서 탭 키를 눌러
 
 ```
 
-탭을 통해서 각 Input들을 이동할 수 있는 것을 확인할 수 있을 것입니다. 나아가 `enter` 등을 활용하여 적절한 제출 이벤트를 호출할 수도 있습니다.
+탭을 통해서 각 Input들을 이동할 수 있는 것을 확인할 수 있습니다. 나아가 `enter` 등을 활용하여 적절한 제출 이벤트를 호출할 수도 있습니다.
 
 UI 컨트롤은 마우스를 못쓰는 상황에서도 적절하게 웹을 사용할 수 있게 합니다.
 
+<br/>
+
 # 접근성이 완벽한 서비스?
 
-"100% 접근성"은 실현 불가능한 이상이라고 합니다. 어디서나 예외는 존재하고 수 많은 사용자들 중 어떤 사용자는 어떠한 콘텐츠를 사용하기 어렵다고 느낄 것입니다. 그렇지만 할 수 있는 만큼 노력해야 합니다.
+100% 접근성"은 실현 불가능한 이상이라고 합니다.  
+어디서나 예외는 존재하고 수 많은 사용자들 중 어떤 사용자는 어떠한 콘텐츠를 사용하기 어렵다고 느낄 것입니다. 그렇지만 할 수 있는 만큼 노력해야 합니다.
+
+<br/>
 
 몇가지 예시를 들어보겠습니다.
 
-- 시각적으로 화려한 그래픽을 활용한 웹 서비스
+- **시각적으로 화려한 그래픽**을 활용한 웹 서비스
 
-시각적인 어려움을 겪는 사용자를 위한 스크린 리더는 이미지를 읽을 수 없습니다. 따라서 해당 사용자들에게는 중요한 정보가 전달되지 않을 수 있습니다.
+**시각적인 어려움을 겪는 사용자**를 위한 스크린 리더는 이미지를 읽을 수 없습니다. 따라서 해당 사용자들에게는 중요한 정보가 전달되지 않을 수 있습니다.
 
 ⇒ 이미지를 설명하는 `alt` 속성을 제공하고, 텍스트로 동일한 정보를 전달하려고 하지만, 복잡한 그래픽이나 비주얼 데이터는 그 자체로 완벽하게 전달하기 어려울 수 있습니다.
 
-- 동적인 콘텐츠나 복잡한 양식을 가진 웹 서비스
+- **동적인 콘텐츠**나 **복잡한 양식**을 가진 웹 서비스
 
-드래그 앤 드롭 기능이 포함된 복잡한 대시보드는 마우스를 사용할 수 없는 사람이나 키보드만 사용하는 사용자들에게 불편할 수 있습니다.
+**드래그 앤 드롭 기능**이 포함된 복잡한 대시보드는 마우스를 사용할 수 없는 사람이나 키보드만 사용하는 사용자들에게 불편할 수 있습니다.
 
 ⇒키보드 접근성을 개선하고, 드래그 앤 드롭 대신 키보드로 선택할 수 있는 대안을 제공하지만, 인터페이스의 모든 복잡한 기능을 동일한 수준으로 제공하는 것은 어려울 수 있습니다.
 
-모든 사용자를, 모든 접근성을 구축하는 것은 불가능 하겠지만, 할수 있는 만큼의 최대한 노력을 해하고 생각을 해봐야한다는 것이 매우 중요한 포인트가 될 것입니다.
+<br/>
+
+모든 사용자를, 모든 접근성을 구축하는 것은 불가능 하겠지만, **할수 있는 만큼의 최대한 노력**을 해하고 생각을 해봐야한다는 것이 매우 중요한 포인트가 될 것입니다.
+
+<br/>
 
 # 마무리 하는 말
 
-UX를 고려하는 개발에 저는 빠른 로딩, 상황에 따라 밀리지 않는 화면 등만을 고려해왔습니다.
+UX를 고려하는 개발에 저는 빠른 로딩, 상황에 따라 밀리지 않는 화면 등만을 고려해왔습니다.\
+**웹 접근성**이라는 주제로 테크 블로그를 준비하며 다양한 사람이 서비스를 차별없이 접할 수 있는 것에 대해서 고민해 보았습니다. 단순하게 "적절한 태그를 쓰는 웹이 좋지!"라는 생각에서 **시맨틱 웹**의 장점도 확실하게 알아 볼 수 있었습니다.  
+이 글을 읽는 분들도 프로젝트에 적절한 접근성을 제공하여 다양한 사람들이 다양한 상황에서 웹을 접근할 수 있게 고민해 보는 시도를 해봤으면!이라는 바람과 함께 글을 마치겠습니다.
 
-웹 접근성이라는 주제로 테크 블로그를 준비하며 다양한 사람이 서비스를 차별없이 접할 수 있는 것에대해서 고민해보았습니다. 그냥 적절한 태그를 쓰는 웹이 좋지!라는 단순한 생각에서 시맨틱 웹에 대한 장점도 조금 더 확실하게 알아 볼 수 있었습니다. 이 글을 읽는 분들도 프로젝트에 적절한 접근성을 제공하여 다양한 사람들이 다양한 상황에서 웹을 접근할 수 있게 고민해 보는 시도를 해봤으면!이라는 바람과 함께 글을 마치겠습니다.
+<br/>
 
+참고:   
 https://developer.mozilla.org/ko/docs/Learn/Accessibility
 
-https://dev.gmarket.com/63
+[스크린 리더의 HTML5 섹션 요소 지원](https://www.accessibilityoz.com/2020/02/html5-sectioning-elements-and-screen-readers/)