본문 바로가기

디자이너가 알아야 할 것들/Design System

(5)
웹 디자인 시스템 - 버튼 그룹 & 플로팅 액션 버튼 (FAB) 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 디자인 시스템 구축 과정에서 필요한 컴포넌트. 그 중 버튼 컴포넌트에 대해 정리해보았다. 버튼 그룹 (Button Group) 버튼이 여러 개일 때 간격을 공통으로 설정해야 한다. 간격이 매번 다르면 일관성이 떨어지고 유지보수하기 어려워진다. 사용자 경험 또한 좋아지지 않을 것이다. 간격이 너무 좁거나 넓지 않도록 유의한다. 머터리얼 가이드 3에서는 8 dp 이상의 간격을 권장하고 있다. 8 dp 미만으로 설정해도 문제 없지만 가급적 4의 배수를 추천한다. 참고: 머터리얼 가이드 2 - 4 dp & 8dp 그리드, 머터리얼 가이드 3 - 타겟 간격 위 예시처럼 다양하게 응용 가능하다. 다양한 종류의 버튼이..
웹 디자인 시스템 - 버튼 컴포넌트 상태 (State) 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 디자인 시스템 구축 과정에서 필요한 컴포넌트. 그 중 버튼 컴포넌트에 대해 정리해보았다. 버튼 컴포넌트의 상태 (States) 버튼에 마우스를 올렸는데 아무 변화가 없다면? 클릭해봤는데 아무 변화가 없다면? 제대로 동작이 되는 중인지 불안하고 답답할 것이다. 이런 사소한 불편함이 누적되면 안 좋은 사용자 경험을 초래한다. 따라서 버튼이 지금 어떤 상태인지 힌트를 주는 게 바람직하다. 사용자 경험을 더욱 긍정적으로 만들 수 있다. 1. 데스크탑 기준 기본 (Enabled) 클릭할 수 있는 버튼의 기본 상태 마우스오버 (Hovered) 버튼에 마우스 커서가 닿은 상태 기본 상태보다 한 톤 밝거나 어두운 배경 ..
웹 디자인 시스템 - 버튼 컴포넌트 스타일 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 디자인 시스템 구축 과정에서 필요한 컴포넌트. 그 중 버튼 컴포넌트에 대해 정리해보았다. 버튼의 가시성 버튼마다 우선순위가 있다. 우선순위에 따라 가시성의 차이를 두어 디자인한다. 가시성 높음 (우선순위 높음) 가장 필요로 하거나 눌렀으면 하는 버튼 사용자가 쉽게 누르도록 눈에 띄게 디자인한다. 강조색(Primary, Secondary, Tertiary)과 브랜드 색을 주로 사용한다. 예: 로그인, 제출, 작성, 전송, 구매, 팔로우, 확인 등 가시성 보통 (우선순위 보통) 눌렀을 때 영향이 작은 평범한 버튼 잘 보이지만 튀지 않도록 디자인한다. 예: 공유, 도움말, 설정, 이전으로, 취소 등 가시성 낮음..
웹 디자인 시스템 - 버튼 컴포넌트 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. --- 디자인 시스템 구축 과정에서 필요한 컴포넌트. 그 중 버튼 컴포넌트에 대해 정리해보았다. 버튼의 구성 요소 기본적으로 버튼은 텍스트로 구성하지만, 아이콘을 추가하여 더 빠르고 명확하게 대상을 인식시킬 수 있다. 버튼의 크기 종류 버튼의 크기는 흔히 Small, Medium, Large의 3단계로 정할 수 있다. 필요하다면 4~5가지로 확장할 수 있다. 더 적게 줄일 수도 있다. 💡 크기를 나누는 이유는 무엇일까? 디자이너가 그리는 버튼의 크기가 모두 다르다고 생각해보자. 일관성이 떨어지고 유지보수하기 힘들어질 것이다. 디자이너가 한 가지의 버튼만 사용한다면 어떨까? 역시 쉽지 않다. 한 가지의 크기로 모든..
디자인 시스템 구축하기 - 폰트 스타일 가이드 이 게시글은 공부하면서 정리한 내용입니다. 잘못된 정보는 제보해주시면 매우 감사드리겠습니다. *** 디자인 구축 작업에서 빼놓을 수 없는 과정, 디자인 시스템. 디자인 시스템에서 폰트는 어떻게 정리되어야 할까? 폰트 스타일 가이드에 대해 알아보자. 디자인에 있어 폰트는 아주 중요한 요소 중 하나이다. 폰트를 어떻게 쓰느냐에 따라 전달하려는 내용을 보다 효과적으로 보여줄 수 있기 때문이다. 특히 연속성을 띠는 시각 매체에는 폰트 스타일이 통일되어 있어야 매체의 가독성 또한 올라간다. (대표적인 예로는 책, 웹사이트, 앱 등이 있다.) 위 예시와 같이 하나의 연속된 컨텐츠에서 각기 다른 폰트 스타일을 사용한다면 사용자가 인식하는 과정에서 걸림돌이 됨은 물론, 하나의 컨텐츠로 보이지도 않게 된다. 본문 폰트 ..