반응형

이거 말해주면 너가 알아?

아니 그러니까 안된다니까? 그게 말처럼 그렇게 되는게 아니라고요~

디자이너 주제에 왠 코딩?

...

뭐 이런 대화가 있었던 적도 있었습니다. 

네, 저는 디자이너고 개발자들 사이에서 일을 하고 있는데요, 한 때는 저런식의 대화로 대화가 마무리 되었던 적도 있었습니다. 디자이너가 알지도 못하면서 다 되는것처럼 이야기 하냐고 무시당하기 일수 였던 적도 많이 있었죠.

사실 전 대학때 부터 개발쪽에 관심이 있었습니다. 그래서 디렉터라는 프로그램의 링고 스크립트 라든지, 플래시의 액션 스크립트나 MAX/MSP 같은 패치코드형 코딩까지 간단한 코딩이라면 코딩을 해보긴 했었죠. 아주 전문적인 코드들은 아니었지만 내가 만든 코드로 무엇인가가 동작한다는 것이 재미있더라고요.

그래서 약간은 스스로 개발자 같은 마인드를 가지고 있었는지도 모릅니다. 본업은 2D, 3D 그래픽 디자인이지만 소싯적에 코드좀 만져보았던 가락이 있었기 때문인지 머릿속으로 이렇게 이렇게 하면 될거 같은데... 하는 막연한 아이디어를 가지고 개발자들과 이야기 하면 대부분 위와 같은 대화로 마무리 되고는 했습니다. 너무 아쉬웠죠.

 

일을 하다보니 일명 노가다라고 하는 단순 반복 작업이 어느날부터 늘어나더니 급기야 인간이 할 수 있을까 싶을 정도로 늘어났던 시기가 있었습니다. 당장 수백명이 붙어서 노가다를 해야만 기한내에 끝날 것 같은 그런 일이 닥친거죠. 

 

그 때 부터였습니다.

 

제가 본격적으로 프로그래밍을 하게 된 것이 말이죠.

100명이 할 일을 몇 분 만에 끝내버린 순간 눈을 뜬겁니다. 

"이거구나."

 

뭐 저의 개발 이야기는 나중에 다시 하기로 하고요. 

어찌어찌 10년 넘게 개발을 하다보니 (사실 배운적은 없지만) 간단한 매크로에서 시작했던게 스크립트를 거쳐 이제는 c# 으로 내가 필요한 SW 를 개발하는 어엿한 개발자 같은 모습이 되어버렸습니다. 회사에서도 뭐 대놓고 개자이너로 부르기도 하고 심지어 개발팀에서 자기네 팀으로 오라고 러브콜을 보내기도 하니까요. 

그러던 와중에 회사에서 컴퓨터 화면 보호기가 동작 되지 않도록 일정 시간마다 마우스를 움직여주는 툴을 만들어 사용하던 것을 코로나 사태에 재택근무가 활성화 되며 블로그에 약간 장난처럼 '자리안비움'이라는 이름으로 포스팅을 한 것이 오늘 이런 글을 올리기까지 되었네요.

 

2020.03.09 - [DEV/c#] - 재택근무 필수 유틸 "자리안비움" - 윈도우 꺼짐 방지

 

재택근무 필수 유틸 "자리안비움" - 윈도우 꺼짐 방지

요즘 코로나 바이러스 때문인지 덕분인지 재택근무를 하는 분들이 많은데요. 막상 집에 있다 보면 사무실에 있을 때 처럼 연속해서 자리에 머무르지 못하는 경우가 종종 있습니다. 애들이나 와

diy-dev-design.tistory.com

 

제가 재택근무를 해보니 사무실에 있을때보다 은근히 자리비움으로 상태창이 변경되는게 신경이 쓰이더군요. 사실 일은 어쩌면 사무실에 있을때보다 더 열심히 하는것 같은데 (집중도 잘 되고요) 화장실을 다녀오거나 잠깐 아이 공부하는 것을 봐주고 나서 상태창이 자리비움으로 변경되어 있는 것이 뭔가 마음이 불편했습니다.

그래서 만들어 두었던 툴을 조금 수정해서 올렸는데 저와 같은 분들이 많은지 블로그 조회수가 꽤나 높게 올라가더군요.

방문해주시는 분들이 이런 저런 요구사항을 주셔서 공부도 할 겸 하나 하나 넣다 보니 그럭저럭 쓸만한 툴이 된것 같았고 뭔가 전환점이 될까 싶어 유.료.화를 선언하고 금액은 자율적으로 보낼 수 있도록 카카로뱅크로 입금할 수 있는 경로만 붙여 놓았습니다. 그래봐야 커피한잔 값 정도 되는 금액을 지정해 놨고요.

물론 정말 보내는 사람이 있을까 하기도 했고, 그래도 요즘 친구들은 저작권과 같은 지적 재산 보호에 대한 생각의 수준이 높을 수도 있겠다 싶었죠.

 

그런데 정말 송금하는 분들이 하나 둘 나타나고 ... (물론 많지는 않습니다) 소중한 돈이라는 생각이 들었습니다.

그래서 후원해 주신 분들을 생각해서 좋은 곳에 쓰리라 마음먹었습니다.

그리고 오늘 조금이지만 모인 돈에 제돈을 조금 보태서 한국실명예방제단(http://www.kfpb.org/) 에 후원금을 보내게 되어 감격스러운 마음에 글을 적어 봅니다. 디자이너로써 느끼기에 눈보다 소중한 기관이 또 어디 있겠습니까? 예전부터 회사를 통해 실명예방제단에 후원을 했었는데 후원받아 수술받은 분들의 후기를 보며 회사가 아닌 개인적으로도 후원을 해야겠다 마음을 먹었던 차에 이곳에 후원을 하기로 마음먹은 것이지요.

 

실제로 모인돈은 얼마 되지 않습니다.

그동안 모인 돈

한 15일 정도 만에 요렇게 18500 원이 모였고요, (옆에 37500 원은 그냥 *2 해보았습니다 ㅋㅋ) 방문객수에 비하면 적은 숫자이기는 하지만 사실 보내주신게 정말 신기하기도 했습니다.

그래서 제돈을 조금 보태서 30000원을 후원하기로 마음먹었습니다.

디자이너가 SW 개발해서 번 돈으로 후원하기

결재하는데 정말 속터져 죽은건 함정. 

키보드 보안 프로그램 부터 오만가지 툴을 설치하고 나서야 겨우 결재 성공,

정말 뭔 쓸데없는 보안 프로그램 및 결재 관련 프로그램이 10개는 깔렸나봐요. 다지워버려야지.

어쨌든 후원 성공!!

디자이너가 SW 개발해서 번 돈으로 후원완료

 

디자이너인 제가 프로그램을 개발해서 번 돈으로 이렇게 좋은일을 하다니 정말 감격스럽습니다.

정말 중요한 건 모인 금액은 아닌 것 같고 이 돈이 정말 돈을 내지 않아도 다운 받을 수 있는 프로그램을 가져가시면서 굳이 개발자인 저에게 비용을 보내주신 뜻 깊고 훌륭하신 우리나라의 저작권을 지켜나가는 저작권 수호자분들의 마음인 것 같습니다.

앞으로도 해당 프로그램의 비용으로 송금해주신 모든 금액을 후원 하도록 할 계획입니다. 

더욱 많은 분들이 눈을 뜰 수 있도록 블로그 손님들의 응원 부탁드립니다.

 

마치며.. 

서두에 주저리 주저리 적었습니다만, 저 역시 오늘이 있기까지 많은 일이 있었습니다. 개발자들에게 무시당하기도 했고 디자인 팀원인 제가 맨날 코드만 붙잡고 있는 것이 못마땅한 분들도 있었을 겁니다. 남들 퇴근할때 밤새워가며 코딩하기도 했고 따로 배운적이 없으니 해외 사이트나 인터넷을 찾아가며 한줄 한줄 만들어 나가며 오늘에 이른것 같습니다. 물론 앞으로 가야할 길이 더 험하고 멀겠지만 돌아보면 참으로 높은 언덕에 오른듯한 느낌이 듭니다.

자신의 분야나 상황으로 인해 하고 싶은 일이나 배우고 싶은 것 들을 포기하지 말아 주세요. 언젠가 어디에선가 멋지게 성장해 있을 내일의 당신이 오늘의 당신을 응원하고 있을 겁니다.

코로나가 하루빨리 종식 되기를 바라며 글을 마칩니다.

 

ps. 코로나가 종식되면 자리안비움 툴도 더이상 사랑받지 않겠죠? ㅜㅜ

 

 

 

 

반응형
반응형

어도비 포토샵은 자체 스크립트를 이용하여 다양한 기능을 수행할 수 있는 툴을 지원합니다. 언어는 자바 스크립트 이며 작성된 자바스크립트를 포토샵에서 실행하는 방법과 Extend Script Tool Kit 을 이용하여 실시간으로 작성한 스크립트를 포토샵으로 전송하여 실행 결과를 확인할 수도 있습니다. 

 

본 블로그를 통하여 간단한 포토샵 스크립트 교육을 진행할 예정이므로 관심 있으신 분들을 하나씩 따라오는것도 좋을 것 같습니다.

 

먼저 포토샵에서 스크립팅을 하기위하여 기본적인 환경을 살펴 보겠습니다.

 

Adobe Photoshop CS5 이상

Adobe Extend Script Tool Kit (CS5 이상의 Creative Suite 를 설치하면 자동으로 설치가 됩니다.)

 

 

 

포토샵 프로그램
Extend Script Tool Kit 실행화면

위의 그림과 같은 화면을 보실수 있는데요. 일반적인 개발 환경과 유사한 구조 입니다. 좌측 하얀 공간은 텍스트 에디팅이 가능한 창으로 실제 개발이 이루어 지는 공간입니다.

 

우측은 실행 중 값을 확인하거나 결과를 보기위한 콘솔 창이고요. 아래쪽은 잘 몰라도 간단한 개발에 큰 지장이 없는 창들 입니다.

 

중요한 것은 상단인데, 상단 좌측의 드롭다운 메뉴를 선택하면 현재 프로그램에서 연결 가능한 어도비 제품명칭이 나타납니다. 저처럼 Photoshop 을 실행중인 상태에서 드롭다운으로 포토샵을 선택하면 아래와 같이 됩니다.

 

좌상단에 해당 프로그램이 선택된 상태여야 한다.

 

초록색 링크 아이콘이 보인다면 이제 작성한 스크립트를 이용하여 포토샵에 보낼 준비가 되었다는 뜻이죠.

스크립트 동작을 테스트하기 위하여 아래와 같이 입력을 해봅시다

 

첫번째 작성해본 문장

 

그런 다음 F5 키를 누르거나 상단 메뉴바에 있는 재생 버튼을 눌러보세요.

 

 

그럼 아래와 같이 팝업창이 나타나는데요, 바로 포토샵 프로그램에서 경고 창이 나타나게 됩니다.

경고창을 통해 출력됨

 

 

이 경고창을 이용하여 간단하게 현재 작성중인 코드의 중간 값 또는 결과 값을 확인하실 수 있습니다.

 

 

값을 확인하기 위한 또다른 방법으로 자바스크립트 콘솔 창을 이용하는 방법입니다. 경고창의 경우 사용자가 [OK] 버튼을 누르기 전까지 스크립트 진행이 중단되어 흐름이 끊긴다는 특징이 있지만 자바스크립트 콘솔의 경우 값을 출력한 뒤 계속 스크립트가 진행이 되므로 좀더 유연하게 값을 확인 할 수 있습니다.

 

작성하는 방법은 아래와 같습니다.

다른 방법으로 출력하는 방법

"hello!" 부분에 출력하고 싶은 변수나 값을 적어 넣으면 아래와 같이 우측 콘솔 창에 결과가 나타나게 됩니다.

 

javascript console

첫번째 줄에 요청했던 값이 출력이 되었고 두번째 줄에는 전체 스크립트에 대한 결과가 나왔습니다. undefined 라고 하면 딱히 출력할 결과가 없다는 뜻이 됩니다.

 

 

간단한 코드 샘플을 보여드리기 위해 이미지를 하나 열었습니다. 

포토샵에서 이미지를 열어보았다. 할배검 두둥

이름도 유명하긴 바로 그 검입니다.

 

 

포토샵에는 위의 이미지가 열려있는 상태에서 스크립트를 아래와 같이 작성해 봅시다

 

var cDoc = app.activeDocument

$.writeln(cDoc.name)
$.writeln(cDoc.width)
$.writeln(cDoc.height)
$.writeln(cDoc.layers.length)

 

그런 다음 실행을 해보면 아래와 같이 우측에 값이 나오게 됩니다.

 

위의 코드에서 var 라는 것은 variable 의 약어로 변수를 의미합니다. cDoc 라는 변수를 선언한다는 뜻이고요.

cDoc 라는 변수에 "=" 우측의 값을 적용한 것이죠. 우측의 값은 바로 현재 열려 있는 창을 말합니다.

app 라는 것은 포토샵을 의미하고요.  activeDocument 는 현재 활성화된 창을 말합니다. (대소문자에 주의 하세요~)

그 다음 줄부터 cDoc 는 스크립트가 실행되던 순간 활성화 되어있는 창을 의미하게 됩니다.

 

위에서 배웠던 자바스크립트 콘솔창에 프린트를 하는 명령을 이용하여 현재 활성화된 창의 이름과, 가로크기, 세로크기, 그리고 레이어의 갯수를 출력하도록 해보았습니다.

 

이와 같이 스크립트 툴킷을 이용하여 개발을 하게되면 실행중인 값을 확인하며 개발을 할 수 있기 때문에 빠르고 정확한 코딩이 가능하게 됩니다. 또한 레퍼런스도 잘 되어 있는 편이어서 개발이 한결 수월해 지게 됩니다.

 

다음 시간에는 오브젝트 모델 뷰어를 통하여 필요한 명령어를 찾는 방법을 소개해 보겠습니다.

 

궁금하신 내용은 뎃글 부탁드립니다.

뎃글, 공감 은 블로그 작성자에게 큰 힘이 된답니다. 
도움이 되었다 생각되시면 클릭!!  부탁드려요~

 

 

쓸만한 스크립트 모음

 

2020/04/02 - [DEV/Adobe Script] - [포토샵스크립트] color fill 하기

 

[포토샵스크립트] color fill 하기

이번 강좌에서는 포토샵 스크립트를 이용하여 color fill 기능을 사용하는 방법을 알려 드리겠습니다. 포토샵에서 아주 많이 사용하는 기능이지만 일반적인 스크립트에서 구현이 되지 않아 답답하셨죠? 제가 올려..

diy-dev-design.tistory.com

 

2020/02/14 - [DEV/Adobe Script] - [포토샵스크립트] 매직완드 기능 스크립트로 실행하기

 

[포토샵스크립트] 매직완드 기능 스크립트로 실행하기

이번 포스트에서는 매직완드를 스크립트로 실행하는 방법을 설명 드리겠습니다. 포토샵의 매직 완드는 일반적인 스크립트로는 작성이 불가능하기 때문에 scriptListner 를 통하여 추출된 코드를 응용하여 개발을..

diy-dev-design.tistory.com

 

2020/01/23 - [DEV/Adobe Script] - [포토샵스크립트] 레이어 컨텐츠 영역 선택하기

 

[포토샵스크립트] 레이어 컨텐츠 영역 선택하기

오늘 소개해 드릴 스크립트는 간단한 내용이지만 일반 적인 스크립트상으로 개발이 불가능하기에 경우에 따라는 아주 유용한 스크립트가 되겠습니다. 우리는 작업 중 상당한 빈도로 포토샵 레이어의 컨텐츠 영역만..

diy-dev-design.tistory.com

2019/06/12 - [DEV/Adobe Script] - 포토샵 스크립트 레퍼런스, 도움말 사용하기

 

포토샵 스크립트 레퍼런스, 도움말 사용하기

포토샵 스크립트 역시 다른 개발언어와 마찬가지로 도움말이 있습니다. 레퍼런스라고 해야할까요. 사실 개발자라고 해도 모든 명령어와 프라퍼티, 메소드를 외우고 있을 수는 없기 때문에 잘 만들어진 레퍼런스가..

diy-dev-design.tistory.com

2019/09/03 - [DEV/Adobe Script] - [photoshop script] 포토샵 스크립트로 특정 영역 선택하기

 

[photoshop script] 포토샵 스크립트로 특정 영역 선택하기

이번 강좌에서는 스크립트를 이용하여 selection 을 만들어 보고 만들어진 selection 영역에 색상을 fill 하는 스크립트를 작성하여 보도록 하겠습니다. 단순한 기능이지만 알아두면 유용하게 사용될 수 있답니다...

diy-dev-design.tistory.com

2019/09/19 - [DEV/Adobe Script] - [포토샵스크립트] 현재 레이어 이미지를 중앙으로 이동시키기

 

[포토샵스크립트] 현재 레이어 이미지를 중앙으로 이동시키기

안녕하세요. 오늘은 선택된 레이어를 화면의 중앙으로 이동시키는 포토샵 스크립트를 작성해 보겠습니다. 와이프가 한동안 쇼핑몰 상세페이지 디자인 작업을 재택근무 형식으로 했었는데요. 옆에서 작업하는 것을..

diy-dev-design.tistory.com

2019/09/20 - [DEV/Adobe Script] - [포토샵스크립트] 스크립트 단축키로 실행하기

 

[포토샵스크립트] 스크립트 단축키로 실행하기

안녕하세요. 오늘은 자신이 작성하였거나 웹에서 다운로드 받은 스크립트를 간단하고 빠르게 실행하는 방법을 알려드리겠습니다. 우선 스크립트를 실행하는 방법은 몇가지가 있는데 다음과 같습니다. Extend Scrip..

diy-dev-design.tistory.com

2019/12/04 - [DEV/Adobe Script] - [포토샵스크립트] Instagram 용 파노라마 사진 자르기

 

[포토샵스크립트] Instagram 용 파노라마 사진 자르기

Instagram, 요즘 가장 핫한 SNS 가 아닐까 싶습니다. 지하철에서 무심코 주변을 보니 눈에 보이는 핸드폰 화면 마다 Instagram 화면이 보이는 것을 보고 깜짝 놀랐습니다. 난 안하는데... 어쨌든 Instagram 계정을..

diy-dev-design.tistory.com

2019/11/14 - [DEV/Adobe Script] - [포토샵스크립트] 스크립트로 레이어 생성, 이동, 복사 하기

 

[포토샵스크립트] 스크립트로 레이어 생성, 이동, 복사 하기

포토샵의 가장 중요한 핵심 기능중의 하나가 레이어라는 구조일 것입니다. 이미지를 계층적으로 쌓아 올리고 각각의 이미지간 효과를 적용하거나 투명도등을 조절하여 완성된 하나의 이미지를 만들어 내는 것이죠...

diy-dev-design.tistory.com

2019/12/13 - [DEV/Adobe Script] - [포토샵스크립트] PSD 모든 레이어 자동 저장, 하위 폴더 포함 (레이어 크기로 이미지 저장)

 

[포토샵스크립트] PSD 모든 레이어 자동 저장, 하위 폴더 포함 (레이어 크기로 이미지 저장)

안녕하세요. 제가 포토샵 스크립트를 이용하여 PSD 파일내의 모든 레이어를 자동으로 하위폴더 구조를 유지하며 저장할 수 있는 스크립트를 만들어서 올렸었는데요. 바로 아래 링크에서요. https://diy-dev-design..

diy-dev-design.tistory.com

 

반응형

+ Recent posts