- AI Service
- Service Integration
- Design System
SKT T3S 통합 AI 추천 서비스
제각각인 콘텐츠를 하나의 서비스로 만들기
- Period
- 2024.08 ~ 2024.12
- Client
- SK Telecom
- Role
- T멤버십 UX/UI 디자인 · Common 디자인 시스템 구축 참여
- Team
- PM 1, UX기획 8, UX디자인 6, 퍼블리싱 4
Overview
서로 다른 세 서비스를, 하나의 추천 경험으로
T월드·T다이렉트샵·T멤버십, 통칭 T3S의 첫 통합 프로젝트입니다. T월드와 T멤버십 앱의 ‘추천’ 탭에서 사용자 행동 패턴을 AI로 분석해 상황에 맞는 콘텐츠를 제안합니다.
각 사업부가 별도로 운영해온 화면을 하나의 서비스처럼 보이게 만들면서도, 이후 콘텐츠가 늘어날 상황까지 고려한 화면 구조와 스타일 기준이 필요했습니다.
Design Challenge 01
100개 가까운 요청 콘텐츠, 제각각인 형태
세 서비스에서 전달된 콘텐츠는 텍스트·이미지·리스트·그래프처럼 서로 다른 정보 구조를 가지고 있었습니다. 서비스별 화면을 그대로 옮기는 대신, AI 추천 서비스의 최소 단위인 콘텐츠 모듈을 정의하고 다시 분류했습니다.
AI 추천 홈 구조
Context
Offer
최소단위
콘텐츠
Context
Offer가 노출되는 근거와 상황
Offer
고객에게 제안하려는 요소 혹은 행동
최소단위 콘텐츠
AI 추천 서비스의 핵심 콘텐츠
고객에게 제공하고자 하는 정보와 기능을 담은 컨텐츠 모듈
요청 콘텐츠를 다시 보는 세 가지 기준
사용자 행동
탐색 · 이해 · 비교 · 조작 · 전환
정보 형태
이미지 · 수치 · 복합 · 시퀀스
표시 항목 수
1개는 Image · 2개 이상은 List
Design System
약 100개의 콘텐츠를,
5개 템플릿과 예외 규칙으로
서비스 이름이 아니라 정보의 형태와 사용자의 행동을 기준으로 유형을 나눴습니다. 더 많은 유형에서 출발해 재그루핑하며 5개로 수렴했고, 운영 효율을 위해 예외를 무작정 늘리는 대신 명확한 허용 기준을 함께 정의했습니다.
예외 허용 기준
구조적 예외
사업부 고유 정보 구조가 기본 레이아웃과 맞지 않는 경우
사용성 예외
기본 템플릿으로 정보 이해나 과업 수행이 어려운 경우
적용 원칙
공통 스타일 가이드 범위 안에서 변형해 일관성을 유지
이미지가 판단을 이끄는 콘텐츠
핵심 비주얼을 먼저 보여줘 신뢰와 선택을 돕는 구조
진행 단계를 보여주는 프로세스 바 구조가 기본 레이아웃에 없음
Design Challenge 02
혜택 프로그램마다 다른 화면, 같은 T멤버십
최소단위 콘텐츠의 CTA는 상세 정보를 보여주는 2Depth 화면으로 연결됩니다. 기존 화면의 외형은 비슷했지만, 프로그램마다 보여주는 정보량과 사용 방식은 달랐습니다. 공통 요소는 하나의 레이아웃 규칙으로 통일하고, 일회성 요소는 화면별 예외로 남겼습니다.
Before
혜택 프로그램별 개별 화면
7
모든 프로그램에 동일하게 쓰이는 요소
상단
혜택 프로그램명 · 마케팅용 타이틀 · 메인 비주얼
리스트
리스트 타이틀 · 브랜드 로고 · 브랜드명 · 혜택명
5
한 프로그램에서만 쓰이는 요소
상단
혜택 필요 조건 · 이벤트 · 등급 안내
리스트
혜택유형 뱃지 · 기간
10
두 개 이상 프로그램에서 반복되는 요소
상단
혜택 안내 · 혜택 브랜드 목록 · 혜택 이용 현황
리스트
탭 · 이미지 · 리스트 설명 문구 · 혜택 조건 · 이용안내 · 리스트 마케팅문구 · CTA 버튼
After
기준 레이아웃과 프로그램별 화면
기준 레이아웃
0 day 혜택
- 1혜택 프로그램명
- 2마케팅용 타이틀
- 3메인 비주얼
- 4브랜드명
- 5로고 이미지
- 6혜택명
- 7탭
- 8리스트 설명 문구
Constraints & Decisions
병렬 스프린트 안에서도 유지되는 공통 기준
기획·디자인·퍼블리싱이 서로 다른 스프린트를 병렬로 진행하면서 초기 설계 변경과 컴포넌트 불일치가 반복됐습니다. 반복 사용되는 약 50개 공통 컴포넌트의 불일치 지점을 직접 매핑하고, PL과 통일 기준과 예외 허용 범위를 협의했습니다.
하나의 틀을 적용하기 어려운 화면은 큰 레이아웃과 공통 요소만 통일하고, 내부 구성에는 자율성을 두었습니다. 전체 화면 확정 이후에는 기준을 스타일 가이드로 정리해 운영 단계에서도 참고할 수 있도록 남겼습니다.
불일치 매핑
반복 컴포넌트의 설계·퍼블리싱 차이를 확인
공통 규칙 협의
PL과 통일 기준 및 예외 허용 범위를 결정
스타일 가이드
확정된 기준을 운영 단계의 참고 구조로 정리
Outcome
여러 제약 속에서, 하나의 서비스다운 일관성을 구축했습니다
초기 요청된 약 100개의 콘텐츠를 전수 분석해 5개 템플릿과 예외 규칙으로 구조화했습니다. 이후 사업 우선순위에 따라 개발 범위가 조정됐고, 최종 확정된 최소단위 콘텐츠 69개와 162개 상태·예외 케이스에 공통 기준을 적용했습니다.
약 100개
초기 요청 콘텐츠
5개
템플릿과 예외 규칙
69개 · 162개 케이스
최종 개발 범위
Contribution
- T멤버십 전체 70개 화면 - 최소단위 콘텐츠 19 · 상세화면 51
- T월드·T다이렉트샵 일부 최소단위 콘텐츠 설계
- Common 디자인 시스템 구축 참여
Project scale
- 전체 214개 화면 - 최소단위 콘텐츠 69 · 상세화면 90 · 공통화면 55
- 13개 UI 카테고리 · 72개 컴포넌트 패밀리
- Common 디자인 시스템 338개 배리언트
운영 이관으로 사용자 지표는 확인하지 못했습니다. 대신 신규 콘텐츠가 추가되어도 기존 규칙 안에서 대응할 수 있는 구조와, 클라이언트가 요청한 ‘하나의 서비스로 보이는 일관성’을 남겼습니다.