[인공 지능 챗봇 10개 모델] HTML, 자바스크립트 코딩 능력 비교

다음 10개의 인공 지능 모델에게 자바스크립트(JavsScript)와 CSS를 포함하는 HTML 코딩을 하도록 요청하고 결과를 비교해 본다.
GPT 4o
GPT o1
GPT o3-mini
GPT o3-mini-high
Claude 3.5 Sonnet
DeekSeek V3
DeepSeek R1
Qwen2.4-Max
Groq (Deepseek-R1-Distill-Llama-70b)
Ollama (DeepSeek-R1-Distill-Qwen-14b)
코딩 예제
[1]
다음과 같은 HTML 문서를 작성한다. JS와 CSS는 별도의 파일로 구성한다.
화면 상단 중앙에는 오늘 날짜를 보여준다. 형식: 2025년 5월 5일 월요일
그 아래에 현재 시간을 보여준다. 형식: 오전 9시 50분 42초
그 아래 원형의 아날로그 시계를 보여준다. 시침과 분침, 초침이 모두 표시된다. 단, 초침은 붉은 색으로 한다.
시침의 길이는 분침보다 짧게 한다.
[2]
다음과 같은 HTML 문서를 작성한다. JS와 CSS는 별도의 파일로 구성한다.
화면 상단 중단에 '시작' 버튼이 있다.
화면 중앙에는 지름 100픽셀의 파란 공과 지름 60픽셀의 붉은 공이 나란히 붙어있다.
'시작' 버튼을 클릭하면 '시작'이라는 글자가 '중지'로 바뀌고, 이 두 공이 랜덤하게 화면을 돌아다닌다.
이 두 공은 움직이다가 상하좌우 경계에 닿으면 방향을 바꿔 움직이다.
움직이는 도중에 두 공이 서로 부딪치면 바로 방향을 바꾸면서 파란 공은 지름이 90픽셀이 되고, 붉은 공은 70픽셀이 된다. 이후 계속 움직이다 서로 부딪치면 파란 공은 지름이 10픽셀씩 작아지고, 붉은 공은 10픽셀씩 커진 후 계속 움직인다.
두 공의 크기가 같아지면 모두 노란색으로 바뀌고, 이후 다시 충돌하면 움직임을 멈추면서 '중지' 버튼은 '시작'으로 바뀐다.
도중에 '중지' 버튼을 누르면 '중지'라는 글자가 '시작'으로 바뀌고 원래 상태로 리셋한다.
#AI #인공지

[@제리아부지]

잘봤습니다 고생하셨습니다!

[@cantips]

감사합니다

[@성이름-e2d9c]

의외로 o3 mini가 상당히 좋네요

[@성이름-e2d9c]

O3 mini high 실망인데..?

[@e2daybreak]

DeepSeek는 잘못 만들었네요. 시침 분침 방향이 다릅니다.

[@cantips]

좋은 지적 감사합니다

[@YzX-m3t]

Gemini thinking 모델 빠졌네요 이거 괜찮던데 무료 한도도 최고 많고 이 영상 제작자는 어느 정도 정리된 프롬프트를 제시했지만 코딩하다 보면 수시로 프롬프트를 바꾸다 보면은 여기서 시험한모델들은 무료 사용자의 경우 한도가 다 날라갑니다 어떤 주제에 관해코딩을 이번에 나온gemini o3 미니 클로드 r1정도 해 봤는데 다른 것들은 프롬프트 아무리 알아듣게 바꿔도 결과가 안 나왔는데 재미나이는 약간만 수정해 줬는데도 바로 결과를 내줬습니다 두 번 다 어려운 문제 부딪혔을 때 두 번 다 그렇게 해 주더군요 재밌는 건 다른 모델들은 변수명을 구 버전으로 코딩해 줘서 해 보면 오류 나서 신버전 이름으로 바꾸라고하는데 재미나에는 깔끔하게 처음부터 신버전 변수명으로 해줌 사람들이 특히 활용 못 하는게 다른 모델들은 오디오 입력 안 되는데 오디오 입력도 되고 한도도 넉넉하고 내가 볼 때는 이용하기에 따라서현시점 제일 낫습니다 다른 모델들 아무리 질이 좋아도 조금만 시행착오하면 한도 차 버리는데 재미나이는 이것저것 해도 한도가 아직 많이 남았기 때문에 다른게 아무리 질이 좋아도 재미나에는 양으로 압도하기 때문에 자꾸 하다 보면은 그 좋은 질에도 도달할 수 있습니다 그런데 질 도 안 떨어짐 아까도 얘기했지만 코딩해 본 결과 거의 두세 번 만에 결과나옴 그리고 속도도 젠스파크 딥시크에 비하면 훨씬 빠름 챗gpt 퍼플렉시티 클로 보다는 약간 느리고 한마디로 이용하기 따라서 현시점 최곤데 사람들이 잘 모르는 거 같음 오디오 입력 텍스트 입력 용량도 넉넉함

[@cantips]

좋은 정보 감사합니다

[@Sup3rS41y4n]

잼민이 콰악 씨🎉발🎉 바로 LLM 정상화