toolzip 님의 블로그

브라우저가 생각보다 강력한 이유 — Canvas API FFmpeg PDF 모두 브라우저에서

"브라우저는 웹페이지를 보여주는 프로그램"이라는 인식이 있습니다. 하지만 현대 브라우저는 그 이상입니다. 서버 없이 브라우저만으로 할 수 있는 것들을 정리해봤습니다.이미지 처리 — Canvas APICanvas API는 브라우저에 내장된 이미지 처리 엔진입니다. JavaScript로 픽셀 단위까지 조작할 수 있습니다.할 수 있는 것들:이미지 크기 조절형식 변환 (JPG → WEBP 등)밝기·대비 조절필터 적용워터마크 추가여러 이미지 합성서버 없이 브라우저에서 이미지를 편집하는 도구들이 Canvas API를 기반으로 합니다.동영상 처리 — FFmpeg.wasmFFmpeg는 동영상 처리의 업계 표준 소프트웨어입니다. 원래 서버에서 실행하는 프로그램이지만, WebAssembly 기술 덕분에 브라우저에서도 실행..

사이드 프로젝트나 개인 웹서비스를 만들고 싶은데 서버 비용이 부담된다면, 무료로 시작할 수 있는 방법이 있습니다.Vercel + Next.js 조합현재 무료 웹서비스 운영의 최적 조합은 Vercel과 Next.js입니다.Next.js: React 기반의 웹 프레임워크입니다. 페이지 라우팅, API 엔드포인트, 서버 사이드 렌더링을 모두 제공합니다.Vercel: Next.js를 만든 회사가 운영하는 배포 플랫폼입니다. GitHub에 연결하면 자동 배포가 됩니다.Vercel 무료 플랜으로 할 수 있는 것항목무료 플랜대역폭월 100GB서버리스 함수 실행월 100GB-시간빌드 시간월 6,000분커스텀 도메인무제한HTTPS자동프리뷰 배포무제한시작하는 방법1단계 — Next.js 프로젝트 만들기npx create-..

동영상 압축은 서버에서 하는 것이라는 고정관념이 있었습니다. 그런데 브라우저에서 직접 동영상을 압축할 수 있다는 것을 알게 됐습니다.FFmpeg.wasm을 알게 된 계기이미지 압축 도구를 먼저 만들었습니다. Canvas API로 브라우저에서 이미지를 처리하는 것은 비교적 간단했습니다.동영상은 달랐습니다. 동영상은 수십~수백 개의 이미지 프레임에 오디오까지 합쳐진 복잡한 데이터입니다. Canvas API로 처리하기에는 한계가 있었습니다.조사하다가 FFmpeg.wasm을 발견했습니다. FFmpeg를 WebAssembly로 컴파일해서 브라우저에서 실행할 수 있게 만든 라이브러리입니다.설치와 첫 번째 벽설치는 간단합니다.npm install @ffmpeg/ffmpeg @ffmpeg/util그런데 실행하면 바로 ..

PDF 파일을 받으면 내용을 수정하기가 왜 이렇게 어려울까요? 워드 파일처럼 쉽게 편집이 되지 않는 이유가 있습니다. PDF가 처음부터 그렇게 설계됐기 때문입니다.PDF는 문서를 "출력된 것처럼" 고정하려고 만들었습니다1990년대 초, 어도비 공동창업자 존 워녹(John Warnock)에게는 고민이 있었습니다. 회사에서 만든 문서를 다른 사람에게 보내면 폰트가 달라지거나 레이아웃이 틀어지는 일이 잦았습니다. 윈도우 PC에서 만든 문서가 맥에서 다르게 보이고, 프린터마다 출력 결과가 달랐습니다.해결책은 하나였습니다. 문서를 "종이에 출력된 것처럼" 고정시키는 것입니다. 어떤 기기에서 열어도, 어떤 프린터로 출력해도 동일하게 보이도록 말입니다.이것이 PDF(Portable Document Format)의 탄..

개발 경험이 있어도 막상 처음으로 직접 웹서비스를 만들어 배포하면 예상과 다른 점이 많습니다. 이미지·PDF·동영상 처리 도구 모음인 ToolZip을 만들면서 실제로 놀랐던 것들을 공유합니다.1. 배포가 이렇게 쉬울 줄 몰랐습니다GitHub에 코드를 올리고 Vercel에 연결하면 자동으로 빌드해서 배포합니다. git push 한 번으로 끝납니다. 심지어 무료입니다.예전에 서버를 직접 관리하던 시절을 생각하면 격세지감입니다. FTP로 파일 올리고, 서버 설정 만지고, 배포 실패하면 롤백하고... 지금은 그냥 코드를 push하면 됩니다.Vercel은 GitHub에 PR을 올리면 미리보기 URL도 자동으로 만들어줍니다. 기능을 추가할 때마다 실제 환경에서 테스트할 수 있습니다.2. 브라우저가 이렇게 많은 것을..