[00:00]
이것은 현재 앱스토어 1위인 DeepSeek R1입니다.
[00:02]
이제 이것을 인기 있는 모든 모델들과
[00:04]
비교해보려고 합니다.
[00:06]
O3-mini, O1, 그리고 Qwen 2.5 Max를 포함해서
[00:10]
프로그래밍과 웹 디자인 측면에서
[00:12]
어떤 성능을 보이는지 테스트해보겠습니다.
[00:14]
먼저 작동 방식을 설명해드리겠습니다.
[00:16]
DeepSeek에 계정을 설정했고,
[00:18]
여기서 DeepSeek R1이 실행되고 있습니다.
[00:22]
Qwen 2.5 Max가 실행 중이고,
[00:24]
ChatGPT O1도 실행 중이며, 마지막으로 O3-mini가 있습니다.
[00:28]
이번 예제들에서는 O3-mini High를 사용할 예정입니다.
[00:32]
DeepSeek가 가끔 오프라인이 되는 문제가 있어서,
[00:34]
이를 해결하기 위해
[00:36]
Ollama에서 DeepSeek R1을 설정했습니다.
[00:40]
14B 파라미터의 로컬 모델로,
[00:42]
Docker 컨테이너에서 설정했습니다.
[00:44]
Open WebUI에서 마지막으로,
[00:48]
Wick Studio로 이동해서
[00:50]
템플릿 웹사이트를 설정했는데,
[00:53]
여기에 다양한 코드를 넣어서
[00:55]
모든 모델들의 성능을
[00:57]
다양한 작업에서 테스트해볼 것입니다.
[00:59]
첫 번째 도전 과제로 코드를 준비했는데,
[01:01]
여기에 여러 가지 실수를 넣었습니다.
[01:03]
JavaScript와 CSS 모두에 오류가 있고,
[01:05]
이제 DeepSeek로 가서
[01:07]
이 코드를 넣고 문제를 찾아내고 수정할 수 있는지
[01:10]
테스트해보겠습니다.
[01:12]
아무런 맥락도 제공하지 않을 것입니다.
[01:14]
Chain of Thought를 통해
[01:17]
문제를 파악할 수 있기를 바랍니다.
[01:19]
여기서 'menu'가 잘못 철자가 되었다는 것을 찾아냈고,
[01:21]
CSS의 최소 너비가
[01:23]
200em이 아닌 200픽셀이어야 한다는 것도 발견했습니다.
[01:26]
이렇게 문제들을 파악했고,
[01:29]
21초의 사고 시간 후에
[01:31]
두 가지 문제를 찾아내어
[01:33]
수정된 새로운 코드를 제공했습니다.
[01:36]
이제 Qwen 2.5 Max로 넘어가서
[01:38]
동일한 프롬프트를 시도해보겠습니다.
[01:42]
이것은 매우 빠르네요, 즉시 응답을 주고 있습니다.
[01:45]
보시다시피 menu 오타와
[01:47]
em 문제를 식별했을 뿐만 아니라,
[01:50]
더 나아가 드롭다운 메뉴가
[01:52]
페이지 로드 시 보이는 것을 발견했고,
[01:54]
display: none으로 시작해야 한다고 지적했습니다.
[01:56]
이벤트 위임 문제도 발견했네요.
[01:58]
이는 꽤 인상적인데요.
[02:00]
그리고 이벤트 위임 문제도 지적했고,
[02:02]
업데이트된 코드를 제공했는데
[02:05]
더 보기 좋게 정리되었고
[02:07]
응답 속도도 훨씬 빠릅니다.
[02:10]
지금까지 중에서는 이게 더 나은 응답이라고 봐야겠네요.
[02:13]
하지만 이 분야의 강자인
[02:14]
ChatGPT도 잊지 말아야겠죠.
[02:17]
마지막으로 테스트해보고
[02:19]
응답 시간도 체크해보겠습니다.
[02:21]
12초의 사고 시간이 걸렸는데,
[02:23]
DeepSeek보다는 빠르지만 Qwen보다는 느립니다.
[02:26]
menu 문제와 스타일링 문제를 찾아냈고,
[02:29]
그게 주된 내용이었습니다.
[02:31]
수정된 코드도 제공했네요.
[02:34]
이제 로컬에서 호스팅 중인 DeepSeek R1
[02:37]
14B 파라미터 Ollama 버전도 확인해보겠습니다.
[02:39]
이것도 몇 초밖에 걸리지 않았고,
[02:42]
menu 문제는 찾아냈지만
[02:44]
CSS 문제는 언급하지 않은 게 흥미롭네요.
[02:48]
하지만 아래로 스크롤해보면,
[02:51]
몇 가지 추가 수정사항을 제안했는데,
[02:52]
드롭다운 메뉴 위치가
[02:54]
10픽셀만큼 오프셋되어 있다는 점도 지적했습니다.
[02:57]
이는 매우 세밀한 관찰이네요.
[03:00]
이제 o3-mini High를 테스트해보는 것이 흥미롭네요
[03:03]
분석 시간이 훨씬 짧았고, 단 17초밖에 걸리지 않았습니다
[03:05]
맞춤법 오류와 스타일 문제에 대한 권장 사항만 제시했습니다
[03:08]
맞춤법 오류와
[03:10]
스타일링 문제에 대해서만 지적했네요. 이제 결과를 살펴보겠습니다
[03:12]
여기 작은 평가 카드가 있는데
[03:14]
각 모델에 대해 등급을 매기려고 합니다
[03:17]
이 모델들이 첫 번째 과제에서
[03:19]
어떤 성능을 보여줬는지 보여주기 위해서죠
[03:21]
그리고 우리가 진행하면서
[03:23]
다양한 유형의 과제들을 모두 더해볼 겁니다
[03:24]
첫 번째 결과에 대해
[03:27]
Qwen에게 A를 주겠습니다. 그 이유는
[03:30]
응답이 매우 빨랐고
[03:32]
많은 세부 사항을 매우 스마트하게 제공했기 때문입니다
[03:34]
존재하는지도 몰랐던 문제들에 대한
[03:36]
답변을 제공했고, 내가 알지 못했던
[03:38]
실수들도 지적해주었습니다
[03:40]
그리고 제가 의도적으로 넣어둔
[03:43]
오류들도 모두 수정해주었죠
[03:45]
DeepSeek와 OpenAI에 대해서는
[03:48]
둘 다 B를 주겠습니다
[03:51]
주된 이유는 DeepSeek가
[03:53]
좀 느렸는데, 이는 아마도
[03:55]
현재 인기가 많아서
[03:57]
서버에 부하가 많이 걸려있기 때문일 것 같습니다
[03:59]
하지만 여전히 좀 느렸고
[04:02]
분석이 다소 피상적이어서 두 가지
[04:04]
주요 문제만 식별했을 뿐
[04:06]
더 깊이 들어가지는 않았습니다. OpenAI도 마찬가지로
[04:09]
DeepSeek만큼 느리지는 않았지만
[04:12]
피상적인 답변을 제공했습니다. 마지막으로
[04:15]
로컬 버전 R1은 14억 개의
[04:18]
파라미터를 가지고 있는데, C를 주겠습니다
[04:21]
빠르기는 했지만
[04:24]
제가 의도적으로 넣은 것들 중 일부를 놓쳤기 때문입니다
[04:25]
예를 들어 CSS 실수에서
[04:28]
픽셀 값 대신 em 값을 넣은 것을
[04:30]
다른 모델들은 모두 발견했는데
[04:32]
이를 놓쳤죠. 두 번째 테스트는
[04:35]
코딩 테스트인데, 커스텀 마우스 커서를
[04:37]
생성하는 코드를 만들어보려고 합니다
[04:38]
링크에 마우스를 올렸을 때 작동하는
[04:40]
프롬프트를 준비했고
[04:42]
이것을 DeepSeek에 입력해서 50픽셀
[04:44]
× 50픽셀 크기의 청록색 마우스 커서를
[04:47]
웹사이트의 하이퍼링크 위에 마우스를 올렸을 때
[04:49]
나타나도록 만들어보겠습니다. 여기 응답이 왔는데
[04:52]
약 58초 정도 생각한 후에
[04:55]
CSS와 JavaScript 코드를
[04:57]
제공했습니다. 이 응답은
[04:59]
청록색 원을 만들고
[05:02]
마우스 움직임을 따라가도록 되어있습니다. 테스트해볼까요
[05:05]
이 코드를 넣어보고
[05:08]
웹사이트로 가보겠습니다
[05:10]
여기 하이퍼링크가 있고 마우스를 올리면
[05:13]
청록색 원이 보이는 것을 확인할 수 있습니다
[05:16]
한 가지 문제점이 있다면
[05:19]
원래 포인터가 사라지지 않았다는 점인데
[05:21]
이 부분이 개선되면 좋았을 것 같네요. 이제
[05:24]
Qwen 2.5 Max에서 이 프롬프트를 시도해보겠습니다
[05:27]
결과가 매우 빠르게 나왔네요
[05:29]
이 코드가 실제로 어떻게 작동하는지
[05:31]
테스트해보겠습니다. 스크립트에
[05:33]
추가하고 웹사이트로 가서
[05:35]
테스트해보니 완벽하게 작동하네요
[05:38]
이제 ChatGPT를 테스트해보겠습니다. 38초 동안
[05:42]
생각한 후에 이 코드를 출력했습니다
[05:45]
SVG를 생성했고
[05:49]
모든 것을 JavaScript 함수로
[05:51]
작성했으며, 여기에 추가할
[05:53]
예정입니다. 웹사이트에 붙여넣어보면
[05:56]
잘 작동하네요. 지금까지 중 가장 좋은 솔루션인 것 같습니다
[05:59]
이렇게 구현한 방식이 마음에 드네요
[06:01]
커서를 단순한 원이 아닌
[06:03]
삼각형처럼 보이는 것으로
[06:06]
바꾸었는데, 적어도 커서처럼
[06:08]
보여서 그 점은 높이 평가해야 할 것 같습니다
[06:11]
로컬에서 호스팅한 DeepSeek 모델은 어떨까요?
[06:13]
지금 처리 중이니 결과를 확인해보겠습니다
[06:16]
자, 이제 결과가 나왔네요
[06:17]
CSS 코드를 삽입하는 JavaScript 함수가 나왔습니다
[06:20]
코드를 여기에 적용해봤는데
[06:22]
실패했네요. 단순히 하이퍼링크의
[06:24]
a 태그 배경만 강조했을 뿐
[06:26]
커서는 거의 변화가 없습니다
[06:28]
변경사항이 전혀 없어서
[06:31]
안타깝게도 로컬의 DeepSeek R1 모델은
[06:33]
더 강력한 모델들만큼의
[06:35]
성능을 보여주지 못했다고 할 수 밖에 없습니다
[06:37]
이제 o3-mini-High를 테스트해보겠습니다
[06:39]
29초 동안 응답을 분석했는데
[06:42]
코드를 실행해보니
[06:44]
결과가 꽤 괜찮네요
[06:47]
마우스를 따라다니는 커스텀 커서를
[06:49]
만들어냈지만
[06:50]
다만 단순한 사각형 모양이라는 게
[06:52]
유일한 문제점입니다
[06:55]
이제 점수판을 업데이트해보죠
[06:57]
OpenAI가 확실히 최고의 솔루션을 만들어냈습니다
[06:59]
Qwen만큼 빠르진 않았지만
[07:02]
가장 똑똑한 결과를 보여주었고
[07:04]
커스텀 SVG를 만들어 마우스 포인터를 교체했죠
[07:06]
그 다음으로는 Qwen 2.5 Max가 좋았는데
[07:09]
굉장히 빨랐고 요청한 작업을
[07:13]
잘 수행했지만
[07:15]
OpenAI의 SVG 솔루션처럼
[07:18]
좀 더 복잡한 것을 만들 수도 있었는데
[07:19]
그래도 상당히 좋은 성능을 보여줬습니다
[07:22]
DeepSeek은 안타깝게도
[07:24]
다른 두 모델만큼 좋은 성능을 보여주지 못했고
[07:27]
속도도 느렸으며
[07:31]
답변을 제공할 때도 마우스 포인터를
[07:33]
실제로 교체하지 못해서
[07:35]
새로운 마우스 포인터와 기존 포인터가
[07:38]
동시에 겹쳐 보이는 문제가 있었습니다
[07:39]
DeepSeek R1 14억 파라미터 모델은
[07:43]
더 좋지 않은 결과를 보여줬는데
[07:45]
목표를 완전히 벗어났을 뿐만 아니라
[07:48]
전혀 다른 것을 수행했고
[07:49]
속도도 빠르지 않았습니다
[07:52]
이제 재미있는 실험을 해보겠습니다
[07:55]
웹 디자인에서는 어떤지 살펴보죠
[07:56]
여기 디자인이 있는데
[07:58]
여러 가지 실수들을 넣어뒀습니다
[07:59]
여러분도 찾을 수 있을지 모르겠네요
[08:01]
각 모델에게 물어보고
[08:03]
이러한 실수들을 얼마나 잘 찾아내는지
[08:05]
그리고 어떤 수정사항을 제안하는지 보겠습니다
[08:07]
DeepSeek에 업로드했고
[08:10]
여기에 있는 프롬프트로
[08:12]
어떤 권장사항이 있는지 물어봤습니다
[08:14]
24초 동안 생각한 후에
[08:17]
몇 가지 의견을 제시했는데요
[08:19]
우선 제가 추가한 오타들을 잘 찾아냈고
[08:21]
전반적으로 웹사이트가
[08:24]
시각적 계층구조와 레이아웃이 좋지 않다고 했습니다
[08:26]
템플릿이나 와이어프레임 같아 보인다고 했는데
[08:28]
흥미로운 요소가 없이
[08:31]
자리표시자 문구들만 있기 때문이라고 합니다
[08:33]
또한 간격이 좋지 않다는 점과
[08:36]
폰트와 색상의 문제점도 잘 찾아냈습니다
[08:38]
실제로 지금 웹사이트가
[08:40]
엉망진창으로 보이거든요
[08:42]
전반적으로 만족스러운 분석이었지만
[08:44]
구체적인 예시와
[08:46]
실제 권장사항에 대해서는
[08:48]
좀 더 자세히 설명할 수 있었을 것 같습니다
[08:50]
추천 사항을 테스트해볼 수는 없을 것 같습니다
[08:52]
Qwen 2.5 Max는 현재 이미지를 지원하지 않기 때문에
[08:55]
이 부분은 건너뛰어야 할 것 같네요
[08:57]
이미지 생성은 가능하지만
[08:59]
그것 나름대로 장점이 있긴 하죠
[09:01]
ChatGPT는 어떨까요?
[09:04]
O1은 파일 업로드가 가능하니 한번 테스트해보겠습니다
[09:07]
ChatGPT가 이미지 미리보기를 제공하는 것이 마음에 듭니다
[09:09]
어떤 분석을 내놓을지 한번 보겠습니다
[09:11]
제목이 적절하지 않다는 것을 짚어냈고
[09:13]
연락처 부분도 'Contact Us'로
[09:15]
바꾸는 것이 좋겠다고 제안했네요
[09:17]
확실히 더 나은 표현이죠
[09:19]
시각적 계층 구조가 잘못되었다고 지적했는데
[09:21]
그 이유도 상세히 설명해주었습니다
[09:23]
예를 들어 콘텐츠의 위치와 크기가
[09:25]
최적화되지 않았다고 설명했죠
[09:27]
색상 선택도 적절하지 않다고 지적했는데
[09:29]
브랜드 색상을 사용해야 한다고 제안했습니다
[09:32]
다만 한 섹션에서 사용된 빨간색에 대해서는
[09:35]
인식하지 못했네요
[09:36]
여백이 잘 정렬되지 않았다고 지적했는데
[09:39]
디자인이 떠 있는 듯한 느낌이 든다고 했죠
[09:41]
실제로도 그렇습니다
[09:43]
특히 제목 부분의 줄 간격이
[09:46]
너무 넓게 설정되어 있어서
[09:48]
이 점을 잘 짚어냈다고 생각합니다
[09:50]
'testing hyperlink'라는 부분도
[09:53]
불필요하다고 지적한 것이
[09:55]
좋았습니다
[09:56]
전반적으로 많은 요소들을
[09:58]
잘 파악했지만
[09:59]
이미지 위치가 부적절하다는 점이나
[10:02]
텍스트가 빨간색이라는 점은
[10:04]
어떤 모델도 파악하지 못했네요
[10:06]
이런 점들을 파악했으면 좋았겠지만
[10:08]
AI 모델들이 웹 디자이너로 훈련되지는 않았으니까요
[10:11]
주어진 과제에 대해
[10:13]
꽤 괜찮은 성과를 보여줬다고 생각합니다
[10:15]
이제 DeepSeek R1 14B 모델로
[10:17]
넘어가보겠습니다
[10:19]
이미지를 다시 한 번 업로드하고
[10:21]
어떤 결과가 나오는지 확인해보겠습니다
[10:23]
여러 가지 고려사항을 생각하는 데 시간이 걸렸지만
[10:27]
실질적인 내용은 많지 않았습니다
[10:30]
웹 디자인의 일반적인 원칙만 나열했을 뿐
[10:32]
이 디자인의 구체적인 문제점이나
[10:34]
이슈에 대해서는 언급하지 않았네요
[10:36]
마지막으로 O3와 O3-mini High는
[10:38]
현재 이미지를 지원하지 않아서
[10:41]
웹 디자인 평가를 할 수 없었습니다
[10:43]
이제 점수를 매겨보겠습니다
[10:45]
OpenAI가 확실히 가장 좋은 성과를 보여줬습니다
[10:48]
평균적인 시간이 걸렸지만
[10:51]
가장 스마트한 답변을 제공했고
[10:53]
디자인 개선을 위한 구체적인 사항들을
[10:56]
잘 짚어냈습니다
[10:58]
2위는 DeepSeek인데 A등급을 주겠습니다
[11:01]
좀 더 느렸고 평균적인 결과를 보여줬지만
[11:03]
디자인과 관련된 제안들을
[11:05]
잘 제시했기 때문입니다
[11:08]
Qwen은 아쉽게도
[11:10]
이미지를 처리할 수 없어서 등급을 매길 수 없고
[11:12]
14B DeepSeek R1 모델은
[11:15]
새로운 카테고리가 필요한데
[11:18]
F 등급을 부여하겠습니다
[11:38]
안타깝게도 이 부분에서는 실패했다고 생각합니다
[11:41]
실질적인 추천사항을 제공하지 않았을 뿐만 아니라
[11:43]
마치 디자인을 전혀 보지도 않은 것처럼
[11:45]
동작했기 때문입니다
[11:47]
이제 전체적인 평가를 해보겠습니다. OpenAI는
[11:50]
전반적으로 A등급을 받을 만합니다.
[11:53]
전체적으로 우수한 성능을 보여줬고
[11:55]
Qwen은 코딩 작업과
[11:58]
일반적인 작업에서 상당히 좋은
[12:00]
성과를 보여줬습니다. B등급을 주겠습니다
[12:02]
DeepSeek도 마찬가지로 B등급입니다
[12:04]
DeepSeek이 프로그래밍이나 디자인에서 뛰어나지는 않지만
[12:07]
전반적으로 모든 영역에서
[12:09]
좋은 성능을 보여줬기 때문에
[12:11]
비용 대비 성능이 인상적이었고
[12:13]
현재 무료로 사용할 수 있다는 점에서
[12:15]
매우 긍정적으로 평가됩니다
[12:17]
마지막으로 로컬에서 실행되는 DeepSeek R1
[12:20]
140억 파라미터 모델은 기대했던 것보다
[12:23]
성능이 좋지 않았습니다. 이는 아마도
[12:25]
더 작은 모델을 실행했기 때문일 수 있고
[12:27]
앞으로는 더 큰 모델을 시도해봐야 할 것 같지만
[12:28]
현재로서는
[12:30]
E등급을 주겠습니다
[12:32]
오픈소스로 제공되어 오프라인에서
[12:35]
실행할 수 있다는 점은 좋지만
[12:36]
좋은 모델을 실행하기 위해서는
[12:39]
상당한 하드웨어가 필요하고
[12:41]
대부분의 사용자들이 사용하는
[12:43]
하드웨어에서 테스트하는 것이 중요합니다
[12:44]
이번 테스트를 통해 얻은 결론은
[12:47]
DeepSeek에 대한 과대 평가된 기대가
[12:49]
모두 사실은 아니라는 것입니다. 반면
[12:51]
Qwen 2.5 Max는 코딩 측면에서
[12:54]
확실히 인상적인 결과를 보여줬습니다
[12:55]
여러분이 웹 디자인이나 노코드, 또는 AI에
[12:57]
대해 더 자세히 알고 싶으시다면
[12:59]
이 모든 내용을 다루는 작은 강좌를
[13:02]
준비했습니다
[13:03]
아래 설명란에서 확인하실 수 있으며
[13:05]
무료로 제공되니 꼭 확인해보세요
[13:07]
그럼 다음 영상에서 만나뵙겠습니다
[13:08]
감사합니다