사용자 중심 서비스 만들기

국내외 UX/UI 가이드라인 or 디자인 시스템 참고 사이트

WORKFORME 2024. 11. 15. 21:30

여러분은 UX/UI 디자인을 하시다가 문득, 이런 궁금증이 드신 적 없으신가요?

 

"이렇게 하는 게 맞나? 다른 사람들은 어떻게 했지? 정답이 있는걸까?"

 

UX/UI 디자인에서 '정답'이라고 콕집어 말할 수 있는 것은 없지만, 여러 전문가들이 모여 정리한 가이드라인은 분명히 존재합니다. 디자인을 하다 미로에 빠졌을 때, 벽에 부딪혔을 때 이러한 가이드라인은 북극성처럼 길을 잡을 수 있게 해줍니다. 

또한 다른 부서(기획, 개발, QA 등) 사람들이 "이렇게 디자인한 근거가 뭐야?" 물어봤을 때 당당하게 대답할 수 있는 근거가 되어주기도 하죠.

 

이번 포스트에서는 여러분의 UX/UI 디자인에 도움을 줄 수 있는 국내외의 대표적인 UX/UI 가이드라인 웹사이트를 소개해 드리겠습니다. 

 


1. 플랫폼 제공자 기반 가이드라인

가장 기본적이면서도 영향력 있는 가이드라인은 주로 거대 글로벌 플랫폼 회사에서 제공합니다. 예를 들어, Google, Apple, Microsoft는 각 운영 시스템의 특성에 맞춘 UX/UI 기준을 제시하여 전 세계 개발자와 디자이너들에게 중요한 참고 자료를 제공해주고 있습니다.

 

 

각 웹사이트에 들어가셔서 'Component' 부분만 살펴보더라도 우리가 모바일앱이나 웹에서 사용하는 거의 대부분의 UX 요소들이 구조, 예시, 사용법과 함께 일목요연하게 정리되어 있답니다.

UX/UI 디자인의 교과서로서 참고하시길 적극 추천드리는 바입니다.

 

🔗 웹사이트 링크

 


2. UI 라이브러리

프론트엔드 개발자들이 UI 컴포넌트를 쉽게 만들고 스타일링할 수 있도록 도와주는 라이브러리도 있습니다.

MUI, Bootstrap, Chakra UI가 대표적인 예시입니다. 이 라이브러리들은 모듈화된 UI 컴포넌트의 코드를 제공하고 있어 간편하게 복붙하고, 필요에 따라 색상이나 크기를 쉽게 커스터마이즈할 수 있습니다.

이런 라이브러리를 활용하면 개발 속도가 엄청나게 빨라질 수 있죠.

 

 

🔗 웹사이트 링크

 


3. 국내 가이드라인

국내의 UX/UI 가이드라인도 점점 더 발전하고 있습니다. 특히 신한은행, 디지털 정부서비스에서 한국형 UX/UI 표준을 아주 깔끔하게 정리하고 있습니다.

번역기 돌리기 귀찮을 때, 한국 사용자들을 고려한 UX/UI 가이드라인이 궁금할 때, 이 두 곳의 가이드라인을 참고하면 좋을 것 같아요.

 

 

🔗 웹사이트 링크

 


4. 종합 디자인 시스템 플랫폼

이렇게 다양한 회사에서 만든 디자인 시스템과 컴포넌트 적용 사례를 모아볼 수 있는 플랫폼도 있습니다. 기본 가이드라인만으로는 성에 안찰 때, 좀 더 다양한 예시를 찾아보고 싶을 때 활용해보세요.

 

 

🔗 웹사이트 링크

 


5. 어떻게 만드는가?

그런데 이런 가이드라인(또는 디자인 시스템), 어떻게 만드는 걸까요?

토스의 개발자 컨퍼런스 Slash 22 발표 자료에서, 실제로 디자인 시스템을 어떻게 도입하고 운영하는지에 대한 인사이트를 발견할 수 있으니 참고해 보세요!

 

 

UX와 DX, 그 모든 경험을 위한 디자인 시스템

토스 디자인 플랫폼 팀은 단순히 UI 요소를 개발하고, 컴포넌트화하는 것 이상의 디자인 시스템을 꿈꿉니다. 더 좋은 사용자 경험을 제공하기 위한 크고 작은 고민들이 개발자 경험 곳곳에 어떤

toss.im

 


이렇게 국내외 대표적인 UX/UI 가이드라인 참고 웹사이트를 공유해 드렸는데요, 다양한 가이드라인을 적극적으로 활용하시면서 탄탄한 사용자 경험 만들어보시길 바라겠습니다.

 

그럼 오늘도, 나를 위한 일하기였습니다.

 

 

 

 

728x90
반응형