SK Telecom (SK텔레콤)

보라 배너에 겹쳐 뜬 흰 로그인 카드와, 대각선 두 모서리만 둥근 T 블루 순위 배지·빨간 「170,790원/월」

한국통신이커머스차가운modern-minimal고딕comfortablesoftsubtle라이트한글 지원출시 2022개정 2023

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

Brand DNA

브랜드 DNA

브랜드명: SK텔레콤 (SK Telecom). 이 문서는 이동통신 대표 브랜드 T 와 그 디지털 창구 두 곳 — 고객센터 T world(앱·웹)와 공식 온라인샵 T 다이렉트샵(애칭 「티다」) — 의 화면 문법을 다룬다.
한 줄 정체성: 요금·데이터 조회부터 휴대폰 구매, 멤버십 혜택까지 아이디 하나로 묶은 국내 1위 이동통신사의 서비스 창구.
공식 디자인 철학: 2022년 리뉴얼한 T BI 「오픈T」는 가로획과, 위 끝을 비스듬히 자른 세로획을 떼어 놓은 모양이다. 공식 브랜드 페이지는 이것을 "미래로 향하는 문"이라 설명하고, "익숙한 고정관념과 한계를 깨고 새로운 세상, 새로운 비즈니스, 새로운 생활을 오픈하고자 하는 의지"를 담았다고 적었다. T 는 기술(Technology)·미래(Tomorrow)·함께(Together)를 뜻하고, 색은 "T Blue 는 대표 컬러, T Red 는 포인트 컬러"로 쓴다. 기업 CI 는 별개다 — 행복날개 심벌과 SK Red #EA002C·SK Orange #FF7A00.
시그니처 요소 1개: 옅은 회색(#F5F5F7) 바탕에 흰 카드를 띄우고, 색은 세 군데에만 둔다 — T 블루 #3617CE(오픈T 로고·로그인 버튼·왼쪽 위와 오른쪽 아래만 둥근 BEST 3 순위 배지), T 레드 #FF404E(「170,790원/월」 월 납부금), 그리고 슬라이드마다 바뀌는 배너 면(첫 장 보라 #7935DE). T 다이렉트샵에서 사용자가 고른 칸은 바탕을 흰색 그대로 두고 인디고 #4130DF 테두리·글자만 바꾼다.

Tone & Mood

톤 & 무드

핵심 키워드 3개: 선명함, 친절함, 실속
무드 설명: 흰 카드와 옅은 회색(#F5F5F7) 바탕 위에 인디고 한 가지로 누를 곳을 표시하고, 가격·용량·순위 같은 숫자를 굵게 세운다. 옵션 이름은 고객의 말투로 쓴다 — 「휴대폰만 새로 구매하고 싶어요.(기기변경)」, 「블랙, 512GB는 품절이에요.」. 배너만은 예외로 보라·남색·하늘색 면에 광택 있는 3D 그림을 크게 얹어 화면에 활기를 준다.
비주얼 스타일: 모던 미니멀 — 장식 없는 흰 카드, 얇은 회색 선, 인디고 포인트. 3D 그림은 배너와 아이콘 메뉴에만.
밀도(Density): Comfortable — 상품 상세 옵션 카드는 높이 84px·안쪽 28px 로 넉넉하지만, 목록 카드에는 색상 점·용량·월 납부금·기준 요금제가 네 줄로 촘촘히 붙는다.
모서리 성향: Soft(4~8px) — 가장 넓은 면적인 T 다이렉트샵 버튼·옵션 카드가 8px. T world 홈 카드는 2px 로 거의 각지고, 외곽선 알약 버튼·「맞춤 혜택」만 완전히 둥글다.
평면성: Subtle — 흰 카드에 0 5px 15px 6% 그림자 한 단계, 고른 칸에만 인디고 기운 그림자(rgba(65,48,223,.18)).

Color System

컬러 시스템 (CSS 변수)

T Blue·T Red·SK Red·SK Orange 는 공식 브랜드 페이지와 BI 원본 파일(BI_T.ai, 채움색 0.212/0.09/0.808 = #3617CE)에서 확인했다. 나머지는 2026-10-04 에 T world·T 다이렉트샵 화면의 계산값(computed style)과 사용 빈도를 실측했다. 웹 화면의 버튼·선택 상태는 공식 T Blue 보다 한 톤 밝은 #4130DF 를 쓴다(T 다이렉트샵 「다음」 버튼, 모바일 웹 MY 버튼).

:root {
  /* Primary — T Blue. 500 = 공식값, 400 = 웹 화면의 버튼·선택 인디고 */
  --color-primary-50:  #F5F4FC;  /* 실측 — 안내 상자·「맞춤 혜택」 알약 바탕 */
  --color-primary-100: #E7E4FB;  /* (추정) 고른 칸 옅은 면 */
  --color-primary-200: #C9C2F6;  /* (추정) */
  --color-primary-300: #9C90F0;  /* (추정) 3D 그림 밝은 면 */
  --color-primary-400: #4130DF;  /* 실측 — 「다음」 버튼·고른 옵션·모바일 MY 버튼·외곽선 알약 버튼 */
  --color-primary-500: #3617CE;  /* 공식 T Blue(Pantone 2126 C) — 로고·GNB 활성 글자·로그인 버튼·순위 배지 */
  --color-primary-600: #2D13B0;  /* (추정) 눌림 */
  --color-primary-700: #240F8E;  /* (추정) */
  --color-primary-800: #1B0B6B;  /* (추정) */
  --color-primary-900: #000028;  /* 실측 — 홈 배너 「3G 서비스 종료」 남색 바탕 */

  /* Secondary — T Red. 포인트 전용 */
  --color-secondary-50:  #FFF0F1;  /* (추정) */
  --color-secondary-500: #FF404E;  /* 공식 T Red(Pantone 1788 C) — 데스크톱 「170,790원/월」·휴대폰 가격·알림 점 */
  --color-secondary-600: #FF0000;  /* 실측 — 모바일 웹 「177,790원/월」 */

  /* 기업 CI — 서비스 화면에 섞지 않는다 */
  --color-ci-red:    #EA002C;  /* SK Red(Pantone 186 C) */
  --color-ci-orange: #FF7A00;  /* SK Orange(Pantone 158 C) */

  /* 배너·타일 면 (실측) */
  --color-banner-violet: #7935DE;  /* 홈 배너·HOT & NEW 첫 타일 */
  --color-banner-indigo: #3F2ED3;
  --color-banner-sky:    #049BF2;
  --color-banner-green:  #00905C;
  --color-banner-mint:   #D5F2EB;  /* 「복잡한 인터넷 상품, 바로 찾아 드려요」 띠 */
  --color-banner-ice:    #CFE5FF;  /* 「요즘 결합은 간단하게」 띠 */

  /* Neutral (실측) */
  --color-neutral-0:    #FFFFFF;
  --color-neutral-50:   #F7F7F7;  /* 상품 이미지 판 */
  --color-neutral-100:  #F5F5F7;  /* T world 페이지 바탕 */
  --color-neutral-150:  #EEEEF4;  /* 모바일 하단 로그인 띠 */
  --color-neutral-200:  #E6E6E6;  /* 구분선 */
  --color-neutral-300:  #E1E1E1;  /* 옵션 카드 테두리 */
  --color-neutral-400:  #CCCCCC;  /* 라디오 원·밑줄 입력 */
  --color-neutral-500:  #9B9B9B;  /* 입력 안내 글자 */
  --color-neutral-600:  #808080;  /* 기준 요금제·날짜 같은 보조 글자 */
  --color-neutral-700:  #666666;  /* T world 본문 기본 글자색 */
  --color-neutral-800:  #444444;  /* 2차 글자 */
  --color-neutral-900:  #333333;
  --color-neutral-1000: #000000;  /* 제목·상품명 */

  /* Semantic */
  --color-success-bg: #E6F5EF;  /* (추정) */
  --color-success-fg: #00905C;  /* (추정) 녹색 타일 색을 완료 표시에 */
  --color-warning-bg: #FFF8E0;  /* (추정) */
  --color-warning-fg: #B88A00;  /* (추정) 별점 노랑 #FFC700 의 글자용 짙은 판 */
  --color-error-bg:   #FFF0F1;  /* (추정) */
  --color-error-fg:   #FF404E;  /* (추정) T Red 를 오류 글자에도 */
  --color-info-bg:    #F5F4FC;  /* 실측 — 「블랙, 512GB는 품절이에요.」 상자 */
  --color-info-fg:    #4130DF;  /* 실측 — 같은 상자의 강조 글자 */
  --color-benefit:    #27A4FF;  /* 실측 — 멤버십 할인 % 배지 */
  --color-rating:     #FFC700;  /* 실측 — 구매 후기 별 */

  /* Surface (배경 위계) */
  --bg-base:     #FFFFFF;
  --bg-subtle:   #F5F5F7;          /* T world 페이지 바탕 */
  --bg-elevated: #FFFFFF;          /* 카드 */
  --bg-overlay:  rgba(0,0,0,0.6);  /* (추정) 레이어 팝업 딤 */
  --bg-product:  #F7F7F7;          /* 상품 이미지 판 */
  --bg-tooltip:  #404040;          /* 실측 — 「특별 할인 도착!」 말풍선 */

  /* Text 위계 */
  --text-primary:    #000000;  /* 제목·상품명·가격 */
  --text-secondary:  #444444;  /* 옵션 글자·「간편조회」 */
  --text-tertiary:   #808080;  /* 「다이렉트5G 69(T 우주) 기준」 */
  --text-body:       #666666;  /* T world 본문 기본 */
  --text-on-primary: #FFFFFF;
  --text-disabled:   #BFBFBF;  /* (추정) */

  /* Border */
  --border-default: #E1E1E1;
  --border-subtle:  #E6E6E6;
  --border-strong:  #CCCCCC;
  --border-focus:   #4130DF;

  /* 글꼴 */
  --font-ui:   -apple-system, BlinkMacSystemFont, "SF UI Display", "Apple SD Gothic Neo", Roboto, "Noto Sans KR", notosans, sans-serif;  /* T world */
  --font-shop: "Noto Sans KR", notosans, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;  /* T 다이렉트샵 */
  --font-num:  TgothicBlack, "T Gothic Neo", Roboto, "Noto Sans KR", sans-serif;  /* 가격 숫자 */
}

색의 역할: 로고·GNB 활성 메뉴·순위 배지·로그인 버튼은 공식 T Blue #3617CE, 사용자가 누르고 고르는 자리(다음 버튼·고른 옵션·외곽선 알약 버튼·MY 버튼)는 #4130DF. 두 색을 한 버튼 안에 섞지 않는다.
가격 색: 데스크톱 T world 는 월 납부금을 T Red #FF404E 20px/600 으로, 모바일 웹은 #FF0000 16px/700 으로 쓴다. 상품 상세의 옵션 가격(「1,991,000 원」)은 검정 18px/500 이고, 고르면 인디고로 바뀐다.
배너 면: 홈 배너는 슬라이드마다 바탕색이 바뀐다(2026-10-04 기준 보라 #7935DE·검정·남색 #000028·인디고 #3F2ED3·올리브 #5D684B). 글자는 언제나 흰색이다.

Typography

타이포그래피

폰트 페어링:
- 한글: Noto Sans KR (SIL OFL) — T 다이렉트샵이 notosans 라는 이름으로 400·500·700 woff2 를 직접 싣는다. T world 는 시스템 글꼴을 먼저 쓴다(-apple-system, BlinkMacSystemFont, "SF UI Display", "Apple SD Gothic Neo", Roboto, notosans).
- 영문·숫자: Roboto (Apache 2.0) — 같은 스택의 라틴·숫자 담당.
- 브랜드 서체: T Gothic Neo (SKT 전용, Light 300·Regular 500·Bold 700·Black 900 네 굵기 실측) — T 다이렉트샵 CSS 가 가격 숫자(.price .num)를 TgothicBlack 24~32px, 자간 0 으로 세운다. 공개 배포되지 않으므로 대체는 Roboto 700.
위계 (TW = T world 홈 데스크톱, TD = T 다이렉트샵 상품 상세 — 모두 실측. 행간 표기는 실측 px 를 비율로 바꾼 값):
- Display: 40px / 700 / 1.25 / -0.8px — TW 띠 배너 「요즘 결합은 간단하게,」
- H1: 30px / 700 / 1.2 / -1.9px — TW 구획 제목 「HOT & NEW」, 「모두 에게 인기 많은 휴대폰 BEST 3」
- H2: 28px / 700 / 1.5 / 0 — TD 상품명 「iPhone 18 Pro」
- H3: 22px / 700 / 1.45 / 0 — TD 옵션 제목 「색상」「용량」「가입 유형」
- Body Large: 18px / 500 / 1.55 / 0 — TD 옵션 글자·버튼(「휴대폰만 새로 구매하고 싶어요.(기기변경)」)
- Body: 16px / 400 / 1.2 / -0.3px — TW 본문(기본 글자색 #666)
- Body Small: 14px / 400 / 1.2 / -0.3px — TW 「다이렉트5G 69(T 우주) 기준」 #808080
- Caption: 12px / 400 / 1.2 / -0.3px — TW·TD 칩, 「티다 웰컴북 ›」 알약
- 가격: 20px / 600 / #FF404E — TW 「170,790원/월」
자간: T world 는 거의 모든 글자에 -0.3px, 큰 제목만 -0.5~-1.9px 로 더 조인다. T 다이렉트샵 본문은 자간 0(normal).
GNB: 20px / 600 / -0.5px, 지금 보고 있는 메뉴만 T Blue #3617CE.

Spacing

스페이싱

Base unit: 4px (추정 — 실측 여백이 4·8·12·16·20·24·28px 에 몰려 있다)
토큰:

--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;      /* 칩 좌우·안내 상자 좌우 */
--space-lg: 24px;
--space-xl: 32px;
--space-2xl: 48px;
--space-3xl: 64px;
--space-gutter: 20px;  /* 실측 — BEST 3 카드 사이, 모바일 좌우 여백 */
--space-option: 28px;  /* 실측 — 상품 상세 옵션 카드 안쪽 */

Container: T world·T 다이렉트샵 모두 본문 폭 1180px(실측). BEST 3 는 380px 카드 세 장 + 20px 간격, 이미지 칸 위아래 25px. 모바일 웹 좌우 20px(실측 padding: 30px 20px 28px).

Border Radius

--radius-none: 0;
--radius-xs: 2px;     /* 실측 19회 — T world 흰 카드·BEST 3 이미지 칸·공지 바 */
--radius-sm: 5px;     /* 실측 — T world 로그인 버튼(198×52). 모바일 웹 카드는 3px */
--radius-md: 8px;     /* 실측 — T 다이렉트샵 버튼(160×54)·옵션 카드·안내 상자 */
--radius-lg: 12px;    /* 실측 — 상품 이미지 판(720×720) */
--radius-xl: 16px;    /* (추정) 레이어 팝업 */
--radius-leaf: 5px 0; /* 실측 — 순위 배지. 왼쪽 위·오른쪽 아래만 둥글다(모바일 3px 0) */
--radius-pill: 9999px;/* 실측 — 외곽선 알약 버튼·「맞춤 혜택」·「티다 웰컴북」 */
--radius-full: 50%;   /* 실측 — 색상 칩·모바일 MY 버튼 */

Shadow / Elevation

--shadow-none: none;
--shadow-sm: 0 2px 4px rgba(65, 48, 223, 0.18);  /* 실측 — 고른 옵션 카드·색상 칩. 인디고 기운 */
--shadow-md: 0 5px 15px rgba(0, 0, 0, 0.06);     /* 실측 — T world 흰 카드·로그인 카드·BEST 3 이미지 칸 */
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.05);    /* 실측 — 모바일 홈 서비스 바로가기 카드(배너에 겹쳐 뜸) */
--shadow-xl: 0 5px 11px rgba(0, 0, 0, 0.2);      /* 실측 — 화면 옆에 떠 있는 「자주 찾는 메뉴」 */
--shadow-float: 0 2px 9px rgba(65, 48, 223, 0.1);/* 실측 — 「맞춤 혜택」 떠 있는 알약 */

카드끼리는 테두리 없이 그림자 한 단계로 나누고, 상품 상세 옵션은 그림자 없이 1px 회색 선으로 두었다가 고를 때만 인디고 선과 --shadow-sm 을 함께 켠다.

Iconography

스타일: Outline — 머리띠의 로그인·검색·메뉴는 검정 선 아이콘. T 다이렉트샵 원형 메뉴(5G 휴대폰·휴대폰 지원금·인터넷 가입…)는 검정 선 그림에 인디고 면을 한 군데 얹고, 옅은 라벤더 원 위에 놓는다.
Stroke 굵기: 1.5~2px (추정)
모서리 처리: Round
추천 라이브러리: 공식 아이콘 세트는 공개되지 않았다. 대체로 Lucide(2px, round). 배너·HOT & NEW 타일의 그림은 아이콘이 아니라 광택 있는 3D 일러스트(인디고·라벤더 그라디언트)로 따로 그린다.

Component Guide

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

Button — T 다이렉트샵 「다음」·「상담하기」(160×54, 8px), T world 로그인(198×52, 5px), 띠 배너 외곽선 알약 버튼(높이 52px) 실측. hover·active 색은 (추정).

.tw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 54px; padding: 0 24px; border: 1px solid var(--color-primary-400); border-radius: var(--radius-md); font: 500 18px/26px var(--font-shop); cursor: pointer; transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out); }
.tw-btn--primary { background: var(--color-primary-400); color: var(--text-on-primary); }   /* 「다음」 */
.tw-btn--primary:hover { background: var(--color-primary-500); border-color: var(--color-primary-500); }
.tw-btn--primary:active { background: var(--color-primary-600); border-color: var(--color-primary-600); }
.tw-btn--secondary { background: var(--bg-base); color: var(--color-primary-400); }        /* 「상담하기」 */
.tw-btn--secondary:hover { background: var(--color-primary-50); }
.tw-btn--ghost { height: auto; padding: 0; border: 0; background: none; color: var(--color-primary-400); font-size: 15px; font-weight: 400; }  /* 「다른 구매자들은 어떤 선택을 했을까요? ›」 */
.tw-btn--danger { background: var(--bg-base); border-color: var(--color-error-fg); color: var(--color-error-fg); }  /* (추정) 해지·삭제 */
.tw-btn--login { height: 52px; padding: 0 64px; border-color: var(--color-primary-500); border-radius: var(--radius-sm); background: var(--color-primary-500); color: var(--text-on-primary); font: 400 16px/1 var(--font-ui); }
.tw-btn--round { height: 52px; padding: 0 40px; border-radius: var(--radius-pill); background: transparent; color: var(--color-primary-400); font: 400 17px/50px var(--font-ui); letter-spacing: -1px; }
.tw-btn:disabled { background: var(--color-neutral-100); border-color: var(--border-default); color: var(--text-disabled); cursor: not-allowed; }
.tw-btn.is-loading { position: relative; color: transparent; pointer-events: none; }
.tw-btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #FFFFFF; animation: tw-spin .8s linear infinite; }
@keyframes tw-spin { to { transform: rotate(360deg); } }

Input — 본인인증·검색은 상자 없는 밑줄 입력. 검색창 실측 border-bottom: 2px solid #000, 안내 글자 #9B9B9B.

.tw-input { width: 100%; height: 48px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--border-strong); background: transparent; color: var(--text-primary); font: 400 18px/1 var(--font-shop); }
.tw-input::placeholder { color: var(--color-neutral-500); }                /* 「실명을 입력해 주세요.」 */
.tw-input:focus { outline: none; border-bottom: 2px solid var(--text-primary); }
.tw-input.is-error { border-bottom: 2px solid var(--color-error-fg); }      /* (추정) */
.tw-input:disabled { color: var(--text-disabled); border-bottom-style: dashed; }

Card

.tw-card { background: var(--bg-elevated); border-radius: var(--radius-xs); box-shadow: var(--shadow-md); }   /* 기본형 — T world 흰 카드 */
.tw-option { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 var(--space-option); border-radius: var(--radius-md); background: var(--bg-base); box-shadow: inset 0 0 0 1px var(--border-default); font: 500 18px/1.5 var(--font-shop); color: var(--text-secondary); }  /* Outlined — 상품 상세 옵션 카드 */
.tw-option.is-checked { color: var(--color-primary-400); box-shadow: inset 0 0 0 2px var(--color-primary-400), var(--shadow-sm); }  /* 강조형 — 고른 칸 */
.tw-notice { padding: 12px 16px; border-radius: var(--radius-md); background: var(--color-info-bg); color: var(--color-neutral-900); font: 500 14px/1.5 var(--font-shop); }  /* 안내 상자 — 「블랙, 512GB는 품절이에요.」 */

Badge / Tag

.tw-rank { width: 48px; height: 48px; display: grid; place-items: center; border-radius: var(--radius-leaf); background: var(--color-primary-500); color: #FFFFFF; font: 700 20px/1 var(--font-ui); }  /* Solid — BEST 3 순위 */
.tw-pill { display: inline-flex; align-items: center; height: 28px; padding: 0 16px; border-radius: var(--radius-pill); background: #F2F2F2; color: var(--text-primary); font: 400 12px/1 var(--font-ui); }  /* Subtle — 「티다 웰컴북 ›」 */
.tw-chip { display: inline-flex; align-items: center; height: 35px; padding: 0 16px; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--border-subtle); font: 400 14px/1 var(--font-ui); }  /* Outline — 「나의 데이터/통화」 */
.tw-tip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 6px; background: var(--bg-tooltip); color: #FFFFFF; font: 700 12px/18px var(--font-shop); }  /* 「특별 할인 도착! ×」 */

Navigation — 데스크톱 GNB 와 모바일 하단 탭(가운데 MY 만 54px 원으로 솟는다, 실측).

.tw-gnb { display: flex; align-items: center; gap: 36px; height: 72px; }
.tw-gnb a { color: var(--text-primary); font: 600 20px/24px var(--font-ui); letter-spacing: -0.5px; text-decoration: none; }
.tw-gnb a.is-active { color: var(--color-primary-500); }
.tw-tabbar { display: flex; align-items: flex-end; height: 60px; background: var(--bg-base); box-shadow: 0 -1px 0 var(--border-subtle); }
.tw-tabbar a { flex: 1; display: grid; justify-items: center; gap: 4px; padding-bottom: 8px; color: var(--text-primary); font: 400 11px/1 var(--font-ui); text-decoration: none; }
.tw-tabbar .tw-tabbar__my { width: 54px; height: 54px; margin: 0 auto 12px; flex: none; padding: 0; align-content: center; border-radius: var(--radius-full); background: var(--color-primary-400); color: #FFFFFF; font-size: 14px; font-weight: 700; box-shadow: 0 0 0 6px var(--bg-base); }

Motion

T world CSS 실측: transition: all .3s ease 가 가장 많고(6회), 머리띠가 접힐 때 top .3s linear, 배너 점 .2s. 튀는 곡선 cubic-bezier(0.6, 0.2, 0.4, 1.5) 이 한 번 나온다.

--duration-fast: 200ms;   /* 실측 — 배너 점·떠 있는 메뉴 위치 */
--duration-base: 300ms;   /* 실측 — all .3s ease */
--duration-slow: 500ms;   /* (추정) 레이어 팝업 */
--ease-out: ease;                                 /* 실측 */
--ease-in-out: linear;                            /* 실측 — 머리띠 top .3s linear */
--ease-bounce: cubic-bezier(0.6, 0.2, 0.4, 1.5);  /* 실측 — 튀어 오르는 강조 */

Anti-patterns

1. 오픈T 옆에 행복날개를 붙여 한 덩어리로 쓰지 않는다 — 기업 CI(행복날개·SK Red/Orange)와 서비스 BI(오픈T·T Blue/Red)는 다른 체계다. T world·T 다이렉트샵 머리띠에는 T 하나만 둔다. 2. 오픈T 의 세로획을 가로획에 붙이거나 위 끝을 수평으로 자르지 않는다 — 떨어져 있고 비스듬히 잘린 모양이 "열린 문"이라는 뜻이다. 색은 T Blue 한 가지(흰 바탕) 또는 흰색(색 바탕). 3. T 레드를 넓은 면이나 버튼에 칠하지 않는다 — 공식 규정대로 포인트 컬러다. 월 납부금·휴대폰 가격·알림 점에만 쓴다. 4. 고른 칸을 색 면으로 채우지 않는다 — 바탕은 흰색 그대로 두고 인디고 테두리·글자·옅은 인디고 그림자만 바꾼다. 꽉 찬 인디고는 「다음」 같은 진행 버튼 하나의 몫이다. 5. 옵션을 약관 말투·전문 용어만으로 적지 않는다 — 「휴대폰만 새로 구매하고 싶어요.(기기변경)」처럼 고객의 말로 먼저 쓰고 용어는 괄호에 넣는다. 상태 안내도 「~이에요」 해요체.

Sources

출처

SK Telecom (SK텔레콤) 이름과 로고는 각 권리자의 상표입니다.