Kadence 스킨사용 이미지 올리기| "Img (Adv)" vs "Img" 차이점과 언제 어떤 걸 사용할까?

워드프레스로 블러그 글을 쓸때 Kadence 스킨을 사용하시는 분들을 위한 정보입니다. Kadence 블록에서 이미지 삽입 시 "Img"와 "Img (Adv)"가 보인다면, 이는 Kadence Blocks의 기본 이미지 블록과 고급 이미지 블록(Advanced Image Block)의 차이를 의미해요. 차이점과 사용 시나리오를 아래에 정리했어요.

차이점

• Img (기본 이미지 블록):
  • 기능: 간단한 이미지 삽입에 초점. 이미지 URL, 대체 텍스트(alt text), 기본 크기/위치 조정만 가능.
  • 설정 옵션:
    • 이미지 소스 선택 (미디어 라이브러리/Optimole).
    • 크기(폭/높이), 정렬(좌/중/우), 링크 추가.
    • 간단한 스타일(예: 테두리, 그림자) 기본 제공.
  • 용도: 간단한 정적 이미지(예: 블로그 포스트의 단일 사진, 로고) 삽입에 적합.
  • 장점: 가볍고, 설정이 간단해서 성능에 영향 적음.
  • 단점: 애니메이션, 레이아웃 조정, 고급 효과 불가.
• Img (Adv) (고급 이미지 블록):
  • 기능: 더 많은 커스터마이징 옵션 제공. 이미지에 동적 효과나 복잡한 레이아웃을 적용 가능.
  • 설정 옵션:
    • 이미지 크기/위치 조정 (고급 비율, 크롭).
    • 애니메이션(페이드인, 슬라이드 등).
    • 레이어 효과(오버레이, 그림자, 테두리 스타일).
    • 캐러셀/갤러리 모드 (여러 이미지 묶기).
    • 모바일 반응형 설정.
  • 용도: 홈페이지 배너, 슬라이더, 갤러리, 또는 디자인적으로 강조하고 싶은 이미지에 적합 (예: 메인 대표 이미지 6개).
  • 장점: 유연성과 시각적 매력 증대.
  • 단점: JS/CSS 추가로 인해 TBT에 약간의 부하 (특히 애니메이션 사용 시).

언제 어떤 걸 사용하는 게 나은가?

• Img (기본) 사용 시:
  • 추천 상황:
    • 간단한 이미지 삽입 (예: 포스트 내 단일 사진, 아이콘).
    • 성능 최적화가 중요한 경우 (TBT 240ms를 더 줄이고 싶을 때).
    • 디자인 변경이 적고, 빠른 로딩이 우선.
  • 예시: 블로그 글에 첨부하는 1~2장 이미지, 사이드바 로고.
• Img (Adv) 사용 시:
  • 추천 상황:
    • 복잡한 레이아웃 필요 (예: 홈페이지에 6개 대표 이미지 슬라이더).
    • 애니메이션이나 오버레이로 시각적 효과를 주고 싶을 때.
    • 모바일/데스크톱에서 다른 스타일 적용 필요.
  • 예시: 메인 배너 이미지, 제품 갤러리, 동적 슬라이드 쇼.
  • 주의: TBT에 영향을 줄 수 있으니, Optimole로 최적화된 이미지를 사용하고, 애니메이션은 최소화(예: fade만 사용)하세요. Chrome DevTools로 성능 점검 추천.

어떨 때 "Adv"가 더 좋은가?

• 홈페이지에서 메인 대표 이미지 여러개를 슬라이더나 캐러셀로 보여줄 때 (예: Kadence Skins에서 커스터마이징).
• 사용자가 이미지에 클릭 이벤트(링크)나 호버 효과를 추가하고 싶을 때.
• 브랜드 이미지를 강조하거나, 고급 레이아웃(예: 오버레이 텍스트) 필요 시.

결론 및 추천

• 현재 상황 (TBT 240ms, 6개 이미지): 처음엔 "Img"로 시작해서 성능을 점검한 후, 필요하면 "Img (Adv)"로 전환하세요. 6개 이미지가 많으니, "Img (Adv)"로 슬라이더를 만들 경우, Optimole 클라우드 업로드와 함께 loading="lazy"를 추가해 부하를 줄이는 게 중요합니다.
• 최적화 팁: "Img (Adv)" 사용 시, Kadence 설정에서 "Lazy Load Images"를 활성화하고, 불필요한 애니메이션은 꺼두세요.