HTML 구조를 보존하며 상세페이지를 정리하는 업무 자동화

[AI와 같이 고친 에러들] 상세페이지 HTML을 지우던 자동화, 태그를 살려야 했다

작성자:

오늘은 온라인 상품을 자동으로 정리해 주는 작업을 보다가 생각보다 무서운 문제를 만났다. 처음에는 그저 “상세페이지가 이상하게 보인다” 정도였다. 화면에 들어가 보니 상품 설명이 있어야 할 자리에 HTML 태그가 풀려 있거나, 원래 모양이 깨진 것처럼 보였다.

처음에는 템플릿 문제인 줄 알았다

비개발자 입장에서는 여기서 바로 헷갈린다. 이미지가 깨진 건지, 네이버 쪽 에디터가 이상한 건지, 아니면 우리 쪽에서 보낸 데이터가 잘못된 건지 한 번에 구분하기 어렵다. 나도 처음에는 “기본 템플릿이 허술해서 그런가?”라고 생각했다. 상품명과 코드만 들어간 단순한 HTML이라 예쁘게 보이지 않는 것은 당연한 줄 알았다.

그런데 AI와 함께 로그와 변경 내용을 살펴보면서 방향이 달라졌다. 문제는 템플릿이 못생긴 정도가 아니었다. 자동 동기화 과정에서 상세페이지 본문을 정리한다며 HTML의 꺾쇠괄호까지 없애 버린 데 가까웠다. 사람 말로 풀면 이렇다. “위험한 문자 제거”라는 이름으로 청소했는데, 문장 사이의 먼지만 치운 것이 아니라 집의 구조물까지 함께 뜯어낸 셈이다.

HTML은 내용뿐 아니라 구조이기도 했다

여기서 한 번 더 배웠다. HTML 본문은 그냥 글자가 아니다. <div>, <table>, <p> 같은 태그가 있어야 브라우저가 “이건 영역이고, 이건 표고, 이건 문단이구나”라고 알아듣는다. 그런데 자동화 코드가 <와 >를 공백으로 바꿔 버리면 내용은 남아 있어도 모양을 만드는 뼈대가 사라진다.

사실 이 부분은 전에 [비개발자 자동화 노트] 사이즈로 정렬해달라고 했는데, 왜 글자 전체로 줄을 세우고 있었을까에서도 비슷하게 헤맸던 지점이라, 그때 기록을 다시 들여다보면서 확인했다.

비개발자인 내 눈에는 “상세페이지가 이상하다”였지만, 개발자식 원인은 “본문 정리 규칙이 HTML 구조까지 제거했다”에 가까웠다.

없앨 문자와 남길 태그의 경계를 다시 정했다

해결은 의외로 단순했다. 상세페이지 본문을 정리할 때 제어문자나 보이지 않는 문자는 걷어내되, HTML 태그 자체는 살려 두도록 규칙을 바꿨다. 새 상품에 기본으로 들어가는 내용도 상품명 한 줄짜리 문단이 아니라 상품코드, 브랜드, 패턴, 사이즈를 표 형태로 보여 주는 최소한의 상세 템플릿으로 바꿨다. 화려한 디자인보다 고객이 볼 때 “깨진 페이지”처럼 보이지 않게 만드는 것이 먼저였다.

물론 여기서도 AI를 그대로 믿고 끝내면 안 된다. AI는 “이렇게 바꾸면 됩니다”라고 자신 있게 말하지만, 실제 운영 자동화에서는 어떤 값을 지워도 되는지, 어떤 값은 남겨야 하는지 그 경계가 더 중요하다. 특히 외부 플랫폼으로 데이터를 보내는 자동화는 우리 화면에서만 맞으면 끝나는 문제가 아니다. 상대 플랫폼이 기대하는 형식이 HTML 본문인지 단순 텍스트인지부터 확인해야 한다.

자동화는 확인할 책임까지 없애 주지 않는다

돌아보면 이번 일은 큰 기능 개발이라기보다 작은 규칙 하나를 고친 일이었다. 하지만 작은 규칙 하나가 상품 상세페이지 전체를 망가뜨릴 수 있다는 점이 무서웠다. 비개발자인 내가 배운 것은 이것이다. 자동화에서 “정리한다”, “필터링한다”, “안전하게 만든다”는 말은 늘 좋게 들리지만, 실제로 무엇을 없애고 무엇을 남기는지는 반드시 확인해야 한다.

다음에는 이와 이어서 자동으로 외부 쇼핑몰에 가격과 재고를 밀어 넣을 때, 실패한 상품을 어떻게 다시 시도하고 기록해야 하는지도 정리해 보고 싶다. 자동화는 버튼을 줄여 주지만, 확인할 책임까지 없애 주지는 않는다.

관련 글 더 보기

댓글 남기기