스케치 추천 플러그인 Rename It
Rename it for Sketch
지난번 소개드린 『스케치 플러그인 MeaXure 리뷰』에 이어 유용한 플러그인을 하나 더 소개해 드리려고 합니다.
아트보드와 레이어의 이름을 손쉽게 변경할 수 있는 플러그인 Rename It 입니다.
프로젝트 마무리 단계에서 심벌과 레이어를 한꺼번에 정리해야 하는 경우에 매우 유용한데요, 여러 개의 레이어 이름을 한꺼번에 변경하는 기능 외에도 대소문자를 일관되게 변경할 수 있고 넘버링도 손쉽게 가능합니다. 유명한 플러그인이라 사용하고 계시는 분들이 많을 것 같긴 하지만, 아직 사용해보지 않았거나 자주 사용하지 않아 사용방법이 헷갈리는 저 같은 분들을 위해 사용 방법을 정리해보고자 합니다.
설치 및 다운로드
플러그인 설치는 아래의 링크에서 사용할 툴을 선택한 뒤, 페이지 최하단의 최신 버전 파일을 다운로드해 압축을 해제하고 Rename It 스케치 파일을 실행시키면 완료됩니다.
툴바에서 플러그인의 기능을 확인해보면 크게 두 가지로 나눌 수 있습니다. 첫 번째와 두 번째의 Rename Selected Layers, Rename Selected Artboards는 선택한 레이어나 아트보드의 이름을 변경하는 방법으로 선택한 객체가 어떤 것이냐만 다를 뿐 사용 방법은 같습니다.
세 번째 Find and Replace Layers/Artboards Names는 레이어와 아트보드에 관계없이 이름에 포함된 텍스트를 찾아서 대치시키는 방법입니다. 먼저 Rename Selected Layers의 사용 방법에 대해 알아보겠습니다.
Rename Selected Layers
선택한 레이어나 아트보드의 이름을 변경하는 기능으로 선택하고자 하는 레이어를 선택 후 기능을 실행해야 합니다. 레이어가 선택되어 있는 상태에서 Name 영역을 채우고 완료시키면 선택된 레이어가 모두 같은 이름으로 변경되는 걸 확인할 수 있는데요, 이때 명령어를 사용하여 레이어 이름들을 구분해 주어야 합니다.
이 명령어를 쉽게 입력할 수 있도록 해주는 것이 하단의 키워드입니다. 키워드들을 유사한 기능끼리 묶어 알아보도록 하겠습니다.
➊ 선택된 레이어의 현재 이름 입력
Layer Name : %*
현재 지정되어 있는 레이어의 이름을 그대로 입력해 주는 기능입니다. 이 기능만으로는 레이어 이름에 변화가 없으므로 명령어의 앞뒤에 다른 텍스트나 명령어와 함께 사용해야 합니다.
box 01, box 02..로 지정되어 있는 레이어들의 이름 앞에 blue라는 단어를 덧붙이는 예제입니다. 이 경우 Name 영역에 'blue'를 입력 후 키워드의 Layer Name 버튼을 누르거나, 'blue %*'을 직접 입력하여 변경이 가능합니다.
➋ 선택된 레이어의 넓이/높이 사이즈 입력
Layer Width : %w
Layer Height : %h
선택된 객체의 넓이 값과 높이 값을 레이어 이름에 숫자로 나타내 주는 기능입니다. 버튼이나 뱃지 등 컴포넌트의 이름에 객체의 사이즈를 입력하는 경우가 있는데, 이런 경우에 활용할 수 있을 것 같습니다.
➌ 선택된 레이어의 순서 입력
선택된 레이어들에 순서를 지정하여 입력하는 기능으로 이 키워드들은 중간의 Sequence와 함께 사용할 수 있습니다. 먼저 Sequence 영역의 From은 숫자로 순서를 지정할 시 시작점이 되는 숫자를 의미하고, 우측의 정렬 방식은 레이어 목록의 순서 기준으로 정렬하는 방식과 캔버스 위치 값을 기준으로 정렬하는 방식 두 가지로 나뉩니다.
1. Layer order : Top to bottom - 레이어 목록창의 순서를 기준으로 위에서 아래 순서대로 정렬
2. Position : Left to right, top to bottom - 캔버스의 위치값 기준으로 왼쪽에서 오른쪽으로, 위에서 아래 순서대로 정렬
3. Position : Top to bottom, left to right - 캔버스의 위치값 기준으로 위에서 아래로, 왼쪽에서 오른쪽 순서대로 정렬
이렇게 Sequence 영역을 설정한 뒤 키워드를 입력하면 되는데요, ASC는 숫자 오름차순, DESC는 숫자 내림차순, Alphabet은 알파벳 대문자순으로 정렬됩니다. 키워드엔 없지만 알파벳을 소문자순으로 정렬하고자 할 시 명령어의 '%A'의 A를 소문자 a로 입력하면 소문자순으로 입력이 가능합니다.
Num.Sequence ASC : %N
Num.Sequence DESC : %n
Alphabet Sequence : %A
선택된 레이어를 레이어 목록의 순서를 기준으로 위에서 아래로 변경하는 예제입니다. 좌측 레이어 목록 창의 레이어 이름이 순서대로 변경된 것을 확인할 수 있습니다. 시퀀스 설정 시 레이어 순서는 Top to bottom으로 적용된다고 적혀 있지만 실제 테스트 시에는 선택된 레이어의 가장 하단에서 위로 적용되는 것을 확인할 수 있습니다.
이전 버전에서는 Top to bottom 정렬되었으나 업데이트 이후 아래에서 위로 변경된 것으로 보입니다. 시퀀스 툴에는 수정이 반영되지 않은 것 같은데… 현재 피그마와 XD 모두 아래에서 위로 정렬이 되고 있는 상황으로, 이 부분에 대한 추가 의견은 글의 마무리에 덧붙이도록 하겠습니다.
선택된 레이어를 캔버스의 위치값을 기준으로 왼쪽에서 오른쪽으로, 위에서 아래 순서대로 변경하는 예제입니다. 캔버스의 위치값을 기준으로 순서를 입력했기 때문에 좌측의 레이어 목록 창에서는 순서가 섞여 나타나지만, 캔버스의 오브젝트를 기준으로 Z자 형태로 순서가 입력된 것을 확인할 수 있습니다.
앞서 설명드린 숫자 오름차순 정렬 명령어가 위의 두 예제와 다르게 입력된 것을 보셨을텐데요,
숫자로 정렬 시 명령어에 N의 개수가 늘어남에따라 숫자의 자릿수가 늘어나도록 할 수 있습니다.
ex)
%N : 1, 2, 3...
%NN : 01, 02, 03...
%NNN : 001, 002, 003...
➍ 선택된 레이어 기준 상태값 입력
선택한 레이어가 속한 페이지, 상위 레이어, 하위 레이어의 이름과 적용된 심벌, 스타일 이름을 나타내 주는 기능입니다.
Page Name : %p
Parent Name : %o
Child Layer : %ch%
Symbol Name : %s
Style Name : %ls%
➎ 현재 선택된 레이어의 대문자/소문자 변경
키워드엔 없지만 명령어를 사용하여 현재 레이어명의 대문자와 소문자를 변경할 수 있는 기능입니다. 명령어를 잘 보시면 1번의 현재 레이어 네임의 명령어인 %*이 앞에 동일하게 나오고 있는 것을 볼 수 있는데요, 이 기능은 레이어명의 대소문자 사용을 일관되게 정리해주는 기능이라고 볼 수 있습니다. 케이스별 예시를 괄호란에 표기하여두었으니 변경하고자 하는 타입에 맞게 사용하시면 될 것 같습니다.
%*u% : 대문자로 변환 (CONVERT TO UPPER CASE)
%*t% : 타일 케이스로 변환 (Convert To Tile Case)
%*c% : 카멜 케이스로 변환 (convertToCamelCase)
%*l% : 소문자로 변환 (convert to lower case)
%*uf% : 첫번째 문자 대문자로 변환 (Convert to Upper first word)
Find and Replace Layer Artboards Names
레이어나 아트보드의 이름에 포함된 특정 텍스트를 검색하여 변경할 수 있는 기능입니다.
파인더의 파일 이름 변경 기능과 같다고 보시면 될 것 같은데요, 위에서부터 순서대로 검색할 범위를 선택하고 검색할 단어와 대치할 단어를 입력하고 완료하면 일괄 변경이 가능합니다.
선택된 레이어 이름의 box라는 단어를 list로 변경하는 예제입니다. 특정 단어를 삭제하고자 하는 경우 Replace란을 비워두면 단어가 삭제됩니다.
하단의 Case Sensitive를 체크하면 텍스트의 대소문자를 구분하여 검색이 가능합니다. 아트보드와 페이지, 레이어의 이름에 List와 list가 혼재되어 있는 경우 위와 같이 list만 검색하여 변경할 수 있습니다.
list를 List로 대소문자를 변경하는 경우 Find and Replace Layers/Artboards Names에서도 변경이 가능한데요, 이 경우에는 레이어와 아트보드를 각각 변경해 주어야 하기 때문에 변경하고자 하는 객체나 이름에 따라 적절한 기능을 사용하시면 될 것 같습니다.
지금까지 스케치 플러그인 Rename It 사용방법에 대해 알아보았습니다. Rename It 플러그인은 스케치 외에 XD와 Figma 버전도 지원하고 있고 사용 방법도 거의 동일하기 때문에 알아두면 다른 툴에서도 유용하게 사용하실 수 있을 것 같습니다.
이 글을 작성하다 알게 되었는데, 스케치용 플러그인은 스케치 67.2버전 이후로 유지관리되지 않는다고 하네요. Layer order : Top to bottom이 반대로 정렬되는 이유가 아닐까 싶습니다.
하지만 아직까지 스케치 공식 홈페이지에서 해당 플러그인을 검색 및 다운받을 수 있도록 제공하고 있고, 최근 스케치 업데이트 버전에서 실행되지 않는 문제를 수정하여 제공하고 있기 때문에 당분간은 사용이 가능할 것으로 보입니다. 스케치 버전 업데이트 후 사용 시에는 먼저 테스트를 해보고 사용하시는 걸 권장합니다.
이상으로 스케치 플러그인 Rename It 소개를 마칩니다.
감사합니다.
- 라이트브레인 가치디자인그룹 김수옥
관련글 -
[SKETCH] 스케치 가이드 플러그인 MeXure
[SKETCH] 스케치 라이브러리 구축 프로세스
[SKETCH] 스케치 초보를 위한 열가지 팁
[SKETCH] 스케치 입문부터 협업 그리고 개발가이드
[ZEPLIN] 개발자와 효율적인 협업을 위한 GUI가이드 프로그램 제플린
