Samsung Electronics (삼성전자)

흑백 쇼핑 무대 위 갤럭시 제품 렌더, 굵은 영문 모델명과 알약 구매 버튼

한국소비자차가운modern-minimalhumanism고딕spaciouspillflat라이트한글 지원출시 1993개정 2005

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

Brand DNA

브랜드 DNA

브랜드명: 삼성전자 (Samsung Electronics)
한 줄 정체성: 모바일·TV·생활가전 등 일상 속 전자제품을 만드는 한국 기업. 공식 CI의 색·서체를 토대로 삼성닷컴의 갤럭시 쇼핑 장면을 다룬다.
공식 디자인 철학: 공식 브랜드 소개는 새로운 가능성을 여는 개척자 정신과 사람을 중심에 둔 경험을 설명한다. 색과 서체는 제품과 소통 창구가 달라도 같은 브랜드로 느끼게 하는 수단이다.
시그니처 요소 1개: 흑백 무대에 크게 놓인 갤럭시 제품과 알약 구매 버튼. 얇은 베젤·힌지·세로 카메라가 보이는 제품 렌더 옆에 굵은 영문 모델명을 놓고, 밑줄 「더 알아보기」와 채운 「구매하기」를 짝짓는다. CI 대표색 삼성 블루 #1428A0는 그대로 보존하되 쇼핑 화면을 파란 면으로 채우지 않는다.
로고와 여백: 공식 SVG의 글자 윤곽과 비율을 그대로 사용한다. 공식 여백 그림은 레터마크 높이를 s로 두고 상하좌우에 최소 0.5s를 표시한다. 워드마크 주변에 메뉴·문구·테두리를 붙이지 않는다.
연도 해석: released_year: 1993은 공식 페이지가 밝힌 삼성 블루의 도입 연도다. 공개 UI 시스템의 출시 연도가 아니다. 2005년은 로고 페이지에 명시된 레터마크 개선 연도이며, 이후 정교화 작업의 연도는 확인되지 않아 last_major_revision에 (추정)을 붙였다.
자료 범위와 신뢰도: 2026-10-04에 공식 CI 페이지·SVG·CSS를 curl로 다시 확인했다. 대표색·로고·보호 여백은 공식 규정, 서체와 웹 수치는 공식 CSS 관찰이다. 공개된 전체 UI 토큰 문서는 확인되지 않아 source_type: hybrid, confidence: medium, is_official: false로 기록한다. 역할을 새로 연결한 값과 확인하지 못한 값은 아래에 (추정)으로 표시한다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 간결함, 신뢰, 친근함
무드 설명: 흰 탐색 헤더와 검정 제품 무대가 또렷하게 교대한다. 굵고 짧은 영문 모델명, 그 아래 작은 한국어 혜택, 둥근 구매 버튼이 읽는 순서를 만든다. 채도는 제품의 화면·소재에 모으고 메뉴·가격·구획은 흑백으로 남긴다.
비주얼 스타일: 모던 미니멀, 휴머니즘
밀도(Density): Spacious — 공식 기업 소개 CSS는 섹션 사이에 32·64·96px 간격을 제공한다.
모서리 성향: Pill — 기업 소개 페이지의 주요 버튼은 높이 약 40px, 반지름 20px이다. 쇼핑 장면에서는 구매 버튼의 완전한 곡선과 얇고 각진 제품 베젤을 대비시킨다. 입력 밑줄은 각지게 둔다.
평면성: Flat — 메뉴·제품 카드는 흰색·연회색 면과 글자로 구분한다. 입체감은 제품의 금속 테두리·렌즈·화면 반사에 집중시키고 UI 전체에 그림자를 두르지 않는다.
테마 판정: [light]. CI의 흰 로고와 검정 배경용 예시, 웹 CSS의 bg-black 구획은 배경별 표현이다. 공식 다크 토큰이나 화면 전체를 바꾸는 라이트·다크 전환 근거는 확인되지 않았다. 검정 상품 히어로를 포함한 이번 쇼핑 카드도 라이트 전용이며 별도 다크 판을 만들지 않는다.

Color System

컬러 시스템 (CSS 변수)

공식 로고 페이지는 삼성 블루 RGB 20/40/160 = #1428A0, 블랙 RGB 0/0/0 = #000000, 화이트 RGB 255/255/255 = #FFFFFF를 제공한다. 블랙 HEX 표기에 한 자리가 빠져 있어 명시된 RGB로 정규화했다.

공식 CI에는 블루의 단계별 명암 팔레트가 없다. 아래 50~900 키는 문서 형식을 맞추기 위한 동일색 별칭이며, 새로운 단계별 색을 만들지 않았다. 중립색은 기업 소개 CSS의 배경·글자·버튼에서 확인한 값이다. 성공·주의·정보의 전용 CI 색은 확인되지 않아, 실제 흑백 값을 이용한 중립형 역할 연결만 제시한다(추정).

:root {
  /* Primary — 공식 삼성 블루. 단계 키는 한 색을 가리키는 호환 별칭 */
  --color-primary-500: #1428A0;
  --color-primary-50: var(--color-primary-500);
  --color-primary-100: var(--color-primary-500);
  --color-primary-200: var(--color-primary-500);
  --color-primary-300: var(--color-primary-500);
  --color-primary-400: var(--color-primary-500);
  --color-primary-600: var(--color-primary-500);
  --color-primary-700: var(--color-primary-500);
  --color-primary-800: var(--color-primary-500);
  --color-primary-900: var(--color-primary-500);

  /* Secondary — 공식 블랙. 기업 소개 페이지의 행동 버튼 색 */
  --color-secondary-500: #000000;

  /* Neutral — 공식 기업 소개 CSS의 흑백 값 */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F7F7F7;   /* .textblock.bg-gray */
  --color-neutral-100: #EEEEEE;  /* 버튼 호버 글자 */
  --color-neutral-300: #DDDDDD;  /* 비활성 면·옅은 경계 */
  --color-neutral-400: #B2B2B2;  /* 삼성닷컴 입력 밑줄 */
  --color-neutral-500: #AAAAAA;  /* 비활성 강조 버튼 글자 */
  --color-neutral-700: #555555;  /* 검정 버튼 호버 면 */
  --color-neutral-900: #313131;  /* 설명·진한 회색 면 */
  --color-neutral-1000: #000000;

  /* Semantic — 역할 연결은 (추정), 사용 색 자체는 공식 CSS 실측 */
  --color-success-bg: var(--color-neutral-50);
  --color-success-fg: var(--color-neutral-1000);
  --color-warning-bg: var(--color-neutral-50);
  --color-warning-fg: var(--color-neutral-1000);
  --color-error-bg: var(--color-neutral-0);
  --color-error-fg: #FA2337;     /* common.css .inp-box .error-msg p */
  --color-info-bg: var(--color-neutral-50);
  --color-info-fg: var(--color-neutral-1000);

  /* Surface — 면 색은 공식 CSS, 별칭의 역할은 이 문서의 정리 */
  --bg-base: var(--color-neutral-0);
  --bg-subtle: var(--color-neutral-50);
  --bg-elevated: var(--color-neutral-0);
  --bg-overlay: var(--color-neutral-0); /* 팝업 면만 지정, 딤 농도는 미정 */

  /* Text */
  --text-primary: var(--color-neutral-1000);
  --text-secondary: var(--color-neutral-900);
  --text-tertiary: var(--color-neutral-700);
  --text-on-primary: var(--color-neutral-0);
  --text-disabled: var(--color-neutral-500);

  /* Border — 기본·옅은 선의 역할 연결은 (추정) */
  --border-default: var(--color-neutral-300);
  --border-subtle: var(--color-neutral-100);
  --border-strong: var(--color-neutral-400);
  --border-focus: var(--color-neutral-1000);

  /* 기업 소개 웹의 검정 버튼 */
  --color-action: var(--color-neutral-1000);
  --color-action-hover: var(--color-neutral-700);
  --font-body: 'SamsungOneKorean', 'SamsungOne', 'Apple SD Gothic Neo', 'Malgun Gothic', Arial, sans-serif;
  --font-heading: 'Samsung Sharp Sans', 'SamsungOneKorean', 'Apple SD Gothic Neo', 'Malgun Gothic', Arial, sans-serif;
}

삼성닷컴의 일부 구매 버튼에는 별도의 밝은 블루 #2189FF가 쓰인다(common.css .btn-type3). 그 값을 기업 CI 대표색으로 바꾸어 기록하지 않는다. 로고는 위 공식 3색을 기준으로 표현한다.

Typography

타이포그래피

폰트 페어링:
- 한글: SamsungOneKorean — common.css에 400·700 파일과 한글 범위 선언이 있다. 삼성 전용 서체이며 일반 배포 라이선스는 확인하지 못했다. 폴백은 Apple SD Gothic Neo·Malgun Gothic.
- 영문: SamsungOne 본문과 Samsung Sharp Sans 제목 — 공식 CSS의 실제 가족 이름과 폰트 파일로 확인했다. 삼성 전용 서체이며 일반 배포 라이선스는 확인하지 못했다. 폴백은 Arial.
위계: 기업 소개 textblock CSS에 정의된 크기를 아래 역할로 연결했다. 역할별 배치는 (추정)이며, 로고 페이지의 실제 섹션 제목은 PC 38px·모바일 26px, 설명은 PC 18px·모바일 12~14px이다.
- Display: 60px / 700 / 1.2 / normal
- H1: 48px / 700 / 1.2 / normal
- H2: 38px / 700 / 1.2 / normal
- H3: 24px / 700 / 1.33 / normal
- Body Large: 18px / 400 / 1.33 / normal
- Body: 18px / 400 / 1.33 / normal — 기업 소개 본문과 같은 크기
- Body Small: 14px / 400 / 1.33 / normal
- Caption: 12px / 400 / 1.33 / normal
버튼 글자: 공식 .cta는 14px / bold / 19px. 본문과 버튼의 행간을 같은 값으로 묶지 않는다.
자간: 위 자간은 별도 선언이 없는 기업 소개 CSS의 기본값이다. 미리보기 영문 모델명의 좁은 자간은 작은 화면에 맞춘 재구성(추정)으로, 공식 서체의 자간 토큰을 뜻하지 않는다. 굵은 영문 두 줄과 작은 한국어 혜택 한 줄의 크기 차이를 크게 둔다.
미리보기 서체: 외부 폰트를 불러오지 않는다. 삼성 전용 서체가 설치되지 않은 환경에서는 시스템 서체로 표시돼 실제 서체와 글자 모양이 달라질 수 있다.

Spacing

스페이싱

Base unit: 8px (추정) — 확인된 16·24·32·64·96px를 묶는 정리 단위이며 공식 베이스 토큰은 아니다.
토큰:

:root {
  --space-xs: 4px;    /* (추정) 작은 요소 간격, 공개 CI 수치 없음 */
  --space-sm: 8px;    /* (추정) 작은 요소 간격 */
  --space-md: 16px;   /* textblock 제목 아래 간격 */
  --space-lg: 24px;   /* 버튼 가로 패딩·넓은 컨테이너 좌우 패딩 */
  --space-xl: 32px;   /* blank-space PC small */
  --space-2xl: 64px;  /* blank-space PC medium */
  --space-3xl: 96px;  /* blank-space PC large */
}

Container: 최대 1440px. 넓은 textblock의 좌우 패딩은 PC 24px, 좁은 기본 본문은 142px이다. 모바일은 6.66666667vw, 즉 화면 폭 360px에서 24px이다.
보호 여백: 로고 주변은 화면의 간격 단위보다 0.5s를 우선한다. 카드와 ⑫의 헤더 로고 모두 이 최소 여백보다 넓게 배치한다.
압축 카드: hero_html의 6~20px 글자와 3~14px 간격은 320×240·280×210 안에서 재배치한 값(추정)이다. 전체 화면을 transform으로 축소하지 않고 높이에 따라 제품 무대가 줄어든다. 원본 사이트의 일반 UI 수치로 사용하지 않는다.

Border Radius

기업 소개 페이지의 채운 버튼·외곽선 버튼은 20px, 삼성닷컴 밑줄 입력은 0px이다. CI 소개 면은 각진 화면 관찰을 따른다(추정). 공개되지 않은 카드 반지름 단계를 새로 만들지 않고 0px 별칭으로 둔다. ⑫ 쇼핑 카드의 20px는 기존 반지름을 재사용한 예시 배치(추정)이며 새로운 공식 카드 토큰이 아니다.

:root {
  --radius-none: 0;
  --radius-sm: var(--radius-none);  /* 미정 단계의 별칭 */
  --radius-md: var(--radius-none);
  --radius-lg: var(--radius-none);
  --radius-xl: var(--radius-none);
  --radius-full: 20px;             /* 높이 40px 버튼의 실제 반지름 */
}

Shadow / Elevation

기업 CI 본문에서 그림자로 층을 나누는 규정은 확인되지 않았다. 기본 화면은 평평한 면으로 정리하고, 미정 그림자 단계는 모두 none으로 둔다. 아래는 공식 그림자 단계표가 아니다. ⑫의 금속 하이라이트·렌즈·바닥 접지 그림자는 제품 일러스트 내부 표현이며 UI의 elevation 단계와 분리한다.

:root {
  --shadow-none: none;                  /* 기본 본문·CI 소개 면 */
  --shadow-sm: var(--shadow-none);       /* 툴팁 그림자 미정 */
  --shadow-md: var(--shadow-none);       /* 카드 그림자 미정 */
  --shadow-lg: var(--shadow-none);       /* 팝업 그림자 미정 */
  --shadow-xl: var(--shadow-none);       /* 큰 대화창 그림자 미정 */
}

Iconography

스타일: Outline 중심 — 삼성닷컴의 검색·닫기 등 단색 도구 아이콘과 어울리는 방식(관찰).
Stroke 굵기: 1.5px (추정). 기업 CI의 공통 아이콘 선 굵기 규정은 확인되지 않았다.
모서리 처리: Round (추정). 작은 탐색 아이콘은 부드럽게, 레터마크는 공식 윤곽 그대로 쓴다.
추천 라이브러리: 일반 기능 아이콘이 필요하면 Lucide를 대체재로 쓴다. 삼성 공식 아이콘 세트라는 뜻은 아니다.
로고 구분: 레터마크는 일반 아이콘·텍스트 글꼴로 대체하지 않는다. 이 문서의 로고는 공식 global-samsung-logo.svg의 path와 viewBox를 보존했으며, 식별자가 없는 원본이라 SVG id 충돌도 없다.

Component Guide

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

아래 클래스 이름은 이 문서용이다. 기본 버튼의 검정·흰색·20px 반지름·호버 색·200ms는 기업 소개 CSS를 옮겼다. 입력 밑줄은 삼성닷컴 CSS를 참고했다. Danger·Loading·Active 상태와 카드·배지의 역할 구성은 (추정)이며 공식 CI 컴포넌트 규격으로 주장하지 않는다.

버튼 (Button) — 주 버튼 / 보조 버튼 / 글자 버튼 / 주의 버튼. 각 변형은 기본·호버·눌림·비활성·처리 중 상태를 공유한다.

.se-btn {
  --se-btn-bg: var(--color-action);
  --se-btn-fg: var(--text-on-primary);
  --se-btn-border: transparent;
  --se-btn-hover-bg: var(--color-action-hover);
  --se-btn-hover-fg: var(--color-neutral-100);
  --se-btn-hover-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 var(--space-lg);
  border: 1px solid var(--se-btn-border);
  border-radius: var(--radius-full);
  background: var(--se-btn-bg);
  color: var(--se-btn-fg);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 19px;
  cursor: pointer;
  transition: color var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out), border-color var(--duration-base) var(--ease-out);
}
.se-btn--secondary {
  --se-btn-bg: transparent;
  --se-btn-fg: var(--text-primary);
  --se-btn-border: var(--text-primary);
  --se-btn-hover-bg: rgba(0, 0, 0, 0.05); /* 공식 외곽선 버튼 호버 */
  --se-btn-hover-fg: var(--color-neutral-700);
  --se-btn-hover-border: var(--color-neutral-700);
}
.se-btn--ghost {
  --se-btn-bg: transparent;
  --se-btn-fg: var(--text-primary);
  --se-btn-hover-bg: transparent;
  --se-btn-hover-fg: var(--color-neutral-700);
  padding-inline: 0;
  border-radius: var(--radius-none);
  text-decoration: underline;
  text-underline-offset: 4px; /* (추정) 밑줄 간격 */
}
.se-btn--danger {
  --se-btn-bg: var(--bg-base);
  --se-btn-fg: var(--text-primary);
  --se-btn-border: var(--color-error-fg);
  --se-btn-hover-bg: var(--bg-subtle);
  --se-btn-hover-fg: var(--text-primary);
  --se-btn-hover-border: var(--color-error-fg);
}
.se-btn:hover:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]),
.se-btn:active:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) {
  background: var(--se-btn-hover-bg);
  color: var(--se-btn-hover-fg);
  border-color: var(--se-btn-hover-border);
}
.se-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.se-btn:disabled, .se-btn[aria-disabled="true"] {
  background: var(--color-neutral-300);
  color: var(--color-neutral-100);
  border-color: transparent;
  cursor: default;
}
.se-btn--secondary:disabled, .se-btn--secondary[aria-disabled="true"],
.se-btn--danger:disabled, .se-btn--danger[aria-disabled="true"] {
  background: transparent;
  color: var(--color-neutral-300);
  border-color: var(--color-neutral-300);
}
.se-btn--ghost:disabled, .se-btn--ghost[aria-disabled="true"] {
  background: transparent;
  color: var(--color-neutral-300);
}
.se-btn[aria-busy="true"] { cursor: progress; }
.se-btn[aria-busy="true"] .se-btn__label { display: none; }
.se-btn[aria-busy="true"]::after { content: "처리 중…"; }

입력 (Input) — 기본 / 포커스 / 오류 / 비활성. 오류는 빨간 밑줄과 설명 문구를 함께 쓴다.

.se-input {
  width: 100%;
  height: 32px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: var(--radius-none);
  background: var(--bg-base);
  color: var(--text-primary);
  font: 700 14px/1.33 var(--font-body);
  letter-spacing: -0.28px; /* common.css .inp-line */
}
.se-input:focus { outline: none; border-bottom: 2px solid var(--border-focus); }
.se-input[aria-invalid="true"] { border-bottom: 2px solid var(--color-error-fg); }
.se-input:disabled { color: var(--color-neutral-400); border-color: var(--color-neutral-400); cursor: default; }
.se-input-note { margin-top: 6px; color: var(--text-secondary); font: 400 14px/18px var(--font-body); }

카드 (Card) — 기본형 / 강조형 / 외곽선형. 공식 기업 소개 화면의 평평한 면을 응용한 구성(추정).

.se-card { padding: var(--space-lg); background: var(--bg-subtle); color: var(--text-primary); border-radius: var(--radius-none); box-shadow: var(--shadow-none); }
.se-card--strong { background: var(--color-primary-500); color: var(--text-on-primary); }
.se-card--outlined { background: var(--bg-base); border: 1px solid var(--border-default); }
.se-card h3 { margin: 0 0 var(--space-md); font: 700 24px/1.33 var(--font-heading); }
.se-card p { margin: 0; font: 400 14px/1.33 var(--font-body); }

배지·태그 (Badge / Tag) — 채움형 / 옅은형 / 외곽선형. 20px 높이·10px 반지름·12px 글자는 공식 CSS의 .badge-icon--label에서 확인했다. 아래 색 역할은 (추정).

.se-badge { display: inline-flex; align-items: center; height: 20px; padding: 2px 6px; border-radius: 10px; font: 700 12px/16px var(--font-body); }
.se-badge--solid { background: var(--color-action); color: var(--text-on-primary); }
.se-badge--subtle { background: var(--bg-subtle); color: var(--text-primary); }
.se-badge--outline { border: 1px solid var(--border-default); background: transparent; color: var(--text-primary); }

탐색 (Navigation) — 흰 헤더 안에 실제 레터마크와 검정 메뉴를 둔다. 아래 높이·배치·활성 밑줄은 기업 소개 화면에 맞춘 예시(추정).

.se-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); min-height: 72px; padding: var(--space-lg); background: var(--bg-base); border-bottom: 1px solid var(--border-subtle); }
.se-nav__logo { display: block; width: 105px; height: 16px; flex: none; }
.se-nav__menu { display: flex; gap: var(--space-lg); }
.se-nav__item { padding: 0 0 var(--space-xs); border: 0; border-bottom: 1px solid transparent; background: transparent; color: var(--text-primary); font: 700 14px/1.33 var(--font-body); cursor: pointer; }
.se-nav__item:hover { color: var(--text-tertiary); }
.se-nav__item[aria-current="page"] { border-bottom-color: var(--text-primary); }
.se-nav__item:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }

Motion

공식 기업 소개 .cta의 전환은 200ms, 곡선은 cubic-bezier(0.33, 0, 0.3, 1)이다. 공개된 빠름·기본·느림 단계표는 없어 모든 시간 키가 같은 실측값을 가리킨다.

:root {
  --duration-base: 200ms;                /* 공식 버튼의 색 전환 */
  --duration-fast: var(--duration-base); /* 별도 속도 미정 */
  --duration-slow: var(--duration-base);  /* 별도 속도 미정 */
  --ease-out: cubic-bezier(0.33, 0, 0.3, 1);
  --ease-in-out: var(--ease-out);        /* 별도 곡선 미정 */
}
@media (prefers-reduced-motion: reduce) {
  .se-btn { transition: none; }
}

색 변화처럼 행동을 확인하는 움직임만 적용한다. 로고를 회전·변형하거나 계속 움직이는 장식을 더하지 않는다.

Anti-patterns

1. 레터마크를 일반 글자로 입력하거나 path를 다시 그려 비슷하게 만들지 않는다. 공식 SVG의 글자 모양과 간격을 유지한다. 2. 로고를 늘이거나 줄여 가로세로 비율을 바꾸지 않는다. 주변 최소 0.5s 여백에 다른 요소를 넣지 않는다. 3. 삼성닷컴의 밝은 구매 버튼 색을 기업 CI의 삼성 블루로 기록하지 않는다. CI 대표색은 #1428A0이다. 4. 어두운 배경용 흰 레터마크나 검정 구획만으로 다크 모드를 지원한다고 표시하지 않는다. 5. 제품 쇼핑 장면을 CI 슬로건·색상 견본·레터마크 전시로 바꾸지 않는다. 제품이 가장 큰 그림이어야 하며 실제 모델명·가격의 위계를 함께 보여 준다. 공개되지 않은 제품 일러스트 색·그림자·축소 배치를 공식 토큰처럼 기록하지 않는다.

Sources

출처

Samsung Electronics (삼성전자) 이름과 로고는 각 권리자의 상표입니다.