스케치 58, Smart Layout
신입에게 가르쳐주는 스케치, 업데이트 편
Smart Layout 기능이 좀 어려웠는지, 스케치 59에서 튜토리얼 템플릿이 추가되었습니다.
단계별로 매우 상세한 예제가 있으니, 참고 하시면 좋을 듯 합니다.
스케치 58에서 업데이트된 스마트 레이아웃은 컴포넌트를 유연하게 구성할 수 있게 합니다. 여기서 '유연하다'라는 것은 사용자가 보는 정보, 콘텐츠에 따라 바꾸기 쉬운 디자인을 만들 수 있다는 겁니다.
그리고 '유연하다'는 매우 중요합니다.
스마트 레이아웃 업데이트는 다른 업데이트와 달리, 활용할 수 있는 부분이 많습니다. 지금까지 디자인은 매우 '경직'되어 있습니다. 유연하다와 경직되어 있다의 차이는 콘텐츠가 변경되면, 어떻게 해야 되는가의 문제이기도 합니다. 이번 스케치 업데이트는 3가지 특징을 가지고 있다고 말합니다.
Pushing your buttons
One symbol, every possibility
Fully responsive components
Pushing your buttons
요즘 나온 스케치나 어도비XD 같은 경우, 아트보드에 배치한 오브젝트를 한 번에 변경할 수 있는 기능을 많이 지원합니다. 이런 기능이 없던 툴의 경우는 100개의 버튼을 수정해야 하면, 100번의 수정을 해야 했습니다.
UI 디자인에서 일관성, 규칙, 가이드, 시스템이란 자주 등장하는 이유입니다. 작업량이 많아지면, 많아질수록 일관성과 효율성이 필요합니다.
스케치와 같은 툴을 사용하면, 이미 만들어둔 버튼은 심벌의 형태로 관리해서 여러 군데에 적용해 둔 버튼을 쉽게 바꿀 수 있습니다. 하지만 어떤 형태의 수정은 앞으로 할 디자인에 영향을 끼칩니다. 오늘 수정한 내용이 내일 바뀔 수도 있습니다.
비트맵 기반의 그래픽 툴의 경우에는 큰 크기에서 줄여가면서 작업하지만, 스케치 같은 벡터 툴에서는 가장 작은 크기에서 작업하는 것이 유리합니다. 가장 작고, 단순한 형태를 잘 만드는 것이 중요합니다.
스케치 58에서 생긴 스마트 레이아웃은 가장 작은 작은 크기를 생각한 후에, 수직과 수평으로 크기를 맞춰줍니다. 버튼이 가장 쉬운 예제입니다.
One symbol, every possibility
스마트 레이아웃의 가장 간단한 예는 버튼이지만, 버튼을 기반으로 확장해서 활용도를 높일 수 있습니다. 누르기만 하는 버튼이 아니라, 노티피케이션을 위한 배지가 있고, 아이콘이 있는 버튼에 스마트 레이아웃을 적용해보면, 대략 다음과 같이 구성할 수 있습니다. 필요에 따라 다양한 역할을 하는 심벌을 준비할 수 있습니다.
'버튼'이라고 심벌을 만들고, 스마트 레이아웃을 설정하면, 입력하는 텍스트 크기에 맞춰서 버튼 크기를 조절해줍니다. 그래서 레이아웃의 규칙만 잘 정하면 됩니다. 하지만 이상합니다. 버튼 하나만 보면, 리사이징입니다.
스마트 레이아웃은 크기를 자동으로 바꾸는 것이 아니라, 레이아웃을 유지합니다.
참고로 스케치의 레이아웃은 View > Canvas > Layout Settings... 에서 설정합니다.
스마트 레이아웃을 수평으로 구성할 경우는 왼쪽의 2개 심벌을 포함하는, 오른쪽의 버튼 그룹 심벌을 만들 수 있습니다.
Fully responsive components
수직으로 구성할 경우는 하나의 상품 정보 심벌로 여러 가지 형태로 구성할 수 있습니다. 예제는 수직과 수평으로 중첩된 심벌을 사용하여, 구성한 상품 정보 심벌로 3가지 형태를 표현했습니다. 콘텐츠의 구성을 변경해도, 레이아웃을 유지합니다.
이런 방식으로 수직과 수평으로 레이아웃을 확장시켜서 UI를 디자인할 수 있습니다.
스마트 레이아웃은 심벌을 만들 때 볼 수 있고, 기존의 심벌도 오른쪽 인스펙터에 추가된 Layout을 통해서 통제할 수 있습니다. 기존의 심벌은 None입니다.
Layout이 적용된 레이어를 쉽게 볼 수 있도록 레이아웃의 방향을 결정하는 아이콘이 추가되었습니다.
구조적인 설계와
유연성을 요구하는 디자인
디자인에는 일종의 흐름이 있고, 규칙이 있습니다. 그래서 우리는 왼쪽 상단에 햄버거 아이콘을 넣고, 오른쪽 상단에 알림을 넣은 후, 하단에 크고 긴 버튼을 놓습니다. 이렇게 보면 대부분의 디자인이 비슷해보이지만, 사실 모든 디자인은 다릅니다.
다른 환경, 다른 사업, 다른 상품, 다른 사람들이 만들기 때문입니다. 자세하게 보면 모두 다릅니다. 그래서 수정이 많습니다. 그런데 2~3년차쯤 되면, 벤치마킹도 잘하고, 어느 정도 UI 설계도 하기 때문에 훨씬 더 능동적으로 디자인할 수 있는 능력이 생깁니다.
UI 디자인을 처음 시작하면, 비주얼에 대한 영역을 고민합니다. 예전에는 이쁘면 괜찮았는데(지금도 그렇지만...) 이제는 비즈니스와 프로그래밍 영역에서의 요구사항도 커지고 있습니다.
고치라고 해서 고치는 것보다 더 넓은 시야가 필요합니다. 가능한 상태를 충분히 고려해서 좋은 디자인을 해야 할 것 같습니다.
스마트 레이아웃의 기능을 좀 더 이해하기 위해서, 아래 글을 읽어보시면 좋습니다.
