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

코로나로 인하여 아이들이 집밖에 나가지도 못하고 집안에서 게임만 하고 있는 것을 보고 아이들을 위해 놀이거리를 하나 만들어 주어야겠다고 생각하고 시작한 동물의 숲 카드 만들기 입니다.

일단 물고기 카드를 만들려고 시작했는데 종류가 80 개나 되다 보니 만만치가 않았습니다.

그래서 가능하면 쉽게 빠르게 만들 수 있고 필요하면 나중에 수정하기도 쉽도록 코딩을 좀 하는 방향으로 제작 방안을 결정했습니다.

포토샵 자동화 과정이 이루어지는 전체 과정을 엿볼 수 있는 좋은 기회이니 관심 있으신 분은 주의 깊게 보시면 도움이 될 것이라 생각합니다.

어떻게 만들지?

일단 디자인을 결정해야 겠죠? 몇가지 구상 끝에 아래와 같이 만들기로 합니다.

만들어진 이미지를 출력하여 반으로 접어 붙이면 앞면은 물고기 그림자, 뒷면은 물고기 정보가 담겨있는 카드가 만들어 집니다.

제작은 다음과 같이 진행하기로 하였습니다.

• 모든 동물의 이름, 사는곳, 위치를 물고기 이미지와 함께 레이어 명에 남긴다.
• 배경의 타입에 맞게 배경이미지를 제작한다 (연못, 강, 바다 등)
• 물고기의 그림자의 크기별로 그림자 이미지를 별도로 만든다.
• 스크립트를 작성한다.
  • 물고기 레이어를 탐색하면서 레이어 명을 분석한다.
  • 레이어명에서 추출된 배경, 그림자 레이어를 on 한다
  • 정보에 맞도록 텍스트 레이어의 내용을 변경한다
  • 이미지를 파일로 저장한다
  • 물고기 레이어, 배경, 그림자 레이어를 숨긴다.

요런 과정을 통하여 만들기로 합니다.

먼저 포토샵으로 자동화를 위한 데이터 파일을 제작합니다.

먼저 물고기 이미지를 취득합니다.

일단 닌텐도에서 캡쳐한 이미지와 아직 잡지 못한 물고기는 인터넷에서 구한 뒤 레이어별로 이미지를 적재합니다.

레이어의 이름은 위에서 정의한 것 처럼 물고기의 정보를 담도록 합니다.

그 다음 물고기 그림자 세트를 shadow 라는 레이어 셋 안에 만들어 줍니다.

그리고 화면 레이아웃에 맞도록 텍스트 및 텍스트 박스, 기타 디자인을 완성합니다.

강, 연못, 바다 등과 같이 배경에 맞도록 상단의 배경을 레이어로 구분하여 구성합니다.

총 6개의 배경이 구성이 되었습니다.

각각 물고기 레이어에서 정의한 장소와 동일하게 레이어 명칭을 설정해 줍니다.

그리고 물고기 레이어, shadow, 등을 레이어 셋 (폴더)로 구성합니다.

일단 이렇게 하면 PSD 파일은 준비가 완료된 셈 입니다.

이제 코딩을 해볼까요? 

먼저 저장할 경로와 파일 옵션을 설정해야 하는데요. 저는 출력용이므로 eps 포멧을 사용하였습니다.

var sPath = "C:\\Users\\cindy\\Pictures\\animal_tree\\eps\\"

var epsOption = new EPSSaveOptions()
epsOption.embedColorProfile = true

그 다음 현재 도큐먼트와 각 타입별 레이어 셋을 변수에 할당해 줍니다.

var cDoc = app.activeDocument;

var fLayer = cDoc.layers["fishs"].layers
var sLayers = cDoc.layers["shadow"].layers
var tLayer = cDoc.layers["text"].layers

이제 물고기 레이어 (fLayers) 를 한바퀴 돌며 저장을 할겁니다. 이때 레이어의 명칭을 parsing 해야 하는데요. 저는 _ 를 이용하여 구분자를 만들어 놓았으므로 아래와 같은 방법으로 문자열을 분리합니다.

for (var k = 0 ; k < fLayers.length; k++)//fLayer.layers.length
{
   
    var cLyr = fLayers[k]
    var tmpName = cLyr.name
    var nameSet = tmpName.split("_")
    
}

이렇게 하면 모든 fishs 레이어 안의 레이어에 대하여 nameSet 이라는 변수에는 현재 물고기 레이어 이름을 "_" 로 구분하여 배열로 담게 됩니다.

각 반복시마다 cLyr 라는 변수는 현재 레이어를 지칭하게 되죠.

이제 각 설정들을 변경하고 필요한 레이어를 켜거나 끄는 동작을 넣어야 합니다.

for (var k = 0 ; k < fLayers.length; k++)//fLayer.layers.length
{
   
    var cLyr = fLayers[k]
    var tmpName = cLyr.name
    var nameSet = tmpName.split("_")
    var bglayerName = nameSet[3]
    
    if (bglayerName == "바다(비)")
    {
        bglayerName = "바다"
    }
    //물고기 레이어 켜기
    cLyr.visible = true
    
    // 그림자 레이어 켜기
    sLayers[nameSet[2]].visible = true
    
    // BG 레이어 켜기
    cDoc.layers[bglayerName].visible = true
    
    // 텍스트 레이어 내용 변경
    tLayers[0].textItem.contents = nameSet[1]
    tLayers[1].textItem.contents = nameSet[3]
    tLayers[2].textItem.contents = nameSet[4]
    
    // eps 저장
    var dFile = new File(sPath + nameSet[0] + "_" + nameSet[1] + ".eps")
    cDoc.saveAs(dFile, epsOption, true, Extension.LOWERCASE)  
    // 그림자 레이어 끄기
    sLayers[nameSet[2]].visible = false
    
    //물고기 레이어 끄기
    cLyr.visible = false
    
    // BG 레이어 끄기
    cDoc.layers[bglayerName].visible = false
}

현재 물고기 레이어와 각 설정에 맞는 그림자 레이어를 켜고, 배경을 켠다음 텍스트 정보를 업데이트 합니다.

그리고 저장하기로 한 파일로 저장을 하게되죠. 

저장을 마치면 다시 켜주었던 레이어들은 꺼주면 한 번의 반복문이 완성되는 것이죠.

전체 코드를 보면 아래와 같습니다.

var sPath = "C:\\Users\\cindy\\Pictures\\animal_tree\\"
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;
    
var sPath = "C:\\Users\\cindy\\Pictures\\animal_tree\\"

var epsOption = new EPSSaveOptions()
epsOption.embedColorProfile = true




var cDoc = app.activeDocument;


var fLayers = cDoc.layers["fishs"].layers
var sLayers = cDoc.layers["shadow"].layers
var tLayers = cDoc.layers["text"].layers

//alert(fLayer.layers.length);

for (var k = 0 ; k < fLayers.length; k++)//fLayer.layers.length
{
   
    var cLyr = fLayers[k]
    var tmpName = cLyr.name
    var nameSet = tmpName.split("_")
    var bglayerName = nameSet[3]
    
    if (bglayerName == "바다(비)")
    {
        bglayerName = "바다"
    }
    //물고기 레이어 켜기
    cLyr.visible = true
    
    // 그림자 레이어 켜기
    sLayers[nameSet[2]].visible = true
    
    // BG 레이어 켜기
    cDoc.layers[bglayerName].visible = true
    
    // 텍스트 레이어 내용 변경
    tLayers[0].textItem.contents = nameSet[1]
    tLayers[1].textItem.contents = nameSet[3]
    tLayers[2].textItem.contents = nameSet[4]
    
    // png 저장 - png 저장을 하려면 모드를 RGB 로 바꾸어 주어야 한다.
    //var dFile = new File(sPath + nameSet[0] + "_" + nameSet[1] + ".png")
    //cDoc.saveAs(dFile, pngOption, true, Extension.LOWERCASE)  
    
    // eps 저장 - eps 저장을 하려면 모드를 CMYK 로 바꾸어 주어야 한다.
    var dFile = new File(sPath + nameSet[0] + "_" + nameSet[1] + ".eps")
    cDoc.saveAs(dFile, epsOption, true, Extension.LOWERCASE)  
    
    // 그림자 레이어 끄기
    sLayers[nameSet[2]].visible = false
    
    //물고기 레이어 끄기
    cLyr.visible = false
    
    // BG 레이어 끄기
    cDoc.layers[bglayerName].visible = false
}

이렇게 물고기 레이어만큼 반복을 한뒤 코드는 종료 됩니다.

80개 레이어를 각각 설정하고 저장하는데 1분도 채 걸리지 않습니다. ^^

출력을 위하여 eps 포멧으로 저장하긴 했지만 윈도우에서 미리보기를 위하여 png 파일로도 한번 저장해 봤습니다.

예상 하였던 것처럼 잘 저장이 되었습니다.

출력용 레이아웃 파일 제작하기

끝으로 이제 출력용으로 레이아웃을 만들어 주어야 하는데요. 

일러스트 레이터에서 대지를 만들고 배치할 위치에 맞도록 가이드 선을 잡아 줍니다. 물론 png 로 저장한 뒤 파워 포인트 등으로 작업하셔도 됩니다.

그리고 이미지 하나하나 앉혀주면 됩니다.

번거로운 작업이지만 이렇게 딱 1회성 작업이 이루어지는 경우 그냥 손으로 하는게 나은 경우도 많습니다.

여기서 중요한 것은 일러스트에서 이미지를 가져올 때 place(가져오기) 기능을 이용해야 하며 link (연결) 된 이미지로 불러와야 한다는 점 입니다.

link 된 이미지로 가져오게 되면 아래와 같이 선택 시 이미지에 X 표시가 되며 수정이 불가능한데요. 원본 eps 파일이 수정되는 경우 자동으로 이미지가 업데이트 되는 특징이 있습니다. 연결된 파일이 아닌 경우 수정이 되면 모든 이미지를 다시 가져와야 하는 불상사가 일어날 수 있습니다.

이렇게 해서 모든 이미지를 앉히고 출력도 성공적으로 마칠 수 있었습니다.

만들어진 ai 파일을 이용하여 pdf 를 만들어 보았습니다.

용량 관계상 분할 압축을 하였는데요. 다운 받으시고 압축을 해제하여 보시면 pdf 로 예쁘게 만들어져 있는 것을 보실 수 있습니다.

짧지 않은 시간이었지만 이렇게 해서 아이들이 가지고 놀 수 있는 동물의 숲 물고기 놀이 카드가 완성이 되었습니다.

아이들과 너무 재미있게 놀았기에 고생한 보람을 느낍니다.

이제 자동화를 위한 틀이 만들어 졌으므로 해산물 카드라든지, 다른 것들도 쉽게 추가 할 수 있을 것으로 생각합니다.

꼭 동물의 숲 카드 만들기가 아니더라도 포토샵을 이용하여 다양한 속성과 정보를 변경해 가면서 이미지를 제작해야 하는 경우라면 참고하실만한 레퍼런스가 되기를 바랍니다.

감사합니다.

실제 동물의 숲 카드 놀이를 하는 내용은 아래 포스트를 참고해 주세요

2021/01/02 - [DIY] - [아빠가 만든][집콕놀이] '동물의 숲' 카드 놀이 만들기

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

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

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

2020/12/17 - [DIY] - [아빠의요리] 코로나 집콕 간식 '감동란' 만들어 주기

코로나로 인해 수업도 온라인으로 하고 저 역시 재택근무를 하고 있습니다. 요즘 코로나 감염 수준이 높아져 2.5 단계로 거리두기가 격상 되면서 아이들이 집안에만 머무르게 되고 날씨까지 추워지니 더욱 바깥 출입이 뜸해지고 있는 요즘입니다. 

아이들이 집안에만 있다보니 자연스레 휴대폰이나 닌텐도 스위치 게임 같은 것에 더 많은 시간을 쓰게 되는데 딱히 말리기만 하기도 미안한 마음에 아이들이 오프라인으로 자연스럽게 재미있는 놀이를 할 수 있는 건 없을까 하고 고민을 해봤습니다.

요즘 닌텐도 스위치의 동물의 숲 게임에 푹 빠져 있는 아이들에게 동물의 숲에서 잡히는 물고기 카드를 만들어 주면 재미있게 가지고 놀 수 있을 것 같아 한번 직접 만들어 보기로 합니다.

우선 동물들의 사진과 이름, 가격 등의 정보를 확인해야 합니다. 동물들의 사진은 스위치에 도감을 이용하여 사진을 캡쳐하여 준비하고 가격 및 이름, 잡히는 곳 등을 인터넷 페이지 들을 찾아보며 정리합니다.

이렇게 모아진 정보를 이용하여 아래와 같이 만들기로 하였습니다.

일단 이렇게 레이아웃을 잡아보았습니다.

한쪽면에 물고기의 이름과 가격, 잡히는 곳을 표시하고 반대쪽에는 동물의 숲에서 낚시 할 때 처럼 물고기의 그림자를 넣어 주는 것이죠.

출력한 뒤 반으로 접어주면 카드 1장이 완성 됩니다.

반대편의 그림자 모양을 보고 물고기 이름을 맞춘다거나 게임처럼 잡은 뒤에 물고기를 확인하며 즐거워 할 것 같은 상상을 해봅니다.

생각만해도 재미 있을 것 같은데요. 

문제는 이렇게 만들어야 할 물고기가 자그만치 80 종류나 된다는 겁니다.

하나하나 물고기 이미지를 앉히고 이름, 가격, 서식지를 적어주고, 그림자 크기를 확인하여 표시해 주어야 완료가 된다니... 서너개 작업을 해보니 만만치가 않더군요.

그래서 코딩을 조금 했습니다. ^^

포토샵에 물고기의 종류별로 레이어를 나누고 레이어의 이름을 순번_물고기이름_그림자크기_사는곳_가격 이렇게 정리합니다.

예를 들면 이렇게요

08_툭눈금붕어_SS_연못_1300

아무래도 텍스트로만 적어주면 빠르게 적어줄 수 있죠. 자동화를 하게 되면 나중에 위치나 크기, 배경 등을 바꾸더라도 손쉽게 변경이 가능하다는 장점이 있습니다.

자동화에 대한 부분은 포토샵 스크립트 부분에서 자세히 설명을 드리도록 하겠습니다.

2021/01/03 - [DEV/Adobe Script] - [포토샵스크립트] 코딩을 통하여 '모동숲 카드' 만들기

어쨌든 두어시간 투자하니 물고기 이미지를 모두 모으고 이름을 붙인뒤 카드를 모두 만들 수 있었습니다.

이렇게 만들어진 카드는 조금 두툼한 종이에 출력한 다음 하나하나 칼로 깨끗하게 잘라서 반으로 접어주고 풀로 붙여주면 카드가 완성 됩니다.

전 200g 정도의 두툼한 종이공작용 백상지를 이용하였는데요, 두꺼워서 작업하는데 시간이 좀 걸리네요. 레이저 프린터에 120g 정도의 종이면 충분 할 것도 같습니다만 그냥 A4 용지에 뽑으셔서 해보셔도 될 것 같습니다. 

해보시고 아이들이 재미있어 하면 킨코스 같은 곳에서 약간 빳빳한 종이에 레이저 출력하면 좋을 것 같아요.

자 역시 세시간 가량 칼질과 풀칠을 반복하며 완성하였습니다. 정작 이 카드들을 만드는 동안 애들은 별 관심 없이 시큰둥 하여 걱정이 되더군요. 

아빠의 노력은 허사가 되는 것인가...

네 다 만들고 나니 생각보다 빳빳하고 두툼한게 괜찮습니다. 원본에는 없는데 주변에 거무튀튀 하게 칠해진게 있는데요. 제가 처음 만들때는 생각을 못했는데 가지고 놀려고 보니 물고기가 어느곳에 사는지를 그림자만 보고 알수가 있어야 겠더라고요. 그래서 강은 위아래 두줄, 연못은 테두리를 어둡게, 폭포위는 위쪽 한줄만 색상을 매직으로 칠해서 구분을 해 주었습니다. 

참고로 본 포스트 아래쪽에 다운로드 받으실 수 있는 파일이 있습니다. 해당 파일에는 연못, 바다, 강 등의 디자인을 조금 변경해 두었습니다. 

이래저래 시간이 많이 걸렸네요.

이제 본격적으로 놀아 봅니다. 

낮에 동네 산책하고 줄넘기를 하며 놀고 들어온 아이들이 휴대폰을 하고 있는 동안 거실 러그위에 저혼자 슬슬 세팅을 해보았습니다.

ㅋㅋ 집안에 있는 장난감들, 레고 블럭 들을 깔아 놓고 있으니 아이들이 슬슬 다가 옵니다.

입질이 온거죠 ㅋ

둘째 아이에게 "여긴 강이고, 여긴 너에게 준 집이야. 저기는 마을 회관이고 ... " 설명을 해주니 바로 놀이가 시작됩니다 

마을을 돌아 다니며 꽃도 심고 모여 앉아 이야기도 하며 놀이를 하네요. 

ㅋㅋ

나무젓가락에 실을 매달아 테이프로 붙여주니 바로 낚시대 완성. 이건 DIY 레시피가 있어서 만들 수 있다면서 금방금방 만들여 놀이가 진행됩니다. ㅋㅋ 역시 둘째는 설정 놀이의 왕입니다.

힘들게 만들었는데 이렇게 놀아주니 감동이네요.

이렇게 세워놓고선

"황어를 잡았다. 왠지 마이너해~잉" 

하면서 잘 놀고 있습니다. ㅋㅋㅋ

그런데 오빠는 나이가 조금 있어서 인지 관심이 없네요.

둘째도 좀 하더니 점점 흥미를 잃어가는 듯 하더라고요.

그래서 바로 다른 놀이를 즉석에서 만들어 봤습니다.

두번째 놀이!! 동물의 숲 카드놀이! (이게 대박이네요)

네 정말 즉석에서 만든 놀이인데요. 이게 생각보다 재미있어 무려 10번도 넘게 진행을 했습니다.

먼저 게임하는 방법을 소개해 드릴께요.

카드를 바다 / 강 / 연못, 폭포 로 나눕니다.

그리고 참여하는 인원들에게 각각 바다4장, 강4장, 연못4장을 나누어 줍니다.

그리고 자신이 가지고 있는 패를 살펴본 후 금액이 가장 낮은 2개의 패를 버립니다. 

그럼 1인당 10장씩을 가지게 됩니다.

요렇게 패가 만들어 지는 것이죠.
(둘째는 요렇게 패를 펴지 못해 고전을 하고 있네요)

그럼 각각 1장씩 금액이 보이지 않게 (그림자가 보이도록) 중앙에 카드를 내려 놓습니다.

이때 까지는 상대방이 낸 카드의 금액을 모르기 때문에 흥미 진진하게 기다렸다가 하나, 둘, 셋 하며 동시에 카드를 뒤집는 것이죠.

뒤집었을 때 가장 큰 금액의 물고기 카드를 낸 사람이 바닥의 모든 카드를 가져가게 됩니다.

단순하죠? ㅋ

그리고 다음 부터는 바로 전 턴의 승자는 바닥에 카드를 제일 먼저 내려놓아야 합니다. 이전 턴에서 이겼기 때문에 약간의 패널티를 주는 건데요, 이렇게 되면 다른 사람들이 이전 턴의 승자가 낸 카드의 그림자를 보고 물고기를 예측할 수 있게 됩니다. 그럼 게임이 좀 더 공평해 지겠죠?

처음 손에 들어오는 패가 좋을 수록 유리하긴 하지만 작전을 잘 짜면 재미있는 게임 진행도 가능합니다.

만약 바닥에 내려놓은 카드의 높은 금액이 같은 경우가 있다면 해당 턴의 코든 카드는 누적이 된채로 keep 하게 됩니다.

다음 턴의 우승자가 모두 가져가는 것이죠.

이렇게 되면 게임이 정말 흥미 진진해 집니다. 점수가 누적된 만큼 욕심이 나기 때문에 본인이 가진 카드중 제일 높은 금액의 카드를 낼 가능성이 높아지는데 만약 상대방도 나랑 같은 금액 (최고금액인 15000원) 을 낸다면?
또 누적이 되겠죠?
만약 내가 가지고 있는 패에서 그 다음 턴까지 버틸 자신이 없다면 일찌감치 포기하는게 나을 수도 있지요 ㅋ

암튼 직접 해보니 생각보다 재미있습니다.

이전 턴의 승자가 먼저 바닥에 상어 지느러미를 내려 놓으며 이번에도 내가 무조건 이길거야 라면서 너스레를 떱니다. 상대 플레이어 들은 기가 죽어 200원, 300원 짜리로 이기길 포기하고 턴을 넘기려 하지만 실상은 1500 원 짜리 빨판상어에게 졌다는 것을 알면 당황하는 것이죠. 빅잼입니다. ㅋㅋ

동물의 숲에 나오는 물고기를 빠삭하게 꾀고 있는 저와 아이들은 그림자만 봐도 '와~ 와~' 거리는데 당췌 몰라 어리둥절 하는 아내를 보는 것도 정말 재미있네요. ㅋㅋ

소개해 드리는 게임의 룰이야 제가 정해서 소개를 해드리지만 가족끼리 모여서 직접 룰을 정해가면서 놀면 재미가 두배가 되지 않을까요? 예를 들면 이번 턴은 민물고기로 상대한다 든지... 최저 금액이 승리한다든지 말이죠 ㅋㅋ

이게 입담이 좋은 분들, 포커 잘치시는 분들, 원래 뻥이 좀 있는 분들은 더 재밌게 할 수 있을 것 같습니다.

막내 녀석도 처음에는 '이거 좋은건데..잉.. ' 하고 내면 정말 좋은거였는데 나중에는 당췌 어떤 카드를 낼 건지 속을 모르겠더라고요. ㅋㅋㅋ

8살짜리 꼬마녀석이 본능적으로 포커페이스를 체득하였네요 ㅋㅋ

게임이 끝나면 이렇게 자신이 획득한 카드를 깔아놓고 정산을 하기 시작합니다. 그리고 점수가 가장 높은 사람이 승자가 됩니다.

위의 판은 보나마나 제가 졌군요. ㅎ

직접 만든 카드놀이를 하며 정말 즐거운 저녁시간을 보냈습니다. 둘째는 내일 일어나자마자 또 할꺼라면서 흥분을 가라앉히지를 못하네요 ㅋㅋ

어쨌든 열심히 만들었는데 네식구가 모두 너무나 즐거운 시간을 보낼수 있어서 너무나 좋았습니다.

여러분들도 함께 즐기실 수 있도록 PDF 로 만들어서 올리니 프린트 하셔서 가족분들과 즐겨 보시기 바랍니다.

<위 파일 3개를 모두 다운로드 받으신 뒤 '동물의숲카드_물고기.zip' 파일을 압축해제하시면 됩니다>

또는

아래 링크에서 직접 확인도 가능합니다.

drive.google.com/file/d/1Ic9mFX8HXDpodkFTq4LYiFhTOdTOukWa/view?usp=sharing

코로나로 인해 자녀들이 집에 있는 시간이 늘어 핸드폰만 만지작 거리는 것이 고민이신 분들... 한번 시도해 보시면 어떨까요? 가족끼리 웃고 떠들 수 있는 놀이거리가 하나 늘어난다면 그만큼 소중한 추억과 기억을 쌓을 수 있지 않겠습니까?

전 아내와 아이들모두 함께 떠들며 웃을 때 정말 행복함을 느낀답니다.

모두가 힘든 시간이지만 꿋꿋히 이겨내시길 바랍니다.

그럼 이만~

2020/12/17 - [DIY] - [아빠의요리] 코로나 집콕 간식 '감동란' 만들어 주기

2021/01/03 - [DEV/Adobe Script] - [포토샵스크립트] 코딩을 통하여 '모동숲 카드' 만들기

2020/08/27 - [DEV/VBA] - 재택근무 필수 엑셀 "자리안비움" - 윈도우 꺼짐 방지

2020/04/17 - [DEV/VBA] - [vba] 초등학교 연산 문제 자동 출제, 이번엔 뺄셈에 도전