1~3편에서는 Claude에게 코드를 받아 교량을 띄우고, 돌려보고, 조명을 입혔다. 그런데 같은 Claude라도 어떻게 요청하느냐에 따라 결과가 완전히 달라진다. 한 번에 원하는 모델이 나오기도 하고, 열 번을 고쳐도 엉뚱한 모양이 나오기도 한다.4편에서는 3D 구조물 모델을 요청할 때 쓰는 프롬프트 작성법을 정리한다. 일반적인 AI 활용 팁이 아니라, 치수와 좌표가 중요한 구조 엔지니어 입장에서 실제로 효과가 있었던 방법들이다. 모호한 요청과 구체적인 요청○ AI는 빠진 정보를 스스로 추측해서 채운다. 추측이 많을수록 결과는 내 의도에서 멀어진다. 구분모호한 요청구체적인 요청예시"three.js로 교량 만들어줘""강거더교, 경간 40 m, 폭 10 m, 거더 3개 높이 1.8 m…"AI가 추측하는 ..
1~3편의 교량은 거더를 직사각형 박스(BoxGeometry)로 단순화했다. 형상을 확인하는 데는 충분하지만, 구조 엔지니어 눈에는 아무래도 어색하다. 실제 강거더는 상부플랜지, 복부, 하부플랜지로 이루어진 I형 단면이기 때문이다.5편에서는 three.js의 ExtrudeGeometry로 I형 거더를 만든다. 단면을 점으로 그린 뒤 길이 방향으로 밀어내는 방식이라, 구조해석 프로그램에서 단면을 정의하고 부재 길이를 주는 것과 같은 흐름이다. 단면 치수를 바꾸면 단면적, 도심, 단면2차모멘트가 바로 계산되는 데모까지 만든다. 이번 편에서 만들 것 ▲ 실제로 동작하는 데모. 슬라이더로 단면 치수를 바꾸면 3D 모델, 단면 성질, 그래프가 함께 바뀐다. ○ 복부 높이를 키워보면 단면2차모멘트(주황 실선)는 빠..
2편에서는 박스 하나를 띄우면서 three.js의 기본 구조(장면·카메라·렌더러)를 익혔다. 그런데 화면을 마우스로 돌려볼 수 없으니, 교량처럼 큰 구조물은 한쪽 면밖에 볼 수 없었다.3편에서는 OrbitControls로 마우스 회전·확대·이동을 붙이고, 조명 5가지와 그림자를 다뤄서 1편의 교량 모델을 구조해석 프로그램처럼 자유롭게 돌려볼 수 있게 만든다. 이번 편에서 만들 것 ▲ 실제로 동작하는 데모. 마우스 왼쪽 드래그 회전, 휠 확대·축소, 오른쪽 드래그 이동. 아래 버튼으로 조명과 그림자를 켜고 끌 수 있다. ○ 버튼을 눌러 조명을 하나씩 켜고 꺼보면, 조명마다 교량이 어떻게 달라 보이는지 바로 확인할 수 있다.○ 그림자를 끄면 교량이 땅에서 떠 보이고, 켜면 높이 관계가 한눈에 들어온다.○ 자..
지난 1편에서는 Claude에게 말로 설명해서 three.js 교량 모델을 한 번에 띄워봤습니다. 결과는 나왔지만, 코드가 80줄 가까이 되다 보니 "이게 어떻게 돌아가는 거지?" 하는 부분이 많았을 겁니다.AI가 코드를 써준다고 해도, 기본 구조를 알고 있어야 원하는 걸 정확히 요청하고, 틀린 부분을 고칠 수 있습니다. 구조계산 프로그램을 쓸 때도 입력 구조를 알아야 결과를 검토할 수 있는 것과 같습니다.그래서 2편에서는 교량을 잠시 내려놓고, 박스 하나를 화면에 띄우는 가장 작은 예제로 three.js의 뼈대를 하나씩 뜯어보겠습니다. 이 글을 다 읽고 나면 1편 코드의 대부분을 읽을 수 있게 됩니다.(자바스크립트와 three.js를 왜 배워야 하는지가 궁금하다면 토목 엔지니어가 자바스크립트와 Thre..
우리는 왜 아직도 무거운 프로그램과 엑셀에 갇혀 있을까?아침에 출근해서 가장 먼저 하는 일을 떠올려 보자. 메일을 확인하고, 어제 보던 모델을 열기 위해 Revit이나 Midas를 실행한다. 그리고 기다린다. 라이선스 서버가 응답하기를, 수백 메가바이트짜리 모델이 로딩되기를. 가끔은 "사용 가능한 라이선스가 없습니다"라는 메시지를 보고 옆자리 동료에게 언제 끄냐고 묻기도 한다.설계 검토 회의는 더 답답하다. 발주처 담당자에게 3D 모델을 보여주고 싶지만 그쪽 PC에는 뷰어가 없다. 결국 캡처한 이미지 몇 장을 PPT에 붙여 보낸다. 현장에서 태블릿으로 거더 배치를 확인하고 싶다는 요청이 오면 할 말이 없다.그리고 모델링이 끝나면 다시 엑셀로 돌아온다. 물량을 뽑고, 구조계산서 양식에 값을 옮겨 적고, 단..
구조 설계를 하다 보면 "이 교량을 3D로 바로 돌려볼 수 있으면 좋겠다"는 생각이 자주 듭니다. 그런데 레빗이나 테클라 같은 상용 프로그램은 무겁고 비싸고, 간단한 형상 하나 확인하려고 켜기엔 부담스럽습니다.그래서 요즘은 웹 브라우저 + three.js + AI(Claude) 조합으로 구조물을 직접 코딩해서 만들고 있습니다. 코딩을 잘 몰라도 됩니다. 원하는 모양을 말로 설명하면 AI가 코드를 써주고, 저는 그걸 브라우저에서 열어보기만 하면 됩니다. 이렇게 AI에게 설명하면서 코드를 만드는 방식을 요즘 바이브 코딩(vibe coding)이라고 부릅니다.이번 연재는 구조기술자가 AI와 three.js로 교량 3D 모델을 만드는 과정을 10편에 걸쳐 정리합니다. 1편에서는 준비물과 첫 결과물까지 가보겠습니..
