Claude 3.7는 완전 미쳤다

채널 아이콘
AI Search 구독자 353,000명

요약

이 영상은 Claude 3.7의 놀라운 코드 생성 및 시각화 능력을 집중적으로 보여준다. 다양한 데모를 통해 이미지 테이블을 인터랙티브 인포그래픽으로 전환하고, 동적 네트워크 그래프, 3D 미래 도시, 애니메이션 기반의 시뮬레이션까지 폭넓은 응용 사례를 시연한다. 또한, p5.js와 three.js 등 최신 웹 기술을 활용한 게임과 과학 교육용 시각화 예제, 의학 및 물리 문제 해결 사례를 통해 모델의 고급 추론 및 에이전트 기능을 평가한다. 마지막으로, 성능 벤치마크와 한계점에 대한 논의로 Claude 3.7이 현존 최고의 AI 모델 중 하나임을 강조한다.

주요 키워드

Claude 3.7 클라우드 AI 인터랙티브 인포그래픽 3D 시뮬레이션 Hybrid Reasoning Extended Thinking p5.js three.js 에이전트 활용 몬테카를로

하이라이트

  • 🔑 Claude 3.7은 이미지 데이터를 인포그래픽과 네트워크 그래프로 쉽게 전환하는 능력을 시연합니다.
  • ⚡️ 확장 사고(Extended Thinking) 모드를 활용해 3D 미래 도시와 복잡한 인터랙티브 앱을 생성하는 모습을 보여줍니다.
  • 🌟 p5.js를 이용한 안트 콜로니(개미 군집) 시뮬레이션, 동적 주기율표, 몬테카를로 방법을 통한 파이 근사 등 교육용 시각화가 인상적입니다.
  • 🚀 게임 개발 데모에서는 자율 경쟁 스네이크 게임과 플랫폼러 게임 등 인터랙티브 게임 제작 능력을 탐구합니다.
  • 📌 의료 진단 및 대학 수준의 물리 문제 해결 예시를 통해 모델의 심도 있는 추론 능력을 강조합니다.
  • 💡 벤치마크 비교와 성능 리뷰에서는 Claude 3.7이 타 경쟁 모델 대비 코딩 및 에이전트 활용 면에서 우수함을 보여줍니다.

용어 설명

Hybrid Reasoning (혼합 추론)

심볼릭 추론과 딥러닝 기반 추론을 결합하여 복잡한 문제를 효과적으로 해결하는 능력입니다.

Extended Thinking Mode (확장 사고 모드)

AI가 단계별로 깊이 있는 분석 및 추론을 수행하여 복잡한 문제 해결력을 강화하는 기능입니다.

Agentic Tool Use (에이전트 도구 활용)

AI가 다양한 소프트웨어 인터페이스와 협업하며 자율적으로 작업을 수행하는 능력을 의미합니다.

Monte Carlo Method (몬테카를로 방법)

무작위 샘플링을 통해 수치적 근사값, 예를 들어 원주율 등을 계산하는 통계적 방법입니다.

p5.js

웹 기반 크리에이티브 코딩을 위한 자바스크립트 라이브러리로, 애니메이션 및 인터랙티브 시각화를 쉽게 구현할 수 있습니다.

three.js

브라우저에서 3D 그래픽과 애니메이션을 구현할 수 있는 자바스크립트 라이브러리입니다.

[00:00:00] 인터랙티브 인포그래픽 & 데이터 시각화

이미지 테이블을 활용하여 인포그래픽을 생성합니다. 네트워크 그래프를 통해 데이터 간 연결성을 시각화합니다.

인터랙티브 인포그래픽을 만들어보며 Claude 3.7의 기능을 시연하기 시작합니다.
AI 기반 개미 군집 시뮬레이션을 통해 페로몬 경로와 최적화 과정을 보여주는 인터랙티브 데모를 생성합니다.
인터랙티브 주기율표를 만들어 원소의 특성과 원자 구조를 애니메이션으로 시각화합니다.
미래형 도시의 3D 시뮬레이션을 확장 사고 모드를 사용하여 생성해봅니다.
Anthropic이 새로운 모델 Claude 3.7을 출시했음을 소개하고, 버전 명명에 대해 설명합니다.
영상의 목적과 내용을 소개하며, Claude 3.7의 기능과 성능 벤치마크를 다룰 것임을 예고합니다.
Claude 3.7을 사용할 수 있는 다양한 플랫폼들을 소개하고, 각 플랫폼의 특징을 설명합니다.
Claude 3.7의 하이브리드 추론 기능과 확장 사고 기능을 소개하고, 다른 AI 모델들의 유사 기능과 비교합니다.
Claude 3.7은 일반적인 AI 기능(요약, 번역, 채팅, 글쓰기)도 수행할 수 있지만, 다른 최상위 AI 모델들과 큰 차이는 없습니다.
Claude 3.7의 진정한 강점은 코딩, 수학, 데이터, 과학에 대한 뛰어난 이해도에 있습니다.
데이터 시각화 예시: 이미지, CSV 파일, 구글 드라이브 문서 등을 활용해 인터랙티브한 그래프와 차트, 인포그래픽을 쉽게 만들 수 있습니다.
[00:05:00] 플랫폼 및 코드 인터페이스 소개

Claude 3.7을 다양한 플랫폼에서 사용하는 방법을 설명합니다. 계정 생성과 사용 가능한 옵션들이 소개됩니다.

동물들 간의 상관관계 데이터를 활용해 인터랙티브 네트워크 그래프를 생성하는 예시를 시작합니다.
Claude의 아티팩트 기능은 코드 출력과 실시간 미리보기를 제공하지만, 다른 AI 모델들보다는 처리 속도가 다소 느립니다.
HTML 파일 생성 과정을 설명합니다. 텍스트 문서를 만들고 HTML 확장자로 변경한 후, 메모장에서 열어 코드를 붙여넣습니다.
웹 브라우저에서 전체화면으로 네트워크 그래프를 열어 확인합니다.
그래프의 다양한 설정(반발력, 링크 거리, 연관성 임계값)을 조정하며 동작을 테스트합니다.
각 동물 간의 연관성을 확인하고 데이터의 정확성을 검증합니다.
완성된 인터랙티브 네트워크 그래프의 기능을 정리하고, 새로운 프로젝트로 전환합니다.
비디오를 흑백 점으로 변환하는 새로운 HTML 페이지 제작을 위한 프롬프트를 작성합니다.
비디오를 도트 형태로 변환하는 새로운 웹 애플리케이션을 확인합니다. HTML 파일에 코드를 복사하여 붙여넣고 저장한 후 실행해봅니다.
비디오 업로드 기능을 테스트하고, 영상이 흑백 도트로 성공적으로 변환되는 것을 확인합니다. 도트 크기, 간격, 밝기 임계값 등 다양한 설정을 조절할 수 있습니다.
Three.js를 사용하여 더 복잡한 프로젝트를 시도합니다. 미래도시의 3D 시뮬레이션을 만들기 위해 확장 사고 모드를 활용하여 상세한 프롬프트를 작성합니다.
[00:11:21] 3D 미래 도시 시뮬레이션

three.js를 이용해 3D 환경에서 미래 도시를 구현합니다. 카메라 조절, 안개 효과, 일출/일몰 등의 세부 효과가 포함됩니다.

AI의 생각 과정을 살펴보며, 요구사항을 분석하고 완전한 HTML 결과물을 만들기 위한 계획을 세우는 과정을 확인합니다.
3D 도시를 시각화하는 코드를 웹 브라우저에서 실행하여 인터랙티브한 도시 환경을 구현했습니다.
도시의 안개 효과를 조정하여 대기 오염도를 시뮬레이션하고, 시간대 변경으로 일출과 일몰 효과를 구현했습니다.
HubSpot에서 제공하는 Claude AI 활용 가이드를 소개하며, 개인 비서 설정부터 데이터 분석까지 다양한 기능을 설명합니다.
3D 도시의 시간대 변경 기능을 통해 건물 그림자와 하늘 색상이 자연스럽게 변화하는 것을 시연했습니다.
3D 도시의 네온 효과와 카메라 설정을 조정하며 도시의 분위기를 변경합니다.
미래도시의 공중을 나는 차량들과 교통 밀도를 조절하며 도시의 활기를 조정합니다.
하나의 프롬프트로 만들어진 놀라운 3D 도시 시뮬레이션을 공유하고 설명합니다.
Hugging Face 웹사이트를 클론하는 새로운 실험을 시작합니다.
웹사이트 클론 결과를 확인하고 React, HTML 등 다양한 프레임워크 지원을 설명합니다.
p5.js를 활용한 개미 군집 시뮬레이션 프로젝트를 시작하고 설명합니다.
[00:18:35] p5.js를 활용한 애니메이션 시뮬레이션

애벌레 군집(개미 군집) 시뮬레이션과 동적 주기율표 예제를 통해 인터랙티브 애니메이션을 시연합니다. 사용자 조정 가능한 파라미터가 돋보입니다.

코드를 붙여넣고 실행하자 개미들이 먹이를 찾아다니는 시뮬레이션이 시작되었습니다. 초록색 블록으로 표시된 먹이를 향해 개미들이 움직입니다.
개미 수를 늘리고 개미들이 먹이를 발견하면 초록색으로 변하며 둥지로 돌아갑니다. 속도 조절도 가능합니다.
페로몬 강도를 조절하여 개미들이 서로에게 주는 영향력을 조절할 수 있습니다. 강도가 높을수록 더 많은 개미가 먹이로 모입니다.
장애물을 추가하여 개미들의 경로를 방해할 수 있습니다. 개미들은 장애물을 피해 새로운 경로를 찾아갑니다.
이 시뮬레이션은 단 한 번의 프롬프트로 완전히 작동하는 개미 군집 시스템을 구현했습니다. 먹이와 장애물 추가 등 다양한 옵션을 제공합니다.
다음으로 화학 예제로 넘어가 p5.js를 사용한 동적 주기율표 시뮬레이션을 시도합니다. 원소의 특성과 전자 배치, 원자 구조 애니메이션을 포함할 예정입니다.
클라우드 환경에서 p5.js 코드를 실행하기 위해 HTML 파일에 코드를 복사하여 붙여넣기 합니다.
주기율표 시각화에서 공간 제약으로 모든 원소를 표시하지는 못했지만, 개별 원소에 대한 상세 정보와 원자 구조 애니메이션을 정확하게 보여줍니다.
원자 구조 애니메이션의 정확성과 교육적 가치가 매우 인상적이며, Claude 3.7의 과학 분야 시각화 능력이 뛰어남을 확인했습니다.
[00:24:08] 수학 및 과학 교육용 시각화

몬테카를로 방법을 이용한 파이 근사 시뮬레이션을 보여줍니다. 시각적인 데이터 분석 및 교육 자료로 활용될 만한 예제가 포함됩니다.

새로운 프로젝트로 파이(π) 근사값을 구하는 몬테카를로 방법의 시각화를 시도하며, 사용자 컨트롤 기능을 추가합니다.
수학적 개념인 파이(π)의 중요성과 실생활 응용에 대해 설명하며, 이를 시각적으로 이해할 수 있는 방법을 소개합니다.
파이 값을 구하기 위한 몬테카를로 시뮬레이션의 원리를 설명합니다. 사각형 안에 원을 그리고 무작위로 점을 찍어 원주율을 추정하는 방법을 보여줍니다.
시뮬레이션의 다양한 설정(점의 개수, 크기)을 조정하며 결과를 관찰하고, 점의 수가 늘어날수록 실제 파이 값에 가까워지는 것을 확인합니다.
밀도 플롯 기능을 테스트하고, 이 몬테카를로 시뮬레이션이 단일 프롬프트로 구현된 것에 대해 긍정적으로 평가합니다.
3.js를 사용한 마인크래프트 환경 구현 시도를 시작합니다. 자동으로 성을 건설하는 기능을 포함한 프로젝트를 계획합니다.
코드 생성 과정에서 발생한 메시지 길이 제한 문제를 해결하고, 클라우드 프리뷰 환경의 호환성 문제를 확인하며 대안을 모색합니다.
HTML 파일을 열어 마인크래프트 스타일의 성 건설 시뮬레이션을 시작했습니다. 초록색 바탕에 성을 자동으로 건설하기 시작했고, Three.js를 사용한 3D 렌더링이 구현되었습니다.
성벽 건설이 진행되면서 각 건축 요소(벽돌, 돌 등)에 라벨이 표시되고, 다양한 각도에서 볼 수 있는 3D 뷰를 제공합니다.
성 건설이 완료되어 창문, 입구, 나무 지붕 등 세부적인 요소들이 모두 구현되었습니다. 단 하나의 프롬프트로 이러한 복잡한 구조물을 자동 생성할 수 있다는 점이 강조되었습니다.
[00:30:00] 게임 개발 데모

자율 경쟁 스네이크 게임과 사이드스크롤러 플랫폼 게임을 제작합니다. 그래픽, 조작 및 게임 오버 시스템이 구현됩니다.

새로운 실험으로 스네이크 게임을 시작했습니다. 기존의 두 마리 경쟁 방식을 넘어 열 마리의 뱀이 자율적으로 경쟁하는 더 복잡한 버전을 구현하기로 했습니다.
p5.js를 사용한 스네이크 게임이 구현되어 열 마리의 뱀이 동시에 경쟁하며, 각 뱀의 생존 상태와 점수가 실시간으로 표시됩니다. 최종적으로 1번 뱀이 19점으로 승리했습니다.
AI가 생성한 스네이크 게임은 10마리의 뱀이 자율적으로 경쟁하며, 기존 모델보다 훨씬 뛰어난 시각적 효과와 점수판, 게임오버 화면을 제공합니다.
Phaser.js를 사용하여 방향키로 조작하는 횡스크롤 플랫폼 게임을 제작했습니다. 클라우드 인터페이스 호환성 문제로 별도 HTML 파일에서 테스트를 진행했습니다.
게임에서 코인을 수집하고 레벨이 진행될수록 적이 추가되는 등 난이도가 증가하는 진보적인 게임플레이 시스템이 구현되었습니다.
의학적 진단 사례를 통해 AI의 추론 능력을 테스트하기 위해, 고혈압과 고지혈증이 있는 55세 남성의 증상 사례를 제시했습니다.
AI의 분석을 더 교육적으로 받기 위해 설명형 스타일을 선택하고, 확장 사고 기능을 활용하여 상세한 추론 과정을 확인하고자 했습니다.
Claude의 의료 진단 과정을 살펴보면, 환자 정보, 증상, 신체 검사 결과를 체계적으로 정리하고 있습니다.
주요 진단으로 관상동맥질환을 제시하고, 심부전, 대동맥 박리, 폐색전증 등을 감별진단으로 고려했습니다.
최종 진단과 함께 구체적인 행동 계획과 추가 검사 항목을 제시하며, 의료 전문가보다 더 자세한 분석을 제공했습니다.
[00:36:00] 고급 추론 및 문제 해결

의료 진단 시나리오와 대학 수준의 물리 문제를 해결하는 과정을 설명합니다. 단계별 사고 과정을 통해 AI의 심도 있는 추론이 드러납니다.

DeepSeek과의 비교에서는, DeepSeek이 비심장성 문제까지 포함한 더 포괄적인 분석을 제공했으며, 불안정성 협심증이나 급성 관상동맥 증후군을 주요 진단으로 제시했습니다.
Claude 3.7의 물리 문제 해결 능력을 테스트하기 위해 대학 수준의 복잡한 등온 압축 문제를 시도했습니다.
문제 해결을 위해 확장 모드를 선택하고 실행한 결과, 정확한 답(8K)과 함께 상세한 계산 과정을 보여주었습니다.
Claude 3.7의 한계점 설명: 이미지 생성 불가, 음성 기능 부재, 강력한 콘텐츠 검열 정책 등이 주요 제한사항입니다.
웹 검색 불가능이라는 중요한 한계로 인해 최신 정보(예: DeepSeek R1)에 대한 신뢰할만한 정보를 제공하지 못합니다.
최신 AI 모델의 정보 제한성에 대해 설명하며, DeepSeek SR1에 대한 정보는 공식 웹사이트를 참고하라고 안내합니다.
단순한 작업(소셜 미디어, 일상 대화 등)에서는 최상위 AI 모델들 간의 성능 차이가 크지 않다고 설명합니다.
Claude 3.7의 핵심 기능으로 하이브리드 추론 모델을 소개하며, 특히 수학과 코딩 분야에서의 뛰어난 성능을 강조합니다.
Claude 3.7의 두 가지 사고 모드(일반 모드와 확장 사고 모드)에 대해 설명하고, 확장 모드는 유료 플랜에서만 사용 가능함을 안내합니다.
소프트웨어 엔지니어링 벤치마크에서 Claude 3.7이 62.3%로 다른 모델들(50% 미만)을 크게 앞서고 있음을 보여줍니다.
에이전트 도구 사용 능력 테스트와 포켓몬 게임 성능 비교를 통해 Claude 3.7의 향상된 기능을 설명합니다.
[00:44:00] 성능 벤치마크 및 최종 평가

다양한 모델과의 벤치마크 비교를 통해 Claude 3.7의 우수성을 평가합니다. 모델의 한계와 미래 업그레이드 가능성에 대해 논의합니다.

Claude 3.7의 에이전트 능력이 뛰어나며, 게임 화면을 분석하고 행동을 결정할 수 있다는 것을 보여줍니다.
Claude 3.7의 성능을 보여주는 표를 통해 확장 사고 기능의 중요성과 코딩에서의 우수성이 드러났습니다.
다국어 Q&A, 시각적 추론, 수학 문제 해결 등 다양한 분야에서의 성능을 비교 분석했습니다.
LiveBench, LM Arena, Artificial Analysis 등 다양한 독립 평가 기관의 벤치마크 결과를 검토했습니다.
Humanity's Last Exam 벤치마크에서 Claude 3.7 Sonnet은 중간 정도의 성능을 보였습니다.
AI 기술의 빠른 발전으로 인해 현재 최고의 모델이라도 곧 새로운 모델에 의해 추월될 수 있다는 점을 강조했습니다.
이 표 이미지를 여기에 붙여넣고
인터랙티브 인포그래픽을 만들어달라고
해볼까요
와, 이건 너무 쉽네요
자, 이걸 시도해볼게요
페로몬 경로를 사용하는 먹이를 찾는 개미 군집을
만들어서 기본적인 AI 규칙으로
개미들이 탐색하고 경로를 최적화하는 것을 보여주세요
세상에, 이건 말도 안 되게 대단하네요
이것도 한번 해볼까요?
사용자가 원소 위에 마우스를 올리면
원소의 특성과 원자 구조의
애니메이션을 볼 수 있는 인터랙티브 주기율표를 만들어주세요
각 원소 위에 마우스를 올리면
특성과 함께 원자 구조의
애니메이션까지 보여주네요. 정말 놀랍습니다
이번엔 이걸 시도해볼게요. 고층 빌딩과
고속도로가 있는 미래형 도시의
3D 시뮬레이션을 만들어주세요
이번엔 확장 사고 모드를 켜볼게요
세상에, 말도 안돼요
미쳤어요
Anthropic이 몇 달 동안 조용했는데
드디어 이번 주에
새로운 모델 Claude 3.5.1 버전 2를
실험적 사고 버전으로 출시했... 아니 농담입니다
Claude 3.7이에요
3.6은 어떻게 됐냐고요?
아무도 모르죠. 왜 4가 아니냐고요?
그것도 모릅니다. 그냥 그런거죠
AI 스타트업들은 작명에는
정말 뛰어나고 우리를 혼란스럽게 하는데도
아무튼 이 영상에서는
Claude 3.7 사용법을 보여드리고
놀라운 기능들을 시연해서
할 수 있는 것과 없는 것을 보여드리겠습니다
게다가 다른 AI 모델들과 비교한
성능과 벤치마크도 살펴보겠습니다
시작해볼까요?
이 영상의 스폰서
HubSpot에 감사드립니다
먼저 Claude 3.7을 어디서
사용할 수 있는지 알아보겠습니다. 여러 플랫폼에서
이용 가능한데요, 물론 첫 번째는
Claude 자체 사이트인 claude.ai입니다
링크는 설명란에 넣어두겠습니다
단, 계정을 만들려면 전화번호가
필요한데 이게 좀 불편하죠
전화번호를 제공하고 싶지 않다면
다른 플랫폼들도 있습니다
예를 들어 Monica가 있는데
설명란에 링크를 넣어두겠습니다
할인 코드도 준비했고
또는 Appus AI의 chat llm이나 poe도 있습니다
이 모든 링크를
설명란에 넣어두겠습니다. 이 플랫폼들은
계정 생성시 전화번호가 필요없죠
게다가 Cursor에서도 사용 가능해서
코드 에디터에서 직접 Claude 3.7을 사용할 수 있습니다
이 영상에서는 Claude 자체
인터페이스를 사용하겠습니다
여기 보시면 기본적으로
Claude 3.7이 선택되어 있습니다. Claude 3.7은
하이브리드 추론 기능이라는 것을 갖추고 있는데
이는 문제 해결과 추론 능력을
향상시켰습니다
특히 과학, 수학, 코딩 등에서
유용하게 사용될 수 있죠
또한 확장 사고 기능도 있어서
더 오래 생각할 수 있게 해주는데
복잡한 추론과 문제 해결에
더 좋은 성능을 보여줍니다
참고로 이 기능은
DeepSeek의 딥 씽크 기능이나
OpenAI의 추론 기능, 그리고 Grok의
기능과 기본적으로 같은 겁니다
이 기능을 사용할 수 있습니다.
물론 요약이나 번역, 채팅, 글쓰기와 같은
일반적인 작업도 수행할 수 있지만
솔직히 최상위 AI 모델들은
이미 이런 작업들을 잘 수행하고 있어서
큰 차이는 없습니다.
Claude 3.7이 진정으로 빛나는 부분은
코딩, 수학, 데이터, 과학에 대한
이해도입니다. 이 영상에서는
이러한 예시들을 주로 보여드리면서
Claude 3.7이 실제로 얼마나 뛰어난지
확인해보겠습니다. 먼저 데이터 예시부터 시작해볼까요?
그래프와 차트, 인포그래픽을 만드는 것이
매우 쉽습니다. 이미지를 업로드하거나
CSV 파일 같은 문서를 첨부할 수 있고
구글 드라이브의 문서와 연결할 수도 있습니다.
저는 이 테이블 이미지를 업로드할 건데
실제 테이블이 아닌 이미지만 업로드하고
이렇게 입력하겠습니다.
'이 테이블을 인터랙티브 인포그래픽으로 변환하고
시각적으로 매력적으로 만들어줘'
이것은 중요한 문구인데
이 튜토리얼에서 자주 사용할 겁니다.
그리고 'CSS, JS, HTML을
하나의 HTML 파일에 사용해줘'라고 추가합니다.
이것도 제가 자주 사용하는 핵심 문구로
모든 것을 하나의 독립 실행형 파일에
유지하기 위해 사용합니다.
자, 이제 엔터를 눌러서
결과를 확인해보겠습니다.
와, 정말 멋지지 않나요?
브랜드와 성별로 데이터를 구분해서 보여주는데
코카콜라만 클릭하면 코카콜라의
모든 통계만 보여줍니다.
여성과 남성 사이에서 가장 인기 있는 콜라와
성별 간 가장 큰 차이도 보여주네요.
그리고 여기 펩시만 따로 보면
아주 깔끔하고, 전체 브랜드도 볼 수 있습니다.
모든 브랜드가 보이네요.
데이터 테이블 이미지 하나로
정말 멋진 인포그래픽이 만들어졌죠?
이런 식으로 보고서나 프레젠테이션용
차트와 인포그래픽을 만드는 데
매우 유용한 것을 알 수 있습니다.
이제 새로운 채팅을 시작해서
엑셀 테이블이 있는데
여러 동물들 간의 상관관계가
정리되어 있습니다. 이 데이터를
Claude에 붙여넣고 그래프를 만들어보죠.
프롬프트로는 이렇게 입력하겠습니다:
'이 테이블을
인터랙티브 네트워크 그래프로 변환하고
시각적으로 매력적으로 만들어줘' - 이건 제가 자주 쓰는
문구인데 디자인을
훨씬 더 좋게 만들어줍니다. 'CSS, JS, HTML을
하나의 HTML 파일에 사용해줘'라고 입력하고
시프트 엔터를 눌러
새 줄을 시작한 다음
이 데이터를 전부 복사해서
여기에 붙여넣겠습니다.
자, 생성 버튼을 눌러서 결과를 확인해볼까요?
Claude의 좋은 점은
아티팩트 기능이 있어서
코드 출력과 함께
실시간 미리보기도 제공한다는 거죠.
다만 OpenAI나 Gemini,
DeepSeek만큼 빠르지는 않아서
코드를 완성하는 데
몇 초 정도 걸립니다.
와, 정말 대단하네요! 이걸로
이것저것 시도해볼 수 있는데
지금 창이 좀 작아서
전체 코드를
복사 버튼을 눌러서
복사하겠습니다.
제 컴퓨터의 어딘가에
새로운 HTML 파일을 만들어 보겠습니다.
먼저 텍스트 문서를 선택하고
확장자를 HTML로 변경할 건데요.
test.html이라고 이름을 지정하고
확장자 변경을 승인한 다음
우클릭해서 메모장으로 열겠습니다.
물론 다른 코드 에디터를 사용하셔도 됩니다.
다시 돌아와서
이 코드 전체를 복사하고
여기에 붙여넣은 다음 Ctrl+S로 저장하겠습니다.
이제 이 HTML 파일을 웹 브라우저에서 열면
전체 앱을 열 수 있고
전체 화면으로 볼 수 있습니다.
정말 멋지지 않나요?
모든 것의 네트워크 그래프를 생성했습니다.
이제 모든 설정을 테스트해 보겠습니다.
반발력을 증가시키면 더 뭉쳐지고
반발력을 감소시키면
서로 더 멀어지면서
데이터가 더 넓게 퍼지는 것을 볼 수 있습니다.
그리고 한번 확인해 볼까요?
이 연결들을 클릭해서 드래그할 수 있을까요?
네, 가능하네요. 정말 멋지죠?
그리고 링크 거리는 어떨까요?
이것을 더 높게 조정해 보겠습니다.
링크가 더 길어지는 것을 볼 수 있고
이것을 더 작게 하면
링크가 더 짧아지네요.
매우 흥미롭습니다.
그리고 연관성 임계값은 어떨까요?
이 슬라이더를 올리면
높일수록 일부 연결이
끊어지고, 1까지 올리면
동물들 간의 연결이 모두 사라집니다.
그리고 임계값을 다시 낮추면
서로 다른 종 사이에
연결이 다시 형성되는 것을 볼 수 있습니다.
이것은 두 종이 얼마나
연관되어 있는지를 결정하는 것 같네요.
연결이 형성되기 전에 매우 흥미롭습니다.
마우스를 올리면
연결을 볼 수 있는데, 여우는 두 개의 연결이 있습니다.
곰과는 75%, 늑대와는 70%의 연관성이 있네요.
물론 이건 임의의 데이터지만
정확한지 확인해 보겠습니다.
여우와 곰이 실제로 75%네요.
여우와 늑대도 70%로 정확합니다.
이제 호랑이 연결을 확인해 볼까요?
세 개의 연결이 있네요.
사자와는 95%의 연관성이 있고
표범은 80%, 치타는 70%입니다.
다시 확인해 보면, 사자와 호랑이는 95%
맞습니다. 표범과는 80%
이것도 정확하고, 치타와는
70%로 이것도 정확합니다. 정말 멋진 도구네요.
자, 여기 있습니다.
모든 동물들의 완전히 기능하는 네트워크 그래프로
조정 가능한 설정이 있고
완전히 인터랙티브하여
모든 설정을 조정할 수 있습니다.
정말 놀랍네요. 한 번에
모든 것을 완벽하게 만들었습니다.
이제 새로운 채팅을 시작해서
멋진 앱을 몇 개 더 만들어보죠.
여기 프롬프트를 보면 '독립형 HTML 페이지를 만들어주세요'
제가 자주 사용하는 또 다른 핵심 문구인데
비디오를 업로드하면
흑백 점들로 변환되도록 할 겁니다.
점 크기를 조절할 수 있는 슬라이더를 포함하고
원본 비디오와 변환된 비디오를
나란히 미리보기할 수 있게 해달라고 했습니다.
생성 버튼을 눌러서 어떻게 되는지 보죠.
자, 여기 결과가 나왔네요.
자, 결과가 나왔는데요. 다시 한 번 말씀드리면
이 화면이 좀 찌그러져 있어서
이 코드를 복사해서
HTML 파일로 돌아가서
이전 코드를 지우고 새 코드를 붙여넣은 다음
Ctrl+S를 눌러 저장하겠습니다.
위쪽에 있는 저장 버튼을 클릭해도 됩니다.
HTML 파일을 새로고침하면
새로운 비디오 도트 변환기를 볼 수 있습니다.
잘 작동하는지 확인해 볼까요?
비디오를 업로드해 보겠습니다.
업로드 기능이 잘 작동하고, 재생해보면
마법처럼 비디오가 흑백 도트로 변환됩니다.
정말 놀랍지 않나요?
계속 반복 재생되도록 설정하고
여기서 도트 크기를 조절할 수 있습니다.
이렇게
도트 크기를 키워볼까요?
도트 간격도 조절할 수 있어서
도트 사이의 간격을 더 넓힐 수 있습니다.
정말 멋지죠?
그리고 밝기 임계값은
어느 부분이 검은색이 되고
어느 부분이 흰색이 될지 결정합니다.
도트 크기를 좀 줄이고
간격도 좀 좁혀보겠습니다.
재생과 일시정지를 눌러보면
정상적으로 작동하네요. 놀랍지 않나요?
단 한 번의 프롬프트로, 추가 지시 없이
완벽하게 작동하는 페이지를 만들어냈고
비디오를 흑백 도트로 변환할 수 있으며
설정까지 조절 가능하고
모든 것이 마법처럼 작동합니다.
이제 더 대단한 걸 시도해볼까요?
프롬프트에 이렇게 작성하겠습니다.
독립 실행형 HTML 페이지에
Three.js를 사용해서
이건 제가 자주 쓰는 핵심 문구인데요
Three.js는 3D 애니메이션을 만드는 데 매우 유용한 라이브러리입니다.
우리는 이걸 이용해서
복잡한 미래도시의 3D 시뮬레이션을 만들 건데
마천루와 고속도로가 있는
디자인과 시각효과를 멋지게 만들어보겠습니다.
이것도 제가 자주 쓰는 핵심 문구인데요
Claude의 프롬프트에 꼭 넣어주세요.
그렇지 않으면 좀 더 지루하고 단순한
결과물이 나올 수 있거든요.
디자인을 멋지게 만들라고 하면
실제로 더 많은 노력을 기울여서
보기 좋게 만들어냅니다.
그리고 낮과 밤을 조절하는 슬라이더와
다른 효과들도 포함시키고, 창의적으로 만들되
다른 의존성은 사용하지 말라고 할게요.
이것도 제가 자주 쓰는 문구로
모든 것을 하나의 파일에 담기 위해서죠.
그리고 이번에는 꽤 복잡한 프롬프트라
3D 도시 전체를 생성해야 하니까
아래로 내려가서
확장 사고 기능을 선택하겠습니다.
이렇게 하면 더 오래 생각하게 되고
이론적으로는 더 나은 결과가 나올 거예요.
자, 생성 버튼을 눌러볼까요?
어떤 결과가 나올지 보겠습니다.
와, 이게 나왔네요! 믿을 수 없죠?
도시로 들어가기 전에
생각하는 과정을 살펴보죠.
확장 사고 모드를 켰기 때문에
이걸 확장해서 어떻게 생각하는지
코드를 출력하기 전에
모든 것을 어떻게 처리하는지 볼 수 있어요.
여기서는 모든 요구사항을 나열하고 있네요.
전체 HTML 페이지를 만들기 위해
이 모든 것들이 필요하다고 하네요.
이 모든 것을 포함하는 해결책을 디자인해보죠.
이제 모든 것을 포함하는
완전한 HTML 결과물을 만들어보겠습니다.
여기 필요한 모든 코드가 포함되어 있고
마우스를 드래그해서
이 도시를 둘러볼 수 있습니다
이 창이 좀 작아서
이 코드를 클릭하고
여기 있는 모든 것을 복사한 다음
테스트 HTML 파일에
모든 코드를 붙여넣고 저장한 뒤
웹 브라우저에서 열어보겠습니다
자, 여기 우리의 도시가 있네요
정말 놀랍지 않나요? 마우스 스크롤을 하면
확대와 축소가 가능합니다
카메라 높이를 조정하면
실제로 카메라 높이가
조정되는 것을 볼 수 있죠
이제 안개 효과를 살펴볼까요
안개를 증가시키면
마치 대기오염이 심한 것처럼 보이고
거의 아무것도 보이지 않게 됩니다
안개가 검은색인데
안개를 줄이면, 와우 정말 멋지네요
안개를 0으로 설정하면
하늘이 훨씬 깨끗해집니다
슬라이더를 다시 조정해보면
얼마나 멋진가요?
그리고 시간대 설정도 있습니다. 지금은 낮인데
이 슬라이더를 조정하면... 와, 굉장하네요
하늘이 오렌지색으로 변하고
해가 지는 것을 볼 수 있습니다
그리고 이제 밤하늘로 바뀌는데
실제 별들까지 보이네요. 정말 놀랍도록 디테일합니다
프롬프트 얘기가 나온 김에
HubSpot에서 제공하는 무료 리소스를 소개해드릴게요
제가 Claude나 다른 AI 모델을 사용할 때
특정 핵심 문구와 프롬프트를 추가하면
큰 차이가 있다는 걸 발견했습니다
그래서 여러분과 공유하고 싶은
무료 리소스가 있습니다
이것은 정말 큰 도움이 될 거예요
여기서는 Claude를 개인 비서처럼 설정하는 방법을
배울 수 있습니다
전체 워크플로우를 관리하고
여러분의 선호도를 학습하며 프로젝트 전반에 걸쳐
맥락을 유지하는 방법도 알려줍니다
또한 자동으로 업데이트되는
문서 작성 방법도
설명되어 있습니다
데이터를 분석하는 인터랙티브 대시보드를
데이터 사이언스 팀 없이도 만들 수 있죠
특히 제가 좋아하는 부분은
시장 인텔리전스나
운영 지표, 재무 분석과 같은
실제 응용 사례를 다루는 섹션입니다
콘텐츠 마케팅 혁명 챕터에서는
Claude가 어떻게 전체 콘텐츠 전략을
변화시킬 수 있는지 보여줍니다
다양한 독자층에 맞게 글쓰기 스타일을 조정하면서
모든 채널에서 브랜드 톤을 유지하는 방법을 알려주죠
가장 좋은 점은 이 번들이 완전히 무료라는 것입니다
설명란의 링크를 클릭하시면
바로 액세스할 수 있습니다
이 번들은 이 영상의 스폰서인 HubSpot이 제작했습니다
그런데 이쪽으로 드래그하면
해가 지면서 생기는
고층 건물들의 그림자를 보세요
실제로 일몰을 시뮬레이션하고 있어서
모든 건물들 사이의 그림자와
하늘이 오렌지색으로 변하고
마침내 밤하늘로 바뀌는 것을
볼 수 있습니다. 반대로 드래그하면
어떻게 되는지 볼까요?
아마도 일출이겠죠, 그리고
네온 강도를 테스트해보겠습니다
이것을 최대값으로 올리면
값을 최대로 하니까 건물들이 더
네온 색상으로 보이네요. 카메라 높이를
조정해보고, 이 값을 전부
0으로 하면... 네온 색상이
완전히 꺼지네요. 다시 1로 설정하면
건물들에 색상이 다시 나타나는 걸
확인할 수 있습니다. 이제 다시
낮 시간대로 바꾸고 좀 더 확대해볼게요
그리고 카메라 높이를 낮춰보겠습니다
이 미래도시에 떠다니는 차들이
보이네요. 교통 밀도를 높이면
어떻게 될까요? 실제로 공중을 나는
차들이 더 많이 보이네요
이것은 확실히
미래도시예요. 모든 것이 매우
상세하고, 시간대도 바꿀 수 있어서
일출과 일몰도 시뮬레이션하고
밤하늘의 별까지 보여줍니다. 이건
정말 인상적이에요. 게다가 단 하나의 프롬프트로
이 모든 것을 만들어냈다는 게
너무 멋지네요. 여러분과 공유하고 싶어서
프롬프트도 보여드리고
코드도 직접 실행해보실 수 있게
하겠습니다. 공유 버튼을 클릭하고
공유하기를 누르면 이제
누구나 볼 수 있는 공개 링크가 생성됩니다
이 링크를 복사해서
설명란에 붙여넣을게요. 그러면
직접 체험해보실 수 있습니다. 이건 단 하나의
프롬프트로, 확장 사고
기능을 사용해서 만든 거예요
완전한 3D 도시를 만들어냈다는 게
정말 믿을 수 없을 정도네요. 자, 이제
새로운 채팅을 시작해볼게요. 이번에는
웹페이지를 만들어보겠습니다. Hugging Face의
스크린샷을 찍어볼게요
여기까지만 스크린샷을 찍어서
붙여넣고, 이렇게 입력하겠습니다
'이 웹페이지를 독립형 HTML 파일로 복제해줘'
생성 버튼을 눌러서 결과를 확인해볼게요
참고로 꼭 HTML일 필요는 없어요
기본적으로는 React로 코딩하지만
일반 HTML이나 Python 또는 다른
프레임워크나 언어로도 만들 수 있습니다
자, 보시죠
와, 이건 정말 대단해요
실제 Hugging Face 사이트와 매우 비슷하네요
물론 폰트가 약간 다르고
접근할 수 없는 로고 같은
약간의 차이는 있지만요. Claude 3.7을 사용하면
기존 웹사이트를 쉽게 복제하거나
와이어프레임을 디자인할 수 있습니다
자, 새로운 채팅을 시작해볼게요
앞서 말씀드렸듯이 Claude 3.7은
과학, 코딩, 수학 같은 STEM 분야에서 뛰어나요
한번 이렇게 시도해보겠습니다
p5.js 스크립트를 작성해볼게요. 이건
제가 자주 사용하는 또 다른
키워드인데요, JavaScript 라이브러리를 사용해서
애니메이션을 만드는 거예요
먹이를 찾는 개미 군집을
시뮬레이션해볼 건데, 페로몬 트레일을 사용하고
기본적인 AI 규칙으로 개미들이
탐색하고 경로를 최적화하는 걸 보여줄거예요
사용자가 실시간으로 조정할 수 있는
컨트롤도 포함시켜보죠
자, 어떻게 처리하는지 봅시다
좋아요, 이제
p5.js 스크립트가 생성됐는데
여기서는 미리보기가 안 되지만
괜찮아요. 이 코드를 복사해서
온라인 P5 에디터에 붙여넣을 수 있어요
링크는 설명란에 남겨두겠습니다
아래에서 코드를 붙여넣기만 하면 됩니다
여기에 붙여넣고 실행해 보면, 얼마나 대단한지 보실 수 있죠
여기 개미들이 움직이면서 먹이를 찾고 있네요
보시다시피 이 초록색 블록들이 먹이인 것 같습니다
개미 수를 늘려서 어떻게 되는지 한번 보죠
자, 이제 개미가 엄청 많아졌네요
먹이를 발견하면
개미들이 초록색으로 변하는 걸 볼 수 있고
개미들이 초록색으로 변하면서
먹이를 둥지로 가져가고 있어요
개미 속도를 높이면
훨씬 빠르게 움직이고
속도를 낮추면 좀 더 천천히 움직이죠
이렇게 속도 조절이 잘 작동합니다
페로몬 강도는 제가 생각하기에
서로 얼마나 영향을 주는지를 나타내는 것 같아요
개미가 먹이를 발견했을 때 주변 개미들에게
얼마나 강하게 신호를 보내서
'여기 먹이가 있으니 가져가자'라고
알리는지를 조절하는 거죠. 이 강도를 높이면
더 많은 개미들이
먹이 쪽으로 몰려가게 될 겁니다
페로몬 강도를 낮추면
서로 영향을 덜 주는 것 같네요
그리고 여기 무작위 이동을 보면
이걸 높이면
더 무작위로 움직이는 게 보이네요
장애물을 추가하면 어떻게 되는지 볼까요
여기에 장애물을 하나 넣어볼게요
아, 세상에! 정말 죄송해요
작은 개미야 미안해
일부러 너한테 장애물을 놓은 건 아니었어
개미가 갇혀버렸네요
'장애물 제거'를 클릭하면
실제로 장애물이 사라지는군요
이번엔 먹이를 여기 어딘가에
추가하고 어떻게 되는지 보겠습니다
몇몇 개미들이 이 먹이를 발견했고
이제 둥지로 돌아가고 있어요
개미 수를 늘리고 속도도 높이고
무작위 이동은 좀 줄여볼게요
한 가지 더 시도해보고 싶은 게 있는데
이 경로 한가운데에
장애물을 하나 놓아보죠
보시다시피 개미들이 이제
이 장애물을 피해가고 있어요
여기 하나 더 놓아볼게요
이제 개미들이 이 장애물을 피해서
돌아가야 하네요. 정말 멋진 데모입니다
완전히 작동하는 개미 군집 시뮬레이션이
만들어졌고, 먹이나 장애물을 추가할 수 있는
옵션도 있습니다
단 한 번의 프롬프트로 이 모든 게
구현된 것이 정말 인상적이에요
혹시 제대로 작동하지 않더라도
몇 번 더 프롬프트를 입력하면
문제를 해결할 수 있을 겁니다
자, 이제 화학 예제를 해볼까요
프롬프트는 'p5.js 스크립트를 작성해주세요'
이건 정말 유용한 라이브러리예요
애니메이션과 시각화를 위한
동적인 주기율표를 시뮬레이션하는데
사용자가 원소 위에 마우스를 올리면
특성과 전자 배치를 볼 수 있고
원자 구조에 대한 애니메이션도 있죠
생성 버튼을 눌러서 결과를 볼까요
참고로 제가 같은 프롬프트를
Claude에서도 사용했는데
원자 구조에 대한 애니메이션은
제공하지 않았어요. Claude 3.7이
더 나은 결과를 보여줄지 봅시다
자, 여기 결과가 나왔네요. 다시 한 번 말씀드리면
p5.js를 사용하면 어떤 이유에서인지
Cloud에서는 미리보기가 안 되니까
이 코드를 전부 복사해서
HTML 파일로 돌아가서 붙여넣고
Ctrl+S로 저장하면
페이지를 새로고침했을 때 이렇게 나옵니다
주기율표의 모든 원소가 표시되지는 않았네요
아마도 공간이 부족했던 것 같은데
일단 테스트해보겠습니다
H에 마우스를 올리면
원자 번호, 원자량, 전자 배치와
설명까지 나타나고
하단에는 원자 구조의 애니메이션까지 보여줍니다
정말 멋지지 않나요?
리튬에 마우스를 올리면
모든 정보가 정확하게 표시되고
애니메이션도 올바르게 보입니다
내부 껍질에 2개의 전자가 있고
바깥 껍질에 1개의 전자가 있는
3개의 전자를 정확하게 보여주네요
나트륨도 보겠습니다
이것도 정확해 보이는데
첫 번째 궤도에 2개의 전자
두 번째 궤도에 8개의 전자
그리고 외각 궤도에 1개의 전자가 있습니다
이제 마그네슘을 볼까요?
애니메이션이 정확해 보이네요
아주 좋습니다
칼슘도 보면
모든 것이 정확해 보이고, 원자번호 5번인
붕소도 있고
인도 있습니다. 몇 가지 더
살펴보겠습니다
여기 안정된 기체들이 있는데
아르곤
네온, 헬륨 모두 정확해 보입니다
원자 구조 애니메이션이 정말 인상적이네요
이건 Claude 3에서는 보지 못했던 기능입니다
Claude 3.7에서는 이처럼
과학이나 다른 분야의 시각화를
쉽게 만들 수 있죠
교육 분야에서 획기적인 변화가 될 수 있습니다
자, 이제 새로운 채팅을 시작해서
수학적 시각화를 시도해보겠습니다
프롬프트는 'p5.js 스크립트를 작성해서
파이 근사값을 구하는 몬테카를로 방법을 시각화하되
정사각형 안에 무작위로 점을 찍어
시간에 따른 파이값을 추정하도록 하세요'
잠시 후에 설명드리겠습니다
그리고
사용자가 실시간으로 조정할 수 있는
컨트롤도 포함시켰습니다. 이건 중요한 문구인데
이걸 포함하지 않으면
때로는 애니메이션이나 시각화가
바로 시작되어버려서
애니메이션을 일시정지하거나
뷰나 다른 설정을 조정할 수 없게 됩니다
그래서 저는 이 문구를
꼭 포함시키려고 하는데요
자, 생성 버튼을 눌러서
어떻게 나오는지 보겠습니다
흥미롭게도 이번에는
미리보기 창에 표시가 되네요
시뮬레이션을 리셋해보겠습니다
수학을 잘 모르시는 분들을 위해
간단히 설명드리겠습니다
파이(π)는 3.14로 시작하는
매우 특별하고 중요한 숫자로
우리 생활 곳곳에서 볼 수 있으며
원의 넓이를 구할 때
그리고 다른 많은 계산에 사용됩니다
그럼 이 값을 어떻게 구했을까요?
한 가지 방법을 보여드리겠습니다
다시 리셋하고, 원을 그려보면
사각형 안에 원을 그려서
원이 사각형의 네 면에 모두 닿도록 하고
그리고 사각형 안에 무작위로 점들을 찍습니다
이 점들 중 일부는
원 안에 있을 수도 있고
원 밖에 있을 수도 있습니다
그리고 원 안에 있는 점의 개수를
전체 점의 개수로 나누고
여기에 4를 곱하면
실제로 파이 값이 나옵니다
다시 한번 리셋해보고
이렇게 계산하는 방법입니다
이제 설정을 조정해보겠습니다
프레임당 점의 개수를 조정하면
매우 빠르게 채워지는 것을 볼 수 있죠
속도를 늦추기 위해 1로 조정하고
리셋을 누르겠습니다
시뮬레이션이 시작됐고, 이제 점 크기를
좀 더 크게 해보겠습니다
점들이 더 크게 보이네요
이제 점들을 작게
줄여보겠습니다. 여기서 보시면
원 안에 있는 점의 개수와
전체 점의 개수
추정된 파이 값과
오차율을 확인할 수 있습니다
속도를 약간 높이면, 점이 많아질수록
실제 파이 값에
더 가까워지고 오차율은
점점 낮아지는 것을 볼 수 있습니다
속도를 더 높여보겠습니다
보시는 것처럼 3.14에 점점 가까워지고
오차도 계속 감소하고 있습니다
다시 1로 줄이고
시뮬레이션을 리셋해보겠습니다
밀도 플롯이 어떤 효과가 있는지 봅시다
흥미롭게도 점들이 사각형으로 바뀌네요
이 밀도 플롯이 정확히 어떤 원리인지는 모르겠지만
어쨌든 이건
파이 값을 추정하기 위한 완벽하게 작동하는
몬테카를로 시뮬레이션입니다
애니메이션도 아름답고
모든 설정이 잘 작동하며
단 하나의 프롬프트로 이 모든 것이 가능하다니
정말 인상적입니다
지금까지 과학과 수학 시각화
예제를 살펴봤는데요
이제 게임 코딩은 얼마나 잘하는지
3.js를 사용해서 한번 시도해보겠습니다
마인크래프트 환경을 만들고 시작과 일시정지 버튼,
속도 조절 슬라이더를 포함시키겠습니다
이것은 제가 프롬프트에
자주 포함시키는 또 다른 문구인데
시스템이 자율적으로
매우 정교하고 복잡한 성을 짓기 시작하며
시각적 매력에 중점을 두고 놀랍게 보이도록 만듭니다
생성 버튼을 눌러보겠습니다
여기서 보시면 메시지 최대 길이에 도달해서
일시 중지된 것 같네요
코딩이 아직 완료되지 않았습니다
끝에서부터 계속하기를 입력해서
여기서부터 이어서 진행하도록 하겠습니다
코드 맨 아래에서부터
계속 이어서 작성하고 있네요
자, 이제 결과를 보겠습니다
먼저 화면을 축소하고 빌드 시작을 클릭해보겠습니다
음, 아무것도 보이지 않네요
3.js가 이 클라우드 프리뷰와
완전히 호환되지 않는 것 같습니다
코드를 클릭하고
여기 있는 모든 내용을 복사한 다음
테스트 HTML 파일에 붙여넣어보겠습니다
Ctrl+S를 눌러 저장하고
그리고 이 HTML 파일을 열면
보시다시피 바닥이 초록색으로 변했어요
좋은 시작이네요. 이제 한번 보겠습니다
'건설 시작'을 누르면 어떻게 되는지
자, 이제 성을 짓기 시작했습니다
속도를 좀 높여볼게요
더 빠르게 건설되는 것을 보실 수 있죠
참고로 three.js가
Claude에서 기본적으로 작동하지 않을 수 있어요
만약 화면이 비어있다면
코드를 복사해서
새 HTML 파일에서 열어야
작동하는 버전을 볼 수 있습니다. 정말
멋지죠? 이제 보시면
성벽을 쌓고 있고
확대해보면 각 요소에
라벨이 붙어있는 것도 볼 수 있어요
여기엔 '벽돌', 저기엔 '돌'이라고 표시되어 있죠
정말 멋지죠? 그리고 마우스로
드래그해서 다른 각도에서
볼 수도 있습니다. 정말 대단하죠
이제 성 건설이 완료되었고
상태가 '완료'라고 표시되어 있네요
좀 더 자세히 보면 벽을 따라
창문도 만들어져 있어요. 정말 멋지죠
여기에는 멋진 문도 만들어졌네요
아마도 입구인 것 같고, 여기에는
멋진 나무 지붕도 있어요. 아주 좋네요
자, 우리의 성이 완성되었습니다. 정말 멋지죠?
단 하나의 프롬프트로
마인크래프트를 복제할 뿐만 아니라
AI가 자율적으로
이 환경에서 성을 지을 수 있다니요. 저는
OpenAI GPT-4와 Grok-3로도 이 프롬프트를 시도해봤는데
한 번에 이렇게 만들지는 못했어요
정말 인상적이네요
좋습니다. 새로운 채팅을 시작해볼게요
AI 모델을 테스트할 때 주로 만들어보는
게임이 스네이크 게임인데
그건 너무 쉽죠. 최상위 모델들은
이미 자율적으로 움직이는
두 마리의 뱀이 경쟁하는 게임을
만들 수 있어요. GPT-4와
Grok-3에서도 잘 작동하고, 참고로
두 모델 모두 정말 뛰어나요. 이 영상이
마음에 드셨다면 제가 리뷰한
Grok-3 전체 리뷰도 여기서 확인해보세요
GPT-4 미니 리뷰도 있습니다. 자, 다시
돌아와서 좀 더 어렵게 만들어볼게요
스네이크 게임을 만들건데
두 마리가 아닌 열 마리의 뱀이
자율적으로 먹이를 먹고 경쟁하도록 할게요
시각적으로도 매력적하게 만들어보죠
이건 제가 자주 쓰는 키워드인데요
더 미적으로 보이게 하기 위해서죠
그리고
p5.js를 사용하겠습니다. 엔터를 눌러서
어떻게 되는지 봅시다. 자, 여기
보시면 바로 시작되는데
즉시
열 마리의 뱀이 있고 각 뱀의
점수도 표시되며, 어떤 뱀이 죽었고
어떤 뱀이 아직
살아있는지
보여줍니다. 지금은 마지막
한 마리만 남았고, 이 뱀이
자신의 몸에 부딪히면 게임이 끝납니다
1번 뱀이 19점으로 승리했네요. 여기에는
시작/정지 버튼이 없는데
보통은 프롬프트에
'시작/정지 버튼을 포함해주세요'라고
추가하는 걸 좋아하는데, 그래야
바로 시작되지 않거든요. 하지만
어쨌든 다시 새로고침 해볼게요
보시다시피 10마리의 뱀으로 시작하고
이들이 먹이를 두고 자율적으로 경쟁하고 있습니다
그리고 이 시각적 효과를 보면
기존 모델들의 전통적인 스네이크 게임보다
훨씬 더 뛰어날 뿐만 아니라
아주 멋진 점수판도 있어서
죽은 뱀들을 포함한
모든 것을 추적하고 있으며
게임오버 화면도 아주 멋지게 구현되어 있습니다
다음으로는 이걸 해볼게요
Phaser.js를 사용해서 횡스크롤 플랫폼 게임을 만들어보겠습니다
이것도 인터랙티브 비디오 게임을 만드는 데
정말 유용한 자바스크립트 라이브러리죠
방향키만 사용해서 게임을 플레이하도록 하겠습니다
생성 버튼을 눌러서 결과를 확인해볼게요
자, 이렇게 나왔네요
여기 몇 가지 에러 메시지가 보이고
화면이 비어있는데
이건 아마도 Phaser가
이 클라우드 채팅 인터페이스와 호환되지 않아서 그런 것 같습니다
그래서 이 코드를 복사해서
다시 테스트용 HTML 파일에 붙여넣고
파일을 열어보도록 하겠습니다
자, 이제 보이네요. 방향키로 좌우로 움직이면
캐릭터가 좌우로 움직이고
위쪽 방향키를 누르면 점프를 합니다
이제 이 코인들을 모두 먹어보고
그 다음 레벨로 진행되는지 확인해보겠습니다
다음 레벨로 넘어가는지 궁금하네요
저기 위에 있는 코인까지 점프해서
어머나, 저기까지 어떻게 점프하지?
다시 한번 시도해볼게요
됐네요!
아주 좋습니다
모든 코인을 먹으면
다음 레벨로 진행되고, 이 검은 점은
적인 것 같네요. 일단
닿지 않도록 하면서
코인들을 모두 먹어보고 어떻게 되는지 보겠습니다
아주 멋지네요! 모든 코인을 먹으면
다음 레벨로 진행되고
적이 하나 더 추가되며
적에게 닿으면 게임오버가 됩니다
정말 대단하지 않나요? 완전히 작동하는 게임을 만들었을 뿐만 아니라
적까지 포함시켰고
난이도가 증가하는 여러 레벨도 구현했습니다
이제 프롬프트를 더 발전시켜서
게임을 계속 다듬어간다면
클로드만 사용해서도
실제로 출시 가능한 게임을
쉽게 만들 수 있을 것 같습니다. 다음으로는
추론과 사고 능력을
테스트해보고 싶은데요
딥씽킹 모드에서 특히
저는 의학적 진단을 받아보는 것을
좋아하는데, 비슷한 프롬프트로
55세 남성이 고혈압과
고지혈증 병력이 있는 상태에서
흉통과 호흡곤란으로 입원했습니다
약물 복용을 잘 하고 있음에도
지난 한 달 동안
증상이 점점 악화되었고
검사 결과 혈압이 상승했으며
비정상적인 지질 프로필을 보입니다
어떤 문제일까요? 여기서
확장 기능을 선택하고
스타일도 선택할 수 있는데
설명형으로 선택해보겠습니다
이렇게 하면 학습을 위한
더 교육적인 응답을 받을 수 있죠
생성 버튼을 눌러서 결과를 확인해보겠습니다
확장 사고 기능을 켜면
사고 과정을 볼 수 있습니다
사고 과정을 볼 수 있고
이를 확장해서 어떻게 분석했는지 살펴볼 수 있습니다
여기서 볼 수 있듯이 주요 정보를
체계적으로 정리했는데요, 여기 환자 정보가 있고
증상이 있고, 여기에는
신체 검사 결과가 나와 있습니다
고려해야 할 잠재적 진단으로는
위험 요인을 고려했을 때 관상동맥질환이 가장 유력하고
그 외에도 심부전이 있을 수 있으며
조절되지 않는 고혈압과 관련된
대동맥 박리가 있을 수 있고
폐색전증과 다른 여러
원인들도 있을 수 있다고 합니다
그리고 환자의 나이와
위험 요인, 증상 패턴을 고려했을 때
관상동맥질환이 가장 가능성이 높은 진단이며
그 다음으로 가능성이 높은 진단은
심부전이라고 합니다
이는 고혈압의 합병증으로
발생했을 수 있으며, 실행 가능한 항목도
제시해 주고 있습니다. 이것이 AI의 사고 과정이고
여기에 최종 답변이 나와 있는데
주요 우려사항이 여기 있고
환자가 겪을 수 있는 다른 증상도 있어서
긴급한 평가가 필요하다고 합니다
다른 중요한 고려사항으로는
이러한 것들이 있으며
권장되는 다음 단계도 제시합니다
적절한 평가를 위해
이 모든 것들을 포함해야 합니다
이처럼 의료와 헬스케어 분야에서
매우 유용하게 활용될 수 있습니다
제 주치의보다 더 자세하고 철저하게 분석하네요
이것이 Claude의 응답인데, 저는 같은 프롬프트로
DeepSeek과도 비교해보고 싶었습니다
DeepSeek은 제가 개인적으로 선호하는
대화와 사고 모델 중 하나거든요
DeepSeek의 답변을 보면
여기 모든 상태가 나와 있는데
어떤 일이 일어나고 있는지 살펴보면
먼저 환자의 병력을 고려해야 하는데
증상이 악화되고 있다는 점에서
진행성 질환임을 시사합니다
이 모든 것을 종합해보면
진행성 흉통과 호흡곤란은
악화되는 관상동맥질환으로 인한
것일 수 있습니다. 다른 가능성으로는
등등이 있고, 또한
약물 복용 순응도를
확인하는 것도 중요하지만
환자는 약을 잘 복용하고 있다고 합니다
다른 관점에서 보면 흉통이
대동맥 협착증 같은 다른 원인일 수도 있고
또는 환자가 다른 증상을
겪고 있을 수도 있습니다. 비심장성
문제도 고려해야 하는데, 폐 문제나
위장관 문제 같은 것들이죠. 대략적으로 보면
DeepSeek이 Claude보다
좀 더 철저한 분석을 하는 것 같습니다
DeepSeek은 비심장성 문제까지 고려하는데
Claude는 그렇지 않거든요
흥미롭게도 DeepSeek의 답변은
Claude의 답변과 좀 다른데
DeepSeek은 불안정성 협심증이나
급성 관상동맥 증후군을 제시했고
Claude는 관상동맥질환을
제시했습니다. 의사나 심장 전문가분들이
이 영상을 보고 계시다면
댓글로 알려주세요
어떤 답변이 더 좋고
어떤 분석이 더 정확한지요
그리고 여기 아래에서 DeepSeek은
다음 단계도 추천하고 있습니다. DeepSeek의
또 다른 좋은 점은 관리 방법까지
단계별로 제시한다는 것입니다
클로드는 그런 걸 잘 안해주죠.
자, 이제 어려운 물리 문제를 풀어볼까요?
대학 수준의 물리 문제를 한번 시도해보겠습니다.
얼마만큼의 열이 필요한지 풀어볼건데,
오타가 있는 것 같네요.
질소 56g을 등온 압축할 때
압력 100kPa에서
500kPa로 압축하는데 필요한 열량을
온도 300K에서 구하는 문제입니다.
온도는
300K이고, 전체 문제를 복사해서
붙여넣을 건데, 참고로
꽤 복잡한 문제라 일부러 선택했습니다.
자, 문제를 붙여넣고
오타를 수정한 다음
여기서도 확장 모드를 선택할게요.
추론과 문제 해결에는 이게 더 좋거든요.
이제 생성 버튼을 눌러서
결과를 확인해보겠습니다.
자, 모든 계산을 마쳤고
보시다시피 답은 8K가 나왔네요.
여기 보이는 것처럼 8K가 정답입니다.
사고 과정 창을 확장해보면
문제 해결 과정을 볼 수 있어요.
압력 관계식으로 표현하고
이렇게 정리한 다음
질소의 몰수를 계산했습니다.
이제 방출된 열을 계산할 수 있고
계산을 계속 진행하면서
부호 규약도 재확인했네요.
정확한 답을 도출했습니다.
이렇게 대학 수준의
어려운 물리 문제도 해결할 수 있죠.
지금까지 Claude 3.7로
할 수 있는 인상적인 기능들을 봤는데
완벽하지는 않다는 점을 주의하세요.
몇 가지 심각한 제한사항이 있습니다.
첫 번째로 이미지를 생성할 수 없어요.
채팅 인터페이스에서 직접
이미지를 생성하고 싶다면
Grok 3가 최선의 선택이 될 거예요.
매우 사실적이고
흥미로운 이미지들을 만들 수 있는데
실제 인물과 똑같이 생긴
이미지도 만들 수 있죠.
게다가 음성 모드도 없어요. OpenAI는 이미
고급 음성 기능이 있어서
AI와 음성으로 대화할 수 있고
Gemini와 Grok에도 이 기능이 있죠.
게다가 Claude의 가장 큰 문제는
제가 가장 맘에 안 드는 점인데
가장 검열이 심한 모델이라는 거예요.
마약, 무기, 폭력,
전쟁에 대해 물어보면 아무것도 답변하지 않아요.
약간의 피가 튀는 정도의
폭력적인 요소가 있는 게임을 만들려고 해도
전혀 응답하지 않을 겁니다.
따라서 검열되지 않은 정보를 원한다면
Claude는 최선의 선택이 아니에요.
게다가 또 다른 큰 문제점은
Claude는 웹 검색을 할 수 없다는 거예요.
최신 정보에 대한
리서치가 필요하다면
이건 정말 큰 단점이 될 수 있죠.
예를 들어 '올해 출시된
DeepSeek R1에 대해 알려줘'라고 하면
이렇게 답변해요. '제가 가진 정보는
2024년 10월까지만 있어서
DeepSeek R1에 대해 신뢰할 만한
정보가 없습니다.
DeepSeek R1은 2025년 초에 출시됐는데
그 이후에 출시된 AI 모델이나 제품에 대해서는
자세한 정보를 확인할 수 없습니다.
만약 관심이 있으시다면'
Deep SR1에 대해 알고 싶으시다면
DeepSeek 공식 웹사이트를 확인해보시기를 추천드립니다.
보시다시피 이 모델은 최신 정보를
처리하는 데 적합하지 않고
웹 검색도 전혀 할 수 없습니다. 또한 강조하고 싶은 점은
소셜 미디어 게시물 작성이나
일상적인 대화, 또는 간단한 문제 해결과 같은
단순하거나 낮은 수준의 작업의 경우
솔직히 말해서 최상위 모델들 간에
큰 차이가 없다는 것입니다
ChatGPT, Google의 Gemini Pro,
DeepSeek, 그리고 Claude를 포함한
모든 모델들이 이러한 작업을 잘 수행할 수 있습니다
이제 Claude 3.7의 스펙과 성능에 대해 살펴보겠습니다
다른 모델들과 비교했을 때 얼마나 좋은지 알아보죠
우선, 새로운 Claude 3.7은
하이브리드 추론 모델을 특징으로 하며
이는 복잡한 문제 해결 능력을 향상시켜
특히 수학과 코딩에서 유용합니다
이 영상에서 보여드린 모든 예시에서
볼 수 있듯이
코딩 능력이 정말 뛰어납니다
Claude는 일반적인 사고 모드를 가지고 있는데
이는 기본적으로 깊이 생각하지 않고
더 빠르게 답변하는 모드입니다
하지만 확장된 사고 기능도 있어서
답변하기 전에 자체적으로 검토하고
수학, 물리학, 지시사항 이해
코딩 등 다양한 작업에서
성능이 향상됩니다
더 깊은 분석과 단계별 추론이 가능하며
사고 과정도 볼 수 있습니다
주목할 점은 이 확장된 사고 기능이
무료 플랜에서는 사용할 수 없다는 것입니다
이 기능을 사용하려면
유료 플랜 중 하나를 구독해야 합니다
마지막으로 벤치마크를 살펴보고
다른 모델들과 비교해서 실제로
얼마나 잘 수행하는지 알아보겠습니다
먼저 자체 보고된 벤치마크부터
시작해서
독립적인 평가자들의
비교도 살펴보겠습니다
소프트웨어 엔지니어링 측면에서 보면
이 모델은 다른 모든 것을 압도합니다
OpenAI의 최고 버전인
GPT-3.5도
49.3%밖에 얻지 못했고, DeepSeek은 49.2%
이처럼 모두 50% 미만인 반면
Claude 3.7 Sonnet은
최소 62.3%를 기록했습니다
이는 다른 최신 모델들과 비교해서
엄청난 차이입니다
정말 인상적이며, 3.7은
현재 코딩에 가장 적합한 옵션입니다
에이전트 도구 사용 측면에서 보면
이는 에이전트로서 행동하고
다양한 컴퓨터 인터페이스를 사용하는
능력을 테스트한 것인데, 여기서도
Claude 3.7이 OpenAI보다 더 뛰어납니다
다만 여기서 주의할 점은
에이전트 사용에 강점이 있는 Qwen과는
비교하지 않았다는 것입니다
즉, Claude 3.7이 이길 수 있는
모델들만 선택했을 수 있다는 점을 유의하세요
에이전트 사용에 대해 말하자면
완전히 새로운 벤치마크가 있습니다
AI가 포켓몬 게임을 얼마나 잘 하는지 테스트한 것인데
보여준 차트에 따르면
Claude 3.5는 비리디언 숲까지만 도달했지만
Claude 3.7 Sonnet은 모든 레벨을 통과하여
서지의 배지까지 획득했습니다
이는 얼마나 성능이 향상되었는지를
잘 보여주는 예시입니다
에이전트로서의 능력이 얼마나 뛰어난지를
잘 보여줍니다. 기본적으로 게임 화면을
분석하고 다음 행동을 결정하는 것이죠
하지만 여기서 주목할 점은 그들이
Claude의 이전 버전들과만 3.7을 비교했다는 것입니다
다른 경쟁 모델들은 포함시키지 않았기 때문에
실제로 3.7이 포켓몬 게임에서
OpenAI나 DeepSeek보다 더 나은지
판단하기가 어렵습니다
다음은 Claude 3.7의 성능을
보여주는 또 다른 유용한 표입니다
이를 통해 Claude 3.7이 잘하는 분야를 알 수 있죠
대학원 수준의 질문에서는
확장 사고 기능을 켜지 않으면
실제로 성능이 좋지 않습니다. OpenAI의 GPT-4, DeepSeek-1,
Grok-3보다도 성능이 떨어지죠
확장 사고 기능을 켰을 때만
더 높은 성능을 보이며
Grok-3와 비슷한 수준에 도달합니다
코딩 부분은 앞서 살펴봤듯이
Claude 3.7이 압도적으로 최고의 모델입니다
비교가 안 될 정도로 뛰어나죠
에이전트 도구 사용도 이미 살펴봤고
다국어 Q&A는 여전히
몇 달 전에 출시된 OpenAI GPT-4보다 낮은 성능을 보입니다
시각적 추론, 즉 이미지를 업로드해서
분석하는 부분에서도
좋긴 하지만 최고는 아닙니다
여전히 OpenAI GPT-4와 Grok-3보다 뒤처지죠
지시사항 이행 측면에서는
최고의 성능을 보입니다. 수학 문제 해결에서는
심층 사고 모드를 켜도
여전히 OpenAI GPT-4, GPT-4 Mini,
DeepSeek보다 약간 뒤처집니다
경쟁적 수학에서도 최고의 모델은 아닙니다
이제 독립적인 순위표를 살펴보겠습니다
여기 Abacus AI의
LiveBench 순위표가 있는데
흥미롭게도 Claude 3.7 Thinking이
전체 평균 76점으로
GPT-4 Mini High보다 약간 높은 1위를 차지했습니다
여기서 흥미로운 점은
코딩 평균이 실제로
GPT-4 Mini High보다 훨씬 낮지만
수학과 데이터 분석, 언어 부분에서는
GPT-4 Mini를 앞섰다는 것입니다
다른 순위표인 LM Arena를 보면
사용자들이 AI 모델들을 블라인드 테스트할 수 있는데
아직 Claude 3.7은 목록에 없습니다
3.5의 최신 버전만 있고, 그것도
19위에 머물러 있습니다
이 영상을 녹화하는 시점에서는
Claude 3.7이 LM Arena에서
얼마나 좋은 성능을 보이는지 알 수 없습니다
또 다른 독립 평가기관인 Artificial Analysis에서는
흥미롭게도 Claude 3.7 Sonnet이
8위에 머물러 있으며, Gemini와
DeepSeek, GPT-4, GPT-4 Mini보다도 뒤처져 있습니다
이는 비사고 모델일 수 있지만
그래도 좋은 결과는 아닙니다
더 좋은 모델들과 비교했을 때
토큰당 비용이 얼마나 더 비싼지 보세요
결과가 혼재되어 있어서
여러 순위표를 살펴보는 것이 중요합니다
모델의 실제 성능을
객관적으로 파악하기 위해서죠
마지막으로 'Humanity's Last Exam'이라는
벤치마크가 있는데, 이는 매우
오해의 소지가 있는 이름입니다
이것이 AGI를 의미하는 것도 아니고
AI가 이 테스트를 통과하면
인류를 파괴하고 세계를 지배한다는 뜻도 아닙니다
이는 기본적으로 매우 전문적인
분야의 어려운 질문들을 모은 것으로
대부분의 사람들이 잘 모르는
주제들입니다
여기 샘플 문제들이 있고
결과를 보면 Claude 3.7 Sonnet은 8.9점을 받았는데
DeepSeek R1과 GPT-4보다는
약간 높지만 일반 버전의
GPT-4 Mini보다도 낮은 점수입니다
이것으로 성능과 사양에 대한 설명을 마치고
궁극적인 질문으로 넘어가보겠습니다
Claude를 써야 할까요? 최고의 모델일까요?
아마도 48시간 정도만 그럴 겁니다
그 후에는 GPT-4.5가 출시되어
완전히 압도할 것이고, 아마도
다음 주에는 DeepSeek R2가 나와서
다른 모든 것들을 압도할 겁니다
끝이 없죠. 이런 속도라면
제가 휴가 갈 시간도 없을 것 같네요
여러분이 이 영상을 즐기셨길 바랍니다
댓글로 여러분의 생각을 알려주세요
Claude 3.7을 사용해보셨다면
지금까지의 경험을 공유해주세요
어떤 멋지고 인상적인 것들을
만들 수 있었는지 알려주세요
항상 그렇듯이 저는 최신 AI 뉴스와
도구들을 여러분과 공유하기 위해 살펴볼 것입니다
이 영상이 마음에 드셨다면
좋아요, 공유하기,
구독 버튼 눌러주시고 다음 영상을 기대해주세요
또한 매주 AI 분야에서
너무나 많은 일들이 일어나고 있어서
유튜브 채널에서 모든 것을 다룰 수는 없습니다
그래서 AI 분야의 최신 소식을
계속 접하고 싶으시다면
제 무료 주간 뉴스레터를
구독해주세요. 링크는
아래 설명란에 있습니다
시청해주셔서 감사합니다. 다음 영상에서
만나뵙겠습니다