SVG 그래픽을 Adobe Muse CC에 가져오는 방법에 대해 알아봅니다. SVG 그래픽을 Adobe Muse에 배치 및 복사하고 가져올 수 있습니다.

참고:

Adobe Muse는 더 이상 새로운 기능을 추가하지 않으며 2020년 3월 26일 목요일에 지원이 중단됩니다. 자세한 정보 및 지원은 Adobe Muse 서비스 종료 페이지를 참조하십시오.

Adobe Muse를 통해 Adobe Illustrator와 같은 도구를 사용해 만든 벡터 그래픽을 사이트 디자인에 사용할 수 있습니다. 현재 Adobe Muse는 기본적으로 SVG(Scalable Vector Graphics) 형식을 지원합니다. 로고, 아이콘, 배경 채우기, 브라우저 채우기 등을 만드는 데 SVG 형식을 사용하고 Adobe Muse 내 웹 페이지 캔버스에 바로 배치할 수 있습니다.

SVG 형식으로 저장된 그래픽은 용량이 작고 해상도의 제한을 받지 않습니다. 그러므로 페이지 로딩 시간과 사이트 모양에 영향을 주지 않고 어떤 치수로도 크기를 조정할 수 있습니다. 또한 SVG 파일은 HiDPI 디스플레이에서 지원됩니다. 

해상도의 제한을 받지 않으므로 Adobe Muse는 SVG 파일을 표준 및 고해상도 웹 사이트에서 동일한 방식으로 취급합니다. SVG 파일은 디자인 보기의 웹 페이지 캔버스에 배치될 때 원래 크기의 50%로 줄어들지 않습니다.

Adobe Muse에 배치하기 전에 SVG 파일 처리

참고:

다음 절차는 Adobe Muse 2015.1 이전 버전을 사용하는 경우에만 유효합니다.  

Adobe Illustrator를 사용하여 만든 SVG 파일의 경우, 다음을 따르십시오.

  1. Adobe Illustrator에서 그래픽을 디자인한 후, [파일] > [다른 이름으로 저장]을 선택하십시오.

  2. [다른 형식으로 저장] 드롭다운에서 [SVG]를 선택하십시오. 파일을 저장할 위치를 검색하고 [저장]을 클릭하십시오.

  3. SVG 옵션 대화 상자에서 다음 특성을 설정하십시오.

    • 이미지 위치: 포함
    • SVG 프로파일: SVG 1.1
    • 글꼴 - 형식: 윤곽선으로 변환
    • CSS 속성: 프레젠테이션 속성
    • 소수점 자리: 3
    • 인코딩: 유니코드(UTF-8)
    Adobe Illustrator에서 SVG를 Adobe Muse CC에 가져오기 전에 SVG 설정을 지정합니다.
  4. [확인]을 클릭하여 파일을 저장합니다.

SVG 가져오기

Adobe Muse 2015.1 이전 버전을 사용하는 경우, SVG 파일을 가져와 Adobe Muse 내에 배치하기 전에 Adobe Muse에서 SVG 파일 배치 준비에서 설명한 단계를 따랐는지 확인하십시오.

  1. Adobe Muse에서 [파일] > [배치](Windows는 Ctrl + D, MAC은 Cmd + D)를 선택하십시오.

  2. SVG 파일 위치를 검색해 선택하고 [열기]를 클릭하십시오.

  3. Adobe Muse에서 포인터와 함께 SVG의 축소판 미리 보기가 표시됩니다. 웹 페이지 캔버스에서 SVG 파일을 배치할 적당한 위치를 클릭하십시오. [에셋] 패널이 배치한 파일을 나열합니다.

    에셋 패널

SVG 파일을 배치하여 사이트 디자인 작업을 계속할 수 있습니다. 자르기 도구를 사용하여 SVG 이미지를 자른 후 디자인 요구 사항에 맞게 크기를 조정할 수 있습니다.

Adobe Illustrator에서 SVG 복사

Adobe Muse에서는 Adobe Illustrator에서 웹 페이지 캔버스로 내용을 복사할 수 있습니다. 아트웍의 전체 내용을 저장 및 사용하지 않고 사이트 디자인에 적용하려고 할 때 내용 복사 기능이 유용합니다.

아트웍의 일부를 복사하면 Illustrator는 선택한 부분을 SVG로 변환하고 클립보드에 배치하여 Adobe Muse에서 사용할 수 있도록 합니다. Adobe Muse는 복사된 내용을 포함된 SVG로 취급하며 디자인 작업의 필요에 맞게 그래픽 크기를 조정할 수 있습니다.

  1. Adobe Illustrator를 열고 다음을 수행하십시오.

    • 그룹 또는 선택한 경로 격리: 복사할 그룹 또는 경로를 마우스 오른쪽 단추로 클릭하고 컨텍스트 메뉴에서 [그룹/선택한 경로 격리]를 선택하십시오.
    • 수동으로 그룹 또는 경로 선택: 복사할 그룹 또는 경로를 선택하십시오.
    그룹 또는 경로 선택
  2. 선택한 그룹 또는 경로를 복사하려면 Ctrl + C(Windows) 또는 Cmd + C(MAC) 명령을 사용하십시오.

  3. Adobe Muse의 디자인 보기에서 웹 페이지 캔버스에 선택한 그룹 또는 경로를 붙여넣으려면 Ctrl + V 또는 Cmd +V 명령을 사용하십시오.

    웹 페이지 캔버스

    [에셋] 패널이 붙여 넣은 SVG 파일을 나열합니다.

    에셋 패널

배경 및 브라우저 채우기를 위해 SVG 파일 가져오기

  1. 배경 채우기와 브라우저 채우기 중 추가하려는 것에 따라 [채우기] 또는 [브라우저 채우기]를 선택하십시오. 자세한 정보는 채우기와 브라우저 채우기 옵션 사용을 참조하십시오.

  2. [이미지 추가]를 클릭하십시오. SVG 파일 위치를 검색해 선택하고 [열기]를 클릭하십시오.

    [이미지 추가] 클릭
  3. [맞춤] 및 [위치] 특성을 적절하게 설정하십시오.

    [맞춤] 및 [위치] 특성을 적절하게 설정

참고:

SVG 파일이 배경 또는 브라우저 채우기에 추가되었을 때 [맞춤] 특성이 [대상에 맞추기] 또는 [채우기에 맞추기]로 설정된 경우 이미지가 디자인 보기에서 래스터화됩니다. 그러나 Adobe Muse 또는 브라우저에서 미리 볼 때에는 이미지가 용도에 맞게 렌더링됩니다.

슬라이드 쇼에 SVG 이미지 추가

Adobe Muse 2015.1 이후 버전의 경우, SVG 이미지를 슬라이드 쇼에 추가할 수 있습니다. 먼저 위젯 라이브러리에서 축소판 위젯을 끌어 배치합니다. 그런 다음, Creative Cloud Libraries에서 벡터 이미지를 선택하여 슬라이드 쇼에 배치합니다.

비디오 자습서

비디오 자습서
Danielle Beaumont

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책