디자인 시스템

goorm에서 경험했던 디자인 시스템을 바탕으로 써보기.

디자인 시스템이란?

각종 서비스 UI 디자인에서 재사용 가능한 컴포넌트와 패턴을 정의해, 전체 디자인을 일관성 있게 적용할 수 있도록 만든 가이드라인 또는 규칙을 말한다.

 

미리 만들어 놓은 컴포넌트를 재사용함으로써, 더 효율적으로 디자인을 할 수 있다.

---

장점

1. 디자인의 일관성을 제공 (사용자에게 설득력과 신뢰를 준다)

2. 쉬운 재사용, 재활용으로 생산성 증가

개발자로서 GDS를 다룰 때, 일관성 있는 콘텐츠로 개발 속도를 높여주는 즐거움을 느껴봤다.

단점

1. 디자인 시스템 유지보수하는 데 큰 비용이 들 수 있다.

2. 사용자에 피드백에 따라 지속적인 업데이트가 필요하기에 비용을 충분히 고려해야 한다.

3. 사용 지침이 필요하다 (없을 경우,  잘못 적용할 수 있다)

다양한 goorm내 서비스가 공통 컴포넌트라는 명목으로 추가 개선을 요구하다 보니 코드 퀄리티가 떨어지는 상황이 발생
재직 중일 때, 파운데이션과 컴포넌트라는 개념은 있되, 프레임워크까지는 고려가 되지 않은 상황으로 보임.

---

알아야 할 용어

 

1. 파운데이션

가장 기초가 되는 엘리먼트

ex) 타이포그래피, 컬러, 아이콘, 패딩, 이미지, 모션, 보이스 톤 등

 

2. 컴포넌트

파운데이션들이 모여서 UI 컴포넌트를 구성

ex) 버튼, 오버레이, 카드, 내비게이션, 모달 등

 

3. 프레임워크

컴포넌트들이 모여서 하나의 서비스 템플릿을 구성

예) 템플릿, 페이지, 테마 등

---

회고

디자인 시스템은 디자이너, 개발자, 기획자 등 관련자들이 일관성 있는 UI를 통해 서비스에 대해 고객에게 전달하는 메시지라고 생각한다.

 

지금까지 디자인 시스템을 통해서 컴포넌트를 제작해왔지만 이번 정리하는 기회를 통해 깨달은 부분이 있는데

그건 바로 디자인 시스템에 대한 기초용어가 부족했던 점인 것 같다.

 

지금까지 구름에서 경험했던 컴포넌트는 실제론 프레임워크였던 것 같다. 

왜냐하면 컴포넌트 요소들을 조합해서 만든 프레임워크를 GDS Components라고 불러왔기 때문에 오해의 소지를 만든 것 같다.

 

그렇게 보면 지금까지 우리는 Top-Down 방식으로 컴포넌트를 만들어왔던 것은 아닐까?

되돌아보면 Top-Down으로 했을 때, 확장성이 떨어지는 상황을 겪어본 것 같다.

 

왜냐하면 서로 다른 서비스에 특화된컴포넌트를GDS 변환하는 과정에서 추출했기 때문에 다른 서비스에서 적용하는데 이해관계가 맞지 않는 상황이 발생했던 것 같다.

 

여기서부터가 디자이너분들과 개발자들 사이에서 컴포넌트 요소들을 묶는데 다르게 부르게 된 게 아닌가 싶다.

실제로도 디자인 시스템과 개발환경에서 부르는 게 다른 요소도 아직까지 존재하는 것으로 보인다.

 

이 부분은 유념해서 다음부터는 서로에 대해서 이해하고 공통된 단어로 부르고 개발하면 좋을 것 같다.

---

참고

https://blog.naver.com/PostView.naver?blogId=designup80&logNo=222717656047