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

15 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

전체검수 결과 (2026-06-26)

.mcp.json figma 연결 정상 동작 확인 후 재검수함.

  • GNB 모바일 폰트 — 어제 "업라이트 세리프 vs 산세리프" 의문으로 남겨뒀던 건, 사용자가 Figma 인스펙터에서 실측값(font-family: SUIT, font-style: normal, font-weight: 400)을 직접 확인해줌. 세리프 추측이 틀렸던 것으로 확인. _gnb.scss의 .gnb__mobileNavLink에서 font-family: $font-serif; font-style: italic; 제거(기본 SUIT 상속). → 해결
  • VISION 인용구 폰트 — 마찬가지로 사용자가 Figma에서 별도 지정 폰트가 없음(SUIT)을 확인해줌. 기존 코드가 이미 SUIT를 쓰고 있어서 코드 변경 불필요. → 해결
  • DM Serif Display Italic 폰트 완전 삭제 — 위 GNB 수정으로 코드 전체에서 더 이상 안 쓰이게 되어 사용자 확인 후 정리함: _font.scss의 @font-face(Italic latin/latin-ext) 삭제, _variable.scss의 $font-serif 변수 삭제, src/font/DMSerifDisplay/ 폴더(woff2 2개) 삭제, doc/개발환경.md의 디렉터리 구조·웹폰트 표에서도 제거.
  • HISTORY 모바일 레이아웃 — 어제 "별도 크롭 못 받아서 추정 구현"이라 남겨뒀던 항목, 사용자가 알려준 모바일 링크(node-id 2319-2433)로 직접 확인함. 모바일 디자인엔 좌측 사진 영역 자체가 없고 타임라인만 존재 — 현재 .history__photo { display: none; } 구현이 추측이 아니라 실제 디자인과 정확히 일치함을 확인. → 해결(추측 아니었음, 확인 완료)
  • 빌드 회귀(이미지 압축 깨짐) 발견 및 수정 — 이 검수 도중 npm run build에서 거의 모든 jpg/png가 압축 없이 원본 그대로 나가는 걸 발견(project-4.jpg 2.2MB 등). 원인은 같은 세션에서 별도 작업(pnpm 권한 이슈 해결)으로 pnpm install을 실행했다가 node_modules가 pnpm 구조로 바뀌면서 pnpm이 기본 정책상 mozjpeg/optipng-bin/gifsicle 등 이미지 압축 바이너리의 postinstall 빌드 스크립트를 건너뛴 것. node_modules, pnpm-lock.yaml 삭제 후 npm ci 재설치로 복구, 압축률 64~94% 정상 확인. (CI는 npm ci만 쓰므로 pnpm으로 설치하면 안 됨 — 어제 메모 그대로 재확인됨.)

전체검수 결과 (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만 사용) 삭제. 사용자 확인 후 진행.

검수 후에도 남아있는 미해결 항목은 아래 그대로.

미완료 / 확인 필요 항목 (위에서부터 확인)

추측해서 임의로 채운 값이 아니라, 실제로 막힌 지점만 기록한다. 아래 항목들은 자산(이미지/폰트) 전달이나 사용자 결정이 필요해서 남아있다.

PROJECT

  • 이미지 9~13번 누락 — 9(프로스펙스)·10(중소기업창업)·11(롯데 GA2ck)·12(국민은행)·13(코나아이 PC) 카드는 Figma 새 디자인엔 실제 목업 이미지가 있는데, figma-mcp로는 이미지 export가 안 돼서 빈 박스(project__thumbEmpty)로 남아있음. 사용자가 Figma에서 직접 5개 이미지를 export 해서 src/images/project-9.jpg ~ project-13.jpg로 전달해야 적용 가능.

HISTORY

  • 좌측 세로 사진(나선형 건축물 텍스처)은 에셋 추출이 안 돼서 기존 images/history-1.jpg를 임시로 대체 사용 중. 실제 Figma 이미지로 교체 필요. (사용자가 직접 이미지 전달 예정)
  • 2024/2023/2022/2021년 그룹은 Figma 렌더에서 아코디언이 collapsed 상태로 보여서 항목이 1개씩만 보인다(2024: 우리은행 로보어드바이저 구축, 2023: 신한은행 슈퍼SOL 운영 계약, 2022: 한화금융 서비스앱 플러스 리뉴얼 2차 계약, 2021: 롯데 렌터카 차세대 구축 계약). 펼쳤을 때 추가 항목이 더 있는지 정적 렌더로는 확인이 안 돼서 일단 보이는 1개씩만 반영함. 펼침 상태의 전체 목록 확인 필요.

VISION

  • 배경의 별빛/우주 텍스처 이미지는 ABOUT US와 마찬가지로 에셋 추출이 안 돼서 단색 $color-bg로 대체함. (사용자가 직접 이미지 전달 예정)

완료된 항목 (참고용, 더 손댈 필요 없음)

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-26). 사용자가 Figma 인스펙터로 실측한 값(font-family: SUIT, normal, 400)을 확인해줌 — 세리프 추측 틀렸음. .gnb__mobileNavLink의 font-family: $font-serif; font-style: italic; 제거, 기본 SUIT 상속. 더 안 쓰게 된 DM Serif Display Italic 폰트(@font-face, woff2 파일, $font-serif 변수)는 전체 삭제함.

HISTORY (모바일)

  • 모바일 레이아웃 → 완료(2026-06-26). 사용자가 알려준 모바일 링크(node-id 2319-2433)로 확인 — 모바일 디자인엔 좌측 사진 영역이 원래 없고 타임라인만 존재. 기존 .history__photo { display: none; } 구현이 추측이 아니라 실제 디자인과 일치했음.

VISION (인용구 폰트)

  • 인용구 폰트 → 완료(2026-06-26). 사용자가 Figma에서 별도 지정 폰트 없음(SUIT)을 확인해줌. 기존 코드가 이미 SUIT라 변경 불필요.

최종 정리

  • 파일명 정리 → 완료(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 렌더로 확인 가능. VISION/PROJECT/CONTACT 등 이후 섹션은 작업 시점에 사용자에게 "Copy link to selection" 링크를 요청해서 진행한다.
  • view_node는 이미지를 대화창에 렌더만 해줄 뿐, 파일로 저장(export)하는 기능이 없다. 따라서 Figma 안의 사진/목업 이미지 에셋(배경 텍스처, 프로젝트 카드 스크린샷 등)은 이 MCP로 직접 추출이 불가능하다. 실제 자산은 Figma에서 직접 "Export" 해서 src/images/에 받아와야 한다.