🗒 [성장을 위한 데일리 아티클] '디자인 시스템 101 - 닐슨 노먼 그룹' <디자인 시스템이란?> - 중복성을 줄이고 - 다양한 페이지와 채널에서 공유된 언어와 시각적 일관성을 만들어 - 대규모로 디자인을 관리하기 위한 일련의 표준 UI 디자인 - UI 화면을 생성해야 하는 규모와 속도가 높아져 - 각 앱과 웹 사이트에는 수백 또는 수천 개의 페이지(또는 화면)가 필요 - 조직에서는 설계 작업을 간소화해야 할 절박한 필요성이 대두 디자인 시스템을 사용하는 이유 - 설계(및 개발) 작업을 신속하게 대규모로 생성하고 복제할 수 있다. - 더 크고 복잡한 문제에 집중하기 위해 설계 리소스의 부담을 덜어준다. - 교차 기능 팀 내에서 그리고 팀 간에 통합된 언어를 만든다. - 제품, 채널 및 (잠재적으로 고립된) 부서 전반에 걸쳐 시각적 일관성을 만든다. - 주니어 레벨 디자이너와 콘텐츠 기고가를 위한 교육 도구 및 참고 자료로 사용할 수 있다. 디자인 시스템을 사용하지 않는 이유는 무엇입니까? (잠재적인 장애물과 제한사항) - 디자인 시스템을 만들고 유지 관리하는 것은 전담 팀이 필요한 시간 집약적인 활동이다. - 디자인 시스템을 사용하는 방법을 다른 사람에게 가르치는 데는 시간이 걸린다. - 프로젝트는 일반적으로 재사용 가능한 구성 요소가 필요하지 않은 정적인 일회성 생성이라는 인식이 있을 수 있다. <디자인 시스템의 요소> 1. 디자인 저장소(repository) 2. 그것을 관리 하는 사람들 1. 디자인 저장소 - 스타일 가이드 - 일반적인 스타일 가이드는 브랜딩(색상, 타이포그래피, 상표, 로고 및 인쇄 매체)에 초점을 맞춤 - 콘텐츠( 목소리 및 언어 권장 사항 등)와 시각적 및 상호 작용 디자인 에 대한 지침도 제공 - 컴포넌트 라이브러리 - 구성 요소 이름 - 설명 - 속성 - 상태 - 코드 조각 - 프론트엔드 및 백엔드 프레임워크 (필요 시) - 패턴 라이브러리 - 컴포넌트 라이브러리는 개별 UI 요소를 지정하는 반면, 패턴 라이브러리는 UI 요소 그룹화 또는 레이아웃 컬렉션을 제공 2. 디자인 시스템 팀 - 오래되거나 쓸모없거나 중복된 항목이나 제출로 인해 과밀화되지 않도록 지속적인 유지 관리와 감독이 필요 - 팀에는 최소한 1명의 인터랙션 디자이너, 1명의 비주얼 디자이너 및 1명의 개발자가 포함되어야 함 - 인터랙션 디자인 가이드라인을 만들고, 시각적 예제를 만들고, 각 요소에 대한 코드 스니펫과 구현 사양을 각각 제공 설계 시스템 노력을 조율하기 위해 경영진 후원자를 확보하는 것을 고려해야함 스폰서는 자금과 자원을 확보하는 동시에 나머지 조직에 디자인 시스템의 전략적 중요성을 전달할 수 있음 <디자인 시스템 채택에 접근하는 방법> - 기존 디자인 시스템 채택 - 기존 디자인 시스템 적용 - 나만의 독점 또는 맞춤형 디자인 시스템 만들기 디자인 시스템 솔루션이 맞춤화될수록 구현하는 데 더 많은 시간과 비용이 소요 기존 설계 시스템을 사용하는 것이 가장 비용이 적게 드는 접근 방식 개념 증명(PoC)이나 변경될 가능성이 있는 초기 프로토타입의 경우 본격적인 설계 시스템을 만드는 것은 단기간에 원하는 ROI가 안 나옴 미래에 있을 디자인의 복제 가능성에 도움이 됨 디자인 시스템은 작업 포트폴리오로 생각해서는 안됨 디자이너와 개발자가 보다 빠르게 작업할 수 있는 기능적 툴킷 또는 리소스로 간주해야 함 디자인 시스템을 만들 때 고려해야 할 주요 요소 - 프로젝트의 규모와 복제 가능성 - 사용 가능한 리소스와 시간 제대로 구현 및 유지 관리하지 않으면 디자인 시스템이 구성 요소와 코드의 다루기 힘든 모음이 될 수 있음 그러나 잘 구현되면 팀 구성원을 교육하고 작업을 간소화하며 디자이너가 복잡한 UX 문제를 해결할 수 있음 — 번역 및 요약: 김학범 --- 🔊 B2B 디자이너들의 모임 소개 B2B 프로덕트를 만들고 있는 B2B 디자이너들은 B2C 디자이너보다 더 어려운 문제를 풀고 있는 경우가 많은 데 비해 자료, 지식, 피드백을 찾는데도 어려움을 겪고 있습니다. 더 많은 B2B 프로덕트 디자이너들이 한자리에서 어려운 점, 배운 점을 공유하고 서로 도움이 되기 위해 커뮤니티를 운영중입니다. 🔗 B2B 디자이너들의 모임 노션 링크: https://www.b2b-designers.space