tiomta.com 재구축 — 핸드오프 원본 베이스 (디테일 100% → 기능 재부착 순서)
사장님 지시 해석 (2026-07-24)
"완전히 삭제하고 다시" = 재구현본의
디테일이 핸드오프와 다른 것이 문제. 순서 확정: ①디테일을 100% 동일하게 → ②그 다음 기능 재부착.
조치
- root = 핸드오프 원본 그대로:
/ → app-shell.html(풀뷰포트 iframe → /handoff/티옴타 앱.dc.html 무수정 원본). 재구현이 아니므로 디테일 편차=0(정의상).
- 커머스 표면 전량 철거→아카이브(
.폐기재구축-20260724/): feed/preview/seller/tools/landing.html + feed/landing/티옴타편성.한선 + scenes.psv. server.js에서 편성 API·헬퍼·프로필 확장 필드 제거(5.4KB), admin.html 편성 섹션 제거. 완전 파기 아님 — 재부착 시 참조용.
- 유지: /landing 진단·/test·T5 /api/biz(200 회귀)·auth 프록시(로그인 수리분)·NFC/NFD 구제·/handoff·/design(타 세션).
- 동반: 티옴타경로.한선 7/7. 학습 래칫 tiomta_재구축_root원본래퍼_경로매핑.
검증
- 라우트 3종 title 정확 + 공개 HTTPS root=「티옴타 — 결을 잇는 미드스케일 커머스」.
- 헤드리스 육안: 데스크톱(브라운 바 h46·모듈탭 6·⌘K·폰프레임 9:41·AI 큐레이터 레일·하단 상태바)·모바일(반응형 스케일) — 원본 그대로 렌더 PASS.
다음 (기능 재부착 로드맵 — 디테일 승인 후)
- 사장님 육안 확인: tiomta.com이 의도한 디테일과 동일한지.
- 동일 확정 후: dc 런타임(support.js) 데이터 주입 지점에 아카이브해 둔 실기능(크라우니 통합 로그인·편성DB 27셀 결매칭·실예약 L1→L2) 재배선 — UI는 원본 무수정 유지.
- 기준 스크린샷+QA 체크리스트(스탠드얼론 교훈 규약)로 편차 0 검증하며 진행.
루트 = 발견 모바일 앱 이식 (2026-07-25 — 사장님 방향 확정분)
방향 (사장님)
디자인 승인. ①모바일에서 루트페이지처럼(폰 프레임 목업이 아니라 앱 그 자체) ②상단 모듈 메뉴=판매자/관리자 전용 ③이 모바일 디자인 그대로 root 이식, 여기서 다시 시작.
구현 (디자인이식 스킬 계약 준수 — 원본 무수정)
root(/) = shell/app-shell.html — TiomtaModuleShop.dc.html(발견) 원본 iframe. 소비자용, 상단 메뉴 없음.
데스크톱(>900px): 프로토타입 자체 표현(폰+AI 큐레이터 레일).
모바일(≤900px): 내장 스케일러 역보정 — 모듈이 통합 셸 바 74px(46+28)을 항상 차감(h=innerHeight-46-28 componentDidMount 실측) → iframe을 404×908(=874+74−40)로 잡으면 내부 h=834 → (834+40)/874=1.0 정확(이중 스케일 블러 0). 래퍼 fit()=min(vw/404, vh/874), 여백 밴드는 크롭.
/studio = shell/studio-shell.html — 티옴타 앱.dc.html(상단 모듈 메뉴 통합 셸) 원본 iframe. 판매자/관리자 전용(role 게이트=기능 재부착 단계).
동반 티옴타경로.한선 18/18(경로매핑·셸메뉴자격·스케일/역보정 산식 파리티). 학습 3건(재구축·원본래퍼·역보정).
디자인이식.sh 등록(tiomta-root, 산출=public/shell) diff 판정 옴(통과): 신규색 0·신규치수 3(원본 유도값, 이식노트 기록).검증
- 프로브(동일 오리진 iframe 390×844 실측): 내부 scale=1.0 · 폰 402×874 x=1 · 육안: 좌우 밴드 0, 세그먼트·결92%칩·로그게이지·이야기읽기·하단 5탭 정폭 풀블리드.
- 직접 헤드리스 창 캡처의 ~50px 시프트=헤드리스 창 메트릭 아티팩트로 판명(페이지 무결).
- 라우트:
/·/studio·/landing·/test title 정확, T5 /api/biz 200, 공개 HTTPS root·studio 200.
다음 (기능 재부착 — 이 베이스에서)
- /studio role 게이트(크라우니 통합 로그인 → seller/partner/admin만, 티옴타경로.한선 셸메뉴자격인가 배선).
- 발견 피드 데이터 주입(§B2 sceneData → 편성DB, dc 런타임 x-dc 로직만 교체·마크업 무수정) — 아카이브 기능(.폐기재구축-20260724) 순차 재배선.
접속 장애 신고 처리 (2026-07-25)
- 진단: 본체 13h52m 무중단·로컬/공개/외부(WebFetch) 전부 200·cert SAN 정상(tiomta.com 포함, 10월 만료). 어제 재기동 창(5회×~25초) 또는 아래 렌더 증상으로 추정.
- 실증상 "PIP처럼 작은 화면" = 기기가 데스크톱 분기(>900px)로 판정(데스크톱 웹사이트 모드/웹뷰의 넓은 뷰포트) → 폰 목업이 캔버스에 작게 표시.
- 수리: CSS 미디어쿼리 → JS 판정(모바일뷰인가: 폭≤900 또는 터치기기∧폭≤1366)으로 교체, body.mobile/desktop 클래스 분기. + 로딩 스피너(빈 검은화면 방지, 정본 토큰 색만 사용 — 이식가드 타→옴 정정).
- 검증: 한선 22/22 파리티·이식 diff 옴·390=mobile/1600=desktop 분기 실측·공개 200.
목업 프레임 제거 — 실기기 융합 (2026-07-25 지시)
- 모바일에서 IOSDevice 목업 요소 제거(주입 CSS — dc 재렌더에도 유지, 원본 무수정): 목업 상태바(9:41·안테나·배터리)·다이내믹 아일랜드(126×37)·홈 인디케이터(34px)·베젤 radius48/그림자 → 실제 기기 시계·배터리·주소창과 융합("폰 속 폰" 제거). 데스크톱은 프레임 유지.
- 실측: 프로브 computed style 4요소 전부 제거 확인 + 육안 풀블리드 PASS. 한선 24/24(프레임제거인가 파리티)·이식 diff 옴·공개 200.
- 접속 이슈 부록: "연결 아예 안됨" 신고 시점 전 구간 정상 실측(외부 페치 포함) — 일시적 사용자망 구간으로 추정, 자연 복구("다시 나옴").
단일 모바일 정책 (2026-07-26 지시)
- "모바일 페이지만 있으면 됨" — 데스크톱 표현(AI 큐레이터 레일 01~06·편성 원칙·AI 브리핑) 전부 제거. 래퍼의 데스크톱 분기 삭제, 기기 불문 iframe 404 고정+뷰포트 스케일(모듈 내부 desktop 판정 상시 거짓 → 레일 렌더 자체가 없음). 목업 프레임 제거도 상시화.
- 실측: 1600px 데스크톱 폭에서 큐레이터/브리핑/편성원칙 텍스트 부재·앱 탭만 존재. 한선 22/22·이식 diff 옴·공개 200. "사이즈 작음" 증상도 데스크톱 분기 소멸로 해소(항상 뷰포트 맞춤 스케일).
유동 채움 산출본 — 여백 프레임 소멸 (2026-07-26 3차, 실기기 캡처 기반)
- 사장님 실기기 캡처(데스크탑 폴더 png) 판독: 목업 시계 제거됐으나 앱이 402×874 고정 축소라 사방 검은 여백=프레임처럼 보임.
- 외부 주입(래퍼 CSS/JS/옵저버) 3차 시도 전부 dc 재렌더 레이스로 불안정 → 산출본 전환: TiomtaModuleShop 사본
handoff/발견-풀블리드.dc.html — 로직만 수정(재량 영역): desktop=false 고정·h 보정 제거·phoneScale/Inner='100%'·head CSS로 프레임 4종 제거+뷰포트 채움. 디자인 값 무변경. 래퍼=순수 iframe.
- 실측: 디바이스 rect 0,0 뷰포트 1:1(390×664·radius0)·육안 정폭 풀블리드·레일 텍스트 부재. 한선 17/17(산출본·유동채움 파리티)·이식 diff 옴(신규색 0·신규치수 0)·공개 200.
- 함정 기록: ①모듈에 </helmet> 없어 조건부 CSS 삽입이 조용히 스킵(assert 필수) ②브라우저가 flex:none→'flex: 0 0 auto' 정규화(속성선택자/문자매칭 함정) ③옵저버 전체스캔=가상시간 굶김(오피스 rAF 전례 재확인).
위아래 채움(dvh) + 웹 칼럼 (2026-07-26 4차)
- 증상: 좌우는 맞으나 ①모바일 위아래 짧음(검은 밴드) ②웹에서 앱이 전폭으로 팍 퍼짐.
- 처방: ①높이 100vh→100dvh(iOS 동적 툴바 대응, 래퍼+산출본 body·outer div) ②래퍼 iframe max-width:430px + body flex center → 모바일=전폭, 웹=폰 폭 칼럼 중앙.
- 실측: 390×844 세로 뷰포트=디바이스 rect 0,0 390×844 전체 채움(위아래 밴드 0), 1440×900 웹=430px 칼럼 중앙+양옆 캔버스 여백(정상). 한선 20/20(래퍼최대폭·앱표시폭 파리티)·이식 diff 옴·공개 200.
- 잔재 402/874는 x-import hint-size(디자인툴 플레이스홀더)뿐 — 런타임 캡 아님(디바이스 뷰포트 채움으로 실증).
로딩 지연 원인 규명 + 접속 000 판정 (2026-07-26 5차)
- "티옴타 여는 중" 지연 원인: .dc 프로토타입 런타임(support.js)이 unpkg.com에서 React+ReactDOM+Babel-standalone 3.1MB를 매 로드 받아 브라우저에서 JSX(ios-frame.jsx) 실시간 컴파일. 로컬 실측 52~200ms지만 폰 셀룰러 무캐시에선 3.3MB 다운로드가 병목.
- 처방(디자인 무변경): support.js 내장
window.__resources 훅으로 CDN→로컬 미러(/handoff/vendor/) 우회. 13개 dc 전체 주입. 외부 의존성 제거 + 동일오리진 캐시(max-age 86400) → 재방문 즉시. 이식 diff 옴 유지(색/치수 무변경). 잔여 큰 레버=ios-frame.jsx+모듈TS 프리컴파일로 Babel 3MB 제거(더 침습적, 별도 단계).
- 접속 000 판정=헤어핀 NAT 오진: 순단모니터 15블립 전부 로컬200/공개000, Host헤더 로컬 5/5 200, 사용자 22:51 성공로드 직후 22:52 000 표기, WebFetch 외부경로 매번 200 → 본체·실외부경로 정상. 인프라 수정 금지(메모리 feedback_공개https000_헤어핀NAT_오진 규칙 준수). 폰 실드롭 시 폰측 시각 필요.
- 비교: 티옴타2 캡처(10:51)=풀블리드 성공(전폭·실상태바/주소창 융합) vs 티옴타(7:52)=축소 프레임. 목표 달성 확인.
발견 네이티브 재작성 — dc 런타임 폐기 (2026-07-26 최종)
- 사장님 통찰: "코드를 새로 짠 게 아니라 덩어리를 웹앱처럼 불러온 것" → 정확. root가 .dc 프로토타입을 React+Babel 3.3MB 런타임째 로드하던 것.
- 폰트 사고 원인 규명: 원본 as-built는 폰트링크 0개=시스템폰트(-apple-system→iOS Apple SD Gothic Neo), 숫자 JetBrains Mono 폴백. README "Pretendard"는 프로토타입과 불일치. 예전 손재구현이 Pretendard CDN 링크→폰과 달라 "폰트 이상". dc통째로드는 시스템폰트라 "맞음". (메모리 feedback_dc프로토타입_시스템폰트_Pretendard아님)
- 네이티브 재작성: shell/app-shell.html = 순수 HTML/CSS/JS 12.5KB, 외부의존 0, 로드 0.001s(구 3.3MB 대비). 값 전부 TiomtaModuleShop.dc.html as-built 인라인스타일 복사(세그먼트필·씬카드·배지·로그3게이지·CTA·탭바·6씬 데이터·END카드). 폰트=시스템(정본 일치).
- 검증: 육안 승인화면(티옴타2) 픽셀 일치·이식 diff 옴(신규색 0=정확복사)·한선 20/20·JS node check·공개 200. 인터랙션(잠금 토스트·좋아요) 작동, 스토리/예약 시트는 다음 단계.
- 잔여: /studio(통합셸)·스토리/예약 인터랙션도 동일 방식 네이티브화 대기. dc 파일은 /handoff 참조용 유지.
✅ 마일스톤 달성 (2026-07-27) — 사장님 "됐다!!"
발견 루트 네이티브 완성 최종 확정: 12.5KB·외부의존0·즉시로드, 폰트 시스템 그대로, 실기기 융합(상태바/주소창), 상단여백(배지 top:56px)·하단탭 여백(safe-area) 정리. 핵심 교훈=원본 폰트는 시스템(-apple-system, Pretendard 아님)·dc런타임 3.3MB 폐기·값은 as-built 복사(diff 편차0).
다음: /studio 통합셸 네이티브화 + 스토리/예약 인터랙션 + 편성DB 재부착(아카이브 .폐기재구축-20260724).
반응형 검증 — "강제 한 크기" 아님 (2026-07-27)
- 사장님 우려("이 페이지 하나만, 강제로? 다른 폰은?") → 8기종 뷰포트 실측(280 폴드접힘~768 태블릿).
- 결과: 전 기종 가로 오버플로우 0. 320 SE 리뷰끝 306/320·280 폴드 리뷰끝 266/280(여유). 폭=유동(width100%+max-width430 칼럼), 높이=100dvh(기기별 적응), 넓은화면=폰폭 칼럼 중앙. 좁은폰(≤360/≤300) 세그먼트 폰트 미디어쿼리 축소. = 표준 반응형(하드코딩 아님).
- 정직 범위: 발견(피드)만 네이티브 완성. 잠금탭(투데이/메신저/회차/내결)·세그(P2P/C2P/리뷰)=스펙 L0게스트 게이트(편성만)라 토스트. 그 페이지들+/studio는 dc런타임(미재작성). 다음=순차 네이티브화+데이터 재부착.
- ⚠운영: 시스템 디스크 100%(153MB 잔여) — 서버 쓰기(프로필/로그) 위험, 별도 정리 필요.
스토리 오버레이 + 예약 시트 네이티브 (2026-07-27) — 핸드오프 이어짓기
- 발견 피드에서 이어지는 핵심 흐름(이야기 읽기→스토리→예약→확정) 네이티브 완성. 값 전부 TiomtaModuleShop.dc.html §B3·§B4 as-built 복사.
- 스토리 오버레이: 헤더(브랜드EN·✕)·이미지·인용·본문·업력아카이브·검수배지3·AI편집노트·실사용리뷰·왜나에게·CTA. 예약시트: 도착약속/배송/결제·(finance/benefit/repeat 조건부)·수수료바(72/16/9/3)·예약하기/닫기.
- 전체 씬 데이터 재추출(quote·body·archive·badges·aiNote·review·eta·ship·finance·benefit·repeat). 파일 ~28KB(외부의존0 유지).
- 함정: re.sub 치환문자열이
\n을 개행 해석→JSON 파손(lambda 치환으로 회피). old_js 유니코드이스케이프 매칭실패→Edit 직접배선. 헤드리스 실측 스토리·시트 원본 픽셀일치·JS통과·공개200.
- 잔여: 투데이/메신저/회차/내결·P2P/C2P/리뷰SNS 탭, 회원여정·리뷰작성 시트, /studio. + 실데이터(로그인·편성DB·예약) 재부착.
회원 여정(가입) 네이티브 (2026-07-29) — 잠긴 탭 목적지
- 잠긴 탭/세그먼트 클릭 → 회원 여정 오버레이(원본 §B1). 이전=토스트 dead-end → 실화면 배선.
- 4단계(게스트 완료✓/회원가입 다음미션+가입버튼/첫구매 잠김/신상확인 잠김) — numStyle·chipStyle·step border 전부 as-built 복사. memberLevel 0 게스트 고정(실로그인 배선=다음).
- 헤드리스 실측 원본 픽셀일치·JS통과·공개200. 파일 33KB(외부의존0).
- 5GB tmp파일 정체=타 세션 crownyc TritVM 무한재귀 "리턴스택 넘침" 7500만회 반복출력(VM 버그, 티옴타 무관, 죽음). 디스크 107GB 여유라 진행 무지장.
- 잔여: 투데이/메신저/회차/내결·P2P/C2P/리뷰SNS 탭 콘텐츠, 리뷰작성 시트, 설정, /studio + 실데이터(로그인·편성DB·예약) 재부착.