AI가 내 워드프레스 테마를 만들었지만, 성능은 망가뜨렸다
저는 SEO 전문가입니다. 새로운 도구를 테스트하는 것을 즐깁니다.
최근에 AI에게 처음부터 커스텀 워드프레스 테마를 만들어 달라고 요청했습니다. 레이아웃을 설명하고 콘텐츠를 제공했습니다.
처음에는 결과가 훌륭해 보였습니다. 사이트는 모바일과 데스크톱 모두 Lighthouse 점수 100/100을 기록했습니다. 코드도 깔끔해 보였습니다.
그러다 약간의 수정을 가했습니다. 모바일 점수가 100에서 89로 떨어졌습니다. 데스크톱은 100을 유지했습니다.
문제는 단 하나의 이미지 속성이었습니다. 이 실수는 왜 AI 코드를 반드시 검토해야 하는지를 보여줍니다.
빠른 데스크톱 연결은 병목 현상을 숨깁니다. 모바일 기기는 이를 드러냅니다. 점수가 떨어진 것은 어떤 에셋이 불필요하게 대역폭을 사용하고 있음을 의미했습니다.
모바일 보고서는 Largest Contentful Paint (LCP) 경로에 있는 이미지를 지목했습니다. 그것은 오래된 게임의 스크린샷이었습니다.
데스크톱에서는 이 이미지가 괜찮습니다. 하지만 모바일에서는 커다란 데이터 테이블이 화면을 가득 채웁니다. 이 테이블이 이미지를 페이지 아래쪽으로 멀리 밀어냅니다. 페이지가 로드될 때 이미지는 보이지 않는 상태입니다.
AI는 다음과 같은 코드를 작성했습니다:
코드는 유효합니다. 하지만 로직이 틀렸습니다. AI는 코드의 첫 번째 이미지가 히어로 이미지(hero image)라고 가정했습니다. 시각적 인지 능력이 부족한 것입니다. 모바일 브라우저가 보이지 않는 이미지를 즉시 다운로드하도록 강제했습니다.
저는 코드를 다음과 같이 변경했습니다:
처음에는 점수가 변하지 않았습니다. 제 정신이 아닌가 싶었습니다. 버그를 찾느라 20분을 허비했습니다. 그러다 서버 캐시가 여전히 이전 코드를 제공하고 있다는 사실을 깨달았습니다.
캐시를 삭제했습니다. 모바일 점수는 다시 100으로 돌아왔습니다.
AI가 실패한 것은 아닙니다. 코드 순서에 기반해 논리적인 추측을 한 것입니다. 하지만 AI는 레이아웃을 볼 수 없습니다. 테이블이 뷰포트(viewport)를 어떻게 변화시키는지 이해하지 못합니다.
컴포넌트를 구축하는 데 AI를 사용한다면, 다음 단계를 따르십시오:
fetchpriority와loading="lazy"를 검토하십시오. 실제 레이아웃과 대조하여 확인해야 합니다. 코드의 순서를 신뢰하지 마십시오.- 테이블이나 슬라이더 아래에 숨겨진 이미지가 있는지 확인하십시오.
- 테스트 환경을 격리하십시오. 테스트하기 전에 항상 캐시를 비우십시오. 오래된 코드를 검토하지 마십시오.
AI 코드는 사용하기에 충분히 깔끔합니다. 하지만 코드가 페이지의 실제 모습과 일치하는지 확인하기 위해서는 여전히 사람이 필요합니다.
Optional learning community: https://t.me/GyaanSetuAi