20090717 :: 파이어폭스 3.5.1 긴급 업데이트

파이어폭스 3.5가 릴리즈 된 지 얼마 되지 않아 마이너 업데이트가 이루어졌습니다. 오늘 자동 업데이트 기능을 통해 업데이트가 가능했는데요. 이 번 버전에서 개선된 것은 파이어폭스 3.5의 버그로 인해 프로그램 시작 시 꽤 많은 시간이 지연되는 부분을 수정했다고 합니다. 보안 목적으로 프로그램이 시작될 때 난수 발생 절차를 거치는데요, 이 부분이 디스크에 저장되어 있는 캐시가 많으면 많을수록 오랜 시간동안 지연을 시키는 원인이 되었다고 합니다. 심한 경우에는 5분 이상 딜레이가 발생했다고 하네요. 해당 버그는 3.5 정식 배포 이전에 발견되었다고 하고, 그래서 아주 급히 업데이트를 시행한 것으로 보입니다. 아무래도 브라우저들이 저마다 빠른 속도를 내세우며 경쟁하는 요즘 상황이 많이 자극이 된 듯 하네요.

파이어폭스 3.5.1로 업데이트를 하고나서의 런칭 시간은 기분탓인지는 몰라도 아주 빨라진 느낌입니다. 단순히 기분 탓이라기 보다는 실제로 구글 툴바가 설치된 인터넷 익스플로러 7 보다도 더 빨리 뜨는 군요.

참고로 저의 파이어폭스 업데이트 시마다 중점 사항이 되는 구글 기어스는 업데이트 이후 Nightly Tester Tool을 이용해 강제 설치하면 정상적으로 작동됩니다. ㅋㅋ

스트림라인 간단 튜토리얼

0. Adobe Streamline [OFFICIAL PAGE]

비트맵 이미지의 색상 경계를 추적하여 벡터 데이터를 생성해내는 프로그램. 쉽게 말해서 사진이나 스캔 받은 그림을 일러스트레이터 패스 데이터로 따내는 기능을 하는 프로그램이다. 일러스트레이터 CS2가 출시되면서 이는 Live Trace라는 기능으로 일러스트레이터로 흡수 통합 되었고, 이후 별도의 어플리케이션으로서의 어도비 스트림라인은 개발이 중단된 상태다.

1. Illustrator 의 Auto Trace

원래 일러스트레이터는 자동추적도구(Auto Trace)를 툴바에 갖고 있었다. 그런데 이 자동 추적 기능은 쉽게 말해서 포토샵의 마술봉 툴이 하는 것 처럼 비트맵 이미지에서 연속된 같은 색상들을 픽셀로 선택하고 그렇게 만들어진 ‘포토샵 선택영역’을 패스로 전환하는 데에 그쳤다. 따라서 아무리 사람눈에 잘 스캔된 이미지라 하더라도 자동추적 기능을 사용하여 복잡한 그림을 패스로 따내는 것은 사용자로 하여금 굉장히 화가 치미는 경험을 제공했던 것이다.

2. Streamline Again

그에 비해 스트림라인은 각각의 색상의 경계값과 허용치를 세부적으로 세팅하여 경계지점에서 주어진 밀도 만큼의 기준점을 생성하고 그 각각의 기준점에서 등거리 지점을 추출하고 연결하여 패스를 만드는 방식이라 한 번에 모든 경계를 찾을 수 있고 스캔 상태가 양호하거나, 그림이 충분히 큰 경우, 너무 심하게 깨지지 않은 JPEG 이미지에 대해서는 만족 가능할 퀄리티의 결과물을 제공한다. 뿐만아니라 스트림라인은 일러스트레이터의 패스 데이터를 그대로 생성해내므로 결과를 복사-붙여넣기를 통해 곧장 일러스트레이터로 옮기는 것도 가능하다.

3. Take it

그렇다면 실제로 사용을 통해 익혀보자. 스트림라인은 굉장히 단순한 구조로 이루어져 있고 크기도 작은 프로그램이다. 그러나 일종의 자동화 툴인 관계로 사용법 자체가 굉장히 낯설게 느껴진다. (네이버 지식 즐~의 대부분의 질문은 스트림라인을 어떻게 설치하는 가에 관한 것이었다)

우선 맨 처음 해야할 것은 변환할 비트맵 이미지를 준비하는 것.
그림을 그려서 스캔 받는 것은 굉장히 귀찮으므로, 인터넷상에서 구해다보자.

구글 검색으로 키스 해링의 그림을 한 번 찾아보는 것은 어떨까.

결국 인터넷에서 다운 받은 이미지는 아래와 같다. (실제 사이즈 그대로 올린다)

이 그림을 확대해보자. 확대하여 곡률이 커지고 완만할수록 스트림라인은 당신을 좋아할 것이다. 주저말고 포토샵을 실행하라. (물론 크기조절과 밝기/대비조절을 할 수 있는 이미지 툴은 어떤 것이든 상관없다. 나도 이런 일로 포토샵을 쓰지는 않는다. 간단한 이미지의 크기 변경, 밝기/대비 조절, 텍스트 삽입과 같은 아주 간단한 작업은IrfanviewFastStone Image Viewer를 쓰는 것을 추천한다. 는 설치파일이 1MB 이내이며, FastStone의 경우에는 덩치는 약간 크지만 ACDSee나 알씨보다는 이백삼십칠만배 정도 낫다고 생각된다.)

이미지 사이즈를 조정해보자

적당히 큰 사이즈를 넣어주자. 너무 크면 곤란하고 대략 몇 배나 커지면 좋을까 싶은 크기.(정말로 알 수 없는 애매한 설명이 아닌가!!) 일반적으로 고만고만한 웹상의 이미지들은 4배 정도로 키워주면 될 듯 하다.

색상간의 경계가 분명하면 분명할수록 육안으로 보아도 깨끗한 외곽선이 드러나고, 그래야만 스트림라인에서 선이 잘못 나갈 확률도 줄일 수 있다. 이것은 sharpen 계열보다는 레벨조절이나 밝기/대비 조절을 통해 손쉽게 할 수 있다.

오리지널의 레벨상태는 다음과 같았는데

세밀한 막대 그래프 아래의 삼각형 슬라이더들을 이리 저리 움직여서 깨끗한 그림을 탈바꿈 시키자

그리고 이 이미지를 저장한다. 단 저장은 jpg 포맷이 아니라 pcx나 tiff 포맷을 사용한다.(☆)

이제 비로소 스트림라인을 구동할 타이밍이 되었다.

아까 저장한 TIF 파일을 불러온다. 굉장히 크기가 클 것인데, 일러스트레이터와 마찬가지로
Ctrl+Alt+Space 키를 몇 번 눌러서 축소를 시켜 볼 수가 있다.
(그림이 실제로 축소되는 것은 아니고 미리보기만 축소된다)

먼저 converting에 관련한 세팅을 해보도록하자.

conversion 세팅창에서는 이른바 ‘정확도’에 관련한 설정을 할 수 있다.
그러니까 얼마나 자주 포인트를 만들 것인가. 얼마나 원래 그림에 밀착하는 패스를 만들 것인가하는 것을 설정해 주는 부분인데, 결론인 즉슨, 거친 그림이 나오는가, 매끈한 그림이 나오는가, 심지어는 매끈하다 못해 뭉뚱그려져버리는 그림이 나오는가가 이 부분에 달려 있는 것이다. 이부분에 대해서는 정답이 없다. 이미지 상태나 원하는 결과에 따라 달라질 수 있으므로 이것 저것 세팅값을 바꿔가면서 시행착오를 겪어보는 수 밖에 없다. 다만 그림에서 색상을 노랗게 표시한 부분을 주로 만져주면 된다는 안내만 해드리겠다.

다음은 칼라 흑백 설정인데. 이 그림은 흰색, 검은색, 붉은색의 3칼라로 이루어져 있으므로 설정을 해주어야 한다. (스트림라인의 기본 설정값은 흑백이다. 그야말로 완전히 흰점과 완전히 검은점만 인정해주겠다는 것이다)

여기서는 원본 이미지의 상태가 그런대로 괜찮아서 다행이다. 일단 Limited Color를 선택하고 컬러수를 3으로 제한한다.
그럼 끝난다.

모든 설정이 끝났으면 Ctrl-R을 눌러 컨버팅을 시작한다. 이미지 크기나 상태, 색상수, 시스템사양에 따라 다르지만 생각보다 쉽게 뭔가 빨리 지나간다.

Ctrl-A를 눌러 전체 선택을 하면 뭔가 일러스트레이터로 패스를 선택한 것 같은 기분이 든다.
이것을 복사-붙여넣기로 일러스트레이터로 옮길 수도 있지만, 이 글에서는 아직 일러스트레이터를 구동한 적이 없으므로 일단은 저장을 한다. 이미지를 저장하는 것이 아니라, 패스를 저장할 것이기 때문에 Save arts as… 를 선택하여 일러스트레이터 포맷으로 저장한다. 이때 원본 비트맵 이미지는 함께 저장되지 않는다.

그리고 아래 마지막 이미지는 여태의 결과물을 일러스트레이터에서 불려들여 놓은 것을 캡쳐한 그림이다.

정말 쉽고 간단하지 않은가!!

설정만 잘하면 아래와 같은 ‘그려서는 엄두도 못낼’ 이미지도 만들 수가 있었다.
이렇게 훌륭한 기능이 있는 프로그램의 존재를 알려주신 마롭에게 완전 감사 드리며 오늘의 강좌를 마친다.

Pulished 20060416 by sooop for studio somuch.

☆ 포토샵이나 다른 이미지 관련 프로그램에서 BLUR 효과를 사용해서 그림을 아주 약간 흐리게 만든다음 최고화질의 jpg로 저장하면 용량이 약간 줄어들어 있는 것을 확인할 수 있다. jpg는 바로 이런 식으로 ‘이색상간의 경계를 뭉개는 방식’을 통해 이미지 화질을 훼손하게 된다. 그런 이유로 스트림라인은 jpg 파일을 불러오지 않는 것 같다.

20090715 :: Firefox 3.5에서도 G메일 오프라인 모드를 사용하고 싶어요!

파이어폭스 3.5가 매우 갑작스럽게 정식 릴리즈 되었습니다. 새로운 버전이 정식으로 공개될 때 마다 파이어폭스는 업데이트하라는 창을 자동으로 띄우거나 백그라운드에서 미리 업데이트 설치 파일을 다운로드 받아서 오매불망 사용자의 업데이트 허가를 기다립니다. (아, 물론 이는 매우 바람직한 업데이트 방법입니다!) 그런데, 파이어폭스의 새 버전, 그것도 대단한 성능향상과 더불어 너무나 멋진 기능들이 즐비한 3.5 버전의 정식 버전을 설치하기에는 조금 망설임이 생기는 것도 사실입니다. 왜냐하면 즐겨 사용하는 확장 기능들이 새 버전의 브라우저와 호환이 되지 않을 수도 있기 때문이지요. 그럼 몇 일 간은 확장 기능의 새 버전이 나올 때까지 눈물을 머금고 파이어폭스를 사용하거나 구글 크롬, 오페라 등의 다른 브라우저를 잠깐씩 쓰게 됩니다. (물론 그것이 이후의 파이어폭스 차기 버전이 나올 때까지 지속되는 비극적인 상황도 더러 있기는 합니다.)

물론 그러한 경우를 대비하여 Nightly Tester Tool 이라는 걸출한 확장기능이 존지하기는 하지요. 예전에 이 확장을 몰랐을 때는 확장 기능 파일을 열어서 버저 호환 범위를 살짝 속여 설치하기도 했습니다만, 이 확장이 있으면 브라우저 업그레이드 시에 호환성을 강제로 부여해서 사용할 수 있게 해 줍니다. 제가 그리 많은 확장 기능을 사용하는 것은 아니어서 이 Nightly Tester Tool 만으로도 불편함 없이 인터넷을 즐길 수 있게 되었지만, 단 한 가지 아쉬운 점이 있다면 바로 G메일, 구글 문서, 구글 캘린더를 오프라인에서도 사용할 수 있게 하는 궁극의 확장인 Google Gears가 새로 출시된 파이어폭스와 호환되지 않는 다는 사실이었습니다.

그렇게 몇 일을 눈물로 밤을 새지는 않았지만 아무튼 구글 기어를 그리워하다가 오늘 뜻 밖의 발견을 했네요. 파이어폭스 3.5 버전에서도 오프라인에서 Gmail 과 같은 구글 도구들을 사용할 수 있는 길이 열린 것입니다!

그것은 바로 ‘Google Gears 재설치’입니다. 지금 구글 기어 홈페이지에서 내려 받을 수 있는 버전은 0.5.29 입니다. (제 경우에는 0.5.23 버전이 설치되어 있었습니다.) 우습게도 구글 업데이터에도 구글 기어의 업데이트 가능 사실을 알려 주거나 자동으로 업데이트 하지 않는 점은 좀 그렇더군요. 아무래도 구글 크롬에는 기어가 내장되어 있고, 크롬 자체의 자동 업데이트 기능에 의해 업데이트 되는 것을 보니 구글이 크롬을 밀기로 독하게 마음 먹으면서 어느 정도 파이어폭스를 버린 것 같습니다. (파이어폭스용 구글 툴바의 경우에는 이미 포기한 것 같은데, 파이어폭스 자체의 사용성이 많이 향상되어서 지금은 구글 툴바가 없어도 충분히 잘 사용할 수 있습니다.)

그리하여 구글 기어를 언인스톨한 후 홈페이지에서 다시 내려 받아 설치를 하였습니다. 재설치가 끝나고 나니 아래와 같이 홈페이지 상에서 버전을 알려주더군요. (기왕이면 설치하기 전에도 현재 버전을 좀 알려주거나, ‘설치’가 아닌 ‘업데이트’로 표시해주면 더욱 좋았을 것을…)

그리하여 저는 다시 파이어폭스로 각종 구글 앱스의 오프라인 모드를 사용할 수 있게 되었으며, 오늘은 왠지 두 다리를 쭉 뻗고 잘 수 있을 듯 하네요~  기사, 파이어폭스 사용자 중에서도 오프라인 모드 기능을 요긴하게 쓰시는 분이 많은 지는 잘 모르겠습니다. 그래서 왠지 자랑스럽게 포스팅을 하면서도 조금 뻘쭘하네요. 참고로 워드프레스에서 제공하는 ‘터보 기어’ 기능은 오프라인 모드가 아니라 어드민 기능 중 일부 ajax 기능을 구글 기어를 통해 오프라인 저장소에 저장했다가 나중에 한 번에 서버로 전송하는 기능으로, 오프라인 모드 접속과는 무관하다고 하는 군요. (앗, 워드 프레스 사용자도 그러고보니 드물군요 ㅠㅠ)

20090713 :: 근황

사실, 개인적인 이야기는 블로그에 쓰지 않고 나의 지인들의 대부분은 싸이를 하지 블로그 같은 걸 운영하는 사람도 없어고, 한다고 한 들 내가 블로그를 한다는 사실을 알거나 거기까지는 알고 있지만 실제로 내 블로그를 오는 사람은 없어서 근황을 알릴 필요는 없지만 그래도.

요즘 몸이 좀 안 좋습니다. 몇 주 전부터 조금의 어지럼증이 있었는데, 작년부터 혈압이 조금씩 떨어져서 그런가 보다 했는데, 딱 일주일 전에는 직선으로 걷기가 힘들 정도로 현기증이 심해지더군요. 동네 의원을 갔더니 조금 큰 데 가보는 게 좋겠다고 하셔서 신림역에서 그리 멀지 않은 곳에 있는 병원을 들렀습니다. 혈압은 그리 많이 떨어지지는 않아서 이 정도로는 현기증이 날 정도가 아니라는 말을 듣고 조금 걱정이 되었습니다만, 과로나 스트레스로 인해서 전정기관에 문제가 있는 것 같다고 하시더군요. 입원 이야기를 해서 설마 또 수술(?)이라는 생각에 순간 만감이 교차했습니다. (제가 들고 있는 보험중에 수술 받으면 돈이 좀 나오는 보험이 있어서… 지난 번에 수술 한 번 받았을 때는 입원비와 수술비를 합한 것 보다 짭짤하게 나왔거든요)

결국 회사에는 병가를 내고 이틀 반 정도를 집에서 쉬었습니다. 처방은 소염제와 수면제. 하루 24시간 중에 20시간 씩 잠을 잤습니다. 자다가 덥거나 쉬 마려워서 깨면 간단하게 요기를 하고 약을 먹고 이내 잠에  빠지는 사이클로 하루 하루를 보냈는데, 이게 쉬는게 아니고 약을 먹고 계속 잠을 자는 것이어서 많이 힘들더군요. 이틀 반이 지나고 진행하는 프로젝트 검수가 있어서 어렵게 어렵게 사이트로 출근했더니, 밑에 직원이 얼굴이 헬쓱해졌다고 걱정합니다. 먹고 자고 먹고 잤는데 살이 빠지다니 이것이 말로만 듣던 기적의 다이어트로구나!

그런데 금요일 오후에 잠시 출근한 곳이 좀 멀어서 버스로 한 시간 반 정도 걸리는 곳인데, 이곳을 다녀오느라 도합 세 시간 가량을 버스를 탔더니, 버스를 탄 대부분의 시간은 약기운에 잠을 잔 것이 전부이지만 너무 힘들고 집에 돌아와서는 또 극심한 어지럼증에 잠을 이루지 못했습니다. 결국 주말 이틀동안 다시 먹고 자고의 사이클로 진정기를 가졌네요.

누워서 잠깐 잠깐 노트북으로 블로깅을 하긴 했지만, 힘드네요. 잠시 창밖으로 들리는 소리에 잠을 깼다가 몇 자 끄적이고 다시 잘 준비나 해야하 듯 하네요.

내일부터는 다시 빡빡한 일정이 기다리고 있는데, 그냥 확 쓰러지고 싶은 심정입니다.

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 파일로 변환하는 방법에 대해 살펴보겠습니다.