-
[클로드] 평면도 → 건축 아이소메트릭 스킬 제작카테고리 없음 2026. 4. 21. 17:21
설명
평면도 이미지나 텍스트 설명을 입력받아 건축 전문 아이소메트릭 뷰(isometric view)를 SVG로 생성하는 스킬. 사용자가 "평면도", "아이소메트릭", "isometric", "조감도", "axonometric", "평면 → 3D", "도면 시각화", "건축 드로잉", "공간 분석", "층 구성", "실내 배치 시각화" 등을 언급하면 항상 이 스킬을 사용할 것. 평면도 이미지가 업로드된 경우, 텍스트 설명만 있는 경우, 또는 룸 리스트만 있는 경우에도 모두 적용. 건축 초기 디자인, 컨셉 프레젠테이션, 공간계획 검토에 최적화되어 있음.
평면도 → 건축 아이소메트릭 스킬
건축 전문 아이소메트릭(등축 투영) 도면을 SVG로 생성합니다.
평면도 이미지, 텍스트 기술, 룸 리스트 등 어떤 입력도 처리 가능합니다.
입력 처리 방법
1. 이미지 입력 (평면도 업로드)
- 이미지를 분석해 룸/공간의 위치, 크기 비율, 형태를 추출
- 벽, 개구부(문/창), 계단, 코어 위치 파악
- 공간 간 연결 관계 파악
2. 텍스트/설명 입력
- 방 이름, 면적, 배치 관계를 파악
- 누락된 정보는 건축적 상식으로 보완 (예: 복도 너비, 코어 위치 등)
3. 최소 정보 입력 (룸 리스트만)
- 프로그램에 맞는 합리적인 배치를 자체적으로 생성
- 사용자에게 가정 사항 명시
아이소메트릭 SVG 생성 규칙
투영 방식
- 표준 아이소메트릭: X축 30°, Y축 30° (좌우 대칭)
- 또는 건축 액소노메트릭: 평면을 45° 또는 30°/60°로 회전
- 기본은 평면 45° 회전 + Z축 수직 방식 사용 (건축 드로잉에서 가장 직관적)
좌표 변환 공식 (ISO to SVG)
// 아이소메트릭 변환 (30° 기준) iso_x = (world_x - world_y) * cos(30°) iso_y = (world_x + world_y) * sin(30°) - world_z * height_scale // SVG 중심 오프셋 적용 svg_x = center_x + iso_x svg_y = center_y + iso_y레이어 구성 (아래→위 순서로 그리기)
- 바닥 슬래브 - 가장 밝은 면, 연한 베이지/회색
- 벽체 측면 (우측) - 중간 명도
- 벽체 측면 (좌측) - 가장 어두운 면
- 벽체 상단 - 밝은 면
- 개구부 (문, 창) - 벽 위에 오버레이
- 가구/요소 (선택)
- 라벨 - 공간 이름, 면적
컬러 팔레트 (건축 도면 스타일)
기본 스타일 (화이트/그레이 계열)
바닥: #F5F0E8 (따뜻한 오프화이트) 벽 상단: #E8E4DC 벽 우측면: #D4CFC5 벽 좌측면: #B8B4AC 개구부: #7BA7BC (유리/하늘색) 강조선: #2C2C2C 라벨: #1A1A2E공간 유형별 컬러 코딩 (선택적 적용)
거실/공용: #EEF2F7 주방: #FFF8F0 침실: #F0F4F8 욕실: #F0F8F5 복도/홀: #F8F8F8 계단: #F0EDE8 코어: #E8E4E0 외부/발코니: #E8F4E8벽체 두께 및 비율
- 외벽: 평면 스케일의 약 5-8% 두께
- 내벽: 외벽의 60-70%
- 층고(Z): 평면 대각선 길이의 약 30-40%
- 천장 두께: 층고의 10%
SVG 코드 구조 템플릿
svg<svg viewBox="0 0 900 700" xmlns="http://www.w3.org/2000/svg" font-family="'Helvetica Neue', Arial, sans-serif"> <defs> <!-- 그림자 필터 --> <filter id="shadow" x="-10%" y="-10%" width="120%" height="130%"> <feDropShadow dx="3" dy="6" stdDeviation="4" flood-color="#00000022"/> </filter> <!-- 해칭 패턴 (벽 단면) --> <pattern id="wall-hatch" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"> <line x1="0" y1="0" x2="0" y2="6" stroke="#999" stroke-width="1" opacity="0.4"/> </pattern> </defs> <!-- 배경 --> <rect width="900" height="700" fill="#FAFAF8"/> <!-- 그리드 참고선 (선택) --> <!-- <g id="grid" opacity="0.1"> ... </g> --> <!-- 건물 그룹 --> <g id="building" filter="url(#shadow)" transform="translate(450, 120)"> <!-- Layer 1: 바닥 --> <g id="floors"> ... </g> <!-- Layer 2: 벽 측면 --> <g id="walls-side"> ... </g> <!-- Layer 3: 벽 상단 --> <g id="walls-top"> ... </g> <!-- Layer 4: 개구부 --> <g id="openings"> ... </g> <!-- Layer 5: 계단/코어 --> <g id="cores"> ... </g> <!-- Layer 6: 가구 (선택) --> <!-- <g id="furniture"> ... </g> --> </g> <!-- 라벨 레이어 (transform 없이 절대좌표) --> <g id="labels"> ... </g> <!-- 범례 및 스케일 바 --> <g id="legend" transform="translate(30, 620)"> ... </g> <!-- 타이틀 --> <text x="450" y="40" text-anchor="middle" font-size="16" font-weight="300" letter-spacing="3" fill="#2C2C2C">FLOOR PLAN ISOMETRIC</text> </svg>
공간별 아이소메트릭 표현 방법
기본 박스 (방 1개)
각 방은 다음 6개 폴리곤으로 구성:
- 바닥 마름모 (top-down 평행사변형)
- 앞면 좌측 벽
- 앞면 우측 벽
- 뒷면 좌측 벽 (앞 요소에 가려질 수 있음)
- 뒷면 우측 벽
- 천장 (선택 - 컷어웨이 뷰에서 생략)
문 표현
- 벽에 개구부(빈 공간) + 문틀 라인
- 열린 문: 45° 패널 + 호(arc) 스윙라인
창문 표현
- 벽 중간 높이에 밝은 파란/흰색 사각형
- 창틀: 얇은 선으로 분할
계단 표현
- 각 디딤판을 아이소메트릭 평행사변형으로 순서대로 적층
- 난간: 얇은 수직선 + 수평 핸드레일
컷어웨이 (cut-away) 뷰
- 천장을 생략하거나 일부만 표현해 내부 공간 노출
- 앞쪽 벽을 투명하게 처리 (opacity: 0.3)
품질 기준
필수 요소
- 공간 비율이 입력 평면도와 일치
- 벽체 두께가 시각적으로 명확
- 명암 처리로 3D감 표현 (최소 2단계 명도차)
- 공간 이름 라벨 포함
- 북향 화살표 또는 방위 표시 (가능하면)
- 스케일 바 또는 주요 치수 표기
권장 요소
- 공간별 컬러 코딩
- 그림자 효과
- 개구부 (문/창) 표현
- 주요 가구 실루엣 (침대, 소파, 주방 카운터 등)
- 타이틀 블록
전문성 체크리스트
- 선 굵기 위계 (외벽 > 내벽 > 가구 > 치수선)
- 폰트는 sans-serif, 얇은 weight
- 여백(margin)이 SVG 전체의 10% 이상
- 전체 구성이 시각적으로 균형
출력 후 안내
아이소메트릭 생성 후 다음을 사용자에게 제안:
- 뷰 각도 변경 - 45°/30°/60° 옵션
- 컷어웨이 뷰 - 내부 공간 노출
- 레이어 추가 - 가구, 마감재, 치수
- 컬러 스킴 변경 - 모노크롬/컬러/다이어그램
- 복층 표현 - 멀티플로어 익스플로디드 뷰
참고: 건축 아이소메트릭 스타일 종류
스타일특징용도순수 아이소메트릭 30° 균등 투영 정밀 기술 도면 액소노메트릭 평면 45° 회전 건축 프레젠테이션 익스플로디드 뷰 레이어 분리 표현 공간 분해 설명 컷어웨이 일부 벽/천장 제거 내부 공간 표현 다이어그램 색상+심플 형태 조닝/프로그램 분석