diff --git a/doc/미완료.md b/doc/미완료.md index dfa0a31..c80e430 100644 --- a/doc/미완료.md +++ b/doc/미완료.md @@ -47,16 +47,35 @@ https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80 검수 후에도 남아있는 미해결 항목은 아래 그대로. +## 추가 검수 (같은 날, 이어서) — GNB 위치 문제 제보 후 전체 섹션 재검수 + +사용자가 "GNB 메뉴/로고 위치가 새 디자인과 안 맞는다"고 제보 → Figma 토큰을 새로 발급받아 `.mcp.json` 갱신, Claude Code 재시작 후 figma-mcp 재연결. 이후 PC/모바일 전 섹션을 Figma 노드 JSON과 좌표 단위로 대조함. + +**중요 발견 — Figma REST API 직접 호출로 기존 제약 다수 해결.** 자세한 내용은 맨 아래 "Figma MCP 연결 관련 메모" 갱신분 참고. 요약하면, MCP 도구(`add_figma_file`/`view_node`)의 한계(전체 덤프 시 토큰 잘림, 이미지 export 불가)를 `.mcp.json`에 있는 `FIGMA_API_KEY`로 Figma REST API를 직접 호출해서 우회함. 이번 세션부터는 이 방법을 우선적으로 써야 함. + +고친 것: +- **GNB(PC) 좌우 패딩/로고/메뉴 간격** — Figma 좌표 추출 결과 헤더 좌우 패딩 100px(현재 48px이었음), 로고 lockup 126px(현재 90px), 메뉴 아이템 간 itemSpacing 12px(현재 없음)로 확인. `_gnb.scss`에서 `.gnb__inner` 패딩을 `clamp(24px, 5.2vw, 100px)`로, `.gnb__logoImg` width를 126px로, `.gnb__navList`에 `gap: 12px` 추가. 모바일은 로고가 60px 높이 헤더에서 넘치는 걸 막기 위해 `_intro.scss`의 모바일 분기에서 90px로 별도 고정. +- **VISION 배경 이미지 — "에셋 추출 불가"였던 항목 해결.** Figma REST API로 VISION 노드 JSON을 직접 조회해보니 ABOUT US와 **동일한 이미지**(`unsplash:Cq5NaI0yKBE`, opacity 0.5)를 재사용하고 있었음. 이미 로컬에 있는 `unsplash_Cq5NaI0yKBE.png`를 그대로 `.vision__bg`에 적용(about과 동일 패턴: `position:absolute; inset:0; background-size:cover; opacity:0.5`). 새 에셋 작업 불필요했음. +- **PROJECT 이미지 9~13번 누락 — "에셋 추출 불가"였던 항목 해결.** Figma REST API의 `GET /v1/images/:file_key?ids=...` 렌더 엔드포인트로 각 카드의 "Thumbnails" 노드(목업+스크린샷 합성)를 JPG로 직접 export 받음(9=프로스펙스 ONE SPEC, 10=중소벤처기업부, 11=롯데렌터카, 12=KB리브모바일, 13=코나아이 PC, 전부 회사명과 내용 일치 확인). `src/images/project-9.jpg` ~ `project-13.jpg`로 저장하고 HTML의 빈 `project__thumbEmpty` 박스를 ``로 교체, 이제 안 쓰는 `.project__thumbEmpty` CSS 규칙 삭제. +- **PROJECT 카드 제목 누락 텍스트 복원** — Figma 원문과 전수 대조해서 2건 발견: 3번 카드 "PNS네트웍스 디지털 플랫폼 구축" → "PNS네트웍스 디지털 포워딩 플랫폼 구축 프로젝트"(포워딩/프로젝트 누락), 8번 카드 "그린카 차세대" → "그린카 차세대 프로젝트"(프로젝트 누락). alt 텍스트도 함께 수정. +- **sectionTitle 전역 폰트 크기** — Contact의 "Head Office" 라벨이 Figma는 32px 헤딩인데 사이트는 12px 회색 소문자 라벨(`.contact__label`)로 잘못 스타일링되어 있던 걸 발견하면서, 같이 쓰이는 `.sectionTitle`(ABOUT US/HISTORY/VISION/PROJECT 타이틀 공통 클래스) 자체가 Figma 48px 대비 40px로 작게 잡혀 있던 것도 함께 발견. `index.scss`의 `.sectionTitle`과 `_contact.scss`의 `.contact__heading` 모두 `clamp(28px, 3vw, 48px)`로 상한 수정 — **전 섹션 타이틀 크기에 영향 있는 변경.** +- **Contact 라벨 스타일 정리** — `.contact__label`("Head Office")을 32px/weight 400/다크 컬러로, `.contact__infoLabel`("Address"/"e-mail"/"tel")을 12px→18px·weight 600→700으로, `.contactAccordion__header`("Contact Us"/"Recruitment")를 20px→32px로 Figma 수치에 맞춰 수정. + +확인 후 "현행 유지"로 사용자가 확정한 것 (Figma 쪽이 오타/메모성 텍스트로 판단): +- PROJECT 2번 카드(SK그룹) 제목·태그 — Figma 원문 "SK그룹 콩앱 내부 모바일 vue 퍼블"보다 현재 "SK그룹 공식앱 내부 모바일"(+vue 태그)가 더 정돈된 것으로 보여 현행 유지. +- PROJECT 6번 카드 회사명 — Figma "롯데지에프알" vs 현재 "캐나다구스 코리아", 현행 유지. + +재확인해서 "이미 정확함"으로 확인 닫은 것: +- ABOUT US 배경(별빛 텍스처, opacity 처리 포함), 콘텐츠/카피 전부 일치. +- HISTORY 2025년 그룹 13개 항목 전부 Figma와 제목·날짜·태그까지 정확히 일치(이전엔 누락 의심했으나 재확인 결과 모두 있었음). 좌측 사진/2024~2021 collapsed 항목은 기존 미해결 상태 그대로. +- CONTACT 텍스트 콘텐츠(주소/이메일/폼 placeholder/체크박스 문구/Recruitment 태그) 전부 일치. + --- # 미완료 / 확인 필요 항목 (위에서부터 확인) 추측해서 임의로 채운 값이 아니라, 실제로 막힌 지점만 기록한다. 아래 항목들은 자산(이미지/폰트) 전달이나 사용자 결정이 필요해서 남아있다. -## 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`로 전달해야 적용 가능.** - ## GNB (모바일 드로어) - **폰트 확인 필요** — 모바일 메뉴 항목 폰트가 처음엔 Figma 렌더에서 업라이트(정체) 세리프로 보인다고 판단해서 프로젝트에 있는 `DM Serif Display Italic`(이탤릭)으로 대체 적용했었음. 그런데 다시 렌더(`2319:5998`)를 보니 오히려 **민무늬 산세리프**(획 두께 균일, O/A가 기하학적 원형)처럼 보여서 기존 판단이 맞는지 의문이 생김. 사용자에게 (1) 지금처럼 이탤릭 세리프 유지 (2) 산세리프(SUIT 등)로 변경 (3) 별도 업라이트 세리프 폰트 파일 구해서 교체, 셋 중 결정 필요. @@ -69,7 +88,6 @@ https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80 ## VISION -- 배경의 별빛/우주 텍스처 이미지는 ABOUT US와 마찬가지로 에셋 추출이 안 돼서 단색 `$color-bg`로 대체함. - **인용구 폰트 결정 필요** — 인용구("Flawless execution...") 텍스트의 Figma 렌더 폰트가 라운드체 산세리프로 보이는데, 프로젝트에 등록된 폰트(SUIT, DM Serif Display Italic) 중 일치하는 게 없음. 일단 SUIT로 대체했음. (1) 지금처럼 SUIT 유지 (2) 라운드체 산세리프 폰트 파일을 구해서 교체, 둘 중 결정 필요. --- @@ -113,7 +131,7 @@ https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80 - 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 제외) +- PROJECT PC: `2247:2202` / PROJECT 모바일: `2319:4231` — 렌더 확인·반영 완료(이미지 9~13 포함 전체) - CONTACT/FOOTER (문서 상단 "06_Expertise" 링크가 실제 이 내용임) PC: `2247:2253` / 모바일: `2319:5082` — 렌더 확인·반영 완료(footer 영역 제외) - 모바일 전체 페이지(컴포지트): `2319:5243` - 모바일 GNB 드로어(열린 상태): `2319:5998` @@ -129,5 +147,9 @@ https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80 # 참고: 공통 / 도구 제약 -- `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/`에 받아와야 한다. +- `add_figma_file`이 파일 전체를 한 번에 JSON 덤프하는 방식이라 토큰 한도에 걸려 `01_HOME` ~ `03_HISTORY` 중반 이후 노드는 JSON으로 못 받았다. `view_node(file_key, node_id)`로 노드 ID를 알 때만 PNG 렌더로 확인 가능. +- `view_node`는 이미지를 대화창에 렌더만 해줄 뿐, 파일로 저장(export)하는 기능이 없다. +- **위 두 제약은 Figma REST API를 직접 호출하면 둘 다 우회된다 (2026-06-25 확인).** `.mcp.json`의 `FIGMA_API_KEY` 값을 그대로 가져다 `curl`로 직접 호출하면 됨: + - **특정 노드만 JSON으로 받기** (전체 덤프 토큰 한도 문제 없음): `GET https://api.figma.com/v1/files/{file_key}/nodes?ids={node_id}` + 헤더 `X-Figma-Token: {key}`. VISION/PROJECT/CONTACT처럼 `add_figma_file`로 못 받던 후반 섹션도 이 방식으로 전체 서브트리(좌표/색상/텍스트/이미지 ref 전부)를 받을 수 있었음. + - **노드를 합성 이미지로 export 받기** (이게 핵심): `GET https://api.figma.com/v1/images/{file_key}?ids={node_id}&format=jpg&scale=2` + 같은 헤더 → `{images: {node_id: "https://figma-alpha-api.s3...": ...}}` 형태로 S3 다운로드 URL을 줌. 이 URL을 `curl`/`https.get`으로 받으면 그 노드가 화면에 렌더된 모습 그대로(마스크·합성·필터 다 적용된 상태) 파일로 저장 가능. PROJECT 카드 9~13번의 "Thumbnails" 노드(목업+스크린샷 합성)를 이 방법으로 export해서 `project-9.jpg`~`project-13.jpg`로 확보함. "Figma에서 사용자가 직접 export 해줘야 한다"던 기존 제약은 더 이상 유효하지 않음 — 노드 ID만 알면 이 흐름으로 바로 받을 수 있다. + - 순서: ① 텍스트로 대상 노드 찾기(JSON에서 `characters` 검색) → ② 그 노드의 적절한 조상 프레임 id 확인(카드/섹션 단위) → ③ images 엔드포인트로 export → ④ 다운로드 후 `src/images/`에 저장. diff --git a/src/images/logo.png b/src/images/logo.png new file mode 100644 index 0000000..48d82ab Binary files /dev/null and b/src/images/logo.png differ diff --git a/src/images/logo.svg b/src/images/logo.svg deleted file mode 100644 index bd18adc..0000000 --- a/src/images/logo.svg +++ /dev/null @@ -1,17 +0,0 @@ - - - - - - - - - - - - - - - - - diff --git a/src/images/project-10.jpg b/src/images/project-10.jpg new file mode 100644 index 0000000..182381a Binary files /dev/null and b/src/images/project-10.jpg differ diff --git a/src/images/project-11.jpg b/src/images/project-11.jpg new file mode 100644 index 0000000..1be99e0 Binary files /dev/null and b/src/images/project-11.jpg differ diff --git a/src/images/project-12.jpg b/src/images/project-12.jpg new file mode 100644 index 0000000..c0a4976 Binary files /dev/null and b/src/images/project-12.jpg differ diff --git a/src/images/project-13.jpg b/src/images/project-13.jpg new file mode 100644 index 0000000..99e1a96 Binary files /dev/null and b/src/images/project-13.jpg differ diff --git a/src/images/project-9.jpg b/src/images/project-9.jpg new file mode 100644 index 0000000..955459d Binary files /dev/null and b/src/images/project-9.jpg differ diff --git a/src/index.html b/src/index.html index bf665c0..f31bb91 100644 --- a/src/index.html +++ b/src/index.html @@ -14,7 +14,7 @@