PSD를 모바일 및 데스크탑용 HTML 기반 웹 디자인으로 신속하게 변환하는 방법에 대해 학습합니다. CSS, 이미지, 치수, 글꼴, 색상, 그레이디언트 등을 Photoshop에서 Dreamweaver로 직접 추출할 수 있습니다.

참고:

  Typekit은 이제 Adobe Fonts로 이름이 변경되었으며 Creative Cloud 및 기타 구독에 포함됩니다. 자세히 알아보기

Dreamweaver와 Extract의 통합으로 웹 디자이너와 개발자는 코딩 환경에서 바로 디자인 정보를 적용할 수 있으며 웹에 최적화된 에셋을 추출할 수 있습니다. Extract를 통해 Photoshop과 Dreamweaver 사이를 오고 가는 수고가 줄어들며 PSD 구성 요소에서 스타일 정보와 에셋을 추출하기 위한 완벽한 자체 솔루션을 제공받을 수 있습니다.

Dreamweaver에 있는 Extract 패널을 사용하면 CSS, 이미지, 글꼴 색상, 그레이디언트 및 치수를 추출하여 웹 페이지에 바로 삽입할 수 있습니다. Extract의 이러한 주요 기능 이외에도 Dreamweaver는 다음과 같이 고유한 기능을 제공합니다.

extract_logo
  • Creative Cloud의 PSD 파일 및 공동 작업 폴더와 공유된 PSD 파일로의 직접 액세스
  • CSS의 글꼴, 색상 및 그레이디언트를 간편하게 정의해 주는 상황에 맞는 코드 힌트
  • PSD 레이어로부터 이미지 태그를 생성하기 위한 드래그 앤 드롭 지원
  • 라이브 뷰로 직접 스타일 붙여넣기 (예: CSS Designer 및 요소 표시)

Extract 시작하기

Dreamweaver에서의 Extract로 Dreamweaver의 Extract 패널 안에서 바로 PSD 파일에 액세스할 수 있습니다. Extract 패널 및 작업 영역과 Extract 패널에 있는 PSD 파일 로딩에 대한 자세한 내용은 다음 항목을 참조하십시오.

Extract 패널 및 작업 영역

Extract 작업 영역은 Extract를 Dreamweaver와 함께 효과적으로 사용할 수 있도록 디자인되었습니다. 이 작업 영역의 왼쪽에 Extract 패널이 나타나고 분할 보기(라이브 뷰 및 코드 보기) 오른쪽에 웹 페이지가 나타납니다. 사용자 요구에 맞게 패널을 드래그, 고정, 축소 및 확장하여 작업 영역을 사용자 정의할 수 있습니다. 사용자 정의된 작업 영역을 나중에 저장할 수도 있습니다.

참고:

Extract 패널이 실수로 닫히는 경우 키보드 단축키 Ctrl+K(Win) 또는 Cmd+K(Mac)를 사용하거나 [Window] > [Extract]를 선택하여 패널을 다시 열 수 있습니다.

Dreamweaver가 최초 실행되면 워크플로를 시작하기 위해 Extract 패널이 대화형 튜토리얼을 표시합니다. 패널 상단에 있는 드롭다운 목록을 사용하여 다른 튜토리얼로 전환할 수 있습니다.

튜토리얼을 사용한 후 [시작] 버튼을 클릭하면 Dreamweaver에서 Extract를 사용할 수 있습니다. Extract 패널은 Creative Cloud 계정에 있는 폴더와 PSD 파일을 축소판 보기로 표시합니다. 이들 파일은 이전에 데스크탑에서 업로드 또는 동기화되었거나 Creative Cloud의 공동 작업 폴더를 통해 공유된 파일입니다.

Creative Cloud에 저장된 PSD 파일을 보여주는 Extract 패널
Creative Cloud에 저장된 PSD 파일을 보여주는 Extract 패널

참고:

튜토리얼을 다시 실행하려면 패널의 오른쪽 상단에 있는 팝업 메뉴를 클릭한 다음 튜토리얼 실행을 선택합니다.

PSD 파일을 Creative Cloud에 업로드

Extract 패널에 있는 PSD 업로드 아이콘을 클릭하여 PSD 파일을 Creative Cloud에 업로드할 수 있습니다. PSD 구성 요소가 다른 직원이나 팀에 의해 개발된 경우 Creative Cloud에서 공유할 수 있습니다. 이후 Creative Cloud에 로그인하거나 Dreamweaver의 Extract 패널을 통해 직접 파일을 다운로드하거나 계정에 업로드할 수 있습니다.

Extract 패널에서 PSD 파일 열기

Extract 패널에 필요한 PSD 파일의 축소판 이미지를 클릭합니다. 업데이트 버전의 PSD 파일을 연 후 Creative Cloud에서 사용할 수 있게 되면 Extract 패널에서 PSD 파일을 다시 로드합니다. 이렇게 하려면, PSD 파일의 이름을 클릭하거나 오른쪽 상단의 팝업 메뉴에서 [PSD 다시 로드]를 클릭합니다. 축소판 보기로 다시 이동하여 다른 파일을 선택하려면 패널 왼쪽 위에 있는 Creative Cloud 아이콘을 클릭합니다.

보기를 확대하여 디자인을 자세히 보려면 Extract 패널 상단에 있는 확대/축소 레벨을 변경하거나 Alt +/- 조합 키를 사용합니다. 레이어 탭 또는 레이어 구성 요소 드롭다운 목록을 사용하면 PSD 파일에 있는 요소를 보여 주거나 숨길 수 있습니다.

이제 PSD 구성 요소를 웹 사이트로 전환하기 위한 모든 설정이 완료되었습니다. 

Extract 기본 환경 설정

Extract 환경 설정을 사용하여 추출해야 하는 이미지의 기본 파일 유형을 지정할 수 있으며 Extract 패널에 표시되는 글꼴의 기본 단위도 지정할 수 있습니다.

  1. 편집 > 환경 설정(Win) 또는 Dreamweaver > 환경 설정(Mac)을 선택합니다.

  2. 범주 목록에서 Extract를 선택합니다.

  3. (선택사항) 추출해야 하는 이미지의 기본 형식을 변경합니다.

    Dreamweaver CC에서 추출한 이미지 포맷
    추출된 이미지 형식
  4. (선택사항) 디바이스용 Extract 섹션에서 필요한 해상도를 선택합니다. 이러한 설정은 다양한 해상도 버전으로 이미지를 저장하기 위해 선택할 때 사용됩니다.

    • 접미어를 사용하여 버전을 저장하려면 [접미어] 열 아래의 해당 행을 클릭하고 텍스트를 입력합니다. 
    • 별도의 출력 폴더에 여러 해상도 버전을 저장하려면 [폴더] 열 아래의 해당 행을 클릭하고 관련 경로를 지정합니다.
    디바이스용 Extract
    디바이스용 Extract
  5. (선택사항) Extract 사용과 관련하여 캐시된 데이터를 삭제하려면 [캐시 지우기]를 클릭합니다.

  6. 적용 버튼을 클릭한 다음 환경 설정 대화 상자를 닫습니다.

  7. Extract 패널에서 변경 내용을 보려면 PSD를 다시 로드합니다(팝업 메뉴 > PSD 다시 로드).

    Extract 패널의 [PSD 다시 로드] 옵션
    Extract 패널의 [PSD 다시 로드] 옵션

PSD 파일에서 CSS 추출하기

PSD 구성 요소의 모든 또는 특정 CSS 속성을 복사하여 라이브 뷰에서 CSS Designer나 요소 표시로, 또는 코드(CSS 소스 또는 HTML 문서)로 스타일을 직접 붙여넣을 수 있습니다.

또한 PSD 구성 요소에서 선택한 CSS 속성으로 코드 힌트가 자동으로 채워집니다. 코드 작성을 원하는 경우 이 코드 힌트를 사용하여 CSS 속성을 추출하여 코드에 입력할 수 있습니다.

  1. Extract 패널(창 > Extract)에서 필요한 PSD 파일을 클릭합니다. PSD 축소판 보기가 확장되어 사용자는 구성 요소를 분명하게 볼 수 있습니다.

  2. PSD 파일에서 필요한 요소 및 에셋을 클릭합니다. 요소의 CSS 속성이 나열된 팝업이 표시되며, 해당 속성을 선택하고 복사할 수 있는 옵션이 제공됩니다. 선택한 요소의 폭과 높이를 픽셀이나 퍼센트 단위로 볼 수 있습니다.

    참고: 여기서 퍼센트 단위를 선택하면 치수도 퍼센트 단위로 표시됩니다.

    Extract 패널의 CSS 복사 옵션
    Extract 패널의 CSS 복사 옵션

    CSS를 복사하려면 복사하고자 하는 속성을 선택한 다음 [CSS 복사]를 클릭합니다. 

  3. 다음 방법 중 하나를 사용하여 문서에 CSS를 붙여넣습니다.

    • CSS Designer에 CSS를 붙여넣으려면 마우스 오른쪽 버튼으로 선택기를 클릭한 다음 스타일 붙여넣기를 클릭합니다.
    • 요소 보기로 CSS를 붙여넣으려면 마우스 오른쪽 버튼으로 선택기를 클릭한 다음 스타일 붙여넣기를 클릭합니다.
    • CSS를 코드에 붙여넣으려면 삽입 포인터를 필요한 위치에 놓고 마우스 오른쪽 버튼으로 붙여넣기를 클릭합니다.

CSS 추출에 코드 힌트를 사용하려면 다음 단계를 수행합니다.

  1. 문서에 첨부된 CSS 소스를 열거나 HTML 문서의 코드 보기로 전환합니다.

  2. Extract 패널에서 필요한 PSD 파일을 클릭한 다음 구성 요소에 필요한 요소를 클릭합니다.

  3. 문서에서 코드의 삽입 포인터를 필요한 위치에 놓습니다. 

  4. CSS 속성 이름을 입력하면 PSD 구성 요소에서 선택한 요소의 CSS 속성을 포함하는 코드 힌트를 볼 수 있습니다. 코드 삽입에 필요한 CSS 속성을 클릭합니다.

    PSD 파일 요소의 CSS 속성을 가진 코드 힌트
    PSD 파일 요소의 CSS 속성을 가진 코드 힌트
  5. 여러 CSS 속성을 추출하려면 Extract 패널 팝업에서 필요한 속성을 선택합니다. 그런 다음 코드 힌트에서 [선택 항목 삽입]을 클릭합니다.

    Dreamweaver CC에서 CSS 속성 일괄 삽입
    CSS 속성 일괄 삽입

PSD 파일에서 텍스트 복사하기

PSD 구성 요소의 텍스트나 내용을 한 번의 클릭으로 웹 페이지에 삽입할 수 있습니다. Extract 패널의 PSD 구성 요소에서 텍스트를 복사하려면 텍스트 요소를 선택한 다음 [텍스트 복사]를 클릭합니다. 텍스트가 클립보드에 복사됩니다. 그리고 나서 필요한 위치에 텍스트를 붙여넣을 수 있습니다.

Extract 패널의 텍스트 복사하기 옵션
Extract 패널의 텍스트 복사하기 옵션

참고:

텍스트를 추출하고 나면 텍스트와 연계된 글꼴이나 색상과 같은 속성을 추출할 수 있습니다. 자세한 내용은 PSD 파일에서 글꼴, 색상 및 그레이디언트 추출을 참조하십시오.

PSD 파일에서 이미지 추출

PSD 구성 요소의 모든 레이어를 Extract 패널에서 웹 페이지의 라이브 뷰의 정확한 위치로 간단히 드래그할 수 있습니다. 라이브 가이드나 DOM 아이콘과 같은 라이브 뷰의 시각 도구를 사용하여 요소를 간편하게 드래그하여 놓을 수 있습니다. 요소를 드롭하기 전에 잠시 멈추면 DOM 아이콘(</>)이 나타납니다. 마우스를 </> 아이콘 위로 가져다 대면 DOM 구조가 표시되며, 구조 안에 요소를 드롭할 수 있습니다. 코드 작성을 원하는 경우 상황에 맞는 코드 힌트를 사용하여 이미지를 추출할 수 있습니다. 코드 힌트를 통해 색상 및 그레이디언트를 이미지로 추출할 수 있습니다.

참고:

PSD 파일에 아트보드가 여러 개 포함되어 있으면 아트보드마다 레이어 창에 있는 폴더로 표시됩니다. 폴더를 확장하거나 축소하여 해당 내용을 표시하거나 숨길 수 있습니다. 특정 아트보드를 확대하려면 아트보드 이름을 클릭합니다. 축소하려면 아트보드 외부의 아무 곳이나 클릭하고 [맞추기]를 클릭합니다.

추출한 이미지를 삽입하기 전 Dreamweaver에 편집할 수 있는 이미지 이름이 표시됩니다. 기본적으로 이미지는 사이트 루트 폴더에 저장됩니다. 사용자 지정 위치에 이미지를 저장하고자 하는 경우 파일 이름과 함께 전체 디렉터리 경로를 포함할 수 있습니다.

참고. 이미지를 추출하여 지정된 사이트가 아닌 문서에 삽입하는 경우 이미지를 추출하여 문서가 있는 디렉터리에서 삽입합니다. 저장하지 않은 문서는 먼저 저장해야 합니다.

이미지를 로컬 디스크에 저장해 두었다가 나중에 필요한 경우 웹 페이지로 호출할 수도 있습니다. 또한 반응형 웹 사이트를 디자인하는 경우, 한 번의 클릭으로 여러 디바이스에 대한 다양한 버전의 해상도로 이미지를 저장할 수 있습니다.

  1. Extract 패널에서 PSD 파일을 클릭한 다음 원하는 이미지를 다운로드할 수 있습니다.

  2. PSD 파일에 필요한 이미지를 클릭합니다.

    참고:

    Extract 패널의 레이어 탭과 레이어 구성 요소 드롭다운 목록을 사용하여 PSD 구성 요소에 있는 이미지를 표시하거나 숨길 수 있습니다. 이미지가 여러 개의 레이어로 구성된 경우 추출할 이미지의 개별 레이어를 선택할 수 있습니다.

    코드 힌트가 작업 영역의 오른쪽 코드 보기에 팝업 창으로 뜹니다. 

  3. 여러 개의 이미지를 가져오려면 Shift 또는 Command 키를 누른 상태에서 필요한 이미지를 클릭합니다. 선택한 이미지가 하나의 이미지로 추출됩니다.

  4. 다음 작업 중 하나를 수행합니다.

    • 이미지를 클릭하면 나타나는 팝업에서 를 클릭합니다. 경로, 파일 이름, 파일 유형 및 배율 인수(필요한 경우)를 지정합니다. 그런 다음 아래 작업 중 하나를 수행합니다.
      • 1x 해상도로 이미지를 저장하려면 [저장]을 클릭합니다. 이미지 배율을 조정하려면 [크기 조절]을 선택하고 배율 인수를 지정합니다.
      • 다양한 해상도 버전의 이미지를 저장하려면 [다중 저장]을 클릭합니다. 추출하는 동안 Dreamweaver에서 여러 해상도로 이미지를 저장할 수 있으므로 PSD 파일에는 이러한 버전을 반드시 포함시킬 필요는 없습니다.

    환경 설정에서 필요한 해상도 버전 및 해당 출력 폴더를 지정할 수 있습니다.

    에셋 추출 아이콘을 사용하여 이미지 추출
    에셋 추출 아이콘을 사용하여 이미지 추출
    • 이미지를 문서의 라이브 뷰로 드래그합니다. 이미지 배치를 돕기 위해 라이브 가이드가 라이브 뷰에 나타납니다.

    이미지를 드롭하면 Dreamweaver에 이미지 이름이 표시됩니다. 이미지 이름 뿐만 아니라 확장명을 편집할 수 있으며 입력을 누르면 이미지를 저장할 수 있습니다. 이미지는 기본적으로 사이트 루트 폴더에 저장됩니다. 사용자 지정 위치에 이미지를 저장하려면 파일 이름과 함께 경로를 입력합니다.

    Extract 패널에서 이미지를 드래그하는 경우의 파일 이름 및 확장명 편집 옵션
    Extract 패널에서 이미지를 드래그하는 경우의 파일 이름 및 확장명 편집 옵션
    • 이미지를 클릭하면 Dreamweaver에 있는 상황에 맞는 코드 힌트가 채워집니다. HTML 문서 또는 CSS 문서코드의 코드 보기에서 커서를 삽입 포인터에 놓습니다. 배경 이미지 속성 이름 또는 <img> 태그를 입력하면 코드 힌트에서 선택한 이미지 이름이 나타납니다. 이미지를 선택한 다음 필요한 경우 이미지 이름 및 확장명을 수정하고 Enter 키를 누릅니다.

    기본적으로 이미지는 사이트 루트 폴더에 저장됩니다. 사용자 지정 위치에 이미지를 저장하려면 파일 이름과 함께 사용자 지정 파일 경로를 입력합니다.

    코드 힌트를 사용하여 이미지 추출하기
    코드 힌트를 사용하여 이미지 추출하기

PSD 파일에서 치수 추출하기

Extract 패널을 사용하여 PSD 구성 요소에 있는 두 개 요소 사이의 측정 값을 간편하게 확인하고 추출할 수 있습니다. 

  1. Extract 패널에 있는 PSD 파일에서 Shift 키 또는 Command 키를 눌러 필요한 요소를 클릭합니다.

    Extract 패널에 2개의 요소 간 가로 및 세로 거리가 표시됩니다.

    Extract 패널의 측정치
    Extract 패널의 측정치

    참고:

    치수를 퍼센트 단위로 보려면 아무 요소나 클릭한 다음 [퍼센트]를 클릭합니다.

  2. 필요한 값을 클릭하여 클립보드에 복사합니다.

  3. 필요한 위치(예를 들어 CSS Designer의 CSS 속성 또는 사용자 코드)에 해당 값을 붙여넣습니다.

PSD 파일에서 글꼴, 색상 및 그레이디언트 추출하기

Extract 패널을 사용하여 PSD 구성 요소에서 사용되는 글꼴, 색상 또는 그레이디언트의 CSS 속성을 추출할 수 있습니다.

  1. Extract 패널에서 스타일을 클릭합니다.

  2. 글꼴을 추출하려면 글꼴 섹션에서 다음 작업을 수행합니다.

    1. 필요한 글꼴 유형을 확장합니다.

      글꼴에 대해 자세히 알아보려면 Adobe Fonts 아이콘()을 클릭하십시오.

    2. 복사하고자 하는 형식 및 크기를 클릭하고, 팝업 창에서 [CSS 복사]를 클릭합니다. 클릭한 글꼴, 형식 및 크기를 사용하는 텍스트 요소에 Extract 태그를 사용합니다.

      참고:

      Extract 환경 설정에서 글꼴 단위를 'em' 또는 'rem'으로 변경할 수 있습니다(환경 설정 > Extract). Extract 패널 오른쪽 상단에 있는 팝업 메뉴에서 [PSD 다시 로드]를 클릭하면 변경 내용을 확인할 수 있습니다.

      글꼴 추출
      글꼴 추출
    3. 필요한 위치(예를 들어 코드 또는 CSS Designer)에 CSS를 붙여넣습니다.

    색상을 추출하려면 색상 섹션에서 다음 작업을 수행합니다.

    1. 필요한 색상 견본을 클릭합니다. 선택한 색상을 사용하는 요소에 Extract 태그를 사용합니다.

      참고. 색상 피커를 사용하여 PSD 구성 요소에서 다른 색상을 선택할 수 있습니다.

    2. 색상 견본을 클릭하면 나타나는 팝업에서 필요한 색상 모델(RGB, Hex 또는 HSL)을 선택한 다음 색상 값을 복사(Ctrl+C 또는 Cmd+C)합니다.

      색상 추출
      색상 추출
    3. 필요한 위치(예를 들어 코드 또는 CSS Designer)에 색상 값을 붙여넣습니다.

  3. 그레이디언트를 추출하려면 그레이디언트 섹션에서 그레이디언트 견본을 클릭합니다. 팝업이 나타나면 [CSS 복사]를 클릭합니다. 필요한 위치(예: 코드 또는 CSS Designer)에 CSS를 붙여넣습니다.

    환경 설정(환경 설정 > CSS 스타일)에서 선택한 공급업체 프리픽스도 그레이디언트와 함께 붙여넣어집니다. 방사형 그레이디언트는 지원되지 않으므로 이를 추출하는 경우 해당 CSS는 공급업체 프리픽스 없이 삽입됩니다.

    그레이디언트 추출
    그레이디언트 추출

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

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