UX 디자인을 할 때 가장 기본이 되면서 논리적으로 접근해야 하는 것은 무엇일까요? 🤔
저는 버튼(Button) 디자인이라고 생각합니다. ✅
디자이너 이선주 님은 브런치에서 <신입에게 알려주는 스케치>라는 제목으로 글을 연재하고 있습니다. UX 디자인에서 가장 기본이 되는 버튼 디자인에 대해 정리한 글에서 디자이너가 항상 의식해야 하는 요소들에 대해 깊이 공감하며, 내용을 간추립니다. UX 디자인을 하고 있다면 스스로 버튼 디자인을 할 때 갖고 있는 습관과 비교해보면 좋겠어요. 가이드를 만들다보면 자기 만의 습관 같은게 생기는데 의식하기 어렵거든요.
버튼은 외형적으로 다양한 스타일로 구현할 수 있습니다. Solid / Line / Rounded / Pill. FAB / Ghost / Neumorphism / Aqua / CTA 등 다양한 스타일을 구현하기 전에 신경써야 하는 기본이 있습니다.
① 스케치(Sketch)에서는 가장 작은 크기의 디자인을 하고 x1, x2, x3으로 늘려야 합니다.
② 기능이 먼저, 스타일은 나중입니다.
버튼을 디자인하기 전에 왜 필요한지 생각해야 합니다.
버튼이 필요한 이유는 사용자와 인터랙션이 발생하기 때문인데요.
버튼을 누른 다음에 어떤 상황이 이어지는지 고려하고 버튼의 기능을 판단해야 합니다.
③ 중요도에 따라 위계(Hierachy)를 구분합니다.
버튼은 여러개 존재합니다. 여러 버튼 중에 더 중요한 버튼이 있고 보조적인 역할을 하는 버튼이 있죠. 버튼이 가진 중요도에 따라 체계를 잡고 더 중요한 버튼은 더 강조하고, 보조적인 역할은 덜 눈에 띄게 하는 것이 필요합니다. 위계를 정리하면서 버튼이 꼭 필요한 지 확인할 필요가 있어요.
④ 버튼의 이름을 정합니다.
버튼의 이름, 즉 레이블의 내용을 정하는 일입니다. 사용자가 서비스를 이용하면서 보는 이름이 있고, 개발자나 퍼블리셔 등 내부 팀원들이 보는 이름이 있습니다. 사용자 뿐만 아니라 내부 팀원들이 버튼 이름을 보고 직관적으로 이해하고 빠르게 작업할 수 있도록 이름을 짓도록 신경 써야 합니다.
⑤ 심볼(Symbol)을 만들면서 일을 진행합니다.
스케치의 가장 강력한 기능이 바로 심볼인데요! 심볼을 만들고 프로젝트 규모에 맞게 버튼 디자인을 구조화하는 것이 효율적입니다. 버튼의 위계와 마찬가지로, 여러 개의 심볼을 만들 때에는 심벌 사이의 위계를 정리하는 것이 효과적입니다.
💡 한 가지 TIP!
심볼을 만들 때에는 이름에 ‘/‘를 넣어서 위계를 구분할 수 있습니다. 예를 들어 이름에 1_icons / media / tv라고 입력하면 1_icons 하위에 media, 그 아래에 tv가 위치하게 됩니다.
⑥ 이제 스타일을 잡을 차례입니다.
기능에 대한 검토, 버튼 이름에 대한 고민, 심볼을 만들고 난 후에 스타일을 잡는 것이 좋습니다. 건축으로 비유하면 탄탄한 설계 후에 공사를 시작하고, 인테리어 마감을 하는 셈이죠. 가능하면 적은 수의 스타일을 만들고 관리해나가는 것이 효과적입니다.
➆ 테스트를 빠르게 시작합니다.
테스트를 하면서 버튼의 위계, 스타일의 종류를 수정해가는 것이 효과적입니다. 개발자, 퍼블리셔들은 디자이너가 무엇이든 빠르게 만들어주길 원하기 때문입니다. 빠른 테스트를 하기 위해서라도 탄탄한 설계를 마친 후에 스타일링을 하는 것이 필요하죠!
큐레이터의 문장 🎒
디자이너가 디자인을 하려면 자신이 가진 원칙과 규칙이 필요합니다.
사용자에게 어떤 행동을 유도할 것인지, 사용자가 버튼을 더 의식하게 하려면 색상, 채도를 얼마나 높게 할 것인지.
버튼을 많이 만들어 사용자가 모든 기능을 구현하게 할 것인지, 최소한의 버튼을 통해 서비스 학습에 드는 인지 비용을 줄일 것인지.
