#아티클공유
article 1. Design System
url 내용 요약디자인 시스템의 구축 방법과 구축 방식에 대한 다양성 그리고 각 상황에 맞는 디자인 시스템의 활용 방식에 대한 설명이 정리된 아티클이였습니다. 디자인 시스템 구축 시, 개발팀과 함께 사용할 협업툴에 대한 설명도 함께 있어서 참고하면 좋을 듯 합니다.
그리고 레퍼런스 링크도 참조되어져있어서 함께 참고하면 좋을 듯 합니다.
디자인 자체 시스템을 구축하는 방식과 라이브러리 사용 방법에 대한 차이점과 어떤 방식이 훨씬 더 효율적이고, 타 부서에서도 효과적일지 고민을 하시는 분들과 함께 보면 좋을듯하여 공유합니다. 아티클 내용디자인 시스템이란?팀들이 제품을 디자인하고, 실현하고, 개발할 수 있도록 하는 모든 요소들이 묶인 하나의 진실 원천
왜 디자인 시스템의 구축하나요?•
프로덕트와 인터페이스의 일관성
•
크로스 펑셔널 협업 가능
•
디자인/개발의 속도와 확장성
디자인 시스템 구성요소•
Design Priciples
•
Style Guides
•
Ui Component Library
•
Design Process Guidelines
디자인 시스템을 위한 툴디자인 툴 : Figma / Sketch / Adobe XD
공유, 관리 툴 : Storybook / Invision DSM / ZeroHeight
라이브러리 사용 VS 자체 디자인 시스템 구축대부분의 경우 라이브러리를 사용하지 않고, 자체 디자인 시스템을 구축 함.
그 이유는 고도화된 라이브러리는 커스터마이징이 어렵고, 개발 API 확장시 자체 라이브러리와 맞지 않은 경우 발생
만약, 프로덕트의 복잡도가 낮다면 고도화된 라이브러리 사용, 제작을 추천 / 프로덕트의 복잡도가 높다면 오히려 자체 디자인 시스템 구축을 추천
느낀점현재 고민하고 있던 부분이 디자인 시스템의 구축 방식에서 자체 디자인 시스템 VS 고도화된 라이브러리 사용 이였습니다. 각 상황에 따라 추천하는 방식이 있었지만, 라이브러리를 잘 사용하지 않는 이유를 알고, 되도록이면 디자인 시스템을 구축하는 것이 훨씬 효율성이 좋고, 서비스의 유지, 보수에도 자유도의 폭을 더 넓게 잡을 수 있다고 생각하게 되었습니다.
다만, 디자인 시스템의 구축에서 ui component library 내에 각 ui component의 variation을 어느정도로 잡아야하고, storybook 적용은 어디까지 작업해야할지 아직 고민이 됩니다.