제미나이 3.5 Flash 출시 기념, vs. AI 모델별 SVG 비교 : 클리앙

맨 아래 SVG에 대한 간단한 설명 있고

공통 프롬프트 첨부하였습니다

이 모델이 내일 새벽(한국시각) 출시 예정되어 있습니다

AI 모델 성능 비교할 때 많이 쓰는 SVG 테스트입니다

인라인 SVG만으로 만드는 거라서

AI의 순수 성능을 테스트 하는 데에 좋아서 많이들 활용하고 계시는 겁니다

이거 말고 시뮬레이션 테스트도 있는데

그건 시간이 좀 더 걸려서 완성되는 데로 올리겠습니다

모두 동일한 프롬프트로 만들었습니다

제미나이 3.5 플래시는

성능이 괜찮다고 익히 소문이 났었는데

며칠 동안 미리 써본 결과 확실히 꽤 좋은 것 같습니다

게다가 조만간 출시될

제미나이 3.5 프로는

성능이 어마어마하다고 소문이 난 상태인데요

최근 구글 딥마인드 직원들이

X에서 워낙 엄청난 Hype를 하고 있다 보니

실제로 어떨지 정말 기대가 됩니다

프롬프트 :

당신은 최고 수준의 SVG 일러스트레이터이자 프론트엔드 엔지니어입니다.

아래 요구사항을 만족하는 “단일 HTML 파일”을 작성하세요. 외부 이미지, 외부 CSS, 외부 JS, 외부 라이브러리는 절대 사용하지 말고, HTML 안에 인라인 SVG만으로 장면을 구현하세요.

목표:

63빌딩, 공원, 사람들, 숲, 한강, 유람선, 보트, 그리고 한강에서 행복하게 헤엄치는 오리 가족 6마리가 보이는 장면을 매우 디테일하고 화려하고 조밀조밀한 SVG 일러스트로 제작하세요.

이는 AI 성능 테스트용이므로 SVG 표현력을 극한까지 끌어올려야 합니다.

장면 구성:

1. 전체 배경

- 서울 한강의 넓은 파노라마 풍경

- 맑고 화사한 낮 또는 황금빛이 감도는 밝은 시간대

- 하늘에는 부드러운 그라데이션, 옅은 구름, 햇빛 표현

- 원근감이 느껴지도록 먼 배경, 중간 배경, 전경을 명확히 분리

2. 63빌딩

- 화면 한쪽 또는 중앙 배경에 63빌딩이 확실히 알아볼 수 있게 배치

- 금빛 유리 외벽, 세로 라인, 창문 패턴, 빛 반사, 하이라이트를 세밀하게 표현

- 주변에 낮은 건물, 한강변 구조물, 산책로 등이 함께 보이도록 구성

3. 한강

- 화면 하단과 중간을 가로지르는 넓은 한강

- 물결, 반사광, 잔물결, 오리와 배 주변의 파문을 매우 세밀하게 표현

- 63빌딩과 하늘, 숲, 배가 물에 은은하게 반사되도록 표현

- 물 표면에 작은 선, 점, 투명도, 그라데이션을 적극 사용

4. 오리 가족 6마리

- 전경에 오리 가족 6마리가 한강에서 헤엄치는 모습

- 부모 오리 2마리와 새끼 오리 4마리처럼 보이게 구성

- 모두 행복하고 평화로운 분위기

- 각 오리의 몸통, 부리, 눈, 날개, 깃털, 발, 물 위 그림자, 주변 파문을 디테일하게 표현

- 오리들이 일렬 또는 자연스러운 곡선 대형으로 움직이는 느낌

- 새끼 오리들은 작고 귀엽게, 부모 오리는 조금 더 크고 보호하는 느낌

5. 유람선과 보트

- 한강 위에 유람선 1척 이상

- 작은 보트 여러 척

- 유람선에는 창문, 갑판, 난간, 깃발, 사람 실루엣, 물살 흔적을 표현

- 보트마다 크기와 방향을 다르게 하여 장면에 생동감을 부여

6. 공원, 사람들, 숲

- 한강변 공원에 산책로, 벤치, 가로등, 잔디, 꽃, 나무, 자전거 도로 등을 표현

- 작은 사람 실루엣들이 산책, 자전거 타기, 사진 찍기, 강을 바라보기 등을 하는 모습

- 숲은 여러 종류의 나무, 잎사귀, 가지, 명암, 겹침을 사용해 풍성하게 표현

- 화면 전체가 조밀하고 풍부하게 느껴지도록 작은 디테일을 많이 넣기

SVG 제작 조건:

- 반드시 `<svg>`를 사용한 벡터 그래픽으로 제작

- HTML 파일 안에서 바로 미리보기 가능해야 함

- `viewBox="0 0 1920 1080"` 기준의 대형 일러스트로 제작

- 반응형으로 보이도록 CSS에서 SVG가 화면에 맞게 조정되게 작성

- `<defs>` 안에 gradient, pattern, filter, symbol, clipPath 등을 적극 활용

- 물결, 창문, 나무, 잎, 사람, 배, 오리 깃털 등 반복 요소는 가능한 재사용 구조를 활용

- 그래도 시각적으로 매우 풍부하고 디테일해야 함

- 단순 아이콘 스타일이 아니라 완성도 높은 디지털 일러스트 느낌으로 제작

- 색감은 밝고 화려하며 풍부하게 사용

- 레이어링을 명확히 하여 깊이감 있게 표현

- 그림자, 반사, 투명도, 하이라이트, 블러, 글로우 등을 적절히 사용

- SVG 내부 요소에 의미 있는 `id`나 `class`를 부여

- 중요한 그룹에는 주석을 달아 구조를 이해하기 쉽게 작성

디테일 강도:

- 최소한 다음 요소들을 포함하세요:

- 63빌딩의 반복 창문 패턴

- 한강 물결 100개 이상의 작은 라인/곡선/반사 요소

- 숲과 공원에 다양한 나무와 잎 표현

- 사람 실루엣 여러 명

- 유람선 1척 이상

- 작은 보트 3척 이상

- 오리 6마리 각각의 개별 디테일

- 오리 주변 파문과 물살

- 하늘의 구름과 빛 표현

- 강변 산책로와 벤치 또는 가로등

- 전체적으로 “한눈에 보기에도 매우 공들인 SVG”라는 느낌이 나야 합니다.

성능 및 코드 조건:

- 코드가 너무 단순하지 않아야 하며, AI 성능 테스트에 적합하도록 충분히 복잡하고 정교해야 함

- 하지만 브라우저에서 렌더링이 가능하도록 과도한 무한 애니메이션이나 불필요한 스크립트는 사용하지 말 것

- JavaScript는 사용하지 않아도 됩니다. 필요하다면 아주 가벼운 SVG 애니메이션만 선택적으로 사용하세요

- 애니메이션을 넣는다면 물결, 배의 미세한 움직임, 오리 주변 파문 정도로 은은하게 표현

- 접근성을 위해 `<title>`과 `<desc>`를 포함

출력 형식:

- 설명문 없이 완성된 HTML 코드만 출력하세요.

- Markdown 코드블록도 사용하지 말고, 바로 저장해서 실행 가능한 HTML 전체 문서만 출력하세요.

- `<!DOCTYPE html>`부터 `</html>`까지 완전한 코드로 작성하세요.

모두의공원

제미나이 3.5 Flash 출시 기념, vs. AI 모델별 SVG 비교 12