스케치: 표 만들기
Quickly build tables in Sketch
여러분은 스케치에서 표를 어떻게 만드시나요? 스케치에는 따로 표를 만들 수 있는 기능이 없습니다. 저는 그래서 표를 만들어주는 플러그인을 사용하거나 Nested Symbol을 사용하여 표를 만드는데요, 여기서는 심벌을 활용하여 표를 만드는 방법 두 가지를 소개하고 있습니다.
https://medium.com/sketch-app-sources/quickly-build-tables-in-sketch-24c9a01792
*지금부터는 위 글에 대한 번역입니다.
표 만들기
Quickly build tables in Sketch
전 데이터나 표를 자주 다루는 회사에서 일하고 있습니다. 만약 피할 수 있다면 피하겠지만, 큰 데이터를 상대할 때는 꼭 표가 필요하기 때문에 그럴 수는 없습니다. 목업을 위해 저는 표를 만드는 두 가지 빠른 방법을 찾았습니다. 저는 이 두 가지 방법을 각각 표준 줄, 그리고 커스텀 줄로 부릅니다.
시작하기 전에 헤더 심벌을 만들어주세요. 그런 다음에 제가 두 방법으로 표를 만드는 방법을 보여드리겠습니다.
헤더 심벌 설정하기
두 가지 방법의 좋은 점은, 바로 둘 다 같은 헤더 심벌을 사용한다는 점입니다. 그래서 두 가지 타입의 표를 하나의 스케치 라이브러리에서 사용할 수 있죠. 이렇게 하면 다양한 종류의 표를 스타일을 유지하면서 사용할 수 있기 때문에 좋습니다.
1. 헤더 바탕과 텍스트 만들기
2. 원하는 대로 정렬하고, 모든 방향으로 Resizing 설정하기
3. 심벌로 만들기
표준 줄(행, Rows)
이 방식은 최소한의 노력으로 줄을 만드는 걸 도와줍니다. 저는 두 가지 텍스트 심벌을 준비하고(보통의 텍스트 셀과 링크 텍스트 셀), 그리고 2~3개의 바탕색(표준 Standard, 줄 쳐진 Striped, 떠있는 Hover)을 준비합니다. 더 복잡하게 할수록 Override도 복잡해집니다. 단순하게 하려고 노력하세요. 보통 저는 표에서 각 열마다 3~5개의 종류가 필요로 합니다(예를 들어, 상태는 완전하거나, 보류 중이거나, 완전하지 않을 수 있습니다). 그래서 저는 두 심벌을 만듭니다. 하나는 3줄, 다른 하나는 5줄로 접근하기 쉽게 만듭니다.
장점:
* 전체 사이즈를 쉽게 조절할 수 있다
* 데이터를 수정하는데 Tab키로 이동하며 수정할 수 있다
* Auto-Layout플러그인은 사이즈 조절을 한결 부드럽게 한다.
단점:
* 모든 데이터를 수기로 작성해야 한다(이름이나 주소 등을 Craft플러그인을 사용하여 채울 수 없다).
* 예시로 적을 내용에 한계가 존재한다
표준 줄 만들기
1. 셀 바탕을 만든다
2. 셀 텍스트를 입력한다
3. 정렬하고, 넓이를 설정한다
4. 심벌로 만든다
5. 심벌 페이지로 가서 Resizing을 모든 방향으로 설정하고, 텍스트를 심벌로 만든다
6. 만든 텍스트 심벌을 복사하여 Override 할 수 있는 링크 텍스트 심벌을 만든다. (팁, option을 누르고 드래그하면 새로운 심벌을 만들 수 있습니다. cmd+R으로 선택한 레이어 또는 아트보드의 이름을 바로 수정할 수 있습니다)
7. (선택) 배경도 심벌로 만들어 여러 색깔 또는 상태의 심벌을 만든다.
8. 3 또는 5줄의 심벌로 새로운 심벌을 만든다. (팁, 심벌 안의 레이어를 잘 정돈하세요. 스케치에서는 심벌 안의 레이어들이 배열된 위~아래 순서대로 오버라이드 메뉴를 보여줍니다.)
커스텀 줄
이건 좀 더 수정이 자유로운 표를 만드는 데 사용합니다. 이 방식은 더 다양한 텍스트 스타일, 심벌, 배경을 가지고 있습니다. 열을 심벌로 만드는 게 아니라, 이번에는 줄(행)을 심벌로 만듭니다. 이 방식을 사용하면 Craft플러그인을 폭넓은 방법으로 활용할 수 있습니다.
장점:
* 편의에 따라 줄을 자유자재로 수정할 수 있다.
* Craft 플러그인을 사용하여 데이터를 채울 수 있다.
* 예시를 위해 쉽게 줄을 만들 수 있다.
단점:
* 열 넓이를 조절하는 게 어렵다.
* 각 줄에 새로운 데이터를 입력하는데 시간이 걸린다.
커스텀 줄 설정하기
이 방식은 좀 더 직접적입니다. 위의 비디오를 통해 전체 과정을 살펴볼 수 있을 겁니다.
1. 표에 쓰일 모든 헤더를 만든다.
2. 표 한 줄에 쓰일 모든 열의 내용을 만든다.
3. (선택) Craft플러그인으로 데이터, 내용 등을 입력한다.
4. 줄의 배경을 만든다.
5. 텍스트를 정렬한다.
6. 한 줄을 심벌로 만든다.
7. 줄을 복사한다(만약 Craft플러그인을 사용했다면, 심벌이 저절로 새로운 콘텐츠를 추가해줄 겁니다).
스케치 파일은 여기 있습니다(https://medium.com/sketch-app-sources/quickly-build-tables-in-sketch-24c9a017927 페이지 맨 아래에서 다운로드할 수 있습니다).
사용한 플러그인
Craft
Sketch Runner
Auto-Layout
