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

네! 당연히 됩니다.

일러스트레이터에서 스크립트를 사용할 수 있게 되면 진정 놀라운 결과들을 만들어 낼 수 있습니다. 사람이 손으로 하기에는 정말 귀찮은 작업들을 가능하게 만들어 줍니다.

이런 이미지를 손으로 만들어 본다고 치면요. 일단 배치되는 모든 사각형의 각도도 랜덤이고, 사각형의 색상이 하나도 연속으로 동일한게 없다면요.. 머리가 벌써 아파오죠?

하지만 스크립트를 이용하면 저것보다 수백배 복잡한 것도 손쉽게 해낼 수 있답니다.

막상 해보면 일러스트야 말로 진정한 노가다 툴이 아닐 수 없습니다. 

패스 하나하나 손으로 그려야 하며 그려야 하는 패스가 정형화 된 스타일일 수록 피곤해 집니다.

자 그럼 일러스트 스트립트 어떻게 해야 할까요?

일단 포토샵스크립트와 동일하게 javascript 를 기반으로 동작합니다. MAC OS 에서는 apple script 를 지원하고 WindowOS 에선 VBA 도 지원하지만 공용으로 사용할 수 있는 javascript 가 적당해 보입니다. 문법도 포토샵 스크립트와 크게 다르지 않으니 일단 javascript 의 기본을 알고 계시면 금방 시작하실 수 있습니다.

일러스트는 기반이 벡터 그래픽이다 보니 어쩌면 스크립트라는 형식 자체가 포토샵보다 적용 가능한 부분이 많습니다. 포토샵이 이미지를 메모리에 얹어 놓고 메모리 안의 이미지를 이미지 프로세싱을 통해 변화를 주다 보니 스크립트와 같이 성능에 제약적인 개발언어로 할 수 있는게 많이 없습니다. 하지만 일러스트는 모든 데이터가 벡터 그래픽이다 보니 아주 많은 영역에 대하여 스크립트로 할수 있는 여지가 있는 것이죠.

먼저 extend script toolkit 을 준비하시고요. 

그 다음은 전과 마찬가지로 필요한 액션을 작성해 나가시면 됩니다. 포토샵 스크립트와 비슷 한 느낌 입니다.

var cDoc = app.activeDocument;
alert(cDoc.name)

비슷하지요? 다만 태생이 포토샵과 다르다 보니 스크립트를 작성하는 방식이 약간은 다릅니다.

포토샵은 app 안에 document 개체를 찾고 그 안에 layer 또는 Artlayer 로 접근하여 layer 안의 오브젝트의 속성을 조정하는 것이 일반적인 방식인데요. 일러스트는 app 안에 document 를 찾는 것 까지는 같지만 레이어로 접근하지 않고도 스크립트에서 바로 개체로 접근이 가능합니다.

var cDoc = app.activeDocument;
var mItem_01 = cDoc.pageItems[0]
var mItem_02 = cDoc.layers[0].pageItems[0]

또 레이어 안에 shape 의 종류만 해도 pageItem, pathItem, compoundPathItem, GroupItem 과 같이 다양한 개체가 있으며 그외에도 textItem 이나 다양한 개체가 존재합니다. 

또 위에서 설명드린 개체들 중 pageItem 은 모든 개체를 통털어 일컬을 수 있는 녀석이기도 합니다.

예를들면 layer 안에 두개의 groupItem 과 한개의 pathItem 이 있다고 했을때 이것은 3개의 pageItem 이 있는 것으로 처리되기도 합니다. 즉 pageItem 이라는 개념은 종류를 불문하고 어떤 하나의 속성을 갖는 개체로 정의되는 것이지요. 그래서 코딩할 때도 각각의 개체의 타입이 무엇인지 정확히 파악하여 코딩을 해야 합니다.

var cDoc = app.activeDocument;
s = cDoc.selection

for (var i = 0; i < s.length; i++)
{
    var cItem = s[i];
    if (cItem.typename == "pathItem")
    {
        alert("pathItem")
    }
    else if (cItem.typename == "GroupItem")
    {
        alert("groupItem")
    }
    else
    {
        alert("another Item")
    }
 }

선택한 개체들이 어떤 종류의 개체인지 확인하는 간단한 코드 예제.

위에 열거한 개체들 중 가장 하위 개념인 pathItem 은 그안에 PathPoints 라는 Pathpoint 들의 그룹을 갖습니다. PathPoint 는 예상하신 것처럼 우리가 알고 있는 점 을 말하지요. PathPoint 안에도 anchor 와 leftDirection, rightDirection 과 같은 속성들도 구성되므로 상당히 체계적으로 코드를 작성해야 정상적으로 동작이 됩니다.

예를 들면 패스 내에 있는 하나의 점은 다음과 같이 정의 되는 것이죠.

var cDoc = app.activeDocument;
var cLyr = cDoc.layers[0]; // layer 개체
var cItem = cLyr.pageItems[0]; // pageItem 개체
var cPath = cItem.pathItems[0]; // pageItem 이 GroupItem 이라는 가정하에.. pathItem 개체
var firstPoint = cPath.pathPoints[0]; // pathPoint 개체
var cPt = firstPoint.anchor; // Array (x, y) = [x, y] 와 같은 2개 짜리 1차원 배열
var cPt_leftHandle = cPt.leftDirection; // Array (x, y) = [x, y] 와 같은 2개 짜리 1차원 배열
var cPt_rightHandle = cPt.rightDirection; // Array (x, y) = [x, y] 와 같은 2개 짜리 1차원 배열

일러스트는 벡터 그래픽이다 보니 자동으로 뭔가를 그리려면 벡터 연산이 필수 입니다.

중고등학교 수학을 열심히 했다면 할만 하지만 놀았다면 어려운 수준의 수학적 지식이 필요합니다. 간단한 삼각함수와 2차원 평면에서의 함수와 도형 등의 주제에 대한 이해가 조금은 필요합니다.

어쩌면 선형 대수학과 같은 고급 수학에 정통한 분들은 아주 빠르게 습득이 가능할 겁니다.

프로그래밍을 배우려면 어쩔 수 없는 부분이니 이참에 공부해 보시는 것도 괜찮습니다. 너도 예체능계를 나왔기 때문에 수학은 완전 잼병이었는데요, 막상 필요하니 하게 되더랍니다.

어쨌든 일러스트 스크립트 크게 어려울 것은 없으니 이번에 마음 잡고 도전해 보시기 바랍니다.

저도 본 블로그를 통해 틈틈히 요긴한 강좌를 올리도록 하겠습니다.

그럼 이만~

2019/06/12 - [DESIGN] - 일러스트 이미지 소스

2019/12/16 - [DEV/MAX SCRIPT] - 3DS MAX SCRIPT 강좌?? 무작정 시작하기 - 디자이너 추천

2019/06/10 - [DEV/Adobe Script] - [포토샵 스크립트] 강좌, 무작정 따라해보기

이번 포스트에서는 매직완드를 스크립트로 실행하는 방법을 설명 드리겠습니다.

포토샵의 매직 완드는 일반적인 스크립트로는 작성이 불가능하기 때문에 scriptListner 를 통하여 추출된 코드를 응용하여 개발을 해야 합니다. scriptListner 는 포토샵에서 이루어지는 거의 모든 기능에 대하여 출력을 해주기 때문에 일반적인 스크립트로 작성이 불가능한 기능에 대하여 개발을 해야 할 때 이용하기 좋은 멋진 플러그인 입니다.

나중에 한번 따로 설명을 드리도록 하겠습니다.

복잡하게 설명할 것 없이 바로 코드 갑니다. 이런 류의 코드는 직접 짜는 것이 거의 불가능하기 때문에 그냥 복붙하셔서 사용하시는 것이 가능 좋겠습니다.

function selectbyMagicWand(_x, _y, tolnc, anti, conti,merg){
    var idsetd = charIDToTypeID( "setd" );
    var desc103 = new ActionDescriptor();
    var idnull = charIDToTypeID( "null" );
        var ref53 = new ActionReference();
        var idChnl = charIDToTypeID( "Chnl" );
        var idfsel = charIDToTypeID( "fsel" );
        ref53.putProperty( idChnl, idfsel );
    desc103.putReference( idnull, ref53 );
    var idT = charIDToTypeID( "T   " );
        var desc104 = new ActionDescriptor();
        var idHrzn = charIDToTypeID( "Hrzn" );
        var idPxl = charIDToTypeID( "#Pxl" );
        desc104.putUnitDouble( idHrzn, idPxl, _x );
        var idVrtc = charIDToTypeID( "Vrtc" );
        var idPxl = charIDToTypeID( "#Pxl" );
        desc104.putUnitDouble( idVrtc, idPxl, _y );
    var idPnt = charIDToTypeID( "Pnt " );
    desc103.putObject( idT, idPnt, desc104 );
    var idTlrn = charIDToTypeID( "Tlrn" );
    desc103.putInteger( idTlrn, tolnc );
    var idMrgd = charIDToTypeID( "Mrgd" );
    desc103.putBoolean( idMrgd, merg );
    var idAntA = charIDToTypeID( "AntA" );    
    desc103.putBoolean( idAntA, anti );
    var idCntg = charIDToTypeID( "Cntg" );
    desc103.putBoolean( idCntg, conti );
executeAction( idsetd, desc103, DialogModes.NO );

}

총 6개의 입력값을 갖는 함수로 정리를 하였습니다.

각 함수의 인자는 아래와 같은 속성을 갖습니다.

• _x : 숫자 : 매직완드의 포인터 X좌표 
• _y : 숫자 :  매직완드의 포인터 Y 좌표
• tolnc : 숫자 0  ~ 255 : tolerance, 선택된 색상 값의 확장 범위. 0 일경우 완전히 같은 색상일 경우만 선택된다.
• anti : boolean : True or False 를 입력하며 경계 영역의 부드러운 처리여부
• conti :  boolean : True or False 를 입력하며 연속된 영역 안에서만 할 것인지 화면 전체로 할 것인지
• merge : boolean : True or False 를 입력하며 현재 레이어만 대상으로 할것인지 전체 레이어로 할 것인지

바로 아래 옵션에 해당되는 옵션들 입니다.

시제 사용하실 때는 아래와 같이 사용하시면 됩니다.

// 좌상단 1,1 위치의 색상을 pick 하여 선택 영역 생성
selectbyMagicWand(0, 0, 0, false, true, true) 

참고로 x, y 좌표 값은 -1 한 값을 입력하시면 됩니다.

사용하시면서 궁금하신 내용이 있으시면 뎃글 남겨주세요~

감사합니다.

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

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

블로그에 방문 주신 분께서 레이어 자동 저장 기능에 해당 레이어 크기로 이미지가 저장 되었으면 좋겠다는 의견을 주셔서 한번 만들어 보았습니다.

사실 사용하는 분마다 차이가 있을 것 같은데요. 아마 레이어의 크기로 저장되는 기능이 꼭 필요한 분도 계실 거라 생각되어 별도로 페이지를 하나 만들었습니다.

전체 스크립트는 큰 차이가 없으며 현재 레이어의 크기를 파악하고 그 크기로 저장하는 방법만 추가하면 될 것 같습니다.

아래의 내용을 추가할 계획입니다.

• 현재 레이어의 크기 (가로, 세로) 를 구해본다      : Layer.bounds 라는 개체를 이용
• 구해진 크기로 새로운 임시 도큐먼트를 생성한다 : Documents.Add( ) 이용
• 생성된 임시 도큐먼트에 해당 레이어를 복사하여 붙여 넣는다 : Layer.copy() // document.paste()
• 도큐먼트를 지정된 파일이름과 위치에 저장하고 임시 도큐먼트는 닫는다. : document.close()
• 기존과 동일하게 전체 크기로 저장하기 위한 옵션을 두어 선택할 수 있게 한다.

어렵지 않죠?

아래 작성된 코드를 보시죠.

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

// jpg 파일 저장을 위한 설정
var jpgSaveOption = new JPEGSaveOptions()
    jpgSaveOption.quality = 10;
    
var sType = "png" // jpg 로 파일을 저장하기를 원하는경우, png 로 저장을 하고 싶다면 "png"
var cDoc = app.activeDocument
var tempLayers = cDoc.layers
var cWidth = cDoc.width
var cHeight = cDoc.height
var cRes = cDoc.resolution
var savePath = cDoc.path + "\\"
var saveAsEachLayerSize = true
// 일단 모든 레이어를 꺼줍니다.
for (var i = 0 ; i < tempLayers.length; i++)
{
	tempLayers[i].visible = false
}

// 아래의 한줄의 함수로 모든 레이어를 저장합니다.
explorerLayerSet_new(savePath, cDoc) 

function explorerLayerSet_new (cPath, lSet){
	var dLyrs = lSet.layers
    
    var documentSaveType = pngOption;
    
	if (sType == "jpg")
    {
        documentSaveType = jpgSaveOption
    }
    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();
			explorerLayerSet_new (ePathName, dLyrs[k])
			dLyrs[k].visible = false
		}else{
			dLyrs[k].visible = true
			dFile = File(cPath + dLyrs[k].name + "." + sType)
            
              if (saveAsEachLayerSize == false)
              {
                  cDoc.saveAs(dFile, documentSaveType,true, Extension.LOWERCASE)  
              }else{  // 레이어의 크기에 맞추어 파일을 저장하는 기능                  
                  // layer.bounds 를 이용하여 레이어의 크기를 얻어올 수 있다.
                  var cBounds = dLyrs[k].bounds
                  var newWidth = cBounds[2] - cBounds[0];
                  var newHeight = cBounds[3] - cBounds[1];
                  
                  dLyrs[k].copy();
                  
                  // 레이어의 크기와 동일한 도큐먼트를 하나 생성한다.
                  var tmpDoc = app.documents.add(newWidth, newHeight, cDoc.resolution, dLyrs[k].name, NewDocumentMode.RGB, DocumentFill.TRANSPARENT);
                  tmpDoc.paste();
                  tmpDoc.saveAs(dFile, documentSaveType,true, Extension.LOWERCASE);
                  tmpDoc.close(SaveOptions.DONOTSAVECHANGES);
              }
			
			if (dLyrs[k].name.indexOf("All") == -1)
			{
				dLyrs[k].visible = false
			}
		}
	}
	lSet.visible = false
}

기존 saveAs 부분이 변경이 되었습니다.

png, jpg 를 판단하는 부분을 위쪽으로 빼서 documentSaveType 이라는 변수에 저장 옵션을 담아 버렸습니다.

그리고 위쪽에 saveAsEachLayerSize 라는 변수를 두어 True 일 경우 레이어 크기로, False 일 경우 전체 도큐먼트 크기로 저장이 되게 하여 기존의 방식이 필요한 분들도 하나의 스크립트로 사용할 수 있도록 하였습니다.

이렇게 해서 버전 3 가 되었네요. 좋은 의견 주신 '포도' 님께 감사드립니다.

이전의 레이어 자동 저장 스크립트 포스트와 레이어 관련하여 공부할 만한 포스트를 링크 합니다.

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

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

공감은 작성자에게 큰 힘이 된답니다. 아시죠? ^^

좀 생뚱 맞을 수도 있는데 이번에 소개해드릴 강좌는 글자의 밝기를 알아보는 스크립트를 소개해 드릴까 합니다. 

글짜에 무슨 밝기가 있다는 건가 하실수 있겠는데요. 

바로 이런 표현을 하기 위하여 필요한 것이죠.

각 단위 글자에 밝기를 분석하여 이미지의 픽셀에 매칭해보려는 것 입니다.

이렇게 하기 위하여 필요한 것이 글자의 밝기를 분석해서 어떤 글자가 가장 밝고 어떤 글자가 가장 어두운 글자인지 알아야 하는 것이죠.

정확히는 글자가 어둡다기 보다는 단위면적에 동일한 크기로 글자를 표시했을때 어두운 영역이 가장 많은 글자가 가장 어두운 글자가 되겠습니다.

제가 사용할 글자는 총 85 개로 알파벳 대소문자 및 특수기호들 입니다.

일단 생각나는데로 적은 글자는 abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890[}±.:,/~';*-=+!@?>\#$%^& 입니다.

이 글자들을 분석하여 어떤 글자가 가장 밝고 어떤 글자가 가장 어두운지 찾아내야 합니다.

먼저 아래와 같이 준비를 해놓겠습니다.

• Photoshop 에 10 x 10 짜리 다큐먼트를 하나 만든 뒤 텍스트 메뉴로 글자를 하나 입력한다.
• 폰트는 Consolas (무료), 사이즈는 10 pt 

그다음 스크립트를 이용하여 분석을 진행해보겠습니다.

다큐먼트의 텍스트 아이템의 글자를 위에 준비된 글자로 하나씩 바꿔가면서 전체 픽셀의 밝기를 모은 뒤 배열에 저장하고 저장된 배열의 값을 작은 수에서 큰수로 재배열을 해주면 되겠습니다. 

개념 적으론 별거 없죠?

코드를 보시죠. 주석을 잘 따라 읽어 보시면서 봐주세요.

var ltrSet = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890[}±.:,/~';*-=+!@?>\#$%^&";
var finalLtrSet = ""
var cCount = ltrSet.length;

var letVals = [];

var cDoc = app.activeDocument;

// 컬러샘플러가 이미 있을 수 있으니 제거 해준다.
cDoc.colorSamplers.removeAll();

// pointSample 라는 컬러 샘플러를 하나 생성해 주자. 
// pointSample 라는 개체를 이용하여 컬러를 수집할 예정임.
var pointSample = cDoc.colorSamplers.add([1,1]);

// 미리 주어진 문자열을 하나씩 분석하여 밝기와 해당 글자를 배열에 저장해 주자.
for (var k=0; k < cCount; k++)
{
    cLtr = ltrSet.charAt(k);
    cDoc.layers[0].textItem.contents = cLtr;
    cBrt = getImageBrightness(); // 아래쪽에 글자의 밝기를 구하는 함수를 이용하여 밝기 분석
    letVals.push([cBrt, cLtr]);  // 구해진 밝기를 해당 문자와 함께 배열에 저장함
}

// 저장된 배열을 밝기 순으로 재정렬한다.
letVals.sort(arrayfn_chkBrt);

//finalLtrSet 라는 변수에 재배열된 글자를 순서대로 적어 준다.
for (var k=0; k < cCount; k++)
{
    finalLtrSet += letVals[k][1]
}

//밝기 순으로 재정렬 된 글자들 출력
$.writeln(finalLtrSet)

// 구해진 최종 결과 문자 셋 가장 좌측이 밝은색, 가장 우측이 어두운 색 되시겠습니다.
//var lset = ".-':,;>^!~Lci/*1l?zC+±tsr2=JIT}[x75FvZ3eSYEfukjnayKoPXV9h6qdRp4bAG$8wDUO&%#Bg0mHQMWN@"

pointSample.remove();

// 배열의 순서를 재정렬 하기 위한 함수. 배열의 첫번째 값을 비교하여 작은수를 앞으로 보낸다.
function arrayfn_chkBrt(a,b)
{
    if (a[0] > b[0])
    {
        return -1;
    }
    else if (a[0] < b[0])
    {
        return 1;
    }
    else
    {
        return 0;
    }
    
}

// 이미지의 모든 픽셀의 밝기를 더한뒤 전체 픽셀수로 나누어 평균 값을 구한다. 10 x 10 으로 고정함 
function getImageBrightness()
{
    var cDoc = app.activeDocument

    var brightAll = 0;

    for (var yy = 0; yy < 10; yy++)
    {
        for (var xx = 0; xx < 10; xx++)
        {
            pointSample.move([xx,yy]);
            brightAll += pointSample.color.hsb.brightness;            
        }
    }
    brightAll = brightAll / 100
    
    return brightAll;
}

 요렇게 하면 주어진 글자들을 이용하여 밝기 순으로 재정렬 된 문자열을 받을 수 있습니다. 

중간에 제가 주석으로 해놓은 부분이 최종적으로 $.writeln() 을 통해 출력해본 결과 입니다.

.-':,;>^!~Lci/*1l?zC+±tsr2=JIT}[x75FvZ3eSYEfukjnayKoPXV9h6qdRp4bAG$8wDUO&%#Bg0mHQMWN@

이렇게 구해진 문자열을 이용하여 실제이미지에 매칭하는 작업을 하면 됩니다.

이번 강좌에서는 조금 생소한 코드들이 좀 나왔습니다. 바로 colorSampler 와 배열을 재정렬할때 사용한 배열 함수 입니다. 

colorSampler 는 바로 포토샵의 스포이드 (color picker) 기능과 같습니다. 

바로 요녀석인데요. 특정 픽셀의 컬러를 가져오는 기능을 수행합니다. 

우측에 보면 HSB , RGB, Lab, CMYK, 그리고 Hex 값으로 출력된 컬러 정보가 보여지는데요. colorSampler 역시 완전히 동일 합니다. 

레퍼런스에 보면 아래와 같이 나와 있고요

이 녀석의 프라퍼티 부분을 보면 SolidColor 라는 정보를 color 라는 프라퍼티를 통해 접근이 가능한 것을 알 수 있습니다. 한번 Solid Color 부분으로 가볼까요?

링크를 타고 들어가 보면 아래와 같이 Solod Color 에 대하여 나와있습니다.

여기에 보면 위에 소개해 드렸던 cmyk, gray, hsb, lab, rgb 등의 프라퍼티를 이용할 수 있는 것을 알 수 있습니다. 제가 이번 스크립트에서 픽셀의 밝기를 받아온 것은 바로 hsb (hue, saturation, brightness) 를 이용한 것입니다. 

pointSample.move([xx,yy]);
pointSample.color.hsb.brightness;

이렇게 컬러샘플러의 위치를 필요한 곳으로 이동시키고 필요한 값을 얻어오는 것이죠.

다른 하나는 바로 배열을 재배열 하는 함수 입니다.

Array.sort ( sort function ) 인데요. 바로 sort function 에 해당하는 함수를 사용자가 만들 수 있다는게 특징입니다.

일반적으로 sort (정렬) 이라 하면 숫자가 낮은것에서 높은것으로 또는 높은 것에서 낮은 것으로 정렬 되는 것을 상상 할 수 있겠지만 별도의 정렬 함수를 이용하면 아주 새로운 정렬 규칙을 만들어 내는 것이 가능합니다.

저는 배열의 각 인자들이 두개의 값을 갖는 또다른 배열이기 때문에 배열 인자의 내부 값중 첫번재 (밝기) 를 이용하여 정렬을 한 것이죠. 첫번째 인자는 미리 계산해 두었던 글자들의 밝기 값이기 때문에 해당 값을 이용하여 정렬을 해주면 글자가 가장 밝은 글자부터 가장 어두운 글짜까지 순차적으로 정렬이 되는 것 입니다.

제가 만든 문제셋 말고 본인이 직접 문자셋을 준비하여 정렬된 순차적 문자열을 구해보시는것도 좋을 것 같습니다. 알파벳은 문자가 헐렁하여 아주 어두운 픽셀에 적용되었을 때 효과가 덜한 듯 합니다.

제가 구해보니 알파벳 중 W N @ 가 가장 어두운 글자였으나 한글이라면 "뚫" 이런 글자도 가능하지 않습니까? 또 한글이나 영문이 아니더라도 문자표에 가보시면 ᵺ ▓ ■ 이런 문자들도 있으니 더 어두운 색상 표현에 유리할 수 있습니다. 전 85 글자여서 0 ~ 255 인 밝기 값을 3으로 나누어 사용하였는데요. 이렇게 다양한 글자를 이용한다면 0~255 까지의 글자로 표현도 가능할 것입니다.

한번 도전해 보세요. 궁금하신 부분이나 잘 안되는 것은 질문해주시면 답변 드리겠습니다.

그럼 이만~

본 스크립트는 아래 포스트에서 실제 어떻게 적용되는지 확인할 수 있습니다.

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

해당 스크립트를 이용하여 제작한 핸드폰 배경화면

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