손으로 HBM을 해부하다 - HBM Hand Explorer
웹캠과 손동작만으로 HBM 3D 구조를 분해·조립하는 Interactive Viewer
HBM Hand Explorer — 손 제스처로 HBM 구조를 탐험해보세요HBM이란?
HBM(High Bandwidth Memory) 은 여러 장의 DRAM Die를 수직으로 쌓아 올린 초고속 메모리입니다. GPU·AI 가속기 옆에 실리콘 인터포저(Interposer)를 통해 연결되어, 기존 GDDR 메모리 대비 훨씬 넓은 메모리 대역폭을 제공합니다.
최근 AI 붐과 함께 HBM 수요가 급증하며 반도체 업계의 핵심 부품으로 떠올랐는데, 그 내부 구조가 어떻게 생겼는지 눈으로 직접 확인하기는 쉽지 않습니다.
그래서 만들었습니다 — 웹캠과 두 손만 있으면 바로 써볼 수 있는 HBM 3D 구조 탐험기.
용어가 낯선 분들을 위해, 먼저 HBM이 무엇이고 왜 중요한지 조금 더 풀어서 설명하겠습니다. 이미 알고 계신다면 프로그램이 보여주는 것으로 바로 넘어가셔도 됩니다.
메모리는 컴퓨터의 조리대
컴퓨터에서 계산은 CPU나 GPU가 하지만, 계산에 쓸 데이터는 메모리에 올려두고 꺼내 씁니다. 그중 DRAM은 전원이 켜져 있는 동안 데이터를 매우 빠르게 읽고 쓸 수 있는 메모리입니다. 요리에 비유하면 GPU는 요리사, DRAM은 요리사 바로 옆의 조리대입니다.
AI 모델은 수천억 개의 숫자를 끊임없이 메모리에서 꺼내 계산하고 다시 넣습니다. 그러다 보니 요리사(GPU)의 손이 아무리 빨라도, 조리대와 오가는 통로가 좁으면 전체 속도가 통로에 묶이게 됩니다. 이것을 메모리 병목이라고 부릅니다.
대역폭: 통로의 너비
대역폭(bandwidth)은 1초에 주고받을 수 있는 데이터의 양입니다. 도로로 치면 차선 수 × 차선당 속도입니다. 그래픽카드에 흔히 쓰이는 GDDR 메모리는 GPU 주변 기판 위에 칩을 평평하게 늘어놓고 비교적 긴 배선으로 연결합니다. HBM은 칩을 위로 쌓고 GPU 바로 옆에 붙여, 통로는 짧게, 차선은 훨씬 많게 만든 메모리입니다.
왜 쌓아야 하는가
바닥 면적이 한정된 도심에서 아파트를 높이 올리듯, GPU 옆의 좁은 공간에 많은 메모리를 넣으려면 칩을 위로 쌓는 것이 가장 효율적입니다. 이렇게 칩을 쌓고 서로 연결하는 기술이 3D 패키징이고, HBM은 그 대표적인 결과물입니다.
프로그램이 보여주는 것
HBM4 규격을 기준으로 총 19개 레이어를 3D로 시각화합니다.
| 레이어 | 설명 |
|---|---|
| DRAM Die × 16 | 12nm 공정, 24Gb/die, HBM4 규격으로 적층. 두께는 약 30μm — 머리카락 굵기의 약 1/3. |
| Base Die (Logic Die) | 스택 전체의 메모리 컨트롤러. AI 최적화 ECC·PHY·파워 회로 내장. |
| Silicon Interposer | 마이크로범프 5만 개 이상이 배열된 실리콘 기판. HBM과 GPU를 초단거리로 연결. |
| TSV (Through Silicon Via) | 실리콘을 수직 관통하는 배선. 10,000개 이상의 TSV가 고속·고집적 적층을 구현. |
| Advanced MR-MUF | Mass Reflow Molded Underfill. 적층 간 빈 공간을 채워 방열 성능을 높이고 휨(Warpage)을 방지. |
분해 동작 시 각 레이어가 펼쳐지면서 이름과 주요 특징 설명 카드가 함께 표시됩니다.
표에 나온 용어들을 하나씩 풀어보겠습니다.
DRAM Die
다이(die)는 둥근 실리콘 원판(웨이퍼) 위에 같은 회로를 수백 개 새긴 뒤, 하나씩 잘라낸 칩 조각입니다. 피자 한 판이 웨이퍼라면, 잘라낸 한 조각이 다이입니다.
- 12nm 공정: 칩을 만드는 기술 세대를 가리키는 이름입니다. 숫자가 작을수록 더 미세한 회로를 새길 수 있어, 같은 면적에 더 많은 저장 공간을 넣을 수 있습니다.
- 24Gb/die: 다이 한 장이 24기가비트(= 3기가바이트)를 저장한다는 뜻입니다. 16장을 쌓으면 한 개의 HBM에 48GB가 들어갑니다.
- 두께 약 30μm: 원래 웨이퍼 두께는 약 0.7mm인데, 16장을 정해진 높이 안에 쌓기 위해 뒷면을 갈아내 종이보다 얇게 만듭니다.
Base Die (Logic Die)
쌓아 올린 DRAM들의 맨 아래에 놓이는 칩으로, 아파트의 관리실 같은 역할을 합니다. 위의 DRAM들에 데이터를 나눠 보내고 받아서 GPU와 주고받습니다.
- ECC(Error Correction Code, 오류 정정 코드): 저장된 데이터에 아주 드물게 생기는 비트 오류를 찾아내고 고치는 기능입니다. 택배 상자에 파손 여부를 확인하는 봉인 스티커를 붙이는 것과 비슷합니다.
- PHY(Physical layer, 물리 계층): 0과 1의 데이터를 실제 전기 신호로 바꿔 선을 통해 주고받는 회로입니다.
- 파워 회로: 위에 쌓인 칩들에 안정적인 전압을 공급하는 회로입니다.
Silicon Interposer
HBM과 GPU를 나란히 올려놓는 실리콘 연결판입니다. 일반 기판보다 훨씬 가늘고 촘촘한 배선을 새길 수 있어, 두 칩을 수만 개의 통로로 짧게 이어줍니다. 고속도로 인터체인지처럼 여러 칩의 도로를 한데 모아 연결하는 판이라고 생각하면 됩니다.
마이크로범프(microbump)는 칩과 칩, 칩과 인터포저 사이의 단자를 이어주는 아주 작은 땜납 돌기입니다. 전자제품 부품을 납땜하는 것을 극도로 작게 만든 것입니다.
TSV (Through Silicon Via)
칩을 쌓았다면 층과 층 사이에 신호가 오갈 길이 필요합니다. TSV는 실리콘 칩에 머리카락보다 훨씬 가는 구멍을 수직으로 뚫고 금속으로 채워, 위아래 칩을 곧바로 연결하는 통로입니다. 아파트의 엘리베이터 통로에 해당합니다. 칩 테두리를 빙 돌아가는 선으로 연결하는 것보다 거리가 훨씬 짧고, 칩 한가운데에도 수천~수만 개를 뚫을 수 있습니다.
Advanced MR-MUF
칩을 쌓으면 층과 층 사이에 아주 좁은 틈이 생깁니다. 이 틈을 비워두면 마이크로범프가 충격이나 습기에 약해지고, 열도 잘 빠져나가지 못합니다.
MR-MUF(Mass Reflow – Molded Underfill)는 SK hynix가 사용하는 공정으로, 이름을 풀면 이렇습니다.
- Mass Reflow: 여러 층을 쌓아둔 뒤 오븐처럼 한꺼번에 가열해 범프를 녹여 붙입니다.
- Molded Underfill: 액체 상태의 보호 수지를 흘려 넣어 칩 사이 틈과 주변을 한 번에 채우고 굳힙니다.
이 수지가 칩들을 단단히 묶어 얇은 칩이 휘는 것(워피지, warpage)을 막아주고, 열을 바깥으로 전달하는 통로 역할도 합니다.
조작법
웹캠이 연결된 환경이라면 별도 설치 없이 브라우저에서 바로 사용할 수 있습니다.
🤚 오른손 — 분해 / 조립
| 손 모양 | 동작 |
|---|---|
| 손 펼치기 (Open hand) | 레이어 분해 (Explode) |
| 주먹 쥐기 (Fist) | 레이어 조립 (Assemble) |
손을 천천히 펼치거나 오므리면 분해 정도가 실시간으로 반응합니다. 좌측 하단 원형 프로그레스 바에서 현재 분해 진행도를 확인할 수 있습니다.
🤙 왼손 — 3D 회전
| 핀치 | 동작 |
|---|---|
| 엄지 + 검지 핀치 | X축 회전 |
| 엄지 + 중지 핀치 | Z축 회전 |
| 두 핀치 동시 | XZ 동시 회전 |
핀치(Pinch)는 엄지와 해당 손가락 끝을 살짝 맞닿게 하는 동작입니다. 핀치를 떼면 회전이 멈춥니다.
X축, Z축 회전이란? — 3D 공간에서 가로 방향을 X축, 세로(위아래) 방향을 Y축, 화면 안쪽으로 들어가는 방향을 Z축으로 흔히 잡습니다. X축 회전은 가로로 꽂은 꼬치를 돌리듯 모델이 앞뒤로 기울어지는 회전이고, Z축 회전은 화면을 향해 꽂은 꼬치를 돌리듯 모델이 시계 방향이나 반시계 방향으로 도는 회전입니다.
Tip. 조명이 밝은 환경에서 배경이 단순할수록 손 인식 정확도가 높아집니다. 웹캠 화면은 우측 하단 PIP 창에서 확인할 수 있습니다.
데모 영상
기술 스택
| 기술 | 용도 |
|---|---|
| Three.js | WebGL 기반 3D 렌더링 — HBM 레이어 모델링, 조명, 애니메이션 |
| MediaPipe Hands | 실시간 손 랜드마크 21포인트 검출 |
| WebRTC (getUserMedia) | 웹캠 스트림 수신 |
| Vanilla JS | 별도 프레임워크 없이 단일 HTML 파일로 구현 |
단일 .html 파일로 동작하며, 서버 사이드 처리 없이 모든 연산이 브라우저 내에서 실행됩니다.
개발을 잘 모르는 분들을 위해 각 기술이 어떤 역할을 하는지 조금 더 풀어보겠습니다.
Three.js와 WebGL: 브라우저에서 3D 그리기
WebGL은 웹 브라우저가 컴퓨터의 그래픽 칩(GPU)을 직접 써서 3D 그래픽을 빠르게 그릴 수 있게 해주는 기술입니다. 다만 WebGL을 그대로 쓰려면 점과 삼각형 하나하나를 다뤄야 할 만큼 복잡합니다. Three.js는 이를 “상자를 만들고, 조명을 비추고, 카메라를 여기에 두라"는 식으로 쉽게 쓸 수 있게 감싼 도구 모음(라이브러리)입니다. HBM의 각 층을 얇은 상자로 만들고, 분해 정도에 따라 상자들의 높이 간격을 벌리는 방식으로 애니메이션을 표현합니다.
MediaPipe Hands: 손가락 위치 찾기
MediaPipe Hands는 Google이 공개한 손 인식 AI 모델입니다. 카메라 영상 한 장면이 들어오면, 손목부터 다섯 손가락의 마디와 끝까지 21개의 지점(랜드마크) 위치를 찾아 좌표로 알려줍니다. 프로그램은 이 좌표들을 이용해 손을 폈는지 쥐었는지, 엄지 끝과 다른 손가락 끝이 서로 맞닿았는지를 판단하고, 그 결과를 분해·회전 동작으로 바꿉니다.
WebRTC (getUserMedia): 웹캠 영상 받기
getUserMedia는 웹페이지가 사용자의 허락을 받아 카메라나 마이크 영상을 받아올 수 있게 해주는 브라우저 기능입니다. 처음 실행할 때 “카메라 사용을 허용하시겠습니까?“라는 창이 뜨는 것이 이 과정입니다.
Vanilla JS와 브라우저 내 처리
Vanilla JS는 React 같은 별도의 프레임워크 없이 순수한 자바스크립트만으로 작성했다는 뜻입니다. 모든 계산이 사용자의 브라우저 안에서만 이루어지고 서버로 보내는 과정이 없기 때문에, 웹캠 영상이 외부로 전송되지 않습니다.
직접 체험해보세요
카메라 권한 허용 후 손을 화면 앞에 올려놓으면 바로 시작됩니다.
용어 정리
| 용어 | 한 줄 설명 |
|---|---|
| DRAM | 전원이 켜진 동안 데이터를 빠르게 읽고 쓰는 메모리 |
| HBM | DRAM을 수직으로 쌓아 GPU 옆에 붙인 고대역폭 메모리 |
| GDDR | 그래픽카드에 주로 쓰이는, 기판 위에 평평하게 배치하는 메모리 |
| 대역폭 | 1초에 주고받을 수 있는 데이터의 양 |
| 다이 | 웨이퍼에서 잘라낸 칩 한 조각 |
| Base Die | 쌓은 DRAM 맨 아래에서 제어와 신호 송수신을 맡는 로직 칩 |
| ECC / PHY | 데이터 오류를 찾아 고치는 기능 / 데이터를 전기 신호로 주고받는 회로 |
| 인터포저 | HBM과 GPU를 나란히 올리고 촘촘한 배선으로 잇는 연결판 |
| 마이크로범프 | 칩 단자를 이어주는 아주 작은 땜납 돌기 |
| TSV | 칩을 수직으로 관통해 층과 층을 잇는 금속 통로 |
| MR-MUF | 쌓은 칩을 한꺼번에 붙이고 틈을 보호 수지로 채우는 공정 |
| 워피지 | 얇은 칩이 휘어지는 현상 |
| WebGL / Three.js | 브라우저에서 GPU로 3D를 그리는 기술 / 이를 쉽게 쓰게 해주는 라이브러리 |
| MediaPipe Hands | 영상에서 손의 21개 지점 위치를 찾아주는 AI 모델 |
| getUserMedia | 웹페이지가 허락을 받아 카메라 영상을 받아오는 브라우저 기능 |
