스케치: 사이즈 조절 가능한 아이콘+텍스트 버튼 만들기
Resizable Button with Icon and Label
시도해보신 분들은 아시겠지만, 스케치에서 아이콘과 글자가 들어간 버튼을, 그것도 사이즈 조절이 가능하게 심볼화 하는 건 생각보다 어렵습니다. 이 글에서 손쉽게 그 해결책을 제시하고 있습니다. 참고로 이 그에 나온 방식으로 버튼을 만드시려면 Auto Layout 플러그인이 필요합니다. 바쁘신 분들은 맨 아래의 요약을 참고해주세요.
*지금부터는 위 글에 대한 번역입니다.
스케치 꿀팁: 사이즈 조절이 가능한 아이콘+텍스트 버튼 만들기
Auto Layout과 약간의 꼼수로 신성한 버튼 심볼을 만들 수 있습니다.
스케치가 요즘 혈기왕성한 플랫폼으로 진화하는 걸 보니 기분이 좋습니다만, 저희의 프로젝트 파일들은 반대로 구식이 되어가고 있습니다. 그래서 저흰 2018년을 구식 파일을 다시 만드는, 일명 '살림하는' 해로 지정했습니다. 아토믹 디자인, 오버라이드가 가능한 복합 심볼, 네이밍 방식 등 지금까지 저희는 여러 멋진 걸 해냈습니다. 물론 여기까진 다 좋았습니다, 길에서 엄청나게 큰 장애물에 들이받기 전까지만 해도 말이죠. 바로 아이콘과 글자가 들어간 버튼 만들기였고, 이건 정말 불가능해 보였습니다.
쉬워보이나요? 실제로 해보면 엄청 어렵습니다...저는 레이어 그룹, 네스티드 심볼, 스케치 자체에 들어있는 리사이징 기능 등 제가 생각할 수 있는 모든 걸 해봤습니다. 하지만 결과는 모두 실패였죠. 저는 웹에서 찾은 모든 꼼수도 동원해봤습니다. 하지만 그 역시 실패였죠. 결국 전 피곤해 몇 주 동안 아예 포기하고 손을 놓고 있었습니다. 그러다 문득 Anima의 Auto Layout을 사용하기로 결심했고, 결국 드디어 해냈습니다.
저는 이렇게 했습니다.
먼저 심볼을 만드세요. 저는 button이라고 만들었습니다. 여기에 아이콘과 그 옆에 글자를 넣으세요. 그리고 이 둘을 선택하고(아이콘, 글자) 그룹을 만들어주세요.
이제 방금 만든 그룹을 심볼로 만들어주세요. 저는 Label이라고 만들었습니다.
이제부터 진짜 꿀팁입니다.
아까 만든 Label심볼에서 아이콘과 글자가 포함된 그룹을 선택하세요. 그리고 Anima Auto Layout에서 Pin to Center Horizontally를 선택하세요.
마지막으로 Button심볼로 돌아오세요. Label심볼을 선택 후 Fix Width를 선택하세요.
그러면 아마 될 겁니다! 이제 이 버튼은 아무 문제없이 사이즈 조절이 가능합니다.
심지어 글자가 길어져도 가능하죠.
도움이 될지 모르겠지만, 제가 만든 파일을 여기서(https://www.dropbox.com/s/8g9rejhbd97aajq/Sketch%20Dynamic%20Buttons%20by%20Ox.zip?dl=0)다운받을 수 있습니다.
바쁘신 분을 위한 요약
1. 버튼 심볼을 만든다.
2. 버튼 심볼 안에 아이콘과 글자를 입력하고, 이 둘을 그룹으로 묶는다
3. 묶은 그룹을 라벨 심볼로 만든다.
4. 라벨 심볼에서 그룹으로 묶인 아이콘과 글자를 선택한다.
5. Auto Layout에서 Pin to Center Horizontally를 선택한다.
6. 라벨 심볼에서 나와, 버튼 심볼로 돌아가 라벨심볼을 선택한다.
7. Fixed Width를 선택한다.
