디자인 시스템 구축기:버튼(Button) 설계와 원칙
디자인 시스템을 정의하고, 시행착오를 거쳐 구축한 과정 기록기
현재 본인은 UXUI디자이너로써, 프로덕트의 Design system을 구축하고 있다. 그 내용에 대한 것을 앞으로 글을 써보자고 한다. 오늘은 Design system에서는 없어서는 안 될, 그리고 내용이 가장 방대한 Button에 대해서 글을 써보자고 한다.
기본적인 것들은 타 디자인시스템에서 충분히 습득이 가능하다. 다만, 디자인시스템을 구축해보지 않고서는 모를 것들 그리니까, 내가 시행착오를 겪으며 느꼈던 것들에 대해서 회고의 형식으로 글을 써보자고 하니, 구축을 이제 시작하거나, 아니면 해보지 않은 신입 디자이너들이게 이 글을 바친다.
서두는 간결하게, 이제 본론으로 들어가 보자.
Button의 유형은 꽤나 다양하다. 우리가 생각하는 아래와 같은 Button 말고도 Link button/Icon button / Split button 크게 4가지로 나누어진다.
Button type
- Button(일반적인 버튼의 형태)
- Link button
- Icon button
- Split button
오늘은 그중에서도 가장 많이 쓰이는 Common button(이미지에서 제일 앞에 버튼)에 대해서 글을 써보겠다.
1. Button anatomy
Button anatomy일반적으로 버튼의 Anatomy는 아래와 같이 구성된다.
1. Container
2. Leading icon
3. Trailing icon
4. label
반드시 위와 같은 구조를 가질 필요는 없다. Leading icon이 반드시 있을 필요가 없고, 반대로 Trailing icon이 있을 필요는 없다. 디자이너가 관리하는 프로덕트의 사용성에 맞게 UI Anatomy를 구성하면 된다.
�신입 디자이너에게
신입 디자이너가 자주 실수하는 오류중에 하나는 (나 또한 그랬다.) 타 프로덕트의 구조를 "똑같이" 따라 해야 한다고 맹신하는 것이다. 타사 벤치마킹하여 참고하는 것은 필수이다.
하지만, Goolge material이 Trailing Icon을 가지고 있으니까 우리의 프로덕트도 "반드시" 해당 아이콘을 가져야 한다는 맹신을 버려야 한다. 엄연히 다른 플랫폼이고, 우리는 우리의 서비스에 맞게 프로덕트의 UI를 구성하면 된다.
2. 일반 Button Type
일반 Button의 Type은 그 사용성에 따라 Sementic color와 함께 Style 또한 달라진다.
2-1. Primary button
보통 페이지 안에서 Call to action(CTA)을 위해 사용된다. 그래서 페이지 안에서 가장 눈에 잘 띄어야 하고 보통은 프로덕트에서 사용되는 Primary Color를 바탕으로 구성된다.
Primary button은 화면 또는 레이아웃 안에서 "한 번만" 나타나야 하며 가장 중요한 작업에 사용된다.
2-2. Secondary button
Secondary button은 상대적으로 덜 중요한 작업이나 보조적인 액션에 사용된다. 단독으로 사용할 수도 있으며, 여러 작업 옵션이 있을 때 Primary button과 함께 배치할 수 있다. 또한, Primary button이 주요 또는 최종 작업을 담당하는 페이지에서 부가적인 작업을 수행하는 데 적합하다.
2-3. Tertiary button
가장 우선순위가 낮은 작업에 사용되며, 주로 Primary button과 함께 사용된다. Tertiary button의 Style은 Primary button과 가장 대비되어 해당 버튼에 보조적인 역할을 가장 잘 수행할 수 있다.
2-4. Danger button
사용자 데이터에 파괴적인 영향을 미칠 수 있는 작업(예: 삭제 또는 제거)을 위해 사용된다. 보통 위험, 치명적인 의미를 내포한 Sementic color인 Red로 컬러로 구성된다.
Usage
[버튼의 사용법은 꽤나 다양하다. 위에서 말했다시피, UI의 Style에 따라서 Usage가 달라지므로, 내 글을 참고용으로 사용해야 한다.]
단일 페이지화면에서 여러 개의 버튼이 포함될 수 있다. 버튼의 사용 방식과 조합은 사용자가 수행하려는 작업의 우선순위와 목적에 따라 신중히 결정되어야 한다.
명확한 작업 흐름을 제공하기 위해 Primary, Secondary, Tertiary button의 역할을 구분하는 것이 중요하다.
- Primary button(call to action)은 페이지 또는 작업을 수행하는 Container 덩어리 안에서 한 개만 사용한다.
Primary button은 그 영역에서 가장 중요한 행동(CTA)을 나타내기 때문에, 여러 개의 Primary button이 있으면 사용자가 혼란스럽거나 부담을 느낄 수 있다.
사용자가 목적을 수행하기 위해서 페이지 안의 Button은 마중물 역할을 해준다고 생각하면 된다.
- Alignment / Positioning
�버튼의 정렬과 위치 또한 사용자가 콘텐츠를 읽어드리는 시선 즉, 무의식의 순서 마지막에 위치하여 작업의 완료를 도와야 한다.
Left alignment
단일 페이지 폼이나 콘텐츠가 많은 전체 페이지 작업에서는 버튼을 왼쪽에 정렬해야 한다. 사람들의 시선이 F-패턴에 따라 좌->우로 중요한 순서대로 콘텐츠를 스캔하기 때문이다.
큰 페이지(콘텐츠가 많은 전체페이지 등) 경험의 일부일 때 왼쪽 정렬을 사용할 수 있다.
Right alignment
특정 작업에 집중하는 화면(예: Dialog, Onboarding)에서는 버튼을 오른쪽에 정렬한다. 특히, 내용이 적을 경우 Z-패턴을 따라 오른쪽 정렬하면 사용자가 CTA를 자연스럽게 마지막에 인식할 수 있도록 돕는다.
- Primary 버튼은 Tertiary 버튼과 함께 사용한다면, 사용자의 혼란을 감소시킬 수 있다.
이 주제는 각각의 프로덕트의 버튼 UI에 따라 맞는 프로덕트도 있고, 아닌 프로덕트도 있을 것이다.
현재 위의 이미지의 UI 같은 경우, Secondary button에 primary Color 가 outline으로 들어가 있어서, 그렇지 않은 Tertiary button보다 시각적 무게감이 더 증가된다.
그러므로 이 주제는 위와 같은 Button hierarchy를 가지고 있는 디자인시스템에만 해당된다.
하지만, 대부분에 해당될 것 같다.
사용자에게 인터페이스의 복잡성을 증가시킬 우려가 있으므로, 대비가 큰 버튼끼리(Primary button , Tertiary button) 붙여서 Call to action을 집중시켜야 한다.
이번글은 대부분의 글이 타 디자인시스템이 공통적으로 가지고 있는 Button의 Style이나 UX(Usage)에 대해서 서술했다. 다음 글 (Design system 구축기 - Button(하))에서는 지난날 구축하면서 느꼈던 회고에 집중해서 글을 써보려고 하니 이글이 유익했다면
좋아요�와 댓글 한 번씩 남겨주면 힘이 날듯하다. 팔로우면 더욱 고맙고
