156 lines
18 KiB
Markdown
156 lines
18 KiB
Markdown
# 디자인 링크
|
|
|
|
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?m=auto&t=Y5wF3r0wUkUFeBIV-6
|
|
|
|
# 섹션별 링크
|
|
|
|
## PC
|
|
|
|
01_HOME:
|
|
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2094&t=XSGOQmdNzIB99Zh5-4
|
|
02_ABOUT:
|
|
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2230&t=XSGOQmdNzIB99Zh5-4
|
|
03_HISTORY:
|
|
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2121&t=XSGOQmdNzIB99Zh5-4
|
|
04_VISION:
|
|
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2183&t=XSGOQmdNzIB99Zh5-4
|
|
05_PROJECT:
|
|
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2202&t=XSGOQmdNzIB99Zh5-4
|
|
06_Expertise:
|
|
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2253&t=XSGOQmdNzIB99Zh5-4
|
|
|
|
## Mobile
|
|
|
|
01_HOME:
|
|
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-2232&t=XSGOQmdNzIB99Zh5-4
|
|
02_ABOUT:
|
|
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-2288&t=XSGOQmdNzIB99Zh5-4
|
|
03_HISTORY:
|
|
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-2433&t=XSGOQmdNzIB99Zh5-4
|
|
04_VISION:
|
|
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-4183&t=XSGOQmdNzIB99Zh5-4
|
|
05_PROJECT:
|
|
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-4231&t=XSGOQmdNzIB99Zh5-4
|
|
06_Expertise:
|
|
https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-5082&t=XSGOQmdNzIB99Zh5-4
|
|
|
|
---
|
|
|
|
# 전체검수 결과 (2026-06-25)
|
|
|
|
이전 세션(어제) 작업물을 전체 점검함. 6개 섹션 모두 마크업/스타일/JS 반영되어 있고 `npm run build` 통과 확인.
|
|
|
|
발견해서 바로 고친 것:
|
|
- **포맷 불일치** — "포맷 완료"로 기록돼 있었지만 실제로는 7개 파일이 Prettier 규칙(CRLF 줄바꿈)을 안 지키고 있었음. `npm run format`으로 재정리.
|
|
- **PROJECT 카드 날짜 표시** — Figma 새 디자인엔 날짜가 없는데 `project__date`(예: "2023.12")가 마크업/CSS에 남아있던 걸 발견. 사용자 확인 후 전부 제거(`project__meta` 래퍼도 함께 정리, `_project.scss`의 `.project__meta`/`.project__date` 규칙 삭제).
|
|
- **안 쓰는 파일 정리** — `history-2.jpg`, `history-3.jpg`(미참조), `pnpm-lock.yaml`, `pnpm-workspace.yaml`(npm 단일 워크플로우와 혼용되던 흔적, CI는 `npm ci`만 사용) 삭제. 사용자 확인 후 진행.
|
|
|
|
검수 후에도 남아있는 미해결 항목은 아래 그대로.
|
|
|
|
## 추가 검수 (같은 날, 이어서) — GNB 위치 문제 제보 후 전체 섹션 재검수
|
|
|
|
사용자가 "GNB 메뉴/로고 위치가 새 디자인과 안 맞는다"고 제보 → Figma 토큰을 새로 발급받아 `.mcp.json` 갱신, Claude Code 재시작 후 figma-mcp 재연결. 이후 PC/모바일 전 섹션을 Figma 노드 JSON과 좌표 단위로 대조함.
|
|
|
|
**중요 발견 — Figma REST API 직접 호출로 기존 제약 다수 해결.** 자세한 내용은 맨 아래 "Figma MCP 연결 관련 메모" 갱신분 참고. 요약하면, MCP 도구(`add_figma_file`/`view_node`)의 한계(전체 덤프 시 토큰 잘림, 이미지 export 불가)를 `.mcp.json`에 있는 `FIGMA_API_KEY`로 Figma REST API를 직접 호출해서 우회함. 이번 세션부터는 이 방법을 우선적으로 써야 함.
|
|
|
|
고친 것:
|
|
- **GNB(PC) 좌우 패딩/로고/메뉴 간격** — Figma 좌표 추출 결과 헤더 좌우 패딩 100px(현재 48px이었음), 로고 lockup 126px(현재 90px), 메뉴 아이템 간 itemSpacing 12px(현재 없음)로 확인. `_gnb.scss`에서 `.gnb__inner` 패딩을 `clamp(24px, 5.2vw, 100px)`로, `.gnb__logoImg` width를 126px로, `.gnb__navList`에 `gap: 12px` 추가. 모바일은 로고가 60px 높이 헤더에서 넘치는 걸 막기 위해 `_intro.scss`의 모바일 분기에서 90px로 별도 고정.
|
|
- **VISION 배경 이미지 — "에셋 추출 불가"였던 항목 해결.** Figma REST API로 VISION 노드 JSON을 직접 조회해보니 ABOUT US와 **동일한 이미지**(`unsplash:Cq5NaI0yKBE`, opacity 0.5)를 재사용하고 있었음. 이미 로컬에 있는 `unsplash_Cq5NaI0yKBE.png`를 그대로 `.vision__bg`에 적용(about과 동일 패턴: `position:absolute; inset:0; background-size:cover; opacity:0.5`). 새 에셋 작업 불필요했음.
|
|
- **PROJECT 이미지 9~13번 누락 — "에셋 추출 불가"였던 항목 해결.** Figma REST API의 `GET /v1/images/:file_key?ids=...` 렌더 엔드포인트로 각 카드의 "Thumbnails" 노드(목업+스크린샷 합성)를 JPG로 직접 export 받음(9=프로스펙스 ONE SPEC, 10=중소벤처기업부, 11=롯데렌터카, 12=KB리브모바일, 13=코나아이 PC, 전부 회사명과 내용 일치 확인). `src/images/project-9.jpg` ~ `project-13.jpg`로 저장하고 HTML의 빈 `project__thumbEmpty` 박스를 `<img>`로 교체, 이제 안 쓰는 `.project__thumbEmpty` CSS 규칙 삭제.
|
|
- **PROJECT 카드 제목 누락 텍스트 복원** — Figma 원문과 전수 대조해서 2건 발견: 3번 카드 "PNS네트웍스 디지털 플랫폼 구축" → "PNS네트웍스 디지털 포워딩 플랫폼 구축 프로젝트"(포워딩/프로젝트 누락), 8번 카드 "그린카 차세대" → "그린카 차세대 프로젝트"(프로젝트 누락). alt 텍스트도 함께 수정.
|
|
- **sectionTitle 전역 폰트 크기** — Contact의 "Head Office" 라벨이 Figma는 32px 헤딩인데 사이트는 12px 회색 소문자 라벨(`.contact__label`)로 잘못 스타일링되어 있던 걸 발견하면서, 같이 쓰이는 `.sectionTitle`(ABOUT US/HISTORY/VISION/PROJECT 타이틀 공통 클래스) 자체가 Figma 48px 대비 40px로 작게 잡혀 있던 것도 함께 발견. `index.scss`의 `.sectionTitle`과 `_contact.scss`의 `.contact__heading` 모두 `clamp(28px, 3vw, 48px)`로 상한 수정 — **전 섹션 타이틀 크기에 영향 있는 변경.**
|
|
- **Contact 라벨 스타일 정리** — `.contact__label`("Head Office")을 32px/weight 400/다크 컬러로, `.contact__infoLabel`("Address"/"e-mail"/"tel")을 12px→18px·weight 600→700으로, `.contactAccordion__header`("Contact Us"/"Recruitment")를 20px→32px로 Figma 수치에 맞춰 수정.
|
|
|
|
확인 후 "현행 유지"로 사용자가 확정한 것 (Figma 쪽이 오타/메모성 텍스트로 판단):
|
|
- PROJECT 2번 카드(SK그룹) 제목·태그 — Figma 원문 "SK그룹 콩앱 내부 모바일 vue 퍼블"보다 현재 "SK그룹 공식앱 내부 모바일"(+vue 태그)가 더 정돈된 것으로 보여 현행 유지.
|
|
- PROJECT 6번 카드 회사명 — Figma "롯데지에프알" vs 현재 "캐나다구스 코리아", 현행 유지.
|
|
|
|
재확인해서 "이미 정확함"으로 확인 닫은 것:
|
|
- ABOUT US 배경(별빛 텍스처, opacity 처리 포함), 콘텐츠/카피 전부 일치.
|
|
- HISTORY 2025년 그룹 13개 항목 전부 Figma와 제목·날짜·태그까지 정확히 일치(이전엔 누락 의심했으나 재확인 결과 모두 있었음). 좌측 사진/2024~2021 collapsed 항목은 기존 미해결 상태 그대로.
|
|
- CONTACT 텍스트 콘텐츠(주소/이메일/폼 placeholder/체크박스 문구/Recruitment 태그) 전부 일치.
|
|
|
|
---
|
|
|
|
# 미완료 / 확인 필요 항목 (위에서부터 확인)
|
|
|
|
추측해서 임의로 채운 값이 아니라, 실제로 막힌 지점만 기록한다. 아래 항목들은 자산(이미지/폰트) 전달이나 사용자 결정이 필요해서 남아있다.
|
|
|
|
## GNB (모바일 드로어)
|
|
|
|
- **폰트 확인 필요** — 모바일 메뉴 항목 폰트가 처음엔 Figma 렌더에서 업라이트(정체) 세리프로 보인다고 판단해서 프로젝트에 있는 `DM Serif Display Italic`(이탤릭)으로 대체 적용했었음. 그런데 다시 렌더(`2319:5998`)를 보니 오히려 **민무늬 산세리프**(획 두께 균일, O/A가 기하학적 원형)처럼 보여서 기존 판단이 맞는지 의문이 생김. 사용자에게 (1) 지금처럼 이탤릭 세리프 유지 (2) 산세리프(SUIT 등)로 변경 (3) 별도 업라이트 세리프 폰트 파일 구해서 교체, 셋 중 결정 필요.
|
|
|
|
## HISTORY
|
|
|
|
- 좌측 세로 사진(나선형 건축물 텍스처)은 에셋 추출이 안 돼서 기존 `images/history-1.jpg`를 임시로 대체 사용 중. 실제 Figma 이미지로 교체 필요.
|
|
- 2024/2023/2022/2021년 그룹은 Figma 렌더에서 아코디언이 collapsed 상태로 보여서 항목이 1개씩만 보인다(2024: 우리은행 로보어드바이저 구축, 2023: 신한은행 슈퍼SOL 운영 계약, 2022: 한화금융 서비스앱 플러스 리뉴얼 2차 계약, 2021: 롯데 렌터카 차세대 구축 계약). 펼쳤을 때 추가 항목이 더 있는지 정적 렌더로는 확인이 안 돼서 일단 보이는 1개씩만 반영함. 펼침 상태의 전체 목록 확인 필요.
|
|
- HISTORY 섹션의 모바일 레이아웃은 별도 figma 크롭을 못 받아서, 좌측 사진을 숨기고 타임라인만 세로로 쌓는 형태로 추정 구현함. 실제 모바일 디자인 확인 필요.
|
|
|
|
## VISION
|
|
|
|
- **인용구 폰트 결정 필요** — 인용구("Flawless execution...") 텍스트의 Figma 렌더 폰트가 라운드체 산세리프로 보이는데, 프로젝트에 등록된 폰트(SUIT, DM Serif Display Italic) 중 일치하는 게 없음. 일단 SUIT로 대체했음. (1) 지금처럼 SUIT 유지 (2) 라운드체 산세리프 폰트 파일을 구해서 교체, 둘 중 결정 필요.
|
|
|
|
---
|
|
|
|
# 완료된 항목 (참고용, 더 손댈 필요 없음)
|
|
|
|
## HOME
|
|
|
|
- **배경 패턴** — 동심원 패턴이 아니라 Unsplash 무료 사진(`A star trail over a body of water`, 작가 Reign Abarintos, id `-cKXtsJWU-I`)으로 확인됨. 순수 CSS로는 재현 불가 판단(불규칙한 별빛 줄무늬·노이즈가 있는 실제 사진). 사용자가 Figma에서 export해서 `src/images/bg_home.png`로 전달 → 적용 완료(2026-06-24). 자리채움으로 쓰던 GSAP blob 애니메이션(컬러 블러 도형)은 Figma에 없는 요소라 사용자 확인받고 완전히 제거(`.intro__blobs`/`.blob*` 마크업·SCSS·JS), `.intro__bg`(배경 이미지, opacity 0.2, GSAP 0→0.2 페이드인)로 교체. 텍스트 순차 등장 애니메이션은 유지.
|
|
|
|
## PROJECT
|
|
|
|
- 카드 레이아웃을 고정 `aspect-ratio: 16/10` 크롭 방식에서 이미지 원본 비율 그대로 쌓는 매스너리 방식으로 변경(`_projects.scss`).
|
|
- 11번째 카드 내용을 "한화 GAsk 구축 프로젝트(한화)" → "롯데 GA2ck 구축 프로젝트 (롯데 렌터카)(롯데)"로 수정 — 사용자 확인받고 반영함. 날짜(`2021.11`)는 기존 값 유지, 재확인 안 함.
|
|
|
|
## CONTACT/FOOTER
|
|
|
|
- 문서 상단 "06_Expertise" 링크(PC `2247:2253` / 모바일 `2319:5082`)가 실제로는 CONTACT/FOOTER 디자인이었음(라벨 오기로 추정). 기존에 중복으로 남아있던 옛 `<section id="expertise">`(4개 서비스 목록, 이미 ABOUT 섹션에 이전되어 있던 내용)는 삭제.
|
|
- CONTACT를 "WELCOME BODA LAB" 헤딩 + 설명 + Head Office(Address/e-mail/tel 3필드, fax·지도 삭제) + Contact Us 폼(2단: 입력 4개 스택 + 우측 문의내용, placeholder에 `*`, 체크박스 문구를 "[필수] 개인정보 수집 및 이용 동의"로) + Recruitment 태그 구조로 교체. 아코디언 라벨 "프로젝트 문의"→"Contact Us", "채용"→"Recruitment". Head Office 정보도 새 값으로 교체: Address "서울시 강서구 마곡중앙로 161-8, 두산더랜드파크 C동 618호" / e-mail `koji@bodalab.co.kr` / tel `010-4169-4728`.
|
|
- **색상 1차 작업 누락 → 재수정함**: 처음엔 다른 섹션과 동일하게 다크 테마(검은 배경/흰 텍스트)로 만들었는데, 사용자가 Figma와 다르다고 지적함. 다시 렌더 확인해보니 이 섹션(CONTACT)만 Figma에서 **흰 배경 + 검은 텍스트**(라이트 테마)로 되어 있었음 — 다른 섹션과 의도적으로 색 반전된 구간. `_contact.scss` 전체를 라이트 테마로 재작업: 배경 `$color-white`, 텍스트 `$color-dark` 계열, 강조색(Address/e-mail/tel 라벨, SEND 버튼, 체크박스 체크 상태, Recruitment 태그 hover)은 `$color-cyan`→`$color-blue`(`#7796ff`)로 교체. 아코디언 화살표 아이콘(`icon-chevron.svg`)은 흰색 stroke라 흰 배경에서 안 보이므로 `filter: invert(1)`로 우회. `.footer`도 `.contact` 안에 있어서 같은 배경을 쓰게 되므로 footer 텍스트 색도 함께 라이트 테마로 변경(footer 전용 Figma 노드는 없어서 추정 적용).
|
|
- footer 연락처가 옛 값(`bodalab@bodalab.com`, `010-1234-5678`)으로 Head Office의 새 연락처와 다른 문제 — **사용자가 현행 유지로 결정함(2026-06-24)**. footer 전용 Figma 노드가 없어서 더 손대지 않음.
|
|
- `npm run build` 통과, playwright로 PC(1440px)/모바일(390px) 스크린샷 확인하여 Figma 렌더와 색상·레이아웃 일치 확인함.
|
|
|
|
## GNB
|
|
|
|
- **점검 완료(2026-06-24)** — playwright로 769px~1440px 전 구간 데스크톱 nav 줄바꿈/overflow 없음 확인, 스크롤에 따른 `isActive` 전환(섹션 진입 시 해당 메뉴로 자동 전환) 정상 동작 확인, 모바일 풀스크린 드로어도 정상.
|
|
- 모바일 드로어 메뉴 라벨 "PROJECTS"(복수형)가 데스크톱 nav·PROJECT 섹션 타이틀("PROJECT", 단수형)과 다른 것처럼 보였으나, Figma 모바일 드로어 렌더(`2319:5998`)에도 "PROJECTS"로 되어 있어서 **현행 유지**(불일치 아니라 Figma 의도).
|
|
|
|
## 최종 정리
|
|
|
|
- ~~파일명 정리~~ → **완료(2026-06-24)**. `_projects.scss` → `_project.scss`로 리네임, `index.scss`의 `@use "page/projects"`도 `@use "page/project"`로 수정. 빌드 재확인 통과.
|
|
- ~~안 쓰는 이미지 정리~~ → **완료(2026-06-24)**. `about-hand.jpg`(7.4MB), `vision-1/2/3.jpg`, `map.svg` 전부 코드 내 참조 없음을 grep으로 재확인 후 삭제함. `history-1.jpg`는 재사용 중이라 유지.
|
|
- ~~`npm run format`~~ → **완료(2026-06-24)**. `introAnimation.js` 포맷팅 외 변경 없음. `npm run build`도 재확인 통과.
|
|
|
|
---
|
|
|
|
# 참고: Figma 노드 ID 모음 (file_key: `MnwN1Uzg5F6ks9Clr1brLW`)
|
|
|
|
- PC 전체 페이지(컴포지트, 모든 섹션 한눈에 보임): `2247:2093`
|
|
- 01_HOME (PC): `2247:2094`
|
|
- 02_ABOUT US (PC, EXPERTISE 포함): `2247:2230`
|
|
- 03_HISTORY (PC): `2247:2121`
|
|
- VISION PC: `2247:2183` / VISION 모바일: `2319:4183`
|
|
- PROJECT PC: `2247:2202` / PROJECT 모바일: `2319:4231` — 렌더 확인·반영 완료(이미지 9~13 포함 전체)
|
|
- CONTACT/FOOTER (문서 상단 "06_Expertise" 링크가 실제 이 내용임) PC: `2247:2253` / 모바일: `2319:5082` — 렌더 확인·반영 완료(footer 영역 제외)
|
|
- 모바일 전체 페이지(컴포지트): `2319:5243`
|
|
- 모바일 GNB 드로어(열린 상태): `2319:5998`
|
|
|
|
# 참고: Figma MCP 연결 관련 메모 (재현/트러블슈팅용)
|
|
|
|
- **환경이 Windows(`d:/repository/boda-lab`)에서 이 Mac(`/Users/heemac/repository/project-bodalab`)으로 바뀜.** Windows 때 설정(`.mcp.json`에 nvm4w 절대경로 `npx.cmd` 지정)은 이 머신에 적용 안 됨 — npx/node 자체가 새로 깔린 환경이라 처음엔 figma-mcp가 전혀 연결 안 되어 있었음.
|
|
- 이 Mac에서는 프로젝트 루트 `.mcp.json`(git에는 `.gitignore`로 추적 제외됨)에 `{ "mcpServers": { "figma": { "command": "npx", "args": ["-y", "figma-mcp"], "env": { "FIGMA_API_KEY": "..." } } } }` 형태로 새로 등록함. macOS는 nvm 심볼릭링크 문제가 없어서 `command: "npx"`만으로 동작함(절대경로 불필요).
|
|
- **`.mcp.json`은 세션 시작 시점에 로드된다.** 파일을 새로 만들거나 고쳐도 같은 대화 세션에는 바로 안 먹히고, Claude Code를 재시작(새 세션)해야 도구가 인식됨.
|
|
- 도구: `mcp__figma__add_figma_file(url)` — 파일 전체를 JSON으로 덤프하는데, 파일이 커서 약 25k 토큰 근처(`01_HOME`~`03_HISTORY` 중반)에서 항상 잘림. `node-id` 쿼리 파라미터를 URL에 넣어도 무시되고 항상 전체 문서 기준으로 덤프됨 — 범위 제한 불가.
|
|
- 도구: `mcp__figma__view_node(file_key, node_id)` — 특정 노드를 PNG로 렌더해서 보여줌(파일로 저장은 안 됨, 대화창에만 표시). 섹션별 정밀 확인에 주력 도구로 사용 중. 429(Rate Limit)가 났던 적이 있었으나 환경이 바뀐 뒤로는 재현 안 됨.
|
|
- 이미지 에셋(사진/목업) 자체는 이 MCP로 export/저장이 안 됨 — 필요한 이미지는 Figma에서 사용자가 직접 Export 해서 `src/images/`에 넣어줘야 함.
|
|
|
|
# 참고: 공통 / 도구 제약
|
|
|
|
- `add_figma_file`이 파일 전체를 한 번에 JSON 덤프하는 방식이라 토큰 한도에 걸려 `01_HOME` ~ `03_HISTORY` 중반 이후 노드는 JSON으로 못 받았다. `view_node(file_key, node_id)`로 노드 ID를 알 때만 PNG 렌더로 확인 가능.
|
|
- `view_node`는 이미지를 대화창에 렌더만 해줄 뿐, 파일로 저장(export)하는 기능이 없다.
|
|
- **위 두 제약은 Figma REST API를 직접 호출하면 둘 다 우회된다 (2026-06-25 확인).** `.mcp.json`의 `FIGMA_API_KEY` 값을 그대로 가져다 `curl`로 직접 호출하면 됨:
|
|
- **특정 노드만 JSON으로 받기** (전체 덤프 토큰 한도 문제 없음): `GET https://api.figma.com/v1/files/{file_key}/nodes?ids={node_id}` + 헤더 `X-Figma-Token: {key}`. VISION/PROJECT/CONTACT처럼 `add_figma_file`로 못 받던 후반 섹션도 이 방식으로 전체 서브트리(좌표/색상/텍스트/이미지 ref 전부)를 받을 수 있었음.
|
|
- **노드를 합성 이미지로 export 받기** (이게 핵심): `GET https://api.figma.com/v1/images/{file_key}?ids={node_id}&format=jpg&scale=2` + 같은 헤더 → `{images: {node_id: "https://figma-alpha-api.s3...": ...}}` 형태로 S3 다운로드 URL을 줌. 이 URL을 `curl`/`https.get`으로 받으면 그 노드가 화면에 렌더된 모습 그대로(마스크·합성·필터 다 적용된 상태) 파일로 저장 가능. PROJECT 카드 9~13번의 "Thumbnails" 노드(목업+스크린샷 합성)를 이 방법으로 export해서 `project-9.jpg`~`project-13.jpg`로 확보함. "Figma에서 사용자가 직접 export 해줘야 한다"던 기존 제약은 더 이상 유효하지 않음 — 노드 ID만 알면 이 흐름으로 바로 받을 수 있다.
|
|
- 순서: ① 텍스트로 대상 노드 찾기(JSON에서 `characters` 검색) → ② 그 노드의 적절한 조상 프레임 id 확인(카드/섹션 단위) → ③ images 엔드포인트로 export → ④ 다운로드 후 `src/images/`에 저장.
|