자동 생성 문서 — 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)으로 통일된 절제된 모션 + 골드 포인트의 대기업 아이덴티티. 콘텐츠 섹션은 화이트 미니멀. | 로딩 인트로 스크롤 영상 히어로 커스텀 커서 팔로워 | |
| 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) 단일 포인트 컬러로 절제된 실용주의 톤. |