디자인 시스템 (Design System)
1. 정의
디지털 제품이나 서비스의 일관성을 유지하기 위한 체계적이 접근 방식입니다. 주로 재사용 가능한 UI컴포넌트, 가이드라인, 원칙들을 포함하며, 디자이너와 개발자가 공동으로 활용할 수 있는 리소스입니다. 이를 통해 팀원들이 동일한 기준을 따르며 작업할 수 있고, 디자인 및 개발 과정에서 불필요한 반복 작업을 줄일 수 있습니다.
2. 장점
효율성(Efficency) : 이미 정의된 UI 컴포넌트와 스타일을 활용하면 새로운 페이지나 기능을 빠르고 효율적으로 디자인할 수 있습니다. 중복 작업이 줄어들며, 더 짧은 시간 안에 제품을 개선하거나 배포할 수 있습니다.
· 일관성(UX Consistency): 동일한 디자인 언어와 스타일 가이드를 따름으로써 다양한 제품이나 플랫폼에서 일관된 사용자 경험(UX)을 제공할 수 있습니다.
· 확장성(Design at Scale): 디자인 시스템이 잘 구축되어 있으면 새로운 기능을 추가할 때도 기존 디자인 원칙을 따라 확장할 수 있어, 전체적인 시스템의 무결성이 유지됩니다.
EX)
반응형: https://www.kakaocorp.com/page/
적응형: https://www.naver.com/
· 협업(Colaboration): 개발자, 디자이너, 기획자 등 다양한 역할의 팀원들이 동일한 리소스를 공유하여 지식 격차를 줄이고 협업에 기여할 수 있습니다. 또한, 팀원들이 함께 배우고 성장하며는 생산성을 향상시킬 수 있다는 이론적 장점도 있습니다.
3. 좋은 디자인 시스템이란?
▷ 디자인 시스템 예시
· Apple 디자인 시스템 https://developer.apple.com/design/
· 라인 디자인 시스템https://designsystem.line.me/
· 구글 머티리얼 디자인https://m3.material.io/
· 지마켓 디자인 시스템 http://gds.gmarket.co.kr/
4. 요소
· 컬러(Color)
색상 코드와 접근성을 고려하여 메인 컬러, 보조 컬러, 서브 컬러 등을 정의합니다. 색상은 브랜드의 정체성을 나타내고, 사용자에게 감정적 반응을 유도합니다.
· 타이포그래피(Typography)
글꼴, 크기, 줄 간격, 자간 등을 통해 가독성을 높이고, 정보의 계층 구조를 나타내며 브랜드의 이미지와 특성을 표현하는 중요한 역할을 합니다.
· 아이콘(Iconography)
직관적으로 이해할 수 있는 기호로, 사용자가 쉽게 인식할 수 있도록 디자인된다. 아이콘은 기능을 명확히 전달하고, 사용자 경험을 향상시킨다.
· 컴포넌트(Components)
재사용 가능한 독립된 UI 조각으로, 버튼, 카드, 드롭다운 메뉴 등 다양한 형태로 구성된다. 컴포넌트는 일관성을 유지하고 개발 효율성을 높인다.
· 네이밍 규칙(Naming Conventions)
컬러, 타이포그래피, 컴포넌트 등의 이름을 일관되게 지정하여 검색과 사용을 용이하게 한다. 명확한 네이밍 규칙은 팀원 간의 소통을 원활하게 한다.
이렇게 디자인 시스템의 요소들은 각기 다른 시각적 구성 요소를 체계적으로 관리하며, 일관성 있는 UI/UX를 만드는 데 중요한 역할을 합니다.
UI/UX Color
1. 종류
· CMYK(Cyan/Magenta/Yellow/Black)
: 감산 혼합 색상 모델
: 주로 인쇄에서 사용
· RGB(Red/Green/Blue)
(출처- NamuWiki)
: 가산 혼합 색상 모델
: 주로 디지털 디스플레이에서 사용
· RGBA(Red/Green/Blue/Alpha)
: RGBA는 기본적으로 RGB 모델에 투명도(알파 채널)를 추가한 것
: 0에서 1 사이의 값으로 투명도를 조절합니다. 0은 완전 투명, 1은 완전 불투명을 의미합니다
· HEX Code
(출처 - Linkedin)
: RGB색상을 16진수로 표현한 색상 코드
: RGB와 같이 주로 디지털 환경에서 주로 사용
2. 색의 사용과 용도
· 강조
사용자의 주목을 끌기 위해 색상을 활용합니다. 중요한 버튼이나 정보를 눈에 띄게 만들기 위해 사용하는 방법입니다.
예시: CTA(클릭 유도) 버튼을 빨간색 또는 녹색으로 처리하여 사용자 행동을 유도.
· 암시
색상은 특정 기능이나 의미를 암시하는 역할을 합니다. 색상으로 요소의 역할을 직관적으로 알 수 있게 하여 사용자가 자연스럽게 이해하도록 돕습니다.
예시: 빨간색은 경고, 오류를 암시하고, 회색은 비활성화 상태를 나타냅니다.
· 상호작용
사용자가 상호작용할 수 있는 요소임을 시각적으로 표현합니다. 색상은 링크, 클릭 가능한 버튼 등을 식별하는 중요한 역할을 합니다.
예시: 파란색으로 하이라이트된 하이퍼링크나 클릭 가능한 버튼.
· 상태
시스템 또는 요소의 현재 상태를 나타내는 데 사용됩니다. 색상 변화로 사용자가 시스템의 상태를 쉽게 알 수 있도록 돕습니다.
예시: 입력창에 초록색 테두리는 올바른 입력을, 빨간색 테두리는 오류를 나타냅니다.
3. UI/UX 색채 구성
· 메인 컬러: 브랜드나 서비스의 중심이 되는 대표 색상. 사용자에게 가장 먼저 인식되는 색상으로 일관성을 제공하며 브랜드 정체성을 강화합니다.
· 포인트 컬러: 중요하거나 눈에 띄어야 하는 요소(버튼, 강조 텍스트 등)에 사용되는 색상. 사용자의 주의를 끌고 액션을 유도하는 역할을 합니다.
· 서브 컬러: 메인 컬러를 보완하고 다양한 콘텐츠 영역에 적용되는 색상. 메인 컬러와 조화를 이루며 시각적 다양성을 제공합니다.
· 아이콘 컬러: 아이콘에 적용되는 색상으로, 직관적이고 사용자가 쉽게 이해할 수 있도록 도와줍니다. 일관성 있고 명확한 전달이 필요합니다.
· 텍스트 컬러: 읽기 편한 가독성을 제공하는 색상으로, 주로 배경과 대비를 이루며 정보를 명확하게 전달합니다.
· 배경 컬러: UI의 배경에 적용되는 색상으로, 콘텐츠가 잘 돋보일 수 있도록 중립적이거나 자연스러운 색상을 사용합니다.
이 구성 요소들은 사용자 경험을 향상시키고 일관성 있는 디자인을 제공하는 데 중요한 역할을 합니다.
▷ 컬러 팔레트 참고 사이트
COLORS https://coolors.co/
COLORKIT https://colorkit.io/
KIROMA.CO https://www.khroma.co/train
COLOR HUNT https://colorhunt.co/
MUZ.LI https://colors.muz.li/
ADOBE COLORS https://color.adobe.com/ko/create/color-wheel
COLOR SPACE https://mycolor.space/
