11 KiB

Raw Blame History

모바일 Figma 검수 기록 (완료)

작업 원칙

PC는 검수 완료 상태 — 절대 건드리지 않음. 모든 수정은 @include mo { ... } 미디어쿼리 블록 안에서만 진행.
Figma 기준값이 PC에서도 어긋나 보이는 경우가 있어도, base(공유) 규칙은 수정하지 않고 모바일 블록 안에서 모바일 전용 값으로 덮어씀(PC 재검수 유발 방지).
새 마크업(예: 모바일 전용 이미지 <img>)을 추가할 때도 기본 상태는 display:none으로 두고 @include mo에서만 노출 — PC 렌더링에 영향 없음.
doc/figma-specs-0624/*-mobile.json을 기준으로 섹션별 전수 비교.

진행 계획

GNB 모바일 드로어 (gnb-drawer-mobile.json)
01 HOME/INTRO (01-home-mobile.json)
02 ABOUT (02-about-mobile.json)
03 HISTORY (03-history-mobile.json)
04 VISION (04-vision-mobile.json)
05 PROJECT (05-project-mobile.json)
06 CONTACT/FOOTER (06-contact-mobile.json, 08-footer-instance-mobile.json)
개인정보 동의 모달 (09-privacy-modal-mobile.json)

각 섹션은 발견 즉시 아래에 기록하고, 수정 완료되면 체크합니다.

발견 사항

1. GNB 모바일 (gnb-drawer-mobile.json, 01-home-mobile.json) — 완료

모바일 전용 정사각 로고 마크 적용 — 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이라 영향 없음.
.gnb__mobileNavClose(닫기 X) 48×48, top/right 20px로 — Figma "Navigation icon"(menu-close) 컴포넌트 규격.
.gnb__hamburger 48×48로 — 동일 컴포넌트(menu-open) 규격.
.gnb__mobileNavList gap 24px(고정) — Figma "menu" 컨테이너 itemSpacing.
.gnb__mobileNavLink padding 24px 32px 추가, font-size clamp(24px,8.5vw,32px)(375px 기준 32px) — Figma "GNB" 아이템 규격.
.gnb__mobileNav overflow-y:auto 추가 — 패딩이 늘어 6개 항목이 작은 화면에서 넘칠 수 있어 안전장치.
.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) — 완료

.about 모바일 padding 가로 24→20px, 하단 60→80px (Figma pad=[t80,r20,b80,l20], 상단은 고정 GNB 높이 보정값 유지)
.about__inner gap 모바일 160px(고정) — head+quote 블록과 expertise 리스트 사이 간격(PC clamp는 그대로 둠)
.about__head .sectionTitle margin-bottom 모바일 30px — title→desc 간격(PC base 57px는 그대로 둠, Figma 기준 PC60/모바일30)
.about__desc margin-bottom 모바일 120px — desc→quote 간격(PC base 70px는 그대로 둠)
.about__quote 모바일에서 세로 스택으로 바꾸던 오버라이드 제거 — Figma 모바일도 PC와 동일하게 가로 배치. 좌우 30px 인셋만 추가
.about__expertiseList 모바일 gap 32→64px, 좌우 30px 인셋 추가
모두 @include mo 안에서만 수정, PC 값(70px/57px/clamp)은 그대로 — Playwright로 PC marginBottom:70px 불변 확인.

4. HISTORY 모바일 (03-history-mobile.json) — 완료

.history 모바일 padding 60px 24px → 80px 20px (Figma pad=[t80,r20,b80,l20])
.history__title margin-bottom 32px → 40px (Figma: 헤딩↔타임라인 간격 40, root gap)
.history__listItem .badge padding 모바일 4px 6px로 보정 — Figma 기준 PC도 4/6이 맞고 base(2px 8px)가 PC에서도 틀려있었지만, PC는 손대지 않고 모바일만 동일 셀렉터로 덮어씀.
(검수 중 발견) .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에 도달 — 그대로 둠)이라 같은 패턴으로 모바일만 오버라이드.
.vision 모바일 padding 60px 24px → 80px 20px
.vision__inner gap 모바일 160px — head/quote/keywordList 사이(PC clamp 그대로)
.vision__head gap 모바일 30px — title→desc 간격(PC clamp 그대로)
.vision__quote, .vision__keywordList 모바일 좌우 30px 인셋 추가
.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으로 쌓임.
.project 모바일 padding 60px 20px → 80px 20px
.project__heading margin-bottom 36px → 40px
.project__grid, .project__row 모바일 gap 32px → 56px(카드 사이 간격, Figma 고정값)
.project__card 모바일 gap 16px → 24px(썸네일↔정보 간격) — Figma 기준 PC도 24가 맞고 base(16px)가 PC에서도 틀려있었지만 PC는 두고 모바일만 보정
.project__thumb 모바일 전용 썸네일 비율 335:200 추가(PC 624:396은 그대로)
.project__company margin-top 모바일 18px, .project__stack margin-top 모바일 24px — Figma 고정값(name→company 18, company→tags 24), PC base(15px/20px)는 그대로 둠
.project__more margin-top 48px → 56px
.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 대조) — 완료

.contact 모바일 좌우 padding 20px(PC clamp 그대로)
.contact__desc 모바일 margin-top 30px / margin-bottom 80px — PC(60px/120px)는 Figma와 이미 정확히 일치해서 그대로 둠(돌파구: PC가 이미 맞는 값이라 mo 오버라이드로만 모바일을 따로 보정).
.contact__inner margin-bottom 모바일 80px(PC base 88px는 그대로 둠)
.contact__label margin-bottom 모바일 16px, .contact__infoList gap 모바일 20px — Figma 공통값인데 base가 PC에서도 어긋나 있어 모바일만 보정
.contactAccordion__icon 모바일 32×32 — Figma 공통값(PC도 32, base 24px는 PC에서도 틀림) → 모바일만 보정
.contactAccordion__item:not(:first-child) .contactAccordion__header margin-top 모바일 80px — 두 아코디언 블록(Contact Us/Recruitment) 사이 간격
.contactForm__input/.textarea font-weight 모바일 400 — Figma 공통값(PC도 400, base 300은 PC에서도 틀림) → 모바일만 보정
.careerTags gap 모바일 16px, .careerTag gap 모바일 8px — Figma 공통값, base가 PC에서도 어긋나 있어 모바일만 보정
FOOTER: .footer 모바일 padding 풀블리드로 변경(가로 패딩 제거, 다크 박스가 화면 끝까지), .footer__inner padding 40px 전체/gap 46px로 — Figma 모바일 footer 인스턴스 규격
FOOTER: Mail/Tel을 모바일에서 줄바꿈 — <br class="footer__contactBreak"> 추가(PC에선 display:none으로 숨겨 기존 한 줄 레이아웃 유지, 모바일에서만 노출). 기존   간격은 .footer__contactGap으로 감싸 모바일에서 숨김.
확인 결과 변경 불필요: input padding(16px 전체)/체크박스 크기(26px)·gap(14px)/SEND 버튼 padding·폭(107×44 상당) 모두 이미 일치.

참고: 처음 받은 09-privacy-modal-mobile.json은 실제로는 06_Expertise(Contact) 콘텐츠만 들어있었음 — 같은 프레임 안에 모달이 오버레이로 같이 배치돼 있어서, 6번째 자식 노드(MODAL)까지 내려가야 실제 모달 스펙이 나옴. 이번에 raw JSON을 더 깊게 파봐서 확인.
모바일은 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 라운드 그대로 유지).
.privacyModal__title 모바일 22px(PC base 32px는 Figma와 이미 일치해서 그대로 둠)
.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 불변 + 모바일 값 일치를 확인했습니다.

11 KiB Raw Blame History Unescape Escape