"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", li: "li", p: "p", pre: "pre", strong: "strong", table: "table", tbody: "tbody", td: "td", th: "th", thead: "thead", tr: "tr", ul: "ul", ..._provideComponents(), ...props.components }, {PanelCollapseComparisonDemo, WidthVsTranslateDemo} = _components; if (!PanelCollapseComparisonDemo) _missingMdxReference("PanelCollapseComparisonDemo", true); if (!WidthVsTranslateDemo) _missingMdxReference("WidthVsTranslateDemo", true); return _jsxs(_Fragment, { children: [_jsx(_components.h2, { id: "들어가며", children: "들어가며" }), "\n", _jsx(_components.p, { children: "JSON diff 화면에 접을 수 있는 사이드 패널을 붙였다. 태스크 목록을 왼쪽에 두고, 필요 없을 때는 접어서 본문에 공간을 양보하는 흔한 레이아웃이다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "

\n {/* Left Panel — Collapsible */}\n \n \n \n \n

\n\n {/* Right Panel */}\n ...\n\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "w-72" }), "와 ", _jsx(_components.code, { children: "w-0" }), "을 토글하고 transition을 걸었으니 부드럽게 접히겠지, 했는데 실제로는 접히는 0.3초 동안 패널 안의 텍스트가 줄바꿈을 반복하며 출렁였다. 한 줄이던 항목이 두 줄, 세 줄로 불어났다가 사라지고, 다시 펼칠 때도 잠깐 같은 출렁임이 지나간 뒤에야 제자리를 찾는다."] }), "\n", _jsx(_components.h2, { id: "직접-깨뜨려보기", children: "직접 깨뜨려보기" }), "\n", _jsx(_components.p, { children: "애니메이션은 0.3초 만에 지나가서 뭐가 깨지는지 정확히 보기 어렵다. 그래서 접힘 정도를 슬라이더로 묶어뒀다. 천천히 끌어보면 어느 너비에서 어떤 줄이 꺾이는지가 그대로 보인다." }), "\n", _jsx(PanelCollapseComparisonDemo, {}), "\n", _jsx(_components.p, { children: "왼쪽이 위의 문제 코드다. 너비가 줄어드는 동안 \"JSON diff 결과 — 변경 필드 12개\" 같은 한 줄짜리 텍스트가 공간에 맞춰 두 줄, 세 줄로 꺾인다. 오른쪽은 같은 마크업에 한 가지만 다르다(안쪽 카드의 너비가 고정되어 있다.) 텍스트는 끝까지 한 줄을 유지하고, 패널은 오른쪽부터 깔끔하게 잘려나간다." }), "\n", _jsxs(_components.p, { children: ["\"카드 실제 경계 보기\"를 켜면 오른쪽 버전의 트릭이 드러난다. 카드는 한 번도 줄어든 적이 없다. wrapper가 좁아지며 카드를 ", _jsx(_components.strong, { children: "잘라서 보여주고 있을 뿐" }), "이다."] }), "\n", _jsx(_components.h2, { id: "problem--카드는-부모의-너비를-따라간다", children: "Problem — 카드는 부모의 너비를 따라간다" }), "\n", _jsxs(_components.p, { children: ["블록 요소는 너비를 지정하지 않으면 부모의 콘텐츠 영역을 가득 채운다. 안쪽 Card에 width가 없으니 wrapper가 ", _jsx(_components.code, { children: "w-72 → w-0" }), "으로 줄어드는 매 순간, Card도 같이 줄어든다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-md", children: "[바깥 div w-72 → w-0]\n └── [안쪽 Card] ← width 미지정, 부모를 100% 상속\n └── [텍스트] ← 좁아진 공간에 맞춰 매 프레임 줄바꿈\n" }) }), "\n", _jsx(_components.p, { children: "그리고 텍스트 줄바꿈은 layout 단계의 일이다. transition이 진행되는 동안 브라우저는 매 프레임 새 너비로 줄 배치를 다시 계산한다. 280px일 때 한 줄이던 문장이 200px에서 두 줄이 되고 120px에서 세 줄이 되는, 그 모든 중간 상태가 화면에 그려진 것이 우리가 본 출렁임이다." }), "\n", _jsxs(_components.p, { children: ["접힌 뒤 다시 펼칠 때 일시적으로 불안정했던 것도 같은 원리다. ", _jsx(_components.code, { children: "w-0" }), "에서 출발한 카드가 다시 넓어지며 역순으로 같은 reflow를 통과한다."] }), "\n", _jsx(_components.h2, { id: "solution--역할을-둘로-나눈다", children: "Solution — 역할을 둘로 나눈다" }), "\n", _jsx(_components.p, { children: "해법은 wrapper와 콘텐츠의 역할 분리다." }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "바깥 wrapper" }), ": 너비 애니메이션 + ", _jsx(_components.code, { children: "overflow-hidden" }), " (자르는 역할)"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "안쪽 Card" }), ": 너비 고정 (줄 배치를 지키는 역할)"] }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "

\n \n {/* 안쪽 Card는 항상 w-72 고정 */}\n \n \n \n

\n\n ...\n\n" }) }), "\n", _jsxs(_components.p, { children: ["바뀐 것은 두 가지뿐이다. wrapper의 ", _jsx(_components.code, { children: "overflow-hidden" }), "을 접힌 상태에서만이 아니라 항상 켜두고, Card에 ", _jsx(_components.code, { children: "w-72" }), "를 명시했다. 이제 wrapper가 어떤 너비를 지나가든 Card 내부의 좌표계는 288px로 일정하다. 텍스트 입장에서는 아무 일도 일어나지 않은 것이고, 사용자 눈에는 패널이 잘려 들어가는 것으로 보인다."] }), "\n", _jsxs(_components.p, { children: ["콘텐츠 너비를 레이아웃 상황에 따라 유연하게 두고 싶다면 ", _jsx(_components.code, { children: "w-72" }), " 대신 ", _jsx(_components.code, { children: "min-w-72" }), "로도 같은 효과를 얻는다. 줄바꿈을 일으키는 건 \"줄어드는 것\"이므로, 줄어들지 못하게만 막으면 된다."] }), "\n", _jsx(_components.h2, { id: "줄바꿈은-막았지만-reflow는-남아-있다", children: "줄바꿈은 막았지만 reflow는 남아 있다" }), "\n", _jsxs(_components.p, { children: ["여기까지가 트러블슈팅의 결말이었는데, 정리하면서 한 가지를 더 확인하고 싶었다. 안쪽 고정 트릭은 ", _jsx(_components.strong, { children: "패널 내부" }), "의 줄바꿈을 막았을 뿐이다. wrapper의 width 자체는 여전히 매 프레임 변하고 있고, width는 layout 속성이다. 그렇다면 옆에 있는 ", _jsx(_components.code, { children: "flex-1" }), " 본문은 애니메이션 내내 매 프레임 늘어나고 있는 것 아닌가?"] }), "\n", _jsx(_components.p, { children: "ResizeObserver로 Main 영역의 크기 변화를 세어봤다." }), "\n", _jsx(WidthVsTranslateDemo, {}), "\n", _jsxs(_components.p, { children: ["왼쪽(width 방식)은 안쪽 고정 트릭까지 적용한 \"고친\" 버전인데도, 한 번 접을 때마다 Main의 resize가 수십 회 쌓인다. 0.5초의 transition 동안 거의 매 프레임 layout이 다시 계산되고 있다는 뜻이다. 오른쪽(translate 방식)은 패널을 ", _jsx(_components.code, { children: "position: absolute" }), "로 띄우고 ", _jsx(_components.code, { children: "translateX(-100%)" }), "로 밀어내는 구조라, Main의 크기가 한 번도 변하지 않는다. transform은 compositor에서 처리되어 layout 단계를 아예 건드리지 않기 때문이다."] }), "\n", _jsxs(_components.p, { children: ["그럼 항상 translate가 정답인가 하면, 그렇지는 않다. 두 방식은 성능이 아니라 ", _jsx(_components.strong, { children: "UX가 다르다" }), "."] }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, {}), _jsx(_components.th, { children: "width 방식" }), _jsx(_components.th, { children: "translate 방식 (overlay)" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: "패널을 접으면" }), _jsx(_components.td, { children: "본문이 그 공간을 되찾는다" }), _jsx(_components.td, { children: "본문 크기는 그대로, 패널이 위를 덮을 뿐" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "애니메이션 비용" }), _jsx(_components.td, { children: "매 프레임 layout + paint" }), _jsx(_components.td, { children: "compositor만 (layout 없음)" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: "어울리는 곳" }), _jsx(_components.td, { children: "본문이 넓어져야 의미 있는 화면 (diff 뷰, 테이블)" }), _jsx(_components.td, { children: "일시적으로 띄우는 패널 (모바일 drawer, 메뉴)" })] })] })] }), "\n", _jsx(_components.p, { children: "JSON diff 화면에서는 패널을 접는 이유가 \"diff를 넓게 보고 싶어서\"였다. 본문이 공간을 되찾는 것 자체가 목적이니 width 방식이 맞고, reflow 비용은 그 UX의 값이다. 접는 빈도가 낮은 사이드 패널에서 0.3초의 layout 작업은 충분히 지불할 만하다. 반대로 스크롤 중에도 수시로 열고 닫는 패널이라면 translate 쪽이 맞는 선택이 된다." }), "\n", _jsx(_components.h2, { id: "핵심-정리", children: "핵심 정리" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "너비를 지정하지 않은 콘텐츠는 부모를 따라 줄어들고, 그 과정의 줄바꿈이 매 프레임 화면에 그려진다" }), "\n", _jsx(_components.li, { children: "해법은 역할 분리이다. 바깥 wrapper가 애니메이션과 clip을, 안쪽 콘텐츠가 고정 너비를 맡는다" }), "\n", _jsx(_components.li, { children: "안쪽 고정은 줄바꿈을 막을 뿐, width 애니메이션의 layout 비용 자체는 남는다. 본문이 공간을 되찾아야 하는 UX라면 그 비용을 지불하고, 아니라면 translate overlay로 layout을 우회한다" }), "\n"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "// Collapsible Panel 패턴\n\n

{children}

\n\n" }) }), "\n", _jsx(_components.h2, { id: "references", children: "References" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/CSS/overflow", children: "MDN — CSS overflow" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://web.dev/articles/stick-to-compositor-only-properties-and-manage-layer-count", children: "web.dev — Stick to compositor-only properties" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver", children: "MDN — ResizeObserver" }) }), "\n"] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }