#1 - 이미지 변환 에디터 만들기 (Next.js with Vibe Coding)

2026년도 들어서 여러가지 목표를 세우게 됐다.

그 중 하나가 "어떤 종류의 프로젝트던 만들어서 배포해보자" 라는 것이었다.

 

 

---

 

 

목표는 총 50개의 프로젝트를 2026년도에 진행하는 것이다.

몇 개나 진행할 수 있을까?

심지어 50개의 아이디어도 없다.

그냥 해보는거다.

 

세상에 있는 제품도 내보고, 쓸데없어 보이는 것도 내보자.

자꾸 완벽하게 하려니까 시작이 안되는 것 같다.

 

그래서 그 첫 번째 프로젝트가 <이미지 컨버터 + 편집> 프로젝트이다.

 

<이미지 변환 에디터> 라고 이름 붙인 이 프로젝트를 만들었다.

이미지를 올리면 몇 가지 변환이 가능하고, 확장자를 변환해서 다운로드도 가능하게 만들었다.

추가적인 기능이 필요하다면 언제든지 붙일 수 있으니 우선은 가볍게 만들었다.

나는 배포가 중요했기에 우선은 빠르게 배포하려고 한다.

 

이비지 변환 에디터

 

이미지 추가 후 에디터

확장자 변경 가능 에디터

 

추가 된 필터

 

MVP를 빠르게 내는 것을 목적으로 했기에 기능을 많이 넣지는 않았다.

이미지를 여러 개 올려서 수정할 수 있고, 회전, 좌우반전, 상하반전으로 변형이 되도록 했다.

그리고 흑백, 세피아, 밝기, 대비, 채도, 흐림 정도 기본적인 것만 추가를 했다.

 

이미지 필터가 끝난 후 출력을 할 수 있는데 변환할 형식을 선택해서 출력이 가능하다.

사실 프론트엔드 개발자로써 webp를 사용할 때가 많았는데 그 기억을 되살려서 만든 것이기도 하다.

중요한 것은 DB연결을 따로 하지 않았기 때문에 정보가 어딘가에 저장되거나 하는 것 없이 안전하게 사용할 수 있다는 것이다.

 

---

 

이제 49개 남았다 🎨