댕댕어디가 리팩토링 - #3 장소 상세 페이지

📌 장소 상세 페이지는 반려동물 동반가능 시설에 대한 정보와 방문한 사람들의 리뷰를 간단히 확인할 수 있는 페이지이다.

 

성능 점수는 지난 번 리팩토링에서 로컬보다 배포에 올라갔을 때 10점 이상 올라간다는 걸 확인했기 때문에 접근성을 올리는 데 중점을 두면 될 것 같다.

 

📌  Accessibility (접근성)

1차 배포후 모바일 화면(iOS 기준)에서는 입력필드(input)의 폰트 크기가 16px 미만이면 터치할 때 자동으로 확대되는 현상이 발생해 사용하기 불편했다는 피드백이 있었고 이를 해결하기 위해 viewport 메타태그에 maximum-scale=1.0을 추가해 확대를 막아놨었는데, 이게 Lighthouse에서는 시각 장애인이나 저시력 사용자가 콘텐츠를 확대하는 걸 방해한다는 이유로 점수가 깎였다.

사실 확대를 못하게 할 게 아니라 입력필드의 폰트 크기를 16px이상으로 하는 게 맞는데, 이제 와서 바꾸기에는 디자인 상 비율이 깨져서 다음 프로젝트에는 이 점을 유의하기로 하고 maximum-scale을 딱 5로 설정해 봤더니 다행히 모바일에서 불편할 정도로 확대가 되지는 않는 것 같아서 그렇게 코드를 수정했다.

// 기존코드
<button className="action" onClick={handleWriteReviewClick}>
  리뷰 작성
  <img src={writeIcon} alt="리뷰 작성" />
</button>

// 바꾼코드
<button className="action" onClick={handleWriteReviewClick}>
  리뷰 작성
  <img src={writeIcon} alt="리뷰 작성하기" />
</button>

alt 속성은 이미지를 볼 수 없거나, 이미지가 예기치 못한 오류로 렌더링되지 않을 때 사용자에게 보여지거나 읽히는 부분이라서 사용자가 이해하기 쉬운 텍스트를 넣어야하는데, '리뷰 작성' ➡️ '리뷰 작성하기' 로 바꾼 걸로 해결됐다..ㅋㅋ

 

색상 대비는 우리가 디자인한 여러 컴포넌트나 폰트 색상이 저대비 텍스트로 인식됐던 건데, 이것도 디자인을 이제와 바꿀 순 없어서 그대로 두기로 했다. 그래도 92점으로 올라갔으니 목표치는 달성이다..!

로컬 점수

배포 후 점수