Asset library / in use

하버스쿨이 쓰는
모든 그림과 영상.

브랜드 마크, 마스코트 버미, 히어로 영상, 코스 썸네일, 3D 소품 — 사이트에 실제로 쓰이는 에셋만 한곳에 모았습니다. 에셋을 생산하는 AI 스킬 카탈로그는 /assets/skills, 과거 전체 아카이브는 /assets-v1에서 볼 수 있어요.

안녕, 난 버미야

브랜드 3D 소품 콘텐츠·미디어

Contents

브랜드

Brand marks심볼·워드마크·하버마크
Mascot 버미팔레트·표정·9개 모션
Leaders에믈럼·포트레이트

3D 소품

Objects (deployed)mineral 계열 3D 오브젝트

콘텐츠·미디어

Course covers라이브 코스 커버 3종
Hero mediaharbor_1 루프 + 배경 2장
Supporting media타이핑 이펙트 + 바다 배경

01 · Brand marks

하버스쿨 로고, 다섯 가지 쓰임.

같은 심볼을 다섯 가지 폼팩터로 가지고 있습니다. 워드마크는 네비·푸터·OG 이미지 용으로 크기·비율이 각각 분리되어 있어요.

BrandSymbol

387.12 × 435.98

@repo/ui → brand.tsx

히어로 심볼 클립, 노트 / 오픈그래프 뱃지

BrandWordmark

509.39 × 239.96

@repo/ui → brand.tsx

스태킹 2줄 워드마크 (HARBOR / SCHOOL)

BrandWordmarkHorizontalSingle

1076.66 × 114.29

@repo/ui → brand.tsx

네비게이션용 한 줄 워드마크

BrandWordmarkHorizontal

1220.75 × 141.86

@repo/ui → brand.tsx

푸터 대형 워드마크 — 버미 머리 포함 (HARB❤URSCHOOL)

HarborMark

600 × 600 (viewBox)

@repo/ui → brand.tsx

심볼 + 배경 펄스 + 드리프트 웨이브가 함께 도는 애니메이션 마크

02 · Mascot

버미 — 아홉 가지 도우미 모션.

현재 footer 의 HARB(버미)URSCHOOL 워드마크에 머리만 박혀 있습니다. 여기서는 팔레트와 표정 변형, 그리고 Windows 강아지 도우미처럼 여러 코스에서 쓸 수 있는 아홉 가지 모션을 정리했어요.

Palette variations

같은 실루엣 · 색만 바꿔 코스 주제에 따라 브랜드 팔레트 안에서 교체.

Wave (default)

#102eff

Coral

#d46c66

Sage

#4c8268

Honey

#c88f14

Ink

#121212

Terra

#c27656

Expressions

눈 · 입 상태 4종. 모션 스테이트와 조합.

happy

surprised

sleepy

wink

Motion states

framer-motion 기반 9개 상태. 각 카드의 버미는 계속 움직이고 있습니다.Cursor follow / Click to celebrate는 인터랙션 필요.

Float

아무 이벤트 없이 떠 있는 기본 상태 — 숨 쉬는 듯한 Y축 2.6s 루프

Use: Principle 섹션 hover 시 이미 사용 중 (BummyHello)

Peek

섹션 아래에서 반쯤 머리를 내밀었다 사라졌다 하는 동작

Use: Hero 영역, Principle 각 row 펼칠 때

Wave

2.2s 사이클로 좌우로 인사, 1.4s 휴식

Use: Footer 첫 진입, CTA 근처 유도

Hop

squash & stretch — overshoot easing으로 뛰었다 앉기

Use: 로그인/수료 같은 성공 이벤트 축하용

Spin

360 무한회전, linear 3.6s — 로딩/시그널용

Use: API 대기 인디케이터, 빈 상태 플레이스홀더

Cursor follow

몸이 살짝 따라오고 눈동자가 더 크게 따라감

Use: About/Leaders 섹션 — 체류 유도

ZZZ

Sleepy

눈 감고 Z Z Z 가 위로 떠오르는 상태

Use: 장시간 비활성, 에러 상태 플레이스홀더

Click to celebrate

클릭하면 ♥ 다섯 개가 방사형으로 튀어나옴

Use: 결제 완료, 코스 수강 신청 성공

Scroll hint

아래로 Y축 왕복 + 화살표 깜빡임

Use: Hero → About 진입 유도, 모바일 스크롤 안내

현재 버미가 실제로 쓰이는 곳

· Footer wordmark — BrandWordmarkHorizontal 의 O 자리에 머리 전체. FooterWordmark가 뷰포트 진입 시 바운싱.
· Principle 섹션 — 각 row 펼칠 때 BummyHello가 우상단에서 등장 (현재는 CSS @keyframes 로 구현됨).
· Hero 심볼 우측 — HeroWave 안에서 3.2초 지연 후 clip-path peek.

03 · Leaders

리더 프로필 자산.

지용민(JYM) 프로필 페이지에 쓰이는 3개. Emblem은 왁스 씰 스타일 SVG, framer는 출신 회사 로고 뱃지, jiyongmin 은 포트레이트 사진.

emblem.svg

15 KB · 왁스 씰 느낌의 리더 마크. 지용민 페이지 상단 장식.

framer.png

85 KB · Framer 로고 — 출신/스폰서 뱃지.

jiyongmin.jpg

34 KB · JYM 포트레이트. 리더 프로필 페이지 hero.

04 · Objects · deployed

지금 사이트에 떠 있는 3D 오브젝트.

mineral 계열 오브젝트가 홈 플로팅·IntroStack·Testimonials·Principle·FAQ·About에 실제로 배치되어 있어요. 이 중 6장은 mineral 스킬의 ref 이미지 겸용 — 생성 파이프라인은 /assets/skills. 과거 devices 소품(우산·폰·OPK)은 리워크로 빠져 /assets-v1 아카이브에 있어요.

Sphere (blue, cutout)

193 KB

IntroStack 카드 1

/objects/sphere_blue_cutout.png

Triangle (yellow, cutout)

155 KB

IntroStack 카드 2 · 홈 플로팅

/objects/triangle_yellow_cutout.png

Cube (red, cutout)

251 KB

IntroStack 카드 3

/objects/cube_red_cutout.png

Cube (red)

79 KB

홈 랜딩 플로팅 오브젝트

/objects/cube_red.png

Octahedron (topdown)

347 KB

홈 랜딩 플로팅 오브젝트

/objects/topdown_clean/topdown_08_octahedron.png

Principle object

49 KB

Principle 섹션 · 두 곳

/principle/object.png

Stacked disks (glass)

44 KB

Testimonials 장식 · mineral-glass ref 겸용

/objects/object_eg_2.png

L-shape (glass)

37 KB

Testimonials 장식 · mineral-glass ref 겸용

/objects/object_eg_3.png

Curved ramp (glass)

36 KB

Testimonials 장식 · mineral-glass ref 겸용

/objects/object_eg_4.png

Card sphere (matte)

177 KB

FAQ·About 섹션 shape · mineral-matte ref 겸용

/objects/card/1.png

Card cube (matte)

238 KB

FAQ·About 섹션 shape · mineral-matte ref 겸용

/objects/card/2.png

Card pyramid (matte)

152 KB

FAQ·About 섹션 shape · mineral-matte ref 겸용

/objects/card/3.png

Sphere (blue)

533 KB

FAQ·About 섹션

/objects/sphere_blue.png

Object 2

238 KB

FAQ 섹션

/objects/2.png

05 · Course covers

코스 카드 커버 — 라이브 3종.

홈·/courses 카드에 실제로 쓰이는 커버 3종. 카드 이미지는 admin에 업로드된 DB thumbnail(CDN)이고, 앞의 두 개는 1080×1080 React 컴포넌트가 디자인 소스라 여기서 라이브로 렌더합니다. 여분 커버 후보를 포함한 전체 레지스트리는 /assets/skills#course-covers 에 있어요.