Merge pull request #3 from DO-SOPT-WEB/week1/thinkAssign

[ 1주차 생각 과제 ] 🖤 웹 접근성과 검색엔진 최적화(SEO)

article/웹접근성과SEO.md

@@ -0,0 +1,147 @@
+# ⭐️ 1. 웹 접근성
+
+## 1️⃣ 웹 접근성은 무엇일까?
+
+### 웹 접근성(Web Accessibility)
+
+: 남녀노소, 장애 유무와 상관 없이 웹 사이트에서 제공하는 정보에 동등하게 접근하고 이해할수 있도록 보장하는 것
+
+> 정보통신접근성(Web 접근성)은 「지능정보화기본법」에 따라 모든 사용자가 신체적·환경적 조건에 관계없이 웹 서비스에서 제공하는 정보를 동등하게 접근하고 이용할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항입니다.
+
+> - 한국웹접근성인증평가원\_
+>   장애를 가진 사용자들이 사용할 수 있도록 웹 사이트, 도구, 기술이 설계 및 개발된 것 *- W3C*
+
+또한 웹 접근성은 법적 의무로 보장되어 있다.
+
+- **웹 접근성 법적 의무**
+
+: 웹 접근성 보장은 「국가정보화기본법」과 「장애인차별금지 및 권리구제 등에 관한 법률(이하 "장애인차별금지법")」등 법률에 명시된 의무사항이다. 특히 장애인차별금지법은 행위자에 대한 단계적 범위를 명확히 하였으며, 불이행시 처벌 등이 구체적으로 성문화된 법입니다. 이에 따라 모든 공공기관은 2009년 4월 11일 부터 웹 접근성을 준수해야 하고, 단계적으로 2015년까지 모든 웹 사이트가 웹 접근성을 준수해야 한다.
+
+### 웹 접근성 표준의 주요 원칙
+
+- **한국형 웹 콘텐츠 접근성지침(KWCAG, 한국형 웹 접근성 표준)** : 웹 컨텐츠 접근성 가이드라인(WCAG)를 인용 표준으로 국내 실정에 맞게 반영한 것. 4가지 원칙, 이들 원칙을 준수하기 위한 14개 지침, 그리고 지침 준수를 확인하기 위한 33가지 검사 항목이 존재한다.
+
+1. **인식의 용이성**
+
+   : 사용자는 장애 유무와 관계 없이 웹사이트에서 제공하는 모든 컨텐츠를 인식할 수 있어야 한다.
+
+   - 관련 지침 : 1) 대체 텍스트 제공, 2) 멀티미디어 대체수단 제공, 3) 컨텐츠 적응성, 4) 컨텐츠 명료성
+
+2. **운용의 용이성**
+
+   : 사용자는 장애 유무와 관계 없이 웹사이트에서 제공하는 모든 컨텐츠를 운용할 수 있어야 한다.
+
+   - 관련 지침 : 1) 입력장치 접근성, 2) 충분한 시간 제공, 3) 광고민성 발작 예방, 4) 쉬운 내비게이션, 5) 입력 방식
+
+3. **이해의 용이성**
+
+   : 사용자는 장애 유무와 관계 없이 웹사이트에서 제공하는 컨텐츠를 이해할 수 있어야 한다.
+
+   - 관련 지침 : 1) 가독성, 2) 예측 가능성, 3) 입력 도움
+
+4. **견고성**
+
+   : 사용자는 기술에 영향을 받지 않고 원하는 콘텐츠를 이용할 수 있어야 한다.
+
+   - 관련 지침 : 1) 문법 준수, 2) 웹 어플리케이션 접근성
+
+<br/>
+<hr/>
+
+## 2️⃣ 접근성을 위한 개발은 어떤 것들이 있을까?
+
+접근성을 위한 개발로는 대표적으로 시맨틱 태그를 사용하여 웹 표준을 준수하는 방법이 있다. 시맨틱 태그를 사용한 시맨틱 웹은 웹 브라우징에 쓰이는 스크린 리더, 화면 돋보기, 음성 인식, 키보드 오버레이 등의 기계가 웹을 좀 더 쉽게 이해할 수 있도록 해주기 때문에 접근성을 높이는데 도움이 된다.
+
+또한 시맨틱 웹은 SEO에도 도움이 된다. 시맨틱 태그에 대한 자세한 언급은 검색 엔진 최적화에서 다루고, 시맨틱 태그 외에 웹 접근성을 위해 사용할 수 있는 기법들에 대해 살펴보자.
+
+1. **이미지 `<img>`**
+
+   - 이미지는 텍스트가 아니라 콘텐츠 요소이기 때문에 그 의미나 용도를 스크린 리더가 인식할수 있도록 대체 텍스트를 제공해야 한다.
+   - `alt` : 이미지에 대한 텍스트 설명을 제공, 스크린 리더는 이 alt의 값을 읽어 사용자에게 이미지를 설명하여 접근성 측면에서 매우 유용하다.
+
+1. **버튼 `<button>`**
+
+   - 브라우저는 코드를 스크린 리더가 읽을 수 잇는 접근성 트리(Accesibility Tree)로 만드는데, 스크린 리더는 접근성 트리에 표시되는 요소의 Name (Accessible name)을 기반으로 해석한다.
+     - Accessible Name : 스크린 리더가 요소를 포커스 했을 때 읽는 값
+       - (1) author : aria-label, aria-labelledby, title, alt, desc
+       - (2) contents : text 노드
+   - 버튼은 author가 설정되지 않은 경우 자식 요소의 Accesible Name을 모아 contents로 사용하는 **Children Presentational**이라는 특징을 갖는다.
+   - 따라서 버튼을 사용할 때 서비스를 정확히 이해하고 사용할 수 있는 Accesible Name을 제공하는 마크업 작업이 중요하다.
+
+   ```html
+   <button type="button">
+     <!-- <img src="/img/img_common_question.png" alt="물음표" />: 구체적이지 않으며 추상적 -->
+     <img src="/img/img_common_question.png" alt="내 대출 승인율이란" />
+   </button>
+   ```
+
+1. **표 `<table>`**
+   - 표는 알아보기 쉽도록 표의 형태가 데이터 표인지, 레이아웃 표인지 구분하여 서로 다른 방식으로 마크업 해야 한다.
+   - 표를 레이아웃 용도로 생각해 `<table>` 태그를 함부로 남용하면 스크린 리더는 데이터 추출의 어려움을 겪게 되고 사용자도 정보 탐색의 어려움을 느끼게 된다.
+   - 스크린 리더는 레이아웃 표와 데이터 표를 다르게 취급한다. - **레이아웃 표** : 소스 코드 순서에 따라 표의 내용을 간단히 읽는다. - 레이아웃 테이블은 표의 의미를 갖지 않고 단순 모양을 잡기 위한 목적으로 사용해야 한다.
+   → 따라서 <table> 태그를 사용하지 않고 CSS로 테이블 형태를 만들어 사용하는 것을 권장
+   → <table> 태그를 사용해야 하는 경우면 s`ummary 속성, <caption>, <thead>, <tbody>, <tfoot>, <th> 요소 등 의미 있는 요소를 사용하지 않아야 함`. - **데이터 표** : 열 및 행 수를 포함하여 데이터의 존재를 식별하고, 표 탐색 기능을 제공해 행 및 열 머리글 읽기 등을 수행한다. - 표를 볼 수 없는 사람은 표의 행과 열을 구분할 수 없기 때문에 테이블 내 요소간 구조에 대한 정보를 제공해야 한다. → ex. `<caption>`, `scope 속성` 추가
+   <br/>
+   <hr/>
+
+## 3️⃣ 접근성을 위한 개발을 꼭 해야 할까?
+
+웹 접근성을 위한 개발은 다음과 같은 기대효과가 있다.
+
+### 웹 접근성의 효과
+
+1. **사용자층 확대** : 서비스 이용에 장애를 가진 사용자를 배려한 서비스는 이들을 신규 고객으로 서비스와 함께 성장하는 대상으로 바라볼 수 있다.
+2. **규정과 법적 요구사항에 대한 준수**: 장애인 차별 금지법 등, 접근성을 고려하여 서비스를 제공한다면 법적 요구사항을 준수할 수 있다.
+3. **서비스를 이용하는 모든 사용자에게 이로움** : 장애를 가진 사람 뿐만 아니라, 써비스를 이용하며 겪는 불편함을 웹 접근성을 준수하며 개선시키면 모든 사용자에게 편리함을 제공할 수 있다.
+4. **사회 공헌 기업으로서의 기업 이미지 향**상 : 웹 접근성을 준수하기 위한 노력은 사회 정보취약계층이 인터넷상에서 차별 없이 동등하게 정보 접근 및 이용 가능하도록 하기 위한 사회 공헌적 노력이며 이를 통해 기업 이미지도 향상 될 수 있다.
+
+따라서, 웹 접근성을 고려한 개발을 통해 모든 사용자에게 동일한 정보를 제공하는 서비스를 만들어야 한다고 생각한다.
+
+---
+
+<br/>
+<br/>
+
+# ⭐️ 2. 검색엔진 최적화(SEO)
+
+## 1️⃣ 검색엔진 최적화 하는 방법에는 무엇이 있을까?
+
+### 1) 검색엔진 최적화란?
+
+: 검색엔진 최적화란 검색 엔진이 이해하기 쉽도록 홈페이지의 구조와 페이지를 개발 해 검색 결과 상위에 노출될수 있도록 하는 작업이다.
+
+- 검색 엔진이 하는 일 : 고객의 검색어(Query)에 제일 가까운 답을 제공해준다. 즉, 컨텐츠의 랭킹을 매겨 상단 노출시켜주는 기능을 수행한다.
+
+### 2) 검색엔진 최적화를 위한 방법
+
+1. `**시맨틱 태그` 사용\*\*
+
+- 시맨틱 태그를 사용한 시맨틱 웹은 페이지의 다른 섹션과 레이아웃을 더 잘 정의하여 어떤 종류의 컨텐츠를 포함하고 있는지 알려주는 역할을 하여, HTML을 보다 이해하기 쉽게 만든다.
+- 의미에 맞는 태그를 사용하여 사용자 뿐만 아니라 기계 입장에서도 컨텐츠를 더 쉽게 이해하도록 만들 수 있으며, 이를 통해 SEO 성능을 향상시킬 수 있다.
+- 시맨틱 태그를 사용해야 하는 이유는, 기계가 태그의 기본 역할을 암묵적으로 자동 결정하여 사용자에게 전달하기 때문이다.
+- 시맨틱 태그 예시
+  - 페이지 제목 또는 글 제목에는 `<header>` 사용
+  - 콘텐츠 작성자, 저작권 정보, 관련 문서 등의 내용을 포함할 때는 `<footer>` 사용
+  - 문서의 핵심 주제를 포함하는 메인 콘텐츠에 `<main>` 사용
+  - 독립적으로 구분해야 하는 콘텐츠에 `<article>` 사용
+  - 페이지의 가장 중요한 제목으로 `<h1>` 사용
+  - 순서가 없는 목록으로 `<ul>`과 `<li>` 사용
+
+1. `**메타 태그` 사용\*\*
+
+- 메타 태그(Meta Tag) : 웹페이지가 담고 있는 컨테츠가 아닌 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 HTML 태그
+- 메타 태그는 <head> 요소 아래에 배치 되어 일반 유저가 보게 되는 웹페이지의 컨텐츠에는 아무 영향을 주지 않으나, 검색 엔진과 같은 기계들이 웹페이지를 읽어야 할 때는 메타 태그의 내용들이 해당 서비스에서 어떻게 표시될지를 결정하는 매우 중요한 요소가 된디.
+- 메타 태그 예시
+
+  - `<title>` : 웹 페이지의 제목을 명시
+  - `<description>` : 웹 페이지의 설명을 요약한 한 두줄의 문장을 명시
+  - `<robots>` : 웹 페이지 별 검색 로봇의 접근 여부를 설정할 때 활용할 수 있는 태그
+  - `<canonical>` : 여러 URL을 가진 웹페이지가 있을 때, 해당 페이지의 대표 URL을 설정할 수 있는 태그. 검색 로봇이 웹페이지를 크롤링할 때 중복 URL로 인한 페널티가 적용되게 하지 않게끔 도와주는 역할을 한다.
+  - `오픈 그래프 태그 (og)` : 웹 페이지의 링크가 카카오톡이나 기타 SNS에서 공유될 때 어떻게 노출될지를 정의 해 주는 역할.
+
+<br/>
+
+- 참고 자료
+  https://yozm.wishket.com/magazine/detail/1942/
+  https://tech.kakaopay.com/post/accessibility-stories-for-everyone/
+  https://yozm.wishket.com/magazine/detail/1540/