무엇을 하나요
디자이너가 가이드를 보며 손으로 옮기던 작업을 자동으로 조립하고, 사람은 검수와 예외 부분에 집중합니다.
기획 화면 해석
기획용 컴포넌트(title·list·card·step·info 등)를 가이드의 유형 1~8, 유의사항 유형으로 분류합니다.
가이드 규칙대로 조립
가이드 에셋과 DS 인스턴스로 섹션·간격·토큰을 가이드 그대로 적용합니다. 텍스트·on/off·variant 만 바꾸고 DS 원본은 건드리지 않습니다.
어려운 부분은 AI 보완
규칙으로 해석이 덜 된 섹션만 캡쳐 이미지와 함께 AI 에게 보내 다시 분류합니다.
예외는 자리 표시
인포그래픽·병합 표처럼 자동화가 어려운 블록은 기획 원본 캡쳐를 붙인 자리 표시로 남깁니다.
설치
Figma 데스크톱 앱에서만 설치할 수 있습니다(브라우저 Figma 불가).
- 1
다운로드 후 압축 풀기
위의 최신 플러그인 다운로드로 받은 zip 을 풀고,
상품가이드-디자인-적용기폴더를 계속 둘 위치에 옮겨 둡니다. 폴더를 옮기거나 이름을 바꾸면 다시 가져와야 합니다. - 2
Figma 에 가져오기
아무 디자인 파일을 열고 메뉴 Plugins › Development › Import plugin from manifest… 에서 폴더 안의
manifest.json을 선택합니다. - 3
실행
Plugins › Development › 상품가이드 디자인 적용기 로 실행합니다.
- 4
업데이트
새 버전을 받으면 같은 폴더의 파일을 덮어쓰고 플러그인을 다시 실행하면 됩니다. 다시 가져올 필요는 없습니다.
- 상품가이드 Figma 파일에
[HPG] Design System라이브러리 연결 (Assets › Libraries) - Pretendard 폰트 설치 — 없으면 생성 전에 알려주고 멈춥니다
AI 연결
AI 보완은 사내 AI 워커 서버를 씁니다. 따로 설정할 것은 없습니다.
플러그인 오른쪽 위 표시가 초록색 AI 워커 연결됨이면 AI 보완을 쓸 수 있습니다. 회색이면 문제 해결을 보세요.
사용 순서
단계마다 지금 눌러야 할 버튼 하나만 강조됩니다. 강조된 버튼을 따라가면 됩니다.
상품가이드 · 1280×5122
- 0
기획 화면 선택
캔버스에서 기획 화면 프레임(또는 '기획 화면' 섹션 전체)을 선택하고, 만들 해상도를 토글로 고릅니다.
- 1
규칙 분석
AI 없이 바로 끝납니다. 상품별 해석률과 섹션별 해석률, 확인 필요 항목이 표시됩니다.
- 2
AI 보완 (권장 시)
해석률이 90% 미만이면 이 단계가 메인이 됩니다. 섹션당 30초 안팎. 끝나면
83% → 97%처럼 바뀐 점수가 보입니다. - 3
생성
새 섹션에 해상도별 화면이 만들어지고, 캔버스가 그 위치로 이동합니다.
해석률과 AI 보완 기준
해석률 = (가이드 유형으로 확정 해석한 문구 + 의도적으로 자리 표시한 문구) ÷ 기획 화면의 전체 문구
90% 이상
바로 생성이 메인 버튼이 됩니다. AI 보완은 선택입니다.
90% 미만
AI 보완이 메인 버튼이 됩니다. 규칙만으로 생성하면 해석 못 한 문구가 유형 없이 본문 텍스트로 들어갑니다. 생성 버튼은 약하게 보이지만 누를 수 있습니다.
AI 보완 후 점수
AI 결과에 기획 문구가 빠짐없이 들어갔는지 검사한 비율입니다. 빠진 문구는 '확인 필요'에 표시되니 생성 후 직접 보충하세요.
결과물
생성할 때마다 새 섹션이 만들어지고, 이전 결과는 지우거나 덮어쓰지 않습니다.
| 무엇 | 이름 예시 | 설명 |
|---|---|---|
| 섹션 | 단기사채 · 디자인 적용 (자동 생성-AI) 09.30 15:42 | 상품마다 하나. 같은 이름이 있으면 (2). 첫 섹션은 페이지 오른쪽 끝, 이후는 아래로 쌓입니다. |
| 프레임 | 단기사채 · PC 1440 · 자동 생성-규칙 | 끝에 생성 방식이 붙습니다. 규칙만 → 자동 생성-규칙, AI 보완 후 → 자동 생성-AI |
| 자리 표시 | 수동 제작 필요 | 인포그래픽·병합 표 등. 기획 원본 캡쳐가 붙어 있고, 리포트의 '수동 제작 필요'에 목록이 나옵니다. |
- 기획에 STEP 표기가 없으면 섹션 순서대로
STEP n을 붙입니다. - 탭이 없는 가이드는 탭 영역을 통째로 숨깁니다. 비어 있는 유의사항 목록 영역도 숨깁니다.
- 상세 가이드의 토큰 표기 차이(
com/…→comp/…, 오타)는 플러그인이 가장 가까운 실제 토큰으로 자동 매칭합니다. 리포트의 '토큰 자동 매칭'에서 확인할 수 있습니다.
가이드 유형 매핑
기획 화면의 요소가 어떤 가이드 유형·컴포넌트로 조립되는지입니다.
| 기획 화면 요소 | 가이드 유형 | 쓰는 컴포넌트 |
|---|---|---|
| 섹션 타이틀 (STEP n) | Section Title | title_PC/MO section + TitleNum + Divider |
| 소제목 + 본문 | 유형1 기본 줄글형 | title_PC/MO contents |
| 개념 1개 + 보조설명 2개 이상 | 유형2 리스트형-Text | list_text_PC/MO text list |
| 종류·유형 소개 카드 | 유형3 리스트형-Card | list_card_PC/MO (PC 2/3열, MO 1열) |
| 개념 1개 + 보조설명 1개 목록 | 유형4 리스트형-Box | list_text_PC/MO card |
| 비교 표 | 유형5 Table형 | Item/Header · Item/Cell (MO 3단 이상은 가로 스크롤) |
| 번호 절차 | 유형6 절차 소개형 | step_PC/MO |
| '확인할 것' 체크 항목 | 유형7 체크형 | title_PC/MO contents_icon + TextList |
| 다이어그램·그래프·이미지 | 유형8 인포그래픽형 | 자리 표시 |
| ※·* 주석 / 경고 / 타 가이드 버튼 / 브랜드 박스 | 유의사항 유형 1~4 | info default · list · link · card |
| 하단 CTA | Section Bottom | title contents + 버튼 |
문제 해결
자주 막히는 경우입니다.
오른쪽 위에 'AI 워커 연결 안 됨'이 떠요
https://pxd-ai-figma-woori-product-guide.sungikim.co 인지 확인하고 저장 · 연결 확인을 누르세요. 그래도 안 되면 워커 서버가 꺼져 있을 수 있으니 담당자에게 알려 주세요. 규칙 분석과 생성은 워커 없이도 됩니다.'필수 폰트가 설치되어 있지 않습니다'라고 나와요
'찾지 못한 컴포넌트'가 리포트에 나와요
[HPG] Design System 라이브러리가 연결되어 있는지(Assets › Libraries) 확인하세요. 가이드 에셋(title_PC, list_text_PC 등)은 같은 파일의 '가이드 에셋' 섹션에 있어야 합니다.