<주간 UIUX 디자인 : ui ux 표준 가이드>

ui ux 표준 가이드 궁금하다면 필독! ui ux 디자인을 위한 디자인 시스템

제로베이스 UIUX 디자인 취업 스쿨

editor's note
‘UIUX 디자인에도 가이드라인이 있나?’, ‘어떤 ui ux 표준 가이드에 맞춰서 디자인을 해야 하지?’ ui ux 디자인을 시작하기 전, 이런 고민을 하셨던 분들이라면? 오늘 아티클에 주목해 주세요. ui ux 표준 가이드는 무엇인지, ui ux 디자인을 위한 디자인 시스템이란 무엇인지 하나의 아티클로 담아왔답니다. ui ux 표준 가이드에 대해 궁금한 점이 있으셨다면, 끝까지 놓치지 마세요!

잠깐, UIUX 디자인 취업 스쿨이 궁금하다면? 자세히 보러가기

00 | 들어가며

현대의 디지털 환경에서 사용자의 경험은 그 어느 때보다 중요한 위치를 차지하고 있어요. 제품과 서비스의 성공은 단순히 기능적 완성도만으로는 결정되지 않죠. 그것을 어떻게 전달하고, 사용자가 어떻게 느끼고 사용하는지가 결정적인 요소가 되기 때문이에요. 이러한 사용자 경험의 중요성을 반영하기 위해 'UI/UX 표준 가이드'를 소개하게 되었어요. 표준 가이드는 디자이너와 개발자, 그리고 모든 관련 이해관계자들이 제품과 서비스를 개발하고 관리하는 과정에서 일관된 품질의 사용자 경험을 제공하기 위한 방향성을 제시해요. 사용자의 요구와 기대에 부응하는 디자인 원칙과 실용적인 지침을 제공함으로써 사용자와의 관계를 더욱 강화할 수 있고요.

그럼 지금부터 'UI/UX 표준 가이드'에 대해 알아보러 가실까요?

01 | 디자인 시스템의 역사

최근의 디지털 환경은 빠른 속도로 변화하여 과거 연간 단위로 이루어지던 제품이나 서비스의 혁신은 이제 분기 단위로 이루어지는 경우도 많아지고 있어요. 그로 인한 사용자들의 디지털 경험은 시간의 흐름에 따른 잦은 변화로 인해 연속성을 파괴할 가능성이 높아졌고요. 필드에 있어서도 디자이너와 개발자 모두가 비슷한 문제에 직면하게 되는 것은 물론 공유 기록이 없는 경우 제품이나 서비스의 일관성 유지에 있어 시간적, 경험적 불일치가 발생할 확률이 매우 높아져요. 사실 기업이 가진 서비스의 품질과 일관성을 유지하는 것은 쉬운 일은 아니에요. 특히 최근과 같이 하나의 제품의 대량의 콘텐츠를 제공하거나, 많은 구성원이 콘텐츠 제작자와 협업하게 되는 경우는 더욱 그래요. 따라서 더 많은 디지털 제품과 앱 및 장치에서 제품이나 서비스의 일관된 사용자 경험을 유지하기 위한 더 나은 방법을 모색함에 따라 많은 기업들은 자신들만의 고유한 디자인 시스템을 구축하기 시작했습니다.

사진 = 구글의 머리티얼 디자인

2014년 구글은 안드로이드의 다양한 디바이스 크기에 맞는 제작 기준을 마련하기 위해 머티리얼 디자인 시스템을 발표했어요. 스마트폰의 디자인에 어려움을 겪던 디자이너들은 구들의 머티리얼 디자인 시스템을 각 서비스에 맞도록 고유 디자인으로 구축하게 됐죠. 애플의 휴먼 인터페이스 가이드라인도 iOS의 운영 체제에 맞는 디자인 시스템을 제공하고 있으며, 그를 통해 사용자 경험을 향상시켜 나가고 있어요. 간혹 UIUX 표준 가이드에 대해 궁금해하는 경우가 있는데요. 거의 대부분의 기업들은 머티리얼 디자인 시스템을 바탕으로 자신들만의 고유한 디자인 시스템을 개발하기 시작했고, 그를 배포하여 자신들만의 디자인 시스템을 구축하게 됐어요. 따라서 표준 가이드라인은 각 기업들이 자신들의 제품이나 서비스에 맞게 구축한 디자인 시스템이라고 보면 되겠죠?

사진 = 디자인 시스템의 역사

디자인 시스템은 최근에 갑자기 생겨난 것은 아니에요. 실질적으로 많은 기업과 조직들은 과거에서부터 디자인 시스템이라고 생각하는 것을 가지고 디자인의 과정에 적용해 오고 있었지만, 이러한 컬렉션은 가장 많이 사용되는 버튼이나 입력 박스와 같은 UI 요소의 더미로 구성된 패턴 라이브러리와 같은 UI 패키지로 일부 디자인의 룩앤 필을 보여주는 방식으로 사용됐어요. 이는 크리스토퍼 알렉산더(Christopher Alexander)의 패턴 랭귀지라는 저서에서 영향을 받은 것으로 이후 제니퍼 티드웰(Jenifer Tidwel)에 의해 UI 패턴 예시와 함께 정리되어 웹 디자인의 영역에서 사용됐어요. 스마트폰이 우리의 일상에 다가온 이후에는 브래드 프로스트(Brad Frost)의 아토믹 디자인(Atomic Design)의 영향을 받아 컴포넌트 단위의 디자인을 시스템화하였으며, 이를 기반으로 기업마다 자신들 고유의 디자인 시스템 구축이 가속화하였다고 할 수 있습니다.

02 | 디자인 시스템이란?

디자인 시스템은 디지털 제품에서 사용 기준이 명확하게 정의된 재사용 가능한 구성요소의 모음으로 내부 관계자들이 서비스를 일관성 있게 구축할 수 있도록 도와주는 역할을 해요. 여기에는 브랜드 아이덴티티, 디자인 원칙과 패턴, 디자인 가이드에서 개발까지를 포괄하는 기능 요소의 모음을 모두 포함돼요. 디자인 시스템은 제품의 종류와 플랫폼의 특징에 따라 반복적으로 재사용되는 컴포넌트나 매번 새로 제작되는 페이지에 대한 수고를 덜어주며 디자이너마다 아웃풋이 조금씩 다른 완성품에 대해 일관성을 부여해줍니다. 또 우선순위가 낮은 페이지에 소모되는 시간을 줄이고 서비스의 사용자 경험에 더 집중할 수 있게 하며, 개발자와 디자이너는 물론 협업하는 관계자들의 작업 과정에서 생기는 비효율적인 시간까지 줄여줘요. 즉, 디자인 시스템에서 사용 기준이 명확하게 정의된 재사용 가능한 구성요소의 모음은 패턴 라이브러리, 색상 및 글꼴을 표준화한 디자인 원칙과 결합하여 기업이 대규모로 일관된 시각적 디자인을 달성할 수 있도록 지원합니다.

디자인 시스템은 결과물이 아닌, 결과물들의 집합으로 구성되어 디자이너와 개발자들 간의 협업을 원활하게 해요. 또한, 일관된 디자인 구성요소를 팀과 워크플로우에 포함하여 협업을 하는 많은 디자이너와 다른 제작자들에게 배포되는 경우에도 일관된 규칙을 정의하여 기업의 브랜딩을 유지할 수 있게 해주죠. 모든 디자인 시스템이 동일한 것은 아니지만 디자인 시스템은 브랜드의 공유가치와 목적, 디자인 원칙, 브랜드 아이덴티티와 언어, 스타일 가이드. 구성요소 및 패턴, 코딩 규칙, 모범 사례 및 이를 관리하는 정책 등이 담겨 있어요.

03 | 디자인 시스템은 왜 필요할까?

디자인 시스템은 디지털 서비스의 규모가 커질수록 어떻게 확장 가능하고 반복적으로 활용할 수 있는가에 대한 해결책이 될 수 있어요. 기업은 매일 수백 가지의 디자인에 대한 결정을 내려야 하는 경우가 있는데요. 사용자에게 일관된 디지털 경험을 제공하기 위해서는 디자인에 대해 일회성으로 각 결정에 접근하는 대신, 사용할 글꼴, 이미지 배치, 또는 전체 서비스가 가진 접근성 표준을 충족하는 방법과 같은 일반적인 디자인 문제에 대해 반복 가능한 솔루션이 필요해요. 다양한 OS나 플랫폼 그리고 디지털 디바이스의 크기에 따른 다양한 형태의 디자인이 필요함은 물론, 기능 및 화면 디자인의 업데이트 빈도가 증가함에 따라 조직의 규모도 커지게 되며 협업을 하는 팀원들 간의 업무 효율성을 높게 유지하기 위해서도 디자인 시스템의 중요성을 커지고 있습니다.

1) 일관성의 향상

모든 디자인의 영역에서 일관된 디자인을 사용한다는 것은 사용자 경험의 핵심 원칙 중 하나로 일관성은 직관적이고 예측 가능하며 이해하기 쉽게 만들어줘요. 동일한 형태로 제작되고 시각적으로 유사성이 높은 요소와 컴포넌트는 시각적 일관성을 높여주기 때문이에요. 크기, 색상, 글꼴과 같이 사용자가 볼 수 있는 모든 것과 관련되며 시각적 일관성은 사용자가 제품을 사용하는 능력을 향상시켜요. 하나의 제품 서비스 내에서 시각적, 기능적 일관성을 부여하여 내부 일관성을 유지하게 하는 것도 중요하지만 다른 플랫폼이나 시스템과 같은 모든 컨텍스트에서 외부 일관성을 유지해 주면 사용자의 인지 부하를 줄이고 긍정적인 영향을 미칠 수 있어요. 디자인 시스템을 구축된 제품 서비스는 바로 이러한 일관성을 유지하는데 가장 큰 효과가 있다고 볼 수 있어요.

2) 시간의 절약

디자인 시스템의 다른 주요 이점은 개발 과정을 가속화하여 제품 서비스의 구축 시간을 단축시켜 준다는 것이에요. 제품 서비스를 구축함에 있어 모든 구성요소를 처음부터 다시 구축해야 하는 것은 분명 많은 시간이 소요되는 일이죠. 특히 각 구성요소가 다양한 상태, 테마 및 속성을 설정하고 유효성을 검증해야 하는 경우에는 더 그러죠. 디자인 시스템이 구축되면 모든 팀 구성원은 사용해야 하는 구성요소에 대한 문서, 사용방법에 대한 지침 및 프로젝트를 진행해야 하는 동안 채택할 패턴과 사례를 찾을 수 있어요. 재사용 가능한 구성요소를 반복해서 사용하게 되면 프로토 타이핑이 훨씬 빠르게 진행되며 이렇게 향상된 개발 속도는 궁극적으로 더 빠른 시장 출시와 배포로 이어지게 만들어요.

3) 공통된 페이지로의 협업

제품 서비스 프로세스가 확대되고 다양한 팀이 프로젝트 파이프라인에 참여하게 됨에 따라 협업을 하는 구성원은 모두 작업 내용과 당면한 리소스를 이해할 필요가 있어요. 다른 팀의 개인이 필요한 지식을 찾기 위해 노력하는 대신 디자인 시스템은 모든 사람이 프로젝트에 익숙해지기 위한 모든 문서를 제공해요. 디자인 시스템은 프로젝트에 참여하는 모든 팀원뿐 만 아니라 이해관계자도 공통된 페이지에 있도록 도와줘요. 이를 통해 프로젝트 전반에 걸친 협업이 촉진되어 동일한 언어, 지침 및 리소스를 공유할 수 있어요. 이는 개발 및 테스트의 속도는 높여주는 것은 물론, 조직적인 작업 흐름을 설정하여 팀원들 간의 공동 작업을 보다 쉽게 만들며 새로운 팀원이 합류하더라도 디자인 시스템 문서에서 원하는 것을 찾아 온보딩 프로세스도 빨라집니다.

4) 리스크의 최소화

디자인과 개발에 있어 장기적인 구축 대신 단기 목표에 집중하면서 발생하는 기술적으로 불필요한 리소스들이 존재해요. 단기적인 문제를 다루기 위해 제한된 사용 사례를 구축하면 시간이 지남에 따라 사용되지 않는 리소스가 누적되며 유지 관리가 필요하게 돼요. 디자인 시스템은 제품 서비스 작업을 하는 팀에 통합 언어를 제공함에 따라 특정 사용 사례에 대한 구성요소를 구축하는 대신 다양한 애플리케이션에서 사용 가능한 구성요소를 구축할 수 있게 해요. 이미 만들어진 구성요소를 재사용하면 디자인과 개발자의 간극을 좁힐 수 있으며 문서화된 규칙과 지침을 통해 사용자 환경을 통합할 수 있어요. 이는 새로운 디자인과 설계에 대한 리스크를 최소화해줍니다.

5) 지속적 성장

디자인 시스템은 이미 만들어진 구성요소를 사용하여 일관성을 높이는 반면 구성요소를 반복적으로 재사용한다는 점에서 창의성에 제한을 두는 것처럼 보일 수도 있어요. 하지만 사실은 프로젝트에 참여하는 사람들의 혁신적인 생각을 증가시켜요. 물론 그 혁신적인 생각을 프로젝트에 추가하는 데는 상당한 시간이 필요해요. 그러나 디자인 요소를 처음부터 만드는 작업의 대부분을 제거함으로써 팀 구성원은 프로젝트 자체와 비즈니스 요구 사항에 자유롭게 투자할 수 있으며 결과적으로 개인과 조직, 제품의 지속적 성장에 도움을 주게 돼요.

6) 브랜드 구축

시각, 음성, 톤, 및 최종 제품 서비스를 구성하는 다른 모든 속성에 대한 가이드라인과 규칙이 마련된 디자인 시스템은 궁극적으로 서비스 뒤에 숨겨진 특정 느낌과 정체성을 전달하는 것을 목표로 해요. 디자인 시스템에 의해 전달되는 커뮤니케이션의 일관성은 사람들이 브랜드가 말하는 방식이나 그들의 제품을 사용하는 느낌을 기억하는 데 도움이 되며 그것은 브랜드의 특정한 특징을 전달해요. 디자인 시스템에 의한 간소화된 디자인 프로세스는 사용자와 잘 소통하는 임팩트 있는 브랜드를 구축할 수 있게 되는 것이에요. 사람들은 제품 및 서비스의 일관되고 예측 가능한 결과를 통해 그 브랜드와 더 많이 연결되어 있다고 느끼고 신뢰가 쌓여요.

04 | 디자인 시스템의 유형

디자인 시스템을 구축하는 데는 두 가지 유형의 정보가 포함돼요. 첫 번째는 기업의 미션, 비전, 타겟, 사용자 그리고 브랜드 핵심 가치를 통해 명확한 브랜드 아이덴티티를 수립하는 것이며 두 번째는 로고, 컬러, 타이포그래피와 같이 아이덴티티 구성요소에 대한 다자인 스타일 가이드를 통해 비주얼 아이덴티티 지침을 수립하는 것이에요.

1) 브랜드 아이덴티티

사진 = https://www.business2community.com/branding/personal-branding-more-than-an-elevator-speech-02252096

브랜드 아이덴티티는 세상과 소통하고 경쟁사와 차별화하며 사용자가 기업과 소통하도록 브랜드 경험을 만드는 방법을 말해요. 또한 기업이 가지는 성격을 명확한 방향으로 설정해 두면 모든 팀과 채널에 걸쳐 일관된 방식으로 소통할 수 있게 도와줘요. ‘브랜드가 지지하는 바는 무엇인지’, ‘브랜드의 정체성은 무엇인지’ 등 핵심 요소를 사용자에게 전달하기 위해서는 일관성 있는 아이덴티티가 필요해요. 흔히 사람들은 브랜드를 이야기할 때 브랜드를 구분하기 위해 각인된 로고와 같은 물리적 마크나 특정 색상의 집합을 생각하기 쉽죠. 그러나 브랜드는 물리적 마크 그 이상의 감정적인 표시가 필요해요. 더 구체적으로는 그 브랜드가 제공하는 서비스와의 상호작용을 통한 감정적인 경험이 요구되며, 브랜드 스토리를 통해 긍정적이고 일관된 감정 경험을 전달하는 것이 필요해요.

브랜드 아이덴티티를 구축하기 위해서는 우선 브랜드가 가진 서비스에 대한 미션과 비전을 수립해야 해요. 이는 사용자에게 좋은 경험을 전달하기 위해서이기도 하지만 내부 구성원들끼리도 하나의 목적지를 향해 한 방향으로 나아갈 수 있게 만드는 청사진이 되기도 하거든요.

✅ 브랜드 목적과 비전
브랜드의 목적과 비전은 가장 추상적인 요소로 브랜드의 존재 가치와 관련이 있어요. 여기에는 기업명이나 브랜드명은 물론 공식적인 철학과 가치가 포함돼요. 본질적으로 말하는 것은 조직과 동료들을 위한 공유된 목표와 방향이고요. 어디로, 왜, 어떻게 가는지 명확한 목적과 비전을 가지고 있으면 모든 사람들이 동일한 방향으로 나아갈 수 있으며, 조직 내에서의 원리를 폭넓게 전달할 수 있어요. 또한 명시적인 가치는 동료들이 조직의 원칙에 부합하는 구성요소를 만들고 사용하는 데 도움이 되며 이는 경쟁자들과의 차별화되는 점이 될 수 있습니다.

✅ 사용자 ‘서비스의 사용자는 누구이며 그들은 어떻게 생각하는가?’, ‘무엇이 그들에게 동기를 부여하며 어떻게 행동할 것인가?’ 하는 부분을 고려해야 해요. 또 사용자가 해당 서비스를 원하거나 필요로 하는 주된 이유가 무엇인지 명확하게 파악하고 있어야 해요.

✅ 성격 브랜드의 성격은 브랜드의 개성을 나타내며 브랜드가 사용자에게 말하는 방식과 행동 방식을 결정해요. 이는 마치 사람마다 독특한 성격과 개성을 가지고 있는 것과 같으며 브랜드 역시 자신만의 성격을 가지고 있어야 시장에서 차별화를 이룰 수 있어요.

✅ 가치 비즈니스의 핵심 가치와 강점을 정의하는 것은 서비스의 개성을 정의하는 것과 같아요. 이는 대내외적으로 원칙을 가지고 브랜드 메시지의 일관성을 통제하기 위한 지침 역할을 해요.

2) 비쥬얼 아이덴티티

비주얼 아이덴티티는 디자인 스타일 가이드의 근간이 되는 시각적 구성 요소의 아이덴티티를 정립하는 것을 말해요. 여기에는 로고, 컬러, 타이포그래피, 이미지 그리고 서비스가 제공하는 언어의 정체성을 의미하는 보이스가 포함돼요. 이러한 시각적 요소들은 브랜드 아이덴티티보다 구체적이고 직설적이에요. 디자인은 비주얼 뿐만 아니라 사용자를 고려한 사려 깊은 디자인으로 제품이나 서비스의 목적을 실현하는 데 초점을 맞추어야 합니다.

✅ 로고

로고는 사용자가 서비스에 익숙해질 때까지 서비스를 인식하게 되는 첫 번째 시각적 단서가 돼요. 로고가 미디어나 장치에 따라 다르게 표시되면 신뢰를 잃거나 잘못된 메시지를 전달할 수도 있기 때문이에요. 따라서 로고에 대해서는 좀 더 신중한 접근이 필요하며, 로고가 사용되어야 하는 방법은 물로 사용되어서는 안 되는 부분까지 세밀하게 구성될 필요가 있어요.

사진 = 스포티파이의 로고 가이드라인과 맥도날드의 국가별 로고

✅ 컬러

기업이 브랜드 아이덴티티를 디자인할 때 일관된 모양과 느낌을 만드는데 가장 큰 도움이 되는 것은 바로 컬러에요. 우리는 종종 로고의 형태는 기억하지 못해도 그 브랜드가 가지는 특정 색상을 더 오래 기억하는 경향이 있어요. 흔히 우리가 네이버라 말하지 않고 녹색 창이라 해도 인식하고 있는 것과 같죠. 시그니처 컬러를 사용하면 사용자의 브랜드 인지도가 80% 증가한다는 조사 결과처럼 컬러는 이미지를 보다 지속 가능하게 하고 사용자가 보다 쉽게 브랜드를 식별할 수 있게 해줘요.

사진 = 넷플릭스의 컬러 시스템

✅ 타이포그래피

사용하는 글꼴 역시 시각적 아이덴티티의 큰 부분을 차지해요. 브랜드의 요구 사항에 따라 하나의 서체 제품군이 모든 요구 사항을 충족할지 또는 여러 브랜드의 글꼴을 정의할지 여부를 결정해 둬야 해요. 예를 들어 공식적인 세리프 글꼴 또는 비공식적인 산세리프 글꼴 중에서 선택하는 것은 사용자가 기업의 특성을 정의하는 데 도움이 되는 중요한 요소가 될 수 있어요. 미디어 선택에서 단일 서체를 사용할지 아니면 여러 브랜드 글꼴을 식별하는 것을 선호할지 결정할 필요가 있습니다.

사진 = 샤넬의 브랜드 서체

✅ 이미지

이미지는 고객의 마음속에 있는 브랜드에 대한 인식으로 대부분의 기업은 특정한 사진이나 삽화를 통해 자신의 브랜드를 잘 나태내기 위한 노력을 아끼지 않아요. 이미지는 브랜드와의 상호 작용 및 경험 또는 브랜드가 무엇인지에 대한 믿음을 기반으로 하므로 비즈니스 동기를 달성하기 위해 일관된 브랜드 이미지를 형성하는 것은 중요해요. 예를 들어 코카콜라는 행복, 기쁨, 좋은 경험의 순간에 함께 한다는 메시지를 동일한 시각적 아이덴티티를 유지할 수 있도록 지속적으로 사용하고 있음을 알 수 있어요.

사진 = 코카콜라의 아이덴티티를 보여주는 이미지

✅ 보이스

브랜드의 목소리는 브랜드 고유의 개성을 표현하여 사용자가 서비스에 대해 느끼는 방식에 큰 영향을 미쳐요. 이는 기업 내에서 말하는 방법, 서비스에 대한 설명, 사용자와의 소통 등과 관련된 모든 것이 포함되며 브랜드의 원칙과 가치를 설명하는 형용사, 선호하는 문법 및 구두점, 브랜드의 정체성을 반영하는 특정 단어 등을 포함할 수 있어요. 이러한 단어는 어조를 정의하는 데 도움이 됩니다.

사진 = 스카이프의 보이스 톤

05 | 대표적인 디자인 시스템

1) 머티리얼 디자인(구글 안드로이드)

구글의 머티리얼 디자인은 현재 머티리얼 3으로 디자인 시스템을 업데이트했어요. 머티리얼 디자인은 구글의 디자이너와 개발자가 구축하고 지원하는 디자인 시스템으로 안드로이드, iOS, 플러터 및 웹에 대한 심층적인 UX 지침과 UI 구성요소 구현이 포함되어 있어요. 머티리얼 3으로 업데이트가 되면서 동적 색상과 향상된 접근성에서 대형 화면 레이아웃 및 디자인 토큰을 위한 기반에 이르기까지 개인적이고 적응적이며 표현적인 경험을 가능하게 하는 가이드를 제공해요.

디자인적인 면에서 구글이 공개한 머티리얼 디자인 시스템은 2009년 이후 낯선 모바일 환경에 대해 많은 사람들이 따를 수 있는 길을 열어줬어요. 머티리얼 디자인은 안드로이드, iOS, 플러터 및 웹을 위한 고품질 디지털 경험을 구축할 수 있도록 구글에서 만든 디자인 시스템입니다. 디자인 세계에서 이전에는 볼 수 없었던 방식으로 구성 요소를 분류하고 카탈로그 된 구성요소를 제공함으로써 오늘날 모든 디자인 시스템이 기반으로 하고 있는 원자적 디자인 원칙에 순서와 의미를 부여해요. 구글의 디자인 시스템에 대한 목표는 첫째, 좋은 디자인의 고전적인 원리와 기술과 과학의 혁신을 바탕으로 가능성을 종합한 시각적 언어를 만드는 것이에요. 둘째, 플랫폼, 장치, 입력 방법 등 전반에 걸쳐 사용자 경험을 통합하는 단일 기본 시스템을 개발하는 것. 마지막으로 종이 재질과 그림자에 대한 머티리얼의 시각적 언어를 확장하고 혁신과 브랜드의 표현을 위한 유연한 기반을 제공해요.

사진 = https://material.io

머티리얼 디자인의 원칙은 빛을 반사하고 그림자를 드리우는 물질의 은유를 바탕으로 물리적 세계와 그 질감에서 영감을 받았어요. 재료 표면은 종이와 잉크의 매체를 재해석하는 방식으로 은유해요. 또 인쇄 디자인 방법인 그리드, 타이포그래피, 공간, 크기, 색상 및 이미지를 사용하여 사용자를 경험에 몰입시키는 계층 및 의미에 초점을 맞춰 그래픽을 의도적으로 대담하게 구성했고요. 모션은 미묘한 피드백과 일관된 전환을 통해 주의를 집중시키고 연속성을 유지해요.

머티리얼 디자인의 구성 요소는 UI를 생성하기 위해 대화형 빌딩 블록의 형태로 포커스, 선택, 활성화, 오류, 호버, 탭, 드래그 및 비활성화 상태를 전달하는 기본 제공 상태 시스템을 포함하며 구성요소 라이브러리도 제공하고 있어요. 구성 요소는 다음을 포함하여 다양한 인터페이스 요구 사항을 충족합니다.

✅ 디스플레이 : 카드, 목록, 시트와 같은 구성요소를 사용하여 콘텐츠를 배치하고 구성
✅ 탐색 : 탐색 창 및 탭과 같은 구성 요소를 사용하여 제품을 이동
✅ 작업 : 플로팅 액션 버튼과 같은 구성 요소를 사용하여 작업을 수행
✅ 입력 : 텍스트 필드, 선택 컨트롤과 같은 구성요소를 사용하여 정보를 입력하거나 선택
✅ 커뮤니케이션 : 배너 및 대화상자 등을 사용하여 주요 정보 및 메시지에 대한 경고

UIUX에 있어 머티리얼 디자인은 이전에 볼 수 없었던 방식으로 구성요소를 분류하고 카탈로그 된 목록으로 그리드, 내비게이션, 컬러, 타이포그래피, 형태 등에 관해 가이드라인을 제공하고 있는 교과서적인 존재에요. 사이트에서는 Design kit을 피그마 소스로 제공받을 수 있답니다.

2) 휴먼인터페이스 가이드라인스(애플 iOS))

사진 = https://developer.apple.com/design

디자인 언어의 시초라고도 할 수 있는 애플의 휴먼 인터페이스 가이드라인은 애플의 다양한 제품군에서 사용할 수 있는 템플릿과 지침을 제공하고 있어요. 플랫폼에서는 모바일과 아이패드 그리고 매킨토시는 물론 TV와 워치는 물론 비전에 이르기까지 애플이 제공하는 모든 플랫폼을 지원해요. 파운데이션에서는 접근성, 앱 아이콘, 브랜딩, 컬러, 타이포그래피 및 몰입형 경험 등 기본 디자인 요소가 풍부한 경험을 만드는데 어떻게 도움이 되는지 설명하고 있고요. 패턴 파트를 별도로 구성하여 일반적인 사용자의 작업 및 경험을 지원하기 위한 디자인 지침에 대해 자세하게 구성하고 있어요. 컴포넌트는 콘텐츠, 레이아웃과 구성, 메뉴와 액션, 내비게이션과 검색, 선택과 입력, 상태, 시스템 경험 등으로 하위 카테고리를 구성하였으며 시스템 정의 구성요소로 사용자들에게 친숙하고 일관된 경험을 제공합니다.

다른 디자인 시스템과는 달리 입력이라는 별도의 카테고리로 구성하여 사용자가 앱이나 게임을 제어하고 데이터를 입력하는 데 사용하는 방법에 대해 알아볼 수 있도록 하고 있어요. 여기에는 액션 버튼이나 제스처, 키보드, 리모컨 및 게임 컨트롤러 등이 포함된답니다. 마지막으로 기술 메뉴를 통해 앱이나 게임에 통합할 수 있는 애플의 기술, 기늠 및 서비스를 디자인 시스템에서 제공하고 있어요. 애플은 휴먼 인터페이스 가이드라인의 업데이트를 통해 애플 페이, 증강 현실, 및 에어플레이와 같은 새로운 기술의 제공은 물론 애플 제품군 간에 일관성을 부여하고 감성을 제공함으로써 애플 고유의 사용자 경험을 유지하고 제공하고 있어요.

3) 플로언트디자인(마이크로소프트)

사진 = https://www.microsoft.com/design/fluent

마이크로소프트의 플루언트 디자인도 플루언트2로 업데이트됐어요. 플루언트2는 디자인에서 개발, 앱 간 그리고 플랫폼 간에 유동적으로 이동하고 공동작업을 원활하게 하기 위한 디자인 시스템을 혁신했어요. 그를 위해 응집력 있는 색상 시스템, 토큰 시스템을 사용하며 표준화된 모서리를 구성했고요. 접근성 표기는 물론 강력한 사용 지침을 통해 유동적이고 자연스러운 경험을 구축할 수 있게 하죠. 피그마를 사용하여 UI 키트를 구축하고 호스팅 하며 피그마의 최신 디자인 기능 및 최적화에 대한 액세스를 제공하고 디자인이 항상 마이크로소프트 스타일과 일치하도록 디자인 시스템을 업데이트했어요. 디자인 소스는 iOS와 웹 UI를 지원하며 계정 설정을 통해 라이브러리 자동 활성화를 사용할 수 있어요.

플루언트 디자인은 시작 부분에서 새로운 기능에 대한 소개와 디자인 키트의 제공, 그리고 개발 플랫폼에 대한 안내를 제공해요. 디자인 언어에서는 파운데이션에 해당하는 디자인 원칙과 컬러, 엘리베이션, 아이콘, 레이아웃, 타이포그래피, 형태 등에 대한 원칙을 상세히 기술하고 있어요. 가이드라인에서는 접근성과 콘텐츠 디자인 그리고 디자인 토큰에 대한 지침을 작성하고 있고요. 구성요소는 웹리액트, iOS 그리고 윈도우로 구분하여 각각의 컴포넌트에 대해 가이드라인을 제공하고 있답니다.

4) 카본 디자인(IBM)

사진 = https://carbondesignsystem.com/

IBM의 제품 및 디지털 경험을 위한 오펀소스 디자인 시스템인 카본은 사용자가 일관된 디지털 경험을 더 빠르게 구축할 수 있도록 구성요소, 패턴, 지침 및 코드와 같은 사전 구축되고 재 사용 가능한 자산 모음을 제공해요. 카본은 사전 구축 및 범용 자산을 사용함으로써 팀이 설계와 구축에 소요하는 시간을 최소화시켜요. 이 디자인 시스템은 이름 그대로 탄소 원소가 단순한 화합물로부터 복잡한 구조를 만들기 때문에 탄소 디자인 시스템이라고 이름 지었어요. 이 모티프는 개별 스타일과 구성 요소가 결합하여 아름답고 복잡하고 자연스러우며 직관적인 디자인을 만드는 방법을 모방하고 있어요.

카본 디자인 시스템은 스케치와 피그마 파일로 디자인 소스를 제공하고 있으며 디자인 가이드라인, 패턴, 그리고 컴포넌트에 이르기까지 다양한 구성 요소들을 제공하고 있습니다. 처음 디자인 시스템을 구축하는 경우 키 스크린의 분석을 마치고 컴포넌트와 패턴의 상세한 내부 구성을 기획한다면 카본 디자인을 참고하는 것을 권장할만해요.

06 | 기초부터 탄탄한 ui ux 디자이너가 되는 법!

사진 = 클립아트코리아

UIUX 디자인을 위한 디자인 시스템, UI/UX 표준 가이드 잘 보셨나요? UIUX 표준 가이드는 디자이너와 개발자, 그리고 그를 이용하는 모든 사용자에게 명확하고 일관된 사용자 경험을 제공하기 위한 기준이에요. 이 가이드는 우리의 제품과 서비스가 제공하려는 가치를 높이기 위한 핵심 원칙들을 담고 있기에 더욱 중요하다는 걸 알게 되었어요.

하지만 UIUX 표준 가이드는 절대적인 틀이 아니에요. 디자인은 변화하는 사용자의 필요와 기술의 발전에 따라 지속적으로 업데이트되어야 해요. 가이드를 시작점으로, 팀의 창의력과 혁신을 통해 더 나은 사용자 경험을 계속해서 탐색해야 하는 거죠.

제로베이스 UIUX 디자인 취업 스쿨에서는 이 모든 게 한 번에 가능해요. 현직 디자이너 강사진과 함께 탄탄한 기초는 물론이고, 적극적인 팀원들과 함께 나만의 개성 있는 UIUX 디자인 능력을 기를 수 있어요! 혼자 UIUX 디자이너 취업하는 게 어렵다면, 제로베이스 UIUX 디자인 취업 스쿨과 함께하세요!

UIUX 디자인 스쿨은 '취업'까지 단 4개월,
새로운 여정을 함께할 분들을 기다립니다.

추천 컨텐츠