13 KiB

Raw Blame History

디자인 링크

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 디자인이었음(라벨 오기로 추정). 기존에 중복으로 남아있던 옛 <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 디자인 의도와 다를 수 있음).
- npm run build 통과, playwright로 PC(1440px)/모바일(390px) 스크린샷 확인하여 Figma 렌더와 색상·레이아웃 일치 확인함.

남은 작업

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로 전달해야 적용 가능.
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 프레임 링크나 "이 연락처로 통일해도 되는지" 확인 필요.
GNB 마무리 — 전체 섹션이 다 만들어진 뒤 스크롤 시 활성 메뉴(isActive) 동작, 반응형 폭 최종 점검 필요. (아직 미착수)
최종 정리
- 파일명 정리: _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)로 대체했다.

13 KiB Raw Blame History