코드로 100명 이상의 네임택 한 번에 디자인하기
Automating repetitive design work
Design Spectrum에서 매 달 이벤트를 주최할 때마다 감사하게도 100분 이상이 참석해주십니다. 저희도 감사의 표시로 여러 가지 준비를 하는데요, 그 중에 하나는 네임택을 만들어 드리는 것입니다. 참가자 분들에게 좀 더 준비된 모습들 보여드리고, 또 소소하게나마 기념으로 가져가실 수 있도록 네임택을 만듭니다. 다른 참가자 분들과 좀 더 자연스러운 대화를 도와드리고 싶은 마음도 있습니다.
하지만 100명 의상의 이름을 일일이 입력해서 만든다는 것은 쉬운 일이 아닙니다. 물론 이 정도 숫자는 노가다를 하는 사치(?)를 누릴 수도 있습니다만, 저희는 궁극적으로 더 효율적인 방식을 원했고 더 가치있는 일에 시간을 투자하고 싶었습니다. 그래서 네임택 만드는 과정을 자동화해보기로 했습니다.
가장 먼저 시도했던 것은 최근 Airbnb가 공개했던 React-Sketch.app을 사용하는 것 입니다. 간단히 설명드리면, 코드(React)를 통해 스케치에 디자인을 하는 것입니다. 따라서 상당히 유연할 뿐만 아니라 자동화가 쉬울 것 같아 보였습니다. 코드니까요.
그러나 이 방식으로는 이미 스케치에서 만들어 놓은 그래픽 요소들을 재사용할 수가 없고, 코드로 처음부터 다시 디자인을 해야 했습니다. 이 방식은 네임택을 자동화를 하기에는 너무 비효율적인 방식이라는 생각이 들었습니다. 게다가 이후에 다른 사람이 네임택 디자인을 했을 때 누군가 그걸 다시 코드로 옮기는 과정이 매 번 필요했습니다.
스케치 플러그인
이전엔 스케치의 플러그인을 만들기 위해서는 Cocoascript를 새로 배워야한다는 큰 장벽이 존재했었습니다. 그런데 이제는 Javascript API가 공개되어서 Cocoascript를 몰라도 스케치 플러그인을 만들 수 있었습니다. 아직 API가 완성되지 않아서 여러군데를 좀 뒤져봐야 했지만 아래 사이트를 통하여 많은 도움을 얻었습니다.
엑셀 참가자 명단 array로 변경하기
네임택 만드는 과정을 자동화하려면 전체 참가자 명단을 코드에게 알려주어야 합니다. 하지만 디자인 스펙트럼에서 이벤트 신청을 받을 때는 아직 온오프믹스와 같은 외부 이벤트 관리 서비스를 이용하기 때문에 통신을 통해 명단을 바로 받아오기가 불가능했습니다.
서비스마다 차이는 있지만 보통 참가자 명단을 엑셀 파일로 다운받을 수 있게 해줍니다. 엑셀 파일에는 참가자 명단이 적힌 행(column)이 있습니다. 이를 그대로 코드에서 사용할 수는 없으므로 선택 후 복사해서 아래 사이트에 붙여넣으면 Javascript array로 사용할 수 있도록 변경해 줍니다. (JSON 등 다른 형태로도 변경이 가능합니다.)
http://www.seabreezecomputers.com/excel2array/
그리고는 array 형태로 변형된 참가자 명단을 스케치 스크립트에 붙여넣습니다.
participants = [내이름, 저이름, 그이름, …];
이런 식으로요.
(추후에 디자인 스펙트럼에서 자체적으로 이벤트 신청과 결제가 가능한 시스템을 만들면 이 과정도 자동화할 수 있을 것으로 기대합니다.)
반복 작업 자동화
스케치에서 코드를 작성하는 법은 쉽습니다. Plugins 메뉴에서 Run Script… (Shift + Cmd + K) 를 누르면 스크립트를 작성할 수 있는 창이 나타납니다. Atom같은 에디터에 비하면 볼품 없지만 간단한 코드를 테스트해보기는 간편하고 빠릅니다. 그리고 결과를 바로 볼 수 있다는 장점이 있습니다.
제가 코드로 작성한 로직은 아래와 같습니다.
현재 선택된 아트보드 인식
인식된 아트보드 우측으로 복사
복사된 아트보드에 있는 이름 레이어 검색
찾은 이름 레이어의 텍스트를 참가자 이름으로 변경
참가자 수 만큼 같은 작업을 반복
코드로는 아래와 같습니다.
바로 복사해서 사용하실 수도 있습니다만, 아직은 일정한 규칙이 정해져 있어야만 작동합니다.
이름을 바꾸기 원하는 레이어 이름을 ‘name’으로 해야 함
‘name’ 레이어를 감싸는 그룹 레이어가 있어야 하고, 그 이름도 마찬기지로 ‘name’이어야 함
복사하기 원하는 아트보드를 먼저 선택하고 스크립트를 실행(Run)해야 함
// NameTag Generator (alpha version)
// Designed and Coded by David Lee @DesignSpectrum
// 23 July, 2017
// array of participant's names
var participants = [
"김이름",
"이이름",
"그이름"
];
// get sketch document and layers(incl. artboard)
var sketch = context.api();
var document = sketch.selectedDocument;
var page = document.selectedPage;
var selectedLayers = document.selectedLayers;
var DISTANCE = 50;
// Give warning when artboard is not selected
if(selectedLayers.length == 0) {
log('Please select an artboard first.');
}
// duplicate the selected artboard
for(i = 0; i < participants.length; i++) {
selectedLayers.iterate(function(artboard) {
if(artboard.isArtboard) {
var newArtboard = artboard.duplicate();
var rect = newArtboard.frame;
rect.x += (i + 1) * (rect.width + DISTANCE);
newArtboard.frame = rect;
newArtboard.iterate(function(group) {
if(group.name == 'name') {
group.iterate(function(layer) {
if(layer.name == 'name') {
layer.text = participants[i];
}
});
}
});
}
});
};
이렇게 작성한 스크립트를 실행(Run)하면 아래와 같이 네임택 아트보드가 참가자 수 만큼 복사됩니다. 물론 참가자의 이름이 각각 적용된 채로요.
모바일에서는 animated gif 앞부분만 잘려 보이네요. 전체를 확인하려면 다음 링크를 눌러서 확인하세요. https://youtu.be/ZtN4vatH6JA
출력을 위한 자동화
기능적으로는 완성이 되었지만 프린트하고 컷팅하려면 한 장의 종이에 여러 개의 네임택을 넣어서 export하는 것이 효율적이었습니다. 그래서 다시 작성한 로직은 다음과 같습니다.
현재 선택된 아트보드(A4) 인식
인식된 아트보드를 우측으로 복사
추가: 복사된 아트보드에 있는 layer group(네임택)을 세 개 복사
수정: 네임택에 있는 ‘name’ layer 검색
찾은 ‘name’ layer의 텍스트를 참가자 이름으로 변경
추가: 복사된 세 개의 layer group에 대해 같은 작업을 반복
수정: 참가자 수 나누기 3만큼 아트보드를 복사하고 위의 작업을 반복
코드를 실행하고 네임택이 만들어지는 과정은 아래 gif와 같습니다.
전체 애니메이션은 다음 링크에서 확인할 수 있습니다. https://youtu.be/tm2w_1Lw--Y
이렇게 코드가 실행되어 모든 네임택이 만들어진 후에 전체 아트보드를 선택하여 pdf로 export하기만 하면 됩니다.
아직 완전한 자동화는 아니지만, 스케치에서 네임택을 디자인하고 참가자 명단만 array 형태로 코드에 넣으면 알아서 바로 출력 가능한 형태로 만들어 줍니다. (안타깝게도 스케치에선 RGB로밖에 작업할 수 없기 때문에 프린트를 하려면 색을 미리 잘 선택하거나 추후 조절이 필요합니다.)
자동화 후
수작업으로 해야 하는 일을 자동화하니 당연히 시간을 절약할 수 있을 뿐만 아니라, 최소한 네임택에 관해서는 추후에 대규모 이벤트에도 자연스럽게 대비가 가능해졌습니다. (100명까지는 재미로 수작업을 할 수 있지만 1,000명은 재미로 하기 어렵습니다..)
또한 이 코드만 있으면 누구나 스케치에서 재사용이 가능합니다. 코드를 수정하여 네임택이 아닌 다른 출력물 등 반복되는 디자인 작업을 쉽게 처리할 수 있게 되었습니다.
사실 이런 반복작업 말고도 디자인할 때 더 효율적으로 만들고 싶은 많은 것들이 있습니다. 그렇다고 그때마다 이런걸 개발해주는 개발자를 만나는 것은 정말 행운이겠지요. 목마른 사람이 (가능하다면) 직접 만들어야 더 나은 제품을 만들 수 있다고 생각합니다.
마치며
이번 주제가 ‘CODE와 DATA로 디자인하기’이니 만큼 주최자인 Design Spectrum에서도 이 주제를 탐구해보고 싶었습니다. ‘디자이너가 코드를 하면 어떤 것이 좋은가’에 대한 실용적인 예시를 만들어보려고 노력했습니다.
저는 디자이너가 반드시 코딩을 해야한다고 생각하진 않습니다. 다만 이번 이벤트를 통해 디자이너의 확장되어가는 역할에 대해 이해하고 우리 각자는 앞으로 어떤 디자이너가 될 것인가에 대해 고민하는 시간이 되길 바라며 만들었습니다.
읽어주셔서 감사합니다.
*제목에 영감을 주신 이정영님과 임세희님, 표지 사진을 촬영해주신 조은님, 글 검수를 도와주신 김지홍님께 감사드립니다.
업데이트: 스케치 플러그인 출시
