자바스크립트 배열의 정렬

javascrip는 개인적으로 참 마음에 안드는 부분이 많은데, 그 중에서도 배열의 sort() 메소드는 좀 좌절스러운 것이…

a = [0 to 10].map -> parseInt Math.random! * 100
# [ 74, 7, 45, 41, 43, 85, 84, 66, 41, 91 ]
a.sort!
# [ 41, 41, 43, 45, 66, 7, 74, 84, 85, 91 ]

숫자로 된 배열을 정렬할 때도 사전식으로 비교해서 어이없는 결과를 만들어낸다…. sort() 메소드는 비교 함수를 받긴하므로, 정수 크기별로 비교하려면, 다음과 같이 각 값을 정수형으로 계산한 결과를 던져주는 비교함수를 넣어준다. (-첫째인자 + 둘째인자로 코딩하면 -첫째인자에 의해서 자동으로 정수형으로 인식함.

#livescript
a.sort -> +&0 -&1
# [ 7, 41, 41, 43, 45, 66, 74, 84, 85, 91 ]

업데이트

원글의 내용이 라이브스크립트로 씌여져 있어서 문법이 익숙치 않은 사람을 위해서 자바 스크립트 문법으로 대체합니다.

let a = [0,1,2,3,4,5,6,7,8,9].map( () => parseInt(Math.random() * 100));
console.log(a.sort((x, y) => +x-y));

자바스크립트의 프로토타입에 대해

객체지향 프로그래밍 언어하면 떠올리는 단어가 바로 “클래스”이고, 실제로 대부분의 객체 지향 성격을 갖는 언어들은 대부분 클래스를 지원한다. 그런데 자바스크립트는 클래스가 아닌 프로토타입 기반의 OOP를 사용한다. 오늘은 이 프로토타입에 대하여 살펴보도록 하겠다. 자바스크립트의 프로토타입에 대해 더보기

20071112 :: 일러스트레이터 CS2에서 자바스크립트 사용하기

*일전에 공개했던 글인데 DB를 날려먹은 후 큰 맘 먹고 다시 작성합니다

일러스트레이터 CS2가 나온지도 어느덧 2년하고도반정도가 지났습니다. 일러스트레이터CS2는 10.0 버전으로부터 CS로의 버전업과는 비교가 안될만큼 겉이나 속에서 많은 변화가 있었습니다. 그리고 이러한 많은 발전은 무거운 덩치에도 불구하고 숩을 9.0 사용자에서 CS2 사용자로 이끈 원동력이 되었습니다. 그것은 다름아닌 자바스크립트를 지원한다는 것이지요. 이는 포토샵과는 다른 일러스트레이터만의 특성 덕분에 정말 간단한 방법으로 노가다를 줄일 수 있게 되었습니다. 물론 포토샵CS2도 자바스크립트를 지원합니다만, 아무래도 HTML의 자바스크립트에 좀더 익숙하다보니 일러스트레이터의 자바스크립트가 훨씬 사용하기 쉽긴 쉽습니다.

문제는 주로 ‘디자이너’들이 사용하는 툴이다보니 아무도 일러스트레이터 자바 스크립트에는 관심을 가지지 않더란 말이지요. 없으면 만드는 것이지요. 최소한 정품에 포함된 자바스크립트 가이드에는 객체에 대한 레퍼런스가 포함되어 있어서 가이드를 참고하면서 코드를 작성하는 것은 그리 어렵지 않았습니다.

어쨌든 일러스트레이터에서 자바 스크립트를 사용하는 것이 어떤 이익이 있는가에 대해 먼저 살펴보도록하겠습니다.

일러스트레이터에서의 자동화 방법

포토샵의 액션은 매우 유명하지요. 일종의 매크로처럼 효과나 특정 작업을 기록하여 반복해서 쓸 수 있도록 하는 기능입니다. 특히 이러한 액션을 드롭릿(Droplet)으로 만들어 놓으면 파일을 드롭릿에 끌어다 놓는 것만으로도 자동으로 포토샵을 실행시켜 해당 액션을 적용하도록 할 수도 있습니다. 참고로 이러한 복수개의 파일을 변환하고 가공하는 방법을 더욱 편리하고 집약적으로 수행할 수 있도록 포토샵CS2에서는 image processor라는 자바스크립트를 지원합니다. (file 메뉴의 automation 항목을 잘 들여다보세요)

이러한 액션팔레트는 일러스트레이터에도 벌써 이전부터 존재해왔습니다. 다만 많이 안썼을 뿐이지요. 왜냐하면 일러스트레이터는 필터를 여러 번 적용하는 것처럼 단순 작업을 반복하기가 그리 빈번히 필요치 않기 때문입니다.

그리고, 일러스트레이터는 자바스크립트 (뿐만아니라 VB 스크립트와 Apple 스크립트도 지원합니다) 지원합니다 이러한 스크립트를 이용한 방법은 액션과 약간의 차이가 있으며, 또한 강력합니다.

기본적으로 액션은 기록된 매크로를 재생하는 방식을 사용합니다. 즉 사용자가 일러스트레이터의 UI를 이용하여, 메뉴의 항목을 선택하고 특정한 기능을 선택하여 적용하는 등의 일련의 작업을 그대로 녹화했다가 다른 상황에서 똑같이 재현하여 반복적인 작업을 단순화 하는 것이 그 핵심입니다.

이에 비해서 자바스크립트는 내부 자바스크립트 해석기에 의해서 작동되며 여기에는 사용자의 커서 움직임이나 키보드 단축키가 개입되지 않습니다. 하지만 스크립트는 등록된 액션을 호출하여 그대로 사용할 수도 있습니다. 또한 특정한 조건에 의해서 분기를 하거나, 조건을 만족하는 동안 반복문을 실행하는 등 우리가 알고 있는 기본적인 프로그래밍 로직에 의해 구동합니다. 따라서 사용하기에 따라서는 액션으로는 처리할 수 없었던 엄청난 작업들을 단 몇십… (차마 몇 줄이라고는 말 못하겠군요)줄의 코드만으로 처리할 수도 있습니다.

자바스크립트의 설치와 사용

일러스트레이터에서 자바스크립트를 사용하기 위해서는 다음과 같은 과정이 필요합니다.

1. 자바 스크립트 파일 작성하기

자바 스크립트 파일을 작성합니다. 다들 작성을 해야하는 건 아닙니다 웹을 뒤져보면 그럴싸한 스크립트를 또 구할 수 있겠지요. 아무튼 이러한 원본 스크립트 파일이 필요합니다. 스크립트 파일은 메모장으로도 작성할 수 있으며, .js의 확장자를 갖습니다. 다른 텍스트 에디터를 사용하여도 좋습니다만, 문자 인코딩은 ANSI를 사용하여야 하며, 파일 어느곳에도 한글, 한자, 일본어등의 비라틴문자(NonLatin Character)가 사용되어서는 안됩니다. 이는 주석에도 해당되어, 한글로 주석을 달아도 해석기가 작동하지 않아 일러스트레이터는 그냥 스크립트 파일 자체를 무시해버립니다.

2. 자바스크립트 파일 설치하기

일러스트레이터가 설치된 폴더(일반적으로 C:\Program Files\Adobe\IllustratorCS2)아래에 있는 Preset\Scripts 폴더에 해당 js 파일을 복사해 넣으면 설치가 됩니다. 이렇게 이 폴더에 설치한 파일은 일러스트레이터가 구동할 때 인식되어 File 메뉴의 Scripts… 항목의 하위 메뉴로 나타나게 됩니다.

3. 자바스크립트 사용하기

자바스크립트 파일을 사용하기 위해서는 File > Scripts… 메뉴에서 이미 설치된 파일을 사용해도 됩니다만, 만약 스크립트 파일을 다른 곳에 모아두었다면 Other Sripts… 항목을 선택하여 실행할 수도 있습니다.

이로써 간단히 일러스트레이터에서 자바스크립트를 설치하고 사용하는 방법에 관해 알아보았습니다. 다음 글에서는 실제 작성된 자바스크립트가 어떻게 실행되는지를 살펴보며, 이를 통해 특정 폴더의 ai 파일들을 한꺼번에 jpg 파일로 변환하는 방법에 대해 살펴보겠습니다.

20071119 :: 개별 객체의 사이즈를 일괄 조정하기(일러스트레이터)

어느 디자인실에서의 대화

  • 실장님 : A 씨 이번 패턴 꽤 이쁜데요?
  • A : 감사합니다. 허허.
  • 실장님 : 음 그런데 이 요소요소가 너무 굵직한거 같아. 이거 간격은 그대로 두고, 크기만 좀 줄여서 다시 보여 줄 수 있죠?
  • A : 네? (음 그걸 새로 하려면 흐음흐음…)
  • 실장님 : A씨는 컴퓨터로 작업하니까 금방 할 거 아녜요. 이거 다시 해서 한 번 봅시다
20071119 :: 개별 객체의 사이즈를 일괄 조정하기(일러스트레이터) 더보기

20090228 :: 일러스트레이터에서 폰트 샘플 열어보기

font preview in illustrator

일러스트레이터에서 이런 저런 도안 작업을 하면서 어떤 글꼴을 쓸까 고민하게 되는 일이 많습니다. 문구를 적어 놓고 아염없이 폰트를 바꿔보는 일도 많지만, 설치된 폰트가 수백개에 달하는 상황이라면 이런 작업도 만만치 않습니다. 디자이너에 따라서는 폰트 샘플표를 종이에 출력해 놓고 쓰는 경우도 많은데요, 이런 경우에도 ABCDEF… 만 써 있는 문구와 원하는 문구가 써 있는 경우의 느낌이 다른 경우도 많기 때문에 참고하기가 쉽지 않지요.

그래서 만든 일러스트레이터 폰트 미리보기 파일입니다.

자바스크립트를 실행하기 위해서는 illustrator cs 이상이 필요합니다. (cs2인지는 잘 모르겠네요)

다음 링크를 클릭하여 자바 스크립트 파일을 다운로드 받아 일러스트레이터가 설치된 폴더 아래에 presets/scripts 폴더에 저장합니다.
(다운로드 : http://cid-9a2a1991fc5129b7.skydrive.live.com/self.aspx/%ea%b3%b5%ec%9a%a9/preview%7C_all%7C_font.js)

해당 스크립트를 실행하면, 문구를 입력하는 창이 보입니다. (디폴트로는 soooprmx가 입력되어 있습니다.) 문구를 입력한 후 확인을 입력하면, 새로운 파일을 하나 생성하고(저장은 하지 않습니다) 입력된 문구를 사용하여, 모든 폰트로 텍스트를 생성하여 찍어 냅니다. 원하는 느낌의 문구가 보이면 복사해서 따다 붙이면 되겠지요.

그리고, 폰트를 많이 설치해서 사용하는 것은 아무래도 시스템 자원을 그만큼 많이 사용한다는 것이니, 여전히 부담스럽기는 합니다. 그런 경우에는 typograf라는 툴을 추천합니다. typograf에 대해서는 다음 기회에 한 번 설명하도록 하지요. (폰트를 많이 사용해야하는 디자이너들에게는 필수입니다. 유료이지만 결코 돈이 아깝지 않지요!)