바이브코딩 컴포넌트 70

단정한 블루 그라데이션 배경 위에 핵심 행동을 강조하는 풀폭 전환 섹션

▸ 랜딩 하단에서 무료 체험·상담 신청 전환을 유도할 때

미세한 보더와 카드 분할로 신뢰감을 주는 다크 테마 전환 카드

▸ B2B SaaS·전문 서비스에서 데모 신청과 도입 문의를 받을 때

흰 배경·neutral-200 보더의 미니멀 카드, shadcn 느낌의 절제된 전환 블록

▸ 문서·대시보드 페이지 안에 가볍게 끼워 넣는 가입 유도 블록

중앙 추천 카드를 보더 강조로 띄운 정석 shadcn 3단 요금표

▸ SaaS·구독 서비스 랜딩에서 가장 무난하게 쓰는 표준형이 필요할 때

토스 블루(#0066ff) 포인트와 둥근 라운드로 친근한 3단 요금표

▸ 개인 사장님·일반 소비자 대상으로 부담 없고 친근한 톤이 필요할 때

neutral-950 배경에 추천 카드만 미세한 보더로 띄운 절제된 다크 3단 요금표

▸ 개발자 도구·프리미엄 브랜드처럼 시크하고 고급스러운 인상이 필요할 때

크기가 다른 카드로 핵심 기능을 한눈에 보여주는 벤토 레이아웃

▸ 여러 기능을 위계감 있게 한 화면에 정리해 소개할 때

Lucide 아이콘 3개로 핵심 가치를 균등하게 정렬한 클래식 3컬럼

▸ 핵심 기능 3가지를 동등한 비중으로 깔끔하게 소개할 때

왼쪽 설명과 체크리스트, 오른쪽 시각 목업을 나눈 분할 레이아웃

▸ 대표 기능 하나를 자세히 설득력 있게 설명할 때

콘텐츠 위를 떠다니는 반투명 블러 헤더, 미세한 흰 보더로 정제된 깊이감.

▸ 랜딩/제품 페이지 상단에 콘텐츠가 헤더 아래로 스크롤되며 비쳐 보이게 하고 싶을 때.

crisp한 흰 배경에 neutral-200 보더와 shadow-sm, 검색·아바타까지 갖춘 정석 헤더.

▸ 대시보드나 SaaS 앱 상단처럼 기능성과 정제미를 동시에 원할 때.

넉넉한 여백과 굵은 워드마크, 파란 알약형 CTA로 친근하면서 단단한 인상.

▸ 금융·핀테크 톤의 서비스 첫 화면에서 신뢰감과 친근함을 함께 주고 싶을 때.

상단에 한 줄로 거는 절제된 그라데이션 공지 배너. CTA와 닫기 버튼 포함.

▸ 신규 기능 출시, 이벤트 기간, 점검 안내 등 사이트 전역 공지를 띄울 때

shadcn 스타일의 인라인 알림 배너 3종(성공·정보·경고). 좌측 컬러 보더 강조.

▸ 폼 제출 결과, 결제 완료, 한도 임박 등 페이지 내 상태 알림을 보여줄 때

이름·연락처·문의내용을 받는 친근한 토스풍 문의 폼.

▸ 랜딩 하단이나 고객지원 페이지에서 1:1 문의를 받을 때.

이메일 한 칸과 버튼만 둔 가로형 미니멀 구독 폼.

▸ 블로그·랜딩 중간에 뉴스레터 구독자를 모을 때.

이메일·비밀번호를 받는 절제된 shadcn풍 로그인 카드.

▸ 관리자 대시보드나 회원 서비스 로그인 화면에 쓸 때.

브랜드·4컬럼 링크·뉴스레터·하단 법적고지를 정제된 다크 톤으로 담은 본격 푸터

▸ 제품·서비스 랜딩 페이지 하단에 회사 정보와 전체 메뉴를 한눈에 보여줄 때

흰 배경에 한 줄 브랜드·핵심 링크·SNS만 절제해 담은 가벼운 푸터

▸ 랜딩·문서 사이트처럼 군더더기 없이 가벼운 마무리가 필요할 때

별점과 작성자 정보를 갖춘 정제된 고객 후기 카드 3열 그리드

▸ 제품·서비스 상세나 랜딩에서 실제 사용자 후기로 신뢰를 줄 때

핵심 성과 숫자를 아이콘과 함께 보여주는 4열 통계 바

▸ 히어로 아래나 가격표 위에서 규모·신뢰를 숫자로 증명할 때

파트너·언론사 이름이 가로로 무한 흐르는 텍스트 마퀴

▸ 제휴사·입점 채널·언론 보도를 끊김 없이 나열해 신뢰를 줄 때

중앙 정렬, 뉴트럴 미니멀. 배지 + 헤드라인 + 듀얼 CTA + 신뢰 지표.

▸ 브랜드 톤이 차분한 SaaS/도구 랜딩 최상단. 군더더기 없이 메시지에 집중시킬 때.

좌측 카피·CTA, 우측 매출 대시보드 카드. 클린 블루·둥근 모서리.

▸ 수치/성과를 즉시 보여주고 싶은 예약·매출 관리 서비스 랜딩. 신뢰와 활기를 동시에.

Linear/Vercel풍 다크 중앙 정렬. 미세 보더, 상태 배지, 3분할 지표 바.

▸ 기술/플랫폼 제품의 무게감 있는 첫 인상. 안정성·규모 수치를 절제된 톤으로 강조할 때.

미세한 글래스 패널과 정제된 보더로 신뢰감을 주는 풀폭 히어로

▸ 예약/주문 SaaS 첫 화면, 가입 전환이 핵심일 때

절제된 단색 그라데이션 배경에 대시보드 카드를 얹은 풀폭 히어로

▸ 매출/정산 분석 제품, 제품 미리보기를 함께 보여줄 때

좌측정렬 대형 타이포와 절제된 라인으로 매거진처럼 구성한 풀폭 히어로

▸ 브랜드 스토리/철학을 앞세우는 로컬 비즈니스, 카페·공방

링 스피너와 보조 텍스트로 구성한 절제된 로딩 인디케이터

▸ 결제 처리·데이터 저장 등 짧은 대기 상태를 알릴 때

세 개의 점이 순차로 차오르는 인라인 진행 표시

▸ AI 답변 생성·검색 결과 집계처럼 가벼운 진행 상태를 인라인으로 보여줄 때

제품 카드 레이아웃을 본뜬 셔머 스켈레톤 플레이스홀더

▸ 상품 목록·피드를 불러오는 동안 레이아웃 이동 없이 골격을 먼저 보여줄 때

클릭하면 하트가 채워지며 살짝 튀어오르는 좋아요 버튼

▸ 가게/메뉴 카드의 찜하기, 게시물 좋아요처럼 가벼운 호감 표시가 필요할 때

켜고 끌 때 손잡이가 부드럽게 미끄러지는 설정 스위치

▸ 알림 수신, 자동 정산, 공개 여부처럼 켜짐/꺼짐 설정을 즉시 바꿀 때

체크하면 초록 원 안에서 체크선이 그려지듯 차오르는 완료 표시

▸ 정산 완료, 발송 확인, 할 일 체크처럼 작업이 끝났음을 명확히 보여줄 때

느리게 흐르는 절제된 그라데이션 위에 히어로 카피를 얹은 배경

▸ 랜딩 히어로 섹션 배경에 정적이지 않은 미묘한 생동감이 필요할 때

옅은 도트 패턴이 천천히 흐르는 라이트 배경 위 기능 카드

▸ 기능 소개·특징 섹션에 정적인 흰 배경 대신 미세한 질감을 줄 때

가는 라인 그리드 위로 빛줄기가 가로지르는 다크 CTA 배경

▸ 전환 유도 CTA나 섹션 구분 배경에 기술적이고 정제된 무드가 필요할 때

스크롤 진입 시 카드가 아래에서 부드럽게 떠오르며 나타나는 페이드업 등장 효과 (데모는 무한 반복).

▸ 기능 소개, 가치 제안, 랜딩 섹션 첫 진입에서 콘텐츠를 차분하게 등장시키고 싶을 때.

목록 항목이 위에서 순차적으로 시차를 두고 하나씩 등장하는 스태거 애니메이션 (데모는 무한 반복).

▸ 체크리스트, 단계 안내, 혜택 나열처럼 여러 항목을 리듬감 있게 순서대로 보여줄 때.

숫자가 0에서 목표값까지 차오르는 순수 CSS 카운트업 지표 카드 (@property + counter, 데모는 무한 반복).

▸ 누적 거래액, 가입자 수, 평점 같은 성과 지표를 임팩트 있게 강조하고 싶을 때.

브랜드 컬러가 텍스트를 따라 부드럽게 흐르는 히어로 헤드라인

▸ 랜딩 페이지 첫 문장을 살아있게 보이게 할 때

커서가 깜빡이며 한 줄씩 타이핑되는 카피 데모

▸ 제품의 다양한 쓰임새를 한 줄로 순환 노출할 때

라벨 위로 광택이 주기적으로 스쳐 지나가는 프리미엄 배지

▸ 한정 혜택·신규 기능 라벨을 고급스럽게 강조할 때

단어가 아래에서 위로 차례차례 떠오르며 나타나는 헤드라인

▸ 핵심 문장을 단어 단위로 강조하며 등장시킬 때

마우스를 올리면 카드가 입체적으로 살짝 기울어지는 효과

▸ 서비스 핵심 기능·혜택을 한 카드씩 강조해 보여줄 때

호버 시 카드 테두리에 절제된 그라데이션 링이 차오르는 효과

▸ 어두운 배경에서 요금제·프리미엄 기능을 고급스럽게 강조할 때

호버 시 배경이 차오르고 화살표가 미끄러지는 정제된 CTA 버튼

▸ 가입·시작하기 등 핵심 행동을 유도하는 메인 버튼이 필요할 때

호버 시 썸네일 영역이 부드럽게 확대되며 오버레이가 떠오르는 카드

▸ 메뉴·상품·포트폴리오 등 시각 콘텐츠를 카드로 나열할 때

details/summary 기반, 클릭 시 chevron이 회전하며 답변이 부드럽게 펼쳐지는 단정한 FAQ.

▸ 랜딩 페이지 하단, 자주 묻는 질문 섹션. 한 번에 여러 개를 동시에 열어볼 수 있어야 할 때.

왼쪽 카테고리 탭(라디오)으로 주제를 고르면 오른쪽 패널이 전환되고, 각 패널 안에서 아코디언이 동작하는 2단 구조.

▸ 고객센터/도움말 센터처럼 질문이 카테고리별로 많을 때. 결제·배송·계정 등 그룹이 명확한 경우.

포커스 시 링이 떠오르고 추천 필터 칩이 따라오는 검색 입력

▸ 메뉴·상품 검색, 가게 찾기 등 목록 상단 검색 진입점이 필요할 때

완료·현재·대기 단계를 체크 아이콘과 연결선으로 보여주는 프로그레스

▸ 주문하기·신청서·온보딩처럼 다단계 흐름의 현재 위치를 알릴 때

아바타·이메일 헤더 + 아이콘 메뉴를 갖춘 계정 드롭다운

▸ 대시보드 우측 상단 사용자 메뉴, 계정 전환·설정·로그아웃 진입점

다중 컬럼 카테고리 패널이 펼쳐지는 내비게이션 메가메뉴

▸ 마케팅 사이트 상단 GNB, 기능·솔루션을 카테고리별로 한눈에 펼쳐 보여줄 때

checkbox hack로 JS 없이 열고 닫는 중앙 확인 다이얼로그

▸ 예약 취소, 메뉴 삭제 등 되돌릴 수 없는 동작을 한 번 더 확인받을 때

아래에서 슬라이드로 올라오는 모바일 바텀시트, checkbox로 제어

▸ 모바일에서 결제 수단 선택, 옵션 고르기처럼 하단 시트가 자연스러운 상황

좌우 화살표와 scroll-snap으로 부드럽게 넘기는 인기 메뉴 캐러셀

▸ 제품·메뉴·후기 카드를 가로로 훑어보게 할 때

가격대를 끌어서 좁히는 듀얼 핸들 느낌의 단일 범위 슬라이더

▸ 필터·예산 설정 등 수치 범위를 직관적으로 입력받을 때

토스 앱처럼 알약형 세그먼트 컨트롤로 메뉴 카테고리를 전환하는 탭

▸ 메뉴판, 상품 분류 등 항목 수가 2~4개로 적고 한 줄에 담길 때

라인 하단에 #0066ff 인디케이터가 붙는 언더라인 탭으로 리뷰 종류를 전환

▸ 리뷰/상세정보/문의 등 탭이 많거나 라벨이 길어 한 줄로 펼쳐 보여줄 때

월간/연간을 한 번에 전환하는 세그먼트 컨트롤, 연간 선택 시 할인 배지 노출

▸ 가격표 상단에서 결제 주기를 고를 때

항목별 켜기/끄기를 다루는 리스트형 스위치 토글, 체크 시 트랙 색과 손잡이 위치가 전환

▸ 마이페이지에서 알림·자동저장 같은 설정을 켜고 끌 때

우측 상단에서 슬라이드되는 성공/에러 토스트 두 종, 좌측 컬러 보더로 상태 구분

▸ 주문 접수·결제 실패 등 작업 결과를 잠깐 띄워 알릴 때

페이지 안에 자연스럽게 안착하는 인라인 알림 박스, 연한 배경 톤으로 본문과 구분

▸ 폼 상단·설정 화면에서 안내나 주의를 상시 노출할 때

히어로 뒤 흐르는 오로라 배경

▸ 배경을 고급스럽게

입자가 떠다니는 배경

▸ 테크/트렌디 무드

macOS 독(호버 확대) 메뉴

▸ 아이콘 메뉴를 멋지게

단어가 흐림→또렷 등장

▸ 히어로 제목 인상적 등장

글자 단위 stagger 등장

▸ 제목을 한 글자씩 살릴 때

글자 위 빛이 스치는 효과

▸ 강조 문구를 반짝이게