Gemini로 브라우저 기반 픽셀 아트 툴 만들기

Source: Dev.to

Overview

이것은 Built with Google Gemini: Writing Challenge에 대한 제출물입니다. 저는 브라우저에서 직접 실행되는 깔끔하고 간단한 16×16 픽셀 아트 제작 도구 Gradecraft를 만들었습니다.

Goals

• 부드러운 픽셀 그리기 경험 제공
• UI를 최소화 유지
• 간격이나 시각적 결함 없이 내보내기 가능하게 함
• 초보자에게 친숙하지만 여전히 다듬어진 느낌 제공

How Gemini Helped

Google Gemini는 단순한 코드 생성기가 아니라 사고 파트너처럼 작동했습니다. 저는 Gemini를 사용하여:

• CSS 그리드 동작 디버깅
• 캔버스 내보내기 로직 정교화
• UI 상호작용 최적화
• 프로젝트 구조 개선

Live Demo

https://rohan-shridhar.github.io/gridcraft/

Features

• 16×16 그리드에 그림 그리기
• 색상을 즉시 변경
• 픽셀 지우기
• 깔끔한 .png 파일로 작품 다운로드 (그리드 테두리·간격 문제 없음)

다운로드된 이미지는 그린 그대로 정확히 렌더링됩니다—셀 사이에 틈이 없습니다. 이를 해결하기 위해 다음과 같은 문제를 신중히 다루었습니다:

• 그리드 간격
• 커서 크기
• 테두리 반경
• 내보내기 렌더링

Development Process

모든 것을 한 번에 완벽하게 만들려 하기보다 iterate → test → refine 워크플로우를 따랐으며, 이는 훨씬 더 효과적이었습니다.

What Worked Well

• 빠른 디버깅 지원
• CSS와 그리드 동작에 대한 명확한 설명
• 로직 구조화에 도움이 되는 제안
• 복잡한 생각을 정리하는 데 큰 도움이 됨

Areas Requiring More Effort

• 프롬프트를 여러 차례 다듬어야 함
• 일부 UI 제안은 직접 조정이 필요했음

전체적으로 Gemini는 “모두 생성”보다는 프로젝트를 다듬어 주는 co‑builder와 같은 느낌이었습니다.

Conclusion

Gradecraft는 작은 아이디어에서 시작해 이제는 배포되고 사용 가능한 창작 도구가 되었습니다—제가 자랑스럽게 출시한 작품이죠. 직접 사용해 보시고 피드백을 주시면 감사하겠습니다. 프로젝트는 GitHub에서 오픈 소스로 제공됩니다.