디자인 시스템 은 프로젝트에서 디자이너와 프론트엔드 엔지니어 간에 공유되는 모든 디자인의 기초가 되는 일련의 관행과 패턴입니다 .
디자이너 는 이를 사용하여 기존 재료와 충돌하지 않는 방식으로 새로운 구성 요소와 화면을 디자인합니다. 이렇게 하면 너무 많은 설계 부채가 발생하고 모든 오래된 구성 요소를 리팩토링할 필요가 없습니다.
린 바이 디자인: 하나의 제품에 대해 5번의 승리
린 바이 디자인: 하나의 제품에 대해 5번의 승리
2018년 8월 1일
린 바이 디자인을 위한 커버: 제품 1개당 5승
또한 읽기
또한 디자이너를 담당하게 함으로써 제품 성장의 고통을 완화할 수 있는 방법을 확인하십시오!
프론트엔드 엔지니어 는 이를 사용하여 새 화면 구성 이면의 논리를 이해하고 이를 요소 라이브러리를 구축하기 위한 기초로 사용합니다.
결과적으로 디자이너의 Figma와 프론트엔드의 Storybook에 동기화되고 거의 동일한 구성 요소 라이브러리가 생깁니다.
디자인 시스템은 디자이너와 프론트엔드 엔지니어가 서로 의사 소통하는 데 사용하는 "언어"입니다. 디자인 시스템의 그래픽 구현을 UI 키트 (버튼, 입력 등의 라이브러리)라고 합니다. 우리는 디자인 시스템을 사용하여 구축된 UI 키트를 해당 언어를 사용하여 작성된 이야기와 같이 생각할 수 있습니다.
내 경험에서 더 확실한 예를 들자면, Evil Martians의 각 디자이너는 전반적으로 동일한 원칙을 실행합니다. 예를 들어 이러한 공유 규칙에는 다음이 포함됩니다.
마이크로 모듈
명명 규칙
구성품 구성
컬러 시스템
그러나 우리가 일을 하는 방법에 대해서는 충분히 알고 있지만 여기서 문제는 귀하의 프로젝트가 디자인 시스템의 이점을 얻을 수 있는지 여부입니다. 이를 위해 확실히 그럴 것이라는 6가지 징후가 있습니다.
빠른 MVP가 필요합니다
'빠른 MVP'라는 단어의 그래픽
실시간 협업 보안: Akeero용 Logux
실시간 협업 보안: Akeero용 Logux
2022년 6월 23일
협업 실시간 보안 표지: Akeero용 Logux
또한 읽기
디자인 시스템이 복잡한 작업을 해결하고 MVP를 신속하게 출시하는 데 어떻게 도움이 되었는지 확인하십시오.
새 프로젝트를 시작할 때 디자이너는 기본 요소(버튼, 아이콘, 입력, 드롭다운 메뉴 등)를 만들어야 합니다. 그러나 실제로 이 작업을 잘 수행하려면 모든 버튼, 입력 및 기타 요소에 대해 작동하는 아이콘 크기 격자를 만드는 것과 같이 깊은 고려가 필요합니다. 유연하고 쉽게 서로 결합되는 구성 요소. 더 나아가 너무 많은 엔트로피를 추가하지 않으면서 충분히 유연한 글꼴 스타일을 구성하고 브랜드 개발 중에 색상을 쉽게 업데이트하는 데 도움이 되는 방식으로 색상 스타일을 구성하는 것에 대해 생각해야 합니다. 목록은 계속됩니다.
이 모든 초기 계획은 잘못 설계된 요소가 막대한 기술 부채로 빠르게 이어지기 때문에 매우 중요합니다. 즉, 이러한 준비 작업에는 많은 시간이 필요합니다. 그렇기 때문에 프로젝트를 시작하기 전에 잘 설계된 디자인 시스템을 갖추는 것이 중요합니다. (하지만 아직 가지고 있지 않다고 해서 지금 시작할 가치가 없다는 의미는 아닙니다.)
개발 팀을 확장해야 합니다.
'팀 규모'라는 단어의 그래픽
새로운 개발자를 기존 프로젝트에 온보딩하는 것은 비용이 많이 들고 프로젝트가 오래될수록 비용이 많이 듭니다. 마찬가지로 프로젝트에 참여하는 개발자의 수가 많을수록 새 프로젝트를 온보딩하는 데 드는 비용이 더 많이 듭니다.
디자인 시스템이 없는 프로젝트에서는 각 개발자가 디자인을 다르게 이해하고 고유한 방식으로 구성 요소를 만드는 상황에 빠질 위험이 높습니다.
또한 새로운 팀원은 모든 동료의 스타일을 배우고 이해할 수 있는 방법이 필요합니다. 새 디자이너를 적응시키는 데 따르는 특정 고통이 있습니다. 완전히 새로운 간격(또는 간격 부족) 논리, 흔들리는 색상 시스템, 다른 글꼴 크기, 다른 정렬 습관 등입니다.
디자인 시스템은 새로운 개발자가 배워야 하는 것의 수를 줄여줍니다. 개발된 모든 요소를 연구하는 대신 디자인 뒤에 있는 제한된 수의 규칙만 배우면 됩니다. 그 후에는 새 개발자가 작업하는 각 구성 요소가 익숙할 것입니다.
디자인 시스템이 있으면 모든 프로젝트 구성 요소를 배우는 대신 상당히 제한된 규칙 집합 하나만 배우면 되므로 새로운 개발자를 온보딩하는 데 드는 비용을 줄일 수 있습니다.
우리는 디자인 시스템으로 디자인을 시작한 많은 프로젝트를 가지고 있습니다. 매번 목업을 배우는 데 오랜 시간을 할애할 필요 없이 개발이 시작되고 원활하게 확장되었습니다.
장기간에 걸쳐 프로젝트를 지원하고 발전시켜야 합니다.
'진화'라는 단어의 그래픽
너무 많은 디자이너들이 화면을 분리된 예술 작품으로 구성하고 단순히 보기 좋은 요소를 결합합니다. 이 방법으로 작업하면 색상 스타일, 여백 및 패딩, 구성 요소 크기 등에 많은 변동이 생깁니다. 개발자는 이 엉망진창을 보고 (좋은 경우) 계속해서 디자이너에게 "이 두 가지 회색 음영이 서로 다른 것을 의미했습니까? 아니면 우연의 일치이며 함께 병합될 수 있습니까?"라고 계속 질문할 것입니다. 이 시나리오에서 개발자가 효과적으로 의사 소통하지 않으면 이해하는 대로 목업을 개발하여 임의의 스타일을 많이 생성하여 코드를 읽기 어렵게 만듭니다.
디자이너와 스타일 변동에 대해 논의한 후 개발자는 서로 동기화해야 합니다. 그렇지 않으면 각 개발자가 약간 다른 구성 요소를 생성하므로 머지 않아 충돌이 발생하게 됩니다. 이것이 디자인 부채가 기술 부채로 전환되는 방식입니다.
eBaymag의 마술: 국제 eBay 분사의 이면에서
eBaymag의 마술: 국제 eBay 분사의 이면에서
2022년 5월 12일
eBaymag의 마술을 위한 표지: 국제 eBay 분사의 후드 아래
또한 읽기
이 기사는 수년간의 프로젝트에 대한 이야기와 사용된 디자인 시스템을 보여줍니다.
게다가 어떤 디자이너도 반년 전에 일부 프로젝트 모듈에서 사용한 모든 패딩과 요소 크기를 기억할 수 없습니다. 오래된 모형에 무언가를 추가하려고 할 때 디자이너는 컨텍스트를 기억하고 요소 사이에 특정 여백을 사용한 이유와 유사한 구성 요소의 다른 여백과 다를 수 있는 이유를 기억해야 합니다. 이는 결국 개발자가 처리하는 데 추가 시간을 소비해야 하는 점점 더 많은 변동으로 이어질 것입니다.
디자인 시스템은 디자인 및 기술 부채를 통제하는 데 도움이 됩니다.
디자이너는 오래된 모형을 리버스 엔지니어링하는 데 시간을 소비하지 않습니다. 개발자는 일관된 공간, 색상 및 크기의 모형을 받습니다. 또한 잘 고려된 디자인 시스템은 개선 및 리팩토링 비용을 줄입니다.
기본 UI 키트와 함께 사전에 강력한 디자인 시스템을 사용하면 핵심 UI 구성 요소를 리팩토링할 필요 없이 프로젝트가 더 오랜 기간 동안 계속 발전할 수 있습니다.
디자이너에게 병목 현상이 발생하지 않도록 하고 싶습니다.
병목 현상을 시각화한 '디자인'이라는 단어의 그래픽
명확한 시스템 없이 작업하는 디자이너는 임의성과 부채를 생성할 뿐만 아니라 어떤 면에서는 일종의 공급업체 잠금과 같습니다. 예를 들어, 디자이너가 그만두기로 결정하면 아무도 단순히 디자인을 디컴파일하고 해당 논리를 추출할 수 없습니다. 실제로 새로운 디자이너는 오래된 모형을 리버스 엔지니어링하는 것보다 모든 것을 처음부터 다시 디자인하는 것이 훨씬 쉽다는 것을 알게 될 수 있으며 그 시간 동안 기능 개발이 중단됩니다. 이 특정 브랜드의 병목 현상을 경험했거나 우려하고 있다면 견고한 디자인 시스템이 절실히 필요하다는 분명한 신호입니다.
또한 견고한 디자인 시스템은 필요에 따라 프로젝트에서 디자이너를 교체하거나 제외할 수도 있음을 의미합니다. 새로운 디자이너는 이전 디자이너가 설정한 몇 가지 핵심 규칙만 배우면 됩니다. 새 디자이너는 스타일을 새로 고치거나 다른 글꼴을 사용하거나 색상을 바꾸고 싶어할 수 있지만 시스템은 모든 것을 함께 유지하므로 완전한 재설계 없이 새로운 기능을 계속 개발할 수 있습니다.
디자인 시스템을 통해 개발자는 디자이너의 개입 없이 새로운 기능을 계속 개발할 수 있습니다.
마지막으로, 특정 시점에서 개발자는 디자이너를 사용할 수 없는 기간 동안 자체적으로 새로운 기능을 개발할 수도 있습니다. 강력한 디자인 시스템 위에 구축된 UI 키트를 사용하면 프론트 엔드 엔지니어가 디자이너를 사용할 수 없는 중간 개발 기간 동안 프로젝트를 계속 개발할 수 있습니다.
당신은 "완벽한" 결과를 위해 노력합니다
'Pixel Perfect for free'라는 문구의 그래픽
잘 디자인되고 잘 개발된 인터페이스는 견고해 보입니다. 정렬 및 여백에 대한 질문을 남기지 않습니다. 모든 것이 제자리에 있습니다. 또한 설계 시스템은 설계자와 프론트엔드 엔지니어 간에 공유된 관행과 계약을 가지고 있습니다. 이것은 일을 조직적이고 지속 가능하게 유지합니다. 일단 설계 시스템이 공식화되고 구현되면 그 안의 구성 요소는 사용되는 곳마다 동일하게 유지되며 다시 말해서 시간이 절약됩니다.
Martian Design Sprint 표지: 더 빠른 프로젝트 시작 및 실행
또한 읽기
앞에서 설명한 것처럼 시스템이 없는 설계 빌드는 누적 오류로 이어집니다. 설계자가 잘못 사용하는 임의의 공간은 프론트엔드 개발자가 해석하여 궁극적으로 수동 보정이 필요한 예측할 수 없는 결과를 생성합니다. 개발자가 구성 요소 내부에서 패딩 및 여백 사용자 지정을 많이 할수록 구성 요소가 일부 경우에 눈에 띄지 않게 될 가능성이 높아지고 모든 것이 멋지게 보이는지 확인하기 위해 시각적 테스트를 실행하는 비용이 높아지며 팀이 이에 대한 시간을 가질 확률은 낮아집니다.
깔끔한 결과를 얻으려면 깔끔하게 개발된 구성 요소를 사용하여 인터페이스를 구축해야 합니다. 디자인 시스템은 사용할 공간, 글꼴, 각 글꼴 크기에 대한 아이콘 크기, 버튼 내부의 레이블과 아이콘을 감싸는 패딩 등의 규칙을 설정합니다.
이는 두 가지 주요 이점을 제공합니다.
첫째, 개발자는 구성 요소 구성 이면의 논리를 이해하고 정확히 동일한 메트릭을 사용하여 개발합니다. 따라서 디자이너와 개발자는 Figma와 Storybook에서 동일한 구성 요소를 갖습니다.
둘째, 디자이너는 정당한 이유 없이 새로운 것을 발명하는 대신 기존 공간이나 구성 요소를 선택할 준비가 되어 있습니다. 개발자에게도 동일하게 적용됩니다.
이전에 개발된 구성 요소를 재사용하는 이 간단한 기능은 예측 가능한 결과를 제공합니다. 예를 들어 멋진 검색 표시줄을 디자인하고 개발했다면 새로 개발된 필터 표시줄도 멋지게 보일 것입니다. 잘 설계된 외관을 계승하는 시각적으로 동일한 구성 요소이기 때문입니다.
