Basic Mobile UI Kit 제작기
for Sketch 3
작년부터 Sketch 3에서 편하게 사용할 수 있는 UI Kit을 조금씩 만들어 왔었습니다. 초기 버전은 현재 재직 중인 회사의 UI에 적용하며 정리를 해봤었고 그 단점들을 보완하며 다시 새로 정리를 시작했습니다. 그동안 스케치는 업데이트를 해왔고 플러그인들도 발전을 해왔습니다. 그래서 몇 번이고 만들어왔던 구조들을 수정하기를 반복했고 주말을 활용하다 보니 이렇게 오랜 시간이 걸렸네요. 사실 지금도 마음에 들 만큼 정리가 된 상태가 아니지만 글을 쓰는 이유는 한 가지 깨달음이 있었기 때문입니다.
방법론만으로 UI Kit은 완벽해지기 어렵다.
제가 더 깊게 파면서 정리하지 못한 이유도 있지만 절대적인 방법이 없다는 사실은 맞는 것 같습니다. 누군가에겐 편한 방식이 누군가에겐 어려울 수 있기 때문입니다. 그래서 이번 작업을 하면서 적용한 방식만 가볍게 적어 보겠습니다.
OVERRIDES
스케치 3 업데이트 중 가장 유용한 기능이었습니다. 심볼을 상태별로 다 만들 필요 없이 하나의 심볼로 여러 가지 변형이 가능해졌기 때문입니다. 그래서 이 방식을 이용한 방법론들이 많이 나왔고 저도 적극적으로 활용했습니다. 아마 이 그림만 보셔도 아실 거라 생각됩니다.
터치 타켓은 가이드 성격의 심볼이라 삭제해도 상관은 없습니다.이 방식을 응용해 근본 없이 다양한 컴포넌트를 만들 수 있도록 틀을 만들어 봤습니다.
⚙ Left / ⚙ Center / ⚙ Right의 빈 심볼만 가지고 있는 부모 심볼인데 하위(Left...)에 들어갈 몇 개의 템플릿 심볼들을 만들어 두고 이들을 조합해 여러 가지 컴포넌트들을 만들 수 있도록 세팅했습니다. ⚙BG는 대부분의 컴포넌트에 적용되어 있는데 상황에 따라 변경하기 위해서입니다. 이렇게 하기 위해서는 색, 텍스트, 아이콘 등도 모두 심볼로 규격화시켜 만들어두어야 합니다.
다른 예로 타이틀 바를 보여드릴게요. 오버라이드와 여러 가지 레이아웃 조합을 활용해서 다양한 유닛들을 만들 수 있습니다.
기본 세팅 심볼들. 정렬방식을 하나로 결정했다면 삭제하는 것이 좋습니다.
조합 예시
상상력을 발휘할 수록 더 다양하게 만들 수 있을거라 생각됩니다.문제점
1) 초기 버전의 UI Kit을 주변 사람들에게 공유했는데 다들 심볼 구조가 어떻게 되어있는지 모르기 때문에 원하는 심볼을 찾기 굉장히 어려워했습니다. 제 개념 모델로만 만들어진 구조기 때문에 당연히 다른 사람에게는 어려울 수밖에 없고 특히 초기 버전은 심볼 뎁스가 너무 많고 애매하게 설정된 부분들이 있었기 때문입니다. 현재 버전에서는 최대한 뎁스를 줄이긴 했지만 여전히 애매하게 분류된 컴포넌트들이 많이 있긴 합니다. 그래서 이 킷을 사용하려면 심볼 구조에 익숙해져야 합니다. 그리고 새로 생성할 때에도 이 구조에 맞춰야 하기 때문에 머리가 조금 아픕니다. 가끔 저도 헷갈릴 때가 있습니다.
2) 심볼 안에 심볼이 있다 보니 오버라이드 패널이 매우 복잡해지고 가끔 꼬이기도 합니다. 예를 들어 Accent Color 1의 Light 1, 2는 Accent 1 심볼을 불러와 불투명도를 조절하다 보니 다른 심볼에서 불러들였을 때 오버라이드 옵션이 둘 다 노출되는 현상이 발생합니다.
Basic Tip
심볼 그룹은 슬래시(Category / Sub category)로 설정할 수 있습니다. 불가피한 상황이 아니면 여러 단계로 설정하지 않는 것이 좋습니다.
이렇게 선택할 수 있습니다.ADAPTIVE
많이들 아시겠지만 Auto Layout 플러그인을 사용하면 정말 쉽게 설정을 할 수 있습니다. Stacked Group과 정렬을 설정해서 입력된 텍스트 길이에 따라 아래에 있는 레이어들이 자동으로 정렬되는 카드를 만들어 봤습니다. 이런 기능을 처음 보시는 분들을 위해 제작 방법을 설명해볼게요.
1) ⚙ Info C를 만들고 Stacked Group으로 묶었습니다. 서브텍스트는 다른 텍스트로 교체하거나 None으로 설정할 수 있게 하기 위해 텍스트 심볼을 사용했지만 여기에선 상관없습니다. 그러나 타이틀은 두 줄이 될 수도 있고 더 늘어날 수 있게 하기 위해 텍스트 오브젝트로 해야 합니다.
2) ⚙ Info C의 Stacked Group을 아래와 같이 설정했습니다.
3) Info 심볼과 썸네일 심볼을 Card 심볼로 만들고 다시 Stacked Group으로 묶어줍니다.
각 심볼의 Resizing 설정은 [Resize object]로 되어있습니다.
상하좌우 모두 늘어날 수 있게 설정합니다.4) 이렇게 만든 Card를 Stacked Group으로 묶고 Pin을 아래와 같이 설정하면 배경 오브젝트와의 간격으로 설정이 되며 가로로 늘려도 유지됩니다.
이런 방식으로 가변성을 유지할 수 있고 대부분의 컴포넌트에도 응용이 가능합니다.
그리고 레이어 하나를 지웠을 때 자동으로 리사이징도 해줍니다.
결론
기본적인 틀은 만들 수 있지만 페이지 단위의 사고를 하기 어렵기 때문에 적당히 익숙한 요소들을 구성하는 정도에 그칠 수밖에 없었습니다. 실제 하나의 서비스를 염두에 두고 정리를 해야 유기적인 구조가 그나마 가능할 것 같습니다. - 사실 다음 단계 작업으로 생각하고 있습니다.
그래서 이런 저런 방법들을 적용해보는 데에 초점을 맞췄습니다. 사실 특별한 건 없습니다. 지난 1년 사이 Atomic Design이라는 개념이 많이 알려졌고, Jon Moore의 방법론이 널리 알려졌습니다. 이번 작업 또한 거기에서 벗어나는 것은 없습니다. 그렇다고 완전 똑같이 하지도 못했어요. 생각보다 전체 UI 요소들을 엮어내기는 너무 어렵더군요.
사실 이 작업의 진짜 목적은 저를 위해서였습니다. 한 번쯤 끝까지 정리하면서 장단점을 파악해보고 싶었습니다. 어떤 디자인을 하던 쉽게 할 수 있는 기본 틀을 만들어보고 싶은 욕심도 있었고요. 이렇게 원없이 고민을 해보고나니 개인적으로 많은 도움이 됐던 것 같습니다. 시간이 된다면 여러분에게도 풀세트 작업을 해보라고 권해보고 싶습니다. - 너무 힘들고 피곤하지만요.
_
UI/GUI Designer @ coupang
Personal Site : https://www.instagram.com/frozensound.studio/
진짜 결론
다른 고수님들 보기 부끄럽지만 이렇게 정리한 파일을 공유합니다. 이 킷은 구조를 이해하고 변형시켜 사용해보는 것이 더 도움이 된다고 생각합니다. 보시면 알겠지만 그대로 쓰기엔 현실성이 없는 디자인이거든요. 욕심을 부리다 보니 용량도 너무 커져서 파일이 무거워졌고요.
더 많은 설명을 하지 않은 이유가 파일을 공유하는게 더 쉽기 때문입니다.
결정적으로 당분간 쉬려고 합니다. - 야생의 숨결을 느끼기 위해.
Auto Layout 플러그인을 미리 설치하고 사용하세요. 다운받기
연습용으로 만들다보니 정리가 깔끔하지는 않습니다. 그래서 너무 파일로만 공유되는 건 원치 않아요.
이번 작업은 보편성을 두었고 컴포넌트 자체에 초점이 맞춰져 있어 실제 디자인에 적용하려면 디테일이나 변형을 많이 해야 합니다.
_
꿈같은 황금연휴 마지막 날에...
다운받기
UI_KIT_Basic_ver01.sketch (139MB) (링크변경됨)
2020.9.28 Update
- 텍스트 필드 구조 수정
- 일부 배경 심볼에 틴트 적용됐던 부분 수정
2018. 2.10 Update
- Icon 교체
ㄴhttps://feathericons.com SVG Icon을 스케치에서 사용하기 위한 심볼추가
ㄴ개발자가 재플린에 표기된 아이콘 이름을 위 사이트에서 다운받아 사용하는 방식
ㄴ추가한 아이콘은 스케치 작업을 위한 심볼이며 여기에서 바로 SVG로 추출 불가
ㄴPNG로 추출은 가능
ㄴ하나의 아이콘으로 색상을 변경할 수 있도록 변경
- Extension bar 변경 [Left / Right와 Center 재결합]
2018. 1. 23 Update
- Extension bar 변경 [Left / Right와 Center 분리]
- 심볼 페이지 정렬 변경, 분류 타이틀 추가
2017. 7. 4 Update
- 텍스트 스타일 범주화 [ex. 01 Black/L/01 H1]
- 텍스트 스타일 세분화 [ex. H1, H1 B, H2, H2 B...]
2017. 7. 16 Update
- Tooltip & Chat Balloon 추가
- 텍스트 스타일 변경에 따른 UI 오류 수정
- Auto Layout 플러그인이 Zeplin과 제대로 호환되지 않는 것 같은데 아직 해결책을 못찾았습니다. 업데이트를 기다리고는 있지만 당분간은 풀어서 써야 할 것 같습니다.
