도트 찍는 법: 픽셀 아트 초보 가이드

실루엣 → 선화 → 채색 → 다듬기

이 마법사는 네 단계로 그렸습니다. 실루엣을 채우고, 선을 파내고, 단색으로 칠한 다음 다듬었습니다. 단계를 클릭하면 그 시점의 그림을 볼 수 있습니다.

실루엣부터 시작하면 큰 형태와 그것이 잘 읽히는지에 집중할 수 있고, 실루엣은 처음부터 끝까지 거의 바뀌지 않습니다. 이 마법사는 본래 삼각형입니다. 꺾인 모자 끝과 삐져나온 지팡이가 그 삼각형을 재미있게 만듭니다.

다른 시작 방법

• 구조선: 원, 삼각형, 사다리꼴로 형태를 잡은 뒤 그 위에 디테일을 쌓습니다. 비율을 일찍 정해 두면 나중에 다시 칠할 일이 크게 줄어듭니다.
• 거친 색 덩어리에서 다듬기: 크고 거친 색 면을 깔고 그리면서 정리합니다. 분위기를 바로 잡을 수 있어 배경에 잘 맞습니다. 중간에 아무것도 맞지 않아 보이는 지저분한 단계가 오는데, 그래도 계속 진행하세요.
• 크게 그린 뒤 축소: 아무 그림 앱에서나 보통 크기로 그리고 픽셀 크기로 줄입니다. 출발점으로는 괜찮지만, 작아질수록 디테일이 깨지고 결국 모든 도트를 손으로 정리해야 합니다.

정답인 순서는 없습니다. 좋아하는 작가가 어떻게 그리는지 살펴보고, 몇 가지 방법을 시도해 본 뒤 즐거운 방법을 택하세요. 어느 길로 가든 같은 곳에 도착합니다.

16×16 · 32×32 · 64×64

픽셀 아트에 정답인 크기는 없습니다. 무엇을 그리는지, 디테일이 얼마나 필요한지, 프로젝트가 무엇을 요구하는지에 따라 달라집니다. 첫 연습으로는 같은 대상을 여러 크기로 그려 보는 것이 좋습니다.

이 마법사는 16×16에서도 성립합니다. 실루엣이 버티고, 그림체상 잃을 디테일도 적기 때문입니다. 32×32인 이유는 그 크기로 그린 그림 세트의 하나이기 때문인데, 함께 놓이는 그림은 같은 스케일을 써야 합니다. 크기가 섞이면 따로 붙여 넣은 것처럼 보입니다.

자주 쓰는 픽셀 아트 크기

처음이라면 작게 시작해서 도트 하나의 무게를 느껴 보세요. 작은 크기에서는 도트 하나가 그림 전체를 바꿀 수 있는데, 큰 캔버스에서는 이걸 놓치기 쉽습니다. 이 10×10 얼굴로 해 보세요. 표정을 고르거나, 아무 도트나 클릭해 뒤집을 수 있습니다.

더블 · 재기 · Jaggies

크기를 정했으면 간단한 선화로 주요 영역을 나눕니다. 선을 그을 때 주의할 점이 두 가지 있습니다.

더블

두 픽셀이 모서리에서 L자로 만나면 더블이 생깁니다. 그 부분만 선이 두꺼워져서 더 어둡고 딱딱해 보입니다. 1픽셀 외곽선이라면 남는 모서리 픽셀을 지우면 선이 깔끔해지고 굵기도 고르게 됩니다.

더블이 항상 실수는 아닙니다. 그림자를 암시할 수도 있고, 외곽선 전체를 더블로 그리면 그 자체로 굵직한 스타일이 됩니다.

재기

선이나 곡선의 계단 길이가 고르지 않게 바뀌면 재기, 즉 의도하지 않은 뾰족한 모서리가 생깁니다. 리듬을 깨는 픽셀을 지우거나, 곡선이라면 5-3-2-1-1-2-3-5처럼 계단 길이가 부드럽게 늘었다 줄었다 하게 만드세요.

재기도 일부러 쓸 수 있습니다. 마법사의 얼굴에는 눈썹 모양을 내려고 선을 일부러 한 번 끊은 곳이 있습니다.

색상 · 채도 · 명도 · HSV

거의 모든 컬러 피커는 HSV를 바탕으로 만들어져 있습니다.

• 색상: 색 그 자체. 빨강, 노랑, 초록, 파랑…
• 채도: 색이 얼마나 순수한지. 피커의 사각형에서 왼쪽의 회색부터 오른쪽의 가장 선명한 색까지 이어집니다.
• 명도: 얼마나 밝거나 어두운지로, 대략 사각형의 아래에서 위로 갈수록 밝아집니다. 셋 중 가장 중요합니다.

“대략”이라고 한 이유는 색상마다 눈에 느껴지는 밝기가 다르기 때문입니다. 색상 막대를 흑백으로 바꾸면 노랑이 가장 밝고, 파랑과 보라가 가장 어둡습니다.

명도는 그림에 깊이와 입체감을 줍니다. 빛과 그림자는 명도로 만들어집니다. 명도가 틀리면 어떤 색을 골라도 그림을 살릴 수 없습니다.

채도 · Saturation

채도가 높은 색이 너무 많으면 색끼리 싸우고 눈이 피로해집니다. 칙칙한 색이 너무 많으면 그림이 탁하고 바래 보입니다.

채도 높은 색은 양념처럼 쓰세요. 조금만, 의도한 곳에 두어 시선을 모으고 싶은 곳에 씁니다. 온통 강한 색을 쓰고도 성공한 작품도 있지만, 그런 그림은 언제나 밑바탕의 명도가 아주 탄탄합니다. 명도가 먼저입니다.

대비 · Contrast

그림에는 여러 종류의 대비가 있습니다. 명도, 색상, 형태, 디테일. 대비가 높다는 건 두 대상의 차이가 크다는 뜻이고, 낮다는 건 비슷하다는 뜻입니다.

대비가 높은 곳은 시선을 끌어당기고, 낮은 곳은 눈을 쉬게 하며 리듬과 반복을 만들 수 있습니다. 대비는 상대적입니다. 모든 곳의 대비가 낮으면 통일감 있는 무늬 같은 그림이 되고, 대비가 높은 부분은 주변이 차분할 때만 눈에 띕니다.

그리면서 계속 스스로 물어보세요. 대비로 어떻게 가장 중요한 부분을 가리킬 수 있을까?

명암 · 조명 · Shading

명암을 잘 넣으려면 빛이 어떻게 움직이는지 알아야 합니다. 명암이란 형태를 보여 주기 위해 명도를 쓰는 것이기 때문입니다. 공 하나에 빛 하나를 비추면 기본 조명 모델의 모든 부분을 볼 수 있습니다.

픽셀 아트에서 일곱 가지를 모두 쓰는 일은 드뭅니다. 작은 크기에서는 너무 복잡해지니 크기와 그림체에 따라 고르게 됩니다. 빛의 모습은 광원의 개수와 세기, 물체 주변에 무엇이 있는지에 따라서도 달라집니다.

필로우 셰이딩

아주 흔한 문제는 형태와 빛을 모두 무시하고 외곽선에서 안쪽으로 고리 모양으로 어둡게 칠하는 것입니다. 이것이 필로우 셰이딩입니다. 형태를 설명하지 못해서 물체가 베개처럼 납작하고 부풀어 보입니다.

재질

재질마다 빛을 반사하는 방식이 다릅니다. 무광 공은 빛을 고르게 퍼뜨려 뚜렷한 하이라이트가 없고, 유광 공이나 금속은 하이라이트가 강하고 주변을 비춥니다. 나무, 금, 유리를 표현하려면 그것이 빛을 어떻게 반사하는지 생각하고, 거기에 맞는 명도와 명도 폭을 고르세요.

색온도 · 환경

색을 따뜻하다, 차갑다고 말하는 걸 자주 듣지만, 어떤 색이 따뜻해 보이는지 차가워 보이는지는 옆에 무엇이 있느냐에 달려 있습니다.

첫 번째 쌍의 작은 네모 두 개는 완전히 같은 회색입니다. 세 번째 쌍의 왼쪽 절반은 두 번째 쌍과 같은 빨강입니다. 색은 상대적이고, 이웃한 색에 따라 달라집니다.

물체의 색은 빛, 가까이 있는 것, 주변 환경에 따라서도 크게 바뀝니다. 빛과 아래 탁자를 바꿔 가며 같은 노란 공이 어떻게 변하는지 보세요.

휴 시프팅 · Hue shifting

휴 시프팅은 이런 환경의 영향을 단순하게 표현하면서 색을 더 흥미롭게 만드는 흔한 기법입니다. 그림자를 위해 색을 어둡게 할 때 색상도 조금 돌리는 것입니다. 그림자는 보라 쪽으로, 빛은 노랑 쪽으로 기우는 경우가 많습니다.

어느 쪽이 더 낫다는 건 없으니 마음에 드는 쪽을 고르세요. 휴 시프팅한 램프는 더 풍부해 보이고, 명도만 바꾼 램프는 더 차분하고 그래픽적으로 보입니다.

컬러 팔레트 · Palette

초보자에게 흔한 또 다른 습관은 매번 새 색을 꺼내 쓰는 것입니다. 그림이 산만해지고 팔레트와 명도가 통제를 벗어납니다. 색의 수를 제한하면 작품에 통일감이 생깁니다.

색 고르기가 어렵다면 이미 만들어진 픽셀 아트 팔레트에서 시작하세요. 초기 휴대용 게임기 화면의 네 가지 초록처럼 특정한 느낌을 내는 지름길이기도 합니다. Lospec에는 수천 개의 팔레트가 있고, 좋아하는 영화나 게임에서 색을 뽑아 나만의 팔레트를 만들 수도 있습니다.

그래도 팔레트가 그림을 대신 그려 주지는 않습니다. 색상, 채도, 명도, 대비, 원하는 스타일은 여전히 직접 생각해야 합니다.

디더링 · Dithering

디더링은 픽셀을 무늬로 배치해 색을 섞거나, 팔레트에 있는 것보다 많은 색이 있는 것처럼 보이게 하는 기법입니다. 검정과 흰색만 있어도 체크무늬는 멀리서 회색으로 보입니다.

디더링 무늬는 얼마든지 창의적으로 만들 수 있고 저마다 느낌이 다릅니다. 정돈된 것도 있고, 지글지글하고 거친 것도 있습니다.

디더링으로 두 색을 섞어 새로운 색을 만들 수도 있습니다. 팔레트가 작을 때 특히 유용합니다.

주의하세요. 디더링은 노이즈와 예상치 못한 질감을 더합니다. 작은 스프라이트에서는 특히 그렇습니다. 쓰기 전에 무엇을 위해 쓰는지 정하세요.

안티앨리어싱 · AA

안티앨리어싱(AA)은 형태의 가장자리를 부드럽게 합니다. 가장자리의 계단마다 이웃한 두 색 사이의 명도를 가진 색을 놓습니다.

세 번째 원은 AA가 너무 많습니다. 더 부드러워졌지만 늘어난 픽셀이 모서리를 만들어 원의 모양이 바뀌었습니다. AA는 골라서 넣고, 절대 형태를 바꾸지 않게 하세요.

AA는 형태 안쪽(내부 AA)에 넣을 수도 있고, 바깥쪽 배경 위(외부 AA)에 넣을 수도 있습니다. 외부 AA는 배경과 섞어서 만들기 때문에 배경이 바뀌면 외부 AA는 제 역할을 못 합니다. 명도가 더는 맞지 않기 때문입니다. 위의 어두운 배경으로 확인해 보세요.

중요한 건 명도이므로 AA 픽셀의 색상은 자유롭게 바꿔 봐도 됩니다. AA로 선의 느낌을 바꿔 부분적으로 더 가늘어 보이게 할 수도 있습니다.

이 마법사에는 AA가 전혀 필요 없습니다. 스타일로 넣는다면 더 부드러워 보이게 할 수염이 그 자리일 것입니다. AA는 고급 기법이니 신중하게 쓰세요.

밴딩 · Banding

음영이나 AA가 윤곽 전체를 같은 너비로 겹겹이 따라가고 계단까지 모두 나란하면 밴딩이 생깁니다. 형태를 설명하기는커녕 그림을 납작하게 하거나 산만하게 만듭니다. 앞의 필로우 셰이딩도 같은 문제를 안고 있습니다.

외곽선 · 셀아웃 · Sel-out

픽셀 아트의 외곽선을 그리는 방법은 여러 가지입니다. 같은 버섯에 여덟 가지를 적용해 봤습니다.

• 검은 1픽셀 외곽선: 그래픽적이고 만화 같으며, 애니메이션에 잘 맞습니다.
• 더블 외곽선: 아주 두껍습니다. 더블 강좌에서 봤던 그것입니다.
• 어두운 외곽선: 검정 대신 어두운 색으로 그은 평범한 외곽선으로, 대비와 딱딱함이 줄어듭니다.
• 영역 색 외곽선: 외곽선이 감싸는 영역의 색을 어둡게 한 색을 씁니다.
• 빛 받는 외곽선: 영역 색 외곽선을 빛을 받는 쪽은 밝게, 그림자 쪽은 어둡게 한 것으로, 빛의 방향까지 보여 줍니다.
• 셀렉티브 아웃라인(셀아웃): 한 가지 색의 선 대신 AA 같은 명암 단계로 선화를 그려 형태를 설명합니다.
• 끊긴 외곽선: 셀렉티브 아웃라인의 한 종류로, 군데군데 선을 아예 생략합니다. 대개 빛이 닿는 곳입니다.
• 외곽선 없음: 이것도 충분히 좋은 선택입니다.

마법사는 그림체에 어울려서 검은 1픽셀 외곽선을 씁니다. 모자의 외곽선은 모양이 더 잘 읽히도록 살짝 끊어 두었습니다.

클러스터 · 고립 픽셀

클러스터로 생각한다는 건 픽셀을 두 개 이상의 덩어리로 묶고, 그 덩어리로 면을 표현하는 것입니다. 보통은 픽셀 하나만 따로 떨어진 곳을 만들지 않습니다. 홀로 떨어진 픽셀(고립 픽셀)은 노이즈가 되고, 덩어리들 사이에서 어색해 보입니다.

고립 픽셀에도 쓰임새가 있습니다. 특히 작은 크기에서의 디테일과 하이라이트, 또는 일부러 거친 질감을 낼 때입니다. 마법사의 눈은 1픽셀인데, 이 크기에서는 다른 방법이 없고 보기에도 자연스럽습니다. 1픽셀만으로 작품 전체를 쌓는 작가도 있는데, 결과는 지글지글하고 거칠지만 그들의 스타일에 충실합니다.

CRT 모니터

레트로 게임 그래픽을 공부할 때 기억해 둘 것이 하나 있습니다. 옛 게임의 상당수는 CRT(브라운관) 텔레비전과 모니터로 보였고, CRT는 이웃한 픽셀을 흐리게 섞어 보여 줬습니다.

16비트 게임들의 원본 픽셀을 들여다보면 당시 화면에서는 아무도 보지 못했던 밴딩, 재기, 거친 디더링이 보입니다. 그 시절 일부 작가는 이를 알고 흐림을 계산에 넣어 그렸고, 하드웨어가 보여 줄 수 없는 중간색을 디더링 무늬로 만들었습니다.

모든 레트로 게임이 그렇게 그려진 것은 아니지만, 참고 자료를 모을 때는 오늘날 우리가 보는 것은 대개 화면을 거치지 않은 깨끗한 원본 픽셀이라는 점을 기억하세요.

비즈 · 십자수 · 다이아몬드 페인팅

픽셀 아트가 화면에만 머물 필요는 없습니다. 퓨즈 비즈 한 알, 십자수 한 땀, 다이아몬드 페인팅의 큐빅 하나, 뜨개질 한 코는 모두 한 가지 색을 담습니다. 그러니 도트 그림은 이미 도안입니다. 픽셀 하나가 비즈 한 알입니다. 위의 내용은 모두 그대로 적용되지만, 차이가 세 가지 있습니다.

• 팔레트는 살 수 있는 색: 화면에서는 어떤 색이든 클릭 한 번이지만, 비즈나 실은 브랜드가 만드는 색뿐입니다. 팔레트 제한은 더 이상 선택이 아니니, 비즈나 자수실 라인을 먼저 고르고 그 색으로 그리세요.
• 판이 크기를 정한다: 대형 정사각형 판은 29×29칸이라서 16×16 스프라이트는 넉넉히 들어가고, 32×32는 판 네 장을 이어 붙여야 합니다. 가지고 있는 판에 맞춰 캔버스를 계획하세요.
• 거리가 색을 섞는다: 완성 작품은 한두 걸음 떨어져서 보게 되므로, CRT처럼 부드럽게 보입니다. 체크무늬 디더링은 방 건너편에서 보면 중간색으로 읽히지만, 혼자 색이 다른 비즈 한 알은 여전히 점으로 보입니다.

가장 옮기기 어려운 건 안티앨리어싱입니다. 중간 색조가 필요한데 비즈 팔레트에는 딱 맞는 색이 없는 경우가 많습니다. 아쉽게 빗나간 중간색보다 실제로 있는 색으로 깔끔한 계단을 만드는 편이 대개 더 보기 좋습니다.

그림을 다 그렸다면 도트 에디터에서 색깔별 개수가 적힌 도안으로 인쇄할 수 있고, 이미지를 도트로 변환하는 도구는 반대로 그림을 비즈 팔레트에 맞춰 바꿔 줍니다.

손으로 그린 픽셀 아트는 사진을 변환한 것보다 대개 더 좋은 비즈 도안이 됩니다. 이유는 이 가이드에서 본 그대로입니다. 깔끔한 외곽선, 적은 색 수, 노이즈 대신 클러스터.

스타일 · 연습

미술의 기초, 픽셀 기법, 그리고 자신의 취향을 합치면 가능성은 끝이 없습니다. 내가 좋아하는 것을 다른 사람은 좋아하지 않을 수도 있습니다. 옳고 그른 스타일은 없습니다. 다만 의도해서 고르고 일관되게 적용한 선택은 그리는 모든 것에 의도가 느껴지게 하고, 만들고 있는 세계에 잘 어울리게 해 줍니다.

연습 과제

1. 마법사를 8×8로 그려 보세요. 여전히 마법사로 읽히려면 어떤 특징이 남아야 할까요?
2. 명도 확인을 켜고 마법사를 명도 네 가지만으로 다시 칠한 다음, 네 가지 초록 버전과 비교해 보세요.
3. 마법사의 검은 외곽선을 영역 색 외곽선이나 셀렉티브 아웃라인으로 바꿔 보세요.
4. 사과를 두 번 그려 보세요. 한 번은 무광, 한 번은 유광으로.
5. 같은 사과를 12×12, 16×16, 24×24로 그려 보세요.

이 중 많은 것은 익히는 데 몇 년이 걸리고, 경험 많은 도트 작가들도 여전히 배우고 있습니다. 양이 많다고 겁먹지 마세요. 그리는 걸 즐기세요. 평생 할 수 있는 취미입니다.

용어집

실루엣

Silhouette

한 가지 색으로 칠한 바깥 형태

더블

Doubles

선의 모서리에서 L자를 이루는 두 픽셀

재기

Jaggies

고르지 않은 계단 길이가 만드는 뾰족한 모서리

색상 / 채도 / 명도

HSV

색, 순도, 밝기

필로우 셰이딩

Pillow shading

외곽선에서 고리 모양으로 어둡게 칠하기

휴 시프팅

Hue shifting

램프가 밝아지거나 어두워질 때 색상도 돌리기

디더링

Dithering

픽셀 무늬로 색 섞기

안티앨리어싱

AA

중간색으로 계단을 부드럽게 하기

밴딩

Banding

음영 층이 나란히 줄지어 선 상태

셀렉티브 아웃라인

Sel-out

AA로 형태를 설명하는 외곽선

클러스터

Cluster

같은 색 픽셀의 덩어리

고립 픽셀

Orphan pixel

홀로 떨어진 픽셀 하나

픽셀 아트 자주 묻는 질문

출처

강좌의 순서와 많은 내용은 Saultoons의 영상 The Ultimate Pixel Art Tutorial에서 가져왔습니다. 전체 설명은 영상에서 확인해 보세요. 이 페이지의 설명은 저희가 직접 쓴 글이며, 예제 그림도 모두 영상 화면이 아니라 이 페이지를 위해 새로 그렸습니다.