[sketch] appearance, 텍스트 컴포넌트화/삭제하기

하아.. 오랫만에 뜬금 새 이슈가 생겼슴미당. 

기존 프로젝트들이 사방팔방 중구난방 웹으로 만든다고 이 프레임워크 저 프레임워크 다 달라서

유지보수나 인력확보가 좋지 않게 되어서...

안드로이드로 갈아타면서 dpi에 맞게 다시 디자인 가이드를 잡아주어야 하는 상황이 왔습니다.

 

뭐. 전 개발팀내의 일이라면 디자인하는건 전혀 문제가 없으니까

약 일년만에 스케치를 잡아보는것 같네요. ㅋㅋ 

 

혼자 할때와는 다르게.. 협업용이기 떄문에 구조화를 잘해야겠다 싶어 심볼이외에 안쓰던 기능들을 적용하기 시작하던중...

appearance의 텍스트를 만들었지만 뭐 삭제방법이 없더군여. 검색해도 플러그인만 나와..뭐여...??

하는김에 appearance의 생성과 삭제까지 쭉- 다뤄보겠습니다. 

sketch를 항상 다뤄오신 분들은 아시겠지만..단축키 T를 눌러 아무거나 써서 텍스트 요소를 한개 만듭니다.

그런뒤에 그 텍스트 요소를 선택하고 우측에 APPERANCE를 보십시용. take a look! 

참고로 단축키 안먹히면 한영키부터 확인하세여. 스케치는 한글모드에선 단축키 절-대 안먹힙니다.

그런다음에 현재는 No Text Style이니

클릭해서 Create를 해줍시다. 저는 기존에 만들어둔 스타일들이 있어서 밑에 만들어둔 리스트가 나오네용. 

Create를 하게 되면 이름을 정하라고 합니다. 중구난방이 되지 않도록 잘 정리해야겠죠?

html태그를 기준으로 h1/bold/green이라고 작성해주고 엔터를 치면 저장이 됩니다.

참고로 슬래시(/)를 쓰는것은 depth를 만들어주어 폴더처럼 구분해주는 기능을 합니다.

안써도 상관없지만...제가 앞으로 하는걸 조금더 봐주세여... 어쩔때 쓰는가....

자 저장이 잘 됬습니다

같은방법으로 빨간색도 하나 더 만들어 주었어요.

그런다음에 새로운 텍스트를 만든뒤 Appearance에 텍스트 스타일 눌러놓으니까

h1/bold에 green과 red가 잘 정리되어 들어갔네요. 

T눌러서 텍스트 만들고 저기서 텍스트 스타일만 불러오면 되는것이죠.

이 방법을 써야 개발할때도 개발자들도 편하고 디자인할때도 일관적인 텍스트 스타일 관리가 되어서 좋아요.

 

단, 이렇게 컴포넌트 구조화를 하는것은 어느정도 분류에 관한 개념이 스스로 머리에 정리되있을때 얘기지..

막말로다 이게 안되는 분들이 마구잡이로 그때그때 자기 생각나는 기준대로 주먹구구식 정리를 해 버리면 

정리를 안하고 모조리 늘어놓은것보다 못한 끔찍한 상황이 됩니다. 차라리 늘어놓은걸 찾는게 낫지 뎁스까지 뒤지면 으으..

갠적으로 컴포넌트로 분류 구조화를 하는건...어느정도 경험이 있는 분이 해야 합니다. 

무튼 잡담을 각설하고... 이번엔 삭제를 해 봅시다. 제가 이 삭제떄문에 반나절을 날렸습니다.ㅠㅠ

텍스트 스타일을 누르고... 안보인다면 스크롤을 쭉 내려서 가장 하단에 Organize Text Styles를 선택해줍니다.

이게 오죽 안보이면 삭제하는 플러그인들이 돌아다니더군여. 진짜 유료앱인데 말이 되나 싶었습니다만.. 있긴 있더군여.

좀 UI툴임에도 불구하고 UI가 잘못 만들어진 케이스인데....

삭제할 폰트 스타일을 선택해준뒤 빨간 동그라미 쳐놓은곳에 -를 누르면 삭제됩니다. 

와.진짜 몇번을 열어봤는데 저 마이너스 버튼을 친구가 알려주고 나서 그제서야 보이더군여. --

삭제 기능이 있기는 합니다. 

h1/bold/green이 삭제된 모습입니다.

필요없는것들을 -로 삭제해주신뒤 Done으로 완료해주시면 삭제도 끝납니다.