Merge pull request #3 from DO-SOPT-WEB/week1_article

[1주차 생각 과제] 웹 접근성과 검색엔진 최적화
DO-SOPT-WEB · Jun 18, 2024 · ce39541 · ce39541
2 parents 2369ef7 + f93fdca
commit ce39541
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 0 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/SimSimS/.DS_Store b/SimSimS/.DS_Store
diff --git a/week1/.DS_Store b/week1/.DS_Store
diff --git a/week1/article/article.md b/week1/article/article.md
@@ -0,0 +1,62 @@
+# 웹 접근성
+
+## Q1. 웹 접근성은 무엇일까?
+
+한국웹접근성인증평가원에서는 「지능정보화기본법」에 따라 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항으로 정의하고 있다. (한국웹접근성인증평가원의 존재는 오늘 처음 알았다...)
+
+즉 더 많은, 더 다양한 사용자가 `차별 없이 동등하게 콘텐츠에 접근`할 수 있도록 하는 것이 웹 접근성이라고 이해하고 있다. 장애/비장애의 영역뿐만 아니라 사용자의 지역, 접속 환경, 접속 기기, 나이, 사용 언어 등 굉장히 포괄적인 범위를 포함할 수 있을 것이다.
+
+## Q2. 접근성을 위한 개발은 어떤 것들이 있을까?
+
+웹 접근성을 준수하기 위해서는 다음과 같은 것을 고려해야 한다.
+
+1. 시각 : 실명, 색각 이상, 다양한 형태의 저시력을 포함한 시각 장애
+2. 이동성 : 파킨슨병, 근육병, 뇌성마비, 뇌졸중과 같은 조건으로 인한 근육 속도 저하, 근육 제어 손실로 말미암아 손을 쓰기 어렵거나 쓸 수 없는 상태
+3. 청각 : 영상, 음성 콘텐츠에 자막, 원고, 수화 등의 대체수단 부제로 인한 인식이 불가능한 상태
+4. 인지 : 문제 해결과 논리 능력, 집중력, 기억력에 문제가 있는 정신 지체 및 발달 장애, 학습 장애 (난독증, 난산증 등)
+
+이러한 문제를 보조하여 웹 사용에 문제가 없도록 하기 위해서는 스크린 리더, 화면 확대도구, 음성인식 등의 기술을 사용할 수 있다.
+
+접근성을 고려한 개발을 한다는 것은, 특정 상황에서 접근할 수 없는 컨텐츠에 대해 대안책을 마련해주는 것이라고 볼 수 있겠다.
+이에 대하여 다음과 같은 예시가 있다.
+
+- 이미지, 차트, 오디오나 영상, 폼과 인풋 등 텍스트가 아닌 다양한 형태의 인터페이스를 대체할 수 있는 설명을 제공한다.
+- 다양항 크기와 형태의 뷰포트에서 콘텐츠의 위치와 크기가 재조정되어 사용하는데 문제가 없도록 한다.
+- 애니메이션, 배경음악 등 방해가 될 수 있는 요소에 대해 사용자가 끄고 킬 수 있는 방법을 제공한다.
+
+## Q3. 접근성을 위한 개발을 꼭 해야 할까?
+
+웹 사이트의 목적과 상황에 따라 웹 접근성은 상당히 큰 부분을 차지할 수 있다. 접근성의 향상은 사용자 경험의 개선으로 이어지고, 이는 기업의 실적으로 이어지기 때문이다. 비용 측면이 아니더라도, 불특정다수의 사용자들이 직접 사용하고 가치를 얻을 서비스를 개발하는 입장에서 장벽없는 접속, 다양한 환경의 사용자 UX를 고려하는 것은 필수불가결하다고 생각한다.
+
+또한 웹 어플리케이션은 복합적인 환경 위에서 동작하며, 다양한 브라우저의 기술이 빠른 속도로 변화하므로 프론트엔드 개발자로서 이런 변화의 속도에 발맞춰 계속해서 공부하고 페이지를 개선하는 것은 반드시 갖춰야 할 자세이다.
+
+# 검색엔진 최적화(SEO)
+
+## Q1. 검색엔진 최적화를 하는 방법에는 무엇이 있을까?
+
+[Google SEO 기본 가이드](https://developers.google.com/search/docs/beginner/seo-starter-guide#googleseeyourpage)
+
+### Google의 SEO 체크리스트 항목 및 중요도 배점
+
+![Untitled 5](https://user-images.githubusercontent.com/55528304/229984628-328a5142-1bc0-4109-8f1f-72aff2f9f63f.png)
+
+![Untitled 6](https://user-images.githubusercontent.com/55528304/229984609-ad561d04-81e4-46e7-97c8-2c4768f660a9.png)
+
+### SEO 최적화를 위한 코드 작성
+
+- 문법에 맞는 HTML 작성
+  - 시맨틱 태그 사용하기
+  - [Google Rich Result Test](https://search.google.com/test/rich-results?hl=ko)로 잘못된 마크업을 사용했는지 디버깅
+- 고유하고 정확한 페이지 제목 사용하기
+  - 눈길을 사로잡는 문구 사용
+  - 페이지마다 고유한 title 태그 작성
+  - 제목의 시작이나 끝에 사이트 이름을 포함하고 나머지 제목은 –, :, |를 사용
+- 메타 태그 사용
+  - 페이지를 정확하게 나타내는 설명 작성
+  - 설명에 콘텐츠 관련 정보를 포함
+- a 태그로 적절한 키워드 배치
+  - `<div>` , `<button>` 보다는 `<a>` 이용
+  - `<a href>` 요소가 없으면 Google이 URL을 크롤링하지 않음
+- HTTPS 적용
+  - https 보안 프로토콜을 사용하는 사이트에 SEO 점수를 추가 부여함
+- 올바른 상태 코드 작성 : [관련 자료](https://developers.google.com/search/docs/crawling-indexing/http-network-errors?hl=ko)