70 lines
8.3 KiB
Markdown
70 lines
8.3 KiB
Markdown
# 미완료 / 확인 필요 항목
|
|
|
|
Figma MCP(`figma-mcp`)로 확인이 안 되거나 추출이 안 되는 항목을 섹션별로 기록한다. 추측해서 임의로 채운 값이 아니라, 실제로 막힌 지점만 기록한다.
|
|
|
|
---
|
|
|
|
## 다음 세션 인수인계 (작업 중단 시점 기록)
|
|
|
|
사용자가 자리를 비워야 해서 PROJECT 섹션 작업 중 중단됨. 아래 순서대로 이어서 진행하면 된다.
|
|
|
|
### 완료된 섹션
|
|
- HOME, ABOUT US(+EXPERTISE), HISTORY, VISION — 마크업(`src/index.html`)·스타일(`src/scss/page/*.scss`)·필요 JS(`src/js/main.js`) 모두 반영, `npm run build` 통과 확인됨.
|
|
|
|
### 남은 작업 (순서대로)
|
|
1. **PROJECT 섹션** — 작업 중 Figma 이미지 렌더 API가 429(Rate Limit)를 계속 반환해서 멈춤. 노드 ID는 이미 확보됨 (아래 "Figma 노드 ID 모음" 참고). `mcp__figma__view_node`로 PC(`2247:2202`)와 모바일(`2319:4231`) 다시 렌더 시도부터 시작. 429가 계속되면 5~10분 정도 기다린 후 재시도하거나, 이미 위에서 확보한 PC 전체 컴포지트 이미지(`2247:2093` 렌더 결과, 이 문서/대화 로그에는 없고 이전 대화 컨텍스트에만 있었음 — 새 세션이면 `2247:2093`을 다시 view_node로 떠야 함)로 대략적인 카피/태그만 추정하고 정확한 카피는 "확인 필요"로 명시.
|
|
2. **CONTACT/FOOTER 섹션** — 아직 Figma 노드 ID조차 확보 못함. 사용자에게 PC/모바일 프레임 "Copy link to selection" 링크 요청부터 시작해야 함. 옛 디자인(`src/index.html`에 남아있던 구버전 구조 참고용으로 git log/old commit에서 확인 가능)에는 Head Office 주소, Contact 폼(회사명/담당자/연락처/이메일/문의내용/개인정보동의/SEND), Recruitment 태그(Planner & Consulting/Designer/Publisher/Scripter), footer(브랜드/연락처/copyright)가 있었음 — 새 디자인 렌더(PC 전체 컴포지트, `2247:2093`)에서도 "WELCOME BODA LAB", Head Office, Contact Us 폼, Recruitment 태그, footer가 보였으므로 큰 구조는 유사할 것으로 추정되나 정확한 카피/배치는 미확인.
|
|
3. **GNB 마무리** — HOME 작업 때 1차로 완성했음(데스크톱 6개 메뉴, 모바일 풀스크린 드로어 + 닫기 X). 전체 섹션이 다 만들어진 뒤 스크롤 시 활성 메뉴(`isActive`) 동작, 반응형 폭(좁은 노트북 화면에서 6개 메뉴 안 깨지는지) 최종 점검 필요.
|
|
4. **최종 정리**
|
|
- `src/scss/index.scss`의 `@use "page/..."` 목록은 이미 `gnb, intro, about, vision, projects, contact` 로 되어 있음. PROJECT/CONTACT 작업 후 파일명을 새 섹션에 맞게 정리할지 결정(`_projects.scss`→`_project.scss` 등 네이밍 통일 여부는 미정).
|
|
- 안 쓰는 이미지 정리: `about-hand.jpg`는 이미 HTML에서 참조 제거됨(파일 자체는 아직 디스크에 남아있을 수 있음, 삭제 필요). `vision-1/2/3.jpg`도 더 이상 참조 안 됨 — 삭제 검토. `history-1.jpg`는 HISTORY 좌측 사진 placeholder로 재사용 중(삭제하면 안 됨).
|
|
- `npm run build`, `npm run format` 최종 실행.
|
|
|
|
### 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` — **아직 렌더 못 받음(429)**
|
|
- CONTACT/FOOTER — **노드 ID 미확보**, 사용자에게 요청 필요
|
|
- 모바일 전체 페이지(컴포지트): `2319:5243`
|
|
- 모바일 GNB 드로어(열린 상태): `2319:5998`
|
|
|
|
### Figma MCP 연결 관련 메모 (재현/트러블슈팅용)
|
|
- 이 프로젝트(`d:/repository/boda-lab`)의 figma MCP 서버는 프로젝트 루트 `.mcp.json`에 등록되어 있음 (전역 `~/.claude.json`이 아니라 **프로젝트 단위 `.mcp.json` 파일** 방식).
|
|
- 서버 설정: stdio 방식, `command`는 nvm4w 심볼릭링크(`C:\nvm4w\nodejs\npx.cmd`)가 아니라 **실제 경로**(`C:\Users\HeeDesktop\AppData\Local\nvm\v24.16.0\npx.cmd`)로 지정해야 동작함 — Windows에서 VSCode 확장이 스폰하는 프로세스는 심볼릭링크/PATH를 못 찾는 경우가 있어서 절대경로로 우회한 것. `args: ["-y", "figma-mcp"]`, `env.FIGMA_API_KEY`로 키 전달.
|
|
- 도구: `mcp__figma__add_figma_file(url)` — 파일 전체를 JSON으로 덤프하는데, 파일이 커서 약 25k 토큰 근처(`01_HOME`~`03_HISTORY` 중반)에서 항상 잘림. `node-id` 쿼리 파라미터를 URL에 넣어도 무시되고 항상 전체 문서 기준으로 덤프됨 — 범위 제한 불가.
|
|
- 도구: `mcp__figma__view_node(file_key, node_id)` — 특정 노드를 PNG로 렌더해서 보여줌(파일로 저장은 안 됨, 대화창에만 표시). 섹션별 정밀 확인에 주력 도구로 사용 중. **오늘 PROJECT 섹션 작업 중 이 API가 429를 반환하기 시작했고, 5분+ 대기해도 풀리지 않았음.** 다음 세션에서도 재현되면 더 오래(10분+) 기다리거나, 사용자에게 Figma API 키/요금제 쪽 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 렌더로 확인 가능. VISION/PROJECT/CONTACT 등 이후 섹션은 작업 시점에 사용자에게 "Copy link to selection" 링크를 요청해서 진행한다.
|
|
- `view_node`는 이미지를 대화창에 렌더만 해줄 뿐, 파일로 저장(export)하는 기능이 없다. 따라서 Figma 안의 사진/목업 이미지 에셋(배경 텍스처, 프로젝트 카드 스크린샷 등)은 이 MCP로 직접 추출이 불가능하다. 실제 자산은 Figma에서 직접 "Export" 해서 `src/images/`에 받아와야 한다.
|
|
|
|
## HOME
|
|
|
|
- 배경의 원형 동심원 패턴 이미지(`unsplash:-cKXtsJWU-I`, opacity 0.2)는 에셋 추출이 안 돼서 반영하지 못했다. 사용자 결정에 따라 기존 GSAP blob 애니메이션(`introAnimation.js`)을 그대로 유지하기로 함 — 동심원 패턴 이미지를 쓰고 싶다면 Figma에서 해당 이미지를 export해서 전달 필요.
|
|
|
|
## GNB (모바일 드로어)
|
|
|
|
- 모바일 메뉴 항목 폰트가 Figma 렌더에서는 업라이트(정체) 세리프로 보이는데, 프로젝트에 있는 폰트 파일은 `DM Serif Display Italic`(이탤릭)뿐이라 정확히 매칭되는 폰트가 없다. 일단 이탤릭으로 대체 적용했다. 업라이트 세리프 폰트 파일을 구해서 교체할지 확인 필요.
|
|
|
|
## HISTORY
|
|
|
|
- 좌측 세로 사진(나선형 건축물 텍스처)은 에셋 추출이 안 돼서 기존 `images/history-1.jpg`를 임시로 대체 사용했다. 실제 Figma 이미지로 교체 필요.
|
|
- 2024/2023/2022/2021년 그룹은 Figma 렌더에서 아코디언이 collapsed 상태로 보여서 항목이 1개씩만 보인다(2024: 우리은행 로보어드바이저 구축, 2023: 신한은행 슈퍼SOL 운영 계약, 2022: 한화금융 서비스앱 플러스 리뉴얼 2차 계약, 2021: 롯데 렌터카 차세대 구축 계약). 펼쳤을 때 추가 항목이 더 있는지는 정적 렌더로 확인이 안 돼서, 일단 보이는 1개씩만 반영했다. 펼침 상태의 전체 목록 확인 필요.
|
|
- HISTORY 섹션의 모바일 레이아웃은 별도 figma 크롭을 못 받아서, 좌측 사진을 숨기고 타임라인만 세로로 쌓는 형태로 추정 구현했다. 실제 모바일 디자인 확인 필요.
|
|
|
|
## VISION
|
|
|
|
- 배경의 별빛/우주 텍스처 이미지는 ABOUT US와 마찬가지로 에셋 추출이 안 돼서 단색 `$color-bg`로 대체했다.
|
|
- 인용구("Flawless execution...") 텍스트의 Figma 렌더 폰트가 라운드체 산세리프로 보이는데, 프로젝트에 등록된 폰트(SUIT, DM Serif Display Italic) 중 일치하는 게 없다. Figma 쪽에서 폰트가 누락되어 대체 렌더링된 것일 수도 있어 원래 의도된 폰트를 특정하기 어렵다. 일단 기본 폰트(SUIT)로 대체했다.
|
|
|
|
---
|
|
|
|
## (이후 섹션 작업하면서 추가)
|