이미지 크기 조정 가이드
이 섹션에는 GitLab 이미지 크기 조정기의 간단한 개요와 작업 방법이 포함되어 있습니다.
일반적으로, 이미지 크기 조정에 대한 설명은 특정한 경우에 대한 크기 조정 작업들을 보다 쉽게 파악하고, 이를 사용해 클릭하수록 사용자가 보다 효율적으로 이용할 수 있습니다.
:: 왜 이미지 크기를 조정하나요?
이미지 크기 축소 페이지의 데이터 사용량을 줄여주는 GitLab 13.6 버전 이후의 기능입니다. 이로 인해 “와이어 상의 데이터 양”이 줄어들고, 브라우저가 처리해야 할 작업이 줄어들어 렌더링 성능도 향상됩니다.
::: 크기 조정된 이미지의 사용 시점:
일반적으로, 이미지 크기 조정기는 클라이언트가 쿼리 문자열에 width 매개변수를 추가하여 이미지 리소스를 요청할 때마다 트리거됩니다. 그러나 우리는 특정 종류와 형식의 이미지만 크기를 조정합니다. 이미지를 크기를 조정할 수 있는지 여부는 하드 코딩된 규칙과 구성 설정의 결합으로 결정됩니다.
:: 이미지 크기 조정이 발생하는 위치:
현재, Rails와 Workhorse가 이미지를 해상도에 맞게 조정하기 위해 협력하고 있습니다. 이는 GitLab에서 일반적인 구현 및 성능 패턴이며, 중요한 비즈니스 로직 중에는 요청 인증 및 유효성 검사가 Rails에서 처리되지만, “크기 조정 및 바이너리 데이터 제공”과 같은 “무거운 작업”은 Workhorse에서 수행됩니다.
전체 요청 흐름은 다음과 같습니다:
mermaid
sequenceDiagram
Client->>+Workhorse: GET /uploads/-/system/project/avatar/278964/logo-extra-whitespace.png?width=64
Workhorse->>+Rails: 요청 전달
Rails->>+Rails: 요청 유효성 검사
Rails->>+Rails: 이미지 위치 확인
Rails-->>-Workhorse: Gitlab-Workhorse-Send-Data: 크기 조정된 이미지 보내기
Workhorse->>+Workhorse: 이미지 크기 조정기 호출
Workhorse-->>-Client: 200 OK
Rails
현재, 이미지 크기 조정은 특히 아바타와 같은 Upload 엔터티에 제한됩니다. 따라서 Rails에서 이미지 크기 조정 관련 로직은 현재
send_file_upload
컨트롤러 mixin에서 찾을 수 있습니다. 클라이언트를 통해 Workhorse로부터 온 요청을 받으면, 위에서 언급한 기준에 따라 이미지 크기 조정기를 트리거해야 하는지 확인하고, 그렇다면, Workhorse가 크기 조정 요청을 수행할 수 있도록 필요한 매개변수를 포함한 특수 응답 헤더 필드(Gitlab-Workhorse-Send-Data)를 렌더링합니다. Rails가 요청이 유효한 이미지 크기 조정 요청이 아니라고 판단하면, 우리는 일반 업로드를 제공하는 경우와 마찬가지로 처리합니다.
Workhorse
Rails가 요청을 유효하다고 판단한다면, Workhorse가 take over합니다. Rails 응답을 통해 send-scaled-image 명령을 받으면, 특수한 응답 주입기
가 크기를 조정하는 방법을 알고 있는 속성 응답기가 호출됩니다. 이 속성 응답기에 필요한 입력은 이미지의 위치(이미지가 블록 스토리지에 있는 경우 경로, 그렇지 않은 경우 원격 스토리지의 URL)와 원하는 너비입니다. Workhorse는 그림이 실제로 있는 위치를 처리하므로 Rails가 실제로 이미지가 어디에 있는지 걱정할 필요가 없습니다.
게다가 Rails 내에서 요청 유효성 검사를 위해, Workhorse는 우리가 스케일러 프로세스 예산을 초과하지 않도록 미리 조건 검사를 실행할 것입니다. 또한 파일이 구성된 최대 허용 크기 제약 조건을 충족하는지 여부도 확인합니다(메모리 소비를 체크하기 위함).
실제로 이미지 크기를 조정하기 위해, Workhorse는 실제 크기를 조정하는 자식 프로세스로 분기하고 그 결과를 클라이언트로 다시 스트리밍합니다.
크기 조정된 이미지 캐싱
우리는 현재 조정된 이미지를 어디에도 저장하지 않습니다. 작은 버전이 요청될 때마다 조정기가 실행됩니다. 그러나 Workhorse는 클라이언트 캐시의 이미지가 최신 상태일 경우 크기 조정기를 건너뛸 수 있도록 표준적인 조건부 HTTP 요청 전략을 구현합니다.
그를 위해 우리는 클라이언트 요청의 ‘If-Modified-Since’ 헤더 필드와 일치하는 UTC 시간이 담긴 Last-Modified 헤더 필드를 전달합니다. 원본 이미지가 변경되고 크기 조정이 필요한 경우에만 우리는 조정기를 다시 실행합니다.
도움말