← 전체 작업
YLYL 영리영리 PC 화면
YLYL 영리영리 모바일 화면
커스텀 코드브랜드 사이트한국

YLYL 영리영리

액세서리 브랜드 사이트.
제품 사진이 주인공이 되도록 화면을 비웠습니다.

Role
디자인 · 퍼블리싱
Platform
커스텀 코드 · GSAP
Scope
브랜드 소개 · 신제품 · 입점처
Live
사이트 보기 ↗
01 · 기획

파는 곳은 이미 많았습니다.

공식몰과 입점처가 따로 있습니다.
그래서 이 사이트는 브랜드를 소개하고, 파는 곳으로 안내하는 일만 맡습니다.

BRAND LINE

아름답고, 쓸모 있는 것을 만드는
창작 듀오, 영리영리.

ROLE 01

브랜드를 먼저

첫 화면에는 로고와 한 줄 소개만 둡니다.

ROLE 02

구매는 공식몰로

떠 있는 버튼 하나가 공식몰로 안내합니다.

ROLE 03

입점처는 한 목록에

공식몰을 포함해 8곳을 모았습니다.

02 · 방향

화면을 비우고, 제품을 띄웠습니다.

바탕은 흰색으로 두고 장식을 뺐습니다.
제품 사진 22장은 배경을 지워 화면 위에 띄웠습니다.

레진 반지
오렌지 반지
꽃무늬 스크런치
휴대폰 그립톡
레이스 스크런치
스톤 반지
헤어 집게
Savon 반지
레드 반지
옐로 반지
바탕흰색과 짙은 갈색, 두 가지만 씁니다.
색강조색은 로고의 빨강 하나입니다.
사진배경을 지운 제품 컷에 옅은 그림자만 남겼습니다.
움직임스크롤과 마우스에만 반응합니다.
03 · 핵심 인터랙션

로고 안으로 들어가며 시작합니다.

스크롤을 내리면 로고가 18배까지 커집니다.
가운데 하트 너머로 브랜드 소개 문장이 나타납니다.

입체같은 로고 11장을 겹치고, 뒤로 갈수록 어둡게 칠했습니다.
기울기마우스 위치를 따라 로고가 기울고, 그림자도 따라 움직입니다.
트레일마우스가 지나간 자리에 제품 사진이 떴다가 사라집니다.
선명함로고를 벡터로 바꿔, 크게 키워도 이미지처럼 흐려지지 않습니다.
04 · 장면

영상은 가운데에서 열립니다.

첫 영상은 가운데 띠에서 양옆으로 펼쳐집니다.
두 번째 영상은 커튼처럼 갈라지며 신제품을 보여 줍니다.

가운데에서 열리는 수영장 영상
01가운데에서 열리는 영상
좌우로 갈라지는 제품 영상
02좌우로 갈라지는 영상
영상 뒤에서 드러나는 신제품 목록
03그 자리에 드러나는 신제품
속도영상이 열리는 정도는 스크롤 위치로 정합니다.
반복두 영상 모두 소리 없이 계속 반복됩니다.
05 · 파운데이션

빨강 하나, 글꼴 두 개.

색과 글꼴을 적게 정해 제품 사진과 부딪치지 않게 했습니다.

Color · 색

YLYL Red#FF3801로고 · 강조 · 밴드
Cocoa Black#1C1208신제품 · 푸터
White#FFFFFF바탕
Ink#1C1C1C본문
Mist#9A9A9A영문 보조
Peach Line#FFD7C8구분선

Typography

노동에 탐닉한 바보Quote · Mysteria 600
물성의 탐구Heading · Mysteria 600
일상의 평온한 순간을 형태로Body · Mysteria 400
Official StoreDisplay · Helvetica Neue Ext
New arrivalsLabel · 10.5 / .3em

Motion · 움직임

로고 확대는 스크롤을 1초 늦게 따라갑니다.
손을 멈춰도 로고가 부드럽게 멈춥니다.

GSAP ScrollTrigger · scrub 1

Language · 언어

KR / EN 버튼 하나로 문장이 함께 바뀝니다.

공식몰 버튼도 KRW와 USD 몰로 나뉘어 연결됩니다.

YLYL 영리영리 페이지 전체 흐름
06 · 결과

흰 화면에 빨강 하나,
나머지는 제품이 채웁니다.

로고, 영상, 가치, 신제품, 인터뷰, 입점처 순서로 이어집니다.
브랜드 소개 다음부터는 공식몰 버튼이 계속 따라옵니다.

Mobile · 모바일

모바일 브랜드 소개 화면 모바일 가치 소개 화면 모바일 신제품 화면