최근 저의 고민 중 하나는 어떻게하면 디자이너와 개발자가 잘 소통할 수 있을까 입니다.
디자이너와 개발자는 각자의 배경지식 차이에서부터 차이나기 시작합니다.
거기에 프로젝트가 진행된 정도나 여러 환경적 요인까지 더해지면 디자인과 개발 결과물은 점점 더 차이가 벌어지는 거 같습니다.
그래서 이를 극복할 수 있는 중간 매개체를 제공할 수 있는 방법을 계속 고민했습니다.
처음 프로젝트에 이미 활용되고 있는 MUI Docs를 봤을 때, 내가 작성 하고 있는 컴포넌트나 class에 부여된 스타일시트 속성도 이런식으로 정리해놓으면, 개발자가 잘 사용할 수 있겠다 라고 생각했습니다.
그런데 도대체 이걸 언제 어디서부터 정리해가야 할지... 그게 큰 난관이었습니다.
매번 library 페이지를 업데이트하고 문서를 정리하는 게 실제 업무보다 더 많은 시간을 소요할거 같았습니다.
그리고 최근에 react test를 찾아보다가 발견한 툴이 디자인 시스템 툴이었습니다.
- Framer
- Storybook
Framer는 toss에서 사용한다고 잘 알려져 있었습니다. 그런데 Framer의 경우 디자이너가 디자인 툴을 바꿔야 하는 문제가 있었습니다. 이미 Figma로 시스템을 구축해가고 있었기 때문에 고려하기 힘들었습니다. 굳이 말하자면 디자인툴에 가까웠다고 느꼈습니다.
storybook
storybook은 Framer와는 디자인 시스템을 구축하기위한 도구라는 점은 같지만, 그 외에는 공통점이 거의 없습니다.
storybook은 굳이 말하자면 UI개발 툴에 가깝습니다. 하지만, 맨 처음 보여드린 MUI Docs처럼 기본적인 정리 툴을 제공해주며, 이를 따로 배포할 수 있습니다.
storybook이 제공하는 페이지를 이용하면
개발자는 page load가 부담스러운 프로젝트를 unit단위로 개발/테스트 할 수 있고,
디자이너는 UI와 state단위로 디자인을 확인할 수 있습니다.
대신 Framer가 디자이너에게 조금 부담이 있었다면
storybook은 React 프로젝트 내에서 만들어야 하기 때문에 개발자의 작업이 필요합니다.
하지만, 확실히 처음 생각했던 아이디어보다는 작업이 수월하고 단위 테스트까지 할 수 있으니 오히려 버그잡는 일이 쉬워집니다.
그러면 저도 이미 있는 UI 단위를 쪼개서 한번 storybook을 배포해 보겠습니다.
// * 피드백은 환영입니다
