사용 안내서 취소

Dreamweaver에서 Photoshop 파일 사용

검색

마지막 업데이트 날짜 2022년 11월 28일

Dreamweaver

앱 열기

Photoshop이 Dreamweaver와 어떻게 통합되는지를 살펴봅니다. Photoshop - Dreamweaver 워크플로에서 스마트 오브젝트를 사용하여 작업합니다.

Photoshop 통합 정보

참고:

Dreamweaver 21.0 이상 버전에서는 Photoshop 통합 워크플로가 더 이상 사용되지 않습니다.

Dreamweaver에서 웹 페이지에 Photoshop 이미지 파일(PSD 형식)을 삽입하고 Dreamweaver를 통해 웹에서 바로 사용할 수 있는 이미지(GIF, JPEG 및 PNG 형식)로 최적화할 수 있습니다. 이 작업을 수행하면 Dreamweaver는 이미지를 스마트 오브젝트로 삽입하고 원본 PSD 파일에 대한 라이브 연결을 유지합니다.

또한 Dreamweaver에서 여러 레이어 또는 여러 슬라이스로 구성된 Photoshop 이미지의 부분 또는 전체를 웹 페이지로 붙여넣을 수 있습니다. 단, Photoshop에서 복사하여 붙여넣을 때는 원본 파일에 대한 라이브 연결이 유지되지 않습니다. 이미지를 업데이트하려면 Photoshop에서 이미지를 변경한 다음 다시 복사하여 붙여넣으십시오.

참고:

이러한 통합 기능을 자주 사용하는 경우 보다 쉽게 액세스할 수 있도록 Photoshop 파일을 Dreamweaver 사이트에 저장할 수 있습니다. 저장할 경우 원본 에셋 노출을 피하고 로컬 사이트와 원격 서버 간에 불필요한 전송이 발생하지 않도록 해당 파일을 숨겨야 합니다.

Dreamweaver와 Photoshop 통합에 대한 튜토리얼을 보려면 Photoshop과 Dreamweaver 통합을 참조하십시오.

스마트 오브젝트 및 Photoshop-Dreamweaver 워크플로 정보

Dreamweaver에서 Photoshop 파일 작업을 하는 두 가지 주요 작업 과정은 복사/붙여넣기 작업 과정과 스마트 오브젝트 작업 과정입니다.

복사/붙여넣기 작업 과정

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

스마트 오브젝트 작업 과정

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

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

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

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

이미지 최적화 설정

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

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

Photoshop 파일 저장

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

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

Photoshop을 사용한 Roundtrip 편집에 대한 비디오 튜토리얼을 보려면 Photoshop을 사용한 Roundtrip 편집을 참조하십시오.

스마트 오브젝트 만들기

Photoshop 이미지(PSD 파일)를 페이지에 삽입하면 스마트 오브젝트가 만들어집니다. 스마트 오브젝트는 웹에서 바로 사용할 수 있는 이미지로, 원본 Photoshop 이미지에 대한 라이브 연결을 유지합니다. Photoshop에서 원본 이미지를 업데이트할 때마다 한 번의 버튼 클릭으로 Dreamweaver에서 이미지를 업데이트할 수 있는 옵션이 제공됩니다.

Dreamweaver(디자인 보기 또는 코드 보기)에서 이미지를 삽입할 페이지에 삽입 포인터를 놓습니다.
[삽입] > [이미지]를 선택합니다.

참고:

Photoshop 파일을 웹 사이트에 저장하는 경우 PSD 파일을 [파일] 패널에서 페이지로 드래그할 수도 있습니다. 이렇게 하는 경우 다음 단계를 건너뛰십시오.
[탐색] 버튼을 클릭한 다음 해당 파일로 이동하여 [이미지 소스 선택] 대화 상자에서 Photoshop PSD 이미지 파일을 찾습니다.
[이미지 최적화] 대화 상자가 나타나면 원하는 대로 최적화 설정을 조정하고 [확인]을 클릭합니다.
웹에서 바로 사용할 수 있는 이미지 파일을 웹 사이트의 루트 폴더 내에 저장합니다.

Dreamweaver는 선택된 최적화 설정을 기반으로 스마트 오브젝트를 만들고 웹에서 바로 사용할 수 있는 이미지 버전을 페이지에 배치합니다. 스마트 오브젝트는 원본 이미지에 대한 라이브 연결을 유지하고 두 이미지가 동기화되지 않은 경우 사용자에게 알립니다.

참고:

나중에 페이지에 배치된 이미지의 최적화 설정을 변경하려는 경우 이미지를 선택하고 속성 관리자에서 [이미지 설정 편집] 버튼을 클릭한 다음 이미지 최적화 대화 상자에서 설정을 변경하면 됩니다. 이미지 최적화 대화 상자에서 변경된 내용은 비소거적으로 적용됩니다. Dreamweaver는 원본 Photoshop 파일을 수정하지 않고 항상 원본 데이터를 기반으로 웹 이미지를 다시 만듭니다.

Photoshop을 사용한 Roundtrip 편집에 대한 비디오 튜토리얼을 보려면 Photoshop을 사용한 Roundtrip 편집을 참조하십시오.

스마트 오브젝트 업데이트

스마트 오브젝트가 링크된 Photoshop 파일을 변경할 경우 웹에서 바로 사용할 수 있는 이미지가 원본과 동기화되지 않았음을 알리는 메시지가 표시됩니다. Dreamweaver에서 스마트 오브젝트는 이미지 왼쪽 상단에 있는 아이콘으로 표시됩니다. 웹에서 바로 사용할 수 있는 Dreamweaver 이미지가 원본 Photoshop 파일과 동기화된 경우 아이콘의 두 화살표가 녹색으로 나타납니다. 웹에서 바로 사용할 수 이미지가 Photoshop 파일과 동기화되지 않은 경우 아이콘의 화살표 중 하나가 빨간색으로 바뀝니다.

스마트 오브젝트를 원본 Photoshop 파일의 현재 내용으로 업데이트하려면 [문서] 창에서 [스마트 오브젝트]를 선택한 다음 속성 관리자의 [원본에서 업데이트] 버튼을 클릭하십시오.

참고:

Photoshop이 설치되어 있지 않아도 Dreamweaver에서 업데이트할 수 있습니다.

여러 스마트 오브젝트 업데이트

에셋 패널에서 여러 스마트 오브젝트를 한 번에 업데이트할 수 있습니다. 또한 [에셋] 패널에서는 [문서] 창에서 선택하지 못할 수 있는 스마트 오브젝트(예: CSS 배경 이미지)를 확인할 수 있습니다.

[파일] 패널에서 [에셋] 탭을 클릭하여 사이트 에셋을 표시합니다.
이미지 뷰가 선택되어 있는지 확인합니다. 선택되어 있지 않으면 [이미지] 버튼을 클릭합니다.
[에셋] 패널에서 각 이미지 에셋을 선택합니다. 스마트 오브젝트를 선택하면 이미지 왼쪽 상단에 스마트 오브젝트 아이콘이 표시됩니다. 일반 이미지를 선택하면 이 아이콘이 표시되지 않습니다.
업데이트할 스마트 오브젝트 각각에 대해 파일 이름을 마우스 오른쪽 버튼으로 클릭하고 [원본에서 업데이트]를 선택합니다. Ctrl 키를 누른 상태에서 여러 파일 이름을 선택하고 모두 한 번에 업데이트할 수도 있습니다.

참고:

Photoshop이 설치되어 있지 않아도 Dreamweaver에서 업데이트할 수 있습니다.

스마트 오브젝트 크기 조절

[문서] 창에서 다른 이미지와 마찬가지로 스마트 오브젝트의 크기를 조절할 수 있습니다.

[문서] 창에서 스마트 오브젝트를 선택하고 크기 조절 핸들을 드래그하여 이미지 크기를 조절합니다. 폭과 높이 비율을 유지하려면 Shift 키를 누른 상태에서 드래그하면 됩니다.
속성 관리자에서 [원본에서 업데이트] 버튼을 클릭합니다.

스마트 오브젝트를 업데이트하면 비소거적으로 원본 파일의 현재 내용 및 원본 최적화 설정을 기반으로 웹 이미지가 새 크기로 다시 렌더링됩니다.

스마트 오브젝트의 원본 Photoshop 파일 편집

Dreamweaver 페이지에서 스마트 오브젝트를 만든 경우 Photoshop에서 원본 PSD 파일을 편집할 수 있습니다. Photoshop에서 원본을 변경한 후에는 Dreamweaver에서 웹 이미지를 쉽게 업데이트할 수 있습니다.

참고:

기본 외부 이미지 편집기로 Photoshop이 설정되어 있는지 확인합니다.

[문서] 창에서 스마트 오브젝트를 선택합니다.
속성 관리자에서 [편집] 버튼을 클릭합니다.
Photoshop에서 원본을 변경하고 새 PSD 파일을 저장합니다.
Dreamweaver에서 스마트 오브젝트를 다시 선택하고 [원본에서 업데이트] 버튼을 클릭합니다.

참고:

Photoshop에서 이미지 크기를 변경한 경우 Dreamweaver에서도 웹 이미지 크기를 재설정해야 합니다. Dreamweaver는 원본 Photoshop 파일의 크기가 아닌 내용을 기반으로만 스마트 오브젝트를 업데이트합니다. 웹 이미지 크기와 원본 Photoshop 파일 크기를 동기화하려면 이미지를 마우스 오른쪽 버튼으로 클릭하고 원본 크기로 재설정을 선택합니다.

스마트 오브젝트 상태

다음 표는 다양한 스마트 오브젝트 상태를 보여 줍니다.

스마트 오브젝트 상태	설명	권장되는 액션
이미지가 동기화됨	웹 이미지가 원본 Photoshop 파일의 현재 내용과 동기화되어 있습니다. HTML 코드의 폭 및 높이 속성이 웹 이미지 크기와 일치합니다.	없음
원본 에셋이 수정됨	Dreamweaver에서 웹 이미지를 만든 후 원본 Photoshop 파일이 수정되었습니다.	두 이미지를 동기화하려면 속성 관리자의 [원본에서 업데이트] 버튼을 사용하십시오.
웹 이미지 크기가 선택된 HTML 폭 및 높이와 다름	HTML 코드의 폭 및 높이 속성이 삽입 시 Dreamweaver가 만든 웹 이미지의 폭 및 높이 크기와 다릅니다. 웹 이미지의 크기가 선택된 HTML 폭 및 높이 값보다 작을 경우 웹 이미지가 모자이크처럼 나타날 수 있습니다.	원본 Photoshop 파일에서 웹 이미지를 다시 만들려면 속성 관리자의 [원본에서 업데이트] 버튼을 사용하십시오. Dreamweaver는 이미지를 다시 만들 때 현재 지정된 HTML 폭 및 높이 크기를 사용합니다.
원본 에셋 크기가 선택된 HTML 폭 및 높이에 비해 너무 작음	HTML 코드의 폭 및 높이 속성이 원본 Photoshop 파일의 폭 및 높이 크기보다 큽니다. 웹 이미지가 모자이크처럼 나타날 수 있습니다.	웹 이미지를 원본 Photoshop 파일 크기보다 큰 크기로 만들지 마십시오.
원본 에셋을 찾을 수 없음	Dreamweaver가 속성 관리자의 [원본] 텍스트 상자에 지정된 원본 Photoshop 파일을 찾을 수 없습니다.	속성 관리자의 [원본] 텍스트 상자에서 파일 경로를 수정하거나 Photoshop 파일을 현재 지정된 위치로 옮기십시오.

Photoshop에서 선택 영역 복사하여 붙여넣기

전체 또는 일부 Photoshop 이미지를 복사하여 선택한 이미지를 웹에서 바로 사용할 수 있는 이미지로 Dreamweaver 페이지에 붙여넣을 수 있습니다. 이미지의 선택 영역에서 하나 이상의 레이어를 복사하거나 이미지 슬라이스를 복사할 수 있습니다. 단, 이 작업을 수행하면 스마트 오브젝트가 만들어지지 않습니다.

참고:

붙여넣은 이미지에 대해 [원본에서 업데이트] 기능은 사용할 수 없지만, 붙여넣은 이미지를 선택하고 속성 관리자에서 [편집] 버튼을 클릭하여 원본 Photoshop 파일을 열어 편집할 수 있습니다.

Photoshop에서 다음 중 하나를 수행합니다.
- 복사할 부분을 선택하는 선택 윤곽 도구를 사용하여 단일 레이어의 전체 또는 일부를 복사한 다음 [편집] > [복사]를 선택합니다. 이렇게 하면 선택한 영역의 활성 레이어만 클립보드로 복사됩니다. 레이어 기반 효과가 적용된 경우 해당 효과는 복사되지 않습니다.
- 복사할 부분을 선택하는 [선택 윤곽 도구]를 사용하여 여러 레이어를 복사하고 병합한 다음 [편집] > [병합하여 복사]를 선택합니다. 이렇게 하면 선택한 모든 영역의 활성 및 하위 레이어가 병합되어 클립보드로 복사됩니다. 이러한 레이어와 관련된 레이어 기반 효과가 적용된 경우 해당 효과도 복사됩니다.
- 슬라이스를 선택하는 [분할 영역 선택 도구]를 사용하여 슬라이스를 복사한 다음 [편집] > [복사]를 선택합니다. 이렇게 하면 모든 슬라이스의 활성 및 하위 레이어가 병합되어 클립보드로 복사됩니다.
참고:

[선택] > [모두]를 선택하여 복사할 모든 이미지를 빠르게 선택할 수 있습니다.
Dreamweaver(디자인 보기 또는 코드 보기)에서 이미지를 삽입할 페이지에 삽입 포인터를 놓습니다.
[편집] > [붙여넣기]를 선택합니다.
[이미지 최적화] 대화 상자에서 원하는 대로 최적화 설정을 조정하고 [확인]을 클릭합니다.
웹에서 바로 사용할 수 있는 이미지 파일을 웹 사이트의 루트 폴더 내에 저장합니다.

Dreamweaver에서는 최적화 설정에 따라 이미지를 정의하고 웹에서 바로 사용할 수 있는 버전의 이미지를 페이지에 삽입합니다. 사이트에서 디자인 노트를 사용할 수 있는지 여부에 관계없이 원본 PSD 소스 파일의 위치와 같은 이미지 정보가 디자인 노트에 저장됩니다. 디자인 노트를 사용하면 원본 Photoshop 파일을 편집하기 위해 Dreamweaver에서 Photoshop으로 돌아올 수 있습니다.

붙여넣은 이미지 편집

Dreamweaver 페이지에 Photoshop 이미지를 붙여넣은 후 Photoshop에서 원본 PSD 파일을 편집할 수 있습니다. 복사/붙여넣기 워크플로를 사용할 때는 단일 소스를 유지할 수 있도록 웹에서 바로 사용할 수 있는 이미지가 아니라 원본 PSD 파일을 편집한 다음 다시 붙여넣는 것이 좋습니다.

참고:

편집할 파일 유형의 기본 외부 이미지 편집기로 Photoshop이 설정되어 있는지 확인합니다.

Dreamweaver에서, Photoshop을 사용하여 만든 웹에서 바로 사용할 수 있는 이미지를 선택하고 다음 중 하나를 수행합니다.
- 이미지 속성 관리자의 [편집] 버튼을 클릭합니다.
- Ctrl 키(Windows) 또는 Command 키(Macintosh)를 누른 채 파일을 두 번 클릭합니다.
- 이미지를 마우스 오른쪽 버튼으로 클릭(Windows)하거나 Control 키를 누른 상태에서 클릭(Macintosh)하고 컨텍스트 메뉴에서 [다음을 사용하여 원본 편집]을 선택한 다음 [Photoshop]을 선택합니다.
참고:

PSD 이미지 파일에 대한 기본 외부 이미지 편집기로 Photoshop이 설정되었다고 가정합니다. JPEG, GIF 및 PNG 파일 유형에 대한 기본 편집기로 Photoshop을 설정할 수도 있습니다.
Photoshop에서 파일을 편집합니다.
Dreamweaver로 돌아가서 업데이트된 이미지 또는 선택한 항목을 페이지로 붙여넣습니다.

언제든지 이미지를 다시 최적화하려는 경우 이미지를 선택하고 속성 관리자에서 이미지 설정 편집 버튼을 클릭하면 됩니다.

이미지 최적화 대화 상자 옵션 설정

스마트 오브젝트를 만들거나 Photoshop에서 선택한 항목을 붙여넣으면 이미지 최적화 대화 상자가 표시됩니다. 이미지를 선택하고 속성 관리자에서 [이미지 설정 편집] 버튼을 클릭할 경우 다른 종류의 이미지에 대해서도 이 대화 상자가 표시됩니다. 이 대화 상자에서는 적절한 색 혼합, 압축 및 품질을 통해 웹에서 바로 사용할 수 있는 이미지의 설정을 정의하고 미리 볼 수 있습니다.

웹에서 바로 사용할 수 있는 이미지는 모든 최신 웹 브라우저에 표시되고 사용자의 시스템 또는 브라우저에 관계없이 동일하게 표시됩니다. 일반적으로 설정은 품질과 파일 크기에 상반된 영향을 미칩니다.

참고:

선택한 모든 설정은 가져온 버전의 이미지 파일에만 영향을 미칩니다. 원본 Photoshop PSD 또는 Fireworks PNG 파일은 항상 변경되지 않습니다.

사전 설정

필요에 따라 가장 적합한 사전 설정을 선택합니다. 선택한 사전 설정에 따라 이미지의 파일 크기가 변경됩니다. 설정이 적용된 이미지의 실시간 미리보기가 배경에 표시됩니다.

예를 들어 매우 선명하게 표시해야 하는 이미지의 경우 사진용 PNG24(세부 사항 선명하게)를 선택합니다. 페이지의 배경으로 사용할 패턴을 삽입하는 경우 배경 이미지용 GIF(패턴)를 선택합니다.

사전 설정을 선택하면 사전 설정에 구성할 수 있는 옵션이 표시됩니다. 최적화 설정을 보다 세부적으로 맞춤화하려면 이들 옵션의 값을 수정하십시오.

쉽고 빠르게 지원 받기

신규 사용자이신가요?