이게 어떤 프로젝트냐면요
Bluegraph는 미국 해양대기청(NOAA)이 바다 곳곳에 띄워둔 관측 부이(buoy)의 데이터를 가져와서, 그 지점의 바다 표면을 3D로 재구성해 보여주는 웹 서비스예요. 지도에서 부이를 하나 고르면, 지금 그 바다에서 파도가 어떤 모양으로 출렁이고 있을지를 브라우저에서 입체적으로 볼 수 있어요.
'그냥 파도 애니메이션 아니야?' 싶을 수도 있는데요, 핵심은 측정된 스펙트럼(measured spectra)으로 다시 만들었다는 부분이에요. 그럴듯하게 꾸며낸 파도가 아니라, 실제 계측값을 근거로 통계적으로 같은 성질을 가진 바다를 되살린 거거든요. 데이터 시각화, 물리 시뮬레이션, 웹 그래픽스가 한데 모인 프로젝트라서 개발자 입장에서 뜯어볼 거리가 꽤 많아요.
파도 스펙트럼이 뭐냐면요
바다 표면은 엄청 복잡해 보이지만, 물리학에서는 이걸 여러 개의 단순한 사인파가 겹친 것으로 봐요. 오디오를 떠올리면 쉬워요. 음악 한 곡은 복잡한 파형이지만, 이퀄라이저 화면을 보면 '저음이 얼마나, 고음이 얼마나'로 쪼개서 보여주잖아요. 파도도 똑같아요. 주기가 긴 너울(swell)과 바람이 만드는 짧고 잔잔한 파도(wind sea)가 각각 얼마만큼의 에너지를 가지는지를 주파수별로 나타낸 게 바로 파랑 스펙트럼이에요.
NOAA 산하 국립 데이터 부이 센터(NDBC)의 부이들은 이 정보를 꽤 자세히 공개해요. 주파수 대역별 에너지 밀도가 있고, 여기에 더해 파도가 어느 방향에서 오는지를 나타내는 방향 관련 계수들도 함께 제공돼요. 그러니까 '어떤 주기의 파도가, 얼마나 세게, 어느 방향에서 오고 있는지'를 알 수 있는 거죠.
참고로 뉴스에서 많이 듣는 유의파고(significant wave height)도 여기서 나와요. 스펙트럼 전체 에너지(0차 모멘트, m0)를 구한 뒤 Hs ≈ 4√m0로 계산하는데요, 대략 '관측된 파도 중 높은 쪽 1/3의 평균 높이'에 해당하는 값이에요.
스펙트럼에서 3D 바다로 가는 과정
재구성의 원리는 선형 파랑 이론에 기반해요. 과정을 풀어보면 이래요.
1. 스펙트럼을 주파수와 방향별로 잘게 쪼개요.
2. 칸 하나하나에 해당하는 에너지로 사인파의 진폭을 정해요. 에너지가 클수록 높은 파도가 돼요.
3. 주파수로 파장을 계산해요. 깊은 바다에서는 분산 관계식 ω² = gk 덕분에 주기가 긴 파도일수록 파장도 길고 더 빨리 이동해요.
4. 이 사인파 수백~수천 개를 모두 더하면 바다 표면의 높이 필드가 완성돼요.
여기서 재밌는 포인트가 하나 있어요. 부이는 각 파도의 위상(phase), 즉 '파도 마루가 정확히 어디에 있는지'는 기록하지 않아요. 그래서 위상은 보통 무작위로 정해요. 결과물은 그 순간의 바다를 사진처럼 복제한 게 아니에요. 통계적으로 똑같은 성질을 가진 바다의 한 가지 실현(realization)인 거죠. 같은 레시피로 끓인 찌개가 매번 똑같은 한 그릇은 아니어도 맛은 같은 것과 비슷해요.
업계 맥락: 게임 속 바다와 같은 뿌리예요
이 기법은 사실 게임과 영화 CG의 바다 렌더링과 뿌리가 같아요. Jerry Tessendorf의 FFT 기반 해양 시뮬레이션이 유명한데요, 영화 속 바다 장면과 수많은 게임의 바다가 이 방식을 써요. 다만 게임에서는 보통 Phillips 스펙트럼이나 JONSWAP 같은 이론적 스펙트럼 모델을 넣고 바람 세기를 파라미터로 조절해요. Bluegraph는 그 자리에 실제 관측 스펙트럼을 넣었다는 게 차별점이에요.
해양 예보 쪽에서는 WAVEWATCH III 같은 수치 파랑 모델이 스펙트럼을 예측하고, Windy나 Surfline 같은 서비스가 그 결과를 2D 지도와 숫자로 보여줘요. Bluegraph는 같은 데이터를 '눈으로 느낄 수 있는' 형태로 바꿨다는 점에서 결이 달라요. 서퍼나 선원한테는 '파고 2m, 주기 12초'라는 숫자보다 실제로 출렁이는 모습이 훨씬 직관적이거든요.
한국 개발자에게 주는 시사점
공공 데이터 시각화 프로젝트의 좋은 레퍼런스예요. 한국에도 기상청 해양기상부이, 국립해양조사원의 관측 데이터처럼 공개된 해양 데이터가 있어요. 동해의 너울성 파도나 서해의 짧은 파도를 이런 방식으로 보여주는 서비스를 만든다면, 사이드 프로젝트로도 꽤 매력적이에요.
웹 그래픽스를 공부하기에도 좋은 주제예요. 사인파 합성은 three.js 셰이더로 입문하기에 딱 좋은 난이도예요. 조금 더 나아가면 FFT로 최적화하는 방법이나 WebGPU 컴퓨트 셰이더까지 자연스럽게 공부할 수 있어요.
'측정값 + 물리 모델 = 시뮬레이션'이라는 패턴 자체도 배울 만해요. 디지털 트윈이 결국 이 구조거든요. 센서 데이터로 파라미터를 정하고, 물리 법칙으로 빈칸을 채워서 보여주는 방식은 공장, 교통, 에너지 분야에서도 그대로 쓰여요.
마무리
한 줄 정리: 부이가 측정한 '파도의 레시피(스펙트럼)'로 게임 그래픽 기법을 써서 실제 바다를 되살린, 데이터와 물리와 그래픽스가 잘 어우러진 프로젝트예요.
여러분이라면 국내 공공 데이터 중에서 어떤 걸 이렇게 3D로 되살려보고 싶으세요? 미세먼지 확산이나 지하철 혼잡도처럼 숫자로만 보던 데이터를 입체로 보면 재밌을 것 같은데, 아이디어를 나눠주세요!
🔗 출처: Hacker News