알파 블렌딩

 알파, 알파 채널, 알파 블렌딩과 같은 말들을 종종 들어 보셨을 것입니다. 하지만 일반적인 2D 도트 그래픽으로 시작한 사람들은 이 알파 효과에 대해서 잘 모르는 경우가 많습니다. 알파를 잘 다루게 되면 픽셀로 구성되는 거칠고 각진 도트 그래픽의 한계를 상당 부분 극복할 수 있으며, 화려하고 다양한 효과를 주어 고급스러운 이미지를 만들 수 있습니다.

 그러면 알파 블렌딩에 대해 차근차근 알아 보도록 하겠습니다.

* 투명색의 개념

 알파효과를 이해하기 전에 우선은 투명값에 대해서 좀 알아둘 필요가 있습니다. 일반적인 그림 이미지는, 그림 전체에 색깔들이 꽉 차 있게 됩니다. 보통은 배경에도 배경의 그림이나 색깔이 들어가거나, 아니면 하다못해 그냥 흰색이라도 들어가 있게 되지요.

 하지만 배경 위에 캐릭터나 기타 그림이 놓여야 하는 게임의 특성상, 앞에 나오는 그림에 배경이나 배경색이 들어가 있다면 이상해보일 것입니다. 게임이 아니라 웹페이지 등에서도 뒤에 가려지는 그림과 앞에 놓여지는 그림의 구조는 흔하게 사용됩니다. 이러한 겹치는 구조를 레이어(Layer)라고 합니다. 포토샵의 레이어는 이러한 구조를 잘 보여주고 있지요.

 포토샵의 레이어는 자체적으로 필요없는 부분을 투명하게 처리하고 있어서, 그림이 그려지지 않은 부분은 투명하게 되어 뒷 레이어의 그림이 보이게 됩니다. 하지만 실제 게임이나 웹페이지에서는 이런 부분을 자동으로 처리해주지는 않기 때문에, 그림에서 필요없는 색깔은 빼 주어야 할 필요성이 생깁니다. 이렇게 빠져서 없어지는 색깔을 "투명색", 또는 "투명값"이라고 부릅니다. (영어로는 "Transparent color"라고 합니다. 포토샵에서 이런 단어가 있는 부분은 투명색이나 투명값, 혹은 투명도 조절에 관한 옵션이라고 보시면 되겠습니다)

 게임 그래픽에서 투명값은 여러가지 형태로 사용되는데, 보통은 하나의 특정 색깔을 지정하여 실제 출력시에 그 색깔만 투명하게 해주는 방법을 많이 사용합니다. 일반적으로 가장 많이 사용되는 색깔은 RGB값 255, 0, 255의 진한 핑크색입니다. 색값이 극단적이기 때문에 일반적으로 실제 그림에는 잘 사용할 일이 없으므로 이 색을 많이 사용하지요. 필요없는 부분을 이 색으로 채우면, 프로그램에서 이 색깔이 들어간 부분을 투명하게 처리해 줍니다.

 웹에서 사용하는 이미지 파일의 경우, 게임처럼 별도의 처리 과정이 준비되어 있지 않기 때문에 이미지 파일 자체적으로 지원되는 투명값을 사용합니다. 이렇게 투명값이 지원되는 이미지 파일 형식에는 GIF와 PNG 등이 있습니다. 포토샵의 "Save for web" 기능을 보면 투명값을 지정해주는 옵션이 있는데, 이것을 사용하면 레이어의 빈 부분을 그대로 투명처리 해주거나, 아니면 특정 색을 골라 빼서 투명처리를 해 파일을 만들 수 있습니다. 때때로, 이렇게 생성된 이미지파일 고유의 투명값을 그대로 받아들여 게임에서 사용하는 경우도 있습니다. 작업할 때에는 프로그램 쪽과 투명값을 어떻게 처리하는지에 대해 우선적으로 상의해 보는 것이 좋겠지요.

 

* 알파값이란 무엇인가

 색깔 하나를 투명색으로 지정하는 방법은 말 그대로 "완전히 투명한가" 혹은 "불투명한가"의 2가지 경우만을 표현할 수 있습니다. 이런 방식으로는 하나의 이미지 위에 다른 이미지가 겹쳐지면 나중에 찍힌 이미지에 먼저 이미지가 가려지게 됩니다만, 이런 단순한 방법으로는 표현에 많은 제약이 생깁니다. 

 당장 주위의 사물을 둘러보세요. 무엇인가 은은하게 겹쳐 보이고, 살짝 비쳐 보이는 것은 생각보다 굉장히 많습니다. 연기, 먼지, 물, 불, 구름, 빛, 얼음, 유리... 눈에 보이는 것 이외에도, 연출과 효과를 위해 여러가지로 과장된 표현을 넣어 이펙트를 만들어줘야 하는 게임이라는 매체에서는 더욱 다양하게 겹쳐지는 효과가 필요하게 됩니다. 이런 것들을 좀더 근사하게 표현하기 위해 알파값이라는 개념이 도입되기에 이릅니다.

 오늘날 컴퓨터로 표현되는 이미지는 R(빨강) 255단계, G(초록) 255단계, B(파랑) 255단계로 각각 구성되어 총 65535색을 구현할 수 있는 이른바 "RGB 컬러" 체계가 주류가 되어 있습니다. 보통은 이 3개의 색 채널을 혼합해 모든 색을 구성할 수 있지만, 여러 가지 그림을 겹치면서 보여줘야 하는 게임 등의 그래픽에서는 이 3개의 색상의 값 외에, 투명함의 정도를 나타내는 또 하나의 값을 부여하여 사용하게 됩니다. 바로 이것이 알파 값입니다. (기존의 것 위에 무엇인가 더해진다는 말을 할 때 '+알파'와 같은 표현을 쓰지요. 같은 맥락으로 보시면 되겠습니다.)

* 알파값의 원리

 보통의 알파값 처리는 단순히 뒤에(= 밑에, 먼저) 찍힌 이미지의 픽셀 색상값과 앞에(= 위에, 나중에) 찍힌 이미지의 픽셀 색상값 사이의 중간 색값을 계산하여 겹친 부분의 색상을 그것으로 바꿔 주는 것입니다. 일반적으로, 다음과 같은 색상값의 계산식을 통해 중간색의 색값을 뽑아내게 됩니다.   

R = 뒷 이미지 R / 2 + 앞 이미지 R / 2
G = 뒷 이미지 G / 2 + 앞 이미지 G / 2
B = 뒷 이미지 B / 2 + 앞 이미지 B / 2    

 RGB(0, 0, 0)의 검은 배경에 RGB(255, 255, 255)의 흰색 점을 찍었다면, 위의 계산식에서는 값이 RGB(122, 122, 122)인 회색의 점이 만들어집니다. 이것이 반투명해진 색의 값이 되는 것이지요.  

 위의 계산식으로는 '나누기 2'라는 공식을 통해 50%라는 딱 절반 농도의 반투명값이 만들어지는데, 이 나누어지는 수치를 조절함으로써 더 투명하게 만들거나 더 불투명하게 만들 수도 있습니다. 이것을 이미지의 모든 픽셀에 일괄적으로 적용하면 쉽게 반투명 이미지가 구현됩니다. 계산식이 언뜻 감이 오지 않는 디자이너 분들은 포토샵 레이어의 투명도 조절 기능을 떠올려 보세요.  

   

 이것은 알파 효과 중에서도 굉장히 기초적인 것이지만, 이것만으로도 게임에서는 꽤 많은 좋은 효과를 낼 수 있습니다. 초기의 모바일 게임에서는 용량의 제약과 기능의 미약함으로 이런 효과를 낼 수 없었지만, 신지소프트의 GNEX에서 처음으로 이 반투명값을 지원한 이래로 모바일에서도 전체 반투명효과는 많이 사용되고 있습니다. 하지만 이 전체 반투명 효과만으로는 표현할 수 없는 것들도 분명히 존재하며, 그것은 한동안 모바일과 같은 저성능 플랫폼의 대표적인 제약으로 꼽혀 왔습니다. 무엇이 문제였는지, 계속 알아보도록 합시다.

 

* 알파 채널

 위에서 언급한 중간값 산출 반투명 공식이 있다면, 사실상 알파 채널이 무엇 때문에 필요할까? 라는 의문을 가질 수도 있습니다.

 맞습니다. 중간값 반투명 공식에는 한계가 존재합니다. 이미지의 모든 픽셀을 일괄적으로 같은 농도로 조절해 버리는 전체 반투명 효과로는, 유리나 물, 그림자 등을 표현하는 것은 가능하지만 안개, 구름, 불, 빛 등등의 좀더 화려하고 강한 효과는 표현이 불가능합니다. 특히 반투명이라는 것은 기본적으로 원래의 이미지보다 색상값을 약하게 만들어 버리는 것이기 때문에, 강렬한 효과를 낼 수 없고 필연적으로 기존의 이미지를 약하게 보이게 만들어 버립니다. 이 때문에 알파 채널이라는 개념이 도입된 것입니다. 

 알파 채널은 한 마디로 이미지의 각각의 픽셀이 가진 원래의 색상 값이, 각각 어느 정도의 농도를 가졌는지 나타내는 수치값이라고 생각하면 됩니다. 이것 역시 0부터 255까지 총 256단계의 값을 가지게 됩니다.  

 보통의 RGB 컬러(65535색 = 실제의 현실을 모두 표현할 수 있다고 하여 트루 컬러라고도 함)는 R, G, B 각각의 색 채널당 256색, 즉 8비트씩의 정보를 가지게 되어, 총 8비트 x 3색채널 = 24비트의 정보를 가집니다. 보통 포토샵에서 RGB 컬러로 만든 이미지를 BMP 파일로 저장할 때에, 가장 높은 퀄리티가 '24bit'로 표시되는 것은 이 때문입니다.

 그러나 여기에 알파 채널이 들어가면, 투명도를 나타내는 256단계의 색값(=8비트)가 더해져 32비트 정보의 이미지가 됩니다. 일반 BMP 파일은 알파 채널 정보를 포함하지 못하기 때문에, 보통 이러한 알파 채널 정보를 포함시킬 경우에는 TIF나 TGA와 같은 파일포맷을 사용합니다. 주로 3D 게임이나 윈도우용 고해상도 게임에서 사용하는 방식입니다.  

  포토샵의 윈도우 중 Channels 윈도우를 보면 이 알파 채널의 구조를 손쉽게 이해할 수 있습니다. 모든 컬러를 표현하는 "RGB" 채널, 그리고 Red, Green, Blue의 채널이 있고, 아래쪽의 " " 버튼을 눌러 채널을 추가하면 바로 'Alpha 1" 이라고 표시되며 알파 채널이 추가되는 것을 볼 수 있습니다.  

 이때 위쪽의 색상 파레트를 보면 무조건 그레이스케일(흑~백 사이의 256단계로 나뉘는 회색 계통 색조)로 바뀌는 것을 볼 수 있는데, 알파 채널은 색상이 아니라 "투명도"를 나타내는 것이라는 점을 생각해 보면 이 그레이스케일이 바로 농도를 나타낸다는 것을 알 수 있을 것입니다. 전혀 빛이 나지 않거나 투명도가 없는 그림도, 바로 이 알파 채널에 그려진 회색의 농도에 따라 그 진하기와 투명도가 바뀌게 됩니다.  

 이렇게 만들어져 알파 채널이 적용된 이미지는 그 투명도를 바로 직접 볼 수 있는 방법이 별로 없기 때문에, 대개는 프로그램에서 알파 채널 정보를 읽어들여 그것을 적용하고 나서야 확인할 수 있게 됩니다. 따라서 이런 이미지를 만들었다면 실제 프로그램을 돌리면서 어떻게 출력되고 있는지 확인해두는 것이 중요합니다. 보통 이 정도의 이미지를 사용하는 작업이라면 프로그래머 측에서 이미지를 미리 볼 수 있는 툴 등의 수단을 제공해 주는 것이 일반적이지만요.

 도트 디자이너들이 실제로 이러한 32비트 알파 채널을 이용할 일은 사실 별로 없습니다만, 후에 좀더 고급 이미지 작업을 하게 될 때에는 이러한 작업이 필요해질 수도 있습니다. 우선은 원리와 구현 방법에 대해 확실하게 알아두고 넘어갑시다.

* 엣지(edge : 가장자리, 외곽) 처리

 실제로 게임을 만들다 보면, 모든 것을 도트로 직접 찍어서 표현할 수만은 없다는 사실을 알게 됩니다. 사진을 넣어야 할 때, 다른 사람이 그린 손그림이나 큰 그림 파일에서 이미지를 따와야 할 때, 특정 회사의 로고를 집어넣을 때 등등... 직접 찍지 않고 뭔가를 가져와야 하는 경우는 생각보다 많습니다.

 기본적인 모양이 4각형으로 되어 있는 도트의 특성상 조금이라도 도트가 어긋나면 계단 모양이 생겨나고 그림이 거칠어집니다. 그림이 그림답게 표현되기 위해서는 중간색의 도트를 계단 부분에 채워넣어 거친 부분을 완화시켜 주게 되는데, 이것이 이른바 안티 앨리어싱(Anti Aliasing)입니다. 스캐너로 스캔했거나 디지털 카메라, 캠코더 등으로 촬영하여, PC 화면에서 보게 되는 사진이나 그림 등의 이미지는 거의 이 안티 앨리어싱 처리가 되어 있는 상태라고 보면 됩니다.    

 여기까지만 보면 이것이 알파 효과와 무슨 관계가 있는지 조금 의아하게 느껴질지 모르겠습니다만, 게임 그래픽은 원하는 그림만을 여러개 겹쳐서 나타내어야 하는 그 특성상 '투명색'이라는 개념을 사용한다는 것을 떠올려 본다면 슬슬 이해가 될 것입니다.
 

 보통 도트로 직접 찍어 만들어낸 이미지는, 작업자 스스로 구분을 위해 경계선을 뚜렷하게 만들게 되기 때문에 투명색의 적용이 쉽습니다. 손쉽게 원하는 부분만을 깨끗하게 투명색으로 지정해줄 수 있고, 깔끔하게 원하는 부분만을 게임 화면에 나타낼 수 있죠. 하지만 위에서 언급했던 것처럼 다른 곳에서 가져온 사진이나 그림을 쓸 경우엔, 아마 다음 그림과 같이, 그림의 주변에 색찌꺼기가 달라붙어 있는 현상을 보신 분들이 많으실 겁니다.   

     

 몇 번 겪어보면 쉽게 이해되는 상황입니다만, 처음 겪을 때에는 상당히 이해하기 어려운 부분이기도 합니다. 특히 이것은 레이어 위에 직접 그려넣어 만들었다거나 하는 경우에 꽤 난감한 상황을 만들기도 합니다. 

 이 현상의 원인을 간단히 말하면 '컴퓨터는 단순하다'라는 이야기가 됩니다. 즉 투명색이 "RGB(255, 0, 255)라면, 무조건 저 값의 색만을 투명색으로 취급하기 때문이라는 것이죠. 색값이 RGB(255, 1, 255)로 단 1만 차이나도 투명 처리는 적용되지 않고 남아서 보이게 됩니다. 이러한 지저분한 외각 부분을 처리해 주는 방법을 보통 편의상 엣지 처리, 또는 외곽 처리라고 부릅니다(공식적인 명칭은 아닙니다).   

 포토샵의 레이어에는 기본적으로 알파의 개념이 적용되어 있어, 투명도와 농도를 표현할 수 있게 되어 있지만, 대부분 게임을 만들 때에는 그러한 투명도와 농도가 바로 적용되는 엔진은 흔치 않습니다. 특히 이것은 현재 도트의 주된 용도가 되어 있는 모바일 게임과 같은 저성능 플랫폼에서는 불가능에 가까운 부분입니다. 

이러한 저성능의 플랫폼에서는 주로 그림을 가공하는 방법을 사용해 외곽 처리를 해줍니다.

     

이와 같이 한줄의 라인으로 정리하거나   

  

 검은색을 적당히 굵게 해 주는 등의 방법이 있습니다. 바깥쪽은 투명과의 경계를 확실히 하기 위해 계단을 그대로 살리고 있지만, 내부 그림은 투명색과 경계지을 필요가 없기 때문에 자연스럽게 놔둘 수 있죠. 이것을 실제 사이즈로 보면 전체적으로 그렇게 어색해 보이지 않기 때문에, 이런 방법을 사용하기도 합니다.   

 하지만 알파 효과를 사용하면 마치 포토샵의 레이어와 같이 농도와 투명도를 자유롭게 설정할 수 있게 되기 때문에, 굳이 이렇게 그림을 열심히 가공하지 않아도 됩니다. 또한 일반적으로 포토샵에서 레이어에 그린 그림과 같은 느낌으로 레이어 처리가 가능해지므로, 결과물의 퀄리티도 매우 높아집니다. 이런 경우는 주로 위에서 설명한 것과 같은 알파 채널을 넣어서 TIF나 TGA 파일로 소스를 만들게 되는데, 굉장히 응용의 여지가 넓은 방법이며 아직까지도 주력으로 사용되고 있는 방법입니다.    

 그러나 휴대 콘솔이나 모바일 등과 같은 저성능 플랫폼에서는 속도나 로딩시간, 용량 등에서 문제가 되므로 이런 방법을 사용할 수는 없습니다. 그 때문에 편법으로 16비트 블렌딩이라는 방법을 사용하게 됩니다. 이에 대해서는 아래에서 자세히 알아보겠습니다.

* 저성능 플랫폼 게임에서 사용되는 각종 16비트 블렌딩 기법

 위에서 설명했듯 알파 채널을 사용하는 방법은 빠른 처리속도와 연산능력을 필요로 하며, 알파 채널이 포함되는 32비트 이미지를 소스로 사용하므로 리소스의 용량도 커지게 되어 저성능 플랫폼에는 적합하지 않습니다. 그렇지만 요즘의 주력이 되어 있는 NDS나 PSP에서는 알파 채널을 사용한 것 같은 알파 효과가 매우 본격적으로 사용되고 있으며, 심지어는 일반 휴대폰의 다운로드 게임에서도 이러한 알파 효과가 등장하게끔 되었습니다. 그렇다면, 과연 이러한 효과들은 어떻게 구현되는 것일까요?
RGB 색상 체계에서 가장 구분해내기 쉬운 색깔은 무엇일까요? RGB(0, 0, 0), 즉 검은색과 RGB(255, 255, 255)의 흰색, 이 두가지 색깔이 될 것입니다. 그렇기 때문에, 이미지를 만들 때 배경을 검은색으로 두고 픽셀값이 얼마만큼 검은색에 가까워져 있느냐를 투명도로 설정하면 일반적 알파 효과와 상당히 유사한 효과를 낼 수 있습니다.  

    

 이와 같이 소스를 준비해 봅시다. 왼쪽처럼 이미지를 만든 뒤, 완전한 검은색(0, 0, 0)은 투명에 해당하므로 이 부분을 지워내면 오른쪽처럼 됩니다. 이렇게 되면 알파 채널 같은 것을 준비하지 않아도 되므로, 보통의 256컬러, 또는 16컬러 이미지로도 충분히 만들 수 있는 소스입니다. 

 이렇게 만든 소스를 포토샵 레이어로 얹은 뒤, 레이어의 속성을 "Lighten"이나 "Screen"등으로 바꿔 봅시다.   

   

 보시다시피 검은색에 가까워질수록 그림이 투명해지고, 흰색에 가까워질수록 불투명해지면서 자연스럽게 빛나는 느낌이 나고 있습니다.

 이것은 위에 설명한 중간값 산출 공식을 변형하여, 위에 놓여지는 그림과 뒤에 비치는 그림 사이의 중간값을 임의로 강조, 변경시키는 것입니다. 이른바 16비트 블렌딩이라고 하는 것인데, 포토샵의 레이어 속성도 모두 같은 원리로 행해지는 것이며, 게임에서도 이러한 블렌딩 공식을 구현하여 포토샵처럼, 혹은 포토샵 이상의 색감을 내게끔 만들어서 처리하고 있습니다. 

 대표적인 블렌딩 공식 몇 가지를 소개합니다. 이 부분은 옛날 하이텔 전석환 님의 게시물에서 발췌했습니다. 디자이너에게는 크게 의미가 없다고 생각될지도 모르겠지만, 기본적인 원리와 어떤 구조로 이루어져 있는가를 이해한다면 보다 질 높은 결과물을 만드는데에도 도움이 되는 것은 분명할 것입니다.

 결과물의 색값을 Result, 뒷 배경의 색값을 BG, 앞의 그림 색값을 SPR이라고 합시다.

1. Color Dodge

 사용 분야 : 빛 계열(번개 계열 포함)의 효과 및 마법에 가장 적합 

 공식 : Result = (BG*MAXDAC) / (MAXDAC-SPR) 

 바탕색의 DAC가 높으면 높을수록 효과 본연의 색깔이 나와주는 것이며, 바탕색이 어두우면 어두울수록 Dodge 효과가 약해집니다. 강렬한 표현을 하려면 배경과 마찬가지로 SPR의 전체적인 밝기가 높아야만 원래 추구하는 이미지를 전달하게 됩니다. 주의할 점은 원래 SPR 이미지의 색값이 많이 왜곡되므로, 이미지의 섬세한 부분은 많이 무시되게 됩니다. 

2. Lighten 

 사용 분야 : SPR 본래의 색상이 필요한, 색의 왜곡이 없는 다중 투명효과.  

 공식 : Result = max(BG, SPR) 

 상당히 간단한 공식으로, BG와 SPR 중 더 큰 값을 고르면 됩니다. 테이블이 필요없으므로 처리속도가 약간 빠른 것도 장점이며, 다른 효과들과 달리 색상의 왜곡이 전혀 없으므로 원래 이미지에 가장 근접한 표현을 할 수 있습니다. 다만 BG의 밝기에 따라 생략되는 부분도 생겨나기 때문에, 실제 SPR 이미지에서 많은 부분이 축소/생략되는 단점도 있습니다. 

3. Screen 

 사용 분야 : 연기처럼 부드럽고 연한 소재의 효과에 적합합니다. 구름 등... 

 공식 : TempSum = (MAXDAC-max(BG,SPR))/MAXDAC*min(BG,SPR)            Result = max(BG,SPR)+TempSum 

 Lighten의 개량형에 해당합니다. Lighten은 SPR의 원래 색상을 과장하지 않지만, Screen은 어느 정도 색상을 높여서 표현하기 때문에 좀 더 자세한 표현이 가능합니다. 

4. Dodge-Screen 

 사용 분야 : 불 계통의 모든 효과와 화염계 마법 등등 

 공식 : Dodge와 Screen을 결합. 

 Dodge로 일단 BG의 색을 강조시켜 준 다음, SPR 이미지에도 Dodge를 걸어주고 Screen 방식을 이용해 밝은 색 위주로 깨끗하게 정렬해 줍니다. 쉽게 설명하면 Dodge로 BG값을 올린 뒤 Screen값을 한번 더 먹여준 것입니다. 하지만 이런 효과를 여러 차례에 걸쳐 시행하면 처리속도가 느려지므로 테이블을 만들어서 한번에 처리하도록 해야 합니다. 

5. Screen-Dodge 

 사용 분야 : 위와 같지만 검은색 배경에서 잘 나타나지 않는 것을 보완함 

 공식 : 위 5번과 같으나 순서만 바꿔줍니다. 

 

 일단 Screen을 BG에 걸어준 다음 Dodge로 강조시켜줍니다. 플레이스테이션 등의 게임기에서 사용되는 것과 같은 효과입니다. 

6. Dodge-Burn 

 사용 분야 : 불에 타서 시커멓게 그을린 효과, 불에 타면서 나는 연기. 

 공식 : Result = (BG*(MAXDAC-SPR))/MAXDAC; 

 Color Dodge 효과를 반대로 응용한 것. Dodge와는 달리 SPR의 색상이 높을수록 BG 색상을 어둡게 만들어 줍니다. 반대로 SPR 색상이 낮을수록 BG 원래의 색상이 표현되게끔 왜곡을 약화시킵니다. 좀 더 강한 느낌을 내려면 (MAXDAC-SPR)과 (MAXDAC), 분자 분모부를 제곱 연산합니다. (경험상 3제곱 연산이 적당합니다) 

7. Difference 

 사용 분야 : 암흑 마법, 독, 마비 등의 효과 

 공식 : Result = (max(BG,SPR)-min(BG,SPR)) 

 BG와 SPR 색상의 편차를 그대로 대입시키는 간단한 공식입니다. 상태 이상시 캐릭터에 사용하면 좋습니다. 

8. GrayScale(이미지 흑백으로 만들기) 

 사용 분야 : 돌이 되었을 때, 캐릭터 사망시 Portrait 표현 등 

 공식 : Result = (R*30 + G*59 + B*11) / 100 

 그림을 흑백 느낌으로 만들어주는 공식. 포토샵의 GrayScale 만들기와 같습니다. 

 사실상 이러한 16비트 블렌딩도 알고 보면 이미 꽤나 예전부터 구현된 방식으로서 결코 첨단 기법이라고 할 수 없는 것이지만, 국내의 게임업계에서는 이런 지식의 공유가 잘 이루어지지 않고 있는 것이 현실입니다. 이런 정도의 기법은 요즘에는 "당연하게" 사용되어야 하는 수준의 것이며, 디자이너로서는 이런 기법을 충분히 숙지하고 퀄리티 있는 결과물을 낼 수 있게 실력을 닦아 두는 것이 중요합니다. 

 

 이 방식은 알파 채널 등을 포함할 필요도 없고 요구되는 성능에 비해 효과가 좋아서, 구현되는 방법에 있어서 조금씩 다르긴 하지만 최근 다양한 플랫폼에 널리 이용되고 있습니다. 다만 이 효과는 역시 채널을 사용하는 알파 효과에 비해 몇 가지 단점이 있어서, 그에 대해 확실하게 알아두고 넘어가야 합니다.

* 진한 원색을 표현할 수 없다    

   

  이런 16비트 블렌딩 방식은 기본적으로 대개 흰색 또는 검은색에 가까워질수록 투명/반투명하게 만들어주는 효과를 이용한 것입니다. 색값의 기준을 투명도로 사용하기 때문에, '흰색 / 검은색에 어느 정도로 가까운가' 뿐이기 때문에, 빨간색과 같은 선명한 원색은 투명도가 적용되면서 묽어져 버립니다.   

* 검은 색을 넣을 수 없다    

  마찬가지 이유에서 나타나는 현상입니다. 검은 색을 투명의 기준으로 사용하므로, 이미지에 검은색이 들어가면 투명해져 버리기 때문에 검은 색을 제대로 표시할 수 없게 됩니다. 하지만 보통 그래픽에서 검은색은 매우 자주 사용되는 색깔이므로, 이런 경우에는 투명도의 기준을 검은색이 아니라 흰색으로 바꾸어서 검은색을 표시하는 모드를 프로그램쪽에서 준비해 주는 것이 보통입니다. 다만 이 경우는 마찬가지로 흰색을 제대로 표현할 수 없게 됩니다. 포토샵 레이어의 "Multiply" 속성이 이와 같은 현상을 보입니다.   

  

* 겹치기가 어렵다    

  이것은 프로그램 측이 좀더 신경쓰면 해결은 가능한 부분이지만 기본적으로 좀 더 많은 처리가 필요하므로 쉽지 않은 부분입니다. 하나의 검정색 투명 처리로 인해 만들어진 반투명 영역에, 다른 반투명 처리가 겹쳐질 경우 다른 반투명처리가 사라지거나, 제대로 보이지 않게 되는 현상입니다. 근본적인 원인은 블렌딩값의 계산을 배경값 하나에만 적용해 계산을 하기 때문인데, 이것을 개선하려면 뒷 레이어에서 블렌딩값 계산이 끝난 뒤의 최종적인 픽셀값을 얻어, 그것을 위쪽의 이미지와 함께 다시 알파값을 계산하는 처리가 되어야 합니다. 디자이너에게는 어려운 개념이므로, 이 부분은 프로그램측에 "겹치기가 되게 해달라"고 요청하는 정도로 끝내면 됩니다.

* 정리 

 알파 블렌딩 효과는 픽셀을 기본으로 하여 이루어지는 컴퓨터 그래픽의 거친 느낌을 부드럽게 해주고, 화려하고 자연스러운 여러가지 특수 효과나 이펙트를 가능하게 해주는 매우 좋은 효과입니다. 휴대 콘솔이나 휴대폰 등 저성능 플랫폼에서도 이제 본격적으로 사용되기 시작하고 있으며, 갈수록 그 성능은 발전해 갈 것인만큼 이러한 효과도 점점 더 널리 사용되게 될 것입니다. 2D/3D, 모바일/콘솔/PC 등 실로 다양한 방면에서 사용되는 테크닉인만큼, 조금 길고 복잡하지만 포괄적으로 설명해 보았습니다.  

 도트 디자인을 하는 여러분들도 단순한 반투명 효과만이 아니라, 알파 효과의 원리와 응용에 대해 좀 더 폭넓게 이해한다면 앞으로의 그래픽 작업에도 많은 도움이 될 것입니다.