batch-extract-assets.zip 프로젝트 파일을 다운로드하고 압축을 풉니다. Dreamweaver에서 index.html을 열고 Extract 작업 영역으로 전환합니다.

Extract 패널에서 PSD 업로드 를 클릭하고 프로젝트 파일에 포함된 vermilion-design.psd를 엽니다.

Extract 패널에서 메인 이미지 를 선택하고 Extract 아이콘을 클릭하여 에셋 추출 옵션을 엽니다.

이미지를 추출하기 전에 사이트 구조에 맞는지 추출할 위치 및 파일 이름 지정 속성을 확인합니다. 이 작업을 하려면 환경 설정 편집 아이콘 을 클릭합니다.

기본적으로 Dreamweaver는 이미지를 MDPI(중간 해상도), XHDPI(고화질 해상도) 및 XXHDPI(최고 화질 해상도)와 같이 세 개의 해상도로 추출합니다. 환경 설정 대화 상자에서 다음을 수행합니다.

폴더 섹션에서 각 세 개 해상도의 파일 경로 앞에 images/ 를 추가합니다. 적용 을 클릭한 다음 닫기 를 클릭합니다.

에셋 추출 옵션에서 에셋 이름 및 파일 유형과 같은 추가 사항을 설정할 수 있습니다.

다중 저장 을 클릭합니다.

추출이 완료되면 파일 패널 을 열어 일괄 추출 프로세스의 결과를 확인합니다. Extract 환경 설정에 따라 메인 이미지를 세 개의 해상도로 추출하고 사이트 구조의 사용자 정의 폴더에 추가합니다. 한 번의 클릭으로 이 모든 것을 수행할 수 있습니다.

DeviceAware.css 를 열어 세 개의 화면 해상도(작은 Non-Retina, 중간 Retina, 큰 Retina)를 정의하는 세 개의 미디어 쿼리를 확인합니다. 각 미디어 쿼리는 CSS 클래스를 포함합니다. 각 클래스에서 background-image 속성 을 정의하고, 각 미디어 쿼리에 가장 적합한 추출된 이미지를 연결합니다.

예제의 오른쪽에는 중간 Retina 화면을 정의하는 미디어 쿼리와 해당 CSS 클래스가 표시되어 있습니다. 이 경우 해당 이미지를 XHDPI 버전으로 표시하는 것이 좋습니다.

반응형 웹 사이트의 경우 절대 픽셀 값 대신 백분율 값을 사용하여 폭, 높이 및 기타 위치 속성을 정의합니다.

Extract 패널에서 백분율 측정 단위를 변경하려면 메인 이미지를 선택하고 퍼센트 기호(%) 를 선택합니다.

폭 및 높이 속성이 이제 백분율로 표시됩니다. 두 요소를 선택할 경우 거리가 백분율로 정의됩니다. 참고로 Extract 패널에서 바로 CSS를 선택하고 복사하여 코드에 붙여 넣을 수 있습니다.