안녕하세요! 프론트엔드 강사입니다.

오늘은 MDN에서 제공하는 아주 유용하고 재미있는 도구, '도형 생성기(Shape generator)'에 대해 알아보겠습니다. CSS로 복잡한 다각형(polygon())이나 이미지 맵 영역(<area>)을 지정할 때 좌표를 하나하나 계산하느라 머리 아팠던 경험, 다들 있으시죠?

이 도구를 사용하면 이미지를 띄워놓고 마우스로 클릭만 하면 좌표와 CSS/SVG 코드가 자동으로 뚝딱 만들어집니다! 실무에서 디자인 시안을 픽셀 단위로 잘라낼 때 엄청난 시간을 아껴주는 이 꿀 같은 도구를 어떻게 사용하는지 설명해 드릴게요.

---

도형 생성기 (Shape generator)

이 도형 생성기 도구는 <basic-shape>를 사용하는 다양한 기능들의 좌표(coordinates)와 구문(syntax)을 정의하는 데 사용할 수 있습니다. 구체적으로 다음 항목들에 사용할 수 있어요:

• HTML <area> 요소의 coords 속성 (이미지 맵 만들 때)
• CSS의 기본 도형 함수들: inset(), xywh(), rect(), circle(), polygon() (CSS Shapes 및 clip-path를 만들 때)
• SVG 요소들: <rect>, <circle>, <polygon>

👨‍🏫 강사님의 꿀팁:
이 도구 하나면 이미지 맵(Image Map), CSS clip-path(요소 자르기), CSS shape-outside(텍스트 밀어내기), 그리고 SVG 도형 그리기까지 무려 4가지 작업을 한 번에 날먹(?)할 수 있습니다. 프론트엔드 개발자라면 꼭 북마크 해두세요!

사용 방법 (How to use)

이 도형 생성기는 여러분이 기본 도형을 시각적으로 쉽게 그릴 수 있도록 도와줍니다. 이미지 위에 여러분이 찍은 각 점의 좌표를 덧씌워서(superimposed) 출력해 주죠.

1. 이미지 업로드: 기준이 될 이미지를 드래그 앤 드롭하거나 클릭해서 업로드합니다.
2. 도형 선택: 드롭다운 메뉴(Shape)에서 만들고 싶은 도형의 종류(사각형, 원, 다각형 등)를 선택합니다.
3. 스케일 조정 (선택): 캔버스의 크기가 너무 작거나 크다면 Range 슬라이더(Scale)를 이용해 캔버스의 스케일을 조절할 수 있습니다.
4. 점 찍기: 이미지 위에서 클릭하여 여러분이 만들고자 하는 도형의 기준점들을 추가합니다.
5. 코드 복사: 점을 다 찍으면 도구 하단에 HTML coords 속성 값, 좌표가 포함된 CSS 기본 도형 함수, 그리고 SVG 도형 마크업 코드가 즉시 출력됩니다. 이걸 그대로 복사해서 쓰시면 끝!

👉 MDN Playground에서 도형 생성기 직접 사용해 보기

(위 링크를 클릭하시면 이미지를 업로드하고 마우스로 점을 찍어 코드를 추출할 수 있는 인터랙티브 도구가 실행됩니다.)

---

제공되는 코드 예시

도구에서 점을 찍으면 아래와 같은 3가지 형태의 코드를 자동으로 만들어줍니다. (예를 들어, polygon(다각형)을 선택하고 점을 여러 개 찍었을 때의 예시입니다.)

1. HTML coords attribute
<map>과 <area> 태그를 사용해 클릭 가능한 이미지 영역을 만들 때 사용합니다.

coords="50,10,150,200,10,200"

2. CSS shape functions
clip-path나 shape-outside 속성의 값으로 바로 사용할 수 있습니다.

polygon(50px 10px, 150px 200px, 10px 200px)
/* clip-path: polygon(50px 10px, 150px 200px, 10px 200px); 처럼 씁니다 */

3. SVG element
인라인 SVG를 그릴 때 바로 사용할 수 있는 태그를 만들어줍니다.

<polygon points="50,10 150,200 10,200" />

---

MDN 개선에 도움을 주세요 (Help improve MDN)

이 페이지가 도움이 되었나요? (Was this page helpful to you?)

• [예 (Yes)]

• [아니요 (No)]

• 기여하는 방법 알아보기 (Learn how to contribute)

이 페이지는 MDN 기여자들에 의해 2025년 12월 16일에 마지막으로 수정되었습니다.

• GitHub에서 이 페이지 보기 (View this page on GitHub)
• 이 콘텐츠의 문제 신고하기 (Report a problem with this content)

---

수고하셨습니다! 이제 복잡한 형태의 요소를 마크업 하거나 디자인을 코드로 옮겨야 할 때 두려워하지 마세요. 이 훌륭한 툴을 활용해서 여러분의 작업 시간을 획기적으로 줄여보시길 바랍니다! 궁금한 점이 있다면 언제든 편하게 질문해 주세요!

{"component":"LlmGeneratedComponent","props":{"height":"600px","prompt":"Create an interactive Shape Generator tool inspired by the MDN article. The layout should have a dark, modern theme. Include a side panel for controls (Shape Type dropdown: Polygon, Circle, Rectangle; Reset button) and a main Canvas area. Users can click on the Canvas to add points and draw the selected shape in real-time. Below the Canvas, display a 'Code Output' section that automatically updates to show the CSS `clip-path` value, the SVG markup, and the HTML `<area>` coords based on the drawn points. Use high-contrast colors for drawn lines and points. The tool should be intuitive and allow testing basic shape coordinate generation.","id":"im_0a6a4950a7845099"}}