Loading

← AI in Architecture

상세 단면도로 만든 인터랙티브 입체 단면

뉴욕타임스 빌딩(렌조 피아노 빌딩 워크숍, 2007)의 FFL 6–7 외벽 한 구간입니다. 세라믹 차양, 커튼월, 바닥과 철골 구조가 어떻게 연결되는지 볼 수 있습니다.

  • 부재를 누르면 이름·역할·치수
  • 슬라이더로 조립 ↔ 분해
  • 두 손가락으로 확대
  • ‘처음 구도’로 되돌리기
Format
Interactive
Tools
Claude Code · Anatomy
Made
2026. 10. 19

입력한 자료만드는 법프롬프트

도면 두 장

도면 두 장과 프롬프트 하나로, 부재를 누르고 분해해 볼 수 있는 입체 단면을 만들었습니다. 상세 단면도를 위치·치수의 기준으로, 입체도를 형상과 재료 이름의 참고로 썼습니다.

뉴욕타임스 빌딩 외벽 상세 단면도 A4020
A · 외벽 상세 단면도출처 kr.pinterest.com/wordpressdotcom
Wall section perspective – actual 입체도
B · 외벽 단면 투시도출처 laurajillmurray.com

다섯 단계

  1. 01

    Claude Code 준비

    터미널에서 쓰는 AI 코딩 도구 Claude Code를 설치하고 로그인합니다. Node.js 20 이상이 필요합니다.

  2. 02

    Anatomy 스킬 설치

    아래 한 줄을 터미널에 붙여 넣습니다. 입체 설명 그림을 만드는 오픈소스 스킬이 설치됩니다.

    npx skills add wheresryan22/anatomy -g
  3. 03

    도면 두 장 준비

    상세 단면도(위치·치수의 기준)와 참고 입체도(형상·재료 이름 보완) 두 장을 준비합니다. 이번 작업은 위 ‘도면 두 장’을 썼습니다.

  4. 04

    /anatomy + 도면 + 프롬프트를 한 메시지로

    Claude Code 입력창 한 줄에 세 가지를 차례로 넣고 Enter를 누릅니다. 따로따로 보내면 안 됩니다.

    1. /anatomy를 입력하고 한 칸 띄웁니다.
    2. 도면 A(상세 단면도), 도면 B(입체도) 순서로 이미지를 첨부합니다. 터미널 창에 끌어다 놓거나, 복사한 이미지를 Ctrl+V로 붙여 넣으면(맥도 Cmd+V가 아닌 Ctrl+V) [Image #1] [Image #2]로 표시됩니다.
    3. 바로 이어서 프롬프트를 붙여 넣고 Enter를 누릅니다.

    프롬프트 전문 보기 ↓

  5. 05

    결과 확인

    만들어진 HTML을 브라우저에서 열어 조립·분해, 부재 선택, 접합부 확대를 직접 확인합니다. 도면에 숫자가 없는 값은 ‘픽셀 추정’·‘가정’으로 표시되니 실제 치수는 꼭 검토하세요.

그대로 복사해서 쓰세요

이번 결과물을 만든 프롬프트 전문입니다. Claude Code 입력창에 /anatomy를 쓰고, 도면 두 장을 첨부한 다음, 같은 메시지에 이어서 붙여 넣으세요.

프롬프트 전문

첨부한 두 이미지를 바탕으로, 렌조 피아노가 설계한 뉴욕타임스 빌딩의 외벽 상세를 설명하는 인터랙티브 입체 단면을 만들어줘.

결과물은 외부 세라믹 차양, 커튼월, 바닥과 철골 구조가 어떻게 구성되고 연결되는지 이해할 수 있는 건축 상세 시각화여야 한다.

최우선 평가 기준은 원본의 부재 구성, 접합 관계, 방향, 비례를 충실하게 보존하는 것이다.

1. 두 참고 이미지의 역할

이미지 A: 첫 번째로 첨부한 청색 배경의 상세 단면도. 층간 높이 관계, 바닥 구성, 부재 위치, 외벽과 슬래브의 접합 위치, 읽을 수 있는 치수의 기준으로 사용한다.

이미지 B: 두 번째로 첨부한 흰색 배경의 “WALL SECTION PERSPECTIVE - ACTUAL” 입체도. 부품의 입체 형상, 단면 밖으로 뻗는 방향, 재료 이름, 절개 방식과 카메라 구도를 보완하는 자료로 사용한다.

두 이미지를 먼저 직접 열어서 관찰하고, 주요 부재와 연결 관계를 정리한 뒤 모델링한다.

두 자료가 같은 설계 단계의 도면이라고 단정하지 않는다. 같은 부위에서 차이가 발견되면 기록하고, 초기 모델의 단면상 위치와 치수는 A를 기준으로 한다.

B에서 보이는 절개 경계나 화면상의 간격을 그대로 실제 건축 치수로 옮기지 않는다. 실제 조립 위치와 설명용 분리 거리를 구분한다.

2. 재현 범위와 좌표

전체 건물 대신, 이미지 A에 나타난 FFL 6과 FFL 7 주변의 두 바닥 접합부 및 그 사이 외벽 구간을 포함하는 한 개 파사드 샘플을 만든다. 도면의 상단과 하단에서 계속되는 부재는 잘린 연속부로 표현한다.

좌표는 다음처럼 정의한다.

X: 입면을 따라 수평으로 뻗는 방향.

Y: 건물 외부에서 실내로 들어가는 방향.

Z: 수직 높이.

이미지 A는 기본적으로 Y–Z 방향의 단면이다.

도면 밖 X 방향의 재현 폭과 실내 쪽 모델 끝부분은 설명에 필요한 범위로 정하고, 수정 가능한 파라미터로 둔다. 자료에서 확정되지 않은 재현 폭을 실제 건물의 베이 치수로 표기하지 않는다.

3. 반드시 재현할 부재와 관계

외부 세라믹 차양

이미지 A의 외측에 세로로 반복되는 작은 원들은 수평 세라믹 차양봉의 단면이다.

이를 X 방향으로 길게 뻗고 Z 방향으로 반복되는 원통형 부재로 모델링한다. 원본에서 보이는 차양봉의 배치 구간과 비어 있는 구간을 보존한다.

이미지 B의 다음 부품을 서로 구분한다.

Alumina silicate composite ceramic sleeve: 세라믹 차양봉.

Water-cut extruded aluminum combs: 차양봉을 받치는 알루미늄 콤 지지대.

Bracket arm: 돌출 브래킷 암.

Painted aluminum diagonal sag rods: 대각 지지 로드.

차양봉, 콤 지지대, 브래킷, 대각 로드가 실제로 어디에서 만나는지 확인해 배치한다. 조립 상태에서 지지 부재의 끝이 공중에 뜨지 않도록 한다. 확인되지 않는 고정구 내부 형상은 단순화한다.

커튼월

외부 차양 스크린과 커튼월 사이의 이격 관계를 보존하고, 다음을 별도 부재로 구성한다.

투명 로이 복층유리: I.G.U. vision lite, clear with low E.

압출 알루미늄 멀리언: extruded aluminum mullion.

층간 구조부를 가리는 스팬드럴 패널: spandrel panel.

유리는 반투명하게 표현하고, 멀리언과 스팬드럴은 각각의 불투명한 부재로 읽히게 한다. 차양 스크린을 유리 표면에 직접 부착한 것처럼 표현하지 않는다.

이중바닥과 공조 공간

바닥 마감 패널, 받침대, 콘크리트 슬래브를 구분한다.

Floor plenum for air distribution은 이중바닥 패널과 콘크리트 슬래브 사이의 공간이다. 패널이 받침대 위에 올라가는 관계와 그 아래 빈 공간을 입체 단면에서 확인할 수 있게 한다.

콘크리트와 금속 데크

콘크리트 채움과 골이 있는 금속 데크를 재현한다. 데크의 골 방향과 단면 형상을 두 이미지와 대조한다.

조립 상태에서는 콘크리트와 데크가 맞물린 바닥 구성으로 보여야 한다. 두 재료의 형상과 경계는 분해 보기에서도 유지한다.

철골보와 내화피복

이미지 A에 보이는 I형 철골보의 위치와 단면 방향을 보존하고, 슬래브 가장자리 보를 구분한다.

이미지 B의 sprayed-on fireproofing at beams는 철골보 표면을 감싸는 내화피복으로 표현한다. 정확한 두께를 확인할 수 없다면 단순화한 표현임을 기록한다.

하부 천장과 설비 영역

이미지 A에 보이는 보 아래의 천장, 행거, 조명 위치와 설비 공간을 가능한 범위에서 재현한다.

이 영역은 슬래브 위 이중바닥의 공조 공간과 별도로 구분한다. 보이지 않는 설비 배관이나 덕트를 임의로 추가하지 않는다.

4. 치수와 불확실한 정보

읽을 수 있는 치수는 해당 치수가 가리키는 양 끝점과 부재를 확인한 뒤 사용한다.

모델 내부의 단위는 일관되게 관리한다. 원본의 피트·인치를 변환할 경우 원래 표기도 함께 보관한다.

이미지 B에서 읽히는 1인치 I.G.U.와 3/16인치 브래킷 판 표기는 해당 부품에만 적용한다.

흐릿한 치수, 세라믹 봉의 정확한 지름과 간격, 숨겨진 접합부, 도면 밖 부재 길이를 임의의 확정값으로 제시하지 않는다.

필요한 미확정 값은 수정 가능한 파라미터로 두고, “자료에서 확인한 값”과 “설명용으로 가정한 값”을 구분한다.

인체, 가구, 치수선, 인출선, 도면 테두리는 모델의 건축 부재로 만들지 않는다.

5. 화면과 표현

기본 화면은 이미지 B에 가까운 고정 축측투영의 입체 단면으로 만든다.

외부 차양은 화면 왼쪽, 실내 바닥은 오른쪽으로 뻗고, 수직 부재는 수직으로 읽히도록 카메라를 잡는다. 바닥의 절단면, 데크 골, 철골보, 이중바닥 받침대를 동시에 관찰할 수 있는 구도를 선택한다.

흰색 또는 밝은 회색 배경에 다음 표현을 사용한다.

절제된 회색 계열의 재료 구분.

부재의 두께가 읽히는 음영.

선명한 절단면과 가는 외곽선.

유리의 제한적인 투명도.

선택한 부재에만 적용되는 강조색.

이미지 B의 파란색·노란색 영역과 radiation kWh/m² 범례는 이번 결과물에서 제외한다. 이를 재료 색으로 옮기거나 새로운 일사·열환경 분석 결과로 제시하지 않는다.

부재 라벨과 인출선은 허용한다. 라벨은 서로 겹치지 않게 배치하고 실제 대상 부재에 연결한다.

6. 상호작용

기본 상태는 실제 접합 관계를 보여주는 조립된 입체 단면이다.

다음 기능을 구현한다.

조립 / 분해 슬라이더
0%는 조립 상태, 100%는 구성 관계를 읽기 좋은 설명용 분해 상태다. 외부 차양, 지지 부재, 커튼월, 바닥 구성, 철골·천장을 적절한 그룹으로 나누어 이동한다.

부재 선택
부재를 클릭하거나 선택하면 강조하고, 한국어 이름, 원본의 영어 부품명, 역할, 확인된 치수를 간단한 패널에 표시한다.

확대와 초기화
작은 접합부를 확대해서 볼 수 있고, 처음 구도로 돌아갈 수 있게 한다.

분해할 때는 부재의 위치만 이동한다. 길이, 두께, 부품 수를 바꾸거나 브래킷을 늘리지 않는다.

이 움직임은 구성을 이해하기 위한 보기 전환이다. 실제 건물의 가동 기능이나 검증된 시공·해체 순서를 의미하지 않는다.

7. Anatomy 적용 방식

설치된 Anatomy의 SKILL.md와 관련 예제를 읽고, 제공되는 기하 도구와 SVG 렌더링을 사용한다.

각 부재를 3D 좌표와 독립된 형상으로 정의하고, 조립 위치·분해 이동값·카메라 설정을 분리한다. 완성 이미지를 배경에 깔고 클릭 영역만 덧붙이는 방식으로 구현하지 않는다.

이번 작업에서는 원본 건축 상세를 충실하게 재구성한다는 요구사항을 우선한다.

Anatomy의 일반적인 새 장치 발명 지침은 적용하지 않는다.

부품 수는 원본 구성에 따라 정한다. 최소 개수를 채우기 위한 장식 부품은 추가하지 않는다.

건축 상세 설명에 필요한 부재명과 인출선을 허용한다.

상시 자동 동작 대신 사용자가 조작하는 분해·선택 기능을 중심으로 한다.

첫 버전은 고정 카메라의 단면 설명에 집중한다.

8. 구현 순서와 검증

먼저 두 이미지에서 확인한 부재 목록과 주요 접합 관계를 짧게 정리한다. 이어서 조립 상태의 기본 형상을 구현하고, 원본과 대조한 다음 세부 형상과 상호작용을 추가한다. 진행 가능한 불확실성은 가정으로 기록하고 구현을 계속한다.

다음 항목을 검증한다.

세라믹 차양봉의 방향과 배치 구간.

차양 지지대와 브래킷·대각 로드의 연결.

커튼월과 슬래브 가장자리의 위치 관계.

이중바닥 아래 공간과 보 아래 천장 공간의 구분.

콘크리트·데크·철골보의 접촉 관계.

조립 상태의 떠 있는 부재와 의도하지 않은 관통.

조립·분해 상태에서 앞뒤 가림 순서와 라벨 위치.

콘크리트와 데크의 맞물림, 유리의 프레임 삽입, 철골 표면의 피복처럼 의도된 접촉·포함 관계는 유지한다. 검사 오류를 없애기 위해 원본에 없는 틈을 만들지 않는다.

Anatomy의 검사 도구를 적용하되, 의도된 접합으로 예외가 필요하면 해당 부재 쌍과 이유를 한정해서 기록한다. 실제 형상 대신 대체 형상을 검사하거나 광범위한 검사를 꺼서 통과시키지 않는다.

조립 상태와 분해 상태의 화면을 캡처하고, 주요 접합부를 확대해서 직접 확인한다. 실행한 검사와 확인하지 못한 항목을 구분해서 보고한다.

9. 결과물

다음을 제공한다.

브라우저에서 실행할 수 있는 독립 HTML.

부재 형상과 파라미터를 수정할 수 있는 원본 코드 및 실행 방법.

조립 상태와 분해 상태의 미리보기 이미지.

확인된 치수, 설명용 가정, 두 참고 자료 사이의 차이를 정리한 짧은 메모.

화면 제목은 “뉴욕타임스 빌딩 — 외벽 상세의 구성”으로 하고, 설명은 한국어로 작성한다.

첨부 자료에 근거한 건축 상세 재구성이라는 범위를 유지하면서, 사용자가 부재를 선택하고 분해해 구성 관계를 이해할 수 있는 완성된 결과물을 만들어줘.
  • 다른 건물에 쓸 때

    건물 이름, 층 표기(FFL), 부재 이름을 그 도면에 맞게 바꾸세요.

  • 결과 확인

    AI 결과는 실행할 때마다 조금씩 달라집니다. 도면에 숫자가 없는 값은 직접 확인해야 합니다.

  • 자료 출처

    도면과 사진은 저작권이 있는 자료일 수 있으니 출처를 함께 표기하세요.

사용한 도구

Anatomy

아이디어를 실제로 작동하는 입체 물체로 만들어 설명하는 Claude 스킬입니다. 원래는 기계와 장치를 그리는 도구인데, 이번에는 건축 외벽 상세에 적용했습니다.

이 페이지의 모델은 첨부 자료에 근거한 재구성이며, 일부 치수는 도면에서 잰 추정값 또는 설명용 가정입니다. 실제 건물의 시공 정보로 쓰지 마세요.

Let's talk about AI for your team

Tell us about your workflows and challenges. We'll help you explore suitable products and implementation options.

We collect your name, company, work email, phone, department and role, plus visit data (page URL, referrer, UTM and time of visit) to see how you found us. We use it to respond and send materials, keep it for one year, then delete it.

We use your information to respond to your inquiry. See our Privacy Policy for details.