Adobe Illustrator에서 그래픽을 디자인한 후, [파일] > [다른 이름으로 저장]을 선택하십시오.
마지막 업데이트 날짜
Apr 29, 2021 04:04:57 AM GMT
SVG 그래픽을 Adobe Muse에 배치, 복사 및 가져오는 방법에 대해 알아봅니다.
참고:
Adobe Muse는 더 이상 새로운 기능을 추가하지 않으며 2020년 3월 26일 목요일에 지원이 중단됩니다. 자세한 정보 및 지원 문의는 Adobe Muse 서비스 종료 FAQ를 참조하십시오.
Adobe Muse를 통해 Adobe Illustrator와 같은 도구를 사용해 만든 벡터 그래픽을 사이트 디자인에 사용할 수 있습니다. 현재 Adobe Muse는 기본적으로 SVG(Scalable Vector Graphics) 형식을 지원합니다. 로고, 아이콘, 배경 채우기, 브라우저 채우기 등을 만드는 데 SVG 형식을 사용하고 Adobe Muse 내 웹 페이지 캔버스에 바로 배치할 수 있습니다.
SVG 형식으로 저장된 그래픽은 용량이 작고 해상도의 제한을 받지 않습니다. 그러므로 페이지 로딩 시간과 사이트 모양에 영향을 주지 않고 어떤 치수로도 크기를 조정할 수 있습니다. 또한 SVG 파일은 HiDPI 디스플레이에서 지원됩니다.
해상도의 제한을 받지 않으므로 Adobe Muse는 SVG 파일을 표준 및 고해상도 웹 사이트에서 동일한 방식으로 취급합니다. SVG 파일은 디자인 보기의 웹 페이지 캔버스에 배치될 때 원래 크기의 50%로 줄어들지 않습니다.
Adobe Illustrator의 SVG 설정
Adobe Illustrator를 사용하여 만든 SVG 파일의 경우, 다음을 따르십시오.
-
-
[다른 형식으로 저장] 드롭다운에서 [SVG]를 선택하십시오. 파일을 저장할 위치를 검색하고 [저장]을 클릭하십시오.
-
SVG 옵션 대화 상자에서 다음 특성을 설정하십시오.
- 이미지 위치: 포함
- SVG 프로파일: SVG 1.1
- 글꼴 - 문자: 윤곽선으로 변환
- CSS 속성: 프레젠테이션 속성
- 소수점 자리: 3
- 인코딩: 유니코드(UTF-8)
- 이미지 위치: 포함
-
[확인]을 클릭하여 파일을 저장합니다.
SVG 가져오기
Adobe Muse 내에 SVG 파일을 가져와서 배치하기 전에 Adobe Muse에서 SVG 파일 배치 준비에서 설명한 단계를 따랐는지 확인하십시오.
-
Adobe Muse에서 [파일] > [배치](Windows는 Ctrl + D, MAC은 Cmd + D)를 선택하십시오.
-
SVG 파일 위치를 검색해 선택하고 [열기]를 클릭하십시오.
-
Adobe Muse에서 포인터와 함께 SVG의 축소판 미리 보기가 표시됩니다. 웹 페이지 캔버스에서 SVG 파일을 배치할 적당한 위치를 클릭하십시오. [에셋] 패널이 배치한 파일을 나열합니다.
SVG 파일을 배치하여 사이트 디자인 작업을 계속할 수 있습니다. 자르기 도구를 사용하여 SVG 이미지를 자를 수 없습니다. 하지만 디자인 요구 사항에 맞게 이미지 크기를 변경할 수는 있습니다.
가져온 SVG 파일을 래스터 이미지에 연결할 수 있습니다. 가져온 이미지를 SVG 파일에 다시 연결할 수도 있습니다.
Adobe Illustrator에서 SVG 복사
Adobe Muse에서는 Adobe Illustrator에서 웹 페이지 캔버스로 내용을 복사할 수 있습니다. 아트웍의 전체 내용을 저장 및 사용하지 않고 사이트 디자인에 적용하려고 할 때 내용 복사 기능이 유용합니다.
아트웍의 일부를 복사하면 Illustrator는 선택한 부분을 SVG로 변환하고 클립보드에 배치하여 Adobe Muse에서 사용할 수 있도록 합니다. Adobe Muse는 복사된 내용을 포함된 SVG로 취급하며 디자인 작업의 필요에 맞게 그래픽 크기를 조정할 수 있습니다.
-
Adobe Illustrator를 열고 다음을 수행하십시오.
- 그룹 또는 선택한 경로 격리: 복사할 그룹 또는 경로를 마우스 오른쪽 단추로 클릭하고 컨텍스트 메뉴에서 [그룹/선택한 경로 격리]를 선택하십시오.
- 수동으로 그룹 또는 경로 선택: 복사할 그룹 또는 경로를 선택하십시오.
-
선택한 그룹 또는 경로를 복사하려면 Ctrl + C(Windows) 또는 Cmd + C(MAC) 명령을 사용하십시오.
-
Adobe Muse의 디자인 보기에서 웹 페이지 캔버스에 선택한 그룹 또는 경로를 붙여넣으려면 Ctrl + V 또는 Cmd +V 명령을 사용하십시오.
[에셋] 패널이 붙여 넣은 SVG 파일을 나열합니다.
배경 및 브라우저 채우기를 위해 SVG 파일 가져오기
-
배경 채우기와 브라우저 채우기 중 추가하려는 것에 따라 [채우기] 또는 [브라우저 채우기]를 선택하십시오. 자세한 정보는 채우기와 브라우저 채우기 옵션 사용을 참조하십시오.
-
[이미지 추가]를 클릭하십시오. SVG 파일 위치를 검색해 선택하고 [열기]를 클릭하십시오.
-
[맞춤] 및 [위치] 특성을 적절하게 설정하십시오.
참고:
SVG 파일이 배경 또는 브라우저 채우기에 추가되었을 때 [맞춤] 특성이 [대상에 맞추기] 또는 [채우기에 맞추기]로 설정된 경우 이미지가 디자인 보기에서 래스터화됩니다. 그러나 Adobe Muse 또는 브라우저에서 미리 볼 때에는 이미지가 용도에 맞게 렌더링됩니다.
비디오 자습서
내 계정 로그인