UI 품질을 한 단계 높이는 Storybook 활용법
누구나 편하게, 모두가 볼 수 있게!
—
Ep.37
시작하며
앞서 업로드된, 디자인 팀 관점에서 디자인 시스템의 정의와 구축 과정을 다룬 '피그마로 완성하는 디자인 시스템 구축과 효율적인 협업'을 읽어보셨나요? UI 컴포넌트 표준화가 업무 효율을 얼마나 높일 수 있는지에 대해 한 번 더 생각하게 만드는 내용이었습니다.
UI는 화면을 명확하고 잘 표현하는 것이 핵심이지만 UI 품질은 실무자의 작업 효율을 높이고, 사용자 경험을 개선하는 기반이 되기도 합니다. 특히 버튼, 입력창 등과 같은 UI 컴포넌트는 단순한 화면 구성 요소를 넘어, 제품의 일관성과 사용자 경험을 책임지는 핵심 자산입니다.
디자인 시스템을 기반으로 운영되는 대규모 서비스일수록 UI 컴포넌트의 품질을 지속적으로 검증하고 유지 보수할 수 있는 구조가 필수적이며, 이는 곧 개발 생산성 향상으로까지 이어집니다.
이번 글에서는 Storybook이라는 시각화 도구를 활용해 UI 컴포넌트를 테스트하고 접근성을 설계하는 방법, 그리고 이를 통해 SEO(검색 엔진 최적화) 개선까지 이어지는 과정을 함께 소개해 보려고 합니다.
Storybook이란?
Storybook은 UI 컴포넌트를 독립적으로 개발하고 검증할 수 있는 시각화 도구입니다.
Storybook을 활용하면 실제 서비스와 분리된 환경에서 컴포넌트를 개별적으로 테스트할 수 있고, 재사용 및 유지 관리 측면에서 훨씬 수월해집니다. 이 과정에서 디자이너와 개발자 간의 협업 효율이 높아지고, 더욱 일관성 있는 UI를 구축하는 데 도움이 될 수 있습니다.
특히 디자인 시스템 환경에서는 하나의 컴포넌트가 여러 페이지와 서비스 전반에서 재사용되므로, 단일 UI라도 다양한 상태를 효율적으로 확인하고 관리하는 것이 중요합니다. Storybook은 이러한 측면에서 매우 유용한 도구입니다.
컴포넌트 상태 관리와 테스트
컴포넌트는 여러 상태를 가지고 있기 때문에, 페이지 단위로는 모든 상태를 충분히 검증하기 어렵습니다. 버튼 하나를 예로 들면, 버튼은 기본 상태, 비활성 상태, 로딩 상태 등 여러 상태를 가질 수 있는데요. Storybook에서는 상태별로 Story를 정의하고, Controls와 Actions를 활용해 props 조정하거나 이벤트 추적이 가능합니다.
이처럼 Storybook에서는 버튼의 기본, 활성화, 로딩 상태에 따른 UI를 확인하고 검증할 수 있습니다.
웹 접근성과 시맨틱 구조가 중요한 이유
웹 접근성이란 노인, 장애인, 환자를 포함한 모든 사용자가 웹에 쉽게 접근해 웹 페이지를 탐색하거나 필요한 기능을 이용할 수 있도록 지원하는 것을 의미합니다.
일반 사용자는 별도의 접근성 지원 없이도 화면의 글자, 이미지, 음성 안내, 마우스 및 키보드를 사용하여 자유롭게 웹을 이용할 수 있습니다. 하지만 시각·청각적 지원이 필요한 사용자들을 위해서는 시각 정보는 듣기 쉽게, 청각 정보는 보기 쉽게 제작되어야 합니다.
이때 적절한 시맨틱 태그를 사용하면 웹 페이지의 구조를 정확히 전달할 수 있고, 키보드 접근성도 확보할 수 있습니다. 이는 웹 접근성을 높이는 데 큰 도움이 될 뿐만 아니라, 검색 엔진이 페이지 구조를 더 잘 이해하도록 도와 SEO에도 긍정적인 영향을 줍니다.
시맨틱 구조 적용 예시
브라우저는 HTML 코드를 읽을 때 화면에 보여주기 위한 DOM Tree뿐만 아니라, 스크린 리더 같은 보조 기술이 읽을 수 있도록 접근성 트리도 함께 생성합니다. 이를 기반으로 웹 페이지가 스크린 리더나 보조 기술이 "여기는 제목입니다", "여기는 버튼입니다"처럼 내용을 이해하고 읽어줄 수 있습니다.
그래서 브라우저가 올바른 정보를 만들 수 있도록 적절한 HTML 태그와 속성을 명시하는 것이 매우 중요합니다.
프레젠테이션 마크업과 시맨틱 마크업 비교Storybook Addon A11y로 접근성 테스트하기
Storybook은 접근성 검증을 자동화할 수 있는 플러그인을 제공하고 있습니다. 대표적으로
@storybook/addon-a11y 를 사용하면 개발 단계에서 접근성 오류를 실시간으로 확인할 수 있습니다.
설치 및 적용
결과값
실패: 접근성 테스트 경고
버튼 텍스트와 배경색 간의 대비가 WCAG 2 AA 기준(일반 텍스트 최소 4.5:1)을 충족하지 않아 읽기 어려움이 발생했습니다. 해결 방법으로는 텍스트 또는 배경색을 조정하거나 글자 크기를 키워 대비를 높이는 것입니다.
접근성 경고성공: 접근성 테스트 통과
아래 기준을 모두 충족하여 A11y 테스트에서 통과했습니다.
문서 <body>에 aria-hidden="true"가 없어야 한다.
ARIA 숨김 요소는 포커스 가능 요소를 포함하면 안 된다.
버튼에는 구분 가능한 텍스트가 있어야 한다.
인터랙티브 컨트롤이 중첩되지 않아야 한다.
접근성 통과
마치며
만약 UI 변경을 시도하고 있거나, 디자인과 개발 간 협업 과정에서 어려움을 겪고 있다면, 이번 포스트에서 소개해 드린 Storybook과 컴포넌트 단위 테스트를 활용해 UI를 독립적으로 검증해 보세요. 작은 변화도 안전하게 확인할 수 있고, UI 품질도 꾸준히 관리할 수 있습니다.
또한 접근성을 고려한 시맨틱 구조를 함께 적용하면, 일반 사용자뿐 아니라 시각·청각적 지원이 필요한 사용자들까지 누구나 웹을 편하게 이용할 수 있습니다. 이는 접근성 향상은 물론, SEO와 사용자 경험(UX)에도 긍정적인 영향을 가져옵니다.
이처럼 Storybook 기반의 테스트와 접근성 검증을 개발 과정에 자연스럽게 통합하면, 디자인과 개발 간 협업은 훨씬 매끄러워지고 전체적인 효율성도 크게 높아집니다. 무엇보다 사용자에게는 안정적이고 일관된 경험을 제공할 수 있습니다. 이번 포스트가 여러분의 개발 환경 개선과 프로젝트 생산성 향상에 도움이 되길 바랍니다.
—
by 아이나비시스템즈 웹서비스개발팀 윤수지 선임
✨UI 품질은 Storybook으로 높이고, 위치 기반 솔루션은 30년 아이나비 기술력의 iMPS로 완성해 보세요.
#Storybook #UI #UI컴포넌트 #design UI #웹 UI #개발 #개발자 #SEO #UXUI #Storybook이란 #Storybook 예시 #구글 디자인 시스템 #디자인 시스템 #아이나비 #아이나비시스템즈 #지도 #내비게이션
