This website requires JavaScript.
포트폴리오 대표 이미지
웹 디자인스크롤에 반응하는 제품 3D 랜딩페이지 (Three.js)
  • 지역비대면 진행
  • 예산690,000원
  • 이용 목적메인페이지, 광고용 랜딩페이지
  • 분량1페이지
  • 기간10일

제품을 3D로 만들어, 스크롤을 내리는 만큼 그 자리에서 돌고 열리고 따라지게 만든 랜딩페이지입니다. 미리 찍어둔 영상을 트는 방식이 아니라 브라우저가 매 프레임 계산하는 화면이라, 보는 사람이 올리면 되감기고 멈추면 멈춥니다. 결과물은 HTML 파일 하나 932KB, 외부 서버나 CDN 요청 0건입니다. 카페24, 아임웹, 워드프레스, 자체 서버 어디에 올려도 그대로 동작합니다. 스크롤 구간은 9개이고 PC와 모바일에서 같은 동작을 합니다. HTML 삽입이 막힌 스마트스토어 같은 곳을 위해 같은 장면을 mp4와 GIF로도 뽑아 드립니다. 작업에 필요한 것은 제품 사진(정면, 측면, 후면)과 실제 치수(mm)뿐입니다. 실물을 보내실 필요가 없습니다.

이미지 2

제품 하나를 3D로 만듭니다. 사진과 치수만 있으면 실물 촬영 없이 제작합니다.

이미지 4

액체가 따라지고 뚜껑이 열리는 순간까지 움직입니다. 사진으로는 전달되지 않는 질감과 흐름을 보여줍니다.

이미지 6

한 번 만든 3D는 색과 라벨만 바꿔 재사용합니다. 제품 라인업 전체를 같은 비용으로 뽑을 수 있습니다.

이미지 8

가로 영상, 세로 릴스본, GIF까지 함께 드립니다. 상세페이지와 인스타에 그대로 올릴 수 있습니다.

AI가드레일
웹 디자인
별점
5.0(5)
AI 거짓 완료·요금 폭탄·파일 파손 원천 봉쇄! 업무 맞춤 지침 설계부터 2중 자동 같은 방식으로 3D 설계·데이터 자동화도 직접 납품합니다.

브라우저 웹게임 200웨이브 기획개발밸런싱

0
6

정보형 웹사이트 58개 URL 제작하고 배포까지

0
6

스크롤에 반응하는 제품 3D 랜딩페이지에서 그대로 뽑은 화면입니다. 캔 하나를 3D로 만들어, 스크롤을 내리면 돌고 열리고 따라지는 장면이 이어지도록 했습니다. · 모델링 — 캔 몸체, 라벨, 탭, 얼음, 따라지는 액체까지 직접 만들었습니다 · 재질과 조명 — 알루미늄의 반사, 얼음의 투명도, 액체의 굴절을 하나씩 값으로 잡았습니다 · 화면 — three.js로 만든 웹페이지입니다. 미리 녹화한 영상이 아니라 실제로 돌아가는 사이트라 스크롤과 마우스에 반응합니다 같은 방식으로 상세페이지에 넣는 제품 3D 영상과 GIF, 릴스용 세로본, 스크롤로 제품을 보여주는 랜딩페이지까지 만들어 드립니다. 실물을 보내실 필요는 없습니다. 제품 사진(정면·측면·후면)과 실제 치수(mm)만 주시면 됩니다. 먼저 정지 컷으로 재질과 구도를 확인받고 움직임으로 넘어갑니다.

0
3

브랜드 랜딩 + 스크롤 3D 제품 연출 (향수 예시)

0
1
  • 브라우저 웹게임 200웨이브 기획개발밸런싱

    0
    6
  • 정보형 웹사이트 58개 URL 제작하고 배포까지

    0
    6
  • 스크롤에 반응하는 제품 3D 랜딩페이지에서 그대로 뽑은 화면입니다. 캔 하나를 3D로 만들어, 스크롤을 내리면 돌고 열리고 따라지는 장면이 이어지도록 했습니다. · 모델링 — 캔 몸체, 라벨, 탭, 얼음, 따라지는 액체까지 직접 만들었습니다 · 재질과 조명 — 알루미늄의 반사, 얼음의 투명도, 액체의 굴절을 하나씩 값으로 잡았습니다 · 화면 — three.js로 만든 웹페이지입니다. 미리 녹화한 영상이 아니라 실제로 돌아가는 사이트라 스크롤과 마우스에 반응합니다 같은 방식으로 상세페이지에 넣는 제품 3D 영상과 GIF, 릴스용 세로본, 스크롤로 제품을 보여주는 랜딩페이지까지 만들어 드립니다. 실물을 보내실 필요는 없습니다. 제품 사진(정면·측면·후면)과 실제 치수(mm)만 주시면 됩니다. 먼저 정지 컷으로 재질과 구도를 확인받고 움직임으로 넘어갑니다.

    0
    3
  • 브랜드 랜딩 + 스크롤 3D 제품 연출 (향수 예시)

    0
    1
비슷한 스타일을 찾고 계신가요?의 다른 포트폴리오

뷰티 매거진 인스타 카드뉴스 (뷰티 디바이스편)

0
4

3D 영상_코스메틱 광고

0
109

광고 소재 30종, 소구 5개 x 형식 6개

0
0

원플러스원 행사 배너 디자인

0
0
  • 뷰티 매거진 인스타 카드뉴스 (뷰티 디바이스편)

    0
    4
  • 3D 영상_코스메틱 광고

    0
    109
  • 광고 소재 30종, 소구 5개 x 형식 6개

    0
    0
  • 원플러스원 행사 배너 디자인

    0
    0
  • Nex Ai 홈페이지

    0
    6
  • 클래식웨어의 감성을 담아낸 상세페이지 디자인 포트폴리오

    0
    0
  • 세탁업체 웹사이트 제작

    0
    4
  • 뷰티 상세페이지 시카 진정 세럼 기획부터 디자인까지

    0
    14
  • 에클라디자인 소개

    0
    0