CI·BI 뜻과 차이, 로고·컬러·서체를 홈페이지에 옮기는 방법

CI는 회사 전체의 얼굴이고, BI는 회사가 내놓은 개별 제품이나 서비스 브랜드의 얼굴입니다. 이 가이드는 CI·BI의 뜻과 차이를 먼저 정리하고, 홈페이지를 리뉴얼할 때 로고 파일·브랜드 컬러·전용 서체를 웹으로 옮기면서 실제로 생기는 문제와 해결 방법을 다룹니다. 디자인 담당자가 아니어도 디자이너나 제작사에 무엇을 요청하면 되는지 알 수 있도록 썼습니다.

CI·BI 뜻과 차이

CI(Corporate Identity)는 회사 전체를 대표하는 이름, 로고, 색상, 서체와 그 사용 규칙을 하나로 묶은 기업 정체성입니다. BI(Brand Identity)는 회사가 운영하는 개별 제품·서비스 브랜드의 이름, 로고, 색상, 서체를 묶은 브랜드 정체성입니다. 쉽게 말해 CI는 「누가 만드는가」를, BI는 「무엇을 사는가」를 알아보게 하는 장치입니다.

로고만 CI라고 부르는 경우가 많지만, 원래 CI는 로고를 포함한 시각 요소와 그 사용 규칙 전체를 가리킵니다. 그중 시각 요소만 따로 VI(Visual Identity)라고 부르기도 합니다.

중소기업은 CI와 BI가 같은 경우가 많다

회사명이 곧 제품명이거나 제품 브랜드를 따로 두지 않는 회사라면 CI 하나가 BI 역할까지 합니다. 이 경우 굳이 둘을 나눌 필요는 없습니다. 다만 주력 제품에 별도 이름을 붙여 판매하기 시작했다면, 기업 홈페이지에서 회사 로고와 제품 로고가 어디에 어떻게 함께 놓일지 미리 정해 두어야 화면이 어수선해지지 않습니다.

브랜드 가이드라인에 들어 있는 것과 웹에서 빠지기 쉬운 것

브랜드 가이드라인(CI 매뉴얼)은 로고와 색상, 서체를 어떻게 써야 하는지 정해 둔 규정집입니다. 홈페이지 리뉴얼을 시작할 때 제작사가 가장 먼저 요청하는 자료이기도 합니다. 일반적인 가이드라인에는 아래 항목이 들어 있습니다.

• 로고 형태: 시그니처 가로형·세로형, 심볼 단독, 로고타입 단독
• 여백 규정: 로고 주변에 다른 요소가 들어오면 안 되는 최소 공간
• 최소 크기: 로고가 알아볼 수 있게 표시되는 가장 작은 크기
• 전용 색상: 인쇄용 별색, CMYK, RGB, HEX 값
• 전용 서체: 제목·본문에 쓰는 서체와 굵기
• 배경별 사용: 컬러 배경, 흑백, 어두운 배경에서 쓰는 반전형
• 금지 사례: 늘리기, 색 바꾸기, 그림자 넣기, 비율 깨기 등

문제는 가이드라인이 인쇄물 기준으로 만들어진 경우가 많다는 점입니다. 10년 전에 만든 매뉴얼이라면 웹에 필요한 값이 빠져 있기 쉽습니다. 리뉴얼 전에 아래 항목이 있는지 확인하고, 없으면 디자이너에게 보충을 요청하세요.

로고와 색상을 회사소개서에 넣는 기준은 회사소개서 만드는 법: 목차 구성과 들어갈 내용, 홈페이지와 차이에서 다룹니다.

같은 값을 회사소개서, 명함, 홈페이지에 똑같이 쓰는 것이 가이드라인의 목적입니다. 웹용 값을 정해 두면 회사소개서를 고칠 때도 그 값을 그대로 가져다 쓸 수 있습니다.

홈페이지 리뉴얼 때 받아야 할 로고 파일: AI·SVG·PNG

홈페이지에 로고를 넣으려면 원본 벡터 파일(AI 또는 SVG)과 투명 배경 PNG를 받으면 됩니다. 홈페이지 헤더에는 SVG를 쓰고, SVG를 넣을 수 없는 곳에만 PNG를 쓰는 것이 일반적입니다. 형식별 차이는 아래와 같습니다.

디자이너가 일러스트레이터로 로고를 갖고 있다면 파일 > 내보내기 > 화면에 맞게 내보내기에서 PNG, JPEG, SVG, PDF, WebP 등 여러 형식과 크기를 한 번에 뽑을 수 있습니다. 「가로형·세로형·심볼 단독 × 컬러·흑백·반전형」 조합을 SVG와 PNG로 한 번에 받아 두면 리뉴얼 내내 다시 요청할 일이 줄어듭니다.

SVG로 받을 때 확인할 세 가지

1. 글자가 윤곽선으로 바뀌어 있는가: 로고 속 글자가 서체 정보로 남아 있으면, 그 서체가 없는 환경에서는 다른 글꼴로 바뀌어 보일 수 있습니다. 일러스트레이터에서는 텍스트를 선택하고 마우스 오른쪽 버튼 > 윤곽선 만들기로 글자를 도형으로 바꿉니다. 바꾸기 전 원본은 따로 보관해 달라고 요청하세요.
2. 로고 바깥 여백이 정리되어 있는가: 작업 화면(아트보드)이 로고보다 훨씬 크면 홈페이지에 넣었을 때 로고 주변에 보이지 않는 빈 공간이 생겨 위치가 어긋납니다. 아트보드를 로고 크기에 맞춰 내보내 달라고 하세요.
3. 관리자 화면에 올릴 수 있는가: SVG는 파일 안에 스크립트를 넣을 수 있는 형식입니다. 워드프레스는 기본 설정에서 SVG를 업로드 허용 형식에 넣지 않습니다. 관리자에서 로고를 직접 바꾸려면 SVG 업로드를 허용하는 설정이나 플러그인이 필요하고, 출처가 확실한 파일만 올려야 합니다.

원본 파일이 없을 때

로고를 만든 업체나 디자이너에게 AI 원본을 먼저 요청하세요. 원본을 못 구하면 PNG나 JPG를 보고 벡터로 다시 그리는 작업이 필요하고, 이때 선 굵기나 곡선이 원래 로고와 미묘하게 달라질 수 있습니다.

로고를 외부에서 만들었다면 계약서의 저작권 조항도 확인하세요. 저작권법 제45조 제2항은 저작재산권 전부를 넘겨받더라도 특약이 없으면 2차적저작물을 작성할 권리(원저작물을 바탕으로 변형·수정하는 권리)는 포함되지 않은 것으로 추정한다고 정합니다. 앞으로 로고를 다듬거나 변형해 쓸 계획이 있다면 계약서에 그 권리까지 명시되어 있는지 보는 것이 안전합니다.

브랜드 컬러를 웹 색상으로 옮길 때

브랜드 컬러를 웹에 옮길 때는 가이드라인에 적힌 RGB 또는 HEX 값을 우선으로 쓰고, 인쇄용 CMYK 값을 변환해 쓰는 일은 피하세요. 모니터는 RGB 색 공간을, 프린터는 CMYK 색 공간을 쓰는데 두 공간이 표현할 수 있는 색의 범위가 달라서, 모니터에서 보이는 일부 색은 인쇄로 재현되지 않고 반대도 마찬가지라고 어도비는 설명합니다. 웹에서 쓰는 HEX(#1A4FA0 같은 값)와 rgb() 표기는 W3C 표준상 sRGB 색 공간의 색을 지정합니다.

값이 하나도 없을 때 정하는 순서

1. 가이드라인에 RGB·HEX 값이 있으면 그 값을 그대로 씁니다.
2. CMYK나 별색 값만 있으면 디자이너가 변환한 값을 후보 2~3개로 만들고, 실제 인쇄물(명함, 브로슈어)을 옆에 두고 여러 모니터와 휴대폰에서 비교합니다.
3. 고른 값을 웹 표준 값으로 확정하고 가이드라인에 추가합니다. 이후 회사소개서 PDF, 소셜 이미지도 이 값을 씁니다.

로고는 대비 기준에서 빠지지만 글자와 버튼은 아니다

웹 콘텐츠 접근성 지침(WCAG 2.2)은 일반 텍스트와 배경의 명도 대비를 4.5:1 이상, 큰 텍스트(18pt 또는 굵은 14pt 이상)는 3:1 이상으로 정합니다. 로고나 브랜드명에 포함된 글자는 이 대비 요구에서 빠집니다. 버튼 테두리나 아이콘 같은 화면 요소는 3:1 대비를 요구하는데, 기업 정체성이나 브랜드 가이드라인에 따라 색이 정해진 로고는 여기서도 면제됩니다.

문제는 브랜드 컬러를 로고 밖으로 가져올 때입니다. 밝은 노랑이나 하늘색이 브랜드 컬러라면, 그 색 위에 흰 글씨를 얹은 버튼이나 그 색으로 쓴 본문 링크는 대비 기준에 걸리기 쉽습니다. 이럴 때는 브랜드 컬러는 면적이 큰 배경이나 장식에 쓰고, 글자와 버튼용으로 같은 계열의 진한 색 한 단계를 추가로 정하세요. 국내 기준(KWCAG 2.2)과 점검 방법은 웹접근성 인증 절차와 체크리스트: KWCAG 2.2 기준 정리에 정리했고, 기준 원문은 W3C 문서에서 볼 수 있습니다.

전용 서체를 홈페이지 웹폰트로 쓸 때

전용 서체를 홈페이지에 쓰려면 먼저 그 서체의 라이선스가 웹폰트 사용(웹사이트에 글꼴 파일을 올려 방문자 브라우저로 내려보내는 방식)을 허용하는지 확인해야 합니다. PC에 설치해 문서와 인쇄물을 만드는 라이선스와 웹 사용 라이선스를 따로 정하는 제작사가 있기 때문입니다. 예를 들어 산돌구름은 구독 안내에 「임베딩 및 웹폰트 라이선스는 별도문의」라고 적고 있습니다. 무료 서체도 웹 사용 조건이 서체마다 다르니 상업용 무료 이미지·폰트 사이트 모음의 확인 방법을 따라 보세요.

한글 웹폰트가 무거운 이유와 줄이는 방법

유니코드의 한글 음절은 11,172자입니다. 이 글자를 모두 담은 서체 파일은 영문 서체보다 훨씬 커서, 그대로 올리면 첫 화면에서 글자가 늦게 나타나거나 잠깐 다른 서체로 보였다가 바뀌는 현상이 생깁니다. 보통 아래 순서로 줄입니다.

• WOFF2 형식으로 변환: 네트워크 전송량을 줄이도록 압축률을 높인 웹 글꼴 형식으로, 2024년 W3C 권고안이 되었습니다. CSS @font-face에서 format("woff2")로 지정합니다.
• 서브셋 만들기: 실제로 자주 쓰는 글자만 남긴 파일을 만들어 용량을 줄입니다. 서체 라이선스가 파일 변형을 허용하는지도 함께 확인하세요.
• 제목과 본문 나누기: 전용 서체는 제목과 강조 문구에만 쓰고, 본문은 기기 기본 서체나 가벼운 웹폰트를 씁니다.

CSS의 unicode-range는 지정한 글자 범위를 페이지에서 하나도 쓰지 않으면 그 글꼴을 내려받지 않지만, 하나라도 쓰면 글꼴 파일 전체를 내려받습니다. 범위만 지정한다고 용량이 줄지는 않으므로, 실제 용량을 줄이려면 파일 자체를 서브셋으로 나눠야 합니다.

홈페이지에서 로고가 들어가는 자리 체크리스트

CI를 바꾸거나 리뉴얼하면 헤더 로고만 바꾸고 나머지를 놓치는 경우가 많습니다. 홈페이지와 주변 채널에서 로고가 들어가는 자리를 한 번에 점검하세요.

파비콘 파일 종류와 크기는 파비콘 만들기와 사이즈: 필요한 파일·태그와 구글·네이버 요건, 공유 썸네일은 OG태그 이미지 사이즈 가이드: 플랫폼별 권장 크기 총정리를 참고하세요. 구글은 Organization 구조화 데이터의 로고 이미지가 최소 112×112픽셀이고 크롤링 가능해야 하며, 로고가 거의 흰색이나 회색이면 흰색 배경에서 의도대로 보이지 않을 수 있다고 안내합니다. 작성 방법은 JSON-LD 구조화 데이터 작성법에서 볼 수 있습니다.

CI를 바꿀 때는 상표도 함께 확인

로고는 디자인이면서 상표입니다. 상표법은 상표를 이루는 표장에 문자와 도형뿐 아니라 색채도 포함하고(제2조), 상표권은 설정등록이 되어야 발생하며(제82조), 존속기간은 설정등록일부터 10년이고 10년씩 갱신할 수 있다고 정합니다(제83조). 새 로고를 쓰기 전에는 비슷한 상표가 이미 등록되어 있는지 KIPRIS 지식재산정보 검색서비스에서 찾아보고, 필요하면 출원을 검토하세요. 상표 업무는 2025년 10월부터 특허청에서 승격한 지식재산처가 맡고 있습니다. 출원 범위와 분류는 사업 분야에 따라 달라지므로 변리사와 상의하는 편이 안전합니다.

자주 묻는 질문

CI와 BI 중 무엇을 먼저 만들어야 하나요?

회사명으로 영업하는 B2B 기업이라면 CI가 먼저입니다. 거래처는 제품 이름보다 회사 이름으로 찾아오기 때문입니다. 소비자에게 제품 이름으로 판매하는 회사라면 주력 제품의 BI가 먼저일 수 있고, 이때 기업 홈페이지에는 회사 CI와 제품 BI를 어떻게 함께 보여줄지 정해 두세요.

로고 파일이 PNG밖에 없는데 홈페이지에 써도 되나요?

표시 크기보다 2배 이상 큰 투명 배경 PNG라면 당장은 쓸 수 있습니다. 다만 고해상도 화면에서 가장자리가 흐려 보일 수 있고, 파비콘이나 반전형을 만들 때 다시 문제가 생깁니다. 원본 제작자에게 AI나 SVG 원본을 요청하고, 없다면 리뉴얼 일정에 벡터로 다시 그리는 작업을 넣으세요.

브랜드 가이드라인이 없으면 홈페이지를 만들 수 없나요?

만들 수 있습니다. 로고 파일, 대표 색상 값 2~3개, 제목용 서체 하나만 정해도 시작할 수 있습니다. 제작 과정에서 정한 값(HEX 색상, 반전형 로고, 화면용 최소 크기)을 짧은 문서로 남겨 두면 그것이 회사의 첫 웹용 가이드라인이 됩니다.

로고 색을 웹사이트에 맞게 조금 바꿔도 되나요?

로고 자체의 색은 가이드라인을 따르는 것이 원칙입니다. 대비 때문에 로고가 잘 보이지 않는다면 로고 색을 바꾸기보다 가이드라인에 있는 흑백형이나 반전형을 쓰고, 바꿔야 한다면 디자이너와 정식 변형 버전을 만들어 가이드라인에 추가하세요.

웹닷은 홈페이지를 만들 때 로고 원본 확인, 웹용 색상 값과 반전형 정리, 웹폰트 라이선스 확인을 기획·디자인 단계에서 함께 처리합니다.

정리

CI는 회사 전체를, BI는 개별 제품·서비스를 알아보게 하는 정체성입니다. 홈페이지 리뉴얼에서는 이 정체성을 화면으로 옮기는 과정에서 로고 파일 형식, 색상 값, 서체 라이선스 문제가 생기므로, 시작 전에 원본과 웹용 값을 갖춰 두면 일정과 품질이 함께 안정됩니다.