MINECRAFT THE AGENCY

문제 Problem마인크래프트 맵은 수천 개의 블록과 풀, 등불로 이루어져 있어 실시간 조명과 그림자를 웹에서 그대로 계산하면 모바일 기기에서는 프레임을 지키기 어렵습니다.

해결 SolutionBlender에서 맵을 다듬은 뒤 등불의 주황빛, 해 질 녘 하늘빛, 처마 밑 그림자를 모두 텍스처에 구웠습니다. 집, 마당, 지형, 소품처럼 성격이 비슷한 부분끼리 메시를 합치고 텍스처도 큰 아틀라스 한 장으로 모아, 장면 전체를 열 개의 glTF 모델로 나눴습니다. 그림 액자처럼 눌러야 하는 부분만 따로 떼어 두어 클릭 대상으로 씁니다.

결과 Result브라우저는 빛을 계산하지 않고 구운 색을 칠하기만 하면 되고, 드로우 콜은 장면 묶음 수만큼으로 줄었습니다.

해결 Solution빛이 이미 텍스처에 들어 있으므로 모든 재질을 조명 계산이 없는 MeshBasicMaterial로 바꾸고, 톤 매핑을 끈 flat 캔버스로 Blender에서 본 색이 그대로 나오게 했습니다. 풀과 잎은 정렬 비용이 큰 반투명 대신 alphaTest로 잘라 그립니다. 텍스처는 GPU가 압축된 채로 읽는 KTX2(Basis Universal)로 바꿔 브라우저의 wasm 트랜스코더가 기기에 맞는 형식으로 풀고, 지오메트리는 Draco로 압축한 뒤 gltfjsx로 React 컴포넌트로 옮겼습니다.

결과 Result4096px 아틀라스 여러 장을 쓰면서도 GPU 메모리와 내려받는 용량을 함께 줄여, 모바일까지 고려한 무게로 맞췄습니다.

과제 Task3D를 처음 만지는 사람도 길을 잃지 않으면서, 카메라가 떠다니는 게 아니라 직접 걷는 느낌을 주는 것

아이디어 Insight연못가에서 현관, 거실 벽의 액자, 책상, 다시 대문 밖으로 이어지는 16개 지점을 CatmullRom 곡선으로 잇고, 스크롤·드래그·터치와 W/S 키를 곡선 위 진행도(0~1)로 바꿨습니다. 카메라 높이는 곡선이 아니라 발밑 바닥에 맞춰 눈높이 1.62블록을 지키는데, 바닥 높이는 장면을 위에서 레이캐스트해 미리 재 둔 표에서 읽습니다. 시선은 원래 시점이 보던 지점을 눈높이에서 바라보도록 다시 계산해 장면마다 잡아 둔 구도를 지켰고, 걸음에 맞춰 화면이 좌우로 흔들리고 내려앉는 view bobbing을 게임 공식 그대로 넣었습니다. 걷는 속도는 질주 속도로 묶어 세게 스크롤해도 미끄러지듯 날아가지 않고, 마우스는 카메라를 미는 대신 고개를 돌립니다. 세로로 든 휴대폰에서는 좌우로 끌어 16:9 화면만큼 둘러볼 수 있습니다.

결과 Result휠 한 번이 실제 한 걸음처럼 느껴지면서도, 정해진 장면마다 구도가 잡힌 채 멈추는 동선은 그대로 남았습니다.

해결 Solution액자 속 그림은 구운 아틀라스와 같은 배치로 다시 그린 텍스처를 실행 중에 입혀, 모델 파일을 다시 굽지 않고도 작업을 교체할 수 있게 했습니다. 각 칸의 UV 위치와 회전을 측정해 그림을 맞춰 넣고, 원래 칸의 조명 톤에 맞춰 밝기와 색을 눌렀습니다. 모델에 구워진 벽 글자는 해당 삼각형만 걸러 지우고, 같은 픽셀 폰트의 SDF 텍스트(drei Text)로 새 문구를 올렸습니다. 액자에 포인터를 올리면 밝아지고, 카메라가 가까이 오면 은은하게 맥동해 누를 수 있다는 걸 알려 줍니다. 현관 문 위의 'Welcome!'도 같은 방법으로 지우고 SP.AGCY 워드마크를 올렸으며, 처마 아래에는 게임의 걸이 간판 모델을 그대로 옮겨 회사 이름을 걸었습니다.

문제 Problem게임을 해 본 사람은 손에 든 칼의 각도 하나, 하트 하나의 위치만 어긋나도 바로 알아챕니다.

해결 Solution게임 클라이언트의 ItemInHandRenderer와 아이템 모델의 firstperson_righthand 값(회전 0/-90/25°, 이동 1.13/3.2/1.13픽셀, 크기 0.68)을 그대로 옮기고, 아이템은 16×16 그림을 1픽셀 두께로 돌출해 만들었습니다. 휘두르기와 아이템 교체, 음식을 입으로 가져가 먹는 동작, 두 손으로 펼쳐 드는 지도, 빈손의 팔까지 게임과 같은 순서로 행렬을 쌓습니다. 핫바와 하트, 배고픔, 경험치 바는 게임의 GUI 픽셀 좌표로 배치했고, 배고픔은 걸을수록 줄고 먹으면 찹니다. 지도 그림은 장면을 위에서 렌더링한 뒤 게임의 지도 색상과 높이 음영 규칙으로 다시 칠했습니다. 왼쪽 아래 채팅창도 게임처럼 한 줄이 10초 동안 떠 있다 흐려지고, 손님이 들어오면 게임의 한국어 문구 그대로 노란 참여 메시지가 뜹니다. 세로 화면에서는 손이 화면 밖으로 밀려나지 않도록, 투영이 끝난 화면 좌표에서 16:9 화면의 오른쪽 아래에 붙인 것처럼 옮깁니다.

결과 Result칼과 곡괭이, 빵과 지도를 바꿔 들 때마다 게임과 같은 자리, 같은 동작으로 손이 움직입니다.

해결 Solution좀비와 스켈레톤, 크리퍼, 철골렘은 게임의 모델(부위별 상자와 UV 배치)과 걷기·공격 애니메이션 공식으로 만들고, 게임처럼 1초에 20틱으로 움직입니다. 걸을 수 있는 땅은 장면을 위에서 GPU로 찍어 만든 높이 지도로 정했고, 몬스터는 플레이어가 지나가는 길 가까이에 나타나 다가옵니다. 좀비는 붙어서 때리고, 스켈레톤은 거리를 두고 중력을 받는 화살을 쏘고, 크리퍼는 쉭 소리와 함께 부풀어 터집니다. 둘러보러 온 사람이 지치지 않도록 플레이어는 체력을 잃지 않고 게임의 피격 기울기와 점프만 느낍니다. 집 앞의 철골렘은 펭귄 가까이 온 몬스터부터 잡아 하늘로 던지고, 한가할 때는 퍼스트펭귄에게 걸어가 게임에서 주민에게 하듯 양귀비를 내밀며, 칼로 잡은 몬스터는 경험치 구슬을 남겨 레벨이 오르며, 처음 잡은 순간 같은 장면에는 게임의 도전과제 알림이 뜹니다. 발소리와 몬스터, 폭발과 활, 먹는 소리까지 원본 효과음 99개는 오디오 스프라이트 한 파일로 묶어 한 번에 받고, 거리에 따라 16블록에서 사라지게 했습니다.

결과 Result가볍게 둘러보던 사이트가 잠깐 머물며 놀게 되는 공간이 되었습니다.

과제 Task들를 때마다 다른 장면이 벌어지는 마당

해결 Solution마리오·링크·커비·소닉·록맨은 몬스터와 같은 방식(부위별 상자와 게임식 면 명암)으로 만들고, 피부는 픽셀 그림을 코드로 칠해 텍스처 한 장에 자동으로 배치했습니다. 모두 몬스터가 쓰는 높이 지도 위를 반 블록씩 길을 확인하며 돌아다니다가, 가까이 온 몬스터를 저마다의 방식으로 잡습니다. 마리오는 머리를 밟고 튕겨 나오고, 링크는 칼을 돌려 베고, 커비는 빨아들여 삼키고, 소닉은 공처럼 말려 굴러가 들이받고, 록맨은 거리를 두고 버스터를 세 발 쏩니다. 피해와 넉백은 게임의 규칙을 그대로 따르고, 한 마리를 잡으면 한동안 쉬어서 플레이어가 싸울 몬스터가 늘 남습니다. 이름표는 게임처럼 지금 바라보는 한 명에게만 뜨고, 말은 채팅창으로 합니다. 마리오·커비·소닉은 감탄사만, 링크와 록맨은 말이 없습니다. 점프와 동전, 버스터 같은 효과음은 Web Audio로 그 자리에서 만든 짧은 칩튠입니다. 손님들의 장면을 가까이서 보면 게임의 도전과제 알림이 뜨고, 일곱 손님을 모두 눌러 보면 '손님맞이' 도전이 완료됩니다.

결과 Result같은 길을 걸어도 마당에서 벌어지는 장면은 매번 다릅니다.

내용 Description사이트에서 함께 걷는 두 펭귄을 마당에도 옮겼습니다. 바스키아 왕관을 쓴 퍼스트펭귄(클라이언트)이 손님들 사이를 옮겨 다니며 구경하고, 세컨드펭귄(에이전시)이 한 걸음 뒤 옆자리에서 안내하다 몬스터가 다가오면 앞을 막아섭니다. 둘은 가끔 채팅으로 짧은 대화를 나눕니다. 핫바의 생대구를 들면 게임의 동물처럼 펭귄들이 다가오고, 건네면 하트가 떠오르며 받아먹습니다.

문제 Problem빛을 텍스처에 구워 둔 장면이라 시간에 맞춰 조명을 다시 계산할 수 없습니다.

해결 Solution장면을 그린 뒤 색 보정 패스(EffectComposer)를 한 번 더 거칩니다. 밤에는 화면 전체를 어둡고 푸르게 누르되 밝은 픽셀(등불, 창, 별)은 원래 색을 지키고, 낮에는 밝게 끌어올립니다. 지평선 위로만 덮이는 하늘 돔에 별과 게임의 해·달을 띄우고, 달은 그날의 실제 위상으로 고릅니다. 12월부터 2월까지는 바깥에 눈이 내리고, 보정이 필요 없는 노을 시간에는 패스를 건너뛰고 바로 그립니다.

결과 Result들르는 시각에 따라 같은 집이 낮과 노을, 밤으로 다르게 보입니다.

내용 Description창가 카운터의 케이크는 구워 둔 원래 삼각형을 잘라 내고 게임의 케이크 모델로 바꿔, 누를 때마다 한 조각씩 줄어들며 단면이 드러납니다. 침실의 침대는 근처에 몬스터가 있는지 살펴 게임의 한국어 문구로 잠을 거절하고, About us 선반 위의 큰 상자는 경첩을 축으로 뚜껑이 열린 뒤 게임의 책 화면으로 회사소개를 펼쳐 보이며, 마지막 쪽에서 회사소개서와 웹사이트로 이어집니다.

내용 Description현관의 펭귄, 연못 위 얼음 섬, 반딧불이는 모델 파일 없이 코드로 블록을 쌓아 만들었습니다. 장면에 조명이 없기 때문에 면마다 미리 명암을 곱하고 작은 픽셀 노이즈 텍스처를 입혀 구운 블록과 어울리게 했습니다. 얼음 위 펭귄 한 마리는 몇 초마다 가장자리로 걸어가 먼저 물에 뛰어들고, 물보라는 인스턴스 메시 하나로 그립니다. 처음 화면은 마인크래프트 메인 메뉴를 따라 흙 배경 위에서 청크가 채워지는 로딩, 실제 장면을 흐리게 깐 파노라마와 버튼 메뉴로 만들었고, 메뉴가 떠 있는 동안에는 카메라가 천천히 좌우로 돌며 입력을 받지 않습니다.

해결 SolutionVite로 빌드한 정적 파일을 Docker 멀티 스테이지 이미지에 담아 nginx로 서빙합니다. glb와 wasm의 MIME 타입과 gzip을 따로 설정하고, 해시가 붙은 번들은 1년, 모델과 텍스처는 하루 캐시를 걸었습니다. 배경음악은 브라우저 자동재생 정책에 맞춰 입장 버튼을 누르는 순간 재생되며, 한글은 픽셀 폰트를 unicode-range로 분리해 필요할 때만 내려받습니다.