웹 서비스를 운영하다 보면 이미지를 다뤄야 하는 일이 참 많은데요. 사용자가 올린 프로필 사진을 썸네일로 줄이거나, 상품 이미지를 WebP로 변환하거나, 여러 이미지를 하나로 합쳐야 할 때가 있죠. 이런 작업을 브라우저가 아닌 서버 쪽에서 처리하려면 어떻게 해야 할까요? Sharp는 Node.js에서 가장 널리 쓰이는 이미지 처리 라이브러리입니다. 내부적으로 C 기반의 libvips 엔진을 사용하기 때문에 ImageMagick보다 4~5배 빠르고, 메모리 사용량도 적습니다. JPEG, PNG, WebP, AVIF, GIF, TIFF
웹 서비스에서 이미지가 차지하는 비중이 정말 크죠. HTTP Archive에 따르면 평균 웹 페이지 용량의 절반 가까이가 이미지라고 합니다. 그래서 이미지를 얼마나 잘 관리하느냐가 사이트 성능에 직접적인 영향을 미치는데요. 이미지를 직접 서버에서 처리하려면 Sharp나 libvips 같은 라이브러리를 설치하고, 리사이징·포맷 변환·캐싱 로직을 일일이 구현해야 합니다. 소규모 프로젝트에서는 이 정도면 충분하지만 이미지가 수만 장 이상이거나 글로벌 사용자를 대상으로 한다면 CDN 배포와 on-the-fly 변환까지 직접 구축하기가 만만
웹 개발을 하다 보면 이미지를 다뤄야 하는 일이 정말 많죠. 사진을 리사이징하고, WebP나 AVIF로 변환하고, 썸네일을 만들고, 메타데이터를 확인하고... 이런 작업을 할 때 많은 분이 ImageMagick을 떠올리실 텐데요. 사실 더 빠르고 메모리도 훨씬 적게 쓰는 도구가 있습니다. 바로 libvips인데요. Node.js의 Sharp 라이브러리가 내부적으로 사용하는 이미지 처리 엔진이 바로 이 libvips입니다. Mastodon, Ruby on Rails, MediaWiki 같은 프로젝트에서도 이미지 처리에 libvips를
개발을 하다 보면 이미지를 가공해야 하는 일이 참 많죠. 포맷을 변환하거나, 크기를 줄이거나, 여러 이미지를 합성하거나, 워터마크를 넣거나... 이런 작업을 매번 포토샵 같은 GUI 프로그램을 열어서 하기엔 너무 번거로운데요. ImageMagick은 바로 그런 상황에서 빛나는 도구입니다. 1990년에 첫 릴리스된 이후 30년이 넘도록 꾸준히 개발되어 왔고, 200개 이상의 이미지 포맷을 지원하는 사실상의 표준 CLI 이미지 도구라고 할 수 있어요. PNG, JPEG, WebP, TIFF, GIF, SVG, PDF까지 거의 모든 포맷
웹사이트의 로딩 속도를 줄이려면 이미지 최적화가 빠질 수 없죠. JPEG이나 PNG 대신 WebP 포맷을 사용하면 동일한 화질에서 파일 크기를 25~35% 정도 줄일 수 있는데요. WebP는 Google이 2010년에 발표한 이미지 포맷으로, 손실(lossy)과 무손실(lossless) 압축을 모두 지원합니다. 현재 Chrome, Firefox, Safari, Edge 등 모든 주요 브라우저에서 지원하고 있어서 실무에서도 안심하고 사용할 수 있어요. Google은 WebP 포맷과 함께 libwebp라는 공식 도구 모음도 제공하고 있
웹사이트를 운영하다 보면 이미지 용량 때문에 고민하는 순간이 꼭 찾아옵니다. 특히 PNG 파일은 무손실 포맷이라 화질은 좋지만 용량이 크다는 게 늘 아쉬운 부분이죠. 로고, 아이콘, 스크린샷 같은 이미지는 JPEG으로 바꾸기도 애매하고, 그렇다고 용량이 큰 채로 두자니 페이지 로딩 속도가 걱정됩니다. 이런 상황에서 pngquant를 사용하면 PNG 이미지의 용량을 60~80%까지 줄이면서도 눈으로 보기에는 거의 차이가 없는 수준의 화질을 유지할 수 있습니다. 이번 글에서는 pngquant의 설치부터 실무에서 바로 활용할 수 있는 다
macOS를 쓰다 보면 이미지 크기를 줄이거나 포맷을 바꿔야 할 때가 종종 있죠. 스크린샷을 PNG에서 JPEG으로 변환하고 싶거나, 블로그에 올릴 사진의 해상도를 낮추고 싶을 때처럼요. 이럴 때 보통 Preview 앱을 열거나 ImageMagick 같은 도구를 따로 설치하곤 하는데요. 사실 macOS에는 이미 강력한 이미지 처리 도구가 기본으로 탑재되어 있습니다. 바로 sips(Scriptable Image Processing System)인데요. 터미널에서 한 줄이면 이미지를 리사이징하고, 포맷을 변환하고, 회전까지 할 수 있어
Docker Compose는 여러 개의 컨테이너(container)로 구성된 애플리케이션을 관리하기 위한 간단한 오케스트레이션(Orchestration) 도구입니다. 이번 포스팅에서는 Compose 애플리케이션을 터미널에서 제어하기 위해 사용되는 Docker Compose 커맨드에서 대해서 알아보겠습니다. -f 옵션 Docker Compose는 기본적으로 커맨드가 실행하는 디렉토리에 있는 docker-compose.yml 또는 docker-compose.yaml를 설정 파일로 사용합니다. 다른 이름이나 경로의 파일을 Docker C
Docker Compose를 이용하면 여러 개의 컨테이너(container)로 구성된 애플리케이션을 하나의 파일에 정의해놓고 한 번에 올리거나 내릴 수 있습니다. 이러한 편리함 때문에 Docker Compose는 특히 로컬 개발 환경이나 테스트 자동화 환경에서 간단한 컨테이너 오케스트레이션(Container Orchestration) 도구로 많이 사용되고 있는데요. 이번 포스팅에서는 Docker Compose 설정에 사용되는 docker-compose.yml을 작성하는 방법에 대해서 알아보겠습니다. 파일 위치 / 기본 구조 Dock
최근에 많은 Django 프로젝트가 Docker를 이용해서 컨테이너(container) 기반으로 개발되고 테스트, 배포되고 있습니다. 이번 포스팅에서는 Docker Compose이용해서 PostgreSQL를 데이터베이스로 사용하는 Django 애플리케이션을 셋업해보도록 하겠습니다. Docker를 처음 접하시는 분들은 관련 포스팅를 참고하시어 먼저 본인 컴퓨터에서 Docker에 설치하시기 바랍니다. requirements.txt 파이썬에서는 보통 프로젝트에서 필요한 패키지를 requirements.txt 파일에 등록해놓고, 패키지 매
Docker CLI 도구는 Docker 이미지(image)의 효과적인 관리를 위해서 다양한 커맨드(command)를 제공합니다. 이번 포스팅에서는 자주 쓰이는 커맨드 위주로 어떻게 Docker 이미지를 제어할 수 있는지 알아보도록 하겠습니다. 이미지 조회 docker images 커맨드는 이미지를 조회할 때 사용됩니다. 인자를 넘기지 않고 이 커맨드를 호출하면 전체 이미지 목록을 출력해줍니다. 특정 리파지토리(repository)에 해당하는 이미지만 필터링해서 보고 싶을 때는, 리파지토리를 인자로 넘겨주면 됩니다. 태그까지 인자로
Docker가 대중화되면서 많은 프로젝트들이 개발 환경을 컨테이너화(containerization)시키고 있습니다. 이러한 프로젝트의 최상위 디렉터리에서는 항상 Dockerfile이 위치하게 되며, 따라서 Dockerfile 이해하는 것은 그 프로젝트의 개발 환경이 어떻게 구성되는지 이해하는 첫걸음입니다. Dockerfile은 Docker 이미지(image)가 어떤 단계를 거쳐 빌드(build)되야 하는지를 담고있는 텍스트 파일입니다. Docker는 Dockerfile에 나열된 명령문을 차례대로 수행하여 이미지를 생성해줍니다. 이번
최근에 많은 NodeJS 프로젝트들이 Docker를 이용해서 개발되고 있습니다. 이번 포스팅에서는 NodeJS로 간단한 Express 서버 애플리케이션을 작성해보고, Docker를 이용해서 이 애플리케이션을 어떻게 컨테이너화(containerized) 할 수 있는지에 대해서 알아보도록 하겠습니다. 실습 프로젝트 환경 구성 원하는 위치에 디렉터리를 생성하고, 그 안에 package.json 파일을 생성합니다. (컴퓨터에 NodeJS가 설치가 안 되어 있다면 먼저 NodeJS를 다운로드 받아 설치해야 합니다.) 그 다음, npm을 통해
개발자에게 Docker란? Docker는 쉽게 말해서 컨테이너(container)를 돌려주는 엔진(engine)이라고 생각할 수 있는데요. 2013년 출시 후 꾸준히 인기를 얻어온 Docker는 이제는 개발자들도 모르면 불편할 정도로 대중화가 되어 버린 것 같습니다. 하지만 아직도 많은 개발자들이 업무에서 Docker를 매일 사용하고 있음에도 불구하고, Docker를 시스템 또는 DevOps 엔지니어만을 위한 도구로 여기거나, Docker 직접 다루는 것을 회피하다가, 문제가 생겼을 때 스스로 해결을 하지 못해서 곤혼스러워하는 개발
지난 포스팅에서 absolute position의 기본적인 특징과 작동 매커니즘에 대해서 살펴보았습니다. 이번 포스팅에서는 absolute position를 응용해서 이미지 위에 캡션을 겹치는 방법에 대해서 알아보겠습니다. 기본 이미지 캡션 배치 웹페이지 상의 이미지에 캡션을 넣을 때는 보통 HTML5에서 도입된 <figure/>와 <figcpation/> 태그를 사용합니다. CSS의 position 속성을 건드리지 않으면 이미지와 캡션은 서로의 영역을 침범하지 않고 위아래로 차례대로 배치됩니다. absolute position 적