디자인 타입 갤러리

자동 생성 문서 — npm run design-index로 재생성. 원본: 각 타입 폴더의 profile.md / interactions.md · 마지막 생성 2026-08-13

타입원본 사이트한 줄 요약시그니처컬러
design-type-01 hanmir.co.kr 거대한 타이포(80~110px)와 넉넉한 여백 위에 오렌지(#FA4C16) 포인트 하나만 얹은 미니멀 구성. 움직임은 "스크롤에 비례해 미끄러지는" scrub 기반이고, 등장 모션은 fade-up 800ms 하나로 통일되어 있다. 첫 로딩 인트로 Hero 슬라이더 + 배경 Portfolio 카드 레일
design-type-02 taekwanggroup.co.kr 풀스크린 영상 배경이 스크롤로 전환되는 시네마틱 히어로 + 단일 이징(cubic-bezier(0.33,1,0.68,1) 500ms)으로 통일된 절제된 모션 + 골드 포인트의 대기업 아이덴티티. 콘텐츠 섹션은 화이트 미니멀. 스크롤 영상 히어로 커스텀 커서 팔로워 Our Business
design-type-03 hanwha.co.kr 얇은 웨이트(300) 대형 타이포 + 다크↔라이트 교차 + fixed 패럴랙스 영상 위에 스크롤리텔링(3줄 카피 하이라이트 + 미디어 확장 전환)을 얹은 대기업 시네마틱. 유채색은 한화 오렌지 하나. fixed 패럴랙스 영상 히어로 비전 스크롤리텔링 다크 인트로 문장
design-type-04 yungjin.co.kr 페이지의 76%가 pin+scrub 시퀀스인 "스크롤 시네마" — 화이트 여백 + 초대형 볼드 타이포(200px) 위에서 이미지가 원→알약→풀블리드로 자라나고, E/S/G 풀스크린 씬이 커튼 와이프로 교체되는 제약사 브랜딩 사이트. 유채색은 브랜드 블루(#0099D9) 하나, hover에서만 면적을 갖는다. future-area esg-area 인트로 secne
design-type-05 cmesrobotics.ai 화이트 ↔ 딥블랙을 오가는 "테크 프레젠테이션": 방사형 보라 그라데이션·파티클 위 초대형 헤드라인, 캔버스 이미지 시퀀스로 재생되는 See./Think./Move. 8화면 핀 스토리텔링, 3D 제품 렌더 중심의 다크 상세 페이지. 유채색은 보라(#3B0694~#4B2FE0 계열) 그라데이션 하나로 통일, 버튼은 그라데이션 보더가 아이덴티티. See./Think./Move. 캔버스 씬 핀 방사형 그라데이션 + 파티클 히어로 흩어진 단어 정렬 헤딩
design-type-06 dev-forum-type-b.vercel.app 레딧(Reddit)류 3컬럼 피드 커뮤니티의 정석 — 좌측 고정 내비(홈/인기/보드 카테고리), 중앙 무한 스크롤 게시글 피드(작성자·보드태그·미디어·반응 카운트), 우측 sticky 위젯 레일(로그인 CTA/투표/최근글 랭킹). 화이트 배경 + 잉크 텍스트 + 레딧 오렌지(#FF4500) 단일 포인트 컬러로 절제된 실용주의 톤.

design-type-01

hanmir.co.kr ↗

거대한 타이포(80~110px)와 넉넉한 여백 위에 오렌지(#FA4C16) 포인트 하나만 얹은 미니멀 구성. 움직임은 "스크롤에 비례해 미끄러지는" scrub 기반이고, 등장 모션은 fade-up 800ms 하나로 통일되어 있다.

첫 로딩 인트로Hero 슬라이더 + 배경Portfolio 카드 레일hover 전용 VIEW 커서헤더 hide/show통계 카드 등장 + 카운트업지원사업 3단 밴드 스태킹Pinned 타이포 쇼케이스공통 등장 모션헤더 상태기타스크롤 기록 영상 재검증핀 텍스트 와이퍼 리빌
최대 타이포
110px
컬러
컴포넌트
CountUpStats · FadeUp · HeroFadeCarousel · HoverViewCursor · IntroReveal · PinnedTypeShowcase · PinnedWipeShowcase · PortfolioRail · StackingBands

hover 전/후

design-type-02

taekwanggroup.co.kr ↗

풀스크린 영상 배경이 스크롤로 전환되는 시네마틱 히어로 + 단일 이징(cubic-bezier(0.33,1,0.68,1) 500ms)으로 통일된 절제된 모션 + 골드 포인트의 대기업 아이덴티티. 콘텐츠 섹션은 화이트 미니멀.

스크롤 영상 히어로커스텀 커서 팔로워Our BusinessESG 원형 마스크 시퀀스스케일 리빌헤더 hide/show클립 리빌 등장 모션버튼 마이크로 인터랙션 세트기타시안 적용 우선순위
최대 타이포
72px
컬러
컴포넌트
CircleMaskReveal · CursorFollower · HoverAccordionCards · ScaleRevealSection · WipeVideoHero

hover 전/후

design-type-03

hanwha.co.kr ↗

얇은 웨이트(300) 대형 타이포 + 다크↔라이트 교차 + fixed 패럴랙스 영상 위에 스크롤리텔링(3줄 카피 하이라이트 + 미디어 확장 전환)을 얹은 대기업 시네마틱. 유채색은 한화 오렌지 하나.

fixed 패럴랙스 영상 히어로비전 스크롤리텔링다크 인트로 문장지속가능경영사업분야 4열 카드사이드 도트 내비헤더시안 적용 우선순위
최대 타이포
48px
컬러
컴포넌트
ParallaxVideoHero · SideDotNav · VisionScrollytelling

hover 전/후

design-type-04

yungjin.co.kr ↗

페이지의 76%가 pin+scrub 시퀀스인 "스크롤 시네마" — 화이트 여백 + 초대형 볼드 타이포(200px) 위에서 이미지가 원→알약→풀블리드로 자라나고, E/S/G 풀스크린 씬이 커튼 와이프로 교체되는 제약사 브랜딩 사이트. 유채색은 브랜드 블루(#0099D9) 하나, hover에서만 면적을 갖는다.

future-areaesg-area 인트로secneKV 히어로헤더view-more 버튼 hoverLATEST NEWS뉴스/푸터 등장
최대 타이포
200px
컬러
컴포넌트
CurtainSceneStack · EsgIntroCollage · HoverRevealList · PillExpandHero

hover 전/후

design-type-05

cmesrobotics.ai ↗

화이트 ↔ 딥블랙을 오가는 "테크 프레젠테이션": 방사형 보라 그라데이션·파티클 위 초대형 헤드라인, 캔버스 이미지 시퀀스로 재생되는 See./Think./Move. 8화면 핀 스토리텔링, 3D 제품 렌더 중심의 다크 상세 페이지. 유채색은 보라(#3B0694~#4B2FE0 계열) 그라데이션 하나로 통일, 버튼은 그라데이션 보더가 아이덴티티.

See./Think./Move. 캔버스 씬 핀방사형 그라데이션 + 파티클 히어로흩어진 단어 정렬 헤딩다크→라이트 배경 전환Application 벤토 그리드솔루션 카드 캐러셀b. 솔루션 상세c. Customer Success Story제품 상세about-mission리스트/정보형 페이지헤더/공통
최대 타이포
105px
컬러
컴포넌트
GradientPulseHero · PhotoGradientHero · ScatterAlignHeading · SceneSequencePin

design-type-06

dev-forum-type-b.vercel.app ↗

레딧(Reddit)류 3컬럼 피드 커뮤니티의 정석 — 좌측 고정 내비(홈/인기/보드 카테고리), 중앙 무한 스크롤 게시글 피드(작성자·보드태그·미디어·반응 카운트), 우측 sticky 위젯 레일(로그인 CTA/투표/최근글 랭킹). 화이트 배경 + 잉크 텍스트 + 레딧 오렌지(#FF4500) 단일 포인트 컬러로 절제된 실용주의 톤.

Community Polls 위젯공지 배너 / 프로모션 모달 dismiss반응형 카드 전환결론
최대 타이포
30px
컬러
컴포넌트
CommunityWidgetRail · PostCard