브랜드 아이디어Brand idea

캐시플랜에는 두 고객이 있습니다. 미션을 올리는 광고주와, 미션을 하고 캐시를 받는 유저입니다.

한 번의 행동이 양쪽에 같은 크기의 가치를 남깁니다. 그래서 캐시플랜의 말과 그림은 "작은 단위가 쌓여 자란다"를 보여 줍니다.

1. ①광고주: 1건 단위로 사는 트래픽
2. ②유저: 미션마다 쌓이는 캐시
3. ③둘을 잇는 것: 새싹 코인

말투Tone of voice

캐시플랜의 말은 짧고, 숫자가 있고, 정직합니다. 한 문장에 한 사실만 담습니다.

"이렇게 쓰지 않아요" 예문은 2026년 10월 운영 화면에 실제로 있던 문장입니다.

끝맺음

해요체. "~돼요", "~빠져요"

숫자

아라비아 숫자와 단위를 붙여서: 80원, 1,000건, 10,000P

쓰지 않음

느낌표 겹치기, 이모지, 과장("가장 쉬운", "무조건")

심볼Our symbol

심볼의 이름은 "새싹 코인"입니다. 두꺼운 코인 고리의 한 조각이 열리고, 그 자리에서 잎이 돋습니다.

고리는 캐시이자 캐시플랜의 C입니다. 잎은 2024년 OG 이미지의 잎에서 왔고, 성장(플랜)을 뜻합니다.

정본 파일

cashplan-symbol.svg

비율

80.6 × 88.6 (약 0.91 : 1)

색

고리 #0C1A14 · 잎 #09CC7C

구성 원리Construction

심볼은 원으로만 만듭니다. 직선은 고리를 여는 두 개의 반지름뿐입니다.

1. ①코인: 반지름 38인 원에서 반지름 17인 원을 뺍니다
2. ②열기: -90°와 -10° 반지름으로 자릅니다
3. ③궤도: 중심에서 42 떨어진 -50° 점
4. ④잎: 반지름 34인 원 두 개를 48 떨어뜨려 겹친 자리

x 단위

고리 두께 21 = 심볼 높이 × 0.237

만든 법

work/symbol.py가 위 수치로 경로를 계산합니다

방향 후보Explored directions

심볼은 세 방향을 그려 보고 하나를 골랐습니다. 기준은 셋입니다. 16px에서 읽히는가, 캐시플랜만의 이야기가 있는가, 지금 쓰는 초록과 잎을 이어 가는가.

A는 세 기준을 모두 넘었습니다. B는 "체크 표시 원"이 흔해 다른 서비스와 헷갈립니다. C는 막대그래프라 분석 도구처럼 보입니다.

고른 안

A 새싹 코인 (탐색 A1~A7 중 A7)

탐색 기록

work/explore.png

워드마크Wordmark

한글 워드마크 "캐시플랜"은 2024년부터 쓴 글자꼴을 그대로 둡니다. 굵고 네모난 획이 이미 알려져 있어서입니다.

영문 "CashPlan"은 해외 문서·앱 스토어·메일 발신 이름에 씁니다. Pretendard 800을 자간 -3.5%로 좁혀 윤곽선으로 만들었습니다.

한글

cashplan-wordmark-ko.svg (77 × 19.4)

영문

cashplan-wordmark-en.svg · Pretendard(SIL OFL 1.1)

규칙

글자를 다시 치지 않고 파일을 씁니다

로고 조합Logo lockups

심볼과 워드마크는 정해진 네 가지 조합으로만 씁니다. 기본은 가로형입니다.

1. ①가로형: 웹 머리, 메일 머리, 문서
2. ②세로형: 정사각 자리, 행사물
3. ③심볼: 앱 아이콘, 파비콘, 프로필
4. ④영문 가로형: 해외·스토어

가로형

심볼 높이 100 : 워드마크 50, 간격 26(약 1.1x), 워드마크 중심 = 코인 중심

허용 배색Logo colour

로고 배색은 아래 넷뿐입니다. 잎은 늘 초록이고, 초록 바탕 위에서만 흰색이 됩니다.

초록(#09CC7C)은 흰 바탕 위에서 대비가 2.11 : 1이라 고리나 글자에 쓰지 않습니다. 잎처럼 면으로만 씁니다.

1. ①흰 바탕 · 먹 고리 · 초록 잎 (기본)
2. ②먹 바탕 · 종이색 고리 · 초록 잎
3. ③초록 바탕 · 먹 고리 · 흰 잎
4. ④한 색: 먹 또는 흰색 (인쇄·도장·워터마크)

여백과 최소 크기Clear space and minimum size

여백의 단위 x는 로고 안에서 잽니다. x = 코인 고리의 두께입니다.

로고 네 변에 1x를 비웁니다. 그 안에는 글자, 선, 다른 로고를 두지 않습니다.

x

고리 두께 = 심볼 높이 × 0.237

여백

네 변 1x

최소 크기

가로형 화면 높이 20px · 인쇄 6mm

더 작으면

심볼만 16px까지, 그 아래는 파비콘 판

앱 아이콘과 파비콘App icon and favicon

앱 아이콘은 먹 바탕에 종이색 고리, 초록 잎입니다. 홈 화면의 밝은 아이콘들 사이에서 어두운 면이 먼저 보입니다.

이벤트·프로모션 기간에만 초록 바탕판을 씁니다. 파비콘은 심볼을 화면의 74%로 키운 판입니다.

모서리

변의 22.37% (iOS 마스크와 같음, 파일은 사각형 원본도 제공)

심볼

높이 = 변의 56%, 코인 중심을 화면 가운데에 맞춤

파일

cashplan-appicon.svg · -green.svg · favicon.svg · PNG 1024/512/180

로고 쓰임Logo usage

로고는 주인공이거나 서명입니다. 둘 중 하나로 정하고, 옆 요소와 같은 크기로 다투게 두지 않습니다.

1. ①주인공: 로고 하나가 면을 채웁니다. 다른 말은 작게.
2. ②서명: 큰 문장이 주인공이고 로고는 아래에 작게.

잘못 쓴 예Logo misuse

로고의 모양과 색을 바꾸지 않습니다. 그라데이션, 외곽선, 그림자, 기울이기는 금지입니다.

잎만 떼어 장식으로 쓰지 않습니다. 잎은 고리와 함께 있을 때만 뜻이 있습니다.

이전과 이후Before and after

바꾼 것은 심볼 하나와 색의 질서입니다. 이름, 한글 글자꼴, 초록은 이어 갑니다.

1. ①이전: 광고주 화면은 검정 글자 로고만, 유저 쪽은 초록 글자 + 잎. 두 얼굴이었습니다.
2. ②이후: 한 심볼 + 같은 글자꼴. 광고주·유저·메일이 같은 얼굴입니다.

대표 색Lead colour

캐시플랜의 대표 색은 캐시 그린 하나입니다. 2024년부터 쓴 #09CC7C를 그대로 잇습니다.

초록은 "돈이 생긴다, 자란다"는 신호입니다. 그래서 아껴 씁니다. 한 화면에서 초록 면은 주 버튼 하나가 기본입니다.

기본 색Core palette

여섯 색으로 모든 화면을 만듭니다. 먹색은 초록기가 도는 검정이라 초록과 붙어도 탁하지 않습니다.

포인트 골드는 유저 앱의 포인트·코인 표시에만 씁니다. 버튼이나 링크에는 쓰지 않습니다.

정본

tokens/cashplan-tokens.json color.brand

회색 단계Neutral scale

회색은 초록기가 살짝 도는 차가운 회색 열한 단계입니다. 크림·베이지 바탕은 쓰지 않습니다.

글자로 쓸 수 있는 회색은 600부터입니다. 500은 입력칸 안내 글자와 꺼진 항목에만 씁니다.

본문 글자

900(17.9 : 1)

보조 글자

600(5.64 : 1)

선

200 · 강한 선 300

라이트와 다크Light and dark tokens

화면은 역할 이름(토큰)으로 색을 씁니다. 같은 이름이 라이트와 다크에서 다른 값을 가집니다.

다크에서는 초록을 한 단계 밝힙니다(#2BDB92). 어두운 바탕에서 같은 무게로 보이게 하려는 것입니다.

CSS

--cp-bg, --cp-text … (cashplan-tokens.css)

본문 대비

4.5 : 1 이상

상태 색Status colours

상태 색은 결과를 알릴 때만 씁니다. 장식으로 쓰지 않습니다.

글자 색과 바탕 색을 짝으로 씁니다. 짝끼리 대비는 4.5 : 1 이상입니다.

성공

승인 · 진행 중 · 적립

주의

검수 대기 · 포인트 부족 예정

위험

반려 · 정지 · 입력 오류

정보

안내 · 새 기능

글자 배색과 대비Text on colour

초록 바탕 위 글자는 먹색입니다. 흰 글자를 올리지 않습니다(2.11 : 1).

흰 글자가 꼭 필요한 초록 버튼은 딥 그린 바탕을 씁니다. 빨간 테두리는 글자로 쓰면 안 되는 짝입니다.

CashPlan Sans= Pretendard Variable

글꼴은 Pretendard 하나입니다. 지금 웹과 앱이 이미 쓰고 있어 바꿀 비용이 없고, 한글과 영문·숫자의 굵기가 고르게 맞습니다.

제목은 800, 소제목 700, 본문 400을 씁니다. 굵기를 셋 넘게 섞지 않습니다.

라이선스

SIL Open Font License 1.1

파일

PretendardVariable.woff2 (45 – 920)

메일

Pretendard → Apple SD Gothic Neo → Malgun Gothic

글자 위계Type hierarchy

크기는 여덟 단계입니다. 한 화면에서 제목과 다음 요소는 두 배 가까이 차이 나게 둡니다.

모바일에서는 display와 h1만 줄입니다. 본문 16px은 줄이지 않습니다.

자간

display −3.5% · 제목 −2.5% · 본문 −1%

줄 높이

제목 1.15 – 1.3 · 본문 1.6

줄바꿈

word-break: keep-all

숫자 표기Numbers

캐시플랜에서 가장 중요한 글자는 숫자입니다. 금액·건수·포인트는 고정폭 숫자(tabular)에 700으로 씁니다.

세 자리마다 쉼표, 단위는 붙여 씁니다. 포인트는 P, 원은 "원"을 씁니다.

CSS

font-variant-numeric: tabular-nums

범위

2026.10.21 – 10.31 (물결 대신 줄표)

간격과 격자Spacing and grid

간격은 4px 단위 열두 단계입니다. 그 밖의 값은 쓰지 않습니다.

섹션 사이는 한 리듬으로 둡니다. PC 96 – 128, 모바일 56 – 72입니다. 본문 최대 폭은 1120px입니다.

좌우 여백

PC 32 · 모바일 20

카드 안쪽

20 – 24

폼 칸 사이

20 (라벨과 칸 8)

모서리와 그림자Radius and elevation

모서리는 다섯 단계입니다. 작은 것일수록 덜 둥급니다. 완전히 둥근 알약 버튼은 쓰지 않습니다.

그림자는 세 단계, 먹색 기반입니다. 떠 있는 것만 그림자를 가집니다.

sm

카드 기본

md

펼친 메뉴 · 툴팁

lg

모달 · 시트 · 폰 목업

버튼Buttons

한 화면에 주 버튼은 하나입니다. 초록 바탕에 먹 글자입니다.

나머지는 보조(흰 바탕 + 테두리)나 글자 버튼으로 낮춥니다. 누르면 98%로 120ms 줄었다 돌아옵니다.

높이

기본 48 · 작은 36

글자

16 / 600 · 작은 14

모서리

12 · 작은 8

포커스

딥 그린 2px 테두리, 2px 띄움

입력과 선택Inputs and choices

라벨은 칸 위, 도움말은 칸 아래에 둡니다. 안내 글자(placeholder)에 중요한 정보를 넣지 않습니다.

여러 개 중 하나를 고를 때는 카드로 고릅니다. 고른 카드는 딥 그린 2px 테두리에 틴트 바탕입니다.

카드와 배지Cards and badges

카드는 흰 바탕, 1px 선, 16 모서리, 가장 약한 그림자입니다. 카드 안에 카드를 넣지 않습니다.

배지는 상태 하나만 말합니다. 색은 상태 색 짝을 씁니다.

배지

높이 24 · 모서리 6 · 12 / 600

진행 막대

높이 8 · 초록 채움 · 숫자를 함께

움직임 규칙Motion principles

움직임은 결과를 알릴 때만 씁니다. 한 화면에 브랜드 순간은 하나입니다.

시스템 설정이 "동작 줄이기"면 모든 움직임을 끄고 끝 상태만 보입니다. 이 장의 네 예도 지금 그 규칙대로 움직입니다.

시간

누름 120 · 열고 닫기 200 · 등장 320 · 브랜드 900ms

곡선

out (.2,.8,.2,1) · in-out (.65,0,.35,1)

잎만

sprout (.34,1.56,.64,1) — 살짝 넘쳤다 돌아옴

움직일 것

transform · opacity · stroke-dashoffset만

심볼 애니메이션Symbol animation spec

심볼 등장은 1.9초 안에 끝납니다. 앱 시작 화면, 가입 완료, 브랜드 영상 끝에만 씁니다.

고리는 고리 두께와 같은 굵기의 선(stroke)을 그려서 만듭니다. 그래서 끝에 가면 채운 고리와 픽셀까지 같습니다.

고리

stroke-dashoffset 100 → 0 · 800ms in-out · 150ms 뒤

잎

scale 0 → 1, rotate −35° → 0 · 650ms sprout · 800ms 뒤 · 잎 밑동 기준

글자

음절마다 아래에서 위로 · 900ms out · 790ms 뒤 시작, 70ms 차례

코드

motion.css .rv (CSS만, 라이브러리 없음)

광고주 랜딩Advertiser landing

첫 화면에 핵심 문장 하나, 주 버튼 하나, 실제 제품 화면 하나를 둡니다. 단가와 조건이 첫 스크롤 안에 보입니다.

이전 화면에서 바뀐 점: 화면을 덮던 주황 상담 바를 작은 버튼으로, 넷이던 강조색을 초록 하나로, 이모지 제목을 없앴습니다.

시안

examples/landing.html

상태

시안 · 운영 화면은 바꾸지 않았습니다

광고주 가입Sign up

가입은 세 단계(계정 → 본인인증 → 사업자 확인)를 위에 보여 줍니다. 오른쪽은 장식 그림 대신 "가입하면 생기는 일"입니다.

광고성 정보 수신 동의는 약관과 따로, 채널별로, 기본 해제입니다(vibe-lawyer R1).

시안

examples/signup.html

첫 미션 등록First mission

왼쪽 단계, 가운데 입력, 오른쪽 "유저에게 이렇게 보여요" 미리보기와 비용 계산입니다. 입력이 바뀌면 미리보기와 금액이 바로 바뀝니다.

비용은 "300건 × 80원 + 부가세 10% = 26,400P"처럼 식으로 보여 줍니다. 포인트는 부가세를 넣은 값입니다.

시안

examples/mission-new.html

참고

Google Ads 첫 캠페인, Pinterest 예산 (Mobbin)

메일Email

메일은 CSS 변수를 못 쓰므로 hex를 직접 씁니다. 머리에 가로형 로고, 초록 버튼 하나, 끝에 전송자 정보와 수신거부입니다.

광고 메일은 제목과 본문 첫 줄을 (광고)로 시작합니다(vibe-lawyer R3).

시안

examples/email.html

바탕

#F5F7F6 · 상자 #FFFFFF 16

버튼

#09CC7C + #0C1A14 글자 · 높이 52

강조 상자

#E8F8F0 · 초록 글자 #057A4B

유저 앱User app

유저 쪽도 같은 심볼과 색을 씁니다. 다른 점은 하나, 받을 캐시를 먼저 보여 주고 포인트 숫자에만 골드를 씁니다.

홈 화면에서는 먹색 아이콘이 밝은 아이콘들 사이에서 먼저 보입니다.

범위

앱 화면 반영은 다음 결정(이번에는 가이드만)

내려받기Downloads

로고는 SVG가 정본입니다. PNG는 SVG에서 만든 사본입니다.

토큰은 JSON이 정본이고 CSS는 같은 값을 변수로 옮긴 것입니다. 다른 저장소는 이 두 파일을 가져다 씁니다.

JSON

W3C Design Tokens 형식

CSS

--cp-* 변수, 라이트·다크·동작 줄이기