도트 그리기 방법｜16×16부터 시작하는 도트 아트(픽셀 아트) 입문

가장 먼저 정할 것은 도트 수(캔버스의 세밀함)

도트 그림에서 처음 막히는 것은 그리는 법보다 크기 고르기입니다. 크게 하면 예쁘게 그릴 수 있을 것 같지만, 도트 그림은 칸이 늘수록 "한 칸씩 판단하는 횟수"가 늘어나므로, 첫 작품으로 64×64를 고르면 높은 확률로 도중에 멈춥니다. 소재에 맞는 최소한의 칸 수를 고르는 것이 완성까지의 지름길입니다.

주의할 점은 도트 수를 2배로 하면 칸 수는 4배가 된다는 것입니다. 16×16의 256칸이라면 30분 정도면 다 찍지만, 32×32는 1,024칸이라 같은 밀도로 그리려면 단순 계산으로 4배의 시간이 걸립니다. 먼저 16×16으로 한 장을 완성하고, 아쉬우면 다음을 32×32로 하는 순서가 포기하기 어려운 순서입니다.

브라우저로 도트 그림을 만드는 순서

설치도 계정 등록도 필요 없습니다. 도트 수를 넣어 그리드를 만들고, 칸을 클릭해 찍어 가기만 하면 됩니다. 찍는 순서만 의식하면 처음이라도 모양이 잘 무너지지 않습니다.

1. 1

   도트 수를 입력해 그리드를 만든다

   한 변의 도트 수를 입력하고 "그리드 생성"을 누르면 빈 캔버스가 표시됩니다. 나중에 크기를 바꾸면 찍은 내용이 초기화되므로, 그리기 시작하기 전에 정해 둡니다.

2. 2

   바깥쪽 실루엣부터 찍는다

   얼굴 윤곽, 몸의 외형 등 가장 바깥쪽 선부터 찍습니다. 도트 그림은 세부보다 실루엣으로 인상이 정해지므로, 윤곽이 정해지면 나머지는 채우기만 하면 됩니다. 가운데부터 그리기 시작하면 끝이 다 들어가지 않아 다시 그리게 되기 쉽습니다.

3. 3

   안쪽 디테일을 더한다

   눈, 입, 무늬 등을 찍습니다. 16×16에서는 눈은 1~2칸이 기준입니다. 여기서 욕심을 내 잘게 찍으면, 축소해서 봤을 때 무엇을 그렸는지 알 수 없게 됩니다.

4. 4

   "필요 없는 곳"을 회색으로 칠해 둔다

   배경으로서 확실히 아무것도 두지 않을 칸은 연한 회색으로 찍어 둡니다. 남은 흰 칸이 "아직 정하지 않은 곳"으로 떠오르므로, 빠뜨린 곳을 찾기 쉬워집니다.

5. 5

   PNG로 내보낸다

   "PNG 저장"을 누르면 보이는 그대로 이미지로 저장됩니다. 작업을 이어서 하고 싶다면 "중간 저장"을 눌러 두면 같은 브라우저에서 다시 시작할 수 있습니다.

검정·회색·흰색 3가지 상태를 구분해 쓴다

이 도구의 칸은 단순한 "칠함/안 칠함"의 양자택일이 아니라 3가지 상태를 가집니다. 이 차이를 구분해 쓸 수 있는지에 따라 작업의 편함이 꽤 달라집니다.

• 흰색을 "남은 일"로 쓴다: 먼저 필요 없는 곳을 회색으로 칠해 두면, 흰 칸의 수가 그대로 남은 작업량이 됩니다
• 밑그림 대신 쓴다: 망설여지는 영역은 흰색으로 남기고 확정된 곳만 검정으로 해 가면 지우는 작업이 줄어듭니다
• 도안으로 건넨다: 비즈 아이롱(퓨즈 비즈), 뜨개 도안, 모눈종이 밑그림 등은 검은 칸의 수가 그대로 재료의 필요 수가 됩니다
• 좌우 대칭 확인에 쓴다: 한쪽을 찍은 시점에 짝이 되는 쪽을 회색으로 먼저 채워 두면 축이 어긋나지 않습니다

그리드 아래에는 "필요 도트" "불필요 도트" "합계"의 수가 표시됩니다. 비즈나 블록으로 실물을 만든다면 이 필요 도트 수가 그대로 준비할 개수가 되므로, 사러 가기 전에 확인해 두면 낭비가 없습니다.

도트 그림을 깔끔하게 보이게 하는 5가지 요령

도트 그림이 "왠지 서툴러 보이는" 이유는 그림 실력보다 칸을 늘어놓는 방식에 있는 경우가 대부분입니다. 다음 5가지만 지켜도 같은 소재라도 보이는 모습이 달라집니다.

• ① 실루엣을 최우선으로: 작은 크기에서는 그림자로 만들었을 때 무엇인지 알 수 있는 모양인지가 전부입니다
• ② 대각선은 계단 폭을 맞춘다: 1칸씩, 또는 2칸씩 규칙적으로 내립니다. 3칸→1칸→2칸처럼 불규칙하면 선이 울퉁불퉁해 보입니다
• ③ 떨어진 1칸을 두지 않는다: 동떨어진 1칸은 노이즈로 보입니다. 선으로 잇거나 과감히 지웁니다
• ④ 좌우 대칭인 것은 한쪽만 찍는다: 얼굴이나 기호는 절반을 찍은 시점에 전체 균형을 확인하고, 그다음 반대쪽을 옮기면 무너지지 않습니다
• ⑤ 바깥 둘레에 1칸 여백을 남긴다: 끝까지 꽉 채워 그리면 아이콘으로 썼을 때 잘려 보입니다

특히 효과가 큰 것은 ②입니다. 도트 그림의 대각선은 "계단"으로만 표현할 수 있으므로, 단의 폭이 맞는지가 선의 매끄러움을 결정합니다. 원을 그릴 때도 상하좌우의 꼭짓점 부근은 가로로 길게, 45도 부근은 1칸씩, 단의 폭을 의식해 찍으면 자연스러운 둥근 모양이 됩니다.

PNG 저장과, 이미지로 쓸 때의 주의점

완성했다면 "PNG 저장"으로 이미지로 내보낼 수 있습니다. 내보내지는 내용에는 약간의 특징이 있으니, 용도에 따라 파악해 두면 나중에 곤란하지 않습니다.

• 파일 이름은 "dot-art-16x16.png"처럼 도트 수가 그대로 들어갑니다
• 이미지 크기는 한 변 약 512px입니다(한 칸당 픽셀 수는 512÷도트 수를 버림한 값이며, 최소 4px)
• 화면에 보이는 칸의 구분선도 그대로 이미지에 포함됩니다
• 흰 칸은 투명이 아니라 흰색으로 내보내집니다(배경이 투명한 PNG가 되지 않습니다)

구분선째로 내보내지므로 모눈종이 같은 도안·설계도로는 그대로 쓸 수 있습니다. 반면 구분선 없는 꽉 찬 아이콘이 필요하다면, 내보낸 PNG를 이미지 편집 프로그램에서 도트 수와 같은 픽셀 수까지 축소한 다음 필요한 크기로 다시 확대하는 것이 간편합니다. 확대할 때 보간 방식을 "최근접 이웃(니어리스트 네이버)"으로 하면 도트의 모서리가 흐려지지 않고 또렷하게 남습니다.

중간 저장의 구조와, 지우지 않기 위한 사용법

32×32 이상이 되면 한 번에 다 찍지 못할 때도 있습니다. "중간 저장"을 누르면 작업 중인 상태를 저장할 수 있고, 다음에 열었을 때 "저장 불러오기"로 다시 시작할 수 있습니다. 다만 저장 위치는 서버가 아니라 쓰고 있는 브라우저 안입니다. 내보낸 도트 그림을 SNS 아이콘으로 쓴다면 SNS 아이콘 크기 정하는 법에 맞춰 출력하면 윤곽이 흐려지지 않습니다.

• 저장할 수 있는 것은 1건뿐입니다. 다시 "중간 저장"을 누르면 이전 내용은 덮어쓰입니다
• 같은 기기·같은 브라우저에서만 다시 시작할 수 있습니다. 스마트폰에서 저장하고 PC에서 이어서 하는 식으로는 쓸 수 없습니다
• 브라우저의 인터넷 사용 기록(사이트 데이터)을 삭제하면 사라집니다
• 시크릿 모드/비공개 브라우징에서는 창을 닫는 시점에 사라집니다

자주 묻는 질문

도트 그림은 몇 칸부터 시작하는 게 좋나요?

첫 한 장은 16×16을 추천합니다. 256칸이면 얼굴이나 아이콘 정도는 충분히 표현할 수 있고, 30분 정도면 완성까지 갈 수 있습니다. 기호나 마크만이라면 8×8로도 만들 수 있습니다.

사진이나 이미지를 불러와 자동으로 도트 그림으로 변환할 수 있나요?

도트 아트 도구는 자동 변환을 지원하지 않으며, 빈 그리드에 직접 칸을 찍어 가는 방식입니다. 그만큼 한 칸 단위로 의도한 대로 모양을 만들 수 있어 아이콘이나 도안 만들기에 적합합니다.

스마트폰으로도 만들 수 있나요?

만들 수 있습니다. 칸을 탭하면 찍히므로 16×16 정도까지라면 스마트폰으로도 문제없습니다. 64×64 이상의 세밀한 그리드는 한 칸이 작아지므로 PC가 더 찍기 쉽습니다.

만든 도트 그림은 자유롭게 써도 되나요?

직접 찍은 도안은 본인의 작품으로 이용할 수 있습니다. 다만 기존 캐릭터나 로고를 칸에 옮겨 그린 경우에는 원작의 저작권·상표가 계속 유효하므로, 공개나 상업적 이용 전에 권리자의 조건을 확인하세요.

저장한 데이터를 다른 기기에서도 열 수 있나요?

열 수 없습니다. 중간 저장은 브라우저 안에 저장하는 구조라 같은 기기·같은 브라우저에서만 다시 시작할 수 있습니다. 기기를 넘나들고 싶다면 PNG로 내보낸 파일을 공유하세요.