toolzip 님의 블로그

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

SVG(Scalable Vector Graphics)는 픽셀 기반 이미지(JPG, PNG)와 근본적으로 다른 방식으로 작동한다. 언제 SVG를 쓰는 게 유리한지 알아보자.SVG의 핵심 특징SVG는 점, 선, 도형을 수학적 공식으로 표현한다. 그 결과:아무리 확대해도 깨지지 않는다: 로고를 명함 크기로 쓰다가 현수막 크기로 늘려도 선명하다.파일 크기가 작다: 복잡한 일러스트가 아니라면 JPG보다 훨씬 작다.코드로 편집 가능: 텍스트 파일이라 메모장으로도 수정 가능.CSS와 JavaScript로 제어 가능: 웹에서 애니메이션, 인터랙션 구현 가능.SVG를 쓰면 좋은 경우로고, 아이콘: 다양한 크기로 사용하는 것들지도, 다이어그램: 선과 도형으로 구성된 것들웹사이트 일러스트: CSS 애니메이션을 적용할 것들Q..

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

OBJ, FBX, STL, PLY... 8가지 3D 파일 포맷을 브라우저에서 열 수 있는 뷰어를 만들었습니다. 생각보다 쉽지 않았습니다.왜 만들었나요?3D 파일을 확인하려면 보통 Blender나 MeshLab 같은 무거운 프로그램을 설치해야 합니다. 단순히 "이 파일이 어떻게 생겼지?" 확인하는 것뿐인데 수백MB짜리 프로그램을 설치하는 건 과합니다.브라우저에서 바로 열 수 있으면 어떨까 생각했습니다. 파일이 서버로 전송되지 않으면 더 좋고요.Three.js를 선택한 이유브라우저에서 3D를 렌더링하는 방법은 WebGL입니다. 하지만 WebGL을 직접 쓰는 건 C++로 게임 엔진을 만드는 것처럼 복잡합니다.Three.js는 WebGL 위에서 동작하는 라이브러리입니다. 복잡한 WebGL 코드를 추상화해서 Ja..

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

데이터베이스를 다루는 개발자라면 읽기 어려운 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 ..

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

여러분의 비밀번호는 어떻게 저장될까요? 어딘가에 "password123"이라고 그대로 저장되어 있을까요? 그렇지 않습니다. 해시라는 기술 덕분에 여러분의 비밀번호는 아무도 읽을 수 없는 형태로 저장됩니다.해시 함수란해시 함수는 어떤 데이터를 넣어도 정해진 길이의 결과를 내뱉는 함수입니다. 중요한 특성이 있습니다. 같은 입력은 항상 같은 결과가 나오지만, 결과를 보고 원래 입력을 알아낼 수는 없습니다. 일방통행입니다.예를 들어 SHA-256이라는 해시 함수에 "hello"를 넣으면 항상 이 값이 나옵니다.2cf24dba5fb0a30e26e83b2ac5b9e29e1b161e5c1fa7425e73043362938b982464자리 16진수입니다. 이 값을 보고 원래 입력이 "hello"였다는 것을 알아낼 방법은..

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

이메일에 파일을 첨부할 때, 웹에서 파일을 내려받을 때 ZIP 파일을 자주 만난다. ZIP 압축은 어떤 원리로 파일 크기를 줄일까.압축의 기본 원리압축은 데이터의 반복 패턴을 찾아 더 짧게 표현하는 것이다.예: "AAAAAABBBBB"를 "6A5B"로 표현 (런 길이 인코딩)실제 ZIP은 DEFLATE 알고리즘을 사용한다. LZ77(반복 문자열 참조)과 허프만 코딩(자주 나오는 문자를 짧게)을 결합한 방식이다.어떤 파일이 잘 압축되나모든 파일이 똑같이 압축되지 않는다.잘 압축되는 파일: 텍스트, 로그, 문서 파일 (80%+ 압축 가능)보통: 이미지 BMP, TIFF (50~70%)거의 압축 안 됨: JPG, PNG, MP4, MP3 (이미 압축된 형식)이미 압축된 파일(JPG, MP4)을 다시 ZIP으로..

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

웹서비스를 만들려면 서버가 있어야 한다는 생각이 있습니다. 물론 전통적인 방식은 그렇습니다. 하지만 지금은 서버 없이도 웹서비스를 운영할 수 있는 방법이 있습니다. 실제로 이미지 압축, PDF 편집, 동영상 변환 등 52가지 도구를 제공하는 서비스를 서버 없이 운영하고 있습니다.서버리스(Serverless)란서버리스는 서버가 아예 없다는 뜻이 아닙니다. 개발자가 직접 서버를 관리하지 않는다는 의미입니다. 서버는 클라우드에 있지만, 용량 설정, 운영체제 관리, 보안 패치, 스케일링 같은 작업을 모두 클라우드 업체가 처리합니다.방법 1 — 파일 처리를 브라우저에서 합니다가장 근본적인 방법은 서버가 필요한 작업을 브라우저로 옮기는 것입니다.이미지 압축과 변환은 Canvas API로, PDF 합치기와 분리는 p..

재택근무와 원격 협업이 늘면서 시간대 계산이 일상이 됐다. 뉴욕의 오전 9시는 서울의 몇 시일까. 서머타임은 언제 바뀔까.시간대가 생겨난 이유19세기 이전에는 각 지역이 태양의 위치를 기준으로 자체 시간을 썼다. 런던과 옥스퍼드는 8분 차이가 있었다. 철도가 등장하면서 문제가 생겼다. 기차 시간표를 맞출 수 없었다.1884년 국제 자오선 회의에서 그리니치 천문대를 기준(UTC+0)으로 24개 시간대를 정했다.UTC와 GMT의 차이GMT(Greenwich Mean Time): 그리니치 천문대 기준 시간. 역사적 개념.UTC(Coordinated Universal Time): 원자시계 기반의 국제 표준 시간. 현재 공식 표준.실용적으로는 거의 같지만 기술적으로 UTC가 더 정확하다.서머타임(DST)이란여름에..

웹 페이지에서 이미지를 클릭하거나 사진을 업로드하면 순식간에 화면에 표시됩니다. 이 과정이 실제로 어떻게 이루어지는지 알고 나면 웹이 다르게 보입니다.1단계 — URL 요청: 이미지 파일의 위치를 찾습니다HTML 코드에 이런 태그가 있다고 합시다.브라우저는 이 태그를 발견하면 example.com 서버에 photo.jpg 파일을 달라고 요청합니다. 이것이 HTTP 요청입니다.서버는 파일을 찾아서 바이트 데이터로 전송합니다. 네트워크를 통해 이 데이터가 브라우저에 도착합니다.2단계 — 디코딩: 압축을 풉니다서버에서 받은 데이터는 JPG, PNG, WEBP 같은 압축 형식입니다. 브라우저는 이 압축을 풀어야 합니다.JPG 디코딩: 압축된 주파수 데이터를 역변환해서 픽셀 색상값으로 변환합니다.PNG 디코딩: ..

스마트폰으로 촬영한 동영상이 PC에서 옆으로 누워 나오거나 거꾸로 보이는 경험, 한 번쯤 있을 것이다. 왜 이런 일이 생기고 어떻게 해결할까.동영상 방향 문제가 생기는 이유스마트폰은 가속도 센서로 방향을 인식하고, 이 정보를 영상 파일의 메타데이터에 저장한다. 스마트폰의 미디어 플레이어는 이 정보를 읽어서 자동으로 회전시켜 보여주지만, 일부 PC 플레이어나 영상 편집 프로그램은 이 메타데이터를 무시한다.그 결과 스마트폰에서는 제대로 보이던 영상이 PC나 다른 기기에서는 90도 돌아가 보이는 것이다.좌우 반전이 필요한 경우셀카 영상: 전면 카메라는 기본적으로 거울처럼 찍힌다. 좌우를 뒤집어야 실제처럼 보인다.유튜브 튜토리얼: 시청자 입장에서 왼손·오른손이 바뀌어 보일 때화면 녹화: 일부 소프트웨어에서 좌우..

카페 메뉴판, 명함, 포스터 어디서나 보이는 QR코드. 스마트폰 카메라를 갖다 대면 링크로 이동하는데, 저 작은 네모 안에 도대체 뭐가 들어있는 걸까요?QR코드는 2차원 바코드입니다마트에서 물건 계산할 때 스캔하는 바코드는 1차원입니다. 가로 방향으로만 정보를 담습니다. QR코드는 가로와 세로 두 방향으로 정보를 담아 훨씬 많은 데이터를 저장할 수 있습니다.QR(Quick Response)코드는 1994년 일본 덴소웨이브(DENSO WAVE)가 자동차 부품 추적을 위해 개발했습니다. 개발자들은 특허를 보유하고 있으면서도 누구나 무료로 사용할 수 있도록 개방했습니다. 이 결정이 QR코드를 전 세계 표준으로 만들었습니다.QR코드의 구조QR코드를 자세히 보면 규칙적인 패턴이 있습니다.위치 찾기 패턴(세 모서리..