16 KiB
HMDesign OrgChart P9.5 — Full Composition 적응형 배치
RESULT: PASS — 요청한 Full Composition의 배치·디자인 및 직접 영향 범위. 기존 Expanded P9.5 보고서와 P7~P9.4 기록을 보존했다. 사용자 디자인 승인은 별도 검토를 기다린다.
상단·중앙·하단 분리
기존 DOM에 내부 data-composition-region을 부여했으며 전체 DOM을 다시 만들지 않았다. 상단은 제목·기준일과 우측 인원 표, 중앙은 대표자·허브·6개 조직/직원·연결선·화살표·장식, 하단은 파견/휴직과 관계사 바로 구분한다. 상단은 콘텐츠 컨테이너의 앵커이며 sticky/스크롤 추적이 아니다. 하단 두 모듈은 각각 bottom 앵커를 유지한다.
원본1920×914.5는 디자인 기준으로 보존한다. 하나의 배율 min(1, 실제 가용 폭/1920, 실제 가용 높이/914.5)로 표시한다. 세로 여유가 있으면 Stage 사용 높이를 가용 높이/배율로 확장하되 카드·장식·Typography를 확대하지 않는다. 실제 상단 Rect의 가장 아래 지점과 하단 Rect의 가장 위 지점 사이에서 중앙 콘텐츠 합집합 Rect의 중심을 계산한다. 기준보다 새로 확보된 높이 범위 안에서만 수직 오프셋을 적용한다.
대표자·허브·조직 viewport·원본914.5px SVG overlay·배경 장식은 같은 중앙 오프셋으로 이동한다. meeting/grid의 bottom 좌표는 원본 기준 top 좌표로 환산했고 sky 높이도914.5로 유지한다. management 곡선은 Stage 대신 overlay 원점에서 측정하여 이동량이 두 번 적용되지 않도록 했다. 장식과 다른 요소의 전후 좌표 차이는 브라우저 서브픽셀 정밀도 안이며 grid의 bottom→top 변환에서 약0.016디자인px 반올림 차이가 있다.
높이가 부족하면 Stage914.5와 중앙 오프셋0을 유지하여 전체 비례 축소를 재사용한다. 기준 배치가 원래 사용하는 일부 세로 범위는 가로 위치가 다른 상단/하단 모듈과 공유한다. BoundingRect 합집합만으로 충돌을 판단하지 않고 실제 카드·타이틀·고정 모듈의 x/y 교차를 검사했으며 실제 겹침은0건이다. 모든 실제 콘텐츠가 가용 영역 안에 들어옴을 검사하여 기존 overflow:hidden만으로 잘림을 감추지 않았다.
P9.2 Content Wrapper 기준 가로 중앙 계산식과 전체 Stage 이동 단위는 그대로다. 1440×900의 새 소수점 배율에서 기존4자리 반올림이 translate:1.6401↔1.6402px로 왕복하는 현상이 확인되어0.001px 미만이면 보정 쓰기를 멈추는 조건만 추가했다. 계산 기준·공식·Stage X좌표계는 변경하지 않았다. 20프레임 style mutation은20→0건으로 안정화됐다.
부모 컨테이너의 높이만 바뀌는 경우도 같은 ResizeObserver 경로를 사용한다. 배율이 동일해도 중앙 위치가 바뀌면 기존 hm-orgchart-scale 내부 위치 변경 알림을 재사용하여 이름 툴팁을 이전 좌표에 남기지 않는다. 새 팝업·새 이벤트 API·새 라이브러리는 추가하지 않았다.
협업 화살표·하단 간격
수정 전 실제 화면에서 5개 모두 정상 표시되어 복원할 누락 자산은 없었다. team-arrow-blue-short.png2회와 blue-purple/purple-teal/teal-green각1회, 총4개 원본PNG·5개 SVG image를 보존했다. 중복 경로나 화살표를 추가하지 않았다. 로딩·SHA-256·카드/타이틀 비충돌·실제 캡처에서 화살표를 숨기기 전후의 픽셀 기여까지 확인했다. 원본 overlay z4와 조직 viewport z7은 유지하며, 수직 transform으로 생기는 axis stacking context는 z12를 명시하여 허브를 곡선 위에 유지한다.
파견·휴직 CSS 하단 앵커70→82디자인px로 12px 위로 옮겼다. 실제 기준 Rect는 (x32,y748.5,w240,h84) → (x32,y736.5,w240,h84)다. 관계사 바는 (x57,y835.109375,w1806,h55.390625)와 로고·문자·높이를 유지한다. 그룹/바 간격은 2.609375→14.609375디자인px다. CSS Grid의12px Stage padding 때문에 실제 관계사 바의 하단 inset은24px이며 이 값도 유지한다.
실제1920×914.5 콘텐츠 벤치마크에서 배율1, Stage 높이914.5, 중앙 오프셋0, 카드43개, 가로 오차0이며 위 간격은 화면상 14.609375px다. 축소 화면의 가시 간격은 같은 배율로 축소되며 모든 화면에서12~16화면px라고 주장하지 않는다.
화면별 실제 측정
모든 수치는 CSS px다. 중앙 이동은 기존 기준 좌표에서의 화면상 추가 이동이며, 가로 오차는 Viewport가 아닌 실제 .hm-orgchart-story-full의 Border/Padding을 제외한 content-box 중심과 전체 Stage 중심의 차이다.
- 1920×1080: 배율62.50%, 중앙+114.043px, 가로 오차0. 상단Y297.50
420.752, 중앙Y433.604915.898, 파견/휴직Y928.75981.25, 관계사Y990.3811025.00, 하단 모듈 간격9.131px. - 1920×1440: 배율62.50%, 중앙+294.043px, 가로 오차0. 상단Y297.50
420.752, 중앙Y613.6041095.898, 파견/휴직Y1288.751341.25, 관계사Y1350.3811385.00, 간격9.131px. - 1440×900: 배율62.329%, 중앙 이동0, 가로 오차+0.000061. 상단Y297.479
420.395, 중앙Y319.480800.456, 파견/휴직Y749.054801.411, 관계사Y810.517845.041, 간격9.106px. 부족한 높이에서 기존 상대 배치를 유지하므로 중앙 합집합의 가용 영역 세로 중심 오차−24.756px를 숨기지 않는다. - 1280×1024: 배율62.656%, 중앙+86.994px, 가로 오차−0.000050. 상단Y295.909
419.469, 중앙Y405.019888.520, 파견/휴직Y874.070926.701, 관계사Y935.855970.561, 간격9.154px. 일부 세로 범위 공유가 있지만 실제 직원/고정 하단 요소 교차0건이다. - 390×844: 배율18.646%, 중앙+183.147px, 가로 오차0. 상단Y308.237
345.008, 중앙Y497.966641.851, 파견/휴직Y794.809810.472, 관계사Y813.196823.524, 간격2.724px.
1920×1080→1920×1440 동일 mount 높이 변경에서 상단은 그대로, 하단은360px 아래로, 중앙은180px 아래로 이동한다. 추가 세로 여백을 중앙 위아래로 분배하며 실제 가용 세로 중앙 오차는 충분한 화면에서 약0.000046px 이하이다. 1920/1440/390의 기존1px 가로 허용 범위를 충분히 만족한다.
문서 가로·세로 스크롤0, 실제 사용 가능한 내부 스크롤바0, 카드/타이틀/통계/화살표/하단 바 잘림0이다. transform 전의 자연 layout scrollWidth/scrollHeight가 더 큰 기존 raw 값은 원본 JSON에 함께 기록했다. raw overflow와 실제 표시 영역 포함 여부를 혼동하지 않는다.
직접 영향 검증과 보호
- 5개 화면의 배치·상대 좌표·크기/타이포·집계/로고·5화살표·장식·잘림·충돌·스크롤: 69/69 PASS.
- 실제 화살표 픽셀·PNG SHA, 4개 동일 mount Resize의 상대 좌표/5경로, management 끝점, native 직원 팝업·ESC·초점 복귀, 공개 그룹 링크: 기존 성공43개 보존. 최초 정렬 안정성1FAIL은 원본에 보존하고 영향 구간9/9 PASS로 연결했다. 동일 성공 검사와 공통 오류 검사를 하나의 총 테스트 수로 중복 합산하지 않는다.
- 현재 Full Story는 organizationLinks를 지정하지 않아 그룹 anchor0개다. 이를 원래와 동일하게 보존했으며 공개 Core의
organizationLinks는 임시 readOnly mount에서 실제 href·keyboard focus·Enter activation까지 확인했다. 외부 페이지 이동은 차단했으므로 목적지 서버/네트워크 동작은 NOT VERIFIED다. - 부모 높이만 변경: 5/5 PASS, 오류0. viewport1920×1080을 유지하고 parent914.5→1014.5px로 변경했을 때 배율1, 중앙 오프셋0→89.7188px, 대표자·허브·조직의 이동89.718811px가 일치하며 기존 위치 변경 알림은1회 발생했다. 실제 paint 포함·문서/내부 스크롤 없음도 확인했다. 성공한69/43/9개 구간은 재실행하지 않았다.
- Core typecheck/build, 수정된 Story helper 단독 Typecheck, 변경 반영 최종 Storybook build PASS. Storybook의 기존 큰 chunk/plugin timing 안내는 유지한다.
git diff --checkPASS. 기존 CRLF 안내만 남는다. 독립 읽기 전용 구조/코드 검토에서 현재 Full 기준의 새 구체적 결함 없음.- Fixed SVG·Gradient·Noto Sans KR·사진·뱃지·Typography·원본 직원JSON·통계·로고·팝업/링크 구현은 수정하지 않았다. Expanded의 이전 P9.5 중앙 정렬 코드/Story/CSS·Overview·Department Colors·HM Component/Pattern/Theme·의존성도 시작 SHA-256을 유지한다. 기존 P7~P9.4 전체 suite는 반복하지 않았다.
최초 interaction 원본 및 수정 전 정렬 루프를 보존한다. 첫 Core Typecheck의 DOM 타입 선택 문제는 HTMLElement generic으로 수정했고 원본 로그를 보존했다. helper Typecheck의 최초 CLI는 TypeScript7의 --ignoreConfig 요구로 중단됐으며 해당 옵션으로 파일 범위를 검사했다. 이를 앱 오류로 보고하지 않는다.
Guard·NOT VERIFIED
Core/CSS 초기 PARTIAL Guard는 FAIL0 / NOT VERIFIED3(SCOPE-001), 원본 status/staticStatus/runtimeStatus NOT VERIFIED다. 마지막 위치 알림 수정1파일도 FAIL0 / NOT VERIFIED1(SCOPE-001)이며 같은 package graph 한계다. 실제 build/browser 근거를 별도로 제공한다.
가로 helper PARTIAL Guard는 issue0, status/staticStatus NOT APPLICABLE, runtime NOT VERIFIED다. 처음 잘못 지정한 file target의 Storybook graph 범위 진단은 별도 원본을 보존하고 프로젝트 root의 수정 파일 범위로 바로잡았다. 세 결과의 styleEvidence는 STATIC PASS / RUNTIME NOT VERIFIED / DESIGN_INTENT PASS(검사 항목 없음) / FINAL NOT VERIFIED이며 결합 styleVerification과 전체 CSS 디자인 승인은 NOT VERIFIED다. 기존 P9.4 Guard FAIL 기록을 덮어쓰지 않았다.
최종 사용자 디자인 승인, Chrome 외 브라우저·실기기·스크린리더·모든 숨김 모듈/동적 데이터 조합·외부 링크 목적지·SSR/배포는 NOT VERIFIED다. 이번 결과는 현재 Workdesk Full Composition과 직접 영향 경로다.
수정 파일과 Git
기존 authored 파일5개:
packages/org-chart/src/core/org-chart-content.ts— 논리 영역·가용 높이/중앙 Rect 배치·기존 위치 알림.packages/org-chart/src/core/workdesk-artwork.ts— overlay 기준 곡선 원점.packages/org-chart/src/styles/org-chart-readonly.css— 하단 간격·중앙 레이어/장식 앵커.src/org-chart/center-composition-preview.ts— 계산식 유지,0.001px 미만 왕복 보정 억제.docs/org-chart/ui-composition.md— 현재 Full 계약과 이전 기록의 구분.
새 authored 파일은 verify-p9-5-full.mjs, verify-p9-5-full-interactions.mjs, 이 보고서다. test-results/org-chart-p9-5-full, Core dist, storybook-static과 로그는 검증 생성물이다.
시작 파일 SHA-256 감사:832개 중 위5개 변경,827개 동일,누락0. 브랜치feature/orgchart-package, 시작/완료 HEAD7614507583927a25a270963a74ff044be0557b9f, originhttps://gitea.hmac.kr/b25027/HMDesign.git, staged0. 기준 원격 SHA는 사용자 제공값과 로컬 HEAD가 일치하며 현재 live remote SHA는 조회하지 않았다.
Stage·Commit·Push·Merge·main Checkout·PR·Reset·Rebase·Force Push·Clean·Fetch·Pull 미진행. Expanded 등 기존 미커밋 작업을 보존했다. 요청 범위 완료 후 사용자 검토를 기다린다.
실제 Storybook과 캡처
시간
- Started At:2026-10-13 13:05:08 KST
- Estimated Duration:약35분 (탐색10분·보완15분·직접 검증10분)
- Completed At:2026-10-13 13:33:06 KST
- Actual Duration:27분 58초
- Variance:예상보다 7분 2초 짧음
대표자 화살촉 후속 정정
사용자 첨부에서 표시한 대표자 카드 아래의 상향 화살촉은 조직 간 PNG 화살표5개와 별개였다. 앞선5개 화살표 검증에는 이 누락 요소가 포함되지 않았다. Workdesk 원본 org-arrow-jang-head의 solid Chevron path와 색을 복원하고, Core의 Stage padding을 포함한 실제 카드 하단에 원본8.7디자인px 간격으로 배치했다. 점선 상단만 Chevron 아래로 이어지도록 보완했고 허브 방향 끝점과5개 기존 연결선·팀 화살표는 보존한다.
후속 측정:1920×1080·1920×1440·390×844에서25/25 PASS, 화살촉0→1개, 실제 픽셀 표시·축 정렬·카드 비충돌·세로 이동·축소 확인. 이전 수치와 PASS는 당시 검사 범위의 기록이며 이 후속 보완과 구분한다. 복원 후 확대 캡처.
최초3개 원본 모양 비교는 테스트 정규식이 d 대신 kind를 추출하여 FAIL이었다. 원본을 보존하고 실제 캡처된 DOM의3개 비교만 다시 평가했다. 성공한22개 브라우저 검사를 반복하지 않았다. Core Typecheck/Build·최종 Storybook Build·diff check PASS, console/pageerror0. 화살촉 변경1파일 Guard는 FAIL0/SCOPE-001 NOT VERIFIED1, 원본 status/staticStatus/runtimeStatus 및 전체 CSS 승인은 NOT VERIFIED다.
시작835개 파일 중 artwork와 이 후속 보고서2개만 변경,833개 동일,누락0. Expanded·카드·Theme·팀 PNG4종·이전 중앙/하단 배치 코드와 미커밋 작업을 보존했다. 열려 있던 Full Composition 미리보기 탭을 새 빌드로 갱신하고 실제 화살촉 DOM 표시를 확인했다. Stage·Commit·Push·Merge 미진행.
- Started At:2026-10-13 13:37:01 KST
- Completed At:2026-10-13 13:46:55 KST
- Actual Duration:9분 54초
- Estimated Duration:약10분
- Variance:예상보다 0분 6초 짧음
사용자 후속 요청에 따라 화살촉 위쪽 끝을 실제 대표자 카드 하단에 직접 붙였다. 이전8.7디자인px 간격을0으로 바꾸고 연결선 시작점도 함께 조정했다. 붙임 검증:3개 화면25/25 PASS, 측정 간격 약0px(최대0.0001디자인px), 기존5개 협업 화살표·카드·허브·세로 배치 보존. 최종 확대 캡처. 기존 간격 기록은 당시 상태로 보존한다.
