참고:

웹 기반 Extract 기능은 2019년 3월에 종료될 예정입니다. 단, Photoshop 및 Dreamweaver 데스크탑 애플리케이션 내에서의 Extract 기능은 2019년 3월 이후로도 계속 유지됩니다. 자세한 내용은 Creative Cloud Assets: 웹 기반 Extract 종료를 참조하십시오.

extract_logo

Creative Cloud Extract를 사용하면 Photoshop 디자인에서 코드 작성에 이르는 워크플로가 간편해집니다. Extract는 웹 디자이너와 웹 개발자 모두의 프로세스를 간소화하며 웹 디자인을 실행 가능한 코드로 바꾸는 데 있어 작업 효율을 크게 향상시킵니다.


Photoshop 컴포지션은 이후에 디자인을 HTML 및 CSS로 변환할 필요가 있는 웹 개발자에게 디자인 사양을 공유하는 데 널리 사용되는 방법입니다. 일반적인 작업 과정에서 디자이너는 웹 또는 모바일 디자인을 위한 Photoshop 컴포지션을 만듭니다. 그 다음에 프로덕션 디자이너는 개발자가 에셋을 분할 영역으로 잘라내고 검토 사양을 만들 수 있는 PSD 파일을 준비합니다. 웹 개발자는 이러한 디자인 요소와 에셋을 받아 코드로 전환하는 업무를 맡습니다.

Extract는 이 작업 과정을 혁신하여 웹 디자이너가 Photoshop CC에서 최적화된 에셋을 신속하게 내보내고 자신의 PSD를 Dreamweaver CC에서 코드를 작성하는 다른 개발자들과 공유할 수 있도록 해 줍니다.

Extract 워크플로

PSD 디자인 작업의 다양한 단계에서 코드 워크플로에 Extract를 활용할 수 있습니다.

  • 디자이너는 익숙한 Photoshop CC 환경에서 레이어 또는 레이어 그룹으로부터 이미지 에셋을 정의하고 내보내는 작업을 할 수 있습니다.
  • 웹 디자이너와 개발자는 상황에 맞는 코드 힌트를 제공하는 완벽한 자체 포함 솔루션인 Dreamweaver 내에서, 에셋 추출 내에서 그리고 코딩 환경 내에서 직접 Extract를 사용할 수 있습니다.
Adobe_Photoshop_CC_mnemonic_RGB_128px_no_shadow

Photoshop에서 에셋 내보내기

Photoshop 컴포지션을 제작하는 디자이너는 간단하고 시각적인 인터페이스를 사용하여 개별 레이어 또는 레이어 그룹에서 이미지 에셋을 신속하게 정의하고 패키징할 수 있습니다. 이를 통해 제작 시간을 크게 단축시킬 수 있으므로 디자이너는 디자인 자체에 더 많은 시간을 할애할 수 있습니다. 


Adobe_Dreamweaver_CC_mnemonic_RGB_64px

Dreamweaver의 Extract

웹 디자이너와 개발자들은 이제 Dreamweaver에서 PSD를 보고 CSS의 글꼴, 색상 및 그레이디언트를 상황에 맞는 코드 힌트를 사용하여 쉽게 정의할 수 있습니다. 또한 최적화된 이미지를 라이브 뷰로 드래그 앤 드롭할 수 있으며, 텍스트를 복사하는 등의 작업을 할 수 있습니다.



이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책