디자인 시스템 - [1] 설계 및 가이드

디자인 시스템 - [1] 설계 및 가이드

디자인 시스템 - [2] 12가지 세심한 스타일 가이드

디자인 시스템 - [3] 스타일 가이드를 사용하여 웹 워크 플로우 속도 향상

 

 

---

 

 

디자인 시스템이란 무엇일까요?

디자인시스템을 설계하는 사람들이 어떤 도구를 사용하고,

어떤 방법으로 디자인시스템을 만드는지 알아보겠습니다.

 

 

디지털 디자인 분야에서 일하는 사람이라면 누구나 '디자인 시스템'이라는 용어를 들어야 합니다.

그러나 그 의미가 무엇인지 모를 수도 있습니다. 이 기사에서는 디자인 시스템이 무엇인지,

디자인 시스템 사용 이유, 생성 방법 및 유용한 도구를 정확하게 정의합니다.

 

---

 

디자인 시스템이란 무엇인가요?

 

디자인 시스템은 디자이너와 개발자가 함께 만들고 참조하고 개발하는 단일 소스입니다.

글꼴, 아이콘, 색상, 모양, 격자, 애니메이션, 음성 등의 기호 라이브러리로 구성된 규칙 매트릭스는

기능과 계층 적 관련성에 따라 다른 의미를 지니고 있습니다. 

그것은 본질적으로 기존 요구 사항을 충족시키는 것에서 제품이 복잡 해짐에 따라

새로 정의 된 요구 사항으로 진화하는 요소로 구성된 살아있는 유기체입니다.

이러한 요소는 실제 환경에서 즉시 선택하여 사용할 수있는 개발 가능한 구성 요소로 변환됩니다.

 

 

디자인 시스템은 누가 정의하나요?

설계자와 개발자는 민첩한 접근 방식과 긴밀하게 협력하여 설계 시스템의 규칙을 설정합니다.

디자이너는 시각적 커뮤니케이션의 모든 측면 (UI, 브랜딩 및 사용자 경험)을 정의하는 동시에

개발자와 협력하여 이러한 속성을 코딩된 구성 요소로 변형하여 자체적으로 포함 된 방식으로

기술적이고 스타일 적으로 수행 할 때까지 일관되게 반복합니다.

 

 

왜 디자인 시스템이 있는건가요?

디자인 시스템은 확장 가능한 모든 디지털 제품의 기본 요구 사항이지만

핵심은 모든 디자인 작업에 적용되는 원칙입니다.

가장 중요한 측면은 반복해서 반복 할 때 동일한 원칙을 일관되게 돌려주는 일련의 규칙을 마련하는 것입니다.

 

동일한 방식으로 응답하여 웹 디자인을 다른 뷰포트에서 웹 페이지의 콘텐츠없이

행동 블록은, 설계 시스템 컴포넌트의 속성을 정의하고, 각각의 특정 요소를 해결하여

원자 접근법을 따르는 방법의 관점에서 모듈 형 방식으로 간주된다.

 

시스템 설정의 목적은 일관되게 재사용 할 수 있고 스타일, 브랜딩, 행동, 기능 및 제공과 같은

모든 제품 차원에서 매번 수행 할 것으로 예상되는 검증되고 검증 된 구성 요소 라이브러리를 갖는 것입니다.

디자인 시스템의 가장 큰 장점은 고품질 제품을 향한 여정에서 효율적으로 프로토 타입을 만들고

디자인과 코드를 공생 적으로 반복 할 수 있다는 것입니다.

 

디자인 시스템을 어떻게 개발합니까?

이제 디지털 제품 프로젝트를위한 디자인 시스템을 구성하기 위해 취할 수 있는 단계를 살펴 보겠습니다. 

 

 

---

 

01. 명확한 제품 비전 수립

먼저, 개발중인 제품에 대한 명확한 아이디어가 필요합니다.

고려해야 할 몇 가지 필수 질문은 다음과 같습니다.

 

무엇을합니까?

• 제품의 목적은 무엇입니까?
• 이 제품의 요구 사항은 무엇입니까? 
• 수행하려면 제품에 어떤 종류의 기능이 필요합니까? 

누구를위한 것인가?

• 이 제품의 대상은 누구입니까? 
• 사용자에게 제품 수령 방법에 영향을 줄 수있는 문제가 있습니까? 
• 왜 사용자는이 제품과 결합 할 것인가? 무엇이 독특합니까? 
• 사용자는 유사한 제품에 익숙합니까? 
• 제품이 식별 된 요구에 응답하거나 새로운 요구를 작성합니까? 
• 접근성을 다루고 있습니까?

어디에 살 것인가?

• 이 제품은 웹 사이트입니까? 웹앱? 앱? 다른 것?
• 장치에 무관합니까?

 

플랫폼간에 동일한 경험을 제공하거나 특정 상황 내에서 특정 마이크로 경험에 중점을 두어야합니까?

디자인 시스템의 목적은 알려진 문제를 해결하고 개념화 단계에서 새로운 문제를 식별함으로써

개발의 복잡성을 줄이는 것입니다. 프로토 타입 단계에서 피할 수있는 잠재적 보류를 인식하는데

도움이 되므로 프로세스 초기에 제품 매핑을 정의하는 것이 중요합니다.

 

 

02. 공격 계획을 세우십시오

둘째, 최선의 접근 방식을 평가해야합니다.

새로운 제품을 개발하고 있다면 MVP (최소 실행 제품)부터 시작하여 기능 검증 및 사용자 피드백 학습에

주의를 기울여야합니다. 이러한 경우 Google Material UI 또는 Apple UI Kit 와 같은

기존 플랫폼의 기존 UI 키트를 사용하는 것이 좋습니다.

Google의 Material UI는 심층적 인 그래픽 탐색 및 오픈 소스 코드로 제품 개발을 바꾸고 있습니다.

MVP 단계를 거치거나 처음부터 전체 설계 시스템을 작성하는 경우 정보 아키텍처, 사이트 맵 및 사용자 여정과 같은

주요 측면을 포함해야하는 제품 매핑이 먼저 어떤 기본 기능을 처리 해야하는지 알려줍니다.

예를 들어, 제품이 전자 상거래 앱인 경우 홈페이지에서 제품 페이지, 체크 아웃 및 주문 확인에 이르기까지

구매를 수행하기 위해 사용자 전체에 어떤 요소가 필요합니까? 수직 또는 수평 탐색입니까?

CTA의 모양 : 아이콘, 텍스트 만 있고 배경색이 있습니까? 가로, 세로, 가로 중 어떤 이미지 비율을 고려하고 있습니까? 

계층 적 기능으로 각 요소의 속성을 해결함으로써 점진적인 UI 릴리스를위한 견고한 토대를 마련하여

일관되고 안정적인 시스템을 구축 할 수 있습니다.

 

03. 올바른 도구를 선택하십시오

셋째, 제품 개발은 항상 디자이너, 개발자, 제품 소유자, 클라이언트 및 사용자와 관련된

모든 당사자에 의존하는 포괄적 인 프로세스 여야합니다. 이들 개인은 함께 최종 제품 제공으로 이동하는 과정에서

설계 시스템을 형성 할 테스트 장소인 에코 시스템을 만듭니다.

진행 상황을 공유하고 때로는 실시간으로 작업해야하므로 워크 플로에 가장 적합한 도구를 선택하는 것이

중요합니다. 고맙게도, 우리는 디자인 및 프로토 타이핑 도구와 관련하여 선택의 폭이 넓어졌습니다.

Design + Code는 코드에서 프로토 타입을 제작하려는 디자이너라면 배울 수있는 곳입니다.

현재 약간 다른 파일 공유 목표를 충족시키는 플랫폼이 있습니다.

Adobe XD는 최신 릴리스를 통해 발전하고 있습니다. InVision은 견고한 플랫폼이자 귀중한 설계 리소스이며

Figma는 원하는 기능을 결합하여 획기적인 발전을 이루고 있습니다. 또는 작업을 추진하기 위해

코드 작성을 즐기는 디자이너 중 하나라면 Framer X를 좋아할 것입니다.

추가 손이 필요하십니까? 최고의 학습 리소스 중 하나 인 Design + Code를 확인하십시오.

다음 도구도 고려해야합니다.

 

구글 문서

Google 문서는 훌륭한 출발점입니다 (이미지 제공 : Google)

Google 문서 도구 (Google 드라이브 내)는 그 범위가 제한되어 있지만

문서화를 위한 훌륭하고 간단하며 접근하기 쉬운 도구가 될 수 있습니다. 

 

스타일 가이드 도구

 

스타일 가이드에는 유용한 디자인 시스템 도구가 포함되어 있습니다 (이미지 제공 : 스타일 가이드)

설계 시스템 문서화를 지원하고 설계 시스템의 설계, 구축 및 관리를 도와주는 여러 가지 도구가 있습니다.

스타일 가이드 는 검색하기에 좋은 장소입니다. 어떤 도구에 투자하는지 주의하십시오.

팀은 이러한 도구에 많은 시간을 투자 할 것이므로 지금부터 1년이 지나도 여전히 존재한다는 확신이 필요합니다.

 

스케치

 

스케치는 반드시 필요한 도구입니다 (이미지 제공 : 스케치)

디자인에 관해서는 Sketch 로 잘못 가기가 어렵습니다.

시스템 및 / 또는 팀과 함께 작업 할 때 스케치의 중첩 된 기호,

기호 재 지정 및 스케치 라이브러리는 매우 중요합니다.

디자인 시스템을 개발하는 것은 팀워크와 투명성의 원칙에 의존하는 협업 방식입니다.

실수를하고 기꺼이 배우고, 새로운 일을하는 방법을 발견하고, 함께 혁신하고,

종합적으로, 제품이 작동하고 기대를 뛰어 넘기 때문에 잘된 일을 시작하기 만하면됩니다.

세상에서 가장 좋은 느낌입니다. 

 

 

---

 

 

디자인 시스템의 역사 The history of design systems

 

디지털 디자인은 주류 인터넷의 출현 이후 약 20년 동안 미지의 물을 탐색해 왔습니다.

1990 년대에 '디자인'의 모든 측면은 프로그래머를 완벽하게 제어 할 수있었습니다.

검은 색 배경, 픽셀 화가 잘 된 8 x 8 글꼴의 밝은 웹 안전 색상,

유명한 빈티지 그라디언트가 이제 컴백과 ASCII 문자 도면으로 만들어졌습니다. 멋지다

 

ifindit.com은 1990 년대 후반의 검색 엔진으로 실제 그래픽 보석이며 오늘날에도 여전히 살아 있습니다.

당시 웹 레이아웃, 정보 아키텍처 및 사용자 경험에 대한 우려는 컨텐츠와 관련하여 부차적이거나

심지어 3차적이었습니다. 웹 페이지에 더 많이 덤프할수록 좋습니다.

랜딩 페이지에 포함 할 수 없었던 정보는 하이퍼 링크를 통해 사용자를 추가 페이지로 안내합니다.

누가 길고 무거운 무지개 텍스트의 밑줄 친 하이퍼 링크 목록을 잊을 수 있습니까?

어떤 경우에는 탐색에 특별한주의가 있었지만 절대적으로 논리적으로 필요했습니다.

페이지 간의 탐색 일관성은 또 다른 문제였습니다. 초기.

 

 

사용자 여정의 시작

The start of user journeys

디자이너가 웹 혁명에 참여했을 때 완전히 새로운 세계가 공개 된 것처럼 보였습니다.

갑자기 내용이 정적 인 것이 아니었습니다. 절대적인 의미로 하이퍼 링크 할 수있을뿐만 아니라

동일한 환경 내에서 다른 유형의 콘텐츠와 의미의 상관 관계를 만들 수도 있습니다. 

하이퍼 링크는 특정 계층 구조없이 전체 라인 또는 몇 단어로 구성 될 수 있습니다.

획기적인 혁신은 하이퍼 링크를 통해보다 복잡한 여정을 만들 수 있다는 것입니다.

이제 이야기를 들려 줄 수 있습니다. 이는 웹 디자이너가 사용자가 콘텐츠를보고

상호 작용하는 방법과 시기를 정의한 사용자 여정의 초기 단계였습니다.

 

2000 년대로 들어서면서 기술은 빠르게 발전했으며 그로 인해 수많은 새로운 장치, 매체 및 채널에 도달했습니다.

상대적으로 최근에 인정 된 학문으로서, 디지털 디자인은 기술 개발에 대한 반응으로 제한되었습니다.

그때까지는 기술을 따라 잡기보다 기술을 따라 잡는 과정에서 단순히 적응하고 정의하는 데 도움이되는 것이 었습니다.

 

갑자기 새롭고 매혹적인 세상이었던 것은 무한한 현실이 되었습니다.

디자이너들은 이제 여러 화면 해상도뿐만 아니라 끝없는 장치 유형에 대해 걱정해야 했습니다.

적응 형 레이아웃, 더 작은 화면의 숨겨진 콘텐츠 및 가독성에 대한 질문은 전면 및 중앙에 나타났습니다. 

새로운 도전과 기회의 복잡성으로 인해 디자인은 웹 구축의 핵심 요소가 되었습니다.

정보 아키텍처, 사용자 여정 및 전반적인 사용자 경험과 같은 측면은 이제 목적, 기능 및 브랜딩을 보완합니다.

인지 과학의 요소는 웹 사이트를 디자인 할 때 느리지 만 확실하게 완전히 작용했습니다.

 

 

반응형 미디어쿼리를 개발한 에단 마코트 Responsive Web Design 

A responsive game-changer

터치 스크린 스마트 폰이 주류 시장에 진입 할 때, 기업들은 모바일 디자인을 더 심각하게 받아들이기 시작했습니다.

모바일 웹 액세스, 더 빠른 네트워크 속도, 더 높은 이미지 해상도 및 안전한 온라인 지불 개발은

기업이 데스크톱 경험을 고수하기보다는 추가 터치 포인트에 투자하는데있어 설득력 있는 주장이 되었습니다.

전자 상거래 초기에 가장 경제적 인 전망을 가진 브랜드는 전용 모바일 웹 사이트 개발을 시작하여

다른 산업계가 따라야했습니다. 시장의 신뢰는 커지고 기술과 디자인에 대한 추가 투자로 인해

2010년 Ethan Marcotte가 만든 용어인 반응 형 웹 디자인의 획기적인 개발로 이어졌습니다.

이 접근 방식은 완벽한 게임 체인저였습니다.

미디어 쿼리를 통해 장치에 관계없이 모든 화면 해상도에서 유동 격자 및 컨텐츠 표시를 제어 할 수있는

새로운 코딩 방법을 도입했습니다. 디자이너가 제어 할 수있는 진정한 혁신으로,

출력 품질을 즉시 높이는 동시에 360도 사용자 환경을 최적화하는데 집중할 수 있습니다.

학문으로서의 디지털 디자인이 어떻게 실행에 더 집중되었는지 쉽게 알 수 있습니다.

초기 단계부터 빌드와 밀접한 관련이 있었으며 매체의 기술적 한계로 인해 디자인 사고와

문제 해결 프로세스를 타협해야 했습니다.

 

Do first, think later

이 기념비적 인 도약이 진행되는 동안 예외로 여겨 졌던 것이 규칙이되었습니다.

실행 지식은 지난 10년 동안 번성했지만, 역 프로세스가 표준 워크 플로우로 뿌리를 내렸다는 의미이기도 합니다.

'먼저 생각하고 나중에 생각하십시오'. 이는 고객이 돈 낭비로 생각할 시간을 해석하여 결과적으로

자체 제품 개발에 부정적인 영향을 미쳤던 결과입니다. 

많은 사람들이 어려운 방법을 배웠지만

처음부터 디자이너가 자신의 일을 제대로 수행 할 수 있도록 하는 것이 좋습니다.

고객이 먼저 고객의 문제와 문제점을 분석하고 이해하게 한 다음 작동하고

원하는 결과를 제공하는 솔루션을 제안해야 합니다.

빠른 배송을 위해 필수 단계를 놓치면 기본 요소가 강제로 무시되고

성공적인 결과가 기하 급수적으로 줄어든다는 것을 이유로 프로세스라고 합니다.

 

동시에, 디자인 툴이 웹 개발로 발전함에 따라 디지털의 시각적 측면에 거의 독점적으로 집중하는것이 쉬워졌습니다.

이것은 실수이며 많은 고객이 기꺼이 액면가를 취합니다. 좋아 보인다고해서 작동한다는 의미는 아닙니다.

마찬가지로, 무언가가 효과가 있다고해서 그것이 옳다는 것을 의미하지는 않습니다.

그것은 좋은 디자인과 전혀 디자인의 차이입니다. 많은 경우에 다르게 보일 수도 있습니다.

지난 20년간의 통합 된 학습은 기술과 디자인이 조화롭게 융합되는 곳으로 산업을 가져 왔습니다.

디자인 사고와 프로세스에 합당한 가치를 부여하는 동시에

모든 팀, 고객 및 가장 중요한 사용자에게 도움이되는 민첩한 접근 방식으로 제품을 구축 할 수 있습니다.

디지털 시맨틱이 전 세계적으로 공통된 언어가됨에 따라 보편적 인 행동 패턴이 등장하여

모든 물리적 경계 나 문화에서 공유된 사고 구조를 즉시 이해할 수 있습니다.

화면의 요소는 특정 알파벳으로 제한되거나 정의되지 않은 특정 기능과 관련된 기호가 됩니다.

그것들을 디자인 시스템이라고 합니다.

 

 

 

 

---

 

 

최고의 회사 디자인 시스템 살펴보기

 

UXPin, 패턴 라이브러리의 무료 오픈 소스 저장소 인 Adele을 출시합니다.

 

점점 더 복잡 해지는 웹 및 모바일 제품의 복잡성이 제품 개발 프로세스를 넘어섰습니다.

웹 초창기에 작동하던 것이 감소하는 수익을 창출하기 시작했으며

디지털 제작의 혼란을 막기 위해 회사는 디자인 시스템에 투자하기 시작했습니다.

 

디자인 시스템이나 패턴 라이브러리를 만드는 것은 쉬운 일이 아닙니다.

많은 결정이 필요한 긴(무한하지 않은 경우) 프로세스입니다.

이러한 결정 중 일부는 구조와 기술에 관한 것입니다.

모두 복잡하고 조직의 설계 및 개발 미래에 큰 영향을 미칩니다.

 

그렇기 때문에 디자인 시스템에서 작업하면서 다른 사람들이 특정 문제를 어떻게 해결했는지

지속적으로 확인하는 경향이 있습니다. GitHub 리포지토리와 문서로 다이빙하는 것은 매우 가치가 있지만

많은 시간과 노력이 필요합니다. 둘 다 시스템에서 실제로 새로운 컴포넌트를 생성하는 방향으로 나아갈 수 있습니다.

 

그 결과 UXPin은 Dropbox, Mozilla Firefox, GOV.UK, Lonely Planet 및 Buzzfeed 등의 예제를 포함하여

공개적으로 사용 가능한 디자인 시스템 및 패턴 라이브러리의 오픈 소스 저장소 인 Adele 을 출시했습니다.

그것은 XEROX PARC 프로그래머 Adele Goldberg의 이름을 따서 명명되었습니다.

 

 

 

비교와 대조

 

특정 기술, 데이터 구조를 사용하거나 관심있는 시스템의 일부를 사용하는 시스템 목록을 얻을수 있습니다.

React 구성 요소, CSS-in-JS, 접근성 지침 또는 색상 팔레트를 찾고 있는지 여부 – 아델의 모든 것.

Adele은 디자이너와 제품 팀이 다음을 수행하여 패턴 라이브러리에 대한 최상의 결정을 내릴 수 있도록 도와줍니다.

 

• 다른 회사 시스템에 사용 된 기술 탐색
• 데이터 구조 비교 (이름 지정 패턴, 특정 지침의 존재 여부 (예 : 접근성 지침))
• 컴포넌트 및 디자인 토큰에 대한 구현 세부 사항 확인
• 경영진이 설계 시스템을 수용하도록 설득하는 데 도움이되는 자료 수집

 

Adele은 30 개 범주로 분석 된 43개의 시스템으로 시작했습니다.

그러나 더 많은 노력이 진행되고 있습니다. Adele은 설계 시스템 구축 및 유지 관리 커뮤니티를위한

오픈 소스 도구입니다. 목표는 공개적으로 사용 가능한 모든 설계 시스템에 대한 정보를 수집하는 것입니다.

 

디자인 시스템에 대한 모든 데이터는 개별 JSON으로 제공됩니다.

누구나 데이터를 수정하거나 새로운 시스템을 추가하여 기여할 수 있습니다.

(기여에 대한 세부 사항은 Adele의 저장소에서 readme를 확인하십시오)

Adele에 시스템이 보이지 않으면 누락 된 데이터를 찾거나 다른 범주의 데이터를 기꺼이 추가하려는 경우

참여하십시오! 이 저장소만 함께 사용할 수 있습니다.