doc/미완료.md

@@ -45,9 +45,6 @@ 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`의 `<h2>`에 `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였음 → `<strong class="footer__contactLabel">`로 감싸고 `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는 기존처럼 숨김).
 
 ---
 
@@ -74,6 +71,7 @@ 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
@@ -111,10 +109,6 @@ 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`의 `<img>` `src`를 교체하고 기존 `history-1.jpg`는 삭제함. `npm run build` 통과, PC/모바일 스크린샷으로 Figma 렌더와 일치 확인.
-
 ## VISION (인용구 폰트)
 
 - **인용구 폰트 → 완료(2026-06-26)**. 사용자가 Figma에서 별도 지정 폰트 없음(SUIT)을 확인해줌. 기존 코드가 이미 SUIT라 변경 불필요.

src/index.html

@@ -108,9 +108,10 @@
 
       <!-- 03. HISTORY -->
       <section id="history" class="history">
-        <h2 class="sectionTitle history__title">HISTORY</h2>
+        <div class="history__inner">
+          <h2 class="sectionTitle sectionTitleDark history__title">HISTORY</h2>
           <div class="history__photo">
-          <img class="img" src="images/unsplash_BSDebo0-UAo.png" alt="" />
+            <img class="img" src="images/history-1.jpg" alt="" />
           </div>
           <div class="history__timeline">
             <div class="history__yearGroup isOpen">
@@ -278,6 +279,7 @@
               </ul>
             </div>
           </div>
+        </div>
       </section>
 
       <!-- 04. VISION -->
@@ -608,12 +610,12 @@
               BODA LAB
             </p>
             <p class="footer__contact">
-              <strong class="footer__contactLabel">Mail</strong>
+              Mail
-              <a class="footer__contactLink" href="mailto:koji@bodalab.co.kr">koji@bodalab.co.kr</a>
+              <a class="footer__contactLink" href="mailto:bodalab@bodalab.com">bodalab@bodalab.com</a>
-              &nbsp;&nbsp;<strong class="footer__contactLabel">Tel</strong>
+              &nbsp;&nbsp;Tel
-              <a class="footer__contactLink" href="tel:010-4169-4728">010-4169-4728</a>
+              <a class="footer__contactLink" href="tel:010-1234-5678">010-1234-5678</a>
             </p>
-            <p class="footer__copy">© 2026 BODA LAB</p>
+            <p class="footer__copy">© 2024 BODA LAB</p>
           </div>
         </footer>
       </section>

src/js/introAnimation.js

@@ -6,6 +6,6 @@ export function initIntroAnimation() {
 
   // 텍스트 순차 등장
   gsap.set([".intro__sub", ".intro__title"], { opacity: 0, y: 30 });
-  gsap.to(".intro__sub", { opacity: 1, y: 0, duration: 0.9, ease: "power3.out", delay: 0.3 });
+  gsap.to(".intro__sub", { opacity: 1, y: 0, duration: 0.9, ease: "power3.out", delay: 1.0 });
-  gsap.to(".intro__title", { opacity: 1, y: 0, duration: 0.9, ease: "power3.out", delay: 0.5 });
+  gsap.to(".intro__title", { opacity: 1, y: 0, duration: 0.9, ease: "power3.out", delay: 1.3 });
 }

src/scss/page/_about.scss

@@ -50,7 +50,6 @@
 .about__quote {
   display: flex;
   align-items: flex-end;
-  justify-content: flex-end;
   gap: 10px;
 }
 
@@ -103,22 +102,22 @@
 }
 
 // History
-// 좌측 사진은 Figma 디자인 기준 섹션 좌/상/하 끝까지 풀블리드, 텍스트만 일반 패딩을 따름
-$history-photo-w: clamp(220px, 26vw, 500px);
-$history-gap: clamp(40px, 6.25vw, 120px);
-
 .history {
-  position: relative;
   background: $color-bg-light;
-  padding: clamp(60px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px) clamp(60px, 6.25vw, 120px) 0;
+  padding: clamp(60px, 6.25vw, 120px) clamp(24px, 6.25vw, 120px);
+}
+
+.history__inner {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: clamp(40px, 6.25vw, 120px);
 }
 
 .history__photo {
-  position: absolute;
+  position: relative;
-  top: 0;
+  flex: 0 0 clamp(220px, 26vw, 500px);
-  left: 0;
+  align-self: stretch;
-  bottom: 0;
-  width: $history-photo-w;
   overflow: hidden;
   background: $color-dark;
 
@@ -131,14 +130,15 @@ $history-gap: clamp(40px, 6.25vw, 120px);
 
 .history__title {
   position: absolute;
-  top: clamp(60px, 6.25vw, 120px);
+  top: clamp(16px, 2vw, 32px);
-  left: clamp(24px, 6.25vw, 120px);
+  left: clamp(16px, 2vw, 32px);
   z-index: 1;
   color: $color-white;
 }
 
 .history__timeline {
-  margin-left: calc(#{$history-photo-w} + #{$history-gap});
+  flex: 1;
+  min-width: 0;
 }
 
 .history__yearGroup {
@@ -280,6 +280,10 @@ $history-gap: clamp(40px, 6.25vw, 120px);
     padding: 60px 24px;
   }
 
+  .history__inner {
+    flex-direction: column;
+  }
+
   .history__title {
     position: static;
     margin-bottom: 32px;
@@ -290,10 +294,6 @@ $history-gap: clamp(40px, 6.25vw, 120px);
     display: none;
   }
 
-  .history__timeline {
-    margin-left: 0;
-  }
-
   .history__listItem {
     flex-direction: column;
     gap: 6px;

src/scss/page/_contact.scss

@@ -289,14 +289,13 @@
 
 // Footer
 .footer {
-  background: #0d0d0d;
+  border-top: 1px solid rgba($color-dark, 0.08);
   padding: 32px 48px;
 }
 
 .footer__inner {
   display: flex;
   align-items: center;
-  align-items: flex-end;
   justify-content: space-between;
   gap: 24px;
   flex-wrap: wrap;
@@ -306,23 +305,19 @@
   font-size: clamp(18px, 2vw, 28px);
   font-weight: 700;
   letter-spacing: 0.08em;
-  color: #fff;
+  color: rgba($color-dark, 0.4);
   line-height: 1.2;
   text-transform: uppercase;
 }
 
 .footer__contact {
   font-size: 13px;
-  // font-weight: 300;
+  font-weight: 300;
-  color: #fff;
+  color: rgba($color-dark, 0.5);
-}
-
-.footer__contactLabel {
-  font-weight: 700;
 }
 
 .footer__contactLink {
-  color: #fff;
+  color: rgba($color-dark, 0.5);
   transition: color 0.2s;
 
   &:hover {
@@ -332,7 +327,8 @@
 
 .footer__copy {
   font-size: 12px;
-  color: #fff;
+  font-weight: 300;
+  color: rgba($color-dark, 0.3);
   letter-spacing: 0.03em;
 }