[Sketch] 심볼을 이용하여 테이블 만들기

*2019/11/25

최근 스케치가 업데이트를 한 관계로 새롭게 업데이트하여 업로드하겠습니다. 구버전 기준으로 봐주시기 바랍니다

 

 

 

 

 

 

테이블(표) 결과물

 

스케치를 쓰면서 웹디자인 작업을 하다보면 테이블 디자인 작업을 하게 되는일이 생기는데 테이블 디자인은 가장 티가나지 않으면서도(?)

중요한 작업이기 때문에 심혈을 기울여서 작업을 하게된다. 포토샵에서는 라인툴을 이용하여 한땀한땀 장인정신으로 제작 했었고 스케치에서는 심볼의 엄청난 기능을 알기전까지는 페이지 하나씩 작업을 했었다. 그러나 추후 수정이 들어오게되면

 

 

 

텍스트를 왼쪽 정렬말고 가운데 정렬로 바꿔주세요!

폰트 굵기가 너무 얇아요! 볼드체로 바꿔주세요

이번에 폰트 변경요청 들어왔어요. 노토산스말고 스포카한산스로 바꿔주세요!

 

 

 

테이블이 들어간 웹디자인이 한페이지라면 수정이 금방 끝나겠지만 만약 테이블이 들어간 페이지가 20페이지 30페이지가 넘어간다면 그 한장한장을.. 

 

 

 으아! 죽었다냥!

 

 

텍스트와 라인 사이의 margin(여백)값과 정해진 너비 안에서 텍스트를 해결하려고 하다보면 1px씩 움직이고 맞추면서 시간을 많이 소요하게된다. 포토샵을 이용했다면 아직도 많은 시간을 이용하여 비효율적으로 작업을 했겠지만 나는 스케치의 심볼이라는 기능을 이용하여 테이블을 작업하기로 하였다. 

 

 

 

심볼 제작시 레이어 이름에 슬래시는 필수다 그래야 헤메지 않는다.

 

슬래시를 써야 심볼에서 카테고리가 생깁니다. 찾기 편해져요.

 

 

 

우선 제목이 되는 th와 결과값이 나오는 td 두가지의 심볼을 만들었다. 맨 왼쪽에 회색 라인을 하나 그어준다. 회색라인은 선이 된다.

그리고 같지만 가운데 정렬을 한 심볼도 하나 더 만들어주었다. No와 1은 항상 표의 왼쪽 열을 담당한다. (맨 위 결과물 이미지 참고)

텍스트들도 심볼로 지정해준다. 그 이유는 제일 하단에 나와있다.

 

 

 

 

텍스트 리사이징

선이되는 회색 짝대기도 리사이징을 해줘야합니다.

 

 

 

그리고 리사이징을 설정해줘야한다. 그렇지 않으면 행 크기를 조절할 때 텍스트와 맨 왼쪽의 회색깔의 라인이 치즈처럼 늘어나게되어버린다. 열 높이는 조절하지 않는다

 

 

 

 

그룹화 시키면 보기엔 좋지만 테이블 완성하기 전 까지는 그룹화는 안하는게 좋다.

 

 

이렇게 만들어 다시 페이지로 돌아와 아트보드를 만들어 심볼들을 바로 적용시켜 보았다.

먼저 레탱글로 직사각형을 만들어 보더값을 준 후 그 위에 심볼을 올린다는 생각으로 한줄씩 작업을 한다.

 

 

 

끝난것 같지만 아직 끝난게 아니다.

 

가령 테이블 속 텍스트를 볼드처리를 하거나, 언더라인이 들어가거나, 컬러가 들어가거나 할 수 있기때문에

혹시나 모를 일에 대비해 여러가지의 종류의 텍스트들도 심볼로 제작을 해야한다.

 

 

 

 

볼드체의 언더라인 텍스트는 눌러야될 것 같은 느낌!

 

 

다양한 텍스트들도 위에서 말한것처럼 리사이징 해줘야 치즈처럼 늘어나지 않는다.

 

 

 

 

 

 

 

페이지로 다시 돌아오게 되면 오버라이드에서 텍스트를 변경 할 수 있게된다. 이렇게 해서 스케치에서 테이블 만들기가 끝이 났다. 우리는 앞으로 폰트를 바꿔주세요, 굵기를 변경해주세요... 같은 수정요청에 당황하지않고 손쉽게 대응 할 수 있게 되었으며, 작업시간도 훨씬 줄어들게 되었을 것이다.