Design guide · NYC Social Impact Design Hackathon
Black bag.
Your stickers.
이사하는 아이에게 건네는 스티커 가방 스타터 키트, Black Bag의 디자인 시스템. 로고·색·타이포·스티커 가방·키트 구성·웹 UI 방향·사용 규칙을 한 곳에 모았다.
스폰서 이름과 마크는 모두 가상이다. 실제 브랜드 로고를 쓰지 않았고, 기프트카드 금액·실제 후원사·상표는 정해지지 않았다.
1 · Brand
Name, logo, principles
이름은 Black Bag — 검정 가방이 중심이고, 색은 아이의 스티커가 만든다. 옛 Pocket Room 로고(바깥 로고 금지 원칙)는 폐기했다.
검정 가방, 내 스티커
몸체는 언제나 검정. 색은 스티커가 만든다. 스폰서 스티커도 아이 스티커와 같은 크기·같은 흰 테두리로 섞여 ‘꾸미기’로 읽힌다.
낙인 없는 바깥
가방 바깥에는 쉘터·단체명도, ‘도움받는 아이’를 알리는 문구도 없다. Black Bag 로고는 안감 라벨과 웹·덱에만 쓴다.
아이가 고른다
아이가 고르는 것은 둘 — 빈 스티커 슬롯, 선택 티켓. 선택이 있어야 ‘받는 물건’이 아니라 ‘내 물건’이 된다.
어른은 차분하게, 아이는 쉽게
화면을 쓰는 사람은 어른, 물건을 받는 사람은 아이. 같은 흐름 안에서 톤만 바꾼다.
2 · Color & type
Tokens
색 8종과 서체는 design/brand/tokens.css를 그대로 쓰고, 스티커 가방·웹 두 톤 값만 design/blackbag/tokens.css가 더한다. 이 페이지의 색 칩은 토큰 파일에서 읽어 만든다.
- ink#23253A
- paper#FBF5EA
- oat#EFE3CC
- persimmon#C04522
- sun#F4B53F
- teal#22706B
- dusk#5462B8
- sky#A9D3DF
Display · Bricolage Grotesque 800
Moving day, made lighter.
제목·로고 느낌. 한글은 Noto Sans KR로 이어진다.
Body · Atkinson Hyperlegible Next 400/700
Answer together with the child. 아이와 함께 고르세요 — 읽기 쉬운 본문.
어른 화면 17–18px, 아이 화면 24px 이상(700).
| 토큰 | 값 | 쓰임 |
|---|---|---|
--bag-body | #23253A | 가방 몸체(ink). 스폰서도 바꿀 수 없다 |
--bag-body-2 / -3 | #2F3252 · #41456B | 주머니 / 손잡이·지퍼·재봉선 |
--sticker-edge | #FBF5EA | 스티커 흰 테두리 (7px @640) |
--kid-bg | sun | 아이 화면 바탕 |
--tap-adult / --tap-kid | 48px / 96px | 터치 영역 최소 높이 |
| radius | 8 · 16 · 28px | sm · md(어른) · lg(아이 카드) |
3 · Sticker bag
Sponsor slots, not logos
몸체는 검정, 스폰서 스티커 5장은 아이 스티커·장식 6장과 같은 크기·같은 흰 테두리로 섞인다. 점선 빈 슬롯은 아이가 자기 스티커를 붙이는 자리다.
4 · Kit
Eight things in one bag
이사하는 날 건네는 구성품 8종. 모양은 같고 내용만 옵션별로 바뀐다. 단체는 옵션 박스를 미리 채워 두므로 접수 때는 박스 라벨만 확인하면 된다.
- 01
Bag
책가방검정 몸체의 롤링 카트 책가방. 크기는 옵션마다 다르다.
- 02
School supplies
학용품학년에 맞는 필기구·노트.
- 03
Gift card
기프트카드문구점에서 아이가 직접 고른다. 금액은 미정.
- 04
Cheer card
선배의 응원 카드이 키트로 자란 어른이 쓴 한 장.
- 05
Kid-to-kid letter
아이들끼리 그림편지받은 아이는 답장 그림을 다음 키트에 넣는다.
- 06
Blank postcard
빈 엽서이전 쉘터의 친구·워커에게. 모든 박스 공통.
- 07
Before-school checklist
학교 가기 전 체크리스트저학년은 그림형, 고학년은 글형.
- 08
Choice tickets
선택 티켓영화관 또는 코니아일랜드 중 아이가 고른다.
Pre-made options — 4 boxes, pick one
학년군 3종 + 취향 1종. 가방은 모두 검정이고 스티커팩과 안의 구성이 다르다. 06 빈 엽서만 모든 박스 공통이다.
| Little Explorer리틀 익스플로러 · 학년군 1–2학년 | Everyday Starter에브리데이 스타터 · 학년군 3–5학년 | Maker & Art메이커 & 아트 · 취향 3–8학년 | Move-Up무브업 · 학년군 6–8학년 | |
|---|---|---|---|---|
| 이런 아이에게 | 학교가 낯선 저학년. 그림·색·스티커로 시작하고 싶은 아이 | 가장 많은 중간 학년. 무난하게 시작하는 표준 세트 | 그리고 만드는 걸 좋아하는 아이. 학년 상관없이 고를 수 있다 | 스스로 챙기고 싶어 하는 고학년. 꾸밈은 덜, 쓸모는 더 |
| 01책가방Bag | 소형 가방 + 동물·별 스티커팩 | 표준 가방 + 우주·번개 스티커팩 | 표준 가방 + 물감·별 스티커팩 | 대형 가방 + 심플 스티커팩 |
| 02학용품School supplies | 굵은 크레용·두꺼운 연필·스티커북 | 연필·노트·색연필·자 | 스케치북·색연필·마커·가위 | 바인더·계산기·형광펜·플래너 |
| 03기프트카드Gift card | 문구점 카드 (그림 안내) | 문구점 카드 | 공예점 카드 (직접 고르기) | 문구점 카드 |
| 04선배의 응원 카드Cheer card | 응원 카드 — 저학년 문구 | 응원 카드 — 중간 학년 문구 | 응원 카드 — 만드는 사람 문구 | 응원 카드 — 고학년 문구 |
| 05아이들끼리 그림편지Kid-to-kid letter | 색칠하는 그림편지 3장 | 그림편지 3장 | 그림편지 5장 (여유분) | 그림편지 3장 |
| 06빈 엽서Blank postcard | 공통 | 공통 | 공통 | 공통 |
| 07학교 가기 전 체크리스트Before-school checklist | 그림형 체크리스트 | 그림+글 체크리스트 | 그림+글 체크리스트 | 글형 체크리스트 |
| 08선택 티켓Choice tickets | 영화관 또는 코니아일랜드 | 영화관 또는 코니아일랜드 | 영화관 또는 코니아일랜드 | 영화관 또는 코니아일랜드 |
옵션 데이터는 design/blackbag/options.json 그대로다. 한 장 비교 시트(PNG) · 구성품 시트(PNG) · 배치도(PNG)
5 · Web UI direction
One flow, two tones
화면을 쓰는 사람은 어른, 물건을 받는 사람은 아이. 같은 흐름 안에서 어른 화면은 차분하게, 아이가 함께 보는 화면은 쉽고 팝하게 바꾼다. 아래 두 화면은 토큰으로 만든 실제 HTML이다.
Adult screen
쉘터 직원·부모 — 신뢰·위계·단순함
Choose a kit for this move
Answer together with the child. Pick the grade range — we suggest from four ready-made kits.
Child screen
아이 — 쉽고 팝하고 직접적으로
- 1Intro어른
- 2Proof어른
- 3Kit어른 + 아이
- 4Sponsors어른
| 어른 화면 | 아이 화면 | |
|---|---|---|
| 누가 보나 | 쉘터 직원·부모 (사용자) | 이사하는 아이 — 어른과 함께 본다 |
| 분위기 | 차분·신뢰. 종이 같은 바탕, 정돈된 정보 | 팝·장난기. 선명한 색, 큰 그림 |
| 배경 / 포인트 | paper 바탕 · persimmon은 행동 버튼에만 | sun·sky·teal 면을 크게 · 카드마다 다른 색 |
| 제목 | Bricolage 800, 32–40px | Bricolage 800, 48–64px, 한 화면에 한 문장 |
| 본문 | Atkinson 17–18px, 한 줄 60자 이하 | Atkinson 700, 24px 이상. 글보다 그림이 먼저 |
| 터치 영역 | 버튼 높이 48px 이상 | 카드·버튼 높이 96px 이상, 간격 20px |
| 모서리 / 선 | radius 16 · 선 2px | radius 28 · 선 4px(ink), 스티커 같은 흰 테두리 |
| 입력 | 학년 구간·상황 선택 (최소) | 그림 카드 하나 고르기 — 이름·나이·성별 입력 없음 |
| 문장 | “Choose a kit for this move.” 설명·절차 | “That one!” 짧고 직접적인 말투, 느낌표 한 번 |
| 피할 것 | 동정·결핍 문구(“도움이 필요한”) | 작은 글씨·긴 문장·경고창·빨간 오류 문구 |
원본 시안 보기 (web-ui-direction.png)
6 · Usage rules
Do & don’t
Black Bag의 약속은 ‘낙인이 아닌 꾸미기’다. 아래 규칙은 시안·덱·웹 어디에나 같게 적용한다.
Do
- 스폰서 스티커는 전체의 절반 이하
가방 한 면의 스티커 11장 중 스폰서는 5장. 아이 스티커·장식과 같은 크기, 같은 흰 테두리로 섞는다.
- 한 곳에 몰지 않는다
스폰서끼리 이어 붙이거나 한 줄로 세우지 않는다. 비스듬히, 겹쳐서.
- 빈 슬롯을 항상 남긴다
점선 슬롯은 아이가 자기 스티커를 붙이는 자리다.
- 가상 브랜드로 표기한다
시안의 스폰서(STRIDE, PENCIL POST, BRIGHT MART, SEASIDE RIDE, MOVIE NIGHT)는 모두 가상이다. 실제 후원사가 정해지면 같은 틀에 마크만 바꾼다.
- 도형 일러스트만 쓴다
아이는 얼굴 없는 도형으로 그린다.
Don’t
- 실제 브랜드를 사칭하지 않는다
실제 기업의 로고·이름·상표를 시안·덱·웹에 쓰지 않는다. 후원 계약이 없는 곳을 후원사처럼 보이게 하지 않는다.
- 실제 아동 얼굴·사진·사례를 쓰지 않는다
아이를 특정할 수 있는 이미지·이름·나이·성별을 화면과 자료에 넣지 않는다.
- 가방 바깥에 쉘터·단체명을 쓰지 않는다
‘도움받는 아이’를 알리는 문구·마크는 가방 바깥 금지. Black Bag 로고는 안감 라벨·웹·덱에만.
- 결핍 이미지를 쓰지 않는다
비·눈물·박스 더미처럼 불쌍함을 파는 장면과 동정 문구(“도움이 필요한”)를 쓰지 않는다.
- 스폰서에게 몸체를 내주지 않는다
스폰서 색은 스티커에만. 가방 몸체·지퍼·바퀴는 언제나 검정 계열이다.
- persimmon 글자를 oat 위에 올리지 않는다
대비 4.02로 기준 미달. sun·sky 면 위 글자는 ink.