브랜드 가이드
더 맛있는 식품을
표현하는 기준
이름은 또렷하게, 설명은 구체적으로.
브랜드와 제품을 같은 기준으로 소개합니다.
1브랜드 소개
제품의 종류와 구성을 이해하는 데서 시작합니다.
더 맛있는 식품은 자사 김·해조류 제품을 판매하는 브랜드입니다. 대표 제품 ‘더 맛있는 김’은 재래도시락김 30봉 묶음으로 소개합니다.
브랜드가 지향하는 약속은 제품 정보를 구체적으로 설명해 선택을 돕는 것입니다. 종류와 구성부터 안내하고, 맛·식감에 관한 표현은 실제 제품 정보가 뒷받침할 때 사용합니다.
2로고와 브랜드명
지금은 브랜드명을 글자로 표시합니다.
별도 그림 로고 대신 ‘더 맛있는 식품’을 사용합니다. 남색 글자 또는 남색 바탕의 흰 글자를 기본으로 하고, 읽기 어려운 효과를 더하지 않습니다.
- 여백
- 글자 크기 1em을 기준으로 사방에 최소 0.5em의 빈 공간을 둡니다. 위 점선은 여백을 보여주는 안내선이며 로고에 포함하지 않습니다.
- 최소 크기
- 웹에서는 18px 이상으로 표시합니다. 넓은 화면의 상단은 22px, 휴대폰은 19px를 기본 예시로 사용합니다.
추후 정식 로고가 마련되면 원본의 색과 비율을 유지하고 별도 규정을 확인합니다. 이 글자 표시는 제품 포장이나 인증 마크를 뜻하지 않습니다.
3색
남색을 중심으로, 노랑은 작은 강조에 사용합니다.
#253E57제목·본문·버튼#EDF3F8전체 바탕#FFFFFF예시 면·반전 글자#E8C85A수량 도형의 강조#CBD8E4구분선·안내선읽기 쉬운 조합
본문은 명암 대비 4.5:1 이상을 기준으로 합니다. 노랑 바탕에 흰 글자를 쓰거나 회청색을 작은 본문 글자색으로 사용하지 않습니다. 색만으로 선택·상태를 구분하지 말고 글자와 형태를 함께 표시합니다.
4글꼴
큰 이름과 편안한 본문으로 읽는 순서를 만듭니다.
기본 글꼴은 기기에 설치된 ‘맑은 고딕’, ‘Malgun Gothic’, 기본 고딕 순으로 사용합니다. 글꼴 파일을 내려받거나 함께 배포하지 않습니다. 다른 기기에서는 기본 고딕으로 표시될 수 있습니다.
더 맛있는 김
설명 제목어떤 구성인지 살펴보세요.
본문더 맛있는 식품이 소개하는 재래도시락김 30봉 묶음 제품입니다. 제품 종류와 구성을 차례로 살펴보세요.
| 역할 | 넓은 화면 | 휴대폰 |
|---|---|---|
| 첫 화면 제품명 | 최대 124px · 굵게 | 56px · 굵게 |
| 제품명 아래 설명 제목 | 32px · 보통 | 24px · 보통 |
| 본문 | 17px · 줄 간격 1.8~1.9배 | 16~17px |
| 그림 설명·보조 안내 | 13px 이상 권장 | 13px 이상 권장 |
예시 영역이 좁을 때는 제품명을 더 작게 조정합니다. 이 가이드 안의 제품명 견본은 최대 80px, 화면 구성 예시는 최대 96px입니다. 문장을 억지로 한 줄에 넣거나 가로로 늘이지 않습니다.
5이미지
구성은 도형으로 설명하고, 실제 모습과 구분합니다.
출처: 더 맛있는 식품 브랜드 표현을 위해 직접 제작한 도형.
- 분위기: 단순하고 명확한 형태를 사용합니다. 도형 색으로 맛·품질·원산지를 암시하지 않습니다.
- 잘라 쓰기: 수량을 설명하는 30개 원은 전체가 보이게 둡니다. 일부를 잘라 묶음 수량이 달라 보이지 않게 합니다.
- 실제 사진: 제품과 일치하고 사용할 권한을 확인한 사진만 사용합니다. 포장 글자와 비율을 임의로 바꾸지 않습니다.
- 대체텍스트: 그림의 목적과 실제·예시 구분을 설명합니다. 주변 글자와 완전히 중복되는 장식은 화면 읽기에서 제외할 수 있습니다.
현재 표현은 문자와 설명용 도형을 기준으로 합니다. 다른 제품 사진이나 가상의 포장 이미지를 ‘더 맛있는 김’의 실제 모습으로 사용하지 않습니다.
6말투
쉽게 말하고, 설명할 수 있는 내용만 씁니다.
존댓말로 짧고 구체적으로 설명합니다. ‘더 맛있는’은 브랜드명·제품명의 일부로 사용하며 다른 제품보다 맛있다는 비교 문장으로 확대하지 않습니다.
이렇게 씁니다
- 재래도시락김
- 30봉 묶음
- 제품 구성 살펴보기
근거 없이 쓰지 않습니다
- 누구나 좋아하는 맛
- 최고·최저가·최적의 가격
- 건강에 좋은·인증받은
- 제목 예시
- 더 맛있는 김, 어떤 구성인지 살펴보세요.
- 설명 예시
- ‘더 맛있는 김’은 재래도시락김 30봉으로 구성된 묶음 제품입니다. 소개할 제품의 종류는 재래도시락김이며, 묶음 수량은 30봉입니다.
- 버튼 예시
- 버튼 모양 예시 · 실제 조작은 아래 화면 구성에서 확인할 수 있습니다.
7화면 구성
제품명에서 설명, 구성으로 이어집니다.
중앙의 큰 제품명 다음에 짧은 설명과 주요 버튼을 놓습니다. 첫 화면 구성도는 가운데, 제품 종류와 수량은 양쪽에 두어 제품명 중심의 세로 흐름에 구성 정보를 이어 줍니다. 휴대폰에서는 한 열로 읽고 제품명·설명·버튼이 잘리지 않게 합니다.
더 맛있는 김,어떤 구성인지 살펴보세요.
더 맛있는 식품이 소개하는
재래도시락김 30봉 묶음 제품입니다.
제품 구성 살펴보기
재래도시락김 30봉 묶음입니다.
‘더 맛있는 김’은 재래도시락김 30봉으로 구성된 묶음 제품입니다. 소개할 제품의 종류는 재래도시락김이며, 묶음 수량은 30봉입니다.
구성 설명용 도형 · 실제 제품 사진이 아닙니다.
위 버튼으로 구성 설명을 열고 닫을 수 있습니다. 가격·주문·상담 기능을 뜻하지 않습니다.
- 설명은 왼쪽 정렬, 제품명을 강조하는 첫 화면은 중앙 정렬을 기본으로 합니다.
- 바깥 여백은 휴대폰에서 20px 이상을 기본으로 하되, 가이드 안의 예시처럼 좁은 공간에서는 글자 크기와 안쪽 여백을 함께 조정합니다.
- 구분은 여백과 정보의 역할로 만듭니다. 모든 내용을 같은 카드로 반복하지 않습니다.
- 실제 홈페이지가 마련되기 전에는 작동하는 ‘홈페이지로 돌아가기’ 링크를 넣지 않습니다.
8움직임과 접근성
한 번의 등장, 조작에 대한 짧은 반응.
첫 화면의 구성 그림은 한 번만 짧게 나타납니다. 글을 읽는 동안 계속 움직이거나 자동으로 다음 장면으로 바뀌지 않습니다.
예시가 화면에 들어오면 한 번 나타납니다.
| 종류 | 위치·시작 | 정지·동작 줄이기 |
|---|---|---|
| 자동 등장 | 첫 화면의 구성 그림. 준비됐을 때 0.5초 동안 한 번 등장 | 한 번 끝나면 정지. 동작 줄이기에서는 즉시 표시 |
| 조작 반응 | 구성 설명을 열거나 닫을 때 버튼의 짧은 반응. 설명은 0.2초 등장 | 반복 자동 재생 없음. 동작 줄이기에서는 눌림·이동 생략 |
| 가이드의 등장 예시 | 위 예시가 화면에 들어올 때 한 번. ‘등장 다시보기’는 사용자가 요청할 때만 실행 | 0.5초 뒤 정지. 동작 줄이기에서는 다시보기도 즉시 표시 |
- 동작 줄이기: 기기의 설정을 따릅니다. Windows에서는 설정 → 접근성 → 시각 효과 → 애니메이션 효과에서 조정할 수 있습니다.
- 키보드: Tab으로 링크와 조작 요소를 선택하고 Enter·Space로 버튼과 구성 설명을 조작합니다. 선택 위치는 테두리로 표시합니다.
- 정지: 반복 자동 효과와 슬라이더를 사용하지 않아 따로 멈춰야 하는 장면이 없습니다.
- 읽기: 스크립트가 동작하지 않아도 이 가이드의 본문과 구성 설명을 읽을 수 있도록 기본 내용을 유지합니다.