Amorepacific (아모레퍼시픽)

아모레몰의 가는 검정 워드마크, 흰 바탕의 BEST 탭, 설화수 유리 용기와 라네즈 블루 제품이 만드는 뷰티 진열

한국라이프스타일차가운modern-minimalhumanism복합spacioussharpflat라이트한글 지원출시 2025개정 2025

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

Brand DNA

브랜드 DNA

브랜드명: 아모레퍼시픽 (Amorepacific). 라네즈·설화수 등 개별 화장품 브랜드와 구분하는 기업 CI다.
한 줄 정체성: 아름다움을 연구하고 나누는 뷰티 기업의 정체성을 두 파랑과 아리따 글꼴로 표현한다.
공식 디자인 철학: 공식 아리따 소개는 단아하고 지적인 인상과 건강한 아름다움을 강조한다. 글꼴을 대중에게 무료로 나누는 일도 기업 정체성의 일부로 설명한다.
시그니처 요소 1개: 아모레몰의 흰 진열면과 제품 패키지의 대비. 가는 검정 워드마크·짧은 밑줄 탭을 위에 두고, 아이보리 윤조 병·호박색 자음생 단지·라네즈 블루 용기를 같은 크기의 이미지 칸에 진열한다. 가격은 굵게, 할인율은 작고 선명하게 붙인다.
자료 범위: 공식 CI 가이드의 색·로고·서체와 그 웹페이지의 CSS는 1차 조사값으로 보존했다. 카드와 ⑫는 공식 아모레몰 홈·베스트·상품 화면을 추가 조사한 서비스 적용 예시다. 기업 CI 서체와 아모레몰 UI 서체는 서로 다르다. 공개 UI 디자인 시스템은 확인하지 못했으므로 is_official: false, source_type: hybrid, confidence: medium을 유지한다.
연도 기준: CI 페이지는 버전 1.0.0과 Updated 2025.07.0을 표시한다. last_major_revision: 2025는 이 가이드의 개정 표기다. 최초 웹 가이드 공개 연도는 확인하지 못해 2025년으로 추정했으며, 기업 창립·워드마크 도입·아리따 첫 공개 연도를 뜻하지 않는다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 단아함, 지적임, 절제
무드 설명: CI는 두 파랑과 아리따의 단정한 획을 흰 여백에 놓는다. 아모레몰에서는 흰 헤더·가는 검정 워드마크·검정 밑줄 탭이 제품을 받쳐 준다. 화면의 색은 장식 띠보다 설화수의 아이보리·호박색 유리와 라네즈의 푸른 용기에서 나온다. 브랜드명은 작고 굵게, 상품명은 두 줄로, 할인율과 원화 가격은 한 줄에 붙여 쇼핑 정보의 리듬을 만든다.
비주얼 스타일: 모던 미니멀 + 휴머니즘 — 면과 여백은 간결하고, 전용 서체에는 사람의 말씨를 담는다.
밀도(Density): Spacious — 공식 CI 본문 최대 폭 960px, 구획 여백 64px, 워드마크 미리보기 높이 540px가 확인된다.
모서리 성향: Sharp (0~2px) — CI의 기본 버튼·문서 구획은 각진다. 색상 견본의 6px, 이름 표기 배지의 4px는 작은 영역의 예외다. 몰의 상품 이미지는 별도로 12px를 쓰며 카드에서는 5px로 축약했다(추정).
평면성: Flat — 본문 카드에는 그림자보다 흰 면과 얇은 선을 쓰고, 떠 있는 선택 목록에만 그림자를 준다.

Color System

컬러 시스템 (CSS 변수)

공식 팔레트는 Amore Blue #1F5795 · Pacific Blue #001C58 · Black #000000 · Gray #7D7D7D · White #FFFFFF의 다섯 색이다. 가이드의 RGB 값도 각각 31/87/149, 0/28/88, 0/0/0, 125/125/125, 255/255/255로 HEX와 일치한다.

공식 10단계 파랑 토큰은 공개되어 있지 않다. 아래 50~400은 Amore Blue에 흰색을 각각 96·90·75·55·25% 섞고, 600~800은 Amore Blue에 Pacific Blue를 20·40·65% 섞어 sRGB 채널별 계산 후 반올림한 예시용 값(추정)이다. 공식 대표색과 보조색은 바꾸지 않았다. 중립색의 나머지 값은 공식 CI 웹 CSS에서 확인했다.

:root {
  /* Primary — 500·900은 공식 팔레트, 나머지는 문서용 파생 단계(추정) */
  --color-primary-50:  #F6F8FB; /* (추정) 흰색 96% */
  --color-primary-100: #E9EEF4; /* (추정) 흰색 90% */
  --color-primary-200: #C7D5E5; /* (추정) 흰색 75% */
  --color-primary-300: #9AB3CF; /* (추정) 흰색 55% */
  --color-primary-400: #5781B0; /* (추정) 흰색 25% */
  --color-primary-500: #1F5795; /* 공식 Amore Blue */
  --color-primary-600: #194B89; /* (추정) Pacific Blue 20% */
  --color-primary-700: #133F7D; /* (추정) Pacific Blue 40% */
  --color-primary-800: #0B316D; /* (추정) Pacific Blue 65% */
  --color-primary-900: #001C58; /* 공식 Pacific Blue */
  --color-secondary-500: #001C58; /* 공식 보조색 */

  /* 공식 CI 페이지의 원본 SVG fill — 팔레트 값과 별개로 보존 */
  --color-logo-amore: #004D94;
  --color-logo-pacific: #00286C;

  /* Neutral — 공식 팔레트와 CI 웹 CSS */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #F9F9F9;  /* CI 페이지 바탕의 끝 색 */
  --color-neutral-100: #EFEFEF; /* 언어 선택 제어부 */
  --color-neutral-200: #E6E6E6; /* 본문 상단 구분선 */
  --color-neutral-300: #E2E2E2; /* 다운로드 버튼 테두리 */
  --color-neutral-400: #C2C2C2; /* 선택하지 않은 언어 글자 */
  --color-neutral-500: #7D7D7D; /* 공식 Gray */
  --color-neutral-700: #454545; /* 로고 배경 견본의 제어부 */
  --color-neutral-900: #161A21; /* 로고의 어두운 배경 견본 */
  --color-neutral-1000: #000000; /* 공식 Black */

  /* Semantic — 공식 상태색 미공개. 관찰한 흑백을 재사용한 예시(추정).
     성공·주의·오류는 아이콘과 상태 문구를 함께 써서 구별한다. */
  --color-success-bg: #F9F9F9;
  --color-success-fg: #000000;
  --color-warning-bg: #F9F9F9;
  --color-warning-fg: #000000;
  --color-error-bg: #FFFFFF;
  --color-error-fg: #000000;
  --color-info-bg: #FFFFFF;
  --color-info-fg: #1F5795;

  /* 아모레몰 서비스 관찰값 — 기존 CI 팔레트와 구분 */
  --ap-mall-ink: #121212; /* 공식 몰 로고·기본 글자 */
  --ap-mall-sale: #FF4E4E; /* 공식 몰 할인율 */
  --ap-mall-image-radius: 12px; /* 공식 상품 이미지 */
  --ap-product-cream-bg: #F7E8D4; /* 상품 일러스트 배경 (추정) */

  /* Surface — 넓은 본문은 항상 라이트 */
  --bg-base: #FFFFFF;
  --bg-subtle: #F9F9F9;
  --bg-elevated: #FFFFFF;
  --bg-overlay: rgba(0, 0, 0, .35); /* 공식 검색 패널 뒤 가림막 */

  /* Text — 역할 배정은 예시(추정), 원색은 공식 팔레트·CSS */
  --text-primary: #000000;
  --text-secondary: #454545;
  --text-tertiary: #7D7D7D;
  --text-on-primary: #FFFFFF;
  --text-disabled: #C2C2C2;

  /* Border */
  --border-default: #E2E2E2;
  --border-subtle: #E6E6E6;
  --border-strong: #000000;
  --border-focus: #000000; /* (추정) 키보드 포커스 보완 */
}

워드마크 색 구분: 공식 CI HTML의 기본형 영문 SVG는 #004D94와 #00286C를 사용한다. 페이지에 명시된 팔레트의 #1F5795·#001C58과 차이가 있어, 로고 경로와 fill은 원본 그대로 두고 색상 견본에는 가이드의 값을 사용했다.
라이트 전용 판단: 공식 JS의 Light/Dark 선택은 #wpr-preview에만 클래스를 붙인다. 로고 배경과 제어부 색을 바꾸는 견본이며, 전체 페이지 테마 전환이나 제품용 다크 토큰은 아니다. theme_modes: [light]로 기록하고 다크 문서는 만들지 않는다.
작은 글자 대비: 공식 Gray는 흰 바탕 위 작은 본문에 쓰기보다 견본·곁 정보에 제한한다. 중요한 설명은 Black으로 쓴다. 상태 구분을 색 하나에 맡기지 않는다.

Typography

타이포그래피

폰트 페어링:
- 한글 본문: 아리따 돋움 (aritaDotum). 공식 무료 배포 서체이며 CSS 굵기 200·300·400·500·600을 확인했다.
- 한글 표현 글: 아리따 부리 (aritaBuri). 공식 무료 배포 서체이며 CSS 굵기 100·300·400·500·600을 확인했다. 설명을 읽는 본문과 구분해 쓴다.
- 영문: Arita Sans (aritaSans). 공식 무료 배포 서체이며 CSS 굵기 200·300·400·500·600을 확인했다.
- 라이선스 확인 범위: 공식 소개의 무료 배포 안내는 확인했다. 확인한 영문 배포 ZIP에는 별도 라이선스 텍스트가 없어 구체적인 라이선스 이름은 단정하지 않는다.
아모레몰 서비스 서체: 공식 몰 CSS의 PretendardJP를 확인했다. 카드·⑫는 해당 이름을 먼저 참조하되 외부 폰트를 불러오지 않으며, 설치되지 않았다면 시스템 고딕으로 표시한다. CI의 아리따 페어링을 몰의 실측 서체로 주장하지 않는다.
폴백: 한글 본문은 Apple SD Gothic Neo·Malgun Gothic, 부리는 Batang, 영문은 Arial·Times New Roman. 카드와 ⑫에는 웹폰트 링크나 @font-face를 넣지 않는다. 아리따가 설치되어 있지 않으면 시스템 글꼴로 보인다.
위계: 공식 사이트에 공통 8단계 토큰은 없다. 실측 크기와 시연용 위계를 구분했다. 각 줄은 font-size / font-weight / line-height / letter-spacing 순이다.
- Display: 44px / 300 / 1.4 / normal — 부리 표현 글의 시연용 확대(추정).
- H1: 21px / 700 / 1.8 / normal — CI 페이지 제목 크기·굵기 확인, 줄 높이는 body 상속.
- H2: 24px / 600 / 1.5 / normal — 구획 제목 확장(추정).
- H3: 16px / 700 / 1 / normal — 색상 견본 제목의 공식 CSS.
- Body Large: 18px / 400 / 1.8 / normal — 공식 아리따 입력 견본의 크기·줄 높이, 굵기는 기본 본문에 대응(추정).
- Body: 16px / 400 / 28px / normal — 공식 CI 본문.
- Body Small: 14px / 400 / 26px / normal — 공식 모바일 본문.
- Caption: 13px / 400 / 1.3 / normal — 공식 색상 견본의 수치 설명.
굵기 주의: 아리따 CSS의 Bold 파일은 600에 연결되어 있다. 페이지 제목의 700은 사이트가 지정한 값이지만 별도 700 파일은 확인하지 못했다. CI 컴포넌트 예시의 본문·버튼은 400, 소제목은 600을 기본으로 쓴다. 몰 시연은 별도로 상품 브랜드·가격을 700, 캠페인 제목을 500으로 배정했다(축약 추정).

Spacing

스페이싱

Base unit: 4px로 정리(추정). 공식 공통 간격 토큰은 없지만 CI 웹 CSS에서 4·8·12·16·24·32·48·64px를 확인했다. rem 환산은 기본 16px 기준이다.

:root {
  --space-xs: 4px;   /* 한글 설명 아래 .25rem */
  --space-sm: 8px;   /* 이름 규칙 설명 위 간격 */
  --space-md: 16px;  /* 색상 견본 안쪽·견본 사이 */
  --space-lg: 24px;  /* 이름 규칙 카드·선택 목록 패딩 */
  --space-xl: 32px;  /* 팔레트·글꼴 목록 위 간격 */
  --space-2xl: 48px; /* 구획 h3 아래 간격 */
  --space-3xl: 64px; /* CI 본문 상단·구획 간격 */
}

Container: 공식 .inner_ci는 max-width: 960px, width: calc(100% - 1.5rem)로 가운데 정렬한다. 좁은 화면에서는 양쪽 12px, 본문 상단에는 64px 여백이 생긴다.
카드용 축약: hero_html은 320×240·280×210에 직접 그리는 아모레몰 BEST 화면이다. 헤더 26px·주요 메뉴 19px·BEST 제목 24px·집계 탭 17px를 먼저 놓고, 남은 높이를 제품 이미지와 3열 상품 정보가 채운다. 전체 화면을 축소하지 않고 이미지 높이만 유동적으로 바꾼다. 순위와 세 상품의 병렬 배치는 시연용 편집(추정)이다.

Border Radius

:root {
  --radius-none: 0;    /* 기본 버튼·문서 구획 */
  --radius-sm: 4px;    /* 공식 이름 규칙 배지 */
  --radius-md: 6px;    /* 공식 색상 견본 */
  --radius-lg: 6px;    /* 같은 견본 곡률의 카드용 별칭(추정) */
  --radius-xl: 32px;   /* 공식 언어 선택 제어부 */
  --radius-full: 9999px; /* 원형 아이콘이 필요할 때의 예시(추정) */
}

CI 기본형은 각진다. CI의 6px은 색상 견본과 작은 입력 제어부에 쓰며 로고를 둥근 틀에 가두지 않는다. 몰 상품 이미지에는 관찰값 --ap-mall-image-radius: 12px를 별도로 쓰고, 작은 카드에서는 5px로 축약한다(추정).

Shadow / Elevation

:root {
  --shadow-none: none; /* 본문·기본 카드 */
  --shadow-sm: 0 0 6px rgba(0, 0, 0, .1); /* 공식 워드마크 선택 목록 */
  --shadow-md: 0 2px 6px rgba(0, 0, 0, .05), 0 8px 24px rgba(0, 0, 0, .1); /* 공식 헤더 CI 메뉴 */
  --shadow-lg: var(--shadow-md); /* 큰 부유 패널용 별칭(추정), 새 그림자 추가 없음 */
  --shadow-xl: var(--shadow-md); /* 대화상자용 별칭(추정), 새 그림자 추가 없음 */
}

UI의 넓은 진열면과 글꼴 카드에는 그림자를 붙이지 않는다. 상품 SVG 안의 접지 그림자와 유리 반사는 제품 재질을 설명하는 일러스트이며, UI 카드의 elevation과 구분한다. 공식 화면에서 확인하지 않은 강한 그림자 단계를 새로 만들지 않는다.

Iconography

스타일: CI 문서는 단색 Filled 중심. 공식 다운로드 버튼에는 채운 화살표 SVG가 있고, 주로 검정과 흰색으로 표시한다.
Stroke 굵기: Filled 아이콘에는 적용하지 않는다. CI 컴포넌트 확장에는 1.5px 선을 제안한다(추정). 카드·⑫의 몰 검색·장바구니는 1.6px Outline으로 축약했고, 찜 표시는 ♡ 문자다(추정).
모서리 처리: Square 중심으로 정리(추정). 아이콘을 과하게 둥글게 만들지 않는다.
추천 라이브러리: 공식 사이트는 자체 SVG를 사용한다. 새 기능의 대체 아이콘이 필요할 때만 Lucide를 한 세트로 사용한다(추정·제안).
로고: 카드·⑫는 아모레몰 공식 logo_amoremall_main.svg의 경로 4개와 #121212 fill을 그대로 사용한다. 1차 조사한 기업 CI의 svg-en-normal과 그 두 파랑은 ③의 토큰·출처에 보존한다. 서비스 로고와 기업 워드마크를 혼동하지 않는다. SVG id는 모두 amorepacific-로 시작한다.

Component Guide

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

공식 CI 페이지에서 확인한 기본 버튼은 흰 바탕·회색 선·14px 글자·모서리 0px, 패딩 12px 28px다. 아리따 페이지에는 검정 선 버튼과 검정 면으로 바뀌는 hover가 있다. 아래 변형·Active·Disabled·Loading·입력 상태·카드별 역할은 이 화면을 바탕으로 만든 재사용 예시(추정)이며, 브랜드가 공개한 컴포넌트 규정은 아니다.

Button — Primary / Secondary / Ghost / Danger. 공통 선택자가 네 변형의 Hover·Active·Disabled·Loading을 처리한다. Danger도 관찰한 흑백을 사용하며 동작 이름과 확인 문구로 구별한다.

.ap-btn {
  --ap-btn-bg: var(--bg-elevated);
  --ap-btn-fg: var(--text-primary);
  --ap-btn-border: var(--border-default);
  --ap-btn-hover-bg: var(--color-neutral-1000);
  --ap-btn-hover-fg: var(--text-on-primary);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 46px; padding: 12px 28px; border: 1px solid var(--ap-btn-border);
  border-radius: var(--radius-none); background: var(--ap-btn-bg); color: var(--ap-btn-fg);
  font: 400 14px/20px aritaDotum, 'Malgun Gothic', Arial, sans-serif;
  cursor: pointer; text-decoration: none;
  transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.ap-btn--primary { --ap-btn-border: var(--border-strong); }
.ap-btn--secondary { --ap-btn-hover-bg: var(--bg-subtle); --ap-btn-hover-fg: var(--text-primary); }
.ap-btn--ghost { --ap-btn-bg: transparent; --ap-btn-border: transparent; --ap-btn-hover-bg: transparent; --ap-btn-hover-fg: var(--text-primary); }
.ap-btn--danger { --ap-btn-border: var(--border-strong); border-width: 2px; font-weight: 600; }
.ap-btn:not(:disabled):not([aria-busy="true"]):hover { background: var(--ap-btn-hover-bg); color: var(--ap-btn-hover-fg); text-decoration: underline; }
.ap-btn:not(:disabled):not([aria-busy="true"]):active { transform: translateY(1px); background: var(--ap-btn-hover-bg); color: var(--ap-btn-hover-fg); }
.ap-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 3px; }
.ap-btn:disabled { background: var(--bg-subtle); color: var(--text-disabled); border-color: var(--border-default); cursor: not-allowed; }
.ap-btn[aria-busy="true"] { cursor: progress; }
.ap-btn[aria-busy="true"] .ap-btn__label { visibility: hidden; }
.ap-btn[aria-busy="true"]::after { content: "처리 중…"; position: absolute; inset: 0; display: grid; place-items: center; color: inherit; }

Input — Default / Focus / Error / Disabled. 오류는 점선 테두리와 필드 설명을 함께 사용한다(추정). 원본의 outline: 0 대신 키보드 포커스를 추가했다.

.ap-field { display: grid; gap: var(--space-sm); font: 400 14px/1.8 aritaDotum, 'Malgun Gothic', sans-serif; }
.ap-input { box-sizing: border-box; width: 100%; min-height: 44px; padding: 12px 16px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--text-primary); font: inherit; }
.ap-input::placeholder { color: var(--text-tertiary); }
.ap-input:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.ap-input[aria-invalid="true"] { border-color: var(--color-error-fg); border-style: dashed; }
.ap-field__error { color: var(--color-error-fg); font-size: 13px; }
.ap-input:disabled { color: var(--text-disabled); background: var(--color-neutral-100); cursor: not-allowed; }

Card — 기본형 / 강조형 / Outlined. 견본과 설명이 분리된 공식 CI 화면을 바탕으로 정리했다(추정).

.ap-card { padding: var(--space-lg); background: var(--bg-elevated); color: var(--text-primary); border-radius: var(--radius-none); box-shadow: var(--shadow-none); }
.ap-card--strong { border-top: 1px solid var(--border-strong); }
.ap-card--outlined { border: 1px solid var(--border-default); }
.ap-card__title { margin: 0 0 var(--space-sm); font-size: 16px; font-weight: 600; line-height: 1.5; }
.ap-card__desc { margin: 0; font-size: 14px; line-height: 26px; color: var(--text-secondary); }
.ap-swatch { border-radius: var(--radius-md); padding: var(--space-md); color: var(--text-on-primary); background: var(--color-primary-500); }
.ap-swatch--pacific { background: var(--color-secondary-500); }

Badge / Tag — Solid / Subtle / Outline. 검정 4px 배지는 공식 이름 규칙에서 확인했고, 나머지 변형은 예시다(추정).

.ap-badge { display: inline-flex; padding: 6px; border-radius: var(--radius-sm); font-size: 12px; line-height: 1; }
.ap-badge--solid { background: var(--color-neutral-1000); color: var(--text-on-primary); }
.ap-badge--subtle { background: var(--bg-subtle); color: var(--text-secondary); }
.ap-badge--outline { border: 1px solid var(--border-default); color: var(--text-primary); }

Navigation — 흰 헤더와 밑줄 선택 표시. 원본 헤더의 64px 높이를 사용하고, 기업 워드마크를 넣은 아래 구성은 문서 시연용이다(추정).

.ap-nav { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); color: var(--text-primary); background: var(--bg-base); }
.ap-nav__links { display: flex; flex-wrap: wrap; gap: var(--space-xl); font-size: 13px; line-height: 1.8; }
.ap-nav__links a { color: inherit; text-decoration: none; }
.ap-nav__links a:hover, .ap-nav__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
.ap-nav__links a:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 4px; }

Motion

:root {
  --duration-fast: 180ms; /* 공식 헤더 CI 메뉴 나타남 */
  --duration-base: 250ms; /* 공식 로고·배경 견본·선택 목록 전환 */
  --duration-slow: 500ms; /* 공식 헤더 이동 */
  --ease-out: ease-out;
  --ease-in-out: ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .ap-btn { transition: none; }
  .ap-btn:not(:disabled):not([aria-busy="true"]):active { transform: none; }
}

색과 선택 상태가 변하는 정도만 사용한다. 카드 미리보기는 정적이며, Loading은 움직이는 장식 대신 상태 문구를 보여 준다. 움직임 줄이기 처리는 예시에 추가한 접근성 보완이다.

Anti-patterns

공식 CI의 피해야 할 사용 사례를 다섯 항목으로 정리했다.

1. 식별하기 어려운 배경 위에 로고 놓기 — 글자와 배경의 구분이 유지되는 공식 버전을 사용한다. 2. 워드마크 두께·비율·여백 바꾸기 — AMORE와 PACIFIC의 굵기 차이와 경로를 유지한다. 3. 로고에 도형이나 틀 씌우기 — 장식 테두리·엠블럼·배지 안에 워드마크를 가두지 않는다. 4. 쓰지 않는 과거 그래픽·조합 재사용하기 — 현재 공식 가이드의 기본형과 기업명 구분을 따른다. 5. 워드마크 안 텍스트 위치 옮기기 — 글자를 새로 조판하거나 부분을 떼어 로고처럼 사용하지 않는다.

Sources

출처

Amorepacific (아모레퍼시픽) 이름과 로고는 각 권리자의 상표입니다.