지난 며칠 동안 Deepseek-R1 0528이 공식적으로 오픈 소스로 공개되었습니다.
LiveCodeBench에서의 성능은 OpenAI의 o3(높음)과 거의 비슷한 수준이며, Aider의 다국어 벤치마크 테스트에서는 Claude Opus와 동등한 수준을 기록했습니다.
공식 웹사이트에 출시되었을 당시, 저희는 프런트엔드 기능을 빠르게 테스트하여 매우 강력하다는 것을 확인했고, 이를 바탕으로 이 글에서 다루는 테스트가 탄생했습니다. 다양한 모델의 구체적인 성능을 여러분과 공유하고자 합니다.
이 테스트는 주로 프런트엔드 기능에 중점을 두므로 다양한 모델의 성능을 객관적으로 살펴보는 것이 중요합니다. 저희가 제공하는 프롬프트를 활용하여 직접 테스트를 수행하고 통찰력과 결과를 공유하실 수 있습니다.
동일한 프롬프트를 사용하여 Claude Opus 4, Sonnet 4, Gemini 2.5 Pro로 보냈습니다. DeepSeek R1-0528그리고 그들에게 점점 더 어려워지는 6가지 프런트엔드 개발 과제에 참여하게 했습니다.
기다릴 수 없는 분들을 위해 결론을 말씀드리겠습니다.
Deepseek-R1-0528은 프런트엔드 기능 면에서 Opus 4보다 약간 뒤처지지만 성능이 더 뛰어납니다. 소네트 4 그리고 Gemini 2.5 Pro.
기본적으로 Opus가 완료할 수 있는 모든 작업은 R1도 완료할 수 있으며, Opus 4가 완료할 수 없는 작업도 R1이 처리할 수 있습니다. 다만 완료율과 결과 품질은 약간 낮습니다.
R1과 다른 세 제품의 가격 차이를 고려하면 이 성능은 이미 뛰어나며, R2가 얼마나 인상적일지 상상할 수 있습니다.
테스트 1: 창고 관리 시스템
프롬프트: 다음 요구 사항을 충족하는 완벽한 웹 기반 제품 관리 도구를 만드는 데 도움을 주세요.
기능적 요구 사항
- 제품 관리
- 제품 정보 입력: 제품명, 유형/카테고리, SKU 번호, 가격, 재고 수량
- 제품 이미지 관리: 이미지 업로드 및 미리보기 지원(파일 선택기로 시뮬레이션)
- 제품 목록 표시: 검색 및 필터 지원을 통해 모든 제품을 표 형식으로 표시합니다.
- 제품 편집: 제품 정보 수정 지원
- 제품 삭제: 제품 삭제 지원(확인 메시지 포함)
- 재고 관리
- 인바운드 운영: 제품 재고 수량 증가, 입고 시간 및 수량 기록
- 아웃바운드 운영: 제품 재고 수량 감소, 출고 시간 및 수량 기록
- 재고 기록: 각 상품별 재고 변동 내역을 표시합니다.
- 인터페이스 기능
- 대시보드: 총 제품 수, 총 재고 가치, 재고 부족 알림 등의 통계를 표시합니다.
- 반응형 디자인: 데스크톱 및 모바일 기기에 적용 가능
- 데이터 지속성: localStorage를 사용하여 데이터를 저장합니다.
기술적 요구 사항
스타일 및 아이콘
- CSS 프레임워크: TailwindCSS 3.0+ CDN을 사용합니다
- 아이콘 라이브러리: Heroicons 또는 Feather Icons CDN을 사용합니다.
- 세례반: Google Fonts 사용
코드 구조
- 단일 페이지 애플리케이션: HTML + CSS + 자바스크립트
- 모듈식 디자인: 함수를 여러 JavaScript 모듈로 분할합니다.
- 데이터 형식: JSON 형식을 사용하여 제품 데이터를 저장합니다.
인터페이스 디자인 요구 사항
- 모던 UI: 심플하고 아름다운 인터페이스 디자인
- 색상 구성표: 전문적인 비즈니스 색상 조합을 사용하세요
- 대화형 피드백: 버튼 클릭, 양식 검증 및 기타 대화형 효과
- 양식 검증: 필수 필드 검증, 데이터 형식 검증
데이터 구조 예제
모든 기능이 제대로 작동하고 브라우저에서 직접 실행할 수 있는지 확인하기 위해 필요한 CSS와 JavaScript 코드를 모두 포함한 완전한 HTML 파일을 생성하세요.
테스트 결과를 살펴보겠습니다. 실제로 논리는 상당히 복잡하여 모델의 맥락 길이, 미적 감각, 그리고 논리적 처리 능력을 테스트합니다.
이 경우 Deepseek을 제외한 모든 모델이 실패했습니다. 클로드 4의 번역 솔직히 말해서, 꽤 어긋났어요.
딥시크-R1-0528: 업그레이드된 R1 버전은 매우 강력합니다. 보시다시피 인터페이스가 매우 전문적이고, 새 상품을 생성하고, 일반적인 아웃바운드 및 인바운드 작업을 수행하고, 상품, 재고 관리, 재고 보고서를 세 페이지로 구분할 수 있어 전반적으로 매우 명확합니다. 전용 대시보드 페이지도 있고, 테스트용 샘플 데이터도 작성되어 있습니다. 다른 모델에는 데이터가 없고, 상품 추가도 불가능하여 테스트가 전혀 불가능합니다.
클로드 작품 4: SaaS 플랫폼에서 흔히 볼 수 있는 사이드바 대신 상단 탐색 바를 사용하는 매우 간단한 대형 인터페이스로 시작합니다. 제품을 추가하면 저장 시 오류가 발생하여 테스트가 불가능합니다.
클로드 소네트 4: Opus 4에 비해 인터페이스가 훨씬 더 기본적입니다. "제품 추가" 버튼을 클릭해도 반응이 없고, 양식 팝업도 나타나지 않습니다. 다른 페이지들은 사실상 임시방편일 뿐입니다.
제미니 2.5 프로: Google 버전이 Claude 버전보다 낫습니다. 제품 추가와 런 추가는 가능하지만 버그가 있습니다. 처음 시도했을 때는 잘 작동했지만, 동영상을 녹화했을 때는 작동하지 않았습니다. 하지만 Gemini의 인터랙션 디자인은 재고 관리와 기록 관리가 모두 하나의 테이블에 통합되어 있어 다소 복잡합니다.
테스트 2: 픽셀 애니메이션 편집기
다음은 시각적 능력 테스트입니다. P5.js를 사용하여 픽셀 아트 애니메이션 편집기를 만들어 달라고 요청했습니다. 이 편집기는 이동 모드를 지원하고, 점의 모양, 크기, 속도 및 기타 조건을 조정합니다.
프롬프트: 다음의 기술 요구 사항을 충족하는 P5.js 기반의 전체 화면 대화형 픽셀 아트 애니메이션 생성기를 만드세요.
핵심 기능
- P5.js를 사용하여 뷰포트 영역 전체를 덮는 애니메이션으로 전체 화면 픽셀 아트 애니메이션을 구현합니다.
- 가장 작은 그리드 간격에서도 전체 범위를 보장하려면 픽셀 그리드의 총 면적이 가시 영역의 최소 10배 이상이어야 합니다.
- 다양한 애니메이션 모드 제공: Wave, Pulse, Ripple, Noise
- 다양한 점 모양 옵션을 지원합니다: 원, 사각형, 십자가, 삼각형, 마름모 등.
- 모든 제어판은 페이지 오른쪽에 배치되며 모바일 기기에서는 하단으로 접을 수 있습니다.
조정 가능한 매개변수
- 점 밀도: 행/열당 점의 수를 제어합니다.
- 모양 크기 : 점의 크기를 조절하세요
- 애니메이션 속도: 애니메이션 효과의 속도와 진폭을 제어합니다.
- 그리드 간격: 점 사이의 거리를 조정합니다.
기술 사양
- HTML5, TailwindCSS 3.0+(CDN을 통해 도입), P5.js를 사용하세요.
- 시스템 설정을 기본값으로 하여 전체 다크/라이트 모드 전환 기능을 구현합니다.
- 코드에는 성능 최적화 논리가 포함되어야 하며, 가시 영역 내의 점과 가장자리 근처의 점만 렌더링해야 합니다.
- 애니메이션은 지연 없이 원활하게 실행되어야 합니다.
반응형 디자인
- 페이지는 모든 기기(모바일, 태블릿, 데스크톱)에서 완벽하게 표시되어야 합니다.
- 모바일 보기에서 제어판은 접거나 펼칠 수 있어야 합니다.
- 다양한 화면 크기에 맞춰 레이아웃과 글꼴 크기를 최적화하세요
- 모바일 기기에서 좋은 터치 경험을 보장하세요
인터페이스 요소
- 애니메이션 모드 선택기(파동, 펄스, 잔물결, 노이즈)
- 모양 선택기(아이콘으로 다양한 모양을 표시)
- 슬라이더 컨트롤: 밀도, 크기, 속도, 간격
- 테마 전환 버튼
- 매트릭스 오버레이 정보 및 총 포인트 수 표시
결과를 한번 보세요. 솔직히 말해서, 다른 모델들이 이 테스트에서 이렇게 저조한 성적을 거둘 줄은 예상하지 못했습니다. Deepseek-R1을 제외한 다른 모델들의 애니메이션은 전혀 작동하지 않았습니다.
딥시크-R1-0528: 완벽합니다. 모든 버튼과 슬라이더가 정상적으로 작동하고, 포인트도 부드럽게 움직입니다. 도트 매트릭스 데이터까지 추가되었고, 야간 모드로 전환한 후에도 색상이 일정하게 유지됩니다. 유일한 사소한 문제는 색상 선택 상태에 약간의 문제가 있다는 점인데, 다른 모델들의 처참한 성능에 비하면 미미한 수준입니다.
클로드 작품 4: 좋은 소식은 픽셀 아트가 있다는 것입니다. 나쁜 소식은 움직이지 않는다는 것입니다. 오른쪽 콘텐츠는 정상적으로 작동하지만, 야간 모드로 전환하면 색 구성표가 제대로 작동하지 않습니다.
클로드 소네트 4: 이건 완전 엉망이에요. 픽셀 아트도 없고, 버튼 선택 상태도 없어요. 슬라이더는 그냥 점들뿐이에요. 차라리 기본 구성 요소를 쓰는 게 나을 것 같아요.
제미니 2.5 프로: 픽셀 그리드가 없다는 오류도 보고되었습니다. 오른쪽 콘텐츠는 정상적으로 작동하고 테마 전환도 잘 되지만, 기본 구성 요소가 약간 보기 흉합니다.
테스트 3: 이미지 그래디언트 색상 추출 도구
이건 제가 이전에 작성한 도구입니다. 로직에 대한 설명은 많지 않지만, 스타일에 대한 설명은 더 많습니다. 주요 기능은 이미지에서 그라디언트 색상 다섯 세트를 추출하는 것입니다.
프롬프트: 다음 파일 내용을 기반으로 HTML 웹 페이지를 생성하고, 업로드된 이미지에서 5가지 그라데이션 색상 세트를 추출하고, 사용자가 5가지 16진수 그라데이션 색상 세트를 직접 복사할 수 있도록 지원합니다. 색상 추출 기능을 구현해야 합니다.
- NetEase Cloud Music 스타일의 시각적 디자인을 사용하고 #FE1110과 유사한 색상을 강조 표시한 흰색 배경을 사용합니다.
- 핵심 내용을 강조하기 위해 큰 글꼴이나 숫자를 강조하세요. 큰 시각적 요소를 사용하여 주요 영역을 강조하고, 작은 요소와 대비를 이루도록 하세요.
- 중국어와 영어 텍스트를 섞어서 사용하세요. 굵고 큰 중국어 문자와 작은 영어 텍스트를 강조 표시로 사용하세요.
- 간단한 선으로 그린 그래픽을 사용하여 데이터를 시각화하거나 장식 요소로 활용하세요.
- 하이라이트 색상의 투명도 그라데이션을 사용하여 기술에서 영감을 받은 효과를 만들지만 서로 다른 하이라이트 색상이 서로 섞이지 않도록 주의하세요.
- 마우스 스크롤로 애니메이션을 트리거하는 Apple 공식 웹사이트 애니메이션을 모방합니다.
- 테마와 일관된 스타일을 사용하여 온라인 차트 구성 요소에서 데이터를 참조할 수 있습니다.
- Framer Motion 사용(CDN을 통해)
- HTML5, TailwindCSS 3.0+(CDN을 통해) 및 필요한 JavaScript를 사용하세요.
- Font Awesome이나 Material Icons(CDN을 통해)와 같은 전문적인 아이콘 라이브러리를 사용하세요.
- 이모티콘을 기본 아이콘으로 사용하지 마세요
- 왼쪽 하단 모서리에 있는 캡슐 버튼은 작성자의 Twitter 핸들을 표시합니다.
이 경우, Claude가 마침내 훌륭한 작업을 해냈습니다. Deepseek-R1-0528의 페이지 세부 정보와 미적 감각은 인상적이지만, 기능은 구현되지 않았습니다. Opus 4와 Sonnet 4 페이지는 더 단순하지만 최소한 기능은 갖추고 있는 반면, Gemini는 전혀 작동하지 않습니다.
딥시크-R1-0528: 제 프롬프트를 다시 사용해 보니 Deepseek의 페이지 디자인은 정말 타의 추종을 불허합니다. 또한 애플리케이션 시나리오와 처리 시간 등 SEO 친화적인 콘텐츠를 페이지에 많이 추가했습니다. 그라데이션 색상의 디스플레이 카드도 매우 상세하지만, 색상 선택 로직은 구현되지 않았습니다.
클로드 작품 4: 이번에는 Claude가 마침내 실망시키지 않고 페이지 기능을 완성했습니다. 하지만 페이지 콘텐츠는 매우 기본적이었습니다. 이미지와 결과를 업로드하는 공간만 있고 색상 선택 로직도 부실했습니다. 그래도 최소한 작동은 합니다.
클로드 소네트 4: Sonnet 4도 해당 기능을 완성했으며, Sonnet의 결과가 Opus보다 더 뛰어나다고 생각하지만 Deepseek만큼 풍부하지는 않습니다.
제미니 2.5 프로: 이건 최악이에요. 페이지 세부 정보나 디자인이 부족할 뿐만 아니라 기능도 제대로 구현되지 않았고, 시작하자마자 갑자기 꺼져 버립니다.
테스트 4: 화이트 노이즈 데일리 명언 웹사이트
다음은 새 탭 페이지 플러그인에 적합한 백색 소음 일일 인용 웹사이트 생성기입니다. Spotify에서 백색 소음 재생을 지원하며, 웹페이지에
프롬프트: 다음 요구 사항을 충족하는 간단하고 우아한 일일 견적 웹사이트를 만드는 데 도움을 주세요.
시각 디자인
- 배경 이미지: 다음 링크에서 무작위로 고품질 풍경 이미지를 선택하여 배경 이미지로 사용합니다.
- 이미지 링크: XXXX
- 이미지 처리: 텍스트가 선명하고 읽기 쉽게 유지되도록 25% 검정 마스크와 약간의 가우시안 블러를 추가합니다.
- 전반적인 스타일: 몰입감을 높이기 위해 웹페이지 배경으로 풍경 이미지를 사용한 미니멀하고 모던한 디자인
- 애니메이션 프레임워크에는 anime.js(CDN: JsDelivr jsdelivr.com을 통해 도입)를 사용하고, HTML5, TailwindCSS 3.0+(CDN을 통해 도입) 및 필요한 JavaScript를 사용하고, Font Awesome이나 Material Icons(CDN을 통해 도입)와 같은 전문적인 아이콘 라이브러리를 사용합니다.
시간 표시 모듈
- 맨 위: 월 및 일 형식(예: "5월 29일")을 더 작은 글꼴로 중앙에 표시합니다.
- 두 번째 줄: “주 X · 음력 X번째 달 X번째 일” 형식을 더 작은 글꼴로 표시합니다.
- 센터: 현재 날짜를 큰 흰색 글꼴로 중앙에 강조 표시합니다.
견적 표시 모듈
- 콘텐츠: 중국 및 해외 철학자와 작가의 고전 명언을 무작위로 표시합니다.
- 공들여 나열한 것: 인용문은 중앙에 정렬되어 있고, 글꼴 크기는 적당하며, 줄 간격은 편안합니다.
- 속성: 오른쪽 하단에 "작가, XXX" 또는 "철학자, XXX"가 표시됩니다.
- 인용문 라이브러리: 동기 부여, 삶의 통찰력, 지혜 등 다양한 주제에 대한 인용문이 포함되어 있습니다.
음악 재생 기능
- 위치: 페이지의 왼쪽 하단 모서리, 기본적으로 축소됨
- 콘텐츠: Spotify 화이트 노이즈 플레이리스트 삽입
- 암호:
기술 구현
- 반응형 디자인: 데스크톱 및 모바일 기기에 맞게 조정됨
- 글꼴 선택: Google Fonts에서 도입한 우아한 중국어 글꼴을 사용하세요.
- 색상 구성표: 모든 배경에서 가독성을 보장하기 위해 주로 흰색 텍스트를 사용합니다.
- 로딩 최적화: 페이지 성능 향상을 위한 이미지 지연 로딩
대화형 기능
- 자동 새로 고침: 매일 배경 이미지와 인용구를 자동으로 변경합니다
- 수동 새로 고침: 사용자가 수동으로 콘텐츠를 변경할 수 있도록 새로 고침 버튼을 제공합니다.
카피라이터 스타일
- 견적 선택: 짧고 긍정적이며 철학적인 인용문을 선호합니다.
- 언어 스타일: 간결하고 강력하며 과도한 길이를 피함
- 테마 분류: 삶에 대한 통찰력, 영감을 주는 성장, 현명한 생각, 감정 표현 등.
위의 요구 사항에 따라 완전한 HTML/CSS/JavaScript 웹사이트를 생성하여 인터페이스가 미적으로 아름답고 기능적이며 좋은 사용자 경험을 제공하는지 확인하세요.
이 테스트는 각 모델의 미적 감각을 평가하기 위한 것입니다. 이러한 유형의 디스플레이 중심 웹페이지는 일반적으로 구현 가능합니다.
Claude Opus 4는 이 분야에서 여전히 상당히 권위 있는 프로그램이며, 디테일에 대한 탁월한 집중력을 보여줍니다. Gemini 2.5 Pro도 훌륭하며, 이미지 전환에 애니메이션 효과를 추가하는 기능까지 갖추고 있습니다. Deepseek과 Sonnet 4는 비슷한 수준입니다.
딥시크-R1-0528: Deepseek를 먼저 실행해 봤는데, 꽤 괜찮다고 생각했습니다. 전반적인 디자인에서 가장 먼저 눈에 띄는 문제는 왼쪽 하단 모서리에 있는 음악 버튼이 너무 평평하다는 것이었습니다. 인용구 섹션에도 문제가 있었는데, 검은색 마스크가 추가되어서는 안 되었고, 텍스트 정렬도 약간 어긋났습니다. 그래도 새로 고침 애니메이션 효과는 추가해 주었습니다.
클로드 작품 4: Opus 4의 미적 감각은 정말 흠잡을 데 없습니다. 모든 글꼴의 크기와 간격이 매우 편안하고, 유명한 명언의 인용구는 인용문 텍스트와 따옴표 모두 투명하게 처리되었습니다. Spotify 플레이어도 확장/축소 애니메이션이 적용된 UI로 감싸져 있습니다. 정말 완벽합니다.
클로드 소네트 4: Sonnet 4의 효과는 Deepseek의 문제와 유사합니다. 음악 재생 버튼, 텍스트 크기, 정렬, 간격 등을 모두 더욱 최적화할 수 있습니다.
제미니 2.5 프로: Gemini의 효과도 좋지만, 텍스트 그림자를 제거하면 더 좋을 것 같습니다. Spotify 플레이어 UI도 맞춤 설정되었고, 텍스트 디테일도 훌륭합니다. 이미지가 늘어나는 효과와 함께 전환 효과도 눈에 띕니다.
테스트 5: Sleep 앱 페이지 생성
다음은 모바일 앱 테스트입니다. 각 참가자에게 수면 모니터링 앱을 만들어 보도록 합니다. 이 테스트에는 기술 스택과 디자인 요구 사항이 명시되어 있으며, 여러 개의 인터랙티브 페이지를 생성해야 합니다.
프롬프트: 수면 모니터링 앱 개발 요구 사항
프로젝트 개요
네 개의 주요 기능 페이지로 구성된 완벽한 수면 모니터링 앱을 만들어 주세요. 인터페이스는 보기에도 좋고 전문적이어야 합니다.
기술 스택 요구 사항
프런트엔드 기술
– HTML5 – 페이지 구조
– 테일윈드CSS v3.0+ – 스타일 프레임워크(CDN을 통해 도입)
– 자바스크립트 – 필요한 상호작용 논리
– 애니메이션.js v4.0.2 – 애니메이션 효과 라이브러리
- 캐나다:
https://cdn.jsdelivr.net/npm/animejs@4.0.2/+esm
아이콘과 차트
- 아이콘 라이브러리: Font Awesome 또는 Material Icons(CDN)
- 차트 구성 요소: 온라인 차트 구성 요소, 스타일은 테마와 일관성이 있어야 합니다.
- 데이터 시각화: 수면 데이터의 차트 표시 지원
설계 요구 사항
반응형 디자인
- 완벽하게 반응하는 레이아웃
- 모바일 우선 디자인
- 데스크탑과 모바일 기기 모두에서 좋은 디스플레이
상호작용 효과
- 버튼 상호작용: 호버 시 효과가 약간 확대됨
폼 상호작용: 입력 필드에 포커스가 맞춰지면 그라데이션 테두리 표시
카드 상호작용: 마우스를 올려놓으면 그림자가 어두워집니다.
애니메이션 효과: Anime.js를 사용하여 부드러운 페이지 애니메이션을 구현하세요
기능 페이지 요구 사항
다음을 포함하되 이에 국한되지 않는 수면 모니터링 앱에 필요한 모든 페이지를 생성하세요.
- 홈페이지/대시보드
- 수면 기록 페이지
- 데이터 분석 페이지
- 설정 페이지
- 기타 관련 기능 페이지
코드 출력 요구 사항
- 각 페이지는 독립적인 HTML 파일입니다.
- 완전한 주석이 포함된 명확한 코드 구조
- 모든 CDN 링크에 액세스할 수 있는지 확인하세요.
- 완전하고 실행 가능한 코드 제공
모바일 로직과 인터페이스 측면에서 Cluade Opus 4는 다시 한번 강력한 성능을 입증하며, 훌륭한 로직으로 여러 페이지를 완성했습니다. 다른 모델들은 단 하나의 페이지만 생성했지만, Deepseek R1 0528은 아름다운 스타일로 미적 감각을 완벽하게 구현했습니다. 비록 단 하나의 페이지만 생성했지만, 매우 완벽했습니다.
딥시크-R1-0528: 단일 페이지만 생성했지만 전체적인 디자인은 훌륭합니다. 카드 디테일과 아이콘 처리가 잘 되어 있고, 전체 페이지가 완성도 높고 길어요. 또한, 내비게이션에 반응형 디자인을 적용하여 모바일과 데스크톱 기기에서 완전히 다른 레이아웃을 구현했습니다.
클로드 작품 4: 실제로 강력한 도구로 Opus4만이 모든 페이지를 완벽하게 생성했지만, 이번에 웹 페이지 로직을 사용한 미적 디자인은 그다지 좋지 않았고, 탐색 아이콘이 너무 작았습니다.
클로드 소네트 4: 한 페이지만 생성하고 오류와 미적 디자인이 좋지 않다고 보고했지만, 그저 작업을 완료했을 뿐입니다.
제미니 2.5 프로: Google은 항상 다른 방식으로 작업을 진행합니다. 각 페이지를 개별적으로 생성하여 서로 상호 작용할 수 없는 네 개의 파일을 제공합니다. 게다가 모든 페이지에 오류가 보고되었는데, 각 페이지에는 탐색 기능만 있고 콘텐츠가 전혀 없어서 매우 실망스러웠습니다.
테스트 6: 복잡한 기능 - 테트리스
마지막으로 간단한 게임 테스트로 마무리했습니다. 특수 블록, 테마 전환, 블록 착지 예측, 블록 저장 등 다양한 기능을 갖춘 비교적 복잡한 테트리스 게임을 디자인했는데, 그야말로 궁극의 도전이었습니다.
프롬프트: 다음 요구 사항을 충족하는 완벽한 기능을 갖춘 시각적으로 매력적인 테트리스 웹 게임을 만드는 데 도움을 주세요.
핵심 게임 기능
- 완전한 테트리스 메커니즘: 7개의 표준 블록(I, O, T, S, Z, J, L)
- 부드러운 컨트롤: 좌우 이동, 회전, 퀵 드롭, 인스턴트 드롭
- 스마트 제거 시스템: 특수 애니메이션 효과로 한 번에 1~4개 행을 제거하는 것을 지원합니다.
- 점진적인 난이도 시스템: 제거된 행 수에 따라 자동으로 드롭 속도와 레벨을 증가시킵니다.
고급 기능
- 미리보기 시스템: 다음 블록과 다음-다음 블록을 표시합니다.
- 홀드 기능: Hold 키를 누르면 현재 블록이 임시로 저장됩니다. 라운드당 한 번만 사용할 수 있습니다.
- 고스트 블록: 블록의 착지 위치를 반투명 형태로 표시합니다.
- 콤보 시스템: 지속적인 클리어는 추가 포인트와 시각 효과를 제공합니다.
- 특수 기술:
- 폭탄 차단(주변 지역 정리)
- 레이저 클리어(전체 행을 지움)
- 시간 정지(블록이 3초 동안 떨어지는 것을 멈춤)
시각적 디자인 요구 사항
- 모던 UI 인터페이스:
- 그라데이션 배경 또는 입자 효과
- 유리 효과 게임 패널
- 부드러운 애니메이션 전환
- 다양한 화면에 맞는 반응형 디자인
- 풍부한 시각 효과:
- 블록이 떨어지고 회전하는 부드러운 애니메이션
- 제거 시 폭발 또는 플래시 효과 발생
- 콤보 달성 시 화면 흔들림 효과
- 레벨이 업그레이드되면 축하 애니메이션이 표시됩니다.
- 테마 시스템: 전환할 수 있는 최소 3개의 다른 시각적 테마
음향 효과 시스템
- 완벽한 사운드 피드백: 이동, 회전, 착지, 제거, 게임 종료 등.
- 배경음악: 루핑 게임 BGM
- 볼륨 조절: 독립적으로 조절 가능한 음향 효과 및 배경 음악 볼륨
게임 모드
- 클래식 모드: 전통적인 테트리스 게임 플레이
- 시간 제한 모드: 지정된 시간 내에 최고 점수를 달성하세요
- 챌린지 모드: 난이도를 높이기 위한 사전 설정 장애물
- 젠 모드: 시간적 압박 없이 게임을 순수하게 즐길 수 있습니다.
데이터 통계 기능
- 실시간 통계: 현재 점수, 레벨, 클리어한 라인 수, 게임 시간
- 역사: 최고 점수, 최고 레벨, 총 게임 시간
- 업적 시스템: 다양한 게임 업적 잠금 해제
- 로컬 스토리지: 게임 기록 및 설정 저장
기술적 요구 사항
- 순수 HTML5/CSS3/JavaScript를 사용합니다, 외부 프레임워크가 필요하지 않습니다
- 명확한 코드 구조: 객체 지향 프로그래밍, 모듈형 설계
- 성능 최적화: 60FPS의 부드러운 애니메이션, 지연 없음
- 호환성: 주류 현대 브라우저를 지원합니다
- 반응형 디자인: PC 및 모바일 기기와 호환 가능
사용자 경험
- 직관적인 지침: 내장된 튜토리얼 및 버튼 프롬프트
- 일시 정지/재개 기능: 언제든지 게임을 일시 정지합니다
- 설정 메뉴: 게임의 난이도, 음향 효과, 시각 효과 등을 조정합니다.
- 게임 상태 저장: 게임 저장 및 재개 지원
코드 품질 요구 사항
- 자세한 의견: 각 기능과 중요한 코드 세그먼트에는 설명이 있어야 합니다.
- 오류 처리: 포괄적인 예외 캡처 및 처리 메커니즘
- 우아한 코드: 모범 사례를 따르고 이해하기 쉽고 유지 관리하기 쉽습니다.
- 확장성: 향후 새로운 기능을 쉽게 추가할 수 있습니다
브라우저에서 직접 실행할 수 있도록 CSS와 JavaScript 코드가 모두 포함된 완전한 HTML 파일을 제공해 주세요. 코드는 전문적인 프로그래밍 기술과 게임 개발에 대한 깊은 이해를 보여주어야 합니다.
미니 게임에서 클로드는 뭔가 특별한 일을 해냅니다. 오푸스와 소넷 모두 필요에 따라 테트리스 블록을 생성했는데, 특히 특수 블록의 로직이 그렇습니다. 딥시크는 클로드가 간과했던 테마를 처리했지만, 특수 블록을 놓쳐 제미니 2.5 프로에서 플레이할 수 없는 블록을 생성했습니다.
딥시크-R1-0528: 작업은 매우 잘 완료되었고 사양에 맞춰 진행되었지만, 특수 블록 디자인은 생략되어 전혀 구현되지 않았습니다. 이는 프롬프트 단어를 제대로 따르지 않았기 때문일 수 있습니다. 전체 웹페이지는 게임 인터페이스와 유사하며, 모든 버튼은 표준 구성 요소처럼 보입니다.
클로드 작품 4: 특수 블록 및 기타 로직은 문제없이 완료했지만, 구현하지 않은 테마 전환 프롬프트는 무시했습니다. DeepSeek의 문제에 비하면 문제는 작지만, 인터페이스가 반응형 로직 없이 하드코딩되어 비율이 약간 어긋나 일부 버튼을 클릭할 수 없습니다.
클로드 소네트 4: Opus와 비슷하지만, Sonnet 4가 Opus보다 낫다고 생각합니다. 페이지 조정 기능도 훌륭합니다. Sonnet이 필요한 기능을 모두 갖추고 있어서 우승한 것 같습니다.
제미니 2.5 프로: 쌍둥이자리는 복잡한 논리를 끊임없이 어려워합니다. 이번에는 벽돌 배치에 버그가 있어서 어디에 떨어질지 예측할 수 없어서 완전히 쓸모가 없었습니다. 정말 최악입니다.
이제 여러분도 저처럼 DeepSeek-R1의 성능에 놀랐을 거라고 생각합니다.
이게 단순한 모델 업그레이드라고 믿기 어렵습니다. 이 모델들의 가격을 DeepSeek R1 0528과 비교해 보겠습니다.
Opus 4는 30배 더 비싼데, 이는 Openrouter의 가격을 사용한 것이며 공식 가격은 훨씬 더 충격적일 것입니다.
모델 | 컨텍스트 길이 | 입력 가격($/M 토큰) | 출력 가격($/M 토큰) | 이미지 가격($/K 토큰) |
DeepSeek R1 0528 | 16만 | 0.50 | 2.18 | – |
제미니 2.5 프로 미리보기 | 100만 | 1.25 | 10 | 5.16 |
클로드 소네트 4 | 20만 | 3.00 | 15 | 4.80 |
클로드 오푸스 4 | 20만 | 15.00 | 75 | 24.00 |
매일 AI 뉴스를 접하는 사람으로서, 저는 수많은 "혁신"을 목격했지만 결국 "실망스러운" 결과로 끝나곤 했습니다. 하지만 이번에는 다릅니다. DeepSeek-R1은 저에게 진정한 희망을 주었습니다.
가격은 30배 차이가 나지만 성능은 거의 동일합니다.
더 이상 최고의 AI 프로그래밍 모델을 사용하기 위해 터무니없는 가격을 지불할 필요가 없고, 비용과 품질 사이에서 고통스러운 타협을 할 필요도 없습니다. 더욱 고무적인 것은 이것이 바로 우리만의 모델이라는 것입니다.
이 문장은 AI가 쓴 것인데, 정말 훌륭하다고 생각해요. 진정한 혁명은 보통 사람들이 별에 손을 뻗을 때 시작된다.