Web/Mobile Platform

KT&G KT&G 기업 웹사이트 기업 웹사이트

브랜드 아이덴티티를 녹여낸 메인페이지 디자인

브랜드 아이덴티티를 녹여낸 메인페이지 디자인

메인 화면은 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 디자인 시스템을 구축했습니다.
그리드, 타이포그래피, 컬러, 아이콘 등 핵심 요소를 체계화해 다양한 디지털 환경에서도 통일감 있는 화면과 사용자 경험을 제공할 수 있도록 설계했습니다.

Design System

Grid System

Gutter - 20px

Count - 12px

Margin - 82px

Typography

EN Figtree
KR Pretendard

Text Styles

Headline 1

128px

font-weight : 600

line-height : 100%

letter-spacing : -0.03

Headline 2

104px

font-weight : 600

line-height : 100%

letter-spacing : -0.03

Headline 3

84px

font-weight : 600

line-height : 100%

letter-spacing : -0.03

Title 1

40px

font-weight : 500, 600

line-height : 140%

letter-spacing : -0.03

Title 2

32px

font-weight : 500, 600

line-height : 140%

letter-spacing : -0.03

Body 1

20px

font-weight : 400, 500, 600

line-height : 160%

letter-spacing : -0.02

Icons

Trust
깨어있는 기업
Professional
함께하는 기업
Challenge
Execute
Optimize
문의하기
일반개인정보수집
물류
캠페인
원료구매

Color System

Primary Klein Bule

#3F42E5

세련되고 모던한

클라인 블루로,

감각적이고 글로벌한

분위기를 완성합니다

Primary Sky Blue

#AFCDFF

밝고 부드러운

스카이 블루로,

편안한 신뢰감을

전달합니다

Primary Black

#000

Primary White

#fff

Gradient

#3F42E5 - #AFCDFF

Next Project
Mobile PlatformGlobal

나이키 나이키 에어맥스 Dn8 에어맥스 Dn8