docs: 생각과제

week1/think.md

@@ -0,0 +1,83 @@
+## 웹 접근성이란?
+
+장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것
+
+![Untitled](https://prod-files-secure.s3.us-west-2.amazonaws.com/7364d05f-d620-466c-9013-da1551ba128c/cd2a1ce0-2850-484f-91a5-7cf5d0ee6d4b/Untitled.png)
+
+## 접근성을 위한 개발은 어떤 것들이 있을까?
+
+### 인식의 용이성을 고려한 개발
+
+사용자는 장애 유무와 관계없이 웹사이트에서 제공하는 모든 콘텐츠를 인식할 수 있어야합니다.
+
+- 대체 텍스트 제공
+    - 이미지, 영상과 같이 텍스트가 아닌 콘텐츠를 이용할 경우 그 의미나 용도를 인식할 수 있도록 간단하고 명료한 대체 텍스트를 제공해야합니다. 여기에는 `<img>` `<area>` 등의 alt 속성에 적절한 대체 텍스트를 제공하는 것 등을 예시로 들 수 있습니다.
+
+### 이해의 용이성을 고려한 개발
+
+- 예측 가능성
+    - 입력이나 기능, 정보는 사용자가 예측할 수 있는 형태로 제공되어야 합니다. 특히 새 창, 팝업창 등은 사용자가 인지하지 못한 상황에서 열리지 말아야합니다.
+
+### 시맨틱 태그 사용
+
+시각장애가 있는 사용자가 화면판독기(스크린리더)로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있습니다.
+
+## 웹접근성을 위한 개발을 꼭 해야할까?
+
+웹의 창시자 팀 버너스 리는 ‘웹의 힘은 보편성에 있다’고 했던 만큼 웹 접근성을 준수하는 것은 웹의 기본 정신을 지킨다는 점에서 중요합니다. 또한 실무적인 차원에서 보면, 웹 접근성은 장애인 차별 금지법과 지능 정보화 기본 법에 의한 법정 의무사항이기도 합니다. 따라서 웹 접근성은 서비스를 만들고자 한다면 반드시 지켜야 하는 사항입니다.
+
+또 웹 접근성 표준을 지키면 layout요소들로 페이지 레이아웃을 쉽게 파악할 수 있어 코드 가독성을 증가시키고 프론트엔드 테스트에도 이점이 있을 수 있습니다 (RTL사용)
+
+마지막으로 서비스 관점에서도 SEO(검색엔진최적화)에서 이점을 가져갈 수 있습니다.
+
+웹 접근성을 준수한 마크업은 SEO에 유리합니다. 이는 검색 크롤러가 컨텐츠를 이해하는데 도움을 주기 때문입니다. 검색 크롤러는 텍스트를 읽을 수는 있지만 시맨틱마크업이 없다면 각 요소의 중요도와 의미까지는 읽어내지 못합니다. 검색 엔진의 크롤러는 웹 사이트 요소간의 관계와 중요도를 파악하여 중요한 키워드를 검색 인덱스에 넣어 검색 결과를 최적화하려고 노렵합니다. 사이트에서 가장 중요한 키워드로 검색엔진에 노출될 수 있는 `가능성을 높여`줍니다. 
+
+다양한 능력을 가진 사람들에게 동등한 접근과 기회를 제공하기 위해 웹에 접근 가능하다는 것은 매우 중요할뿐더러 서비스와 개발자의 입장에서도 웹접근성 표준을 지킨 개발은 많은 이점을 남기기 때문에 웹 접근성을 위한 개발을 지향해야합니다.
+
+## **웹사이트의 접근성 테스트**
+
+- 웹사이트의 접근성을 쉽게 테스트할 수 있는 리소스가 많이 나와 있습니다. 몇 가지 인기 있는 도구는 다음과 같습니다.
+- WAVE: 웹사이트의 접근성을 검사하고 그 결과에 대한 보고서를 생성하는 무료 도구입니다. [WAVE에 대해 자세히 알아보세요.](https://wave.webaim.org/)
+- AXE: 자동화된 테스트를 사용하여 웹 접근성을 테스트하고 개선하기 위한 무료 Chrome 확장 프로그램입니다. [AXE에 대해 자세히 알아보세요.](https://chrome.google.com/webstore/detail/axe-devtools-web-%20%0Aaccessib/lhdoppojpmngadmnindnejefpokejbdd)
+- Lighthouse: Lighthouse는 개발자가 웹사이트의 성능과 접근성을 테스트하는 데 사용하는 인기 있는 오픈 소스 도구입니다. [여기](https://developer.chrome.com/docs/lighthouse/overview/#:~:text=Lighthouse%20is%20an%20open%2Dsource,apps%2C%20SEO%2C%20and%20more)에서 사용할 수 있습니다.
+- NVDA: NVDA(NonVisual Desktop Access)는 시각 장애인이 웹은 물론 컴퓨터의 다른 애플리케이션과 소프트웨어에 액세스하고 탐색할 수 있도록 지원하는 무료 오픈 소스 스크린 리더입니다. 이를 다운로드하여 웹사이트와 상호 작용하고 접근성을 개선할 수 있는 부분에 대한 더 많은 인사이트를 얻을 수 있습니다. [여기](https://www.nvaccess.org/)에서 다운로드할 수 있습니다.
+
+## 검색엔진최적화(SEO)란?
+
+검색엔진이 쉽게 이해할 수 있는 형태로 내 웹페이지를 구성하여 유저가 검색했을 때 상단에 
+
+나의 서비스가 노출되도록 하는 것.
+
+## 검색엔진 최적화의 방법
+
+### meta tage 사용
+
+- title 태그
+    - 웹페이지를 검색했을 때 노출되는 제목
+    - 브라우저 탭 상에서도 노출되므로 중요도가 높음
+- decriction 태그
+    - 웹페이지의 설명을 요약한 한 두 줄의 문장을 뜻함
+    - 되도록이면 페이지별 메타 디스크립션은 다른 내용의 키워드로 작성되는 것이 좋음
+- robots 태그
+    - 메타 태그 중 로봇 태그는 웹페이지 별 검색 로봇의 접근 여부를  설정할 때 활용할 수 있는 태그.
+    - 특정 속성을 정의함으로써 검색 로봇이 크롤링하고 색인할 수 있는 권한을 받거나 받지 못함
+
+### 오픈그래프 태그
+
+웹페이지의 링크가 카카오톡이나 기타 SNS에서 공유될 때 어떻게 노출될지 정의해 주는 역할을 합니다.
+
+단순히 효과적으로 공유될 수 있는 것 뿐만 아니라, 검색 엔진 최적화 과정에서 해당 웹페이지가 SNS에서 얼마나 공유되고 있는지 (혹은 얼마나 트래픽이 일어나고 있는지) 판단하는 기준이 되어 검색 상위 노출을 위한 평가에도 영향을 줄 수 있습니다.
+
+### react helmet 사용
+
+React에서 CSR은 아래와 같은 파일을 초기에 렌더링 한후 자바스크립트 파일 렌더 따라서 html이 비어있어서 seo에서 단점을 가지고 있다고 합니다.
+
+```jsx
+<div id="root"></div>
+```
+
+하지만 ! react-helmet라이브러리로 meta tag를 동적으로 관리 가능합니다 
+
+### SSR사용 (NEXT.js)
+
+HTML 파일에 모든 정보가 포함되어 있기 때문에 봇이 데이터 수집 가능)