픽셀(점)의 힘

『Beautiful Web Design: 좋아 보이는 웹사이트를 만드는 디자인 원칙』의 번역자이신 이광우님께서 책과 관련한 연재물을 공개하셔서 옮겨 게재합니다. ^^

 

이 세상의 모든 형체(Shape)는 점, 선, 면으로 이뤄져있다는 건 익히 아시는 내용일 겁니다.

점과 점 사이를 이으면 선이 되고, 선의 시작과 끝이 맞붙으면 면이 되는 원리인거죠.

뭐… 개인적으로는 선이고 면이고 다 필요 없고, 세상은 그냥 ‘점’으로만 되어 있는 것 같습니다. ^^ (점이 모이면 선이 되고, 면이 되니까요.)

모니터 화면에서는 이런 ‘점’을 픽셀(Pixel)이라고 부르죠.

꼭 그래픽 디자인의 영역이 아니라고 해도, 일반분들도 ‘픽셀’의 개념을 많이 아시게 된 것은 이미 오래된 일입니다.

모니터 부터 LCD TV, 휴대용 기기의 액정에 이르기까지 이미 우리는 어쩌면 ‘점’ 보다도 ‘픽셀’과 더 가까이 살고 있는지도 모르겠네요.

이런 픽셀을 기반으로 작품을 형성하는 것을 ‘픽셀 아트(Pixel Art)’라고 합니다.

위키디피아의 정의를 따르자면, 픽셀 아트란 디지털 아트의 한 형태이며,  한 이미지를 픽셀 수준에서 편집이 가능한 래스터 방식의 그래픽 소프트웨어(쉽게 생각해서 포토샵 입니다)를 이용하여 만드는 것을 말합니다. 대게 오래된 컴퓨터나 비디오 게임, 그리고 핸드폰 게임등에서 이런 그래픽 방식을 사용하고 있죠.

하지만 이런 픽셀 단위의 작업물은 ‘옛날’ 방식으로만 활용되는 것은 아닙니다. 최근에 나오는 게임들도 이런 픽셀 단위의 그래픽 작업물을 기반으로 만들고는 합니다. 캐릭터 뿐만이 아니라, 인터페이스, 배경 등 많은 부분 또는 전체가 픽셀 아트를 기반으로 만들어지고 있죠.

반대로 모바일 기기와 같은 환경에서는 기기의 성능이 발전함에 따라 초소형 기기에서 3D와 같은 기술적 응용을 펼치고는 합니다.

저도 학창 시설(이미 오래전이군요;;; )에 게임 제작 모임에 참여했을 때, 흔히 말하는 이 ‘도트 노가다’를 했던 기억이 새록새록 납니다. ^^ 그 당시에는 이 도트 노가다를 ‘너무’ 좋아해서 몇몇 작업물들도 만들곤 했었죠.

하도 좋아해서 도트 찍는 법에 대한 강좌도 올리곤 했었죠. -_-;;

(오랫동안 묻혀있던 글들이 살아났군요. ^^;; 각 강좌명을 클릭하면 내용을 보실 수 있습니다.)

– 기사(Knight) 그리기

– 도트로 플레이스테이션 패드 만들기

– 파이널판타지 9 비비(등장인물) 도트로 리터칭 하기

– 도트로 간단+귀여운 자물쇠 만들기

이 중 3번째 ‘..도트로 리터칭 하기’는 바로 위의 작례 중 첫 번째와 같이 사진을 픽셀 아트의 느낌으로 바꾸는 법에 대한 강좌입니다. 하지만 오래전 강좌로 포토샵 7 버전을 기준으로 기능 설명이 되어 있어요. 조금 감안하셔서 보시면 좋을 것 같습니다.

하지만 이 정도는 ‘애들 장난’ 수준이죠.

이 세상의 어떤 분야에나 괴물 or 외계인은 항상 존재하는 법이거든요. 사실 픽셀 아트는 요령과 스킬도 필요하지만 엄청난 감각과 노력, 그리고 끈기를 요구하는 작업입니다. 매우 작은 공간에 한정된 자원(점의 수, 색깔 수)으로 보여주고자 하는 바를 모두 표현해야 하기 때문이죠.

(이런 분들은 ‘픽셀 아티스트’라고도 하고 국내에서는 ‘도트 디자이너(Dot Designer)’라고 주로 부르고 있습니다. 전 개인적으로 픽셀 아티스트가 더 좋더군요. 도트 디자이너란 용어가 너무 노가다성만 강조한 경향이 되어 버려서요…;;; 그냥 개인적인 취향입니다. ^^)

이런 픽셀 아트의 진짜 작가들의 작품도 인터넷에서 쉽게 만나실 수 있습니다.

아래 사이트는 독일의 픽셀 아트 그룹인 eBoy 란 곳입니다. 정말 ‘후덜덜’한 작품들을 만나 실 수 있습니다.

웹 디자인을 하면서도 이런 픽셀의 중요성은 더 할나위 없습니다.

제한된 화면 해상도에 디자이너가(또는 클라이언트가) 원하는 모든 것을 표현하기 위해서는 ‘점’하나도 허투루게 쓸 쑤 없기 때문이죠. 또한 아이콘이나 버튼과 같이 작게 표현되는 개체는 이런 픽셀 단위의 작업 & 마무리가 매우 중요하게 됩니다.

꼭 사이트 전체를 픽셀 아트로 작업할 필요는 없지만 깔끔한 레이아웃의 마무리나 배경 패턴의 적용 등과 같은 부분은 반드시 픽셀 단위의 마무리 작업이 필요하기 때문입니다.

일부 디자이너들은 이런 픽셀 작업의 영감을 얻거나 활용을 위해 방대한 양의 소스를 가지고 있고 공유도 하고 있습니다.

폰트 사용에서도 마찬가지지요. 상대적으로 작게 쓰이는 글자의 경우에는 안티 앨리어싱(Anti-Aliasing)을 비활성화해서 픽셀을 드러내는 것이 오히려 더 가독성이 높아기지 때문에, 타이포그래피를 하면서 작은 글자의 경우에는 픽셀 단위로 다듬어 주는 작업이 필요합니다.

이렇듯 디지털 아트(웹 디자인 포함)의 세계에서 픽셀(점)은 아직도 큰 의미를 가지고 있는 것이죠. ‘님이라는 글자에~♪ 점 하나를 찍으면~’ (남이 되죠. 후후) 이 노래 가사처럼 분명 ‘점’에는 커다란 힘이 있습니다.

정신을 못차리는 기술의 발전 덕분에 3D의 힘에 억눌려 살고 있는 세상이지만, 3D로 렌더링 된 이미지들도 결과적으로는 픽셀이라는 작은 것들이 모여있는 것입니다.

오늘은 한 번 픽셀 아티스트가 되어 보는 건 어떨까요? ^^

원본 포스트는 http://november11.me에서 보실 수 있습니다.