[Do it! 프로덕트 디자인 입문 with 피그마] 7-1 ~ 7-3장

디자인 시스템

: 반복적인 디자인 요소를 조직적으로, 효율적으로 관리하는 것

 

디자인 시스템의 목표

: 실무자의 프로덕트 디자인 업무 효율성 극대화

 

디자인 시스템의 단계

1. 만드는 서비스의 어떤 요소들에 시스템화가 필요한지 조사하기

 (ex. 실무자 대상으로 사용자 인터뷰/설문/워크샵 진행)

2. 컬러, 폰트, 그리드 등을 미리 정의하고 일관적으로 사용

3. 버튼, 카드, 드랍다운 등 기초 UI  컴포넌트 만들기

4. 컴포넌트 하나에 다양한 추가 정보 넣기

5. 앞에서 만든 다양한 컴포넌트를 조합해 필요한 레이아웃을 어떻게 구성할 수 있을지 페이지별, 레이아웃별로 고민

6. 디자인 시스템 배포 및 모니터링

7. 커스텀 가능한 영역 고민

8. 조명 플랜 (디지털 화면의 다크 모드와 라이트 모드)

9. 오픈 행사 (외부 공개)

 

디자인 시스템 사례

구글의 머터리얼 디자인

• 다양한 OS에서 디자이너와 개발자 모두에게 친숙한 방식으로 컴포넌트를 제공함
• 높은 접근성 덕분에 머터리얼 디자인의 컴포넌트만 잘 이해하고 있어도 하나의 앱 화면을 빠르게 구현할 수 있음
• 구글 특유의 브랜딩이 묻어나서 완전히 디자이너가 원하는 룩으로 수정하기 어려움

토스 디자인 시스템 (TDS)

• 프레이머라는 툴을 활용해 여러 디자인 요소를 컴포넌트화해서 디자인 에셋을 효율적으로 활용
• 프레이머에 익숙하지 않은 디자이너도 무리 없이 사용해 볼 수 있도록 컴포넌트별 인터랙션 옵션을 직관적으로 설계함
• 별도 프로토타입 뷰를 사용하지 않고도 디자인하는 화면에서 인터랙션을 실시간으로 확인할 수 있음

IOS 디자인 시스템

• 안드로이드와 iOS에서 기본적으로 제공하는 컴포넌트를 활용

 

스타일 적용하기

 

텍스트의 폰트와 동일한 값을 갖고 있는 폰트가 있는지 찾을 때

일일이 눈으로 보고 폰트를 확인하는 것은 비효율적이다.

->Similayer플러그인 활용

Similayer: 속성이 같은 레이어를 한번에 선택할 수 있게 해주는 플러그인

내가 현재 선택한 레이어가 갖고 있는 속성을 보여주고 원하는 속성을 선택해 공통점이 있는 레이어를 모두 선택할 수 있다.

원하는 레이어를 한번에 모두 선택할 수 있다.

 

 

 

컴포넌트는 우리 제품 상황에 맞게 최대한 단순하고 직관적인 네이밍으로, 최소한으로 만들어 효율적으로 관리할 수 있도록 설계해야 한다

 

좋은 네이밍의 효과

• 수많은 컴포넌트 중 현재 상황에 필요한 컴포넌트를 쉽게 파악할 수 있다
• 네이밍에 기반해 제작 의도에 맞게 컴포넌트를 사용할 수 있도록 도와준다
• 컴포넌트의 용도가 달라졌을 때 발생할 수 있는 혼란과 시간 낭비를 최소화할 수 있다