가상의 이벤트를 기획했다.
 “인공지능 사용자 스무 명 정도가 모여 친교를 다지고 정보를 교류하는 루프탑 모임. 너무 심각한 행사는 아님.” HTML과 CSS 코드 생성을 어느 인공지능이 잘 하는지 비교해보는 게 테스트의 핵심이다.

한 시대를 주름잡던 ‘나모웹에디터’를 기억하시는지? 요샛말로 “나모웹에디터 알면 암 건강검진 받을 나이”라고 놀리겠지만, 아무려나 옛날 사람은 홈페이지 만들 때 나모웹에디터를 썼다.
 요즘은? 홈페이지를 만들 때 인공지능을 쓸 수 있을까??
그래서 해봤다.
 가상의 모임 행사를 알리는 이벤트 웹페이지 제작을 AI에게 맡겨봤다.
 여러 모델 중 누가 최고인지 성능도 비교해봤다.
 결론만 말하자면, AI모델 중에서 클로드(Claude)가 제일 좋았다.

테스트는 4단계로 진행됐다.

1단계: 홈페이지에 들어갈 내용을 인공지능으로 만들기
2단계: 상단 배경의 큰 이미지를 인공지능으로 만들기
3단계: HTML과 CSS 파일 인공지능으로 생성하기
4단계: AI가 작성한 파일을 이용해 인간이 홈페이지 발행하기
HTML과 CSS는 웹페이지를 보여주는 기초 파일들이다.
 이 3단계 HTML과 CSS 코드 생성을 어느 인공지능이 잘 하는지 비교해보는 게 테스트의 핵심이다.
 비교 대상은 연재 1탄과 마찬가지로 챗지피티, 제미나이, 클로드 등 인공지능 3종이었다.

1단계: 홈페이지에 들어갈 내용을 인공지능으로 만들기
먼저 다음과 같은 가상의 이벤트를 기획했다.
 “인공지능 사용자 스무 명 정도가 모여 친교를 다지고 정보를 교류하는 루프탑 모임. 너무 심각한 행사는 아님.”
이런 행사를 언젠가 실제로 열면 좋겠다! 나중에 행사를 열면 독자님을 모시겠다고 약속드린다.
 아직은 우리의 공상일 뿐이다.
 그래서 인공지능에게 행사 세부 기획을 맡겨봤다.
 모델은 제미나이 2.5 프로를 썼다.
 제미나이는 상상력을 동원해 자세한 기획을 짰다.
 모임의 목적과 성격을 밝히고 홈페이지 디자인의 큰 그림을 제시했다.
 ‘AI 커넥트 서울’이라는 근사한 행사명도 지어줬는데, 우린 ‘서울’ 대신 ‘AI 커넥트 봉천동’으로 바꿔서 진행했다.

2단계: 홈페이지에 들어갈 이미지를 인공지능으로 만들기
홈페이지를 그럴싸하게 만들려면 첫 화면 상단 배경에 큰 그림을 넣어주는 게 좋다.
 이걸 히어로 배너(hero banner)라고 한다.
 챗지피티4o에 인공지능 동호회 사람들이 모여 파티를 하는 분위기의 이미지를 부탁했다.
 크기 조정 등 몇 번의 시도 끝에 아래 같은 이미지를 만들어냈다.

챗지피티4o가 그린 ‘인공지능 동호회 사람들이 모여 파티하는 분위기의 이미지’.
3단계 HTML과 CSS 파일 생성
이 기획안과 그림을 바탕으로 홈페이지 파일 즉, HTML과 CSS을 만들어봤다.
 각 인공지능에게 공통적으로 주문한 과제 내용(프롬프트)은 이러했다.
 “위 기획안과 이미지를 보고 행사 내용을 다 담은 웹페이지의 HTML과 CSS 파일을 제작해줘. 홈페이지의 메뉴가 여러 개가 있으므로 하위 페이지도 여러 개 만들어야 해. 감각적이고 멋있는 디자인의 웹페이지를 만들어줘. 첨부한 이미지는 히어로 배너 이미지야. 이 히어로 배너를 ‘img/hero_banner.png’ 파일명으로 넣어줘.”
4단계 홈페이지 발행
이렇게 AI에게 명령을 실행하면 아래 그림처럼 AI는 자동으로 HTML과 CSS코드를 짠다.

‘AI 커넥트 봉천동’ 행사 홈페이지 제작을 위해 AI가 자동으로 짠 HTML과 CSS 코드 화면.
‘난 프로그래밍은 하나도 몰라. 이런 거 주지 마’라고 달아나실 필요는 없다.
 코드 내용은 몰라도 된다.
 요즘 AI는 저 코드가 어떻게 구현되는지 미리보기 기능이 있다.
 예를 들어 챗지피티는 오른쪽 상단에 미리보기 버튼이 있다.

물론 미리보기로 나오는 홈페이지 화면과 실제 대중이 보는 화면이 다를 수 있으므로, 확실하게 하려면 출판(Publish)이라는 과정을 거쳐야 한다.
 비전문가인 독자 분들을 위해 자세한 과정은 생략한다.
 다만 비주얼스튜디오코드(VS code)와 깃헙(Github)을 이용했다는 정도까지만 남긴다.

총평
결과물은 아래와 같다.
 홈페이지 링크를 클릭해보시라.
1.
챗지피티(o4 mini-high)
martinshin.github.io/web-comparison/chatgpt
2.
제미나이(pro 2.5)
martinshin.github.io/web-comparison/gemini
3.
클로드(sonnet 3.7)
martinshin.github.io/web-comparison/claude
이제 비교 평가를 해보자. 세 인공지능 모델은 모두 괜찮은 홈페이지를 만들어냈다.
 솔직히 기대 이상이었다.
 ‘딸깍’ 한번으로 만들어낸 HTML이나 CSS 코드에 딱히 뭘 건드리거나 고칠 것이 없었다.
 기획안 내용의 맥락을 스스로 파악해 행사 목적, 주최자, 행사 순서 등 여러 세부 페이지를 만들어냈다.
 모바일 화면과 PC화면에 모두 적용되는 반응형 홈페이지로 만들었다.

하지만 챗지피티의 경우는 아쉬운 점이 있었다.
 HTML 파일이 6개로 구성되는 웹페이지인데, 이 여러 HTML 파일코드를 단 하나의 출력화면에 모아서 보여줬다.
 우리는 일일이 부분 복사를 해 가면서 각 파일을 저장하는 번거로운 일을 해야 했다.
 제미나이나 클로드는 이런 불편이 없었다.
 편리함이라는 측면에서 챗지피티는 탈락.
제미나이와 클로드는 막상막하로 딱히 우열을 가리기 힘들었다.
 하지만 디자인의 측면에서 클로드가 좀 더 낫다고 판단했다.
 메뉴 항목에 마우스를 올려두었을 때 동적으로 반응하는 효과(마우스 오버)도 클로드가 나았다.
 무엇보다 클로드는 다른 AI는 생각하지 않은 자바 스크립트 파일도 만들었다는 점이 차별성이 있었다.
 최종적으로 클로드 우승, 제미나이 2등으로 판정한다.
 사실 홈페이지 제작뿐만이 아니라 다른 프로그램 코딩에서도 클로드가 낫다는 게 우리의 평가다.

그리고 재미있는 실험
연재 1탄(회의록 작성 AI, 누가 제일 잘 하나) 때와 마찬가지로 우리는 이번에도 재미있는 실험을 해보았다.
 각각의 인공지능끼리 서로가 만든 홈페이지를 평가하면 어떨까? 챗지피티, 클로드, 제미나이에게 각자가 짠 코드를 서로 비교해 점수를 매겨보도록 시켜봤다.
 과연 팔은 안으로 굽을까?
놀랍게도 AI들은 정직했다.
 먼저 챗지피티 심사위원은 10점 만점에 클로드 8점, 제미나이 7점, 챗지피티 6점으로 스스로를 가장 박하게 평가했다.
 클로드 심사위원은 클로드 9점, 챗지피티 7점, 제미나이 6.5점을 줬다.
 제미나이 심사위원은 매우 겸손하게도 클로드 7점, 챗지피티 4점, 제미나이 3점을 줬다.
 요약하면 인공지능 심사위원단은 만장일치로 클로드가 1등이라고 평가했다.
 우리 인간 심사위원단의 평가와 다르지 않았다.

사실 인공지능 심사위원단에서 제미나이가 점수가 나빴던 이유는, 우리 인간 심사위원이 과소평가했던 홈페이지 글귀 속 오타 때문이었다.
 엄밀함 면에서 인공지능 심사위원이 더 정확했는지도 모른다.

마지막으로 명심할 것. 모든 테스트는 2025년 5월4일을 기준으로 했다.
 독자가 이 글을 읽을 쯤에는 또다른 업데이트가 있어서 결과가 달라질지 모른다.