듀오랩스

고객 자료 준비: 로고와 브랜드 파일

고객 준비 가이드 8분 읽기customer-prepdocslogomaterialspublic-doc

웹사이트나 앱을 만들 때는 로고를 벡터 원본으로, 색상 코드와 글꼴 정보까지 함께 준비해 주셔야 합니다. 로고는 화면 머리, 파비콘, 앱 아이콘, 인쇄용 문서까지 크기와 배경이 다른 여러 자리에 쓰이기 때문에, 이미지 한 장으로는 모든 자리를 채우지 못합니다.

고객 자료 전반은 고객 자료 준비 가이드에 있습니다.

확인 기준. 2026년 9월 17일에 Apple Human Interface Guidelines와 Google Play 개발자 공식 문서를 확인해 작성했습니다.

이미지 한 장으로는 부족한 이유

처음 받는 로고는 대부분 JPG 한 장이거나 홈페이지·명함을 캡처한 이미지입니다. 이런 파일로 작업하면 다음 문제가 생깁니다.

  • 고해상도 화면에서 흐립니다. 최근 휴대폰과 노트북은 화면 밀도가 높아 작은 이미지를 늘려 보여 주면 가장자리가 뭉개집니다.
  • 색을 바꿀 수 없습니다. 어두운 배경에 흰색 로고를 올리거나 한 가지 색으로 줄여야 할 때, 이미지 파일은 손으로 다시 그려야 합니다.
  • 흰 상자가 따라옵니다. JPG는 투명 배경을 지원하지 않습니다. 어두운 머리 영역이나 사진 위에 올리면 로고 주위에 흰 사각형이 보입니다.
  • 다른 용도로 쓰지 못합니다. 인쇄물은 화면보다 훨씬 높은 해상도가 필요하고, 파비콘과 앱 아이콘은 정사각형 비율이 필요합니다. 가로로 긴 로고 이미지에서 이런 파일을 만들어 낼 수는 없습니다.

준비할 자료

벡터 원본

로고는 벡터 파일로 보내 주십시오. 벡터 파일은 크기를 아무리 키워도 깨지지 않고 색을 바꿀 수 있습니다. SVG, AI(일러스트레이터), EPS, PDF 가운데 하나면 충분합니다. PDF는 벡터로 저장된 것이어야 하며, 이미지를 PDF 안에 넣기만 한 파일은 JPG와 같습니다. 어느 쪽인지 모르시면 가지고 계신 파일을 모두 보내 주시면 개발사가 확인합니다.

로고 변형

한 가지 모양만으로는 자리를 다 채우지 못합니다. 있는 것은 모두 보내 주십시오.

변형 쓰이는 곳
가로형(심볼 + 글자) 웹사이트 머리, 이메일 서명, 문서 머리
정사각형 또는 심볼만 파비콘, 앱 아이콘, SNS 프로필
흰색 단색 어두운 배경, 사진 위
검은색 단색 흑백 인쇄, 팩스, 도장처럼 한 색만 쓰는 자리

없는 변형은 개발사가 원본에서 만들 수 있지만, 브랜드 담당자가 확인할 시안이 하나 더 생깁니다.

브랜드 색상 코드

눈으로 뽑은 색은 화면마다 조금씩 다르게 보입니다. 정해 둔 값이 있으면 코드로 알려 주십시오. 화면용은 HEX(# 뒤에 붙는 여섯 자리 코드) 또는 RGB 값이고, 인쇄물까지 함께 만든다면 CMYK 값도 필요합니다. 브랜드 가이드 문서가 있다면 그 파일을 그대로 보내 주시는 것이 가장 정확합니다.

글꼴 이름과 라이선스

로고나 기존 홍보물에 쓴 글꼴 이름을 알려 주십시오. 글꼴은 라이선스에 따라 웹사이트나 앱에 넣어도 되는지가 다릅니다. 인쇄물에는 쓸 수 있어도 웹 사용은 따로 구매해야 하는 경우가 있으니, 구매 내역이나 라이선스 문서가 있으면 함께 보내 주십시오. 확인되지 않으면 개발사는 무료로 공개된 비슷한 글꼴을 제안합니다.

여백과 최소 크기 규정

로고 주위에 비워 둘 여백, 이보다 작게 쓰지 말라는 최소 크기, 늘리거나 기울이지 말라는 규정이 있다면 알려 주십시오. 규정이 없으면 개발사가 일반적인 기준으로 배치하고 시안에서 확인받습니다.

벡터 원본이 없을 때

  1. 로고를 만든 곳에 원본을 요청합니다. 디자인 업체나 프리랜서가 만들었다면 대개 AI 또는 EPS 파일을 가지고 있습니다. 「로고 원본 벡터 파일」이라고 요청하시면 됩니다.
  2. 만든 곳을 찾을 수 없으면 벡터화를 따로 진행합니다. 이미지 로고를 보고 벡터로 다시 그리는 작업으로, 개발 범위와는 별개의 작업입니다. 로고가 복잡할수록 시간이 들고, 다시 그린 결과를 원본과 비교해 확인받는 단계가 필요합니다.
  3. 그동안은 가장 큰 이미지를 보내 주십시오. 개발은 임시 로고로 먼저 진행하고, 원본이 오면 교체합니다.

파비콘과 앱 아이콘

파비콘은 브라우저 탭에 뜨는 작은 아이콘이고, 앱 아이콘은 휴대폰 홈 화면과 스토어에 보이는 아이콘입니다. 둘 다 정사각형이고 매우 작게 보이므로, 가로형 로고를 그대로 줄이면 글자가 읽히지 않습니다. 심볼만 있는 버전이 필요한 이유입니다.

앱 스토어는 아이콘 규격을 공식 문서로 정해 둡니다.

스토어 공식 문서에 적힌 규격
Apple (iOS, iPadOS, macOS) Layout size: 1024x1024 px. 모서리는 시스템이 둥글게 깎습니다
Google Play 512px x 512px, 32-bit PNG, 최대 1024KB. 둥근 마스크와 그림자는 Google Play가 입힙니다

두 스토어 모두 모서리를 미리 둥글게 깎지 않은 정사각형을 기준으로 합니다. 고객께서 이 크기로 직접 만들어 주실 필요는 없고, 벡터 원본과 심볼 버전이 있으면 개발사가 규격에 맞춰 만듭니다. 스크린샷 등 스토어에 올릴 나머지 자료는 앱스토어 심사와 외부 플랫폼 승인 준비에서 안내합니다.

준비 체크리스트

항목 형식 필수 여부
로고 벡터 원본 SVG, AI, EPS, PDF 중 하나 필수
가로형 로고 벡터 필수
정사각형 또는 심볼 로고 벡터 앱·파비콘이 있으면 필수
흰색·검은색 단색 버전 벡터 있으면
브랜드 색상 코드 HEX 또는 RGB, 인쇄물은 CMYK 권장
글꼴 이름과 라이선스 이름, 구매 내역 권장
여백·최소 크기 규정 브랜드 가이드 문서 있으면

제품 사진은 제품 이미지 준비에서, 출력 양식과 직인은 서식과 직인, 사업자 서류에서 다룹니다.

자주 막히는 곳

증상 원인 대응
사이트에서 로고가 흐리게 보입니다 작은 JPG나 캡처 이미지를 늘려 썼습니다 벡터 원본을 받아 교체합니다
어두운 배경에서 로고 주위에 흰 상자가 보입니다 투명 배경이 없는 파일입니다 벡터 원본 또는 흰색 단색 버전을 보내 주십시오
PDF를 보냈는데 벡터가 아니라고 합니다 이미지를 PDF 안에 넣어 저장한 파일입니다 로고를 만든 곳에 AI 또는 SVG 원본을 요청합니다
앱 아이콘에서 로고 글자가 읽히지 않습니다 가로형 로고를 정사각형에 줄여 넣었습니다 심볼만 있는 버전을 쓰거나 새로 정합니다
화면마다 브랜드 색이 조금씩 다릅니다 이미지에서 눈으로 색을 뽑았습니다 정해 둔 HEX·RGB 값을 알려 주십시오
쓰던 글꼴을 웹에 넣지 못한다고 합니다 인쇄용 라이선스만 있습니다 웹 라이선스를 구매하거나 대체 글꼴을 고릅니다

출처

관련 문서

마지막 수정:

재사용하실 때는 출처(Duolabs)와 이 문서의 정식 URL을 표시해 주세요.