Samsung Electronics (삼성전자)

보랏빛 그라디언트 무대 위 펼친 갤럭시 폴드 렌더와 #2189FF 선택 링 옵션 칸, 검정 알약 「구매하기」

한국소비자이커머스제조차가운modern-minimal고딕comfortablesoftflat라이트한글 지원출시 2005개정 2024

Brand DNA

브랜드 DNA

브랜드명: 삼성전자 (Samsung Electronics) — 한국 공식 온라인 스토어 삼성닷컴(samsung.com/sec). 갤럭시 스마트폰·TV·비스포크 AI 가전을 직접 판다. 휴대폰 안의 화면(One UI)은 이 문서가 아니라 samsung-one-ui 가 다룬다.
한 줄 정체성: 휴대폰·TV·가전·반도체를 만드는 전자 회사. 삼성닷컴은 흰 바탕과 검정 글자 사이에 제품 렌더를 크게 세우고, 고객이 고른 칸만 파랗게 표시하는 「제품이 주인공인」 쇼핑 화면이다.
공식 디자인 철학: 로고 페이지의 표어는 「간결함, 상징적, 영원함」, 컬러 & 타이포그래피 페이지의 표어는 「몰입감 있고, 역동적이며, 독특한」이다. 블루는 1993년부터 삼성을 상징한 색이고 공식 문서는 이를 「우리의 정체성을 정의하는 북극성」이라 부른다. 색을 쓰는 원칙은 네 가지로 적혀 있다 — 흑백 대비 · 텍스처를 위한 저대비 디테일 · 따뜻함을 위한 추가 컬러 · 의미 있는 제품 배치. 브랜드 토널리티는 Bold·Genuine·Contemporary·Playful, 브랜드 스토리는 「우리는 끊임없이 새로운 길을 여는 개척자입니다」.
시그니처 요소 1개: 제품 렌더를 받치는 부드러운 그라디언트 무대(폴드8 울트라 구매 화면은 위 #4F4557 → 아래 #8E7B9D 보랏빛, 뒤에 흐린 「ULTRA」 큰 글자) 옆에 흑백 옵션 칸을 두고, 선택만 `#2189FF` 2px 안쪽 링, 결정은 검정 알약 「구매하기」(172×40px, 반지름 20px)로 받는다.
로고: 영문 레터마크 「SAMSUNG」 하나. 지금 모양은 2005년 개선 작업의 결과다(사람 눈이 글자를 알아보는 방식에 맞춰 글자 간격·높이를 다듬었다). 색은 삼성 블루·검정·흰색 세 가지만 쓰고 주변에 빈 공간을 둔다. 삼성닷컴 헤더는 검정 레터마크다.

> 현행 기준 메모 (2026-10-04 삼성닷컴 실측): 첫 화면 히어로는 「Available now — Galaxy Z Fold8 Ultra | Fold8 | Flip8」. 갤럭시 Z 폴드8 울트라 자급제 256GB(SM-F976NZVPKOO) 는 기준가 2,577,300원 → 즉시 할인 −155,900원 → 최대 혜택가 2,421,400원(6%), 최대 24개월 카드 무이자 월 100,892원~. 색은 그린 쉐도우(삼성닷컴·삼성 강남 전용)·바이올렛 쉐도우·그라파이트·크림, 용량은 256GB·512GB(램 12GB)·1TB(16GB), 화면 164.8mm. 폴드8 은 기준가 2,278,100원·혜택가 2,140,300원(138.4mm), 플립8 은 기준가 1,683,000원·혜택가 1,530,700원(104.8mm).

Tone & Mood

톤 & 무드

핵심 키워드 3개: 대담함, 명료함, 몰입감
무드 설명: 바탕은 흰색, 글자와 결정 버튼은 검정이다. 색은 제품 사진과 그라디언트 무대가 맡고, UI 에 들어오는 색은 선택 링·혜택가·「New」에 쓰는 액션 블루 #2189FF 하나다. 제품명·용량·가격의 영문과 숫자는 둥근 기하학 서체 Samsung Sharp Sans 로, 한글은 SamsungOneKorean 으로 써서 한 줄 안에서도 서체가 바뀐다(「갤럭시 Z 폴드8」의 Z·8). 문장은 고객의 말투로 쓴다(「새 기기만 사서 자유롭게 쓸래요」).
비주얼 스타일: 모던 미니멀 — 흑백 대비 위에 제품 렌더만 색을 가진다
밀도(Density): Comfortable — 옵션 칸은 높이 56px·간격 12px 로 촘촘하지만, 옵션 구획 사이는 약 100px 을 띄운다(실측).
모서리 성향: Soft (옵션 칸·혜택 카드·특징 아이콘 상자 6px, 주문 요약 안 흰 상자 12px). 버튼만 알약(높이 40px·반지름 20px)이고, 갤러리·제품 타일·헤더는 0px.
평면성: Flat — 그림자 대신 inset 0 0 0 1px #DDD 안쪽 테두리로 칸을 나누고, 고르면 inset 0 0 0 2px #2189FF 로 바꾼다. 칸 크기가 변하지 않는다.

Color System

컬러 시스템 (CSS 변수)

공식 값(삼성 블루 PMS 286C·RGB 20/40/160)과 삼성닷컴 구매 화면 CSS(flagship_pd.css)·공통 CSS(common.css)의 hex 빈도, 화면 픽셀 실측을 묶었다. 구매 화면에서 가장 많이 쓰는 색은 #000(119회)·#2189FF(79회)·#FFF(77회)·#DDD(48회)·#555(38회) 순이다. 표시 없는 값은 실측, (추정) 은 보간이다.

:root {
  /* Primary — Samsung Blue. CI·레터마크·구독클럽 배지·안내 띠 같은 브랜드 순간에만 */
  --color-primary-50:  #F5F7FE;  /* 실측 — 혜택 카드의 아이콘 칸 바탕 (flagship_pd.css 3회) */
  --color-primary-100: #E2E7F8;  /* (추정) 보간 */
  --color-primary-200: #B9C3EA;  /* (추정) 보간 */
  --color-primary-300: #8C9ED1;  /* (추정) 보간 */
  --color-primary-400: #4A5FBF;  /* (추정) 보간 */
  --color-primary-500: #1428A0;  /* 공식 Samsung Blue — PMS 286C, CMYK 100/80/0/0 */
  --color-primary-600: #19279A;  /* 실측 common.css */
  --color-primary-700: #0B3486;  /* 실측 — 「삼성카드 결제만 가능합니다」 남색 띠 */
  --color-primary-800: #0A2466;  /* (추정) */
  --color-primary-900: #061543;  /* (추정) */

  /* Secondary — 삼성닷컴 액션 블루: 선택 링·혜택가·New·「매장 픽업하기」 링크 */
  --color-secondary-50:  #F5FAFF;  /* 실측 — 선택된 비교 칸 바탕 */
  --color-secondary-100: #EEF7FF;  /* 실측 — 구독 행 강조 */
  --color-secondary-500: #2189FF;  /* 실측 flagship_pd.css 79회 */
  --color-secondary-600: #1E81F8;  /* 실측 — 모바일 New·할인율 글자 */

  /* 공식 보조 팔레트 — 컬러 & 타이포그래피 페이지 띠에서 실측. 캠페인·일러스트 전용 */
  --brand-blue: #0077C8;  --brand-cyan: #00B3E3;  --brand-teal: #00C3B2;  --brand-periwinkle: #8091DF;
  --brand-green: #96D551; --brand-orange: #FFB446; --brand-red: #FF4337;

  /* Neutral */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F7F7F7;  /* 제품 타일·검색 버튼·주문 요약 바탕 (common.css 43회) */
  --color-neutral-100:  #EBEBEB;
  --color-neutral-200:  #DDDDDD;  /* 옵션 칸 기본 테두리 */
  --color-neutral-300:  #B2B2B2;  /* 입력 밑줄 */
  --color-neutral-400:  #8F8F8F;  /* 비활성 구매 버튼 */
  --color-neutral-500:  #707070;  /* 보조 글자 (common.css 102회) */
  --color-neutral-600:  #555555;  /* 「혜택가」 라벨·설명 */
  --color-neutral-800:  #212425;
  --color-neutral-900:  #000000;  /* 본문·검정 버튼 — 회색 글자 대신 순수 검정 */
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #E6F4F5;  /* (추정) */
  --color-success-fg: #007D89;  /* 실측 flagship_pd.css, 역할은 (추정) */
  --color-warning-bg: #FFF4E5;  /* (추정) */
  --color-warning-fg: #A35A00;  /* (추정) 별점 주황 #FFAA4E 는 글자로는 대비 부족 */
  --color-error-bg:   #FFF0F1;  /* (추정) */
  --color-error-fg:   #FA2337;  /* 실측 common.css .error-msg */
  --color-info-bg:    #F5F7FE;  /* 실측 */
  --color-info-fg:    #2189FF;

  /* Surface */
  --bg-base: #FFFFFF;
  --bg-subtle: #F7F7F7;          /* 제품 타일·특징 아이콘 상자·요약 */
  --bg-elevated: #FFFFFF;        /* 요약 안의 흰 상자(즉시 할인) */
  --bg-overlay: rgba(0, 0, 0, 0.5); /* (추정) 레이어 딤 */
  --bg-inverse: #000000;         /* 구매하기·선택된 제품 탭 밑줄 */
  --bg-stage-top: #4F4557;       /* 실측 — 폴드8 울트라 갤러리 무대 위 */
  --bg-stage-bottom: #8E7B9D;    /* 실측 — 무대 아래 */

  /* Text */
  --text-primary: #000000;
  --text-secondary: #555555;
  --text-tertiary: #707070;
  --text-on-primary: #FFFFFF;
  --text-disabled: #B2B2B2;
  --text-price: #2189FF;         /* 최대 혜택가·할인율 */
  --star: #FFAA4E;               /* 실측 — 별점 */

  /* Border */
  --border-default: #DDDDDD;
  --border-subtle: #EBEBEB;
  --border-strong: #000000;      /* 외곽선 버튼·선택 탭 */
  --border-focus: #000000;       /* 입력 포커스 = 밑줄 2px 검정 (실측) */
  --border-selected: #2189FF;    /* 선택 링 2px (실측) */
}

라이트 전용: 삼성닷컴에는 사이트 전체 다크 모드가 없다. 어두운 사진 위 구역만 data-theme="dark" 로 글자·버튼을 흰색으로 뒤집는다.
두 개의 파랑: CI 의 삼성 블루 #1428A0 와 UI 의 액션 블루 #2189FF 는 다른 색이다. 버튼 면은 둘 다 아니고 검정이다.

Typography

타이포그래피

폰트 페어링:
- 한글: SamsungOneKorean (삼성 전용, 비공개 — 사이트에 400·700 두 굵기가 실린다). 사이트 폴백은 Dotum·돋움. 대체 권장: Pretendard, Apple SD Gothic Neo, Malgun Gothic.
- 영문: Samsung Sharp Sans (제목·제품명·용량·가격 — 사이트에 보통·굵게, 공식 견본은 Bold·Medium) + SamsungOne 400/700 (본문 영문). 둘 다 전용 서체다. 대체 권장: 한 층짜리 「a」를 가진 기하학 산세리프(Century Gothic·Futura) / 본문은 Arial·Inter.
섞어 쓰기: 제품명·가격 칸은 font-family: "Samsung Sharp Sans", SamsungOneKorean 순서로 적는다(실측). 영문·숫자만 Sharp Sans 가 되고 한글은 다음 서체로 넘어간다.
위계 (font-size / weight / line-height / letter-spacing, 삼성닷컴 실측):
- Display: 40px / 700 / 40px / normal — 구역 제목 「당신에게 딱 맞는 추천제품」 (Sharp Sans + OneKorean)
- H1: 24px / 700 / 32px / -0.48px — 구매 화면 제품명, 「색상」「용량」 구획 제목
- H2: 22px / 700 / 30px / -0.44px — 상단 고정 띠의 제품명, 추천 제품명
- H3: 18px / 700 / 24px / -0.36px — 옵션 칸 제목 「자급제」·「256GB」
- Body Large: 16px / 400 / 21px / normal — 「혜택가」 라벨(#555)
- Body: 14px / 400 / 18px / -0.28px — 사이트 최다(flagship_pd.css 14px 255회). 한글 자간은 늘 -0.02em
- Body Small: 12px / 400 / 16px(추정) / -0.24px — 안내·주석 (flagship_pd.css 12px 208회)
- Caption: 10~11px / 400 — 법적 고지·이미지 설명
- 가격: 24px / 700 / 28px / -0.48px Sharp Sans #2189FF. 월 할부는 20~22px / 700 검정
- 히어로 카피: 32px / 400 / 39px — 「New 갤럭시 AI 구독클럽 혜택을 확인하세요」

Spacing

스페이싱

Base unit: 4px (실측 간격 12·16·24·100px 이 모두 4의 배수)
토큰:

--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;         /* 옵션 칸 세로 패딩 (16px 24px 실측) */
--space-lg: 24px;         /* 옵션 칸 가로 패딩·헤더 좌우 여백 (실측) */
--space-xl: 40px;         /* 구획 제목 → 첫 칸 (실측 약 42px) */
--space-2xl: 64px;        /* (추정) 첫 화면 구역 안 여백 */
--space-3xl: 96px;        /* 옵션 구획 사이 (실측 약 100px) */
--space-option-gap: 12px; /* 용량 칸 56px 사이 (실측) */

Container: 헤더 좌우 24px. 1280px 화면에서 구매 화면은 왼쪽 갤러리 784px + 오른쪽 옵션 열 348px(x 882). 최대 폭 1440px (추정).

Border Radius

--radius-none: 0;       /* 헤더·제품 탭·갤러리·제품 타일·입력 밑줄 */
--radius-sm: 6px;       /* 옵션 칸·특징 아이콘 상자·혜택 카드 (flagship_pd.css 24회, 최다) */
--radius-md: 10px;      /* 공통 레이어·작은 상자 (common.css 43회, 쓰임은 추정) */
--radius-lg: 12px;      /* 주문 요약 안 흰 상자 (실측) */
--radius-xl: 20px;      /* 버튼 — 높이 40px 의 절반이라 알약이 된다 (실측) */
--radius-full: 9999px;  /* 색상 칩 36px·검색 버튼·수량 스테퍼 */

Shadow / Elevation

삼성닷컴은 칸을 그림자로 띄우지 않는다. 테두리도 border 대신 안쪽 그림자로 그려 선택해도 칸 크기가 그대로다.

--ring-default: inset 0 0 0 1px #DDDDDD;   /* 옵션 칸·통신사 칸 기본 (실측 7회) */
--ring-selected: inset 0 0 0 2px #2189FF;  /* 선택된 칸·선택된 색상 칩 (실측 9회) */
--ring-chip: inset 0 0 0 1px #7F7F7F;      /* 고르지 않은 색상 칩 (실측) */
--shadow-none: none;                        /* 기본 — 카드·타일 모두 */
--shadow-sm: 0 4px 8px rgba(0, 0, 0, 0.2);  /* 툴팁·떠 있는 AI 버튼 (실측 #00000034) */
--shadow-md: 0 -3px 6px rgba(0, 0, 0, 0.16); /* 모바일 하단 고정 구매 바 — 위로 드리움 (실측) */
--shadow-lg: 0 -3px 6px rgba(0, 0, 0, 0.2);  /* 하단 고정 바 강조 (실측) */
--shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.18); /* (추정) 레이어 팝업 */

Iconography

스타일: Outline 단색 — 헤더의 검색(연회색 #F7F7F7 36px 원 안)·장바구니·내 정보, 구매 화면 특징 아이콘(초슬림 디자인 「→‖←」, 멀티 윈도우, 최고사양 카메라 — #F7F7F7 6px 상자 안 3칸)
Stroke 굵기: 1.5px (추정, 24px 격자)
모서리 처리: Round
추천 라이브러리: Lucide (stroke 1.5)
예외 두 가지: ① Galaxy AI 반짝이 — 큰 네 갈래 별(파랑 #2983F9→#3366C1)에 작은 청록 별(#38A2B8)을 붙인 묶음으로, 「Galaxy AI」「Samsung Vision AI」「Bespoke AI」 글자 옆에만 붙는 유일한 그라디언트 아이콘이다. ② 빠른배송 — 파란 정육면체 상자 + 기울인 굵은 파랑 글자.

Component Guide

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

:root {
  --font-head: 'Samsung Sharp Sans', 'SamsungSharpSans', 'Century Gothic', 'SamsungOneKorean', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-body: 'SamsungOneKorean', 'SamsungOne', 'Apple SD Gothic Neo', 'Malgun Gothic', Arial, sans-serif;
}

Button — 실측 .pay_btn(검정 172×40), .cta-outl(외곽선), .cta-undr(밑줄 글자), .btn_preview_more(32px). 전부 반지름 20px 알약이고 색 전환은 200ms linear.

.se-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 var(--space-lg); border: 1px solid transparent; border-radius: var(--radius-xl); font: 700 14px/18px var(--font-body); letter-spacing: -0.28px; white-space: nowrap; cursor: pointer; transition: background-color var(--duration-fast) linear, border-color var(--duration-fast) linear, color var(--duration-fast) linear; }
.se-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.se-btn--primary { background: var(--bg-inverse); border-color: var(--bg-inverse); color: var(--text-on-primary); }   /* 구매하기 */
.se-btn--primary:hover { background: var(--color-neutral-800); border-color: var(--color-neutral-800); }    /* (추정) 구매 화면엔 hover 규칙이 없다 */
.se-btn--primary:active { background: var(--color-neutral-600); border-color: var(--color-neutral-600); }  /* (추정) */
.se-btn--primary:disabled { background: var(--color-neutral-400); border-color: var(--color-neutral-400); cursor: default; } /* 실측 #8F8F8F */
.se-btn--primary[aria-busy="true"] { position: relative; color: transparent; }
.se-btn--primary[aria-busy="true"]::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: #FFFFFF; animation: se-spin .8s linear infinite; }
@keyframes se-spin { to { transform: rotate(360deg); } }
.se-btn--secondary { background: transparent; border-color: var(--border-strong); color: var(--text-primary); }      /* .cta-outl */
.se-btn--secondary:hover { background: var(--bg-inverse); color: var(--text-on-primary); }                          /* 실측: 검정으로 채워진다 */
.se-btn--secondary:disabled { background: transparent; border-color: var(--border-default); color: var(--text-disabled); }
.se-btn--sm { height: 32px; padding: 0 16px; }                                                                       /* 「이미지 더 보기」 */
.se-btn--ghost { position: relative; height: auto; padding: 0 0 2px; border: 0; border-radius: 0; background: none; color: var(--text-primary); } /* 「더 알아보기」 */
.se-btn--ghost::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: currentColor; }
.se-btn--ghost:hover::after { animation: se-underline var(--duration-slow) linear; }                                 /* 실측: 밑줄이 0→100% 로 그어진다 */
@keyframes se-underline { from { width: 0; } to { width: 100%; } }
.se-btn--ghost:active { color: rgba(0,0,0,.7); }
.se-btn--danger { background: transparent; border-color: var(--color-error-fg); color: var(--color-error-fg); }      /* (추정) */
.se-btn--danger:hover { background: var(--color-error-bg); }

Input — 고르는 칸(옵션)과 적는 칸(밑줄 입력) 두 종류. 옵션 칸은 실측 label(반지름 6px·패딩 16px 24px), 입력은 실측 .inp-line.

.se-option { display: block; width: 100%; padding: var(--space-md) var(--space-lg); border: 0; border-radius: var(--radius-sm); background: var(--bg-base); box-shadow: var(--ring-default); color: var(--text-primary); font: 400 14px/20px var(--font-body); letter-spacing: -0.28px; text-align: left; cursor: pointer; }
.se-option + .se-option { margin-top: var(--space-option-gap); }
.se-option strong { display: block; font: 700 18px/24px var(--font-head); letter-spacing: -0.36px; }
.se-option[aria-checked="true"] { box-shadow: var(--ring-selected); }
.se-option:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.se-option:disabled { color: var(--text-disabled); cursor: default; }
.se-cap { display: flex; align-items: center; gap: 10px; font: 700 18px/24px var(--font-head); }                    /* 256GB | 12GB */
.se-cap i { width: 1px; height: 18px; background: currentColor; }
.se-cap small { font: inherit; color: var(--text-tertiary); }
.se-chip { width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-full); box-shadow: var(--ring-chip); cursor: pointer; } /* 색상 칩 */
.se-chip[aria-checked="true"] { box-shadow: var(--ring-selected); }
.se-input { width: 100%; height: 32px; padding: 0; border: 0; border-bottom: 1px solid var(--color-neutral-300); border-radius: 0; background: transparent; color: var(--text-primary); font: 700 14px/18px var(--font-body); letter-spacing: -0.28px; }
.se-input:focus { outline: none; border-bottom: 2px solid var(--border-focus); }
.se-input[aria-invalid="true"] { border-bottom: 2px solid var(--border-focus); }   /* 밑줄은 검정 그대로, 아래 문구만 빨강 */
.se-input-error { padding-top: 6px; color: var(--color-error-fg); font-size: 14px; line-height: 18px; }
.se-input:disabled { color: var(--text-disabled); border-color: #A6A6A6; }

Card

.se-card { padding: var(--space-lg); background: var(--bg-subtle); border-radius: var(--radius-none); }                    /* 첫 화면 제품 타일 — 회색 면 위 제품명 + 렌더 */
.se-card--benefit { background: var(--bg-base); box-shadow: var(--ring-default); border-radius: var(--radius-sm); }       /* 「삼성닷컴 회원에게 드리는 특별한 혜택」 — 실측 1px #DDD·6px */
.se-card--strong { background: var(--color-primary-700); color: var(--text-on-primary); }                                 /* 구독클럽 남색 띠 */
.se-card--outlined { background: var(--bg-base); box-shadow: var(--ring-default); border-radius: var(--radius-lg); }

Badge / Tag — 「New」는 바탕 없이 파란 글자만, 빠른배송은 기울인 파랑, 구독클럽은 남색 알약

.se-badge { display: inline-flex; align-items: center; gap: 3px; font: 700 14px/16px var(--font-head); letter-spacing: -0.28px; white-space: nowrap; }
.se-badge--new { color: var(--color-secondary-500); }                                                     /* 실측 14px Sharp Sans */
.se-badge--fast { color: var(--color-secondary-500); font-size: 12px; font-style: italic; }
.se-badge--fast::before { content: ""; width: 12px; height: 12px; background: linear-gradient(135deg, #8DCBFF 0 40%, #2189FF 40% 70%, #1462CC 70%); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
.se-badge--club { gap: 6px; padding: 3px 12px 3px 3px; border-radius: var(--radius-full); background: var(--color-primary-500); color: var(--text-on-primary); font-size: 13px; }
.se-badge--club i { padding: 1px 7px; border-radius: var(--radius-full); background: var(--bg-base); color: var(--color-primary-500); font-style: normal; }
.se-badge--subtle { padding: 2px 8px; border-radius: var(--radius-sm); background: var(--color-secondary-50); color: var(--color-secondary-500); font-size: 12px; } /* (추정) */
.se-badge--outline { padding: 1px 8px; border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px var(--color-primary-500); color: var(--color-primary-500); font-size: 12px; }

Navigation — 헤더(GNB) + 제품 탭. 실측: 헤더 106px(위 유틸 줄 40px + 메뉴 줄 66px), 메뉴 14px 700, 검색 버튼 36px #F7F7F7 원, 제품 탭 70px 높이 16px 700 Sharp Sans

.se-gnb { display: flex; align-items: center; gap: 28px; height: 64px; padding: 0 var(--space-lg); background: var(--bg-base); }
.se-gnb__logo { width: 120px; height: auto; }
.se-gnb__menu { display: flex; flex-wrap: wrap; height: 47px; min-width: 0; overflow: hidden; font: 700 14px/19px var(--font-body); white-space: nowrap; } /* 좁으면 넘친 메뉴는 다음 줄로 숨긴다 */
.se-gnb__menu a { padding: 14px 10px; color: var(--text-primary); text-decoration: none; }
.se-gnb__util { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.se-gnb__search { width: 36px; height: 36px; border-radius: var(--radius-full); background: var(--bg-subtle); display: grid; place-items: center; }
.se-tabs { display: flex; align-items: stretch; gap: 24px; height: 52px; padding: 0 var(--space-lg); overflow-x: auto; box-shadow: inset 0 1px 0 var(--border-default), inset 0 -1px 0 var(--border-default); font: 700 16px/20px var(--font-head); white-space: nowrap; }
.se-tabs a { position: relative; display: flex; align-items: center; color: var(--text-primary); text-decoration: none; }
.se-tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--border-strong); }

Motion

:root {
  --duration-fast: 200ms;                    /* 버튼 색 전환 (.cta-outl 200ms linear 실측) */
  --duration-base: 400ms;                    /* 레이어 투명도 (.4s 실측) */
  --duration-slow: 500ms;                    /* 「더 알아보기」 밑줄 그어지기·슬라이드 (.5s 실측) */
  --ease-out: cubic-bezier(0, 0.18, 0.07, 1); /* transform .5s 실측 */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* opacity .4s 실측 */
}

자동으로 넘어가는 배너에는 「1 / 2 ‖」 처럼 쪽수와 일시정지를 붙이고(모바일 첫 화면 실측), 구매 화면 갤러리는 흰 원 좌우 화살표·영상 재생 버튼·점 3개로 넘긴다. 튀는 바운스는 쓰지 않는다. prefers-reduced-motion 이면 자동 넘김과 밑줄 애니메이션을 끈다.

Anti-patterns

1. 파란 버튼으로 구매를 받지 않는다 — 구매·장바구니는 검정 알약이고, #2189FF 은 선택 링·혜택가·링크에만 쓴다. 2. 옵션 칸에 그림자나 바깥 테두리를 두르지 않는다 — 기본 1px #DDD, 선택 2px #2189FF 를 모두 안쪽 그림자로 그려 선택해도 칸이 커지지 않게 한다. 3. 삼성 블루 #1428A0 를 버튼이나 넓은 UI 면에 칠하지 않는다 — 레터마크·구독클럽 배지·안내 띠 같은 브랜드 순간에만 쓴다. 반대로 #2189FF 를 CI 색으로 기록하지도 않는다. 4. 제품을 아이콘이나 평면 도형으로 줄이지 않는다 — 그 기종의 카메라 섬·접힘선·화면이 보이는 렌더를 그라디언트 무대 위에 크게 세우는 것이 화면의 중심이다. 5. 레터마크를 다시 그리거나 늘이지 않고, 영문·숫자를 한글 서체로 쓰지 않는다 — 「갤럭시 Z 폴드8」의 Z·8, 「256GB」, 가격 숫자는 Samsung Sharp Sans 다.

Sources

출처

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