플러스프로젝트 배경
1) 문제점 브랜드 이미지 불일치: 기존 사이트의 UI가 브랜드가 지향하는 전문적인 헤어케어 이미지와 맞지 않아 브랜드 신뢰도가 하락함. 낮은 구매 전환율: 복잡한 제품 상세 페이지 레이아웃과 직관적이지 않은 결제 동선으로 인해 이탈률이 높았음. 모바일 최적화 미비: 뷰티 커머스 특성상 모바일 유입이 압도적임에도 불구하고, 모바일 환경에서의 반응형 UI와 속도가 저하되는 문제 발생.
프로젝트 성과
개발 효율성 및 협업 만족도
React 컴포넌트 라이브러리화: 원자 단위(Atomic Design)의 컴포넌트 설계로 프런트엔드 개발 공수 약 30% 절감 및 유지보수 편의성 증대
사용자 경험(UX) 및 인터페이스 개선
직관적인 UI 설계: 제품 상세 페이지의 가독성을 높여 기존 대비 페이지 체류 시간(Avg. Time on Page) 약 20% 증가
산출물 완성도
고해상도 대응: 레티나 디스플레이 및 다양한 모바일 해상도에서도 깨짐 없는 벡터 기반 아이콘 및 고화질 이미지 렌더링 구현
핵심 기능
크로스 브라우징 및 최적화
다양한 브라우저(Chrome, Safari, Edge) 및 모바일 기기별 검수
이미지 최적화 및 코드 경량화를 통한 로딩 속도 개선
개발팀과의 협업을 위한 퍼블리싱 가이드 문서 전달 및 최종 산출물 검수
이미지 최적화 및 코드 경량화를 통한 로딩 속도 개선
개발팀과의 협업을 위한 퍼블리싱 가이드 문서 전달 및 최종 산출물 검수
진행 단계
요구사항 분석 및 벤치마킹
2025.04.
클라이언트 요구사항 파악 및 기존 사이트 문제점 진단
경쟁사(뷰티/코스메틱 브랜드) 벤치마킹을 통한 트렌디한 UI/UX 방향성 수립
정보 구조(IA) 설계 및 주요 페이지 기능 명세 확정
경쟁사(뷰티/코스메틱 브랜드) 벤치마킹을 통한 트렌디한 UI/UX 방향성 수립
정보 구조(IA) 설계 및 주요 페이지 기능 명세 확정
프로젝트 상세
1) 포트폴리오 소개 서비스 카테고리: 뷰티/헤어케어 전문 D2C 커머스 메인 타깃: 두피 케어 및 탈모 예방에 관심이 높은 2040 남녀 소비자 2) 작업 범위 작업 영역: UI/UX 디자인 고도화 및 프런트엔드 퍼블리싱 지원 환경: PC/MO 반응형 웹 (React 환경 기반) 3) 주요 업무 React 컴포넌트 구조화: 자사 개발팀의 API 연동을 고려한 원활한 Re
