Seoul My Soul (서울마이소울)

아이보리 텀블러·도넛 손잡이 머그에 새긴 분홍 하트·노랑 느낌표·파랑 스마일과, 네 색이 섞인 압축 대문자 로고

한국공공라이프스타일이커머스복합humanismmodern-minimal디자인폰트comfortablesoftflat라이트한글 지원출시 2023개정 2024

갤러리에서 열기 — 적용 예시 · 가이드 다운로드

Brand DNA

브랜드 DNA

브랜드명: SEOUL MY SOUL / 서울마이소울. 2023년 8월 16일 발표한 서울특별시 도시 브랜드다.
한 줄 정체성: 서울을 향한 여러 마음을 하나의 짧고 굵은 영문 이름과 세 가지 표정으로 보여 준다. 굿즈에서는 서울을 기억하는 작은 물건이 된다.
공식 디자인 철학: 사람들의 다양한 마음이 모여 조화를 이루는 매력 도시 서울. 공식 사이트는 세 메타포를 LOVE·WOW·FUN으로 소개하고, 가이드 v1.2는 가운데를 INSPIRE로 부른다. 둘을 하나의 용어로 단정하지 않는다.
시그니처 요소 1개: 길게 비워 낸 분홍 하트, 아래로 좁아지는 노랑 느낌표, 직사각형 눈 둘과 깊은 U자 입을 가진 파랑 스마일. 로고에서는 O·Y·U 자리에 들어가고, 제품에서는 작은 인쇄 한 번만으로 브랜드를 알아보게 한다. 공식 RGB AI의 윤곽을 그대로 추출했다.
대표 장면: 서울굿즈의 상품 탐색. 서울시 공식 굿즈 소개의 상품 선반·분류·매장 안내와 공식 판매처 DDP의 상품 사진·가격을 함께 살폈다. 행정 민원 포털과 다른, 물건을 고르고 구경하는 화면이다.
문서의 범위: 로고·심볼·네 대표색·영문 표제 서체는 공식 가이드 값이다. 상품 화면의 글자 단계·모서리·간격은 실제 화면을 바탕으로 정리한 구현 값이며 해당 절에서 (추정)을 구분한다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 다채로운, 경쾌한, 친근한
무드 설명: 흰 바탕과 작은 검정 글씨가 상품을 받친다. 선명한 네 색은 버튼마다 칠하기보다 상품의 인쇄·자수·포장과 사진 안 소품에 모인다. 아이보리 컵 위의 작은 하트, 초록 코듀로이 파우치의 광목 손잡이처럼 재질과 모티브를 함께 보여 줄 때 서울굿즈답다.
비주얼 스타일: 휴머니즘 + 모던 미니멀. 심볼에는 사람의 감정이 있고, 상품 목록에는 얇은 선과 평평한 이미지가 있다.
밀도(Density): Comfortable — 상품 그림은 넓게, 설명은 이름·종류·가격 세 줄로 짧게. 2026-10-15 공식 DDP 분류는 PC 4열, 서울시 소개 선반은 PC 4장·모바일 약 1.1장씩 보여 준다.
모서리 성향: Soft(4~8px) — 데모 상품 사진 8px, 작은 단추 6px로 맞췄다(추정). 실제 서울시 소개는 이미지 카드·분류 단추에 더 큰 반경도 쓴다. DDP 상품 사진 자체는 사각형이다.
평면성: Flat — 상품 카드의 테두리·그림자를 걷고 사진과 캡션으로 정렬한다. 제품 그림의 금속 반사·도자기 음영은 실물 재질 표현이다.
문구: 「서울마이소울 굿즈」「인기상품」「카테고리」는 관찰한 메뉴다. 「일상에 담는 서울의 마음」「서울을 담은 큐레이션」은 이 적용 예시를 위해 쓴 편집 문구다. 제품명·가격과 편집 문구를 구분한다.

Color System

컬러 시스템 (CSS 변수)

공식 가이드 v1.2의 네 대표색은 PINK #FF0A73, YELLOW #FABF13, BLUE #0082FF, GREEN #00D778이다. 노랑은 같은 표 안에 RGB 255·180·0과 HEX FABF13이 함께 적혀 서로 다르다. 공식 RGB AI는 #FFB400이므로 인라인 로고·심볼은 AI 원색을 보존했다. UI 별칭은 가이드의 HEX를 쓴다. 50~400·600~900 사다리와 상태색은 공개 UI 토큰이 없어 (추정)이다.

:root {
  
  --color-primary-50: #FFF1F7;
  --color-primary-100: #FFDCEB;
  --color-primary-200: #FFB8D6;
  --color-primary-300: #FF8DBE;
  --color-primary-400: #FF4B98;
  --color-primary-500: #FF0A73;
  --color-primary-600: #D9005C;
  --color-primary-700: #AB0048;
  --color-primary-800: #7D0035;
  --color-primary-900: #4F0022;
  
  --color-secondary-500: #FABF13; 
  --seoul-art-yellow: #FFB400;   
  --seoul-blue: #0082FF;
  --seoul-green: #00D778;
  --seoul-black: #000000;
  --seoul-white: #FFFFFF;
  
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F8F8F8;
  --color-neutral-100: #F2F2F2;
  --color-neutral-200: #E7E7E7;
  --color-neutral-300: #D4D4D4;
  --color-neutral-400: #A8A8A8;
  --color-neutral-500: #757575;
  --color-neutral-700: #454545;
  --color-neutral-900: #171717;
  --color-neutral-1000: #000000;
  
  --color-success-bg: #ECF8F1; --color-success-fg: #087345;
  --color-warning-bg: #FFF7DD; --color-warning-fg: #8B6200;
  --color-error-bg: #FFF0F0; --color-error-fg: #B73535;
  --color-info-bg: #ECF4FF; --color-info-fg: #135EB5;
  --bg-base: #FFFFFF;
  --bg-subtle: #F8F8F8;
  --bg-elevated: #FFFFFF;
  --bg-overlay: rgba(0,0,0,.42); 
  --text-primary: #171717;
  --text-secondary: #454545;
  --text-tertiary: #757575;
  --text-on-primary: #FFFFFF;
  --text-disabled: #A8A8A8;
  --border-default: #D4D4D4;
  --border-subtle: #E7E7E7;
  --border-strong: #171717;
  --border-focus: #171717;
}

공식 로고의 검정·흰 역상 규정은 제품의 다크 모드가 아니다. 공개 굿즈 화면에서 테마 전환을 확인하지 못해 라이트만 제공한다.
분홍·초록 원색을 작은 본문에 쓰면 읽기 어려워진다. 가격·주소는 검정, 곁 정보는 회색, 원색은 상품 모티브·짧은 분류 제목에 둔다.
흰색/아이보리 제품에는 크림·회색 제품 무대를 두어 윤곽을 보이게 한다. 제품이 흰색이라는 이유로 페이지 전체를 회색으로 칠하지 않는다.

Typography

타이포그래피

폰트 페어링:
- 영문 표제: PP Formula Condensed Bold — 공식 가이드 1.9 지정. Condensed Bold 한 굵기, 대문자 권장, 행간은 글자 크기와 같게, 자간 +15(편집 프로그램 단위)다. 웹에서 같은 값으로 읽은 0.015em은 변환값(추정)이다.
- 한글: 서울시 소개 화면의 고딕 계열을 따라 Noto Sans KR, Apple SD Gothic Neo, Malgun Gothic 폴백. 웹용 한글 UI 서체를 가이드가 일괄 지정한 것은 아니다(추정).
- 문서·명함 예시에 서울남산체EB와 DDP체B가 나오지만 이를 모든 상품 화면의 기본 글꼴로 확대하지 않는다.
- 로고는 서체로 입력하지 않는다. 공식 AI에서 뽑은 벡터를 쓴다. 데모는 외부 폰트를 받지 않는다. 한글은 위의 고딕 폴백으로 표시하고, 기기에 없는 PP Formula는 Arial Narrow, Impact, sans-serif로 대체된다.
위계 (구현 값, 추정: 크기 / 굵기 / 행간 / 자간):
- Display: 48px / 700 / 48px / .015em — 영문 캠페인 한 줄
- H1: 32px / 800 / 40px / -.035em — 상품 탐색 제목
- H2: 24px / 700 / 32px / -.025em — 인기상품·매장 안내
- H3: 18px / 700 / 26px / -.02em — 대표 상품
- Body Large: 16px / 400 / 26px / -.01em
- Body: 14px / 400 / 22px / -.01em — 상품명·버튼
- Body Small: 12px / 400 / 18px / 0 — 종류·배송 안내
- Caption: 10px / 500 / 15px / .04em — 영어 눈썹·상품 번호
가격은 28,000원처럼 쉼표와 원을 붙인다. 상품명에 (3종)·(2종)을 넣어 실제 판매 단위를 보인다. 품절은 흐리게 지우지 말고 SOLD OUT 글자로 남긴다.

Spacing

스페이싱

Base unit: 4px(추정). 실제 서울시 상품 선반 spaceBetween은 인기상품 18px, 서울마이소울 20px다.

:root {
  --space-xs: 4px; --space-sm: 8px; --space-12: 12px;
  --space-md: 16px; --space-lg: 24px; --space-xl: 32px;
  --space-2xl: 48px; --space-3xl: 64px;
  --goods-gap: 20px; 
  --container-max: 1200px; 
}

Container: 공식 DDP 상품 목록은 가운데 정렬 4열, 서울시 소개는 넓은 전면 구획이다. 적용 예시는 900px 창에서도 6개 품목이 보이도록 선반을 압축했고, 모바일 인기상품은 실제 소개처럼 한 장이 크게 보이는 가로 선반, 전체 분류 목록은 2열로 바꿨다. 외곽 24px·모바일 16px은 구현값(추정).
이름과 가격 사이 4px, 이미지와 이름 사이 8px. 구획 사이 40~48px. 상품 그림 밖에 칸마다 내부 여백·바깥 테두리를 중복하지 않는다.

Border Radius

:root {
  --radius-none: 0; 
  --radius-sm: 4px;
  --radius-md: 6px; 
  --radius-lg: 8px; 
  --radius-xl: 16px; 
  --radius-full: 9999px; 
}

물건의 곡률과 UI의 곡률은 다르다. 머그의 둥근 손잡이·텀블러의 둥근 어깨를 살리되 모든 상품 카드까지 동그랗게 만들지 않는다. 심볼 윤곽은 radius로 새로 그리지 않고 원본 벡터를 유지한다.

Shadow / Elevation

:root {
  --shadow-none: none; 
  --shadow-sm: 0 2px 5px rgba(0,0,0,.06); 
  --shadow-md: 0 6px 18px rgba(0,0,0,.09); 
  --shadow-lg: 0 16px 36px rgba(0,0,0,.14); 
  --shadow-xl: 0 24px 64px rgba(0,0,0,.18); 
}

상품 카드 기본은 none이다. 그림 안의 바닥 접촉 그림자와 금속 반사로 재질·높이를 표현한다. UI 그림자를 물건 주위의 굵은 외곽선처럼 쓰지 않는다.

Iconography

스타일: UI는 Outline. 브랜드 심볼은 Filled이며 윤곽 안쪽의 빈 공간까지 포함한 원본 형상이다.
Stroke 굵기: 24px에서 1.5~2px(추정). 공식 소개의 넘김 화살표는 2px, 둥근 선 끝·연결이다.
모서리 처리: UI는 Round. 하트 끝·느낌표 삼각형·스마일 입은 임의로 둥글게 다듬지 않는다.
추천 라이브러리: Lucide 1.5px — 검색·쇼핑백·위치·넘김에 사용(공식 지정 아님).
검색·장바구니 아이콘을 원색으로 칠하지 않는다. 세 가지 감정 심볼을 시스템의 오류·완료 아이콘으로 대체하지 않는다.
공식 가이드의 가로 로고 최소 높이는 12px, 세로는 20px다. 원본을 비례 축소하고 여백을 확보한다.

Component Guide

컴포넌트 가이드 (상태별 CSS)

상품 사진이 중심인 목록에 필요한 기본형이다. 공개된 공식 UI 컴포넌트 라이브러리는 없으므로 아래 상태 규칙은 실제 소개 화면을 바탕으로 정리한 구현 예시(추정)다.

:root { --font-body:'Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',Arial,sans-serif; --font-display:'PP Formula Condensed Bold','Arial Narrow',Impact,sans-serif; }
.sms-btn { display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 16px;border:1px solid transparent;border-radius:var(--radius-md);font:600 12px/1.2 var(--font-body);cursor:pointer;transition:background-color var(--duration-base) ease,color var(--duration-base) ease; }
.sms-btn--primary { background:var(--color-primary-500);color:var(--text-on-primary); }
.sms-btn--primary:hover { background:var(--color-primary-600); }
.sms-btn--primary:active { background:var(--color-primary-700);transform:translateY(1px); }
.sms-btn--secondary { background:var(--bg-base);border-color:var(--border-default);color:var(--text-primary); }
.sms-btn--secondary:hover { background:var(--bg-subtle); }
.sms-btn--secondary:active { border-color:var(--border-strong); }
.sms-btn--ghost { background:transparent;color:var(--text-primary); }
.sms-btn--ghost:hover { background:var(--bg-subtle); }
.sms-btn--ghost:active { color:var(--color-primary-700); }
.sms-btn--danger { background:var(--color-error-fg);color:var(--text-on-primary); }
.sms-btn--danger:hover { background:#922929; }
.sms-btn--danger:active { background:#702020; }
.sms-btn:disabled { color:var(--text-disabled);background:var(--color-neutral-100);border-color:var(--border-subtle);cursor:not-allowed;transform:none; }
.sms-btn[aria-busy="true"] { position:relative;color:transparent;pointer-events:none; }
.sms-btn[aria-busy="true"]::after { content:"";position:absolute;width:14px;height:14px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;animation:sms-spin .8s linear infinite; }
.sms-input { width:100%;min-height:38px;padding:10px 12px;border:1px solid var(--border-default);border-radius:var(--radius-md);background:var(--bg-base);color:var(--text-primary);font:400 13px/1.4 var(--font-body); }
.sms-input::placeholder { color:var(--text-tertiary); }
.sms-input:focus { outline:none;border-color:var(--border-focus); }
.sms-input[aria-invalid="true"] { border-color:var(--color-error-fg); }
.sms-input:disabled { background:var(--bg-subtle);color:var(--text-disabled); }
.sms-card { min-width:0;background:var(--bg-base);border:0;box-shadow:var(--shadow-none); }
.sms-card__media { aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;border-radius:var(--radius-lg);background:var(--bg-subtle); }
.sms-card__media svg { width:100%;height:100%; }
.sms-card__type { margin:8px 0 2px;color:var(--text-tertiary);font:400 10px/15px var(--font-body); }
.sms-card__name { margin:0;font:500 12px/18px var(--font-body);color:var(--text-primary); }
.sms-card__price { margin:3px 0 0;font:700 12px/18px var(--font-body);color:var(--text-primary);font-variant-numeric:tabular-nums; }
.sms-card--feature .sms-card__media { background:#F6E8A8; }
.sms-card--outlined { padding:14px;border:1px solid var(--border-subtle);border-radius:var(--radius-lg); }
.sms-badge { display:inline-flex;align-items:center;padding:3px 6px;border-radius:var(--radius-sm);font:600 10px/14px var(--font-body);white-space:nowrap; }
.sms-badge--solid { background:var(--seoul-black);color:var(--seoul-white); }
.sms-badge--subtle { background:var(--color-neutral-100);color:var(--text-secondary); }
.sms-badge--outline { border:1px solid var(--border-default);color:var(--text-tertiary); }
.sms-nav { display:flex;align-items:center;gap:22px;min-height:40px;border-bottom:1px solid var(--border-subtle);font:500 12px/18px var(--font-body); }
.sms-nav .is-active { color:var(--text-primary);font-weight:700;box-shadow:inset 0 -2px var(--border-strong); }
.sms-filter { padding:7px 12px;border:0;border-radius:var(--radius-full);background:transparent;color:var(--text-primary);font:600 10px/16px var(--font-body); }
.sms-filter[aria-pressed="true"] { background:var(--seoul-black);color:var(--seoul-white); }
.sms-filter:hover { background:var(--color-neutral-100);color:var(--text-primary); }
.sms-filter[aria-pressed="true"]:hover { background:var(--seoul-black);color:var(--seoul-white); }
.sms-empty,.sms-error { padding:28px;text-align:center;background:var(--bg-subtle);color:var(--text-secondary); }
.sms-error { color:var(--color-error-fg); }

목록의 분류는 글자나 검정 선택 단추다. 브랜드 네 색을 필터마다 한 색씩 배분하지 않는다.
주문이 끝난 뒤에는 수량·합계·배송비를 함께 보여 준다. 품절 상품은 SOLD OUT, 구매 단추는 disabled로 상태를 일치시킨다.
검색 결과가 없으면 「찾는 굿즈가 없어요」와 검색어 지우기, 읽기 실패면 다시 불러오기 한 동작을 둔다. 상품 데이터가 없는데 빈 타일을 늘어놓지 않는다.

Motion

:root {
  --duration-fast:150ms; --duration-base:200ms;
  --duration-slow:680ms; 
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
}
@keyframes sms-spin { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) {
  .sms-btn { transition:none; }
  .sms-btn:active { transform:none; }
  .sms-btn[aria-busy="true"]::after { animation:none; }
}

실제 인기상품 선반은 속도 720ms·자동 넘김 2,800ms, 서울마이소울 선반은 680ms다. 이 정적 예시는 멈춘 한 장면을 보여 준다. 구현 시 자동 넘김은 사용자가 멈출 수 있게 하고, 움직임 줄이기에서는 자동 넘김을 끈다(추정).

Anti-patterns

1. 로고 비율·자간·심볼 일부를 고치지 않는다. 공식 가이드 1.7의 금지다. 문자열 SEOUL MY SOUL을 대체 서체로 입력해 로고처럼 쓰지 않는다. 2. 로고와 세 심볼에 그라디언트를 입히지 않는다. 재질 그림자·제품 반사는 물건에만 있다. 심볼끼리 겹치거나 삼각형·하트 끝을 새로 다듬지 않는다. 3. 네 대표색을 큰 견본 띠나 네 색 버튼 세트로 늘어놓지 않는다. 굿즈의 인쇄·봉제·종이와 제품 사진에서 보이게 한다. 4. 모든 상품을 같은 둥근 상자로 그리지 않는다. 컵 손잡이, 텀블러 금속 입구·이음선, 파우치 골·지퍼·광목 손잡이, 문구의 얇은 종이 층을 살린다. 5. 품절·가격·매장 정보를 꾸며 넣지 않는다. 가격은 확인한 판매 목록의 당시 값, 매장은 공식 주소·운영시간을 쓴다. 매장 준비 중 항목을 운영 중처럼 쓰지 않는다. 어두운 배경 로고가 있다는 이유로 다크 UI를 만들지 않는다.

Sources

출처

Seoul My Soul (서울마이소울) 이름과 로고는 각 권리자의 상표입니다.