1950년대 거실 사진 한 장을 걸어 다닐 수 있는 3D 방으로 바꾼 웹 뷰어

사진 한 장 3D

사진 한 장을 3D 공간으로 바꿔 그 안을 걸어 다니고, 사진 속 물건을 집어 던져 볼 수 있게 만든 웹 뷰어입니다. 이번에 올린 장면은 미국 의회도서관이 공개한 1950년대 거실 사진(사진가 Carol M. Highsmith, 퍼블릭 도메인)입니다. 사진에서 픽셀마다 거리를 미터 단위로 추정해 약 145만 개의 작은 반투명 점(가우시안 스플랫)으로 방을 세우고, 바닥 평면을 찾아 기울기를 바로잡았습니다. 사진을 찍은 카메라 자리와 같은 높이·같은 화각에서 시작하므로 첫 화면은 원래 사진처럼 보이고, 움직이면 의자와 텔레비전이 앞뒤로 엇갈리며 입체가 드러납니다. 가죽 둥근 발받침과 검은 다이얼 전화기, 재떨이 스탠드는 사진에서 오려 내 따로 3D 모델로 만들었습니다. 사진에 보이는 크기로 맞춰 원래 있던 자리에 놓았고, 물리 엔진이 들어 있어 눌러 끌면 들리고 놓으면 그 속도로 날아가며, 부딪히면 재질에 맞는 소리가 납니다. 물건을 뺀 자리는 지우고 둘레의 카펫과 탁자로 채운 뒤 공간을 만들었습니다. 이 모든 단계는 유료 클라우드 서비스 없이 개발용 컴퓨터의 그래픽 카드에서 공개 라이선스 모델로 돌렸습니다. 사진에 찍힌 범위만 입체라서 뒤를 돌거나 멀리 움직이면 사진 밖은 흐린 배경으로 보입니다.

컴퓨터 화면 크기의 실제 뷰어 화면이다. 하늘색 꽃무늬 벽지의 작은 거실이 3D 로 보인다. 왼쪽에 크림색 쿠션의 나무 팔걸이의자와 줄무늬 둥근 쿠션, 그 뒤 작은 탁자 위에 검은 다이얼 전화기가 있고, 가운데에 나무 상자형 텔레비전과 흰 문, 오른쪽에 흰 벽난로 선반과 분홍 천의 안락의자가 있다. 바닥은 파란 무늬 카펫이고 앞쪽에 가죽 둥근 발받침이 놓였다. 왼쪽 위에 장면과 물건 목록이 든 반투명 단추 묶음, 오른쪽 아래에 원래 사진을 작게 펼친 칸, 아래 가운데에 사진 출처 줄이 있다 — 실제 화면: 사진을 찍은 자리에서 시작한 첫 화면, 오른쪽 아래가 원래 사진사진 한 장 3D

여기서 바로 써 보기

아래 버튼을 누르면 이 페이지 안에서 실행됩니다. 누르기 전에는 앱 데이터를 받지 않으므로, 소개만 읽고 가셔도 됩니다. 설치도 로그인도 없습니다.

전체 화면으로 하시려면 새 창에서 열기.

누구에게 필요한가요

사진 한 장이 어디까지 3D 가 되는지 직접 들어가 보고 싶은 사람, 오래된 방 사진 속을 걸어 보고 싶은 사람, 생성형 3D 의 지금 수준과 한계를 눈으로 확인하고 싶은 사람

주요 기능

처음에는 비행 모드다. W·A·S·D 로 앞뒤 좌우, E·Q 로 위아래로 움직이고, Shift 를 누르면 빨라진다. 마우스 오른쪽 단추를 누른 채 끌면 둘러보고, 휠로 앞뒤로 다가간다. 왼쪽 위의 단추로 바닥을 걷는 1인칭 모드(Space 로 뛰기)와 고화질(그림자·피사계 심도)로 바꿀 수 있다
가죽 둥근 발받침·검은 다이얼 전화기·재떨이 스탠드는 따로 만든 3D 물건이다. 마우스로 눌러 끌면 들어 옮기고, 놓으면 끄는 속도대로 던져진다. 바닥과 벽, 가구에 부딪히면 가죽은 둔탁한 소리, 나무는 나무 소리, 전화기는 플라스틱 소리가 난다. 전화기는 작은 탁자 위에 고정돼 있다
첫 화면은 사진을 찍은 카메라와 같은 자리·높이·화각이라 원래 사진과 거의 같게 보인다. 왼쪽 위 '처음 위치로' 단추로 언제든 돌아온다
오른쪽 아래에서 원래 사진을 펼쳐 지금 보는 화면과 견줄 수 있다. 백틱(`) 키를 누르면 화면 위의 단추가 모두 숨는다
왼쪽 아래 단추(또는 Shift·Alt 와 숫자 1~3)로 장면만, 물건만, 조명, 음영과 뼈대(와이어프레임)를 바꿔 보며 사진이 어떤 형상으로 바뀌었는지 볼 수 있다
창밖에서 새소리가 들리는 방의 배경음이 이음매 없이 되풀이된다. 왼쪽 위 소리 단추로 끄고 켠다

제품 방향

원작은 공개된 image-blaster(코드 MIT 라이선스)입니다. 원작은 사진을 공간으로 바꾸는 일과 물건을 3D 로 만드는 일, 소리를 만드는 일을 모두 유료 클라우드 서비스에 맡기는데, 그 열쇠 없이도 돌게 하려고 이 컴퓨터에서 도는 공개 모델로 하나씩 바꿨습니다. 공간은 사진 한 장에서 거리를 미터 단위로 재는 모델로 점마다 위치를 정하고, 이웃 점까지의 실제 거리로 점의 크기와 방향을 정했습니다. 처음 만든 방은 의자 테두리처럼 앞뒤 거리가 갑자기 바뀌는 곳에서 줄무늬 막이 생겼는데, 깊이가 어중간한 테두리 점을 앞면이나 뒷면에 붙여 없앴습니다. 시작 화면도 처음엔 사진이 화면 가운데 액자처럼 작게 떴습니다. 뷰어의 기본 화각이 사진보다 훨씬 넓어서였고, 사진의 화각을 기록해 그 화각으로 시작하게 고쳤습니다. 물건은 글로 물건을 찾는 모델과 테두리를 따는 모델로 오려 낸 뒤 사진 한 장을 3D 로 바꾸는 공개 모델에 넣었습니다. 그 모델은 사진을 수평에서 찍었다고 보고 만들기 때문에, 위에서 내려다본 사진이면 물건이 그만큼 기울어 나옵니다. 그래서 사진에서 잰 바닥 방향으로 바로 세우고 보이는 크기에 맞춰 미터 단위로 줄였습니다. 원래 자리에 놓았더니 물리 엔진이 물건을 튕겨 내기도 했습니다. 물건을 지운 자리를 채운 벽이 물건과 몇 센티미터 겹쳐 있었기 때문입니다. 지금은 뷰어와 같은 물리 엔진으로 겹치지 않는 가장 가까운 자리를 찾고, 놓은 뒤 3초 동안 움직이지 않는지 시뮬레이션으로 확인합니다. 처음에는 안락의자도 지우고 3D 로 만들려 했지만 사진의 18% 를 차지하는 큰 의자를 지운 자리가 어둡게 뭉개져서, 큰 가구는 공간에 남기고 작은 물건 셋만 따로 만들었습니다. 소리는 글을 소리로 바꾸는 모델을 쓰지 않고, 물건의 재질로 공개(CC0) 충돌 녹음을 고르고 배경음은 낱말에 맞는 층을 코드로 합성했습니다.

현재 상태

프로토타입 공개

개발 시작2026년 10월

사용 안내

사진에 찍힌 범위만 입체입니다. 뒤를 돌거나 옆으로 많이 움직이면 사진 밖은 흐린 배경이고, 바닥만 사진 밖까지 이어 붙였습니다. 사진에서 가려진 곳(가구 뒤)은 비어 있거나 늘어나 보입니다
발받침·전화기·재떨이 스탠드의 뒤쪽은 사진에 없어서 모델이 짐작해 만든 것이라 거칩니다. 재떨이 스탠드는 오려 내는 단계에서 위의 재떨이 그릇이 빠져 기둥과 받침만 있습니다. 물건 자리는 사진 속 자리에서 수십 센티미터 옮겨진 것이 있습니다
장면 파일이 약 50MB 라 처음 열 때 회선에 따라 시간이 걸립니다. 화면 아래 가운데에 불러오는 중이라는 안내가 뜹니다
성능은 개발용 컴퓨터(외장 GPU)의 화면 없는 브라우저에서 1280x720 으로만 확인했습니다. 내장 그래픽만 있는 노트북, 맥과 사파리, 휴대폰과 태블릿에서는 확인하지 못했습니다. 터치로 움직이는 조작 코드는 들어 있지만 실제 기기로 시험하지 않았습니다
효과음과 배경음은 길이와 크기, 이음매 같은 숫자로만 맞췄고 귀로 충분히 들어 보지 못했습니다
아무것도 저장하지 않고 서버로 보내지도 않습니다. 장면을 편집하는 화면은 이 웹판에서는 저장이 꺼져 있습니다

바로가기

웹에서 바로 실행

써 보셨나요?

좋았던 점, 불편했던 점, 버그, 바라는 기능을 남겨 주세요. 읽어 본 뒤 공개하고, 고치는 데 씁니다.

피드백 남기기