섹션 2. Variant 기능 ~ 디자인 시스템이란?

1. Variant 기능으로 버튼 컴포넌트 만들기

 

오토 레이아웃 기능을 이용하여 버튼을 하나 만든다.

: Width, 여백, 폰트, 텍스트 크기 등을 조절해준다.

-> 만든 버튼을 컴포넌트로 바꾼다.

 

그럼 활성화/비활성화 버튼은 어떻게 만들까?

: 필요할 때마다 컴포넌트를 복사해서 수정한다?

-> 조금씩 차이가 생긴다.

 

즉, 쓰임에 따라 다양하게 바꿔 쓸 수 있는 버튼들을 모두 컴포넌트화 하는 것이 좋다.

 

* 여러가지 컴포넌트를 만든 뒤에, Variants 를 활성화해도 되고

Variants 를 활성화하고 컴포넌트를 추가해도 된다.

 

Variants 기능을 적용하면, 기존 컴포넌트에 상태가 추가된다.

-> 이전에 네비게이션 컴포넌트에서 아이콘을 바꾸듯이,

버튼 컴포넌트에서도 상태를 변경하여 변경사항을 쉽게 적용할 수 있다.

 

이렇게 만든 버튼에 아이콘이 포함되어 있다면,

아이콘을 사용할 때/하지 않을 때는 어떻게 만들까?

: 사용하지 않을 경우에는 아이콘을 지운다?

-> 매번 아이콘을 지우는게 번거롭다.

 

Variants 의 아이콘을 모두 선택하고 Layout 옵션에서 Create Boolean Property 를 적용한다.

: 아이콘에 True, False 를 적용할 수 있다.

-> 아이콘이 존재할 때, 존재하지 않을 때를 옵션으로 쉽게 변경할 수 있다.

 

반대로, 아이콘만 있고 텍스트는 없을 때는?

: 텍스트에 True, False 를 적용할 수 있다.

-> 아이콘과 마찬가지로, 텍스트가 존재하지 않을 때를 옵션으로 변경할 수 있다.

 

---

 

2. 디자인 시스템이란?

 

디자인 시스템이란, 디자인 업무 체계라고 볼 수 있다.

: 개발자와 디자이너가 협업할 때 중요하다.

 

디자인 시스템에는 정답이 없다.

: 그럼 무엇을 기준으로 삼아야 할까?

-> 개발하고자 하는 서비스의 고객들이 가장 많이 접했을 것으로 예상되는 것을 기준으로 삼는다.

 

예를 들어, 안드로이드 앱을 만든다고 하자.

: 안드로이드 폰 사용자들에게는 구글의 Material Design 을 많이 접했을 것이다.

-> Material Design 을 기준으로 삼는다.

 

* 내용이 워낙 방대하니, 디자인 시스템을 모두 참고하려고 하진 말자.

필요할 때마다 찾아보는 것이 도움된다.

 

레고로 예를 들어 디자인 시스템을 설명해보자.

레고로 어떤 모형을 만든다고 했을 때,

-> 처음에는 어떤 모형을 만들지 스케치를 할 것이고.

-> 어떤 색상을 사용할 지 결정할 것이고.

-> 어떤 블럭이 필요할 지, 어떤 블럭을 어떻게 조합할 것인지 결정할 것이다.

* 부분적 조립물이 필요할 것이고, 어떻게 조립할 지 설명서도 필요할 것이다.

 

아토믹 시스템으로 설명해보자.

* 아토믹 시스템이란? 브래드 프로스트가 시스템을 원자에 비유해서 만든 이론.

 

원자를 사용해서 책을 만든다고 했을 때,

-> 어떤 원자들을 사용해서 만들지 계획할 것이고.

-> 원자의 핵을 만들고 그것으로 원자를 만들고.

-> 그 원자들을 조립하여 페이지를 만들고, 페이지를 이어붙여 책을 만들 것이다.

* 원자 개수가 3개, 10개 등 조립의 개수와 종류는 다양할 것이다.

 

웹 사이트로 예를 들어 설명해보자.

어떤 사이트를 만든다고 했을 때,

-> 어떤 폰트, 컬러, 모션을 사용할 것인지 계획할 것이고. (스타일 결정)

-> 시각적으로 형태를 갖춘 것들을 만들고. (컴포넌트)

-> 컴포넌트들을 조립해서 사이트를 만들 것이다.

* 이때, 위에서 얘기한 부분적 조립물, 개수가 3개 또는 10개인 원자가 이 컴포넌트에 해당한다.

 

컴포넌트가 왜 중요할까?

-> 재활용이 가능한 요소들은 기존에 만들어둔 컴포넌트를 이용하여 다시 사용한다.

-> 가지고 있는 자원을 최대한 활용하여 효율적으로 작업하는 것이 중요하다.

* 이것은 개발자에게도 마찬가지로, 기존에 만들어둔 컴포넌트 코드를 다시 사용하여 효율적인 작업을 중시해야 한다.

 

컴포넌트가 너무 많아!

: 컴포넌트가 너무 많아, 개발자와 디자이너 간의 소통에 문제가 생길 수 있다.

-> 디자인 영역 주변에 디스크립션 (설명) 영역을 만들어 놓고 관련 키워드를 정리해두자.

* 필요에 따라 영문 키워드도 함께 적어두고, 개발자는 이 키워드를 검색하여 컴포넌트를 찾는다.

 

즉, 개발자든 디자이너든 컴포넌트를 잘 만들어두고 사이트를 만들 때는 미리 만들어둔 컴포넌트를 조립하는 식으로 작업하게끔 설계하는 것이 중요하다.

 

디자인 시스템을 초기에 완벽하게 만들어놓고 프로젝트를 시작하는 것은 현실적으로 어렵다.

-> 제품과 더불어 조금씩 계속 업그레이드 시켜나가자.

 

이제, UIKit 파일을 만들어보자.

: 디자인 스타일, 컴포넌트만 모아둔 파일.

* 피그마 커뮤니티에서 적절한 UIKit 파일을 다운받고 우리의 제품에 맞게 커스터마이징한다.

 

만든 UIKit 파일은 라이브러리에 올려두고 사용한다.

* 이전에 팀 라이브러리에 업로드하는 것을 해본 적이 있으므로, 과정은 생략한다.