Gemini 2.5 Pro의 코딩 기능이 더욱 향상되었습니다

Prompt Engineering 구독자 190,000명

요약

구글이 웹 개발에 특화된 Gemini 2.5 Pro 업데이트를 공개하며, 이전 버전과 비교해 시각적 웹앱 생성 능력이 크게 개선되었다. AI Studio를 이용해 판타지 스포츠 대시보드, 전설 포켓몬 백과사전, 모던 랜딩 페이지, P5.js 스케치, 물리 기반 애니메이션, 복잡한 물리 시나리오 등에 걸쳐 양 버전을 비교 테스트한 결과, 업데이트 버전은 더 풍부한 레이아웃과 디테일을 제공했지만 연산 속도는 다소 느려졌다. 특히 복잡한 충돌 감지나 긴 문맥을 필요로 하는 대규모 코드베이스에서 문맥 창(context window)의 우수성이 돋보였다. 끝으로 리더보드 결과는 실제 현업 환경을 완전히 반영하지 못하므로, 실전 프로젝트에서 직접 성능을 검증할 것을 제언한다.

주요 키워드

Gemini 2.5 Pro AI Studio chain of thought context window p5.js 토큰(token) 웹 개발 충돌 감지 멀티탭 레이아웃 랜딩 페이지

하이라이트

🔑 구글이 웹 개발에 특화된 Gemini 2.5 Pro 주요 업데이트를 발표하며, 초기 액세스에서 성능 변화를 예측
⚡️ AI Studio에서 이전 버전과 새 버전을 나란히 비교해 체인 오브 사상(chain of thought)과 속도, 토큰 수 등을 직접 측정
📌 업데이트 버전은 상세한 레이아웃과 멀티탭 구성, 다양한 애니메이션을 자동으로 추가했지만, 속도는 10~15초가량 느려진 경우 확인
🚀 복잡한 물리 시뮬레이션(회전 칠각형 내부 20개 공 등)에서 기존 버전이 실패한 요구사항을 최신 버전이 충족하며 대폭 개선된 충돌 처리를 보여줌
🐛 p5.js 기반 TV 스케치와 물리 기반 문자 낙하 애니메이션 테스트에서 업데이트 모델이 더 정교한 글자 렌더링과 충돌 감지를 지원
🌟 긴 문맥을 다루는 대규모 코드베이스(수십만 줄)에서 이전 모델들이 문맥 창 한계를 보인 반면, Gemini 2.5 Pro는 안정적으로 전체 문맥을 유지
📌 리더보드 순위(예: webdev arena, Chatbot Arena)는 실제 복잡한 프로젝트 성능을 온전히 반영하지 못하므로, 직접 실전 테스트를 권장

용어 설명

Gemini 2.5 Pro

구글이 내놓은 최신 AI 코딩 모델로, 긴 문맥 처리와 웹 개발에 최적화된 기능을 제공한다.

AI Studio

구글이 제공하는 Gemini 모델 실험 플랫폼으로, 여러 버전의 모델을 손쉽게 비교·테스트할 수 있다.

chain of thought(사고 과정 체인)

모델이 코드 구현 과정을 단계별로 사고·출력하는 메커니즘으로, 디버깅과 가독성에 유리하다.

context window(문맥 창)

AI 모델이 한 번에 참조·처리할 수 있는 최대 입력 길이로, 긴 코드베이스 분석에 중요한 요소다.

p5.js

자바스크립트 기반 시각화 라이브러리로, 인터랙티브 애니메이션과 스케치를 쉽게 구현할 수 있다.

구글이 Gemini 2.5 Pro 조기 액세스를 공개하며 웹 개발에 특화된 성능 향상을 예고한다. Claude 3.7 대비 리더보드 순위를 예측하고, AI Studio를 이용해 두 버전을 비교 테스트할 계획을 설명한다.

[00:00] 구글이 Gemini 2.5 Pro의 주요 업그레이드를 출시했으며, 웹 개발에 중점을 둔 코딩 능력이 향상되었다고 발표했습니다.

[00:20] 현재 웹개발 아레나 리더보드에서는 Claude 3.7 sonnet이 최상위 모델이지만, 이번 업데이트로 Gemini가 앞서갈 것으로 예상됩니다.

[00:44] AI 스튜디오에서 얼리 액세스로 제공되는 Gemini 2.5 Pro 프리뷰를 이전 버전과 비교 테스트를 진행합니다.

판타지 스포츠 리그 관리자 대시보드를 단일 HTML 파일로 생성하는 동일 프롬프트를 실행해 비교한다. 체인 오브 사상과 코드 스니펫을 관찰했으며, 업데이트 버전이 멀티탭 구성과 상세 레이아웃을 자동 추가했지만 속도는 약간 느렸다.

[01:31] 첫 번째 테스트로 판타지 스포츠 리그 매니저 대시보드를 단일 파일로 구현하여 두 버전을 비교합니다.

[01:49] 두 모델 모두 사고 체인을 통해 코드 구현 과정을 보여주며, 실행 시간은 새 버전이 60초, 이전 버전이 50초가 소요되었습니다.

[02:24] HTML 에디터를 사용해 결과를 비교한 결과, 새 버전이 더 많은 기능과 개선된 레이아웃을 제공하는 것을 확인했습니다.

[03:27] 이모지를 제거하고 2.5 Pro와 업데이트된 버전을 비교 테스트했습니다. 2.5 Pro가 53초로 더 빨랐고, 업데이트된 버전은 60초가 걸렸습니다.

[03:50] 더 어려운 프롬프트로 테스트할 예정이지만, 우선 시각적 차이를 확인하고자 했습니다. 이는 첫 번째 테스트 결과이며 초기 인상입니다.

[04:10] 속도 테스트에서 기존 2.5 Pro는 50초, 업데이트 버전은 64초가 소요되었습니다. 예상보다 느린 것은 리소스 할당 문제일 수 있습니다.

[04:39] 생성된 결과물은 디자인이 매우 유사했으며, 요소들의 위치와 테마만 약간 변경되었습니다.

[04:54] 새 버전은 더 상세하고 개선된 디자인을 보여주며, 여러 탭과 경기 정보 등 더 풍부한 기능을 제공합니다.

첫 25개의 전설 포켓몬 유형·이미지·코드 스니펫을 포함한 백과사전을 HTML 단일 파일로 생성해 본 결과, 두 버전의 토큰 수와 속도는 유사하며 구체적 지시가 결과 일관성에 큰 영향을 미침을 확인했다.

[05:25] 새로운 테스트로 포켓몬 백과사전 웹 앱을 만들어보았습니다. 두 버전 모두 비슷한 생성 시간(62초 vs 68초)이 걸렸습니다.

[06:04] 두 버전 모두 깔끔한 결과물을 보여주었고, 카드 호버 애니메이션 등 비슷한 기능을 구현했습니다. 매우 구체적인 프롬프트로 인해 결과물이 유사했습니다.

[06:41] Gemini 2.5 Pro의 두 버전을 비교하여 모던 랜딩 페이지 생성 테스트를 진행했습니다. 두 버전 모두 기능과 디자인이 유사했지만, 현재 버전이 더 빠른 처리 속도를 보여주었습니다.

HTML·CSS·JS를 활용한 모던 SaaS 기업 랜딩 페이지를 명확한 지시 없이 요청했다. 두 모델 모두 기능적·디자인 수준이 비슷했으나, 업데이트 버전은 이모지 처리 오류가 관찰됐고 전체적인 완성도는 거의 동일했다.

[07:25] 더 복잡한 과제로 TV 채널 선택기를 구현하기로 했습니다. 0-9까지의 숫자 키로 채널을 변경하고, 각 채널마다 고유한 애니메이션과 창의적인 이름을 가진 p5.js 기반의 프로젝트를 요청했습니다.

번호 키(0~9) 입력으로 TV 채널을 전환하는 P5.js 스케치를 요청해 테스트했다. 창의적인 채널명과 애니메이션을 생성했으며, 두 버전 모두 체인 오브 사상이 유사하지만 업데이트 모델이 시각 디테일에서 소폭 우위에 있었다.

[08:14] 두 버전 모두 비슷한 사고 체인을 보여주었으며, 각각 9,865개의 토큰을 사용했습니다. 현재 버전이 처리 속도면에서 우위를 보였습니다.

[09:20] 업데이트된 버전에서 코드 실행 시 예상치 못한 오류가 발생했습니다. 이에 대한 분석과 두 모델의 오류 처리 방식을 비교하기 시작했습니다.

[10:10] 에러 메시지의 15번 라인을 확인하고 코드를 분석하는 과정에서, 제공된 코드가 다른 파일의 것임을 발견했습니다.

[10:29] 문제 해결을 위해 다양한 가능성을 검토하고, p5.js 소스 라인과 내부 캔버스 호출 관계를 조사했습니다.

[11:06] 새로운 버전의 애니메이션을 테스트하며, 이전 버전과 비교했을 때 시각적 개선이 있었지만 큰 차이는 없었습니다.

[11:37] 0325 버전과 새 버전을 비교 분석한 결과, 동일한 기본 모델을 사용하되 추가 후처리가 적용된 것으로 판단됩니다.

현실적 물리 충돌 감지가 적용된 글자 낙하 애니메이션을 구현 요청했다. 업데이트 버전이 기본 도형 대신 글자를 정상적으로 렌더링하고 충돌 처리까지 안정적으로 수행하며 전반적 정확도가 향상됐다.

[12:19] 물리 법칙을 적용한 떨어지는 문자 애니메이션 테스트를 진행하며, 두 버전의 실행 시간과 성능을 비교했습니다.

[13:10] 최종 결과물을 확인하고 문자 주위의 박스 렌더링 문제를 발견했으나, 전반적인 기능은 정상적으로 작동했습니다.

[13:30] 새로운 Gemini 2.5 Pro 버전에서 텍스트 렌더링 테스트를 진행했습니다. 새 버전은 글자를 정확하게 표시하고 충돌 감지도 제대로 작동했습니다.

[13:54] 기본 도형 객체가 보이는 문제를 발견했으나, 커스텀 텍스트 렌더링을 통해 해결했습니다. 글자 주변에 사각형 박스는 남아있지만 전반적인 기능은 정상 작동했습니다.

[14:45] 회전하는 칠각형 안에 20개의 튀는 공을 구현하는 복잡한 과제를 테스트했습니다. 이는 이전 버전의 Gemini가 어려워했던 과제입니다.

스핀하는 칠각형 내부에서 중앙에서 시작해 벽과 서로 충돌하는 20개 공을 표시하는 복잡한 물리 시나리오를 시도했다. 기존 버전은 초기 위치 오류를 보였으나, 업데이트 버전이 요구사항을 완벽히 만족하는 애니메이션을 구현했다.

[15:32] 두 버전의 실행 시간을 비교했을 때, 원래 버전은 66초, 업데이트된 버전은 73초가 소요되었습니다.

[15:54] 새 버전에서는 공들이 중앙에서 시작하고 충돌 감지도 정상적으로 작동하며, 더 현실적인 애니메이션을 보여주는 등 큰 개선이 이루어졌습니다.

[16:41] 이전 생성 결과와 비교했을 때 개선된 점이 있지만, 여전히 기대에 미치지 못하고 새 버전이 루프에 갇혀 의미 없는 코드를 생성하는 문제가 발생했습니다.

[17:07] 코드 생성 중 갑자기 MIT 라이선스를 생성하기 시작하는 등의 문제가 있었지만, 전반적으로 시각적 웹 앱 구축 능력이 향상되었습니다.

전반적으로 시각적 웹앱 생성능력이 대폭 향상되었으며, 긴 문맥 처리에서 문맥 창의 우수성이 돋보였다. 리더보드는 실제 복잡한 현업 과제를 충분히 반영하지 못하므로, 직접 코드베이스 테스트를 권장한다.

[17:35] 유튜브의 테스트 영상들이 실제 사용 사례를 완벽히 대표하지 못하며, 실제로는 더 큰 코드베이스를 다뤄야 함을 강조했습니다.

[18:01] 수십만 줄의 코드로 구성된 실제 프로젝트에서 Gemini 2.5 Pro만이 전체 컨텍스트를 유지할 수 있었고, 다른 모델들은 큰 코드베이스 처리에 어려움을 겪었습니다.

[00:00] 구글이 방금 Gemini 2.5 Pro의 주요 업그레이드를 출시했는데,

[00:02] 이미 뛰어난 코딩 능력을

[00:05] 더욱 향상시켰으며

[00:07] 특히 웹 개발에 중점을 두었습니다.

[00:10] 이제 훨씬 더 보기 좋은 웹 앱을

[00:13] 만들 수 있게 되었죠.

[00:15] 이 영상을 녹화하는 시점에서

[00:18] 웹개발 아레나 리더보드에서는

[00:20] Claude 3.7 sonnet이 최상위 모델입니다.

[00:24] 하지만 이번 업데이트로

[00:27] Gemini가 큰 차이로

[00:29] 선두를 차지할 것 같습니다.

[00:32] 아직 리더보드 점수를 확인하지 않아서

[00:35] 추측일 뿐이지만,

[00:38] 다른 Gemini 모델들과 비교해서

[00:40] 어떻게 작동하는지 테스트해볼 수 있습니다.

[00:44] 얼리 액세스에서 Gemini 2.5 Pro 프리뷰로

[00:48] 모델을 확인할 수 있습니다.

[00:51] AI 스튜디오의 비교 기능을 사용해서

[00:54] 이전 세대인 2.5 Pro 프리뷰

[00:57] 0325와 비교해보겠습니다.

[01:01] AI 스튜디오 자체가 Gemini 모델을

[01:04] 실험해보기에 매우 좋은 제품입니다.

[01:06] 최근에 다양한 기능을 설명하는

[01:10] 자세한 영상을 만들었는데,

[01:12] 꼭 확인해보시기를 추천드립니다.

[01:15] 링크는 영상 설명란에

[01:16] 있을 예정입니다.

[01:18] 자, 시작해보겠습니다.

[01:20] 매우 간단한 프롬프트로

[01:22] 테스트해보겠습니다. 왼쪽에는

[01:24] Gemini 2.5 Pro가 있고, 오른쪽에는

[01:27] 새로 업데이트된 2.5 Pro가 있습니다.

[01:31] 두 모델에게 판타지 스포츠 리그

[01:33] 매니저 대시보드를 만들어달라고

[01:36] 단일 파일로 구현해달라고 했습니다.

[01:39] 두 모델의 생성 결과와

[01:41] 최종 출력을 비교해보겠습니다.

[01:44] 지금 두 모델 모두

[01:46] 사고 체인의 흔적을 만들고 있습니다.

[01:49] Gemini 모델에서 정말 마음에 드는 점은

[01:52] 사고 체인 안에서

[01:54] 코드를 어떻게 구현할지

[01:56] 구체적으로 생각하고 있다는 것이고

[01:58] 때로는 실제로

[01:59] 코드 스니펫도 볼 수 있습니다.

[02:01] 두 모델 모두 기본 설정을 사용했고,

[02:04] 새로운 업데이트 버전은 약 60초가 걸렸고

[02:06] 이전 세대는 약 50초가 걸렸습니다.

[02:09] 두 경우 모두 사고 체인이

[02:12] 매우 유사해 보입니다.

[02:15] 먼저 이전 Gemini 2.5 Pro를

[02:18] 시도해보겠습니다.

[02:20] HTML 에디터를 사용할 건데,

[02:24] 여기 코드가 있고,

[02:27] 오른쪽에서 미리보기를 확인할 수 있습니다.

[02:29] 여기 대시보드 미리보기가 있네요.

[02:31] 여러 팀들의 순위가 있고,

[02:34] 한 팀의 로스터와

[02:37] 경기 일정이 있습니다.

[02:40] 일정이 어떻게 되는지, 최근 활동은 무엇인지

[02:44] 볼 수 있죠.

[02:45] 꽤 괜찮아 보입니다.

[02:47] 나쁘지 않네요. 이제

[02:50] 업데이트된 Gemini 2.5 Pro를 살펴보겠습니다.

[02:54] 매우

[02:56] 비슷하네요. 이름도 같습니다.

[02:59] 제가 제공한 이모지를 보고

[03:02] 참고한 것 같은데요.

[03:06] 더 많은 세부 사항이 보입니다.

[03:08] 여러 탭이 추가되었는데요.

[03:12] 여러 경기와 일정,

[03:14] 자유 계약 선수도 있네요.

[03:16] 실제로 작동하지는 않겠지만

[03:18] 전반적인 레이아웃이 확실히 개선되었습니다.

[03:22] 흥미로운 점은 테마도 매우 비슷한데

[03:25] 거기서 영감을 받은 것 같네요.

[03:27] 우리가 제공한 이모지를 제거하고

[03:29] 다시 실행해서 어떻게 되는지 확인해보겠습니다

[03:31] 이번에도 2.5 Pro가 훨씬 더 빨랐는데

[03:34] 53초가 걸렸고 업데이트된 버전은

[03:37] 약 60초가 걸렸습니다

[03:40] 자, 이제 이모지 없이 같은 프롬프트를 시도해보겠습니다

[03:44] 그리고 출력 결과가 어떻게

[03:46] 다른지 확인해보고 싶습니다

[03:48] 더 어려운 프롬프트로도

[03:50] 테스트할 예정이지만, 우선

[03:52] 시작 단계에서 시각적 차이가 어떤지

[03:55] 보고 싶었습니다

[03:57] 그리고 이것들은 첫 번째 테스트, 첫 실행이며

[04:00] 단지 저의 첫인상을 말씀드리는 것이라는 점을

[04:03] 기억해주세요

[04:06] 속도 면에서 다시 2.5 Pro

[04:10] 기존 버전은 약 50초가 걸렸고

[04:12] 업데이트된 버전은 약 64초가 걸렸습니다

[04:14] 업데이트된 버전이 더 짧은 시간이

[04:18] 걸릴 것이라고 생각했는데

[04:19] 아직 많은 사람들이

[04:22] 이걸 사용하고 있지 않을 것 같아서

[04:23] 아마도 충분한 리소스를

[04:26] 할당하지 않은 것 같습니다

[04:29] 자, 이것이 업데이트된 프롬프트로

[04:31] 현재 생성된 결과입니다

[04:34] 보시다시피 매우 비슷한

[04:38] 디자인이 나왔습니다

[04:39] 요소들의 위치만 약간 변경되었고

[04:42] 리그 순위와 테마도 변경되었습니다

[04:44] 이모지의 영향을 받은 것 같네요

[04:47] 자, 2.5 Pro 업데이트 버전을 복사해보겠습니다

[04:50] 디자인이나 테마는 다르지만

[04:54] 전반적으로 훨씬 더 나아보이고

[04:56] 더 자세합니다

[04:59] 여러 탭을 추가했고

[05:01] 탭 내에서도 볼 수 있듯이

[05:04] 다양한 경기, 최종 점수

[05:07] 서로 대결하는 팀들을 추가했습니다

[05:09] 꽤 깔끔하네요

[05:12] 이런 종류의 애플리케이션이라면

[05:14] 이전 버전보다는

[05:17] 확실히 이 새로운 버전을

[05:19] 선택하겠습니다

[05:21] 자, 또 다른 간단한 웹 앱을

[05:23] 만들어보겠습니다

[05:25] 첫 25개의 전설의

[05:27] 포켓몬에 대한 간단한 백과사전을 만들어보겠습니다

[05:29] 타입, 로드 스니펫,

[05:32] 이미지를 포함시키고

[05:34] 모든 것을 단일 HTML 파일 안에

[05:35] 넣을 예정입니다. 2.5 Pro와 업데이트된 2.5 Pro를 실행해보겠습니다

[05:39] 이번에는 출력 생성에 거의 비슷한 시간이 걸렸네요

[05:42] 62초 대 68초입니다

[05:45] 토큰 수를 확인해볼까요

[05:48] 새 버전은 약 700개 또는

[05:51] 7,000개의 토큰을 생성했고 매우 비슷합니다

[05:53] 흥미롭네요

[05:56] 토큰 수가 정확히 같은 것 같습니다

[05:59] 이건 아마도 버그일 것 같은데

[06:02] 완전히 같은 코드일 리가 없거든요

[06:04] 자, 기존의 2.5 Pro 버전부터

[06:06] 시작해보겠습니다

[06:09] 실행해보니 꽤 깔끔하네요

[06:12] 이런 작은 애니메이션도 추가했고

[06:15] 마우스를 올리면 카드가 움직이는 것을 볼 수 있습니다

[06:19] 꽤 멋지네요

[06:22] 이제 업데이트된 버전은 어떤지 볼까요?

[06:24] 코드를 교체해보겠습니다

[06:26] 네, 매우 비슷해 보입니다

[06:28] 큰 차이점은 보이지 않네요

[06:31] 하지만 우리가 매우 구체적인 세부사항을 제공했기 때문에

[06:34] 큰 차이가 없는 것 같습니다

[06:36] 매우 구체적인 지시사항을 제공했기 때문에

[06:39] 이런 결과가 나온 것 같네요

[06:41] 그래서 제가 생각하기에는 그것이

[06:43] 유사한 출력이 나온 이유인 것 같습니다. 이제

[06:46] 다음으로 할 것은

[06:47] HTML, CSS, JS를 사용하여 모던한 랜딩 페이지를 만들어보겠습니다.

[06:50] 모든 코드를 하나의 파일에 넣을 건데요,

[06:52] 구체적인 지침을 주지 않았을 때

[06:55] 어떤 결과가 나오는지

[06:57] 확인해보고 싶습니다.

[06:59] 자, 이것이 현재 버전의

[07:01] Gemini 2.5 Pro입니다. 꽤 잘

[07:04] 작동하고 있고, 모던한 SaaS 회사를 위한

[07:08] 괜찮은 랜딩 페이지가 만들어졌네요.

[07:12] 이건 업데이트된 버전의 결과입니다.

[07:14] 기능적으로도 매우 비슷하고

[07:17] 디자인도 비슷한데, 여기에

[07:20] 이모지나 이미지를 추가하려 했지만

[07:22] 누락된 것 같네요. 이제

[07:25] 좀 더 복잡한 것을 시도해보겠습니다.

[07:27] 이번 프롬프트에서는

[07:30] 코딩 능력뿐만 아니라

[07:32] 모델의 창의성도 평가됩니다.

[07:33] 0부터 9까지의 숫자 키로

[07:36] 채널을 변경할 수 있는 TV를

[07:38] 만들어달라고 요청할 건데요. 모든 채널에 대해

[07:41] 고전적인 TV 채널 장르에서 영감을 받은

[07:43] 아이디어를 제시하고, 각 채널의

[07:46] 상세한 애니메이션을 보여주고

[07:48] 화면에 채널명을 표시해야 합니다.

[07:50] 채널명은 매우 창의적이어야 하고

[07:54] p5.js 스케치로 만들어야 합니다.

[07:57] HTML 없이 p5.js 스케치만 사용하고

[08:01] 모든 채널 콘텐츠가 TV 화면 안에

[08:04] 마스킹되도록 하고 전부 하나의

[08:06] 파일에 넣어야 합니다.

[08:08] 다시 한 번 두 모델에

[08:10] 이 프롬프트를 실행시켜

[08:12] 결과를 비교해보겠습니다. 체인 오브 소트는

[08:14] 두 경우 모두 매우 비슷해 보이네요.

[08:16] 체인 오브 소트 간에 큰 차이점은

[08:20] 보이지 않습니다. 이것은

[08:22] 아마도 체인 오브 소트의

[08:23] 요약된 버전이라

[08:24] 큰 차이가 보이지 않는 것

[08:26] 같습니다. 다시 말씀드리지만, 현재

[08:29] 2.5 Pro 버전이 업데이트된 버전보다

[08:32] 훨씬 더 빠릅니다. 그리고

[08:34] 네, 두 경우 모두

[08:37] 9,865개의 토큰이 사용되었네요.

[08:42] 이것이 현재 버전입니다. 우리가 요구한

[08:45] 조건들을 잘 충족시키는 것 같네요.

[08:48] 이게 채널 번호

[08:51] 0번이고, 그 다음 1, 2

[08:55] 3, 4, 5, 6, 7, 8, 그리고 9번입니다.

[09:03] 코드는 약 570줄 정도입니다. 이 경우에

[09:08] 코드가 570줄 정도네요. 이제

[09:13] 이것을 복사해서 어떤 종류의

[09:17] 출력이 나오는지 확인해보겠습니다. 자, 이게

[09:20] 업데이트된 버전입니다. 실행해보죠.

[09:22] 문제가 발생했네요. 이건

[09:25] 예상치 못한 결과입니다. 제가

[09:27] 이제 할 것은 이것을 복사해서

[09:29] 보내보겠습니다. 여기서 문제는

[09:33] 현재 버전과 새로운 버전의 2.5 Pro

[09:36] 모두에게 보낼 것이라는 점입니다.

[09:38] 이 오류에 대해 두 모델이 어떻게

[09:42] 반응하는지 보겠습니다. 업데이트된 2.5 Pro의

[09:44] 새 코드를 테스트하기 전에

[09:48] 이 모델들이 내부적으로 어떻게 생각하는지 보여드리고 싶습니다.

[09:52] 정말 흥미롭죠. 이것이

[09:54] 2.5 Pro 0325 버전입니다.

[09:56] 이 모델이 생성한 코드에는

[09:59] 오류가 없었죠. 오류를 분석해보면,

[10:01] 오류 메시지는 다음과 같습니다.

[10:03] 문제가 되는 라인을 찾아보면,

[10:05] 오류 메시지에서 말하길

[10:07] 해당 함수를 보면

[10:10] 음, 그 특정 라인을 살펴보니까

[10:12] 그 함수를 확인했는데, 에러 메시지가

[10:15] 15번 라인을 언급하고 있어서 다시 확인해봐야 할 것 같네요.

[10:19] 자세히 보니까

[10:21] 에러 메시지는 특정 라인을 지목했지만

[10:23] 제가 제공한 코드는 다른 파일의 것이었어요.

[10:26] 그래서 실제로는 같은 코드가 아니었죠.

[10:29] 따라서 본격적인 조사 모드로 전환해서

[10:32] 다양한 가능성을 검토하기 시작했습니다.

[10:34] 특정 코드를 찾을 수 없었기 때문에

[10:37] 문제를 파악하기 어려웠고

[10:40] 해당 코드를 찾을 수 없어서

[10:42] 보고된 라인 번호가

[10:44] p5.js 소스 라인이 아닐 수 있다고 판단했어요.

[10:47] 대신 내부 캔버스가 react 함수를

[10:50] 호출하는 것과 관련이 있을 것 같습니다.

[10:52] 문제는 에러가 발생하지 않았지만

[10:54] 버그를 찾을 수 없었음에도 불구하고

[10:57] 캔버스 렌더링 방식을 일부 수정했다는 점이에요.

[11:00] 자, 이제 업데이트된 코드를 복사해서

[11:03] 잘 작동하기를 바라봅시다.

[11:06] 보시다시피 출력이 나왔네요.

[11:08] 여기 채널 0이 있고, 채널 1도 있습니다.

[11:12] 실제로 애니메이션을 보면

[11:16] 이전 버전보다 나아진 것 같은데

[11:19] 큰 차이는 아닌 것 같습니다.

[11:22] 이 버전이 확실히 더 좋아 보이고

[11:24] 진짜 애니메이션처럼 보이지만

[11:26] 두 버전이 꽤 비슷하다고 봐야겠어요.

[11:28] 극적인 차이는 없는 것 같네요.

[11:32] 0325 버전에서 생성된

[11:34] 코드는 어떻게 되었는지 확인해보고 싶네요.

[11:37] 코드를 단순히 조정했을 뿐

[11:40] 새로운 기능을 추가하지는 않았어요.

[11:43] 다시 살펴보니

[11:46] 새 버전이 확실히

[11:49] 더 나은 시각적 효과를 만들어냈고

[11:52] 흥미롭게도 채널들과

[11:56] 애니메이션들, 특히 이것은

[11:58] 잭팟 애니메이션인데

[12:01] 매우 비슷해 보입니다.

[12:04] 아이디어가 매우 유사한데

[12:06] 아마도 동일한 기본 모델을

[12:08] 사용하고 있기 때문일 것 같고

[12:10] 같은 미세조정 또는 지시 버전에

[12:14] 추가 후처리 학습이 더해진 것 같네요.

[12:17] 다른 프롬프트도 시도해 봅시다.

[12:19] 이번에는

[12:20] 현실적인 물리 법칙에 따라

[12:23] 떨어지는 문자들을 JavaScript로 애니메이션화하는

[12:26] 복잡한 상황을 어떻게 처리하는지

[12:28] 확인해보겠습니다. 다시 한번

[12:31] 사고 과정의 흔적을 보면

[12:34] 큰 차이점은 보이지 않네요.

[12:36] 두 버전 모두 매우 비슷한

[12:39] 사고 과정을 보여주고 있어요. 최종

[12:42] 구현에서 약간의 차이는 있지만

[12:45] 큰 차이는 아닙니다. 이번에는

[12:48] 기존 버전이 몇 초 더 걸렸네요.

[12:51] 자, 이 코드를 복사해보겠습니다.

[12:54] 같은 프롬프트를 다시 실행했는데

[12:56] 단일 HTML 파일을 원했거든요.

[12:58] 이번에는 2.5 Pro가 82초가 걸렸고

[13:02] 업데이트된 버전은 55초가 걸렸어요.

[13:04] 이제 실제로 복사해보겠습니다.

[13:08] 자, 이걸 붙여넣기 하고

[13:10] 보시면 문자들이 떨어지고 있네요.

[13:13] 다른 모양들도 보이는데

[13:16] 문자 주위에 박스가 그려져서 그래요.

[13:18] 모델에게 문자가 보이지 않는다고

[13:21] 알려주기만 하면 될 것 같아요.

[13:24] 하지만 다른 요구사항들은

[13:25] 잘 충족되는지 확인해봅시다.

[13:27] 잘 작동하는 것 같네요.

[13:30] 이제 그 전에, 새로운 버전을 확인해보겠습니다.

[13:32] 좋습니다. 이것이 새로운 버전입니다.

[13:35] 실행해보니 실제로 글자들이

[13:37] 정확하게 표시되고 있네요.

[13:40] 꽤 멋지고 충돌 감지도

[13:41] 있는 것 같습니다.

[13:44] 화면 영역을 변경했을 때

[13:47] 동작이 어떻게 변하는지 봅시다.

[13:50] 잘 작동하는 것 같네요.

[13:52] 지금 보이는 프롬프트를 실행해보겠습니다.

[13:54] 실제 글자 대신 사각형과 원형 객체가

[13:56] 보이고 있습니다. 이것은

[13:58] 무슨 일이 일어나고 있는지 쉽게 알 수 있어야 합니다.

[14:01] 이제 이것이 올바른 코드를 생성했습니다.

[14:03] 하지만 보시면 '죄송합니다'라고 하네요.

[14:06] 맞습니다. 기본 사각형과 원형 객체가 보인다면,

[14:07] 이는 커스텀 텍스트 렌더링 부분이

[14:09] 의도한 대로 기본 물리 객체 모양을

[14:12] 오버라이드하지 못하고 있다는 뜻입니다.

[14:14] 좋습니다. 코드를 업데이트해보겠습니다.

[14:16] 네, 이제 작동하는 코드가 있는 것 같습니다.

[14:19] 여전히 글자 주변에 사각형 박스가 있지만

[14:21] 이제 적어도 글자가 보이고

[14:25] 예상했던 대로 동작합니다.

[14:27] 이전 버전의 Gemini 2.5 Pro는

[14:30] 매우 유능한 코딩 모델입니다.

[14:33] 하지만 이전 버전의 Gemini 2.5 Pro도

[14:37] 어려움을 겪었던 프롬프트가 하나 있습니다.

[14:41] 바로 이것인데요.

[14:43] 회전하는 칠각형 안에서

[14:45] 20개의 튀는 공을 보여주는 HTML 코드를

[14:48] 작성하는 것이었습니다.

[14:50] 이것은 바이럴 육각형 프롬프트의 변형인데,

[14:53] 이번에는 하나가 아닌 20개의 공이 필요합니다.

[14:56] 모든 공의 반지름이 같아야 하고,

[14:58] 번호가 매겨져 있어야 하며, 모두 중앙에서 시작해야 합니다.

[15:02] 그리고 벽과의 충돌 감지와

[15:04] 공들 간의 충돌 감지가 필요하며

[15:06] 이 외에도 여러 가지 조건들이

[15:09] 충족되어야 합니다.

[15:12] 지금까지 본 바로는

[15:14] Claude 3.7 Sonnet만이

[15:16] 이것을 일관되게 해냅니다.

[15:19] 제가 테스트해본 다른 모델들은

[15:21] 이것을 일관되게 수행하지 못했습니다.

[15:25] 이번에는 어떻게 되는지 봅시다.

[15:29] 원래 버전은 66초가 걸렸고

[15:32] 업데이트된 버전은 73초가 걸렸습니다.

[15:34] 아마도

[15:35] 둘 다 같은 수의 토큰을 보여줄 것 같네요.

[15:37] 코드를 실행해보고

[15:39] 어떻게 되는지 봅시다.

[15:42] 이것이 이전 버전입니다. 실행해보겠습니다.

[15:46] 보시다시피, 제대로 동작하지 않습니다.

[15:49] 공들이 생성되긴 했지만

[15:52] 칠각형 밖에 있네요.

[15:54] 이제 새 버전은 어떨까요? 와, 제대로 된 것 같습니다.

[15:58] 다시 한 번 실행해보겠습니다.

[16:00] 정말 좋네요, 중앙에서 시작하고

[16:02] 서로 충돌도 잘 일어납니다.

[16:05] 칠각형도 회전하고 있고요.

[16:07] 이것은 정말 큰 업그레이드입니다.

[16:10] 실제로 하나가 튕겨나갔네요.

[16:13] 정말 멋지고 이전 버전보다

[16:16] 더 현실적인 애니메이션을 보여줍니다.

[16:20] 이 동작이 일관되게 유지되는지

[16:23] 한 번 더 시도해보고 싶네요.

[16:25] 실제로 그 중 하나가 튕겨나갔어요.

[16:27] 애니메이션이 꽤 흥미롭고

[16:30] 이전 버전에 비해 더 현실적입니다.

[16:31] 이 동작이 일관되게 유지되는지

[16:33] 한 번 더 시도해보고 싶습니다.

[16:37] 자, 이것이 이전 버전입니다.

[16:40] 네, 이전 버전을 보시면

[16:41] 이전 생성 결과를 복사해보겠습니다.

[16:44] 이번에는 더 나아졌지만, 여전히

[16:48] 제가 기대했던 것과는 거리가 있네요.

[16:50] 새 버전이 루프에 갇힌 것 같습니다.

[16:53] 이미 170초 이상 지났고

[16:56] 이제는 의미 없는 코드만

[16:58] 생성하고 있는 것 같습니다.

[17:01] 이 프로세스를 중단하겠습니다.

[17:03] 220초가 넘게 걸렸기 때문입니다.

[17:07] 보여드리고 싶은 게 있는데,

[17:09] 이것을 보시면,

[17:11] 코드 내에서 갑자기

[17:14] 사용 중인 패키지의 MIT 라이선스를

[17:17] 생성하기 시작했습니다. 어쨌든,

[17:20] 이번 새 모델 테스트에 대한

[17:22] 간단한 영상이었습니다. 확실히

[17:25] 시각적 웹 앱 구축 면에서

[17:27] 개선된 것으로 보이며, 이런 문제에서도

[17:30] 이전 버전보다 더 잘 작동합니다.

[17:32] 한 가지 더 강조하고 싶은 점은,

[17:33] 이 영상에서

[17:35] 제 영상이나 유튜브의 다른

[17:37] 테스트 영상들에서 보시는 대부분의 테스트가

[17:40] 실제 사용 사례를 정확히

[17:43] 대표하지는 않는다는 점입니다.

[17:46] 실제로는 훨씬 더 큰

[17:49] 코드베이스를 다뤄야 하며,

[17:53] Gemini 모델은 긴 컨텍스트 윈도우

[17:56] 덕분에 빛을 발합니다.

[17:58] 실제 예시를 보여드리자면,

[18:01] 현재 저는 랙 파이프라인을

[18:03] 개발 중인데, 이는 앞으로

[18:06] 제 영상에서 소개할 예정입니다.

[18:08] 이 코드베이스는 수십만 줄의

[18:11] 코드로 이루어져 있고,

[18:14] 오직 Gemini 2.5 Pro 실험 모델만이

[18:18] 전체 컨텍스트를 유지할 수 있습니다.

[18:21] GPT-3.5나 Claude 3 Sonnet 같은 다른 모델들도

[18:25] 굉장히 뛰어난 모델이지만,

[18:28] 컨텍스트나 코드베이스가

[18:31] 너무 길어지면 따라가지 못합니다.

[18:33] 이런 대규모 코드베이스를

[18:36] 처리하기 힘들어합니다. 실제 개발 과제에서

[18:40] 테스트해보고 어떤 모델이

[18:44] 실제로 견딜 수 있는지 확인해보세요.

[18:46] 이런 리더보드들은

[18:47] 실제 상황을 잘 반영하지 못합니다.

[18:51] 최근에 제가 만든 영상에서

[18:53] 리더보드의 한계점들을 다뤘는데,

[18:55] 특히 챗봇 아레나 리더보드와

[18:58] 관련해 Anthropic의

[19:00] 논문을 다루었습니다.

[19:02] 이 모델을 직접 테스트해보시고

[19:06] 댓글로 알려주세요.

[19:07] 이전 세대나 이전 버전의 Gemini 2.5 Pro와

[19:10] 비교해서 코딩 능력에

[19:13] 큰 차이가 있는지

[19:15] 이 영상은 모델을 처음 테스트해본

[19:19] 초기 인상을 담은 것입니다.

[19:21] 여러분의 생각도 들려주세요.

[19:23] 영상이 도움되셨길 바랍니다.

[19:25] 시청해주셔서 감사하고

[19:27] 다음 영상에서 만나뵙겠습니다.