DIFFERENT MEDIUMS. ONE ZIP.

ZOONIIzoonii.zip주니집Z.Zoonii!ZOONII
STUDIO

다양한 모습의 주니를, 하나의 ZIP에.

로고 변형 배치 예시 · 실제 로고 자산 미연결

ZIP에 담는 중…내 그래픽으로 미리보기

FIDGET BOARD / WIREFRAME 3.0

ENTRY

THINGS I MADE
+ THINGS THAT
MADE ME.

sketch.ai
2013 — NOWsomething-new.htmlONE HUMAN. DIFFERENT MEDIUMS.

ZOONII.ZIP

10+ years of making things,
compressed into one file.

Different mediums. Same thinking.

DRAG TO UNZIP

ZOONII.ZIP / DESIGN & MOTION BRIEF

내가 꿈꾸는 것,
당신이 꿈꾸는 것을 만듭니다.

아직 말로만 존재하는 아이디어를 함께 구체화하고, 보고 만지고 사용할 수 있는 모습으로 만듭니다.

공간과 동선

ZIP 인트로와 그래픽 놀이터 → 스크롤로 메인 피젯보드 → 작가에게 한마디. 각 구간은 전체 화면이며 한 구간씩 스크롤합니다.

1depth: Space / Profile / Career / Archive / ThingThingClub / Contact / 작가에게 한마디.
Archive 2depth: 일러스트레이션 / 웹·앱 / 브랜딩·편집.

메인에는 메뉴 오브제만 배치합니다. 대표 프로젝트는 아카이브에서 확인합니다. 메뉴 클릭은 팝업 대신 각 공간으로 이동하며, 중앙 하단 내비게이션은 항상 고정합니다. Contact는 독립 공간, 방문자 메모는 보드의 하단 연장 공간입니다.

구간별 모션

영역	반응
ZIP	로고들이 모임 → 그래픽들이 쏟아짐 → 폴더 클릭마다 그래픽이 위로 튀어 올라 다시 떨어짐
그래픽 놀이터	충돌·회전·바닥에 쌓임, 마우스·터치로 밀기. 화면 밖에서는 정지
피젯보드	호버 시 들림·클릭 안내, 드래그 시 집어 든 그림자, 클릭 시 같은 보드의 카메라가 좌·우·위·아래 공간으로 이동, 돌아오면 보드로 역방향 이동
아카이브 입구	책·폴더·우표 등장 → 선택 오브제 확대 → 목록 전환. Walkman의 물리적인 선택감을 참고
일러스트	책을 골라 펼치기, 상세 양면 구성과 페이지 넘김
웹·앱	폴더 열기, 화면 자료가 나와 확대됨
브랜딩·편집	우표 들림, 확대 후 인쇄물과 설명
프로필	얼굴 콜라주, 눈동자가 커서 추적. 소개 문장은 고정
Career	전체 이력을 필터링, 읽기 중심의 작은 등장 모션. 페어는 ThingThingClub에만
ThingThingClub	전시·페어 이력과 상품 구성, 상품 호버 시 살짝 들림
Contact	문의 내용을 읽고 입력하기 편하게 차분한 등장
한마디	빈 보드·안내 문구·메모 버튼. 종이 선택 → 작성 → 뒤 보드에 회전하며 붙기

하단 오브제 Dock

보드·얼굴 콜라주·영수증·폴더·띵띵클럽 캐릭터·편지·메모지로 구성한 7개 메뉴. 호버한 아이콘과 양옆이 단계적으로 확대되고 이름이 뜹니다. 클릭하면 살짝 눌리며 각 공간으로 카메라가 이동합니다. 현재 위치는 하단 점으로 표시하고, 모바일에는 이름을 항상 표시합니다.

4주 제작 · 공개 일정

도메인을 초기에 연결해 제작 중인 사이트를 공개하고, 주 1편 릴스로 변화와 결과를 기록합니다. 아래는 공개 계획이며 이 파일 자체는 아직 배포되지 않았습니다.

1주차: 동선·그래픽 스타일 확정, 피젯보드 구현, 도메인 첫 공개
2주차: 아카이브 세 테마와 대표 작업·상세 공개
3주차: 프로필·전체 커리어·띵띵클럽·Contact 공개
4주차: 메모 저장 연결, ZIP·모션 마무리, 모바일·속도·링크 점검, 완성 공개

주연: 핵심 화면과 로고·콜라주·오브제 디자인.
구현: 디자인에 맞는 움직임을 제안하고 조정.
촬영: 처음 상태 / 디자인 과정 / 막힌 순간 / 작동 결과.

현재 와이어프레임 범위

실제 작업 이미지 대신 자리 표시자를 사용합니다. 그래픽·얼굴 사진 파일 선택은 현재 화면의 임시 미리보기입니다. 문의 폼은 전송되지 않으며, 메모는 새로고침하면 사라집니다. 실제 공유 저장·상품 링크·문의 전송·도메인은 후속 연결이 필요합니다. 모바일에서는 터치 밀기·탭 반응을 사용하고, 모션 감소 설정에서는 즉시 전환합니다.

참고

FRA! — 그래픽 낙하·물리 반응
Yestalgia — Walkman 오브제 선택