이온디

@eond

portfolio-thumbnail-maker는 반복 업무를 더 안정적으로 처리하기 위한 AI 에이전트 스킬입니다.

포트폴리오, 서비스 소개, 웹사이트 사례 글의 대표이미지를 고품질로 재생성할 때 사용한다. 사이트 스크롤 캡처, 모바일/iPad/데스크탑 디바이스 목업 합성, 제목 카드 fallback, Rhymix/XE 첨부 업로드, DB 본문 첫 이미지 연결, 공개 URL 검증까지 처리한다.

사용 방법

Codex나 호환되는 AI 에이전트의 스킬 폴더에 아래 SKILL.md 내용을 저장한 뒤, 설명에 포함된 트리거 문장으로 호출하세요.

사용 예:
portfolio-thumbnail-maker 스킬 사용해줘.
이 작업은 portfolio-thumbnail-maker 기준으로 진행해줘.

연관스킬

이 스킬과 함께 쓰면 좋은 관련 스킬입니다.

web-motion-director

원본 위치

.codex/skills/portfolio-thumbnail-maker/SKILL.md

SKILL.md

---
name: portfolio-thumbnail-maker
description: 포트폴리오, 서비스 소개, 웹사이트 사례 글의 대표이미지를 고품질로 재생성할 때 사용한다. 사이트 스크롤 캡처, 모바일/iPad/데스크탑 디바이스 목업 합성, 제목 카드 fallback, Rhymix/XE 첨부 업로드, DB 본문 첫 이미지 연결, 공개 URL 검증까지 처리한다.
---

# Portfolio Thumbnail Maker

## 역할

- 포트폴리오와 서비스 소개 글에 쓸 대표이미지를 만든다.
- 실제 사이트 화면을 데스크탑, 태블릿, 모바일 viewport로 캡처하고 필요하면 목업 이미지로 합성한다.
- 스크롤 등장 애니메이션, lazy-load 이미지, AOS/GSAP/reveal UI를 캡처 전에 활성화한다.
- 사이트 캡처가 불가능하면 프로젝트 제목 카드로 대체한다.
- eond.com 계열 운영 게시판은 Rhymix 호환 첨부 경로로 업로드하고 본문 첫 이미지에 연결한다.

## 기본 원칙

1. 실제 화면이 있는 프로젝트는 실제 화면 캡처를 우선한다.
2. 첫 화면만 찍지 말고, 스크롤 후 핵심 섹션이 보이는지 확인한다.
3. 포트폴리오에는 단일 스크린샷보다 `desktop + tablet + mobile` 목업 합성을 우선한다.
4. 캡처 품질이 낮으면 실패로 보고 다시 캡처하거나 제목 카드로 대체한다.
5. 운영 게시글에서는 `/static/uploads`를 쓰지 말고 Rhymix `/files/attach/images/...` 공개 경로를 사용한다.

## 작업 순서

1. 대상 문서와 URL 후보를 수집한다.
2. 기존 첫 ``와 `xe_files` 첨부 상태를 확인한다.
3. 기존 이미지가 깨졌거나 없으면 새 대표이미지를 만든다.
4. 사이트 URL이 있으면 [capture-workflow.md](references/capture-workflow.md)에 따라 스크롤/viewport 캡처를 수행한다.
5. 포트폴리오형 대표이미지는 [mockup-composition.md](references/mockup-composition.md)에 따라 합성한다.
6. URL이 없거나 캡처 실패 시 제목 카드 fallback을 만든다.
7. eond.com/Rhymix 운영 게시판은 [rhymix-upload.md](references/rhymix-upload.md)에 따라 업로드와 DB 연결을 처리한다.
8. [quality-check.md](references/quality-check.md)에 따라 공개 URL, 목록, 상세, 이미지 응답을 검증한다.

## 출력/보고

- 처리 개수
- 캡처 방식별 개수: 실제 사이트, 목업 합성, 제목 카드, 기존 첨부 재사용
- 실패/대체 처리한 문서 목록
- 검증 결과: 목록 URL, 상세 URL, 이미지 URL `200 image/*`

## 참고 문서

- 캡처 절차: [capture-workflow.md](references/capture-workflow.md)
- 목업 합성: [mockup-composition.md](references/mockup-composition.md)
- Rhymix 업로드/DB 연결: [rhymix-upload.md](references/rhymix-upload.md)
- 품질 검사: [quality-check.md](references/quality-check.md)

참고 리소스

이 스킬이 직접 참조하는 Markdown 참고 파일입니다. 재사용할 때 같은 상대 경로로 저장하면 동작이 안정적입니다.

.codex/skills/portfolio-thumbnail-maker/references/capture-workflow.md

# Capture Workflow

## URL 후보

우선순위:

1. `extra_vars.site_url`
2. `extra_vars.demo_url`
3. 본문 첫 외부 URL
4. 사용자가 직접 준 URL

무시할 URL:

- 현재 포트폴리오 상세 URL
- 로그인/관리자/결제/다운로드 URL
- `javascript:` 또는 파일 다운로드 링크

## Viewports

- Desktop: `1440x900`
- iPad/tablet: `1024x1366`
- Mobile: `390x844`

## Scroll Reveal 처리

캡처 전 다음 절차를 수행한다.

1. `domcontentloaded` 이후 1.5초 대기
2. `window.scrollTo(0, 0)`
3. 페이지 높이를 기준으로 4~6단계 스크롤
4. 각 단계마다 400~700ms 대기
5. 마지막에 캡처할 위치로 이동 후 800ms 대기

Playwright/브라우저 자동화가 가능하면 JS 실행:

```js
await page.evaluate(async () => {
  const h = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
  for (const y of [0, h * .18, h * .36, h * .55, h * .72]) {
    window.scrollTo(0, y);
    await new Promise(r => setTimeout(r, 550));
  }
});
```

## 캡처 지점 선택

- Hero가 명확하면 데스크탑은 `y=0` 또는 첫 CTA가 보이는 지점.
- 상단이 빈 화면/쿠키/로딩이면 20~40% 지점.
- 모바일은 내비가 화면을 가리면 약간 스크롤한 지점을 사용.
- 목록/대시보드/앱 화면은 주요 카드나 기능이 보이는 지점을 사용.

## 실패 기준

- 파일 크기 15KB 미만
- 거의 흰색/검정색 단색 화면
- 브라우저 오류 페이지, SSL 오류, 404/403 페이지
- 로그인 화면만 보이는 경우
- 이미지 lazy-load가 비어 있는 경우

실패 시 한 번 더 `networkidle` 또는 긴 대기 후 재시도하고, 그래도 실패하면 제목 카드 fallback을 사용한다.

.codex/skills/portfolio-thumbnail-maker/references/mockup-composition.md

# Mockup Composition

## 목표

포트폴리오 대표이미지는 작업물이 한눈에 보이도록 여러 기기 화면을 하나의 이미지에 합성한다.

권장 canvas:

- `1600x1000` PNG
- 배경은 밝은 중립 톤
- 목업 주변 여백을 충분히 둔다

## 기본 구성

- Desktop: 가장 큰 화면, 뒤쪽 또는 왼쪽 중심
- Tablet/iPad: 중간 크기, 오른쪽 뒤쪽
- Mobile: 가장 앞쪽, 오른쪽 하단

권장 비율:

- Desktop 캡처: 전체 너비의 68~76%
- Tablet 캡처: 전체 너비의 26~32%
- Mobile 캡처: 전체 너비의 16~20%

## 시각 처리

- 둥근 모서리는 14~28px 범위로 제한한다.
- 디바이스 외곽선은 과하게 두껍게 만들지 않는다.
- 그림자는 부드럽게 사용한다.
- 실제 사이트가 잘 보이도록 과도한 장식, 흐림, 어두운 오버레이를 피한다.

## 캡처가 일부만 가능한 경우

- Desktop만 있으면 desktop framed screenshot으로 만든다.
- 모바일만 있으면 mobile + 제목 카드 조합으로 만든다.
- 내부망/폐쇄망 프로젝트는 제목 카드 fallback을 사용하되 `platform`, `category`, `client` 정보를 포함한다.

## 제목 카드 fallback

사이트 캡처가 불가능할 때 사용한다.

포함 요소:

- 프로젝트명
- 플랫폼 또는 카테고리
- `EONDI Portfolio`

제외:

- 없는 기능이나 실제로 확인되지 않은 화면 묘사
- 무관한 stock 이미지

.codex/skills/portfolio-thumbnail-maker/references/rhymix-upload.md

# Rhymix Upload

## 운영 경로 규칙

eond.com 계열 운영 게시판은 Rhymix 호환 첨부 경로를 우선한다.

DB `xe_files.uploaded_filename`:

```text
./files/attach/images/YYYY/MM/DD/file.png
```

본문 첫 이미지 `src`:

```html

```

물리 파일 위치 예:

```text
/home/[user]/web/eond.com/public_html/files/attach/images/YYYY/MM/DD/file.png
```

## DB 필드

`xe_files`:

- `file_srl`: `max(file_srl) + 1`
- `upload_target_srl`: 문서 번호
- `module_srl`: 대상 게시판 module_srl
- `member_srl`: 문서 작성자 member_srl
- `source_filename`: 생성 방식과 원본 URL을 짧게 기록
- `uploaded_filename`: `./files/attach/images/YYYY/MM/DD/file.png`
- `file_size`: 실제 바이트 크기
- `mime_type`: `image/png` 또는 `image/jpeg`
- `isvalid`: `Y`
- `regdate`: 현재 시각

`xe_documents`:

- `content`: 첫 ``를 본문 최상단에 추가하거나 기존 첫 이미지를 교체
- `uploaded_count`: 최소 `1`
- `last_update`: 현재 시각

## 업로드 방법

로컬에서 생성한 파일을 운영 서버에 전송:

```bash
rsync -avz --rsync-path='mkdir -p /home/[user]/web/eond.com/public_html/files/attach/images/YYYY/MM/DD && rsync' \
  /tmp/generated/*.png \
  eond@SERVER:/home/[user]/web/eond.com/public_html/files/attach/images/YYYY/MM/DD/
```

## 주의

- `/static/uploads/...`는 운영 `eond.com`/`ai.eond.com`에서 서빙되는지 확인 전에는 사용하지 않는다.
- 본문에 `./files/attach/...`를 넣으면 상세 페이지 경로 기준으로 잘못 해석될 수 있으므로 visible content에는 `/files/attach/...`를 사용한다.
- DB `uploaded_filename`은 Rhymix 호환을 위해 `./files/attach/...`를 유지한다.

.codex/skills/portfolio-thumbnail-maker/references/quality-check.md

# Quality Check

## DB 검증

- 대상 문서 전체에 첫 ``가 있는지 확인한다.
- `/static/uploads` 잔여 첫 이미지가 없는지 확인한다.
- 새로 생성한 파일 수와 `xe_files` 레코드 수가 맞는지 확인한다.

## HTTP 검증

최소 확인:

- 목록 페이지 `200`
- 대표 상세 페이지 `200`
- 공개 이미지 URL `200`
- `Content-Type`이 `image/*`
- 파일 크기가 비정상적으로 작지 않음

포트폴리오 목록이 페이지네이션이면 여러 페이지를 순회한다.

## HTML 검증

- 목록 카드 ``가 `/files/attach/...` 또는 정상 프록시 경로를 사용한다.
- 상세 본문 첫 이미지가 렌더링된다.
- OG/Twitter image가 새 대표이미지로 잡힌다.

## 실패 시 처리

- `/tools/files/...`처럼 상대경로가 꼬이면 본문을 `/files/attach/...` 절대경로로 수정한다.
- `/img/attach/...`가 `HEAD 405`여도 `GET 200 image/*`면 정상일 수 있다.
- 이미지가 200이어도 10~15KB 이하라면 품질 부족으로 보고 다시 생성한다.

2026년 07월 17일 · 18:31

0 좋아요 0 답글 1 조회