BrandSymbol
387.12 × 435.98@repo/ui → brand.tsx
히어로 심볼 클립, 노트 / 오픈그래프 뱃지
Asset library / v1
하버스쿨이 쓰는
모든 그림과 영상.
브랜드 마크, 마스코트 버미, 히어로 영상, 코스 썸네일, 3D 클레이 아이콘 라이브러리 — 사이트에 실제로 쓰이는 에셋과, 곧 쓰일 라이브러리를 한곳에서 확인합니다.
안녕, 난 버미야
Contents
AI 생성 3D
01 · Brand marks
하버스쿨 로고, 다섯 가지 쓰임.
같은 심볼을 다섯 가지 폼팩터로 가지고 있습니다. 워드마크는 네비·푸터·OG 이미지 용으로 크기·비율이 각각 분리되어 있어요.
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 · Devices · deployed
지금 사이트에 떠 있는 3D 소품.
Principle 섹션·IntroStack 배경에 흩뿌려져 있는 소품들. 아직 안 쓰는 파생 포맷(.avif, .jpg)도 함께 보여줍니다.
Beach umbrella
433 KBPrinciple 섹션 · -6deg 기울기, 288px
/devices/beach-umbrella.png
Beach ball
70 KB여분 (추후 장식)
/devices/beachball.png
Beach ball (AVIF)
14 KB최신 포맷 변형
/devices/beachball.avif
Phone (단면)
87 KB여분
/devices/phone.png
Phone single (대표)
32 KBPrinciple 섹션 좌하단 · -12deg, 200px + 블러 쉐도우
/devices/phone-single.png
Phone (AVIF)
7 KB경량 포맷 변형
/devices/phone.avif
Vision Pro
188 KB여분 (크리에이티브 툴 섹션 후보)
/devices/vision-pro.png
Vision Pro (JPG)
43 KBJPEG 변형
/devices/vision-pro.jpg
SIM card
426 KB여분 (Vision Pro 섹션 보조)
/devices/sim-card.png
Sand texture
11 KB여분 — 배경 타일
/devices/sand.jpg
OPK (미지의 소품)
16 KBPrinciple 섹션 · 14deg + -16deg 두 개 흩뿌림
/devices/opk.png
OPK (JPG)
2 KBJPEG 변형
/devices/opk.jpg
05 · 3D Clay library (ready to deploy)
bnbicons 톤으로 찍어둔 25개.
_assets/3d/ 에 쌓여있는 라이브러리. batch-01 (5종) + batch-02 (20종). 아직 사이트에 배포되지 않았고, 용도 제안만 적혀 있어요. z-image-turbo · 1024×1024 · 시드 3001~3020 / 5005~5018.
Batch 01 · Harbor core (5)
Lighthouse
10/10코랄 + 크림 스트라이프, 세이지 풀 · 앰버 랜턴 글로우
Anchor
8.5/10차콜 clay + 크림 로프 · 샌드 mound
Compass
9/10황동 골든 + N 라벨 · 여행/커리큘럼 마커
Paper boat
9/10코랄 종이접기 + 민트 물결 · “첫 항해”
Seashell
9/10피치 + 크림 줄무늬 · About 섹션 장식 후보
Batch 02 · Expansion (20)
Buoy
10/10코랄 + 크림 + 민트 물 포말
Rope knot
브레이드 텍스처 · 두 다리로 선 해석
Message bottle
청록 글래스 반투명 + 코르크 + 스크롤
Sailboat
코랄 리밍 + 민트 물 + 세이지 깃발
Treasure map
지도·X·컴패스 로즈 · Course roadmap 후보
Laptop
세이지 스크린 + 크림 바디
Headphones
머스타드 쿠션 + 크림 바디
Camera
vintage TLR 실루엣
Stylus pen
코랄 + 골드 팁
USB cable
두 개 커넥터가 마주보는 연결 은유
Book stack
3권 쌓인 클레이 책 · Curriculum
Lightbulb
앰버 필라멘트 · Idea
Pencil
2B 연필, 노란 바디
Sticky note
민트 노트 + 접힌 모서리
Checkmark badge
수료 뱃지
Cloud puff
몽글몽글 구름 · 배경 장식
Palm leaf
세이지 그린 야자잎
Pebble
누끼 조약돌 · 미니 악센트
Star
5각 골든 별
Glass cube
반투명 큐브 · UI 은유
06 · Style references
목표 비주얼 랭귀지 — bnbicons.
3D 에셋을 찍을 때의 레퍼런스. Chubby, rounded, matte playdoh · pastel warm palette · soft ambient lighting. 실제 생성된 에셋이 여기 톤에 얼마나 붙었는지 비교용.
07 · Mineral matte
Card 시리즈 — 단일 매트 그라데이션.
단일 솔리드 형태에 sandblasted powder-coat 표면 + 부드러운 multi-color 그라데이션(블루↔레드↔오렌지↔옐로). isometric three-quarter view, 흰 배경, 약한 그림자. ComfyUI Qwen-Image-Edit 2509 기반 `mineral-matte` 스킬로 생성.
References (3)
스킬에 번들된 ref 이미지 —--ref sphere/cube/pyramid 플래그로 색감 컨트롤. 곡선 ref → 곡선 결과, 각진 ref → 각진 결과가 가장 안정적.
card/1.png — Sphere
blue → orange (수직 2톤)
card/2.png — Cube
blue + red + orange tri (per-face 분포)
card/3.png — Pyramid
blue + red + yellow tri (per-face 분포)
Generated assets (8) · 평균 84점
점수 = 시리즈 미감 일치도(100점 만점). ⭐ 85+ 즉시 채택 · ✓ 75–84 보정 후 채택 · ⚠ 75 미만 재시도 권장. icosahedron(60→92) · torus(50→88)는 평가 md의 부작용 차단안 적용 후 큰 폭 개선됨.
Cylinder
⭐ 95/mineral-matte cylinder 만들어줘
ref · sphere
Icosahedron
⭐ 92/mineral-matte icosahedron 만들어줘 (표면 마킹 없이)
ref · cube
Octahedron
⭐ 88/mineral-matte octahedron 만들어줘
ref · cube
Torus
⭐ 88/mineral-matte ring 만들어줘 (도넛 말고)
ref · cube
Star
⭐ 85/mineral-matte star 만들어줘
ref · pyramid
Heart
✓ 78/mineral-matte heart 만들어줘
ref · pyramid
Capsule
✓ 75/mineral-matte capsule 만들어줘 (이음새 없이)
ref · sphere
Cone
⚠ 70/mineral-matte cone 만들어줘 (받침 없이)
ref · sphere
Skill usage
Claude에 자연어 (“미네랄 매트로 cylinder 만들어줘”)로 호출하거나 CLI로 직접 실행. 레퍼런스 이미지는 스킬에 번들되어 있어 외부 의존성 없이 폴더 통째 공유 가능.
python3 .claude/skills/mineral-matte/scripts/generate.py \
--shape "tall solid cylinder with heavy grit matte texture" \
--ref sphere \
--output web/apps/web/public/objects/card/generated/cylinder.png.claude/skills/mineral-matte/
08 · Mineral glass
Object 시리즈 — 두 파트 frosted glass.
흰 frosted matte + 컬러 translucent jelly 두 파트가 결합된 형태. brand palette(red #DD3631 / yellow #DDA637 / blue #3A95CE)와 isometric three-quarter view 유지. ComfyUI Qwen-Image-Edit 2509 기반 `mineral-glass` 스킬로 생성.
References (3)
스킬에 번들된 ref 이미지 —--ref disks/l/ramp 플래그로 색감 + 결합 패턴 컨트롤. stack 컨셉(disks)이 가장 안정적, curve(ramp)는 ref 형태에 강하게 묶이는 경향.
object_eg_2.png — Stacked disks
white frosted top + red translucent bottom
object_eg_3.png — L-shape
white frosted + yellow translucent
object_eg_4.png — Curved ramp
blue translucent + white frosted base
Generated assets (8) · 평균 75점
점수 = 시리즈 미감 일치도(100점 만점). 두 파트 결합 + 갯수 + translucent 제약이 동시에 걸려 단일 형태(card 시리즈)보다 prompt 부담이 큰 편. dome_on_base(65→88)는 ‘Completely change’ 표현으로 ref-lock 해제 성공.
Cylinder stack
⭐ 92/mineral-glass tall cylinder stack 만들어줘
ref · disks
Dome on base
⭐ 88/mineral-glass dome on base 만들어줘 (반구 + 직사각 base)
ref · ramp
T-shape
⭐ 85/mineral-glass T-shape 만들어줘 (큐브 2개)
ref · l
Sphere on cube
✓ 80/mineral-glass sphere on cube 만들어줘
ref · disks
Cone on cube
✓ 78/mineral-glass cone on cube 만들어줘
ref · disks
U-shape
⚠ 65/mineral-glass U-shape 만들어줘 (큐브 3개)
ref · l
Solid arch
⚠ 60/mineral-glass solid quarter-pipe wedge 만들어줘 (속이 꽉 찬)
ref · ramp
Plus-shape
⚠ 50/mineral-glass plus 모양 만들어줘 (큐브 5개)
ref · l
Skill usage
Claude에 자연어 (“미네랄 글래스로 sphere on cube 만들어줘”)로 호출하거나 CLI로 직접 실행. 레퍼런스 이미지는 스킬에 번들되어 있어 외부 의존성 없이 폴더 통째 공유 가능.
python3 .claude/skills/mineral-glass/scripts/generate.py \
--shape "a sphere on a cube — red translucent sphere on top, white frosted cube base" \
--ref disks \
--output web/apps/web/public/objects/generated/sphere_on_cube.png.claude/skills/mineral-glass/
09 · Mineral glass grid
한 장의 카탈로그 ref 변형.
`mineral-glass`의 변형 — 단일 형태 ref 3장 대신, 20개 자산이 그리드로 배치된 한 장의 카탈로그(`_graphic/3d_asset.png`)를 ref로 사용. `--ref` 플래그 없음. 같은 8개 형태를 같은 seed로 생성해 직접 비교.
Reference (1)
Qwen Edit 2509에 한 장만 입력. BASE_RULES에 “single isolated object, NOT a grid” 강제 추가로 그리드 결과 차단.
_graphic/3d_asset.png — Catalog grid
20-asset frosted glass + translucent jelly 카탈로그 (red / yellow / blue / white)
Generated assets (8) · 평균 78점
mineral-glass(75)보다 약간 높음. U-shape(65→85)는 카탈로그가 다양한 형태를 학습 신호로 줘서 큰 개선. sphere_on_cube(80→70)는 카탈로그의 multi-color 영향으로 marbled drift 발생.
Cylinder stack
⭐ 90/mineral-glass-grid tall cylinder stack 만들어줘
ref · grid
T-shape
⭐ 88/mineral-glass-grid T-shape 만들어줘 (큐브 2개)
ref · grid
Dome on base
⭐ 88/mineral-glass-grid dome on base 만들어줘
ref · grid
Cone on cube
⭐ 85/mineral-glass-grid cone on cube 만들어줘
ref · grid
U-shape
⭐ 85/mineral-glass-grid U-shape 만들어줘 (큐브 3개)
ref · grid
Sphere on cube
⚠ 70/mineral-glass-grid sphere on cube 만들어줘 (단색 sphere)
ref · grid
Plus-shape
⚠ 60/mineral-glass-grid plus 모양 만들어줘 (큐브 5개)
ref · grid
Solid arch
⚠ 60/mineral-glass-grid solid quarter-pipe wedge 만들어줘 (속 채워진)
ref · grid
Skill usage
Claude에 자연어 (“미네랄 글래스 그리드로 dome on base 만들어줘”)로 호출하거나 CLI로 직접 실행. 레퍼런스 이미지는 스킬에 번들되어 있어 외부 의존성 없이 폴더 통째 공유 가능.
python3 .claude/skills/mineral-glass-grid/scripts/generate.py \
--shape "dome on base" \
--output web/apps/web/public/objects/generated_grid/dome.png.claude/skills/mineral-glass-grid/
10 · Course thumbnails
코스 카드 배너.
Ref0~Ref5 다섯 장. 홈 페이지 fallback 카드 3개에 Ref0·ref5·ref2 가 쓰이고, ref1/ref3 은 추후 코스용 여분.
/courses/Ref0.webp홈 · 코스 카드 #1 (AI Workflow)
30 KB · webp웜톤 그라데이션 · AI · 프롬프트 엔지니어링 감성
/courses/ref1.webp여분 (추후 코스용)
17 KB · webp쿨톤 그리드 · 디자인 시스템 톤
/courses/ref2.webp홈 · 코스 카드 #3 (Design System)
24 KB · webp파스텔 빛, 컨테인(1.1배) 스케일로 표시
/courses/ref3.webp여분 (추후 코스용)
17 KB · webp코랄-옐로우 블렌드
/courses/ref5.jpeg홈 · 코스 카드 #2 (Framer)
161 KB · jpegFramer 로고/브랜드 컬러, blend-multiply로 배경에 녹임
11 · Hero videos
히어로 심볼 내부 루프 — 8 클립.
HeroVideoSequence 가 5개 클립을 돌립니다. 각 클립은 focusX / zoom / flip 메타로 심볼 마스크 안에서 어떻게 보일지를 따로 제어해요.
hero-video.mp42.1 MB
HeroVideoSequence · 인덱스 0 (기본)
∞ 루프첫 프레임에 focusX 92, 미러 플립
1sec.mp412.0 MB
HeroVideoSequence · 인덱스 1
8s 컷focusX 97, zoom 1.15 — 가장 큰 파일, 디테일 샷
2sec.mp46.6 MB
미사용 (후보)
2s플레이리스트에서 빠져 있음
2sec_.mp41.8 MB
미사용 (후보 경량판)
2s압축 버전 · 추후 스와프 후보
3sec.mp41.2 MB
HeroVideoSequence · 인덱스 2
3sfocusX 94 · 빠른 트랜지션
5sec.mp41.6 MB
HeroVideoSequence · 인덱스 3
5sflip: false · focusX 94
5sec_.mp45.1 MB
미사용 (후보 · 고품질판)
5s같은 컷의 고해상도 버전
6sec.mp47.9 MB
HeroVideoSequence · 인덱스 4
6sfocusX 93 · 시퀀스 마지막
12 · Supporting media
타이핑 루프 · 바다 배경.
코스·히어로 외에 섹션 장식용으로 쓰이는 두 가지. typing-effect는 FinalCTA에 루프, sea-crop은 About 섹션의 3겹(선명+블러+그라데이션) 배경.
/video/typing-effect.mp4
FinalCTA 섹션
41 KBLoopVideo · startOffset 1.0 · max-width 520px · rounded-2xl. 타이핑 진행 중인 코드/텍스트가 루프.
/sea-crop.jpg
About 섹션 배경
1.2 MB · jpgAbout 섹션에 세 번 겹쳐 사용 — 선명한 레이어, blur(18px) 겹치기, 위/아래 페이드 그라데이션.
13 · Course landing builder
강의 랜딩, 조립으로 만든다.
새 강의 상품 랜딩은 공유 course-detail 블록 14종을 조립하고 admin DB를 배선하는 일이다. Claude에게 '새 강의 랜딩 만들어'라고 하면 harbor-course-landing 스킬이 이 레시피로 움직인다.
01
골격 클론
CourseHeroBand → 2컬럼 인트로(sticky 가격 패널) → 퍼널 섹션 → #checkout. exemplar를 복사해 시작한다.
02
블록 조립
CourseTitleBlock · Stats · SectionHeading · CompareTable · WeekList · FaqItem · FloatCard · StickyBar — 새로 그리지 않는다.
03
DB 배선
제목·요약·가격·가격 일정·사전판매 전부 admin이 source of truth. cohortPricingFromRow · presaleFromRow 헬퍼가 해석한다.
04
4모드 검증
모집중 · 마감 · 사전판매 · 매진 — closed/presale 조합 4가지를 전부 렌더로 확인한 뒤 배포한다.
Live exemplar
AI 공장장 — 부트캠프형 풀랜딩 (사전판매 배선 포함)
Compact exemplar
AI Workflow — VOD형 상세 (원조 course-detail 패턴)
블록 갤러리
/system#patterns n=21~33 — 라이브 variation 전부
스킬 파일: .claude/skills/harbor-course-landing/SKILL.md — 골격·블록 배선표·상태 매트릭스·함정(overflow-x-hidden의 sticky 무력화, ISR 캐시, 라벨 중복)·검증 체크리스트까지 담겨 있다.