WebDev Arena: LMArena에서 출시한 AI 웹 프로그래밍 기능을 비교할 수 있는 도구

일반 소개

웹 개발 아레나는 다음 간의 협업입니다. LMArena 한 팀이 개발한 실시간 AI 프로그래밍 대회 플랫폼으로, AI 언어 모델(LLM)을 서로 대결하여 웹 개발 과제를 완수하는 데 중점을 두고 있습니다. 사용자가 '트위터 홈페이지 만들기' 또는 '인터랙티브 게임 개발'과 같은 특정 웹 디자인 과제를 입력하면 플랫폼이 여러 AI 모델을 호출하여 코드를 생성하고 결과를 제시한 후 사용자 투표를 통해 최고의 작품을 결정합니다. 이 플랫폼은 기술 경연장일 뿐만 아니라 커뮤니티와 긴밀하게 상호작용하며 사용자들의 제안과 기여를 환영합니다. 현재 웹데브 아레나는 LLM 프로그래밍 리뷰를 최적화하기 위해 E2B와 협력하고 있으며 UC 버클리 스카이 랩, OpenAI, 앤트로픽, 구글 딥마인드 등의 지원을 받아 사용자에게 AI 코딩 기능을 탐색할 수 있는 혁신적인 공간을 제공하고 있습니다.

기능 목록

AI 실시간 매치메이킹으로 웹 페이지 생성사용자가 작업 지시를 입력하면 여러 AI 모델이 동시에 HTML, CSS, JavaScript 코드를 생성하여 실시간으로 표시합니다.
사용자 투표 선택 메커니즘블라인드 테스트를 통해 AI가 생성한 결과를 비교하고, 사용자가 최고의 웹 페이지에 투표하며, 투표 후 모델의 신원을 표시하는 기능입니다.
다양한 프로그래밍 과제간단한 페이지 레이아웃부터 복잡한 대화형 애플리케이션까지 다양한 웹 개발 작업을 지원합니다.
코드 실행 미리보기브라우저에서 직접 실행되는 코드를 생성하여 사용자가 웹 페이지 결과를 즉시 보고 조작할 수 있도록 합니다.
커뮤니티 협업 기능기여 채널을 열어 사용자가 작업 아이디어를 제출하거나 플랫폼 개선에 참여할 수 있도록 장려하세요.
모델 평가 지원다양한 주요 LLM(예: OpenAI, Anthropic 모델)을 통합하여 다양한 모델의 프로그래밍 강점을 입증합니다.

도움말 사용

WebDev Arena 액세스 및 사용 방법

1. 웹사이트에 액세스

HTML5를 지원하는 최신 브라우저(예: Chrome, Safari, Edge)를 엽니다.
https://web.lmarena.ai/ URL을 입력하고 Enter 키를 눌러 홈 페이지로 이동합니다.
홈 페이지에는 작업 입력란과 기본 지침을 포함한 깔끔한 인터페이스가 표시됩니다.

2. 웹 개발 작업 입력

예를 들어 페이지 하단의 텍스트 상자에 개발 요구 사항을 입력합니다:
- "트위터 개인 홈페이지 레이아웃 생성하기."
- "2인 경기를 지원하는 틱택토 게임을 만들어 보세요."
- "깔끔한 이커머스 홈페이지 디자인하기"
완료했으면 '보내기' 버튼을 클릭하거나 'Enter'를 눌러 제출합니다.

3. AI 매치메이킹 결과 보기

작업을 제출한 후 플랫폼은 여러 AI 모델(예: OpenAI의 GPT 제품군 또는 Anthropic의 Claude)을 호출하여 코드를 생성합니다.
작업의 복잡성에 따라 10~30초 정도 기다리면 화면이 여러 모델에서 생성된 웹 페이지를 보여주는 두 개 이상의 열로 나뉩니다.
각 페이지는 실시간으로 실행됩니다:
- 정적 페이지의 경우 전체 레이아웃과 스타일을 볼 수 있습니다.
- 대화형 애플리케이션의 경우 게임에서 클릭하고 체스를 두는 등 직접 조작이 가능합니다.
모델이 생성되지 않으면(예: 코드에서 오류를 보고하는 경우) 페이지를 새로고침하고 다시 시도하세요.

4. 투표 참여

생성된 결과 아래에 '왼쪽이 더 좋음', '오른쪽이 더 좋음' 또는 '동점'과 같은 투표 옵션이 표시됩니다.
페이지의 각 열의 기능, 미적 감각, 유용성을 자세히 살펴보세요:
- 레이아웃이 요구 사항을 충족하는지 확인합니다.
- 상호 작용 기능이 올바르게 작동하는지 테스트합니다.
- 코드 구현의 우아함을 평가합니다.
더 낫다고 생각되는 옵션을 선택하고 투표를 제출하세요.
투표가 끝나면 플랫폼은 각 결과에 해당하는 AI 모델의 이름을 공개합니다(예: 왼쪽: Claude-3.5, 오른쪽: GPT-4o).

5. 탐색 및 기여

미션 영감홈 페이지에서 '개념 홈페이지 복제' 또는 '계산기 생성'과 같은 샘플 작업을 제공할 수 있으며, 이를 직접 클릭하여 시도해 볼 수 있습니다.
코드 보기플랫폼에서 직접 다운로드 기능은 당분간 제공되지 않지만, 브라우저 개발자 도구(우클릭-검사)를 통해 생성된 HTML/CSS/JS 코드를 확인하고 복사할 수 있습니다.
커뮤니티 참여새로운 과제에 대한 아이디어나 개선 제안이 있다면 공식 채널(웹사이트 또는 소셜 미디어)을 통해 LMArena 팀에 연락하여 플랫폼 개발에 참여할 수 있습니다.

작동 예: 트위터 홈페이지 생성하기

https://web.lmarena.ai/ 방문하기.
"트위터 프로필 레이아웃 생성"을 입력하고 "보내기"를 클릭합니다.
약 20초 후 페이지에 두 개의 결과가 표시됩니다:
- 왼쪽: 아바타, 프로필, 트윗 목록이 있는 파란색 테마.
- 오른쪽: 동적 로딩 애니메이션이 있는 회색 테마.
양쪽의 세부 사항(글꼴, 간격, 정렬)을 확인하고 클릭 상호 작용의 효과를 테스트합니다.
"왼쪽이 더 낫다"를 선택하고 투표한 결과 왼쪽은 클로드가, 오른쪽은 OpenAI 모델이 생성했다는 사실을 알게 되었습니다.

핵심 기능 상세 정보

AI 실시간 매치메이킹으로 웹 페이지 생성
사용자가 자연어 명령을 입력하면 플랫폼은 여러 개의 LLM을 호출하여 코드를 생성하고 결과를 동시에 렌더링합니다. 예를 들어 "계산기 만들기"라고 입력하면 덧셈, 뺄셈, 곱셈, 나눗셈 버튼이 있는 인터페이스가 표시될 수 있습니다. 이 모든 과정은 환경을 수동으로 구성할 필요 없이 실시간으로 이루어집니다.
사용자 투표 선택 메커니즘
블라인드 투표는 공정성을 보장하기 위해 사용됩니다. 사용자 평가는 모델의 내부 순위(예: Elo 점수)에 영향을 미치며 개발자를 위한 데이터 지원을 제공합니다. 투표 후 모델의 신원이 공개되어 흥미를 더합니다.
코드 실행 미리보기
생성된 코드는 추가 도구 없이 브라우저에서 바로 실행됩니다. 요소 드래그, 양식 작성, 게임 플레이와 같은 웹 효과를 즉시 경험할 수 있어 사용 장벽이 크게 낮아집니다.
커뮤니티 협업 기능
웹데브 아레나는 새로운 과제(예: "음악 플레이어 생성")를 제출하거나 버그에 대한 피드백을 제공하는 등 사용자 참여를 장려하며, 웹사이트 또는 트위터(@LMArenaAI)를 통해 얻을 수 있는 커뮤니티 기여를 환영합니다.

사용 팁

작업 설명을 명확하게 작성하세요."로그인 기능이 있는 페이지 생성"을 입력하면 "페이지 생성"보다 만족스러운 결과를 얻을 가능성이 높습니다.
복잡한 작업에서 더 많은 시도결과가 예상과 다르면 설명을 조정하고 다시 시도하세요(예: "simple", "modern" 등의 단어를 추가).
서포터 역학에 집중E2B, OpenAI 등과 협력하고 있으며, 향후 더 많은 모델이나 기능이 추가될 수 있으므로 공식 채널을 통해 업데이트 내용을 확인할 수 있습니다.

이러한 단계를 통해 사용자는 WebDev Arena를 빠르게 시작하고 커뮤니티 공동 제작에 참여하면서 실시간 경쟁에서 AI가 웹 페이지를 생성하는 방법을 경험할 수 있습니다!