스케치와 버튼
신입에게 가르쳐주는 스케치, 버튼
Sketch 62에서 작성된 글입니다.
Sketch 64에서 기본 단축키가 생겼습니다.
Command + Y, 심벌을 Detach하는 단축키는 Command+Shift+Y입니다.
스케치에서 버튼을 만드는 것에 대한 글입니다.
버튼 만드는 것은 매우 쉽습니다. 네모 칸을 안에 글자를 써두면 됩니다.
이것만 해도 UI 디자인은 거의 다 했다고 할 수 있습니다.
하지만 사소한 문제가 있습니다. 버튼을 생각보다 굉장히 만들어야 하고, 하나로는 충분하지 않은 경우가 많다는 것입니다.
주니어 디자이너를 위한 스케치 버튼 만들기입니다.
브런치는 모바일에서 보면 이미지가 낮은 해상도로 저장되기 때문에 데스크탑에서 보시는 편이 좋습니다.
'보통의 버튼'은 위의 그림처럼 이루어져 있습니다. 네모 칸을 그리고, 텍스트를 쓴 후 적당히 여백을 맞추고, 아이콘과 그림자를 추가하면 됩니다. 용어는 스케치를 스터디하는 글이니까 스케치에서 쓰는 용어를 많이 사용했습니다.
버튼 스타일
요즘은 스타일이 많습니다.
참고로 이 글에 쓰인 모든 이미지 역시 스케치로 작업이 되었습니다. 변화가 생기는 폭을 고려하여, 각각의 모양을 스케치의 스타일과 심벌로 만들었습니다.
Rounded 와 Pill을 구분해야 나중에 후회하는 일이 없습니다. 작업을 하다가 보면, 어중간하게 둥근 모서리는 직각사각형이 되거나 결국 완전히 둥근 Pill이 됩니다.
경우에 따라, 터치 영역 겸, Exprot를 위한 안전 영역이 필요한 경우도 있습니다. 스케치의 경우, 그림자 같은 것을 Export 하면, 자동으로 이미지를 Trim 해주는데, 이 부분을 통제하기 위한 방법으로 점선 정도 되는 영역을 잡아주면 됩니다.
버튼 크기와 레이아웃
버튼의 크기에 대해 고민이 많은데, "요즘 쓰는 보통의 버튼"은 옆으로 긴 직사각형입니다. 크기를 정하기 애매하다면, 위의 규칙대로 잡으면 됩니다. 취향에 맞춰서, 비율을 조정하면 됩니다. 8pt 그리드도 마찬가지입니다. 각각 원하는 비율로 맞추면 됩니다. 스케치에서는 가장 작은 크기의 디자인을 해서 늘리는 게 중요합니다.
첫 네모의 크기를 맞추고 나면, 테두리를 추가하거나 모서리를 둥글게 만드는데, 그럴 경우 참고하면 좋은 가이드입니다. 가이드는 도구입니다. 상황에 맞는 도구를 사용하세요. 예제를 따르는 것보다 스스로 규칙을 만들어가는 것이 더 중요합니다.
예제는 모서리가 둥글 경우, 모서리 반지름을 경계로 확장하는 규칙을 사용했습니다. 이런 경우는 모서리가 둥근 사각형과 그렇지 않은 버튼을 혼용해서 쓸 때인데, 가급적 버튼 형태는 한 가지 스타일만 쓰는 것이 좋습니다.
오렌지색 점선은 기준 가이드입니다. 스케치에서 Resizing 이란 패널이 있습니다. Resizing 옵션을 보면, 기준을 어떻게 할 것인지 정해야 합니다. 아이콘+텍스트 조합을 버튼 가운데 배치해야 할 경우와 왼쪽으로 치우치게 배치해야 할 때가 있습니다. 그럴 경우, 예제처럼 사용하시면 됩니다. 3번째 사례의 경우, 가이드 선이 두 개인데, 사람마다 기준이 약간 다를 수 있습니다. 각자의 논리에 맞는 가이드를 사용하세요.
양쪽 모서리가 완전히 둥근 버튼, Pill 혹은 Max Rounded의 경우, 원의 중심을 기준으로 아이콘을 배치하면 좋습니다. 아이콘 리사이징의 기준도 정가운데 입니다.
스케치에는 '스마트 레이아웃'이 있습니다. 이 스마트 레이아웃에 최소폭을 설정할 수 있는데, 옵션을 사용한 경우와 그렇지 않은 경우의 차이입니다. 화면의 가득 채워야 하는 경우에는 스마트 레이아웃보다는 Resizing 옵션을 사용하는 편이 좋습니다. 상황에 따라 사용하시면 됩니다. 스마트 레이아웃은 버튼 디자인에만 쓰이는 것이 아니라는 점만 기억하고 가시면 됩니다.
여기까지 보면, 이제 버튼 만드는 것은 문제가 없을 겁니다.
한 걸음 더 들어갑니다.
중요한 부분은 여기부터 입니다. 본격적인 TMI입니다.
1. 기능이 먼저, 스타일은 나중에.
기획서를 받든 지, 직접 디자인을 시작하든지 간에 기능을 먼저 생각해야 합니다. 이 버튼이 왜 필요한지 정의해야 합니다. 로그인 버튼이 있어야 한다면, 사용자를 서비스로 입장시켜야 하는 필요가 있는 경우입니다. 버튼은 이미지로 존재하는 게 아니라 인터페이스로 존재합니다. 그래서 관련 기능을 이해하는 것이 중요합니다.
2. 중요도에 따라 위계를 구분한다.
버튼이 하나만 있는 앱이나 서비스는 없습니다. 여러 개의 버튼이 있으면 그룹을 지을 수 있습니다. 중요한 버튼이 있고, 보조적인 역할을 하는 버튼이 있습니다. 버튼의 중요도에 따라 체계를 잡습니다. 중요한 버튼은 좀 더 중요해 보여야 하고, 그렇지 않은 버튼이 중요한 버튼을 방해하면 안 됩니다.
"심플하다" 것이 여러 가지 의미가 있지만, 버튼을 기준으로 생각해보면, 버튼이 없거나 매우 적은 상태입니다. 선택할 가지 수가 늘어날수록 UI는 어렵고 복잡해집니다. 하지만, 전문가가 사용하는(예를 들어 스케치 같은 디자인 툴은) 선택의 가지수를 명확하게 보여주는 것이 심플한 디자인입니다.
3. 네이밍!
버튼의 이름을 잘 지어야 합니다.
버튼의 이름은 2가지가 있습니다. 하나는 사용자에게 보이는 이름입니다. "끝내 주게 멋진 버튼"이라고 이름을 짓거나, "누르지 마시오."라고 할 수도 있습니다.
다른 하나는 개발하는 팀원들과 함께 볼 이름입니다. 버튼의 스타일이나 목적을 고려한 이름이 'Group 235'보다는 효율적입니다. 매우매우 중요합니다.
텍스트부터 정하는 이유는 스케치는 심벌로 디자인 자원을 관리할 수 있습니다. 먼저 스타일과 심벌을 만들고 천천히 빌드업해서 Hi-fi로 확장해 나갈 수 있습니다. 버튼의 크기나 함께 사용되는 아이콘의 크기나 리사이징 기준을 만들어 두는 이유입니다.
4. 일단 심벌 만들고 본다.
심벌을 열심히 만듭니다. 심벌을 만들면서 프로젝트의 규모에 맞게 버튼 디자인을 구조화합니다. 스케치의 제작사에서는 하나의 심벌을 만들고 그 심벌을 상황에 맞게 사용하는 것을 권장합니다.
One symbol, every possibility
여러 개의 심벌을 만들더라도, 활용도가 높게 심벌의 위계나 관계를 정해두면 좋습니다.
이럴 경우, Atomic 디자인 프로세스를 참조하는 것도 좋습니다.
5. 스타일, 이제 뭐~ 디자인 좀 해봅니다.
보통 이 때부터, "디자이너였어요? 기획자인줄." 라는 소리를 들었습니다.
사실 이전에 색을 정해야 합니다. 다행히 스케치는 색에 대해서 관대합니다.
처음부터 스타일과 심벌을 많이 만드는 것은 좋지 않습니다. 약간의 시행착오가 간결한 디자인 과정을 만드는데 도움이 됩니다.
스타일도 심벌처럼 만들어서 저장해둡니다.
처음부터 스타일을 모두 정하는 것도 좋지만, 가급적 적은 수의 스타일을 만들고, 관리해 나가는 것이 좋습니다.
6. 테스트? 벌써?
여기까지 오면, 이제 계속 테스트하면서 가다듬어 갑니다. 모든 것을 준비한 상태에서 완벽하게 하면 좋지만, 빠르게 만드는 것, Lean이나 Agile은 저녁 요리를 하는 것과 같습니다. 팀원들은 항상 배가 고프고 디자이너가 뭔가 빨리 만들어주기를 바랍니다. 최소한의 준비를 먼저 마친 후에 이후 작업으로 프로젝트를 확장해 나가는 것이 좋습니다.
조금 더 꼼꼼하게 작업하기 위한 리스트입니다. 각각의 항목들을 정하거나 채워나가면 뭐든지 다 만들 수 있습니다. 정해야 할 것이 많기 때문에 점진적으로 만들어가는 것이 좋습니다. 또 각각의 항목에 표현되는 수치나 데이터가 규칙과 목적을 갖고 늘어나는 것이 좋습니다.
용어는 회사나 프로젝트, 플랫폼에 따라 조금씩 다른 의미로 사용되기 때문에 주의가 필요합니다.
용어와 정의가 다를 수 있습니다. 설명을 편하게 하기 위해 일부 변경했습니다.버튼은 가장 기본적인 인터렉션을 제공하는 컴포넌트이기 때문에 쉬우면서 어렵습니다. 버튼 자체의 상태는 계속 늘어납니다. 이 상태는 버튼이 화면에 위치한 이후부터 사용자의 반응에 따라 계속 변합니다.
많이 이야기되는 6가지 상태입니다. 플랫폼에 따라 사용하지 않는 상태도 있습니다. 버튼의 상태가 많다 보니 색도 많이 필요합니다. 디자인 가이드 혹은 디자인 시스템에 따라 다른 기준을 가지고 있습니다.
각 상태의 색상이나 스타일 정하는데 기준은 사용자에게 뭔가 알려야 하는 경우는 밝고 선명하게, 사용자가 가급적 의식하지 않아야 하는 경우는 어둡고 흐리게 정하면 됩니다.
채도와 명도를 높게 가는 방향과 그 반대 방향으로 가면 덜 혼동스럽습니다. 가급적 적은 수의 컴포넌트를 만드는 것이 관리가 쉽습니다.
Active는 'Available'한 상태이기도 하고, 'Toggle'에서 On에 해당하는 상태일 수 있습니다. 혹은 둘 다인 경우도 있습니다. 누를 수도 있고, 사용할 수도 있는 상태를 표현합니다.
'Available'의 경우, Normal 혹은 Default 상태를 말하고
'Toggle'의 경우는, 사용자가 선택한 후에 선택한 상태를 지속적으로 표현할 때도 사용됩니다. 예제에서는 'Toggle'로 사용했습니다. 버튼과 연결된 다른 기능이 활성화되어 있다는 것을 말합니다.
Focus와 Hover는 데스크탑 웹디자인에서 마우스를 사용할 경우, 유용하게 사용됩니다. 두 상태는 사용용편의성과 관계가 있습니다. 데스크탑은 모니터, 마우스, 인간의 시선이 다르기 때문에 화면안에서 사용자가 뭘 하려고 하는지 '안전'하게 표현해야 했습니다.
간단하게 말하면, 'Focus'는 선택되어 있으나 사용(action)하지 않은 상태, 'Hover'는 가리키고 있지만 선택되지 않은 상태입니다.
최근 모바일에서 음성 명령을 화면에 사용할 때, 'Focus'와 유사한 가상의 커서를 쓰는 거 같습니다.
천리길도 한 걸음부터.
버튼을 만드는 것은 간단하지만, 예제로 사용한 스케치 파일에서는 버튼 1개의 심벌에 꽤 많은 수의 Layer 스타일, Text 스타일이 사용되었습니다. 심벌을 잘 관리하는 것이 사용하기 편리한 서비스와 제품을 만드는 첫걸음인 것 같습니다. 처음부터 모든 상태를 고려하는 것보다 점진적으로 확장하는 것이 중요합니다.
해당 파일도 이 매거진에 소개되는 글에서 계속 사용해 가면서 다른 예제를 만드는 것에 사용하면서 와이어프레임 킷으로 발전시킬 예정입니다..
