화면을 줄여도 빨간 박스가 같은 곳을 가리킬까

cover는 크기를 바꾸고 일부를 자른다

원본 800×600을 가로 640×360 캔버스에 cover로 넣으면 배율은 0.8이다. 결과 이미지는 640×480이고 가운데 정렬이라면 위쪽 좌표는 -60이다. 원본 영역 y=250은 200이 아니라 140에 놓인다. 새 예제는 이 이동값을 이미지와 박스에 똑같이 적용한다.

비율을 유지하는 contain은 반대로 모든 원본이 들어오도록 작은 배율을 고른다. 같은 가로 캔버스에서는 배율 0.6, 좌측 여백 80이 된다. 단순히 이미지 태그의 폭으로 주석을 정하면 이 여백을 놓칠 수 있다. 두 모드는 같은 크기의 요소에서도 다른 좌표 계약이다.

잘린 영역과 원래 영역을 모두 남겼다

박스가 화면에 일부만 남을 때 원래 박스를 잘라 덮어쓰면 어떤 대상이었는지 잃는다. module은 box에 전체 변환 결과를 두고 visible에 화면과의 교집합을 둔다. 완전히 밖이라면 visible과 label은 null이다. 라벨을 캔버스 안에 붙이는 규칙도 이 상태를 보고 결정한다.

합성 세로 캔버스에서는 좌측 이동이 -170이다. 원본 x=150, 너비 200인 박스는 화면에서 x=-50, 너비 160이며 보이는 너비는 110이다. 이 부분 크롭 반례를 별도로 테스트했다. 중심 박스는 모두 보이는 조건이어서 처음 테스트의 잘못된 가정을 고쳐 실제 부분 노출 영역을 사용했다.

역방향 좌표도 같은 모델에서 계산한다

화면의 점을 원본 위치로 되돌릴 때는 먼저 이동을 빼고 배율로 나눈다. contain의 여백을 눌렀다면 이미지 좌표가 아니므로 null을 반환한다. 이 역변환으로 원본 중심이 다시 원본 중심으로 돌아오는지 여러 캔버스에서 검사했다. 별도 근사 공식을 두 개 만들지 않은 이유다.

입력은 유한한 양의 크기와 원본 안의 영역이어야 한다. fit의 알 수 없는 값, 범위를 벗어난 위치와 원본 밖의 박스를 거절한다. 이 검사는 DOM의 실제 픽셀을 측정하지 않는다. SVG viewBox 안에서 정의한 도형의 관계를 다루므로 외부 이미지 로딩과 CSS 변형을 연결하면 별도 검수가 필요하다.

중앙 정렬을 바꾸면 무엇이 함께 바뀌는가

원본이 화면보다 클 때 정렬을 위쪽으로 바꾸면 자르는 양의 합은 같아도 잘리는 위치가 달라진다. 따라서 정렬 값은 이미지에만 쓰는 스타일이 아니라 주석 계산의 입력이기도 하다. 새 함수는 x·y 정렬을 0~1 범위로 받고 이미지와 상자의 이동 차이가 같다는 테스트를 남겼다.

이 선택을 데이터로 남기면 다른 레이아웃에서 어떤 전제를 바꿨는지 설명할 수 있다. 원본 영역 좌표는 그대로인데 표시 위치가 달라진 이유를 찾을 때도 도움이 된다. 화면별로 박스 좌표를 손으로 맞춰 적는 방식은 이미지가 교체되면 다시 모든 값을 검수해야 할 수 있다.

현재 예제의 도형은 로딩 실패와 비율이 알려지지 않은 외부 이미지를 다루지 않는다. 실제 이미지가 바뀌면 원본 치수와 영역 메타데이터가 같은 버전인지도 확인해야 한다. 좌표가 유효하다는 사실과 그 좌표가 지금 이미지의 같은 대상을 뜻한다는 사실을 구별해서 연결해야 한다.

라벨의 읽기 편함은 별도의 검수다

공유 모듈은 15개 순수 테스트와 실제 이벤트 스크립트의 36조합을 확인했다. 라벨 크기는 미리 선언하고 안쪽에 제한하지만 글꼴 폭, 줄바꿈과 확대 사용성은 측정하지 않는다. 실제 모바일 검수 없이 화면별 위치가 완벽하다고 쓰지 않았다. 원래 고객 이미지도 공개하지 않는다.

재사용한다면 원본 영역을 먼저 정의하고 이미지가 놓이는 실제 변환과 하나로 연결해야 한다. 텍스트가 길어져 라벨 크기가 달라지면 그 치수도 다시 구해야 한다. 나는 반응형 화면을 요소를 작게 만드는 작업보다 요소들 사이의 의미 있는 관계를 유지하는 작업으로 설명하고 싶었다.