From aaef3f7750dd668007d495c2db64f58405be92a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=ED=9D=AC=EC=9B=90?= Date: Mon, 29 Jun 2026 13:38:43 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20ai=EA=B2=80=EC=88=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- doc/미완료.md | 190 +++++++++--------------------------- src/index.html | 40 ++++++-- src/js/main.js | 57 ++++++++++- src/scss/index.scss | 2 +- src/scss/page/_about.scss | 16 +-- src/scss/page/_contact.scss | 151 ++++++++++++++++++++++------ src/scss/page/_gnb.scss | 34 ++++++- src/scss/page/_intro.scss | 4 +- src/scss/page/_project.scss | 31 +++--- src/scss/page/_vision.scss | 9 +- 10 files changed, 329 insertions(+), 205 deletions(-) diff --git a/doc/미완료.md b/doc/미완료.md index 18f2634..e187596 100644 --- a/doc/미완료.md +++ b/doc/미완료.md @@ -1,158 +1,62 @@ -# 디자인 링크 +# 미완료 / 확인 필요 항목 + +추측해서 임의로 채운 값이 아니라, 실제로 막힌 지점만 기록한다. (2026-06-29 기준, figma-specs 전체 재검수 후 정리 — 완료된 항목은 모두 제거하고 현재 남아있는 것만 유지) + +## 인터랙션(behavior) — 남은 1건 (Recruitment 더보기는 구현 보류) + +`doc/figma-specs/11-interaction-notes.md` 기준 5개 중 4개(HISTORY 아코디언 단일 열림, PROJECT 더보기 페이지네이션, 개인정보 동의 모달, SEND 유효성 검증)는 구현하고 playwright로 직접 클릭해서 동작·콘솔 에러 없음까지 확인함. + +- **Recruitment 태그 더보기 페이지네이션 — 구현 보류.** 스펙은 "처음 6개 노출, 더보기 시 6개"인데 Figma에도 태그가 4개(Planner & Consulting/Designer/Publisher/Scripter)뿐이라 6개 임계값에 도달하지 않음 — 페이지네이션이 트리거될 일이 없어서 구현 안 함. 태그가 6개 이상으로 늘어나면 그때 PROJECT 더보기와 같은 패턴으로 추가하면 됨. + +## HISTORY — 확인 필요 2건 (Figma 쪽 추가 확인 필요, 코드로 해결 불가) + +- **2024/2023/2022/2021년 그룹 펼친 상태 전체 목록 미확인** — Figma 정적 렌더에서 이 그룹들이 collapsed 상태로 보여서 프리뷰 항목 1개씩만 반영함(2024: 우리은행 로보어드바이저 구축 / 2023: 신한은행 슈퍼SOL 운영 계약 / 2022: 한화금융 서비스앱 플러스 리뉴얼 2차 계약 / 2021: 롯데 렌터카 차세대 구축 계약). 펼쳤을 때 추가 항목이 더 있는지 정적 JSON만으론 확인 불가 — Figma에서 직접 펼쳐서 알려주시거나 node를 펼친 상태로 다시 캡처해주셔야 함. +- **(낮은 확신) 닫힌 연도그룹 프리뷰의 모바일 폰트 크기** — `03-history-mobile.json` 기준 닫힌 그룹(2024~2021) 프리뷰 1건의 텍스트가 16px로 보이는데, 펼쳐진 2025 리스트 내부 항목들은 14px로 다름. Figma 저자가 프리뷰/리스트에 의도적으로 다른 스타일을 쓴 건지, 단순 작업 누락인지 불확실해서 현재 코드(14px 통일)는 그대로 둠 — 필요하면 알려주시면 반영. + +--- + +# 참고: 디자인 링크 https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?m=auto&t=Y5wF3r0wUkUFeBIV-6 -# 섹션별 링크 +## 섹션별 링크 (PC) -## 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(=CONTACT/FOOTER): https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2247-2253&t=XSGOQmdNzIB99Zh5-4 -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) -## 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으로 설치하면 안 됨 — 어제 메모 그대로 재확인됨.) -- **HISTORY 섹션 타이틀 색상 버그 발견 및 수정** — 사용자가 "타이틀과 배경이미지가 잘못 코딩됨"이라고 지적. 확인해보니 `index.html`의 `

`에 `sectionTitle sectionTitleDark history__title` 3개 클래스가 같이 붙어있었는데, `_about.scss`의 `.history__title { color: $color-white; }`보다 `index.scss`의 `.sectionTitleDark { color: $color-dark; }`가 컴파일 순서상 나중에 와서 이겨버림 — 결과적으로 다크 사진 배경 위에 거의 같은 색(다크) 텍스트가 깔려 "HISTORY" 글자가 안 보이는 상태였음. `sectionTitleDark` 클래스를 제거해서 해결(모바일은 별도 미디어쿼리에서 이미 다크 컬러를 주고 있어서 영향 없음). 배경 이미지(`history-1.jpg`)는 기존에 기록된 임시 placeholder 이슈 그대로(자산 미전달, 새 버그 아님). -- **FOOTER 글씨 배치 차이 수정** — 사용자가 "footer 글씨 배치가 디자인과 다르다"고 지적. footer 전용 Figma 노드가 없어서 사용자에게 "Copy link to selection" 링크(`node-id=2247-2294`)를 요청해 직접 확인함. 큰 구조(좌측 브랜드 2줄 / 중앙 연락처 / 우측 카피라이트, `space-between`)는 이미 일치했고, 차이는 두 가지: (1) "Mail"/"Tel" 라벨이 디자인엔 bold인데 코드는 전체 regular weight였음 → ``로 감싸고 `font-weight: 700` 추가. (2) 카피라이트가 디자인엔 "© 2026 BODA LAB"인데 코드엔 "© 2024 BODA LAB"로 오래된 값이 남아있었음 → 2026으로 수정. (연락처 값 자체는 2026-06-24에 사용자가 "현행 유지"로 이미 결정한 사항이라 손대지 않음.) -- **HISTORY 좌측 사진 레이아웃 — 풀블리드 구조로 재수정** — 위 색상 버그를 고친 후에도 사용자가 "여전히 디자인과 다르다"고 지적. Figma(`node-id 2247:2121`)를 다시 정밀 비교해보니, 좌측 사진이 섹션의 좌/상/하 끝(뷰포트 가장자리)까지 풀블리드로 깔리고 텍스트(타이틀/타임라인)만 일반 패딩을 따르는 구조인데, 기존 코드는 `.history__inner`가 photo까지 포함해서 flex로 묶고 섹션 패딩을 photo에도 동일하게 적용하고 있어 photo가 좌측 패딩만큼 안으로 들어가 있었음(풀블리드가 아니었음). `.history__inner` 래퍼를 없애고 `.history__photo`를 `.history`(position:relative, padding-left:0)에 대해 `position:absolute; top:0; left:0; bottom:0`으로 풀블리드시키고, `.history__title`은 `left/top`을 일반 섹션 패딩값(`clamp(24px,6.25vw,120px)`/`clamp(60px,6.25vw,120px)`)으로 키우고, `.history__timeline`은 `margin-left: photo폭+gap`으로 밀어내는 구조로 변경(`_about.scss`, `index.html`). 모바일은 영향 없음(`.history__timeline { margin-left: 0; }` 추가, photo는 기존처럼 숨김). - ---- - -# 전체검수 결과 (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 - -- 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 디자인이었음(라벨 오기로 추정). 기존에 중복으로 남아있던 옛 `
`(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; }` 구현이 추측이 아니라 실제 디자인과 일치했음. - -## CONTACT (Contact Us/Recruitment 너비·구분선) - -- **완료(2026-06-26)**. 사용자가 "선이 전체를 차지한다", "입력창 스타일이 디자인과 다르다"고 지적. 원인은 두 가지였음. (1) `.contactAccordion__header`에 `border-bottom`이 없어서 "Contact Us" 펼침 상태일 때 헤딩-폼 사이 구분선이 비어있었음(닫힌 Recruitment는 우연히 같은 위치에 `.contactAccordion__item`의 border-bottom이 겹쳐서 괜찮아 보였던 것) → `border-bottom: 1px solid rgba($color-dark,0.08)` 추가. (2) 더 큰 원인: `.contactAccordion`이 `.contact__inner`(max-width:1200px, margin:auto로 가운데 정렬)의 형제 요소라서 그 제한을 안 받고 뷰포트 전체 너비(패딩 48px만 제외)로 퍼져 있었음 — 와이드 화면(1440px+)에서 "WELCOME BODA LAB" 컬럼보다 Contact Us/입력폼/구분선이 훨씬 넓게 늘어나 보인 것. `.contactAccordion`에도 동일하게 `max-width:1200px; margin:0 auto; width:100%;`를 추가해서 헤딩 섹션과 같은 컬럼 너비로 정렬함. `npm run build` 통과, 1920px/모바일(390px) 스크린샷으로 Figma 렌더와 일치 확인. - -## HISTORY (좌측 사진 — 실제 에셋 교체) - -- **완료(2026-06-26)**. 사용자가 "배경이미지가 왜 이렇게 나와?"라고 지적(레이아웃 수정 후 사진 영역이 텍스처 없이 거의 단색 검정으로 보임). 원인 조사 중 `git log -p`로 확인해보니, 기존 `history-1.jpg`는 git 히스토리상 원래 3504×2336(코드 에디터 화면 사진)이었다가 `57aac80 fix: about`(2026-06-19) 커밋에서 완전히 다른 사진(손으로 폰 만지는 사진)으로 통째로 교체되면서 320×190(겨우 25KB)짜리 초소형 파일로 들어간 것 — "다운스케일 회귀"가 아니라 처음부터 이 레이아웃에 쓰기엔 너무 작은 placeholder였음. 세로로 긴 사진 칸(약 374×1800px)에 `object-fit: cover`로 늘리면서 ~10배 확대돼 뭉개진 단색처럼 보인 것. 사용자가 실제 Figma 에셋(나선형 건축물 텍스처, `unsplash_BSDebo0-UAo.png`, 919×1424)을 전달해줘서 `index.html`의 `` `src`를 교체하고 기존 `history-1.jpg`는 삭제함. `npm run build` 통과, PC/모바일 스크린샷으로 Figma 렌더와 일치 확인. - -## 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`도 재확인 통과. +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(=CONTACT/FOOTER): https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80624?node-id=2319-5082&t=XSGOQmdNzIB99Zh5-4 --- # 참고: 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` +- PC 전체 페이지(컴포지트): `2247:2093` / 모바일 전체 페이지(컴포지트): `2319:5243` +- 01_HOME PC `2247:2094` / Mobile `2319:2232` +- 02_ABOUT US PC `2247:2230` / Mobile `2319:2288` +- 03_HISTORY PC `2247:2121` / Mobile `2319:2433` +- 04_VISION PC `2247:2183` / Mobile `2319:4183` +- 05_PROJECT PC `2247:2202` / Mobile `2319:4231` +- 06_CONTACT/FOOTER(문서상 라벨은 "Expertise") PC `2247:2253` / Mobile `2319:5082` - 모바일 GNB 드로어(열린 상태): `2319:5998` +- footer 전용 인스턴스: PC `2247:2294` / Mobile `2319:4996` +- 개인정보 동의 모달: PC `2319:2118` / Mobile `2376:2184` -# 참고: Figma MCP 연결 관련 메모 (재현/트러블슈팅용) +상세 스펙 데이터는 `doc/figma-specs/` 폴더 참고(섹션별 JSON/txt, README에 사용법 정리됨). -- **환경이 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/`에 넣어줘야 함. +# 참고: Figma 데이터 가져오는 법 -# 참고: 공통 / 도구 제약 - -- `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/`에 받아와야 한다. +- Figma REST API를 직접 호출하는 게 가장 안정적: `.mcp.json`의 `FIGMA_API_KEY`로 `GET https://api.figma.com/v1/files/{file_key}/nodes?ids={node_id}` (특정 노드 JSON), `GET https://api.figma.com/v1/images/{file_key}?ids={node_id}&format=jpg&scale=2` (이미지로 export). 노드 ID만 알면 토큰 한도·이미지 export 제약 둘 다 우회됨. +- `mcp__figma__add_figma_file(url)`은 문서 전체를 한 번에 덤프해서 토큰 한도에 걸리고, `mcp__figma__view_node(file_key, node_id)`는 PNG 렌더만 보여주고 파일로 저장은 안 됨 — 둘 다 REST API 직접 호출보다 제약이 많음. +- 컴포넌트(버튼/인풋/체크박스 등) 비교 시 주의: Components 캔버스의 **추상 컴포넌트 정의**에 있는 배경색 등은 실제로 배치된 인스턴스에서 `visible:false`로 꺼져있는 placeholder일 수 있음(예: PROJECT의 `btn/large` 컴포넌트 정의는 회색 배경이 있지만 실제 인스턴스는 그 fill이 꺼져있어서 투명이 맞음). **항상 실제 페이지에 배치된 인스턴스를 raw JSON에서 직접 찾아 그 값(fills/cornerRadius/padding)을 써야 하고, 추상 컴포넌트 스와치만 보고 판단하면 안 됨.** +- `.txt` 요약 파일은 `visible:false` 숨김 노드도 같이 추출하므로, 의심되는 텍스트는 raw JSON에서 `visible` 플래그를 직접 확인해야 함. diff --git a/src/index.html b/src/index.html index 7675447..c404df5 100644 --- a/src/index.html +++ b/src/index.html @@ -14,7 +14,7 @@
-
+ -
+ -
@@ -536,7 +536,7 @@
-
+
@@ -552,6 +552,7 @@ [필수] 개인정보 수집 및 이용 동의 +
@@ -613,6 +614,33 @@

© 2026 BODA LAB

+ + + diff --git a/src/js/main.js b/src/js/main.js index dc4ec76..d468f33 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -32,6 +32,8 @@ $(function () { // 현재 섹션에 따라 GNB 활성화 const $navLinks = $(".gnb__navLink"); const sections = $("section[id]").toArray(); + // 흰 배경 섹션 — 이 구간에서는 GNB를 다크 텍스트로 전환(흰 텍스트가 흰 배경에 묻히는 것 방지) + const lightSections = ["history", "contact"]; function setActiveNav(navId) { $navLinks.each(function () { @@ -51,6 +53,8 @@ $(function () { }); setActiveNav(current); + $gnb.toggleClass("isLight", lightSections.includes(current)); + $gnb.toggleClass("isPastHome", current !== "intro"); } ScrollTrigger.create({ @@ -81,12 +85,21 @@ $(function () { $mobileNav.removeClass("isOpen"); }); - // History 아코디언 + // History 아코디언 (단일 열림 — 한 그룹을 열면 나머지는 닫힘) $(".history__yearToggle").on("click", function () { const $group = $(this).closest(".history__yearGroup"); const $list = $("#" + $(this).attr("aria-controls")); const isOpen = $group.hasClass("isOpen"); + $(".history__yearGroup") + .not($group) + .each(function () { + const $otherToggle = $(this).find(".history__yearToggle"); + $(this).removeClass("isOpen"); + $otherToggle.attr("aria-expanded", false); + $("#" + $otherToggle.attr("aria-controls")).attr("hidden", ""); + }); + $group.toggleClass("isOpen", !isOpen); $(this).attr("aria-expanded", !isOpen); @@ -97,6 +110,48 @@ $(function () { } }); + // PROJECT 더보기 (처음 10개 노출, 클릭 시 나머지 노출) + $(".btnMore").on("click", function (e) { + e.preventDefault(); + $(".project__card[hidden]").removeAttr("hidden"); + $(this).closest(".project__more").hide(); + }); + + // 개인정보 수집·이용 동의 모달 + $("[data-modal-open]").on("click", function () { + $("#" + $(this).data("modal-open")).removeAttr("hidden"); + }); + + $("[data-modal-close]").on("click", function () { + $(this).closest(".privacyModal").attr("hidden", ""); + }); + + $(document).on("keydown", function (e) { + if (e.key === "Escape") { + $(".privacyModal:not([hidden])").attr("hidden", ""); + } + }); + + // SEND 유효성 검증 + $(".contactForm").on("submit", function (e) { + e.preventDefault(); + const $form = $(this); + let isValid = true; + + $form.find(".contactForm__input").each(function () { + if (!$(this).val().trim()) isValid = false; + }); + if (!$form.find(".contactForm__checkboxInput").prop("checked")) isValid = false; + + if (!isValid) { + alert("필수 항목을 확인해 주세요"); + return; + } + + alert("전송 완료"); + $form.trigger("reset"); + }); + // Contact 아코디언 $(".contactAccordion__header").on("click", function () { const $item = $(this).closest(".contactAccordion__item"); diff --git a/src/scss/index.scss b/src/scss/index.scss index 989149f..23e114e 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -15,7 +15,7 @@ .sectionTitle { font-family: $기본글꼴; - font-size: clamp(28px, 3vw, 48px); + font-size: clamp(30px, 3vw, 48px); font-weight: 600; letter-spacing: 0.02em; color: #ffffff; diff --git a/src/scss/page/_about.scss b/src/scss/page/_about.scss index d92bbf1..e198c26 100644 --- a/src/scss/page/_about.scss +++ b/src/scss/page/_about.scss @@ -37,7 +37,7 @@ .about__desc { margin: 0 0 70px; - font-size: clamp(13px, 1.1vw, 16px); + font-size: 14px; font-weight: 300; line-height: 150%; color: #ffffff; @@ -52,14 +52,14 @@ } .about__quoteMark { - font-size: clamp(60px, 7.6vw, 146px); + font-size: clamp(86px, 7.6vw, 146px); font-weight: 600; line-height: 1; color: #ffffff; } .about__quoteText { - font-size: clamp(22px, 2.4vw, 46px); + font-size: clamp(30px, 2.4vw, 46px); font-weight: 100; line-height: 1.2; color: #ffffff; @@ -79,7 +79,7 @@ gap: 8px; .num { - font-size: clamp(14px, 0.85vw, 16px); + font-size: 16px; font-weight: 800; color: #7796ff; } @@ -93,7 +93,7 @@ } .text { - font-size: clamp(12px, 0.75vw, 14px); + font-size: 14px; font-weight: 300; color: #ffffff; } @@ -252,7 +252,7 @@ vertical-align: top; margin-left: 5px; padding: 2px 8px; - font-size: 10px; + font-size: 8px; font-weight: 700; color: #0071f2; border: 1px solid #0071f2; @@ -326,5 +326,9 @@ .history__listItem { flex-direction: column; gap: 6px; + + .sub { + font-size: 12px; + } } } diff --git a/src/scss/page/_contact.scss b/src/scss/page/_contact.scss index 7034971..22a9cc1 100644 --- a/src/scss/page/_contact.scss +++ b/src/scss/page/_contact.scss @@ -19,7 +19,7 @@ .contact__heading { font-family: $기본글꼴; - font-size: clamp(28px, 3vw, 40px); + font-size: clamp(30px, 3vw, 48px); font-weight: 600; letter-spacing: 0.02em; color: #0d0d0d; @@ -29,17 +29,15 @@ .contact__desc { margin-top: 20px; margin-bottom: 48px; - font-size: 15px; + font-size: 14px; font-weight: 300; color: rgba(13, 13, 13, 0.6); } .contact__label { - font-size: 12px; - font-weight: 600; - letter-spacing: 0.1em; - text-transform: uppercase; - color: rgba(13, 13, 13, 0.5); + font-size: 32px; + font-weight: 400; + color: #0d0d0d; margin-bottom: 20px; } @@ -56,8 +54,8 @@ } .contact__infoLabel { - font-size: 12px; - font-weight: 600; + font-size: 18px; + font-weight: 700; letter-spacing: 0.08em; color: #7796ff; } @@ -101,7 +99,7 @@ border-bottom: 1px solid rgba(13, 13, 13, 0.08); cursor: pointer; color: #0d0d0d; - font-size: clamp(16px, 1.4vw, 20px); + font-size: 32px; font-weight: 400; font-family: $기본글꼴; text-align: left; @@ -164,12 +162,13 @@ .contactForm__textarea { width: 100%; background: #ffffff; - border: 1px solid rgba(13, 13, 13, 0.2); + border: 1px solid #0d0d0d; + border-radius: 8px; color: #0d0d0d; font-family: $기본글꼴; font-size: 14px; font-weight: 300; - padding: 14px 16px; + padding: 16px; outline: none; transition: border-color 0.2s; @@ -188,9 +187,28 @@ } .contactForm__agree { + display: flex; + align-items: center; + gap: 10px; margin-top: 4px; } +.contactForm__termsTrigger { + background: none; + border: none; + padding: 0; + font-family: $기본글꼴; + font-size: 13px; + font-weight: 300; + color: rgba(13, 13, 13, 0.45); + text-decoration: underline; + cursor: pointer; + + &:hover { + color: #7796ff; + } +} + .contactForm__checkbox { display: inline-flex; align-items: center; @@ -215,15 +233,15 @@ display: block; width: 10px; height: 6px; - border-left: 1.5px solid #ffffff; - border-bottom: 1.5px solid #ffffff; + border-left: 1.5px solid #0d0d0d; + border-bottom: 1.5px solid #0d0d0d; transform: rotate(-45deg) translateY(-2px); } .contactForm__checkboxBox { width: 18px; height: 18px; - border: 1px solid rgba(13, 13, 13, 0.3); + border: 1px solid #0d0d0d; flex-shrink: 0; display: flex; align-items: center; @@ -240,14 +258,14 @@ } .btnSend { - padding: 12px 48px; + padding: 16px 32px; background: #7796ff; border: none; border-radius: 100px; - color: #ffffff; + color: #000000; font-family: $기본글꼴; - font-size: 14px; - font-weight: 700; + font-size: 16px; + font-weight: 400; letter-spacing: 0.1em; cursor: pointer; transition: opacity 0.2s; @@ -272,8 +290,8 @@ padding: 10px 20px; border: 1px solid rgba(13, 13, 13, 0.25); border-radius: 100px; - font-size: 14px; - font-weight: 300; + font-size: 16px; + font-weight: 400; color: #0d0d0d; transition: border-color 0.2s, @@ -307,7 +325,7 @@ } .footer__brand { - font-size: clamp(18px, 2vw, 28px); + font-size: 32px; font-weight: 700; letter-spacing: 0.08em; color: #fff; @@ -316,8 +334,7 @@ } .footer__contact { - font-size: 13px; - // font-weight: 300; + font-size: 14px; color: #fff; } @@ -335,11 +352,90 @@ } .footer__copy { - font-size: 12px; + font-size: 14px; color: #fff; letter-spacing: 0.03em; } +// 개인정보 수집·이용 동의 모달 +.privacyModal { + position: fixed; + inset: 0; + z-index: 300; + display: flex; + align-items: center; + justify-content: center; + padding: 24px; + + &[hidden] { + display: none; + } +} + +.privacyModal__overlay { + position: absolute; + inset: 0; + background: rgba(13, 13, 13, 0.6); +} + +.privacyModal__panel { + position: relative; + z-index: 1; + max-width: 560px; + width: 100%; + max-height: 80vh; + overflow-y: auto; + background: #ffffff; + border-radius: 16px; + padding: 40px; + display: flex; + flex-direction: column; + gap: 20px; +} + +.privacyModal__title { + font-family: $기본글꼴; + font-size: 20px; + font-weight: 600; + color: #0d0d0d; +} + +.privacyModal__body { + display: flex; + flex-direction: column; + gap: 16px; + font-family: $기본글꼴; + font-size: 13px; + font-weight: 300; + line-height: 1.6; + color: rgba(13, 13, 13, 0.75); + + strong { + display: block; + margin-bottom: 4px; + font-weight: 600; + color: #0d0d0d; + } +} + +.privacyModal__agree { + align-self: flex-end; + padding: 12px 28px; + background: #7796ff; + color: #000000; + border: none; + border-radius: 100px; + font-family: $기본글꼴; + font-size: 14px; + font-weight: 400; + cursor: pointer; + transition: opacity 0.2s; + + &:hover { + opacity: 0.85; + } +} + @include mo { .contact__inner { padding: 60px 24px 40px; @@ -347,7 +443,6 @@ .contact__desc { margin-bottom: 32px; - font-size: 14px; } .contact__infoList { @@ -385,7 +480,7 @@ gap: 20px; } - .footer__contact { - font-size: 12px; + .privacyModal__panel { + padding: 28px 24px; } } diff --git a/src/scss/page/_gnb.scss b/src/scss/page/_gnb.scss index 62116ab..442d40c 100644 --- a/src/scss/page/_gnb.scss +++ b/src/scss/page/_gnb.scss @@ -10,8 +10,38 @@ transition: background 0.4s; &.isScrolled { - // background: rgba(13, 13, 13, 0.92); - // backdrop-filter: blur(12px); + background: rgba(13, 13, 13, 0.75); + backdrop-filter: blur(12px); + } + + // HOME(intro)을 벗어났을 때 — 위치/크기 조정용 (배경·텍스트 색은 isLight가 별도로 담당) + &.isPastHome { + } + + // HISTORY/CONTACT처럼 흰 배경 섹션을 지나는 동안 — 텍스트가 묻히는 것 + 아래 콘텐츠가 비쳐서 겹쳐 보이는 것 둘 다 방지 + &.isLight { + background: rgba(255, 255, 255, 0.85); + backdrop-filter: blur(12px); + + .gnb__logoImg { + filter: invert(1); + } + + .gnb__navLink { + color: #0d0d0d; + + &:hover { + color: #7796ff; + } + + &.isActive { + color: #7796ff; + } + } + + .gnb__hamburgerLine { + background: #0d0d0d; + } } } diff --git a/src/scss/page/_intro.scss b/src/scss/page/_intro.scss index 75baf0d..5e4c442 100644 --- a/src/scss/page/_intro.scss +++ b/src/scss/page/_intro.scss @@ -25,7 +25,7 @@ } .intro__sub { - font-size: clamp(18px, 2.6vw, 50px); + font-size: clamp(24px, 2.6vw, 50px); font-weight: 100; letter-spacing: 0.02em; color: #ffffff; @@ -34,7 +34,7 @@ } .intro__title { - font-size: clamp(32px, 5.2vw, 100px); + font-size: clamp(42px, 5.2vw, 100px); font-weight: 700; letter-spacing: 0.01em; text-transform: uppercase; diff --git a/src/scss/page/_project.scss b/src/scss/page/_project.scss index 405ef3a..fa1d1c4 100644 --- a/src/scss/page/_project.scss +++ b/src/scss/page/_project.scss @@ -51,16 +51,16 @@ } .project__name { - font-size: clamp(14px, 1.1vw, 16px); - font-weight: 500; + font-size: 18px; + font-weight: 700; color: #ffffff; line-height: 1.4; } .project__company { - font-size: 13px; - font-weight: 300; - color: rgba(255, 255, 255, 0.5); + font-size: 14px; + font-weight: 400; + color: #b0b0b0; } .project__stack { @@ -72,11 +72,13 @@ .project__tag { display: inline-block; - padding: 3px 10px; - border: 1px solid rgba(255, 255, 255, 0.2); - font-size: 11px; + padding: 4px 14px 6px; + background: #2d2d2d; + border: 0.5px solid rgba(255, 255, 255, 0.5); + border-radius: 20px; + font-size: 12px; font-weight: 300; - color: rgba(255, 255, 255, 0.55); + color: #ffffff; letter-spacing: 0.03em; } @@ -91,10 +93,10 @@ align-items: center; justify-content: center; gap: 6px; - padding: 14px 40px; - border: 1px solid rgba(255, 255, 255, 0.4); + padding: 24px 32px; + border: 1px solid #ffffff; border-radius: 100px; - font-size: 14px; + font-size: 24px; font-weight: 400; letter-spacing: 0.1em; color: #ffffff; @@ -127,4 +129,9 @@ .project__more { margin-top: 48px; } + + .btnMore { + padding: 16px 32px; + font-size: 16px; + } } diff --git a/src/scss/page/_vision.scss b/src/scss/page/_vision.scss index 63da1cb..ff117c7 100644 --- a/src/scss/page/_vision.scss +++ b/src/scss/page/_vision.scss @@ -16,6 +16,7 @@ position: absolute; inset: 0; background: url("../../images/unsplash_Cq5NaI0yKBE.png") center / cover no-repeat; + opacity: 0.5; pointer-events: none; } @@ -39,7 +40,7 @@ .vision__desc { max-width: 560px; - font-size: clamp(13px, 0.73vw, 14px); + font-size: 14px; font-weight: 300; line-height: 1.8; color: #ffffff; @@ -53,7 +54,7 @@ max-width: 740px; .mark { - font-size: clamp(60px, 7.6vw, 146px); + font-size: clamp(86px, 7.6vw, 146px); font-weight: 600; line-height: 1; margin-top: -0.34em; @@ -82,7 +83,7 @@ gap: 12px; .keyword { - font-size: clamp(28px, 3.33vw, 64px); + font-size: clamp(32px, 3.33vw, 64px); font-weight: 800; letter-spacing: 0.01em; color: #ffffff; @@ -90,7 +91,7 @@ } .desc { - font-size: clamp(12px, 0.73vw, 14px); + font-size: 14px; font-weight: 300; color: #ffffff; }