| 
| 
|
[`fast-pixelizer`](https://github.com/handsupmin/fast-pixelizer) 기반으로 동작합니다.
**입력 품질 안내**
ChatGPT가 만든 "픽셀아트풍" 이미지는 품질이 나빠 Snap 결과물이 좋지 않을 수 있습니다. 겉보기엔 픽셀아트처럼 보여도, 원본 자체에 이미 셀 너비/높이 불균등, 흐린 경계, 축 어긋남이 들어가 있는 경우가 많습니다. Snap이 결과를 다시 정리해 줄 수는 있지만, 시작점의 격자가 원래부터 일관되지 않으면 완벽한 복원 품질은 보장하기 어렵습니다.
AI 픽셀 아트를 생성할 때는 Nano Banana처럼 처음부터 정사각 그리드를 더 안정적으로 만들어주는 모델을 추천합니다.
---
## 주요 기능
- **Snap** — AI 생성 "가짜 픽셀아트"를 진짜 픽셀아트로 재구성. 그리드 자동 감지, 투명도 보존
- **크롭** — 드래그와 줌을 지원하는 1:1 비율 편집기
- **깔끔함 (Clean)** — 셀에서 가장 많이 나온 색을 선택. 선명하고 그래픽적. 8×8 ~ 256×256
- **섬세함 (Detail)** — 셀의 평균 색을 사용. 부드러운 그라데이션과 풍부한 질감
- **비교** — 원본 / 결과 / 분할 비교 보기
- **다운로드** — PNG로 내보내기, 원본 크기 유지 또는 선택한 해상도로 저장
- **히스토리** — 최근 10개 결과를 브라우저에 로컬 저장
- **다국어** — 한국어, 영어, 일본어, 중국어(간체), 스페인어
모든 처리는 Web Worker에서 이루어지며, 데이터는 기기 밖으로 전송되지 않습니다.
---
## 사용 예시
| 원본 | 깔끔함 (Clean) | 섬세함 (Detail) |
| ---------------------------------------------------------------- | ----------------------------------------------------------------- | ------------------------------------------------------------------ |
| 
| 
| 
|
**깔끔함(Clean)** 은 각 셀에서 가장 많이 사용된 색을 선택해, 선명하고 그래픽적인 결과를 만듭니다.
**섬세함(Detail)** 은 각 셀의 평균 색을 사용해, 더 부드러운 그라데이션과 풍부한 질감을 표현합니다.
---
## 시작하기
**요구 사항:** Node.js 18 이상
```bash
git clone https://github.com/handsupmin/mono-pix.git
cd mono-pix
npm install
npm run dev
```
실행 후 [http://localhost:5173](http://localhost:5173) 에서 확인할 수 있습니다.
---
## 스크립트
| 명령어 | 설명 |
| ------------------ | ------------------ |
| `npm run dev` | 개발 서버 실행 |
| `npm run build` | 프로덕션 빌드 |
| `npm run preview` | 빌드 결과 미리보기 |
| `npm run lint` | ESLint 검사 |
| `npm run lint:fix` | ESLint 자동 수정 |
| `npm run format` | Prettier 포맷 적용 |
---
## 기술 스택
[React 19](https://react.dev) · [TypeScript 5.9](https://www.typescriptlang.org) · [Vite](https://vite.dev) · [Tailwind CSS v4](https://tailwindcss.com) · [shadcn/ui](https://ui.shadcn.com) · [Zustand](https://zustand-demo.pmnd.rs) · [fast-pixelizer](https://github.com/handsupmin/fast-pixelizer) · [Dexie.js](https://dexie.org) · [react-easy-crop](https://github.com/ValentinH/react-easy-crop) · [react-i18next](https://react.i18next.com)
---
## 기여하기
기여는 언제나 환영입니다! 레포지토리를 포크하고, 브랜치를 만들고, PR을 작성해 주세요.
```bash
npm run lint:fix # 린트 오류 자동 수정
npm run format # 코드 포맷 적용
npm run build # 빌드 확인
```
---
## 후원
MonoPix가 마음에 드셨다면 커피 한 잔 사주세요!
[](https://ko-fi.com/handsupmin)
---
## 라이선스
MIT