1. 브랜드 소개
어서 오세요! 김공장에 놀러 온 걸 환영해요.
밥할아버지와 김아저씨의 김공장에 놀러 가는 하루. 바다에서 온 김을 굽고, 함께 만들고, 우리 집 밥상으로 가져가요.
김을 자주 찾는 아이의 밥상에, 간편하게 고르는 김과 나물 풍미를 더하는 밥엔김.
이름의 뜻
밥엔김은 Bob & Gim, 밥할아버지(Mr. Bob)와 김아저씨(Mr. Gim)의 이름이에요. 가운데 &(엔)는 김공장에서 김을 만드는 동그리 친구들이 맡고 있어요. 동그리는 한 명이 아니라 여러 명이에요.
'밥엔김 김공장'은 김을 굽는 김공장과 김을 직접 굽고 만들어 보는 체험장을 함께 부르는 이름이에요. 운영은 씨위드아트스튜디오가 맡고 있어요.
우리가 고객에게 드리는 것
2. 로고와 캐릭터
로고는 원래 모습 그대로 써 주세요.
로고
빨간 'yummy 밥엔김 Since 1992' 로고 하나를 써요. 색과 가로세로 비율은 바꾸지 않아요. 새 로고를 따로 만들어 대신 쓰지 않아요.
여백: 로고 높이의 1/4 이상 비워 두기(점선 안에는 다른 것을 두지 않아요)
최소 크기: 화면에서 높이 32px. 더 작으면 'Since 1992'를 읽기 어려워요
바탕: 크림(#FFF8E8)이나 흰색 위에 두기. 초록 바탕에서는 크림색 판 위에 올려요
이렇게 쓰지 않아요
색 바꾸기
늘이거나 줄여 비율 바꾸기
그림자, 빛 효과 더하기
복잡한 그림 위에 바로 올리기
충남 보령의 밥엔김 김공장에
놀러 오세요.
'밥엔김 김공장'은 문장 속 글자로 쓰기
김공장로고에 글자를 붙여 새 로고처럼 만들기
캐릭터: 이야기의 안내자
세 캐릭터는 방문자를 김공장 곳곳으로 안내해요. 네모난 상자에 가두지 않고 배경 위에 자연스럽게 세우며, 글자나 버튼을 가리지 않게 둬요. 비율을 늘이거나 찌그러뜨리지 않고, 마구 돌리지 않아요.
밥할아버지 Mr. Bob
보슬보슬 하얀 수염. 늘 웃고 있지만 속은 꼼꼼한 완벽주의자예요.
환영 인사, 예약 안내 옆김아저씨 Mr. Gim
김 머리를 한, 늘 웃는 얼굴. 가장 좋아하는 음식은 김밥이에요.
체험 설명, 이용 안내 옆
동그리들 &
여러 명이에요. 김공장에서 실제로 김을 만드는 일을 하는 친구들이에요.
소식, 제품·선물 소개 옆밥엔나물의 캐릭터 짝
밥엔나물 김자반은 맛마다 캐릭터가 정해져 있어요. 소개할 때 짝을 바꾸지 않아요.
밥할아버지
김아저씨
동그리
3. 색
크림은 밥, 초록은 김이에요.
크림과 짙은 초록이 중심이에요. 버터옐로, 오렌지, 파랑은 그림 속 색과 이어지는 보조색으로 조금씩만 써요. 로고 빨강은 로고에만 써요.
#FFF8E8기본 바탕
#075438제목, 주요 버튼, 체험 구역 바탕
#18291F본문 글자, 윤곽선
#F6D36B보조 버튼, 초록 위 제목
#FCEDB8제품·선물 구역 바탕
#EE8A2A그림 그림자, 키보드 포커스
#2E63A8날짜 같은 작은 강조
#4A5A4F설명, 캡션
#C0182C로고 전용
조합과 읽기 쉬움
글자와 바탕의 명암 대비는 4.5 : 1 이상(웹 접근성 AA 기준)을 지켜요.
| 예시 | 글자 / 바탕 | 대비 | 쓰는 곳 |
|---|---|---|---|
| 본문 글자 | 먹색 / 크림 | 14.4 : 1 | 본문 |
| 구역 제목 | 초록 / 크림 | 8.5 : 1 | 제목 |
| 체험 알아보기 | 크림 / 초록 | 8.5 : 1 | 주요 버튼 |
| 우리 이야기 | 먹색 / 버터옐로 | 10.5 : 1 | 보조 버튼 |
| 손으로 만드는 즐거움 | 버터옐로 / 초록 | 6.2 : 1 | 초록 구역 제목 |
| 설명 글자 | 보조 글자 / 크림 | 6.9 : 1 | 설명, 캡션 |
4. 글꼴
제목은 동글동글 힘 있게!
제목: 주아 (Jua)
바삭한 김,
즐거운 하루.
동글동글하고 힘 있는 제목용 글꼴. 굵은 윤곽선 그림과 어울려요.
본문: 고운돋움 (Gowun Dodum)
바다에서 온 김이 김공장에 도착했어요. 이제 직접 굽고 만들어 볼 차례예요.
부드럽고 읽기 편한 본문용 글꼴.
두 글꼴 모두 Google Fonts에서 무료로 쓸 수 있는 SIL 오픈 폰트 라이선스 서체예요. 불러오지 못하면 기기의 기본 고딕체로 보여요.
크기 계층
- 본문 줄 간격은 글자 크기의 1.75배, 한 줄은 40자 안팎.
- 한국어는 단어 중간에서 줄을 바꾸지 않아요. 주소 번지(예: 266-33)도 한 덩어리로 둬요.
- 제목 안에서 한 단어만 다른 색으로 강조하지 않아요.
5. 그림과 사진
그림은 크게, 진짜와 상상은 구분해서!
- 그림이 주인공: 큰 장면 그림을 화면 가로 전체로 써요. 작은 썸네일이나 똑같은 카드 반복으로 그림을 소비하지 않아요.
- 상상도라고 밝히기: 장면 그림 속 건물과 공간은 브랜드를 상상해 그린 일러스트예요. 실제 시설 사진처럼 설명하지 않고, "그림은 상상해 그린 일러스트예요" 같은 안내를 함께 둬요.
- 제품은 실제 포장으로: 판매 제품을 소개할 때는 실제 포장 이미지만 써요. 그림 속 포장은 콘셉트라서, 그림 옆에 "실제 제품 포장과 달라요"라고 적어요.
- 글자는 HTML로: 제목과 버튼을 그림 안에 합성하지 않아요. 그림의 빈 여백 위나 그림 위아래에 따로 써요.
잘라 쓰는 법
얼굴, 머리, 손, 체험 도구가 잘리지 않게 그림마다 보여 줄 위치를 따로 정해요.
- PC: 넓게 채우되 하늘이나 바닥 쪽만 조금 잘라요.
- 휴대폰: 가로 그림을 억지로 키우지 않아요. 제목은 그림 위나 아래로 따로 빼요.
- 정사각형 체험 그림은 자르지 않고 장면 전체를 보여 줘요.
- 비율을 늘이거나 찌그러뜨리지 않아요.
대체 텍스트
화면 읽기 기능을 쓰는 분을 위해, 그림마다 무엇이 보이는지 한 문장으로 적어요. 일러스트는 "일러스트"라고 밝혀요. 장식용으로 반복되는 캐릭터는 비워 둬요.
| 그림 | 대체 텍스트 예시 |
|---|---|
| 첫 장면 | 바닷가 언덕의 초록 지붕 김공장 앞에서 김아저씨와 밥할아버지가 손을 흔들고, 동그리가 김 상자를 들고 걸어오는 일러스트 |
| 김구이 체험 | 김아저씨가 집게로 김을 들어 전기 구이판에 굽고, 밥할아버지와 동그리가 옆에서 지켜보는 일러스트 |
| 실제 제품 | 빨간 체크 포장의 밥엔김 갓구운곱창김과 구운 김 |
이 가이드의 그림과 사진 출처: 밥엔김이 보유한 브랜드 일러스트, 로고, 제품 포장 이미지.
6. 말투
있는 그대로, 다정하게 말해요.
김공장 사람이 손님을 맞이하듯 다정하고 쉬운 말로 써요. 이야기는 즐겁게 하되, 정보는 확인된 것만 담백하게 적어요.
- 놀러오세요, 함께 만들어 봐요
- 바삭한, 고소한
- 직접 굽는, 원료 그대로
- 밥에 곁들이는
- 영양을 완성한다, 편식이 해결된다
- 더 건강하다, 아이들이 더 잘 먹는다
- 최고, 유일, 최상급
- 확인되지 않은 산지, 역사, 효과
예시
| 자리 | 이렇게 | 이렇게 쓰지 않아요 |
|---|---|---|
| 장면 제목 | 이제, 함께 만들어볼까요? | 차원이 다른 프리미엄 김 체험! |
| 설명 | 김공장의 김을 직접 구워 봐요. 고소한 냄새를 맡으며 한 장씩 바삭하게 구워 냅니다. | 최고의 장인이 만든 최상급 김으로 특별한 경험을! |
| 캐릭터 말풍선 | 어서 오세요! 오늘은 김공장에 놀러 가는 날이에요. | 지금 바로 예약하지 않으면 마감! |
| 버튼 | 체험 알아보기 / 우리 이야기 / 네이버에서 예약하기 / 스마트스토어에서 보기 | 클릭 / 자세히 → / 지금 예약 완료 |
버튼은 누르면 실제로 일어나는 일을 이름으로 써요. '네이버에서 예약하기'는 네이버 예약 페이지를, '스마트스토어에서 보기'는 판매 페이지를 새 창으로 열어요.
7. 화면 구성
스크롤하면 하루가 흘러가요.
방향: 김공장에 놀러 가는 하루. 큰 그림과 이야기가 화면 전체를 채우고, 스크롤하면 바다에서 김공장으로, 체험에서 식탁으로 이어져요.
- 김공장에 도착
화면 대부분을 채우는 김공장 그림. 왼쪽 위 여백에 제목과 버튼 두 개 - 바다에서 시작
밥할아버지가 말풍선으로 맞이하고, 아래에 넓은 바다 그림 - 김공장 안으로
작업대 그림을 크게, 왼쪽 여백에 "이제, 함께 만들어볼까요?" - 손으로 만드는 즐거움
초록 바탕 위에 큰 체험 그림과 설명을 좌우로 번갈아. 김아저씨가 이용 안내판 옆에 - 함께라서 더 즐거운
단체 체험 그림을 가로 전체로, '단체 체험 문의' 버튼 - 즐거움을 집으로
선물 그림과 실제 판매 제품 목록. 동그리가 다음 장면으로 달려가요 - 다시 만나요
위쪽 여백에 오시는 길과 예약 방법, 아래에 소풍 그림
첫 화면 예시
구성 요소
버튼: 굵은 먹색 윤곽선과 아래 그림자
주요 버튼은 초록, 함께 놓는 버튼은 버터옐로. 누르면 아래로 눌려요. (예시 버튼은 아무 곳으로도 이동하지 않아요.)
장면 사이: 완만한 곡선
크림 장면에서 초록 장면으로 넘어갈 때 곡선으로 이어요. 장면마다 같은 템플릿을 반복하지 않아요.
안내판
- 쓰는 곳
- 이용 안내, 예약 방법
- 모양
- 크림 바탕, 굵은 윤곽선, 초록 그림자
휴대폰 원칙
- 메뉴는 버터옐로 버튼으로 열고 닫아요. Esc 키나 메뉴 링크를 누르면 닫혀요.
- 가로 그림 위에 글을 겹치지 않고, 제목을 그림 위나 아래로 분리해요.
- 캐릭터는 얼굴부터 발끝까지 보이게 하고, 화면 밖으로 튀어나가 가로 스크롤이 생기지 않게 해요.
- 버튼은 높이 44px 이상, 두 개를 나란히 둘 때는 같은 너비로 해요.
8. 움직임과 접근성
차분하게, 딱 한 번만 움직여요.
움직임은 장면을 알아차리게 돕는 만큼만 써요. 계속 튀거나 반복되는 효과, 과한 시차 스크롤(패럴랙스), 강제 스크롤은 쓰지 않아요.
캐릭터는 화면에 들어올 때 한 번, 살짝 기울었다가 바로 서요.
| 움직임 | 위치 | 시작 조건 | 멈춤 | 동작 줄이기 켬 |
|---|---|---|---|---|
| 제목·설명·버튼이 차례로 떠오름 (자동) | 첫 장면 | 페이지를 열 때 한 번, 약 0.8초 | 반복 없음 | 이동 없이 서서히 나타남 |
| 글 묶음이 아래에서 떠오름 (자동) | 각 장면 | 화면에 4분의 1쯤 들어왔을 때 한 번 | 반복 없음 | 이동 없이 서서히 나타남 |
| 캐릭터가 기울었다 바로 섬 (자동) | 밥할아버지, 김아저씨, 동그리 | 화면에 들어왔을 때 한 번 | 반복 없음 | 기울기·이동 없음 |
| 버튼 눌림 (조작) | 모든 버튼 | 누를 때 | 손을 떼면 돌아옴 | 그대로 (3px 이내) |
| 메뉴 열고 닫기 (조작) | 휴대폰 머리글 | 메뉴 버튼을 누를 때 | 다시 누르거나 Esc | 그대로 |
모두가 쓸 수 있게
- 동작 줄이기: 기기에서 '동작 줄이기'를 켜면 이동하고 기우는 움직임을 끄고, 서서히 나타나기만 남겨요.
- 소리: 음악이나 소리 나는 영상을 저절로 틀지 않아요.
- 키보드: Tab 키로 메뉴와 버튼을 차례로 옮겨 다니고, 선택된 곳에는 오렌지색 테두리가 보여요.
- 본문으로 건너뛰기: 페이지 맨 앞에 링크를 둬요.
- 그림 설명: 모든 그림에 대체 텍스트를 달아요.
- 불러오기: 첫 장면 그림만 먼저 불러오고, 나머지는 화면에 가까워질 때 불러와요.