🎬 프롤로그 : 로고 폴더를 처음 열었을 때의 그 기분

자, 상상해보자. 너는 카페를 하나 차렸어. 이름은 "달빛서재".

디자이너한테 로고를 의뢰했고, 드디어 메일이 왔어. 압축파일을 풀었더니...

달빛서재_로고_최종.zip
├─ 01_AI/
│   └─ moonlight_logo_CS6.ai
├─ 02_EPS/
│   ├─ moonlight_logo_CMYK.eps
│   └─ moonlight_logo_BW.eps
├─ 03_SVG/
│   ├─ moonlight_logo.svg
│   └─ moonlight_symbol.svg
├─ 04_PNG/
│   ├─ moonlight_1000px.png
│   ├─ moonlight_2000px.png
│   └─ moonlight_white.png
├─ 05_JPG/
├─ 06_PDF/
└─ 07_FAVICON/

...이때 대부분의 사람 반응은 이거다.

아니, 절대 아니다. 그러다가 나중에 간판 업체에서 "벡터 파일 주세요" 했을 때 PNG 보내면, 업체 사장님이 조용히 한숨 쉬신다. 그리고 "이거 다시 따야 해서 추가비용 나와요"라는 무서운 말을 듣게 된다.

오늘은 그런 일이 안 생기도록, 로고 파일 형식을 진짜 제대로 정리해보자.
비전공자도 이해할 수 있게, 근데 내용은 실무급으로.

🧬 1장. 모든 것의 시작 : 벡터 vs 래스터

파일 확장자 외우기 전에, 딱 하나의 개념만 먼저 잡고 가자.
이거 하나 이해하면 나머지는 전부 자동으로 이해된다.

📐 벡터(Vector) : "수학으로 그린 그림"

벡터는 이미지를 점, 선, 곡선의 수학 좌표와 수식으로 저장한다.

예를 들어 동그라미 하나를 저장한다고 해보자. 벡터는 이렇게 기록한다.

중심점 (100, 100)
반지름 50
선 굵기 2
채우기 색 #4A5AC7

그래서 이걸 10배로 키워도? 그냥 숫자에 10을 곱하면 끝.
아무리 확대해도 선이 매끈하다. 계단 현상(계단처럼 삐죽삐죽해지는 것)이 아예 없다.

🔲 래스터(Raster / 비트맵) : "픽셀 모눈종이"

래스터는 이미지를 작은 사각형 픽셀들의 색 정보로 저장한다.

1000×1000 픽셀 이미지라면, 100만 개의 칸에 각각 "이 칸은 무슨 색"을 적어둔 거다.

이걸 2배로 키우면? 없던 픽셀을 소프트웨어가 추측해서 만들어낸다.
그래서 흐릿해지거나, 뭉개지거나, 계단이 보인다. 이게 그 유명한 "이미지 깨짐".

🅰️ 2장. AI 파일 — 로고의 '설계도 원본'

AI가 뭔데?

.ai는 Adobe Illustrator의 네이티브 파일 형식이다. Adobe Illustrator Artwork의 약자.
1987년 일러스트레이터 1.0이 나온 이래로, 사실상 전 세계 로고 디자인의 표준 원본 포맷 자리를 지키고 있다.

AI 파일이 특별한 이유는 "결과물"이 아니라 "작업 환경 전체"를 담기 때문이다.

🕒 AI 파일의 함정 : "버전"

AI 파일에는 버전이 있다. CS6, CC 2018, CC 2024... 상위 버전에서 저장한 파일은 하위 버전에서 안 열린다.

그래서 실무에서는 이런 대화가 자주 오간다.

디자이너는 저장할 때 [다른 이름으로 저장] → Illustrator 옵션 창 → 버전 선택에서 하위 버전으로 내릴 수 있다. 단, 하위 버전으로 내리면 최신 기능(예: 자유 그레이디언트, 퍼펫 뒤틀기 등)이 이미지로 평면화되거나 깨질 수 있다.

🔤 폰트 문제 : 반드시 '윤곽선 만들기'

AI 파일 안의 글자는 기본적으로 "이 폰트를 쓴다"는 이름만 기록한다. 폰트 파일 자체가 들어가는 게 아니다.

그래서 내 컴퓨터엔 있는 폰트가 상대방 컴퓨터엔 없으면? 글자가 엉뚱한 폰트로 바뀐다. 로고의 정체성이 순식간에 증발한다.

📦 AI는 언제 쓰나?

1 보관용 마스터 파일 — 브랜드가 존재하는 한 영원히 보관
2 로고 수정·리뉴얼 작업 — 나중에 다른 디자이너에게 넘길 때
3 응용 디자인 제작 — 명함, 패키지, 배너 등으로 확장할 때
4 인쇄소 입고 — 국내 인쇄소는 AI 파일을 가장 선호한다

📠 3장. EPS 파일 — 인쇄판의 '만능 통역사'

EPS의 정체

.eps는 Encapsulated PostScript의 약자다.
1980년대 어도비가 만든 PostScript라는 페이지 기술 언어를, 다른 문서에 "캡슐처럼 집어넣을 수 있게" 포장한 형식이다.

쉽게 말하면 이거다.

EPS의 최대 강점은 호환성이다. 일러스트레이터뿐 아니라 코렐드로우(CorelDRAW), 인디자인, 쿼크익스프레스, 오래된 출력 RIP 장비, 간판 제작용 커팅 플로터 소프트웨어까지 — 거의 모든 곳에서 읽힌다.

🖨️ 왜 간판집·인쇄소는 EPS를 찾을까?

실제 현장 장비들은 생각보다 오래됐다. 10년, 15년 된 소프트웨어를 여전히 쓰는 곳이 많다.
최신 AI 파일은 못 열어도, EPS는 거의 100% 열린다.

특히 이런 작업에서 EPS 요청이 온다.

😅 EPS의 한계도 솔직히 말하자면

EPS는 사실 레거시(구식) 포맷이다. 어도비 공식 문서에서도 "가능하면 PDF를 쓰라"고 권장한 지 오래됐다.

EPS의 약점은 이렇다.

🔸 투명도(Transparency)를 제대로 지원 안 함
반투명, 그림자, 혼합 모드가 들어간 로고를 EPS로 저장하면 자동으로 "평면화(Flatten)"된다. 이 과정에서 색이 미묘하게 바뀌거나, 분할된 조각들이 생겨서 미세한 흰 선(헤어라인)이 보일 수 있다.

🔸 레이어 구조가 유지되지 않음 (또는 매우 제한적)

🔸 파일 용량이 큼 — 미리보기 이미지를 내부에 따로 품고 있어서

🔸 다중 아트보드 미지원 — 한 파일에 한 장면만

🌐 4장. SVG 파일 — 웹의 지배자

SVG = Scalable Vector Graphics

.svg는 W3C(월드와이드웹 컨소시엄)가 정한 웹 표준 벡터 포맷이다. 1999년에 처음 나왔고, 2011년 SVG 1.1이 정식 권고안이 됐다.

SVG의 가장 신기한 점은 — 이게 사실 텍스트 파일이라는 것.

메모장으로 열면 이렇게 생겼다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#4A5AC7"/>
  <path d="M30 50 L45 65 L70 35" stroke="#fff" 
        stroke-width="8" fill="none"/>
</svg>

그냥 코드다. HTML이랑 똑같은 XML 문법이다.
그래서 메모장으로 색을 바꿀 수도 있고, CSS로 스타일을 먹일 수도 있고, 자바스크립트로 움직이게 할 수도 있다.

🚀 SVG를 꼭 써야 하는 상황

🔹 웹사이트 헤더 로고 — 어떤 화면 해상도에서도 선명
🔹 모바일 앱 UI 아이콘 — 안드로이드 VectorDrawable, iOS SF Symbols와 연계
🔹 이메일 서명 / 다크모드 대응 — CSS로 색상 자동 전환 가능
🔹 로딩 애니메이션 로고 — 선이 그려지는 효과 등

@media (prefers-color-scheme: dark) {
  .logo path { fill: #ffffff; }
}

⚡ SVG 저장할 때 반드시 체크할 것

🖼️ 5장. PNG 파일 — 일상의 히어로

PNG의 탄생 비화

.png는 Portable Network Graphics의 약자다.
재밌는 건 탄생 배경인데 — 1990년대 중반, GIF가 쓰던 LZW 압축 알고리즘에 특허 라이선스 분쟁이 터졌다. 그러자 개발자 커뮤니티가 "그럼 우리가 특허 없는 걸 만들자!"며 만든 게 PNG다.

일종의 오픈소스 반란의 결과물인 셈. 1996년 스펙이 공개됐고, 지금은 웹에서 가장 널리 쓰이는 무손실 포맷이다.

✨ PNG의 필살기 : 알파 채널(투명 배경)

로고 실무에서 PNG가 사랑받는 이유는 딱 하나다.
배경을 투명하게 만들 수 있다.

PNG-24(정확히는 PNG-32)는 R, G, B + Alpha 4개 채널을 쓴다.
알파 채널은 0~255의 256단계 투명도를 표현한다. 그래서 로고 가장자리가 부드럽게 처리되고, 어떤 배경 위에 올려도 자연스럽다.

📏 PNG는 몇 픽셀로 뽑아야 할까?

이게 가장 많이 물어보는 질문이다. 용도별로 정리해두자.

브랜드명_로고타입_컬러_배경_사이즈.png

달빛서재_가로형_컬러_투명_2000px.png
달빛서재_가로형_흰색_투명_2000px.png
달빛서재_심볼_검정_투명_1000px.png
달빛서재_세로형_컬러_흰배경_1500px.png

🚫 PNG로 하면 안 되는 것

❌ 인쇄소 입고 — 벡터 요구. PNG 보내면 재작업비 발생
❌ 대형 현수막·간판 — 확대하면 그냥 뭉개짐
❌ 자수·실크스크린 — 패스가 없어서 작업 불가
❌ 로고 수정 의뢰 — 원본이 아니라 결과물이라 수정 난이도 폭등

🎪 6장. 그 외 조연들 : JPG, PDF, WEBP, TIFF, GIF, ICO

📷 JPG / JPEG

손실 압축 포맷이다. 저장할 때마다 화질이 미세하게 깎인다. 그리고 투명 배경을 지원하지 않는다.

로고용으로는 거의 추천하지 않는다. 특히 로고처럼 경계선이 또렷한 이미지에서는 JPG 압축 특유의 "번짐 노이즈"(아티팩트)가 글자 주변에 지저분하게 낀다.

그럼에도 쓰는 경우 : 일부 관공서 서식, 오래된 시스템의 업로드 제한, 이미지 파일 크기를 극단적으로 줄여야 할 때.

📄 PDF — 사실 숨은 최강자

많은 사람이 PDF를 "문서 포맷"으로만 아는데, PDF는 벡터를 완벽하게 담는다. 실제로 AI 파일 내부 구조는 PDF와 상당히 닮아있다.

PDF의 장점 정리하면:

✅ 어떤 기기에서든 열린다 (스마트폰에서도)
✅ 벡터 유지 + 폰트 임베딩 가능
✅ CMYK, 별색, 투명도 모두 지원
✅ 인쇄 표준 PDF/X-1a, PDF/X-4 규격 존재
✅ 다중 페이지 → 브랜드 가이드라인 문서로 최적

🌊 WEBP / AVIF — 차세대 웹 이미지

구글이 만든 WEBP는 PNG보다 평균 25~35% 가벼우면서 투명도도 지원한다.
지금은 크롬, 사파리, 파이어폭스, 엣지 전부 지원하니 웹용으로 쓸 만하다.

AVIF는 더 신기술로 압축률이 더 좋지만, 아직 지원 범위가 조금 좁고 인코딩이 느리다.

다만 로고는 SVG가 이미 최적해라서, WEBP는 주로 사진·배너 이미지 쪽에서 활약한다.

🖨️ TIFF

고품질 무손실 래스터 포맷. CMYK와 레이어를 지원해서 고급 인쇄 현장에서 사진 원본용으로 쓴다. 로고에는 잘 안 쓰지만, 간혹 특수 인쇄에서 요청이 온다.

🎞️ GIF

256색 제한 + 애니메이션 지원. 요즘은 짧은 로고 애니메이션이나 이모티콘 정도에만 쓴다. 화질 대비 용량이 비효율적이라, 같은 용도라면 APNG나 WEBP, Lottie(JSON)가 더 낫다.

🔖 ICO

윈도우 아이콘 포맷. 파비콘용으로 여러 해상도를 한 파일에 담을 수 있다.
요즘 브라우저는 PNG 파비콘도 잘 읽지만, 구형 브라우저 호환을 위해 favicon.ico를 루트에 두는 관례는 여전하다.

🗺️ 7장. 상황별 정답 치트시트

자, 이제 실전이다. "이럴 땐 뭘 줘야 해?" 완전 정리.

📋 한 장 요약 비교표

🎨 8장. 색상 모드 — 파일 형식만큼 중요한 함정

파일 형식을 다 맞췄는데도 사고가 나는 경우가 있다. 범인은 색상 모드다.

RGB vs CMYK

🎯 PANTONE(별색) — 브랜드 컬러의 보험

CMYK 4색 인쇄는 인쇄기, 종이, 날씨에 따라 색이 미묘하게 달라진다.
그래서 코카콜라 레드, 티파니 블루처럼 색 자체가 브랜드인 경우엔 별색(Spot Color)을 쓴다.

PANTONE은 미리 조색된 잉크를 쓰기 때문에, 어디서 인쇄하든 거의 동일한 색이 나온다. 비용은 더 들지만 브랜드 일관성 측면에서 강력하다.

Brand Blue
  PANTONE : 2728 C
  CMYK    : 92 / 72 / 0 / 0
  RGB     : 42 / 82 / 190
  HEX     : #2A52BE

📦 9장. "잘 만든 로고 패키지"는 이렇게 생겼다

디자이너에게 로고를 의뢰했다면, 최종 납품물로 아래 정도는 요청하는 게 정상이다.
반대로 디자이너라면, 이 정도 챙겨주면 클라이언트가 감동한다.

브랜드명_Logo_Package/
│
├─ 01_Master_Source/          ★ 원본 (가장 중요)
│   ├─ Logo_Master_Editable.ai      (텍스트 살아있음)
│   ├─ Logo_Master_Outlined.ai      (윤곽선 변환)
│   └─ Fonts_Info.txt               (사용 폰트 · 라이선스)
│
├─ 02_Print_Vector/           ★ 인쇄용
│   ├─ Logo_CMYK.eps
│   ├─ Logo_Black.eps               (단색 검정)
│   ├─ Logo_White.eps               (단색 흰색/녹아웃)
│   └─ Logo_CMYK.pdf
│
├─ 03_Web_Vector/             ★ 웹용
│   ├─ logo-horizontal.svg
│   ├─ logo-vertical.svg
│   ├─ logo-symbol.svg
│   └─ logo-wordmark.svg
│
├─ 04_Web_Raster/             ★ PNG 세트
│   ├─ logo_color_500.png
│   ├─ logo_color_1000.png
│   ├─ logo_color_2000.png
│   ├─ logo_white_2000.png
│   └─ logo_black_2000.png
│
├─ 05_Favicon/
│   ├─ favicon.ico
│   ├─ favicon-32.png
│   ├─ apple-touch-icon-180.png
│   └─ icon-512.png
│
├─ 06_Social/
│   ├─ profile_1000x1000.png
│   ├─ og-image_1200x630.png
│   └─ youtube-banner_2560x1440.png
│
└─ 07_Guideline/
    └─ Brand_Guideline.pdf           (여백·금지사례·컬러값)

🧩 로고 '버전'도 함께 챙기자

파일 형식만 중요한 게 아니다. 로고의 형태 변형(Variation)도 필수다.

🔸 가로형(Horizontal) — 웹사이트 헤더, 명함 상단
🔸 세로형(Vertical/Stacked) — 정사각형 공간, 간판
🔸 심볼 단독(Symbol/Icon) — 파비콘, 앱 아이콘, SNS 프로필
🔸 워드마크 단독(Wordmark) — 심볼이 안 어울리는 좁은 공간
🔸 단색 검정 / 단색 흰색 — 흑백 팩스, 각인, 어두운 배경
🔸 반전형(Knockout) — 컬러 배경 위에 올릴 때

🔧 10장. 실전 변환 가이드 : 이럴 땐 이렇게

Q1. AI → PNG 투명 배경으로 뽑고 싶어요

일러스트레이터에서 [파일 → 내보내기 → 스크린용 내보내기] (단축키 Alt+Ctrl+E)

여기서 배율을 1x, 2x, 3x로 동시에 지정할 수 있어서 한 번에 여러 사이즈를 뽑을 수 있다.
배경이 투명하려면 아트보드에 흰색 사각형이 깔려있지 않은지 꼭 확인!

Q2. PNG밖에 없는데 벡터가 필요해요 😭

세 가지 선택지가 있다.

1 자동 추적 — 일러스트레이터 [이미지 추적] 기능. 단순한 단색 로고라면 그럭저럭 쓸 만하지만, 곡선이 울퉁불퉁해지고 앵커포인트가 폭발한다.

2 수동 재제작(리드로잉) — 펜툴로 다시 그리는 것. 품질은 완벽하지만 시간이 든다. 실무에서 가장 권장되는 방법.

3 원 제작자에게 요청 — 가장 확실. 계약서에 "원본 파일 제공" 조항이 있는지 확인하자.

Q3. SVG 용량이 너무 커요

원인은 대개 이 셋 중 하나.

🔹 불필요한 소수점 자리수 (소수점 6자리 → 2자리로)
🔹 일러스트레이터가 넣은 메타데이터와 주석
🔹 텍스트가 윤곽선 변환되면서 앵커포인트 과다

해결법은 SVGO 같은 최적화 도구를 돌리는 것. 웹 기반 툴(SVGOMG)도 많다.
보통 30~70% 용량 감소가 나온다.

Q4. 인쇄소에서 "아웃라인 따서 주세요"라고 해요

= "글자를 도형으로 바꿔달라"는 뜻이다.

① 모든 오브젝트 선택 (Ctrl+A)
② 잠긴 레이어 / 숨겨진 레이어 해제 확인
③ [문자 → 윤곽선 만들기] (Ctrl+Shift+O)
④ 다른 이름으로 저장 (파일명에 _outlined 표기)

추가로, 선(Stroke)도 [오브젝트 → 패스 → 윤곽선]으로 바꿔주면 더 안전하다.
선 굵기가 확대·축소 시 비율이 안 맞는 사고를 예방할 수 있다.

Q5. 로고에 그림자·투명도가 있는데 인쇄가 이상해요

투명도는 인쇄 공정에서 평면화(Flatten)를 거치는데, 이때 예상치 못한 흰 선이나 색 경계가 생길 수 있다.

가장 확실한 해결책은 — 애초에 로고에 투명도·그림자·그레이디언트를 최소화하는 것.
좋은 로고의 조건 중 하나가 "팩스로 보내도 알아볼 수 있을 것"인 이유다.

⚖️ 11장. 놓치기 쉬운 3가지 : 폰트 라이선스, 저작권, 백업

🔤 폰트 라이선스 — 조용한 시한폭탄

로고에 쓴 폰트, 상업적 사용이 가능한가?

많은 무료 폰트가 "상업적 사용 가능"이라도 "로고·BI 사용은 별도 문의"라는 조건을 달고 있다.
특히 상표 등록을 할 경우 별도 라이선스가 필요한 경우가 많다.

📜 원본 파일 소유권

디자인 계약에서 은근히 분쟁이 잦은 부분이다.
"로고를 받았다"와 "원본 파일과 저작권을 양도받았다"는 완전히 다른 얘기다.

계약 전에 아래를 명확히 하자.

🔸 최종 납품 파일 목록 (AI 포함 여부)
🔸 저작재산권 양도 범위
🔸 수정 요청 횟수 및 추가 수정 비용
🔸 디자이너 포트폴리오 사용 허용 여부

재능넷 같은 재능 공유 플랫폼에서 로고 디자인을 의뢰할 때도, 작업 시작 전에 "AI 원본 포함 여부"를 문의 메시지로 확실히 확인해두면 나중에 서로 얼굴 붉힐 일이 없다. 대부분의 성실한 디자이너는 이 부분을 미리 명시해둔다.

💾 백업 — 5년 뒤의 나를 위한 선물

실제로 정말 자주 벌어지는 일이다.

이러면 결국 돈 주고 다시 만들어야 한다.

백업 원칙은 유명한 3-2-1 규칙을 따르자.

🔹 3개의 복사본
🔹 2가지 서로 다른 저장 매체 (로컬 + 외장/클라우드)
🔹 1개는 물리적으로 다른 장소에

그리고 백업 폴더에 README.txt를 하나 넣어두자.

[달빛서재 로고 정보]
제작일 : 2024-03-15
제작자 : OOO (연락처/이메일)
사용 폰트 : Pretendard Bold (SIL OFL, 로고 사용 가능)
브랜드 컬러 : PANTONE 2728C / #2A52BE
원본 : 01_Master_Source/Logo_Master_Editable.ai
Illustrator 버전 : CC 2024 (CS6 하위버전 파일 동봉)

미래의 나 또는 후임자가 이 파일을 보고 눈물 흘리며 고마워할 것이다.

🧠 12장. 자주 나오는 오해 Q&A

❓ "PNG를 아주 크게 만들면 벡터랑 똑같지 않나요?"

아니다. 10000px PNG는 확실히 선명하지만,

① 용량이 수십 MB로 폭발하고
② CMYK 변환 시 색 관리가 어렵고
③ 커팅·자수 장비는 패스가 없어서 아예 못 읽고
④ 그 이상 확대하면 결국 깨진다

벡터의 본질은 "선명함"이 아니라 "수학적 경로 데이터"다. 이게 핵심 차이.

❓ "SVG가 좋으면 인쇄도 SVG로 하면 되잖아요?"

이론상 SVG도 벡터라 가능하지만, 현실적으로 인쇄 워크플로우와 안 맞는다.

SVG는 태생이 웹용이라 RGB 기반이고, CMYK·별색·오버프린트·재단선 같은 인쇄 전용 정보를 담는 표준이 없다.
그리고 인쇄소 소프트웨어 상당수가 SVG를 제대로 못 읽거나, 읽더라도 색이 틀어진다.

❓ "그냥 PDF 하나만 있으면 안 되나요?"

PDF는 정말 강력해서, 사실 꽤 많은 경우를 커버한다.
하지만 웹 개발자에겐 SVG가 필요하고, 일부 구형 장비엔 EPS가 필요하며, PPT에 넣을 땐 PNG가 편하다.

결국 답은 하나 — 용도별로 다 갖춰두는 게 정답이다. 어차피 한 번 만들면 끝이다.

❓ "AI 파일이 없으면 진짜 큰일인가요?"

EPS나 편집 가능한 PDF가 있다면 어느 정도는 괜찮다. 둘 다 벡터라 일러스트레이터에서 열어 편집할 수 있다.

다만 레이어 구조, 스와치, 심볼, 어피어런스 같은 작업 편의 정보는 손실되어 있을 수 있다.
"수정은 가능하지만 좀 불편하다" 정도로 생각하면 된다.

❓ "로고 배경이 흰색인데 투명이라고 착각하는 경우?"

포토샵·일러스트레이터에서 투명은 회색 체크무늬 패턴으로 보인다.
근데 이걸 파워포인트에 넣으면 흰 배경이 그대로 붙어있는 경우가 있다.

확인법 : PNG를 어두운 색 배경 위에 올려보자. 흰 네모가 보이면 투명이 아니다.

🏁 에필로그 : 결국 기억할 건 이거 4줄

여기에 PDF 하나 더 얹으면, 세상 대부분의 요청을 소화할 수 있다.

로고는 결국 브랜드가 세상에 내미는 첫 얼굴이다.
아무리 멋지게 디자인해도, 간판에서 깨지고 명함에서 색이 틀어지면 그 인상은 날아간다.

파일 형식을 제대로 이해한다는 건, 단순히 확장자를 외우는 게 아니라 —
내 브랜드가 어디에 어떻게 보일지를 미리 설계하는 일이다.

이제 로고 폴더를 다시 열어보자.
아까는 외계어처럼 보였던 그 파일들이, 이젠 각자 자기 역할을 가진 든든한 팀원들로 보일 거다. 😎

— 여러분의 로고가 어디서든 선명하게 빛나길 바라며 ✨ —