브랜드

이름

Senco — "send"와 "co"(company/community)를 합친 이름이다. 짧고, 어느 언어로든 발음하기 쉽고, 돈을 보낸다는 핵심 기능이 바로 드러난다.

사용 규칙

소문자 "senco"는 로고 아트워크에만 쓴다. 제품 화면을 포함해 문장 안에서는 항상 첫 글자를 대문자로 쓴다. 브랜드명을 본문에서 소문자로 쓰기 시작하면, 글을 쓰는 사람마다 문장 첫머리의 "senco"가 고유명사인지 오타인지를 매번 따져야 한다.

기능 이름 짓기

기능 이름은 새로 지어내지 않고 하는 일을 그대로 쓴다. "SencoWatch"가 아니라 "Rate alert"다. Senco 사용자는 여러 언어를 쓰는데, 지어낸 이름은 번역이 안 돼서 어느 로케일에서나 뜻 모를 단어로 남는다. 브랜드는 제품 이름에만 넣고, 기능은 하는 일로 이름 붙인다.

브랜드 색

Senco는 몇 가지 색으로 고정된 팔레트를 쓴다. 브랜드를 나타내는 색은 이것뿐이다.

피드백 색(성공, 경고, 에러)은 브랜드 색이 아니다. Color에서 시맨틱 상태 토큰으로 정의한다.

브랜드 색은 하나이고, 기능을 한다

브랜드 파랑은 상호작용 색이기도 하다. 제품 어디에서도 accent-600을 장식으로 쓰지 않는다. 파란색이면 누를 수 있다는 뜻이다. 그래서 팔레트에는 범용 보조 브랜드 색도, 그라디언트도 없다. 두 번째 브랜드 색이 생기면 곧바로 누를 수 없는 요소에 쓰이기 시작하고, 이 규칙은 무너진다.

예외는 --ds-hero-gradient(#0A4ABF → #0F62FE) 하나다. 마케팅 화면에만 쓰고 제품 안에서는 쓰지 않는다.

다크 모드의 브랜드 파랑

기본 계층에서 브랜드 색은 두 테마 모두 #0F62FE다. 다크 모드에서는 대비를 맞추려고 시맨틱 별칭만 #458DFF로 밝힌다. 브랜드 문서와 Figma에는 여전히 브랜드 파랑이 하나뿐이고, 인터페이스가 참조하는 값만 바뀐다. Themes 참고.

로고

Senco 로고는 소문자 "senco" 워드마크의 "o" 뒤에 파란 점을 찍은 형태다. 점에는 브랜드 Primary 색(accent-600, #0F62FE)을 쓴다. 따로 심벌 마크는 없고, 워드마크와 점을 한 덩어리로 쓴다.

• 폰트: Lexend Deca (Google Fonts, sans-serif)
• 렌더링: SVG (플랫폼마다 똑같이 보이도록 텍스트를 패스로 변환)
• 화면비: 38:7
• 컴포넌트: SencoLogo (size, variant prop)

시스템 서체가 아닌 서체는 로고에만 나오고, 그마저 텍스트가 아니라 벡터 패스다. 런타임에 웹폰트를 불러오지 않으므로 Typography의 시스템 폰트 규칙과 어긋나지 않고, 디자인-코드 파이프라인이 커스텀 폰트를 넘기지 못한다는 제약에도 걸리지 않는다.

점

로고의 핵심은 점이다. 워드마크를 그냥 입력한 글자와 구별해 주는 것도, 하나뿐인 브랜드 색을 담은 것도, 브라우저 탭의 16px에서 끝까지 보이는 것도 점이다. 점은 지우지 않고, default variant에서 accent-600 외의 색으로 바꾸지 않고, 워드마크와 떼어 단독 심벌로 쓰지 않는다.

변형

inverse variant에서는 점을 파랑 대신 흰색으로 쓴다. 짙은 남색 배경에서는 브랜드 파랑이 얼룩처럼 보이고, 브랜드 파랑 배경에서는 아예 묻힌다. 색을 포기하는 대신 형태를 지키는 것이다. 사람들이 알아보는 건 형태다.

최소 크기

• 디지털: 최소 높이 24px (size prop 기본값)
• 인쇄: 최소 높이 10mm

24px보다 작으면 점이 "o"에 달라붙어 "sencq"처럼 읽힌다. 최소 크기를 정한 이유가 이것이고, 파비콘에서 워드마크를 줄이지 않고 아예 다른 구성을 쓰는 이유도 이것이다.

배경별 사용

사진 위에 쓸 때는 이미지에 바로 올리지 않고, 단색 영역이나 충분히 어둡게 깐 영역에 둔다. 제품 안에서는 사진 배경을 쓰지 않으므로 이 규칙은 마케팅 화면에만 해당한다.

여백

로고 주변에는 상하좌우 모두 최소 로고 마크 높이만큼 여백을 둔다. 이 영역 안에는 텍스트, 아이콘, 다른 요소를 두지 않는다.

기준은 워드마크의 대문자 높이라서 로고 크기에 비례해 커진다. 최소 크기 24px이면 상하좌우 여백도 24px이다. 크기가 바뀔 때마다 다시 계산할 필요가 없다.

여백은 SVG 경계 상자가 아니라 눈에 보이는 가장자리를 기준으로 잰다. 제품에서 여백이 가장 빠듯한 곳은 App bar다. 로고는 화면 가장자리에서 space-4만큼 떨어져 있고, 오른쪽 액션 아이콘과의 사이에도 여백을 지킨다.

하지 말아야 할 로고 사용

로고를 늘리거나, 색을 바꾸거나, 회전하거나, 효과를 넣지 않는다. 헷갈리면 브랜드 키트의 원본 파일을 쓴다.

브랜드 성격

인터페이스에서 성격이 드러나는 곳

발표 자료에만 있는 성격은 성격이 아니다. 각 특성은 제품이 실제로 하는 일과 이어진다.

접근성과 유치함 사이

여기서 "접근성"은 금융 지식이 없는 사용자도 송금을 끝까지 할 수 있다는 뜻이다. 일러스트, 마스코트, 동글동글한 친근함, 송금 완료 확인 한 번 외의 축하 문구를 뜻하지 않는다. Senco가 옮기는 돈은 사용자가 잃어서는 안 되는 돈이다. 어조는 늘 차분하게 유지한다.

파비콘

Senco 파비콘은 파란 둥근 사각형 위에 흰색 "S"를 올린 형태다. 브라우저 탭, 북마크, 앱 아이콘에 쓴다.

파비콘이 로고가 아닌 이유

워드마크는 16px에서 읽을 수 없다. 그래서 파비콘은 채운 타일 위에 글자 하나를 올리는 별도 구성으로 만들고, 그 크기에서도 브랜드를 알아볼 수 있게 하는 두 가지, 파랑과 "S"만 남긴다. 워드마크를 쓰지 않아도 되는 유일한 예외다. 로고를 그대로 줄였다면 작은 브랜드가 아니라 알아볼 수 없는 얼룩이 됐을 것이다.

사용

• 파비콘은 항상 파란 배경 버전을 쓴다. 투명 배경은 쓰지 않는다
• 파비콘 크기에서는 워드마크 없이 심벌만 쓴다
• 색을 바꾸거나 효과를 넣지 않는다
• 타일은 채워 둔다. 투명 파비콘은 브라우저가 밝은 테마인지 어두운 테마인지에 따라 예측할 수 없게 뒤집혀 보인다

어조

Senco는 돈을 잘 아는 친구가 도와주듯 말한다. 자신 있게 말하되 가르치려 들지 않는다.

원칙

• 재치보다 명확하게 — "Funds in transit" 대신 "Your transfer is on its way"
• 바로 말하기 — 사용자에게 필요한 말부터 한다. 군더더기는 뺀다
• 안심시키기 — 돈 문제는 예민하다. 짐작하게 두지 말고 확인해 준다
• 쉬운 말 쓰기 — 사용자가 영어 원어민이 아닐 수 있다

예시

번역을 위한 글쓰기

카피는 영어로 잘 읽히는 데서 끝나지 않고, 번역까지 고려해서 쓴다.

• 관용구를 쓰지 않는다. "On its way"는 번역해도 뜻이 통하지만 "in the pipeline"은 통하지 않는다.
• 말장난에 기댄 유머를 쓰지 않는다.
• 문장을 짧게 쓴다. 긴 영어 문장을 독일어나 타갈로그어로 옮기면 보통 30–40% 길어지고, 고정 높이 버튼은 거기서 깨진다.
• 문장 조각을 이어 붙여 문장을 만들지 않는다. 어순은 언어마다 다르다.
• 통화, 날짜, 숫자 형식은 문자열로 하드코딩하지 않고 로케일에서 가져온다.

에러 카피에는 정해진 구성이 있다

에러 메시지에는 무슨 일이 생겼는지, 왜 생겼는지, 이제 무엇을 하면 되는지가 모두 들어간다.

Transfer couldn't be sent — the recipient's account number was rejected by the receiving bank. Check the number and try again.

"이제 무엇을 하면 되는지"가 빠진 에러는 사용자에게 손쓸 수 없는 문제만 떠넘긴다. 내 돈을 맡긴 제품을 믿지 못하게 되는 가장 빠른 길이다.

피할 단어

대상 사용자

인터넷이 느리거나 불안정하고, 현지 통화 가치가 빠르게 떨어지는 경우가 많은 지역의 젊은 성인(18–35세). 가족에게 돈을 보내고, 송금 수수료를 아끼려고 크립토를 쓰며, 연결이 나쁜 저가 휴대폰에서도 잘 돌아가는 앱이 필요하다.

사용자 니즈

• 해외로 빠르고 저렴하게 돈을 보낸다
• 법정화폐와 크립토 중 어느 쪽 환율이 나은지 본다
• 송금 진행 상황을 실시간으로 확인한다
• 확인하기 전에 수수료를 이해한다
• 저사양 안드로이드 기기에서 앱을 쓴다

사용자층이 시스템에 미치는 영향

이 디자인 시스템에서 남다른 결정은 거의 다 이 사용자층에서 나왔다.

사용자층이 다르면 같은 원칙에서도 다른 결론이 나온다. 사용자층을 여기 적어 두기 때문에, 시스템의 나머지 결정도 임의로 정한 것이 아니라 근거를 두고 따져 볼 수 있는 것이 된다.

알려진 공백