디자인시스템의 기반을 다시 다지고 있어요.
현재 시스템을 기반에서 컴포넌트를 사용할 때 사용자(여기에서는 개발자)가 디자인 스펙에 맞게 화면을 개발하기 위해서 디자인 화면은 Figma를 참조하고 컴포넌트 스펙을 확인하기 위해서는 Storybook을 참조하게 됩니다.
여기에서 문제가 발생했는데요, 컴포넌트를 사용시에 Figma에 나와있는 정보들과 코드 상에서 사용하는 컴포넌트의 인터페이스가 달라 코드에서 어떤 속성을 주어야 디자인 결과물 처럼 설정되는지를 다시 파악해야하는 비용이 발생습니다.
---
CTA 버튼을 예로 들어 설명하겠습니다.
상황: 개발자는 화면 상에서 CTA button을 xl 사이즈로 렌더링 해야합니다.
[Figma]
CTAButton이라는 컴포넌트에 size 속성에 xl를 주어 사용하였습니다.
[Code]
Button 컴포넌트가 존재하고 size도 설정할 수 있는데 별도의 CTAButton은 없습니다.
따라서 개발자는 "CTAButton이 없는데 기존 Button으로 어떻게 할까요?"라고 질문하게 됩니다.
알고보니 Code에서는 color 속성에 cta라고 전달받으면 그에 맞는 색상을 입혀주도록 처리가 되었습니다.
---
이처럼 디자인과 코드 사이에서 괴리가 발생할 경우 예시와 같은 커뮤니케이션 비용이 추가적으로 발생하게 됩니다.
그리고 추후에 유지보수가 계속될 경우 디자인과의 괴리를 좁히가 점점 어려워지며 이는 디자인시스템을 사용하는 모든 프로젝트에 영향을 미치게 됩니다.
이에 따라 디자이너와 함께 디자인 컴포넌트와 코드 컴포넌트의 사용방법 즉 인터페이스를 사용자 입장에서 동일하도록 맞추는 작업 시작하게 되었습니다.
