브랜드 아이덴티티를 녹여낸 메인페이지 디자인
브랜드 아이덴티티를 녹여낸 메인페이지 디자인
메인 화면은 KT&G의 핵심 가치인 글로벌 성장·혁신·지속가능성을 시각적으로 표현한 스토리텔링 기반 디자인으로 구성되었습니다.
브랜드 메시지와 주요 비즈니스 정보를 조화롭게 배치하고, 기업 CI를 활용한 다이내믹 인터랙션과 스크롤 기반 애니메이션을 통해 사용자의 몰입도와 집중도를 높였습니다.
브랜드 정체성을 담아낸
기업 소개 경험
KT&G 기업 소개 페이지는 브랜드 정체성을 직관적으로 전달하는 데 집중해 비주얼과 콘텐츠 흐름을 재구성했습니다. 추상적 오브제를 활용한 몰입형 비주얼과 여백 중심의 UI로 기업의 혁신성과 확장성을 상징적으로 표현하고, 스크롤에 따라 핵심 메시지·성과·사업 포트폴리오가 자연스럽게 연결되도록 UX를 설계했습니다. 이를 통해 KT&G의 비전과 브랜드 스토리를 감각적으로 경험할 수 있는 기업 브랜딩 허브로 구현했습니다.
직관적 경험으로 연결된 비즈니스 정보 플랫폼
직관적 경험으로 연결된 비즈니스 정보 플랫폼
KT&G의 글로벌 사업 포트폴리오를 비주얼 중심 콘텐츠로 구성한 ‘주요사업’ 메뉴를 신설하여 정보 전달력을 강화했습니다.
섹션별 인터랙션 효과와 고해상도 비주얼 에셋, 카드형 UI를 통해 각 사업의 경쟁력과 비전을 직관적이고 몰입감 있게 표현했으며, 팝업 버튼 기능으로 상세 비즈니스 정보를 손쉽게 확인할 수 있는 탐색 구조를 구현했습니다. 또한 새롭게 신설된 ‘IR 개요’ 페이지에서는 분기별 주요 실적과 지표를 한눈에 확인할 수 있도록 구성하여, 투자자가 KT&G의 기업 가치와 성장 방향을 직관적으로 이해할 수 있도록 정보 접근성과 시각적 완성도를 높였습니다.
ESG 콘텐츠 흐름을 강화한 UX 구조 개편
KT&G ESG 페이지는 핵심 메시지를 중심으로 정보 구조와 화면 흐름을 재정비해, 사용자가 ESG 전략과 실행 내용을 직관적으로 이해할 수 있도록 리뉴얼했습니다. 몰입감 있는 비주얼과 스크롤 기반 UX를 통해 콘텐츠의 맥락을 자연스럽게 전달하고, 명확한 정보 위계와 절제된 인터랙션으로 가독성과 탐색 효율을 강화했습니다. ESG 콘텐츠를 정보 전달을 넘어, 사용자가 맥락과 의미를 직관적으로 이해할 수 있는 경험으로 구현했습니다.
브랜드 일관성과 확장성을 담은 KT&G 디자인 시스템 구축
브랜드 일관성과 확장성을 담은 KT&G 디자인 시스템 구축
브랜드의 일관된 경험을 만들고, 운영 과정에서도 흔들림 없이 활용할 수 있도록 KT&G 디자인 시스템을 구축했습니다.
그리드, 타이포그래피, 컬러, 아이콘 등 핵심 요소를 체계화해 다양한 디지털 환경에서도 통일감 있는 화면과 사용자 경험을 제공할 수 있도록 설계했습니다.
Grid System
Gutter - 20px
Count - 12px
Margin - 82px
Typography
Text Styles
Headline 1
128pxfont-weight : 600
line-height : 100%
letter-spacing : -0.03
Headline 2
104pxfont-weight : 600
line-height : 100%
letter-spacing : -0.03
Headline 3
84pxfont-weight : 600
line-height : 100%
letter-spacing : -0.03
Title 1
40pxfont-weight : 500, 600
line-height : 140%
letter-spacing : -0.03
Title 2
32pxfont-weight : 500, 600
line-height : 140%
letter-spacing : -0.03
Body 1
20pxfont-weight : 400, 500, 600
line-height : 160%
letter-spacing : -0.02
Icons
Color System
Primary Klein Bule
#3F42E5
세련되고 모던한
클라인 블루로,
감각적이고 글로벌한
분위기를 완성합니다
Primary Sky Blue
#AFCDFF
밝고 부드러운
스카이 블루로,
편안한 신뢰감을
전달합니다
Primary Black
#000
Primary White
#fff
Gradient
#3F42E5 - #AFCDFF