110 lines
11 KiB
Markdown
110 lines
11 KiB
Markdown
# 모바일 Figma 검수 기록 (완료)
|
||
|
||
## 작업 원칙
|
||
|
||
- **PC는 검수 완료 상태 — 절대 건드리지 않음.** 모든 수정은 `@include mo { ... }` 미디어쿼리 블록 안에서만 진행.
|
||
- Figma 기준값이 PC에서도 어긋나 보이는 경우가 있어도, base(공유) 규칙은 수정하지 않고 모바일 블록 안에서 모바일 전용 값으로 덮어씀(PC 재검수 유발 방지).
|
||
- 새 마크업(예: 모바일 전용 이미지 `<img>`)을 추가할 때도 기본 상태는 `display:none`으로 두고 `@include mo`에서만 노출 — PC 렌더링에 영향 없음.
|
||
- `doc/figma-specs-0624/*-mobile.json`을 기준으로 섹션별 전수 비교.
|
||
|
||
## 진행 계획
|
||
|
||
1. GNB 모바일 드로어 (`gnb-drawer-mobile.json`)
|
||
2. 01 HOME/INTRO (`01-home-mobile.json`)
|
||
3. 02 ABOUT (`02-about-mobile.json`)
|
||
4. 03 HISTORY (`03-history-mobile.json`)
|
||
5. 04 VISION (`04-vision-mobile.json`)
|
||
6. 05 PROJECT (`05-project-mobile.json`)
|
||
7. 06 CONTACT/FOOTER (`06-contact-mobile.json`, `08-footer-instance-mobile.json`)
|
||
8. 개인정보 동의 모달 (`09-privacy-modal-mobile.json`)
|
||
|
||
각 섹션은 발견 즉시 아래에 기록하고, 수정 완료되면 체크합니다.
|
||
|
||
---
|
||
|
||
## 발견 사항
|
||
|
||
### 1. GNB 모바일 (gnb-drawer-mobile.json, 01-home-mobile.json) — 완료
|
||
|
||
- [x] **모바일 전용 정사각 로고 마크 적용** — Figma는 모바일에서 PC 워드마크가 아니라 정사각 "B" 마크(40×40, 노드 `2319:2241`)를 따로 씀. REST API로 추출(`src/images/logo-mobile.png`), `index.html`에 `.gnb__logoImg--desktop`/`--mobile` 두 개의 `<img>`를 두고 `@include mo`에서 토글. PC는 `--mobile`이 base 규칙에서 `display:none`이라 영향 없음.
|
||
- [x] **`.gnb__mobileNavClose`(닫기 X)** 48×48, top/right 20px로 — Figma "Navigation icon"(menu-close) 컴포넌트 규격.
|
||
- [x] **`.gnb__hamburger`** 48×48로 — 동일 컴포넌트(menu-open) 규격.
|
||
- [x] **`.gnb__mobileNavList` gap** 24px(고정) — Figma "menu" 컨테이너 itemSpacing.
|
||
- [x] **`.gnb__mobileNavLink`** padding 24px 32px 추가, font-size `clamp(24px,8.5vw,32px)`(375px 기준 32px) — Figma "GNB" 아이템 규격.
|
||
- [x] **`.gnb__mobileNav` overflow-y:auto 추가** — 패딩이 늘어 6개 항목이 작은 화면에서 넘칠 수 있어 안전장치.
|
||
- [x] **`.scrollDown` 모바일** 72→52px 축소하던 것을 되돌림(데스크톱과 동일 72×72가 정답), bottom 24→20px.
|
||
- 모두 `@include mo` 블록 안에서만 수정 / 새 `<img>`는 base에서 `display:none`으로 기본 차단 — PC 스크린샷 대조로 무영향 확인.
|
||
|
||
### 2. HOME/INTRO 모바일 (01-home-mobile.json) — 완료, 수정 불필요
|
||
|
||
- 확인 결과: `.intro__sub`(clamp 최소 24px), `.intro__title`(clamp 최소 42px), `.intro__content` center 정렬 모두 Figma 모바일 실측값과 정확히 일치. 수정 사항 없음.
|
||
|
||
### 3. ABOUT 모바일 (02-about-mobile.json) — 완료
|
||
|
||
- [x] `.about` 모바일 padding 가로 24→20px, 하단 60→80px (Figma `pad=[t80,r20,b80,l20]`, 상단은 고정 GNB 높이 보정값 유지)
|
||
- [x] `.about__inner` gap 모바일 160px(고정) — head+quote 블록과 expertise 리스트 사이 간격(PC clamp는 그대로 둠)
|
||
- [x] `.about__head .sectionTitle` margin-bottom 모바일 30px — title→desc 간격(PC base 57px는 그대로 둠, Figma 기준 PC60/모바일30)
|
||
- [x] `.about__desc` margin-bottom 모바일 120px — desc→quote 간격(PC base 70px는 그대로 둠)
|
||
- [x] `.about__quote` 모바일에서 세로 스택으로 바꾸던 오버라이드 제거 — Figma 모바일도 PC와 동일하게 가로 배치. 좌우 30px 인셋만 추가
|
||
- [x] `.about__expertiseList` 모바일 gap 32→64px, 좌우 30px 인셋 추가
|
||
- 모두 `@include mo` 안에서만 수정, PC 값(70px/57px/clamp)은 그대로 — Playwright로 PC `marginBottom:70px` 불변 확인.
|
||
|
||
### 4. HISTORY 모바일 (03-history-mobile.json) — 완료
|
||
|
||
- [x] `.history` 모바일 padding 60px 24px → 80px 20px (Figma `pad=[t80,r20,b80,l20]`)
|
||
- [x] `.history__title` margin-bottom 32px → 40px (Figma: 헤딩↔타임라인 간격 40, root gap)
|
||
- [x] `.history__listItem .badge` padding 모바일 4px 6px로 보정 — Figma 기준 PC도 4/6이 맞고 base(2px 8px)가 PC에서도 틀려있었지만, PC는 손대지 않고 모바일만 동일 셀렉터로 덮어씀.
|
||
- [x] **(검수 중 발견)** `.history__listItem`을 모바일에서 `flex-direction:column`으로 바꾸면서 PC의 `align-items:center`가 그대로 적용돼 날짜가 가운데로 쏠리는 버그 — `align-items:flex-start` 추가로 좌측 정렬 복구.
|
||
- 확인 결과 변경 불필요: `.history__year`(24px), `.title`(14px), `.sub`(12px, 이미 모바일 오버라이드 있었음), `.date`(12px) 폰트 모두 Figma와 일치.
|
||
- 변경 보류: `.history__listItem`이 모바일에서 세로 스택인 것 자체는 유지 — Figma raw 데이터상으론 가로 배치(`layout=HORIZONTAL`)이지만 실제 텍스트 폭이 컨테이너보다 넓게 오버플로우하는 항목이 다수라(예: 폭307 vs 컨테이너297) Figma 목업 자체의 정합성이 낮음. 세로 스택이 376px 폭에서 더 안전한 실무적 선택이라 판단해 유지.
|
||
|
||
### 5. VISION 모바일 (04-vision-mobile.json, 04-vision-pc.json 대조) — 완료
|
||
|
||
- ABOUT과 구조가 동일(헤드+쿼트+키워드리스트 3블록을 `.vision__inner` 하나의 gap으로 묶음). PC도 Figma상 root gap이 균일하게 120(우연히 base clamp가 PC에서 정확히 120에 도달 — 그대로 둠)이라 같은 패턴으로 모바일만 오버라이드.
|
||
- [x] `.vision` 모바일 padding 60px 24px → 80px 20px
|
||
- [x] `.vision__inner` gap 모바일 160px — head/quote/keywordList 사이(PC clamp 그대로)
|
||
- [x] `.vision__head` gap 모바일 30px — title→desc 간격(PC clamp 그대로)
|
||
- [x] `.vision__quote`, `.vision__keywordList` 모바일 좌우 30px 인셋 추가
|
||
- [x] `.vision__keywordList` gap 모바일 40px → 64px
|
||
- 확인 결과 변경 불필요: `.mark`(86px)/`.text`(22px)/`.keyword`(32px)/`.desc`(14px) 폰트, `.vision__quote` 가로 배치 모두 이미 일치.
|
||
|
||
### 6. PROJECT 모바일 (05-project-mobile.json, 05-project-pc.json 대조) — 완료
|
||
|
||
- 모바일은 1열 고정(페어링 없음) — Figma도 row 구조 없이 카드가 그냥 56px gap으로 쌓임.
|
||
- [x] `.project` 모바일 padding 60px 20px → 80px 20px
|
||
- [x] `.project__heading` margin-bottom 36px → 40px
|
||
- [x] `.project__grid`, `.project__row` 모바일 gap 32px → 56px(카드 사이 간격, Figma 고정값)
|
||
- [x] `.project__card` 모바일 gap 16px → 24px(썸네일↔정보 간격) — Figma 기준 PC도 24가 맞고 base(16px)가 PC에서도 틀려있었지만 PC는 두고 모바일만 보정
|
||
- [x] `.project__thumb` 모바일 전용 썸네일 비율 335:200 추가(PC 624:396은 그대로)
|
||
- [x] `.project__company` margin-top 모바일 18px, `.project__stack` margin-top 모바일 24px — Figma 고정값(name→company 18, company→tags 24), PC base(15px/20px)는 그대로 둠
|
||
- [x] `.project__more` margin-top 48px → 56px
|
||
- [x] `.btnMore` 모바일 padding 16px→13px(세로) — Figma 버튼 규격 139×48에 맞춤(실측 137.8×54 → 보정)
|
||
- 확인 결과 변경 불필요: `.project__name`(18/700), `.project__company`(14/400), `.project__tag`(padding 4·14·6·14, 12px/300) 폰트·패딩 모두 고정값이라 이미 일치. 날짜 텍스트는 Figma에서도 `visible:false`라 마크업에서 의도적으로 제외된 것 확인(기존 PC 검수 결론과 동일).
|
||
|
||
### 7. CONTACT/FOOTER 모바일 (06-contact-mobile.json, 08-footer-instance-mobile.json, PC 대조) — 완료
|
||
|
||
- [x] `.contact` 모바일 좌우 padding 20px(PC clamp 그대로)
|
||
- [x] `.contact__desc` 모바일 margin-top 30px / margin-bottom 80px — PC(60px/120px)는 Figma와 이미 정확히 일치해서 그대로 둠(돌파구: PC가 이미 맞는 값이라 mo 오버라이드로만 모바일을 따로 보정).
|
||
- [x] `.contact__inner` margin-bottom 모바일 80px(PC base 88px는 그대로 둠)
|
||
- [x] `.contact__label` margin-bottom 모바일 16px, `.contact__infoList` gap 모바일 20px — Figma 공통값인데 base가 PC에서도 어긋나 있어 모바일만 보정
|
||
- [x] `.contactAccordion__icon` 모바일 32×32 — Figma 공통값(PC도 32, base 24px는 PC에서도 틀림) → 모바일만 보정
|
||
- [x] `.contactAccordion__item:not(:first-child) .contactAccordion__header` margin-top 모바일 80px — 두 아코디언 블록(Contact Us/Recruitment) 사이 간격
|
||
- [x] `.contactForm__input/.textarea` font-weight 모바일 400 — Figma 공통값(PC도 400, base 300은 PC에서도 틀림) → 모바일만 보정
|
||
- [x] `.careerTags` gap 모바일 16px, `.careerTag` gap 모바일 8px — Figma 공통값, base가 PC에서도 어긋나 있어 모바일만 보정
|
||
- [x] **FOOTER**: `.footer` 모바일 padding 풀블리드로 변경(가로 패딩 제거, 다크 박스가 화면 끝까지), `.footer__inner` padding 40px 전체/gap 46px로 — Figma 모바일 footer 인스턴스 규격
|
||
- [x] **FOOTER**: Mail/Tel을 모바일에서 줄바꿈 — `<br class="footer__contactBreak">` 추가(PC에선 `display:none`으로 숨겨 기존 한 줄 레이아웃 유지, 모바일에서만 노출). 기존 ` ` 간격은 `.footer__contactGap`으로 감싸 모바일에서 숨김.
|
||
- 확인 결과 변경 불필요: input padding(16px 전체)/체크박스 크기(26px)·gap(14px)/SEND 버튼 padding·폭(107×44 상당) 모두 이미 일치.
|
||
|
||
### 8. 개인정보 동의 모달 모바일 (09-privacy-modal-mobile.json, PC 대조) — 완료
|
||
|
||
- 참고: 처음 받은 `09-privacy-modal-mobile.json`은 실제로는 06_Expertise(Contact) 콘텐츠만 들어있었음 — 같은 프레임 안에 모달이 오버레이로 같이 배치돼 있어서, 6번째 자식 노드(`MODAL`)까지 내려가야 실제 모달 스펙이 나옴. 이번에 raw JSON을 더 깊게 파봐서 확인.
|
||
- [x] **모바일은 PC의 중앙 카드형 모달이 아니라 화면 상단에 붙는 풀블리드 시트** — `MODAL` 노드 자체가 x/y가 화면 좌상단과 동일, width=375(화면 전체), cornerRadius 없음(완전 각짐). `.privacyModal{align-items:flex-start;padding:0}`, `.privacyModal__panel{max-width:none;border-radius:0;padding:24px}`로 변경(PC는 중앙정렬/720px/16px 라운드 그대로 유지).
|
||
- [x] `.privacyModal__title` 모바일 22px(PC base 32px는 Figma와 이미 일치해서 그대로 둠)
|
||
- [x] `.privacyModal__close` 모바일 48×48 — Figma 공통값(PC도 48이 맞고 base 24px가 PC에서도 틀려있었음, GNB 드로어 닫기버튼과 동일한 "Navigation icon" 컴포넌트) → 모바일만 보정
|
||
- 확인 결과 변경 불필요: body 텍스트(14px/400), 체크박스(26px·gap14, contactForm 체크박스 스타일 재사용)는 이미 일치.
|
||
|
||
## 결론
|
||
|
||
PC 화면은 어떤 base 규칙도 직접 수정하지 않았고, 모든 보정은 `@include mo` 블록 안에서만 이루어졌습니다(예외: 새로 추가한 모바일 전용 마크업 2건은 base에서 `display:none`으로 기본 차단 — `.gnb__logoImg--mobile`, `.footer__contactBreak`). Figma 데이터상 PC에서도 틀려있던 값들(badge padding, contactAccordion 아이콘 크기, input font-weight, careerTag 간격, privacyModal 닫기버튼 크기 등)은 PC base는 그대로 두고 모바일 셀렉터에만 동일/보정값을 다시 선언하는 방식으로 처리했습니다. 모든 변경은 Playwright로 PC computed style 불변 + 모바일 값 일치를 확인했습니다.
|
||
|