투명 배경과 플랫 배경, 무엇이 다릅니까

내보내기 마감은 두 갈래뿐입니다

내보내기는 화면의 무대를 캔버스로 굽는 것으로 시작합니다. 그 다음이 갈립니다. 투명으로 내보내면 배경 레이어를 숨긴 채 구운 결과를 그대로 파일로 만듭니다. 불투명으로 내보내면 같은 크기의 캔버스를 새로 만들어 지정한 색으로 가득 채운 뒤, 그 위에 구운 결과를 얹어 파일로 만듭니다.

이 두 갈래 사이에 다른 선택지는 없습니다. 반투명 배경이나 색 위에 알파를 남기는 절충 경로는 코드에 존재하지 않습니다.

형식이 먼저 결정합니다

JPG는 형식 자체가 투명을 담지 못합니다. 그래서 JPG를 고르면 투명 체크박스가 비활성으로 바뀝니다. 화면 표시만 막는 것이 아니라, 실제로 내보낼 때 쓰는 값도 형식이 JPG가 아닐 때만 참이 되도록 계산합니다. 체크 상태가 남아 있어도 결과는 불투명입니다.

투명을 켜면 배경이 통째로 빠집니다

투명 내보내기는 알파 채널만 남기는 후처리가 아니라 배경 레이어를 숨기는 처리입니다. 그래서 단색이든 그라데이션이든 배경으로 올린 사진이든, 배경 레이어에 있는 것은 전부 결과에서 사라집니다. 기기와 스크린샷, 마감 효과만 남습니다.

여기서 앞서 예고한 구분이 필요합니다. 배경 패널의 배경 종류를 투명으로 두면 편집 화면에서도 배경이 그려지지 않습니다. 반면 내보내기의 투명 배경은 내보내는 순간에만 배경 레이어를 숨깁니다. 두 스위치는 서로를 알지 못하므로 조합에 따라 결과가 달라집니다.

표의 두 번째 줄이 헷갈리기 쉽습니다. 플랫 색은 배경을 대체하는 것이 아니라 맨 아래에 한 겹 더 깔리는 색입니다. 배경이 캔버스를 다 덮고 있으면 플랫 색은 보이지 않습니다. 플랫 색이 결과에 드러나는 경우는 배경이 비어 있거나 캔버스를 다 덮지 않을 때입니다.

플랫 배경은 어떻게 만들어집니까

구운 결과와 같은 크기의 캔버스를 새로 만들고, 지정한 색으로 전체를 칠한 다음, 그 위에 구운 결과를 겹칩니다. 기본색은 흰색이고, 투명 체크가 꺼져 있을 때만 색 선택 컨트롤이 나타납니다.

JPG의 투명 영역이 검게 나오는 문제를 이 단계에서 막습니다. 알파가 있는 자리를 미리 색으로 채워 두면 형식이 알파를 버려도 채운 색이 남기 때문입니다.

품질 값은 JPG와 WebP에만 붙습니다

품질 슬라이더는 형식이 JPG이거나 WebP일 때만 화면에 나옵니다. 기본값은 0.92이고 조절 범위는 0.5에서 1까지, 0.01 단위입니다. 화면에는 백분율로 반올림해 보여 줍니다. PNG는 무손실이라 이 값을 쓰지 않습니다.

품질 값은 형식과 함께 파일을 굽는 함수에 그대로 전달됩니다. 값을 해석하는 주체는 브라우저의 인코더이므로, 같은 값이라도 브라우저에 따라 파일 크기가 다를 수 있습니다.

WebP는 브라우저가 만들 수 있어야 합니다

WebP로 내보낼 수 있는지는 앱이 직접 확인합니다. 1픽셀짜리 캔버스를 만들어 WebP로 뽑아 보고, 결과 문자열이 WebP 형식으로 시작하는지 봅니다. 이 확인은 한 번만 하고 결과를 기억합니다.

지원하지 않는 브라우저에서는 WebP 버튼이 비활성으로 바뀌고, 그래도 내보내기를 시도하면 지원하지 않는다는 안내로 끝냅니다. 이런 환경에서 투명이 필요하면 PNG를 쓰면 됩니다.

어느 쪽을 고를까

두 갈래 모두에 공통인 것

어느 쪽으로 내보내든 편집 도구 레이어는 항상 숨깁니다. 선택 핸들과 정렬 가이드선은 결과에 들어가지 않습니다. 숨긴 레이어는 내보내기가 성공하든 실패하든 마지막에 되돌립니다.

파일을 굽는 단계에서 결과가 비어 있으면 한 번만 다시 시도하고, 그래도 비어 있으면 배율을 낮추라는 안내로 끝냅니다. 재시도는 이 한 곳에서만 일어납니다.

클립보드 복사는 만들어진 파일을 그 형식 그대로 클립보드에 넣습니다. 형식과 투명 여부를 바꾸면 복사되는 내용도 같이 바뀝니다. 클립보드 기능을 지원하지 않는 브라우저에서는 버튼이 비활성이고 다운로드를 안내합니다.

정리하면

• 투명 내보내기는 배경 레이어를 숨기는 처리이므로 배경으로 올린 것도 함께 빠집니다.
• 플랫 내보내기는 색을 한 겹 깔고 그 위에 결과를 얹습니다.
• JPG는 형식 제약으로 항상 플랫입니다.
• 배경 패널의 투명과 내보내기의 투명은 서로 다른 스위치입니다.
• 품질 값은 JPG와 WebP에만 붙고 기본은 0.92입니다.
• WebP는 브라우저가 인코딩을 지원할 때만 열립니다.

이 글의 서술은 전부 내보내기 구현 코드에서 확인한 것입니다. 어느 파일의 어떤 값을 근거로 삼았는지 맨 아래 "이 글의 근거"에 문장 단위로 적어 두었습니다.