AI 코딩 프롬프트 작성법: Claude에게 3D 모델 정확히 요청하기 [교량 BIM 바이브코딩 4편]

1~3편에서는 Claude에게 코드를 받아 교량을 띄우고, 돌려보고, 조명을 입혔다. 그런데 같은 Claude라도 어떻게 요청하느냐에 따라 결과가 완전히 달라진다. 한 번에 원하는 모델이 나오기도 하고, 열 번을 고쳐도 엉뚱한 모양이 나오기도 한다.

4편에서는 3D 구조물 모델을 요청할 때 쓰는 프롬프트 작성법을 정리한다. 일반적인 AI 활용 팁이 아니라, 치수와 좌표가 중요한 구조 엔지니어 입장에서 실제로 효과가 있었던 방법들이다.

 

모호한 요청과 구체적인 요청

---

○ AI는 빠진 정보를 스스로 추측해서 채운다. 추측이 많을수록 결과는 내 의도에서 멀어진다.

 

 

구분	모호한 요청	구체적인 요청
예시	"three.js로 교량 만들어줘"	"강거더교, 경간 40 m, 폭 10 m, 거더 3개 높이 1.8 m…"
AI가 추측하는 것	형식, 크기, 비율, 단위, 좌표, 파일 구성 전부	거의 없음
결과	그럴듯하지만 쓸 수 없는 모양	의도한 형태와 비율
다시 요청	여러 번 반복	세부 수정 1~2번

 

○ 핵심은 "AI가 추측할 여지를 없애는 것"이다. 구조계산서를 쓸 때 설계조건을 맨 앞에 명시하는 것과 같다.

 

좋은 프롬프트의 5요소

---

 

 

요소	빠지면 생기는 일	예시 문장
① 목표	엉뚱한 구조형식이 나옴	"I형 강거더교 3D 모델을 만들어줘"
② 출력 형식	React, Node 프로젝트 등 실행이 어려운 형태로 옴	"HTML 파일 하나, three.js는 CDN importmap"
③ 단위·좌표	모델이 누워 있거나 1000배 크기로 나옴	"단위 m, Y축 위, X축 교축, 원점은 교량 중앙 지면"
④ 치수	비율이 맞지 않는 장난감 같은 모델	"경간 40 m, 거더 3개 높이 1.8 m 간격 3.5 m"
⑤ 코드 규칙	수정할 때마다 코드 전체를 다시 받아야 함	"치수는 맨 위 변수로, 부재마다 한글 주석"

 

단위와 좌표를 먼저 약속하기

---

○ 3D 모델에서 가장 많이 어긋나는 부분이 단위와 좌표축이다. 2편에서 본 것처럼 three.js는 Y축이 위쪽이고, 구조해석 프로그램은 대부분 Z축이 위쪽이다.

○ 프롬프트 맨 앞에 좌표 약속을 한 줄로 적어두면, 이후 모든 치수가 그 기준으로 해석된다.

 

 

 

모호한 표현 → 정확한 표현

---

모호한 표현	정확한 표현	이유
"다리 길이 40"	"경간 길이 40 m (X축 방향)"	단위와 방향을 함께
"거더 3개 정도"	"거더 3개, 교폭 중앙 기준 대칭, 간격 3.5 m"	개수·배치·간격을 숫자로
"교각은 적당히"	"교각 2개, 높이 7 m, 양 끝에서 2 m 안쪽"	위치 기준점까지
"위에서 보는 화면"	"카메라 위치 (0, 60, 0.01), 원점을 바라보게"	좌표로 지정
"좀 더 크게"	"경간을 40 m에서 60 m로"	변경 전후 값을 모두
"진한 파란색"	"색상 0x3f6e9e"	색은 16진수 코드로
"바닥 깔아줘"	"120 × 120 m 초록색 지면을 y = 0에"	크기·높이 지정

 

구조 엔지니어가 특히 챙길 것

---

항목	흔한 실수	프롬프트에 적을 것
단위	도면 치수(mm)를 그대로 넣어 1000배 크기	"입력은 mm, 모델은 m로 변환" 또는 처음부터 m
축 방향	해석 모델 좌표(Z-up)를 그대로 사용	"Y축이 위, 해석 좌표는 (x, z, −y)로 변환"
단면 기준점	도심 기준인지 하단 기준인지 불명확	"단면 원점은 하부플랜지 하단 중앙"
간격 기준	중심 간격인지 순간격인지 불명확	"거더 중심 간 간격 3.5 m"
곡선·경사	기준선이 어디인지 불명확	"도로 중심선 기준, 반경 200 m"

 

기존 코드 수정을 요청하는 법

---

○ 전체 코드를 붙여넣는다. 일부만 주면 나머지와 맞지 않는 코드가 돌아온다.

○ 바꿀 것만 분명히 적고, "나머지는 그대로"라고 못 박는다. 그러지 않으면 멀쩡한 부분까지 바꾸는 경우가 있다.

○ "바꾼 줄에 ★ 표시"를 요청하면 변경점을 바로 찾을 수 있다. 3편 코드의 ★도 이렇게 받은 것이다.

○ 한 번에 한 가지씩 고친다. 여러 기능을 한꺼번에 요청하면 어디서 문제가 생겼는지 찾기 어렵다.

아래 코드에서 다음 한 가지만 바꿔줘.

- 거더 개수를 3개 → 5개로, 간격은 교폭 중앙 기준 대칭으로 2.1 m

- 나머지 코드는 그대로 두고, 바꾼 줄에는 ★ 표시와 한글 주석

(전체 코드 붙여넣기)

 

나쁜 수정 요청	좋은 수정 요청
"거더 더 많이 넣어줘"	"거더 3개 → 5개, 중심 간격 2.1 m, 대칭 배치"
(코드 일부만 붙여넣고) "여기 고쳐줘"	전체 코드 + "이 부분만 바꾸고 나머지는 그대로"
"조명 바꾸고 그림자 넣고 바닥도 넣고 회전도"	한 번에 하나씩: 조명 → 확인 → 그림자 → 확인
"전체 코드 다시 줘"	"바꾼 부분만 ★ 표시해서 전체 코드"

 

결과가 틀렸을 때 피드백하는 법

---

○ 결과가 이상할 때 "이상해", "안 돼"라고만 하면 AI도 무엇을 고칠지 모른다. 무엇이, 어떻게, 원래는 어때야 하는지를 적는다.

 

 

상황	나쁜 피드백	좋은 피드백
모양이 틀림	"이상하게 나와"	"거더가 바닥판 위로 튀어나옴. 거더 상단이 바닥판 하단(y = 8.8 m)에 붙어야 함"
화면이 안 나옴	"안 돼"	"흰 화면만 나옴. F12 콘솔 오류: (오류 메시지 그대로 붙여넣기)"
방향이 틀림	"돌려줘"	"교량이 Z축 방향으로 놓임. 교축이 X축 방향이 되게"
보기 불편	"더 예쁘게"	"HemisphereLight + DirectionalLight, 그림자 추가, 배경 0xdfe8f0"

 

○ 화면 캡처 이미지를 함께 첨부하면 훨씬 정확하다. Claude는 이미지를 보고 어디가 틀렸는지 판단할 수 있다.

○ 오류 메시지는 요약하지 말고 그대로 복사해서 붙여넣는다. 줄 번호와 변수 이름이 원인을 찾는 핵심 단서다.

 

프롬프트 빌더

---

아래에서 치수와 옵션을 고르면 5요소를 갖춘 프롬프트가 자동으로 만들어진다. 오른쪽 위 복사하기를 눌러 Claude에 그대로 붙여넣으면 된다. 가운데 화면은 입력값으로 미리 그려본 모습이다.

 

▲ 값을 바꾸면 미리보기와 프롬프트가 함께 바뀐다. 미리보기도 마우스로 돌려볼 수 있다.

 

○ 미리보기는 프롬프트의 치수가 맞는지 확인하는 용도다. 실제로 Claude가 만드는 모델은 세부 모양이 조금 다를 수 있다.

 

바로 쓰는 템플릿

---

○ 빌더 없이 직접 쓸 때는 아래 틀에 숫자만 채워 넣으면 된다.

three.js로 [구조형식] 3D 모델을 만들어줘.

[출력 형식]
- HTML 파일 하나로 작성
- three.js 0.186.1을 jsdelivr CDN에서 importmap으로 불러오기

[단위와 좌표]
- 단위는 m
- Y축이 위쪽, X축이 교축 방향, Z축이 교폭 방향
- 원점은 교량 중앙의 지면

[치수]
- 경간 [  ] m, 바닥판 폭 [  ] m, 두께 [  ] m
- 거더 [  ]개, 높이 [  ] m, 중심 간격 [  ] m, 교폭 중앙 기준 대칭
- 교각 [  ]개, 높이 [  ] m, 위치 [  ]

[기능]
- OrbitControls 마우스 조작, 지면, 그림자

[코드 규칙]
- 치수는 맨 위 변수로 모으기
- 부재마다 한글 주석

[확인]
- 다 쓴 뒤 치수와 좌표가 위 조건과 맞는지 스스로 점검

 

○ 마지막 [확인] 항목이 의외로 효과가 크다. AI가 코드를 다 쓴 뒤 조건과 비교하면서 스스로 실수를 잡아내는 경우가 많다.

 

정리

---

○ AI는 빠진 정보를 추측한다. 추측할 여지를 없애는 것이 좋은 프롬프트다.

○ 목표·출력 형식·단위와 좌표·치수·코드 규칙 5가지를 빠짐없이 적는다.

○ 수정할 때는 전체 코드 + 한 가지 변경 + "나머지는 그대로" + ★ 표시.

○ 틀렸을 때는 무엇이·어떻게·원래는을 적고, 캡처와 오류 메시지를 그대로 붙인다.

 

다음 편 예고

---

지금까지 거더는 직사각형 박스였다. 5편에서는 ExtrudeGeometry로 플랜지와 복부가 있는 실제 I형 거더 단면을 만들고, 단면 치수를 바꾸면 단면2차모멘트가 바로 계산되는 데모까지 만든다.

 

관련 글

---

     → [교량 BIM 바이브코딩 1편] three.js 입문: Claude 바이브코딩으로 3D 교량 만들기

     → [교량 BIM 바이브코딩 2편] three.js 기초: 장면·카메라·렌더러

     → [교량 BIM 바이브코딩 3편] OrbitControls·조명·그림자

     → [교량 BIM 바이브코딩 5편] three.js ExtrudeGeometry: I형 거더 단면 3D 모델링

     → [교량 BIM 바이브코딩 6편] three.js 파라메트릭 모델링: 슬라이더로 바뀌는 교량

     → [교량 BIM 바이브코딩 7편] three.js 교량 BIM 모델: 클릭하면 속성이 나오는 부재 조립

     → [교량 BIM 바이브코딩 8편] three.js 곡선교 모델링: 곡선 반경 R과 편경사로 휘는 교량