나: 결국 디자인 시스템은 작업 협업 전 우리 이런 식으로 할거임~ 을 적는 지표고
ui 키트는 부속품 (버튼 바 어쩌고 등등) 모아둔거임?
그걸 공유하고 팀원이 같이 작업하는거고?
그런듯...
✅ 한줄 요약
디자인 시스템 = 룰북 & 가이드북
UI 키트 = 부속품 박스 (디자인 재료함)
📚 개념 정리!
🧠 디자인 시스템 (Design System)
: 우리 팀/회사만의 디자인 규칙, 사용법, 철학, 방법론 모음
예)
버튼은 어떤 컬러 써야 함
폰트는 어디에선 몇 pt
여백은 기본 8px 단위
반응형은 어떻게 대응함
다크모드는 이런 식으로 전환됨
📌 즉, “우리는 이렇게 디자인할 거야!” 라는 지표/약속/헌장
🧰 UI 키트 (UI Kit)
: 디자인 시스템에 따라 실제로 만든 부속품 묶음
버튼, 입력창, 토글, 체크박스, 모달창 등등
기본형, 호버형, 클릭형, 비활성형까지 포함
이미 스타일 적용 완료된 요소들
📌 즉, “이 룰대로 만든 결과물들을 여기 담아놨어! 갖다 써!”
💬 실무 예시
👩🎨 디자이너가 디자인 시스템을 설계하고,
그걸 바탕으로 UI 키트를 제작해서,
팀원들과 피그마에서 공유함
팀원들은 가져다 쓰면 됨 (카피 & 인스턴스로!)
결론...
이런 일 만들지 말자고 하는 것.
Dangerous woman Sera