outsourcing
/
bodalab
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
bodalab/doc/미완료.md

8.3 KiB
Raw Blame History

미완료 / 확인 필요 항목

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)로 대체했다.

(이후 섹션 작업하면서 추가)