브라우저에서 엔진을 직접 분해한다? 내연기관을 손으로 만지며 배우는 인터랙티브 명작

글이 아니라 '장난감'으로 배우는 엔진

자동차 엔진이 어떻게 돌아가는지, 말로 설명 들으면 항상 어렵잖아요. '피스톤이 위아래로 움직이고, 폭발이 일어나고…' 머릿속에 그림이 잘 안 그려지죠. 그런데 바르토시 치에하노프스키(Bartosz Ciechanowski)라는 개발자가 만든 이 내연기관(Internal Combustion Engine) 설명 글은, 읽는 게 아니라 아예 '만지면서' 배우게 해줘요.

이게 뭐냐면요, 웹페이지 안에 3D로 그려진 엔진 부품들이 들어 있는데, 마우스로 돌려보고, 슬라이더를 움직여서 피스톤을 직접 밀어보고, 크랭크축을 손으로 돌려볼 수 있어요. 스크롤을 내리면 부품이 하나씩 조립되면서 '아, 이래서 이게 이렇게 움직이는구나'가 눈으로 딱 이해되는 거예요. 정적인 그림이나 영상이 아니라, 내가 조작하는 만큼 반응하는 살아있는 도표인 거죠.

4행정 사이클, 이렇게 이해하면 쉬워요

내연기관의 핵심은 '4행정(4-stroke) 사이클'이에요. 실린더 안에서 피스톤이 위아래로 왕복하면서 딱 네 단계를 반복해요. 이 글은 이걸 하나씩 손으로 확인시켜줘요.

먼저 흡입 단계에선 피스톤이 내려가면서 공기와 연료를 빨아들여요. 다음 압축 단계에서 피스톤이 올라가며 그 혼합기를 꾹 눌러 압축하고요. 그다음 폭발(연소) 단계에서 점화 플러그가 불꽃을 튀겨 혼합기를 터뜨리면, 그 폭발 힘이 피스톤을 아래로 세게 밀어내요. 바로 이 순간이 자동차를 움직이는 힘이 나오는 곳이에요. 마지막 배기 단계에서 피스톤이 다시 올라가며 타고 남은 가스를 밀어내요.

여기서 진짜 '아하' 포인트는, 이 위아래 직선 운동을 어떻게 바퀴를 돌리는 회전 운동으로 바꾸느냐예요. 그 답이 크랭크축(crankshaft)인데요. 자전거 페달을 밟는 다리를 떠올리면 딱이에요. 다리는 위아래로 움직이지만 페달 축은 빙글빙글 돌잖아요? 크랭크축이 바로 그 역할을 해요. 그리고 여러 실린더의 폭발 타이밍을 살짝살짝 어긋나게 배치해서, 엔진이 끊김 없이 부드럽게 계속 돌아가게 만드는 것까지 이 글은 직접 보여줘요. 흡기·배기 밸브를 정확한 타이밍에 여닫는 캠축(camshaft)의 원리도요.

이런 '인터랙티브 설명'이라는 장르

이 사람 글이 특별한 건, 사실 웹 기술의 결정체이기도 해서예요. 브라우저에서 3D를 그리는 WebGL과 자바스크립트로, 물리 계산을 실시간으로 돌려 애니메이션을 만들거든요. 비슷한 결의 작업으로는 니키 케이스(Nicky Case)의 게임 같은 설명 글, 머신러닝을 시각화하던 Distill.pub, 수학을 애니메이션으로 풀어내는 3Blue1Brown 같은 것들이 있어요. 하지만 치에하노프스키는 기계·물리 시스템을 이렇게까지 정밀하게 '만질 수 있게' 만든다는 점에서 독보적이에요. 시계, 카메라 렌즈, GPS, 바다의 파도까지 같은 방식으로 설명한 시리즈가 있으니 한 번 정주행해보시길 추천해요.

한국 개발자에게 주는 시사점

프론트엔드나 교육 콘텐츠에 관심 있다면 이건 정말 좋은 교보재예요. 요즘 우리 서비스에서도 복잡한 개념을 사용자에게 설명해야 할 일이 많잖아요. 온보딩 화면이든, 데이터 대시보드든요. '글+그림'으로 끝내지 말고 '조작하면 반응하는 도표'를 하나 붙이는 것만으로 이해도가 확 달라진다는 걸 이 글이 증명해요. Canvas나 WebGL, Three.js를 공부할 동기부여로도 최고고요.

한 줄로 정리하면, 최고의 설명은 '읽히는' 게 아니라 '경험되는' 것이다예요. 여러분이 담당한 기능 중에, 텍스트 설명을 인터랙티브 도표로 바꾸면 확 쉬워질 만한 게 있진 않나요?