KT (케이티)

청록 잔량 막대와 굵은 GB·원 숫자, VVIP 바코드가 흰 라운드 카드에 모이는 마이케이티

한국통신인프라따뜻한modern-minimal고딕comfortableroundflat라이트한글 지원출시 2026개정 2026

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

Brand DNA

브랜드 DNA

브랜드명: 케이티(KT).
한 줄 정체성: 유무선 통신과 네트워크 인프라를 바탕으로 일상과 기업을 연결하는 브랜드.
공식 디자인 철학: 그룹 브랜드의 핵심 모티프는 Intelligent Flow(지능적인 흐름)다. 기존 CI의 흐르는 형태를 입체 그래픽으로 확장한다. 전용 서체 KT Flow는 사각 틀의 직선과 서로 다른 곡률의 곡선을 연결한다.
공식 색의 의미: 레드는 열정·혁신·고객을 향한 따뜻함, 블랙은 신뢰를 나타낸다.
시그니처 요소 1개: 청록 잔량 막대와 굵은 GB·원 숫자를 담은 흰 라운드 카드. 마이케이티는 검정 숫자가 먼저 읽히고, 데이터는 청록으로, VVIP 등급과 알림은 작은 빨강으로 구분된다. 공식 KT 로고의 빨간 깃발이 상단에서 이 구성을 묶는다.
자료 범위: 공식 CI·브랜드 가이드와 해당 웹페이지의 CSS, KT가 게시한 Google Play 마이케이티 스크린샷, 공식 모바일 홈의 CSS·화면 생성 스크립트를 함께 확인했다. 공개된 종합 UI 디자인 시스템은 확인하지 못했으므로 is_official: false, confidence: medium으로 기록한다. 아래의 토큰 이름·역할 매핑과 일부 상태 규칙은 갤러리 예시를 위한 추정이다.
연도: 공개 시작일과 메이저 개편 발표일은 확인하지 못했다. 현재 자료의 2026년 서체 확장 예정 안내와 CSS 버전 날짜를 근거로 두 연도를 2026년으로 추정했다. 기존 CI의 탄생 연도라는 뜻은 아니다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 유연함, 선명함, 신뢰감.
무드 설명: 마이케이티는 옅은 회색 바탕에 흰 카드를 띄우고, 검정 숫자와 청록 잔량 막대로 상태를 빠르게 읽게 한다. 원·GB 단위는 작게, 값은 굵고 크게 붙인다. 빨강은 로고·알림·VVIP 등급에 적게 사용하며 화면 전체를 빨갛게 채우지 않는다. 보라·파랑·청록은 공식 브랜드 매칭 컬러지만 서비스 홈에서 같은 비중의 색상 띠로 펼치지 않는다.
비주얼 스타일: 모던 미니멀. 긴 라운드 잔량 막대, 사선으로 구분한 미충전 부분, 정렬된 금액, 짧은 화살표, 멤버십 바코드가 실제 서비스의 그래픽 언어다. 회사 소개용 입체 그래픽을 앱의 핵심 장면으로 대체하지 않는다.
밀도(Density): Comfortable — 앱의 흰 카드 안에는 회선·요금제·잔여량·통화/문자를 촘촘히 묶고 카드 사이는 회색 여백으로 구분한다. 공식 브랜드 소개 페이지의 섹션 패딩 60px, 설명과 이미지 사이 40px는 별도 맥락의 확인값으로 유지한다.
모서리 성향: Round(12~16px) — 모바일의 둥근 흰 카드와 CI 이미지의 rx="16"을 구분해 관찰했다. 예시 카드는 16px 토큰을 재사용하고, 작은 미리보기에서는 12px로 조정한다(추정). 기존 웹 버튼의 확인값 2px·8px는 보존한다.
평면성: Flat — 본문은 흰 면과 구분선으로 나눈다. 그림자는 슬라이더 화살표처럼 떠 있는 조작부에만 나타난다.
테마 근거: 공식 디자인 페이지는 라이트 화면이다. 확인한 자료에는 다크 토큰이나 제품의 라이트·다크 전환 안내가 없다. 검정색과 어두운 그래픽 응용은 색 사용 예시이므로 theme_modes: [light]로 분류한다.

Color System

컬러 시스템 (CSS 변수)

공식 페이지는 브랜드 레드 #FE2E36와 기존 CI 레드 #ED2024를 따로 제시한다. 대표색은 현행 브랜드 팔레트의 #FE2E36을 사용한다. CI 표에는 RGB 255·0·0과 HEX #ED2024가 함께 적혀 있어 서로 일치하지 않는다. 삽입한 공식 로고 SVG 자체의 빨강은 #FF0000이다. 로고 원본의 경로와 색은 그대로 보존했다.

공식 50~900 색상 단계는 공개되지 않았다. 아래 단계 슬롯은 확인된 색만 재사용한 호환 매핑(추정)이다. 빈 단계는 같은 값의 별칭으로 두며, 독자적인 빨강 명도 단계를 만들지 않는다. 600·700의 웹 버튼색과 800의 그래픽색은 브랜드 레드의 공식 음영 단계가 아니다.

:root {
  /* Primary — 공식 화면의 색을 갤러리 단계 슬롯에 매핑(추정) */
  --color-primary-50: #FDF1F3;                  /* 공식 응용 이미지의 옅은 면 */
  --color-primary-100: var(--color-primary-50); /* 미공개 단계: 같은 색 재사용 */
  --color-primary-200: var(--color-primary-50); /* 미공개 단계: 같은 색 재사용 */
  --color-primary-300: #FE2E36;                 /* 공식 브랜드 레드 재사용 */
  --color-primary-400: var(--color-primary-300);
  --color-primary-500: #FE2E36;                 /* 대표색: RGB 254·46·54 */
  --color-primary-600: #D71826;                 /* 기존 웹 .btn.is-red */
  --color-primary-700: var(--color-primary-600);
  --color-primary-800: #B71D23;                 /* 공식 응용 SVG의 붉은 면 */
  --color-primary-900: #B50916;                 /* 기존 웹 .btn.is-red:hover */

  /* 모바일 서비스 관찰값 — 브랜드 팔레트와 별도 역할 */
  --color-usage-start: #00A39B;                /* .mkt-dashboard-progress-fill 시작 */
  --color-usage-end: #007F7F;                  /* 같은 공식 가로 그라디언트 끝 */
  --color-usage-track: #D5D8DD;                /* .mkt-dashboard-progress 잔량 배경 */
  --color-membership: #ED1C24;                /* 공식 모바일 .mkt-pdcard-mmsgrd */
  --text-service-muted: #6F737B;              /* 공식 모바일 보조 문구 */

  /* 공식 매칭 컬러 */
  --color-secondary-500: #AA50FF;               /* KT 퍼플 */
  --color-blue-500: #00A5FF;                    /* KT 블루 */
  --color-teal-500: #00BEAC;                    /* KT 틸 */
  --color-ci-red: #ED2024;                      /* CI 표에 적힌 HEX */
  --color-logo-red: #FF0000;                    /* 원본 로고 SVG의 fill */

  /* Neutral — 브랜드 팔레트·공식 페이지에서 확인 */
  --color-neutral-0: #FFFFFF;                  /* KT 화이트 */
  --color-neutral-50: #F3F4F6;                 /* 공식 CI 소개 이미지 면 */
  --color-neutral-100: #F5F5F5;                /* 공식 서체·응용 이미지 면 */
  --color-neutral-200: #D1D2D4;                /* 공식 팔레트 SVG의 회색 */
  --color-neutral-300: #C7CAD1;                /* 디자인 페이지 섹션 경계 */
  --color-neutral-400: #A2A4A3;                /* KT 라이트 그레이 */
  --color-neutral-500: #8B8F97;                /* .btn-outline 테두리 */
  --color-neutral-700: #4C4C4E;                /* KT 다크 그레이 */
  --color-neutral-900: #191A1B;                /* 공식 화살표·보조 버튼 글자 */
  --color-neutral-1000: #000000;               /* KT 블랙 */

  /* Semantic — 공식 상태 토큰 미공개. 확인한 색의 역할 배정만 추정 */
  --color-success-bg: var(--color-neutral-50);
  --color-success-fg: var(--color-neutral-700);
  --color-success-accent: var(--color-teal-500); /* 아이콘용, 상태명도 함께 표시 */
  --color-warning-bg: var(--color-neutral-50);
  --color-warning-fg: var(--color-neutral-700);  /* 별도 경고색을 만들지 않음 */
  --color-error-bg: var(--color-primary-50);
  --color-error-fg: var(--color-primary-600);
  --color-info-bg: var(--color-neutral-50);
  --color-info-fg: var(--color-neutral-700);
  --color-info-accent: var(--color-blue-500);    /* 작은 그래픽용 */

  /* Surface — 흰 본문과 회색 소개 면 */
  --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-700);
  --text-tertiary: var(--color-neutral-700);     /* 작은 글자의 대비 유지 */
  --text-on-primary: var(--color-neutral-1000); /* 새 브랜드 레드 위 예시 글자 */
  --text-on-action: var(--color-neutral-0);     /* 기존 웹 버튼 레드 위 글자 */
  --text-disabled: var(--color-neutral-700);

  /* Border — 역할 이름은 추정 */
  --border-default: var(--color-neutral-300);
  --border-subtle: var(--color-neutral-200);
  --border-strong: var(--color-neutral-500);
  --border-focus: var(--color-neutral-1000);
}

서비스 색상 근거: m.kt.com/css/v2/main_new.css의 .mkt-dashboard-progress-fill은 #00A39B → #007F7F, 트랙은 #D5D8DD, 구형 멤버십 등급 테두리·글자는 #ED1C24다. 스토어 스크린샷에서도 청록 막대와 빨간 VVIP 배지가 관찰된다. 배지 채움에 #ED1C24를 재사용한 것은 예시 매핑(추정)이다. #FE2E36이 마이케이티에 일괄 적용됐다는 근거는 확인하지 못했다. 새 브랜드 레드는 알림 점에만 예시로 사용하며 데이터 막대색과 합치지 않는다.

색상 근거: 팔레트 SVG는 대표색·매칭색·브랜드 회색, img_design02.svg는 #FDF1F3·#B71D23, components.css는 #D71826·#B50916·#8B8F97, design.css는 #C7CAD1을 제공한다. 이 문서는 공식 다크 팔레트를 만들어 붙이지 않는다.

Typography

타이포그래피

폰트 페어링: 한글·영문 제목은 KT Flow, 설명은 Pretendard. 실제 design.css가 KTFlow-Bold, KTFlow-Medium, Pretendard를 선언한다. 공식 서체 소개에는 한글과 영문 예시가 모두 있다.
라이선스: KT Flow는 전용 서체이며 공개 배포 조건은 확인하지 못했다. Pretendard는 SIL OFL 1.1 서체다. 문서 예시는 폰트 파일을 불러오지 않으며 로컬 설치 서체와 시스템 폴백만 사용한다.
폴백: Apple SD Gothic Neo, Malgun Gothic, Arial, sans-serif. KT Flow가 설치되지 않은 화면에서는 특유의 글자 형태까지 재현되지는 않는다.
서비스 숫자: 모바일 공식 CSS는 값 24px/굵게, 단위 16px를 구분한다. 예시는 font-variant-numeric:tabular-nums로 수치를 정렬하고 단위를 작게 붙인다(적용 방식은 추정). 앱은 Pretendard 기반으로 관찰되며, 브랜드 제목용 KT Flow를 모든 사용량 글자에 강제하지 않는다.
위계: 아래 역할 이름으로 나눈 것은 추정이다. 수치는 공식 디자인 페이지와 공통 컴포넌트 CSS에서 확인한 값을 재사용한다. 원문에서 지정하지 않은 굵기·행간은 추정으로 구분했다.

| 역할 | 크기 / 굵기 / 행간 / 자간 | 확인한 위치 | |---|---|---| | Display | 60px / 700(추정) / 1.45(추정) / 0 | 공통 .visual.sub-main .hgroup h1 | | H1 | 40px / 700(추정) / 1 / 0 | .visual.kt-bi .hgroup h1, KTFlow-Bold | | H2 | 40px / 700 / 1 / 0 | .kt-bi .sub-title, KTFlow-Bold | | H3 | 24px / 700 / 1 / 0 | .kt-bi .sub-sub-title, Pretendard | | Body Large | 18px / 500 / 1.48 / 0 | .kt-bi .sub-text | | Body | 18px / 500 / 1.48 / 0 | 설명 글자와 같은 값 재사용 | | Body Small | 15px / 600 / 1.48 / -0.25px(추정) | .btn-outline, 자간은 공통 버튼값 재사용 | | Caption | 12px / 400(추정) / 28px / -0.25px | .btn.small, .btn |

공식 페이지는 KT Flow의 Thin~Black 8개 굵기와 2026년 하반기 가변 서체 확장 예정 안내를 보여준다. 이 안내만으로 가변 서체가 이미 배포됐다고 판단하지 않는다.

Spacing

스페이싱

Base unit: 4px(추정). 관찰한 20·28·32·40·56·60px 간격의 공통 단위로 정리했다. 공식 공간 토큰표는 확인하지 못했다.
토큰: 수치는 공식 CSS에서 확인했으며, 토큰 이름으로 묶은 것은 추정이다.

:root {
  --space-xs: 4px;   /* 슬라이더 점 좌우 패딩 */
  --space-sm: 8px;   /* 슬라이더 점 높이 */
  --space-md: 20px;  /* 제목 위 여백·입력 가로 패딩 */
  --space-lg: 28px;  /* 제목과 설명 사이 */
  --space-xl: 32px;  /* 연속 이미지 사이 */
  --space-2xl: 40px; /* 설명과 이미지 사이 */
  --space-3xl: 60px; /* 섹션 패딩·소제목 간격 */
}

Container: 공식 .inner 너비는 1080px이고 좌우 자동 여백을 쓴다. 예시에서는 작은 화면에 맞게 max-width:1080px와 좌우 패딩 20px로 바꿨다(추정). 이는 공식 모바일 컨테이너 규격을 확인했다는 뜻이 아니다.
카드 미리보기: hero_html은 320×240·280×210에서 별도 배율 변환 없이 그려진다. 헤더·하단 메뉴 높이는 고정하고 가운데 두 행이 남은 높이를 나눈다. 앱 홈과 혜택 탭을 한 카드에 압축한 배치와 6.8~24px 글자는 갤러리용 조정(추정)이다.

Border Radius

:root {
  --radius-none: 0;                  /* 공통 검색 버튼의 각진 면 */
  --radius-sm: 2px;                  /* .btn.regular */
  --radius-md: 8px;                  /* .btn-outline */
  --radius-lg: 16px;                 /* 공식 CI·팔레트 이미지의 rx */
  --radius-xl: var(--radius-lg);     /* 큰 단계 미공개: 같은 값 재사용 */
  --radius-full: 9999px;             /* 원형 점용 호환 표현(추정) */
}

넓은 소개 면은 16px, 작은 버튼은 8px로 구분한다. 공식 큰 원형 화살표는 40×40px에 border-radius:40px를 쓴다.

Shadow / Elevation

:root {
  --shadow-none: none;                        /* 본문·기본 카드 */
  --shadow-sm: 0 4px 8px rgba(19,20,21,0.2);   /* 공식 슬라이더 화살표 */
  --shadow-md: var(--shadow-sm);              /* 단계 미공개: 재사용 */
  --shadow-lg: var(--shadow-sm);              /* 단계 미공개: 재사용 */
  --shadow-xl: var(--shadow-sm);              /* 단계 미공개: 재사용 */
}

공식 그림자 단계표는 없다. 예시의 기본 카드에는 그림자를 넣지 않고, 확인하지 못한 모달 고도 값을 새로 만들지 않는다.

Iconography

스타일: 서비스 화면은 Outline 중심, 선택된 탭은 짙게 강조한다. 바코드는 선 굵기 차이 자체가 그래픽이다. 공식 icon_next.svg의 #191A1B 채움 화살표 확인값도 유지한다. 예시의 홈·혜택·알림 아이콘은 자체 SVG이며 공식 아이콘 원본으로 소개하지 않는다.
Stroke 굵기: 해당 아이콘은 채움 경로라 선 굵기 값이 없다. 그룹 공통 선 아이콘 규격은 확인하지 못했다.
모서리 처리: 앱의 얇은 선 아이콘은 둥근 끝과 꺾임을 사용한다. 예시의 1.7px 선은 미리보기용 조정(추정)이다.
추천 라이브러리: 아이콘이 더 필요하면 Lucide를 대체재로 검토할 수 있다(추정). KT의 공식 라이브러리라는 뜻은 아니다.
로고: img_ci.svg의 로고 경로 두 개를 그대로 추출했다. 주변 팔레트 표·마스크는 제외하고 로고를 감싸는 viewBox만 조정했다. 글자를 조합해 만든 대체 로고가 아니다. 삽입 SVG에는 id와 외부 참조가 없다.

Component Guide

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

Button(버튼) — Primary(주 버튼)의 기본·호버색은 공식 .btn.is-red에서 확인했다. Secondary(보조 버튼)는 공식 .btn-outline의 테두리·반경·글자 값을 사용한다. Ghost(글자 버튼), Danger(위험 버튼), 눌림·비활성·로딩 상태의 역할 배정은 추정이다. 위험 행동은 색과 함께 설명 문구로 구분한다.

.kt-btn {
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--space-sm); min-height:40px; padding:0 var(--space-md);
  border:0; border-radius:var(--radius-md); font:inherit;
  font-size:15px; font-weight:600; line-height:1.48; letter-spacing:-.25px;
  cursor:pointer;
  transition:background-color var(--duration-fast) var(--ease-in-out);
}
.kt-btn--primary { background:var(--color-primary-600); color:var(--text-on-action); }
.kt-btn--primary:hover:not(:disabled) { background:var(--color-primary-900); }
.kt-btn--secondary {
  padding:13px 16px; border:1px solid var(--border-strong);
  background:transparent; color:var(--color-neutral-900);
}
.kt-btn--secondary:hover:not(:disabled) { background:var(--bg-subtle); }
.kt-btn--ghost { background:transparent; color:var(--text-primary); }
.kt-btn--ghost:hover:not(:disabled) { background:var(--bg-subtle); }
.kt-btn--danger { background:var(--color-error-fg); color:var(--text-on-action); }
.kt-btn--danger:hover:not(:disabled) { background:var(--color-primary-900); }
.kt-btn:active:not(:disabled) { transform:translateY(1px); } /* 눌림은 추정 */
.kt-btn:focus-visible { outline:2px solid var(--border-focus); outline-offset:4px; }
.kt-btn:disabled {
  background:var(--color-neutral-200); color:var(--text-disabled);
  border-color:transparent; cursor:default; transform:none;
}
.kt-btn[aria-busy="true"] { cursor:progress; } /* 로딩 중에는 disabled도 함께 설정 */
.kt-btn[aria-busy="true"]::before {
  content:""; width:12px; height:12px; border:2px solid currentColor;
  border-top-color:transparent; border-radius:50%;
  animation:kt-spin var(--duration-base) linear infinite;
}
@keyframes kt-spin { to { transform:rotate(360deg); } }

Input(입력) — 기본 높이 48px·가로 패딩 20px은 공식 공통 폼에서 확인했다. 공식 기본 테두리는 #999이며, 아래 예시는 팔레트의 경계색으로 매핑했다(추정). 포커스·오류·비활성 상태 역시 추정이다.

.kt-input {
  box-sizing:border-box; width:100%; height:48px; padding:0 var(--space-md);
  border:1px solid var(--border-strong); border-radius:var(--radius-none);
  background:var(--bg-base); color:var(--text-primary); font:inherit;
}
.kt-input:focus-visible { outline:2px solid var(--border-focus); outline-offset:4px; }
.kt-input[aria-invalid="true"] { border-color:var(--color-error-fg); }
.kt-input:disabled { background:var(--bg-subtle); color:var(--text-disabled); }
.kt-input-error { color:var(--color-error-fg); font-size:15px; }

Card(카드) — 브랜드 소개용 회색 면·16px 반경의 기존 토큰은 유지한다. 서비스 적용 예시에서는 이 역할을 뒤집어 회색 바탕 위 흰 카드로 묶고, 사용량·요금·멤버십을 각각 구분한다. 강조는 면 전체의 빨강보다 숫자의 굵기와 잔량 막대로 표현한다.

.kt-card {
  padding:var(--space-md); border:0; border-radius:var(--radius-lg);
  background:var(--bg-subtle); color:var(--text-primary); box-shadow:var(--shadow-none);
}
.kt-card--strong { background:var(--color-primary-500); color:var(--text-on-primary); }
.kt-card--outlined { border:1px solid var(--border-default); background:var(--bg-base); }
.kt-card h3 { margin:0 0 var(--space-sm); font-size:24px; line-height:1.2; }
.kt-card p { margin:0; color:var(--text-secondary); font-size:15px; line-height:1.48; }
.kt-card--strong p { color:var(--text-primary); }

Badge / Tag(배지·태그) — 공개된 배지 규격이 없어 확인한 12px 글자와 2px 반경을 조합했다(추정). 색만으로 상태를 전달하지 않는다.

.kt-badge { display:inline-block; padding:4px 8px; border-radius:var(--radius-sm); font-size:12px; }
.kt-badge--solid { background:var(--color-primary-500); color:var(--text-on-primary); }
.kt-badge--subtle { background:var(--bg-subtle); color:var(--text-secondary); }
.kt-badge--outline { border:1px solid var(--border-strong); color:var(--text-secondary); }

Navigation(내비게이션) — 아래 CSS는 흰 헤더의 범용 탭 예시다(추정). ⑫의 앱 메뉴는 스토어 화면에서 확인한 홈·혜택·다이렉트샵·마이 AI·메뉴를 사용하며 검정 선택 아이콘과 회색 비선택 아이콘을 구분한다. 빨간 밑줄은 앱의 실제 하단 메뉴 규칙으로 주장하지 않는다.

.kt-nav {
  display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between;
  gap:var(--space-md); padding:var(--space-md) 0;
  border-bottom:1px solid var(--border-default); background:var(--bg-base);
}
.kt-nav-items { display:flex; flex-wrap:wrap; gap:var(--space-md); }
.kt-nav button {
  padding:var(--space-sm) 0; border:0; border-bottom:2px solid transparent;
  background:transparent; color:var(--text-secondary); font:inherit; cursor:pointer;
}
.kt-nav button[aria-current="page"] { color:var(--text-primary); border-bottom-color:var(--color-primary-500); }
.kt-nav button:hover { color:var(--text-primary); }
.kt-nav button:focus-visible { outline:2px solid var(--border-focus); outline-offset:4px; }

Motion

:root {
  --duration-fast: 200ms;       /* 공식 슬라이더 점 전환 */
  --duration-base: 500ms;       /* 공식 소개 문구 전환 */
  --duration-slow: 500ms;       /* 추가 단계 미공개: 같은 값 재사용 */
  --ease-out: ease-in-out;     /* 별도 곡선 미공개: 공식 .inner 곡선 재사용 */
  --ease-in-out: ease-in-out;  /* 공식 .inner 전환 */
}
@media (prefers-reduced-motion: reduce) {
  .kt-btn, .kt-nav button { transition:none; }
  .kt-btn:active:not(:disabled) { transform:none; }
  .kt-btn[aria-busy="true"]::before { animation:none; }
}

공식 모션 토큰표는 없다. 시간과 곡선은 CSS 관찰값이며, 버튼에 적용한 것은 추정이다. 예시는 자동으로 흐르는 장식을 넣지 않는다. 움직임을 줄인 환경에서도 「처리 중」 같은 글자로 로딩 상태를 함께 표시한다.

Anti-patterns

아래는 확인한 브랜드 체계를 유지하기 위한 적용 지침이다. 공식 금지 규정 전문을 옮긴 목록은 아니다.

1. 브랜드 레드와 CI 레드를 하나의 값으로 합치기: #FE2E36·#ED2024·원본 SVG의 #FF0000은 출처와 쓰임을 구분한다. 2. 로고를 보통 글자로 다시 쓰기: 실제 깃발 모양 경로를 유지한다. 3. 확인하지 못한 색상 단계를 공식 팔레트로 소개하기: 같은 값의 별칭과 추정 매핑을 분명하게 적는다. 4. 사용량 화면을 CI 소개로 바꾸기: 슬로건·색상 띠로 빈칸을 채우지 않는다. GB·원·남은 횟수와 청록 막대·바코드가 중심이며, 앱 잔량 막대를 새 CI 빨강으로 바꾸지 않는다. 5. 어두운 그래픽을 다크 UI로 분류하기: 다크 토큰이나 제품 전환 기능을 확인해야 다크 모드를 추가한다.

Sources

출처

KT (케이티) 이름과 로고는 각 권리자의 상표입니다.