이미지 원형 도트화 도구

가로 48개면 3:2 사진은 원 1,536개: 자리마다 평균색으로 원을 그리고, 하프톤은 어두운 만큼 원을 키웁니다

원형 도트화는 사진을 일정한 간격의 자리로 나눈 뒤, 자리마다 그 안에 든 픽셀의 평균색으로 원 하나를 그리는 작업입니다. 위 도구는 가로 도트 수를 정하면 세로 줄 수를 원본 비율로 맞춥니다. 960 × 640 px 예시 이미지를 가로 48개로 나누면 세로 32줄, 원은 모두 1,536개입니다.

원의 크기를 모두 같게 두면 색으로만 그림을 그리는 비즈·LED 느낌이 나고, '명암 따라(하프톤)'를 고르면 어두운 자리일수록 원이 커져 인쇄물의 망점처럼 보입니다. 옆의 스타일 견본 6개는 지금 넣은 이미지로 직접 그린 미리 보기이고, 아래 '색별 도트 수'는 색마다 원을 몇 개 그렸는지 보여 줍니다. 이미지는 브라우저 안에서만 처리하며 서버로 보내지 않습니다.

사진을 원형 도트로 바꾸는 때

• 팝아트 포스터나 굿즈 그림이 필요할 때: 인쇄에서 크기가 다른 점으로 명암을 내는 방식이 하프톤이고, 1879년 인쇄업자 벤저민 데이가 만든 벤데이 점은 로이 리히텐슈타인의 팝아트로 널리 알려졌습니다. '팝아트' 스타일은 색을 6가지로 줄이고 명암에 따라 원 크기를 바꿔 그 느낌을 냅니다.
• 비즈·스티커 도안을 짤 때: 원 하나가 비즈 한 알이 됩니다. Hama 미디 비즈는 지름 5.0 mm라 가로 48알이면 약 24 cm, 미니 비즈(2.5 mm)면 약 12 cm입니다. 색을 가진 비즈 색 수만큼 줄이면 '색별 도트 수'가 곧 색마다 필요한 개수입니다.
• LED 전광판·네온 느낌의 썸네일을 만들 때: 검정 바탕에 간격을 넓힌 원을 두면 불 켜진 전구가 늘어선 화면처럼 보입니다. 글자보다 그림이 단순할수록 잘 읽힙니다.
• 크게 인쇄하거나 칼선 작업에 넘길 때: SVG로 저장하면 원 하나하나가 도형으로 남아 크기를 키워도 가장자리가 깨지지 않고, 같은 색 원끼리 묶여 있어 디자인 프로그램에서 색을 한 번에 바꾸기 쉽습니다.

쓰는 순서

1. 이미지 넣기: '이미지 고르기'를 누르거나 이미지를 작업면에 끌어 놓습니다. 복사한 이미지는 Ctrl+V(⌘V)로 붙여 넣을 수 있습니다.
2. 스타일 고르기: 옆의 둥근 견본 6개 중 하나를 누르면 배열·크기·간격·색·배경이 한 번에 바뀌고, 도트가 가운데부터 퍼지며 다시 그려집니다.
3. 가로 도트 수 정하기: 숫자를 넣거나 막대·칩으로 16~200개 사이에서 고릅니다. 수가 적을수록 원이 크고 그림이 단순해집니다.
4. 세부 조절: 아래에서 배열(격자·엇갈림), 도트 크기(모두 같게·명암 따라), 간격, 배경, 색을 따로 바꿉니다. 스타일과 다른 값을 고르면 견본 선택이 풀립니다.
5. 확인하고 저장하기: '원본 보기'로 원본과 번갈아 보고, '색별 도트 수'에서 색을 누르면 그 색 원만 진하게 보입니다. PNG·JPG·SVG와 긴 변 크기를 고른 뒤 '저장'을 누릅니다.

스타일 6가지

스타일을 고른 뒤에도 값은 하나씩 바꿀 수 있습니다. 가로 도트 수는 스타일을 바꿔도 그대로 둡니다.

가로 도트 수 고르기: 3:2 사진 기준

얼굴이나 동물처럼 윤곽이 중요한 사진은 가로 48~72개, 하프톤 포스터는 96개 이상에서 명암이 부드럽게 이어집니다. 비즈 크기는 지름만 더한 값이라, 비즈 판의 간격에 따라 조금 더 커질 수 있습니다.

계산 방법

1. 자리 나누기: 칸 폭을 1로 놓고 가로 도트 수를 c라 하면, 격자는 세로 round(c × 세로 ÷ 가로)줄입니다. 엇갈림은 줄 간격이 √3/2(약 0.866)이라 세로 round((c × 세로 ÷ 가로 − 1) ÷ 0.866) + 1줄이고, 짝수째 줄은 반 칸 밀려 원이 c − 1개입니다.
2. 도트 색: 원 중심에서 가로 ±0.5칸, 세로 ±0.5칸(엇갈림은 ±0.433칸) 안의 원본 픽셀을 불투명도만큼 가중해 평균합니다. 불투명도 평균이 절반 미만이면 원을 그리지 않습니다.
3. 색 고르기: '색 줄이기'는 색을 가장 넓게 퍼진 채널의 중앙값에서 거듭 나누는 median cut(Heckbert, 1982)으로 묶은 뒤 OKLab 색 공간(Ottosson, 2020)에서 네 번 다듬고, 각 원을 가장 가까운 색으로 칠합니다. 게임보이·PICO-8도 OKLab에서 가장 가까운 색을 고릅니다. '회색조'는 상대 휘도를 그대로 둔 회색입니다.
4. 도트 크기: '모두 같게'의 반지름은 (1 − 간격) ÷ 2칸입니다. '명암 따라'는 그 반지름에 √k를 곱하므로 원의 넓이가 k에 비례합니다.

k = (Y_배경 − Y_자리) ÷ (Y_배경 − Y_기준)  (0~1로 자름)  ·  Y = 0.2126 R + 0.7152 G + 0.0722 B (선형 sRGB)

Y는 WCAG 2.2의 상대 휘도이고, Y_기준은 '한 가지 색'이면 그 잉크 색, 아니면 배경이 밝을 때(Y ≥ 0.5) 0, 어두울 때 1입니다. 투명 배경은 흰 종이로 봅니다. 그래서 흰 배경에서는 어두운 곳의 원이, 검정 배경에서는 밝은 곳의 원이 커집니다. 아래는 하프톤 스타일(엇갈림 배열, 흰 배경, 잉크 #1A1A1A, 간격 0%)에서 회색 자리의 원 크기입니다. 엇갈림에서는 원 하나가 차지하는 자리가 칸 폭² × 0.866이라, 맞닿은 원이 그 자리의 90.7%를 칠합니다.

저장할 때는 긴 변을 고른 크기에 맞춰 한 칸의 픽셀 수를 정합니다. 3:2 사진을 가로 48개로 2,048 px 저장하면 한 칸이 약 42.7 px, 그림은 2,048 × 1,365 px입니다. SVG는 한 칸을 10 단위로 잡은 원 도형으로 적고, 같은 색 원끼리 한 묶음으로 둡니다.

격자와 엇갈림(벌집)의 차이

같은 크기의 원을 평면에 빽빽하게 놓는 방법 가운데 가장 촘촘한 것은 벌집처럼 한 줄씩 엇갈리게 놓는 육각 배열이고, 이것이 가장 촘촘하다는 것은 L. Fejes Tóth가 증명했습니다. 맞닿은 원이 덮는 넓이는 정사각 격자가 78.5%(π/4), 육각 배열이 90.7%(π/(2√3))입니다.

원 사이 빈틈은 배경색으로 보이므로, 같은 사진이라도 흰 배경이면 밝고 가볍게, 검정 배경이면 어둡고 또렷하게 보입니다. 간격을 넓히면 이 차이가 더 커집니다.

자주 틀리는 경우

• 하프톤에서 배경을 바꿨더니 그림이 뒤집혔다: 명암 따라 모드는 배경과의 밝기 차로 크기를 정합니다. 흰 배경에서 검정 배경으로 바꾸면 밝은 곳의 원이 커지므로, 어두운 잉크로 찍은 듯한 그림을 원하면 밝은 배경을 씁니다.
• 원래 색으로 둔 채 비즈 개수를 셌다: 원래 색은 원마다 색이 조금씩 달라, 색이 64가지를 넘으면 '색별 도트 수'는 비슷한 색끼리 12묶음으로 나눈 대략의 수입니다. 실제로 살 비즈 개수는 '색 줄이기'로 색 수를 정한 뒤 봅니다.
• 투명 배경을 JPG로 저장했다: JPG는 투명을 담지 못해 흰 배경이 됩니다. 투명이 필요하면 PNG나 SVG로 저장합니다.
• 도트를 아주 많이 늘리고 SVG로 저장했다: 가로 144개 3:2 사진이면 원이 13,824개입니다. 원이 많을수록 파일이 커지고 프로그램에서 열기 느려지니, 크게 인쇄할 그림이 아니면 PNG가 다루기 쉽습니다.
• 세로로 아주 긴 이미지에서 오류가 났다: 원은 한 장에 60,000개까지 그립니다. 가로 200개로 1:2 세로 이미지를 넣으면 400줄 80,000개라 넘으니, 가로 도트 수를 줄입니다.

한계와 주의

• 인쇄소의 망점(스크린 각도, CMYK 네 판으로 나누는 분판, 잉크가 번져 점이 커지는 현상)은 흉내 내지 않습니다. 한 장에 한 가지 각도의 원만 그립니다.
• 명암 따라 모드에서도 원이 칸을 다 덮지 못해(격자 최대 78.5%, 엇갈림 90.7%) 가장 어두운 곳이 원본보다 밝아 보입니다. 간격을 0%로 두면 가장 진해집니다.
• 화면의 색과 실제 비즈·잉크 색은 다릅니다. 도안으로 쓸 때는 가진 비즈의 색표와 맞춰 보고, 개수는 여유 있게 준비합니다.
• 게임보이·PICO-8은 그 기기의 색만 빌려 쓰며, 기기의 화면 크기나 색 수 제약을 따르지는 않습니다.
• 브라우저가 열 수 있는 형식만 받습니다. 움직이는 GIF는 첫 장면만 쓰고, HEIC는 브라우저에 따라 열리지 않으니 JPG·PNG로 바꿔 넣습니다. 파일은 40MB까지 받고, 긴 변 2,048 px로 줄여 읽은 뒤 계산합니다.
• 저장 크기의 최대값 4,096 px은 모든 기기에서 저장되도록 iOS 브라우저의 캔버스 한계(4,096 × 4,096) 안으로 정한 값입니다.

기준일 2026-10-20. 하프톤·벤데이 점의 정의, 원 채움 밀도, 비즈 지름, 상대 휘도 식은 아래 원문으로 이날 확인했습니다. 스타일의 값과 60,000개 한도는 이 도구가 정한 것입니다. 예시 이미지는 Wikimedia Commons의 「Blue, red and green parrot (Unsplash)」(Mikhail Vasilyev, CC0 1.0)를 960 × 640 px로 줄인 것입니다.

출처

• 01Getty AAT — halftone negatives스크린을 통해 찍어 그림이 크기가 다른 점이나 사각형의 무늬로 나타나는 원판, 하프톤 인쇄에 쓰임
• 02Getty AAT — Ben Day process점 같은 무늬를 셀룰로이드 판으로 찍는 기법, 1879년 뉴저지 인쇄업자 Benjamin Day 고안, 팝아트 화가 로이 리히텐슈타인의 작업과 자주 연결됨
• 03Wolfram MathWorld — Circle Packing평면에서 가장 촘촘한 원 채움은 벌집 같은 육각 격자(L. Fejes Tóth 증명), 밀도 육각 0.9069·정사각 0.7854
• 04Hama — Meet our different beadsMidi 비즈 지름 5.0 mm, Mini 비즈 지름 2.5 mm
• 05W3C — WCAG 2.2: relative luminancesRGB 상대 휘도 L = 0.2126 R + 0.7152 G + 0.0722 B, 선형화 기준 0.04045
• 06MDN — <circle>중심점(cx·cy)과 반지름(r)으로 원을 그리는 SVG 기본 도형
• 07Heckbert, P. (1982). Color image quantization for frame buffer displayACM SIGGRAPH Computer Graphics 16(3), 297–307. median cut 색 줄이기
• 08Björn Ottosson — A perceptual color space for image processing2020-12-23. OKLab 색 공간(가까운 색 고르기)
• 09Lospec — PICO-8 PalettePICO-8 16색 HEX 값. 게임보이 4색은 같은 사이트의 Nintendo Gameboy (BGB) Palette 값
• 10MDN — <canvas>: Maximum canvas sizeiOS 기기 캔버스 4,096 × 4,096 한계

자주 묻는 질문

함께 쓰는 도구