# 👊 디자인 시스템 공부하기 01

# 하게된 이유

- 현재 채용공고만 봐도 디자인 시스템이라는 단어는 거의 들어가고 있다.

- 예전 회사에서 디자인 시스템을 만들어, 프로젝트를 진행하긴 했지만 뭔가 아쉬웠다.

    - 현재 동아리 디자인 작업을 하면서도 내가 예전에 정말 대략적으로만 스타일을 지정해놨었구나 하고 반성하게 되는 순간이 계속 찾아오고있다...

- 디자인 시스템을 만들면서 **피그마 베리어블 기능**에 대해서도 공부도 같이 할 수 있다.

# 디자인 시스템 장단점

개인적인 생각이지만 장점으로는

1. **일관성**
1. 

2. **업무 효율성
2. **사전 정의 된 컬러,컴포넌트 등을 재사용하기 때문에 빠르게 이용할 수 있고 디자인 이외에 다른 것들에 리소스(고객 경험 등)를 활용할 수 있다.
2. 또한 개발자,디자이너,기획자 등 같은 문서를 보기 때문에 서로 오해없이 소통할 수 있다.

단점으로는

1. **만드는데 시간이 오래 걸리고 추후 관리도 해야한다.**
1. 한 번 만들고 끝! 이 아니라, 팀 내에서 계속 유지관리를 해야한다.
1. (괜히 디자인시스템 팀이 따로 있는 회사가 있는게 아닌 것 같다)

# 목표

- 피그마 베리어블 기능을 최대한 활용해 제작하기!

- 최대한 꼼꼼하게 적용해보기

### 컬러 정의

먼저 크게 primitives와 sementic 컬러로 나누어서 정리를 진행했다.

정리를 진행하다보니 어떻게 정의할까 고민되었던 것이 있는데

시맨틱 컬러를 지정하고 인터렉션(호버,포커스,프레스드 등)은 오퍼시티로 위에 덮어서 처리하는 방법이랑

아예 인터렉션 컬러까지 전부 베리어블로 지정하는 방법 두가지가 있는 것 같은데

이거는 그냥 디자이너 취향?차이인지가 조금 궁금해졌다...

일단 오퍼시티로 조정하는 방식으로 진행하기로했다!

![피그마로 컬러 정의 중](https://upload.cafenono.com/image/slashpagePost/20240723/151446_E5RLygkLNBRgfNJgEY?q=80&s=1280x180&t=outside&f=webp)

정리를 하면서 느끼는 것은 위에도 고민했던거와 비슷하지만, 정의를 어떻게 내리는 게 좋을까에 대한 고민을 계속 하게되는 것 같다.

시맨틱 컬러 정의를 다른 디자인시스템들은 어떻게 했는지 좀 더 알아보면서 해야겠다는 생각인데 그래도 일단 위에 두가지 경우가 보편적인 것 같기도하다! (대략 알아본 결과로는..)

그래서 하다보니까 역시 디자인 시스템 팀이 왜 따로 존재하는지 알 것 같다.. 고려해야할게 너무 많고~ 유지보수할 때도 복잡할 것 같다.

일단 대략적으로 컬러를 정의해보았고,

다음에는 컬러 베리어블 등록 및 설명 작성까지 진행 후 타이포그래피, 그리드, 그림자까지 정의해보려고한다.

For the site tree, see the [root Markdown](https://slashpage.com/hilda.md).