Visual Test 후기 및 필요성

😵 들어가며

---

디자인 시스템을 구축하며 평소에 접해보지 못했던 라이브러리들을 경험해보고 있는데, 그 중 비주얼 테스트 도구인 chromatic을 알게되었다. 오늘의 글은 chromatic의 사용법은 아니고 해당 도구의 필요성, 사용해보며 느낀점을 간단히 정리해보는 글이다.

🔥 chromatic 도입 계기

---

현재 디자인 시스템에서 컴포넌트를 설계할 때, 피그마의 variables에 토큰을 등록하여 사용하고 있다.

토큰을 사용하면 특정한 토큰만 변경하면 해당 토큰으로 설정된 모튼 컴포넌트의 값을 한번에 변경할 수 있는 장점이 있다. 예를 들어, 우리 디자인 시스템의 메인 색상을 BrandColor 라는 토큰을 지정하고 토큰에는 black 컬러를 할당해주었다. 그리고 버튼 컴포넌트의 메인색상과 태그 컴포넌트의 메인 색상에 BrandColor 을 할당했다. 그런데 디자인이 바껴 BrandColor의 정의가 black 에서 green 으로 비꼈다면, 디자이너는 피그마 variable에 등록된 BrandColor의 원자값만 black에서 green으로 바꾸면 된다. 굳이 버튼과 태그 컴포넌트를 일일히 찾아가 컬러를 바꿀 필요가 없다. 그들의 색상은 black 혹은 green이 할당이 된게 아니라 BrandColor 라는 토큰이 할당되어있기 때문에다.

이렇듯 변경사항을 쉽게 적용할 수 있는 장점이 있는데, 개발한 컴포넌트가 점점 많아지고 디자인 시스템이 커진다면, 하나의 토큰의 변경사항이 의도하지 않은 컴포넌트까지 영향을 줄 수 있다. 그렇다고 토큰 하나 변경했을때, 할당된 토큰이 영향을 받는 컴포넌트를 일일히 찾아가 변경사항에 이슈가 있는지 찾아보기도 힘들뿐더러, 변경사항이 아주 미세한 부분이라면 이슈가 있어도 육안으로 구분하기 힘들수도있다. 그리고 본인이 정의한 디자인이 아니라면 더 구분이 힘들수도 있다. 그렇기 때문에 비주얼 테스트가 필요한 것이다.

디자인 시스템을 개발한다면 보통 스토리북을 연동해서 개발할텐데, chromatic 애드온 혹은 chromatic을 사용하여 UI 변동사항을 쉽게 확인할 수 있다.

✌🏻 실제 사용기

---

아래는 스토리북 애드온 “@chromatic-com/storybook” 을 설치하고 테스트 한 결과이다. 위의 설명과 같이 버튼의 메인 컬러(브랜드 컬러)를 black 에서 green으로 변경해보았다.

• 토큰 변경 전
  

• 토큰 변경 후

이미지와 같이 애드온 화면에 뭔가 변경됨을 알려준다.

diff 버튼을 눌러보며 변경 전 후 사항을 비교할 수도 있어 토큰 변화가 컴포넌트에 어떤 영향을 미쳤는지 쉽게 파악할 수 있다. 그리고 chromatic 페이지에서 해당 변화가 몇개의, 어느 컴포넌트에 영향을 미쳤는지도 쉽게 확인할 수 있다. 이 역시 스토리북 상에서도 확인 가능하지만 chromatic 사이트에서 더 파악이 쉬워보인다!

😀 비주얼 테스트 도입 필요성

---

Chromatic을 사용하면서 비주얼 테스트의 필요성을 더 체감할 수 있었다. 위에서 언급했듯, 디자인 시스템에서 토큰이 변경되면 예상치 못한 곳까지 영향을 미칠 수 있는데, 특히 시스템이 커질수록 그런 영향 범위를 파악하는 게 점점 어려워진다. 디자이너가 의도하지 않은 스타일 변화나 레이아웃 변경이 발생할 수 있는 상황에서, 비주얼 테스트는 이러한 문제를 미리 발견하고 방지할 수 있는 강력한 도구다.

또한, 비주얼 테스트는 수작업으로는 놓칠 수 있는 세부적인 UI 변화를 자동으로 감지해주는 역할을 해, 배포 전에 확실하게 확인할 수 있어 품질 보증에도 큰 도움이 된다. 이렇게 자동화된 테스트를 통해 팀 간의 커뮤니케이션도 원활해지고, 디자이너와 개발자 간의 피드백 루프도 더 빠르게 돌아갈 수 있을 것 이다.

chromatic에 디자이너와 배포전 댓글로 소통하고 accept 하는 단계도 있언데, 실제로 한번 해보면 좋을 것 같다. 하지만 스냅샷이 많아지면 유료 서비스가 되기때문에,,,,! 회사가 이 프로젝트에 투자를 좀 해줬으면 하는 점,,,,으로 이 글을 마쳐본다~!