손으로 담가 만든 스니커즈가 뚝뚝 흐르는 DIPPED 워드마크 위로 떨어지고, 스크롤하면 페이지를 따라 내려오며 돌아갑니다.
Debound · 디자인 포트폴리오
01 · 고객 프로젝트
고객 프로젝트
실제 기업과 브랜드를 위해 만든 디자인이며, 여기서는 데모용으로 이름을 바꿨습니다. Falcon Motorcycles와 Leederville Dental은 기존 웹사이트를 해당 업체와 무관하게 새로 디자인해 본 리디자인 콘셉트입니다. 각 프레임은 실제 사이트를 녹화한 영상입니다.
도장 찍은 G, 흑백 줄무늬, 붉은 듀오톤으로 페이지가 열립니다. 가격표는 레코드처럼 돌아가고 패키지는 옆으로 미끄러집니다.
스크롤하면 러그 스틸 자전거가 이름표 붙은 부품으로 분해되었다가 스스로 다시 조립됩니다.
포르투의 소량 생산 유니섹스 향수입니다. 커서가 페이지에 잉크로 구멍을 내고, 향수병이 스크롤을 따라 내려옵니다.
보험 대리점의 주 윤곽선이 스스로 그려진 뒤 사막 사진으로 열립니다. 보장 카드가 쌓이고 할인 태그가 도장처럼 찍힙니다.
주택 증축 설계도입니다. 연필 드로잉이 스스로 스케치되고, 연필선이 훑고 지나가면 완성된 건물이 됩니다.
로스앤젤레스의 커스텀 오토바이 빌더입니다. 치수선이 오토바이마다 둘러 그려지며 숫자가 올라가고, 송골매가 섹션 사이를 날아다닙니다.
퍼스의 치과 의원입니다. 로고의 미소 곡선이 페이지 전체를 지나가고, 기존 사이트의 84개 페이지를 모두 이 디자인으로 다시 만들었습니다.
02 · 템플릿
템플릿
샘플 콘텐츠가 들어 있는 모션 사이트 템플릿 64개입니다. 브랜드에 맞게 다듬어 쓰는 출발점이며 모션 그래픽과 시네마틱 두 종류로 나뉩니다. 모두 실제로 열려 있으니 직접 들어가 커서를 움직여 보세요.
모션 그래픽 47
글자, 도형, 오브젝트가 스크롤, 드래그, 커서에 반응해 움직입니다. 영상 없이 코드와 정지 이미지만 사용합니다.
Tora Studio (새 탭에서 실제 사이트가 열립니다)
흰 도자기 호랑이가 불씨빛 수채화 구름 위로 몸을 일으킵니다. 커서가 그 위에 불씨 줄무늬와 금빛 수선 이음선을 남깁니다.
Lavenhill (새 탭에서 실제 사이트가 열립니다)
라벤더 농장의 페이지입니다. 휘어진 3D 라벤더 둑을 커서가 빗어 넘기면 줄기가 다시 튕겨 돌아옵니다.
Lumen Atelier (새 탭에서 실제 사이트가 열립니다)
커다란 헤드라인 앞의 유리 모놀리스를 드래그해 움직이면 뒤의 글자가 확대되고 갈라집니다.
Emberspire (새 탭에서 실제 사이트가 열립니다)
사막 협곡의 붉은 사암 첨탑 두 개입니다. 커서 자국 하나가 활짝 꽃핀 같은 협곡으로 통하는 구멍을 엽니다.
Kasumi (새 탭에서 실제 사이트가 열립니다)
사원 지붕 아래 한자 커튼이 줄에 매달려 있습니다. 줄은 커서 주위로 갈라지고, 잡아당길 수 있으며, 튕기면 음이 울립니다.
Hoppenbit (새 탭에서 실제 사이트가 열립니다)
커다란 HOPPENBIT 헤드라인 앞에 개구리가 서 있고, 눈이 커서를 따라다닙니다.
Acid Lion (새 탭에서 실제 사이트가 열립니다)
글리프 격자로 그린 사자입니다. 커서 자국이 애시드 라임색 레이어를 칸 하나씩 드러냅니다.
Tidal Stickers (새 탭에서 실제 사이트가 열립니다)
다이컷 바다 스티커 여덟 장이 헤더 아래 수평선을 이루고, 집어서 옮길 수 있습니다.
Pompom Club (새 탭에서 실제 사이트가 열립니다)
펠트로 만든 토마토 빛 빨강 생명체가 연락처 문구 뒤에서 별을 껴안고, 왕눈이 눈이 커서를 따라다닙니다.
Moulin Verdelle (새 탭에서 실제 사이트가 열립니다)
올리브 오일 병이 네 가지 상태를 거치는 동안 화면에 머물고, 라벨 띠가 그 둘레를 감아 돕니다.
Frostline (새 탭에서 실제 사이트가 열립니다)
거대한 픽셀 워드마크가 글리치처럼 나타나고 스키 고글이 휙 들어옵니다. 그다음 둘 다 작아져 혜택 섹션으로 들어갑니다.
Fizzleaf (새 탭에서 실제 사이트가 열립니다)
찢은 종이 장면들이 서로 겹쳐 미끄러지고, 스파클링 티 병이 기울어 받침대에 줄지어 서서 피날레를 향해 몸을 기웁니다.
Poke Ahoy (새 탭에서 실제 사이트가 열립니다)
청록색 접시 위의 포케 볼이 날아다니는 재료에 자리를 내주었다가, 스크롤하면 새로운 색으로 다시 자리 잡습니다.
Olea Atelier (새 탭에서 실제 사이트가 열립니다)
카메라가 그려진 아치를 통과해 올리브색 방으로 들어가고, 방은 패널로 줄어들며 타이틀과 초상 세 점이 올라옵니다.
Trekar (새 탭에서 실제 사이트가 열립니다)
등산화가 세 장면 사이를 날며 회전하고, 단어가 바뀌면서 사암 첨탑 아래로 두 번째 등산화가 올라옵니다.
KYRO (새 탭에서 실제 사이트가 열립니다)
오토바이 헬멧이 돌며 들어왔다가 휙 빠져나가고 UI가 올라옵니다. 클릭할 때마다 헬멧, 스펙, 썸네일이 한 줄씩 움직입니다.
Skyloft (새 탭에서 실제 사이트가 열립니다)
워드마크가 확대되며 해 질 녘 계곡으로 들어가고, 알프스 샬레의 세 장면이 이어집니다. 마스크된 헤드라인이 올라오고, 헤어라인이 그려지고, 유리 카드가 미끄러져 들어옵니다.
Ligure (새 탭에서 실제 사이트가 열립니다)
마을 하나씩 훑고 지나가는 리구리아 리비에라 히어로입니다. 겹겹의 패럴랙스 장면과 떠다니는 배가 어우러집니다.
Chronis (새 탭에서 실제 사이트가 열립니다)
모래색 바탕 위의 포레스트 그린 호 두 개와 탁상 모래시계입니다. 스프링으로 움직이는 4단계 캐러셀에 텍스트 릴과 썸네일 카드가 더해집니다.
Lombok Stay (새 탭에서 실제 사이트가 열립니다)
바나나 잎 벽이 새벽 라군을 감싸 틀을 이룹니다. 타이틀이 갈라지고, 잎이 쓸려 나가고, 야자나무가 솟고, 항공 촬영한 해안이 예약하기 버튼 아래로 떠오릅니다.
Sandbar (새 탭에서 실제 사이트가 열립니다)
위에서 내려다본 라군 이야기입니다. 스크롤하면 밀물이 모래와 파라솔 위를 쓸고 지나가고, 카누가 내려앉고, 티크 부두가 솟아오릅니다.
Villa Nova (새 탭에서 실제 사이트가 열립니다)
거대한 세리프 워드마크가 마스크에서 올라와 왼쪽 아래에 자리 잡고, 도자기 사진 카드 두 장이 미끄러져 들어옵니다.
Pressd (새 탭에서 실제 사이트가 열립니다)
콜드프레스 주스 캐러셀입니다. 거대한 휠이 거대한 워드마크 뒤로 다음 병과 그 색을 돌려 들여옵니다.
Kettle Dusk (새 탭에서 실제 사이트가 열립니다)
잎차 브랜드의 여섯 장면 시퀀스입니다. 파우치가 헤드라인 위로 떨어지고, 배경이 해 질 녘으로 바뀌고, 차 우리는 스테이션이 미끄러져 들어옵니다.
Smashhaus (새 탭에서 실제 사이트가 열립니다)
더블 스매시 버거가 떨어지는 다섯 겹으로 조립되고, 이어서 내비게이션, 헤드라인, 메뉴 카드가 주위로 미끄러져 들어옵니다.
Alpen Ridge (새 탭에서 실제 사이트가 열립니다)
Traverse와 Engadin 사이의 작은 얼음 동굴 창이 스크롤하면 열리며 화면 가득한 알펜글로 황혼이 펼쳐지고, 패럴랙스 봉우리가 솟아오릅니다.
Maison Aubrey (새 탭에서 실제 사이트가 열립니다)
향수 하우스의 히어로입니다. 점 로더 뒤에 향수병 하나가 떨어지고, 헤드라인 옆에서 기울었다가, 두 병이 더 들어오면 바로 섭니다.
Torrent Gear (새 탭에서 실제 사이트가 열립니다)
새벽 하늘 위의 분리된 대문자 헤드라인, 굴러 들어오는 등산화 두 켤레, 그리고 스크롤하면 하늘이 걷혀 올라가며 화강암 받침대에 한 켤레가 내려앉습니다.
Dough Bros (새 탭에서 실제 사이트가 열립니다)
코발트색 스튜디오 벽과 트래버틴 받침대 위로 소프트 프레첼이 굴러 떨어지며 캐러셀을 돕니다.
Zestwell (새 탭에서 실제 사이트가 열립니다)
드래그해서 두 가지 맛 주스 병을 바꿉니다. 라일락 빛 자두 장면이 닦여 나가며 아쿠아빛 망고가 드러나고, 과일이 미끄러져 제자리로 들어옵니다.
Ironbark Skin (새 탭에서 실제 사이트가 열립니다)
돌 받침 위의 병 다섯 개입니다. 드래그하면 방이 띠 모양으로 잉크 블루로 닦여 나가고, 스포이트 세럼이 올라오며 통계 네 개가 올라갑니다.
Hanabi Studio (새 탭에서 실제 사이트가 열립니다)
가을 단풍 료칸입니다. 긴 로드 인트로, 갈라지는 타이틀, 쏟아지는 카드, 낮에서 밤으로 뒤집히는 전환이 이어집니다.
Aurelle (새 탭에서 실제 사이트가 열립니다)
겹겹의 사구 지대를 스크롤로 뚫고 들어가 식물 성분, 꽃잎을 받는 비커, 세럼 병 세 개로 이어집니다.
Hirekart (새 탭에서 실제 사이트가 열립니다)
카트 대여 히어로입니다. 카트가 기울어진 트랙 패널을 미끄러져 드나들고, 이름, 카운터, 스펙이 릴처럼 돌아갑니다.
Chiang Trails (새 탭에서 실제 사이트가 열립니다)
돌 아치가 있는 테라코타 벽이 안개 낀 다랑이논 트레일로 열립니다. 갈라진 타이틀 주위로 나뭇잎 레이어가 커서를 따라 움직입니다.
Stillform (새 탭에서 실제 사이트가 열립니다)
햇살 드는 아케이드에서 누끼 딴 무용수 뒤의 거대한 단어, 고정된 아치형 클래스 카드가 옆으로 훑고 지나가고, 예약 패널이 확대되어 들어옵니다.
Fledge (새 탭에서 실제 사이트가 열립니다)
장난기 넘치는 AI 앱 페이지입니다. 타자 치듯 켜지는 부팅 인트로, 펠트 인형 새, 모양이 변하는 WebGL 블롭, 타일 마키, 스크롤하면 부채꼴로 펼쳐지는 카드가 있습니다.
Amberhive (새 탭에서 실제 사이트가 열립니다)
레트로 꿀 브랜드입니다. 벌집 모양 병이 거대한 디코딩 헤드라인 속에 서 있고, 벌이 커서를 따라다닙니다.
Puff Studio (새 탭에서 실제 사이트가 열립니다)
점 얼굴 마스코트, 모양이 변하는 파티클 구름, 스크롤하면 쌓이는 서비스 패널이 있는 스튜디오 홈페이지입니다.
Pursuit Gallery (새 탭에서 실제 사이트가 열립니다)
갤러리 패스의 3D 링에서 기울어진 시트가 스크롤하면 수평으로 펴지고, 휘어진 카드가 거대한 글자를 통과하며 마키가 이어집니다.
Egret AI (새 탭에서 실제 사이트가 열립니다)
제도 용지 같은 사이트입니다. 점묘 연필로 그린 요트 렌더가 고정된 스크롤에서 벽 하나씩 지어집니다.
Cuya Mate (새 탭에서 실제 사이트가 열립니다)
스파클링 마테 캔이 일러스트 히어로에서 굴러 나와 뚜껑이 열리고, 혜택 카드를 휙 들여오며 아치형 헤드라인을 탑니다.
Palate Labs (새 탭에서 실제 사이트가 열립니다)
음식, 향신료, 와인 포스터로 이뤄진 3D 카드 휠이 둥근 팔각형 렌즈를 통해 돌아가고, 노드 네트워크와 스와이프 게임이 함께합니다.
Copy Foundry (새 탭에서 실제 사이트가 열립니다)
개발자 도구 랜딩 페이지를 위한 타입 스파이럴 다이브와 글리프 픽셀로 이은 섹션 이음새입니다.
Nudge Coffee (새 탭에서 실제 사이트가 열립니다)
거대한 손글씨 커피 워드마크가 코발트 바탕 위에서 스스로 써지고, 이어서 대문자 모노로 쓴 플랫 컬러 띠가 따라옵니다.
Scrappy Pay (새 탭에서 실제 사이트가 열립니다)
프리랜서 결제 앱입니다. 짧은 도시 영상 루프 위에서 커서가 스티커 자국을 남깁니다.
Pilot AI (새 탭에서 실제 사이트가 열립니다)
스크롤로 풀어내는 카툰입니다. 레트로 컴퓨터에 타자로 찍히는 헤드라인, 액체 와이프, 그리고 미로와 조종석을 지나는 비행사 마스코트가 이어집니다.
시네마틱 17
움직이는 영상이나 프레임 시퀀스, 사진이 페이지를 이끕니다.
tideFORUM (새 탭에서 실제 사이트가 열립니다)
애니메이션 풍 항구 도시가 스크롤하기 전까지는 멈춰 있다가, 스크롤하면 골든아워에서 밤으로 앞으로 감겨 갑니다.
Kitsu AI (새 탭에서 실제 사이트가 열립니다)
반짝이는 여우 로봇의 눈이 커서를 따라다닙니다. 한 클립에서 보정한 72개 프레임 중에서 골라 보여 줍니다.
Harbour Kiln (새 탭에서 실제 사이트가 열립니다)
잉크로 그린 만이 푸터 문구 뒤에 펼쳐지고, 돛단배 두 척이 끊김 없는 루프로 가로질러 미끄러집니다.
Halo Glass (새 탭에서 실제 사이트가 열립니다)
커서가 종이 페이지에 잉크 구멍을 뚫으면, 그 아래에서 같은 단어가 모양이 변하는 불어 만든 유리로 나타납니다.
Clovera (새 탭에서 실제 사이트가 열립니다)
토끼 귀 모양 도자기 그릇과 해 질 녘 라벤더 밭의 처진 귀 토끼가, 히어로가 스크롤로 사라지면서 드러납니다.
Waymark (새 탭에서 실제 사이트가 열립니다)
모래색 종이에 인디고 잉크로 찍은 로마 수도교 위로, 낙타 대상이 끊김 없는 루프로 걸어 지나갑니다.
Gallop AI (새 탭에서 실제 사이트가 열립니다)
유리 말 흉상이 아래 가장자리에서 올라와, 마우스를 옆으로 움직이면 360도 완전히 돕니다.
High Country (새 탭에서 실제 사이트가 열립니다)
산 사진 스물한 장이 3D 구 위에 떠 있고, 드래그해서 돌릴 수 있습니다. 한 장을 클릭하면 라이트박스로 날아듭니다.
Ducato (새 탭에서 실제 사이트가 열립니다)
은빛 베네치아 두카트 금화가 돌면서 독자를 따라 페이지를 내려가 그려진 아치에 안착합니다.
Glazery (새 탭에서 실제 사이트가 열립니다)
글레이즈드 도넛이 그려진 하늘 위에 떠 있습니다. 스크롤하면 타이틀이 흩어지고, 초원이 훑고 지나가고, 도넛이 뒤집힙니다.
Sela (새 탭에서 실제 사이트가 열립니다)
두 클립으로 된 패션 필름이 스크롤에 따라 하얀 에디토리얼 페이지 뒤에서 재생되고, 소재 누끼 이미지가 옆으로 지나갑니다.
Lustre.Co (새 탭에서 실제 사이트가 열립니다)
하얀 스튜디오에 청록색 1950년대 픽업트럭이 서 있고, 마우스를 움직이면 카메라가 그 둘레를 걷습니다.
Stratum House (새 탭에서 실제 사이트가 열립니다)
화면 가득한 협곡 드론 비행 영상이, 층층이 쏟아지는 선과 카메라 푸시로 이뤄진 13초 반복 타이틀 시퀀스 뒤에서 재생됩니다.
Zephyra (새 탭에서 실제 사이트가 열립니다)
골든아워의 카타마란 영상이 화면을 채우고, 그 위로 헤어라인, 마스크된 헤드라인, 글라이드 섹션까지 미끄러지는 유리 카드가 이어집니다.
Kaelo (새 탭에서 실제 사이트가 열립니다)
다이브 워치 홈페이지입니다. 반복 재생되는 영상 플레이트 뒤로 단계별 라이즈 앤 페이드 UI가 나오고, 이어서 눈금 링 다이얼이 있는 분해 부품 섹션이 나옵니다.
Lumora Home (새 탭에서 실제 사이트가 열립니다)
웨이브 시트 프리로더가 해 질 녘 주택 영상 위의 그리드 타일로 줄어들고, 이어서 고정된 3단계 시공 과정과 겹쳐 쌓인 겨울 사진 패널이 나옵니다.
Famished Owl (새 탭에서 실제 사이트가 열립니다)
핫 허니 병이 구르고 쏟아지는 모습이 여덟 화면의 스크롤 연동 흐름에 걸쳐 이어집니다.
문의
이런 사이트가 필요하신가요?
어떤 일을 하는 사업인지 알려 주세요. 디자인하고, 제작하고, 주변 업무까지 자동화해 드립니다.
문의하기