A. (A-dot) (에이닷)

눈 달린 네이비 A. 캐릭터 로고 하나에만 색을 두고, 흰 바탕·회색 레일로 비운 기록 도구 화면

한국AI소비자생산성차가운modern-minimalhumanism고딕comfortablesoftflat라이트다크한글 지원출시 2022개정 2025

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

Brand DNA

브랜드 DNA

브랜드명: 에이닷 (A., SK텔레콤의 AI 에이전트 서비스)
한 줄 정체성: 통화·기록·검색·일정을 한 앱에서 챙기는 SK텔레콤의 AI 개인비서. 앱 「에이닷 – 나만의 AI 개인비서」, 「에이닷 전화」, 웹 adot.ai(검색·노트)로 나뉘어 있고, 2025년 9월 기준 월 이용자 1천만 명을 넘었다고 SKT 가 밝혔다.
공식 디자인 철학: SKT 뉴스룸(2022-07) 디자이너 인터뷰 — 로고를 "단순한 심볼이 아닌 친구이자 생명체"로 만들었다. A 는 AI 의 A 이자 알파벳 첫 글자로 "세상을 여는 첫 번째 브랜드", 커다란 눈은 "세상 모든 영감의 근원이자 상상력", 눈이 뻗어 나간 닷(마침표) 은 "상상과 영감이 고객의 생활 속에서 무한히 확장된다"는 뜻이다. "기존의 원칙이나 룰을 깨서 실험적으로 접근"했다고 밝혔고, 이 BI 로 iF 디자인 어워드 2023 본상을 받았다.
시그니처 요소 1개: 눈 달린 네이비 A. 캐릭터 로고(#333784) 하나만 색을 갖고, 나머지 화면은 흰색·#F5F5F5 레일·#1A1A1A 글자의 무채색으로 비워 두는 구성. 인디고 블루 #4C6EF5 는 진행 막대·템플릿 배지·선택 상태 같은 작은 자리에만 쓴다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 담백함, 친근함, 실용적
무드 설명: 웹과 앱 화면은 거의 무채색이다. 흰 본문 위에 #F5F5F5 세로 내비 레일, #1A1A1A 글자, #EBEBEB 구분선만 깔고, 색은 눈 달린 A. 로고와 작은 인디고 포인트에만 남긴다. 기록·요약 도구답게 장식보다 글이 먼저 읽히고, 로고 캐릭터가 딱딱함을 덜어 준다.
비주얼 스타일: 모던 미니멀 + 휴머니즘(의인화 로고)
밀도(Density): Comfortable — 레일 72px·목록 행 48px·본문 13~15px 로 정보는 촘촘하되 행 높이는 넉넉하다.
모서리 성향: Soft(4~8px) — 실측 border-radius 는 8px(13회)·6px(7회)·4px(6회)·12px(6회) 순. 목록 링크만 13px 로 둥글다.
평면성: Flat — 실측 그림자는 드롭다운용 0 6px 20px 10px #0000000d 한 종류뿐이고, 구획은 면 색 차이와 1px 선으로 나눈다.

Color System

컬러 시스템 (CSS 변수)

adot.ai 웹 CSS(default.*.css, 2026-09 수집)에는 CSS 변수가 없고 hex 가 직접 적혀 있다. 아래는 그 hex 를 빈도순으로 모아 토큰으로 옮긴 것이다. 인디고 계열(#4C6EF5·#5C7CFA·#4263EB)과 빨강(#F03E3E·#FA5252)은 오픈 소스 팔레트 Open Color 의 indigo·red 값과 정확히 같아서, 비어 있는 단계는 Open Color 로 채웠다(추정).

:root {
  /* Primary - 인디고 (웹 실측 #4C6EF5 = Open Color indigo 6) */
  --color-primary-50:  #EDF2FF;  /* (추정) Open Color indigo 0 — 선택 행 옅은 면 */
  --color-primary-100: #DBE4FF;  /* (추정) indigo 1 */
  --color-primary-200: #BAC8FF;  /* (추정) indigo 2 */
  --color-primary-300: #91A7FF;  /* (추정) indigo 3 */
  --color-primary-400: #5C7CFA;  /* 실측 — 다크 모드의 강조색(BETA 표식·링크) */
  --color-primary-500: #4C6EF5;  /* 실측 — 기본. 진행 막대·요금제 배지·BETA 표식 */
  --color-primary-600: #4263EB;  /* 실측 — 체크·라디오 선택 */
  --color-primary-700: #3B5BDB;  /* (추정) indigo 8 — 눌림 */
  --color-primary-800: #364FC7;  /* (추정) indigo 9 */
  --color-primary-900: #333784;  /* 실측 — 로고 네이비(A. 몸통·눈동자·마침표) */

  /* Secondary - 로고 보조색 · 요금제 블루 */
  --color-secondary-500: #333784;  /* 로고 네이비 — 공식 SVG fill */
  --color-secondary-300: #A2A7CF;  /* 로고 눈 하이라이트 — 공식 SVG fill */
  --color-plan-500:      #4778E9;  /* 실측 — 요금제 업그레이드 버튼·관리자 표시 */

  /* Neutral - 웹 실측 회색 (0 = 가장 밝음) */
  --color-neutral-0:    #FFFFFF;  /* 본문 바탕 */
  --color-neutral-50:   #F5F5F5;  /* 좌측 레일 .gnb 바탕 */
  --color-neutral-100:  #EBEBEB;  /* 구분선·목록 패널 테두리 */
  --color-neutral-200:  #DADADA;  /* 검정 버튼 위 글자 */
  --color-neutral-300:  #C3C3C3;  /* 비활성 글자 */
  --color-neutral-500:  #7F7F7F;  /* 보조 글자 */
  --color-neutral-600:  #555555;  /* 2차 글자 */
  --color-neutral-700:  #3E3E3E;  /* 아이콘 선, 반투명 호버 면의 원색 */
  --color-neutral-800:  #292929;  /* 버튼 호버 */
  --color-neutral-900:  #111111;  /* 검정 채움 버튼 .pln__stgo */
  --color-neutral-1000: #000000;

  /* Semantic */
  --color-success-bg: #EBFBEE;  /* (추정) Open Color green 0 */
  --color-success-fg: #2F9E44;  /* (추정) Open Color green 8 */
  --color-warning-bg: #FFF9DB;  /* (추정) Open Color yellow 0 */
  --color-warning-fg: #F08C00;  /* (추정) Open Color yellow 8 */
  --color-error-bg:   #FFF5F5;  /* (추정) Open Color red 0 */
  --color-error-fg:   #F03E3E;  /* 실측 — 녹음 중·삭제·새 소식 점 */
  --color-info-bg:    rgba(28, 126, 214, 0.08); /* 실측 #1C7ED614 */
  --color-info-fg:    #1C7ED6;  /* 실측 — 안내 링크 */

  /* Surface (배경 위계) */
  --bg-base:     #FFFFFF;  /* 본문·목록 패널 */
  --bg-subtle:   #F5F5F5;  /* 좌측 레일, 재생 막대 */
  --bg-elevated: #FFFFFF;  /* 카드·드롭다운 */
  --bg-overlay:  rgba(0, 0, 0, 0.30);  /* 실측 #0000004D — 모달 딤 */
  --bg-hover:    rgba(62, 62, 62, 0.07);  /* 실측 #3E3E3E12 — 목록 호버·선택 */

  /* Text 위계 */
  --text-primary:   #1A1A1A;  /* 본문 — 실측 최빈(84회) */
  --text-secondary: #555555;  /* 보조 */
  --text-tertiary:  #7F7F7F;  /* 날짜·길이 같은 캡션 */
  --text-on-primary: #FFFFFF; /* 인디고 위 */
  --text-inverse:   #DADADA;  /* 검정 버튼 위 — 실측 */
  --text-disabled:  #C3C3C3;

  /* Border */
  --border-default: #EBEBEB;  /* 패널 경계 .lnb */
  --border-subtle:  #F5F5F5;
  --border-strong:  #C3C3C3;
  --border-focus:   #4C6EF5;
}

라이트/다크 전환: 웹은 color-mode 쿠키로 light·dark·system 세 가지를 고르고(설정의 「화면 모드」 썸네일 3장), <html> 에 .light/.dark 클래스를 붙인다. 에이닷 전화 앱도 시스템·라이트·다크 모드를 고를 수 있다.

Typography

타이포그래피

폰트 페어링:
- 한글: Pretendard Variable (SIL OFL) — 웹이 자체 CDN 에서 PretendardVariable.woff2(weight 45~920)를 불러 쓴다
- 영문: Pretendard Variable (SIL OFL) — 영문도 같은 글꼴, 폴백 system-ui, sans-serif
위계 (font-size / font-weight / line-height / letter-spacing):
- Display: 32px / 700 / 1.3 / -0.02em (추정 — 웹 화면엔 없음, 앱 브리핑 제목 기준)
- H1: 24px / 700 / 1.35 / -0.01em (추정)
- H2: 20px / 700 / 1.4 / -0.01em (추정)
- H3: 17px / 500 / 1.45 / 0 — 실측(안내 제목 .error__hdng)
- Body Large: 15px / 600 / 1 / 0 — 실측(좌측 목록 링크 .lnb__lnk)
- Body: 13px / 500 / 1.45 / -0.01em — 실측 최빈값(13px 21회, 500 30회, 1.45 22회)
- Body Small: 12px / 500 / 1.4 / 0 — 실측
- Caption: 9px / 600 / 1.45 / 0 — 실측(레일 아이콘 라벨 .gnb__lnk)
한국어 줄바꿈은 word-break: keep-all 을 전역에 건다(실측).

Spacing

스페이싱

Base unit: 4px (실측 여백 값이 4·8·12·16·20px 에 몰려 있다)
토큰: ``css --space-xs: 4px; --space-sm: 8px; --space-md: 16px; /* 카드·패널 기본 안쪽 여백 */ --space-lg: 24px; /* 레일 아래 여백 padding-bottom:24px */ --space-xl: 32px; --space-2xl: 48px; /* 목록 행·홈 버튼 높이 48px */ --space-3xl: 64px; ``
Container: 좌측 레일 72px + 목록 패널 264px 고정, 본문은 남은 폭을 쓴다. 반응형 분기점은 767px(70회)·1024px(실측). 본문 좌우 패딩 20px(추정).

Border Radius

--radius-none: 0;
--radius-sm: 4px;     /* 배지 .prid__nm, 체크박스 */
--radius-md: 8px;     /* 기본 — 입력·버튼·드롭다운(실측 최빈) */
--radius-lg: 12px;    /* 카드·모달 */
--radius-xl: 24px;    /* 큰 알약형 버튼 .error__btn(높이 48px) */
--radius-full: 9999px; /* 녹음 점·아바타·토글 */

Shadow / Elevation

--shadow-none: none;                              /* 기본 — 구획은 면 색과 1px 선 */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);       /* 입력 포커스 보조 (추정) */
--shadow-md: 0 6px 20px 10px rgba(0, 0, 0, 0.05); /* 드롭다운·말줄임 메뉴 — 실측 #0000000d */
--shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);     /* 모달 (추정) */
--shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.18);     /* 전체 화면 시트 (추정) */

다크 모드에서는 그림자 대신 면 색(#111 → #1A1A1A → #212121)으로 높이를 나눈다.

Iconography

스타일: Outline 중심 + 채운 점 혼합 — 노트 아이콘은 종이 윤곽 안에 음성 파형 막대, 검색 아이콘은 지구본에 반짝이(✦)를 얹은 모양(공식 gnb-search-2025-07.svg)
Stroke 굵기: 약 1.8px (22px 격자, 채운 path 로 그린 선) (추정)
모서리 처리: Round — 선 끝과 모서리가 모두 둥글다
추천 라이브러리: Lucide (둥근 끝·2px 선이 가장 비슷하다). 녹음 중 표시는 빨간 동심원 점(#F03E3E) 하나로 따로 둔다.

Component Guide

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

Button

.btn { height: 44px; padding: 0 20px; border: 0; border-radius: var(--radius-md); font: 600 15px/1 'Pretendard Variable', Pretendard, system-ui, sans-serif; cursor: pointer; transition: background-color var(--duration-base) var(--ease-out); }
/* Primary — 웹 실측: 검정 채움 버튼(.pln__stgo #111 / 글자 #DADADA) */
.btn-primary { background: var(--color-neutral-900); color: var(--text-inverse); }
.btn-primary:hover { background: var(--color-neutral-800); }
.btn-primary:active { background: var(--color-neutral-1000); }
.btn-primary:disabled { background: var(--color-neutral-100); color: var(--text-disabled); cursor: not-allowed; }
.btn-primary.is-loading { color: transparent; position: relative; }
.btn-primary.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border: 2px solid var(--text-inverse); border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
/* Secondary — 인디고 채움(요금제 업그레이드 .pln__upg 계열) */
.btn-secondary { background: var(--color-primary-500); color: var(--text-on-primary); }
.btn-secondary:hover { background: var(--color-primary-600); }
.btn-secondary:active { background: var(--color-primary-700); }
.btn-secondary:disabled { background: var(--color-primary-100); color: var(--text-disabled); }
/* Ghost — 회색 반투명 면(.lnb__lnk:hover #3E3E3E12) */
.btn-ghost { background: transparent; color: var(--text-primary); }
.btn-ghost:hover { background: var(--bg-hover); }
.btn-ghost:active { background: rgba(62, 62, 62, 0.10); }
.btn-ghost:disabled { color: var(--text-disabled); }
/* Danger — 삭제 텍스트 버튼(.hstry__btn--del #F03E3E) */
.btn-danger { background: transparent; color: var(--color-error-fg); }
.btn-danger:hover { background: var(--color-error-bg); }
.btn-danger:active { background: #FFE3E3; }
.btn-danger:disabled { color: var(--text-disabled); }
@keyframes spin { to { transform: rotate(360deg); } }

Input

.input { height: 44px; padding: 0 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--bg-base); color: var(--text-primary); font-size: 15px; }
.input::placeholder { color: var(--text-tertiary); }
.input:focus { outline: 0; border-color: var(--border-focus); }
.input.is-error { border-color: var(--color-error-fg); }           /* 폴더 이름 중복 .lnb__editError--duplicate */
.input-error-text { color: var(--color-error-fg); font-size: 12px; }
.input:disabled { background: var(--bg-subtle); color: var(--text-disabled); }

Card

.card { background: var(--bg-base); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--space-md); }
.card--emphasis { background: var(--bg-subtle); border-color: transparent; }   /* 레일과 같은 #F5F5F5 면 */
.card--outlined { background: transparent; border: 1px solid var(--border-strong); }
.card:hover { background: rgba(62, 62, 62, 0.04); }

Badge / Tag

.badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-sm); font-size: 10px; font-weight: 700; }
.badge--solid  { background: var(--color-primary-500); color: #fff; }             /* 레일의 BETA 표식 .gnb__beta */
.badge--subtle { background: rgba(76, 110, 245, 0.10); color: var(--color-primary-500); } /* 요금제 이름 .prid__nm */
.badge--outline { background: transparent; border: 1px solid var(--border-strong); color: var(--text-secondary); }
.dot-new { width: 6px; height: 6px; border-radius: 50%; background: var(--color-error-fg); } /* 새 소식 .nt__new */

Navigation (좌측 레일 + 목록 패널)

.gnb { width: 72px; background: var(--bg-subtle); color: var(--text-primary); display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px 0 24px; }
.gnb__lnk { width: 48px; padding-top: 30px; font-size: 9px; font-weight: 600; line-height: 1.45; text-align: center; position: relative; border-radius: 12px; }
.gnb__lnk[aria-current="page"]::before, .gnb__lnk:active::before { background: rgba(62, 62, 62, 0.10); } /* 실측 #3E3E3E1A */
.gnb__rcd { color: var(--color-error-fg); font-size: 9px; font-weight: 600; }  /* 「녹음 중」 표시 */
.lnb { width: 264px; background: var(--bg-base); border-right: 1px solid var(--border-default); padding: 11px 12px 0; }
.lnb__lnk { height: 48px; padding-left: 38px; border-radius: 13px; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.lnb__lnk:hover { background: var(--bg-hover); }                      /* 실측 #3E3E3E12 */

Motion

--duration-fast: 150ms;   /* (추정) 호버 색 */
--duration-base: 200ms;   /* 실측 — transition:.2s, 패널 translate .2s */
--duration-slow: 400ms;   /* (추정) 시트 등장 */
--ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);    /* 실측 CSS 에 따로 지정 없음 → 브라우저 기본 ease */
--ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);   /* (추정) */

좌측 레일·목록 패널은 translate 로 0.2초 만에 밀려 들어오고 나간다(실측 .gnb--hide{translate:-336px}).

Anti-patterns

1. 넓은 면에 인디고를 칠하지 않는다 — 색은 로고와 진행 막대·배지·선택 상태 같은 작은 자리에만 둔다. 2. 로고의 눈과 마침표를 떼거나 늘이지 않는다 — A. 는 눈이 있는 하나의 캐릭터로 다룬다. 어두운 배경에선 공식 흰색 버전을 쓴다. 3. 카드마다 그림자를 겹치지 않는다 — 구획은 #F5F5F5 면과 #EBEBEB 1px 선으로 나누고, 그림자는 드롭다운에만 쓴다. 4. 빨강(#F03E3E)을 장식으로 쓰지 않는다 — 녹음 중·삭제·새 소식 점처럼 알림이 필요한 자리에만 쓴다. 5. 다크 모드를 순검정(#000)으로 만들지 않는다 — 실측 다크 바탕은 #111, 레일 #1A1A1A, 글자 #E4E4E4 다.

A. (A-dot) (에이닷)

Brand DNA

브랜드 DNA

Tone & Mood

톤 & 무드

Color System

컬러 시스템 (CSS 변수)

Typography

타이포그래피

Spacing

스페이싱

Border Radius

Border Radius

Shadow / Elevation

Shadow / Elevation

Iconography

Iconography

Component Guide

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

Motion

Motion

Anti-patterns

Anti-patterns

Sources

출처