본문으로 건너뛰기

홈페이지에 로고 넣기 전에 꼭 확인해야 할 것, 공식 브랜드 가이드라인

조회수 154 게시일 2019.11.12 2주 전 수정

소셜 아이콘 하나도 그냥 쓰면 안 됩니다

기업 홈페이지를 새로 만들거나 리뉴얼할 때 빠지지 않는 작업이 있습니다. 하단 푸터에 인스타그램 아이콘을 달거나, 로그인 페이지에 "카카오로 시작하기" 버튼을 넣는 일입니다. 유튜브 채널 링크를 연결하고, 네이버 블로그나 링크드인 페이지로 이동하는 아이콘을 나란히 배치하는 것도 흔한 작업입니다.

그런데 이 작업을 할 때 로고 이미지를 어디서 가져오는지 물어보면, 대부분 인터넷에서 검색해서 쓴다거나 예전 프로젝트에서 쓰던 파일을 그대로 사용한다고 합니다. 문제는 여기서 시작됩니다.

네이버, 카카오, 구글, 메타를 비롯한 주요 플랫폼들은 자사 로고와 브랜드 자산의 사용 방법을 규정한 공식 가이드라인을 운영하고 있습니다. 이 가이드라인은 단순한 권고 사항이 아니라 서비스 이용 약관과 연결된 규정입니다. 임의로 색상을 바꾸거나, 오래된 버전의 로고를 계속 쓰거나, 가이드에서 금지하는 방식으로 배치하는 것은 모두 약관 위반에 해당할 수 있습니다.

이 글에서는 국내 홈페이지 제작 시 자주 사용하는 주요 서비스의 공식 브랜드 가이드라인 페이지를 소개하고, 각 가이드의 특징을 간략히 정리했습니다. 세부 규정은 수시로 바뀔 수 있으니, 실제 작업 전에는 반드시 해당 공식 페이지를 직접 확인하시기 바랍니다.

왜 가이드라인을 지켜야 하는가

각 플랫폼이 브랜드 가이드라인을 운영하는 이유는 자사 브랜드 이미지를 일관되게 유지하기 위해서입니다. 로고의 색상, 비율, 여백, 배경색 등이 제각각으로 사용되면 그 브랜드가 어떻게 보이는지에 대한 통제권을 잃게 됩니다. 그래서 각 사는 공식 파일을 배포하고, 사용 가능한 방식과 금지된 방식을 명확히 규정해 두고 있습니다.

이용자 입장에서도 가이드라인을 따르는 것이 중요합니다. 비공식 경로에서 가져온 로고 파일은 해상도가 낮거나 구버전일 수 있고, 가이드에 어긋난 방식으로 사용하면 해당 플랫폼으로부터 사용 중단 요청을 받을 수 있습니다. API나 개발자 계정을 운영하는 경우에는 계정 정지나 서비스 연동 해제로 이어질 수도 있습니다.

무엇보다, 공식 가이드라인대로 만든 홈페이지는 그렇지 않은 것보다 완성도가 높아 보입니다. 브랜드 규정에 맞는 버튼과 아이콘은 시각적으로도 더 정돈된 인상을 줍니다.

국내 서비스 브랜드 가이드라인

네이버

네이버는 로고 관련 가이드를 두 가지 경로로 나누어 운영합니다. 하나는 네이버 로고 자체의 사용 규정을 다루는 네이버 로고 프로젝트이고, 다른 하나는 "네이버 아이디로 로그인" 기능을 홈페이지에 연동할 때 사용하는 버튼의 디자인 규정을 안내하는 네이버 아이디로 로그인 BI 가이드입니다.

로고 프로젝트 페이지에서는 네이버 로고의 형태와 색상, 사용 가능한 배경 조건 등 전반적인 브랜드 아이덴티티를 다룹니다. 로그인 버튼 BI 가이드는 개발자 문서 형태로 제공되며, 버튼의 크기나 여백, 색상 등을 규정하고 공식 이미지 파일을 다운로드할 수 있도록 안내합니다.

카카오

카카오 역시 서비스 목적에 따라 가이드를 구분해 제공합니다. 홈페이지에 "카카오 로그인" 버튼을 구현할 때는 카카오 개발자 문서의 카카오 로그인 디자인 가이드를 참고해야 합니다. 이 가이드에서는 버튼을 구성하는 심볼, 레이블, 컨테이너의 규격과 색상 규정을 상세히 설명하고, 공식 버튼 이미지 파일(PNG, PSD)을 다운로드할 수 있는 경로도 안내합니다.

카카오의 경우 표준 디자인 버튼을 그대로 사용하는 것을 권장하지만, 서비스 UI에 맞게 일부 수정이 필요한 경우의 허용 범위도 가이드 안에 규정되어 있습니다. 가이드에서 정한 색상 규정을 벗어나거나, 심볼의 형태나 방향을 임의로 바꾸는 것은 허용되지 않습니다.

글로벌 서비스 브랜드 가이드라인

구글

구글은 브랜드 리소스 센터(Brand Resource Center)를 통해 구글 로고와 각종 제품 아이콘의 사용 기준을 안내합니다. 구글의 가이드는 체계가 비교적 잘 갖추어져 있어서, 사용 목적별로 개발자용, 미디어용, 파트너용 등 상황에 따른 기준을 구분해 제공합니다.

구글 지도를 홈페이지에 삽입하거나, "구글로 로그인" 버튼을 구현하거나, 구글 API를 활용하는 경우 각각 적용되는 브랜드 규정이 다릅니다. 제품 아이콘을 사용할 때는 컬러 버전 사용이 원칙이며, 구글 브랜드 색상을 자체 디자인에 장식 목적으로 쓰는 것은 허용되지 않습니다.

메타(페이스북, 인스타그램)

메타는 브랜드 리소스 센터에서 페이스북과 인스타그램의 브랜드 가이드라인을 함께 운영합니다. 페이스북과 인스타그램은 각각 별도의 가이드 페이지를 갖추고 있으며, 공식 로고 파일과 아이콘을 다운로드할 수 있습니다.

특히 메타 가이드는 금지 사항을 꽤 구체적으로 명시합니다. 로고 색상을 임의로 변경하거나, 로고에 그라디언트나 그림자 등의 효과를 추가하거나, 로고를 텍스트 문장 안에 삽입하는 방식 등이 대표적인 금지 사례로 안내됩니다. 공식 배포 파일 이외의 소스에서 가져온 이미지는 사용하지 않도록 권고합니다.

유튜브

유튜브는 브랜드 리소스 페이지에서 로고와 아이콘, 구독 버튼 등의 사용 가이드를 제공합니다. 유튜브 로고는 배경색에 따라 사용할 수 있는 버전이 나뉘며, 아이콘의 비율이나 색상을 임의로 조정하는 것은 허용되지 않습니다.

홈페이지에 유튜브 채널 링크를 연동하거나 구독 버튼을 삽입할 때 이 가이드를 참고하면 됩니다. 공식 파일은 가이드 페이지에서 직접 다운로드할 수 있습니다.

X (구 트위터)

트위터는 2023년 X로 리브랜딩하면서 기존의 파란 새 로고를 폐기하고 새로운 X 로고로 전환했습니다. 이에 따라 브랜드 툴킷(Brand Toolkit)도 새롭게 공개되었으며, 구버전 트위터 로고는 더 이상 공식 가이드에서 허용하지 않습니다.

X의 새 로고는 흑백을 기본 색상으로 사용합니다. 브랜드 툴킷에는 로고 파일과 함께 파트너사 로고와 병기하는 방법, 게시물 템플릿, 어도비 포토샵용 편집 파일 등이 포함되어 있습니다. 홈페이지의 소셜 아이콘을 업데이트하지 않고 아직 트위터 새 로고를 쓰고 있다면 이 기회에 확인해 보시기 바랍니다.

링크드인

링크드인은 brand.linkedin.com이라는 전용 브랜드 가이드 사이트를 별도로 운영합니다. 여기서 로고 파일을 다운로드하거나 사용 정책 전문을 확인할 수 있습니다.

링크드인 가이드는 일반 회원, 개발자, 파트너, 미디어 등 사용자 유형에 따라 허용 범위를 다르게 규정합니다. 일반적으로 자사 홈페이지에 링크드인 회사 페이지로 이동하는 아이콘을 다는 것은 허용되지만, 로고를 자사 로고와 합치거나 변형하는 것은 금지됩니다. 다운로드 시 이용 약관에 동의하도록 되어 있으며, 약관 동의 자체가 가이드라인 준수를 전제로 합니다.

틱톡

틱톡은 틱톡 브랜드 허브(TikTok Brand Hub)를 통해 로고, 색상, 타이포그래피 등 브랜드 전반에 관한 가이드를 제공합니다. 개발자 연동을 위한 별도의 디자인 가이드도 운영하며, 이쪽에서는 앱 내 UI 구성 시 틱톡 브랜드를 어떻게 다뤄야 하는지를 안내합니다.

틱톡 로고는 특유의 그림자 효과가 포함된 형태가 공식 디자인입니다. 이 효과를 제거하거나 색상을 단색으로 바꾸는 것은 공식 가이드에서 허용하지 않는 변형에 해당할 수 있습니다.

가이드마다 공통으로 확인해야 할 사항

플랫폼마다 규정의 세부 내용은 다르지만, 대부분의 브랜드 가이드라인이 공통으로 강조하는 원칙이 있습니다. 아래 항목들은 어느 서비스의 로고를 사용할 때도 기본적으로 점검해야 하는 내용입니다.

확인 항목 설명
공식 파일 사용 각 플랫폼의 공식 가이드 페이지에서 직접 다운로드한 파일만 사용합니다. 검색 엔진이나 제3자 사이트에서 가져온 이미지는 구버전이거나 비공식 변형본일 수 있습니다.
색상 임의 변경 금지 로고의 색상을 자사 브랜드 색상이나 웹사이트 테마에 맞춰 임의로 바꾸는 것은 대부분의 가이드에서 금지합니다.
형태, 비율 변형 금지 로고를 늘이거나 압축하거나, 일부 요소를 제거하거나, 그림자나 테두리 등 효과를 추가하는 것은 원칙적으로 허용되지 않습니다.
충분한 여백 확보 로고 주변에는 가이드에서 정한 최소 여백을 확보해야 합니다. 다른 요소와 너무 붙어 있으면 가이드 위반에 해당할 수 있습니다.
최신 버전 사용 플랫폼 리브랜딩이나 로고 업데이트가 있었다면 예전 버전 로고는 더 이상 사용할 수 없습니다. X(구 트위터)가 대표적인 사례입니다.
제휴, 보증 오해 유발 금지 로고 배치 방식이 해당 플랫폼과의 공식 제휴나 보증 관계를 암시하는 것처럼 보여서는 안 됩니다.

공식 가이드라인 페이지 모음

위에서 소개한 내용을 한눈에 정리하면 다음과 같습니다. 홈페이지 제작 전이나 리뉴얼 시 체크리스트로 활용하세요.

네이버 로고 프로젝트
https://logoproject.naver.com/
네이버 아이디로 로그인 BI 가이드
https://developers.naver.com/docs/login/bi/bi.md
카카오 로그인 디자인 가이드
https://developers.kakao.com/docs/latest/ko/kakaologin/design-guide
구글 브랜드 리소스 센터
https://about.google/brand-resource-center/
메타 브랜드 리소스 센터
https://www.facebook.com/brand/resources
페이스북 브랜드 가이드라인
https://www.facebook.com/brand/resources/facebookapp/guidelines
인스타그램 브랜드 가이드라인
https://www.facebook.com/brand/resources/instagram/instagram-brand/
유튜브 브랜드 리소스
https://www.youtube.com/about/brand-resources
X 브랜드 툴킷
https://about.x.com/en/who-we-are/brand-toolkit
링크드인 브랜드 가이드라인
https://brand.linkedin.com/en-us
틱톡 브랜드 허브
https://tiktokbrandhub.com/
틱톡 개발자 디자인 가이드라인
https://developers.tiktok.com/doc/getting-started-design-guidelines

마무리

홈페이지에 외부 서비스 로고를 넣는 작업은 단순해 보이지만, 각 플랫폼의 브랜드 가이드라인을 모른 채 진행하면 약관 위반이나 서비스 연동 해제 같은 불필요한 문제로 이어질 수 있습니다.

가이드라인은 각 플랫폼이 공식 페이지에서 직접 운영하고 있으며, 대부분 무료로 로고 파일을 다운로드할 수 있습니다. 내용이 다소 많아 보여도 핵심은 결국 하나입니다. 공식 파일을 쓰고, 임의로 바꾸지 말고, 최신 버전을 확인하라는 것입니다.

홈페이지를 새로 제작하거나 리뉴얼을 계획 중이라면, 위에 소개한 가이드 페이지들을 북마크해 두고 작업 전에 한 번씩 점검하는 습관을 들이시길 권합니다. 각 가이드의 내용은 수시로 업데이트되므로, 이전에 확인한 내용이라도 시간이 지났다면 다시 한번 확인하는 것이 좋습니다.

제작·운영 상담이
필요하시면

이 글과 맞는 범위·일정을 함께 정리해 드립니다.