모멘터스 사이트 전면 개편 — 작업 보고

2026-08-23 ~ 08-24 작업. 랜딩·제품·인사이트·소개·문의 다섯 페이지와
다섯 사이트(the-moment.us · 마크 · 큐 · 플래너 · 빈방)의 공용 셸을 다시 짰습니다.

1. 무엇이 문제였나

한 줄로 요약하면 "우리만 아는 구분을 손님에게 강요하고 있었다" 입니다.

자리	증상	실제 원인
GNB	제품 vs 무료 도구가 대등한 두 메뉴	과금 여부는 우리 사정이지 손님의 구분이 아님
홈	캐러셀·최신글·인기·시리즈·카테고리 5단 목록	결국 같은 "목록"을 형식만 바꿔 다섯 번
소개	이미지 0장, 글 벽, 마지막이 "유튜브 지켜봐 주세요"	주어가 전부 우리 얘기
이야기	글이 3편	마크 인사이트 172편을 허브가 못 봄
상세	본문 712px, 태그가 밖으로 튐	레일을 먼저 놓고 남는 자리를 본문에 줌

2. 무엇을 했나

공용 셸 — 다섯 사이트가 한 벌

랜딩(apex)      밝은 바 · 가운데 정렬   ← 아래에 제품 헤더가 없다
제품 사이트      검정 바 · 좌측 정렬     ← 흰 제품 헤더 위에서 물러난다

메뉴: 플래너 · 로고 · 모의면접 · 빈방ᴺᴱᵂ · 더보기 ▾ | 인사이트 · 소개 + 문의하기 버튼
바에 이름을 꺼내는 기준을 정했습니다 — 이 패밀리 바를 달고 있는 사이트만.
헤이레시·컨텍스트처럼 따로 개발돼 그냥 점프하는 서비스는 더보기 안에.
눌렀을 때 돌아올 길이 있느냐로 가릅니다.
더보기 는 620×319 드롭다운. 전체폭 패널 + 화면 커튼은 걷어냈습니다 —
제품 사이트 위에 얹히는 패밀리 메뉴가 남의 집을 다 덮으면 안 됩니다.
워드마크 규격을 토큰으로 못박았습니다(Pretendard · 800 · -0.035em · 16/19/24px).
그전엔 바에서만 시스템 폰트로 렌더되고 있었습니다.

랜딩

전면 배너 6장(빈방·헤이레시·마크·큐·더플랜·컨텍스트), 버튼은 하나씩.
헤이레시는 영상(원본 28.5MB → 2.4MB 로 재인코딩, Workers 자산 상한 25MiB).
무료 도구 6종 = 애플 스토어 The latest 카드 레일(400×500 · 라운드 18 · 가로 스크롤),
각 카드에 그 서비스 로고(쿠팡·인스타·유튜브·핀터레스트·크롬·오픈AI).
마무리 = 나머지는 저희가 합니다 + 소개·인사이트·문의 셋.

페이지별 레퍼런스

페이지	레퍼런스	핵심
홈	apple.com/airpods	타일 max 1520 중앙 · 좌우 30px · 라운드 18
무료 도구	apple.com/store	카드 4:5 · 가로 레일
소개	toss.im/company	라벨 레일 + 2단 · 사진 2장
인사이트	toss.im/newsroom	비율 통일 카드 · 피처 2장
글 상세	mark.the-moment.us/insights	목차 · 본문 · 이어서 읽기 3단

전부 DOM 을 직접 재서 값을 옮겼습니다(눈대중 아님).

인사이트 3편 → 43편

마크 피드에서 글만 골라(/insights/) 목록에 합쳤습니다. 표지는 각 글의 og:image 를
읽어 쓰고, 마크가 재빌드되면 해시가 바뀌므로 매 빌드 다시 조회합니다.
바깥 글도 같은 탭에서 열립니다 — 그쪽에도 패밀리 바가 있어 한 번에 돌아옵니다.

소개 — 주어를 바꿨습니다

전 : AI가 사람을 이기는 지점을 찾습니다.   (우리 얘기)
후 : 나머지는 저희가 합니다.              (손님 얘기)
     사람이 안 해도 되는 일을 덜어냅니다.

모토는 사진 위 한 문장으로 — "저녁 7시엔 일이 아니라 사람이."
이미지 2장은 우리 사진을 레퍼런스로 새로 생성했습니다(애플 이미지 변형은 하지 않았습니다).

폭·간격을 토큰으로

글 상세 본문을 목록과 같은 1176px 로. 레일은 본문 바깥에, 자리가 없으면 접힘.
목록 상단 129.6px vs 상세 84px 로 갈려 있던 것 → --pg-top 등 토큰으로 통일.
본문 타이포도 세 사이트가 제각각(16.5/1.78 · 16/1.6 · 18.5/1.75) → --art-fs 17 / --art-lh 1.75.
마크 상세도 목록과 같은 폭으로 맞췄습니다.

3. 작업 중 잡은 사고

사고	원인
/products/ 폭 0 붕괴	`--gut`(가운데 여백)에 `max-width` 를 또 걸어 음수
홈 폭 760px	새 클래스 `.ap` 가 기존 `.ap` 와 충돌
소개 문단에 100px 패딩	`.ab-body` 가 이미 있었음
새 배치가 반영 안 됨	gen_site.py 에 `ap_stage`·`ap_body` 블록이 통째로 중복
모바일 가로 넘침 596px	`aspect-ratio` + `min-height` 가 높이로 폭을 역산
영상이 안 줄어듦	`<video>` 는 고유 크기로 그려짐 — width/height 100% 필요
빈방 문의하기가 파란 밑줄	버튼 CSS 가 apex 전용 파일에 있었음
회색 섹션 뒤 흰 띠 140px	푸터 `margin-top`

클래스 충돌만 하루에 네 번이라 빌드 단계 감시를 넣었습니다 —
같은 클래스를 두 곳에서 다르게 정의하면 경고가 찍힙니다(@media 재정의는 제외).

4. 지금 상태

the-moment.us / 마크 / 큐 / 플래너 / 빈방 — 다섯 곳 모두 같은 바(실측 확인)
빈방 자체 헤더도 다른 제품과 같은 3분할(로고 좌 · 메뉴 중앙 · CTA 우 · 높이 64 · 좌변 116)
2560 / 1440 / 430 세 폭에서 가로 스크롤 0, 깨진 이미지 0
컨텍스트가 제품으로 편입(제품 페이지 · 배너 · 메뉴)

블로그 템플릿 — 세 사이트 한 벌

정본은 공용 셸(SHELL_POST_CSS) 한 곳이고, sync_shell 이 제품 저장소에 밀어 넣습니다.

항목	값	모멘터스	마크	큐
목록 상단 여백	`--pg-top` 129.6px	✓	✓	✓
목록 제목	`--pg-h1` 56px	✓	✓	✓
상세 제목	`--pg-h1-post` 63.36px	✓	✓	—
본문	`--art-fs / --art-lh` 17px/1.75	✓	✓	✓
카드 그림	1200:630 · 라운드 16	✓	—	✓

실측(2026-08-24 배포 후): 세 사이트 목록 모두 상단 여백 129.6px · 제목 56px · 본문 17px/29.75px 로 일치.

마크는 Astro 스코프 스타일(.prose :global(p))이 공용 규칙을 덮고 있어서, 그 선언이 토큰을
참조하도록 바꿨습니다(23.2px/1.9 → 17px/1.75 실측 확인).

추가 작업 (08-24 오전)

네이밍 통일 — 이야기 → 인사이트. 모멘터스·마크·큐 세 사이트의 메뉴·제목·
태그 페이지·본문 링크까지(큐 38건, 마크 헤더, 모멘터스 전역).
마크 글 상세를 모멘터스와 같은 구성으로 — 분류 한 줄 → 제목 → 표지 → 부제(좌측 선)
→ 본문 → 지은이·공유 → 태그(가운데·선만). 그전엔 태그가 제목 위, 지은이가 본문 위였습니다.
출처 링크 — 마크다운 원문의 레이블: https://... 를 앵커로 바꿨습니다(51개 글 · 181건).
바깥 링크는 새 창 + rel=noopener, 본문에 ↗ 표시. 의존성 추가 없이 rehype 로 처리.
실측: 그 글의 raw URL 문단 0개, 출처 3건 모두 앵커 + 새 창.
CTA 배너 여백 — 본문과 붙어 있던 것에 clamp(40px,5vw,72px).
목록 상단 여백 — 마크 인사이트 목록도 공용 토큰을 보게(220px → 129.6px, 제목 56px).

5. 남은 것

큐 글 상세의 마크업 구조 — 타이포·간격은 공용 토큰을 받지만, 목차·이어서 읽기
레일이 없습니다. 마크업을 손대야 해서 별도 작업으로 남깁니다.
마크 목록 카드(.ins-card) — 그림이 .th 래퍼 없이 들어 있어 카드 규격
별칭이 안 붙습니다. 컴포넌트 마크업을 한 번 손봐야 합니다.
서비스 로고 — 지명적 사용이라 통상 문제없지만, 각 사 브랜드 가이드가 사전 협의를
요구하기도 합니다. 문제가 되면 로고 대신 서비스명 텍스트로 바꾸는 게 안전합니다.
컨텍스트 배너 해상도 — 지정하신 유튜브 영상에 maxres 썸네일이 없어 1280×720 이
최대였습니다. 더 큰 게 필요하면 영상 원본에서 프레임을 떠야 합니다.