스마트 오브젝트 및 Photoshop-Dreamweaver 작업 과정 정보

복사/붙여넣기 작업 과정

복사/붙여넣기 작업 과정에서는 Photoshop 파일에서 분할 영역이나 레이어를 선택한 다음 Dreamweaver를 사용하여 웹에서 사용할 수 있는 이미지로 삽입할 수 있습니다. 그러나 나중에 컨텐트를 업데이트하려면 원본 Photoshop 파일을 열고 변경한 다음 분할 영역이나 레이어를 클립보드에 다시 복사하고 업데이트된 분할 영역이나 레이어를 Dreamweaver에 붙여야 합니다. 이 작업 과정은 Photoshop 파일의 부분(예: 디자인 컴포지션의 섹션)을 웹 페이지의 이미지로 삽입하려는 경우에만 권장됩니다.

스마트 오브젝트 작업 과정

완전한 Photoshop 파일을 사용하여 작업하는 경우에는 스마트 오브젝트 작업 과정을 사용하는 것이 좋습니다. Dreamweaver의 스마트 오브젝트는 원본 PSD(Photoshop) 파일에 라이브로 연결되어 있는 웹 페이지에 배치된 이미지 에셋입니다. Dreamweaver [디자인] 보기에서 스마트 오브젝트는 이미지의 왼쪽 위에 있는 아이콘으로 나타납니다.

스마트 오브젝트

웹 이미지(즉, Dreamweaver 페이지의 이미지)가 원본 Photoshop 파일과 동기화되지 않은 경우 Dreamweaver에서는 원본 파일이 업데이트된 것을 감지하고 스마트 오브젝트 아이콘의 화살표 중 하나를 빨간색으로 표시합니다. [디자인] 보기에서 웹 이미지를 선택하고 속성 관리자에서 [원본에서 업데이트] 단추를 클릭하면 이미지가 자동으로 업데이트되어 원본 Photoshop 파일의 변경 내용이 반영됩니다.

스마트 오브젝트 작업 과정을 사용하는 경우 Photoshop을 열어 웹 이미지를 업데이트할 필요가 없습니다. 또한 Dreamweaver에서 스마트 오브젝트를 업데이트한 내용은 비파괴적입니다. 즉, 원본 Photoshop 이미지를 그대로 유지하면서 페이지에서 웹 버전의 이미지를 변경할 수 있습니다.

[디자인] 보기에서 웹 이미지를 선택하지 않고 스마트 오브젝트를 업데이트할 수도 있습니다. [에셋] 패널에서는 [문서] 창에서 선택하지 못할 수 있는 이미지(예: CSS 배경 이미지)를 비롯한 모든 스마트 오브젝트를 업데이트할 수 있습니다.

이미지 최적화 설정

복사/붙여넣기 및 스마트 오브젝트 작업 과정에서는 [이미지 미리 보기] 대화 상자에서 최적화 설정을 지정할 수 있습니다. 이 대화 상자에서는 파일 형식, 이미지 품질 등을 설정할 수 있습니다. 분할 영역이나 레이어를 처음 복사하거나 Photoshop 파일을 스마트 오브젝트로 처음 삽입하는 경우 Dreamweaver에서는 웹 이미지를 쉽게 만들 수 있도록 이 대화 상자를 표시합니다.

특정 분할 영역이나 레이어에 대한 업데이트를 복사하고 붙이는 경우 Dreameaver에서는 원본 설정을 기억하고 이러한 설정으로 웹 이미지를 다시 만듭니다. 이와 마찬가지로 속성 관리자를 사용하여 스마트 오브젝트를 업데이트하는 경우 Dreamweaver에서는 이미지를 처음 삽입할 때 사용한 동일한 설정을 사용합니다. [디자인] 보기에서 웹 이미지를 선택한 다음 속성 관리자에서 [이미지 설정 편집] 단추를 클릭하여 언제든지 이미지의 설정을 변경할 수 있습니다.

Photoshop 파일 저장

웹 이미지를 삽입하고 Dreamweaver 사이트에서 원본 Photoshop 파일을 저장하지 않은 경우 Dreamweaver에서는 원본 파일의 경로를 절대 로컬 파일 경로로 인식합니다. 이는 복사/붙여넣기 및 스마트 오브젝트 작업 과정에 모두 해당합니다. 예를 들어, Dreamweaver 사이트의 경로가 C:\Sites\mySite이고 Photoshop 파일이 C:\Images\Photoshop에 저장되어 있으면 Dreameaver에서는 원본 에셋을 mySite라는 사이트의 부분으로 인식하지 못합니다. Dreamweaver에서는 파일을 특정 로컬 하드 드라이브에서만 사용할 수 있는 것으로 인식하기 때문에 Photoshop 파일을 다른 팀 구성원과 공유하려는 경우 문제가 될 수 있습니다.

그러나 사이트 안에 Photoshop 파일을 저장하면 Dreamweaver에서 파일의 사이트 상대 경로를 설정합니다. 사이트에 액세스할 수 있는 모든 사용자도 올바른 파일 경로를 설정할 수 있으므로 원본 파일이 다운로드도 할 수 있도록 제공된 것으로 간주합니다.

Photoshop과 Dreamweaver에서의 스마트 오브젝트 작업 과정에 대한 비디오 자습서는 http://www.adobe.com/go/lrvid4043_dw_kr을 참조하십시오.