패턴, 컴포넌트, 디자인시스템

hidden
notion image
컴포넌트 중심 개발접근성 관점에서 패턴, 컴포넌트, 디자인 시스템 평가기존 자원 활용AT 지원브라우저와 보조 기술 지원참고자료추가 고려 사항결론

컴포넌트 중심 개발

  • 컴포넌트 중심 개발(Component-driven development)은 pattern style guides, component libraries, 또는 full design systems을 사용하여 웹사이트나 앱을 개발하는 방식입니다.
  • 큰 디자인을 관리 가능한 작은 단위로 나누어 개발하는 접근 방식은 건축물 구조를 짓는 것과 유사합니다.
      • 먼저 기초를 세우고, 구조를 잡고, 벽을 세우고, 창문과 지붕을 올리고, 그 사이의 모든 것을 채웁니다. 컴포넌트 중심 개발 도구는 웹사이트, 앱, 기타 디지털 제품에서도 이러한 방식을 가능하게 해줍니다.
  • 이 방식의 장점:
    • 재사용 가능한 컴포넌트를 사용하여 개발 시간 단축
    • 디자이너, 프론트엔드 개발자, 백엔드 개발자, QA팀이 동시에 작업할 수 있어 효율적입니다.
    • 클라이언트나 PM이 빌드 과정을 미리 확인하고 스타일 가이드를 참조할 수 있어 유용합니다.
 

접근성 관점에서 패턴, 컴포넌트, 디자인 시스템 평가

  • 접근성을 고려할 때, 여러 가지 질문이 생길 수 있습니다. 예를 들어:
    • 이미 접근성을 고려한 패턴이나 컴포넌트가 존재하는가?
    • 어떤 브라우저와 보조 기술(AT)을 지원해야 하는가?
    • 코드나 프레임워크에 제한이 있는가?
    • 다른 통합 요소나 사용자 요구 사항을 고려해야 하는가?
이 질문들로 접근성 평가를 시작해 보세요.

기존 자원 활용

  • 새로 만들기 전에 이미 존재하는 접근성을 고려한 패턴, 컴포넌트, 디자인 시스템을 검토해 보는 것이 좋습니다. 몇 가지 조사를 통해 필요한 해결책을 쉽게 찾을 수 있습니다.
    • Chakra UI
      • Chakra UI는 접근성에 매우 중점을 둔 UI 라이브러리로
      • 모든 기본 컴포넌트가 스크린 리더를 지원하고, 키보드 내비게이션을 고려하여 설계됨.
      • 사용자 정의 스타일링, 테마변경 등 다양한 요구 사항에 맞게 커스터마이징 가능
      • 편리한 API와 함께, 접근성 문제를 신경 쓸 필요 없이 사용할 수 있도록 돕는 도구들을 제공합니다.
    • Reach UI
      • 접근성을 최우선으로 고려한 React 컴포넌트 라이브러리.
      • 스크린 리더와의 호환성을 보장, 사용자 정의가 용이한 구조로 설계됨
      • 핵심 컴포넌트인 모달, 드롭다운, 탭 등을 포함하여 반응형 웹을 쉽게 만들 수 있게 돕습니다.
      • React의 공식 라이브러리로 인정받고 있으며, 매우 모듈화되어 있어 필요한 부분만 가져다 쓸 수 있습니다.
    • Reakit
      • 역시 접근성에 신경 쓴 라이브러리로, 웹의 상호작용적 컴포넌트들을 제공합니다.
      • 상태 관리와 키보드 내비게이션 등을 기본적으로 처리해줍니다.
      • 이 라이브러리는 유연성과 확장성을 중요시하기 때문에, 프로젝트의 요구 사항에 맞게 쉽게 커스터마이징이 가능합니다.
 

AT 지원

개발 환경에 적합한 기본 패턴, 컴포넌트, 또는 디자인 시스템을 몇 가지 조사한 후에는 보조 기술(Assistive Technology, AT) 지원을 고려해야 합니다.

브라우저와 보조 기술 지원

  • AT 중에서도 특히 패턴, 컴포넌트, 디자인 시스템을 평가할 때 중요한 보조 기술은 스크린 리더(Screen Reader)입니다.
  • 스크린 리더는 특정 브라우저와 함께 사용하도록 설계되어 있으며, 특정 브라우저와 함께 사용할 때 가장 효과적입니다. 따라서 패턴을 평가할 때 특정 브라우저와 스크린 리더의 호환성 조합이 중요하므로 이를 고려하는 것이 필수적입니다.
      • 스크린리더의 종류와 브라우저 호환성
      스크린리더의 종류와 브라우저 호환성

참고자료

  • 이 자료들은 언제 ARIA를 사용해야 하는지, 다양한 HTML 및 ARIA 패턴 하위 요소들을 어떻게 활용할 수 있는지에 대해 안내하며, 오픈소스 커뮤니티 테스트와 데스크톱, 모바일 브라우저, AT 장치에 대한 패턴 예제도 제공합니다.
  • 이러한 리소스들을 통해 사용하려는 패턴, 컴포넌트, 디자인 시스템에 대해 더 접근 가능한 결정을 내릴 수 있습니다.
 

추가 고려 사항

어느정도 패턴이나 컴포넌트 등 선택의 폭을 좁혔으면, 더 구체적인 사항들도 고려하며 선택지를 더 좁혀봅시다.
  • 성능, 보안,
  • 검색엔진 최적화,
  • 언어 번역 지원,
  • 서드파티 통합
 
추가로, 콘텐츠를 생성하는 디자이너와 코드를 작성하는 개발자도 고려해야 합니다.
선택한 패턴은 편집기나 사용자가 생성한 콘텐츠의 잠재적인 제한을 처리할 수 있을 만큼 강력해야 하며, 접근성 지식 수준에 관계없이 모든 개발자가 쉽게 사용할 수 있는 방식으로 설계되어야 합니다.

결론

  • 패턴, 컴포넌트, 디자인 시스템을 선택할 때, 접근성 평가를 철저히 하고, 필요한 자원을 참고하면서 신중하게 결정을 내리는 것이 중요합니다.