KU·BEN Corporate Identity · 1.2 최종본

쿠벤도시락 CI 가이드북

쿠벤 네모 마크와 쿠벤체 로고를 어디서나 같은 모습으로 쓰기 위한 약속입니다. 간판, 포장, 홈페이지, 인쇄물을 만들 때 이 문서를 기준으로 삼아 주세요.

2026년 10월 · 문의: 쿠벤도시락 본사 02-555-0676

01마크 원칙

붓 터치 그대로

테두리와 네 조각 모두 붓으로 그린 모양이 원본입니다. 선을 반듯하게 다듬거나 매끈한 도형으로 바꾸지 않습니다.

네 조각은 고정

네 조각의 모양, 기울기, 자리, 색은 바꾸지 않습니다. 연두는 반듯하게, 노랑·주황·청록은 각자 기울어진 그대로입니다.

바꿀 수 있는 것은 테두리 색뿐

테두리는 베이지(원본) · 검정 · 흰색 중에서 고르고, 테두리 없이 네 조각만 쓸 수도 있습니다. 흰색 테두리는 언제나 안쪽을 비웁니다(투명). 조각과 같은 색(연두·노랑·주황·청록) 바탕, 그리고 색 바탕·사진 위에서는 테두리와 네 조각을 모두 흰색으로 씁니다. 테두리 두께는 원본과 조금 두껍게, 두 가지입니다.

02마크

테두리 두께 두 가지

원본 두께원본 그대로. 크게 쓸 때(간판, 포장, 인쇄물)

조금 두껍게테두리 안쪽만 아주 살짝 두껍게. 작게 쓸 때, 굵은 글자와 함께 쓸 때(파비콘, 앱, 로고 조합)

테두리 색 · 바탕별 쓰임

베이지 테두리기본. 흰색·밝은 바탕

검정 테두리흑백 인쇄, 단색 도장·스티커

흰색 테두리어두운 바탕. 안쪽은 비움

테두리 없음로딩, 작은 장식, KU·BEN 가운데 등

베이지 바탕 → 검정 테두리

색 바탕 → 흰색 테두리 + 투명 안쪽

어두운 바탕 → 베이지 테두리도 가능

한 가지 색만 쓸 수 있을 때(도장·각인)만

전부 흰색 — 조각과 같은 색 바탕, 색 바탕, 사진 위

바탕이 연두·노랑·주황·청록처럼 조각과 같은 색이면 그 조각이 바탕에 묻힙니다. 이때와 색 바탕·사진 위에서는 테두리와 네 조각을 모두 흰색으로 씁니다. 안쪽은 투명입니다.

청록 바탕 → 전부 흰색

노랑 바탕 → 전부 흰색

사진 위 → 전부 흰색

주황 바탕 → 테두리 없이 전부 흰색

03색상 규격

HEX를 누르면 복사됩니다. CMYK는 화면 색에서 계산한 참고값이라, 인쇄 전에 인쇄소에서 색 교정을 한 번 받아 주세요.

이름	쓰임	RGB	CMYK (참고)
연두	조각	214 · 222 · 35	4 · 0 · 84 · 13
노랑	조각 · KU·BEN 가운데 점	255 · 193 · 14	0 · 24 · 95 · 0
주황	조각	240 · 90 · 34	0 · 62 · 86 · 6
청록	조각	0 · 182 · 159	100 · 0 · 13 · 29
베이지	테두리 (원본)	229 · 199 · 159	0 · 13 · 31 · 10
검정	테두리 (응용)	35 · 31 · 32	0 · 11 · 9 · 86
흰색	테두리 (어두운 바탕) · 안쪽 판	255 · 255 · 255	0 · 0 · 0 · 0
진회색	글자 (쿠벤체)	51 · 51 · 51	0 · 0 · 0 · 80

04로고 조합

글자는 모두 쿠벤체 기본(굵게)입니다. 마크는 조금 두껍게 판을 씁니다.

가로 · 한글기본 로고. 간판, 홈페이지 머리, 포장

가로 · 영문상자, 띠지, 영문이 어울리는 곳

시그니처 KU[마크]BEN왼쪽 마크 없이. 뚜껑, SNS 프로필, 굿즈

세로 · 한글정사각형 자리, 스티커

세로 · 영문명함 뒷면, 앱 첫 화면

어두운 바탕흰 글자 + 흰 테두리

어두운 바탕 · 시그니처

어두운 바탕 · 세로

비율: 가로 로고는 마크 높이 = 글자 높이 × 1.22, 마크와 글자 사이 = 마크 폭의 20%.

KU·BEN 가운데 점 응용

가운데 점은 원본 붓 조각을 그대로 작게 줄여 씁니다. 조각의 모양, 기울기, 붓 자국은 원본 그대로입니다. 노랑이 기본이고 청록·주황·연두로 바꿔 쓸 수 있으며, 네 조각 묶음은 쿠벤오더와 같은 로딩 움직임으로도 씁니다. 연두는 흰 바탕에서 대비가 약하니 아주 작게 쓸 때는 피해 주세요.

노랑 점기본

청록 점

주황 점

연두 점

네 조각 점

네 조각 로딩네 조각이 시계 방향으로 돎

어두운 바탕 · 노랑 점

어두운 바탕 · 네 조각 로딩

전부 흰색 로고 — 색 바탕 현수막·간판·사진 위

가로 · 한글 · 전부 흰색

시그니처 · 전부 흰색

사진·영상 위에서는 그림자 A

사진·영상 위와 색 바탕에서는 전부 흰색 로고에 그림자 A 한 가지를 넣을 수 있습니다. 그림자는 테두리 · 네 조각 · 글자 전체에 함께 넣고, 테두리만 따로 넣지 않습니다. 흰색·밝은 바탕·검정 바탕, 인쇄물, 파비콘처럼 작은 크기에는 넣지 않습니다.

그림자 없음밝은 음식 위에서 글자가 묻힘

그림자 A테두리·네 조각·글자 모두 같은 그림자

그림자 A 값: 아래로 로고 높이의 3%, 흐림 6%, 검정 28%. 홈페이지 코드(로고 높이 약 80px): filter: drop-shadow(0 2px 4px rgba(0,0,0,.28)) · 그림자를 넣은 PNG는 7_그림자A_사진영상위 폴더에 있습니다.

05여백과 최소 크기

aaaa

a = 조각 한 개의 폭 (마크 높이의 약 1/4). 마크와 로고 둘레에는 a 만큼 아무것도 두지 않습니다. 글자, 사진, 다른 로고가 이 안으로 들어오지 않게 해 주세요.

마크만	화면 16px 이상 · 인쇄 6mm 이상
가로 로고	화면 높이 24px 이상 · 인쇄 높이 8mm 이상
세로 로고	화면 폭 64px 이상 · 인쇄 폭 20mm 이상

작게 쓸 때는 조금 두껍게 판을 고르세요. 테두리가 덜 흐려집니다.

06서체 가이드 — 쿠벤체

쿠벤도시락 전용 글꼴입니다. 로고와 제목, 메뉴판, 전단처럼 크게 보이는 글자에 씁니다. 굵기는 글꼴 이름에서 고르세요(프로그램의 '굵게(B)' 버튼은 글자를 억지로 부풀려 모양이 뭉개집니다).

쿠벤체 (기본) — 힘 있고 둥근 고딕

쿠벤체 보통프리미엄 일식 도시락 KU·BEN 13,500원

쿠벤체 굵게프리미엄 일식 도시락 KU·BEN 13,500원

쿠벤체 아주굵게프리미엄 일식 도시락 KU·BEN 13,500원

쿠벤체 정찬 — 단정한 명조

정찬 가늘게한 상의 격, 수백 자리에 Premium Bento

정찬 보통한 상의 격, 수백 자리에 Premium Bento

정찬 굵게한 상의 격, 수백 자리에 Premium Bento

정찬 아주굵게한 상의 격, 수백 자리에 Premium Bento

어디에 무엇을 쓰나

쓰임	글꼴 · 굵기	예
로고 · 큰 제목	쿠벤체 아주굵게 / 굵게	단체 도시락 주문
소제목 · 메뉴 이름	쿠벤체 굵게 / 보통	연어 데리야끼 정식
가격 · 숫자 · 전화	쿠벤체 굵게 (영문·숫자가 함께 다듬어져 있음)	13,500원 · 02-555-0676
정찬 상자 · 띠지 · 인사말	쿠벤체 정찬 보통 / 굵게	정성을 담은 한 상
긴 본문 · 안내문	프리텐다드 (본문용 글꼴, 따로 설치)	매일 아침 매장에서 직접 조리합니다.

간격

제목은 자간 0 ~ -1%, 줄 간격 1.2 ~ 1.3배. 본문은 줄 간격 1.6배 정도로 넉넉하게.

하지 않기

글자를 좁히거나 늘이기(장평 바꾸기), 기울이기, '굵게(B)' 버튼, 쿠벤체로 긴 본문 쓰기.

글자 수

일상 한글(KS 완성형 2,350자 포함) 약 2,600 ~ 2,800자가 들어 있습니다. 아주 드문 글자는 빈칸으로 나올 수 있습니다.

PC에 설치하기 (Windows)

아래 쿠벤체 글꼴을 내려받아 압축을 풉니다.
1_PC설치용 폴더의 파일 7개를 모두 고르고(Ctrl + A) 마우스 오른쪽 → 설치.
파워포인트·한글·워드를 다시 켜면 글꼴 목록에 쿠벤체 굵게, 쿠벤체 정찬 보통 같은 이름으로 나옵니다.

홈페이지에 쓰기

@font-face { font-family: "KubenChe"; font-weight: 700;
  src: url("/fonts/KubenChe-Bold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "KubenChe"; font-weight: 800;
  src: url("/fonts/KubenChe-Heavy.woff2") format("woff2"); font-display: swap; }
h1, h2, .menu-name { font-family: "KubenChe", "Pretendard", sans-serif; }

사용 조건: SIL 오픈 폰트 라이선스. 회사 안에서 쓰기, 로고·인쇄물·홈페이지에 쓰기는 상업용이라도 자유이고, 글꼴 파일만 따로 파는 것은 안 됩니다. 한글은 검은고딕·함렛, 영문·숫자는 League Spartan·함렛을 바탕으로 다듬었습니다.

07파비콘과 앱 아이콘

16px

32px

48px

앱 아이콘은 두 가지로 나눠 씁니다. 손님이 보는 홈페이지는 흰 바탕(베이지 테두리 마크), 가맹점이 쓰는 내부용 쿠벤오더는 검정 바탕(흰 테두리 · 안쪽 투명 · 원래 색 네 조각)입니다. 휴대폰 홈 화면에서 두 앱이 바로 구분되도록 서로 섞어 쓰지 않습니다. 쿠벤오더 아이콘 파일은 3_파비콘\쿠벤오더_앱아이콘에 있습니다.

파비콘은 마크를 그대로, 조금 두껍게 판으로 씁니다. 작다고 조각을 키우거나 모양을 바꾸지 않습니다. 홈페이지에는 아래 네 줄을 모든 페이지 <head> 안에 넣습니다.

<link rel="icon" href="/favicon.ico" sizes="48x48">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">

08로딩 움직임

쿠벤오더 V2와 같은 움직임입니다. 네 조각이 모양과 기울기를 그대로 둔 채 시계 방향으로 한 칸씩 자리를 옮기며 돕니다(왼쪽 위 → 오른쪽 위 → 오른쪽 아래 → 왼쪽 아래). 칸마다 부드럽게 출발하고 멈추며, 한 바퀴 1.8초. 테두리는 움직이지 않습니다.

계속 돌기 — 불러오는 동안

테두리 없음계속 돌기

베이지 테두리 안계속 돌기

검정 테두리 안계속 돌기

흰색 테두리 안계속 돌기

전부 흰색계속 돌기

3바퀴 돌고 멈춤 — 첫 화면에 들어올 때, 앱이 켜질 때

테두리 없음3바퀴 돌고 멈춤

베이지 테두리 안3바퀴 돌고 멈춤

검정 테두리 안3바퀴 돌고 멈춤

흰색 테두리 안3바퀴 돌고 멈춤

전부 흰색3바퀴 돌고 멈춤

09이렇게 쓰지 마세요

흰색 테두리에 흰 안쪽 채우기 (투명으로)

조각과 같은 색 바탕에 원래 색 그대로 (→ 전부 흰색으로)

늘이거나 눌러서 비율 바꾸기

조각 색 바꾸거나 자리 바꾸기

조각 기울기 바꾸기 (반듯하게 등)

정하지 않은 색의 테두리

흰색·밝은·검정 바탕에 그림자, 테두리만 그림자, 외곽선 같은 효과 (그림자 A는 사진·영상·색 바탕에서만)

복잡한 무늬 위에 바로 올리기

그리고 무엇보다, 테두리나 조각을 매끈한 선과 도형으로 다시 그리지 않습니다.

10다운로드

이 문서와 같은 폴더(01_시안\1_CI가이드)에 모든 파일이 있습니다. 업체에 보낼 때는 SVG 또는 PNG를 보내세요.

전체 묶음마크 · 로고 조합 · 파비콘 · 로딩 · 쿠벤체 글꼴 · PDF 가이드북 모두
이 폴더 전체
PDF 가이드북인쇄·업체 전달용 (A4 11쪽)
열기
마크원본두께·조금두껍게 × 베이지·검정·흰색 테두리, 테두리없음 (SVG·PNG)
폴더 열기
로고 조합가로·시그니처·세로 × 밝은·어두운 바탕, KU·BEN 가운데 점 응용 (SVG·PNG)
폴더 열기
파비콘·앱 아이콘favicon.ico·svg·png, 홈 화면 아이콘(홈페이지 흰 바탕 · 쿠벤오더 검정 바탕), site.webmanifest, head 코드
폴더 열기
로딩 움직임4가지 테두리 × 계속 돌기·3바퀴 멈춤 (움직이는 SVG·GIF)
폴더 열기
쿠벤체 글꼴쿠벤체 3종 + 정찬 4종 (PC 설치용 TTF, 홈페이지용 WOFF2, 설치 방법, 라이선스)
폴더 열기
그림자 A (사진·영상 위)전부 흰색 마크·로고에 그림자 A를 넣은 PNG, 사용법
폴더 열기