스케치: 10가지 팁과 실무 지식
10 Tips & Best Practices for SketchApp
당연한 내용인 것도 맞지만, 여전히 중요한 내용입니다. 사실 최신 글은 아니라 일부 내용은 Zeplin과 같은 프로그램으로 커버할 수 있습니다. 도움이 될만한 내용만 쏙쏙 읽으시면 될 것 같네요. 특히 저는 1번 팁이 와 닿더군요. 글에 소개된 여러 Sketch관련 커뮤니티를 확인하는 것도 추천드립니다.
https://www.uxpin.com/studio/blog/10-best-practices-sketch/
*지금부터는 위 글에 대한 번역입니다. 제가 이해한 대로 자세하게 써놨습니다만, 불안하신 분들은 원문을 보길 추천드립니다.
스케치를 위한 10가지 팁과 실무지식
당신이 UI 디자이너 또는 제품 디자이너이고(아마 웹 콘텐츠를 만드는 디자이너를 말하는 것 같습니다), 그리고 아직 스케치에 대해 들어보지 못했다면, 당신은 아마 트위터나 블로그를 별로 열심히 읽지 않은 사람일 것입니다. 진심으로 스케치는 맥에서 가장 잘 나가는 UI 디자인 툴입니다.
스케치를 구입하기 전에 여기서 무료로 체험할 수 있습니다. 이미 쓰고 있습니까? 그렇다면 여기 몇 가지 실무 팁이 있습니다. 이 팁들은 디자인을 더욱 개선시키고 효율적이게 만들어 줄 것입니다. 그리고 저희는 당신도 충분히 기대 수준에 올랐다는 걸 확신합니다.
1. 적절한 이름을 부여하기
당신이 오브젝트들을 내보내려고 할 때, 당신이 그룹으로서 레이어에 부여한 이름에 따라 내보내 지게 됩니다. 개발을 위해 asset들을 내보내는데 발생하는 스트레스를 방지하기 위해선 당신은 적절한 네이밍 법규에 따라 레이어를 명명해야 하며, 개발자가 이해할 수 있도록 폴더 이름을 사용해야 합니다.
스케치 유저를 위한 7가지 팁(https://medium.com/@nnwoodman/7-tips-for-sketch-users-e09c27c7ce08)에서 말했듯이, 모든 아이콘 앞에 “ic_”를 입력하는 것과 모든 이미지 앞에 “img_”를 붙이는 것을 통해 네이밍을 단순화할 수 있습니다. 어떤 네이밍 법칙을 당신이 선택하던지, 꼭 개발자와 먼저 논의하도록 합시다. 그래야 모두를 위한 가장 직관적인 방법을 찾을 수 있을 겁니다. 이 과정은 좀 더 정돈된 방식으로 내보내기를 수행하여 Xcode에 이식할 것입니다.
2. 로고타입을 조절한다면, Convert to Outline부터 하기
만약 당신이 로고타입을 조절하거나 크기를 조정한다면, Convert to Outline부터 해야 합니다. 이 말은, 스케치가 더 이상 텍스트가 아닌 그룹으로 짜인 벡터로 인식한다는 뜻입니다. Convert to Outline이후 당신은 특정 단어, 자간, 크기 등을 비율이 깨지 않으면서 수정할 수 있습니다.
3. 헤드라인 및 반복되는 텍스트에 Text Style을 사용하기
스케치는 어떤 텍스트 레이어, 아트보드, 페이지에서 적용할 수 있는 Text Style을 만들 수 있습니다. 이 기능은 당신이 웹사이트, 앱을 만들 때 도움이 됩니다.
여기 텍스트 스타일을 만드는 방법에 대한 훌륭하고 자세한 튜토리얼이 있습니다. 다수의 스크린숏과 Gif로 만들어졌습니다.
4. 반복되는 패턴 또는 UI 요소 심벌로 만들기
심벌은 그룹으로 짜인 레이어 또는 텍스트가 아닌 오브젝트에 적용되는 Text Style라고 볼 수 있습니다. 당신은 어떤 버튼, 박스, 또는 전체 UI 구조까지도 심벌로 만들 수 있습니다. 심벌을 사용하여 당신이 선택한 요소를 변경할 수 있습니다. 가령 내비게이션 심벌을 수정하면, 심벌이 사용된 모든 부분에서 수정이 일어납니다.
5. 멀티스크린 뷰를 통해 전체 UI 구조를 구축하기
멀리 떨어져서 아트보드들을 살펴보면, 빠르게 작업물들의 흐름과 뎁스를 파악할 수 있습니다. 이 방식을 온보딩 플로우(서비스 처음 부분을 Onboarding이라고 합니다)나 사용자 흐름을 디자인하는 데 사용하세요. 그다음, 한 화면 한 화면씩 들어가 디자인하세요. 그다음 다시 멀리 떨어져서 확인해보세요. Web UI Best Practices(https://www.uxpin.com/studio/ebooks/web-ui-design-best-practices/)에서 언급했듯이, 이 방법을 종종 사용해준다면, 흔히 말하는 큰 그림을 확인하는데 도움을 줄 겁니다.
6. 레이아웃을 사용해, 개발자에게 사랑받기
진심으로 Foundation, Bootstrap, 또는 960 Ggs와 같은 웹 그리드를 바탕으로 디자인하세요. 그러면 개발자는 아마 매우 감사 해할 겁니다. 당신이 따로 만든 레이아웃을 엄청나게 많이 만들어 사용하지 않는다면, 디자인을 코드로 짜는 게 훨씬 더 수월해질 겁니다. 이 세 가지 프런트엔드 양식 중에서 Bootstrap이 가장 유명하고 다재다능합니다. Foundation도 뛰어납니다. 특히 새로운 Foundation 모바일에서 더욱 뛰어나죠. 960gs는 한때 잘 나갔지만, 점점 뒤처지고 있습니다. (사실 TutsPlus에서는 이미 960gs에서 Foundation으로 갈아타는 방법을 소개한 바 있습니다. https://code.tutsplus.com/tutorials/migrating-from-960-grid-system-to-zurb-foundation--cms-20677) 우리는 당신이 디자인 레이아웃을 고르기 전에 선택지를 모두 확인하고, 개발자와 논의하여 결정하길 권장합니다. (Treehouse는 Bootstrap과 Foundation을 비교 분석한 결과를 내놨네요. http://blog.teamtreehouse.com/use-bootstrap-or-foundation)
만약 Bootstrap을 바탕으로 작업한다면, 레이아웃을 이렇게 구성하는게 도움이 될겁니다.7. CSS속성 내보내기
시간에 쫓기신다면, 이게 도움이 될 겁니다. 아무 오브젝트 또는 텍스트 레이어를 선택하고, 오른쪽 클릭을 해서, Copy CSS Attributes를 선택하세요. 그리고 메모장이나 텍스트 편집기를 켜서 붙여 넣으세요. 당신은 목업 속 복잡한 레이어를 단순화하여 직접 사용하거나, 개발자가 코딩할 수 있게 만들 수 있습니다. 이건 특히 당신이 그러데이션이 들어간 배경이나 그림자를 다룰 때 꼭 필요합니다.
8. Plugin과 UI킷 활용하기
당신의 작업 속도를 급속도로 높여줄 훌륭한 플러그인이 여러 개 있습니다. 아마 당신이 예상했듯이, 저희는 UXPin Export Plugin을 사용합니다(스케치와도 사용이 가능합니다). 이를 통해 목업을 쌍방향의 프로토타입으로 전환하여 팀으로부터 피드백을 제공받을 수 있습니다. UXPin을 사용한다면, 당신의 일을 좀 더 단순화할 수 있습니다. 이 튜토리얼을 참고하세요(https://www.uxpin.com/studio/blog/turn-sketch-mockups-animated-interactive-prototypes/).
만약 새로운 플러그인을 찾아보고 싶다면, Sketch Toolbox를 둘러보길 추천합니다. 이 작은 앱은 스케치 플러그인을 관리하고 설치하는 걸 도와줍니다.
UI킷은 빠르게 프로토타입과 최신 UI 디자인을 목업 하는 걸 도와줄 겁니다. 나중에 당신이 따로 수정하고 시각적인 조치를 가할 수 있지만, 번거롭게 그럴 필요가 있을까 싶습니다. 우리가 가장 좋아하는 UI킷 중 하나는 Bootstrap V3 GUI입니다. 여기서 찾을 수 있습니다(http://www.sketchappsources.com/free-source/457-bootstrap-v3-gui.html). 당신이 iOS8을 디자인한다면, 우리의 무료 iOS 8 UI Design Kit을 살펴보세요(https://www.uxpin.com/ios8-ui-kit.html) 90개의 요소가 iPhone 5s, 6, 6+에서 사용될 수 있고, 스케치와 포토샵에서 호환되어 꽤나 유용합니다.
9. 스케치 커뮤니티에서 활동하기
비록 도움이 되는 튜토리얼이 수없이 많지만, 경험을 통해 배우는 것을 대체할 수는 없습니다. 지식을 공유하는 것은 모든 훌륭한 디자이너들의 경험에서 우러나온 방법입니다. 왜냐하면 그들도 한때는 지식의 수혜자였기 때문입니다. 여기 우리가 가장 좋아하는 스케치 리소스 및 커뮤니티 사이트를 첨부했습니다.
리소스 사이트 3개
Sketch App Sources: http://www.sketchappsources.com/
Sketch Resources: http://sketchresources.com/
Sketch Shortcuts: http://sketchshortcuts.com/
커뮤니티 사이트 5개
SketchMine: http://www.sketchmine.co/
Brilliant Sketch: http://brilliantsketch.com/
Sketch Tricks: http://sketchtricks.com/
Sketch Casts: http://www.sketchcasts.net/
Sketch Tips: http://www.sketchtips.info
10. 작동 하기
가장 중요한 법칙은 이걸 겁니다. 작동한다면 쓸 것이고, 그렇지 않다면 안 쓸 것입니다. 우리는 2012년부터 발견하고, 시험하고, 일련의 프로젝트에서 사용해봄으로써 결국 스케치를 수용했습니다. 지금까지는 우리를 위해 스케치가 잘 해주고 있습니다. 이 팁들이 도움이 되었다면 다행입니다! 만약 아니라면, 억지로 하지는 마세요.
