Print vs Web Images: Resolution, Color, and Format Guide — pic0.ai

저는 인쇄 이미지와 웹 이미지를 비교하는 포괄적인 가이드를 위해 이 전문가 블로그 기사를 작성할 것입니다.

저는 여전히 고객이 저에게 놀라서 전화했던 날을 기억합니다. 그들은 공급업체로부터 5,000개의 인쇄된 브로셔를 막 받았고, 모든 이미지가 픽셀화되어 있고 희미해 보였습니다. 같은 이미지는 그들의 웹사이트에서 멋지게 보였습니다. 그 12,000달러의 실수는 그들에게 교훈을 주었고, 저에게는 지난 18년간 프로덕션 디자이너로서 가르쳐온 교훈을 강화시켰습니다: 화면에서 잘 작동하는 것은 적절한 준비 없이 인쇄물에서는 좀처럼 잘 작동하지 않습니다.

저는 Marcus Chen이며, 거의 20년 동안 디지털 미디어와 인쇄 미디어 간의 간극을 잇는 프로덕션 디자이너로서 작은 부티크에서 Fortune 500 사내 팀에 이르기까지 다양한 에이전시에서 일해왔습니다. 저는 비즈니스 카드에서 40피트 광고판까지 다양한 파일을 준비해왔고, 매체 간 이동 시 이미지가 잘못될 수 있는 모든 가능성을 목격했습니다. 오늘 저는 인쇄 및 웹용 이미지를 준비하는 데 필요한 모든 것을 공유하여 그 비싼 전화 전화를 결코 하지 않도록 도와드리겠습니다.

해상도 이해하기: 이미지 품질의 기초

해상도는 대부분의 사람들이 걸려 넘어지는 부분이며, 이는 우리가 같은 용어(DPI 또는 PPI)를 사용하여 다양한 맥락에서 다른 의미를 갖기 때문입니다. 이 내용을 이해하기 쉬운 방식으로 설명하겠습니다.

웹 이미지는 픽셀 단위로 해상도를 측정합니다. 1920x1080 이미지는 정확히 2,073,600픽셀을 포함하고 있으며, 이는 디지털 디스플레이에 가장 중요합니다. 모니터는 파일 메타데이터에 포함된 DPI 설정을 신경 쓰지 않으며, 화면 픽셀당 하나의 이미지 픽셀을 단순히 표시합니다(100% 확대 시). 이것이 바로 72 PPI 이미지와 300 PPI 이미지가 동일한 픽셀 치수를 갖고 있을 때 화면에서 동일하게 보이는 이유입니다. PPI 값은 기본적으로 브라우저와 디스플레이에서 무시됩니다.

인쇄는 전혀 다릅니다. 여기에서 DPI(인치당 점수) 또는 PPI(인치당 픽셀)는 종이의 각 물리적 인치에 몇 개의 픽셀이 압축되는지를 결정합니다. 300 PPI 이미지는 매 선형 인치에 300픽셀이 인쇄되어, 제곱 인치당 90,000픽셀을 생성합니다. 이 밀도가 샤프하고 전문적인 인쇄물을 생성합니다. 이를 72 PPI로 낮추면(옛 웹 표준) 제곱 인치당 5,184픽셀만 인쇄됩니다. 그 차이는 눈에 즉시 보입니다.

중요한 수식이 있습니다: 전문가 수준의 품질로 4x6인치 사진을 인쇄하고 싶다면(300 PPI), 1200x1800픽셀의 이미지가 필요합니다. 동일한 이미지를 웹 페이지에서 전체 크기로 표시하면 거대해져 전체 화면을 차지할 수 있습니다. 반대로, 800픽셀 너비로 최적화된 웹 이미지는 300 PPI에서 2.67인치 너비로 인쇄되거나 더 큰 인쇄 크기로 늘리면 픽셀화되어 보이게 됩니다.

저는 항상 고객에게 해상도를 픽셀의 고정 예산으로 생각하라고 말합니다. 당신은 큰 영역에 걸쳐 픽셀을 사용하거나(해상도가 낮고 인쇄가 큼) 작은 영역에 집중할 수 있습니다(해상도가 높고 인쇄가 작거나 세밀한 세부 사항). 하지만 존재하지 않는 픽셀을 생성할 수는 없습니다. 72 PPI 웹 이미지를 300 PPI로 업스케일한다고 해서 세부 사항이 추가되는 것이 아닙니다. 단지 기존 픽셀을 보간하여 흐릿한 엉망진창을 만드는 것입니다.

전문 인쇄의 업계 표준은 사진 및 상세한 그래픽에 대해 300 PPI입니다. 떨어진 거리에서 관찰되는 대형 인쇄물에 대해 경우에 따라 250 PPI로 괜찮을 수 있으며, 광고판은 수백 피트 거리에서 관찰되므로 30-50 PPI로도 사용할 수 있습니다. 그러나 누군가가 손에 쥐게 될 아무 것이든—브로셔, 잡지, 명함—300 PPI는 협상 불가능한 수치입니다.

색상 공간: RGB vs CMYK 설명

색상 공간 문제는 심지어 경험이 풍부한 디자이너도 실수를 하는 곳입니다. 단순히 하나에서 다른 것으로 변환하는 것이 아니라 이러한 시스템이 존재하는 이유와 근본적으로 어떻게 다른지 이해하는 것이 중요합니다.

"이미지 파일의 DPI 설정은 브라우저에서 완전히 무시되는 메타데이터입니다. 웹 디스플레이에 중요하게 작용하는 것은 픽셀 치수입니다."

RGB(빨강, 초록, 파랑)는 가법 색상 모델입니다. 스크린은 빛을 방출하며, 빨강, 초록, 파랑 빛을 최대 세기로 결합하면 흰색이 생성됩니다. 빛이 없으면 검정색입니다. 이것이 스마트폰에서 4K 모니터까지 모든 디지털 디스플레이가 작동하는 방식입니다. RGB는 약 1,670만 색상을 표시할 수 있으며(각 색상에 대해 256 가지 색조), 특히 시안 및 밝은 녹색 범위에서 매우 선명한 색상을 포함합니다.

CMYK(시안, 마젠타, 노란색, 키/검정색)는 감산 색상 모델입니다. 프린터는 흰색 종이에서 시작하여 특정 파장의 빛을 흡수하는 잉크를 추가합니다. 시안 잉크는 빨간색 빛을 흡수하고, 마젠타는 녹색을 흡수하며, 노란색은 파란색을 흡수합니다. 이론적으로 모든 세 가지를 결합하면 검정색이 생성되지만, 실제로는 진흙빛의 갈색이 됩니다. 그래서 우리는 진정한 검정색( "K")을 네 번째 잉크로 추가하게 됩니다.

여기서 중요한 문제는 CMYK가 RGB보다 색상 범위가 작다는 것입니다. 화면에서 볼 수 있는 화려한 전기 파랑과 생생한 녹색은? 많은 수의 색상은 CMYK 잉크로 복원할 수 없습니다. RGB 이미지를 CMYK로 변환하면 색상이 이동하여 때로는 극적으로 변할 수 있습니다. 밝은 라임 그린은 더 부드러운 올리브 톤이 될 수 있습니다. 그 전기 파랑은 약간 보라색으로 바뀔 수 있습니다.

저는 기술 스타트업을 위한 로고를 디자인할 때 초기 경력에서 이 교훈을 배웠습니다. 고객은 제가 선택한 화려한 시안 파랑을 좋아했습니다—화면에서 완벽하게 보였습니다. 명함이 도착했을 때, 색상이 눈에 띄게 흐려지고 약간 회색이 되었습니다. 프린터는 잘못한 것이 아니었습니다. 그 RGB 색상은 단순히 CMYK 공간에 존재하지 않았습니다. 그래서 이제 저는 인쇄 프로젝트를 위해 처음부터 CMYK로 디자인하거나 최소한 초기 변환을 수행하고 고객에게 소프트 프루프를 보여주어 놀라움이 없도록 합니다.

웹 작업의 경우 항상 RGB를 사용하세요. 스크린의 기본 색상 공간이고 파일 크기가 더 작으며 전체 표시 가능한 색상 범위에 접근할 수 있습니다. 인쇄용으로는 파일을 프린터에 보내기 전에 CMYK로 변환하고, 색상이 실제로 어떻게 나타나는지 보기 위해 보정된 모니터를 사용하거나 물리적 증명을 요청하세요. 일부 인쇄사는 변환을 직접 선호하지만, 저는 항상 먼저 물어보고, 그들의 작업 흐름이 그렇다면 내장된 색상 프로필이 포함된 RGB 파일을 제공합니다.

한 가지 더: RGB와 CMYK 간에 여러 번 변환하는 것은 절대 하지 마세요. 각 변환은 정보를 잃고 색상을 이동시킵니다. RGB에서 편집한 후 인쇄를 위해 CMYK로 단일 최종 변환을 수행하세요. 항상 원본 RGB 파일을 마스터로 보관하십시오.

파일 형식: 올바른 컨테이너 선택하기

파일 형식 선택은 당신이 사용하는 소프트웨어뿐만 아니라 압축, 색상 지원 및 용도를 이해하는 것과 관련이 있습니다. 누군가 로고용으로 JPEG를 사용하거나 웹사이트용으로 TIFF를 사용했기 때문에 프로젝트가 실패하는 것을 보았습니다. 그러니 잘 정리합시다.

웹 이미지의 경우 주요 형식은 JPEG, PNG, WebP 및 SVG입니다. JPEG는 손실 압축을 사용하여 파일 크기를 줄이기 위해 데이터를 버립니다. 약간의 품질 손실이 감지되지 않는 사진에 적합하며, 일반적으로 사진을 60-80% 압축해도 가시적인 열화가 없습니다. 저는 일반적으로 웹 JPEG를 60-75% 품질로 내보내며, 이는 파일 크기와 시각적 품질의 균형을 잘 맞춥니다. 5MB 카메라 사진은 200-400KB로 줄어들 수 있으며, 빠른 페이지 로딩에 적합합니다.

PNG는 손실 없는 압축을 사용하고 투명성을 지원하므로, 로고, 텍스트가 포함된 그래픽 및 날카로운 모서리나 투명 배경이 필요한 이미지에 이상적입니다. PNG-8은 256 색상을 지원하며 간단한 그래픽에 적합한 반면, PNG-24는 수백만 색상을 지원합니다. 단점은 파일 크기입니다—PNG는 일반적으로 동등한 JPEG보다 3-5배 더 큽니다. 저는 투명성이 있는 경우 또는 UI 요소나 텍스트가 있는 인포그래픽과 같이 픽셀 완벽한 선명도가 필요한 경우 PNG를 사용합니다.

WebP는 손실과 손실 없는 압축을 모두 제공하고 투명성을 지원하며, 동등한 품질에서 JPEG 보다 파일 크기가 25-35% 더 작습니다. 현재 브라우저 지원이 훌륭하며 (95% 이상의 사용자), 저는 새로운 프로젝트의 기본 형식으로 WebP를 사용하기 시작했습니다. 이전 프로젝트를 위해 JPEG 대체 형식을 사용합니다.