TAPTAG 탭태그 숏폼 영상 커머스 쇼핑몰 디자인

분야: 디자인 · 퍼블리싱 / 웹 / 쇼핑몰, 카페24, 반응형 참여 기간: 2026.10 관련 기술: 카페24 스마트디자인, HTML5, CSS3, JavaScript, 반응형 웹 [프로젝트 개요] 유튜브 숏폼으로 제품을 소개하고 파는 영상 커머스 몰입니다. 첫 화면을 9:16 세로 영상 레일로 채워 숏폼 앱을 연 것 같은 인상을 냈고, 영상 속 상품 태그와 카드 아래 가격을 함께 두었습니다. 아래로 영상에 나온 제품, 영상 세트 한 번에 담기, 이번 주 숏폼 랭킹, 새로 찍은 제품, 다음 숏폼 공개, 리뷰 숏폼이 이어집니다. [주요 기능] 1. 세로 숏폼 레일 - 9:16 영상 여섯 편을 가로로 놓고 재생 중인 카드에만 테두리와 진행 막대, 깜빡이는 태그 점을 붙였습니다. 2. 영상 속 상품 태그 - 영상 위 태그에 상품명과 가격을 적고 카드 아래에도 같은 상품의 썸네일과 할인율, 판매가를 둡니다. 3. 영상 등장 칩 - 상품 카드마다 이 상품이 몇 편의 영상, 몇 초에 나오는지 칩으로 붙였습니다. 4. 영상 세트 한 번에 담기 - 루틴 영상 한 편과 시각별 상품 네 개를 함께 보여 주고, 두 개 이상 담으면 10% 세트 합계가 다시 계산됩니다. 5. 숏폼 랭킹 - 영상을 보고 구매한 수를 기준으로 상위 다섯 편을 보여 줍니다. [디자인] - 어두운 바탕과 짙은 회색 면에 앰버 한 색을 할인율과 재생 표시, 태그 점, 주 버튼에만 썼습니다. - Pretendard 한 서체로 영상 위에서도 또렷하게 읽히게 했습니다. - 영상 카드는 9:16, 상품 카드는 반복 목록 구조로 짰습니다. [범위] - 메인 페이지 PC·모바일 반응형 디자인과 퍼블리싱 - 상품 카드는 반복 구조로 짜서 카페24 메인 진열 모듈로 옮길 수 있는 구조