Creative Cloud Extract는 Creative Cloud 에셋의 새로운 무료 기능으로, 사용자는 이를 통해 레이어와 레이어 구성 요소를 포함하는 PSD를 브라우저에서 바로 살펴볼 수 있습니다. 특히, PSD를 공유하고 디자인 정보의 잠금을 해제하고 제작 준비 에셋을 다운로드할 수 있는 웹 디자이너와 개발자에게 도움이 됩니다. Extract를 사용하여 브라우저에서 PSD 파일로 다음의 작업을 수행할 수 있습니다.

  • 텍스트 및 CSS 복사
  • 색상, 그레이디언트 및 글꼴 정보 입수
  • 요소 간 거리 측정
  • 제작용으로 최적화된 이미지 에셋 저장

PSD 파일로 작업하는 웹 디자이너 또는 개발자의 경우 Creative Cloud Extract을 통해 지루한 작업 단계의 수를 줄이고 불필요한 커뮤니케이션을 최소화하여 디자인에서 코드로 전환하는 과정을 단순화할 수 있습니다.

참고:

Extract는 읽기 전용이며 PSD 파일 편집에 사용할 수 없습니다.

Extract 스타일 정보

  1. Creative Cloud 웹 사이트에 로그인합니다.
  2. Creative Cloud 계정의 에셋 섹션으로 이동합니다
  3. PSD 파일을 드래그하여 파일 영역에 놓거나 파일 선택 옵션을 사용하여 해당 파일을 업로드합니다. 이전에 업로드된 PSD 파일로 이동할 수도 있습니다.
  4. Extract 보기에서 열려는 PSD 파일의 축소판을 클릭합니다.
Extract 보기에서 파일 열기

이 Extract 보기에서 브라우저 내의 모든 PSD 디자인을 살펴볼 수 있습니다. 레이어 계층 구조를 살펴보고 다른 레이어 구성 요소를 볼 수 있으며 새 이미지 파일로 PSD의 일부를 추출할 수 있습니다. PSD 미리 보기에서 아무 요소나 클릭하면 레이어가 선택되고 그 레이어에 대한 정보가 제공됩니다. 선택을 하고 나면 다음을 수행할 수 있습니다.

요소 좌표 및 치수 보기/복사

PSD 파일의 단일 요소를 클릭하면 정보 패널이 나타납니다. 이 패널은 디자인 요소 레이어의 x 좌표y 좌표 위치 뿐만 아니라 해당 요소의 폭과 높이도 표시합니다.

픽셀(px)로 표시되는 디자인 요소의 좌표 및 치수
백분율(%)로 표시되는 디자인 요소의 좌표 및 치수

참고:

W, H, X 또는 Y 등 아무 값이나 클릭하여 클립보드에 복사합니다.

Extract에서의 측정치는 픽셀 또는 백분율 단위로 표시할 수 있습니다. 선택한 요소가 있는 경우, 백분율 폭과 높이 측정치는 PSD 디자인의 전체 폭 및 높이와 연계됩니다. 하나의 요소가 다른 하나에 의해 완전히 둘러싸여 있는 두 개의 요소를 선택한 경우, 안쪽 요소의 폭과 높이는 바깥쪽 요소의 치수와 연계하여 보고됩니다.

안쪽 요소의 측정치는 에워싸고 있는 요소의 측정치와 연계하여 표시됩니다.

참고:

아무 값이나 클릭하여 클립보드에 복사합니다.

2개 요소 간 거리 보기

요소 사이의 거리를 보려면 해당 요소를 Shift 키를 누른 채 클릭합니다. 요소 사이의 거리를 알고 있으면 마진 또는 패딩 정보를 판단하는 데 유용합니다.

2개 요소 간 거리

CSS 코드 복사

PSD 디자인에서 요소를 선택할 때 파란색 정보 패널에서 CSS 복사를 클릭하여 요소의 CSS를 복사합니다. CSS 검사기에서 CSS 코드를 확인하고 복사할 수도 있습니다.

CSS 코드 보기

참고:

Extract는 프리프로세서를 지원합니다. 스타일 탭에서 CSS 옆에 있는 (아래쪽 화살표)를 클릭하면 CSS 프리프로세서 사용 옵션을 볼 수 있습니다.

CSS 프리프로세서 사용 옵션

텍스트 복사

선택한 요소에 텍스트가 있는 경우 텍스트 복사를 클릭하여 클립보드로 복사합니다.

선택한 텍스트를 클립보드에 복사

글꼴, 색상 및 그레이디언트 정보 보기/복사

스타일 패널을 열어 디자인 문서(PSD)에서 사용되는 글꼴, 색상 및 그레이디언트와 관련된 정보를 확인하고 복사할 수 있습니다. 정보를 확인하는 동안 글꼴 크기, 색상 또는 그레이디언트 견본을 클릭하여 그 값을 클립보드에 복사합니다.

샘플 색상 그레이디언트 값

요소를 선택하는 경우 사용 중인 텍스트와 색상 스타일이 스타일 패널에 강조 표시됩니다.

참고:

Adobe Typekit와 Extract의 통합을 통해 수천 개의 고품질 글꼴을 이용할 수 있습니다. Typekit 아이콘()은 스타일 패널에서 Typekit의 글꼴 옆에 표시됩니다. 이 Typekit 아이콘을 클릭하면 Extract가 Typekit에서 해당 글꼴이 있는 페이지를 엽니다.

사용하고자 하는 웹에 적합한 글꼴을 찾고 나면 Typekit의 키트에 이를 추가하고 제작 코드에 연결합니다.

선택한 요소에 대한 글꼴 및 색상 정보

색상 피커 툴 사용

색상 피커 툴()을 사용하면 디자인에서 요소의 색상을 빠르게 찾을 수 있습니다.

  • 색상 피커 툴을 선택한 다음 디자인에서 아무 데나 클릭합니다. 색상 피커 툴이 색상을 감지하고 이를 스타일 패널에 색상 견본으로 추가합니다. 이제 색상에 대한 CSS 정보를 간편하게 확인하고 복사할 수 있습니다.
색상 피커 툴

이미지 에셋 추출

Creative Cloud Extract를 사용하여 PSD에서 하나 이상의 레이어를 선택하고 이미지 에셋을 추출할 수 있습니다. 에셋은 8비트 PNG, 32비트 PNG, JPG 및 SVG 이미지로 추출할 수 있습니다.

이미지 에셋 추출

요소에 대한 파란색 정보 패널에서 아이콘을 클릭하고 다음 작업을 합니다.

  1. 이미지 에셋 설정을 검토합니다. 필요한 경우 다양한 이미지 지원 포맷(PNG, JPG 또는 SVG)을 선택할 수 있습니다.
  2. JPG 에셋을 생성하는 경우 이미지 에셋 품질을 조정할 수 있습니다.
  3. 필요한 경우 크기 조절 옵션을 선택합니다. 예를 들어, 2배로 크기 조절을 선택합니다. 0.1배에서 5배까지 에셋을 크기 조절할 수 있습니다.
  4. 저장을 클릭합니다.
  5. 에셋 패널에서 생성된 에셋을 찾습니다. Creative Cloud 에셋 보기의 PSD 파일 옆에 새로 생성된 폴더에서 해당 에셋을 찾을 수 있습니다. 생성된 폴더의 이름은 <파일 이름>-assets으로 지정됩니다. 예: 파일이 adventure.psd인 경우 에셋 폴더의 이름은 adventure-assets으로 지정됩니다.

    에셋 패널에서 이미지 축소판 그림을 클릭하면 에셋이 로컬 컴퓨터로 다운로드됩니다.
에셋 패널

참고:

로그인 상태에서 Creative Cloud 에셋 폴더의 PSD 파일을 보는 경우, 고급 에셋 추출 기능을 이용할 수 있습니다. 에셋을 다운로드할 때마다 에셋은 Creative Cloud 에셋의 에셋 패널과 .psd_assets 폴더에 추가됩니다. 에셋 패널의 이미지 축소판을 클릭하여 에셋을 로컬 컴퓨터로 다운로드할 수 있습니다.

PSD 파일을 보기 위해 다른 사용자가 제공한 링크를 클릭한 경우에는 에셋 패널을 사용할 수 없습니다. 이런 경우에는 일반적으로 Extract를 사용할 수 있지만,  아이콘을 클릭하면 에셋이 컴퓨터로 즉시 다운로드되기 시작합니다. 로컬 디스크에서 에셋을 찾으려면 브라우저의 다운로드 관리자를 사용하십시오.

레이어를 사용하여 작업

레이어 패널은 PSD 디자인의 모든 레이어와 레이어 그룹을 표시합니다. Creative Cloud Extract는 읽기 전용 기능이므로 레이어의 모든 변경 사항은 PSD 파일에 저장되지 않습니다.

레이어 패널을 사용하면 가시성을 전환하고 레이어 요소를 선택하며 에셋을 추출할 수 있습니다. 

레이어 또는 레이어 그룹을 이미지 에셋으로 추출

PSD 파일의 레이어 또는 레이어 그룹을 이미지 에셋으로 추출할 수 있습니다. 다음 중 하나를 수행합니다.

  1. 레이어 패널을 클릭하여 PSD 파일의 레이어 계층 구조를 확인합니다.
레이어 계층 구조

참고:

계층 구조에서 여러 레이어를 선택하고 선택한 모든 레이어를 결합하는 새로운 단일 이미지 에셋을 내보낼 수 있습니다.

  1. 레이어 계층 구조를 검사하고 탐색합니다. 
    • 레이어 그룹을 확장하려면 해당 그룹 옆에 있는 폴더 아이콘()을 클릭합니다.
    • 요소를 클릭하여 레이어 창에 있는 해당 레이어 및 레이어 그룹을 강조 표시합니다.
  2. 추출할 레이어 및 레이어 그룹을 이미지 에셋으로 선택합니다. 여러 개의 레이어를 선택하려면 Command 키(Mac) 또는 Ctrl 키(Windows)를 누르십시오. 여러 개체를 선택하는 경우 선택한 레이어나 그룹을 포함하는 하나의 에셋으로 추출됩니다.
  3. 레이어 또는 레이어 그룹 옆에 있는  아이콘을 클릭합니다. 여러 개의 레이어 및 레이어 그룹을 선택하는 경우, 선택한 레이어 옆에 있는  아이콘을 클릭합니다.
  4. 새로운 이미지 에셋의 이름을 입력합니다.
  5. 이미지 에셋 포맷(PNG 8 Alpha, PNG 32, JPG, 또는 SVG)을 선택합니다.
  6. (선택사항) JPG 이미지 에셋을 생성하는 경우 해당 에셋의 품질을 조정할 수 있습니다.
  7. 저장을 클릭합니다.
  8. 에셋 창에서 생성된 에셋을 찾습니다. Creative Cloud 에셋의 PSD 파일 옆 새로 생성된 폴더에서 해당 에셋을 찾을 수 있습니다.

참고:

레이어 재설정 옵션은 디자인에서 레이어 가시성을 원래 상태로 다시 설정합니다.

레이어 또는 레이어 그룹 숨기기

레이어 또는 레이어 그룹을 숨기거나 표시하려면 레이어 패널에서 눈 아이콘()을 토글합니다.

레이어 구성 요소로 작업

Creative Cloud Extract를 통해 다른 Photoshop 레이어 구성 요소를 볼 수 있습니다. 레이어 구성 요소를 포함하는 Extract용 PSD 파일을 업로드하는 경우 PSD의 상단에 팝업 메뉴가 표시됩니다. 이 팝업 메뉴에는 PSD의 모든 레이어 구성 요소와 마지막 문서 상태 선택 항목이 포함되어 있습니다. 마지막 문서 상태는 파일이 저장되고 Creative Cloud에 업로드되기 전 Photoshop에서의 마지막 상태입니다. 이 상태는 레이어 구성 요소일 수도 있고 아닐 수도 있습니다.

Extract에서 레이어 구성 요소로 작업

파일 공유

Extract 탭에서 PSD 파일을 보는 동안 Creative Cloud 공유 기능을 사용하여 파일을 공유할 수 있습니다. 파일이 공유된 사용자는 Creative Cloud에 로그인하지 않고도 파일에서 에셋과 측정치를 추출할 수 있습니다.

자세한 내용은 파일 및 폴더 공유를 참조하십시오.

피드백 보내기

추가 질문이나 보고할 사항, 또는 제출하고자 하는 피드백이 있는 경우 PSD용 Extract 포럼으로 보내 주십시오.

FAQ

Extract는 Photoshop Generator 태그를 지원하나요?

예. 이미지 에셋을 추출하면서 해당 레이어 이름에 지정된 Generator 태그를 기본값으로 하여 설정되는 것이 어느 정도까지는 가능합니다.

Extract로 PSD 파일을 편집할 수 있나요?

아니요. Extract는 읽기 전용입니다.

PSD 또는 에셋 이름에 지원되지 않는 문자가 있나요?

PSD 파일명 또는 이미지 에셋 이름에는 특수 문자 |, ", ?, <, >, /, \, ;, * 및 : 등은 지원되지 않습니다.

업로드한 PSD 파일은 누가 액세스할 수 있나요?

Extract에 업로드한 모든 파일은 Creative Cloud 계정을 통해서만 액세스할 수 있습니다.

PSD 파일을 공유하고자 하는 경우 해당 파일을 공개로 하고 링크를 공유할 수 있습니다. 공유 중 Extract 옵션이 활성화된 경우 링크를 보유한 모든 사용자는 Extract에서 해당 PSD를 보고 에셋을 추출할 수 있습니다.

Extract는 CMYK 색상 공간을 사용하는 PSD 파일과 함께 작업할 수 있나요?

아니요. CMYK PSD 파일을 RGB 색상 공간으로 변환시킨 후에 Extract에 업로드합니다.

PSD 파일 외에 지원받는 파일 포맷이 있나요?

아니요. 현재는 PSD 파일만 지원됩니다.

Extract로 다룰 수 있는 PSD 파일에 제한 사항이 있나요?

Extract는 Photoshop에서 생성되는 PSD 파일용으로 제작되었습니다. Extract를 2GB 이상 또는 1,000개 이상의 레이어가 있는 PSD 파일과 함께 사용하는 것은 권장되지 않습니다.

Extract와 Photoshop CC용 Adobe Generator는 어떻게 다른가요?

Generator와 Extract는 모두 코드 프로세스에서의 디자이너와 개발자 간 마찰을 제거하기 위해 제작되었습니다. Generator가 Photoshop CC 내에서 이미지 에셋을 추출하는 반면 Extract는 Creative Cloud 서비스로서 브라우저에서 바로 작업합니다. Extract의 경우 Photoshop 설치나 실행이 요구되지 않습니다.

또한 Extract에서 여러 레이어로부터 단일 에셋을 만들 수 있습니다.

Extract를 사용하려면 Creative Cloud 구독이 필요한가요?

무료 또는 유료 Creative Cloud 계정이 있는 사용자라면 누구나 Creative Cloud 에셋에 PSD 파일을 업로드하고 Extract를 사용할 수 있습니다.

Extract 링크를 공유한 경우 수신자는 PSD 파일에서 에셋과 측정치를 추출하기 위해 Creative Cloud 계정에 로그인할 필요가 없습니다.

Extract 스타일 패널에 일부 색상이나 그레이디언트가 포함되어 있지 않은 이유가 무엇인가요?

대부분의 경우 그러한 색상이나 그레이디언트는 Extract가 지원하지 않는 픽셀 기반 칠입니다. PSD 파일이 이러한 유형의 칠을 사용하는 경우, 색상 피커를 사용하여 색상을 취하고 스타일 패널에 색상 견본을 추가하십시오.

Extract가 그레이디언트용으로 제공하는 CSS에 제한 사항이 있나요?

예, 일부 유형의 그레이디언트는 특정 요령 없이 CSS에서 생성될 수 없습니다. 현재 Extract는 각도, 반사, 다이아몬드 또는 모양 버스트 유형의 그레이디언트에 대해 정확한 CSS를 제공하지 않습니다. 그러나 선형 및 방사형 그레이디언트 유형은 지원됩니다.

Extract의 PSD 미리 보기가 Photoshop에서 보는 것과 일치하지 않는 이유는 무엇인가요?

렌더링 차이로 인해 Extract 보기가 Photoshop에서 보는 것과 다를 수 있습니다. 이러한 차이점을 발견하면 알려 주시기 바랍니다.

발견한 내용을 기재하여 포럼에 문제점을 알려 주십시오. 차이점에 대한 이미지를 보내 주시면 더욱 도움이 되며, 문제를 해결하기 위해 최선을 다하겠습니다.

Extract를 모바일 디바이스에서 사용할 수 있나요?

모바일 디바이스에서는 PSD의 미리 보기를 확인하고 색상, 글꼴 및 그레이디언트 등 일부 스타일을 볼 수 있습니다. 데스크탑에서 처럼 PSD와 상호 작용할 수는 없습니다.

모든 에셋을 한 번에 다운로드할 수 있나요?

현재 Extract는 모든 에셋을 한 번에 다운로드하는 것을 지원하지 않습니다. 에셋을 개별적으로 추출하고 다운로드해야 합니다.

모든 디자인용 CSS 코드를 한 번에 다운로드할 수 있나요?

현재 Extract는 모든 디자인용 CSS 코드를 한 번에 다운로드하는 것을 지원하지 않습니다. 개별 항목을 선택하고 해당 CSS를 제작 코드에 복사해야 합니다.

이 기능에 관심이 있는 경우 CSS 결과물에 바라는 점을 포럼에 게시하여 주시기 바랍니다.

PSD 파일을 공유했지만 수신자에게 Extract 탭이 표시되지 않습니다. 이유가 무엇인가요?

지난 2014년 8월 Extract 출시 전에 PSD 파일을 공유한 경우에는 PSD 파일에 Extract 탭이 활성화되어 있지 않습니다. 활성화하려면 다음을 수행하십시오.

이 옵션은 공개적으로 공유된 URL을 변경하지 않고 Extract를 사용할 수 있도록 합니다.

  1. 링크 보내기 대화 상자의 고급 옵션을 엽니다.
  2. [Extract 허용]이 활성화되어 있는지 확인합니다.

Project Parfait와 Extract의 차이점은 무엇인가요?

Project Parfait는 Extract에서의 작업 과정을 소개하기 위해 Adobe가 베타 버전으로 출시한 서비스입니다. Extract는 Project Parfait와 동일한 기능 외에도 추가 기능이 있습니다. Project Parfait는 Creative Cloud에서 공개적으로 소개되었으며, 이제 Project Parfait 서비스를 이용하여 PSD에서 정보와 에셋을 추출하는 기능은 종료될 예정입니다. 

Project Parfait에 업로드한 PSD는 어떻게 되나요?

Project Parfait에서 작업한 파일을 다운로드하고자 하는 경우 2014년 말까지 이를 완료해야 합니다. 

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

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