CASE 36체크 UP

한정 드롭의 긴장감을 담은
스트릿 드롭 컬처

컨셉 작업 — 가상 스트릿웨어 브랜드 체크 UP을 설정해 만든 원페이지입니다.

업종: 패션·스트릿웨어 (온라인 브랜드)
형태: 컨셉 시안 · 원페이지
구성: 이번 주 드롭 · SS26 룩북 · 컬처
브랜드 소개 · 다음 드롭 알림 · 문의 폼
기술 스택: 반응형 HTML/CSS · Vanilla JS · Canvas API · IntersectionObserver

체크 UP 데스크탑·모바일 화면 — PENNYPAGE WORKS · CASE 36

01과제

무엇을 받았고, 무엇을 했나

스트릿 브랜드는 한정 드롭의 긴장감과 거리의 에너지가 화면에서 느껴져야 합니다. 그래서 Bebas Neue 타이포·네온 핑크/옐로 컬러·사선 마키 띠를 쓰고, Canvas API로 커서를 따라 스프레이가 뿌려지는 그래피티 트레일을 넣었습니다.

이번 주 드롭·SS26 룩북·컬처(그래피티·힙합·스케이트)·브랜드 소개·문의 폼으로 이어지는 원페이지로 구성했습니다.

핵심 — 거리의 에너지네온 컬러와 사선 마키 띠, 커서를 따라가는 스프레이 트레일로 스트릿 무드를 화면에 옮겼습니다.

02화면

히어로가 아니라 실제로 일하는 구간

이번 주 드롭 — 상품 카드 — 01이번 주 드롭 — 상품 카드

SS26 룩북 — 02SS26 룩북

컬처 — 그래피티·힙합·스케이트 — 03컬처 — 그래피티·힙합·스케이트

다음 드롭 알림 · 문의 — 04다음 드롭 알림 · 문의

03구성

이 사이트에 들어간 것

01
그래피티 스프레이 커서Canvas API 트레일
02
사선 마키 띠 배너무한 스크롤 텍스트
03
이번 주 드롭 상품 카드SOLD OUT·NEW 배지
04
SS26 룩북비대칭 이미지 그리드
05
컬처 섹션그래피티·힙합·스케이트 3카드
06
수치 카운트업IntersectionObserver
07
문의 폼 전송 피드백Vanilla JS
08
모바일 햄버거 메뉴반응형 내비

체크 UP 모바일 전체 화면

모바일 · 스크롤해서 보기

컨셉 작업입니다.

특정 고객 없이 업종 문법을 연구하려고 만든 시안입니다.

시안 보기 제작 문의