Looks Right, Works Right: A Project-Level Benchmark for Multi-Screen Mobile App Generation
이 논문은 멀티 스크린 모바일 앱 생성을 위한 최초의 프로젝트 수준 벤치마크인 MobileForge를 소개하며, 이는 빌드, 내비게이션, 시각적 충실도, 유지보수성 및 효율성을 기준으로 멀티모달 LLM을 평가하여 현재의 모델들이 앱을 컴파일하고 내비게이션할 수는 있지만 여전히 신뢰할 수 있는 상호작용과 코드 품질 측면에서는 어려움을 겪고 있음을 밝히고 있습니다.
원본 논문은 CC BY 4.0 (http://creativecommons.org/licenses/by/4.0/) 라이선스로 제공됩니다. 이것은 아래 논문에 대한 AI 생성 설명입니다. 저자가 작성하거나 승인한 것이 아닙니다. 기술적 정확성을 위해서는 원본 논문을 참조하세요. 전체 면책 조항 읽기
스마트폰으로 찍은 사진이 가득 담긴 폴더를 컴퓨터에 보여주면, 컴퓨터가 그 앱을 만드는 데 필요한 전체 프로그램을 즉석에서 작성해 주는 세상을 상상해 보십시오. 이것이 바로 인공지능이 시각적 이미지를 소프트웨어를 작동시키는 기능적 지침으로 변환하려고 시도하는 '디자인 투 코드(design-to-code)'라는 분야의 약속입니다. 수년 동안 연구자들은 웹페이지의 단일 이미지를 보여주고 그 화면 하나를 재현하기 위한 코드를 요청함으로써 이러한 시스템을 테스트해 왔습니다. 이는 단순하고 고립된 페이지에 대해서는 인상적인 결과를 이끌어냈지만, 실제 소프트웨어의 복잡성은 놓치고 있습니다. 진정한 모바일 애플리케이션은 단 하나의 이미지가 아닙니다. 그것은 여러 화면이 연결된 세계이며, 한 곳에서 다른 곳으로 이동하게 하는 버튼, 그리고 전체 경험 전반에 걸쳐 일관성을 유지해야 하는 공유 디자인 요소들로 이루어져 있습니다. 질문은 여전히 남아 있습니다. 인공지능이 실제 앱의 전체 스크린샷 세트를 보고, 인간 팀이 실제로 사용할 수 있는 작동하는 다중 페이지 프로젝트를 구축할 수 있을까요?
한 연구팀은 '모바일포지(MobileForge)'라는 새로운 테스트를 통해 이 질문에 답하고자 했습니다. 모델들에게 단일 페이지를 만들라고 요구하는 대신, 그들은 앱 전체를 처음부터 구축하도록 요청했습니다. 연구진은 소셜 미디어부터 금융, 내비게이션에 이르기까지 사람들이 매일 사용하는 29개의 실제 인기 모바일 앱에서 스크린샷을 수집했습니다. 이 앱들은 총 309개의 서로 다른 화면을 포함하고 있었습니다. 그런 다음 연구진은 현존하는 가장 발전된 6개의 인공지능 모델에게 이 이미지들을 보고 앱의 전체 소스 코드를 생성하도록 요청했습니다. 테스트의 공정성과 엄격함을 보장하기 위해, 연구팀은 각 화면이 서로 어떻게 연결되어야 하는지에 대한 상세한 지도를 만들었고, 결과물인 앱이 실제로 제대로 작동하는지 확인하기 위해 수백 개의 특정 테스트를 작성했습니다. 그들은 단순히 코드가 컴파일될 수 있는지뿐만 아니라, 내비게이션 버튼이 올바른 곳으로 안내하는지, 시각적 디자인이 원본 사진과 일치하는지, 그리고 코드가 나중에 다른 엔지니어들이 유지보수하기에 충분히 깔끔한지까지 확인했습니다.
결과는 이러한 모델들이 할 수 있는 일과 여전히 할 수 없는 일 사이의 명확한 차이를 드러냈습니다. 긍정적인 측면에서, 모든 모델은 작동하는 프로젝트로 빌드될 수 있는 코드를 생성해 냈습니다. 가장 강력한 모델들은 생성된 앱을 탐색하며 정해진 페이지에 도달하는 데 약 92%의 성공률을 보였습니다. 하지만 작동하는 앱에서 완벽한 앱으로 가는 여정은 여전히 깁니다. 코드는 실행될 수 있었지만, 시각적 세부 사항은 원본 사진에서 벗어나는 경우가 많았습니다. 모델들은 색상이나 레이아웃을 여러 화면에 걸쳐 일관되게 유지하는 데 어려움을 겪었으며, 단일 공유 컴포넌트를 사용하는 대신 매 페이지마다 내비게이션 바를 조금씩 다르게 재생성하곤 했습니다. 이러한 불일치는 앱이 원본과 비슷해 보이기는 해도, 전문적으로 설계된 제품 특유의 세련되고 통일된 느낌은 부족하게 만들었습니다.
아마도 가장 놀라운 발견은 시각적으로 정확하다고 해서 반드시 코드가 잘 작성되었다는 것을 의미하지는 않는다는 점이었습니다. 가장 시각적으로 충실한 앱을 만들어낸 모델은 다른 모델들이 만든 코드보다 두 배나 더 길고 두 배나 더 지저ない한 코드를 생성했습니다. 해당 모델은 사용되지 않는 많은 부분을 만들어냈고 공통 요소를 효율적으로 재사용하는 데 실패했습니다. 반면, 다른 모델은 시각적 출력은 약간 덜 완벽했을지라도 인간이 편집하고 유지보수하기 훨씬 쉽고 짧으며 깔끔한 코드를 생성했습니다. 이는 현재 세대의 인공지능이 앱의 외형과 그 밑바탕이 되는 코드의 엔지니어링 품질 사이의 균형을 아직 배우지 못했음을 시사합니다. 연구진은 또한 모델들이 예측 가능한 방식으로 실패한다는 것을 발견했습니다. 때때로 버튼이 화면에 나타나지만 클릭했을 때 아무런 동작도 하지 않거나, 어떤 경우에는 화면이 로드되기는 하지만 완전히 빈 화면으로 남아 사용자를 갇히게 만들기도 했습니다. 이러한 실패는 무작위적인 글리치(glitch)가 아니라, 시각적 요소와 그 기능 사이의 연결 관계를 이해하는 과정에서의 구체적인 붕괴였습니다.
이 테스트를 수행하기 위해 연구진은 단순한 시각적 비교를 넘어 성공을 측정하는 새로운 방법들을 고안해야 했습니다. 그들은 컴퓨터가 체인 형태로 앱을 헤매게 하는 대신, 각 테스트를 특정하고 고정된 지점에서 시작하는 방식을 개발하여, 하나의 실수가 전체 평가를 망치는 것을 방ло했습니다. 또한 인공지능 판사가 생성된 화면을 원본 사진과 비교하게 하되, 판사가 실제로 주의를 기울이고 있는지 아니면 단순히 추측하고 있는지를 확인하기 위한 안전 장치를 구축했습니다. 이러한 엄격한 접근 방식 덕분에 그들은 기존의 테스트였다면 놓쳤을 모델 간의 미묘한 차이를 포착할 수 있었습니다. 연구는 인공지능이 이미지를 코드로 변환하는 데 있어 상당한 도약을 이루었지만, 복잡한 다중 화면 프로젝트를 위해 인간 디자이너와 엔지니어를 대체할 준비는 아직 되지 않았다고 결론짓습니다. 기술은 앱의 골격을 구축할 수는 있지만, 애플리케이션을 실제적이고 신뢰할 수 있게 만드는 내비게이션의 근육 기억과 디자인의 세밀한 일관성을 구현하는 데는 여전히 어려움을 겪고 있습니다.
연구 분야의 논문에 파묻히고 계신가요?
연구 키워드에 맞는 최신 논문의 일일 다이제스트를 받아보세요 — 기술 요약 포함, 당신의 언어로.