Claude Opus 5.5 SVG: 전체를 줄이지 않고 잘린 글자 고치기

Opus가 만든 SVG 라벨이 잘리면 글자 경계, 감싸는 도형, SVG 뷰포트를 따로 검사하세요. 모든 라벨을 축소하는 대신 국소적인 기하 수정만 요청합니다. 실제 표시 크기에서도 읽히고 편집 뒤에도 의미가 같은 도표가 목표입니다.

MDN은 SVG text 요소를 설명합니다. 글자 위치와 바깥 사각형은 별개 속성이라 긴 라벨이 상자를 자동으로 늘리지 않습니다. 아래는 직접 만든 배치 예시이며 실행한 Opus 결과가 아닙니다.

잘못된 경계를 먼저 찾기

가상 설치 과정 ‘개봉, 받침 설치, 각도 조절’을 사용합니다. 중간 라벨이 ‘조절식 받침을 설치하기’로 늘어났다면 무엇이 글자를 가리는지에 따라 수리가 달라집니다.

뷰포트를 넓혀도 카드 밖의 글자는 고쳐지지 않습니다. 카드를 넓혀도 예전 크기의 클리핑 경계는 남을 수 있습니다. 관련 요소 ID를 적게 해 변경을 확인할 수 있도록 하세요.

줄바꿈 전에 사용 가능한 너비 계산하기

가상의 카드 너비가 240단위, 좌우 안쪽 여백이 각각 20이면 글자 공간은 200입니다. 렌더링한 라벨 너비가 224라면 24만큼 넘칩니다. 같은 여백을 유지한 264단위 카드는 담을 수 있지만 이웃 카드와 연결선 공간도 있어야 합니다.

두 줄로 나누고 필요하면 높이를 늘리는 방법도 있습니다. 글자 수로 실제 너비를 추정하지 마세요. 폰트, 굵기, 언어가 영향을 줍니다. 숫자는 계산 예시이지 첨부 파일의 측정값이 아닙니다.

수정본과 렌더링 결과 요청하기

Opus 5.5로 제공한 설치 설명 SVG를 고쳐 주세요. 세 단계, 순서, 원문, 연결선 목적지를 보존하세요. 중앙 라벨의 text 요소, 카드 요소, 관련 클리핑 경로를 찾으세요.
브라우저나 렌더러가 있으면 실제 폰트로 그린 글자를 측정하세요. 없으면 너비 미검증이라고 밝히세요. 글자 경계와 카드 안쪽 너비, 전체 그림과 viewBox를 비교하세요.
의미 있는 줄바꿈, 카드 공간 확대, 클리핑 경계 수정 중 국소 해결을 선택하세요. 모든 폰트를 줄이거나 문제를 숨기려고 문구를 바꾸지 마세요. 영향을 받는 화살표는 의미를 유지하며 경로를 바꾸세요.
수정 SVG와 변경 목록을 반환하세요. 예상 표시 너비와 좁은 모바일 너비로 렌더링해 잘림, 폰트 누락, 화살표 충돌을 점검하세요. 렌더링할 수 없다면 시각 검증을 했다고 하지 말고 명확히 말하세요.

채팅 미리보기보다 내보낸 파일 확인하기

저장한 SVG를 대상 브라우저나 디자인 프로그램에서 엽니다. 새 버전인지, 라벨 세 개가 모두 보이는지, 연결선이 맞는 순서를 나타내는지 확인하세요. 멋진 채팅 미리보기가 별도 파일에도 같은 코드가 있다는 증거는 아닙니다.

모바일에서는 세 열을 세로 순서로 바꿔야 할 수도 있습니다. 단순 축소가 아니라 의도한 별도 배치입니다. 단계 순서를 유지하고 다른 파일명으로 저장해 데스크톱판과 혼동하지 않게 하세요.

상품 기능 설명이라면 검증한 형태 관계와 문구를 광고 참고로 보존합니다. Panelly Studio에서 관련 이미지를 만들고 기능 표기 가이드로 라벨과 보이는 세부를 연결하세요. Panelly가 편집 가능한 SVG 레이어를 가져오거나 Opus와 통합됐다는 의미는 아닙니다.

자주 묻는 질문

모든 글자를 윤곽선으로 바꾸면 안 되나요?

일부 납품에서는 글자 모양을 보존할 수 있지만 텍스트 편집성이 줄고 나쁜 간격은 고쳐지지 않습니다. 배치를 먼저 해결하고 받는 사람의 작업에 맞는 형식을 선택하세요.

모델이 ‘모두 통과’라고 하면 믿어도 되나요?

어떤 파일과 렌더링을 검사했는지 물어보세요. 렌더러를 실행하지 않았다면 검사를 제안한 것이지 실제 확인의 증거는 아닙니다.

출처 및 추가 자료

• 원문 자료 · developer.mozilla.org