Dreamweaver의 Creative Cloud Libraries

Creative Cloud Libraries를 통해 어디에서나 즐겨 사용하는 에셋을 이용할 수 있습니다. 다양한 Creative Cloud 데스크탑 및 모바일 앱에서 이미지, 색상, 텍스트 스타일 등을 제작하거나 캡처한 다음 다른 데스크탑 및 모바일 앱에서 손쉽게 이용할 수 있으므로 크리에이티브 워크플로를 매끄럽게 진행할 수 있습니다.

Dreamweaver 내에서 CC Libraries에 즉시 액세스하여 웹 페이지에 색상 및 그래픽을 다시 사용할 수 있습니다. “연결된” 에셋으로 그래픽을 삽입하여 클라우드에 있는 그래픽에 맞춰 삽입된 그래픽을 최신 상태로 유지할 수도 있습니다.

Dreamweaver에서 CC Libraries를 사용하는 방법에 대해 자세히 살펴보십시오.

CC Libraries 패널(창 > CC Libraries)은 Creative Cloud에 저장된 에셋에 대한 기본 액세스 지점입니다. 이 패널을 통해 Adobe Stock의 에셋을 검색할 수도 있습니다.

이 패널을 사용하여 다음을 할 수 있습니다.

• 라이브러리에 저장되어 있는 에셋에 대한 특정 라이브러리 검색
• 라이브러리 만들기
• 선택한 라이브러리의 에셋 미리보기
• 웹 페이지에 삽입할 에셋 드래그 또는 복사
• Adobe Stock에서 검색할 이미지의 전체 이름 또는 일부 이름과 같은 핵심어를 입력합니다.

시작하기

Dreamweaver에서 사이트 정의

Dreamweaver에서 사이트는 모든 이미지, 비디오, 스크립트, 스타일 시트, 웹 페이지와 관련된 다른 파일이 저장되어 있는 폴더입니다. 사이트를 미리 정의해 두면 사용자가 CC Libraries에서 사이트에서 가져온 에셋을 손쉽게 저장할 수 있습니다. CC Libraries에서 에셋을 가져올 웹 페이지도 사이트 폴더에 저장되었는지 확인하십시오.

사이트를 만드는 방법에 대한 자세한 내용은 사이트의 로컬 버전 설정을 참조하십시오.

CC Libraries에 에셋 추가

모든 필요한 에셋을 Creative Cloud에서 사용할 수 있도록 하면 Dreamweaver의 웹 페이지로 에셋을 신속하게 가져올 수 있습니다.

Adobe Stock은 원하는 스톡 이미지를 찾는 데 유용합니다. 자세한 내용은 Adobe Stock에서 에셋 구하기를 참조하십시오.

사용자가 다양한 Adobe 모바일 및 데스크탑 앱에서 캡처하거나 만든 그래픽과 색상은 Creative Cloud에 저장되고 웹 페이지로 가져올 수 있습니다. 예를 들어 Adobe Shape CC를 사용하여 만든 벡터 그래픽 또는 Photoshop을 사용하여 처리한 이미지가 있습니다. 또한 Creative Cloud를 통해 팀과 공동 작업을 수행하고 에셋을 공유할 수 있으므로 다른 사용자가 제작한 에셋을 다시 사용할 수 있습니다.

Creative Cloud Libraries에 대한 자세한 내용은 Creative Cloud Libraries를 참조하십시오.

Adobe Stock에서 에셋 구하기

Adobe Stock은 Creative Cloud Libraries와 긴밀하게 통합됩니다. 다음 방법 중 하나를 통해 이미지를 검색하고 이를 자신의 모든 CC Libraries에 추가할 수 있습니다.

• Adobe Stock 웹 사이트에서 직접 추가
• Dreamweaver에서 CC Libraries 패널 사용
• Photoshop, Illustrator와 같은 기타 Adobe 애플리케이션의 CC Libraries 패널 사용
  

이미지를 CC 라이브러리에 추가하면 CC Libraries의 그래픽 재사용 항목에 기재된 안내에 따라 웹 페이지에서 추가된 이미지를 사용할 수 있습니다.

스톡 이미지를 바로 구매할 결심이 서지 않는 경우에는 라이브러리에 워터마크가 표시된 스톡 이미지(미리보기)만 추가한 다음 해당 이미지를 자리 표시자로 사용할 수 있습니다. 해당 이미지를 구매할 준비가 되면 Dreamweaver 및 기타 앱의 CC Libraries 패널에서 구매하거나 Adobe Stock 웹 사이트에서 직접 구매할 수도 있습니다. 

이미지에 라이선스를 부여하면 열려 있는 문서의 워터마크가 표시된 모든 인스턴스는 고해상도 버전의 라이선스가 부여된 이미지로 업데이트됩니다.

CC Libraries에 저장된 색상 및 색상 테마 재사용

• 라이브 뷰에서 색상 재사용
• 코드 보기에서 색상 재사용

라이브 뷰의 색상 및 색상 테마 재사용

Illustrator, Photoshop 또는 Adobe Color CC와 같은 앱에서 Creative Cloud Libraries에 색상과 색상 테마를 저장할 수 있습니다. 다음 단계에 따라 Dreamweaver의 CC Libraries 패널을 사용하여 웹 페이지에 이들 색상과 색상 테마를 가져올 수 있습니다.

코드 보기에서 색상 재사용

Creative Cloud에 저장된 색상은 코드 보기에서 코드 힌트로 사용할 수 있습니다. 코드 보기의 코드로 코드 힌트에서 필요한 색상을 선택할 수 있습니다. 코드 힌트의 색상 옆에 있는 Creative Cloud 아이콘은 색상이 Creative Cloud에 저장되어 있음을 나타냅니다.

코드 힌트는 CC Libraries 패널의 현재 열려 있는 라이브러리에서 색상을 가져옵니다. 위 이미지에서 “My Library” 라이브러리의 색상은 코드 힌트로 사용할 수 있도록 만들어졌습니다. 다른 Creative Cloud 라이브러리에서 코드 힌트로 사용할 색상을 구하려면 CC Libraries 패널에서 필요한 라이브러리를 연 다음 코드 보기에서 작업을 다시 시작하십시오.

CC Libraries에 저장된 그래픽 재사용

Creative Cloud Libraries에서 Photoshop, Illustrator, Adobe Shape CC 또는 Adobe Sketch CC와 같은 Adobe 데스크탑과 모바일 앱을 사용하여 만든 그래픽을 저장할 수 있습니다. CC Libraries 패널에서 그래픽을 라이브 뷰로 삽입하고 코드 힌트에서 그래픽을 코드로 직접 삽입할 수 있습니다.

다음과 같이 CC Libraries에서 그래픽을 삽입할 수 있습니다.

• 연결된 에셋: 그래픽이 연결된 에셋으로 삽입되면 라이브 뷰에서 작은 클라우드 아이콘이 에셋의 오른쪽 하단에 표시됩니다. 이 아이콘은 해당 에셋이 클라우드의 원본 에셋에 연결되어 있음을 나타냅니다. 클라우드 아이콘은 Assets 패널의 에셋 옆에도 표시됩니다.
• 연결 해제된 에셋: 에셋을 웹 페이지에 로컬 사본으로 삽입할 수 있습니다. 라이브 뷰에서 CC Libraries 패널의 필요한 에셋을 마우스 오른쪽 버튼으로 클릭하고 "연결 해제된 에셋으로 삽입"을 선택합니다. 그래픽의 사본을 삽입하면 에셋은 로컬 컴퓨터에 복사되고 클라우드에 있는 원본 에셋에 연결되지 않습니다. 따라서 클라우드에 있는 에셋에 대한 모든 변경 사항 또는 업데이트가 Dreamweaver에 반영되지 않습니다.

에셋을 일괄 다운로드하고 컴퓨터에 나중에 사용할 수 있도록 저장할 수도 있습니다.

• 라이브 뷰에서 그래픽 재사용
• 코드 보기에서 그래픽 재사용
• 그래픽에 대한 샘플링 옵션 지정
• 연결된 그래픽 리샘플링 또는 이름 변경
• 그래픽 다운로드

라이브 뷰에서 그래픽 재사용

코드 보기에서 그래픽 재사용

Creative Cloud Libraries에 저장된 그래픽은 코드 보기에서 코드 힌트로 사용할 수 있습니다. 우선 CC Libraries 패널에서 필요한 라이브러리를 선택하여 이를 엽니다. 그런 다음 코드 보기로 전환하고 코딩 작업 시 필요한 그래픽을 코드 힌트에서 선택합니다. 코드 힌트의 그래픽 옆에 있는 Creative Cloud 아이콘은 해당 그래픽이 Creative Cloud에 저장되어 있음을 나타냅니다.

참고: 코드 힌트를 사용하여 그래픽을 삽입하면 그래픽은 "연결 해제된" 그래픽으로 삽입됩니다.

다른 Creative Cloud 라이브러리에서 코드 힌트로 사용할 색상을 구하려면 CC Libraries 패널에서 필요한 라이브러리를 연 다음 코드 보기에서 작업을 다시 시작하십시오.

그래픽에 대한 샘플링 옵션 지정

높이와 폭 상자는 Dreamweaver 이미지 최적화 엔진을 사용하여 에셋을 리샘플링합니다. 에셋을 배치할 형식 유형을 선택할 수도 있습니다. 활성화된 클라우드 아이콘은 에셋이 연결된 에셋으로 배치된다는 것을 나타냅니다. 파일 이름 및 샘플링 옵션을 지정한 후 Enter 키를 눌러 에셋을 삽입합니다.

 참고:

• SVG 옵션은 Illustrator (.ai) 파일에 대해서만 사용할 수 있으며 이들 파일에 대해 기본값으로 설정됩니다. 리샘플링 대화 상자의 드롭다운 목록을 사용하여 이들 파일의 형식을 JPEG로 변경할 수 있습니다.
• JPEG 파일은 JPEG 파일로만 삽입될 수 있으므로, 이들 파일에 대해 다른 형식의 옵션은 사용할 수 없습니다.

그래픽 편집

CC Libraries 패널을 사용하여 기본 애플리케이션에서 InDesign 및 Illustrator 에셋을 빠르게 열고 편집할 수 있습니다. 이렇게 하려면 CC Libraries 패널의 에셋을 마우스 오른쪽 버튼으로 클릭한 다음 [편집]을 클릭합니다.

사용 중인 Dreamweaver 인스턴스가 설치된 컴퓨터에 InDesign이나 Illustrator와 같은 기본 애플리케이션도 함께 설치되어 있어야 합니다. 또한 Creative Cloud에서 이들 애플리케이션의 최신 업데이트를 설치했는지도 확인하십시오.

연결된 그래픽의 연결 해제, 리샘플링 및 이름 변경

CC Libraries에서 웹 페이지로 가져온 이미지를 다음 중 하나의 방법을 통해 이름을 바꾸거나, 크기를 조정하거나, 리샘플링할 수 있습니다.

• 라이브 뷰에서 에셋을 클릭한 다음 클라우드 아이콘을 클릭합니다. 
• 에셋을 마우스 오른쪽 버튼으로 클릭하고 연결된 에셋 옵션을 클릭합니다.
• Assets 패널의 에셋 이름 옆에 있는 클라우드 아이콘을 더블 클릭합니다.

나타나는 리샘플링 대화 상자에서 필요한 속성을 변경할 수 있습니다. CC Libraries의 해당 소스로부터 에셋의 연결을 해제하려면 리샘플링 대화 상자의 클라우드 아이콘을 클릭합니다.

에셋의 연결을 해제하면 Creative Cloud에서 소스 파일에 적용되는 어떠한 변경 사항도 웹 페이지의 이미지에 반영되지 않습니다.

그래픽 다운로드

CC Libraries에서 연결된 에셋으로 필요한 그래픽을 대량으로 다운로드하고 나중에 이를 프로젝트에 삽입할 수 있습니다. 프로젝트에 이들 에셋을 사용하면 해당 라이브러리 항목에 대한 링크가 계속 유지됩니다. 

• 연결된 에셋: 그래픽을 연결된 에셋으로 다운로드하려면 CC Libraries 패널의 에셋을 마우스 오른쪽 버튼으로 클릭하고 연결된 에셋 다운로드를 선택합니다. 파일 이름 및 리샘플링 옵션 팝업이 표시됩니다. 파일 이름과 샘플링 옵션을 지정하고 Enter 키를 눌러 사이트 폴더에 에셋을 저장하십시오.

• 연결 해제된 에셋: 그래픽을 연결 해제된 에셋으로 다운로드하려면 CC Libraries 패널에서 필요한 에셋을 마우스 오른쪽 버튼으로 클릭하고 사본 다운로드를 선택합니다. 파일 이름 및 리샘플링 옵션 팝업이 표시됩니다. 파일 이름과 샘플링 옵션을 지정하고 Enter 키를 눌러 사이트 폴더에 에셋을 저장하십시오.