웹에 붙인 좌석표

1질문

질문 하나에서 시작했습니다. 어떤 AI든 웹 페이지를 같은 방식으로 읽을 수 있지 않을까?

사람은 쇼핑몰 화면을 보면 오른쪽 위의 장바구니를 바로 누릅니다. AI에게는 이 일이 어렵습니다. AI가 웹 페이지를 읽는 방법은 보통 두 가지입니다. 화면을 사진으로 찍어 보거나, 페이지의 글만 뽑아 읽거나. 사진은 잘못 읽기 쉽고, 글만 읽으면 무엇이 화면 어디에 있는지 알 수 없습니다.

그런데 AI가 사람 대신 무언가를 누르거나 입력하려면, 마우스와 키보드가 가야 할 자리를 정확히 알아야 합니다.

2구조

그래서 웹 페이지 위에 바둑판처럼 칸을 그었습니다. 가로는 12칸으로 나누고, 세로는 줄마다 번호를 붙였습니다. 그리고 누를 수 있는 것마다 번호표를 달고, 그것이 몇 번째 줄 몇 번째 칸에 있는지 적었습니다.

극장 좌석표와 같습니다. "3열 5번"이라고만 하면 누구나 같은 자리를 찾습니다. 그리드는 웹 페이지마다 이런 좌석표를 만들어 AI에게 건넵니다. 자리뿐 아니라 지금 상태도 알려 줍니다. 이 단추는 지금 광고 창에 가려져 있어요, 이 단추는 아직 누를 수 없어요 같은 것들입니다.

이 좌석표를 적는 방식을 GRID/1이라고 부릅니다.

3실험

네 가지 AI 모델에게 실제 웹 페이지에서 할 일을 주었습니다. 한 번은 페이지에 있는 것들의 목록만 자리 없이 주고, 한 번은 그리드 좌석표를 주었습니다. 그리고 AI가 맞는 것을 찾아내는지 보았습니다.

• 보통 페이지: 목록만 받았을 때는 87%, 좌석표를 받았을 때는 99.5%를 맞혔습니다.
• 함정 페이지: 글의 순서와 화면에 보이는 자리가 서로 다른 페이지입니다. 목록만 받았을 때는 61%로 떨어졌고, 좌석표를 받은 네 모델은 모두 100%를 맞혔습니다.

예를 들어 이렇게 부탁했습니다. "빨간 티셔츠 M 사이즈 2개를 장바구니에 담아 줘." 좌석표는 AI에게 세 가지를 알려 주었습니다. 쿠키 안내 창이 구매 단추를 가리고 있으니 먼저 14번 '확인'을 눌러야 한다는 것, 색상과 사이즈는 꼭 골라야 한다는 것, '장바구니 담기' 단추는 아직 누를 수 없다는 것. 네 모델 모두 같은 순서를 세웠습니다. 14번 '확인' → 빨간색 → M 사이즈 → 수량 2 → 장바구니 담기.

4이해

모델이 아무리 똑똑해도, 글을 잘못 읽으면 제대로 이해할 수 없습니다. 그렇지만 우리는 좌석표로 그 이해를 높였습니다.

그리드는 지금 인공지능의 새로운 눈입니다. 지금은 읽는 데까지이고, 직접 누르는 손은 다음 단계입니다. 그리드는 혼자서도 돌아가는 프로그램이라 어떤 AI든 도구로 불러 쓸 수 있고, 지금은 우리 제품 이음의 눈이 되어 가고 있습니다.

다음 질문도 벌써 생겼습니다. 사진 속에 들어 있는 글은 어떻게 읽을까? 영상과 사진과 글이 한데 섞인 페이지는 어떻게 읽을까?