Figma 없는 디자인 시스템? 코드와 디자인의 완벽한 조화!
Figma 사용의 비효율성을 인지하고, 디자인과 개발 간의 간극을 줄이기 위한 새로운 협업 방식을 모색
Storybook 도입을 통해 코드 레벨에서 컴포넌트를 관리하고, 개발자가 직접 스타일을 수정하는 코드 중심 디자인 시스템(Code-centric Design System) 구축
화이트보드, Miro, Notion, Penpot 등 다양한 협업 도구를 활용하여 아이디어 발상 및 디자인 프로세스(Design Process) 개선
Figma를 대체하고, 디자이너와 개발자의 경계를 허무는 코드 기반 디자인 시스템(Code-based Design System) 구축을 통해 효율성 증대
Figma 사용의 비효율성: 디자인 시스템의 문제점
본문에서는 Figma를 사용하면서 겪는 디자인 시스템(Design System) 관리의 어려움을 지적한다. Figma 디자인 시스템과 코드베이스(Codebase) 간의 컬러 네이밍(Color Naming) 규칙 불일치로 인해, 디자인 변경 사항을 코드에 다시 적용하는 과정에서 불필요한 시간 낭비가 발생했다.
이중 작업(Double Work): Figma에서 디자인을 만들고, 이를 다시 코드로 구현하는 과정의 반복
디자인 시스템 단절(Design System Disconnection): Figma 디자인 시스템이 개발자에게 실질적인 도움이 되지 못하고, 결국 개인적인 디자인 시스템(Personal Design System)으로 전락
아이디어 단계의 비효율성: Figma를 사용한 하이파이 프로토타입(High-fidelity Prototype) 제작이 불필요한 단계로 인식
결과적으로 Figma는 디자인과 개발 간의 협업(Collaboration)을 저해하는 요소로 작용했다.
Storybook 도입: 코드 중심 디자인 시스템 구축
필자는 Figma를 대체하기 위해 Storybook을 도입하여, 코드 레벨에서 컴포넌트를 관리하는 방식을 선택했다. Storybook은 개별 컴포넌트(Component)를 문서화하고 테스트할 수 있는 작업 공간을 제공하며, 개발자가 직접 컴포넌트의 다양한 상태를 확인하고 스타일을 수정할 수 있도록 지원한다.
실제 코드 기반(Code-based): Storybook에 있는 컴포넌트는 개발자들이 실제로 사용하는 컴포넌트와 동일
접근성 테스트(Accessibility Test): 애드온(Add-on) 활용을 통해 색상 대비뿐만 아니라, 키보드 사용자 및 스크린 리더 사용자도 문제없이 사용할 수 있도록 코드 구조 검토
개발자 주도(Developer-led): 개발자가 직접 스타일을 수정하고, 디자인 변경 사항을 즉시 반영 가능
결과적으로 Storybook은 디자인과 개발의 경계를 허물고, 효율적인 협업 환경을 구축하는 데 기여했다.
협업 도구 활용: 아이디어 발상 및 디자인 프로세스 개선
필자는 Figma 대신 화이트보드, Miro, Notion, Penpot 등 다양한 협업 도구를 활용하여, 아이디어 발상 및 디자인 프로세스를 개선했다. 이러한 도구들은 모두가 함께 참여하고 의견을 공유할 수 있는 환경을 제공하며, 디자인 과정에 대한 모두의 참여(Participation)를 장려한다.
화이트보드(Whiteboard): 팀원들이 함께 모여 아이디어를 스케치하고, 디자인 방향에 대한 합의를 도출
Miro/Notion: 원격 환경에서 구조화된 내용을 정리하고, 사용자 리서치 및 미팅 내용을 기록
Penpot: 오픈소스 기반의 Figma 대안으로, 웹 디자인에 적합하며 빠른 프로토타입 제작 지원
결과적으로 이러한 도구들은 협업의 효율성을 높이고, 디자인 프로세스를 유연하게 만드는 데 기여했다.
디자이너의 역할 변화: 코드에 가까워지는 디자인
필자는 디자이너가 코드에 더 가까워져야 한다고 강조하며, 코드 중심 디자인 시스템(Code-based Design System) 구축의 중요성을 역설한다. 이는 디자이너가 단순히 시각적인 결과물을 만드는 것을 넘어, 개발 과정에 적극적으로 참여하고, 코드에 대한 이해도를 높여야 함을 의미한다.
코드 이해(Code Understanding): 디자이너가 코드를 이해하고, 직접 코드를 작성하는 능력을 갖추는 것이 중요
개발자와의 협업(Collaboration): 디자인과 개발 간의 원활한 소통과 협업을 통해, 효율적인 제품 개발 가능
지속적인 학습(Continuous Learning): 디자인 업계의 변화에 발맞춰, 새로운 도구와 기술을 배우고 적용하는 자세 필요
결과적으로 디자이너는 코드에 대한 이해를 바탕으로, 개발자와의 협업을 통해 더 나은 제품을 만들 수 있다.
