CodeFlowHub | 딸깍코딩 프로그램 제작소

이번 AI 보컬 리무버 는 복잡한 설치 없이 브라우저에서 즉시 노래의 목소리를 지워주는 도구입니다. Web Audio API와 Mid/Side 위상 분리 알고리즘을 사용하여 서버 업로드 없이 안전하게 MR을 제작할 수 있습니다. 축가 연습, 커버 곡 제작, 영상 배경음악 추출이 필요한 분들에게 최적화된 무료 솔루션입니다. 만들게 된 계기 유튜브 크리에이터이자 콘텐츠 제작자로서 작업을 하거나, 결혼 축가 연습을 할려면 마음에 쏙 드는 곡의 반주(MR)가 없어 곤란할 때가 많았습니다. 요약하자면 "이 노래로 커버 영상을 찍고 싶은데 반주가 없네?", "영상 배경음악으로 쓰고 싶은데 가사가 너무 튀네?" 이런 불편함을 직접 해결하고자, 이번 자동화 도구로는 AI 보컬 리무버를 기획하게 되었습니다. 누구나 비용 부담 없이, 클릭 몇 번으로 고퀄리티 음원을 얻을 수 있는 환경을 만들고 싶었습니다. 핵심 기술: 왜 'Web Audio API'인가? 단순히 도구를 만드는 것을 넘어, 최적의 사용자 경험을 위해 선택한 핵심 기술들을 소개합니다. 서버가 필요 없는 'Client-Side' 처리 : 보통의 AI 서비스는 음원을 서버로 보낸 뒤 처리 결과를 기다려야 합니다. 하지만 저희 도구는 Web Audio API를 활용해 사용자 브라우저에서 실시간으로 계산합니다. 덕분에 대기 시간이 짧고 개인정보 노출 위험이 전혀 없습니다. Mid/Side(M/S) 위상 분리 알고리즘 : 300MB가 넘는 무거운 AI 모델 대신, 전문 스튜디오 수준의 음원 분리가 가능한 M/S 알고리즘을 구현했습니다. 스테레오 음원의 중앙(Center)에 위치한 보컬 신호와 양옆(Side)의 반주 신호를 수학적으로 분리하여 깔끔한 MR을 추출합니다. 지능형 청크(Chunk) 프로세싱 : 고용량 음원을 한꺼번에 처리하면 브라우저가 멈출 수 있습니다. 이를 방지하기 위해 데이터를 2초 단위로 쪼개어(Chunking) 처리하는 방식을 채택, 낮은 ...

Ai 얼굴 ·번호판 자동블러 서비스 '사용'화면 블로그나 SNS에 사진을 올릴 때마다 타인의 얼굴이나 차량 번호판을 일일히 가리는 작업이 번거롭지 않으셨나요? 그래서 복잡한 설치나 서버 업로드 없이 브라우저에서 즉시 개인정보를 보호해 주는  'AI 얼굴·번호판 자동 블러' 도구를 바이브코딩으로 만들게 되었습니다. 오늘은 이 도구의 탄생 비화와 개발 중 마주친 기술적 난관을 어떻게 해결했는지 공유합니다. 계기 매번 포토샵이나 무료 사이트를 켜서 모자이크 처리를 하는 과정은 생각보다 번거로웠습니다. 게다가 "내 사진이 서버에 저장되지는 않을까?" 하는 불안함도 있었습니다. 그래서 저는 두 가지 원칙을 세우고 개발에 착수하게 되었고, 계기는 다음과 같습니다. 완전 자동화: AI가 알아서 찾고 가릴 것. 완전 로컬 처리: 사진 데이터는 절대 내 컴퓨터 밖(서버)으로 나가지 않을 것. 설계 가이드 이번 프로젝트도 기존 프로젝트와 동일하게 코드 한 줄 한 줄을 직접 짜기보다, 서비스의 핵심 로직과 사용자 경험(UX)에 집중하는 바이브코딩 방식을 채택했습니다. 그리고 기본 설계 가이드는 다음과 같습니다. 프레임워크: Next.js (App Router), Tailwind CSS AI 모델 (Client-side): 얼굴 감지: @mediapipe/face_detection (매우 빠르고 정확함) 객체 감지 (번호판 등): @tensorflow-models/coco-ssd 또는 MediaPipe Object Detector 이미지 처리: HTML5 Canvas API (감지된 좌표에 블러 처리 적용) 핵심 기술: 브라우저 환경에서 동작하는 경량 AI 객체 탐지 모델 경험: AI와 실시간으로 소통하며 기능을 구현하니, 기획부터 프로토타입 완성까지의 속도가 비약적으로 빨라졌습니다. 하지만 AI와의 협업 중에도 예상치 못한 '디테일'의 한계는 존재했습니다. 개발 이슈(사진이 옆으로 늘어난 이유) 개발 도중,...

  AI 이미지 업스케일러 사용화면 비용없는 'AI 이미지 업스케일러' 제작기 "이 사진이 조금만 더 선명했더라면" 이라고 생각해 보신적 있으신가요? 웹 서핑을 하거나 오래된 사진을 정리하거나 누구나 한 번쯤은 하는 생각입니다. 시중에 많은 AI 업스케일러가 있지만, 여러장 이용하다보면 유료거나 이미지를 서버에 업로드해야 하는 찜찜함이 있었습니다. 그래서 저는 바이브코딩을 통해 직접 만들어보기로 했습니다. 개발자가 복잡한 로직에 매몰되기보다 '구현하고자 하는 가치'에 집중하여 AI와 협업하는 이 방식 덕분에, 아이디어에서 실제 완성 단계까지 단숨에 도달할 수 있었습니다. 벌써 이전 EXIF 개인정보 일괄 삭제기에 이어 6번째 도구인 'AI 이미지 업스케일러'를 소개합니다. 왜 '클라이언트 사이드 AI'인가? 대부분의 AI 서비스는 강력한 GPU 서버를 필요로 합니다. 하지만 저는 두 가지 원칙을 지키고 싶었습니다. 사용자의 프라이버시: 소중한 사진이 외부 서버에 저장되지 않아야 한다. 지속 가능한 무료 서비스: 서버 연산 비용이 들지 않아야 누구나 평생 무료로 쓸 수 있다. 이 고민을 해결해준 것이 바로 upscalerjs 와 esrgan-slim 모델입니다. 사용자의 브라우저 리소스를 활용해 로컬에서 직접 AI 연산을 수행함으로써 보안과 비용 문제를 동시에 해결했습니다. 바이브코딩으로 구현한 핵심 기술 스택 바이브코딩은 단순히 코드를 복사하는 것이 아니라, AI에게 명확한 '작업 설계도'를 제시하고 소통하는 과정입니다. 이번 프로젝트에서 사용된 주요 기술은 다음과 같습니다. 기술 요소 역할 및 장점 Next.js 14 (App Router) 빠르고 구조적인 웹 프레임워크 환경 제공 Upscaler.js TensorFlow.js 기반으로 브라우저 내 AI 업스케일링 구현 ESRGAN-slim 모델 가벼우면서도 강력한 화질 개선 성능을 가진 AI 모델 Tailwind ...

사진 EXIF 개인정보 일괄 삭제기 '완료' 화면 '사진 개인정보 삭제기'를 바이브 코딩으로 완성한 비결 SNS를 운영하고 다양한 콘텐츠를 제작하다 보면 수많은 사진 자료를 다루게 됩니다. 그런데 어느날 그런 생각이 들었습니다. 무심코 찍어 올린 사진의 상세 정보를 확인하다가 우리 집 거실 위도와 경도가 소수점 단위까지 정확히 기록된 것을 보고 소름이 돋았던 적이 있습니다. 시중의 EXIF 제거기들은 대부분 사진을 서버로 업로드해야 하거나, 한 장씩만 처리되어 불편했습니다. 또한 몇장 사진 정보를 지우다 보면 유료 결제를 유도했습니다. 그래서 결심하여 내 사진을 어디에도 보내지 않고, 브라우저에서 즉시, 수십 장을 한 번에 처리하는 가장 안전한 도구 를 직접 만들어 보게 되었습니다. EXIF 데이터란 무엇이며 왜 삭제해야 할까요? EXIF 데이터 는 디지털카메라나 스마트폰으로 사진을 찍을 때 자동으로 기록되는 정보입니다. GPS 위치: 사진이 촬영된 위도와 경도. 기기 정보: 사용한 스마트폰 모델명(예: iPhone 16). 촬영 상세 정보: 노출값, ISO, 촬영 일시 등. SNS나 커뮤니티에 원본 사진을 그대로 업로드하면 누구나 이 데이터를 추출해 여러분의 동선을 파악할 수 있습니다. 특히 아이들의 사진이나 집 내부 사진을 올릴 때는 반드시 EXIF 삭제하는 각별한 주의가 필요합니다. 기획에서 완료까지 단 30분 이번 프로젝트는 기존 프로젝트와 동일하게 바이브 코딩 방식으로 진행하게 되었습니다. 먼저 ‘제미나이’에게 전체적인 '의도와 흐름'을 전달하고 작업 계획서를 먼저 세우는 방식이었습니다. 복잡한 바이너리 제어의 단순화: 사진의 메타데이터를 직접 건드리는 것은 매우 까다로운 작업입니다. 하지만 AI에게 piexifjs 라이브러리의 핵심 로직과 제가 원하는 UI의 '바이브'를 설명하자, 단 몇 분 만에 완벽한 초안이 나왔습니다. 창의성에 집중하는 개발: "보라색 테마의 깔끔한 ...

이미지 일괄 변환 '사용 완료' 화면   직접 쓰려고 만든 ‘이미지 일괄 변환기’ 바이브코딩으로 20분 만에 끝! 평소 업무를 보다보면 수많은 이미지 파일의 포맷을 변환해야 하는 번거로운 상황을 자주 마주하게 됩니다. 시중에 많은 변환 사이트가 있지만, 매번 파일을 서버에 업로드해야 하는 찝찝함과 마지막에는 유료 결제를 유도 하는 등 불편한점이 있어 직접 도구를 만들기로 결심했습니다. 바쁜 분들을 위한 핵심 요약 제가 직접 개발한 "이미지 일괄 변환" 툴은 별도의 설치나 서버 업로드 없이 브라우저에서 즉시 JPG, PNG, WebP 형식을 상호 변환해 줍니다. 주요 기능: 다중 파일 선택, 포맷 선택(JPG/PNG/WebP), 압축 다운로드(ZIP) 장점: 서버 전송 없음(개인정보 보호), 초고속 Canvas 처리, 100% 무료 이 이미지 변환 툴을 써야 하는 이유 최근 구글 검색 엔진과 AI 답변 엔진은 '사용자 경험'과 '기술적 안전성'을 중요하게 평가합니다. 완벽한 보안 (Client-side Processing): 대부분의 변환 사이트는 파일을 서버로 전송합니다. 하지만 이 툴은 HTML5 Canvas 기술 을 사용하여 사용자의 브라우저 내에서 모든 처리가 완료됩니다. 소중한 사진이 외부로 유출될 걱정이 전혀 없습니다. 압도적인 속도: 파일을 올리고 내리는 대기 시간이 없습니다. 드래그하자마자 브라우저 자원을 활용해 즉시 변환을 시작합니다. 효율적인 관리: 변환된 파일들을 일일이 저장할 필요 없이, '전체 ZIP 다운로드' 기능을 통해 한 번에 정리할 수 있습니다. 바이브코딩으로 구현한 기술적 여정 이번 프로젝트도 ‘그록 자동화 프로그램’처럼 최근 AI 기반 개발 트렌드인 바이브코딩 방식을 전적으로 활용했습니다. 코드를 한 줄 한 줄 직접 짜기보다, 구현하고자 하는 기능과 구조를 세운 뒤, 제미나이에게 작업계획서 작성을 요청한 다음 클로드 코드한테 전달하여 협업하는 방...

동영상 로고 제거 사용화면 숏폼 워터마크, 안전하게 내 브라우저에서 지우세요! 소중하게 촬영한 영상이나 편집한 숏폼 영상에 불필요한 로고나 워터마크가 남아 있어 고민이신가요? 그래서 제가 로그인 없고 무료로 사용이 가능한 웹 ‘ AI 동영상 로고 제거기’ 를 만들게 되었습니다. 제작 동기: 숏폼 콘텐츠를 제작하다 보면 원치 않는 로고나 워터마크 때문에 영상의 퀄리티가 떨어지는 경우가 많습니다. 기존의 웹 도구들은 영상을 서버에 업로드해야 해서 개인정보 유출이 걱정되거나, 유료 결제를 유도하기도 합니다. 저는 최근 제가 주력하고 있는 바이브 코딩 을 활용하여, 서버 전송 없이 오직 사용자의 브라우저 내에서만 안전하게 작동하는 "AI 동영상 로고 제거기" 프로그램을 직접 개발했습니다. 동영상 로고 제거, 3단계로 끝내기 (사용가이드) 이 도구는 복잡한 설치 없이 웹에서 바로 실행됩니다. 다음의 간단한 단계를 따라해 보세요. 영상 업로드: 지우고 싶은 영상(MP4, MOV, WebM)을 드래그 앤 드롭으로 업로드합니다. 영역 지정: 미리보기 화면 위에서 마우스 드래그로 제거하고 싶은 로고나 워터마크 위치를 사각형 박스로 선택합니다. 제거 및 다운로드: '로고 제거 시작' 버튼을 누르면 실시간으로 진행률이 표시되며, 완료 후 즉시 다운로드 할 수 있습니다. 동영상 로고 제거 첫 화면 결과물 확인 및 혜택 처리가 완료된 영상은 주변 픽셀과 자연스럽게 어우러져 로고가 깔끔하게 흐려진 상태로 저장됩니다. 100% 로컬 처리: 영상 데이터가 외부 서버로 나가지 않아 개인정보가 완벽하게 보호됩니다. 숏폼 최적화: 틱톡(TikTok), 인스타그램 릴스(Reels) 등 짧은 영상 처리에 가장 빠른 성능을 보여줍니다. 워터마크 없는 저장: 별도의 결제 없이 깔끔하게 결과물을 무료로 얻을 수 있습니다. 동영상 로고 제거 완료화면 개발 비하인드: 이번 프로젝트는 Next.js와 Tailwind CSS 를 기반으로 설계되어 제작 되었습니다. ...