가이드 목록으로
입문
색상과 이미지
3색 규칙으로 톤 통일! 컬러 토큰, WCAG 대비 기준, 이미지 최적화, 아이콘 스타일까지 시각 요소를 정리합니다.
3
3색 규칙 — 컬러 역할표
배경 + 본문 + 포인트, 딱 3가지 색만 정하면 전체 톤이 통일돼요. 팔레트를 클릭해서 미리보기를 확인해보세요.
본문-배경 대비율
12.7:1WCAG AA 통과
바이브코딩
코드를 몰라도 나만의 웹사이트를 만들 수 있어요. AI에게 자연어로 요청하면 바로 결과물이 나옵니다.
배경색
#FFF8F0
본문색
#3D2B1F
포인트색
#E07A2F
바이브코딩 팁
AI에게 "배경색, 본문색, 포인트색 3가지만 정해서 전체 사이트에 일관되게 적용해줘"
톤 통일 전/후 비교
색상, 이미지, 아이콘의 톤이 통일되면 프로급으로 보여요. 비포/애프터를 비교해보세요.
기능 소개
AI가 알아서 만들어줘요
빠른 속도
3분이면 완성됩니다
쉬운 사용
코드 몰라도 OK
바이브코딩 팁
AI에게 "카드 3개의 배경색, 테두리, 아이콘 스타일을 모두 통일해줘"
이미지 비율과 최적화
비율을 통일하면 정돈된 느낌, WebP + lazy loading이면 빠른 로딩.
카드 제목 1
비율: 1:1
카드 제목 2
비율: 16:9
카드 제목 3
비율: 4:3
선택한 비율: 16:9
영문 이름Widescreen
Tailwindaspect-video
활용처히어로 배너, 유튜브 썸네일
이미지 최적화 체크리스트
- WebP 포맷으로 변환 (JPEG 대비 25~35% 절약)
- loading="lazy" 적용 (뷰포트 밖 이미지 지연 로드)
- srcset으로 해상도별 이미지 제공
- width/height 속성으로 레이아웃 시프트 방지
바이브코딩 팁
AI에게 "모든 카드 이미지의 비율을 16:9로 통일하고, WebP 포맷에 lazy loading 적용해줘"
아이콘 스타일 통일
선 두께와 둥글기가 같아야 한 세트로 보여요.
1.5px
1.5px
1.5px
1.5px
1.5px
바이브코딩 팁
AI에게 "아이콘은 모두 같은 라이브러리에서 가져오고, strokeWidth를 1.5로 통일해줘"
alt 텍스트 — 정보 vs 장식
정보 이미지는 구체적 alt, 장식 이미지는 빈 alt. 각 이미지가 어느 유형인지 맞춰보세요.
상품 사진
흰 배경 위에 놓인 노트북
히어로 배경
그라데이션 배경 이미지
매출 차트
막대 그래프로 표시된 월별 매출
구분선
섹션 사이 장식용 구분선
바이브코딩 팁
AI에게 "모든 img 태그에 alt 속성을 넣어줘. 장식용은 alt=""로, 정보용은 구체적으로"