artjoy›문서›인계 — 아트조이 상세페이지 편집기 P5 보정 · 확장 «코디 직접» (ssh) · P3 끝난 뒤
11.3 KB · 수정 2026-09-24 21:59
목차

인계 — 아트조이 상세페이지 편집기 P5 보정 · 확장 «코디 직접» (ssh) · P3 끝난 뒤

26.9.24(목) 22:05 KST · [코디] 세션 릴레이(컨텍스트 83%) · 이 문서 하나로 시작한다. 앞 인계문 2개(relay-2026-09-24-block-editor-takeover.md · …-p3.md)의 규칙 · 절차는 그대로 유효.

▶ 첫 일감 (순서대로 · 묻지 말고 시작)

P5 는 크니 3단으로 나눠 단마다 「코드 → 올리기 → 검사 → 8820 재시작 → 커밋 → devplan」 을 돈다(코덱스 상의 결과 = 한 번에 넣지 말고 순차 분리).

  1. P5a 손보기 붓(클라이언트만 · 일꾼 안 씀) — 편집기 block-editor\editor\editor.js 새 도구 1개(이름 · 아이콘 = 아래 web-designer 처방 절): - 모드 = 지우개(destination-out) · 되살리기(처음 원본에서) · 복제 도장(Alt+클릭 기준점 → 오프셋 복사) · 흐림 · 모자이크 · 색 칠하기. 영역 = 붓 / 사각형. 조절 = 크기 · 부드러움 · 세기 · 색. - 획 = fabric mouse:down/move/up 에서 c.getScenePoint(e) 로 직접 모음(자유그리기 모드 안 씀) → UI 전용 폴리라인(beRole "__stroke" · excludeFromExport)으로 미리보기 → 손 떼면 한 번 굽기. 붓 원 커서 = UI 원 __cursor. syncInteractivity 의 drawing 목록에 새 도구 추가. - 좌표 = F.util.invertTransform(img.calcTransformMatrix()) → + img.width/2 · img.height/2(자르기는 cropX 안 씀 · 기존 mouse:up 상자 코드와 같은 방식) · 붓 굵기(사진 px) = 크기 / img.scaleX. flipX/Y 도 역행렬에 들어 있다. - 굽기 순서(코덱스): 원본 요소(img.getElement() · 같은 출처라 읽힘) → 오프스크린 캔버스(자연 크기) → 마스크 캔버스 M(획 = lineCap round · 부드러움 = ctx.filter blur) → 모드별 T 캔버스(흐림 = 원본 복제에 filter blur · 모자이크 = 축소 → imageSmoothingEnabled=false 확대 · 복제 = 오프셋 drawImage · 칠하기 = 단색) → T 에 destination-in M → 결과에 source-over(지우개만 결과에 M 을 destination-out). 필터(보정 슬라이더)는 굽기와 무관하게 그 뒤에 그대로 걸린다. - 올리기 = 결과 PNG dataURL → POST /api/editor/files(8MB 상한 · 서버 saveUpload) → replaceImageSrc(img, url, op)(이미 있음 · 크기 같으면 자리 · 배율 그대로) · E.ops.push({op:"retouch", mode, from, to, n}). 투명이 없고 8MB 넘으면 JPEG 0.95, 투명이면 PNG 인데 넘으면 막고 「사진을 줄인 뒤」 안내. - 되살리기 원본 = 사진 객체 커스텀 속성 beOrig(처음 한 번만 = 그때 src) — PROPS 에 추가해야 레시피 · 되돌리기에 남는다(코덱스: 교체 · 확장 뒤에도 원본 크기가 다르면 되살리기 끔 + 안내). - 되돌리기 = 기존 스냅숏(src 가 바뀔 뿐 · 픽셀 사본 안 둠) 그대로.
  2. P5b AI 지우기 + 배경 넓히기(일꾼) — 일꾼 C:\dev\tools\block-editor-ml\worker.py(저쪽 C:\dev 리포 · 로컬 사본 = C:\dev\_work\artjoy-block-editor\mirror\p3\ml\worker.py → work\ 로 복사해 고친다 · 올리기는 .bak-20260924-p5 수동 + sha 대조 · upload.sh 는 생성기 폴더 전용): - op inpaint = 요청 mask(붓 마스크 PNG = /api/editor/files 로 올린 블록 파일 주소 → 서버가 localPathOf) → 마스크 둘레 평평함 판정 → TELEA / LaMa(기존 erase_text 의 창 자르기 · 512 코드 재사용). - op extend = 요청 pad {l,t,r,b}(사진 px) · method auto|edge|lama → 새 크기 캔버스에 원본 붙이고 새 영역 = 마스크 → 평평 = 가장자리 색 + TELEA · 아니면 LaMa 를 가장자리 따라 창 여러 번. - 서버 tools\server\editor-block-store.js mlCall = allowed 에 inpaint · extend 추가 · callWorker 인자에 mask: localPathOf(payload.mask) · pad 추가 · 경로 정규식 static_server.js 의 ML op 목록에도 추가. - 편집기: 넓힌 결과는 원래 내용 자리 · 배율 유지 → replaceImageSrc 를 쓰지 말고 left -= l*scaleX · top -= t*scaleY(각도 0 일 때 · 회전이면 벡터 회전). 넓어질 테두리 = 점선 UI 틀 미리보기. - 비동기 AI 결과는 요청 때 src 를 기억했다가 돌아왔을 때 src 가 바뀌었으면 버린다(코덱스).
  3. P5c 원근 · 목업 — 모서리 4점 UI 원 손잡이 → 호모그래피(단위 사각 → 4점) + 16×16 격자 삼각형마다 아핀 ctx.setTransform + 삼각형 clip 으로 굽기 → 결과 = 4점 bbox 크기(사진 px) · 새 사진 left/top = bbox 좌상 문서 좌표 · 각도 0. 「목업 틀 넣기」 = 에셋 21분류(block-editor/assets/index.json 의 nn "21") 썸네일 격자 → 누르면 P3 의 prepareAsset(asset) 결과 객체들을 F.Group 으로 묶어 가운데에(폭 60%).
  4. 검사 = 새 block-editor\tools\check-retouch.js(npm retouch:check · 포트 8840 · 운영 DB 복사본 · check-editor.js 틀 재사용 · --no-ml 이면 AI 항목 건너뜀): 모드마다 _test 로 획을 넣고 픽셀 대조(지우개 = 알파 0 · 되살리기 = 원본과 같음 · 복제 = 오프셋 점과 같음 · 흐림 = 분산 감소 · 모자이크 = 칸 안 같은 색 · 칠하기 = 색) · 사각형 영역 · 되돌리기 = 옛 src · 레시피 다시 열기 = 같은 PNG · AI 지우기/넓히기(크기 · 원래 내용 자리) · 원근(결과 크기 · 모서리 점) · 목업 틀 묶음 · 13px · 스크립트 오류 0 · 운영 DB 무변경. + 회귀 = blocks:check · layout:check -- --baseline C:\cody\jobs\block-editor-p2\baseline.json · editor:check -- --no-ml · detail:check · generator:check(점 대조 1.28 = 기존 드리프트).
  5. 단마다 끝나면 = P3 와 같은 마무리(아래 「절차」). 전부 끝나면 보고서 C:\dev\_work\artjoy-block-editor\review\report5.md · python mirror.py p5(mirror.py PULL 에 C:/dev/tools/block-editor-ml/worker.py 이미 있음).

web-designer P5 처방

(이 세션에서 받은 처방 — 아래 「처방 원문」 절. 비어 있으면 새 세션에서 상담을 먼저 받는다 · 텍스트만 · 캡처 금지)

P3 에서 끝난 것 (26.9.24 21:55)

절차 (P3 와 같다)

확정 규약 (바꾸지 않는다)

보고 마커

처방 원문

web-designer 26.9.24 22:05(텍스트 상담 · 실측 불가라 화면 붙인 뒤 390/1280 · 13px 실측 필수): - 도구줄 = 기존 10개 순서 · 구분선 그대로. 새 붓 도구 이름 = 「리터치」(「보정」 = 색 슬라이더와 충돌 피함) · 아이콘 bi-brush · 「보정」 바로 뒤. 「배경 넓히기」(bi-arrows-angle-expand) · 「원근 · 목업」(bi-bounding-box-circles)은 도구줄 맨 끝 「더보기」(bi-three-dots) 하나로 묶는다 — 부트스트랩 드롭다운이 아니라 편집기 자체 팝오버(popover())로(네이티브 select · datalist 금지). - 리터치 모드 7개 = 칩 7개 다 늘어놓지 말 것(300px 패널에 13px 로 안 들어감 · 글자 줄이기 금지). 자주 쓰는 4개(지우개 · 되살리기 · AI 지우기 · 흐림) 칩 1줄 + 나머지 3개(복제 도장 · 모자이크 · 색 칠하기)는 「더보기」 칩 → 자체 드롭리스트(/assets/droplist.js dropOpen). 영역 seg(붓 · 사각형) 그대로. - 커서 = --accent 1px 원 테두리(채움 없음) · 획 미리보기 = --accent-soft 40% 채움 + --accent 1px 외곽 · 결과가 바로 안 보이는 모드(흐림 · 모자이크 · AI 지우기)는 반투명 대각선 빗금으로 구분. - 버튼 = 리터치는 손 떼면 반영(실행 버튼 없음) · 배경 넓히기 = .be-btn.primary 「넓히기 적용」 · 원근 = .be-btn.soft 「처음 모양」 + .be-btn.primary 「원근 적용」. (⚠편집기 규칙상 primary 빨강은 「적용」 전용이었다 — 두 버튼을 primary 로 할지 soft 로 할지 붙인 뒤 재확인. 코디 추천 = soft · 모달 「적용」만 primary 유지) - 목업 틀 격자 = 3열 썸네일 글자 없이 + title 툴팁(13px 두 줄 개행 방지). - 복제 도장 상태 줄 「기준점: 아직 없음 — Alt+클릭」 = 13px · 색 --warn. - AI 지우기 · 넓히기 처리 중 = 캔버스 잠금(기존 busy() 가 반투명 덮개 · 그대로 쓰면 됨). - (되돌리기 5단계 제안은 이미 충족 — 편집기 스냅숏 30단계 이상)