licoco067 · 위시켓(Wishket)

프로젝트 배경

1) 문제점
- 기존 정적 포트폴리오로 에이전시의 크리에이티브 역량 전달 미흡
- 경쟁 에이전시 대비 차별화된 웹 경험 부재
- 프로젝트 작업물을 효과적으로 보여줄 인터랙티브 갤러리 필요

2) 프로젝트 목표
- GSAP 기반 몰입형 애니메이션으로 브랜드 크리에이티비티 표현
- 프로젝트 포트폴리오를 돋보이게 하는 갤러리 시스템 구축
- 글로벌 수준의 에이전시 웹사이트 품질 달성

3) 주안점
- 흑백 미니멀 디자인 + 컬러 포인트 인터랙션
- 커스텀 커서로 독특한 사용자 경험 제공
- 스크롤 기반 애니메이션으로 스토리텔링

프로젝트 성과

커스텀 커서 시스템

mix-blend-mode 활용한 커서 + 호버 텍스트 표시 시스템 구축

핵심 기능

풀스크린 슬라이더

5개 프로젝트를 풀스크린으로 보여주는 자동/수동 슬라이더, 배경
확대 전환 효과

진행 단계

기획, 디자인, 개발,테스트, 런칭

2025.01.

1.레퍼런스 분석및 설계
2.컬러시스템정의, 타이포그래피 적용
3. 퍼블리싱, aos애니매이션구현
4. 테스트및 런칭

프로젝트 상세

서울 기반 크리에이티브 에이전시 "Studio MIRO"의 포트폴리오 웹사이트입니다.

브랜드 아이덴티티, 웹디자인, 모션 그래픽스, 에디토리얼 등 다양한 서비스를
제공하는 에이전시의 작업물을 효과적으로 보여주기 위한 몰입형 웹사이트를 구축했습니다.

GSAP + ScrollTrigger를 활용해 풀스크린 슬라이더, 패럴랙스 이미지, 스크롤 텍스트
마키, 카운터 애니메이션 등 다양한 인터랙션을 구현했습니다. 커스텀
커서(mix-blend-mode)로
독특한 사용자 경험을 제공하며, 로딩 스크린과 페이지 전환 애니메이션으로 완성도를
높였습니다.

총 6개 페이지(Work, About, Services, Gallery, Contact, Resume)로 구성되며,
흑백 미니멀 디자인에 프로젝트 호버 시 컬러가 드러나는 효과를 적용했습니다.