배경 설정

오버레이

포인트:
배경 위에 겹치는 색상 레이어를 설정합니다. 사진/영상 위 텍스트 가독성 확보에 효과적입니다.

이 설정으로 달라지는 점:
배경 명암을 조절하여 텍스트 가독성이 개선됩니다.

조정 팁:
먼저 단색으로 농도를 맞추고, 필요할 때만 그라디언트로 확장하세요.

설정 항목

• 색상 / Gradient
• 불투명도
• 혼합 모드
• 초기화
• 반응형

패턴

포인트:
배경 패턴의 종류와 강도를 설정합니다.

이 설정으로 달라지는 점:
단색 배경보다 질감이 생겨 시각적 밀도를 높일 수 있습니다.

조정 팁:
본문 텍스트가 주인공이므로 패턴 대비는 낮게 유지하는 것이 안전합니다.

설정 항목

• 패턴 유형
• 패턴 색상
• 패턴 크기
• 패턴 불투명도
• 혼합 모드
• 반응형

이미지

포인트:
이미지/영상의 표시 방법을 설정합니다. Fit, 위치, 반복 설정에 따라 결과가 크게 달라집니다.

이 설정으로 달라지는 점:
같은 소스라도 연출력이 크게 달라집니다.

조정 팁:
Fit 결정 -> 위치 조정 -> 불투명도/오버레이 보정 순서로 작업하면 효율적입니다.

설정 항목

• 미디어 종류(이미지 / 영상)
• 이미지: 반복, 맞춤 방법, 회전 (deg), 불투명도
• 영상: Video URL (MP4 / YouTube / Vimeo), 적용
• 영상 표시: Video Fit, Video 위치 X, Video 위치 Y
• 포스터: Poster URL, Remove Poster, Poster Fit, Poster 위치 X/Y
• 반응형

이미지 선택 UI(이미지)

• 미디어 유형를 이미지로 두면 이미지 소스 선택 탭이 표시됩니다.
• 소스 탭: 미디어 라이브러리 / Search / 이미지 선택 / 이미지 URL

이미지: Search

• 벤더 전환(Openverse / Unsplash / Pexels / Pixabay)과 검색 키워드로 후보를 좁힙니다.
• Openverse는 API 키 없이 사용 가능하며, 나머지 벤더는 API 설정이 필요합니다.

이미지: 미디어 라이브러리

• 카테고리(전체/자연/라이프스타일 등)로 필터링 후 선택합니다.
• 과도하게 큰 이미지는 성능 저하를 유발할 수 있으므로 최적화 이미지를 권장합니다.

이미지: 이미지 URL

• https://... 형식 URL을 입력해 적용합니다.
• 404/CORS 문제가 있으면 표시되지 않습니다.

Video 선택 UI(Video)

• 미디어 유형를 영상으로 두면 영상 URL, 검색, 포스터 설정이 표시됩니다.
• 모바일 자동재생 제한을 고려해 포스터 설정을 권장합니다.

PRO 기능(영상):
배경 영상 기능은 ZenBlocks PRO에서 사용할 수 있습니다.

색상

포인트:
배경의 베이스 색상 레이어를 설정합니다.

이 설정으로 달라지는 점:
최종 인상은 색상, 오버레이, 텍스트 조합으로 결정됩니다.

조정 팁:
단독으로 예쁜 색보다 텍스트 가독성이 확보되는 조합을 우선하세요.

설정 항목

• 색상 / Gradient
• Alpha
• 그라디언트 사용 전환
• 초기화
• 반응형

트랜지션

포인트:
기본 상태에서 Hover 상태로 전환되는 배경 변화 속도를 설정합니다.

이 설정으로 달라지는 점:
배경 변화의 반응성과 연출감이 달라집니다.

조정 팁:
기본은 Duration 200~350ms로 두고, 필요한 곳만 Delay를 추가하세요.

설정 항목

• 재생 시간 (ms)
• 지연 시간 (ms)
• 이징
• 사용자 정의 값
• 초기화

이 트랜지션은 오버레이/패턴/이미지/색상의 Hover 전환에 적용됩니다. 스타일 패널 트랜지션과는 독립적으로 동작합니다.

썸네일/밴드와 차이:
배경 설정은 버튼 전체 하단 레이어입니다. 썸네일/밴드에 있는 크기·보더·둥글기·위치·Skew 같은 개별 장식 제어는 배경 패널에 없습니다.