7편까지 만든 교량은 모두 일직선이었다. 하지만 실제 도로는 산을 돌고 강을 건너며 휘어진다. 인터체인지 연결로, 산악 도로, 도심 고가도로에서는 교량이 도로를 따라 곡선으로 놓이는 경우가 많다.8편에서는 도로 중심선(평면 선형)을 따라 휘는 곡선교 모델을 만든다. 곡선 반경 R로 교량 위 모든 점의 좌표를 계산하고, 단면을 곡선을 따라 쓸어서(sweep) 바닥판과 거더를 만들고, 편경사만큼 바닥판을 기울인다. 반경 슬라이더 하나로 직선교부터 급곡선교까지 바꿀 수 있다. 이번 편에서 만들 것 ▲ 실제로 동작하는 데모. 곡선 반경과 편경사를 바꾸면 교량 전체가 다시 만들어진다. 부재를 클릭하면 속성이 나온다. (드래그는 회전) ○ 반경을 줄이면 교량이 더 크게 휘고, 바깥쪽 거더가 안쪽 거더보다 길어진다...
6편까지 만든 교량은 모양만 있는 3D 모형이었다. 화면에서는 그럴듯해 보이지만 거더를 클릭해도 아무 일도 일어나지 않고, 이 부재가 몇 번 거더인지, 재질이 무엇인지, 물량이 얼마인지 알 수 없다.7편에서는 바닥판·거더·가로보·받침·교각·교대를 각각 이름과 속성을 가진 부재로 조립한다. 부재를 클릭하면 ID·재질·치수·물량이 표시되고, 종류별로 숨기거나 보일 수 있으며, 물량은 부재 정보에서 자동으로 집계된다. 형상에 정보가 붙는 순간 3D 모형이 BIM 모델이 된다. 이번 편에서 만들 것 ▲ 실제로 동작하는 데모. 부재를 클릭하면 속성이 표시되고, 위쪽 체크박스로 종류별 보이기를 바꿀 수 있다. (드래그는 회전) ○ 바닥판·방호벽을 끄면 거더와 가로보가 드러난다. 거더를 하나 클릭하면 G2-2처럼 몇..
5편에서는 슬라이더로 I형 거더의 단면 치수를 바꾸면 3D 모델과 단면2차모멘트가 함께 바뀌는 데모를 만들었다. 6편에서는 같은 방식을 교량 전체로 넓힌다. 경간 수, 경간 길이, 바닥판 폭, 거더 개수, 교각 높이를 슬라이더로 바꾸면 교각 위치, 거더 간격, 물량까지 규칙에 따라 다시 계산되는 파라메트릭 교량 모델이다.Revit 패밀리나 Tekla 사용자 컴포넌트를 써봤다면 익숙한 개념이다. 차이는 그 규칙을 내가 직접 코드로 정한다는 것, 그리고 Claude에게 맡기면 그 코드를 몇 분 만에 받을 수 있다는 것이다. 이번 편에서 만들 것 ▲ 실제로 동작하는 데모. 위쪽 버튼으로 예시 교량을 고르거나, 슬라이더로 치수를 바꿔보자. 모델·물량·그래프가 함께 바뀐다. ○ 경간 수를 바꾸면 교각 개수와 위치..
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..
구조설계를 하다 보면 하루의 절반은 "계산"이 아니라 "정리"에 쓰입니다. 해석 결과를 엑셀로 옮기고, 하중조합표를 다시 만들고, 물량표의 단위를 맞추고, 계산서 양식에 숫자를 붙여 넣습니다. 그래서 예전부터 엑셀 VBA와 MIDAS API로 반복 작업을 줄여 왔는데, 최근에는 여기에 Claude(클로드)라는 AI를 붙여서 일하는 방식이 꽤 많이 바뀌었습니다.이번 시리즈 "Claude 설계자동화"에서는 교량 구조설계를 하는 구조기술자 입장에서, 설계 업무의 각 단계에 Claude를 어떻게 붙이는지 12편에 걸쳐 정리합니다. 1편은 전체 지도를 그리는 글입니다. 어떤 일을 AI에게 맡기고, 어떤 일은 엔지니어가 끝까지 쥐고 있어야 하는지부터 정리해 보겠습니다.1. 설계자동화, 매크로 시대와 AI 시대는 무..
구조 설계를 하다 보면 "이 교량을 3D로 바로 돌려볼 수 있으면 좋겠다"는 생각이 자주 듭니다. 그런데 레빗이나 테클라 같은 상용 프로그램은 무겁고 비싸고, 간단한 형상 하나 확인하려고 켜기엔 부담스럽습니다.그래서 요즘은 웹 브라우저 + three.js + AI(Claude) 조합으로 구조물을 직접 코딩해서 만들고 있습니다. 코딩을 잘 몰라도 됩니다. 원하는 모양을 말로 설명하면 AI가 코드를 써주고, 저는 그걸 브라우저에서 열어보기만 하면 됩니다. 이렇게 AI에게 설명하면서 코드를 만드는 방식을 요즘 바이브 코딩(vibe coding)이라고 부릅니다.이번 연재는 구조기술자가 AI와 three.js로 교량 3D 모델을 만드는 과정을 10편에 걸쳐 정리합니다. 1편에서는 준비물과 첫 결과물까지 가보겠습니..
