개발하는 디자이너의 DIY 일상

포토샵 스크립트 역시 다른 개발언어와 마찬가지로 도움말이 있습니다. 레퍼런스라고 해야할까요. 사실 개발자라고 해도 모든 명령어와 프라퍼티, 메소드를 외우고 있을 수는 없기 때문에 잘 만들어진 레퍼런스가 있으면 큰 도움이 됩니다. 레퍼런스가 잘만들어져있는 스크립트 언어로는 대표적으로 3DS MAXscript 가 있을 수 있겠습니다. 정의와 설명, 사용예시까지 나와 있어 초보 개발자 분들께 아주 큰 도움이 되죠. 포토샵 스크립트에서는 Extend Script Tool kit 에서 제공하는 Object Model Viewer 라는 툴을 제공합니다. 포토샵, 일러스트 등의 어도비에서 제공하는 스크립트의 명령어와 각각 클래스의 메소드, 프라퍼티를 알기 쉽게 제공하는데요. 오늘은 해당 툴을 사용하는 방법을 알아 보겠습니다.

우선 Extend Script Tool Kit 을 켜신다음 F1 키를 누르거나 help --> Object Model Viewer 를 선택하시면 아래와 같은 창이 표시됩니다.

상단에 검색을 위한 입력칸이 있고요. 우측 Browser 라고 보이는 부분 하단으로 보여지는 부분이 실제 사용되는 부분입니다. Core Java Script 라고 표시된 부분을 눌러보시면 드롭다운 메뉴가 표시가 되며 여기서 도움을 얻을 언어를 선택하면 됩니다. 기본적으로 자바 스크립트에 대한 레퍼런스가 선택이 되어 있습니다.

드롭다운을 열어보면 현재 제공하고 있는 언어의 목록이 있는데요. 여기서 포토샵을 선택하면 되겠습니다.

중간에 세개의 하얀 박스가 있는데요.

맨 위에는 개체를 찾아 선택하는 부분

중간은 해당 개체가 클래스인지, 메소드 인지 어떤 정보인지를 알려주는 부분이고요

아래쪽은 위에서 선택된 개체의 메소드와 프라퍼티를 나열해주고 있습니다.

개체를 선택한뒤 개체의 메소드나 프라퍼티를 아래쪽에서 선택하면 우측에 선택한 개체에 대한 설명이 표시가 됩니다.

앞에서 공부 했던 도큐먼트의 크기를 찾는 과정에서 사용했던 width 라는 단어는 아래 보시는 바와 같이 설명이 표시가 됩니다. 데이터 타입으로 unitValue 라고 되어 있는데요. 현재 사용자가 설정한 유닛을 기준으로 값이 리턴이 되게 됩니다.

 하단의 하얀 박스에는 그 외에도 엄청나게 많은 항목이 존재하는데 도큐먼트라는 개체가 갖는 다양한 기능이나 속성을 이용할 수 있습니다. 대표적인 예로 저장하기, 닫기, 컬러모드를 변경한다거나 선택영역 정보를 확인한다던가 하는 작업을 할 수 있으며 하얀 부분에 사용할 수 있는 개체와 사용방법이 표시됩니다.

예를 들어 도큐먼트를 닫는 액션을 할건데요. 현재 작업한 것을 저장하지 않고 그냥 닫을 겁니다. 

레퍼런스 기준으로 찾아보면 하단에 close 부분이 되겠는데요. 아래와 같이 설명이 나옵니다.

측 Document 개체 뒤에 .close 라고 적어주고요. 괄호안에 저장 옵션을 설정해 주어야 합니다. 이미지가 수정되면 닫기 작업을 할때 포토샵이 저장할 것인지 물어보죠? 같은거라고 보시면 됩니다. 그런데 우리는 저장 옵션을 모르기 때문에 역시 찾아봐야 합니다.

저 파란섹 SaveOptionsType 부분을 클릭하면 아래와 같이 창이 변경됩니다.

좌측선택 창이 변경이 되었고 우측 상단에 SaveOptionsType 이라는 개체가 표시되고 있죠? 

다시 좌측 아래를 보면 세가지 옵션이 있습니다.

대층 읽어보면 

• 변경사항을 저장하지 않고 
• 변경사항을 저장할지 물어보고
• 변경사항을 저장하고

정도가 되겠습니다.

그중 DONOTSAVECHANGES (변경사항을 저장하지 않고)  를 선택해보면 아래와 같이 우측에 표시가 됩니다.

실제로 작성해야 하는 최종 상태는 우측과 같은 형태입니다.

var imgPath = "D:\\images\\audi-a6-allroad-07.jpg"
var imgFile = File(imgPath)

var cDoc = app.open(imgFile)

cDoc.close (SaveOptionsType.DONOTSAVECHANGES)

코드로 작성해보면 위와 같은 형태가 되는거죠. 

열자마자 닫는 의미 없는 코드이기는 하지만 중간에 어떤 작업을 넣을 수 있겠습니다. 

물론 저렇게 저장하지 않고 닫을꺼면 의미는 없겠습니다. 

var imgPath = "D:\\images\\audi-a6-allroad-07.jpg"
var imgFile = File(imgPath)

var cDoc = app.open(imgFile)

// 뭔가 사용자가 필요한 코드 수행

cDoc.close (SaveOptionsType.SAVECHANGES)

요렇게 하면 이미지를 열어서 필요한 자동화 액션을 하고 저장하면서 닫는 코드가 되겠습니다.

참고로 어도비에서 제공하는 PDF로 되어있는 레퍼런스도 있으니 사용해 보시기 바랍니다. 상세하게 나와있고 예제로 작성된 스크립트도 약간 있으므로 처음 배우시는 분들께는 도움이 되실 수 있을 것으로 생각됩니다.

https://www.adobe.com/devnet/photoshop/scripting.html

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

공감 꾸욱~ 부탁드립니다.

이번 포스트에서는 포토샵 스크립트를 이용하여 이미지의 다양한 정보를 확인하는 방법을 소개할까 합니다. 이미지 정보 확인과 동시에 몇가지 쓰임세 있는 기능도 소개할 예정입니다. 

이미지의 정보를 확인하는 것은 다양한 의미에서 중요한 작업입니다. 액션과 다르게 스크립트는 판단이라는 로직을 적용할 수 있기 때문에 기준이 되는 정보는 매우 중요한 것이 됩니다.

오늘 확인할 정보/기능은 아래와 같습니다.

• 포토샵으로 이미지 열기
• 이미지의 가로 사이즈 확인하기
• 이미지의 세로 사이즈 확인하기
• 이미지의 크기를 판단하여 리사이즈 하기
• PSD 파일인 경우 레이어의 개수 확인하기
• 각 레이어의 이름 출력하기

입니다.

먼저 앞서 진행했던 강좌의 내용을 이해하고 있는 것으로 보고 바로 진행하겠습니다.

스크립트 툴킷과 포토샵을 실행한뒤 에디터 창에 아래와 같이 입력합니다.

var imgPath = "D:\\images\\audi-a6-allroad-07.jpg"
var imgFile = File(imgPath)
app.open(imgFile)

첫번째 줄에서는 이미지의 경로를 적어줍니다. 본인의 이미지파일의 경로를 이용하여 테스트 하시면 됩니다. 중간에 \ 가 두개씩 있는 것을 주의 하세요. 경로와 경로를 구분하는 문자를 두개씩 적어 주어야 오류가 생기지 않습니다.

두번째 줄에서는 첫번째 줄의 경로를 이용하여 해당 경로가 파일임을 선언해 줍니다.

그리고 세번째 줄에서는 포토샵에서 실제 해당 파일을 여는 동작을 하게 됩니다.

실행해 보면 아래와 같이 이미지가 열립니다. (제가 좋아하는 아우디 네요)

이제 이미지의 크기 정보를 확인해 보겠습니다.

열려있던 이미지를 닫아 주시고 아래와 같이 작성한 뒤 다시 실행해봅니다.

var imgPath = "D:\\images\\audi-a6-allroad-07.jpg"
var imgFile = File(imgPath)

var cDoc = app.open(imgFile)

var imgWidth = cDoc.width
var imgHeight = cDoc.height

alert("image Width:" + imgWidth + " ,image Height:" + imgHeight)

아까보다 줄이 조금 늘었는데요.

이미지를 열면서 동시에 cDoc 라는 변수에 현재 열린 이미지를 저장합니다.

그리고 imgHeight, imgWidth 라는 변수를 만들어 cDoc.width 라는 속성을 이용하여 값을 설정 합니다.

앞선 강의에서 진행한 것처럼 alert 라는 경로창을 이용하여 알아낸 정보를 출력해보는 코드입니다.

출력해보면 아래와 같은 팝업이 뜨게 됩니다.

이미지의 가로 크기가 1600 px, 이미지의 세로 크기가 1066 px 라는 것을 알수 있습니다.

저 이미지를 티스토리에 붙여 넣기 위하여 적당한 사이즈로 리사이즈를 해 볼 건데요.

이미지가 1500px 이 넘으면 1500px 로 리사이즈 하는 코드를 추가해 보겠습니다.

var imgPath = "D:\\images\\audi-a6-allroad-07.jpg"
var imgFile = File(imgPath)

var cDoc = app.open(imgFile)

var imgWidth = cDoc.width
var imgHeight = cDoc.height

alert("image Width:" + imgWidth + " ,image Height:" + imgHeight)

if (imgWidth > 1500)
{
	cDoc.resizeImage(1500)
}

아래 세줄이 늘었죠?

if 문으 이용하여 크기를 판단하도록 해봤습니다.

원본 크기가 1600px 였으므로 약간 작아졌을 것입니다.

그럼 요렇게 가로 1500px 인 이미지가 만들어 지게 됩니다.

이번에는 PSD 파일을 열어보도록 하겠습니다.

위에 작성한 코드와 동일한데요. 파일의 경로와 이름만 바뀌었습니다.

var imgPath = "D:\\01_works\\test\\layerTest.psd"
var imgFile = File(imgPath)

var cDoc = app.open(imgFile)

var imgWidth = cDoc.width
var imgHeight = cDoc.height

alert("image Width:" + imgWidth + " ,image Height:" + imgHeight)

요런 이미지 입니다.

이제 현재 PSD 파일이 가지고 있는 레이어의 갯수를 알아보고 첫번째 레이어의 이름을 출력해 보겠습니다.

var imgPath = "D:\\01_works\\test\\layerTest.psd"
var imgFile = File(imgPath)

var cDoc = app.open(imgFile)

var imgWidth = cDoc.width
var imgHeight = cDoc.height

alert("image Width:" + imgWidth + " ,image Height:" + imgHeight)

var layerCount = cDoc.layers.length
var firstLayer = cDoc.layers[0]

$.writeln(layerCount)
$.writeln(firstLayer.name)

alert 아래 부분에 코드가 좀 추가되었죠?

var 라는 단어로 그뒤에 오는 변수를 선언한다는 것은 이미 아셨을 것이고 그뒤가 중요합니다.

cDoc 는 현재 도큐먼트를 말하는데요. 뒤에 .layer.length 라는 코드가 들어갔습니다. cDoc.layers 는 cDoc 에 들어있는 모든 레이어를 말합니다. cDoc 에 들어있는 모든 레이어 뒤에 .length 가 있으므로 cDoc 에 있는 모든 layer 의 갯수를 구하는 코드가 됩니다.

그 아래로는 firstLayer 라는 변수를 만들어 준뒤 전체 레이어 중 0 번째 레이어를 설정해 줍니다. 참고로 자바스크립트에서는 배열의 첫번째 값이 0 번째 입니다.  

그 아래 줄에서 보면 첫번째 레이어의 이름을 $.writeln 을 통해 출력하도록 하고 있죠.

$.writeln 을 통해 출력된 값은 아래와 같습니다.

처음 보여지는 4는 전체 레이어의 갯수 입니다.

두번째 줄의 Layer1 은 첫번째 레이어의 이름이죠. 위에 포토샵 화면을 보시면 이해가 되실거에요.

오늘 진행하기로 했던 강좌의 내용에 보면 전체 레이어의 이름을 출력하는 부분이 있었습니다.

일반적인 코딩 시 반복적으로 무엇인가를 할때 사용하는 명령어는 for 입니다.

여기서도 역시 for 를 이용하여 전체 레이어의 이름을 확인해 보겠습니다.

아래 코드를 보시죠.

var imgPath = "D:\\01_works\\test\\layerTest.psd"
var imgFile = File(imgPath)

var cDoc = app.open(imgFile)

var imgWidth = cDoc.width
var imgHeight = cDoc.height

alert("image Width:" + imgWidth + " ,image Height:" + imgHeight)

var layerCount = cDoc.layers.length
var firstLayer = cDoc.layers[0]

$.writeln(layerCount)

for ( i=0; i < layerCount; i++)
{
    $.writeln(cDoc.layers[i].name)
}

아래 쪽에 for 라는 문장과 함께 세줄이 추가 되었습니다.

for 안쪽에 ( ) 로 표시된 부분이 반복이 이루어 지는 조건 입니다. i 라는 변수를 설정하고 시작 값은 0 으로 하겠다는 의미이며 i 라는 값이 아까 구했던 레이어의 갯수보다 작은동안 반복이 되는 것이죠. 그위에 보면 i++ 라는 부분이 있는데요. 매 턴 마다 i 라는 값에 1을 더하겠다는 뜻이 됩니다.

그 아래 { } 로 묶인 부분이 실제 매턴 마다 이루어지는 코드 입니다. i 라는 값은 0 ~ layerCount 사이에서 1 씩 증가하면서 계속 커질겁니다.

다시 말하면 도큐먼트가 가지고 있는 전체 레이어를 대상으로 0 번째 레이어 부터 마지막 레이어까지 이름을 출력하는 기능을 수행합니다.

출력된 결과는 아래와 같습니다.

첫줄에 4는 전체 레이어 갯수고요. 그 아래 4줄의 내용은 각 레이어의 이름입니다. 

맨마지막에 Result:undefined 는 전체 스크립트 실행 뒤에 별다른 결과가 없다는 의미 입니다. 신경 안쓰셔도 됩니다.

이렇게 해서 포토샵의 레이어를 탐색하는 방법도 가르쳐 드렸습니다.

레이어가 100 개든 1000 개든 이런식으로 코딩을 하면 시간과의 싸움에서 이기게 됩니다.

나중에 레이어의 정보를 이용하여 컨트롤 하는 것도 올리도록 하겠습니다.

궁금하신 부분은 언제든지 뎃글로 문의 주세요~

강좌가 괜찮으셨다면 공감 부탁드립니다.~

특정 레이어의 컨텐츠 영역을 스크립트를 이용하여 선택하고 싶다면

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

스크립트 작성 중 도움말이 필요하셨다면?

https://diy-dev-design.tistory.com/10

포토샵으로 셀렉션 영역 설정하기

https://diy-dev-design.tistory.com/37

본 문서의 모든 내용은 제 개인적인 의견 지식을 기반으로 하므로 실제 사전적 의미 및 전문 개발자의 의견 등과 차이가 있을 수 있으나 개발직군이 아닌 업무 보조용으로 개발을 학습하기에는 충분하므로 그냥 편하게 보시면 됩니다. 

코딩이란?

컴퓨터에게 무엇인가를 지시하기 위하여 글을 작성하는 행위그림을 그려온 디자이너에게 코딩은 다소 생소한 개념으로 쉽게 접근하기 어려울 수 있습니다. 사실 개발자가 포토샵이나 일러스트를 배우는 것보다 어쩌면 훨씬 쉬운 일일수 있습니다. 겁내지 말고 코딩에 도전하면됩니다.

코드는 어떻게 구성이 되는가?

코딩에는 여러가지 규칙이 있고 정의가 있지만 다음 사항만 알면 코딩을 할 수 있습니다.

코드의 흐름 : 코드는 항상 위에서 아래로 진행이 됩니다. 아래에서 위로 가는 코드는 없으므로 예외 없이 글을 읽거나 쓰는 것처럼 위에서부터 한줄 한줄 읽거나 써내려가면 됩니다.

변수 : 어떤 값이 저장되는 공간 

함수 : 특정한 기능 수행을 위하여 저장해 놓은 모듈

판단 : 컴퓨터는 사람처럼 생각할 수 없기 때문에 주어진 조건을 이용하여 판단 할 수 있도록 해주어야 합니다.

반복 : 코딩을 하는 궁극적인 목적은 많은 양을 빠르게 처리하는 데 있습니다. 당연히 반복해서 무엇인가 행위가 이뤄질 수 있도록 해줘야 겠습니다.

코드의 흐름

코드는 항상 위에서 아래로 읽어 내려갑니다.함수가 사전에 작성자에 의해 정의 되었다면 항상 먼저 처리가 되므로 함수의 위치는 중요하지 않습니다. (maxScript 만 예외)함수 안에서는 역시 위에서 아래로 진행이 됩니다.

보통은 한줄 한줄 줄단위로 기능이 동작이 됩니다. (스크립트 언어 기준, C++, C# 은 좀 다릅니다.)

변수

어떤 값이 저장되는 공간. 보통 영어로 명명되며 처음 글자는 숫자가 오지 못하는 경우가 대부분입니다.예를 들면 이미지의 크기를 저장하는 변수를 설정는 것은 이렇게 합니다.

imageWidth = 300 // imageWidth 라는 단어(공간) 안에 300 이라는 숫자를 저장합니다. 

이후 표시되는 imageWidth 는 300 이라는 숫자를 의미합니다. 

중간에 어떤 목적에 의해서 imageWidth 안의 값을 변경할 수 있습니다. 

변경이 가능하기 때문에 변수라고 부르게 되는데 꼭 숫자만 저장할 수 있는 것은 아닙니다.

문자 또는 문자열, 숫자, 포토샵이라면 특정 레이어를 변수에 담을 수도 있습니다.

함수

특정한 기능을 수행하는 단위 모듈이라고 보면 됩니다.

함수의 원래 정의는 f(x) 인데요. 어렵지 않습니다. f 는 함수를 지칭하는 것이고 x 는 입력되는 값을 말합니다.

즉 x 라는 값이 들어오면 항상 어떤 결과를 출력해주면 그게 함수입니다.

예를 들면 이런 함수가 있을 수 있겠습니다.

입력되는 값(_value) 을 지정한 숫자(step)로 나누어 주는 함수이며 실제 사용할 때는 보통 이렇게 사용합니다.  

function divideWidth (_value, step) 
{    
	return (_value / step )
}

함수는 단순하게 만드는 것이 좋지만 경우에 따라서는 아주 복잡하게 만들어 지는 경우도 있습니다.보통 스크립트 언어에는 기본적으로 제공되는 함수가 많이 존재 합니다. 특히 자바스크립트나 엑셀에서 사용하는 비주얼 베이직에서는 아주 유용한 많은 함수가 사전에 제공되므로 빠르고 쉽게 코딩을 할 수 있습니다.

예를 들면 

String.indexOf("찾는글자") 와 같은 함수는 String 이라는 문자열 안에서 "찾는글자" 가 있는지 검사한 후 있으면 발견된 위치를 돌려주고 없으면 -1 을 돌려주는 함수 입니다.

Folder.getFiles("*.png") 라는 함수는 Folder 안에 있는 모든 파일 중에서 확장자가 ".png" 인 파일을 모두 찾아서 배열로 돌려 줍니다. 배열은 뒤에 다시 설명하겠습니다.

판단

컴퓨터를 이용해서 무엇인가를 시키기 위해서는 반드시 판단을 해주는 로직이 들어가게 되어 있습니다. 판단 로직이 없다면 사실상 포토샵의 액션보다 나을게 없습니다. 액션에서는 판단을 할 수 있는 구조가 없기 때문에 스크립트가 더욱 막강해 지게 됩니다.

판단 로직은 대부분의 언어에서 if 라는 이름으로 합니다. 다만 언어마다 작성하는 규칙에는 차이가 있습니다.

자바 스크립트에서는 아래와 같이 작성됩니다. 

if (value > 10) {    
	myfunction()
}

엑셀 비주얼 베이직 스크립트라면 아래와 같이 작성이 됩니다. 

if (value > 10) then    
	myfunction()
end if

판단을 해주는 로직은 if 뒤에 나오는 내용이 참인지 거짓인지를 판단하여 참이면 그 다음의 내용을 실행하도록 합니다. 예를 들면 현재 이미지의 가로가 세로보다 길다면 가로 사이즈를 720 으로 리사이즈 하고 세로가 길다면 세로를 720 으로 리사이즈 할 수 있습니다.

이미지의 가로 길이가 1920이 아니라면 오류 메시지를 출력하도록 할 수 있습니다.

레이어셋 안에 있어야 할 필수 레이어가 존재하지 않는다면 파일명에 "error" 를 붙여 저장할 수도 있겠습니다.

판단 로직을 잘 이용하면 아주 복잡한 연산과 판단도 가능해 집니다. 판단 로직안에 또다른 판단 로직이 들어갈 수 있기 때문입니다.판단 로직을 통하여 참이 아닌경우에 수행해야 할 동작이 있다면 아래와 같이 else 라는 명령으로 수행을 시킬수 있습니다.

참 / 거짓에 대하여 각각 실행해야 할 구문을 정의하려면

if (value > 10) {
	myfunction()
}else{    
	yourfunction()
}

판단 조건이 좀더 여러가지 경우를 포함한다면

if (value > 10)		 	// value 의 값이 10 보다 크다면
{     
	myfunction()
}else if (value < 5) 	// value 의 값이 5보다 작다면   
{  
	yourfunction()}
else 					// 위에 제시한 두가지 조건에 해당이 되지 않는다면    
{ 
	anotherfunction()
}

하나의 문장으로 한개 이상의 판단을 수행하는 것도 가능합니다.

if (value > 10) && (value < 100)  // value 라는 변수의 값이 10 보다 크고 100 보다 작다면    
{
	myfunction()
}
else
{    
	yourfunction()
}

if 구문안에 또다시 if 구문이 들어오는 것도 가능합니다.

if (value > 10) && (value < 100)  // value 라는 변수의 값이 10 보다 크고 100 보다 작다면   
{ 
	if(value2 != "png") {       
    	myfunction()    
    }
}
else
{    
    yourfunction()
}

반복위에 말한 것처럼 코딩, 즉 개발을 하는 궁극적인 목적중에 하나 입니다.

컴퓨터는 1번을 시키건 1000 번을 시키건 투정부리지 않습니다.

특정 폴더안의 모든 파일 또는 폴더, PSD 파일 내의 모든 레이어, 엑셀에 있는 모든 셀 등이 주로 대상이 됩니다.

반복은 for 라는 명령으로 진행이 됩니다.

포토샵의 자바스크립트에서는 아래와 같은 형식으로 문장을 작성해야 합니다. 

for (int i = 0; i < 100; i ++) // i 라는 변수를 생성하고 0 부터 99 까지 반복 실행을 합니다. 이때 i 는 반복할 때마다 1 씩 증가 됩니다.
{     
	myFunction( i )
}

엑셀 비주얼 베이직에서는 아래와 같이 정의 합니다. (동작은 동일 합니다)

for i = 0 to 99    
	myFunction(i)
next

예를 들어 특정 폴더안의 모든 파일을 대상으로 어떤 것을 해야 한다면 이런식으로 작성이 됩니다. 

var cFolder = Folder("d:\\asd\\") 
// d 드라이브의 asd 라는 폴더를 cFolder 라는 변수에 저장. 
// 이후에 나오는 cFolder 는 해당 폴더를 가리킵니다.

var cFiles = cFolder.getFiles("*.png") // cFiles 라는 변수에 위에 정의한 cFolder 안의 모든 png 파일을 찾아서 저장합니다.
for (int i = 0; i < cFiles.length; i++) // 변수 i 에 0 부터 위에서 찾은 모든 png 파일의 개수 만큼 반복하며 아래의 내용을 수행합니다. 
{    
	myFunction( cFiles[ i ] ) // myFunction 이라는 사용자 정의 함수에서 각각의 파일을 입력으로 하여 무엇인가 일을 수행합니다.
}

배열

위에서 언급하지는 않았지만 배열의 개념을 잘 알아야 합니다.

자동화를 위해서는 빠질 수 없는 개념이기 때문인데 여러개의 정보 뜨는 데이터가 하나의 변수안에 묶에 있는 경우라고 보면 됩니다. 집합이라고 할수도 있겠고 묶음이라고 할수도 있겠습니다.

보통 배열 안의 데이터들은 동일한 타입의 값을 갖지만 그렇지 않은 경우도 있습니다.

배열은 보통 다음과 같이 정의 되며 사용됩니다.

변수를 선언하고 이 변수를 배열로 사용하는 경우

var sizeList = #{ }

sizeList 라는 변수를 만들고 이 안에 값들을 저장할 것이라고 선언해주는 구문 입니다.

변수 선언시 배열로 지정하여 사용하지 않고 바로 그냥 배열을 만들어 사용하는 경우 

var myPos = [ 1920, 720 ]

var myPos = [ 1920, 720 ]

처음부터 값을 넣어서 배열을 선언하는 경우 

var sizeList = #{ 640, 800, 1024, 1280, 1920}

var sizeList = #{ 640, 800, 1024, 1280, 1920}

처음 선언할때는 비어있는 배열을 선언하지만 이후 값을 채워 넣는 경우 

var sizeList = #{ } sizeList.push(640) // 배열에 640 이라는 값을 넣습니다. 비어있었기 때문에 첫번째 값이 됩니다.

sizeList.push(800) // 배열에 800 이라는 값을 넣습니다. 첫번째 값이 이미 있기 때문에 두번째 값으로 들어가게 됩니다.

sizeList.push(1024) // 배열에 세번째 값으로 1024 를 집어 넣습니다.

var sizeList = #{ } sizeList.push(640) // 배열에 640 이라는 값을 넣습니다. 비어있었기 때문에 첫번째 값이 됩니다.

sizeList.push(800) // 배열에 800 이라는 값을 넣습니다. 첫번째 값이 이미 있기 때문에 두번째 값으로 들어가게 됩니다.

sizeList.push(1024) // 배열에 세번째 값으로 1024 를 집어 넣습니다.

이미 정의된 배열의 값을 변경하는 것도 가능합니다.

var sizeList = #{ 640, 800, 1024, 1280, 1920}

sizeList[ 2 ] = 2560 // 배열의 3번째 값인 1024 를 2560 으로 변경합니다. 

var sizeList = #{ 640, 800, 1024, 1280, 1920}

sizeList[ 2 ] = 2560 // 배열의 3번째 값인 1024 를 2560 으로 변경합니다. 

자바 스크립트는 0 부터 시작되기 때문에 2 는 3번째 값을 의미 하게 됩니다. 햇갈리는 부분이죠.

배열은 또다른 배열을 품을 수 있는데 이런 경우 2차원 , 3차원 배열로 이야기 할 수 있습니다.

2차원 배열은 아래와 같이 생겼는데 저의 경우에는 가로세로 사이즈나 x y 좌표를 저장할 때 자주 사용합니다.. 

var pointList = #{ [25,30], [35,40], [45,50] }

var pointList = #{ [25,30], [35,40], [45,50] }

2차원 배열의 값을 이용할 때는 다음과 같이 사용합니다. 

var pointList = #{ [25,30], [35,40], [45,50] } 

var myPosX = pointList[0][0] // 배열의 첫번째 값 의 첫번째 값인 25 이 myPosX 라는 변수에 저장이 됩니다..

var myPosY = pointList[0][1] // 배열의 첫번째 값의 두번째 값인 30 이 myPosY 라는 변수에 저장이 됩니다..

var pointList = #{ [25,30], [35,40], [45,50] } 

var myPosX = pointList[0][0] // 배열의 첫번째 값 의 첫번째 값인 25 이 myPosX 라는 변수에 저장이 됩니다..

var myPosY = pointList[0][1] // 배열의 첫번째 값의 두번째 값인 30 이 myPosY 라는 변수에 저장이 됩니다..

삭제논리적 사고코딩은 기본적으로 컴퓨터에게 명령을 하는 것이므로 논리적인 글 작성이 필요합니다.논리적이라하면 문장의 흐름에 오류가 있으면 안된다는 의미인데요. 무엇인가 시작이 되었다면 종료가 되어야 하고 판단 로직이 들어가면 정확히 판단할 수 있는 기준이 제시되어야 합니다.

예를 들면 "이미지의 크기가 크다면 " 과 같은 기준은 컴퓨터가 처리 할 수 없습니다.

일단 어느정도의 크기가 큰것인지 작은것인지를 알수 없어 크기의 기준이 가로 인지 세로인지 아니면 용량인지,  bit  수 인지 알 수 없기 때문입니다.

그래서 컴퓨터에게 판단을 시킬때는 "이미지의 가로 픽셀 수 가 960 보다 크다면" 과 같이 명확한 기준을 주어야 합니다.코딩을 해보면 이런식입니다.

잘못된 코드

if (image == big) 
{    
	myFunction()
}

잘 된 코드

preference.unit = unit.PIXEL // 환경 설정의 유닛의 단위를 pixel 로 설정해준다. 
//GUI 디자인과정에서는 대부분 유닛이 pixel 이겠지만 
//그렇지 않은 사용자에게서는 cm 또는 inch 가 반환되어 오류가 날수 있다.

var maxSize = 960 // 판단 기준이 되는 사이즈를 지정 합니다.
var imageWidth = myDoc.width // 다큐먼트의 가로 크기를 가져와서 imageWidth 라는 변수에 지정

if (imageWidth > maxSize) { // 이제 사전에 설정한 최대 크기와 imageWidth 를 비교하여 더 큰지를 확인    
	myFunction()
}

사실 처음부터 논리적 사고를 바탕으로 코딩을 시작하면 좋겠는데 이부분은 여러번의 오류를 겪으며 실력이 쌓이는 것이 당연한 부분이므로 두려워 말고 코드를 작성하기 시작하면 됩니다.

코드를 작성할 때는 명확하게 어떤 동작을 시킬 것인지를 먼저 잘 생각해보는 것이 빠르고 정확하게 코딩을 하는데 큰 도움이 됩니다.

예를 들면 포토샵에서 레이어 이름으로 이미지를 저장하는 스크립트를 만든다고 하면 다음과 같은 방식으로 개발할 내용을 먼저 정리를 합니다. 

파일이 저장될 경로를 설정하자 : PSD 파일의 경로에 저장

파일이 저장될 포멧을 지정 :  png 파일로 지정 

png 파일의 옵션을 설정

현재 최상위에 보여지는 모든 레이어를 변수로 설정먼저 모든 레이어를 hide 상태로 변경

레이어셋을 포함한 전체 레이어를 반복하여 탐색

레이어의 타입이 레이어셋인지 레이어인지 확인

- 레이어의 타입이 레이어일 경우 해당 레이어를 Show 시킨뒤 지정된 경로에 레이어의 이름으로 파일 저장

- 저장이 완료 되었으면 다시 Hide 시키자.

- 레이어의 타입이 레이어 셋인 경우

- 저장될 폴더 하위에 레이어 셋과 동일한 명칭의 폴더를 생성하자

- 생성된 경로를 이미지가 저장될 경로로 변경해 주자

- 레이어 셋 안의 레이어를 다시 탐색하자

- 탐색된 레이어의 타입이 레이어인지 레이어 셋인지 확인. (이하 동일), 이 부분이 depth 가 깊어지면 반복될 수 있으므로 재귀 함수로 별도로 만들 것

-모든 레이어의 저장이 완료 되었으면 다시 모든 레이어를 Show 상태로 변경

PSD 파일 닫기

이런 식으로 개발 내용을 정리 하였다면 이제 본격 적으로 코딩을 시작합니다.

현재 다큐먼트를 변수에 설정하고 PSD 파일이 있는 경로를 확인

var cDoc = app.activeDocument;
var savePath = cDoc.path + "\\"; // savePath 라는 변수에 현재 PSD 파일의 경로를 저장합니다.

PNG 파일의 옵션을 설정해 봅니다.

var psOption = new PNGSaveOptions()    
psOption.embedColorProfile = true;    
psOption.formatOptions = FormatOptions.STANDARDBASELINE;    
psOption.matte = MatteType.NONE;    
psOption.quality = 100;    
psOption.PNG8 = false; //24 bit PNG    
psOption.transparency = true;    
psOption.interlaced = true;

요런 세세한 설정 값들은 레퍼런스를 참고 하는 방법과 인터넷이나 미리 만들어논 코드에서 따오는 것이 좋습니다.

현재 PSD 파일의 최상위 레이어를 모두 배열로 변수에 담아 줍니다. 그리고 모든 최상위 레이어를 숨김처리 합니다.

var tempLayers = cDoc.layers
for (var i = 0 ; i < tempLayers.length; i++)
{     
	tempLayers[i].visible = false
}

이제 레이어를 돌면서 레이어 셋인지 레이어인지 판단을 해봅니다.

모든 상위 레이어를 돌면서 레이어 셋인지 아닌지 판단

for (var i = 0 ; i < tempLayers.length; i++){         
	if (tempLayers[i].typename == "LayerSet") 
	{             

	}else{             

	}   
}

이제 여기에 레이어 일경우 파일로 저장하는 기능을 넣어 보면 이렇게 됩니다.

for (var i = 0 ; i < tempLayers.length; i++)
{         
  if (tempLayers[i].typename == "LayerSet") 
  { 
  
  }else{        
    tempLayers[i].visible = true;                           // 현재 레이어를 보이도록 설정        
    cFile = File(savePath + tempLayers[i].name + ".png");    // 저장할 경로 뒤에 레이어 명을 붙여서 저장하기 위한 파일을 생성함 (아직 실제 파일이 생성되지는 않음)        
    cDoc.saveAs(cFile, psOption,true, Extension.LOWERCASE);  // PS 에서 save as 하는 것과 동일합니다. 위에서 작성한 png 옵션을 이용하여 저장해주죠        
    tempLayers[i].visible = false;                           // 저장하고 나면 다시 레이어를 보이지 않도록 설정합니다.    
  }   
}

레이어 셋일 경우 레이어 셋의 이름으로 폴더를 생성하고 depth에맞게 저장될 수있도록 준비를 해봅시다.

for (var i = 0 ; i < tempLayers.length; i++){         
  if (tempLayers[i].typename == "LayerSet") {    
    dPathName = savePath + tempLayers[i].name + "\\"; // 기존 저장 경로에 레이어 셋의 이름을 추가하여으로 새로 만들 경로 명칭을 정의 합니다.        
    ff = new Folder(dPathName)  ;                    // 신규 생성할 경로를 폴더로 설정합니다.        
    ff.create();                                    // 위에 정의한 폴더를 실제로 생성합니다.              
  }
  }else{        
    tempLayers[i].visible = true;                           // 현재 레이어를 보이도록 설정        
    cFile = File(savePath + tempLayers[i].name + ".png");    // 저장할 경로 뒤에 레이어 명을 붙여서 저장하기 위한 파일을 생성함 (아직 실제 파일이 생성되지는 않음)        
    cDoc.saveAs(cFile, psOption,true, Extension.LOWERCASE);  // PS 에서 save as 하는 것과 동일합니다. 위에서 작성한 png 옵션을 이용하여 저장해주죠        
    tempLayers[i].visible = false;                           // 저장하고 나면 다시 레이어를 보이지 않도록 설정합니다.    
  }   
}

레이어일 경우 그냥 저장하면 되는데 레이어 셋일 경우에는 하위 구조를 다시 탐색을 해야 합니다. 

하위 구조를 탐색하기 위한 함수를 만들어 보겠습니다. 

위에서 작성한 탐색 구조와 완전히 동일합니다.

재귀 함수를 만들껀데요. (재귀 함수는 반복해서 자신을 호출할 수 있도록 개발된 함수를 말합니다. 좀 개념이 어려운데 아래 코드를 보고 잘 생각해보면 이해가 될 수도 있습니다)

레이어 구조를 탐색하며 레이어면 이미지로 저장하고 레이어 셋이면 다시 탐색을 시키는 함수 입니다.

원래는 하나로 만들면 되는데 PS 스크립트 문제인지 두개로 나누어서 서로 호출하도록 해야 정상 동작이 되네요. 

좀 이상하지만  어쨌든 이렇게 만들게 되면 explorerLayerSet 이라는 함수가 호출이 될 때 파일이 저장될 경로과 레이어 셋을 함수의 인자로 입력을 받게 됩니다.

입력된 레이어셋 안에서 레이어를 만나면 입력된 경로에 이미지로 저장하고 레이어 셋을 만나면 경로를 생성한 후 explorerLayerSet2 라는 함수를 호출합니다.

explorerLayerSet2 은 구조적으로 explorerLayerSet 과 완전히 동일한 함수인데요 마찬가지로 레이어 셋을 탐색하게 되며 레이어셋 안에서 레이어를 만나면 이미지로 저장하고 레이어 셋을 만나면 explorerLayerSet 을 다시 호출하게 되죠. depth 가 아주 많아도 계속해서 서로 호출하며 마지막 depth 까지 탐색을 하며 레이어만 저장을 하게 됩니다.

function explorerLayerSet (cPath, lSet){       

var dLyrs = lSet.layers    
for (var k = 0 ; k < dLyrs.length; k++)
{        
  if (dLyrs[k].typename == "LayerSet")  
  {            
    dLyrs[k].visible = true ;        
    ePathName = cPath + dLyrs[k].name + "\\"; 
    ee = new Folder(ePathName);        
    ee.create();            
    explorerLayerSet2 (ePathName, dLyrs[k]);
    dLyrs[k].visible = false;

   }else{      
    dLyrs[k].visible = true;   
    dFile = File(cPath + dLyrs[k].name + ".png"); 
    cDoc.saveAs(dFile, psOption,true, Extension.LOWERCASE); 
    dLyrs[k].visible = false;
    }    
  }    

  lSet.visible = false;
}

function explorerLayerSet2 (cPath, lSet)
{      
  var cLyrs = lSet.layers    
  for (var m = 0 ; m < cLyrs.length; m++)
  {        
    if (cLyrs[m].typename == "LayerSet")
    {            
      cLyrs[m].visible = true   
      ePathName = cPath + cLyrs[m].name + "\\" 
      ee = new Folder(ePathName)       
      ee.create();            
      explorerLayerSet (ePathName, cLyrs[m])   
      cLyrs[m].visible = false        
    }
    else
    {   
      cLyrs[m].visible = true
      cFile = File(cPath + cLyrs[m].name + ".png")
      cDoc.saveAs(cFile, psOption,true, Extension.LOWERCASE)
      cLyrs[m].visible = false;
    }
  }    

  cLyrs.visible = false;
}

이제 작성된 함수를 원래 작성하고 있던 코드에 삽입해 봅니다. 

for (var i = 0 ; i < tempLayers.length; i++)
{
  if (tempLayers[i].typename == "LayerSet")
  {
    dPathName = savePath + tempLayers[i].name + "\\"; // 기존 저장 경로에 레이어 셋의 이름을 추가하여으로 새로 만들 경로 명칭을 정의 합니다.
    ff = new Folder(dPathName);                      // 신규 생성할 경로를 폴더로 설정합니다.        
    ff.create();                                    // 위에 정의한 폴더를 실제로 생성합니다.                 
    tempLayers[i].visible = true;        
    explorerLayerSet(dPathName, tempLayers[i]);  // 바로 요 부분이 하위 뎁스를 계속해서 탐색할 수 있도록 개발한 함수를 끼워 넣는 부분입니다.        
    tempLayers[i].visible = false;   
  }
  else
  {        
    tempLayers[i].visible = true;                            // 현재 레이어를 보이도록 설정        
    cFile = File(savePath + tempLayers[i].name + ".png");    // 저장할 경로 뒤에 레이어 명을 붙여서 저장하기 위한 파일을 생성함 (아직 실제 파일이 생성되지는 않음)        
    cDoc.saveAs(cFile, psOption,true, Extension.LOWERCASE);  // PS 에서 save as 하는 것과 동일합니다. 위에서 작성한 png 옵션을 이용하여 저장해주죠        
    tempLayers[i].visible = false;                           // 저장하고 나면 다시 레이어를 보이지 않도록 설정합니다.   
  } 
}

아 이제 개발이 다 되었습니다.

이렇게 하면 PSD 파일에 있는 모든 레이어를 탐색하며 각 레이어를 파일로 저장하는 동작을 수행하게 됩니다.

전체 코드를 보면 이렇습니다.

//파일이 저장될 포멧을 지정 → png 파일로 지정//png 파일의 옵션을 설정

var psOption = new PNGSaveOptions()    
psOption.embedColorProfile = true;    
psOption.formatOptions = FormatOptions.STANDARDBASELINE;    
psOption.matte = MatteType.NONE;    
psOption.quality = 100;    
psOption.PNG8 = false; //24 bit PNG    
psOption.transparency = true;    
psOption.interlaced = true; 
var cDoc = app.activeDocument  //파일이 저장될 경로를 설정하자 → PSD 파일의 경로에 저장
var savePath = cDoc.path + "\\"  //현재 최상위에 보여지는 모든 레이어를 변수로 설정
var tempLayers = cDoc.layers //먼저 모든 레이어를 HIde 상태로 변경


for (var i = 0 ; i < tempLayers.length; i++)
{    
	tempLayers[i].visible = false //레이어셋을 포함한 전체 레이어를 반복하여 탐색
} 

for (var i = 0 ; i < tempLayers.length; i++)
{   //    
  if (tempLayers[i].typename == "LayerSet")  //레이어의 타입이 레이어셋인지 레이어인지 확인 
  {                   
    dPathName = savePath + tempLayers[i].name + "\\"    // 기존 저장 경로에 레이어 셋의 이름을 추가하여으로 새로 만들 경로 명칭을 정의 합니다.        
    ff = new Folder(dPathName);                          // 신규 생성할 경로를 폴더로 설정합니다.        
    ff.create();                                        // 위에 정의한 폴더를 실제로 생성합니다.                
    tempLayers[i].visible = true;    
    explorerLayerSet(dPathName, tempLayers[i]);  // 바로 요 부분이 하위 뎁스를 계속해서 탐색할 수 있도록 개발한 함수를 끼워 넣는 부분입니다.        
    tempLayers[i].visible = false;    
  }
  else
  { 
    tempLayers[i].visible = true;                            // 현재 레이어를 보이도록 설정        
    cFile = File(savePath + tempLayers[i].name + ".png");    // 저장할 경로 뒤에 레이어 명을 붙여서 저장하기 위한 파일을 생성함 (아직 실제 파일이 생성되지는 않음)        
    cDoc.saveAs(cFile, psOption,true, Extension.LOWERCASE);  // PS 에서 save as 하는 것과 동일합니다. 위에서 작성한 png 옵션을 이용하여 저장해주죠       
    tempLayers[i].visible = false;                           // 저장하고 나면 다시 레이어를 보이지 않도록 설정합니다.   
   }   

} // 여기부터는 레이어 셋일 경우 하위 뎁스를 계속해서 탐색하는 함수 입니다.



function explorerLayerSet (cPath, lSet)
{     
  var dLyrs = lSet.layers    
  for (var k = 0 ; k < dLyrs.length; k++)
  {   
    if (dLyrs[k].typename == "LayerSet")        
    {            
      dLyrs[k].visible = true;            
      ePathName = cPath + dLyrs[k].name + "\\";         
      ee = new Folder(ePathName);
      ee.create();            
      explorerLayerSet2 (ePathName, dLyrs[k]);            
      dLyrs[k].visible = false;        
    }
    else
    {            
      dLyrs[k].visible = true; 
      dFile = File(cPath + dLyrs[k].name + ".png");    
      cDoc.saveAs(dFile, psOption,true, Extension.LOWERCASE);  
      dLyrs[k].visible = false;       
    }    
  }    

  lSet.visible = false;
}
function explorerLayerSet2 (cPath, lSet)
{      
  var cLyrs = lSet.layers    
  for (var m = 0 ; m < cLyrs.length; m++)
  {        
    if (cLyrs[m].typename == "LayerSet")        
    {            
      cLyrs[m].visible = true;            
      ePathName = cPath + cLyrs[m].name + "\\";   
      ee = new Folder(ePathName);            
      ee.create();            
      explorerLayerSet (ePathName, cLyrs[m]);
      cLyrs[m].visible = false;   
    }
    else
    {        
      cLyrs[m].visible = true;  
      cFile = File(cPath + cLyrs[m].name + ".png") O
      cDoc.saveAs(cFile, psOption,true, Extension.LOWERCASE)  
      cLyrs[m].visible = false 
    }  
  }    

  cLyrs.visible = false

}

이 정도는 어느정도 훈련된 디자이너라면 개발자가 아니어도 충분히 작성할 수 있는 어렵지 않은 코드 수준이라고 생각됩니다.

어렵지 않고 길지 않은 코드이지만 디자이너의 시간은 비약적으로 늘어나게 만들어 주는 코드라고 할 수 있습니다.

코딩을 하려면 앞서 이야기 했지만 무엇을 개발할 것인가를 명확히 하는 것이 중요합니다.

애메모호한 목표는 코딩을 더욱 어렵게 만들게 됩니다. 현재 본인이 가장 귀찮게 반복해야 하는 업무가 무엇인지 정확히 파악이 되었다면 컴퓨터에게 일을 시킬 준비를 해보세요. 어렵지 않습니다.

코딩 연습을 하며 모르겠는 부분이 있다면 얼마든지 문의해주세요.

좀더 간단하고 깔끔한 버전으로 코딩된 결과는 아래 포스트를 참고해 주세요

https://diy-dev-design.tistory.com/17