본문으로 건너뛰기
포트폴리오 목록으로

웹사이트콘셉트 데모

STRAY — 서울·베를린 크리에이티브 에이전시

듀얼 시티 타임클락·플로팅 프로젝트 프리뷰·케이스 스터디·브리프 접수를 결합한 스튜디오 사이트

직접 써보기 이 사례를 참고해 문의하기

6개 케이스 · 4개 페이지케이스 아카이브

누구를 위해
강렬한 타이포그래피와 아카이브 탐색, 케이스 스터디, 의뢰 브리프 접수를 하나의 인상적인 여정으로 묶으려는 에이전시·스튜디오
무엇이 문제였나
크리에이티브 스튜디오 사이트가 정적인 썸네일 나열에 머물면 디렉션 역량과 프로젝트별 문제 해결 과정을 설득력 있게 보여주기 어렵습니다.
무엇을 했나
서울·베를린 실시간 타임클락과 마우스 추적 플로팅 프리뷰(Home/Work), 6개 프로젝트별 딥링크 상세 분석(Case ?id=1~6), 그리고 예산·일정 선택형 의뢰 폼(Studio)을 4개 페이지로 구축했습니다.
무엇이 달라지나
분야별 워크 필터링, 마우스 오버 시 즉시 따라붙는 작업물 프리뷰, 6개 케이스 스터디 전환, 스튜디오 브리프 제출 플로우가 매끄럽게 이어집니다.
STRAY — 서울·베를린 크리에이티브 에이전시 체험 화면
가상 브랜드로 만든 체험 화면입니다. 실제 고객 사례가 아닙니다.

어떻게 움직이나

한 건의 일이 처음부터 끝까지 어떻게 흘러가는지 순서대로 보여드립니다.

아카이브 프리뷰 탐색부터 케이스 스터디 검증과 프로젝트 브리프 접수까지

예시 입력관심 분야 Brand · Digital · Motion Direction검토 케이스 Case #01 KINETIC ARCHIVE 외 5건

재생을 누르거나 단계를 눌러 순서대로 살펴보세요.

직접 써보기

가상 브랜드로 만든 데모입니다. 주문·예약·상담은 실제로 전송되지 않습니다.

이렇게 해보세요

  1. 상단 스위처에서 01 홈 · 02 워크 · 03 케이스 스터디 · 04 스튜디오 4개 페이지를 전환해보세요
  2. 서브 바의 Case #01 · Case #02 · Case #03 버튼을 눌러 프로젝트별 상세 케이스 스터디 화면이 즉시 바뀌는지 확인해보세요
  3. 01 홈 또는 02 워크 목록 위에 마우스를 움직이면 플로팅 프리뷰 이미지가 커서를 따라 부드럽게 움직입니다
체험 가이드 1개 더 보기
  • 04 스튜디오 페이지 하단에서 프로젝트 분야와 예산을 선택해 브리프 문의를 제출해보세요

화면 크기를 바꿔 PC와 모바일에서 같은 흐름을 확인할 수 있습니다.

https://example.com
STRAY01 홈 · 쇼릴 & 셀렉티드 워크

서울·베를린 듀얼 타임클락 · 호버 플로팅 프리뷰 · 디렉션 매니페스토

만든 범위

Modernist 그리드 시스템 위에 커스텀 호버 프리뷰 엔진(stray/extra.js)과 모션 엔진(motion.js)을 결합한 크리에이티브 에이전시 웹사이트입니다. 서울(KST)과 베를린(CET) 실시간 듀얼 타임클락, 프로젝트 행 위를 유영하는 플로팅 이미지 프리뷰, Brand·Digital·Motion·Space 카테고리 필터, `?id=1~6` 파라미터로 전환되는 6개 상세 케이스 스터디, 그리고 신규 프로젝트 의뢰 브리프 폼까지 에이전시 세일즈 여정 전체를 담았습니다.

구현한 기능

  • 마우스 추적 플로팅 프리뷰 & 아카이브 인덱스프로젝트 목록 위에 커서를 올리면 작업물 대표 비주얼이 부드러운 감속 물리(Lerp)로 커서를 따라다니며 즉시 미리보기 제공
  • 6개 상세 케이스 스터디 라우팅 (?id=1~6)KINETIC ARCHIVE, MONOLITH SOUND 등 6개 프로젝트 각각의 배경·솔루션·성과 지표와 비주얼 시퀀스를 동적으로 로드
  • 서울(KST) · 베를린(CET) 실시간 듀얼 타임클락두 오피스의 현재 시각과 운영 상태를 실시간으로 표시하고 도시별 팀·문화와 작업 원칙을 소개
  • 인터랙티브 프로젝트 브리프 접수 폼 (Studio)의뢰 분야·예산 범위·목표 일정을 선택해 제출하면 즉시 접수 확인 상태로 전환되는 스튜디오 문의 워크플로우

사용한 기술

Modernist Design System · Floating Preview Engine (extra.js) · Custom Motion Engine (motion.js) · React 18 / DC Runtime · Dynamic Case Study Routing

확인된 사실

페이지 구성
Home · Work · Case(?id=1~6) · Studio
아카이브 탐색
분야별 필터 · 플로팅 호버 프리뷰
케이스 스터디
문제 정의 · 디렉션 · 성과 수치 상세 뷰
프로젝트 의뢰
예산·일정·범위 선택 브리프 접수 폼

데모의 구현 범위입니다. 실제 고객 성과가 아니며, 브랜드와 인물은 체험을 위해 만든 가상 콘셉트입니다.