첫 Lighthouse 개선기 (Accessibility/Best Practices/SEO)

수 많은 강의, 수 많은 블로그를 보면서 `Lighthouse`에 대해 많은 말을 들었다.

최적화에 도움이 되고 성능 개선에 필요한 필수 과정이라는 것을 알고 있었지만, 보고 듣기만 했을 뿐 직접 `Lighthouse`를 사용한 적이 없었다. 미루고 미루다 이번에 `Lighthouse` 사용을 결심하고 기존 프로젝트에 사용해봤다.

 

기존 `Quick-News` 프로젝트에 `Lighthouse`를 분석해봤다.

Quick-News Lighthouse 결과

 

처참했다.

이 프로젝트를 리팩토링하며, 많은 블로그를 읽고 ChatGPT를 활용해 최대한 코드를 최적화했다고 생각했는데 그게 제대로 된 방법이 아니었다는 것을 알게 된 결과였다.

일단, 가장 처참한 `Performace(성능)`은 마지막으로 미루고 빠르게 개선할 수 있는 나머지 3개를 개선하기로 결정했다.

 

Accessibility 개선

Accessibility 문제점

 

위 에러 내용을 읽어보면 뒤집어야할 정도로 큰 문제는 아닌 것으로 파악됐다.

 

buttons do not have an accessible name

이 문제는 `button`이 어떤 역할을 하는지 명시하라는 말이라고 이해했다. 그래서 검색해보니 `aria-label`을 추가하여 "이 버튼이 이러한 역할을 하는 것"이라고 명시하도록 하니 문제가 해결됐다.

 

<button aria-label="sum">더하기</button>

 

위 처럼, `aria-label`로 텍스트 콘텐츠를 통해 버튼에 명확한 이름을 부여하는 이유는 스크린 리더와 같은 보조 기술을 사용하는 사용자에게 시각적으로 설명을 줄 수 있기 때문이라고 한다. 또한, 모든 상호작용이 가능한 요소에 접근성 네임이 필요하다고 웹 접근성 표준에 명시되어 있다. 또한, 해당 버튼에 의도를 명확하게 할 수 있다고 하니 `aria-label`을 꼭 줘야 할 것 같다.

 

Background and foregrund colors do not have a sufficient contrast ratio

이 문제는 배경색과 어떤 요소의 색상의 대비가 기준에 부합하지 않아서 생기는 문제이다.

만약, 배경색이 흰 색이라면 어떤 요소의 색상이 흰색과 대비가 명확하지 않은 흐린 회색이라고 가정해보자. 이럴 경우에는 이 요소의 내용이 잘 보이지 않는 문제가 발생할 것이다.

 

이러한 것처럼, 배경색과 요소의 색상의 대비가 명확하지 않은 것을 색상 변경을 통해서 기준에 맞게 대비를 명확하게 해주면 된다.

 

Heading elements are not in a sequentially-descending order

이 문제는 `Heading`으로 설정했을 때, 레벨 순서대로 구현해야 한다는 것을 알려주는 문제이다.

 

<h1>A</h1>
<h3>B</h3>
<h2>C</h2>

 

위의 코드를 보면, `heading` 태그의 순서가 `1 → 3 → 2`의 순서로 구현되어 있다. 이는 레벨의 순서에 맞지 않다.

기준에 맞게 `1 → 2 → 3`처럼 레벨 순서대로 작성해야 한다.

 

<h1>A</h1>
<h2>B</h2>
<h3>C</h3>

 

그래서 프로젝트 내 `heading`을 사용하는 부분을 모두 찾아서 순서를 확인해봤더니, 레벨의 순서가 잘못되어 있었다. 그래서 이를 수정하니 문제가 해결되었다.

 

`heading` 레벨의 순서를 지켜야 하는 이유는 논리적으로 구조화할 수 있고, 웹 접근성 표준을 준수해야 하기 때문이다. 그리고 만약 `<h1>` 태그인 경우에 순서가 잘못될 경우에는 `SEO`에 영향을 줄 수 있기 때문에 주의해야 한다.

 

Best Practices 개선

Best Practices 문제

 

Requests the geolocation permission on page load

`Quick-News` 프로젝트에서는 위치 기능을 활용해 날씨 데이터를 가져오는 기능이 있다. 기존에는 `useEffect`를 활용해서 페이지에 접속하면 자동으로 위치를 가져오고 해당 위치 값을 활용해 날씨 API에 적용해 날씨 데이터를 가져와서 출력했었다.

 

그런데, 이것이 문제였다. 사용자가 위치 값을 제공해주고 싶지 않을 가능성이 존재하기 때문에 이러한 경우에는 사용자 경험을 낮출 수 있다는 것이 이 문제의 내용이었다. 그래서 이를 개선하기 위해서 선택한 방법이 날씨 데이터를 가져올 수 있는 버튼을 생성하고, 해당 버튼을 클릭했을 때 위치 값을 요청한 뒤에 허용이 된다면 날씨 데이터를 가져오는 방법이었다.

 

이러한 방법을 사용해서 코드를 개선했더니 다행히 문제가 개선되었다. 다만, 페이지 접속 시 바로 날씨 데이터를 가져오지 못한다는 것이 아쉬울 뿐이다. 현재는 버튼을 클릭해야만 위치 값 요청을 하고, 날씨 데이터를 가져오는 것으로 수정했지만, 이 후에 페이지 접속 시에 처음에 버튼을 클릭하지 않고 바로 위치 값 요청을 하는 식으로 수정을 고민하고 있다.

 

위의 에러가 발생하는 이유와 수정을 고민하고 있는 이유는 페이지에 접속하자마자 위치 값을 가져와서 사용한다면 사용자에게 부정적인 경험을 줄 수 있고, 사용자 상호작용으로 권한을 주는 게 더 나은 경험을 줄 수 있다고 나와있기 때문이다. 그래서 페이지에 접속하자마자 위치 값을 받는 것으로 수정하는 것도 고민하고 있는 이유이다.

 

SEO

SEO 문제

 

Page is blocked from indexing

이 문제는 페이지가 검색 엔진에 의해 인덱싱되지 않도록 차단되어 있다는 의미라고 한다. 즉, 검색 엔진 결과 페이지에 나타나지 않도록 차단되어 있다는 의미이다.

 

이 문제를 해결할 수 있는 방법을 찾아보니 `robots.txt` 파일을 생성해서 설정하는 방법이 있었다. 프로젝트를 생성할 때 `robots.txt` 파일이 자동으로 생성되어 있지 않았고, 이 설정을 잘 모르고 있었기 때문에 지나치고 있었는데 이번에 `Lighthouse`를 통해서 알게 됐고, 직접 생성해서 설정하면 된다는 것도 알게 됐다.

 

// robots.txt 생성
User-agent: *
Disallow:
Allow:

 

위 처럼 생성해서 검색 엔진에 의해 인덱싱되는 것을 원하지 않는 페이지가 있다면, `Disallow`에 디렉토리를 추가하면 되고, 그 외에 허용할 디렉토리는 `Allow`에 추가하면 된다. 보통, 예민하거나 민감한 정보가 있는 디렉토리가 있다면 `Disallow`에 추가해서 설정하면 된다.

 

`Quick-News` 프로젝트는 개인 정보 등 민감한 정보를 담지 않기 때문에 `Disallow`에 디렉토리를 추가하지 않았다. 위의 파일을 생성해 설정하니 문제가 해결되었다.

 

이 외에, 혹시 `<meta>` 태그의 `content` 옵션에 `noindex` 값으로 설정되어 있다면, `index, follow`로 수정해서 확인해보는 방법도 있다.

 

만약, 차단이 계속 된 상태라면 페이지는 검색 결과에 나타나지 않게 됨으로써 SEO에 부정적인 영향을 끼치기 때문에 이를 개선해야 한다. 웹 사이트에서 중요한 페이지들은 검색 엔진이 인덱싱할 수 있도록 허용하는 것이 SEO 결과에 좋은 영향을 줄 수 있다. 참고로 `User-agent`는 검색 엔진 크롤러(봇)을 말하며, `*`로 설정할 경우에는 모든 검색 엔진 크롤러에게 해당 규칙을 적용하겠다는 의미이다.

 

지금까지 `Performance(성능)` 부분을 제외한 3개의 점수를 개선하였다.

Quick-News 프로젝트 Lighthouse 개선

 

`Quick-News` 프로젝트 뿐만 아니라 React로 만든 `Movie` 프로젝트도 비슷한 문제들이 나타나서 위의 해결책들을 이용해서 점수를 개선했다. `Movie` 프로젝트도 `Performance(성능)` 점수를 제외한 나머지 3개 점수들을 모두 100점으로 개선하였다.

Movie React 프로젝트 Lighthouse 개선

 

(위 Movie 프로젝트의 Lighthouse 점수 중 Accessibility이 96점인 이유는 React-Slick을 사용하고 있는데, 이 라이브러리의 요소 중 버튼이 `aria-hidden`이 `hidden`으로 되어 있어 영향을 준 것으로 알고 있다. 이를 수정하려면 커스텀으로 버튼을 만들어야 하는데 커스텀 버튼을 생성하기 보다 그대로 사용하는 것으로 결정했다)

 

이제 `Performance(성능)` 점수만 남았는데, 사실 큰 산이라고 생각한다. 왜냐하면, 일부 문제를 해결하려고 여러 가지 시도를 했지만 도저히 해결이 되지 않는다. `Lighthouse`에서 알려주는 공식 문서에서 알려주는 내용으로 수정을 해도, 구글 검색을 통해서 수정을 해도, ChatGPT에 도움을 요청해도 문제가 해결되지 않는다. 혹시, 10년 된 컴퓨터의 성능이 생각보다 큰 영향을 미치고 있는 게 아닌가 의심이 될 정도로 개선이 되지 않아서 많은 시간이 필요할 것 같다. (미치겠다!!)