Dreamweaver(디자인 또는 코드 보기)에서 이미지를 삽입할 페이지의 위치에 삽입점을 놓습니다.
마지막 업데이트 날짜
2021년 4월 27일
Photoshop이 Dreamweaver와 어떻게 통합되는지를 살펴봅니다. Photoshop - Dreamweaver 워크플로에서 스마트 오브젝트를 사용하여 작업합니다.
Photoshop 통합 정보
메모
Photoshop 통합 워크플로는 Dreamweaver 21.0 이상 버전에서 중단되었습니다.
Dreamweaver에서 웹 페이지에 Photoshop 이미지 파일(PSD 형식)을 삽입하고 Dreamweaver에서 웹용 이미지(GIF, JPEG, PNG 형식)로 최적화할 수 있습니다.이 작업을 수행하면 Dreamweaver에서 이미지를 Smart Object로 삽입하고 원본 PSD 파일에 대한 실시간 연결을 유지합니다.
또한 다중 레이어 또는 다중 슬라이스 Photoshop 이미지의 전부 또는 일부를 Dreamweaver의 웹 페이지에 붙여넣을 수 있습니다.하지만 Photoshop에서 복사하여 붙여넣기를 할 때는 원본 파일에 대한 실시간 연결이 유지되지 않습니다.이미지를 업데이트하려면 Photoshop에서 변경을 수행한 후 다시 복사하여 붙여넣으세요.
메모
이 통합 기능을 자주 사용하는 경우 쉽게 액세스할 수 있도록 Dreamweaver 사이트에 Photoshop 파일을 저장하는 것이 좋습니다. 이렇게 할 경우 원본 에셋의 노출과 로컬 사이트와 원격 서버 간의 불필요한 전송을 방지하기 위해 해당 파일을 숨겨야 합니다.
Dreamweaver와 Photoshop 통합에 대한 튜토리얼을 보려면 Photoshop과 Dreamweaver 통합을 참조하십시오.
스마트 오브젝트 및 Photoshop-Dreamweaver 워크플로 정보
Dreamweaver에서 Photoshop 파일을 사용하는 주요 워크플로는 복사/붙여넣기 워크플로와 Smart Objects 워크플로 두 가지입니다.
복사/붙여넣기 작업 과정
복사/붙여넣기 워크플로를 사용하면 Photoshop 파일에서 슬라이스나 레이어를 선택한 다음 Dreamweaver를 사용해 웹용 이미지로 삽입할 수 있습니다.하지만 나중에 콘텐츠를 업데이트하려면 원본 Photoshop 파일을 열어 변경을 수행한 후 분할 영역이나 레이어를 클립보드에 다시 복사하고 업데이트된 분할 영역이나 레이어를 Dreamweaver에 붙여넣어야 합니다.이 워크플로는 Photoshop 파일의 일부(예: 디자인 컴프의 섹션)를 웹 페이지의 이미지로 삽입하려는 경우에만 권장됩니다.
스마트 오브젝트 작업 과정
완전한 Photoshop 파일로 작업할 때는 Adobe에서 Smart Objects 워크플로를 권장합니다. Dreamweaver의 Smart Object는 원본 Photoshop(PSD) 파일에 실시간으로 연결된 웹 페이지에 배치된 이미지 에셋입니다. Dreamweaver 디자인 보기에서 Smart Object는 이미지의 왼쪽 상단 모서리에 아이콘으로 표시됩니다.
웹 이미지(즉, Dreamweaver 페이지의 이미지)가 원본 Photoshop 파일과 동기화되지 않으면 Dreamweaver에서 원본 파일이 업데이트되었음을 감지하고 Smart Object 아이콘의 화살표 중 하나를 빨간색으로 표시합니다. 디자인 보기에서 웹 이미지를 선택하고 속성 검사기에서 [원본에서 업데이트] 버튼을 클릭하면 이미지가 자동으로 업데이트되어 원본 Photoshop 파일에 대한 모든 변경이 반영됩니다.
Smart Objects 워크플로를 사용할 때는 웹 이미지를 업데이트하기 위해 Photoshop을 열 필요가 없습니다.또한 Dreamweaver에서 Smart Object에 대한 모든 업데이트는 원본을 손상시키지 않습니다.즉, 원본 Photoshop 이미지를 그대로 유지하면서 페이지의 웹 버전 이미지를 변경할 수 있습니다.
또한 디자인 보기에서 웹 이미지를 선택하지 않고도 Smart Object를 업데이트할 수 있습니다. 에셋 패널에서는 문서 창에서 선택할 수 없는 이미지(예: CSS 배경 이미지)를 포함해 모든 Smart Objects를 업데이트할 수 있습니다.
이미지 최적화 설정
복사/붙여넣기 및 스마트 오브젝트 워크플로에서는 이미지 최적화 대화 상자에서 최적화 설정을 지정할 수 있습니다. 이 대화 상자에서는 파일 유형 및 이미지 품질을 지정할 수 있습니다. 분할 영역이나 레이어를 복사하거나 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 파일)를 삽입하면 Dreamweaver에서 Smart Object를 만듭니다.Smart Object는 원본 Photoshop 이미지에 대한 실시간 연결을 유지하는 웹용 이미지입니다.Photoshop에서 원본 이미지를 업데이트할 때마다 Dreamweaver에서는 버튼 클릭 한 번으로 Dreamweaver의 이미지를 업데이트할 수 있는 옵션을 제공합니다.
삽입 > 이미지를 선택합니다.
메모
웹 사이트에 Photoshop 파일을 저장하고 있다면 파일 패널에서 PSD 파일을 페이지로 드래그할 수도 있습니다.이렇게 하는 경우 다음 단계를 건너뛰십시오.
[탐색] 버튼을 클릭한 다음 해당 파일로 이동하여 [이미지 소스 선택] 대화 상자에서 Photoshop PSD 이미지 파일을 찾습니다.
[이미지 최적화] 대화 상자가 나타나면 원하는 대로 최적화 설정을 조정하고 [확인]을 클릭합니다.
웹용 이미지 파일을 웹 사이트의 루트 폴더 내 위치에 저장하십시오.
Dreamweaver는 선택한 최적화 설정을 기반으로 스마트 객체를 만들고 웹에 적합한 버전의 이미지를 페이지에 배치합니다.스마트 객체는 원본 이미지와의 실시간 연결을 유지하고 두 파일이 동기화되지 않았을 때 알려줍니다.
메모
나중에 페이지에 배치된 이미지의 최적화 설정을 변경하려는 경우 이미지를 선택하고 속성 관리자에서 [이미지 설정 편집] 버튼을 클릭한 다음 이미지 최적화 대화 상자에서 설정을 변경하면 됩니다. 이미지 최적화 대화 상자에서 변경된 내용은 비소거적으로 적용됩니다. Dreamweaver는 원본 Photoshop 파일을 수정하지 않고 항상 원본 데이터를 기반으로 웹 이미지를 다시 만듭니다.
Photoshop을 사용한 Roundtrip 편집에 대한 비디오 튜토리얼을 보려면 Photoshop을 사용한 Roundtrip 편집을 참조하십시오.
스마트 오브젝트 업데이트
스마트 객체가 연결된 Photoshop 파일을 변경하면 Dreamweaver에서 웹에 적합한 이미지가 원본과 동기화되지 않았다고 알려줍니다.Dreamweaver에서 스마트 객체는 이미지의 좌측 상단 모서리에 있는 아이콘으로 표시됩니다.Dreamweaver의 웹에 적합한 이미지가 원본 Photoshop 파일과 동기화되어 있을 때 아이콘의 두 화살표가 모두 녹색으로 표시됩니다.웹에 적합한 이미지가 원본 Photoshop 파일과 동기화되지 않을 때 아이콘의 화살표 중 하나가 빨간색으로 바뀝니다.
스마트 오브젝트를 원본 Photoshop 파일의 현재 내용으로 업데이트하려면 [문서] 창에서 [스마트 오브젝트]를 선택한 다음 속성 관리자의 [원본에서 업데이트] 버튼을 클릭하십시오.
메모
Dreamweaver에서 업데이트하기 위해 Photoshop을 설치할 필요는 없습니다.
여러 스마트 오브젝트 업데이트
에셋 패널을 사용하여 여러 스마트 객체를 한 번에 업데이트할 수 있습니다.에셋 패널에서는 문서 창에서 선택할 수 없는 스마트 객체(예: CSS 배경 이미지)도 볼 수 있습니다.
파일 패널에서 에셋 탭을 클릭하여 위치 에셋을 봅니다.
이미지 뷰가 선택되어 있는지 확인합니다. 선택되어 있지 않으면 [이미지] 버튼을 클릭합니다.
[에셋] 패널에서 각 이미지 에셋을 선택합니다. 스마트 객체를 선택하면 이미지의 좌측 상단 모서리에 스마트 객체 아이콘이 표시됩니다.일반 이미지를 선택하면 이 아이콘이 표시되지 않습니다.
업데이트하려는 각 스마트 객체에 대해 파일 이름을 마우스 오른쪽 버튼으로 클릭하고 [원본에서 업데이트]를 선택합니다.여러 파일 이름을 Ctrl 키를 누른 채 클릭하여 선택하고 모두 한 번에 업데이트할 수도 있습니다.
메모
Dreamweaver에서 업데이트하기 위해 Photoshop을 설치할 필요는 없습니다.
스마트 오브젝트 크기 조절
문서 창에서 다른 이미지와 마찬가지로 스마트 객체의 크기를 조절할 수 있습니다.
문서 창에서 스마트 객체를 선택하고 크기 조절 핸들을 드래그하여 이미지 크기를 조절합니다.드래그할 때 Shift 키를 누르고 있으면 폭과 높이 비율을 유지할 수 있습니다.
속성 관리자에서 [원본에서 업데이트] 버튼을 클릭합니다.
스마트 객체를 업데이트하면 웹 이미지가 원본 파일의 현재 콘텐츠와 원래 최적화 설정을 기반으로 새 크기에서 비파괴적으로 다시 렌더링됩니다.
스마트 오브젝트의 원본 Photoshop 파일 편집하기
Dreamweaver 페이지에서 스마트 객체를 만든 후 Photoshop에서 원본 PSD 파일을 편집할 수 있습니다.Photoshop에서 변경 작업을 완료한 후 Dreamweaver에서 웹 이미지를 쉽게 업데이트할 수 있습니다.
메모
Photoshop을 기본 외부 이미지 편집기로 설정했는지 확인하십시오.
문서 창에서 스마트 오브젝트를 선택합니다.
속성 관리자에서 [편집] 버튼을 클릭합니다.
Photoshop에서 원본을 변경하고 새 PSD 파일을 저장합니다.
Dreamweaver에서 스마트 오브젝트를 다시 선택하고 [원본에서 업데이트] 버튼을 클릭합니다.
메모
Photoshop에서 이미지 크기를 변경한 경우 Dreamweaver에서도 웹 이미지 크기를 재설정해야 합니다. Dreamweaver는 원본 Photoshop 파일의 크기가 아닌 내용을 기반으로만 스마트 오브젝트를 업데이트합니다. 웹 이미지 크기와 원본 Photoshop 파일 크기를 동기화하려면 이미지를 마우스 오른쪽 버튼으로 클릭하고 원본 크기로 재설정을 선택합니다.
스마트 오브젝트 상태
다음 표는 Smart Object의 다양한 상태를 나열합니다.
|
스마트 오브젝트 상태 |
설명 |
권장되는 액션 |
|
이미지가 동기화됨 |
웹 이미지가 원본 Photoshop 파일의 현재 내용과 동기화되어 있습니다. HTML 코드의 폭 및 높이 속성이 웹 이미지 크기와 일치합니다. |
없음 |
|
원본 에셋이 수정됨 |
Dreamweaver에서 웹 이미지를 만든 후 원본 Photoshop 파일이 수정되었습니다. |
두 이미지를 동기화하려면 속성 관리자의 [원본에서 업데이트] 버튼을 사용하십시오. |
|
웹 이미지 크기가 선택된 HTML 폭 및 높이와 다름 |
HTML 코드의 폭 및 높이 속성이 삽입 시 Dreamweaver가 만든 웹 이미지의 폭 및 높이 크기와 다릅니다. 웹 이미지의 크기가 선택된 HTML 폭 및 높이 값보다 작을 경우 웹 이미지가 모자이크처럼 나타날 수 있습니다. |
원본 Photoshop 파일에서 웹 이미지를 다시 만들려면 속성 관리자의 [원본에서 업데이트] 단추를 사용하십시오. Dreamweaver는 이미지를 다시 만들 때 현재 지정된 HTML 폭 및 높이 크기를 사용합니다. |
|
원본 에셋 크기가 선택된 HTML 폭 및 높이에 비해 너무 작음 |
HTML 코드의 폭 및 높이 속성이 원본 Photoshop 파일의 폭 및 높이 크기보다 큽니다. 웹 이미지가 모자이크처럼 나타날 수 있습니다. |
웹 이미지를 원본 Photoshop 파일 크기보다 큰 크기로 만들지 마십시오. |
|
원본 에셋을 찾을 수 없음 |
Dreamweaver가 속성 관리자의 [원본] 텍스트 상자에 지정된 원본 Photoshop 파일을 찾을 수 없습니다. |
속성 관리자의 [원본] 텍스트 상자에서 파일 경로를 수정하거나 Photoshop 파일을 현재 지정된 위치로 옮기십시오. |
Photoshop에서 선택 영역을 복사하여 붙여넣으세요
Photoshop 이미지의 전체 또는 일부를 복사하여 웹에서 사용할 수 있는 이미지로 Dreamweaver 페이지에 붙여넣을 수 있습니다.이미지의 선택된 영역에 대해 단일 레이어 또는 레이어 세트를 복사하거나 이미지의 슬라이스를 복사할 수 있습니다.하지만 이렇게 할 경우 Dreamweaver에서 Smart Object를 생성하지 않습니다.
메모
붙여넣은 이미지에 대해 [원본에서 업데이트] 기능은 사용할 수 없지만, 붙여넣은 이미지를 선택하고 속성 관리자에서 [편집] 버튼을 클릭하여 원본 Photoshop 파일을 열어 편집할 수 있습니다.
Photoshop에서 다음 중 하나를 수행합니다.
- 복사할 부분을 선택하는 선택 윤곽 도구를 사용하여 단일 레이어의 전체 또는 일부를 복사한 다음 [편집] > [복사]를 선택합니다. 이렇게 하면 선택한 영역의 활성 레이어만 클립보드로 복사됩니다. 레이어 기반 효과가 적용된 경우 해당 효과는 복사되지 않습니다.
- 복사할 부분을 선택하는 [선택 윤곽 도구]를 사용하여 여러 레이어를 복사하고 병합한 다음 [편집] > [병합하여 복사]를 선택합니다. 이렇게 하면 선택한 모든 영역의 활성 및 하위 레이어가 병합되어 클립보드로 복사됩니다. 이러한 레이어와 관련된 레이어 기반 효과가 적용된 경우 해당 효과도 복사됩니다.
- 슬라이스를 선택하는 [분할 영역 선택 도구]를 사용하여 슬라이스를 복사한 다음 [편집] > [복사]를 선택합니다. 이렇게 하면 모든 슬라이스의 활성 및 하위 레이어가 병합되어 클립보드로 복사됩니다.
메모
[선택] > [모두]를 선택하여 복사할 모든 이미지를 빠르게 선택할 수 있습니다.
Dreamweaver(디자인 또는 코드 보기)에서 이미지를 삽입할 위치에 삽입점을 놓습니다.
[편집] > [붙여넣기]를 선택합니다.
[이미지 최적화] 대화 상자에서 원하는 대로 최적화 설정을 조정하고 [확인]을 클릭합니다.
웹용 이미지 파일을 웹 사이트의 루트 폴더 내 위치에 저장하세요.
Dreamweaver에서는 최적화 설정에 따라 이미지를 정의하고 웹에서 바로 사용할 수 있는 버전의 이미지를 페이지에 삽입합니다. 사이트에서 디자인 노트를 사용할 수 있는지 여부에 관계없이 원본 PSD 소스 파일의 위치와 같은 이미지 정보가 디자인 노트에 저장됩니다. 디자인 노트를 사용하면 원본 Photoshop 파일을 편집하기 위해 Dreamweaver에서 Photoshop으로 돌아올 수 있습니다.
붙여넣은 이미지 편집
Dreamweaver 페이지에 Photoshop 이미지를 붙여넣은 후에 Photoshop에서 원본 PSD 파일을 편집할 수 있습니다.복사/붙여넣기 워크플로를 사용할 때 Adobe는 항상 원본 PSD 파일을 편집하고(웹용 이미지 자체가 아닌) 다시 붙여넣어 단일 소스를 유지할 것을 권장합니다.
메모
편집하려는 파일 유형에 대해 Photoshop이 기본 외부 이미지 편집기로 설정되어 있는지 확인합니다.
Dreamweaver에서 원래 Photoshop에서 생성된 웹용 이미지를 선택하고 다음 중 하나를 수행합니다:
- 이미지 속성 관리자의 [편집] 버튼을 클릭합니다.
- 파일을 두 번 클릭하면서 Control(Windows) 또는 Command(Macintosh) 키를 누릅니다.
- 이미지를 마우스 오른쪽 버튼으로 클릭(Windows) 또는 Control 키를 누른 채 클릭(Macintosh)하고 상황에 맞는 메뉴에서 [다음으로 원본 편집]을 선택한 다음 [Photoshop]을 선택합니다.
메모
이는 Photoshop이 PSD 이미지 파일의 기본 외부 이미지 편집기로 설정되어 있다고 가정합니다.또한 JPEG, GIF, PNG 파일 유형에 대해서도 Photoshop을 기본 편집기로 설정할 수 있습니다.
Photoshop에서 파일을 편집합니다.
Dreamweaver로 돌아가서 업데이트된 이미지나 선택 영역을 페이지에 붙여넣으십시오.
언제든지 이미지를 다시 최적화하려는 경우 이미지를 선택하고 속성 관리자에서 이미지 설정 편집 버튼을 클릭하면 됩니다.
이미지 최적화 대화 상자 옵션 설정
스마트 오브젝트를 만들거나 Photoshop에서 선택한 항목을 붙여넣으면 이미지 최적화 대화 상자가 표시됩니다. 이미지를 선택하고 속성 관리자에서 [이미지 설정 편집] 버튼을 클릭할 경우 다른 종류의 이미지에 대해서도 이 대화 상자가 표시됩니다. 이 대화 상자에서는 적절한 색 혼합, 압축 및 품질을 통해 웹에서 바로 사용할 수 있는 이미지의 설정을 정의하고 미리 볼 수 있습니다.
웹에서 바로 사용할 수 있는 이미지는 모든 최신 웹 브라우저에 표시되고 사용자의 시스템 또는 브라우저에 관계없이 동일하게 표시됩니다. 일반적으로 설정은 품질과 파일 크기에 상반된 영향을 미칩니다.
메모
선택한 모든 설정은 가져온 버전의 이미지 파일에만 영향을 미칩니다. 원본 Photoshop PSD 또는 Fireworks PNG 파일은 항상 변경되지 않습니다.
사전 설정
필요에 따라 가장 적합한 사전 설정을 선택합니다. 선택한 사전 설정에 따라 이미지의 파일 크기가 변경됩니다. 적용된 설정과 함께 이미지의 즉석 미리보기가 배경에 표시됩니다.
예를 들어 매우 선명하게 표시해야 하는 이미지의 경우 사진용 PNG24(세부 사항 선명하게)를 선택합니다.페이지의 배경으로 사용될 패턴을 삽입하는 경우 배경 이미지용 GIF(패턴)를 선택합니다.
사전 설정을 선택하면 사전 설정에 구성할 수 있는 옵션이 표시됩니다.최적화 설정을 추가로 사용자 지정하려면 이러한 옵션의 값을 수정합니다.
