zoom & swipe image Viewer: 사용자에 따라 단축키 다르게 설정하기

 

완성된 작업

문제 배경

• 스크린리더 사용자를 위해 단축키를 등록했는데 실제로 테스트해보니 스크린 리더에 있는 자체 단축키 때문에 웹에 등록해둔 단축키가 먹통이 되는 상황이 발생했습니다. 
• 그래서 단축키 설정을 바꿔야 하는데 보통 앞에 ctrl + shift나 ctrl + alt를 붙여 단축키 설정을 한다는 자료를 찾았습니다. 그중 ctrl + shift는 확장프로그램 같은 다른 기능에 이미 등록되어 있는 경우가 있어 ctrl + alt를 붙이기로 결정했습니다.
• 스크린리더 사용자의 경우는 어쩔수 없는 경우지만 사용하지 않는 사람들은 기존의 편한 단축키를 사용하길 바랬습니다. 

주요 기능 및 개선점

• 스크린리더 단축키 설정 알림
  • 스크린 리더 사용자를 위해 dom의 최상단에 sr-only를 사용하여 기능을 키고 끌 수 있는 단축키를 알려줍니다
  • 스크린리더 모드 단축키를 스크린리더의 앞글자를 따 ctrl + alt + s 로 설정했습니다.
• 스크린리더 모드 설정:
  • 스크린 리더 사용자는 단축키 앞에 ctrl + alt가 붙고 일반 사용자는 붙지 않습니다
  • 이미지 뷰어의 주요 사용자는 일반 사용자이기 때문에 초기 상태는 해당 기능은 꺼져있는 상태입니다.
  • 스크린 리더 사용자를 위해 sr-only와 role="status" aria-live="polite"를 이용하여 현재 상태를 추적할 수 있게 합니다.
  • 일반 사용자를 위해 어떠한 이유로 실수로 켜지게 됐을 때 끌 수 있도록 이미지 뷰어 하단에 메시지를 제공합니다.
  • 숏컷의 상태에 맞게 툴팁도 업데이트합니다.
  • 사용자의 편의성을 위해 로컬스토리지를 이용하여 이전의 설정을 저장해 유지할 수 있습니다

 

성능 최적화

배경:

• 우선 props 전달이 3회 이상이고 screenReaderEnabled 상태가 많은 곳에서 쓰이기 때문에 전역으로 관리하기로 결정했습니다.
• 가벼운 컴포넌트라고 생각했고 의존성을 늘리고 싶지 않아 useContext와 contextProvider를 사용하여 구성했습니다.
• 하지만 슬라이드를 스와이프 할 때 버벅임이 발생했습니다.

문제:

• 이미지 뷰어는 최적화가 되어 있지 않으면 리랜더링이 아주 많이 일어나는 무거운 기능이었습니다.
• useContext와 contextProvider는 최적화가 되지 않는 특징이 있었고 그래서 과도하게 리랜더링이 일어나 버벅임이 발생했습니다.

해결:

• 그래서 상태관리를 Zustand로 바꾸었고 Selector 패턴을 사용하여 필요한 상태만 구독하게해 최적화를 이뤄냈습니다.

const screenReaderEnabled = useZoomScreenReaderStore(
    (state) => state.screenReaderEnabled
  );

• 추가적으로 memo를 사용하면서 필요한 상태만 구독하게 하여 불필요한 리렌더링을 방지했습니다.

// memo로 감싸서 내보내기
export default memo(NavigationControls, (prev, next) => {
  // 중요 props만 비교하여 불필요한 리렌더링 방지
  return (
    prev.currentIndex === next.currentIndex &&
    prev.isFullscreen === next.isFullscreen &&
    prev.isThumbnailExpanded === next.isThumbnailExpanded
  );
});