Home

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

전석희

Sep 6, 20242y ago

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

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

•

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

◦

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

•

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

◦

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

•

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

◦

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

그래서 결론은?

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

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

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

컴포넌트 연습

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

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

버튼

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

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

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

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

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

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

•

머테리얼 디자인3

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

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

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

•

iOS 18 UI Kit

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

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

•

원티드 라이브러리

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

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

텍스트 필드

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

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

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

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

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

참고문헌

•

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

•

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

Subscribe to 'hilda'

로그인 후 구독하실 수 있습니다!

Open channel