컴퓨터는 배열로 표현된 직사각형 형태의 데이터를 처리하는 걸 좋아하며, 이는 그래픽에서도 예외가 아니다.
그러나 사람이 생각하는 개념을 그래픽 개체의 형태로 표현하다 보면 직사각형이 아닌 임의의 모양의 그래픽을 찍어야 할 일이 생긴다.
게임에서는 스프라이트가 좋은 예이고, 굳이 게임이 아니더라도 GUI 환경에서는 아이콘이라든가 심지어 customized 마우스 포인터도 그런 부류에 속하는 그래픽이다.

이런 그래픽은 결국 큰 직사각형 안에서 투명색을 제외한 나머지 색상을 찍는 방법으로 처리하는데, 그 구체적인 테크닉은 역사적으로 아래와 같은 세 양상을 거치며 바뀌어 왔다.

1. 모노크롬이나 그에 준하는 저색상: 비트 연산

그림을 두 장 준비한다. 그리고 그 두 장을 화면에다 그냥 copy만 하는 게 아니라, 화면에 이미 있는 픽셀과 비트 연산을 하여 그 결과를 찍는다. 이것을 raster operation이라고 하는데, 비트 연산은 CPU-friendly한 작업이기 때문에 컴퓨터가 나름 빠르게 수행할 수 있다.

준비해야 하는 그림은,
찍어야 할 내용이 그려져 있고 배경은 '검은색'(0)으로 처리되어 있는 '원래 비트맵'과,
원래 비트맵하고는 정반대로 배경은 무조건 '흰색'(1)이고 내가 차지하는 스프라이트 영역은 '검은색'(0)으로 처리되어 있는 '마스크 비트맵' 이렇게 둘이다. 마스크 비트맵은 1 아니면 0만 있는 모노크롬이다.
(따라서 '원래 비트맵'만으로는 검은색이 배경인지 아니면 스프라이트가 실제로 차지하는 검은색인지 알 수 없다.)

화면에다가는 먼저 마스크 비트맵을 AND 연산으로 그린다. 원래 화면에 있던 픽셀이 X라면, 마스크에서 배경으로 처리된 픽셀은 X AND 1이므로 X가 그대로 남고, 0이면 0이 되어 검은색이 된다.
즉, 마스크 비트맵에 대한 AND 연산은, 스프라이트가 칠해져야 할 영역만 시꺼멓게 만드는 효과를 낸다.

그리고 다음으로 이 자리에다가 원래 비트맵을 XOR 연산으로 그린다.
0 XOR X = X이므로, 이 연산을 수행해 주면 화면이 0으로(특히 마스크 비트맵 AND 연산으로 인해 0이 된) 시꺼먼 곳은 원래 비트맵이 그대로 그려지고, 원래 비트맵이 0인 배경은 아무 변화가 생기지 않는다.

사용자 삽입 이미지

그림의 출처는 위키백과.
이로써 스프라이트가 멋있게 그려졌다.
도스용 게임 중에 <위험한 데이브>는 이런 초보적인 XOR 방식으로 스프라이트를 찍었기 때문에, 검은 배경이 아니라 두 스프라이트가 겹치면 화면에 잔상이 남곤 했다.

옛날 윈도우 9x 시절에.. 컴퓨터 메모리가 많이 부족해서 하드디스크 스와핑/thrashing이 일어나고 프로그램의 각종 아이콘들이 그려지는 게 눈에 보일 때는... 아이콘이 차지하는 영역이 먼저 시꺼매지거나 반대로 잠깐 하얗게 번쩍이는 걸 볼 수 있었다. 흠, 프로토스 건물도 소환이 끝났을 때 실루엣이 허옇게 번쩍이다가 원래 형태가 드러나는데...;; raster 연산을 더블버퍼링 없이 화면에다 바로 그리다 보니, 컴퓨터 속도가 느려졌을 때 그 중간 과정이 눈에 띄는 것이다.

검정에다가 원래 비트맵의 색을 합성할 때는 이론적으로 OR을 써도 되는데 XOR이 의도적으로 쓰이고 있다.
이는 XOR이 유용하기 때문이다. XOR 1은 비트를 반전시켜 준다는 특성상, XOR 연산으로 그린 그림은 거기에다 XOR을 한번 더 해 주면, 다른 곳에 영향을 주지 않고 자기가 차지하고 있던 영역에서만 완전히 지워진다.

XOR 연산은 컴퓨터의 입장에서는 매우 부담이 가볍기 때문에, 마우스 선택 영역을 나타내는 점선 사각형이라든가 창 크기를 조절하는 작대기처럼 수시로 업데이트를 해 줘야 하는 비주얼 효과를 나타낼 때 즐겨 쓰인다.
아니, 텍스트 블록이라든가 깜빡이는 커서(캐럿)조차도 반전 사각형이니까 XOR이다.

마우스 포인터도 XOR 연산이다. 텍스트 입력란을 뜻하는 I자(beam) 모양의 마우스 포인터는 검은색이 아니라 배경색에 대한 반전색이다. 마스크 비트맵 값을 0이 아닌 1로 둬서 배경을 지우지 않은 상태에서 XOR 비트맵도 1로 해 주면 배경색이 반전되는 효과가 난다. ^^;;

XOR 연산은 디지털 컴퓨터가 존재하는 한 그래픽에서 언제까지나 없어지지 않고 쓰일 방식이긴 하지만... 오늘날은 다소 촌스러운(?) 것으로 간주되고 있기도 한다. GPU님이 계시니 화면 비주얼을 굳이 CPU 친화적인 방법만 고집할 필요는 없는 듯. 그래서 요즘은 뭔가 선택 영역을 나타낼 때 알파 블렌딩을 동원하여 다 옅은 파란 배경 + 더블버퍼링으로 대체되는 추세이다. 화면 전체의 DC를 얻어와서 XOR 연산을 시키는 건 Aero 환경에서는 오히려 성능을 더욱 떨어뜨리는 짓이기도 하니 말이다.

2. 모노크롬 이상 16~256색 사이: 컬러 키(color key)

그 후 컴퓨터의 그래픽 카드의 성능이 향상되면서, 256색 시대가 열렸다. 256색은 팔레트 조작이라는 과도기적인 괴악한 개념을 도입한 걸로도 유명하다.
색깔이 적당히 많아졌기 때문에, 비트맵에서 256색 중 하나만 투명색으로 예약하여 쓰지 않고 나머지 색은 그대로 찍게 하는 방식이 유리하다. 마스크 비트맵 따위를 번거롭게 구비할 필요가 없다. 또한 256색은 RGB 값이 아니라 인덱스 기반 컬러를 쓰기 때문에, xor 반전 연산이 어차피 그렇게 큰 의미를 지니지도 않는다. (실제 색깔값이 반전되는 게 아니라 팔레트 인덱스 번호가 반전되기 때문)

256색 전용으로 유명한 gif 그래픽 파일이 이런 컬러 키를 지정하여 투명색을 지정할 수 있다.
윈도우 API에도 비트맵이나 아이콘의 (0, 0) 위치 픽셀을 투명색으로 간주하고 그려 주는 함수가 있으며, SetLayeredWindowAttributes 함수는 컬러 키를 지정하여 해당색을 투명하게 처리함으로써 non-rectangular 윈도우를 만드는 효과를 내어 준다. region을 만들지 않고도 동일한 일을 할 수 있다는 뜻이다.

3. 트루컬러: 알파 채널

투명색 처리의 최종 완전체는 바로 알파 채널이다. 이건 과거의 픽셀 raster operation과는 차원이 다르며, 컴퓨터가 빨라진 정도를 넘어 그래픽 가속을 위한 별도의 GPU까지 등장하면서 가능해진 궁극의 기술이다.
매 픽셀에다가 이분법적인 투명 여부가 아니라, 이 픽셀이 배경과 얼마나 짙게 오버랩될지 반투명 등급 자체가 추가로 들어간다. RGB에 이어 A까지, 가히 색깔의 4차원화인데, 기계 입장에서는 한 픽셀당 딱 정확히 32비트이니 처리하기에는 다행히 좋다.

256색을 초월한 천연색 그래픽에는 워낙 많은 개수의 색상이 쓰이기 때문에.. 그 중 딱 한 색깔에다가만 컬러 키를 부여하는 게 무의미하다. 그리고 마치 글꼴에도 안티앨리어싱을 하듯, 스프라이트도 경계가 배경색과 부드럽게 융합해야 트루컬러의 진정한 의미가 살아난다. 그래서 알파 채널이 필요한 것이다.

윈도우 98에서 알파 채널을 적용한 비트맵 찍기라든가 그러데이션을 한번에 처리하는 API가 처음으로 추가됐다. 프로그램의 제목 표시줄에 그러데이션 효과가 윈도우 98에서 처음 추가되었는데, 바로 이 API를 쓴 것이다.
그리고 윈도우 XP에서는 알파 채널이 적용된 확장 아이콘이 처음으로 도입되었고, GDI+는 그리기 기능에 전반적으로 알파 채널을 염두에 두고 설계되었다. 하지만 GDI의 기본적인 벡터 드로잉 함수는 그런 새로운 기술로부터 소외되어 있으니 안타까울 뿐.

윈도우 비스타는 48*48도 모자라서 아예 256*256 크기의 아이콘을 지원한다. XP 때부터 이제 아이콘 하나가 2~3만 바이트에 달하는 시대가 됐는데(윈도우 3.1 시절에는 1~2천 바이트.. -_-), 전통적인 ico는 bmp와 같은 '무압축 포맷'인지라 256*256 크기의 32비트 픽셀을 저장했다간 크기를 감당할 수가 없기 때문에, ico 포맷은 내부적으로 png 파일도 포함할 수 있게 구조가 확장되었다.
gif를 대체하는 새로운 이미지 포맷인 png는 알파 채널을 지원한다. 그 자그마한 아이콘 하나도 전문 그래픽 디자이너가 포토샵으로 만들어야 하는 시대가 도래한 지 오래이다.

윈도우 내부적으로는 아이콘과 마우스 포인터 파일은 거의 동일한 포맷으로 간주된다. 아이콘은 이미지 이미지 비트맵과 마스크 비트맵 이렇게 둘 들어있는 형태이며, 마우스 커서는 거기에다 센터 위치가 추가되고.. 애니메이션 포인터는 gif스럽게 프레임이 더 추가되겠구나.
알파 채널이 등장하면서 마스크 비트맵은 존재 가치가 상당수 퇴색하긴 했으나, 오늘날에도 고전 테마(XP의 Luna, 비스타의 Aero 따위가 없는)에서 아이콘을 찍을 때라든가 disabled 상태 같은 변형 상태를 찍을 때 참고 정보로 쓰이기 때문에, 완전히 필요가 없어진 것은 아니다.

요컨대 오늘날은 기술 발전의 정도에 따라 최소한 세 가지 형태의 투명색 표현 기법이 쓰이고 있는 셈이다. 흥미로운 사실이다.

Posted by 사무엘

2011/01/24 07:35 2011/01/24 07:35
, , ,
Response
No Trackback , 7 Comments
RSS :
http://moogi.new21.org/tc/rss/response/454

Trackback URL : http://moogi.new21.org/tc/trackback/454

Comments List

  1. 주의사신 2011/01/24 09:26 # M/D Reply Permalink

    GDI+와 DirectX를 연동하면서 알게 된 하나 특이한 사실이 있습니다.

    GDI+는 색을 하나 표현할 때, ARGB로 표현하는데, DirectX는 RGBA로 표현을 합니다. 그래서 GDI+의 색을 DirectX의 색으로 바꿔 줄려면, 8비트 한 바퀴 돌려 줘야 합니다.

    가끔 MS 제품들을 쓰다 보면, "왜 같은 회사 제품들이 이렇게 달라 싶을 때가 있지요..." 사람이 많아서 그런가 봅니다.

    1. 사무엘 2011/01/25 22:20 # M/D Permalink

      사람이 많아서 그런 것 맞습니다.
      같은 회사에서 만든 제품끼리 충돌하는 일이 생기는 것도 새삼스러울 게 없지요.

      그런데 ARGB와 RGBA는.. 이거 뭐 endianness의 차이도 아니고 신기하군요. ^^;; 둘 다 이제 하드웨어 가속 기반으로 돌아가는 건 마찬가지일 텐데.
      RGBA 각 요소를 어느 순서대로 나열하고 각각 몇 비트를 할당하느냐.. pixel format이란 게 그래픽 세계에서의 '문자 인코딩' 같은 개념이 돼 있는 듯합니다.

  2. 김기윤 2011/01/24 11:58 # M/D Reply Permalink

    재밌게 읽었습니다.

    1. 비트연산은 저렇게 두 단계로 주는 것이 기본이었군요. 아, 어쩐지 WinAPI에서 BitBlt함수(맞나?)로 한번만에 뭔가를 시도했는데 원하는 결과가 전혀 안나왔던 기억이... XOR 연산할때는 검은색 배경에다가 하는 것도 기본이었군요. 그동안 대충 생각하고 했던 삽질들이 기억나기 시작합니다......

    2. DirectDraw 를 쓰면서, 반투명 구현하겠답시고 bmp이미지에다가 격자모양으로 #00FF00 (통칭 Lime 으로 불리는 색)을 박은 기억이 나네요.

    3. D3D랑 png 하니까 생각났는데, 현재 하고 있는 프로젝트에서는 흠좀무한 짓을 하고 있습니다.. 초기에는 포토샵으로 작업해서 png 로 저장해서 불러오기로 한거 맞지? 응. 알파채널 먹히는건 png 뿐이니까. 이런식으로 얘기가 갔는데, 같이 하시는 프로그래머의 괴물(..)같은 업적으로 인해서... 왠걸.. 포토샵 psd 파일 그대로 쓰기로 얘기가 바뀌었습니다 ㄱ-.. 흠좀무. 레이어정보를 그대로 이용하는 흠좀무한 짓을...

    1. 사무엘 2011/01/25 22:20 # M/D Permalink

      BitBlt와 비슷한 급의 비트맵 전송 함수들이 래스터 연산을 지원합니다. 스프라이트를 찍으려면 한 단계만으로는 안 되고 두 단계까지 가야 하죠. 생각을 해 보니까 래스터 연산 -> color key -> 알파 채널 양상을 글로 정리하는 게 재미있어 보여서 글을 썼는데, 영문 위키백과에는 이미 그 개념이 잘 정리가 돼 있었다는 사실. ㄲㄲ

      IDirectDrawSurface에는 말씀하신 것처럼 컬러 키에다가 팔레트 등, 256색스러운 정보들을 설정하는 메소드들이 들어있습니다. ^^
      그나저나 그 '존잘' 프로그래머분은 포토샵 문서 파일 포맷을 알거나 최소한 그런 거 다루는 라이브러리를 갖고 계신가 보군요.;;

    2. 김기윤 2011/01/25 23:28 # M/D Permalink

      현재 프로젝트에는 아예 Adobe Photoshop File Formats.pdf 라는 파일이 들어있습니다. 저는 그냥 대충 훑어본 정도(정독은 엄두를 못내겠더군요. 88페이지-_-)입니다...만, 그 pds 리더부분의 소스코드 모양새라던가 특징을 볼 때 직접 짠 것으로 보입니다. ㅎㄷㄷ;;

  3. 정 용태 2011/01/24 20:56 # M/D Reply Permalink

    위험한 데이브 할때 몬스터들이랑 헤딩해서 자폭하면 화면에 잔상이 남았던게 기억나네요 ^^ 20000점 목숨 벌려고 보석 잔뜩 있는 보너스 스테이지도요ㅋ alley cat 할때도 비슷한 현상을 겪었던것 같기도 하고... 윈도우 98시절에는 동영상 오버레이 색으로 분홍색을 많이 썼던... 동영상 플레이어 위에서 그림판으로 분홍색으로 그리면 그린 색상이 안나타나고 동영상이 비쳐보이더군요...

    1. 사무엘 2011/01/25 22:20 # M/D Permalink

      맞아요. 저도 그거 다 기억하고 있답니다. ^^;; 보석 잔뜩 있는 보너스 스테이지는 원래 level 8의 warp zone이지만, 그게 level 6에 있다는 특성상, level 6에서도 트로피를 먹지 않고 jetpack으로 문으로 들어가면 사기-_-로 진입 가능합니다.

      XP까지만 해도 동영상 오버레이 색상이라는 게 있었고, 동영상 장면은 다른 윈도우와는 따로 노는 듯했으며 print screen 키로 바로 캡처조차 되지 않았습니다만... 비스타부터 세상이 완전히 바뀌었죠. 그래픽 드라이버 계층이 장족의 발전을 이뤘습니다.

Leave a comment
« Previous : 1 : ... 1813 : 1814 : 1815 : 1816 : 1817 : 1818 : 1819 : 1820 : 1821 : ... 2204 : Next »

블로그 이미지

그런즉 이제 애호박, 단호박, 늙은호박 이 셋은 항상 있으나, 그 중에 제일은 늙은호박이니라.

- 사무엘

Archives

Authors

  1. 사무엘

Calendar

«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31        

Site Stats

Total hits:
3043874
Today:
1066
Yesterday:
2435