diff --git a/doc/미완료.md b/doc/미완료.md index 07b6abd..da8486d 100644 --- a/doc/미완료.md +++ b/doc/미완료.md @@ -45,6 +45,9 @@ https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80 - **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는 기존처럼 숨김). --- @@ -71,7 +74,6 @@ https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80 ## HISTORY -- 좌측 세로 사진(나선형 건축물 텍스처)은 에셋 추출이 안 돼서 기존 `images/history-1.jpg`를 임시로 대체 사용 중. 실제 Figma 이미지로 교체 필요. **(사용자가 직접 이미지 전달 예정)** - 2024/2023/2022/2021년 그룹은 Figma 렌더에서 아코디언이 collapsed 상태로 보여서 항목이 1개씩만 보인다(2024: 우리은행 로보어드바이저 구축, 2023: 신한은행 슈퍼SOL 운영 계약, 2022: 한화금융 서비스앱 플러스 리뉴얼 2차 계약, 2021: 롯데 렌터카 차세대 구축 계약). 펼쳤을 때 추가 항목이 더 있는지 정적 렌더로는 확인이 안 돼서 일단 보이는 1개씩만 반영함. 펼침 상태의 전체 목록 확인 필요. ## VISION @@ -109,6 +111,10 @@ https://www.figma.com/design/MnwN1Uzg5F6ks9Clr1brLW/%EB%94%94%EC%9E%90%EC%9D%B80 - **모바일 레이아웃 → 완료(2026-06-26)**. 사용자가 알려준 모바일 링크(`node-id 2319-2433`)로 확인 — 모바일 디자인엔 좌측 사진 영역이 원래 없고 타임라인만 존재. 기존 `.history__photo { display: none; }` 구현이 추측이 아니라 실제 디자인과 일치했음. +## 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라 변경 불필요. diff --git a/src/images/history-1.jpg b/src/images/history-1.jpg deleted file mode 100644 index 467fc5a..0000000 Binary files a/src/images/history-1.jpg and /dev/null differ diff --git a/src/images/unsplash_BSDebo0-UAo.png b/src/images/unsplash_BSDebo0-UAo.png new file mode 100644 index 0000000..fa58073 Binary files /dev/null and b/src/images/unsplash_BSDebo0-UAo.png differ diff --git a/src/index.html b/src/index.html index bf665c0..54ca380 100644 --- a/src/index.html +++ b/src/index.html @@ -108,176 +108,174 @@
-
-

HISTORY

-
- +

HISTORY

+
+ +
+
+
+ +
    +
  • +
    +

    한국전자기술연구원 대쉬보드 구축

    +

    + 유체기기 위험 운전 알고리즘 모니터링 프로그램 / 송풍 제어 모듈 비정상 운전 상태 진단 프로그램
    + 윈도우 프로그래밍 개발, 대시보드 UX UI 기획/디자인 +

    +
    + 25.12 - 26.02 +
    • +
  • +
    +

    현대차 판매시스템 구축

    +

    React.Js, F/E, B/E 개발

    +
    + 25.08 - 26.06 +
    • +
  • +
    +

    LG 개인정보삭제 프로그램개발

    +

    React.Js, F/E, B/E 개발

    +
    + 25.08 - 25.12 +
    • +
  • +
    +

    신한투자증권_New 슈퍼SOL 통합 프로젝트 Finance

    +

    Vue.Js, Publishing

    +
    + 25.07 - 26.07 +
    • +
  • +
    +

    신한은행_New 슈퍼SOL 통합 프로젝트 Finance

    +

    React.Js, Purescript, Publishing

    +
    + 25.07 - 26.06 +
    • +
  • +
    +

    한화생명 신탁시스템 재구축 Finance

    +

    React.Js, Pblishing, UX UI 기획, F/E 개발

    +
    + 25.06 - 26.06 +
    • +
  • +
    +

    SK매직 운영 개발

    +

    React.Js, Vue.Js, F/E, B/E 개발

    +
    + 25.07 - 25.12 +
    • +
  • +
    +

    롯데카드 외국인 선불카드 연계플랫폼 구축대행 Finance

    +

    Vue.Js, Next.Js, Publishing, F/E 개발

    +
    + 25.04 - 25.11 +
    • +
  • +
    +

    LG전자 홈스타일(리빙) 서비스 구축 프로젝트

    +

    UX UI 기획

    +
    + 25.04 - 25.08 +
    • +
  • +
    +

    에어인천 ERP 구축 프로젝트

    +

    UX UI 디자인, Publishing

    +
    + 25.03 - 25.04 +
    • +
  • +
    +

    하나캐피탈 자산관리시스템 재구축 프로젝트 Finance

    +

    Vue.Js, Nuxt.Js, Publishing, F/E 개발

    +
    + 25.03 - 25.08 +
    • +
  • +
    +

    현대해상 고도화 구축 Finance

    +

    React, Typescript, Scss

    +
    + 25.02 - 26.01 +
    • +
  • +
    +

    우리은행 전자지갑 구축 Finance

    +

    React, Typescript, Recoil, Spring Boot

    +
    + 25.01 - 25.07 +
    • +
-
-
- -
    -
  • -
    -

    한국전자기술연구원 대쉬보드 구축

    -

    - 유체기기 위험 운전 알고리즘 모니터링 프로그램 / 송풍 제어 모듈 비정상 운전 상태 진단 프로그램
    - 윈도우 프로그래밍 개발, 대시보드 UX UI 기획/디자인 -

    -
    - 25.12 - 26.02 -
    • -
  • -
    -

    현대차 판매시스템 구축

    -

    React.Js, F/E, B/E 개발

    -
    - 25.08 - 26.06 -
    • -
  • -
    -

    LG 개인정보삭제 프로그램개발

    -

    React.Js, F/E, B/E 개발

    -
    - 25.08 - 25.12 -
    • -
  • -
    -

    신한투자증권_New 슈퍼SOL 통합 프로젝트 Finance

    -

    Vue.Js, Publishing

    -
    - 25.07 - 26.07 -
    • -
  • -
    -

    신한은행_New 슈퍼SOL 통합 프로젝트 Finance

    -

    React.Js, Purescript, Publishing

    -
    - 25.07 - 26.06 -
    • -
  • -
    -

    한화생명 신탁시스템 재구축 Finance

    -

    React.Js, Pblishing, UX UI 기획, F/E 개발

    -
    - 25.06 - 26.06 -
    • -
  • -
    -

    SK매직 운영 개발

    -

    React.Js, Vue.Js, F/E, B/E 개발

    -
    - 25.07 - 25.12 -
    • -
  • -
    -

    롯데카드 외국인 선불카드 연계플랫폼 구축대행 Finance

    -

    Vue.Js, Next.Js, Publishing, F/E 개발

    -
    - 25.04 - 25.11 -
    • -
  • -
    -

    LG전자 홈스타일(리빙) 서비스 구축 프로젝트

    -

    UX UI 기획

    -
    - 25.04 - 25.08 -
    • -
  • -
    -

    에어인천 ERP 구축 프로젝트

    -

    UX UI 디자인, Publishing

    -
    - 25.03 - 25.04 -
    • -
  • -
    -

    하나캐피탈 자산관리시스템 재구축 프로젝트 Finance

    -

    Vue.Js, Nuxt.Js, Publishing, F/E 개발

    -
    - 25.03 - 25.08 -
    • -
  • -
    -

    현대해상 고도화 구축 Finance

    -

    React, Typescript, Scss

    -
    - 25.02 - 26.01 -
    • -
  • -
    -

    우리은행 전자지갑 구축 Finance

    -

    React, Typescript, Recoil, Spring Boot

    -
    - 25.01 - 25.07 -
    • -
-
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
+
+ +
@@ -610,12 +608,12 @@ BODA LAB

- Mail - bodalab@bodalab.com -   Tel - 010-1234-5678 + Mail + koji@bodalab.co.kr +   Tel + 010-4169-4728

-

© 2024 BODA LAB

+

© 2026 BODA LAB

diff --git a/src/scss/page/_about.scss b/src/scss/page/_about.scss index 3734429..552e9e5 100644 --- a/src/scss/page/_about.scss +++ b/src/scss/page/_about.scss @@ -50,6 +50,7 @@ .about__quote { display: flex; align-items: flex-end; + justify-content: flex-end; gap: 10px; } @@ -102,22 +103,22 @@ } // History -.history { - background: $color-bg-light; - padding: clamp(60px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px); -} +// 좌측 사진은 Figma 디자인 기준 섹션 좌/상/하 끝까지 풀블리드, 텍스트만 일반 패딩을 따름 +$history-photo-w: clamp(220px, 26vw, 500px); +$history-gap: clamp(40px, 6.25vw, 120px); -.history__inner { +.history { position: relative; - display: flex; - align-items: flex-start; - gap: clamp(40px, 6.25vw, 120px); + background: $color-bg-light; + padding: clamp(60px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px) clamp(60px, 6.25vw, 120px) 0; } .history__photo { - position: relative; - flex: 0 0 clamp(220px, 26vw, 500px); - align-self: stretch; + position: absolute; + top: 0; + left: 0; + bottom: 0; + width: $history-photo-w; overflow: hidden; background: $color-dark; @@ -130,15 +131,14 @@ .history__title { position: absolute; - top: clamp(16px, 2vw, 32px); - left: clamp(16px, 2vw, 32px); + top: clamp(60px, 6.25vw, 120px); + left: clamp(24px, 6.25vw, 120px); z-index: 1; color: $color-white; } .history__timeline { - flex: 1; - min-width: 0; + margin-left: calc(#{$history-photo-w} + #{$history-gap}); } .history__yearGroup { @@ -280,10 +280,6 @@ padding: 60px 24px; } - .history__inner { - flex-direction: column; - } - .history__title { position: static; margin-bottom: 32px; @@ -294,6 +290,10 @@ display: none; } + .history__timeline { + margin-left: 0; + } + .history__listItem { flex-direction: column; gap: 6px; diff --git a/src/scss/page/_contact.scss b/src/scss/page/_contact.scss index fa085a4..97f71d6 100644 --- a/src/scss/page/_contact.scss +++ b/src/scss/page/_contact.scss @@ -289,13 +289,14 @@ // Footer .footer { - border-top: 1px solid rgba($color-dark, 0.08); + background: #0d0d0d; padding: 32px 48px; } .footer__inner { display: flex; align-items: center; + align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; @@ -305,19 +306,23 @@ font-size: clamp(18px, 2vw, 28px); font-weight: 700; letter-spacing: 0.08em; - color: rgba($color-dark, 0.4); + color: #fff; line-height: 1.2; text-transform: uppercase; } .footer__contact { font-size: 13px; - font-weight: 300; - color: rgba($color-dark, 0.5); + // font-weight: 300; + color: #fff; +} + +.footer__contactLabel { + font-weight: 700; } .footer__contactLink { - color: rgba($color-dark, 0.5); + color: #fff; transition: color 0.2s; &:hover { @@ -327,8 +332,7 @@ .footer__copy { font-size: 12px; - font-weight: 300; - color: rgba($color-dark, 0.3); + color: #fff; letter-spacing: 0.03em; }