하이아웃풋클럽 레플릿(Replit) 워크샵, 10분 만에 이미지 최적화 성공

Replit 워크숍에 참가해 현직 웹에이전시 개발자가 단 10분만에 이미지 최적화 하는 SaaS를 개발했습니다. 이제 더는 이미지 용량 줄이려고 더는 불필요한 광고를 보지 마세요.

그냥 딱 원하는 이미지를 업로드해서 이미지 용량을 기존보다 1/3 줄이세요.

하이아웃풋클럽 레플릿 워크샵을 통해 저는 저만의 이미지 최적화 도구를 만들었습니다. 그러면 어떤 계기로 html, css, js, php만 할 줄 아는 제가 흔히 보이는 SaaS를 뚝딱 만들었는지 한 번 확인해보겠습니다.

처음에는 웹사이트 분석 서비스를 만들려고 했습니다.

사실 저는 웹 개발을 할 때 웹사이트 디자인이나 레이아웃에 대해서 고민이 많았습니다.

왜냐하면 웹사이트 제작업체는 많고, 웹사이트 수요자는 많은데 이 시장에서 어떤 간극이 보였기 때문입니다.

제작업체는 부업 강의 덕분에 많아지고, 웹사이트 제작 기술의 장벽이 점점 낮아짐에 따라서 홈페이지 제작 수요자도 그만큼 늘기 때문입니다. 실제로 AI의 발전으로 인해서 Upwork나 Fivver 같은 경우 웹디자인 제작자, 웹개발자, 웹서비스 기획자, 카피라이터 등의 수요가 더 늘었습니다.

아무튼 수요는 늘어나지만, 웹사이트 기획안을 막상 정리하고 작성하려고 하면
무엇부터 해야 하는지 모릅니다.

웹사이트 레이아웃
디자인 시스템
폰트 설정
이미지 (일러스트 or 회사 이미지)

등등을 전부다 깔끔하게 정리하는 일종의 블루 프린트가 있으면 좋겠다는 생각을 했습니다. 그래서 그걸 만들고 싶어서 하이아웃풋클립이 주관하는 레플릿 워크샵을 신청했습니다.

하지만 기대에 미치지 못하는 결과

4시간 동안 한다고 해도, 제가 코딩을 다 하지 못하니까, 처음부터 욕심을 버렸습니다.

chat gpt api 응용해서 웹사이트 디자인 시스템을 분석하는 것을 만드려고 했는데, 그건 세미나 시작하면서 바로 접었습니다.

대신그냥 웹사이트가 자주 쓰는 폰트나 컬러를 잘 가져왔으면 좋겠다고 생각했습니다. 그것만 일단 가져오고 나머지는 제가 gpts를 이용해서 만들어서 데이터를 연동하면 좋겠다고 생각했으니 말입니다.

하지만 그렇지 못했습니다.

처음에는 전혀 모르는 파이썬을 통해서 했지만 잘 안되었습니다. ai가 잘 수정을 한다고 해도 코딩결과가 잘 반영되지 않았습니다. 그래서 파이썬 말고 react나 next js를 이용해서 해볼까해서 다시 시도를 해봤지만 잘 안되었습니다. 결과가 제대로 반영되지 않았거든요.

그래서 좌절을 했습니다. 남은 시간은 단 30분 밖에 없었습니다. 4시간에서 30분은 수업하고 나머지 3시간에서 2시간 반은 계속 오류에 씨름했습니다.

이미지 최적화 도구나 만들어볼까?

그러다가 어떤 아이디어가 저에게 딱 떠올랐습니다. 그게 뭐냐면 그건 바로
이미지 배경 제거 프로그램입니다. 제가 세미나 신청하기 전에 한 번 어떤 서비스들을 만들었는지 궁금해서 여러가지 리서치했는데, 그때 이미지 주변에 배경을 제거하는 서비스가 떠올랐습니다.

그래서 저는 이걸 벤치마킹해서 이미지 최적화 프로그램을 만들면 어떨까? 하는 순간 생각이 들었습니다. 그래서 저는 이미지 최적화 프로그램을 만들고 싶다는 프롬프트를 바로 레플릿에 입력했습니다.

그랬더니 레플릿이 이렇게 저렇게 작동하더니 바로 이미지 최적화 프로그램이 나왔습니다.

이미지 최적화 도구 설명

이미지 최적화 도구는 테크니컬 SEO 최적화 및 웹사이트 속도 향상을 위해서
이미지 용량을 압축해주는 프로그램입니다. 빠르고 간편한 이미지 압축 기술을 제공하면서 누구나 쉽게 사용할 수 있습니다.

이미지 최적화 도구 기능

이미지 업로드
이미지 압축 설정
압축된 이미지 다운로드

이미지 업로드

자주 사용하는 파일 형식인 JPG, PNG, JPEG를 업로드를 할 수 있게 했습니다.
이미지 업로드 버튼을 클릭하면 원하는 이미지를 드래그해서 업로드할 수 있습니다.

이미지 압축 설정

이미지 압축을 설정할 수 있게 했습니다. 화질은 유지하면서 최적화를 하거나
Webp라는 확장자를 선택해서 이미지를 더욱 초고화로 압축할 수 있습니다.

다음은 결과물 다운로드

다음은 압축처리된 이미지를 다운로드를 클릭해서 다운로드 받으면 됩니다.

실제 결과

결과는 미쳤습니다. 9.18Mb 짜리 이미지가 1초만에 74.3kb로 줄었습니다.

특히 클립아트 코리아에서 다운로드 받거나 직접 촬영한 고화질 이미지일 경우
이미지 용량을 줄이는 것이 일인데, 이 프로그램으로 눈 깜짝할 사이에 줄일 수 있습니다.

개선점

이 프로그램을 사용하면서 주변 사람에게 공유를 드렸습니다. 주변 사람의 의견을 종합해서 개선하려고 합니다.

10개 정도 한번에 업로드하고 다운로드 받기
아임웹 사용자를 위해서 Wepb 없이도 압축되게 하기
나중에 광고나 10개 이상 할 경우 결제 모듈 붙이기

등의 의견을 받아서 한 번 반영하려고 합니다.

이제 아이디어는 백만불 짜리 잠재력이 있습니다.

저는 개인적으로 이번에 짧은 4시간의 워크샵이 끝나면서 딱 2가지를 깨달았습니다.
누구나 아이디어가 있다면, 그게 정말 백만불짜리 가치가 준다는 말입니다.

저 포함해서 함께 워크샵을 진행하는 분들의 발표를 들었습니다.

뒤에서 서서 들었는데도 그 분들이 말하는 것과 구현하는 프로그램을 보고 많이 놀랐습니다. 진짜 가치는 아이디어에 있고, 그 생각을 프로그램으로 구현해주는 놀라운 프로그램인 "레플릿"이 있으니 누구나 주저 없이 시도만 하면 좋겠다는 생각이 들었습니다.

그래서 이제 앞으로 공상을 더 많이 해봐야겠습니다. 내가 어떤 도구를 만든다면 어떤 목적으로 써야 하는지 생각을 더 많이 해봐야겠습니다.

지금 서비스는 이런데 이런점이 불편해
나는 어떤 문제를 해결하고 싶을까?
뜬금없는데 이런 서비스가 있으면 어떨까?
왜 다 이 서비스만 쓸까?

즉 정리하자면 누구나 당연하게 여기는 진리를 한 번쯤은 제고해보고, 그에 대한 아이디어를 간단하게 짜보고, 그걸 실제로 구현해주는 레플릿을 이용하면 진짜 누구나 다 실리콘밸리에서 일할 수 있습니다.

마지막으로 세미나 준비해주시는 강사님 이하 운영진 분들 고생많으셨고, 덕분에 올해 더 많은 Saas를 만들어야 겠습니다. 감사합니다.

나만의 서비스 만들기 사전 알림 신청 안내

코딩을 몰라도 괜찮습니다! 개발자가 없어 막막했던 분들을 위해 준비한 이번 워크샵은, 실리콘밸리 개발자 출신(전 DoorDash) 대표님과 함께하는 특별한 기회입니다.
개발 경험이 전혀 없던 참여자 48명이 3시간 만에 직접 서비스를 만들고 배포까지 성공적으로 마친 경험을 바탕으로, 자신의 아이디어를 현실로 만들 수 있도록 도와드립니다.

💡 워크샵 사전 알림 신청 시 워크샵 오픈 소식을 안내드려요!

🔥 [실제 사례] 이런 것들을 만들어 볼 수 있어요!

1) 개발을 전혀 모르던 마케터 와니님은 점심시간 30분 만에 '글쓰기 서비스'를 만들었습니다.
2) 직장인 영끌님은 단 돈 만 원으로 '영어 단어 학습 서비스'를 완성했습니다.
3) 영어강사 따스텔님은 4시간 만에 '맞춤형 교재 추천 서비스'를 완성했습니다.
4) 크리에이터 리나몬드님은 '4시간 만에 '학술 논문 리뷰 시뮬레이터'를 완성했습니다.
5) 웹서비스 기획자 윤샐리님은 직접 '캘린더 예약 서비스'를 완성했습니다.

👇 더 많은 사례들은 여기서 확인하실 수 있습니다!