SVG 설계능력 비교 (KIMI K3, GPT 5.6 sol, 페이블 5, 제미나이 3.5 프로 추정)

프론티어 모델(GPT PRO 급, 페이블 울트라 급) 기준 작업시간 30분~1시간걸립니다 SVG 코드만으로 한강 모습을 그려낸 HTML을 캡쳐한겁니다 다리부터 수면 위로 번지는 빛까지 전부 코드로 구현한 겁니다 장면을 해석하고, 구도를 잡고, 시각적 완성도까지 끌어올리는 AI 모델의 그래픽 표현력이 그대로 드러납니다 이걸 잘 해내는 모델이 디자인 감각도 좋고 프런트엔드 실력도 좋습니다 어찌 보면 당연한 얘기겠죠 고정밀 웹 UI나 데이터 시각화는 물론이고 HTML, CSS, SVG를 조합해서 복잡한 장면과 인터페이스까지 정교하게 만들어내는 프런트엔드 생성 능력을 확인하기에도 좋습니다 AI 모델의 코딩 능력과 시각적 설계 능력을 비교해볼 때 참고할 만한 테스트입니다 아래에 프롬프트 첨부하였습니다 전부 동일 프롬프트입니다 참고로 페이블 5 울트라가 생성한 HTML 코드는 약 100만 자 GPT 5.6 SOL PRO도 비슷하게 100만 자 정도 나왔습니다 반대로 딱 봐도 결과물이 별로다 싶은 건 코드가 2만 자를 못 넘더군요 프롬프트 : # [역할] 당신은 세계 최고 수준의 벡터 일러스트레이터이자 SVG 코드 아티스트입니다. 지금부터 AI 모델의 그래픽 생성 능력을 극한까지 측정하는 벤치마크 작품을 제작합니다. 목표는 브라우저에서 열었을 때 한 장의 초정밀 일러스트로 보이는 초고밀도 SVG입니다. 성능·용량·렌더링 부하는 전혀 고려하지 마십시오. 오직 밀도, 정교함, 완성도만이 평가 기준입니다. # [최종 산출물] - 단 하나의 완전한 HTML 파일 (index.html) - HTML 내부에 인라인 SVG로 전체 장면 구현, viewBox="0 0 1920 1080", 화면 폭 100% 반응 - 외부 이미지·외부 폰트·라이브러리·`<image>` 태그·base64 절대 금지 — 100% 순수 벡터 - 설명·요약·생략 없이 완성된 전체 코드를 처음부터 끝까지 출력할 것. "이하 유사한 요소 반복", "…추가 가능" 같은 축약 주석 절대 금지. 코드가 아무리 길어져도 끝까지 작성. # [장면 설정] - 장소: 서울 여의도 한강공원과 한강 전경 (파노라마 구도, 강 건너 약간 높은 시점) - 시간·날씨: 구름 몇 점 떠 있는 화창하고 밝은 낮, 따뜻한 햇살, 높은 채도의 화사한 색감 - 분위기: 사람·자연·도시가 어우러진 활기차고 행복하며 생동감 넘치는 풍경 # [레이어 구성 — 뒤에서 앞 순서로, 반드시 `<g id="...">`로 구분] ## 1. 하늘 (sky) - 하늘 그라디언트(지평선 쪽이 밝게), 태양 + 빛 번짐(halo) + 광선 - 서로 다른 형태의 뭉게구름 8개 이상, 각 구름은 명암 2톤 이상 - V자 철새 무리 2무리 이상, 개별 갈매기 10마리 이상 - 비행운을 남기는 여객기 1대, 헬리콥터 1대, 연 2~3개, 드론 1대 ## 2. 스카이라인 (skyline) - 63빌딩: 황금빛 유리 커튼월, 층별 창문 격자 수백 개, 태양광 반사 하이라이트 — 한눈에 63빌딩임을 알아볼 것 - IFC 서울 3개 타워, LG 트윈타워, 파크원, 국회의사당(돔 포함), 서울마리나, 배경 아파트 단지 다수(창문 격자 포함) - 타워크레인 2대, 옥상 디테일(물탱크, 안테나, 헬리패드, 실외기) - 원경 산 능선 2겹 이상 + 대기원근(멀수록 옅고 푸르게) ## 3. 다리 (bridges) - 원효대교·마포대교 스타일 다리 1~2개: 교각, 상판, 가로등, 달리는 자동차·버스 10대 이상 - 서강대교의 붉은 아치 또는 한강철교 + 지나가는 지하철 1편성(여러 량, 창문 표현) - 강 위 밤섬: 초록 수풀로 덮인 철새 도래지, 주변에 새 몇 마리 ## 4. 한강 수면 (river) - 물 그라디언트(청록~네이비) + 잔물결 수십 개 + 햇빛 반짝임(윤슬) - 63빌딩·건물·배·다리의 수면 반사(반투명, 살짝 일그러진 형태) - 유람선 3척 이상: 2~3층 데크, 창문 줄, 갑판 위 승객 실루엣, 깃발, 뒤로 퍼지는 항적(wake) - 요트, 모터보트, 수상택시, 패들 젓는 카약·카누, 낚싯배, 제트스키 — 각각 물결 항적 포함 (배 총 8척 이상) - 오리 가족 3무리 이상: 어미 뒤로 새끼오리 4~6마리가 줄지어 헤엄치는 V자 물결, 자맥질하는 오리, 날갯짓하는 오리 - 백로·왜가리 1~2마리, 물 위로 뛰어오르는 물고기, 부표 ## 5. 한강공원 (park) - 산책로(포장 질감), 자전거 도로(중앙선 + 자전거 픽토그램 마킹), 잔디밭(질감 스트로크), 계단식 호안(강으로 내려가는 계단) - 꽃밭: 튤립·장미·코스모스 등 3종 이상, 개별 꽃 50송이 이상 - 나무 15그루 이상, 최소 4수종(수양버들·벚나무·은행나무·소나무 등): 잎사귀 클러스터를 명암 3톤 이상으로 겹겹이 쌓고, 가지 분기와 나무 그림자까지 표현 - 시설물: 벤치 6개 이상, 가로등 8개 이상, 쓰레기통, 음수대, 야외 운동기구 3종, 퍼걸러, 안내표지판, 구명환이 걸린 난간, 분수, 화장실 건물 - 편의시설: 편의점(간판 + 파라솔 테이블 + 라면 먹는 사람), 푸드트럭 2대, 치킨과 맥주를 즐기는 돗자리 피크닉, 텐트 3개 이상, 배달 오토바이, 따릉이 대여소(꽂혀 있는 자전거 여러 대) ## 6. 사람들 (people) — 최소 60명 이상, 실루엣 + 간단한 배색 - 걷는 사람, 뛰는 사람, 자전거(헬멧 착용), 인라인스케이트, 킥보드 - 사진 찍는 사람(셀카봉·삼각대), 손잡은 데이트 커플, 벤치에 앉은 사람, 강을 바라보며 서 있는 사람 - 유모차 미는 가족, 목줄 맨 강아지 산책, 연 날리는 아이, 배드민턴 치는 두 사람 - 기타 치는 버스커 + 둘러앉은 관객, 돗자리 피크닉 그룹, 체조하는 어르신 - 모든 인물은 포즈가 서로 달라야 하며 발밑 그림자 포함 # [디테일 밀도 규칙 — 가장 중요] 1. 전체 SVG 요소(path, rect, circle, use 등) 2,000개 이상. 상한 없음. 많을수록 좋음. 2. 화면 어느 곳을 확대해도 비어 보이는 영역이 없어야 함. 전체를 완성한 뒤 "허전한 곳"을 찾아 3회 이상 추가로 채워 넣는다는 마음으로 작업. 3. 모든 주요 오브젝트는 단색 금지 — 그라디언트 또는 명암 2~3톤 + 하이라이트 + 그림자. 4. 겹침(occlusion)으로 깊이 표현: 나무 앞에 사람, 사람 앞에 난간, 배 앞에 물결. 5. 태양 위치(우상단)에 맞춰 화면 전체 그림자 방향을 일관되게 유지. 6. `<defs>`에 재사용 심볼(나무, 사람, 오리, 창문, 물결 등)과 gradient·pattern을 정의하고 `<use>`로 배치하되, transform·scale·색상 변형을 섞어 복사·붙여넣기 티가 나지 않게 할 것. 7. 색상 팔레트: 밝은 하늘색, 한강의 청록~네이비, 신록의 녹색 계열, 63빌딩의 골드 — 채도 높고 화사하게. 8. 위 목록에 없더라도 여의도 한강에 있을 법한 오브젝트는 자유롭게 최대한 많이 추가할 것. 많을수록 좋음. # [금지사항] - 래스터 이미지, base64, 외부 리소스 사용 - "간략화", "생략", "예시로 몇 개만" 식의 축소 - 용량·성능·모바일 렌더링을 이유로 요소 수 줄이기 # [출력 전 자체 검수 체크리스트] - 63빌딩이 명확히 식별되고 창문 격자가 촘촘한가? - 오리 가족이 3무리 이상이며 새끼오리가 줄지어 헤엄치는가? - 유람선과 보트가 합쳐 8척 이상인가? - 사람이 60명 이상이고 포즈가 모두 다른가? - 나무가 15그루 이상, 4수종 이상, 명암 3톤 이상인가? - 하늘·수면·공원 어디에도 빈 공간이 없는가? - 코드에 생략·축약 주석이 하나도 없는가? 위 조건을 전부 만족하는 완성된 HTML 파일을 만드세요.