광고 자리를 빨간 박스와 한 문장으로 설명한 이유

상품 이름보다 위치를 먼저 연결했다

방문자는 상품 명칭을 몰라도 검색 결과 위쪽인지 본문 옆인지 정도는 이해할 수 있다. 원래 구성의 주석은 표시할 영역과 설명을 한 화면에 연결한다. 나는 이를 광고 성과의 증거로 읽지 않고 상품의 위치를 이해하는 안내로 읽었다. 위치 설명과 예상 효과를 한 문장 안에 합치면 그림이 보장하는 범위보다 주장이 커질 수 있다.

이번 글은 실제 플랫폼의 최신 광고 위치를 소개하지 않는다. 고객 사이트의 캡처와 로고도 가져오지 않았다. 공유할 핵심은 설명할 대상을 표시한 뒤 왜 그 영역을 보아야 하는지 짧게 쓰는 구성 원리다. 다른 업종의 기능 안내와 제품 구성 설명에도 같은 질문을 적용할 수 있다.

표시 영역과 설명의 역할을 나눴다

빨간 박스가 대상을 찾는 역할이라면 문장은 그 대상의 의미를 설명한다. 박스 안에 모든 문구를 밀어 넣을 필요는 없다. 새 합성 화면은 도형의 원본 좌표와 설명 상자의 크기를 따로 선언한다. 강조색과 상자 크기는 실험 화면의 값이며 모든 브랜드에 맞는 디자인 규칙이라고 정하지 않았다.

설명 상자가 화면 밖으로 나가면 안쪽에 머물도록 좌표를 제한한다. 대상이 크롭으로 완전히 사라졌을 때는 표시와 라벨을 함께 숨긴다. 보이지 않는 대상을 설명 문장만 남겨 가리키지 않기 위해서다. 일부만 남은 대상은 원래 영역과 보이는 부분을 모두 기록한다.

원래 캡처 대신 합성 도형을 만들었다

공유 화면에는 머리 영역과 세 개의 도형만 있다. 방문자는 cover와 contain, 가로·정사각·세로 캔버스, 표시할 영역을 바꿀 수 있다. 그림과 박스는 같은 변환을 사용한다. 원래 업체 화면을 복제하지 않고도 위치 설명이 성립하는 조건을 직접 비교할 수 있게 한 것이다.

다만 라벨은 선언된 너비와 높이로 계산하며 실제 글꼴을 측정하지 않는다. 긴 번역 문장이 상자에 들어가는지와 화면 낭독기의 설명이 적절한지는 실제 통합 화면에서 확인해야 한다. 박스가 수학적으로 안쪽에 있다는 사실만으로 글자가 읽기 편하다고 결론 내리지 않았다.

설명을 만드는 순서도 모듈의 일부다

먼저 방문자가 찾으려는 대상을 한 문장으로 적고 그 문장에서 가리키는 원본 영역을 정한다. 다음으로 그림이 어떤 비율로 보여질지 정한 뒤 표시를 얹는다. 순서를 거꾸로 하면 눈에 잘 띄는 상자를 먼저 만들고 나중에 의미를 끼워 넣기 쉽다. 그림과 설명의 일대일 관계를 유지하려는 편집 순서다.

새 화면의 center·top·edge는 실제 상품이 아니라 잘림 조건을 비교하기 위한 이름이다. 같은 대상도 가로 캔버스에서는 보이고 세로에서는 사라질 수 있다. 이때 무조건 설명을 남기는 대신 보이지 않는 상태를 결과에 드러낸다. 설명의 개수보다 현재 보여 줄 수 있는 근거가 우선이다.

정적인 이미지로 전달할 때도 표시 영역과 안내 문장을 따로 보관하면 나중에 번역과 디자인을 바꾸기 쉽다. 다만 접근 가능한 대체 설명과 색을 구분하기 어려운 상황은 실제 페이지에서 추가로 확인해야 한다. 기하학의 통과를 커뮤니케이션 전체의 통과로 보고하지 않는 이유다.

설명이 도움이 됐다고 말할 수 있는 범위

순수 좌표 테스트 15개와 실제 인라인 이벤트를 DOM 대역에서 실행한 검사를 남겼다. 전체 라이브 예제의 이벤트 검사는 다른 두 모듈과 합쳐 56동작이며 이 주석 화면은 두 언어의 36조합을 대조했다. 실제 브라우저에서 캡처한 검수나 상담 전환율 실험은 아니다.

적용할 때는 사용할 이미지의 권한과 현재 상품의 위치, 문장의 사실관계를 먼저 확인해야 한다. 나는 이 모듈로 성과를 보장하기보다 설명의 대상을 찾기 쉽게 만들고 싶었다. 다음 글에서는 화면 비율이 달라질 때 같은 곳을 가리키는 계산을 더 자세히 다룬다.

주석을 붙이지 않은 그림만 보아도 내용을 이해할 수 있는지도 확인해야 한다. 강조 상자가 사라지면 설명도 사라지는 설계이므로 핵심 상품 정보 자체를 오직 주석 안에만 넣지는 않는 편이 좋다.