이미지를 도트 이미지로: Pixel Vibe

개요

Pixel Vibe는, 이미지를 픽셀 아트로 변환하는 브라우저 기반의 도구이다. 원래는 Pix-Me!라는 이름이긴 했는데, AI가 자꾸 “Pixel Vibe 프로젝트는~”, “PixelVibe 로고는~” 어쩌고 하길래, 그냥 “그래, Pixel vibe 하자…”가 되어버렸다.

목적

게임이나 웹 프로젝트에 쓸 픽셀 에셋을 직접 하나하나 찍는 것은, 나처럼 디자인/미술쪽에 별 소질이 없는 사람들에게는 힘들다. 물론 다양한 도트 이미지 생성 프로그램/사이트들이 있고, 얘들은 AI 기능까지 끼어서 더 강력할 수도 있다.

그러나 내가 작업중이었던 다른 프로젝트에서는 이미지를 픽셀 아트로 변환하는 수준이면 충분했기에 직접 만들어보기로 하였다.

사용 방법

• 시작 가이드 문서: https://pixelvibe.pages.dev/guide/start/
• 추가 기능 문서: https://pixelvibe.pages.dev/guide/advanced

정말 간단하다. 이미지를 import 한 후, 우측의 설정과 색상 팔레트에서 이것저것 만져보다가, 괜찮은 결과가 나오면 하단의 Export 버튼을 누르면 된다.

결제 기능도 넣어봤는데, 사실상 import/export resolution, 커스텀 색상 팔레트 추가 기능이 전부이긴 하다. 즉, 그냥 결제 파이프라인 한번 넣어보고싶어서 넣어본 정도.

예시 결과물:

아무튼 결과적인 예시 결과물을 몇 장 첨부해본다. 이 내용들은 가이드에 다 포함된 이미지이다:

Grid 별 색상 샘플링 방식에 따른 결과값

디더링이 들어가기 전/후의 모습