안녕하세요! 오늘은 기계 설계 실무자나 공학도라면 누구나 한 번쯤 겪어보았을 ‘타이밍 벨트 축간거리 계산’의 번거로움을 해결하기 위해, AI(Gemini)와 협력하여 나만의 웹 기반 자동 설계 계산기를 구축한 과정을 공유해 보려고 합니다.
단순한 가이드 문서에서 시작해, 미스미(MISUMI)와 같은 실무 맞춤형 인터랙티브 계산기로 발전하기까지의 좌충우돌 개발 스토리를 대화 기록과 함께 자세히 담아보았습니다.
1단계: 아이디어의 시작, “풀리 벨트 설계 가이드를 만들자!”
기계 설계를 하다 보면 V벨트나 타이밍 벨트의 속도비, 벨트 길이, 축간거리를 계산해야 할 일이 잦습니다. 매번 엑셀이나 계산기를 두드리는 것이 귀찮아져서, 누구나 브라우저에서 쉽게 열어볼 수 있는 단일 HTML 웹페이지 가이드를 만들고 싶었습니다. 그래서 AI에게 첫 번째 요청을 던졌습니다.
나: “풀리 벨트 설계 가이드를 웹페이지로 만들고 싶다.”
🤖 AI의 답변 요약:
“기계 설계자를 위한 깔끔한 레이아웃과 수식(LaTeX) 렌더링 기능이 포함된 단일 웹페이지 코드를 작성해 드립니다. MathJax 라이브러리를 사용하여 브라우저에서 논문처럼 수식을 볼 수 있습니다.”
AI는 기본적인 전동 장치의 개요와 함께, 아래와 같은 핵심 설계 공식을 웹에서 렌더링할 수 있도록 코드를 짜주었습니다.
-
속도비 :
-
벨트의 근사 길이 :
하지만 코드를 실행하자마자 예상치 못한 문제가 발생했습니다.
2단계: 예기치 않은 보안 이슈 (polyfill.io 사태)
코드를 복사해서 index.html로 실행했는데, 웹페이지 대신 뜬금없이 로그인 팝업창이 뜨는 것이었습니다. 당황한 마음에 화면을 캡처하여 AI에게 물어보았습니다.
나: “(로그인 팝업 캡처 이미지 첨부) 이게 왜 뜨는거야?”
🤖 AI의 진단:
“앗, 죄송합니다! 제가 드린 코드 상단에 구형 브라우저 호환성을 위한 <script src="[https://polyfill.io/](https://polyfill.io/)...">가 포함되어 있었는데, 최근 해당 도메인의 소유권이 넘어가면서 악성 코드를 유포하거나 비정상적인 동작을 하는 심각한 보안 이슈가 발생했습니다. 절대 정보를 입력하지 마시고 해당 줄을 삭제해 주세요!”
최신 웹 보안 트렌드까지 엿볼 수 있었던 아찔한 순간이었습니다. 문제가 된 스크립트 한 줄을 지우니 웹페이지가 정상적으로 구동되었습니다.
3단계: 미스미(MISUMI) 스타일의 자동 계산기로 진화
단순한 텍스트 가이드를 넘어, 실제 수치를 입력하면 자동으로 계산해 주는 기능이 욕심났습니다.
나: “타이밍 벨트만으로 미스미(MISUMI) 이런 사이트를 만들고 싶다. (미스미 FA 사이트 링크 첨부)”
이 요청에 AI는 자바스크립트(JS)와 HTML5 <canvas>를 활용하여 놀라운 코드를 작성해 주었습니다.
-
자동 역산 알고리즘: 잇수와 희망 축간거리를 입력하면 가장 가까운 벨트 잇수(정수)를 찾고, 이를 바탕으로 정확한 실제 축간거리를 역산하는 로직.
-
동적 시각화: 입력된 잇수 비율에 따라 하단의 캔버스에 풀리와 벨트의 도면이 실시간으로 그려지는 기능.
외부 서버나 라이브러리 없이 순수 HTML/JS로만 작동하여 평생 무료로 쓸 수 있는 툴이 탄생했습니다.
4단계: 진짜 실무 데이터를 주입하다 (카탈로그 학습)
초기 계산기는 S2M, S5M 등 기본적인 벨트 타입만 있었습니다. 실제 설계에서는 더 다양한 규격을 쓰기 때문에, 제가 가지고 있던 미스미 기술자료 PDF 파일 4장을 통째로 AI에게 던져주었습니다.
나: “(tp_1.pdf ~ tp_4.pdf 첨부) 이걸 학습해서 선택할 수 있는 벨트 타입이 더 있었으면 좋겠어.”
AI는 PDF 데이터를 완벽하게 분석하여 <select> 태그를 대폭 업그레이드했습니다.
-
인치 계열: MXL(2.032mm), XL(5.080mm), L(9.525mm), H(12.700mm)
-
미터 계열: S2M, S3M, S5M, S8M, T10 등
-
고토크 계열: 2GT, 3GT, EV5GT, EV8YU 등
특히 인치 계열 벨트의 소수점 피치(Pitch)까지 정확하게 부동소수점 연산에 반영하도록 코드를 개선해 주었습니다.
5단계: 이론과 현실의 괴리 딜레마 (왜 내 계산기엔 45개가 나올까?)
계산기가 완벽해 보였지만, 실제로 계산된 값을 들고 카탈로그를 찾아보니 치명적인 문제가 있었습니다.
나: “(기성품 카탈로그 표 이미지 첨부) 첫 번째는 실제 벨트 종류인데 계산된 값에서는 고를 수가 없었다. 어디가 잘못되었을까?”
이론상 축간거리를 계산했을 때 필요한 벨트 잇수가 ’45개’로 나왔지만, 실제 카탈로그에서는 S3M 규격 벨트가 ’43, 47, 48…’ 순으로만 생산되고 있었습니다. (세상에 45개짜리 벨트는 주문 제작 외엔 없었던 것이죠!)
🤖 AI의 해결책:
“실무 기계 설계에서 가장 흔하게 마주치는 이론치와 기성품 규격의 괴리입니다. 단순히 정수로 반올림하는 수학적 계산을 넘어, 기성품 배열(Array)에서 가장 가까운 값을 찾거나 사용자가 직접 기성품 잇수를 입력하게 해야 합니다.”
6단계: 궁극의 ‘실무형 3단계 설계 워크플로우’ 완성
카탈로그의 모든 데이터를 하드코딩하는 것은 유지보수가 불가능하다고 판단했습니다. 그래서 현업 설계자들의 실제 작업 흐름에 맞춰 계산기 UX/UI를 완전히 뜯어고쳤습니다.
나: “지금 계산한 값에서 내가 수동으로 기성품을 알려주면, 다시 계산하기를 눌러서 설계상 들어가는 실제 축간거리와 기성품 사양을 알려주었으면 좋겠어. (1. 예측 계산 -> 2. 기성품 등록 -> 3. 최종 데이터 출력)”
나: “그리고 기성품 주소를 넣어서 알 수 있게 해주고, 페이지 처음 들어가면 사용 방법이 팝업에 나오게 해줘.”
마무리하며
이번 프로젝트는 단순히 코드를 짜는 것을 넘어, ‘설계 이론’과 ‘현장의 기성품(현실)’ 사이의 간극을 메우는 과정이었습니다. AI와 대화하며 문제를 하나씩 해결해 나가는 과정이 매우 흥미로웠고, 결과적으로 제 업무 효율을 엄청나게 높여줄 툴을 단숨에 완성할 수 있었습니다.
이 코드가 기계 설계를 공부하는 학생이나 실무에서 고군분투하는 엔지니어분들께 조금이나마 도움이 되기를 바랍니다!
[⚙️ 타이밍 벨트 설계 계산기 링크!]
