요약. 경복궁 전체를 섬처럼 띄운 3D 디오라마에 서울의 현재 날씨와 시각, 계절이 그대로 나타나게 했다. 전각 배치와 칸수, 지붕 형식은 기록을 따라 코드로 지었다. HTML 한 파일(117KB)이고 3D 모델 파일은 쓰지 않았다. PC 화면(1440×900)에서 삼각형 363,644개를 그리기 호출 104번으로 그린다. 날씨는 무료 공개 API Open-Meteo에서 15분마다 받는다. Claude Opus 5.5와 함께 코드를 짰다.
전체 화면으로 보기 — /demos/gyeongbokgung-weather/
시작은 해외의 로우폴리 날씨 사이트였다. 작은 섬 위의 풍차와 등대에 비가 내리고 해가 지는 페이지를 보고 서울 버전을 만들었다. 서울을 대표하는 장소로 경복궁을 골랐고, 전각의 실제 배치와 건축 형식을 자료에서 찾아 맞췄다.
날씨·시간·계절이 장면을 바꾼다
페이지를 열면 서울의 현재 시각과 날씨가 장면에 반영된다.
- 시간대 — 아침, 낮, 저녁, 밤으로 하늘색과 조명이 바뀐다. 밤에는 광화문·흥례문·근정전·경회루·향원정에 조명이 들어오고 가로등과 차량 불빛이 켜진다.
- 날씨 — 맑음, 구름 조금, 흐림, 안개, 비, 강한 비, 뇌우, 눈, 강풍 9가지. 비가 오면 도로가 젖고 관람객이 우산을 편다. 뇌우에는 번개가 친다.
- 계절 — 봄에는 분홍 꽃나무, 여름에는 짙은 녹음, 가을에는 은행나무와 단풍이 든다. 눈이 오면 지붕과 북악산이 하얗게 덮인다.
- 소리 — 빗소리, 바람 소리, 새소리, 천둥을 브라우저에서 직접 합성한다. 처음에는 꺼져 있고 '소리' 버튼으로 켠다.
오른쪽 위 '장면' 메뉴에서 시간대·날씨·계절을 골라 미리 볼 수 있다. 한여름 오후에 눈 덮인 경복궁을 보는 식이다. 키보드 1~4는 시간대, Q·W·E·R·T는 맑음·흐림·비·뇌우·눈이다.
고증: 칸수와 지붕 형식은 기록을 따랐다
궁 전체를 실제 축척으로 놓았다. 장면 속 궁역은 광화문에서 신무문까지 남북 955m, 동서 465m다(경복궁 사적 지정면적 432,703㎡). 광화문–흥례문–근정문–근정전–사정전–강녕전–교태전–아미산으로 이어지는 중심축을 그대로 두고, 경회루·향원정·신무문은 좌표 자료로 위치를 맞췄다. 건물은 현재 복원된 모습을 기준으로 했다.
| 전각 | 규모·지붕 / 함께 재현한 것 |
|---|---|
| 광화문 | 석축에 홍예 3개, 문루 정면 3칸·측면 2칸 중층, 우진각지붕 함께 — 2023년 복원된 월대(남북 48.7m·동서 29.7m), 해치, 검은 바탕에 금색 글씨 현판 |
| 흥례문·근정문 | 근정문 정면 3칸·측면 2칸 중층, 우진각지붕. 흥례문도 같은 규모로 지었다 함께 — 금천과 영제교(길이 약 13m·너비 약 10m), 천록으로 전해지는 서수, 일화문·월화문 |
| 근정전 | 정면 5칸·측면 5칸 중층, 팔작지붕 함께 — 2단 월대와 석난간, 드므, 향로, 잡상 7개, 박석 깔린 조정, 삼도, 품계석, 복랑 행각 |
| 사정전 | 정면 5칸·측면 3칸, 장대석 세 벌대 기단, 팔작지붕 함께 — 만춘전(동)·천추전(서) |
| 강녕전·교태전 | 교태전 정면 9칸·측면 4칸. 두 건물 모두 용마루 없는 지붕 함께 — 연생전·경성전, 양의문 옆 굴뚝, 아미산 화계와 육각 굴뚝 4기 |
| 경회루 | 정면 7칸·측면 5칸, 돌기둥 48개, 팔작지붕, 잡상 11개 함께 — 연못(동서 약 128m·남북 약 113m), 동쪽 돌다리 3개, 서쪽 작은 섬 2개 |
| 향원정 | 육모지붕 2층 정자 함께 — 취향교(길이 32m 목교, 2021년 북쪽 제자리로 복원) |
| 건청궁 | 장안당·곤녕합·옥호루, 단청을 하지 않은 사대부가 양식 |
| 집옥재 | 맞배지붕에 양 옆벽을 벽돌로 쌓은 중국풍 건물 함께 — 서쪽 2층 팔각 누각 팔우정, 동쪽 협길당 |
칸 너비도 기록을 옮겼다. 근정전 정면은 툇칸 17척, 협칸 21척, 어칸 22척으로 합계 98척이고, 1척을 약 31.2cm로 잡아 정면 폭 30.6m로 지었다. 경회루의 돌기둥 48개는 바깥 네모기둥 24개와 안쪽 둥근기둥 24개로 나누어 세웠다.
지붕은 형식별로 따로 만들었다. 처마 끝이 들리는 앙곡과 바깥으로 휘는 안허리곡을 넣고, 궁궐 지붕의 흰 용마루와 추녀마루 위 잡상을 올렸다.
둘러보기: 버튼 하나로 명소까지
궁이 넓어 전체 화면에서는 전각이 작게 보인다. 왼쪽 아래 '둘러보기'에서 장소를 누르면 카메라가 그곳으로 날아가고, 고증 포인트가 짧은 설명으로 뜬다. '전체'를 누르면 처음 화면으로 돌아온다.
- 광화문 — 홍예 세 개와 월대, 해치
- 근정전 — 2단 월대와 박석 조정, 품계석
- 경회루 — 돌기둥 48개와 연못 동쪽 돌다리 셋
- 강녕전·교태전 — 용마루 없는 지붕과 아미산 굴뚝
- 향원정 — 육모 정자와 취향교
- 건청궁·집옥재 — 단청 없는 건청궁과 벽돌 벽의 집옥재
마우스로 드래그하면 돌아가고, 오른쪽 버튼으로 옮기며, 휠로 확대한다. 휴대폰에서는 한 손가락으로 돌리고 두 손가락으로 확대·이동한다. 흥례문 앞에는 수문장 교대식 대열 27명이 서 있다.
만든 방법: 3D 모델 파일 없이 코드로
전체가 HTML 한 파일(약 117KB)이다. 외부 3D 모델 파일을 쓰지 않고 모든 전각과 지형을 코드로 생성했다. 서버 없이 파일만 올리면 동작하고 API 키도 필요 없다.
- 3D 엔진 — Three.js(r147). 그림자, 안개, ACES 톤매핑으로 미니어처 분위기를 냈다.
- 건물 생성 — 칸수와 칸 너비를 넣으면 기둥, 창호, 창방, 공포가 놓이고 지붕이 얹히는 함수를 만들었다. 우진각·팔작·맞배·육모·팔모 지붕을 처마 곡선부터 계산한다.
- 성능 — 전각 수백 동을 몇 개의 메시로 합쳐 그린다. PC 화면 기준 삼각형 363,644개, 그리기 호출 104번이다. 화면 폭이 760px 미만이거나 CPU 코어가 4개 이하이면 '낮음' 화질로 시작하고, 3초 평균이 30fps 아래로 떨어지면 한 단계 낮춘다.
- 날씨 — Open-Meteo에서 현재 기온·습도·바람·강수와 7일 예보를 15분마다 받는다. 날씨 코드에 맞춰 구름 양, 빗줄기, 안개 농도가 천천히 바뀐다. API를 부르지 못하면 샘플 날씨로 동작하고 화면에 '샘플'로 표시한다.
- 소리 — Web Audio로 잡음을 걸러 빗소리와 바람을 만들고, 새소리와 천둥도 실시간으로 합성한다.
한계와 다음 작업
- 전각의 위치와 칸수, 지붕 형식은 자료를 따랐다. 작은 전각과 행각의 치수는 사진과 일반적인 비례로 추정했다.
- 국립고궁박물관과 국립민속박물관은 넣지 않았다. 국립현대미술관과 청와대는 단순한 형태로만 넣었다.
- 단청 문양과 창살은 로우폴리 수준으로 단순화했다.
- 둘러보기 설명 속 향원정 높이(10.5m)와 영제교 치수(13.85m×9.8m)는 공식 자료에서 확인하지 못했다. 본문 표에는 확인된 값만 적었다.
- 다음에는 근정전부터 단청 패턴과 창호 텍스처를 입혀 볼 계획이다. 창덕궁·덕수궁 버전도 만들어 보려 한다.
틀린 고증을 발견하면 문의로 알려 주시면 고치겠다.
참고 자료
- 경복궁 · 광화문 · 근정전 · 경회루 · 건청궁 — 한국민족문화대백과사전
- 궁궐의 잡상 — 경회루 11개 — 국가유산청 월간 국가유산사랑, 2023년 12월 1일
- 광화문 월대 복원과 새 현판 — 세계일보, 2023년 10월 15일
- 영제교 — 실록위키
- 경복궁 · 근정전 — 위키백과 (근정전 칸 너비 17·21·22척)
- List of landmarks in Gyeongbokgung — Wikipedia
- 날씨 데이터 — Open-Meteo (CC BY 4.0)