시안 기반 랜딩페이지 퍼블리싱
제공된 디자인 시안을 기준으로 케이블 트레이 제품 소개 랜딩페이지를 HTML/CSS로 구현했습니다.
PORTFOLIO DETAIL
U-METAL
케이블 트레이 부품 공급 서비스를 소개하는 랜딩페이지 퍼블리싱 프로젝트입니다. 제공받은 디자인 시안을 기준으로 제품 장점, 제조 공정, 주요 부품, 액세서리 정보를 한 페이지 안에서 확인할 수 있도록 구현했습니다.
PROJECT OVERVIEW
작업 개요
제공된 디자인 시안을 바탕으로 DIY 조립형 케이블 트레이 시스템의 핵심 장점과 제품 정보를 사용자가 한눈에 이해할 수 있도록 랜딩페이지 형태로 퍼블리싱했습니다.
메인 비주얼, 핵심 수치 영역, 영상 팝업, 제품 상세 팝업, 탭 메뉴, 액세서리 리스트 등 주요 UI를 HTML/CSS/jQuery와 Swiper로 구현하고 반응형 화면에 맞춰 작업했습니다.
WORK SCOPE
담당 작업 범위
반응형 화면 대응
PC와 모바일 해상도에 맞춰 메인 비주얼, 제품 카드, 영상 영역, 리스트 구성이 자연스럽게 보이도록 작업했습니다.
UI 인터랙션 구현
영상 팝업, 제품 상세 팝업, Swiper 슬라이드, 탭 메뉴, 스크롤 이동 버튼 등 랜딩페이지 내 인터랙션을 구현했습니다.
PREVIEW
프로젝트 화면
대표 이미지를 클릭하면 주요 화면을 자세히 확인할 수 있습니다.
