로고가 왜 흐려 보이는지 (래스터 vs 벡터)
벡터 그래픽은 무한히 스케일돼. 래스터 이미지는 안 돼. 각각 언제 쓸지 알아.
프린터에 로고를 보내. 화면에서 선명해. 인쇄된 버전이 MS Paint에서 만든 것처럼 보여.
문제: 벡터가 필요한데 래스터 이미지를 보냈어.
래스터 이미지: 픽셀 그리드
JPEG, PNG, GIF—이건 래스터 포맷이야. 이미지를 색깔 픽셀의 그리드로 저장해.
100x100 픽셀 이미지는 정확히 10,000 픽셀이야. 200x200으로 확대하면 없던 픽셀을 만들어내는 거야. 결과: 흐림이나 픽셀화.
래스터는 의도된 크기에서 훌륭해. 확대하면 품질이 저하돼.
벡터 이미지: 픽셀이 아니라 수학
SVG, PDF, AI—이건 벡터 포맷이야. "여기 원 그려"랑 "A에서 B로 선"같은 지시를 저장해.
벡터를 어떤 크기든 스케일하면 재계산해. 항상 날카로워. 항상 선명해.
벡터를 써야 할 때
로고. 파비콘부터 빌보드까지 모든 크기가 필요해. 벡터가 전부 다뤄.
아이콘. 기기 간 다양한 크기에 나타나는 UI 요소.
일러스트레이션. 단색과 정의된 형태의 단순한 예술작품.
인쇄 자료. 알 수 없는 크기로 프린터에 가는 모든 것.
래스터를 써야 할 때
사진. 수백만 색상, 그라데이션, 복잡성. 사진은 본질적으로 래스터야.
복잡한 예술작품. 페인트 질감, 디테일한 그라데이션, 자연 이미지.
스크린샷. 화면에 있는 걸 캡처하는 건 본질적으로 픽셀 기반이야.
웹 사진. JPEG 압축이 사진을 웹 전달에 실용적으로 만들어.
변환 현실
래스터를 벡터로는 어려워. 소프트웨어가 가장자리를 추적하고 형태를 근사할 수 있지만 복잡한 이미지는 잘 변환 안 돼. 단색의 단순한 로고는 합리적으로 변환돼. 사진은 의미 있게 변환 안 돼.
벡터를 래스터로는 쉬워. 타겟 크기로 그냥 내보내. 하지만 래스터화되면 재생성 없이 벡터로 돌아갈 수 없어.
흔한 실수
래스터 로고 사용. 로고는 벡터로 (AI, SVG, 또는 PDF) 존재해야 해. 래스터 버전은 필요한 어떤 크기든 거기서 내보낼 수 있어.
벡터 스크린샷. 벡터 파일의 스크린샷은 래스터야. 이미지가 아니라 실제 벡터 파일이 필요해.
과도한 벡터화. 모든 게 벡터여야 하는 건 아니야. 사진과 복잡한 이미지는 이득이 없어.
소스 파일 무시. 디자인 파일 (Illustrator, Figma)은 벡터 기반이야. PNG로 내보내기는 그걸 잃어. 소스 파일 영원히 보관해.
실전 워크플로
- 원본 예술작품을 벡터 포맷으로 생성
- 벡터 소스 파일 영원히 보관
- 필요할 때 특정 크기로 래스터 버전 내보내기
- 다른 크기 필요하면 소스에서 재내보내기
역방향으로 작업하지 마. 웹사이트에서 래스터 로고를 벡터화하려 하지 마. 원본 벡터를 찾거나 재생성해.
파일 포맷 빠른 가이드
| 포맷 | 타입 | 최적 용도 | |--------|------|----------| | SVG | 벡터 | 웹 그래픽, 아이콘 | | AI | 벡터 | 전문 디자인 소스 파일 | | PDF | 벡터* | 문서, 인쇄 | | PNG | 래스터 | 스크린샷, 투명도 | | JPEG | 래스터 | 사진 |
*PDF는 벡터와 래스터 콘텐츠 둘 다 포함할 수 있어.
확장성엔 벡터. 사진엔 래스터. 벡터 원본을 유지하고 필요할 때 래스터 내보내기. 이걸 거꾸로 하면 흐릿한 로고와 좌절한 디자이너를 만들어.