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

뒤늦게 다시 시작하게된 디자인시스템 공부하기!

## 저번까지 과정을 하면서 느꼈던 점은

- **딱히 서비스가 없으니까 기준 잡기가 어려웠다.**

    - 그래서 정말 정말 정말 **간단한 서비스를 생각해두고 진행**해야하나? 싶은 생각이 들었다.
    - (근데 그러면 기획도 조금 해야하니까 이쪽 공부?도 같이 병행이 필요할 듯!, 근데 당장 엄청 이게 중요도 있는건 아니니 주객전도되지않도록 조심)

- **과정을 진행하면서 다른 디자인시스템은 어떻게 했는지 같이 기록하는게 좋을 것 같다**

    - 정부 디자인시스템, 11번가 디자인시스템 등 공개된 디자인시스템이 많아서 **비교해서 공부**하면 좋을 것 같았다. 

- **아니면 연습과정으로 생각하고 컴포넌트부터 시작해본다.**

    - 일단 기본적인 컴포넌트인 버튼, 인풋, 컨트롤 등등을 직접 만들어보며 연습한다.

## 그래서 결론은?

**일단 하자!**** **(고민할 시간에 뭐라도 하면서 배우는 것이 더 좋다!)

서비스를 만들어야하나 고민이 되었지만, 그건 차차 생각하도록하고...
일단 나는 디자인시스템을 완벽하게 만드는 것이 아니라, 다양한 디자인시스템을 보면서 
**직접 해보면서 배우는 목적**이 더 크기 때문에 일단 하기로 결정했다.
그 이후에 내 개인 프로젝트를 하면서 + 사이드프로젝트를 하면서 디자인시스템을 만들 때 더 도움이 될 것이라고 생각한다.

---

이전에 컬러랑 타이포는 얼추 잡아놨기때문에 다음단계로 넘어가면서 컬러랑 타이포가 부족한 부분을 보충해가는 방향으로 진행했다.

## 컴포넌트 연습

연습이라는 단어를 붙이긴했지만... 시중에 나와있는 디자인시스템 (머테리얼, HIG, Figma, 원티드 등)은 어떻게 작업을 했는지 확인해보고 나는 이런 방식을 이용해서 컴포넌트를 제작해보는 방식이었다.

그래서 일단 기본 중에 기본! 컴포넌트인 `버튼`, `텍스트필드`, `컨트롤` 파트만 일단 정리했다.

### 버튼

크게 `**Solid**`  `**Outlined**`  `**Text**`  타입을 나눠서 제작했다.

일반적인 버튼만 먼저 만들었다. (아이콘 버튼이랑 다른 버튼은 추후 제작 예정)

![Image](https://upload.cafenono.com/image/slashpagePost/20240906/150508_OoKoodHOsvpUt9QQmD?q=80&s=1280x180&t=outside&f=webp)

이렇게 버튼 컴포넌트 크게크게 정리를 진행 후에 간단하게 가이드라인을 작성했다.

![Image](https://upload.cafenono.com/image/slashpagePost/20240904/153052_9tC0JuyDqwc3Oi7h7W?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpagePost/20240906/163017_RMu54AfXhv8swFHYOU?q=80&s=1280x180&t=outside&f=webp)

아이콘 표시는 예전부터 아무 아이콘으로(대부분 favorite을 나는 이용) 넣어놨는데
최근에 원티드 디자인시스템을 보니까 블랭크 아이콘을 따로 만들어서 아이콘이 들어간다는 표시를 했길래 좋은 것 같아서 홀랑 따라했다 🐥

> 가이드라인 작성하는게 제일 어려웠다...
> 예전에 업무를 진행할 때에는 이렇게까지 자세하게 작성하진않았었고 스펙도 정리를 안했었다. 개발자분이 알아서 피그마를 보시는 정도? 그런데 서로 당연하게 이렇게 작동하겠지~ 하고 달랐던 부분도 존재하긴했어서 
> 회사 상황마다 다르겠지만 가이드 작성할 시간이 있으면 작성하는 쪽이 제일 좋고... 아니면 빠른 개발 후 QA를 통해 수정하는 방법으로 진행하는게 좋을 것 같다는 생각이 든다.
> 근데 세세한 스펙 작성하면서 느끼는 것은 데브모드로 확인하기 편하게 내가 잘 만들어놓는 것이 작업 효율이 높아질 것 같다.

**다른 디자인시스템에서는 어떻게?**

- **머테리얼 디자인3**
- 

![Image](https://upload.cafenono.com/image/slashpagePost/20240906/105245_cYU2DnrbLimjXTSVPf?q=80&s=1280x180&t=outside&f=webp)

이렇게 크게 4가지로 정리해놓고 있었고,

![Image](https://upload.cafenono.com/image/slashpagePost/20240906/105554_HjooLeOagyZj5gxr39?q=80&s=1280x180&t=outside&f=webp)

버튼 컴포넌트는 아이콘있는 것과 없는 것을 같이 만들어서 아이콘 있는 쪽에 패딩값을 조금 줄여 시각적으로 가운데 보일 수 있도록 조정한 것을 확인할 수 있었다.

![Image](https://upload.cafenono.com/image/slashpagePost/20240906/105731_7pLDvtEQAq2LPIYl4u?q=80&s=1280x180&t=outside&f=webp)

컴포넌트를 그래서 아이콘을 Boolean처리해서 선택할 수 있게했고, 다양한 버튼 스타일도 하나의 컴포넌트에 다 같이 만들어서 선택할 수 있게 만들었다.

- **iOS 18 UI Kit**
- 

![Image](https://upload.cafenono.com/image/slashpagePost/20240906/110031_vDNrTd0uSLFiuheFhN?q=80&s=1280x180&t=outside&f=webp)

iOS 경우에도 버튼의 다양한 종류들을 한 컴포넌트에 합쳐서 만든 것을 확인할 수 있었다.

![Image](https://upload.cafenono.com/image/slashpagePost/20240906/110134_B2EgJMoeaxmrjLlo0t?q=80&s=1280x180&t=outside&f=webp)

머테리얼과 다르게 Size도 컴포넌트에서 선택이 가능하게 제작되었다.

- **원티드 라이브러리**

![Image](https://upload.cafenono.com/image/slashpagePost/20240906/110302_i7Z9Hwhy7SQGHdhwPj?q=80&s=1280x180&t=outside&f=webp)

원티드의 경우에는 각각 스타일의 버튼들이 따로따로 컴포넌트로 제작된 것을 확인할 수 있었다.

![Image](https://upload.cafenono.com/image/slashpagePost/20240906/110403_AADdEfPPpIYOFvWIW6?q=80&s=1280x180&t=outside&f=webp)

그리고 Nested Property가 사용된 모습도 확인할 수 있었고, 아이콘의 경우에도 왼쪽,오른쪽 둘다 있는 방식으로 제작되었다.
신기했던 것이 인터렉션을 오퍼시티로 만들어 컴포넌트화 해서 위에 얹는 방식으로 사용되고있던 점을 확인할 수 있었는데 좋은 방식 같다고 느껴졌다.

### 텍스트 필드

위의 버튼 과정과 마찬가지로 컴포넌트 정리 → 가이드라인 정리 방향으로 진행했다.

![Image](https://upload.cafenono.com/image/slashpagePost/20240906/150309_5vQRLfY1OjDSksjynD?q=80&s=1280x180&t=outside&f=webp)

예전에는 텍스트필드에 긴 텍스트 작성하는 것도 같이 포함시켜놨는데 이번에 정부 디자인 시스템을 봐보니 Text Area라고 구분해놓은 것을 보고, 나눠서 작업하는게 더 효율적일 것 같다는 판단이 생겨서 그렇게 작업했다.

![Image](https://upload.cafenono.com/image/slashpagePost/20240906/202657_mmC11AMlzoBQ9mH5W5?q=80&s=1280x180&t=outside&f=webp)

![Image](https://upload.cafenono.com/image/slashpagePost/20240906/214015_1H2VhuWM2thsItQgnF?q=80&s=1280x180&t=outside&f=webp)

버튼처럼 세세하게 적는 것은 조금 시간이 걸리기도해서, 일단은 컴포넌트만 제작하는 것만 진행하려고 생각 중이다.

> 요새 많은 회사에서 디자인시스템을 활용하려는 것 같고, 이용하려는 것 같다.
나는 뭔가 이름에서 느껴지는 "시스템" 거창하게 다 세세하게 작성되어야한다! 하는 것 때매 어렵게만 느껴졌는데
본질은 결국 사용자가 우리 서비스를 잘 이용할 수 있게 하는 것과 개발자와 디자이너가 더 효율적으로 업무를 진행할 수 있는 것에 있는 것 같다. 그래서 디자인시스템을 몇개 보더라도 다 같지않은 것을 확인할 수 있고
작업하는 서비스에 맞게 작은 단위, 즉 컬러,텍스트,컴포넌트만 정리를 잘 해놓은다던가 이런식으로 해도 그 서비스의 디자인시스템이라고 할 수 있을 것 같다는 생각이 들었다~

컴포넌트 하나하나 작업하면서 이런 디자인은 어떨까 저런 디자인은 어떨까 고민하는 시간은 도움이 되는 것 같아서 쭉쭉 일단 컴포넌트를 만들어가면 좋을 것 같다. 

**참고문헌**

- **원티드 디자인시스템 (문서 정리 방식이나 가이드라인 정리방식을 참고함)
- **([https://www.figma.com/community/file/1355516515676178246/wanted-design-library](https://www.figma.com/community/file/1355516515676178246/wanted-design-library) )

- **토스 (문서 정리 방식이나 가이드라인 정리방식을 참고함)
- **([https://toss.tech/article/toss-design-system-guide](https://toss.tech/article/toss-design-system-guide) )

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