라이트/다크 이미지 합성기 — 흰색 배경과 검은색 배경을 위한 PNG 한 장
라이트 모드 이미지와 다크 모드 이미지를 하나의 투명 PNG로 합성합니다. 흰색 배경에서는 밝은 아트워크가, 검은색 배경에서는 어두운 아트워크가 표시됩니다. 두 이미지를 업로드해 결과를 나란히 미리 보고, 문서·README·UI용 테마 적응 자산 한 파일만 다운로드하세요. 모든 작업은 브라우저에서 이루어집니다.
라이트/다크 이미지 합성기가 하는 일
PNG 한 장, 두 가지 모습
결과물은 픽셀 단위 알파 합성입니다. 흰색 표면에서는 라이트 이미지로, 검은색 표면에서는 다크 이미지로 보입니다. 그래서 README, 문서 페이지, UI는 두 개의 파일이나 media query 대신 자산 하나만 쓰면 됩니다.
업로드 슬롯 두 개와 실시간 미리보기
라이트 모드 이미지와 다크 모드 이미지를 각각 선택하면 둘 다 로드되는 즉시 합성된 PNG가 생성되어 흰색 카드와 검은색 카드에 각각 표시되므로, 다운로드 전에 두 테마에서의 모습을 확인할 수 있습니다.
고정된 PNG 내보내기
다운로드는 항상 PNG이며, 파일명은 light-dark-image.png이고 canvas.toDataURL로 생성됩니다. JPEG, WebP, SVG 출력은 물론 품질이나 압축 설정도 없습니다.
캔버스는 더 큰 이미지에 맞춤
결과는 둘 중 더 큰 너비와 더 큰 높이를 사용하며, 두 원본 이미지는 왼쪽 상단을 기준으로 캔버스 전체에 늘어나 채워집니다. 종횡비가 다르면 여백이나 잘라내기가 아니라 왜곡됩니다.
로컬 처리, 조정 항목 없음
파일은 FileReader로 읽고 canvas에서 합성하며 업로드되는 것은 없습니다. 밝기, 대비, 크기, 위치, 배경, 형식 컨트롤이 없고 입력은 두 이미지뿐입니다.
라이트/다크 이미지 FAQ
이 도구는 실제로 무엇에 쓰나요?
라이트 모드 아트워크와 다크 모드 아트워크를 배경에 따라 모습이 달라지는 투명 PNG 하나로 바꿉니다. 흰색 표면에서는 라이트 버전이, 검은색 표면에서는 다크 버전이 표시됩니다. README, 문서, UI의 테마 적응 자산을 위한 것이며, 별도의 이미지 두 장을 생성해 주는 도구는 아닙니다.
어떤 설정을 조정할 수 있나요?
조정할 수 있는 것은 두 원본 이미지뿐입니다. 밝기, 대비, 색상, 위치, 크기 조절, 배경색, 형식, 품질 컨트롤이 없고 합성 자체를 세밀하게 조정하는 옵션도 없습니다. 미리보기 패널은 표시 전용입니다.
어떤 입력 및 출력 형식을 지원하나요?
입력은 accept="image/*"이며 브라우저 디코더를 사용하므로 JPEG, PNG, WebP, GIF가 됩니다. 출력은 항상 PNG이고 JPEG, WebP, SVG 내보내기는 제공하지 않습니다.
여러 쌍을 한 번에 처리할 수 있나요?
아니요. 각 슬롯은 선택한 첫 번째 파일만 사용하고, 페이지는 한 번에 라이트/다크 한 쌍만 처리합니다. 대기열, 일괄 모드, 기록은 없습니다.
크기 제한이 있나요? 크기가 다른 경우는 어떻게 되나요?
브라우저 canvas 메모리가 허용하는 범위 외에 명시적인 픽셀 제한은 없습니다. 출력 크기는 max(너비) × max(높이)이고 두 이미지가 왼쪽 상단에서 그 크기로 늘어나므로, 종횡비가 다르면 여백이나 잘라내기가 아니라 왜곡됩니다.
모든 처리가 로컬에서 이루어지나요?
예. 이미지는 FileReader로 디코딩되고 브라우저의 canvas에서 합성됩니다. 업로드가 없고 서버도 관여하지 않습니다. 합성 결과는 data URL로 메모리에 보관되며 다운로드할 때까지 남아 있습니다.
합성 결과는 얼마나 정확한가요?
근사치입니다. 라이트 채널은 128–255, 다크 채널은 0–127로 다시 매핑한 뒤 순수 흰색과 순수 검은색에서 올바르게 합성되도록 알파와 색을 풉니다. 색은 양자화되어 오차가 있고 극단적인 대비에서는 계조가 사라지며, 계산식은 순수 흰색/검은색 배경에서만 정확합니다(회색이나 유색 배경에서는 색이 섞입니다). 투명도는 라이트 이미지의 알파만 사용하며, 두 이미지가 밝기 가정을 벗어난 픽셀은 알파가 0으로 고정됩니다.
