포트폴리오 3D 데이터 흐름 장면

문제 정의

2026 하반기 지원서에 "입사 후 Three.js로 3D 원격 모니터링을 만들고 싶다"고 적었습니다. 포부는 확인할 방법이 없으면 문장으로만 남습니다.

제약 조건

• 채용담당자가 30초 안에 핵심을 읽는 사이트입니다. 3D가 읽기를 방해하면 안 됩니다
• GitHub Pages 정적 호스팅이라 서버가 없습니다
• 모바일과 저사양 기기에서도 페이지가 온전해야 합니다

설계

장식이 아니라 업무를 보여 주는 그림으로 만들었습니다. 사내 BEMS가 다루는 것, 즉 다섯 사업장의 전력·연료·용수 데이터와 실측·예측 구간(P05~P95)을 남한 지도 위에 홀로그램처럼 도식화했습니다. 사업장은 실제 위치(시 단위)에 두고, 데이터는 지도 위에 떠 있는 하나의 통합 화면(원형 패널 링) 가운데로 모입니다.

첫 화면 제목 "공장 데이터를 모으고, 자동화하고, 예측합니다"가 곧 장면의 줄거리입니다. 스크롤하면 같은 장면에서 카메라가 사업장(모으고) → 검증 게이트(자동화하고) → 예측 패널(예측합니다)을 차례로 비춥니다. 원천 데이터는 주황으로 솟아올라 게이트를 지나며 표준 데이터(하늘색)로 바뀝니다. 단계 글이 화면 가운데 있는 동안에는 카메라가 멈춰 있습니다.

켜지 않을 조건을 먼저 정했습니다. 모션 축소 설정, WebGL2 미지원, 메모리 4GB 미만, 화면 너비 720px 미만, 청크 로드 실패 — 다섯 경우에는 같은 구도로 미리 렌더한 정적 이미지를 그대로 둡니다. 대체 경로를 먼저 만들고 장면을 나중에 붙였습니다.

구현

• 외부 3D·이미지 자산 없음. 지도·아이콘·패널은 캔버스 2D에 네온으로 그려 텍스처로 쓰고, 해안선은 Natural Earth 공개 데이터를 단순화한 좌표 배열
• 데이터 펄스 30개를 Points 하나로 처리, 지도 전체가 draw call 한 번
• 예측 구간은 앞 패널 캔버스를 세 프레임마다 다시 그려 흐르게 함. 패널의 수치는 원장에서 받음
• 색은 CSS 토큰에서, 공장 이름은 사실 원장에서 읽고 위치는 좌표표에서 찾음 (어긋나면 테스트 실패)
• 본문이 그려진 뒤 유휴 시간에 로드, 화면 밖에서는 렌더 정지
• 카메라는 단계별 키프레임 4개(첫 화면 + 단계 3개) 사이를 오가고, 단계 글을 읽는 구간에서는 멈춤. 단계 위치는 화면 높이가 아니라 단계 글의 실제 위치로 정해 첫 화면 길이와 무관하게 맞음
• 알갱이 색(원천 → 표준)은 정점 색으로 처리해 draw call이 늘지 않음. 사업장 빛기둥 5개는 인스턴스 하나
• 글이 놓이는 왼쪽은 렌즈 이동(filmOffset)으로 비워, 대상을 비껴 겨눌 때 생기는 원근 왜곡이 없음

검증 결과

• 3D를 켠 상태와 끈 상태에서 첫 화면 렌더 시점 차이가 없도록, 장면을 별도 청크로 분리
• 360 · 390 · 768 · 1024 · 1440 · 1920px에서 가로 넘침 없음
• 1440×900 · 1440×800 · 1024×768에서 첫 화면의 제목·명판·수치가 스크롤 없이 보이고, 다섯 사업장 이름이 수치 칸에 가리지 않음
• 모션 축소 설정에서 장면을 아예 불러오지 않음

본인의 역할

장면 설계, 구현, 대체 경로와 성능 조건 설정까지 전부 직접 했습니다.

배운 점과 다음 개선

기능을 넣는 것보다 넣지 않을 조건을 정하는 것이 어려웠습니다. 첫 판은 공장을 호 위에 늘어놓고 가운데 원반으로 모았는데, 뜻 없는 블록 높이가 뜻이 있어 보였고 알갱이가 어디로 가는지 읽히지 않아 지도 배치로 바꿨습니다. 다음에는 공장을 눌렀을 때 그 공장의 실적과 예측을 옆에 띄우는 것까지 해 보려고 합니다.