_{KT UX 디자인 시스템 사이트}

KT UX 디자인 시스템은 어떻게 만들어졌고, 왜 지금 필요했을까?

KT에는 매우 다양한 서비스들이 존재합니다. 고객이 매일 사용하는 앱·웹 서비스, KT의 네트워크·통신 서비스를 관리하는 B2B 서비스, 그리고 직원들이 사용하는 BSS·OSS·ERP 같은 사내 시스템까지.

서비스의 범위는 매우 넓고 여기에 그룹사와 파트너사의 서비스까지 더해지면 그 규모는 더욱 커집니다.

이 서비스들은 서로 다른 시기와 목적에 맞춰 개발되어 담당 조직이나 외주사도 제각각이었습니다.

화면의 스타일이나 구조, 인터랙션 방식도 프로젝트마다 따로 결정되는 경우가 많아졌고, 시간이 지나면서 이러한 차이는 그대로 누적되어, 결과적으로 동일한 KT 브랜드 아래에서도 서비스마다 조금씩 다르게 느껴지기 시작했습니다.

고객 입장에서는 같은 KT 서비스임에도 사용 방식이 매번 새롭게 느껴지고, 내부 실무자들은 화면을 만들 때마다 기준을 다시 잡아야 하는 상황이 반복되었습니다. 서비스가 늘어나고 복잡해질수록 경험의 일관성을 유지해야 하는 필요성은 더 커졌지만, 기존 구조만으로는 이를 안정적으로 관리하기 어려웠습니다.

이런 문제들은 통합 UX 디자인 시스템을 구축해야 하는 이유를 명확하게 보여줍니다.

서비스마다 다르게 쌓여온 방식들을 하나로 정렬할 필요가 있었고, 그 해결책으로 KT UX 디자인 시스템을 구축하게 되었습니다.

먼저 풀고자 했던 문제들

KT UX 디자인 시스템은 단순히 버튼이나 컬러를 정리한 가이드가 아닙니다.

서로 다른 서비스들이 하나의 브랜드 경험으로 이어질 수 있도록, KT 디지털 경험의 가치와 원칙, 그리고 화면을 구성하는 방식 전반을 다시 정리한 체계입니다.

디자인을 예쁘게 만드는 것보다 더 중요했던 것은, 서비스마다 다르게 만들어지면서 생긴 경험의 격차를 줄이고 KT 전체가 한 방향에서 보이도록 기반을 갖추는 일이었습니다. 각 조직과 팀이 같은 기준과 언어 아래서 일할 수 있는 환경을 만드는 것이 결국 이번 프로젝트의 핵심이었습니다.

또 하나의 중요한 변화는 AI 시대의 도래였습니다. 앞으로의 사용자 경험은 단순히 화면과 메뉴 중심이 아니라, AI가 먼저 제안하고, 에이전트가 상황에 맞게 도와주며, 사용자는 필요한 단계만 선택하는 방식으로 확장될 것입니다.

이러한 흐름을 제대로 설계하려면 기존 UI 기준만으로는 충분하지 않았습니다.

그래서 KT UX 디자인 시스템에는 기존 화면 중심의 가이드뿐 아니라, AI 에이전트의 대화 흐름, 프롬프트 UX, 멀티모달

응답 방식까지 모두 새롭게 포함되었습니다. 이는 AI 기반 서비스가 본격적으로 확장되는 상황에서 KT가 어떤 경험을 제공해야 하는지에 대한 기준을 처음부터 다시 세운 작업이기도 합니다.

결국 이 디자인 시스템은 KT의 현재 서비스를 정돈하기 위한 목적을 넘어, 앞으로 만들어질 미래 서비스들을 위한 기반이라고 할 수 있습니다.

사용자와 조직의 목소리를 분석한 과정, FGI

KT UX 디자인 시스템을 설계하기 위해서는 먼저 실제 서비스 경험을 정확하게 이해하는 과정이 필요했습니다.

이를 위해 고객, 임직원, 브랜드 조직, 개발자, CS 담당자 등 여러 역할의 유관부서 및 참여자를 대상으로 FGI(Focus Group Interview)와 설문을 진행하여 KT 서비스 이용 과정에서 느끼는 실제 인식을 폭넓게 수집했습니다.

예를 들면, KT 서비스를 대표하는 키워드를 어떻게 인식하는지, 처음 사용했을 때 어떤 인상을 받았는지, 원하는 정보나 기능을 찾는 과정이 얼마나 자연스러웠는지, 정보가 어떤 방식으로 제시될 때 가장 이해하기 쉬웠는지와 같은 항목들을 통해 사용자 경험의 흐름을 구체적으로 파악했습니다.

FGI 결과는 KT 서비스 경험이 어떤 지점에서 끊기고, 고객이 어떤 순간에 신뢰와 편리함을 느끼는지를 명확하게 보여주었습니다. 응답자들은 ‘신뢰’, ‘편리함’, ‘혁신’, ‘감성’을 KT의 인상으로 언급한 반면, 실제 사용 과정에서는 ‘정보가 흩어져 보이거나’ ‘서비스마다 흐름이 달라 일관성이 부족하다’는 점을 공통적으로 지적했습니다. 이러한 인식 차이를 확인한 과정은 앞으로 어떤 경험을 기준으로 삼아야 하는지 방향을 설정하는 데 핵심적인 역할을 했습니다.

고객이 기대하는 경험의 기준을 감이 아닌 데이터로 확인할 수 있었고, KT다운 사용자 경험을 구성하기 위해 어떤 원칙과 구조가 필요할지 구체적으로 정의할 수 있었습니다.

어떤 방식으로 만들어졌을까?

UX 디자인 시스템은 실제 서비스 운영과 확장을 고려해 설계된 구조입니다.

KT 서비스 전반에 공통으로 적용해야 할 UX 기준을 정리하고, 그 기준을 바탕으로 토큰·컴포넌트·패턴을 Atomic Design 방식으로 구성해 전사 서비스가 동일한 방식으로 설계될 수 있도록 방향을 잡았습니다.

토큰 체계는 Figma Variables을 기반으로 정리하여 기획·디자인·개발이 같은 기준에서 작업을 시작할 수 있도록 환경을 마련했고, 디자인 요소가 업데이트 될 때마다 Figma·GitHub·Zeroheight에서 동일하게 활용될 수 있도록 전체 서비스에 반영할 수 있는 구조를 갖췄습니다.

또한 디자인 시스템이 KT 내부 보안 정책 안에서 안정적으로 운영될 수 있도록 GitHub Enterprise 조직 구성, Azure 구독 범위 검토, Figma·Zeroheight 보안 검토, SSO 기반 인증 등 필요한 보안·인증 절차를 함께 마련했습니다.

이 일련의 기반 작업들을 통해 KT의 다양한 서비스가 별개로 움직이지 않고 같은 구조 안에서 확장될 수 있는 토대를 확보했고, 이후 컴포넌트·패턴 고도화나 실제 서비스 적용 단계에서도 안정적으로 일관된 경험을 이어갈 수 있는 환경을 갖추게 되었습니다.

이 과정에서 X-Design Center가 맡았던 역할

KT UX 디자인 시스템은 여러 조직이 함께 만들어가는 구조입니다. 그 중에서도 X-Design Center는 UX/UI 기준을 정리하고, 이를 실제 서비스에 적용할 수 있도록 전사적으로 조율하는 역할을 맡고 있습니다.

각 본부의 서비스 구조를 검토해 요구사항을 공통 기준에 맞게 재정비하고, 협업사 작업도 동일한 규칙 안에서 진행될 수

있도록 기준을 맞춰 왔습니다.

필요할 때는 워크숍이나 프로젝트 단위의 직접 지원을 통해 적용 과정에서 발생하는 이슈를 조정하며, 이러한 지속적인 정비가 전사 서비스가 한 방향으로 움직일 수 있는 기반이 되었습니다.

KT UX 디자인 시스템의 핵심 구성

UX 디자인 시스템은 KT의 다양한 서비스를 하나의 흐름으로 묶기 위해 필요한 요소들을 정리한 구조입니다. 

KT가 쌓아온 실제 사용 경험을 기반으로 UX 원칙, 파운데이션, 컴포넌트·패턴, 그리고 AI 에이전트 경험까지 공통 기준 안에서 다시 정리했습니다.

이 기준을 사용하면 신규 화면 제작이나 리뉴얼 과정에서도 KT 서비스가 가진 익숙함과 톤을 그대로 유지하며 동일한 경험을 제공할 수 있습니다.

1) UX 원칙을 새롭게 정리했습니다

UI 형태나 트렌드는 바뀌어도, 고객이 사용하는 방식은 일관되어야 한다고 보았습니다. KT의 여러 서비스가 같은 경험으로 이해될 수 있도록 5가지 UX 원칙을 정리했습니다.

이 원칙들은 전사 화면을 조사하고, 고객과 실무자의 실제 사용 맥락을 분석해 KT 서비스에서 고객이 어떤 순간에 편의를

느끼고, 어떤 방식으로 이해·사용하는지를 UX 관점에서 정리한 공통 원칙입니다.

여기에 KT가 그동안 전달해 온 브랜드 메시지와 상품 슬로건이 담아낸 가치도 함께 검토하여 KT 서비스 전반을 하나로 잇는 기준으로 완성했습니다.

정리된 UX 원칙은 모든 경험을 하나로 연결하는 Seamless Flow 슬로건 아래에서 패턴, 컴포넌트, 화면 구조를 정의하는 중심 기준으로 활용 됩니다.

_{UX 원칙 > ‘연속’ 하위 원칙 예시 화면}

2) 파운데이션을 통일했습니다

UI 컴포넌트나 패턴을 정의하기 전에, 서비스마다 다르게 사용되던 기본 UI 기준(컬러·타이포·레이아웃)을 먼저 하나로

맞추는 작업이 필요했습니다.

특정 기준 없이 만들다 보니 같은 컴포넌트라도 서비스마다 다르게 제작되는 상황이 반복되고 있었습니다.

전사 화면 및 가이드를 수집해 서비스별 사용 방식을 비교한 뒤, 브랜드 컬러를 웹 접근성 기준에 맞게 재정비하고 공통 팔레트로 통일했습니다. 타이포그래피는 신규 제작된 브랜드 전용 KT Flow서체를 디스플레이 영역에 적용하고, 본문에는 가독성이 높은 Pretendard를 사용해 서비스 전반의 톤과 가독성을 일관되게 맞췄습니다. 그 외 그리드·여백·아이콘·비주얼·Writing도 반복 사용되는 패턴을 기준으로 정비해, KT 전체 서비스가 하나의 경험으로 보일 수 있는 기반을 마련했습니다.

_{파운데이션 가이드}

3) 컴포넌트 · 패턴을 기능 단위로 재구성했습니다

KT 전사 서비스 화면을 모두 기능·구조등을 컴포넌트 별로 분류한 뒤, 반복적으로 등장하는 UI 요소를 기능 목적에 따라

다시 분류했습니다. 같은 목적을 수행하는 요소들은 표현 방식의 차이를 걷어내고 공통 구조로 재정비했으며, 실제 서비스 화면에 적용하며 검증을 통해 ‘사용되는 형태’ 중심으로 컴포넌트를 정의했습니다.

버튼·폼·탭·카드·리스트처럼 재사용 빈도가 높은 요소는 상태·사이즈·레이아웃 기준을 통일해 컴포넌트로 정리했고, 화면의 흐름을 결정하는 검색 구조, 리스트 상세 구조, 입력·확인 단계 흐름 등은 패턴으로 구분해 서비스 단위에서 일관되게 적용할 수 있도록 구성했습니다.

이렇게 정리된 컴포넌트와 패턴을 조합해 주요 서비스 흐름을 구조화했고, 실제 화면 제작 과정에서도 같은 규칙으로 확장될 수 있도록 기반을 마련했습니다.

_{컴포넌트 · 패턴 가이드}

4) UX Writing 기준을 함께 정리했습니다

서비스마다 달랐던 문구 스타일을 하나로 맞추기 위해 UX Writing의 기본 원칙을 정리했습니다. 

텍스트는 간결하고 명확하게 전달되도록 하고, 누구나 쉽게 이해할 수 있는 표현을 우선으로 삼았으며, 사용자의 감정과 상황을 고려해 공감·배려의 톤을 유지하는 것 또한 중요한 기준으로 포함했습니다.

이 원칙을 기반으로 실제 화면에서 어떻게 쓰여야 하는지 Do/Don't 예시와 함께 가이드를 제공하여 용어 사용부터 문장 구조, 톤앤매너, 상태·에러 메시지까지 전반적인 서비스에 공통으로 적용될 수 있는 라이팅 원칙을 정리했습니다.

_{UX Writing 보이스 앤 톤 예시 문구}

_{UX Writing 원칙 예시 화면 - 가족 통신비 안내}

5) AI 기반 서비스 흐름을 위한 AI Agent 가이드를 전면 확장했습니다

기존 UI 중심 가이드만으로는 AI 기능의 입력(Input) → 처리(Process) → 응답(Output) 흐름을 서비스 화면에서 안정적으로 표현하기 어렵던 부분이 있었습니다.

이번 업데이트에서는 이 흐름을 다룰 수 있도록 1차 선배포(데스크탑) 이후 모바일 버전까지 라이브러리로 연결해 적용 범위를 넓히고, 각 서비스에서 바로 참고할 수 있도록 패턴과 예시 중심으로 AI Agent 가이드를 확장했습니다.

이번에 정리한 AI UX 7가지 원칙은 아래와 같습니다.

1. 상황을 이해하고 필요한 기능을 자연스럽게 제안한다.

2. AI 처리 중 과정을 제공한다.

3. 정보의 출처를 명확히 제공한다.

4. 대화가 자연스럽게 이어지도록 유도한다.

5. 대화 내용을 기억하고 개인화된 경험을 제공한다.

6. 고객이 원하는 형태와 방식으로 결과를 제공한다.

7. AI 한계를 설명하고 대안을 제시한다.

_{AI 원칙 예시 화면 - 대화 이력/패턴 기반 추천 자료}

6) 실무에서 바로 쓸 수 있는 환경을 먼저 만들었습니다

실무에서 바로 사용할 수 있도록  Figma 라이브러리, GitHub 버전 관리, Zeroheight까지 하나의 흐름으로 연결되는 작업 환경을 정비했습니다.  디자인 토큰과 컴포넌트가 Figma·GitHub·Zeroheight에서 동일하게 확인될 수 있도록 기준을 맞췄고, 업데이트된 내용도 Zeroheight에서 한곳에 모아 볼 수 있어  내부 조직과 협업사 모두 같은 기준을 참고하며 작업할 수 있는 구조를 마련했습니다.