[바이브코딩] 이미지축소 웹앱 만들기(1)

data-pantry 2026. 5. 15. 18:15

스도쿠 프로그램 제작 이후, 더 많은 사람이 사용할 수 있는 이미지 리사이징 웹앱 '바이브코딩'을 개발한 과정입니다. 제미나이와 GPT를 교차 활용한 프롬프트 고도화 전략과 단계별 개발론을 통해 서버 없는 고성능 이미지 편집 프로그램을 완성한 후기를 공유합니다.

[바이브코딩] 사진 크기·사이즈 조절 웹앱 만들기

비전문가도 AI와 함께 웹앱을 만들 수 있을까?

"사람들이 실제로 많이 쓰는 웹앱 하나 만들어보자." 이 생각에서 이번 프로젝트가 시작됐습니다.

이전에 AI의 도움을 받아 간단한 프로그램을 하나 만들어본 경험이 있었는데, 다음에는 '실제로 사람들이 자주 사용할 만한 기능'이 뭐가 있을지 고민하게 되더군요.

요즘 일상생활을 하다 보면 사진 용량 때문에 난감한 순간이 꽤 많습니다.

카카오톡으로 원본 사진 보낼 때의 용량 압박
이력서나 공공기관 서류 제출 시 깐깐한 이미지 크기 제한
블로그 포스팅 업로드 시 페이지 속도 최적화
스마트폰 용량 꽉 찼을 때 사진 용량 줄이기

생각보다 '사진 크기 줄이기'는 사람들이 아주 자주 검색하고 필요로 하는 기능이었습니다. 그래서 이번에는 사진 크기와 사이즈를 조절하는 웹앱을 직접 만들어보기로 했습니다.

단, 단순히 "사진 용량만 줄이는 기능 하나" 덜렁 있는 게 아니라, 조금 더 실사용자 중심으로 접근하고 싶었습니다. 그래서 제가 처음 AI에게 던진 질문은 단순한 개발(코딩) 요청이 아니었습니다.

"사진 크기 줄이기, 사이즈 줄이기, 자르기 기능이 모두 들어간 웹앱을 만들고 싶은데, 어떤 순서로 어떻게 진행하면 좋을까?"

무작정 코딩부터 시키지 않았다

예전의 저였다면 아마 이런 식으로 물어봤을 겁니다. "이미지 리사이즈 하는 기능 만들어줘."

그런데 이번에는 접근 방식을 완전히 바꿨습니다. 본격적인 코딩을 시작하기 전에 다음과 같은 큰 틀부터 설계하기 시작했습니다.

어떤 기능이 필수적으로 필요한지
사용자 입장에서 어떤 흐름이 편할지
화면(UI)은 어떻게 구성해야 깔끔할지
전체적인 작업은 어떤 단계로 진행해야 하는지

AI에게 단순히 코드만 뱉어내라고 한 게 아니라, "이 프로젝트를 어떻게 이끌어가야 할까?"라는 컨설팅부터 받은 셈이죠. 그러자 의외로 꽤 체계적이고 전문적인 답변이 돌아왔습니다. 기능의 우선순위, 개발 순서, 구현 방식까지 큰 윤곽을 AI가 먼저 잡아주더군요.

한 번에 다 만들지 마라: 단계별 진행의 마법

어느 정도 큰 그림이 잡혔을 때, AI가 저에게 아주 중요한 제안을 하나 했습니다. "이걸 한 번에 다 만들려고 하지 말고, 단계를 쪼개서 진행하는 게 좋습니다."

생각해 보니 정말 맞는 말이었습니다. 저 같은 비전문가 입장에서 가장 무서운 건, 한 번에 너무 많은 코드를 받아 넣었다가 어디서 에러가 났는지도 모른 채 프로젝트가 꼬여버리는 상황이니까요. 그래서 전체 개발 과정을 이렇게 쪼개기 시작했습니다.

1단계: 기본 이미지 업로드 기능 구현
2단계: 이미지 크기 조절(리사이징) 알고리즘 적용
3단계: 용량 최적화 처리
4단계: 사용자가 직접 영역을 지정하는 사진 자르기(Crop) 추가
5단계: 전체적인 UI 개선 및 다듬기
6단계: 오류 수정 및 브라우저 호환성(안정화) 테스트

이렇게 눈앞의 미션을 작게 나눠놓으니, 시작 전의 막막함이 훨씬 덜했습니다.

프롬프트도 그냥 쓰지 않았다 (초안 → 피드백 → 개선)

여기서부터 이번 바이브코딩의 가장 재밌는 점이 나옵니다. "어차피 단계를 나눴으니, 이제 그 단계마다 그냥 AI한테 짜달라고 시키면 되는 거 아냐?" 처음엔 저도 그렇게 생각했습니다. 그런데 막상 해보니 '프롬프트(명령어)'의 품질에 따라 결과물의 수준이 하늘과 땅 차이로 달라지더군요.

그래서 이번엔 이런 필살기를 썼습니다.

먼저 제가 원하는 기능을 기준으로 1차 프롬프트 초안을 씁니다.
그리고 그 프롬프트를 다른 AI(GPT 등)에게 들고 가서 검토를 받습니다.
- "내가 이런 코드를 짜달라고 할 건데, 이 프롬프트에서 부족한 점이 뭐야?"
- "더 완벽한 결과물이 나오게 이 명령어를 수정해 줘."
그렇게 AI의 피드백을 받아 뾰족하게 다듬어진 프롬프트를 실제 작업에 투입합니다.

쉽게 말해, 코드만 AI에게 맡긴 게 아니라 'AI를 가장 잘 부려먹는 방법'까지 AI와 함께 설계한 셈입니다. 이 과정이 결과물의 퀄리티를 전문가 수준으로 끌어올리는 데 결정적인 역할을 했습니다.

개발하면서 계속 수정하고 업데이트하다

물론 처음 설계한 내용이 끝까지 그대로 가지는 않았습니다. 개발을 진행하다 보니 자연스럽게 여러 아이디어와 문제점들이 보였습니다.

"어? 이 기능은 버튼을 여기 두는 것보다 저기로 옮기는 게 낫겠는데?"
"사용자가 여기서 해상도 비율을 헷갈려 할 수도 있겠다."
"스마트폰으로 볼 때 이 부분 UI가 좀 깨지네?"

그럴 때마다 고민하지 않고 내용을 즉석에서 반영했습니다. 여기서 중요했던 건, 머릿속으로 바뀐 내용을 다시 프롬프트에 정확히 업데이트해서 전달하는 것이었습니다.

처음 만든 프롬프트 하나로 끝낸 게 아니라, 상황에 맞춰 계속 요구사항을 진화시켰습니다. AI도 결국 사람이 어떤 입력값을 주느냐에 따라 결과가 달라지니까요.

그리고 최종 결과물 완성

모든 단계를 끝낸 뒤, 드디어 그럴싸한 웹앱이 탄생했습니다. 하지만 끝날 때까지 끝난 게 아니죠. 최종 결과물을 두고 AI에게 다시 한번 깐깐한 검토를 요청했습니다.

대용량 사진을 넣었을 때 성능(메모리) 문제는 없는지?
특정 브라우저에서 오류가 날 가능성은 없는지?
크기 조절과 자르기 기능이 서로 충돌하진 않는지?
사용자의 사진 데이터가 밖으로 새어나갈 보안상 위험은 없는지?

결론은 "현재 구조에서는 큰 문제 없이 실사용이 가능하다"였습니다. 물론 앞으로 실제 사용해 보면서 수정할 부분은 계속 나오겠지만, 코딩 비전문가가 '바이브코딩' 방식만으로 여기까지 완성해 냈다는 것 자체가 저에겐 꽤 신선하고 놀라운 경험이었습니다.

바이브코딩 해보면서 느낀 점

불과 얼마 전까지만 해도 웹앱 하나 만들려면 너무 막막했습니다. HTML? CSS? JavaScript? 프론트엔드? 백엔드? 이런 개발 용어들만 봐도 머리가 아팠죠.

그런데 지금은 개발의 패러다임이 조금 달라진 것 같습니다. 이제 중요한 건 '내가 코드를 한 줄 한 줄 직접 얼마나 잘 짜느냐'보다, 'AI에게 무엇을, 어떻게, 어떤 순서로 요청하느냐'에 가까워진 느낌입니다.

물론 개발 지식이 탄탄하게 있다면 훨씬 빠르고 유리하겠지만, 저 같은 비전문가도 "문제를 잘 정의하고 단계별로 똑똑하게 요청하는 능력(프롬프트 설계)"만 있다면 꽤 많은 것을 만들어낼 수 있다는 걸 뼈저리게 체감했습니다.

마무리 (한 줄 요약)

이번 '사진 크기·사이즈 조절 웹앱' 개발은 단순히 기능 하나를 뚝딱 만들어본 경험이 아니라, "AI와 제대로 협업하면 내 아이디어를 어디까지 현실로 만들 수 있을까?"를 시험해 본 뜻깊은 과정이었습니다.

다음번에는 사람들이 실생활에서 더 유용하게 쓸 수 있는 또 다른 재미있는 웹앱에 도전해 볼 생각입니다. 바이브코딩, 이거 생각보다 꽤 재밌고 짜릿하네요.

💡 한 줄 요약: > 비전문가도 바이브코딩으로 충분히 쓸만한 웹앱을 만들 수 있다. 단, 코딩 실력보다 **'좋은 프롬프트 설계 + 쪼개서 생각하는 단계별 접근'**이 훨씬 더 중요하다!