Selected work

다양한 매체, 하나의 시선.
관심 있는 분야를 골라보세요.

← 작업 목록STRIDE — 러닝화 브랜드 웹디자인
#AI 이미지/영상 #웹앱

STRIDE러닝화 브랜드 웹디자인

러닝화의 형태·재질·기능 콘셉트를 스크롤과 인터랙션으로 탐색하는 디지털 쇼룸.

제품 비주얼 · 웹 아트디렉션 · AI 활용 구현 · 배포
STRIDE의 실제 웹사이트 화면STRIDE 실제 사이트 보기
썸네일을 누르면 실제 웹사이트가 새 탭으로 열립니다. 아래에서 제작 과정을 볼 수 있습니다.

제품 콘셉트·아트디렉션

제품 비주얼 방향 · 웹 아트디렉션 · AI 활용 구현 · 배포 러닝화의 형태·재질·기능 콘셉트를 탐색하는 3D 디지털 쇼룸 제공된 제품 디자인 시트·GLB 모델·음악을 기반으로 웹 경험 구성

웹 경험 구성

첫 화면의 몰입 → 라인업 비교 → 기능 데모 → 제품 디테일 탐색 제품의 첫인상부터 형태와 기능을 가까이 살펴보는 흐름으로 구성

3D 스크롤 연출

자연 속 한 켤레를 중심으로 제품의 형태와 컬러 강조 스크롤과 이동 버튼에 따라 전체 장면에서 뒤축·측면으로 카메라 이동 실제 웹의 거리 변화와 화면 전환을 움직이는 화면으로 담았습니다.

실제 웹 화면
실제 웹 화면 녹화 · 스크롤과 이동 버튼에 반응하는 3D 장면. 약 11초 반복.

제품 비주얼·라인업

제품 디자인 시트의 형태와 소재를 기준으로 DAILY·MOVE·FORM 라인업 구성 MOVE·FORM 제품 컷은 시트를 참조해 AI로 제작 촬영 각도·제품 크기·배경 처리를 맞춰 컬러와 실루엣을 같은 조건에서 비교

러닝화의 측면과 바닥, 위쪽 형태를 보여주는 원본 다각도 제품 디자인 시트
제공된 제품 디자인 시트. 웹의 라인업 이미지 제작에 사용한 형태·재질 참고 자료입니다.
DAILY, MOVE, FORM 세 제품을 같은 크기와 방향으로 비교하는 실제 STRIDE 라인업 화면
실제 웹의 라인업 화면 · DAILY / MOVE / FORM. 제품 콘셉트를 제안하는 카탈로그입니다.

컬러·공간 연출

풀과 산을 배경으로 네온 컬러의 러닝화 강조 넓은 여백과 큰 타이포그래피로 첫 화면의 시선 정리 라인업은 밝은 배경과 일정한 제품 구도로 전환해 비교에 집중

압력 이동·기능 데모

뒤꿈치 착지 → 지지 → 앞꿈치 이탈을 색과 강조 영역으로 표현 거리·페이스·케이던스 앱 화면을 연결해 스마트 러닝 기능의 콘셉트 구성 압력과 러닝 수치는 실제 센서 연동이 아닌 콘셉트 시뮬레이션입니다.

실제 웹 화면
실제 웹 화면 녹화 · 압력 분포와 러닝 수치는 콘셉트 시뮬레이션입니다. 약 6초 반복.

제품 디테일 탐색

갑피·쿠셔닝·아웃솔 선택에 맞춰 카메라와 설명 연결 제품 전체에서 소재와 구조를 가까이 살펴보는 장면으로 전환 컬러 선택과 3D 탐색을 같은 제품 경험 안에 구성

실제 웹 화면
실제 웹 화면 녹화 · 부위 선택에 따른 카메라 이동과 설명 변화. 약 5초 반복.

소재·조명 조정

첫 화면은 한 켤레에 집중하고 장면 이동 메뉴는 접힌 상태로 정리 금속성·거칠기·노출과 조명 균형을 조정해 네온 컬러와 소재의 구분 유지 제공된 GLB의 메시 간소화, 모바일 렌더 해상도와 풀의 수 조정

구현·배포

Three.js · GitHub · Cloudflare Pages 제품 이미지의 방향·크기·색감과 장면별 시선을 기준으로 AI 활용 구현·수정 제공된 3D 모델을 활용해 스크롤 카메라·압력 데모·카탈로그 연결

확장·검증 방향

세 라인의 차이와 부위·컬러 탐색의 발견 가능성 점검 모바일 기기별 로딩과 조작 확인 실제 사용성 검증을 통해 화면과 탐색 흐름을 다듬을 계획입니다.

STRIDE 실제 사이트 보기↗