BOTARI · BRAND IDENTITY
각자의 가능성을 담아,
서로의 일상으로.
나만의 이야기, 직접 만든 것, 누군가에게 필요한 물건.
보따리는 각자의 작은 가능성이 사람과 사람 사이를 오가는 곳입니다.
01 / OUR STORY
작은 보따리 하나에,
저마다의 세계가 있어요.
보따리는 소중한 것을 담아 옮기고, 필요한 순간 펼쳐 나누는 친숙한 이름입니다. 우리는 이 이름에 각자의 취향과 재능, 이야기가 오가는 공간의 마음을 담았습니다.
누군가는 직접 만든 도구를, 누군가는 한 장의 그림을, 누군가는 일상의 물건을 꺼내 놓습니다. 거창한 시작보다 자기다운 시작을, 일방적인 전달보다 사람 사이의 연결을 응원합니다.
01 / 담다
나만의 것을 담아요.
그림과 글, 영상과 도구, 일상에 필요한 물건까지. 각자가 가진 고유한 것을 소중하게 다룹니다.
02 / 펼치다
누구나 자기답게 펼쳐요.
작은 시작도 나만의 공간에서. 각자의 이름과 개성을 가진 보따리를 만들어 갑니다.
03 / 잇다
필요한 사람에게 이어져요.
만드는 사람과 사용하는 사람, 발견하는 즐거움과 나누는 마음이 자연스럽게 연결됩니다.
02 / LOGO
둥글게 다가가고,
분명하게 기억됩니다.
보따리의 워드마크는 둥근 획과 열린 인상으로 친근함을 전합니다. 화면에서 사용하는 로고는 운영 중인 원본 파일의 형태와 색상을 그대로 유지합니다.
밝고 단순한 배경에 원본 로고를 놓아 주세요. 가로세로 비율을 유지하고, 글자와 주변 요소가 맞닿지 않도록 충분한 여백을 확보합니다. 로고 글자를 다른 폰트로 다시 조합하지 않습니다.
03 / COLOR SYSTEM
색을 늘리기보다,
쓰임을 정교하게.
보따리의 코랄은 기억에 남는 첫인상입니다. 실제 화면에서는 바탕, 표면, 글자, 행동, 상태를 구분해 사용합니다. 같은 역할은 라이트와 다크에서도 같은 의미를 유지하고, 화면에 맞춰 색의 밝기를 조정합니다.
적용 범위 · 아래는 보따리를 위한 컬러 시스템 제안입니다. 이 BI 페이지에서 조합과 대비를 확인할 수 있으며, 사이트 전체의 운영 색상이나 로고 원본을 일괄 변경한 것은 아닙니다.
A / BRAND ANCHOR
기억되는 색과, 읽히는 색을 구분합니다.
대표 코랄 #F8384B 위 흰 글씨는 3.71:1, 짙은 코랄 #D41F34 위 흰 글씨는 5.19:1입니다. 로고와 일반 본문·버튼은 서로 다른 대비 조건으로 다룹니다.
B / TONAL SCALE
하나의 코랄을, 필요한 농도로.
50
#FFF1F3
100
#FFE4E8
200
#FFC6CE
300
#FF9DAB
400
#FF6E82
500
#F8384B
600
#D41F34
700
#AC1830
800
#84162A
900
#58101E
50–200은 은은한 배경과 선택 영역, 500은 브랜드 포인트, 600–800은 행동과 강조에 사용합니다. 숫자만으로 글자색을 결정하지 않고 실제 배경과의 대비를 계산합니다. 이 단계는 보따리를 위해 정한 시안이며 Material 알고리즘으로 생성한 팔레트는 아닙니다.
C / SEMANTIC ROLES
이름이 역할을 말하게 합니다.
| 역할 | Light | Dark | 사용 위치 |
|---|---|---|---|
| Canvas / 전체 바탕 | #F7F8FA | #111216 | 화면을 받치는 가장 바깥 레이어 |
| Surface / 카드 바탕 | #FFFFFF | #1C1F26 | 내용을 담는 기본 표면 |
| Raised / 한 단계 위 | #F0F2F5 | #262B35 | 선택 영역·보조 카드의 높이 차이 |
| Text / 기본 글자 | #212529 | #F5F6F8 | 제목과 핵심 본문 |
| Text secondary / 설명 | #5F636B | #B5BCC7 | 읽어야 하는 보조 설명 |
| Border subtle / 구분선 | #D9DDE3 | #3A424F | 장식적 구획용 · 입력 경계는 별도 대비 확인 |
| Action / 주요 행동 | #D41F34 | #FF7A8B | 짧고 분명한 주요 버튼 |
| On action / 버튼 글자 | #FFFFFF | #2B0910 | 행동색과 한 쌍으로 사용 |
| Action hover / 올렸을 때 | #AC1830 | #FF94A2 | 역할은 유지하며 상태만 변화 |
예를 들어 주요 버튼은 화면마다 다른 빨강을 직접 고르는 대신 Action과 On action을 함께 사용합니다. 테마가 바뀌어도 주요 행동이라는 의미는 유지됩니다.
D / LIGHT & DARK
같은 내용, 서로 다른 빛.
LIGHT / 밝고 편안하게
일상에 필요한 것,
나답게 고르는 즐거움.
내용은 편안하게 읽히고, 다음 행동은 분명하게 보이도록.
MARU DIGITAL
Mac용 배경화면 모음
5K 이미지 4종 · 나만의 화면을 위한 작은 변화
1,000 크레딧
✓ 디지털 다운로드
DARK / 빛을 낮추고 또렷하게
일상에 필요한 것,
나답게 고르는 즐거움.
내용은 편안하게 읽히고, 다음 행동은 분명하게 보이도록.
MARU DIGITAL
Mac용 배경화면 모음
5K 이미지 4종 · 나만의 화면을 위한 작은 변화
1,000 크레딧
✓ 디지털 다운로드
정적 사용 예시입니다. 다크는 밝은 화면을 단순 반전하지 않고 바탕보다 카드를 조금 밝게 올립니다. 글자와 버튼도 테마에 맞는 짝으로 바꿉니다.
E / STATUS
브랜드와 상태는 다른 언어입니다.
✓ 성공
완료되었어요.
#176B45 / #EAF7EF
ⓘ 안내
확인할 내용이 있어요.
#2458B6 / #EEF4FF
! 주의
진행 전에 확인해 주세요.
#885A00 / #FFF5D6
× 오류
문제가 있어요. 다시 확인해 주세요.
#B42335 / #FFF0F2
코랄은 보따리의 정체성, 상태색은 성공·안내·주의·오류의 의미를 전달합니다. 상태를 색만으로 알리지 않고 아이콘과 문구를 함께 표시합니다. 연한 구분선은 장식용이며, 입력 경계·포커스 같은 필수 표시는 별도 대비를 확인합니다.
F / CONTRAST CHECK
예쁘게 보이는 것에서, 읽히는 것까지.
| 조합 | 글자 / 배경 | 계산한 대비 | 일반 글자 4.5:1 |
|---|---|---|---|
| 라이트 주요 버튼 | #FFFFFF / #D41F34 | 5.19:1 | 충족 |
| 다크 주요 버튼 | #2B0910 / #FF7A8B | 7.32:1 | 충족 |
| 라이트 설명 | #5F636B / #FFFFFF | 6.03:1 | 충족 |
| 다크 설명 | #B5BCC7 / #1C1F26 | 8.63:1 | 충족 |
| 성공 | #176B45 / #EAF7EF | 5.91:1 | 충족 |
| 안내 | #2458B6 / #EEF4FF | 6.04:1 | 충족 |
| 주의 | #885A00 / #FFF5D6 | 5.50:1 | 충족 |
| 오류 | #B42335 / #FFF0F2 | 5.88:1 | 충족 |
WCAG 2.2 AA의 일반 글자는 최소 4.5:1, 큰 글자는 최소 3:1을 기준으로 확인합니다. 위 수치는 해당 색상쌍의 계산 결과이며, 페이지 전체의 접근성 인증이나 모든 상태·크기에 대한 검증을 뜻하지 않습니다.
참고한 디자인 시스템
Apple HIG ↗
색의 일관된 의미, 플랫폼·환경에 맞는 사용 원칙을 참고했습니다.
IBM Carbon ↗
역할별 토큰과 라이트·다크 레이어 구분을 참고했습니다.
Google Material 3 ↗
배경 역할과 그 위에 놓이는 글자색을 짝지어 관리하는 방식을 참고했습니다.
W3C WCAG 2.2 ↗
글자와 배경의 대비 기준을 확인했습니다.
공식 문서의 원칙을 참고한 보따리용 구성입니다. 각 회사의 팔레트나 제품 디자인을 그대로 적용한 것이 아닙니다.
04 / VOICE
친근하게 말하고,
필요한 것은 정확하게.
보따리는 사용자를 재촉하기보다 다음 행동을 편안하게 알려 줍니다. 쉬운 말과 구체적인 안내를 사용하고, 결제·배송·개인정보처럼 중요한 내용은 모호하게 표현하지 않습니다.
환영할 때
“당신의 보따리에는 어떤 이야기가 있나요?”
안내할 때
“사진을 올리고, 어떤 물건인지 알려 주세요.”
기다려야 할 때
“지금은 준비 중이에요. 이용할 수 있게 되면 이곳에서 안내할게요.”
05 / USE WITH CARE
보따리답게,
함께 지켜 주세요.
- 로고는 원본 비율과 기본 색상을 유지합니다. 임의로 늘이거나 기울이거나 효과를 덧붙이지 않습니다.
- 복잡한 사진과 비슷한 색상 위에 로고를 바로 올리지 않습니다. 단순한 바탕과 충분한 여백을 먼저 확보합니다.
- 중요한 글자는 배경과 충분히 대비되도록 합니다. 색상만으로 상태나 의미를 구별하지 않습니다.
- 일반 콘텐츠에는 읽기 쉬운 본문 서체를 사용합니다. 로고는 폰트로 대체하지 않고 원본 파일을 사용합니다.
- 보따리의 이름과 로고를 제3자의 상품·상호·서비스를 보증하는 것처럼 사용하지 않습니다.
담고, 펼치고, 연결하는 즐거움.
보따리의 브랜드를 소개하거나 협업에 활용하려면 홈페이지 하단의 고객센터로 문의해 주세요. 사용 목적과 매체를 함께 알려 주시면 확인에 도움이 됩니다.