이 크롬 확장 프로그램은 MD, 퍼블리셔, 디자이너를 위한 도구 모음입니다. 특히 카페24 사이트 운영 시 유용한 기능들을 제공합니다.
크롬 확장 프로그램 사용 예시 (클릭하여 확대)
크롬 확장 프로그램을 설치하는 방법을 안내합니다.
방식 2를 선택하신 경우 아래 단계를 따라 설치하세요.
크롬 브라우저에서 chrome://extensions/ 주소로 이동합니다. (클릭하여 복사)
우측 상단의 "개발자 모드" 토글을 활성화합니다.
"압축해제된 확장 프로그램을 로드" 버튼을 클릭하고 확장 프로그램 폴더를 선택합니다.
확장 프로그램 목록에서 설치된 항목을 확인하고,
주소창 우측의 퍼즐 아이콘 🧩을 클릭하여 고정해두면 더 편하게 사용할 수 있습니다.
확장 프로그램이 성공적으로 설치되면 브라우저 툴바에 아이콘이 표시됩니다.
Cafe24 쇼핑몰 개발을 위한 핵심 기능들을 소개합니다.
Cafe24 쇼핑몰의 모듈 구조를 시각적으로 확인할 수 있는 기능입니다.
⚠️ 주의사항: 이 기능은 Cafe24 쇼핑몰 사이트에서만 정상 작동합니다.
상품 이미지의 파일명을 표시하고 복사할 수 있는 기능입니다.
상품의 고유 번호를 표시하고 복사할 수 있는 기능입니다.
id="anchorBoxId_숫자" 속성에서 추출class="anchorBoxId_숫자" 클래스에서 추출실시간으로 요소의 스타일을 확인하고 조정할 수 있는 강력한 도구입니다. 실제 페이지 위에서 바로 조작되므로, 개발자 도구 없이도 확인 가능합니다.
스타일 인스펙터 모드에서 요소를 더블클릭하면 실시간으로 텍스트를 편집할 수 있습니다.
텍스트 편집 기능 사용 예시 (클릭하여 확대)
💡 편집 중인 텍스트는 자동으로 원본 스타일이 적용되며, 0 키를 눌러 언제든지 원본으로 복원할 수 있습니다.
스타일 인스펙터 모드에서 사용할 수 있는 키보드 단축키입니다.
키보드 단축키는 스타일 인스펙터가 활성화된 상태에서만 작동합니다. ESC 키로 스타일 인스펙터 모드를 종료하고 툴팁을 재활성화할 수 있습니다.
크롬 확장 프로그램의 실제 활용 사례들을 소개합니다.
페이지 시안과 실제 배치가 맞는지 확인할 때
상품 이미지와 코드가 정확하게 들어갔는지 QA할 때
특정 영역이 어떤 모듈인지 빠르게 파악할 때
폰트 크기/간격 등을 웹 페이지에서 실시간으로 조정 테스트할 때
다운로드한 파일을 압축 해제하고 크롬에 설치하세요
cafe24-module-badge.zip 파일을 압축 해제하여 폴더 생성chrome://extensions/ 입력설치 완료 후 Cafe24 사이트에서 바로 사용하세요