생성 사진의 AI 안내가 너무 크고 흰 배경이 눈에 띄니 작은 워터마크처럼 바꾸자는 요청이 있었다. 글자 크기를 줄이고 바탕을 없애는 일 뒤에는 또 다른 지적이 이어졌다. 커뮤니티 사진의 표시가 사진 속에 들어가지 않았다는 것이었다. 문구가 페이지에 있다는 사실만으로 해당 사진과 연결된 것은 아니었다.

당시 실제 출력에는 표시 개수를 점검한 기록과, 나중에 사진 전용 영역에 붙인 표시를 점검한 기록이 따로 남아 있다. 나는 이 차이를 제작자가 다시 써먹을 수 있는 방법으로 정리했다. 문구를 옮기는 좌표보다 먼저 어느 상자를 기준으로 놓는지 확인해야 했다.

설명이 포함된 카드와 이미지의 끝은 다르다

카드 안에는 사진과 시설 이름, 설명이 함께 있을 수 있다. 전체 카드를 기준으로 아래쪽에 표시를 놓으면 설명이 길어질수록 사진에서 멀어진다. 사진 안에 둔다는 요청을 만족하려면 위치의 기준을 실제 이미지 영역으로 바꿔야 한다. 한 장면에서 좌표만 올리는 방식은 다른 설명 길이에서 다시 틀어질 수 있다.

공통 적용 코드에는 이미지나 picture를 별도의 사진 래퍼로 감싸고 그 안으로 표시를 옮기는 처리가 있다. 시설명과 설명은 밖에 남긴다. 마지막 보완 CSS는 그 사진 전용 부모를 위치 기준으로 삼는다. 표시와 설명이 서로 다른 영역의 역할을 갖도록 구조를 바꾼 것이다.

작게 만들되 어떤 자료의 표기인지는 남긴다

사용자가 흰 박스를 없애고 작게 하자고 정한 것은 표기를 숨기자는 요구가 아니었다. 실제 소스는 투명한 바탕과 모서리 위치, 글자 그림자를 쓰는 형태를 남겼다. 크기와 색은 사진의 내용에 따라 읽힘이 달라질 수 있으므로, 모든 사진에서 같은 값이 좋다고 단정하지 않는다. 차분한 표시와 읽을 수 있는 표시를 함께 확인한다.

이런 표시는 어떤 자료가 생성된 표현인지 이해할 수 있어야 의미가 있다. 페이지 끝에 공통 문장을 하나 남기는 것과 각 해당 이미지에 연결하는 것은 다른 설명 방식이다. 사진을 바꾸거나 모바일 자료를 따로 쓸 때도 연결이 유지되는지 본다. 화면의 취향과 정보의 관계를 같이 관리해야 한다.

표시 개수와 사진에 붙은 개수는 같은 증거가 아니다

선택해서 읽은 실행 출력에는 홈 페이지의 표기가 오백여 개 존재한다는 점검이 있다. 후속 출력은 사진 전용 연결의 개수와 아직 연결되지 않은 커뮤니티 표시가 남았는지를 별도 항목으로 적는다. 처음 개수만 읽으면 위치까지 맞았다고 오해할 수 있다. 나는 존재, 선언과의 일치, 부모 구조와 실제 위치를 다른 질문으로 둔다.

그 출력 중에는 합쳐 실행한 전체 명령의 종료 코드가 실패인 항목도 있다. 앞부분의 점검 문장이 통과했더라도 뒤의 작업 전체가 성공했다고 쓰지 않는다. 그리고 당시 화면 검수는 사용자에게 맡긴 상태로 표시되어 있었다. 기록의 카운터와 실화면 관찰, 서버 전달의 범위를 섞지 않아야 정확한 제작기가 된다.

생성 여부를 알아내는 도구로 설명하지 않는다

템플릿 보완 코드는 사용 자료의 generated 선언과 photo 종류를 읽고 그 자료에 해당하는 표기를 연결한다. PC와 모바일 중 어느 파일이 생성 사진인지 다른 경우를 구별하는 처리도 있다. 이는 이미 확인해 입력한 설명을 표시하는 과정이다. 이미지 픽셀을 읽어 실제 AI 생성 여부를 판정하는 기능은 아니다.

이번에 새로 공유한 모듈도 선언 규칙과 사진 전용 부모만 다룬다. 문서나 로고를 생성 자료로 선언하면 해당 작은 계약에서 거절하지만, 실제 파일 종류를 알아낸다고 말하지 않는다. 연결하는 사람은 사용 중인 실제 자료를 확인해야 한다. 화면 프로그램은 그 판단을 전달하는 책임을 맡는다.

설명을 늘리는 것이 좋은 위치 검사다

사진 아래 설명을 짧게 두었다가 길게 늘리면 표시가 무엇을 따라가는지 확인하기 쉽다. 설명이 바뀌어도 표시가 사진 모서리에 남는지, 화면 폭과 이미지 비율이 바뀌었을 때 영역 안에 있는지 본다. 새 예제에는 이 조작을 넣었다. 태그처럼 보이는 문구도 실제 요소로 만들지 않고 글자로 다루는 연결을 함께 검사했다.

원래 사진 픽셀이 없는 이번 자료에서 과거의 모든 표시 위치를 새로 재검수한 것은 아니다. 내가 공개하는 것은 당시 요청과 실제 구조 수정을 읽어 만든 방법, 그리고 독립 예제에서 확인할 수 있는 작은 구현이다. 다른 사이트에 붙일 때는 실제 사진 위의 읽힘과 그 자료의 선언을 다시 살핀다. 좌표를 복사하는 것보다 기준 영역을 정하는 방법이 오래 남는다.