SVG 코드만으로 한강의 야경부터 다리, 수면 위로 번지는 빛까지 구현한 HTML입니다.

장면을 해석하고, 구도를 설계하고, 시각적 완성도까지 끌어올리는 AI 모델의 그래픽 표현력을 그대로 보여줍니다.

고정밀 웹 UI와 데이터 시각화는 물론, HTML, CSS, SVG를 결합해 복잡한 장면과 인터페이스까지 정교하게 구현하는 프런트엔드 생성 능력도 확인할 수 있습니다.

AI 모델의 코딩 능력과 시각적 설계 능력을 비교할 때, 참고할만합니다.

아래 프롬프트 있으니 참고하십시오

동일 프롬프트 기준

참고로 페이블 5 울트라로 생성한 HTML 파일의 코드는 100만자이고

GPT 5.6 SOL PRO도 100만자 정도입니다

딱봐도 안 좋아 보이는 건 코드가 5만자 이하입니다

프롬프트 :

 

# [역할]

당신은 세계 최고 수준의 벡터 일러스트레이터이자 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 파일을 만드세요.