에셋 감사
Webflow 사이트의 에셋을 분석하여 SEO 최적화를 수행합니다.
중요 참고 사항
항상 Webflow MCP 도구를 사용하여 모든 작업을 수행하세요:
- 에셋 가져오기 및 업데이트에는 Webflow MCP의
data_assets_tool사용 - 이미지 콘텐츠 분석에는 Webflow MCP의
get_asset_preview(에셋의asset_id사용) 사용 - 사용 가능한 사이트 목록 확인에는 Webflow MCP의
data_sites_tool(actionlist_sites) 사용 - 시작하기 전에 모범 사례를 확인하려면 Webflow MCP의
webflow_guide_tool사용 - Webflow 작업에 다른 도구나 방법을 사용하지 마세요
- 모든 도구 호출에는 필수
context매개변수(15-25단어, 3인칭 관점)를 포함해야 합니다
지침
1단계: 사이트 선택 및 에셋 검색
- 사이트 확인: 대상 사이트를 식별합니다. 사용자가 사이트 ID를 제공하지 않으면 요청합니다.
- 모든 에셋 가져오기: Webflow MCP의
data_assets_tool을 사용하여 사이트에서 모든 에셋을 가져옵니다(각 에셋 레코드에는 미리보기에 필요한asset_id가 포함됨).- 에셋이 50개 이상인 사이트의 경우 20개씩 배치로 처리합니다.
- 진행 상황 표시: "에셋 1-20 / 150 처리 중..."
- 패턴 감지: 에셋 명명에서 일반적인 패턴 분석:
- 카메라 업로드 (IMG_, DSC_ 등)
- 스크린샷 (screenshot, Screen Shot 등)
- 일반 이름 (untitled, image-1 등)
- 날짜 기반 이름 (2024-01-10 등)
2단계: 문제 분석 및 패턴 인식
- 문제 식별: 다음 조건에 해당하는 모든 에셋 나열:
- 대체 텍스트가 설정되지 않음 (null 또는 빈 문자열)
- 대체 텍스트가 있지만 품질이 낮음 (너무 짧음, 중복 문구 등)
- SEO 친화적인 에셋 이름이 아님
- 중복이거나 매우 유사함
- 패턴 감지 보고서: 감지된 패턴 표시:
🔍 감지된 패턴: - 15개 에셋이 "IMG_"로 시작 (카메라 업로드) - 8개 에셋에 "screenshot" 포함 - 제안: 이러한 패턴을 일괄 이름 변경 - 사용자 선호도 확인: 생성할 항목 선택 요청:
- 대체 텍스트만
- SEO 친화적인 이름만
- 둘 다
- 명명 패턴/템플릿 적용
3단계: 분석 및 제안 생성
- 에셋 분석: 1단계에서 얻은 각 에셋의
asset_id를 Webflow MCP의get_asset_preview도구에 전달하여 업데이트가 필요한 에셋을 분석합니다.- 오류 처리: Webflow MCP의
get_asset_preview가 실패하면 다음 대체 방법 사용:- 기존 파일명에서 설명 추출
- 경고와 함께 일반 자리 표시자 사용
- 다른 에셋으로 계속 진행
- 시간 초과를 방지하기 위해 배치로 처리
- 오류 처리: Webflow MCP의
- 검증과 함께 제안 생성:
- 대체 텍스트 검증:
- 최대 125자 (초과 시 경고)
- 중복 문구 금지 ("image of", "picture of", "photo of")
- 구두점으로 끝나야 함
- 일반 설명 플래그 지정 (신뢰도 < 50%)
- SEO 이름 검증:
- 소문자 a-z, 0-9, 하이픈만 허용
- 이중 확장자 금지 (.webp.webp) - 먼저 기존 확장자 제거
- 최대 100자
- 공백/밑줄을 하이픈으로 대체
- 특수 문자 없음
- 대체 텍스트 검증:
- 폴더 구성 제안: 패턴이 감지되면 폴더 구조 제안:
💡 구성 제안: - 8개의 팀 이미지를 위한 "team-photos" 폴더 생성 - 15개의 제품 사진을 위한 "product-images" 폴더 생성
4단계: 세부 승인 및 적용
- 세부 승인과 함께 제안 제시:
- 확인란이 있는 번호 목록 표시
- 개별 토글 허용: "건너뛸 숫자 입력 (예: '2,4')"
- 옵션: "all", "none" 또는 특정 숫자
- 각 제안에 대한 검증 경고 표시
- 명명 템플릿 제공 (유사한 에셋이 많은 경우):
🎨 명명 패턴 적용? 1. [카테고리]-[설명] (예: team-john-headshot) 2. [설명]-[장소] (예: office-workspace-desk) 3. 사용자 정의 패턴... 4. 패턴 건너뛰기, 개별 이름 사용 - 롤백 데이터 저장: 변경 사항을 적용하기 전에 저장:
- 원래 에셋 이름
- 원래 대체 텍스트
- 타임스탬프
- 수정된 에셋
- 업데이트 적용: 승인된 에셋만 업데이트하려면 Webflow MCP의
data_assets_tool을 사용합니다.- 배치 업데이트 진행 상황 표시
- 부분 실패를 정상적으로 처리
- 성공과 실패를 별도로 보고
- 롤백 옵션 제공: 변경 사항 적용 후:
📋 롤백 가능: 마지막 업데이트: 4개 에셋이 2분 전 수정됨 "undo"를 입력하여 변경 사항 되돌리기
예시
사용자 프롬프트:
내 사이트에서 에셋 감사를 실행해 줘.
1단계: 초기 감사 보고서
📊 SEO 에셋 감사: MCP Demo #2
총계: 4개 에셋
🔍 감지된 패턴:
- 4개 에셋에 일반 숫자 이름 있음 (1.webp, 2.webp, 3.webp, 4.webp)
- 모든 에셋이 WebP 형식 ✓
⚠️ 누락된 대체 텍스트 (4개 에셋):
├── 1.webp (대체 텍스트 없음)
├── 2.webp (대체 텍스트 없음)
├── 3.webp (대체 텍스트 없음)
└── 4.webp (대체 텍스트 없음)
⚠️ SEO 부적합 이름 (4개 에셋):
├── 1.webp (일반 숫자 이름)
├── 2.webp (일반 숫자 이름)
├── 3.webp (일반 숫자 이름)
└── 4.webp (일반 숫자 이름)
---
무엇을 생성하시겠습니까?
1. 대체 텍스트만
2. SEO 친화적인 이름만
3. 대체 텍스트와 SEO 이름 모두
옵션을 선택하세요 (1, 2 또는 3).
검증 경고 예시:
📋 제안된 개선 사항:
[1] ✓ IMG_1234.jpg
대체 텍스트: "Professional team member headshot with blue background."
새 이름: professional-team-member-headshot.jpg
✅ 검증 통과
[2] ✓ screenshot-2024.png
대체 텍스트: "Dashboard analytics overview showing user engagement metrics."
새 이름: dashboard-analytics-overview.png
✅ 검증 통과
[3] ⚠️ untitled-image.webp
대체 텍스트: "Photo"
⚠️ 경고: 대체 텍스트가 너무 짧음 (< 10자) - 더 자세한 설명 필요
새 이름: untitled-image.webp
⚠️ 경고: 더 나은 이름을 생성할 수 없음 (이미지 미리보기 실패)
[4] ⚠️ TeamPhoto2024!!!.jpg
대체 텍스트: "Image of a person working on laptop in modern office with plants and natural lighting through large windows in the background."
⚠️ 경고: 대체 텍스트가 너무 김 (137자) - 화면 판독기를 위해 줄이는 것을 고려하세요
새 이름: team-photo-2024.jpg
✅ 검증 통과 (특수 문자 제거됨)
어떤 에셋을 업데이트하시겠습니까?
2단계: 사용자가 옵션 3을 선택하고 이미지 분석 후
📋 제안된 개선 사항:
[1] ✓ 1.webp
대체 텍스트: "Podcast host with headphones and microphone recording Webflow podcast episode in studio."
새 이름: webflow-podcast-host-recording-studio.webp
✅ 검증 통과
[2] ✓ 2.webp
대체 텍스트: "Professional developer wearing glasses working on laptop with Webflow logo in modern office."
새 이름: developer-working-laptop-webflow-office.webp
✅ 검증 통과
[3] ✓ 3.webp
대체 텍스트: "Webflow homepage hero section with tagline and email signup form."
새 이름: webflow-homepage-hero-section.webp
✅ 검증 통과
[4] ✓ 4.webp
대체 텍스트: "Speaker presenting on stage at Webflow Conf with audience watching."
새 이름: webflow-conf-speaker-presentation-stage.webp
✅ 검증 통과
---
어떤 에셋을 업데이트하시겠습니까?
- 건너뛸 숫자 입력 (예: "2,4"는 항목 2와 4 건너뛰기)
- "all"을 입력하여 모두 진행
- "none"을 입력하여 취소
3단계: 사용자가 "all"로 확인한 후
🔄 업데이트 적용 중...
진행 상황: ████████████████████ 100% (4/4 에셋)
✅ 업데이트가 성공적으로 적용되었습니다!
SEO 에셋 감사 완료: MCP Demo #2
요약:
- ✅ 4개 에셋이 성공적으로 업데이트됨
- ❌ 0개 에셋 실패
- ⏭️ 0개 에셋 건너뜀
적용된 변경 사항:
┌─────────────────────────────────────────────────────────────────┐
│ [1] webflow-podcast-host-recording-studio.webp │
│ ✓ 대체 텍스트 추가 │
│ ✓ 파일명 업데이트 │
├─────────────────────────────────────────────────────────────────┤
│ [2] developer-working-laptop-webflow-office.webp │
│ ✓ 대체 텍스트 추가 │
│ ✓ 파일명 업데이트 │
├─────────────────────────────────────────────────────────────────┤
│ [3] webflow-homepage-hero-section.webp │
│ ✓ 대체 텍스트 추가 │
│ ✓ 파일명 업데이트 │
├─────────────────────────────────────────────────────────────────┤
│ [4] webflow-conf-speaker-presentation-stage.webp │
│ ✓ 대체 텍스트 추가 │
│ ✓ 파일명 업데이트 │
└─────────────────────────────────────────────────────────────────┘
📋 롤백 가능:
마지막 업데이트: 4개 에셋이 방금 수정됨
"undo"를 입력하여 변경 사항 되돌리기
---
🎉 사이트의 에셋이 이제 SEO 및 접근성에 완전히 최적화되었습니다!
대체 3단계: 사용자가 특정 에셋 선택 (예: "1,3")
🔄 1, 3번 에셋에 업데이트 적용 중...
진행 상황: ████████████████████ 100% (2/2 에셋)
✅ 부분 업데이트 완료!
요약:
- ✅ 2개 에셋이 성공적으로 업데이트됨
- ❌ 0개 에셋 실패
- ⏭️ 2개 에셋 건너뜀 (요청에 따라)
적용된 변경 사항:
┌─────────────────────────────────────────────────────────────────┐
│ [1] webflow-podcast-host-recording-studio.webp │
│ ✓ 대체 텍스트 추가 │
│ ✓ 파일명 업데이트 │
├─────────────────────────────────────────────────────────────────┤
│ [3] webflow-homepage-hero-section.webp │
│ ✓ 대체 텍스트 추가 │
│ ✓ 파일명 업데이트 │
└─────────────────────────────────────────────────────────────────┘
건너뛴 에셋 (나중에 감사 다시 실행 가능):
- [2] 2.webp
- [4] 4.webp
📋 롤백 가능:
"undo"를 입력하여 이 2개의 변경 사항 되돌리기
지침
1단계: 중요 검증 (필수 준수)
파일 확장자 처리:
- 새 확장자를 추가하기 전에 항상 기존 확장자를 제거하세요
- 잘못된 예:
image.webp→new-name.webp.webp - 올바른 예:
image.webp→new-name.webp - 구현: 확장자가 없는 파일명 + 새 확장자 사용
대체 텍스트 품질 규칙:
- 최대 길이: 125자 (접근성 모범 사례)
- 구두점(마침표, 느낌표, 물음표)으로 끝나야 함
- 중복 문구 제거:
- ❌ "Image of a person" → ✅ "Person working at desk"
- ❌ "Picture of logo" → ✅ "Company logo on blue background"
- ❌ "Photo showing" → ✅ 직접 설명
- 너무 짧은 경우(< 10자) 플래그: ⚠️ "너무 일반적임 - 더 자세한 설명 필요"
- 너무 긴 경우(> 125자) 플래그: ⚠️ "화면 판독기를 위해 줄이는 것을 고려하세요"
SEO 파일명 규칙:
- 허용: 소문자 a-z, 숫자 0-9, 하이픈만
- 최대 길이: 100자 (확장자 제외)
- 공백을 하이픈으로 변환:
team photo→team-photo - 밑줄을 하이픈으로 변환:
team_photo→team-photo - 특수 문자 제거:
photo!@#$→photo - 소문자로 변환:
TeamPhoto→team-photo - 연속 하이픈 제거:
team--photo→team-photo - 선행/후행 하이픈 제거:
-photo-→photo
2단계: 배치 처리 및 성능
대규모 사이트 처리:
- 에셋이 50개 이상인 사이트: 20개씩 배치로 처리
- 진행 상황 표시: "배치 1/5 처리 중 (에셋 1-20)..."
- 사용자가 특정 배치를 처리할 수 있도록 허용
- 시간 초과 보호: Webflow MCP의
get_asset_preview가 30초 이상 걸리면 다음 배치로 건너뛰기
패턴 감지: 다음 패턴을 감지하고 보고:
- 카메라 업로드:
IMG_,DSC_,DCIM_,P_ - 스크린샷:
screenshot,Screen Shot,Capture - 일반 이름:
untitled,image-1,photo,asset - 날짜 형식:
2024-01-10,20240110,01-10-2024 - 패턴과 일치하는 에셋이 3개 이상인 경우 일괄 이름 변경 제안
오류 처리:
- Webflow MCP의
get_asset_preview가 실패하는 경우:- 오류 기록 (사용자에게 표시하지 않음)
- 대체 방법 사용: 파일명에서 설명 추출
- ⚠️ 경고 표시: "파일명에서 생성됨 (이미지 미리보기 실패)"
- 다른 에셋으로 계속 진행
- 부분 성공 처리:
- 성공과 실패를 별도로 보고
- 표시: "✅ 15개 업데이트, ❌ 2개 실패, ⏭️ 3개 건너뜀"
- 실패한 에셋 재시도 옵션 제공
3단계: 고급 기능
세부 승인 시스템:
- 각 제안 번호 매기기:
[1],[2],[3]등 - 확인 상태 표시:
✓또는✗ - 여러 형식 허용:
- "all" - 모두 승인
- "none" - 작업 취소
- "1,3,5" - 항목 1, 3, 5 건너뛰기
- "2-5" - 항목 2~5 건너뛰기
- 항목별 검증 상태 항상 표시
명명 템플릿: 유사한 에셋이 5개 이상 감지되면 템플릿 제공:
[카테고리]-[설명]-[수식어]- 예:
product-laptop-front-view.jpg
- 예:
[설명]-[장소]-[연도]- 예:
team-photo-office-2024.jpg
- 예:
[유형]-[이름]-[변형]- 예:
icon-arrow-blue.svg
- 예:
폴더 구성: 다음 조건 감지 시 폴더 제안:
- "team", "staff", "employee"가 포함된 이미지 5개 이상 →
team-photos폴더 - "product", "item"이 포함된 이미지 5개 이상 →
product-images폴더 - "logo", "brand"가 포함된 이미지 5개 이상 →
branding폴더 - "screenshot", "capture"가 포함된 이미지 5개 이상 →
screenshots폴더
롤백 시스템: 업데이트 전에 메모리에 저장:
{
"timestamp": "2026-01-10T00:45:00Z",
"assets": [
{
"id": "asset-id",
"originalName": "1.webp",
"originalAltText": "",
"newName": "podcast-host.webp",
"newAltText": "Podcast host recording..."
}
]
}
- 변경 사항 적용 후 5분 동안 실행 취소 제공
- 다음 감사가 시작되면 롤백 데이터 지우기
- 최종 요약에 롤백 옵션 표시
중복 감지:
- 에셋 크기 비교 (정확히 일치 = 중복 가능성 높음)
- 파일명 비교 (유사한 이름 = 잠재적 중복)
- 보고: "⚠️ 잠재적 중복: asset1.jpg (2.4MB) 및 asset1-copy.jpg (2.4MB)"
- 자동 삭제하지 않음 - 사용자가 결정하도록 함
일반 모범 사례
- 항상 Webflow MCP의
get_asset_preview(URL이 아닌asset_id사용)를 사용하여 이미지 내용을 이해하세요.