18년의 커머스 디자인 실무 경험에
상세페이지부터 콘텐츠, 인쇄물, 웹까지.
AI를 활용해 커머스 디자인의
범위를 확장합니다.
ABOUT THE DESIGNER
컴퓨터 활용능력 3급
대한상공회의소
2003. 03
ACP(Adobe Certified Professional)
Adobe
2026. 06
Certificate
자격증
웹표준 및 웹접근성
그린컴퓨터아트학원
2015. 07 - 2015. 08
javaScript & J-Query
그린컴퓨터아트학원
2015. 08 - 2015. 09
AI 프롬포트 엔지니어링
SBS아카데미컴퓨터학원
2026. 06 - 2026. 09
Figma(웹앱 화면설계)
SBS아카데미컴퓨터학원
2026. 08 - 2026. 10
Training
교육
리안퍼니처
인터넷사업부 대리
2010. 01 - 2012. 07
(주)프라임생활건강
디자인팀 대리
2013. 06 - 2016. 03
(주)프로젝터매니아
기획팀 팀장
2016. 03 - 2026. 04
Career
Career
Tool
경력
YOO KYUNGHWA
AI Commerce & Content Designer
2026
Design
03
목적에 맞는 상품을,더 쉽게 찾는 탐색 경험
제품군과 사용 환경을 구분하고, 상담과 추천 상품으로 구매 탐색을 연결한
모바일 메인페이지 리뉴얼 제안입니다.
MOBILE SHOPPING UI
1. AI VISIUAL
생성형 AI를 활용한
고품질 비주얼 콘텐츠 제작
Generative AI
프롬프트 설계
이미지 제작
2. CONTENT DESIGN
AI 비주얼과 콘텐츠 기획을 결합한
PM810L 상세페이지 리디자인
AI 활용
콘텐츠 기획
상세페이지 디자인
3. INTERFACE DESIGN
사용자 경험 개선을 위한
모바일 쇼핑몰 UI 리뉴얼
Figma
UI 디자인
컴포넌트 설계
Photoshop
Illustrator
Figma
Midjourney
Nano Banana
Higgsfield
Adobe Firefly
ChatGPT
POINT 3
통일되지 않은 UI 구성
콘텐츠별 디자인 요소, 여백, 텍스트 크기 등의 기준이
일관되지 않아 시각적 집중도가 떨어지는 구성
POINT 2
상품 중심의 탐색 구조
제품 및 브랜드 정보 중심으로 콘텐츠가 구성되어, 소비자 시점의
탐색 흐름이 직관적이지 않아 원하는 정보까지의 이동 과정이 복
잡한 구성
POINT 1
콘텐츠 정보의 위계 부족
상품 배너와 이벤트, 서비스 안내가 연속적으로 배치되어 있지만
중요도에 따른 시각적 위계가 부족해 핵심 상품을 빠르게 파악하기
어려운 구조
AS-IS
모바일 환경에서의 상품 탐색 경험 분석
기존 모바일 메인페이지의 정보 배치와 탐색 구조를 분석하고, 사용자 관점에서 개선이 필요한
UI 요소를 도출했습니다.
02
02
01
03
AS-IS 기존 구조
TO-BE 목적 중심의 정보 구조
메인 프로모션
핵심 상품과 혜택에 집중
↓
사용 환경별 카테고리
회의·기업 / 학교·학원 / 교회·강당 등
↓
전문가 상담
무료 견적과 실시간 상담의 진입점
↓
용도별 BEST
관심 목적에 따라 추천 상품 비교
↓
설치 사례·고객지원
실제 적용 환경과 구매 전후 정보
02
PM810L
핵심 정보가 먼저 보이는 상세페이지
기존 상세페이지 분석 · AI 비주얼 연출 · 주요 개선 영역의 부분 리디자인 제안
DETAIL PAGE REDESIGN
DESIGN DIRECTION
제품 가치를 보여주고, 핵심 정보를 앞에 모으기
사용 환경을 담은 AI 이미지 · 핵심 스펙 상단 요약 · 관련 기능 통합
제품의 장점보다, 복잡한 정보가 먼저 보였습니다.
비주얼 맥락·스펙의 노출 순서·반복 기능을 중심으로 기존 구성을 분석했습니다.
EXISTING PAGE ANALYSIS
POINT 1
제품 활용 환경을 보여주는
비주얼 부족
기존 제품 중심의 단순한 이미지 구성으로 실
제 사용 환경과 제품의 활용 가치를 직관적으
로 전달하기 어렵습니다.
제품의 특성을 강조할 수 있는 고품질 연출
이미지가 필요합니다.
POINT 2
핵심 정보의 낮은 노출
밝기, 해상도, 투사거리 등 주요 스펙이 상세
페이지 여러 구간에 분산되어 있어 구매자가
제품의 핵심 경쟁력을 빠르게 파악하기 어렵
습니다.
POINT 3
반복되는 기능 설명과 복잡한
구성
유사한 기능과 관련 설명이 여러 섹션에서 반
복되어 콘텐츠가 길어지고, 정보의 우선순위
가 불분명해 전체적인 가독성이
떨어집니다.
AI 비주얼 고도화와 정보 구조 재설계로 제품의 핵심 경쟁력 강화
AI 기반 연출 이미지로 제품의 활용 환경을 시각화하고, 핵심 스펙의 우선 배치와 중복 기능 통합을 통해 정보 전달력과 가독성을 개선했습니다.
AI CONTENT PLANNINGAI CONTENT PLANNING
AI 기반 상세페이지 콘텐츠 재구성
AI를 활용해 제품 정보와 기존 콘텐츠를 분석하고,
핵심 정보의 우선순위와 기능별 구성을 재설계했습니다.
AI 활용 연출컷 퀄리티 향상
핵심 스펙 상단 배치
관련 기능 그룹화
1. VISUAL QUALITY
2. PRIORITY
2. GROUPING
기타 기능 및 상세 정보
레이저 광원
광원 수명
AI 연출 이미지
기존 저퀄리티
이미지
메인 비주얼
레이저 광원 기능
투사거리
밝기
해상도
레이저 광원 기능
DETAIL PAGE REDESIGN
PM810L 상세페이지 리디자인
AI 연출 이미지와 핵심 스펙 중심의 정보 구조 적용
Before
After
본 프로젝트는 전체 상세페이지가 아닌, 주요 개선 영역을 중심으로 AI를 활용하여 진행한 부분 리디자인 제안입니다.
제품 중심의 단순한 연출로
주요 성능과 차별화된
가치 전달 부족
유사 기능과 관련 설명이
여러 영역에 분산되어
콘텐츠 길이 증가
핵심 스펙이 하단에 배치되어
주요 성능 확인까지
많은 스크롤 필요
핵심스펙의
부실한 설명 및
정리되지 않은 나열
AI 연출컷을 활용해
제품의 전문성과
프리미엄 가치 강조
AI 연출컷을 활용해
제품의 전문성과
프리미엄 가치 강조
AI 연출컷을 활용해
제품의 전문성과
프리미엄 가치 강조
핵심 스펙 6가지를
상단에 집중 배치해
정보 전달력 강화
핵심 스펙 요약 후
대표 기능 상세로 바로 연결
정보 전달 효율 강화
AI를 활용한
실제 투사 환경 시각화
핵심기능을 한눈에
파악할 수 있도록
압축작업
01
촬영의 제약을 넘어,
제품의 가능성을 확장합니다.
제품 원형을 바탕으로 사용 환경과 광고 콘셉트를 시각화했습니다.
AI VISUAL CONTENTS
공간을 보여주면,
제품의 쓰임이 보입니다.
Generative AI Visual
Projector
제품 고유의 형태와 디테일을 유지하면서
공간의 조명과 구도를 정교하게 연출해,
실제 광고에 활용할 수 있는 고품질 비주얼을 제작했습니다.
Original photo
Contribution
Form
Tool
기획 100% / 제작 100%
Image / Video
ChatGPT / Midjourney / Nano Banana
AI VISUAL ASSETS
다양한 환경에 맞춘 비주얼 콘텐츠 제작
대회의실, 기업 행사장, 스크린골프장 등 촬영이 어려운 다양한 사용 환경을 AI로 구현했습니다.
제품의 활용성을 시각화하고, 메인 비주얼과 기능별 콘텐츠에 적용할 수 있는
고품질 연출 이미지를 제작했습니다.
Contribution
Form
Tool
기획 100% / 제작 100%
Image / Video
ChatGPT / Midjourney / Nano Banana
코스메틱 메인 비주얼
Generative AI Visual
Cosmetics
제품의 청량함과 수분감을 표현하기 위해 AI 기반 메인 비주얼을 제작했습니다.
원본 제품의 디자인을 유지하면서 모델과 자연스럽게 어우러지도록 연출하고,
맑은 컬러감과 부드러운 조명으로 브랜드 이미지를 강조한
고품질 뷰티 광고 비주얼을 구현했습니다.
Original photo
AI VISUAL ASSETS
청량한 수분감을 담은 AI 비주얼 콘텐츠
미네랄 탄산 에센스의 청량함과 수분감을 강조하기 위해
물결, 탄산 기포, 자연환경을 활용한 AI 광고 비주얼을 제작했습니다.
파도의 움직임과 사운드를 더한 영상 콘텐츠로 확장하여 제품 콘셉트를 더욱 생동감 있게
표현했습니다.
유지해야 할 제품 기준이 제작의 출발점입니다.
제품의 형태·라벨·디테일을 기준으로, 생성 결과를 검토하고 최종 이미지를 보정합니다.
PRODUCTION PROCESS
Contribution
Form
Tool
기획 100% / 제작 100%
Image / Video
ChatGPT / Midjourney / Nano Banana
프리미엄 버거 메인 비주얼
Generative AI Visual
Food
햄버거의 풍부한 식감과 먹음직스러운 비주얼을 강조하기 위해
AI를 활용한 프리미엄 푸드 광고 이미지를 제작했습니다.
원본 제품의 특징을 유지하면서 따뜻한 조명과 어두운 배경으로
고급스러운 분위기를 연출하고, 영상 콘텐츠로 확장했습니다.
Original photo
AI VISUAL ASSETS
다양한 콘셉트의 AI 푸드 광고 제작
햄버거의 먹음직스러운 비주얼을 중심으로 다양한 광고 콘셉트를 기획했습니다.
라이프스타일 연출부터 초현실적인 도시 배경까지 AI로 구현하고,
버거의 재료가 공중에서 조합되는 역동적인 모션을 더해
정적인 광고 이미지를 영상 콘텐츠로 확장했습니다.
최종 이미지 보정
Photoshop으로 제품 디테일과 색감, 조명을 보정해 실무 활용
도를 높입니다.
AI 이미지 생성 및 수정
생성된 이미지의 구도와 완성도를 검토하고 세부 수정 작업을
진행합니다.
맞춤형 프롬프트 설계
제품 특성과 연출 목적에 맞춰 자체 프롬프트 설계 방식으로 생성
조건을 설정합니다.
제조사 원본 이미지 분석
제품의 고유한 형태와 디테일을 분석해 AI 제작 시 유지해야 할
기준을 설정합니다.
ORIGINAL 제조사 제품 이미지
FINAL 제품과 실제 사용 환경의 연결
고품질 비주얼 제작과 실무 효율을 동시에 고려한 AI활용
제품 원형을 유지하는 정교한 이미지 제작 방식으로 외주 의존도를 낮추고, 상세페이지의 비주얼 소스 확보 과정을 효율화할 수 있습니다.
제품 중심의 정보에서, 고객의 탐색 순서로
분석에서 도출한 개선 방향을 콘텐츠의 우선순위와 탐색 기준으로 연결했습니다.
일관성과 재사용성을 고려한 UI 시스템 설계
Figma를 활용해 타이포그래피, 컬러, 아이콘 및 반복 UI 요소를 체계화하고, 공통 컴포넌트 기반의 모바일 인터페이스를 구성했습니다.
INFORMATION ARCHITECTURE
STYLE GUIDELINE
콘텐츠 정보의 위계 부족
상품·이벤트·서비스 안내의 강조 순서가 불분명
01
서로 다른 탐색 기준의 혼재
제품·브랜드·용도·서비스가 한 영역에 함께 배치
02
반복 UI의 불일치
여백·텍스트·아이콘·카드에 공통 기준 필요
03
Aa
회의·기업
학교·학원
교회·강당
캠핑·가정
프로젝터
장바구니
가이드자료실
질문답변
일관된 가독성과 계층을 위한 타이포그라피 시스템
Pretendard
Heading
Heading
Heading
Title
Title
Title
Body
Body
Body
Caption
Caption
Caption
브랜드 아이덴티티와 가독성을 고려한 시스템
직관적인 사용성을 위한 일관된 아이콘 시스템
1. TYPOGRAPHY
2. COLOR SYSTEM
3. ICONOGRAPHY
상품 카드 (Card / Product)
카테고리 탐색을 위한 탭 컴포넌트
판매량 1위
[비비텍] MX621
DLP / XGA급 / 밝기4300안시
정상가
922,000원
할인가
519,000원
↓44%
무료 증정(케이블·렌즈커버)
[비비텍] MH727
DLP / 풀HD급 / 밝기4700안시
정상가
1,428,000원
할인가
899,000원
↓37%
회의·강의실 설치사례
공간의 규모와 투사 환경을 고려한 최적의 영상 시스
템 설계 및 시공
교회·대강당 설치사례
넓은 공간에서도 선명한 화면을 구현하는 고광량 프로
젝터 맞춤 시공
카페·업소 설치 사례
매장 특성과 운영 목적에 맞춘 스크린골프 및 영상 시
스템 구축
전자칠판 설치 사례
교육과 비즈니스 환경에 최적화된 전자칠판 설치 및
스마트 환경 구축
게시판 카드 (Card / Content)
다양한 게시판 컨텐츠 노출을 위한 카드 컴포넌트
메뉴 카드 (Menu / Category)
서비스 탐색을 위한 메뉴 컴포넌트
질문답변
신속하게 답변드립니다
가이드 자료실
서비스&가이드를 한눈에
A/S 안내
교환 및 반품 규정
상담 버튼 (Button / Consultation CTA)
상담 신청을 유도하는 주요 액션 버튼
무료 견적 신청 →
1:1 실시간 상담 →
재사용 가능한 컴포넌트 기반으로 일관된 모바일 인터페이스 구성
컴포넌트 베리언트 및 Figma 속성 관리
4. COMPONENTS
4. COMPONENT VARIANTS
Primary
#E1521D
Text
#222222
Gray
#777777
Surface
#F5F5F5
UI DESIGN SYSTEM
일관성과 재사용성을 고려한 UI 시스템 설계
Figma를 활용해 타이포그래피, 컬러, 아이콘 및 반복 UI 요소를 체계화하고, 공통 컴포넌트 기반의 모바일 인터페이스를 구성했습니다.
명확한 위계의 헤더 구성
로고와 주요 기능을 구분해 브랜드 인지
와 메뉴 접근성을 높이고, 일관된 정렬과
간격으로 시각적 안정감을 확보
검색 기준을 제시하는 검색창
모델명·용도·브랜드를 검색 예시로 제시
해, 사용자가 입력할 키워드를 쉽게 떠올
리고 원하는 상품을 찾도록 안내
제품군 중심의 메인 내비게이션
프로젝터·전자칠판·스크린 등 주요 제품
군을 상단에 배치해, 구매 목적에 맞는
상품 영역으로 빠르게 이동하도록 구성
상품에 집중하는 정방형 메인 배너
1:1 비율의 비주얼 영역에 주요 상품과
프로모션 메시지를 집중해, 첫 화면에서
핵심 혜택을 명확하게 전달하도록 설계
사용 환경에 따른 카테고리 탐색
회의실·학원·교회·캠핑 등 사용 환경을 기
준으로 분류해, 전문 사양을 모르는 고객도
자신의 목적에 맞춰 탐색하도록 구성
선택 부담을 낮추는 상담 진입점
상품 선택이 어려운 고객을 위해 상담 영역을
상단에 배치하고, 무료 견적과 실시간 상담을
구분해 상황에 맞는 도움을 요청하도록 설계
용도별 추천을 통합한 BEST 탭
설치 적합성을 보여주는 시공 사례
실사용 경험을 전달하는 고객 후기
핵심 지원 기능을 모은 고객지원
가독성을 고려한 회사정보 영역
주요 기능에 상시 접근하는 하단 메뉴
전체 및 용도별 추천 상품을 하나의 탭 영역
으로 통합해, 반복되는 상품 진열을 줄이고
관심 제품을 집중적으로 비교하도록 구성
공간별 실제 시공 사례를 제공해, 고객이 자
신의 설치 환경과 비교하고 제품 활용 방식
과 시공 역량을 확인하도록 구성
구매자의 사진과 사용 후기를 함께 제공해,
상품 정보만으로 판단하기 어려운 실제 사
용 경험을 구매 결정에 참고하도록 설계
질문답변·가이드 자료실·A/S 안내를 간결
하게 묶어, 구매 전 문의부터 구매 후 관리까
지 필요한 정보를 쉽게 찾도록 구성
사업자 정보는 왼쪽 정렬로 정리하고 정책·고객
센터 링크는 버튼으로 구분해, 운영 정보 확인과
관련 페이지 접근을 돕도록 설계
스크롤 위치와 관계없이 상품 저장·구매·계
정 기능에 접근하도록 구성
주요 기능의 구분이 약한 헤더
로고와 여러 기능 아이콘이 좁은 영역에
밀집되어, 브랜드와 주요 기능을 빠르게
구분하기 어려움
구매 목적과 연결이 약한 상단 메뉴
정보성 메뉴가 우선 노출되어, 원하는 제품군
으로 바로 이동하는 경로가 명확하지 않음
강조 요소가 경쟁하는 메인 배너
상품 이미지·할인 문구·장식 요소가 동
시에 강조되어, 고객이 핵심 상품과 혜택
을 한눈에 파악하기 어려움
서로 다른 기준이 혼재된 카테고리
용도·브랜드·제품 종류·서비스가 한 영역에
함께 배치되어, 고객이 어떤 기준으로 탐색
을 시작해야 할지 판단하기 어려움
콘텐츠 목적이 모호한 리뷰 배너
제품 평가와 구매 가이드를 강조하지만,
어떤 정보를 확인할 수 있는지와 클릭할
영역이 명확하지 않아 다음 행동을 유도
하기 어려움
상품보다 인물이 강조된 구매자
배너
물 이미지가 큰 비중을 차지하고 상품명·
사양은 작게 배치되어, 제품의 특징과 추
천 이유를 빠르게 파악하기 어려움
설치 환경을 판단하기 어려운 시공 사례
사례 사진이 작은 크기로 노출되고 공간별 구분과
설명이 부족해, 고객이 자신의 설치 환경과 비교하
기 어려움
상품 비교가 어려운 연속형 진열
개별 상품과 홍보 이미지가 세로로 길게
이어져, 여러 제품의 가격·사양·추천 용
도를 같은 기준으로 비교하기 어려움
메인
프로젝터
전자칠판
스크린
액세서리
렌탈
메인
프로젝터
전자칠판
스크린
액세서리
렌탈
메인
프로젝터
전자칠판
스크린
액세서리
렌탈
메인
프로젝터
전자칠판
스크린
액세서리
렌탈
메인
프로젝터
전자칠판
스크린
액세서리
렌탈
메인
프로젝터
전자칠판
스크린
액세서리
렌탈
홈
찜
장바구니
마이페이지
로그인
홈
찜
장바구니
마이페이지
로그인
홈
찜
장바구니
마이페이지
로그인
홈
찜
장바구니
마이페이지
로그인
홈
찜
장바구니
마이페이지
로그인
전체
회의용
가정용
학원용
업소용
전체
회의용
가정용
학원용
업소용
전체
회의용
가정용
학원용
업소용
전체
회의용
가정용
학원용
업소용
전체
회의용
가정용
학원용
업소용
03
베스트 탭 / Best Product
유사한 기능과 관련 설명이 여러 섹션에서 반복되어 콘텐츠가
길어지고, 정보의 우선순위가 불분명해 전체적인 가독성이
떨어집니다.
02
하단 메뉴 / Buttom Navigation
밝기, 해상도, 투사거리 등 주요 스펙이 상세페이지 여러 구간에
분산되어 있어 구매자가 제품의 핵심 경쟁력을 빠르게 파악하기
어렵습니다.
01
고정 탭 / Tab Category
기존 제품 중심의 단순한 이미지 구성으로 실제 사용 환경과 제품의
활용 가치를 직관적으로 전달하기 어렵습니다.
제품의 특성을 강조할 수 있는 고품질 연출 이미지가 필요합니다.
THANK YOU
제품의 가치를, 장면과 경험으로.
YOO KYUNGHWA
AI Commerce & Content Designer
2026 / VISUAL · CONTENT · INTERFACE