Role 역할
UX / UI / Visual Production / Prototyping / Handoff
・PM, AD, 3D 비디오그래퍼와 긴밀히 협업하며 핵심 인력으로 프로젝트를 주도
・비즈니스 모델 리서치 및 비주얼 톤앤 매너 정의
・디자인 시스템 수립 및 UI 디자인과 와이어프레임 기획 및 제작
・사용자 테스트와 이해관계자를 위한 Hi-fi 프로토타입 제작
・이해관계자 피드백을 기반으로 반복적인 디자인 및 플로우 개선
・개발자와 내부 커뮤니케이션을 위한 핸드오프 문서 준비
Project 프로젝트
브랜드 이미지와 경험 개선, 신규 고객 확보를 위한 웹사이트 서비스 구축
LG VS는 더 많은 B2B 고객을 확보하고 미래 지향적 브랜드 이미지를 강화하고자 했습니다. 그러나 기존 웹사이트와 전통적인 마케팅 접근은 전장 기술과 소프트웨어 솔루션을 효과적으로 전달하지 못했고, 잠재 고객에게 강한 인상을 남기기 어려웠습니다. 이로 인해 고객을 설득하고 브랜드의 혁신성을 드러낼 새로운 디지털 솔루션이 요구되었습니다.
Project Goal
미래 모빌리티 경험을 전달하는 3D 버추얼 쇼룸 구축
Pain point 1
브랜드와 제품 경험이 고객에게 충분히 전달되지 않음
Solution
브랜드 이미지를 재정의, 톤앤매너를 웹사이트에 통합하여 존재감을 강화했습니다.
Pain point2
정보 탐색 과정이 비효율적이고 클릭이 과도하게 요구됨
Solution
사용자가 주요 기능을 쉽게 탐색하고 선택할 수 있도록 UX Flow를 개선했습니다.
Pain point 3
스토리라인이 없어 고객이 제품을 제대로 이해하지 못함
Solution
공간적 움직임과 시나리오 기반 디자인으로 흐름과 사용자 이해를 향상시켰습니다.
User Research
이해관계자의 요구사항을 분석과 경쟁사 3D 제품 쇼룸 벤치마킹
마케팅 및 영업 파트의 요구사항 분석
영업 및 마케팅 팀은 기술 정보, 회사 정체성 및 명확한 브랜드 차별화를 보여줄 수 있는 디지털 플랫폼의 필요성에 대한 의견을 드러냈습니다.
Q. When visiting the Online Demo Website, what is the main thing you’re looking to understand or achieve?
91%
Technical materials Demo videos, specs, feature breakdown
35%
Company informationCompany overview, logo, mission/vision
(2024.03 | Sales Department | Excel Form | Duplicates allowed)
정성 기반 사용자 리서치
의견 수렴 결과, 기존 웹사이트가 혁신적인 브랜드 이미지를 전달하지 못하고 사용성에 있어 한계가 있음을 드러냈습니다.
Our product is technically advanced, but that’s not obvious to outsiders. People don’t always see our brand as innovative.
It helps to some extent, but it’s still quite passive. Users just watch the video — they don’t really explore or engage with the product.
Something more immersive and interactive, like a 3D virtual showroom with a moving environment, could make the experience much more compelling.”
That our product reflects real innovation — it should clearly represent who we are as a tech-driven, forward-thinking brand.
(2024.03 | VS Solution Marketing Department | Interview)
버추얼 쇼룸의 영향에 대한 사례 분석
사례 분석 결과, 가상 쇼룸은 긍정적인 고객 경험을 제공하는 데 효과적인 방법임을 확인했습니다.
…helps to increase the conversion rate of orders by over 80%.
(Resource: borg&overstrom)
Interactive 3D/VR environments foster deeper immersion and higher spatial recall than video-based demos
Several studies have shown that VR-based environments lead to higher immersion and better spatial recall compared to traditional video demonstrations (Juan & Pérez, 2010; Radianti et al., 2020)
3D virtual showrooms have emerged as a game-changer, providing unparalleled opportunities for businesses to engage their audiences.
(Resource:coolbio.org)
Pain point 1
브랜드와 제품 경험이 고객에게 충분히 전달되지 않음
기존 웹사이트는 정적 콘텐츠에 의존해 제품의 규모와 실제감을 충분히 전달하지 못했습니다. 이로 인해 프리미엄 브랜드 이미지와 혁신적 기술력이 흐려졌으며, 분산된 CTA 버튼은 높은 이탈율로 이어졌습니다.
Solution
브랜드 정체성 강화를 위한 몰입형 경험 설계
홈페이지 진입 시점에서부터 시각적 내러티브를 생성하기 위해 VS의 3D village를 구상하였습니다.
Full screen UI로 화면을 설계하여 사용자의 몰입감을 높였습니다.
X-Y 축 탐색 : 3D 공간에서 좌우로 공간이 이동하며 제품을 탐색할 수 있습니다.
Design Process
비주얼 스타일
색상, 타이포그래피, 상호작용 및 구성 요소의 일관된 사용을 확립하여 브랜드 이미지를 일관성 있게 이어갔습니다. 이러한 접근 방식은 사용자가 브랜드를 직관적으로 인식할 수 있도록 합니다.
Mobility-inspired 3D space
‘모빌리티 빌리지’ 개념 내에서 LG VS의 브랜드 스토리를 시각화
Defining Visual Style
Bright and warm tone and manner
Brand-aligned visuals
새로 제작된 LG VS의 브랜드 비주얼 방향성을 전체 적용
3D Virtual experience
미래 모빌리티를 연상하게 하는 버추얼 공간 인터페이스
Intuitive UI design
직관적인 레이아웃과 UI 패턴
브랜드 색상 팔레트를 바탕으로 따뜻함을 더함
Video-driven spatial UX
공간이 이동할 때 제품 비디오를 연결하여 사용자가 몰입감을 느끼도록 설계
Defining Brand Identity
비주얼 톤 및 매너와 UI 디자인
LG의 브랜드 가이드 색상과 글꼴 패밀리를 기반으로 기본 색상과 디자인 시스템을 정의했습니다. UI는 유리 효과와 라운드 타입으로 반영했습니다.
경쟁사 벤치마킹을 바탕으로 제작한 VS의 새로운 비주얼 무드 보드
볼보, 폭스바겐, BMW와 같은 저명한 자동차 브랜드의 사례 연구를 바탕으로 미래 지향적인 미래 모빌리티 쇼케이스의 비주얼 무드를 정의했습니다.
Color System & Typography
Switch btn
Gradient
Warm Grey 07#F6F3EB
Warm Grey#F6F3EB
LG EI Blur
Gradient
LG EI Blur
Gradient
Active Red#EA1917
Black#000000
Dark Grey#333333
Warm Grey 02#4A4946
Warm Grey 03#716F6A
Warm Grey 05#E6E1D6
Warm Grey 06#F0ECE4
LG EI Headline
LG EI Txt
Typography
Bold
SemiboldMedium
Light
Aa
UI Highlight
Experience
Showcase
Map
Business
EN
SHOWROOM
Experience
Connectivity & Contents Solution
Intelligent HMI Solution
Expand & Upgrade Solution
Vision Display Solution
ON
5G Video Streaming
5G connectivity supports high-resolution streaming video services.
- Full high-definition streaming (up to 4K) on dual 12.8-inch plastic OLED displays
webOS software technology from LG TVs has been applied, allowing you to experience a wealth of content through our Rear Seat Entertainment (RSE) system.
5G Seamless Connectivity
Defined Visual Style & Mood
브랜드 색상 적용한 마을 콘셉트
비디오 중심의 몰임갑을 주는 사용자 경험
3D 공간 배경에 배치된 제품들
‘마을’ 메타포 통한 스토리텔링
Pain point 2
비효율적인 탐색 경험
기존 사이트는 병렬 구조의 카드 디자인으로 구성되어, 사용자가 제품을 탐색할 때마다 홈으로 돌아가 다시 선택해야 하는 불편이 있었습니다. 또한 페이지의 툴바와 풋터에는 일관성 없는 CTA 버튼이 배치되어 사용자에게 혼란을 주었습니다
Solution
CTA 배치 및 내비게이션의 최적화
시각적 계층 구조를 설계해 CTA 버튼을 명확히 하고, Z축 기반의 인터랙션을 통해 사용자가 제품의 세부 정보를 탐색하며 원하는 행동으로 자연스럽게 이어지도록 구성했습니다.
Z축 이동: 선택한 제품에 대한 자세한 정보를 탐색합니다.
히트맵 분석
히트맵 분석을 수행한 결과, 사용자가 유도하여 설계된 UX를 따라 버튼을 클릭하여 제품을 능동적으로 탐색하고 결과적으로 마지막 페이지까지 도달하고 있음을 확인했습니다.
0001-Intro Page
0002-Product List Page
0003-Product Detail Page
0004-Event Page
명확성과 일관성을 위한 UI 재설계
시각적 계층구도를 따라 일관된 상호작용 패턴 및 접근성을 고려한 비디오 플레이어 등을 디자인했습니다.
Pain point 3
스토리라인이 없어 고객이 제품을 제대로 이해하지 못함
기존 데모 영상은 단순한 이미지와 비디오에 의존해 현실감과 공간감을 충분히 전달하지 못해 고객이 제품의 가치를 온전히 체감하기 어려웠습니다. 또한 현장 방문의 접근성 한계로 인해, 방문하지 못한 고객은 낮은 몰입도를 경험할 수밖에 없었습니다.
Solution
공간 이동 및 시나리오 기반 UX 디자인
사용자 여정을 ‘공간의 이동’으로 설계하여 사용자가 각 단계에서 제품을 경험하며 브랜드의 가치를 느낄 수 있도록 했습니다.
제품 탐색 및 카테고리 전환할 때 공간의 이동을 연결하는 비디오를 삽입하여 사용자가 깊이 몰입할 수 있도록 도와줍니다.
User test
정성적 A/B 테스트
두 가지 디자인 구조에 대해 A/B 테스트를 수행했습니다. 그리고 사용성 테스트 결과에 대한 종합 분석 후, 보다 직관적이고 몰입감 있는 경험을 제공하는 전체 화면 UI 구조를 채택했습니다.
옵션 A : 몰입형 전체 화면 UI
"VS village" 내러티브 기반 3D 레이아웃. 각 3D 섹션이 제품 구역을 나타내는 공간적 스토리텔링 인터페이스. 사용자는 가상 공간 내에서 이동하며 탐색하는 구조.
장점: 높은 시각적 몰입감 / 단점: 낮은 정보 밀도
옵션 B : 스크롤 기반 내러티브 인터페이스
스크롤 트리거를 통한 스토리텔링. 모바일에 최적화된 몰입형 웹 경험. 콘텐츠는 비디오와 모션 효과를 혼합하여 안내된 순서로 공개됨.
장점: 강력한 스토리텔링, 모바일 친화적 단점: WebGL 로드/개발 비용, 접근성 감소
Key User Flow Map
키 플로우를 통해 각 단계의 사용자 행동 흐름을 파악하고, 보다 직관적인 경험을 설계할 수 있도록 했습니다.
User test
Prototype
Hi-fi 프로토타입 제작
사용자 여정을 시뮬레이션하고 테스트하기 위해 필수 기능에 맞춘 하이파이 프로토타입을 Figma를 활용하여 제작했습니다.
Retrospective
프로젝트 회고
Q.
프로젝트에서 어떤 통찰을 얻었나요?
A.
새로운 브랜드의 톤과 매너 및 사용자 중심 탐색 구조를 적용한 결과, 프로토타입 시연에서 긍정적인 피드백을 받았으며, 정보 접근 흐름이 직관적이고 명확하게 개선되었음을 확인했습니다. 재설계된 구조는 사용자가 기능 요소를 효과적으로 탐색하고 선택할 수 있도록 하여 요구 사항(기술 정보 접근, 브랜드 차별화)을 충족시켰고, 초기 가설과 일치했습니다.
Q.
프로젝트에서 가장 도전적인 측면은 무엇이었나요?
A.
UX 전략은 성공적이었지만, 이해관계자 간의 운영 및 보안에 대한 이견으로 인해 프로젝트는 최종 출시되지 않았습니다. 보안 문제는 처음부터 논의되었고, 이에 대한 솔루션으로 온프레미스 환경을 구축했지만, 마케팅, 보안 및 비즈니스 부서 간의 KPI 차이를 조정하는 데 실패했습니다. 이 경험은 디자인 전략이 사용자 중심 디자인을 넘어 조직의 위험 관리 및 운영 정책을 고려해야 이해관계자와 효과적으로 협력할 수 있다는 것을 가르쳐 주었습니다.
Q.
이 프로젝트를 통해 무엇을 배웠나요?
A.
첫 번째로, UX 관점에서의 서비스 구축 프로세스를 처음부터 끝까지 다뤄볼 수 있었습니다.
UX 기획 → 디자인 구축 → 핸드오프까지 이어지는 일련의 과정을 수행하며, 단순한 시각적 완성도를 넘어 비즈니스 관점에서 서비스를 성장시키는 프로덕트 디자이너로서의 역량을 쌓을 수 있었습니다. 이를 통해 저는 “사용자 경험과 비즈니스 성과를 함께 고려하는 디자이너”라는 목표를 명확히 하게 되었습니다.
두 번째로, 협업의 중요성을 깊이 체감했습니다. 다양한 배경과 관점을 가진 동료들과의 협력 속에서, 혼자서는 도달하기 어려운 성과를 함께 만들어낼 수 있음을 배웠습니다. 특히, 의견 차이를 조율하고 서로의 강점을 살려내는 과정에서 팀워크의 진정한 가치와 시너지를 확인할 수 있었습니다.
앞으로의 커리어에서는 이러한 경험을 바탕으로 작은 디테일도 놓치지 않는 꼼꼼함과 원활한 협업 문화를 동시에 실현하고 싶습니다. 데일리 스크럼을 통한 지속적인 소통, 정기적인 검증 및 테스트를 통한 객관적 피드백, 그리고 이해관계자들과의 균형을 통해 프로젝트를 개선·성장시키는 디자이너가 될 것입니다.
Appendix
Wireframing
와이어프레임은 데스크톱과 모바일 환경 모두에서 콘텐츠 레이아웃과 내비게이션 흐름을 검증하기 위해 제작했습니다. 또한, 디자인 단계로 넘어가기 전에 의견 일치와 방향을 조정하기 위한 커뮤니케이션 도구로 사용되었습니다.
Design Components & Handoff Documentation
Figma에서 재사용할 UI 구성 요소를 정의하고 내부 디자이너 간의 소통을 원활하게 하며 개발 팀의 원활한 디자인 구현을 돕기 위한 문서를 작성했습니다.
From from graphics to digital/web and UI/UX, see the breadth of my creative explorations.
More projects
UX/UI, Visual Producing
3D Virtual Showroom
Explore
