toolzip 님의 블로그

SVG가 JPG보다 나은 경우는? — 실시간 SVG 코드 편집기

toolzip — Fri, 9 Oct 2026 08:08:50 +0900

SVG(Scalable Vector Graphics)는 픽셀 기반 이미지(JPG, PNG)와 근본적으로 다른 방식으로 작동한다. 언제 SVG를 쓰는 게 유리한지 알아보자.

SVG의 핵심 특징

SVG는 점, 선, 도형을 수학적 공식으로 표현한다. 그 결과:

아무리 확대해도 깨지지 않는다: 로고를 명함 크기로 쓰다가 현수막 크기로 늘려도 선명하다.
파일 크기가 작다: 복잡한 일러스트가 아니라면 JPG보다 훨씬 작다.
코드로 편집 가능: 텍스트 파일이라 메모장으로도 수정 가능.
CSS와 JavaScript로 제어 가능: 웹에서 애니메이션, 인터랙션 구현 가능.

SVG를 쓰면 좋은 경우

로고, 아이콘: 다양한 크기로 사용하는 것들
지도, 다이어그램: 선과 도형으로 구성된 것들
웹사이트 일러스트: CSS 애니메이션을 적용할 것들
QR 코드, 바코드: 선명도가 중요한 것들

SVG를 피해야 하는 경우

사진: 픽셀 기반이라 SVG로 표현하면 파일 크기가 폭발적으로 커진다.
복잡한 일러스트: 그라디언트와 효과가 많으면 SVG도 용량이 커진다.

SVG 기본 구조

SVG는 XML 기반이라 태그로 요소를 정의한다.

circle: 원
rect: 사각형
path: 복잡한 선과 곡선
text: 텍스트

ToolZip 도구 바로가기

바로가기 →

SVG 편집기 바로가기 → 바로가기 www.toolzip.app/tools/svg-preview

SVG 코드를 편집하면 오른쪽에 실시간으로 미리보기가 반영된다. 별도 프로그램 없이 브라우저에서 바로 사용 가능하다.

주요 기능:
코드 수정 즉시 미리보기 반영
SVG 파일 업로드 지원
파싱 오류 즉시 표시
배경 모드: 흰색/어두운/체크보드/투명
확대·축소 (25 ~ 300%)

스니펫 삽입 버튼 (circle, rect, text, line, path)
예제 SVG 기본 제공
PNG/JPG 내보내기 (64~1024px)

정리

✅ 설치 없이 브라우저에서 바로 사용
✅ 파일이 서버로 전송되지 않음
✅ 완전 무료

ToolZip 바로가기 →

관련 도구: 그라디언트 생성기 · Favicon 생성기 · 그림판

3D 파일을 브라우저에서 열게 된 이야기 — Three.js 뷰어 개발기

toolzip — Thu, 8 Oct 2026 19:00:48 +0900

OBJ, FBX, STL, PLY... 8가지 3D 파일 포맷을 브라우저에서 열 수 있는 뷰어를 만들었습니다. 생각보다 쉽지 않았습니다.

왜 만들었나요?

3D 파일을 확인하려면 보통 Blender나 MeshLab 같은 무거운 프로그램을 설치해야 합니다. 단순히 "이 파일이 어떻게 생겼지?" 확인하는 것뿐인데 수백MB짜리 프로그램을 설치하는 건 과합니다.

브라우저에서 바로 열 수 있으면 어떨까 생각했습니다. 파일이 서버로 전송되지 않으면 더 좋고요.

Three.js를 선택한 이유

브라우저에서 3D를 렌더링하는 방법은 WebGL입니다. 하지만 WebGL을 직접 쓰는 건 C++로 게임 엔진을 만드는 것처럼 복잡합니다.

Three.js는 WebGL 위에서 동작하는 라이브러리입니다. 복잡한 WebGL 코드를 추상화해서 JavaScript로 쉽게 3D를 다룰 수 있게 해줍니다.

첫 번째 문제 — CDN vs npm

처음에는 CDN으로 Three.js를 불러오는 방식을 썼습니다.

<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js">

그런데 이 방식은 타이밍 문제가 있었습니다. 스크립트가 로드되기 전에 컴포넌트가 초기화되면 window.THREE is undefined 에러가 납니다.

npm으로 설치하고 import하는 방식으로 바꿨습니다. 이 방식은 모듈이 사용되기 전에 반드시 로드됩니다.

두 번째 문제 — 포맷마다 다른 로더

OBJ, FBX, STL, PLY 각각의 포맷마다 다른 로더가 필요합니다. 그런데 각 로더마다 반환하는 데이터 구조가 조금씩 달랐습니다.

OBJ 로더: THREE.Group을 반환합니다.
FBX 로더: THREE.Group을 반환하지만 애니메이션이 포함됩니다.
STL 로더: THREE.BufferGeometry를 직접 반환합니다. 직접 Mesh를 만들어야 합니다.
PLY 로더: THREE.BufferGeometry를 반환합니다. 컬러 정보가 포함될 수 있습니다.

각 로더의 특성에 맞게 처리하는 공통 함수를 만드는 데 시간이 걸렸습니다.

세 번째 문제 — GLB의 Draco 압축

GLB 파일 중 일부는 Draco 압축을 사용합니다. 이런 파일은 Draco 디코더 없이는 열 수 없습니다.

Draco 디코더는 WebAssembly 파일로 약 150KB입니다. Google CDN에서 불러올 수 있습니다.

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/v1/decoders/');
gltfLoader.setDRACOLoader(dracoLoader);

이 설정 없이는 Draco 압축된 GLB 파일이 조용히 실패합니다. 에러 메시지도 명확하지 않아서 원인을 찾는 데 시간이 걸렸습니다.

네 번째 문제 — BVH 파일의 좌표 스케일

BVH는 모션 캡처 데이터 포맷입니다. 뼈대(Skeleton)와 애니메이션 데이터만 있고 메시가 없습니다.

BVH 파일의 좌표는 센티미터 단위입니다. 그냥 렌더링하면 화면에 아무것도 보이지 않거나 너무 크게 나옵니다. 뼈대의 실제 크기를 계산해서 적절히 스케일을 조정해야 합니다.

const bonePositions = skeleton.bones.map(b => b.position);
const maxDim = Math.max(
  Math.max(...bonePositions.map(p => p.x)) - Math.min(...bonePositions.map(p => p.x)),
  Math.max(...bonePositions.map(p => p.y)) - Math.min(...bonePositions.map(p => p.y))
);
group.scale.setScalar(2.5 / maxDim);

다섯 번째 문제 — React의 stale closure

자동 회전 기능을 만들 때 버그가 있었습니다. autoRotate 상태를 requestAnimationFrame 루프 안에서 읽으면, 항상 초기값만 읽히는 문제입니다.

React의 stale closure 문제입니다. 해결책은 ref를 사용하는 것입니다.

const stateRef = useRef({ autoRotate: true });

useEffect(() => {
  stateRef.current.autoRotate = autoRotate;
}, [autoRotate]);

// 애니메이션 루프 안에서:
if (stateRef.current.autoRotate) rotY += 0.2;

결과

OBJ, GLB, GLTF, FBX, STL, DAE, BVH, PLY 8가지 포맷을 지원하는 뷰어가 완성됐습니다. 드래그 앤 드롭으로 파일을 올리면 바로 3D 모델을 볼 수 있습니다. 파일이 서버로 전송되지 않습니다.

생각보다 많은 문제가 있었지만, 하나씩 해결하는 과정이 재미있었습니다.

SQL 코드가 읽기 어려운 이유 — 무료 온라인 SQL 포맷터

toolzip — Thu, 8 Oct 2026 08:00:32 +0900

데이터베이스를 다루는 개발자라면 읽기 어려운 SQL 쿼리를 만나본 적 있을 것이다. 왜 SQL은 지저분해지고 어떻게 정리할까.

SQL이란

SQL(Structured Query Language)은 데이터베이스에서 데이터를 조회, 삽입, 수정, 삭제하는 언어다. 1970년대 IBM에서 개발됐으며 지금도 전 세계 데이터베이스 표준으로 쓰인다.

SQL이 지저분해지는 이유

SQL은 대소문자를 구분하지 않고 줄바꿈이 없어도 실행된다. 그 결과 급하게 작성하거나 도구에서 자동 생성된 SQL은 이런 형태가 된다.

select u.id,u.name,o.total from users u inner join orders o on u.id=o.user_id where u.active=1 and o.total>1000 order by o.total desc limit 10

이것을 제대로 포맷하면:

SELECT u.id, u.name, o.total
FROM users u
INNER JOIN orders o ON u.id = o.user_id
WHERE u.active = 1
AND o.total > 1000
ORDER BY o.total DESC
LIMIT 10

같은 코드지만 읽기 훨씬 쉽다.

SQL 가독성이 왜 중요한가

버그 찾기: 정렬된 코드에서 실수를 발견하기 쉽다.
코드 리뷰: 팀원이 검토할 때 이해하기 쉽다.
유지보수: 6개월 후 본인이 다시 봐도 이해할 수 있다.

SQL 컨벤션 기초

키워드(SELECT, FROM, WHERE)는 대문자로
열 이름은 소문자 또는 snake_case로
각 절(clause)은 새 줄에서 시작
AND, OR는 들여쓰기

ToolZip 도구 바로가기

바로가기 →

SQL 포맷터 바로가기 → https://www.toolzip.app/tools/sql-formatter

지저분한 SQL 쿼리를 붙여넣으면 들여쓰기와 줄바꿈이 정리된다. 브라우저에서만 처리된다.

주요 기능:
키워드 자동 대문자 변환
절(clause)별 줄바꿈 처리
AND/OR 들여쓰기
JOIN 처리
CASE WHEN 들여쓰기
압축(Minify) 기능 (한 줄로 만들기)
예제 쿼리 2개 제공
결과 복사 버튼

정리

✅ 설치 없이 브라우저에서 바로 사용
✅ 파일이 서버로 전송되지 않음
✅ 완전 무료

ToolZip 바로가기 →

관련 도구: JSON 포맷터 · 정규식 테스터 · UUID 생성기

해시(Hash)란 무엇인가 — 비밀번호가 저장되는 방식

toolzip — Wed, 7 Oct 2026 19:00:00 +0900

여러분의 비밀번호는 어떻게 저장될까요? 어딘가에 "password123"이라고 그대로 저장되어 있을까요? 그렇지 않습니다. 해시라는 기술 덕분에 여러분의 비밀번호는 아무도 읽을 수 없는 형태로 저장됩니다.

해시 함수란

해시 함수는 어떤 데이터를 넣어도 정해진 길이의 결과를 내뱉는 함수입니다. 중요한 특성이 있습니다. 같은 입력은 항상 같은 결과가 나오지만, 결과를 보고 원래 입력을 알아낼 수는 없습니다. 일방통행입니다.

예를 들어 SHA-256이라는 해시 함수에 "hello"를 넣으면 항상 이 값이 나옵니다.

2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b9824

64자리 16진수입니다. 이 값을 보고 원래 입력이 "hello"였다는 것을 알아낼 방법은 없습니다.

비밀번호가 저장되는 방식

사이트에 처음 가입할 때 비밀번호를 입력하면 서버는 이것을 그대로 저장하지 않습니다.

입력한 비밀번호를 해시 함수에 넣습니다.
나온 결과값(해시값)을 데이터베이스에 저장합니다.
원본 비밀번호는 어디에도 저장되지 않습니다.

다음에 로그인할 때는 이렇게 동작합니다.

입력한 비밀번호를 해시 함수에 넣습니다.
나온 결과값을 데이터베이스에 저장된 값과 비교합니다.
두 값이 같으면 로그인 성공입니다.

서버는 비밀번호를 모르고도 비밀번호가 맞는지 확인할 수 있습니다.

해킹을 당해도 비밀번호가 안전한 이유

사이트가 해킹당해서 데이터베이스가 유출됐다고 가정합니다. 해커가 가져간 것은 해시값뿐입니다. "2cf24dba..."라는 값을 보고 원래 비밀번호가 "hello"였다는 것을 알 수 없습니다.

이론적으로는 그렇습니다. 하지만 현실에서는 조금 다릅니다.

레인보우 테이블의 위협

"password", "123456", "qwerty" 같은 흔한 비밀번호의 해시값은 미리 계산해둘 수 있습니다. 이런 미리 계산된 해시값 목록을 레인보우 테이블이라고 합니다.

해커가 해시값 "2cf24dba..."를 가지고 레인보우 테이블에서 찾으면 "hello"에 해당하는 값이라는 것을 알 수 있습니다.

단순한 해시만으로는 부족합니다.

솔팅 — 레인보우 테이블을 무력화하는 방법

솔팅(Salting)은 비밀번호에 무작위 값(솔트)을 추가해서 해시하는 방법입니다.

같은 "hello"라도 솔트가 "abc123"이라면 "helloabc123"을 해시합니다. 사용자마다 다른 솔트를 사용하므로 같은 비밀번호여도 다른 해시값이 나옵니다. 레인보우 테이블이 무력화됩니다.

파일 무결성 확인에도 사용됩니다

해시는 비밀번호 외에도 파일이 변조됐는지 확인하는 데 사용됩니다. 소프트웨어를 배포할 때 파일의 해시값을 함께 공개합니다. 다운로드한 파일의 해시값을 계산해서 공개된 값과 비교하면 파일이 중간에 변조됐는지 알 수 있습니다.

정리

해시 함수는 데이터를 일방통행으로 변환합니다. 결과를 보고 원본을 알 수 없습니다. 이 특성을 이용해 비밀번호를 안전하게 저장하고, 파일의 무결성을 확인합니다. 여러분이 비밀번호를 잊어버렸을 때 사이트가 비밀번호를 알려주지 못하고 재설정만 가능한 이유가 바로 이것입니다.

ZIP 압축은 어떻게 파일을 줄이나 — 무료 온라인 ZIP 압축·해제 도구

toolzip — Wed, 7 Oct 2026 08:00:55 +0900

이메일에 파일을 첨부할 때, 웹에서 파일을 내려받을 때 ZIP 파일을 자주 만난다. ZIP 압축은 어떤 원리로 파일 크기를 줄일까.

압축의 기본 원리

압축은 데이터의 반복 패턴을 찾아 더 짧게 표현하는 것이다.

예: "AAAAAABBBBB"를 "6A5B"로 표현 (런 길이 인코딩)

실제 ZIP은 DEFLATE 알고리즘을 사용한다. LZ77(반복 문자열 참조)과 허프만 코딩(자주 나오는 문자를 짧게)을 결합한 방식이다.

어떤 파일이 잘 압축되나

모든 파일이 똑같이 압축되지 않는다.

잘 압축되는 파일: 텍스트, 로그, 문서 파일 (80%+ 압축 가능)
보통: 이미지 BMP, TIFF (50~70%)
거의 압축 안 됨: JPG, PNG, MP4, MP3 (이미 압축된 형식)

이미 압축된 파일(JPG, MP4)을 다시 ZIP으로 묶으면 오히려 크기가 늘어날 수 있다.

ZIP vs 다른 압축 형식

ZIP: 범용성 최고. 모든 OS에서 기본 지원.
RAR: 압축률이 조금 더 좋지만 전용 프로그램 필요.
7z: 가장 높은 압축률이지만 대중성이 낮음.
TAR.GZ: 리눅스/맥에서 주로 사용. 압축+아카이브 분리.

패스워드 ZIP의 보안성

ZIP 파일에 비밀번호를 걸 수 있지만, 기존 ZipCrypto 암호화는 취약점이 있어 쉽게 뚫린다. 중요한 파일은 AES-256 암호화를 지원하는 7z나 전용 암호화 도구를 쓰는 것이 안전하다.

ToolZip 도구 바로가기

바로가기 →

ZIP 압축·해제 바로가기 → https://www.toolzip.app/tools/zip-tool

JSZip 라이브러리를 사용해 브라우저에서만 처리된다. 파일이 서버로 전송되지 않는다.

ZIP 압축:
여러 파일 동시 추가 (드래그 또는 클릭)
파일 개별 제거 가능
ZIP 파일명 직접 입력
DEFLATE 압축 (레벨 6 기본)

ZIP 해제:
ZIP 파일 업로드
파일 목록 미리보기
전체 압축 해제 (개별 다운로드)

정리

✅ 설치 없이 브라우저에서 바로 사용
✅ 파일이 서버로 전송되지 않음
✅ 완전 무료

ToolZip 바로가기 →

관련 도구: PDF 압축 · 이미지 압축 · 동영상 압축

서버 없이 웹서비스를 운영하는 방법

toolzip — Tue, 6 Oct 2026 19:00:56 +0900

웹서비스를 만들려면 서버가 있어야 한다는 생각이 있습니다. 물론 전통적인 방식은 그렇습니다. 하지만 지금은 서버 없이도 웹서비스를 운영할 수 있는 방법이 있습니다. 실제로 이미지 압축, PDF 편집, 동영상 변환 등 52가지 도구를 제공하는 서비스를 서버 없이 운영하고 있습니다.

서버리스(Serverless)란

서버리스는 서버가 아예 없다는 뜻이 아닙니다. 개발자가 직접 서버를 관리하지 않는다는 의미입니다. 서버는 클라우드에 있지만, 용량 설정, 운영체제 관리, 보안 패치, 스케일링 같은 작업을 모두 클라우드 업체가 처리합니다.

방법 1 — 파일 처리를 브라우저에서 합니다

가장 근본적인 방법은 서버가 필요한 작업을 브라우저로 옮기는 것입니다.

이미지 압축과 변환은 Canvas API로, PDF 합치기와 분리는 pdf-lib으로, 동영상 압축과 변환은 FFmpeg.wasm으로 처리합니다. 모두 브라우저에서 실행됩니다. 파일이 서버로 전송되지 않습니다.

이 방식은 세 가지 장점이 있습니다.

서버 비용이 없습니다.
파일이 외부로 나가지 않아 개인정보가 보호됩니다.
서버 부하가 없으니 사용자가 많아져도 속도가 유지됩니다.

방법 2 — 정적 호스팅을 사용합니다

HTML, CSS, JavaScript 파일만으로 이루어진 웹사이트는 서버 없이 정적 파일 호스팅으로 서비스할 수 있습니다.

Vercel, Netlify, Cloudflare Pages 같은 서비스가 이를 제공합니다. GitHub에 코드를 올리면 자동으로 빌드하고 배포합니다. 무료 플랜으로도 충분한 수준의 트래픽을 처리할 수 있습니다.

방법 3 — 서버리스 함수를 사용합니다

서버가 필요한 작업이 있을 때는 서버리스 함수를 사용합니다. 코드를 작성하면 클라우드가 필요할 때만 실행하고, 실행하지 않을 때는 비용이 발생하지 않습니다.

Vercel Functions, AWS Lambda, Cloudflare Workers 같은 서비스가 있습니다. API 키 처리나 외부 서비스 연동처럼 서버가 필요한 작업만 서버리스 함수로 처리합니다.

방법 4 — 외부 서비스를 조합합니다

데이터베이스, 인증, 파일 저장 같은 기능을 직접 구현하지 않고 전문 서비스를 사용합니다.

데이터베이스: Supabase, PlanetScale, Neon
인증: Auth0, Clerk, NextAuth
파일 저장: Cloudflare R2, AWS S3
KV 저장소: Vercel KV, Upstash

이런 서비스들은 대부분 무료 티어가 넉넉해서 초기 운영에 비용이 거의 들지 않습니다.

실제 운영 비용

52가지 도구를 제공하는 서비스를 이 방식으로 운영했을 때 월 비용입니다.

항목	비용
Vercel (호스팅)	무료
Vercel KV (데이터베이스)	무료
도메인	연 $15 (~2만원)
합계	연 2만원

사용자가 늘면 유료 플랜으로 전환해야 하지만, 초기에는 거의 무료로 운영이 가능합니다.

한계도 있습니다

서버리스 방식이 항상 좋은 것은 아닙니다.

처리 속도: 브라우저에서 처리하면 서버보다 느립니다. 사용자 기기 성능에 따라 다르고, 구형 기기에서는 답답할 수 있습니다.

복잡한 기능: 사용자 간 실시간 상호작용이 필요하거나, 대용량 데이터를 처리해야 하는 경우 서버가 필요합니다.

콜드 스타트: 서버리스 함수는 오래 사용하지 않으면 슬립 상태가 됩니다. 처음 요청할 때 딜레이가 생길 수 있습니다.

정리

서버 없이 웹서비스를 운영하는 것은 가능합니다. 파일 처리를 브라우저로 옮기고, 정적 호스팅을 활용하고, 서버리스 함수와 외부 서비스를 조합하면 됩니다. 초기 비용 없이 시작할 수 있어서 사이드 프로젝트나 개인 서비스에 특히 적합합니다.

세계 33개 도시 실시간 시계 — 서머타임 자동 반영 세계 시계

toolzip — Tue, 6 Oct 2026 08:00:04 +0900

재택근무와 원격 협업이 늘면서 시간대 계산이 일상이 됐다. 뉴욕의 오전 9시는 서울의 몇 시일까. 서머타임은 언제 바뀔까.

시간대가 생겨난 이유

19세기 이전에는 각 지역이 태양의 위치를 기준으로 자체 시간을 썼다. 런던과 옥스퍼드는 8분 차이가 있었다. 철도가 등장하면서 문제가 생겼다. 기차 시간표를 맞출 수 없었다.

1884년 국제 자오선 회의에서 그리니치 천문대를 기준(UTC+0)으로 24개 시간대를 정했다.

UTC와 GMT의 차이

GMT(Greenwich Mean Time): 그리니치 천문대 기준 시간. 역사적 개념.
UTC(Coordinated Universal Time): 원자시계 기반의 국제 표준 시간. 현재 공식 표준.

실용적으로는 거의 같지만 기술적으로 UTC가 더 정확하다.

서머타임(DST)이란

여름에 시계를 1시간 앞당기는 제도다. 일조 시간을 활용해 에너지를 절약하고 야외 활동 시간을 늘리는 목적이다.

미국은 3월 두 번째 일요일에 시작해 11월 첫 번째 일요일에 종료한다. 유럽은 3월 마지막 일요일에 시작해 10월 마지막 일요일에 종료한다.

한국은 서머타임을 시행하지 않는다.

시간대 계산 실수 방지법

국제 화상 회의를 잡을 때 가장 흔한 실수는 서머타임을 빠뜨리는 것이다. 예를 들어 미국 서머타임 기간에 서울과 뉴욕의 시차는 13시간이지만, 서머타임이 없을 때는 14시간이다.

ToolZip 도구 바로가기

바로가기 →

세계 시계 바로가기 → https://www.toolzip.app/tools/world-clock

33개 도시의 현재 시각을 실시간으로 확인한다. 서머타임이 자동으로 반영된다.

수록 도시:
아시아 12개: 서울, 도쿄, 베이징, 홍콩, 싱가포르, 방콕, 자카르타, 뭄바이, 두바이, 이스탄불 등
유럽 8개: 런던, 파리, 베를린, 모스크바 등
아메리카 7개: 뉴욕, LA, 시카고, 토론토, 상파울루 등
아프리카·오세아니아: 카이로, 시드니, 오클랜드 등

주요 기능:
도시 카드 최대 12개 추가
카드 클릭으로 기준 도시 설정
기준 도시 대비 시차 표시 (+/-시간)
낮/밤 이모지 표시 (☀️/ )
시간대 바 (UTC-12~+14 시각화)
도시 이름/국가명 검색
대륙별 필터

정리

✅ 설치 없이 브라우저에서 바로 사용
✅ 파일이 서버로 전송되지 않음
✅ 완전 무료

ToolZip 바로가기 →

브라우저는 어떻게 이미지를 보여주는가 — 파일에서 화면까지의 여정

toolzip — Mon, 5 Oct 2026 19:00:52 +0900

웹 페이지에서 이미지를 클릭하거나 사진을 업로드하면 순식간에 화면에 표시됩니다. 이 과정이 실제로 어떻게 이루어지는지 알고 나면 웹이 다르게 보입니다.

1단계 — URL 요청: 이미지 파일의 위치를 찾습니다

HTML 코드에 이런 태그가 있다고 합시다.

<img src="https://example.com/photo.jpg">

브라우저는 이 태그를 발견하면 example.com 서버에 photo.jpg 파일을 달라고 요청합니다. 이것이 HTTP 요청입니다.

서버는 파일을 찾아서 바이트 데이터로 전송합니다. 네트워크를 통해 이 데이터가 브라우저에 도착합니다.

2단계 — 디코딩: 압축을 풉니다

서버에서 받은 데이터는 JPG, PNG, WEBP 같은 압축 형식입니다. 브라우저는 이 압축을 풀어야 합니다.

JPG 디코딩: 압축된 주파수 데이터를 역변환해서 픽셀 색상값으로 변환합니다.

PNG 디코딩: 무손실로 압축된 데이터를 원본 픽셀값으로 복원합니다.

디코딩이 완료되면 이미지는 픽셀 배열 형태가 됩니다. 각 픽셀은 RGBA(빨강, 초록, 파랑, 투명도) 4바이트로 표현됩니다. 1920×1080 이미지라면 약 8MB의 픽셀 데이터가 메모리에 올라갑니다.

3단계 — 레이아웃: 화면의 어디에 그릴지 계산합니다

이미지를 어떤 크기로, 어디에 배치할지 계산합니다. CSS에서 width, height, position 같은 속성이 이 단계에 영향을 줍니다.

이미지 파일의 원본 크기가 1000×800이더라도 CSS에서 width: 300px로 지정하면 300×240 크기로 그려야 합니다. 스케일링이 필요합니다.

4단계 — 페인팅: GPU에 전달해서 화면에 그립니다

최종적으로 이미지 데이터를 GPU(그래픽 처리 장치)에 전달합니다. GPU는 픽셀 데이터를 화면에 그립니다.

현대 브라우저는 이미지를 GPU 메모리에 텍스처로 올려두고, 화면에 그릴 때마다 GPU가 직접 처리합니다. 스크롤하거나 애니메이션이 있어도 빠른 이유입니다.

이미지 로딩이 느린 이유

파일 크기가 크면: 네트워크 전송 시간이 깁니다. 10MB 이미지는 느린 인터넷에서 수십 초가 걸릴 수 있습니다.

디코딩 비용: JPG 디코딩은 비교적 빠르지만, 고해상도 이미지를 많이 디코딩하면 CPU 사용량이 높아집니다.

메모리 부족: 디코딩된 픽셀 데이터는 압축 파일보다 훨씬 큽니다. 많은 이미지를 한 페이지에 올리면 메모리 부족으로 느려집니다.

지연 로딩(Lazy Loading)

이미지를 화면에 보이는 시점에만 로드하는 기술입니다. 스크롤하지 않으면 보이지 않는 이미지는 미리 로드하지 않습니다. HTML에서 이렇게 설정합니다.

<img src="photo.jpg" loading="lazy">

브라우저에서 이미지를 처리하는 기술들

최근에는 브라우저 자체적으로 이미지를 처리할 수 있는 API가 많아졌습니다.

Canvas API: 이미지를 픽셀 단위로 처리할 수 있습니다. 밝기 조절, 필터 적용, 크기 변경 같은 작업이 가능합니다. 서버 없이 브라우저에서 이미지를 편집할 수 있는 이유입니다.

ImageBitmap API: 이미지를 비동기로 디코딩해서 UI가 멈추지 않게 합니다.

WebP, AVIF 지원: 최신 브라우저는 새로운 이미지 포맷을 직접 디코딩합니다.

정리

브라우저가 이미지를 보여주는 과정은 요청, 다운로드, 디코딩, 레이아웃 계산, GPU 렌더링으로 이루어집니다. 이 과정이 0.1초 이내에 일어나기도 하지만, 파일이 크거나 이미지가 많으면 지연이 생깁니다. 이미지 최적화가 웹 성능에 중요한 이유가 여기 있습니다.

동영상 방향이 잘못 찍혔을 때 — 온라인 동영상 회전·반전 도구

toolzip — Mon, 5 Oct 2026 08:00:55 +0900

스마트폰으로 촬영한 동영상이 PC에서 옆으로 누워 나오거나 거꾸로 보이는 경험, 한 번쯤 있을 것이다. 왜 이런 일이 생기고 어떻게 해결할까.

동영상 방향 문제가 생기는 이유

스마트폰은 가속도 센서로 방향을 인식하고, 이 정보를 영상 파일의 메타데이터에 저장한다. 스마트폰의 미디어 플레이어는 이 정보를 읽어서 자동으로 회전시켜 보여주지만, 일부 PC 플레이어나 영상 편집 프로그램은 이 메타데이터를 무시한다.

그 결과 스마트폰에서는 제대로 보이던 영상이 PC나 다른 기기에서는 90도 돌아가 보이는 것이다.

좌우 반전이 필요한 경우

셀카 영상: 전면 카메라는 기본적으로 거울처럼 찍힌다. 좌우를 뒤집어야 실제처럼 보인다.
유튜브 튜토리얼: 시청자 입장에서 왼손·오른손이 바뀌어 보일 때
화면 녹화: 일부 소프트웨어에서 좌우 반전으로 저장되는 경우

상하 반전이 필요한 경우

카메라를 거꾸로 설치한 경우 (보안 카메라, 블랙박스)
특수 효과 목적으로 뒤집힌 영상 필요 시

동영상 회전 처리 방식

영상 회전에는 두 가지 방법이 있다.

메타데이터 수정: 빠르지만 일부 플레이어에서 무시됨
실제 픽셀 재인코딩: 모든 플레이어에서 올바르게 보임 (처리 시간 필요)

ToolZip 도구 바로가기

바로가기 →

동영상 회전·반전 바로가기 → 바로가기 www.toolzip.app/tools/video-rotate

FFmpeg.wasm을 사용해 브라우저에서만 처리된다. 파일이 서버로 전송되지 않는다.

지원 기능:
시계 방향 90° 회전
반시계 방향 90° 회전
좌우 반전 (Flip Horizontal)
상하 반전 (Flip Vertical)
버튼을 누를 때마다 현재 상태에 누적 적용

지원 형식: MP4, MOV, WebM, AVI, MKV

UX:
원본(좌)과 결과(우) 나란히 비교
실제 변환 진행률 % 표시
마음에 들면 다운로드

사용 방법:
1단계. toolzip.app/tools/video-rotate 접속
2단계. 동영상 파일 업로드
3단계. 회전/반전 버튼 클릭
4단계. 미리보기 확인
5단계. 변환 시작 후 다운로드

정리

✅ 설치 없이 브라우저에서 바로 사용
✅ 파일이 서버로 전송되지 않음
✅ 완전 무료

ToolZip 바로가기 →

관련 도구: 동영상 압축 · 동영상 포맷 변환 · 동영상 자르기

QR코드 안에 뭐가 들어있는가 — 작은 네모 안의 기술

toolzip — Sun, 4 Oct 2026 19:00:56 +0900

카페 메뉴판, 명함, 포스터 어디서나 보이는 QR코드. 스마트폰 카메라를 갖다 대면 링크로 이동하는데, 저 작은 네모 안에 도대체 뭐가 들어있는 걸까요?

QR코드는 2차원 바코드입니다

마트에서 물건 계산할 때 스캔하는 바코드는 1차원입니다. 가로 방향으로만 정보를 담습니다. QR코드는 가로와 세로 두 방향으로 정보를 담아 훨씬 많은 데이터를 저장할 수 있습니다.

QR(Quick Response)코드는 1994년 일본 덴소웨이브(DENSO WAVE)가 자동차 부품 추적을 위해 개발했습니다. 개발자들은 특허를 보유하고 있으면서도 누구나 무료로 사용할 수 있도록 개방했습니다. 이 결정이 QR코드를 전 세계 표준으로 만들었습니다.

QR코드의 구조

QR코드를 자세히 보면 규칙적인 패턴이 있습니다.

위치 찾기 패턴(세 모서리의 큰 네모): QR코드를 어떤 각도에서 스캔해도 인식할 수 있도록 합니다. 스캐너는 먼저 이 세 개의 패턴을 찾아 QR코드의 위치와 방향을 파악합니다.

타이밍 패턴(줄무늬): QR코드의 셀 크기와 위치를 파악하는 데 사용합니다.

데이터 영역: 실제 정보가 흑백 셀의 패턴으로 저장되는 곳입니다. 검은 셀은 1, 흰 셀은 0으로 이진수 데이터를 표현합니다.

QR코드에 들어갈 수 있는 정보의 양

QR코드는 버전에 따라 저장 용량이 다릅니다. 버전은 1부터 40까지 있으며, 숫자가 클수록 더 많은 셀을 가지고 더 많은 정보를 담을 수 있습니다.

버전 1(21×21 셀): 최대 숫자 41자, 영문 25자
버전 40(177×177 셀): 최대 숫자 7,089자, 영문 4,296자, 한자 1,817자

카페 메뉴 링크 같은 짧은 URL은 버전이 낮아 QR코드가 단순합니다. 긴 URL이나 많은 정보를 담으면 패턴이 복잡해집니다.

QR코드가 찢어져도 읽히는 이유

QR코드의 특이한 특징 중 하나는 일부가 손상돼도 읽을 수 있다는 점입니다. 오류 정정(Error Correction) 기능 덕분입니다.

QR코드는 데이터를 여러 번 중복해서 저장합니다. 손상 수준에 따라 4단계가 있습니다.

L 레벨: 7% 손상까지 복구 가능
M 레벨: 15% 손상까지 복구 가능
Q 레벨: 25% 손상까지 복구 가능
H 레벨: 30% 손상까지 복구 가능

QR코드 중간에 로고를 넣는 것도 이 원리를 이용합니다. H 레벨로 설정하면 30%까지 가려도 읽히기 때문에 그 공간에 로고를 배치할 수 있습니다.

코로나 이후 QR코드가 폭발적으로 늘어난 이유

QR코드는 1990년대에 개발됐지만 일반 소비자에게 널리 퍼진 건 비교적 최근입니다. 두 가지 계기가 있었습니다.

스마트폰의 기본 카메라 앱 지원: 초기에는 별도의 QR코드 앱을 설치해야 했습니다. 2017년 iOS 11부터 아이폰 기본 카메라가 QR코드를 인식하기 시작했고, 안드로이드도 뒤따랐습니다. 앱 설치가 필요 없어지면서 진입 장벽이 사라졌습니다.

코로나19 팬데믹: 비대면 요구가 높아지면서 식당 메뉴, 출입 명부, 결제 등에 QR코드가 빠르게 도입됐습니다.

정리

QR코드는 흑백 셀의 2차원 패턴으로 텍스트 데이터를 저장합니다. 세 모서리의 위치 패턴으로 방향을 인식하고, 오류 정정 기능으로 일부 손상에도 읽힙니다. 특허를 무료로 개방한 결정이 오늘날 QR코드가 어디서나 쓰이게 만들었습니다.