Shoma-DS/team-info

Tyoudoii Illust Fetcher 스킬

목표

• tyoudoii-illust 사이트가 JS 렌더링으로 스크래핑하기 어려운 경우 WordPress REST API를 사용합니다.
• 이모지, 텍스트 아이콘, 임시 이미지를 페이지 디자인에 맞는 다운로드 가능한 일러스트로 교체합니다.
• 주변 레이아웃이나 카드 UI도 정리가 필요한 경우 .agent/skills/web-design/frontend-design/SKILL.md와 함께 이 스킬을 사용합니다.

워크플로우

1단계: 필요한 일러스트 파악

1. HTML / JSX / component 내의 이모지, 텍스트 아이콘, 임시 이미지를 목록화합니다.
2. 각 위치에 필요한 일러스트의 주제를 키워드화합니다.
3. 키워드는 먼저 의미가 통하는 짧은 단어로 설정합니다.
4. 다운로드 디렉터리를 미리 결정합니다.

예시:

• worry_man
• robot
• handshake
• {project}/images/
• {project}/public/images/

2단계: WordPress REST API로 검색

1. 먼저 REST API를 사용하여 후보 글을 찾습니다.
2. 엔드포인트:

https://tyoudoii-illust.com/wp-json/wp/v2/posts?search={keyword}&_embed=true&per_page=5

3. 응답의 _embedded["wp:featuredmedia"][0].source_url에서 썸네일 URL을 가져옵니다.
4. 썸네일 URL을 가져올 수 없는 경우, 일본어 키워드와 영어 키워드를 전환하여 다시 검색합니다.

썸네일 URL 예시:

https://tyoudoii-illust.com/wp-content/uploads/2024/01/example_サムネ.png

3단계: 실제 일러스트 URL 유도

1. 썸네일 URL 끝의 _サムネ.png를 _color.png로 바꿔 본 URL을 생성합니다.
2. 먼저 HTTP 200 응답이 오는지 확인합니다.

curl -s -o /dev/null -w "%{http_code}" "{candidate_url}"

3. _color.png가 404인 경우 다음을 순서대로 시도합니다.

• _カラー.png
• _illust.png

4. 모두 200이 아닌 경우, 다른 키워드로 API 검색으로 돌아갑니다.

4단계: 다운로드

1. 프로젝트 내에서 의미가 통하는 영어 파일명을 사용합니다.
2. 예시:

• telework.png
• robot.png
• support.png

3. 다운로드 예시:

curl -L "{url}" -o "{project}/images/{semantic_name}.png"

5단계: HTML 및 CSS에 통합

1. 이모지나 텍스트 아이콘을 로컬 이미지로 교체합니다.

<div class="icon-container">
  <img src="images/{name}.png" alt="{설명}">
</div>

2. 카드나 특징 목록에서는 모든 아이콘에 동일한 컨테이너 크기를 사용합니다.
3. 이미지 자체의 종횡비는 object-fit: contain으로 처리합니다.

.icon-container {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-container img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

품질 규칙

• WebFetch나 렌더링된 HTML 획득에 집착하지 말고, 먼저 REST API를 사용합니다.
• 썸네일 URL을 가져오지 못한 경우, 일본어/영어 유의어로 재시도합니다.
• _color.png가 404인 경우 _カラー.png와 _illust.png도 확인합니다.
• 같은 카드 그룹에서 아이콘 컨테이너 크기를 혼용하지 않습니다.
• alt 속성을 생략하지 않습니다.
• 저장 파일명은 프로젝트 내에서 의미가 통하는 영어 이름을 사용합니다.
• 상업적 사용 시 tyoudoii-illust.com의 최신 이용약관을 반드시 확인합니다. 무료·상업 가능을 전제로 진행하더라도 최종 확인은 생략하지 않습니다.

조율

• themeisle-illustration-fetcher도 후보에 오르는 경우, 자동으로 선택하지 않고 반드시 사용자에게 어떤 것을 사용할지 확인합니다.
• 전체 UI 개선이나 섹션 설계가 필요한 경우 frontend-design을 먼저 읽고, 아이콘 교체 공정만 이 스킬로 처리합니다.
• 기존 디자인이 있는 경우, 그 여백·카드 비율·이미지 크기 방침에 맞춰 .icon-container의 치수만 조정합니다.

검증

1. 새 웹 프로젝트에서 이 스킬을 호출하고, 키워드로 API 검색을 시작합니다.
2. 후보 URL의 200 확인, PNG 다운로드, HTML 통합까지 모두 완료되는지 확인합니다.
3. 브라우저에서 모든 카드 이미지가 동일한 크기로 정렬되어 보이는지 육안으로 확인합니다.