국내외 UX/UI 가이드라인 or 디자인 시스템 참고 사이트
여러분은 UX/UI 디자인을 하시다가 문득, 이런 궁금증이 드신 적 없으신가요?
"이렇게 하는 게 맞나? 다른 사람들은 어떻게 했지? 정답이 있는걸까?"
UX/UI 디자인에서 '정답'이라고 콕집어 말할 수 있는 것은 없지만, 여러 전문가들이 모여 정리한 가이드라인은 분명히 존재합니다. 디자인을 하다 미로에 빠졌을 때, 벽에 부딪혔을 때 이러한 가이드라인은 북극성처럼 길을 잡을 수 있게 해줍니다.
또한 다른 부서(기획, 개발, QA 등) 사람들이 "이렇게 디자인한 근거가 뭐야?" 물어봤을 때 당당하게 대답할 수 있는 근거가 되어주기도 하죠.
이번 포스트에서는 여러분의 UX/UI 디자인에 도움을 줄 수 있는 국내외의 대표적인 UX/UI 가이드라인 웹사이트를 소개해 드리겠습니다.
1. 플랫폼 제공자 기반 가이드라인
가장 기본적이면서도 영향력 있는 가이드라인은 주로 거대 글로벌 플랫폼 회사에서 제공합니다. 예를 들어, Google, Apple, Microsoft는 각 운영 시스템의 특성에 맞춘 UX/UI 기준을 제시하여 전 세계 개발자와 디자이너들에게 중요한 참고 자료를 제공해주고 있습니다.
각 웹사이트에 들어가셔서 'Component' 부분만 살펴보더라도 우리가 모바일앱이나 웹에서 사용하는 거의 대부분의 UX 요소들이 구조, 예시, 사용법과 함께 일목요연하게 정리되어 있답니다.
UX/UI 디자인의 교과서로서 참고하시길 적극 추천드리는 바입니다.
🔗 웹사이트 링크
- Material Design (Google): https://m3.material.io/
- Human Interface Guidelines (Apple): https://developer.apple.com/design/human-interface-guidelines/
- Fluent2 (Microsoft): https://fluent2.microsoft.design/
2. UI 라이브러리
프론트엔드 개발자들이 UI 컴포넌트를 쉽게 만들고 스타일링할 수 있도록 도와주는 라이브러리도 있습니다.
MUI, Bootstrap, Chakra UI가 대표적인 예시입니다. 이 라이브러리들은 모듈화된 UI 컴포넌트의 코드를 제공하고 있어 간편하게 복붙하고, 필요에 따라 색상이나 크기를 쉽게 커스터마이즈할 수 있습니다.
이런 라이브러리를 활용하면 개발 속도가 엄청나게 빨라질 수 있죠.
🔗 웹사이트 링크
- MUI: https://mui.com/
- Bootstrap: https://getbootstrap.com/docs/5.3/components/accordion/
- Chakra UI: https://v2.chakra-ui.com/docs/components
3. 국내 가이드라인
국내의 UX/UI 가이드라인도 점점 더 발전하고 있습니다. 특히 신한은행, 디지털 정부서비스에서 한국형 UX/UI 표준을 아주 깔끔하게 정리하고 있습니다.
번역기 돌리기 귀찮을 때, 한국 사용자들을 고려한 UX/UI 가이드라인이 궁금할 때, 이 두 곳의 가이드라인을 참고하면 좋을 것 같아요.
🔗 웹사이트 링크
- SOLID 2.0 (신한은행): https://ux.shinhan.com/155fe4737/p/260a2b-
- KRDS (디지털 정부서비스): https://uiux.egovframe.go.kr/guide/index.html
4. 종합 디자인 시스템 플랫폼
이렇게 다양한 회사에서 만든 디자인 시스템과 컴포넌트 적용 사례를 모아볼 수 있는 플랫폼도 있습니다. 기본 가이드라인만으로는 성에 안찰 때, 좀 더 다양한 예시를 찾아보고 싶을 때 활용해보세요.
🔗 웹사이트 링크
- Design Systems Repo : https://designsystemsrepo.com/design-systems
- The Component Gallery : https://component.gallery/
5. 어떻게 만드는가?
그런데 이런 가이드라인(또는 디자인 시스템), 어떻게 만드는 걸까요?
토스의 개발자 컨퍼런스 Slash 22 발표 자료에서, 실제로 디자인 시스템을 어떻게 도입하고 운영하는지에 대한 인사이트를 발견할 수 있으니 참고해 보세요!
이렇게 국내외 대표적인 UX/UI 가이드라인 참고 웹사이트를 공유해 드렸는데요, 다양한 가이드라인을 적극적으로 활용하시면서 탄탄한 사용자 경험 만들어보시길 바라겠습니다.
그럼 오늘도, 나를 위한 일하기였습니다.