Raphaël을 사용하는 첫 번째 단계는 해당 라이브러리를 웹 페이지에 추가하는 것입니다. Raphaël을 다운로드하고 <script> 태그를 사용하여 웹 페이지에 포함시킬 수 있습니다. 다음은 Raphaël을 CDN을 통해 추가하는 예시입니다:

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

이제 Raphaël을 웹 페이지에 추가했으므로 분할된 뷰를 추가해 보겠습니다. Raphaël은 SVG 및 VML(IE 6-8 호환)을 사용하여 벡터 그래픽을 렌더링할 수 있습니다.

<div id="canvas"></div>

<script>
    var paper = Raphael("canvas", 500, 500); // 500x500 크기의 캔버스 생성

    var rect1 = paper.rect(50, 50, 100, 100); // 첫 번째 사각형
    rect1.attr("fill", "red");

    var rect2 = paper.rect(200, 50, 100, 100); // 두 번째 사각형
    rect2.attr("fill", "blue");
</script>

위의 코드를 실행하면 canvas라는 ID를 가진 div 요소 안에 Raphaël이 생성한 캔버스와 두 개의 사각형이 표시됩니다. 첫 번째 사각형은 빨간색으로, 두 번째 사각형은 파란색으로 채워집니다.

이제 웹 페이지에 추가된 분할된 뷰를 통해 Raphaël을 사용하여 그래픽 요소를 조작하고 애니메이션을 추가할 수 있습니다. Raphaël에는 다양한 도형 및 애니메이션 메서드가 있으므로 필요에 맞게 활용할 수 있습니다.

Raphaël의 자세한 사용법은 공식 문서를 참조하시기 바랍니다.