AI로 만든 Babeltro, 비슷해 보이는 화면을 왜 픽셀까지 비교할까요?

핵심 요약 (TL;DR)

‘비슷해 보입니다’와 ‘정한 기준에 맞습니다’는 다른 답입니다. 한국 시간 10월 28일 소개된 Babeltro는 여러 프로그래밍 언어로 만든 시각 효과를 브라우저에서 나란히 보여 주는 프로젝트입니다. 제작자는 AI 에이전트로 만들었고, C 구현을 기준으로 픽셀을 대조한다고 밝혔습니다.[1] 첫 앱을 만드는 분에게도 참고할 것은 언어의 개수보다 비교 기준을 먼저 정하는 태도입니다.

Babeltro는 무엇을 비교하나요?

README는 같은 효과를 서로 다른 언어로 표현하는 방법을 보여 주는 것이 목적이라고 설명합니다. 코드의 일부와 구현 차이를 함께 읽고, 최적화 단계 사이의 화면 차이도 볼 수 있도록 구성했습니다.[2] 속도 순위 소개는 아닙니다.

공개 사이트와 저장소는 확인했지만 모든 효과나 성능을 재현하지는 않았습니다. 조건을 맞추지 않은 속도 수치보다, 무엇을 같게 만들려 했는지에 주목하겠습니다.

AI가 만들었다면 기준도 AI에게 맡겨도 될까요?

공개한 프롬프트 기록에는 사람이 교육적 목적과 화면 구성을 조정하고, 기준 구현을 C로 바꾸도록 요청한 과정이 담겨 있습니다. 문서는 Claude Code 세션이 작업을 나누고 다시 검사했다고 설명합니다.[3] 이는 제작자가 정리한 기록이며 전체 개발 세션을 독립적으로 감사한 결과는 아닙니다.

검사 코드도 읽어 보면 기본 기준은 C이고, 지정한 크기와 프레임 지점에서 결과를 비교합니다.[4] 검사기가 있다는 사실은 모든 크기와 모든 시점이 검증됐다는 뜻이 아닙니다. 기준 구현 자체가 의도에 맞는지 역시 별도의 질문으로 남습니다.

첫 웹앱에는 어떤 기준을 남기면 좋을까요?

예를 들어 준비물 합계 화면을 만든다면, 직접 답을 확인한 입력 몇 개를 먼저 준비하세요. 정상 금액, 빈 입력, 항목을 지운 뒤의 결과를 나누고 각 상황에서 보여야 할 상태를 적습니다. 다음은 원작의 프롬프트가 아닌 연습용 예시입니다.

“준비물 이름과 금액을 입력하는 화면을 만들어 주세요. 제가 제공한 예제의 기대 결과를 바꾸지 말고 실제 결과와 비교해 주세요. 실패한 예제를 따로 남기고 회원가입과 결제는 제외해 주세요.”

오류를 수정한 뒤에는 같은 예제로 다시 확인합니다. AI가 코드를 바꾸면서 기대 결과까지 편의상 바꾸지 않았는지도 살펴보세요. 내 앱에서 무엇을 정답으로 삼는지 설명할 수 있다면, 짧은 검사가 긴 칭찬보다 도움이 됩니다.

자동 검사가 통과하면 사람이 볼 것은 없을까요?

프롬프트 기록에는 비교 기능이 이해되지 않는다는 지적과 모바일 화면에 대한 수정 요청도 나옵니다.[3] 결과가 기준과 일치해도 처음 온 사람이 기능을 이해하는지는 별개입니다.

공개 주소에서 사용자가 시작하고 결과를 찾는 과정을 직접 보세요. 테스트용 입력이 맞게 처리되는지와 설명 없이 쓸 수 있는지를 따로 적습니다. 픽셀 비교는 이 프로젝트에 맞는 도구이지, 모든 앱이 똑같이 따라야 할 정답은 아닙니다.

FAQ: 제 앱도 픽셀 단위로 비교해야 하나요?

아닙니다. 합계 앱은 계산 결과, 메모 앱은 저장 후 내용의 일치처럼 핵심 약속에 맞춰 기준을 정해 보세요. 외형을 맞추는 검사와 기능의 정답을 확인하는 검사는 목적이 다릅니다.

FAQ: AI가 검사 코드까지 쓰면 검수가 끝인가요?

검사가 실제로 실행됐는지, 어떤 입력을 다뤘는지, 실패를 제대로 표시하는지 확인해야 합니다. 이 글도 검사 코드의 존재와 내용을 확인한 것이며, 전체 검사 통과를 재현했다는 보고는 아닙니다.

출처
[1] https://news.ycombinator.com/item?id=50274193
[2] https://github.com/algotitanhq/babeltro
[3] https://github.com/algotitanhq/babeltro/blob/main/PROMPTS.md
[4] https://github.com/algotitanhq/babeltro/blob/main/tools/check.mjs
관찰: 2026-10-29 KST