Raphaël을 웹 페이지에 추가하는 첫 번째 단계는 Raphaël 라이브러리 파일을 포함시키는 것입니다. 다음과 같은 HTML 코드를 사용하여 Raphaël 라이브러리 파일을 다운로드하고 포함시킬 수 있습니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>

이제 웹 페이지에 Raphaël을 추가했으므로, 실제로 상호작용성을 추가하고 SVG 그래픽을 생성해 보겠습니다.

// Raphaël을 사용하여 웹 페이지에 SVG 그래픽 생성하기
var paper = Raphael("svg-container", 400, 400); // SVG 컨테이너를 선택하고, 너비와 높이를 설정합니다.

// 원 그리기
var circle = paper.circle(200, 200, 100); // 중심 좌표 (x: 200, y: 200), 반지름 100인 원 생성
circle.attr("fill", "blue"); // 원의 배경 색상을 파란색으로 설정
circle.attr("stroke", "red"); // 원의 테두리 색상을 빨간색으로 설정

// 사각형 그리기
var rect = paper.rect(50, 50, 300, 200); // 시작 좌표 (x: 50, y: 50), 너비 300, 높이 200인 사각형 생성
rect.attr("fill", "yellow"); // 사각형의 배경 색상을 노란색으로 설정
rect.attr("stroke", "green"); // 사각형의 테두리 색상을 초록색으로 설정

위의 코드에서 Raphael("svg-container", 400, 400) 부분에서 “svg-container”는 SVG 그래픽을 표시할 컨테이너의 ID입니다. 이 컨테이너는 웹 페이지의 어디든 위치할 수 있으며, 원하는 크기로 설정할 수 있습니다.

원과 사각형의 속성을 설정하기 위해 circle.attr()과 rect.attr() 메서드를 사용했습니다. 이러한 메서드를 사용하여 배경 색상, 테두리 색상 등을 설정할 수 있습니다.

이것은 Raphaël을 사용하여 웹 페이지에서 상호작용성을 추가하는 간단한 예시입니다. Raphaël에는 다른 다양한 그래픽 요소와 상호작용 기능을 사용할 수 있습니다. 자세한 내용은 Raphaël 공식 문서를 참조하시기 바랍니다.