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

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

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

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

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

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

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

제가 사용할 글자는 총 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