12월 11, 2022

캐드파일/DWG | 웹페이지에 삽입하고 보기

캐드 파일은 웹페이지에서 볼 수 없다. 왜냐하면 pdf 파일처럼 브라우즈들이 아직은 지원하지 않기 때문이다. 일부 전용 뷰어들은 전문적 설계 도면을 위한 제한성 때문에 본 포스트가 의도하는 범용의 웹 디자인 차원과는 상관이 없다. 언제일지는 미지수이지만 분명히 dwg 파일이나 pdf 파일이 지원되기까지 대체할 수 있는 다른 방법을 알아본다.

SVG로 변환한 DWG

Please Use modern Browser to see this SVG!

JPG와 PNG 파일

가장 일반적인 방법은 jpg와 png 포맷을 이용하는 이미지 변환이다. 캐드의 인쇄방식 옵션에 포함되어있어 쉽게 변환을 할 수 있다. 도면 전체나 부분을 설정해서 변환할 수 있으나 비트맵 방식의 한계 때문에 확대하면 해상도가 떨어지는 단점이 있다.

복잡한 과정 없이 가장 쉽게 변환하는 방법은 캐드 작업화면에서 자판의 윈도우즈키, shift키, S키를 동시에 눌러 도면을 선택하여 복사한 다음 포토샵이나 그림판 등 그래픽 프로그램에서 새로 만들기를 하면 복사한 크기의 그래픽 창이 열린다. 이때 붙여넣기를 하고 저장하면 된다.

PDF 파일

pdf 파일은 캐드의 dwg 파일과 마찬가지로 벡터 방식을 사용하기 때문에 캐드 파일처럼 일그러짐 없는 확대가 가능하다. 벡터그래픽 방식은 화소(비트맵)를 사용하는 JPG와 PNG 그래픽 포맷 방식과는 달리 숫자(디지털)를 코드화하기 때문에 절대로 일그러짐 없이 원래의 형태를 유지한다.

하지만 현존하는 웹 브라우즈들이 지원하지 않기 때문에 별도의 서버(네이버, 구글 드라이버 등)에 저장하고 링크로 불러오면 전용뷰어와 함께 보이는 단점이 있다. 하지만 다음에 소개하는 SVG 포맷 방식으로 변환하면 바로 웹페이지에 노출할 수 있다. 캐드에서 인쇄에서 pdf 옵션으로 저장하면 된다.

pdf 파일은 캐드의 dwg 파일과 마찬가지로 벡터 방식을 사용하기 때문에 캐드 파일처럼 일그러짐 없는 확대가 가능하다. 벡터그래픽 방식은 화소(비트맵)를 사용하는 JPG와 PNG 그래픽 포맷 방식과는 달리 숫자(디지털)를 코드화하기 때문에 절대로 일그러짐 없이 원래의 형태를 유지한다.

하지만 현존하는 웹 브라우즈들이 지원하지 않기 때문에 별도의 서버(네이버, 구글 드라이버 등)에 저장하고 링크로 불러오면 전용뷰어와 함께 보이는 단점이 있다. 하지만 다음에 소개하는 SVG 포맷 방식으로 변환하면 바로 웹페이지에 노출할 수 있다. 캐드에서 인쇄에서 pdf 옵션으로 저장하면 된다.

SVG 파일

SVG(scalable Vector Graphics)파일은 벡터그래픽 방식에 의한 이미지이므로 확대해도 절대로 변형되지 않아 캐드 도면과 같은 세밀하고 복잡한 그래픽 작성에 유용하다. 대부분의 브라우즈가 지원하나 만들기가 어려워 변환이 최상의 방법으로 손꼽힌다.

온라인 프로그램

캐드 파일(dwg)을 svg 파일로 변환시켜 주는 사이트가 많다. 구글 사이트에서 dwg to svg로 검색으로 로드되는 많은 프로그램 사이트에서 변환 절차에 따르면 된다.

오프라인 프로그램

다수의 SVG 변환 프로그램이 있으나 세계적인 개발자들에 의해 공동으로 제작되어 제공되는 잉크스케이프가 단연 최고로 추천된다.
잉크스케이프 프로그램을 실행한 다음, pdf 형식으로 저장된 캐드 파일을 불러온 뒤 svg 형식과 더불어 다른 이름으로 저장하면 된다.

웹페이지에 보이기

링크 방식

변환된 svg 파일을 개인의 클라우드 서버에 저장하고 게시글 작성의 html 모드에서 아래처럼 삽입하면 된다.

링크 방법1

<embed id="demo" type="image/svg+xml" style="width: 500px; height: 500px; border:1px solid black; " src="https://서버/test.svg" />

링크 방법2

<object data="https://서버/test.svg" type="image/svg+xml"></object>

코드 방식

svg 의 코드(숫자)를 페이지(html 모드)에 직접 넣으면 된다. 파일에 따라 여러 페이지가 필요한 단점 때문에 링크 방식이 선호되나 간단할 경우 아래와 같이 코드를 넣으면 매우 빠르게 이미지가 로드된다.
Notepad++ 과 같은 무료 프로그램에서 svg 파일을 불러오면 나타나는 코드를 복사하고 그대로 웹페이지에 붙여넣기를 하면 된다.

svg 코드

<?xml version="1.0" encoding="UTF-8"
standalone="no"?>
<!-- Created with Inkscape
(http://www.inkscape.org/) -->

<svg
width="210mm"
height="297mm"
viewBox="0 0 210 297"
version="1.1"
id="svg5"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs2" />
<g
id="layer1">
<path
style="fill:#ffff00;fill-rule:evenodd"
id="path55"
d="M 415.28546,866.47906 303.87678,802.
37985 187.9141,857.81684 214.44889,732.05315
125.89074,638.89706 253.69882,625.27003 314.
92955,512.2594 l 52.45495,117.34173 126.40083,
23.31168 -95.38915,86.14821 z"
transform="matrix(0.26458333,0,0,0.
26458333,17.349096,-101.20306)" />
</g>
</svg>