# 디자인 링크 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 --- # 미완료 / 확인 필요 항목 Figma MCP(`figma-mcp`)로 확인이 안 되거나 추출이 안 되는 항목을 섹션별로 기록한다. 추측해서 임의로 채운 값이 아니라, 실제로 막힌 지점만 기록한다. --- ## 다음 세션 인수인계 (2026-06-24 작업분) 이 Mac(`/Users/heemac/repository/project-bodalab`)으로 환경이 바뀌면서 figma-mcp가 한 번 끊겼다가 새로 연결됨(아래 "Figma MCP 연결 관련 메모" 참고). 429는 해소됨. ### 완료된 섹션 - HOME, ABOUT US(+EXPERTISE), HISTORY, VISION — 마크업·스타일·JS 반영, 빌드 통과 (이전 세션). - **PROJECT** — 카드 레이아웃을 고정 `aspect-ratio: 16/10` 크롭 방식에서 이미지 원본 비율 그대로 쌓는 매스너리 방식으로 변경(`_projects.scss`). 11번째 카드 내용을 "한화 GAsk 구축 프로젝트(한화)"→"롯데 GA2ck 구축 프로젝트 (롯데 렌터카)(롯데)"로 수정 — **사용자 확인받고 반영함**. 날짜(`2021.11`)는 기존 값 그대로 유지, 재확인은 안 함. - **CONTACT/FOOTER** — 사용자가 "06_Expertise" 라고 표기해 둔 링크(PC `2247:2253` / 모바일 `2319:5082`)가 실제로는 CONTACT/FOOTER 디자인이었음(라벨 오기로 추정). 기존에 중복으로 남아있던 옛 `
`(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 디자인 의도와 다를 수 있음). - `npm run build` 통과, playwright로 PC(1440px)/모바일(390px) 스크린샷 확인하여 Figma 렌더와 색상·레이아웃 일치 확인함. ### 남은 작업 1. **PROJECT 이미지 9~13번 누락** — 9(프로스펙스)·10(중소기업창업)·11(롯데 GA2ck)·12(국민은행)·13(코나아이 PC) 카드는 Figma 새 디자인엔 실제 목업 이미지가 있는데, 이 MCP로는 이미지 export가 안 돼서 여전히 빈 박스(`project__thumbEmpty`)로 남아있음. **사용자가 Figma에서 직접 5개 이미지를 export 해서 `src/images/project-9.jpg` ~ `project-13.jpg`로 전달해야 적용 가능.** 2. **Footer 컨텐츠 미반영** — 이번 CONTACT 작업 대상 노드(`2247:2253`/`2319:5082`)는 Recruitment 태그까지만 보이고 그 아래 footer(브랜드/연락처/copyright) 영역은 렌더에 포함되지 않았음. 그래서 footer는 옛 값(`bodalab@bodalab.com`, `010-1234-5678`)을 그대로 두었는데, 새 Head Office 연락처(`koji@bodalab.co.kr`, `010-4169-4728`)와 불일치함. footer 전용 Figma 프레임 링크나 "이 연락처로 통일해도 되는지" 확인 필요. 3. **GNB 마무리** — 전체 섹션이 다 만들어진 뒤 스크롤 시 활성 메뉴(`isActive`) 동작, 반응형 폭 최종 점검 필요. (아직 미착수) 4. **최종 정리** - 파일명 정리: `_projects.scss`를 새 네이밍(`_project.scss` 등)으로 통일할지 결정 미정. - 안 쓰는 이미지 정리: `about-hand.jpg`(참조 제거됨, 삭제 검토), `vision-1/2/3.jpg`(참조 없음, 삭제 검토). `history-1.jpg`는 재사용 중이라 삭제 금지. `map.svg`도 이번에 `.contact__map` 삭제로 참조가 없어졌으니 삭제 검토 목록에 추가. - `npm run format` 최종 실행 (이번 세션에선 `npm run build`만 실행함, 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` — 렌더 확인 완료, 반영 완료(이미지 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로 렌더해서 보여줌(파일로 저장은 안 됨, 대화창에만 표시). 섹션별 정밀 확인에 주력 도구로 사용 중. 이전 세션엔 이 API가 429를 반환했었는데, 이번 세션(새 환경)에서는 재현 안 되고 바로 정상 렌더됨. - 이미지 에셋(사진/목업) 자체는 이 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 - ~~배경 패턴 이미지 미반영~~ → **해결함(2026-06-24)**. 실제로는 동심원 패턴이 아니라 Unsplash 무료 사진(`A star trail over a body of water`, 작가 Reign Abarintos, id `-cKXtsJWU-I`)이었음 — 순수 CSS로는 재현 불가 판단(불규칙한 별빛 줄무늬·노이즈가 있는 실제 사진이라 `radial-gradient` 등으로 흉내내는 수준에 그침). 사용자가 Figma에서 직접 export해서 `src/images/bg_home.png`로 전달함. 적용하면서 그동안 자리채움으로 쓰던 GSAP blob 애니메이션(컬러 블러 도형, `introAnimation.js`)은 Figma 디자인에 없는 요소라 **사용자 확인받고 완전히 제거**함 — `.intro__blobs`/`.blob*` 마크업·SCSS·JS 전부 삭제, `.intro__bg`(배경 이미지, opacity 0.2, GSAP로 0→0.2 페이드인)로 교체. 텍스트 순차 등장 애니메이션(`intro__sub`→`intro__title` fade-up)은 그대로 유지. ## 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)로 대체했다. --- ## (이후 섹션 작업하면서 추가)