"이런 디자인 만들어줘"라고 하면 AI는 평범한 결과를 낸다. 구체적인 CSS 속성, 색상 값, 인터랙션 동작까지 명시하면 얘기가 달라진다. Claude, ChatGPT, Cursor 어디에서든 바로 붙여넣을 수 있도록 실제 동작하는 프롬프트 20가지를 카테고리별로 정리했다.
각 항목은 미리보기, 복사 가능한 프롬프트, 간단한 사용 팁으로 구성했다. 미리보기는 실제 CSS로 구현된 컴포넌트라 브라우저에서 바로 확인할 수 있다. 프롬프트는 복사 버튼으로 가져간 뒤 AI 도구에 그대로 넣으면 된다. 필요에 따라 색상, 텍스트, 크기만 수정해서 쓰면 각자 프로젝트에 맞게 변형할 수 있다.
01. Glassmorphism 카드
반투명 유리 질감 카드. 배경 블러 효과와 테두리 광택이 특징이다. 그라데이션 배경 위에 올렸을 때 효과가 극대화된다. 프로필 카드, SaaS 랜딩 섹션에 자주 쓰인다.
K
김지수
프론트엔드 개발자
React & Tailwind 전문
위 카드에 마우스를 올리면 배경 블러 효과를 확인할 수 있다.
다음 조건으로 Glassmorphism 스타일 프로필 카드 HTML + CSS를 작성해줘.
요구사항:
- 배경: linear-gradient(135deg, #667eea, #764ba2) 전체 화면
- 카드: backdrop-filter: blur(16px), background: rgba(255,255,255,0.15)
- 카드 테두리: 1px solid rgba(255,255,255,0.3), border-radius: 20px
- box-shadow: 0 8px 32px rgba(0,0,0,0.25)
- 카드 내용: 원형 아바타(이니셜), 이름, 직책, 태그 2개
- 텍스트 전체 흰색, 보조 텍스트 opacity: 0.75
- hover 시 카드가 살짝 위로 올라오는 효과 (translateY + box-shadow 강화)
- 기술 스택: 순수 HTML + CSS, 외부 라이브러리 없음
팁: -webkit-backdrop-filter도 함께 넣어달라고 명시하면 Safari 호환성이 확보된다.
02. Neumorphism 카드
밝은 회색 배경 위에 밝은 그림자와 어두운 그림자를 동시에 줘서 볼록/오목 입체 느낌을 만드는 방식이다. 소프트 UI라고도 불린다. 버튼을 누를 때 inset 그림자로 눌림 효과도 넣을 수 있다.
설정 패널
알림 및 개인정보 설정
다음 조건으로 Neumorphism(소프트 UI) 카드 + 버튼 HTML + CSS를 작성해줘.
요구사항:
- 페이지 배경: #e0e5ec (밝은 회청색)
- 카드 배경: 동일(#e0e5ec), border-radius: 20px
- 카드 그림자: box-shadow: 9px 9px 18px #b8bec7, -9px -9px 18px #ffffff
- 카드 내부: 타이틀, 설명 텍스트, 버튼 1개
- 버튼도 동일 Neumorphism 그림자 적용
- 버튼 :active 시 inset 그림자(눌림 효과): box-shadow: inset 4px 4px 8px #b8bec7, inset -4px -4px 8px #ffffff
- 텍스트 색: #4a5568, 버튼 텍스트 색: #5b6b8a
- 기술 스택: 순수 HTML + CSS
팁: 배경색이 흰색이나 너무 어두운 색이면 Neumorphism 효과가 사라진다. 밝은 회색 계열 #e0~#f0 범위에서 잘 작동한다.
03. 3D 호버 플립 카드
카드 앞면과 뒷면이 hover 시 Y축으로 회전하며 뒤집힌다. CSS transform-style: preserve-3d와 perspective를 조합해 구현한다. 포트폴리오 항목, 서비스 소개 카드에 자주 등장한다.
앞면
마우스를 올려보세요
뒷면
자세한 정보가 여기에
hover 시 카드가 뒤집힙니다
다음 조건으로 hover 시 3D 뒤집히는 카드 HTML + CSS를 작성해줘.
요구사항:
- 카드 크기: 240px × 160px
- perspective: 600px, transform-style: preserve-3d
- 앞면: linear-gradient(135deg, #4facfe, #00f2fe), 카드 타이틀 + 아이콘
- 뒷면: linear-gradient(135deg, #f093fb, #f5576c), 설명 텍스트 + 버튼
- hover 시 rotateY(180deg), transition: transform 0.6s ease
- backface-visibility: hidden 양쪽 모두 적용
- 앞/뒷면 텍스트 모두 흰색
- 카드 전체 border-radius: 16px
- 기술 스택: 순수 HTML + CSS
팁: Safari에서 -webkit-backface-visibility: hidden을 추가해달라고 명시하지 않으면 뒷면이 비쳐 보이는 버그가 발생한다.
04. 3단 프라이싱 카드
SaaS 서비스의 구독 플랜 선택 UI다. 가운데 '추천' 카드를 scale로 살짝 크게 만들고 그라데이션으로 강조하는 것이 정석이다. hover 시 다른 카드도 살짝 위로 뜨게 처리한다.
Free
$0
개인 사용자
추천
Pro
$19
팀 5명까지
Business
$49
무제한
다음 조건으로 SaaS 3단 가격 카드(Pricing Card) HTML + CSS를 작성해줘.
요구사항:
- 3개 플랜: Free($0), Pro($19/월), Business($49/월)
- 가운데 Pro 카드: scale(1.06) 확대, 그라데이션 배경(#667eea → #764ba2), 흰색 텍스트
- Pro 카드 상단에 "추천" 배지(노란색 pill) 위치
- 일반 카드: 흰색 배경, #e5e7eb 테두리, hover 시 translateY(-4px) + box-shadow
- 각 카드: 플랜명, 가격(큰 폰트), 한 줄 설명, 기능 목록(3개), CTA 버튼
- CTA 버튼: Pro는 그라데이션, 나머지는 outline 스타일
- Flexbox로 가운데 정렬, 반응형(모바일에서 세로 나열)
- 기술 스택: 순수 HTML + CSS
팁: "각 기능 앞에 체크 표시를 넣고 Free 플랜에서 사용 불가한 기능은 회색 처리해줘"를 추가하면 더 완성도 높은 결과가 나온다.
05. 그라데이션 글로우 버튼
hover 시 box-shadow가 퍼지며 빛나는 효과. 퍼플-블루 그라데이션 계열이 가장 많이 쓰이고, hover 시 translateY로 살짝 뜨는 것과 함께 처리하면 자연스럽다.
다음 조건으로 Gradient Glow CTA 버튼 HTML + CSS를 작성해줘.
요구사항:
- 배경: linear-gradient(90deg, #667eea, #764ba2)
- 기본 상태: box-shadow: 0 4px 15px rgba(102,126,234,0.4)
- hover 시: box-shadow: 0 8px 30px rgba(102,126,234,0.7), translateY(-2px)
- border-radius: 50px (완전 pill 형태)
- padding: 12px 32px, 흰색 bold 텍스트
- transition: box-shadow 0.3s ease, transform 0.2s ease
- :active 시 translateY(0) + box-shadow 약하게
- 기술 스택: 순수 HTML + CSS
팁: "색상을 CSS 변수로 정의해줘"를 추가하면 나중에 테마 변경이 쉬워진다.
06. 네온 글로우 버튼 (다크 모드)
어두운 배경에 text-shadow와 box-shadow를 겹쳐서 형광 빛이 나는 버튼이다. 사이버펑크, 게임 UI, 다크 테마 대시보드에서 자주 사용된다. 기본은 cyan 계열이 대표적이다.
다음 조건으로 Neon Glow 버튼 HTML + CSS를 작성해줘.
요구사항:
- 페이지 배경: #0a0a1a (매우 어두운 네이비)
- 버튼 배경: transparent, 테두리: 2px solid #0ff
- 텍스트: #0ff, letter-spacing: 2px, text-transform: uppercase
- 기본 text-shadow: 0 0 8px #0ff
- 기본 box-shadow: 0 0 12px rgba(0,255,255,0.3), inset 0 0 12px rgba(0,255,255,0.05)
- hover 시: box-shadow: 0 0 25px rgba(0,255,255,0.6), inset 0 0 20px rgba(0,255,255,0.1)
- hover 시 text-shadow 강화
- 버튼 border-radius: 4px (각진 형태)
- transition: all 0.3s ease
- 기술 스택: 순수 HTML + CSS
팁: "색상을 보라색(#a855f7) 또는 초록색(#4ade80)으로 바꿔줘"처럼 색상만 바꿔도 분위기가 완전히 달라진다.
07. 클릭 리플 버튼
버튼을 클릭하면 클릭 지점에서 파동이 퍼지는 효과다. Material Design에서 시작된 패턴으로 지금도 널리 쓰인다. JS로 클릭 좌표를 계산해 CSS 애니메이션을 트리거한다. 아래 미리보기를 직접 클릭해보자.
다음 조건으로 클릭 시 물결(Ripple) 효과가 나는 버튼 HTML + CSS + JS를 작성해줘.
요구사항:
- 버튼: background #3b82f6, 흰색 텍스트, border-radius: 8px
- 클릭 시 클릭한 위치를 기준으로 흰색 원이 퍼지는 애니메이션
- 리플 요소: position absolute, border-radius 50%, background rgba(255,255,255,0.4)
- CSS @keyframes: transform scale(0→4) + opacity(1→0), duration 0.6s
- JS: 클릭 이벤트에서 e.clientX/Y와 버튼 getBoundingClientRect()로 정확한 좌표 계산
- 버튼 overflow: hidden으로 리플이 버튼 밖으로 나가지 않도록
- 리플 요소는 애니메이션 후 자동 제거 (addEventListener 'animationend')
- 기술 스택: 순수 HTML + CSS + vanilla JS
팁: "모든 .btn 클래스 버튼에 자동 적용되도록 querySelectorAll로 처리해줘"를 추가하면 재사용 가능한 유틸리티 코드가 나온다.
08. iOS 스타일 토글 스위치
HTML checkbox를 CSS로 완전히 커스텀하는 방식이다. JS 없이 CSS :checked 가상 클래스만으로 구현 가능하다. 설정 화면, 대시보드 옵션 토글에 필수적으로 등장한다.
알림 활성화
다크 모드
자동 저장
다음 조건으로 iOS 스타일 토글 스위치 컴포넌트 HTML + CSS를 작성해줘.
요구사항:
- HTML checkbox를 완전히 CSS로 커스텀 (input 자체는 opacity:0, 크기:0)
- 토글 트랙: 44px × 24px, border-radius: 24px, 기본색 #d1d5db
- 토글 썸: 18px × 18px, 흰색 원, box-shadow로 살짝 그림자
- :checked 시 트랙 색상 #3b82f6으로 전환, 썸 translateX(20px)
- transition: 0.3s ease 모든 요소
- 토글 + 레이블 텍스트를 flex로 나란히 배치
- 3개 항목 세로 나열 예시 포함
- JS 없이 순수 CSS만으로 구현
- 기술 스택: 순수 HTML + CSS
팁: "토글 색상을 초록(#22c55e)으로 바꾸고 비활성 시 빨간색(#ef4444)으로 해줘"처럼 의미 부여도 가능하다.
09. 다크 그라데이션 히어로 섹션
랜딩 페이지 최상단 전체 화면 섹션이다. 어두운 그라데이션 배경에 헤드라인, 서브텍스트, CTA 버튼 2개(메인 + 고스트)를 배치하는 것이 일반적인 패턴이다.
AI로 더 빠르게 만들고, 더 스마트하게 성장하세요
복잡한 워크플로우를 자동화하고 팀 생산성을 3배 높이는 플랫폼
다음 조건으로 SaaS 랜딩 페이지 히어로 섹션 HTML + CSS를 작성해줘.
요구사항:
- 배경: linear-gradient(135deg, #1e3a5f, #1a1a2e, #16213e)
- 최소 높이: 100vh, Flexbox 중앙 정렬
- 헤드라인: 2줄, 큰 폰트(3rem), 흰색, font-weight 800
- 헤드라인 일부에 그라데이션 텍스트 강조(-webkit-background-clip: text)
- 서브텍스트: 1줄, 연한 흰색 opacity 0.7, 최대 너비 560px
- CTA 버튼 2개: 그라데이션 채움 버튼 + 투명 아웃라인 버튼
- 배경에 미세한 원형 그라데이션 포인트 추가 (radial-gradient overlay)
- 반응형: 모바일에서 텍스트 크기 축소, 버튼 세로 나열
- 기술 스택: 순수 HTML + CSS
팁: "배경에 별처럼 보이는 작은 점들을 CSS로 흩뿌려줘"를 추가하면 우주 느낌의 히어로가 완성된다.
10. Glassmorphism 네비게이션 바
스크롤 시 배경이 흐릿하게 보이는 투명 Nav다. position: fixed와 backdrop-filter를 조합해 만든다. pill 형태로 만들면 모던한 느낌이 강해진다.
Studio
제품가격문서
시작하기
배경 콘텐츠 영역
다음 조건으로 Glassmorphism 스타일 상단 네비게이션 바 HTML + CSS를 작성해줘.
요구사항:
- position: fixed, top: 16px, left/right: 16px (좌우 여백으로 pill 형태처럼)
- backdrop-filter: blur(12px), -webkit-backdrop-filter: blur(12px)
- background: rgba(255,255,255,0.15), border: 1px solid rgba(255,255,255,0.4)
- border-radius: 50px (완전 둥근 pill nav)
- 내부: 로고(왼쪽) + 메뉴 링크 3개(가운데) + CTA 버튼(오른쪽)
- CTA 버튼: 흰색 배경, 브랜드 컬러 텍스트, border-radius: 50px
- 스크롤 시 background를 rgba(255,255,255,0.25)로 진하게 하는 JS 추가
- 모바일에서 햄버거 메뉴로 전환
- 기술 스택: HTML + CSS + vanilla JS
팁: "현재 페이지 링크에 active 스타일(흰색 배경 pill)을 추가해줘"를 넣으면 더 완성도가 높아진다.
11. 무한 애니메이션 그라데이션 배경
배경색이 부드럽게 계속 변하는 살아 숨쉬는 배경이다. background-size: 400% 400%와 @keyframes로 background-position을 이동시켜 구현한다.
살아있는 배경
색상이 끊임없이 부드럽게 변합니다
다음 조건으로 무한 반복 그라데이션 애니메이션 배경 HTML + CSS를 작성해줘.
요구사항:
- background: linear-gradient(270deg, #ee7752, #e73c7e, #23a6d5, #23d5ab)
- background-size: 400% 400%
- @keyframes: background-position을 0%→100%→0% 이동 (6초 infinite ease)
- 히어로 섹션 형태: 전체 화면, 가운데 텍스트(제목 + 설명)
- 텍스트: 흰색, 텍스트에 살짝 text-shadow 추가
- 선택: 마우스 위치에 따라 배경이 약간 기울어지는 효과(JS mousemove)
- 기술 스택: 순수 HTML + CSS (JS 선택 사항)
팁: "속도를 느리게(12s) 하고 색상을 파스텔 톤으로 바꿔줘"를 추가하면 부드럽고 차분한 분위기가 된다.
12. 벤토 그리드(Bento Grid) 레이아웃
Apple이 자주 쓰고 Vercel, Linear 같은 서비스가 대중화한 비대칭 그리드 레이아웃이다. CSS Grid의 grid-column: span N으로 다양한 크기의 카드를 배치한다.
핵심 기능
AI 기반 자동화 워크플로우
99.9% 업타임
SLA 보장
다크 모드
지원
빠른 속도
응답 200ms 이하
글로벌
32개국 CDN
다음 조건으로 Bento Grid 스타일 피처 쇼케이스 섹션 HTML + CSS를 작성해줘.
요구사항:
- CSS Grid: grid-template-columns: repeat(3, 1fr), gap: 12px
- 카드 6개: 첫 번째 카드는 grid-column: span 2, 나머지 1열씩 배치
- 각 카드 border-radius: 16px, padding: 24px
- 각 카드 배경색 다르게: 그라데이션, 파스텔, 다크 등 다채롭게
- 카드 내부: 아이콘(텍스트 또는 유니코드), 타이틀, 짧은 설명
- hover 시 각 카드 scale(1.02) + box-shadow 강화
- 큰 카드(span 2)에는 이미지나 그래프 영역 placeholder 포함
- 반응형: 모바일에서 1열, 태블릿에서 2열
- 기술 스택: 순수 HTML + CSS
placeholder가 사라지는 대신 레이블이 위로 올라가며 작아지는 효과다. CSS :focus와 :not(:placeholder-shown)을 조합해 JS 없이 구현한다. 아래 입력칸을 직접 클릭해보자.
다음 조건으로 Floating Label 스타일 입력 폼 HTML + CSS를 작성해줘.
요구사항:
- input: padding 16px 14px 6px(위쪽 여백 크게), border: 2px solid #e5e7eb
- border-radius: 10px, :focus 시 border-color #3b82f6으로 전환
- label: position absolute, 기본 위치는 input 세로 가운데(top:50% translateY(-50%))
- :focus 또는 :not(:placeholder-shown) 시 label이 위로 이동(top:0, font-size 축소, 색상 #3b82f6)
- label transition: all 0.2s ease
- input placeholder는 공백 ' '으로 설정(CSS 선택자를 위해 필요)
- 폼 필드 3개: 이름, 이메일, 비밀번호
- 하단에 제출 버튼 포함
- 기술 스택: 순수 HTML + CSS, JS 없음
팁: "비밀번호 필드에 보기/숨기기 토글 버튼을 오른쪽에 넣어줘"를 추가하면 완성도가 높아진다.
14. 토스트 알림 스택
성공, 오류, 정보 세 종류의 슬라이드 인 알림이다. 왼쪽에 컬러 세로 선(border-left)과 아이콘을 조합해 직관적으로 구분한다. CSS animation만으로 슬라이드 인 효과를 준다.
✓
저장 완료
변경사항이 자동 저장됐습니다.
✕
오류 발생
네트워크 연결을 확인해주세요.
ⓘ
업데이트 안내
새 버전이 준비됐습니다.
다음 조건으로 토스트 알림(Toast Notification) 시스템 HTML + CSS + JS를 작성해줘.
요구사항:
- 알림 3종: success(초록), error(빨강), info(파랑)
- 각 알림: border-left 3px 컬러 라인, 아이콘, 제목, 내용 텍스트
- 배경색: 각각 #f0fdf4, #fef2f2, #eff6ff (연한 계열)
- 위치: 화면 우측 하단 fixed, 여러 개 쌓이면 세로 스택
- 슬라이드 인: translateX(100%) → 0, opacity 0 → 1, duration 0.4s ease
- 3초 후 자동 사라짐 + 슬라이드 아웃 애니메이션
- X 닫기 버튼 포함
- showToast(type, title, message) 함수로 호출 가능하게
- 기술 스택: HTML + CSS + vanilla JS
팁: "동시에 최대 3개까지만 표시하고 넘치면 가장 오래된 것부터 제거해줘"를 추가하면 실제 서비스 수준의 코드가 나온다.
15. 별점 평점 컴포넌트
hover 시 별이 노란색으로 채워지고, 클릭 시 그 상태가 유지된다. CSS만으로도 구현 가능하지만 현재 평점 텍스트 표시는 JS가 필요하다. 아래 별을 클릭해보자.
★ ★ ★ ★ ★
3 / 5 — 보통이에요
다음 조건으로 인터랙티브 별점 평점 컴포넌트 HTML + CSS + JS를 작성해줘.
요구사항:
- 별 5개, 기본 색상 #d1d5db(회색)
- hover 시: 해당 별과 그 이전 별 모두 #f59e0b(노란색)로 변경
- 클릭 시: 선택한 점수 상태 저장, 색상 유지
- hover 벗어날 때: 선택된 점수까지는 노란색, 나머지 회색 복원
- 별 hover 시 scale(1.15) 애니메이션
- 별 아래에 "X / 5 — [텍스트]" 형태 평가 문구 표시
(1점: 별로예요, 2점: 아쉬워요, 3점: 보통이에요, 4점: 좋아요, 5점: 최고예요)
- 반환값: 현재 선택 점수를 외부에서 접근 가능하게
- 기술 스택: HTML + CSS + vanilla JS
팁: "반별(0.5점) 단위 선택도 지원해줘"를 추가하면 훨씬 세밀한 평점 UI가 된다.
16. 드래그 앤 드롭 파일 업로드 존
파일을 드래그해서 놓거나 클릭해서 선택하는 업로드 영역이다. 파일이 드래그 오버될 때 시각적으로 강조되고, 선택된 파일명을 목록으로 보여준다.
⇧
여기에 파일을 드래그하거나 클릭해서 선택하세요
PNG, JPG, PDF (최대 10MB)
다음 조건으로 드래그 앤 드롭 파일 업로드 컴포넌트 HTML + CSS + JS를 작성해줘.
요구사항:
- 업로드 존: 점선 테두리(border: 2px dashed #93c5fd), border-radius: 12px
- 기본 배경: #eff6ff, hover/dragover 시 #dbeafe로 전환
- 클릭 시 숨겨진 input[type=file] 클릭 트리거
- dragover 시 테두리 색 #3b82f6, 배경 진하게
- drop 시 파일 수락, dragover 스타일 해제
- 허용 파일: PNG, JPG, PDF, 최대 10MB 검사
- 파일 선택 후: 존 아래에 파일 이름 + 크기 목록 표시
- 각 파일 항목에 X 버튼으로 제거 가능
- 파일 크기 초과 시 빨간색 경고 메시지
- 기술 스택: HTML + CSS + vanilla JS
팁: "이미지 파일은 미리보기 썸네일도 함께 보여줘"를 추가하면 사용자 경험이 크게 향상된다.
17. CSS 로딩 스피너 4종
프레임워크 없이 순수 CSS만으로 만드는 네 가지 로딩 인디케이터다. 원형 회전, 점 바운스, 펄스, 바 형태가 각각 다른 분위기를 낸다. 스택이나 프로젝트 톤에 맞게 골라 쓸 수 있다.
Rotate
Bounce
Pulse
Bar
다음 조건으로 CSS 로딩 스피너 4가지 HTML + CSS를 작성해줘.
1. Rotate 스피너: 36px 원, 상단 테두리만 컬러(#3b82f6), 나머지 #e5e7eb
animation: rotate 360deg, 0.8s linear infinite
2. Bounce 점 3개: 8px 원 3개, 색상 #8b5cf6
animation: scale(0.6→1→0.6) + opacity, delay 0.2s 간격, 1.2s ease-in-out infinite
3. Pulse 원: 34px 원, 색상 #f43f5e
animation: scale(0.7→1) + opacity(0.5→1), 1s ease-in-out infinite
4. Bar 스피너: 5px 너비 막대 4개, 색상 #10b981
animation: 높이 8px→28px, delay 0.15s 간격, 1s ease-in-out infinite
전체 요구사항:
- 기술 스택: 순수 HTML + CSS, @keyframes 사용
- 각 스피너를 flex 행으로 나란히 배치, 이름 레이블 포함
팁: "버튼 클릭 시 로딩 스피너가 나타나고 2초 후 완료 체크로 바뀌는 예시도 추가해줘"를 넣으면 실제 사용 패턴을 이해할 수 있다.
18. 스켈레톤 스크린 로딩
콘텐츠가 로드되기 전 회색 박스로 레이아웃을 미리 보여주는 방식이다. 전통적인 스피너보다 체감 속도가 빠르게 느껴진다. shimmer 애니메이션으로 빛이 흐르는 효과를 준다.
다음 조건으로 Skeleton Screen 로딩 플레이스홀더 HTML + CSS를 작성해줘.
요구사항:
- 스켈레톤 요소: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)
- background-size: 200% 100%, animation: background-position 오른쪽으로 이동 1.5s infinite (shimmer)
- 카드 형태 2가지:
1. 이미지 썸네일(상단) + 텍스트 라인 3개
2. 원형 아바타(좌측) + 텍스트 라인 3개
- 텍스트 라인: 높이 10px, 너비 80%/60%/40% (자연스러운 계단식)
- 실제 콘텐츠 로드 완료 시 스켈레톤을 숨기고 실제 데이터 표시하는 JS 포함
(setTimeout 2000ms으로 시뮬레이션)
- 기술 스택: HTML + CSS + vanilla JS
채워지는 바 형태로 진행 상태, 기술 스택 숙련도, 목표 달성률 등을 시각화한다. 그라데이션을 적용하고 CSS 애니메이션으로 부드럽게 채워지는 효과를 준다.
React / TypeScript85%
Node.js / Express67%
Python / FastAPI42%
다음 조건으로 그라데이션 스킬 프로그레스 바 HTML + CSS를 작성해줘.
요구사항:
- 프로그레스 항목 4개 (기술명 + 퍼센트 값 자유롭게 설정)
- 트랙: background #e5e7eb, height 8px, border-radius 50px
- 채움 바: 각각 다른 그라데이션 (파랑-보라 / 초록 / 주황-빨강 등)
- border-radius: 50px (pill 형태)
- @keyframes: 0% width에서 목표 width로 확장, 1.5s ease-out
- 레이블: flex space-between으로 기술명(왼쪽) + 퍼센트(오른쪽)
- 스크롤 시 화면에 들어올 때 애니메이션 실행 (Intersection Observer 사용)
- 기술 스택: HTML + CSS + vanilla JS
팁: "채움 바 위에 퍼센트 숫자가 바와 함께 올라가는 카운팅 애니메이션도 추가해줘"를 넣으면 포트폴리오에서 시선을 잡는다.
20. 타이핑 텍스트 애니메이션
텍스트가 한 글자씩 타이핑되는 효과다. 히어로 섹션 서브타이틀, 터미널 느낌의 UI에 자주 쓰인다. 여러 문장을 배열로 넣어 순환하면 더 풍부해진다.
저는
다음 조건으로 타이핑 텍스트 애니메이션 HTML + CSS + JS를 작성해줘.
요구사항:
- 문장 배열: ["프론트엔드 개발자입니다.", "UI/UX를 좋아합니다.", "오픈소스를 만듭니다."] (자유 변경)
- 타이핑: 한 글자씩 append, 60ms 간격
- 지우기: 한 글자씩 delete, 40ms 간격
- 각 문장 표시 후 1500ms 대기 후 지우기 시작
- 배열을 순환하여 무한 반복
- 커서: 세로 막대(|) 또는 실제 커서 모양, blink 1s step-end infinite
- 배경: 어두운 다크 테마(#0f172a), 텍스트: 하늘색(#38bdf8)
- 텍스트 위에 작은 라벨("저는") 고정 표시
- 기술 스택: HTML + CSS + vanilla JS
프롬프트를 쓸 때 한 가지 원칙이 있다. "만들어줘"보다 "어떤 CSS 속성을, 어떤 수치로, 어떤 상황에서 쓰는지"를 명시할수록 결과가 예측 가능해진다. 위 프롬프트들은 모두 그 원칙을 따랐다. 색상 값, 트랜지션 타이밍, 상태별 동작을 구체적으로 넣은 것이 핵심이다.
실제로 써보면 Claude나 ChatGPT가 프롬프트에서 명시하지 않은 부분은 알아서 채워준다. 프롬프트는 출력의 방향을 잡는 도구이지, 완전한 스펙 문서가 아니어도 된다. 결과물을 받아본 뒤 "이 부분은 Tailwind CSS로 바꿔줘", "반응형을 추가해줘", "다크 모드를 지원하게 해줘" 같은 후속 요청으로 정제해나가면 최종 코드 품질이 높아진다. 위 20가지 패턴이 매번 밑그림부터 그리는 시간을 줄이는 데 도움이 됐으면 한다.
