fix: 일부코드 수정
This commit is contained in:
이희원
parent
5f8e271b22
commit
23752b1cb1
38
doc/미완료.md
38
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` 박스를 `<img>`로 교체, 이제 안 쓰는 `.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/`에 저장.
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -1,17 +0,0 @@
|
|||
<svg width="140" height="64" viewBox="0 0 140 64" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M105.558 1.6094L114.28 10.0894V27.3882H131.855L139.158 36.8565V62.1082H61.6378L53.1149 53.8541V36.1788H8.98649L0.671622 27.6988V1.6094H105.558ZM105.823 0.941162H0V27.9718L8.7027 36.8376H52.4432V54.1271L61.3635 62.7671H139.82V36.6212L132.177 26.72H114.942V9.80705L105.823 0.941162Z" fill="white"/>
|
||||
<path d="M26.2216 1.88234V27.0306H0.945946V1.88234H26.2216ZM27.1676 0.941162H0V27.9717H27.1676V0.941162Z" fill="white"/>
|
||||
<path d="M8.02161 7.30347H13.65C14.3689 7.30347 15.0311 7.38817 15.627 7.54817C16.223 7.71758 16.7338 7.95288 17.1594 8.28229C17.5851 8.60229 17.9162 9.007 18.1527 9.487C18.3892 9.967 18.5121 10.5317 18.5121 11.1717C18.5121 11.6329 18.4554 12.0188 18.3419 12.3388C18.2284 12.6588 18.1054 12.9317 17.973 13.1388C17.8121 13.3929 17.6324 13.6093 17.4338 13.7788C17.7459 13.9764 18.0392 14.2399 18.2946 14.5505C18.5121 14.8235 18.7108 15.1623 18.8905 15.5764C19.0703 15.9905 19.1649 16.4988 19.1649 17.1011C19.1649 17.7882 19.0419 18.4093 18.7959 18.9646C18.55 19.5199 18.2 19.9999 17.7459 20.3952C17.2919 20.7905 16.7432 21.0917 16.0811 21.2988C15.4284 21.5058 14.7 21.6093 13.8959 21.6093H8.03107V7.30347H8.02161ZM13.2811 19.8964C14.5486 19.8964 15.4851 19.6235 16.0811 19.0776C16.6865 18.5317 16.9892 17.8164 16.9892 16.9129C16.9892 16.3293 16.8662 15.8588 16.6108 15.5105C16.3554 15.1623 16.0905 14.8893 15.8067 14.6823C15.4473 14.4564 15.05 14.2964 14.6243 14.2117C14.9648 14.1082 15.277 13.9576 15.5513 13.7411C15.7973 13.5529 16.0148 13.2988 16.2135 12.9788C16.4121 12.6588 16.5067 12.2446 16.5067 11.7458C16.5067 10.8423 16.223 10.1646 15.6459 9.70347C15.0689 9.24229 14.2838 9.01641 13.3 9.01641H10.1973V19.8964H13.3H13.2811ZM10.7365 13.9576V9.53405H13.2811C14.2176 9.53405 14.8892 9.74111 15.2959 10.1458C15.7027 10.5505 15.9108 11.087 15.9108 11.7458C15.9108 12.4046 15.7027 12.9411 15.2959 13.3458C14.8892 13.7505 14.2176 13.9576 13.2811 13.9576H10.7365ZM10.7365 19.3788V14.4658H13.2621C13.7067 14.4658 14.123 14.5129 14.5013 14.607C14.8797 14.7011 15.2203 14.8423 15.504 15.0399C15.7878 15.2376 16.0149 15.4917 16.1851 15.8023C16.3459 16.1129 16.4311 16.4893 16.4311 16.9223C16.4311 17.7976 16.1378 18.4282 15.5608 18.8141C14.9743 19.1999 14.2176 19.3976 13.2621 19.3976H10.7365V19.3788ZM14.0567 11.6611C14.0567 11.0023 13.6973 10.6729 12.9784 10.6729H12.4581V12.6493H12.9784C13.6973 12.6493 14.0567 12.3199 14.0567 11.6611ZM12.9784 18.2493C14.0662 18.2493 14.6148 17.8352 14.6148 17.007C14.6148 16.1788 14.0662 15.7646 12.9784 15.7646H12.4581V18.2493H12.9784Z" fill="white"/>
|
||||
<path d="M52.4432 1.88234V27.0306H27.1675V1.88234H52.4432ZM53.3891 0.941162H26.2216V27.9717H53.3891V0.941162Z" fill="white"/>
|
||||
<path d="M104.877 1.88234V27.0306H79.6109V1.88234H104.877ZM105.823 0.941162H78.6555V27.9717H105.832V0.941162H105.823Z" fill="white"/>
|
||||
<path d="M78.6554 1.88234V27.0306H53.3797V1.88234H78.6554ZM79.6013 0.941162H52.4338V27.9717H79.6013V0.941162Z" fill="white"/>
|
||||
<path d="M32.2567 14.4564C32.2567 13.4305 32.4554 12.4517 32.8527 11.5387C33.25 10.6258 33.7891 9.8258 34.4702 9.14815C35.1513 8.47051 35.9554 7.93404 36.8729 7.53874C37.7905 7.14345 38.7743 6.9458 39.8054 6.9458C40.8364 6.9458 41.8202 7.14345 42.7378 7.53874C43.6554 7.93404 44.4594 8.47051 45.1405 9.14815C45.8216 9.8258 46.3608 10.6258 46.7581 11.5387C47.1554 12.4517 47.354 13.4305 47.354 14.4564C47.354 15.4823 47.1554 16.4611 46.7581 17.374C46.3608 18.287 45.8216 19.087 45.1405 19.7646C44.4594 20.4423 43.6554 20.9787 42.7378 21.374C41.8202 21.7693 40.8364 21.967 39.8054 21.967C38.7743 21.967 37.7905 21.7693 36.8729 21.374C35.9554 20.9787 35.1513 20.4423 34.4702 19.7646C33.7891 19.087 33.25 18.287 32.8527 17.374C32.4554 16.4611 32.2567 15.4823 32.2567 14.4564ZM34.281 14.4564C34.281 15.2187 34.4229 15.9246 34.7162 16.5929C35 17.2611 35.3973 17.8446 35.8986 18.3434C36.4 18.8423 36.9864 19.2376 37.6581 19.5199C38.3297 19.8023 39.0392 19.9529 39.8054 19.9529C40.5716 19.9529 41.281 19.8117 41.9527 19.5199C42.6243 19.2376 43.2108 18.8423 43.7121 18.3434C44.2135 17.8446 44.6108 17.2611 44.8946 16.5929C45.1783 15.9246 45.3297 15.2187 45.3297 14.4564C45.3297 13.694 45.1878 12.9882 44.8946 12.3199C44.6108 11.6517 44.2135 11.0682 43.7121 10.5693C43.2108 10.0705 42.6243 9.67521 41.9527 9.39286C41.281 9.11051 40.5716 8.95992 39.8054 8.95992C39.0392 8.95992 38.3297 9.10109 37.6581 9.39286C36.9864 9.67521 36.4 10.0705 35.8986 10.5693C35.3973 11.0682 35 11.6517 34.7162 12.3199C34.4324 12.9882 34.281 13.694 34.281 14.4564ZM39.8054 19.3976C39.1148 19.3976 38.4716 19.2658 37.8756 19.0117C37.2797 18.7576 36.75 18.3999 36.3054 17.9482C35.8513 17.4964 35.5013 16.9787 35.2364 16.3858C34.981 15.7929 34.8486 15.1529 34.8486 14.4658C34.8486 13.7787 34.981 13.1387 35.2364 12.5458C35.4919 11.9529 35.8513 11.4258 36.3054 10.9834C36.7594 10.5317 37.2797 10.1834 37.8756 9.91992C38.4716 9.6658 39.1148 9.53404 39.8054 9.53404C40.4959 9.53404 41.1391 9.6658 41.7351 9.91992C42.331 10.174 42.8608 10.5317 43.3054 10.9834C43.7594 11.4352 44.1094 11.9529 44.3743 12.5458C44.6297 13.1387 44.7621 13.7787 44.7621 14.4658C44.7621 15.1529 44.6297 15.7929 44.3743 16.3858C44.1189 16.9787 43.7594 17.5058 43.3054 17.9482C42.8513 18.3999 42.331 18.7482 41.7351 19.0117C41.1391 19.2658 40.4959 19.3976 39.8054 19.3976ZM36.7878 14.4564C36.7878 14.8705 36.8635 15.2564 37.0243 15.6234C37.1851 15.9905 37.4027 16.3105 37.6675 16.574C37.9419 16.847 38.2635 17.0634 38.6229 17.214C38.9919 17.374 39.3797 17.4493 39.7959 17.4493C40.2121 17.4493 40.6 17.374 40.9689 17.214C41.3378 17.054 41.6594 16.8376 41.9243 16.574C42.1986 16.3011 42.4162 15.9811 42.5675 15.6234C42.7283 15.2564 42.804 14.8705 42.804 14.4564C42.804 14.0423 42.7283 13.6564 42.5675 13.2893C42.4067 12.9223 42.1891 12.6023 41.9243 12.3387C41.65 12.0658 41.3283 11.8493 40.9689 11.6987C40.6 11.5387 40.2121 11.4634 39.7959 11.4634C39.3797 11.4634 38.9919 11.5387 38.6229 11.6987C38.254 11.8587 37.9324 12.0752 37.6675 12.3387C37.3932 12.6117 37.1756 12.9317 37.0243 13.2893C36.8635 13.6564 36.7878 14.0423 36.7878 14.4564Z" fill="white"/>
|
||||
<path d="M59.7649 21.6188V7.30347H63.7568C65.1095 7.30347 66.3108 7.45405 67.3703 7.75523C68.4298 8.05641 69.319 8.50817 70.0473 9.11053C70.7757 9.71288 71.3244 10.4564 71.7122 11.3505C72.0906 12.2446 72.2798 13.2799 72.2798 14.447C72.2798 15.6141 72.0906 16.6493 71.7122 17.5435C71.3338 18.4376 70.7757 19.1811 70.0473 19.7835C69.319 20.3858 68.4298 20.8376 67.3703 21.1482C66.3108 21.4588 65.1095 21.6093 63.7568 21.6093H59.7649V21.6188ZM61.9216 19.8964H63.7568C65.8568 19.8964 67.4365 19.4164 68.5149 18.4658C69.5838 17.5152 70.123 16.1693 70.123 14.447C70.123 12.7246 69.5838 11.3788 68.5149 10.4376C67.446 9.49641 65.8568 9.02582 63.7568 9.02582H61.9216V19.9058V19.8964ZM62.4892 19.3788V9.53405H63.7568C65.5825 9.53405 67.0014 9.94817 68.0135 10.767C69.0257 11.5858 69.5365 12.8188 69.5365 14.447C69.5365 16.0752 69.0257 17.3082 68.0135 18.1364C67.0014 18.9646 65.5825 19.3788 63.7568 19.3788H62.4892ZM64.3622 17.5341C65.4406 17.5341 66.273 17.2799 66.8595 16.7717C67.446 16.2635 67.7392 15.4917 67.7392 14.447C67.7392 13.4023 67.446 12.6305 66.8595 12.1317C66.273 11.6329 65.4406 11.3788 64.3622 11.3788V17.5341Z" fill="white"/>
|
||||
<path d="M90.5176 7.30347H93.9703L99.4284 21.6188H85.0689L90.527 7.30347H90.5176ZM88.2567 19.9152L92.2392 9.53405L96.1932 19.9152H88.2662H88.2567ZM96.4392 20.6023L96.8081 21.6188H97.4135L96.3824 18.7858L92.6459 9.02582H91.823L88.077 18.8235L86.9892 21.6282H87.5946L87.9919 20.6117L88.0676 20.4141H96.3635L96.4297 20.6117L96.4392 20.6023ZM93.7338 18.5317L92.2392 14.6635L90.8297 18.5317H93.7338Z" fill="white"/>
|
||||
<path d="M104.877 27.9812V53.1294H79.6014V27.9812H104.877ZM105.823 27.04H78.6555V54.0706H105.823V27.04Z" fill="white"/>
|
||||
<path d="M131.108 27.9812V53.1294H105.832V27.9812H131.108ZM132.054 27.04H104.886V54.0706H132.054V27.04Z" fill="white"/>
|
||||
<path d="M78.6649 27.9812V53.1294H53.3892V27.9812H78.6649ZM79.6108 27.04H52.4432V54.0706H79.6108V27.04Z" fill="white"/>
|
||||
<path d="M95.4176 44.3481H89.4581L87.9067 47.7081H85.6459L92.5324 32.9976L99.173 47.7081H96.8743L95.4176 44.3481ZM94.5662 42.3811L92.504 37.6752L90.3378 42.3811H94.5662Z" fill="white"/>
|
||||
<path d="M114.251 47.2848V33.4495H116.342C117.269 33.4495 118.016 33.5248 118.565 33.6659C119.123 33.8071 119.596 34.0518 119.984 34.3906C120.372 34.7389 120.684 35.1812 120.911 35.7083C121.147 36.2448 121.261 36.7812 121.261 37.3177C121.261 38.3059 120.882 39.153 120.116 39.8401C120.854 40.0942 121.441 40.5271 121.866 41.1577C122.301 41.7789 122.519 42.5036 122.519 43.3224C122.519 44.4048 122.131 45.3177 121.365 46.0612C120.901 46.5224 120.381 46.8424 119.804 47.0212C119.17 47.1906 118.385 47.2848 117.439 47.2848H114.261H114.251ZM116.351 39.3883H117.014C117.799 39.3883 118.366 39.2189 118.726 38.8706C119.085 38.5224 119.274 38.0236 119.274 37.3553C119.274 36.6871 119.085 36.2071 118.716 35.8683C118.347 35.5295 117.799 35.36 117.099 35.36H116.361V39.3883H116.351ZM116.351 45.3177H117.647C118.593 45.3177 119.293 45.1295 119.738 44.7624C120.211 44.3577 120.438 43.8589 120.438 43.2377C120.438 42.6165 120.211 42.1365 119.766 41.7318C119.331 41.3271 118.546 41.1295 117.411 41.1295H116.351V45.3177Z" fill="white"/>
|
||||
<path d="M65.1946 33.4307V45.3083H69.2811V47.2754H63.0946V33.4401H65.1946V33.4307Z" fill="white"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 9.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 358 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 973 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 232 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 276 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 389 KiB |
|
|
@ -14,7 +14,7 @@
|
|||
<header class="gnb" id="gnb">
|
||||
<div class="gnb__inner">
|
||||
<a href="#intro" class="gnb__logo">
|
||||
<img class="gnb__logoImg" src="images/logo.svg" alt="BODA LAB" />
|
||||
<img class="gnb__logoImg" src="images/logo.png" alt="BODA LAB" />
|
||||
</a>
|
||||
<nav class="gnb__nav">
|
||||
<ul class="gnb__navList">
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
<button class="gnb__mobileNavClose" aria-label="메뉴 닫기">
|
||||
<span class="gnb__mobileNavCloseLine"></span>
|
||||
<span class="gnb__mobileNavCloseLine"></span>
|
||||
</button>
|
||||
</button>1
|
||||
<ul class="gnb__mobileNavList">
|
||||
<li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink isActive" href="#intro">HOME</a></li>
|
||||
<li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#about">ABOUT US</a></li>
|
||||
|
|
@ -284,6 +284,8 @@
|
|||
|
||||
<!-- 04. VISION -->
|
||||
<section id="vision" class="vision">
|
||||
<div class="vision__bg" aria-hidden="true"></div>
|
||||
|
||||
<div class="vision__inner">
|
||||
<div class="vision__head">
|
||||
<h2 class="sectionTitle">VISION</h2>
|
||||
|
|
@ -346,10 +348,10 @@
|
|||
</article>
|
||||
<article class="project__card">
|
||||
<div class="project__thumb">
|
||||
<img class="project__thumbImg" src="images/project-3.jpg" alt="PNS네트웍스 디지털 플랫폼 구축" />
|
||||
<img class="project__thumbImg" src="images/project-3.jpg" alt="PNS네트웍스 디지털 포워딩 플랫폼 구축 프로젝트" />
|
||||
</div>
|
||||
<div class="project__info">
|
||||
<h3 class="project__name">PNS네트웍스 디지털 플랫폼 구축</h3>
|
||||
<h3 class="project__name">PNS네트웍스 디지털 포워딩 플랫폼 구축 프로젝트</h3>
|
||||
<p class="project__company">PNS 네트웍스</p>
|
||||
<div class="project__stack">
|
||||
<span class="project__tag">react</span>
|
||||
|
|
@ -418,10 +420,10 @@
|
|||
</article>
|
||||
<article class="project__card">
|
||||
<div class="project__thumb">
|
||||
<img class="project__thumbImg" src="images/project-8.jpg" alt="그린카 차세대" />
|
||||
<img class="project__thumbImg" src="images/project-8.jpg" alt="그린카 차세대 프로젝트" />
|
||||
</div>
|
||||
<div class="project__info">
|
||||
<h3 class="project__name">그린카 차세대</h3>
|
||||
<h3 class="project__name">그린카 차세대 프로젝트</h3>
|
||||
<p class="project__company">그린카</p>
|
||||
<div class="project__stack">
|
||||
<span class="project__tag">html5</span>
|
||||
|
|
@ -433,7 +435,9 @@
|
|||
</div>
|
||||
</article>
|
||||
<article class="project__card">
|
||||
<div class="project__thumb project__thumbEmpty"></div>
|
||||
<div class="project__thumb">
|
||||
<img class="project__thumbImg" src="images/project-9.jpg" alt="프로스펙스 구축" />
|
||||
</div>
|
||||
<div class="project__info">
|
||||
<h3 class="project__name">프로스펙스 구축</h3>
|
||||
<p class="project__company">(주)LS네트웍스</p>
|
||||
|
|
@ -445,7 +449,9 @@
|
|||
</div>
|
||||
</article>
|
||||
<article class="project__card">
|
||||
<div class="project__thumb project__thumbEmpty"></div>
|
||||
<div class="project__thumb">
|
||||
<img class="project__thumbImg" src="images/project-10.jpg" alt="중소기업창업" />
|
||||
</div>
|
||||
<div class="project__info">
|
||||
<h3 class="project__name">중소기업창업</h3>
|
||||
<p class="project__company">중소벤처기업부</p>
|
||||
|
|
@ -457,7 +463,9 @@
|
|||
</div>
|
||||
</article>
|
||||
<article class="project__card">
|
||||
<div class="project__thumb project__thumbEmpty"></div>
|
||||
<div class="project__thumb">
|
||||
<img class="project__thumbImg" src="images/project-11.jpg" alt="롯데 GA2ck 구축 프로젝트 (롯데 렌터카)" />
|
||||
</div>
|
||||
<div class="project__info">
|
||||
<h3 class="project__name">롯데 GA2ck 구축 프로젝트 (롯데 렌터카)</h3>
|
||||
<p class="project__company">롯데</p>
|
||||
|
|
@ -470,7 +478,9 @@
|
|||
</div>
|
||||
</article>
|
||||
<article class="project__card">
|
||||
<div class="project__thumb project__thumbEmpty"></div>
|
||||
<div class="project__thumb">
|
||||
<img class="project__thumbImg" src="images/project-12.jpg" alt="국민은행 리브 Reboot One 구축" />
|
||||
</div>
|
||||
<div class="project__info">
|
||||
<h3 class="project__name">
|
||||
(주)국민은행_KB국민은행
|
||||
|
|
@ -487,7 +497,9 @@
|
|||
</div>
|
||||
</article>
|
||||
<article class="project__card">
|
||||
<div class="project__thumb project__thumbEmpty"></div>
|
||||
<div class="project__thumb">
|
||||
<img class="project__thumbImg" src="images/project-13.jpg" alt="코나아이 PC" />
|
||||
</div>
|
||||
<div class="project__info">
|
||||
<h3 class="project__name">코나아이 PC</h3>
|
||||
<p class="project__company">코나아이</p>
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
.sectionTitle {
|
||||
font-family: $기본글꼴;
|
||||
font-size: clamp(28px, 3vw, 40px);
|
||||
font-size: clamp(28px, 3vw, 48px);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
color: $color-white;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
.contact__heading {
|
||||
font-family: $기본글꼴;
|
||||
font-size: clamp(28px, 3vw, 40px);
|
||||
font-size: clamp(28px, 3vw, 48px);
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.02em;
|
||||
color: $color-dark;
|
||||
|
|
@ -35,11 +35,9 @@
|
|||
}
|
||||
|
||||
.contact__label {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: rgba($color-dark, 0.5);
|
||||
font-size: clamp(22px, 2vw, 32px);
|
||||
font-weight: 400;
|
||||
color: $color-dark;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -56,9 +54,8 @@
|
|||
}
|
||||
|
||||
.contact__infoLabel {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
font-size: clamp(15px, 1.2vw, 18px);
|
||||
font-weight: 700;
|
||||
color: $color-blue;
|
||||
}
|
||||
|
||||
|
|
@ -97,7 +94,7 @@
|
|||
border: none;
|
||||
cursor: pointer;
|
||||
color: $color-dark;
|
||||
font-size: clamp(16px, 1.4vw, 20px);
|
||||
font-size: clamp(24px, 2vw, 32px);
|
||||
font-weight: 400;
|
||||
font-family: $기본글꼴;
|
||||
text-align: left;
|
||||
|
|
|
|||
|
|
@ -45,11 +45,6 @@
|
|||
transition: transform 0.5s ease;
|
||||
}
|
||||
|
||||
.project__thumbEmpty {
|
||||
aspect-ratio: 16 / 10;
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.project__info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -3,11 +3,23 @@
|
|||
|
||||
// Vision
|
||||
.vision {
|
||||
position: relative;
|
||||
background: $color-bg;
|
||||
padding: clamp(80px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vision__bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: url("../../images/unsplash_Cq5NaI0yKBE.png") center / cover no-repeat;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.vision__inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(60px, 8vw, 140px);
|
||||
|
|
|
|||
Loading…
Reference in New Issue