Dreamweaver CC 2014 릴리스의 최신 업데이트에는 PSD 구성 요소에서 직접 Dreamweaver로 모바일 및 데스크탑 사이트를 빌드하는 데 유용한 Extract와의 통합이 포함됩니다. 새로운 라이브 가이드로 HTML 요소를 정확히 배치하고 재배열하는 작업이 간편해지며, 향상된 라이브 뷰 편집 기능을 통해 실시간 변경이 가능합니다.

이 문서에서는 이러한 새로운 기능과 몇 가지 기타 향상된 기능을 소개하고 자세한 도움말 및 학습 자료에 대한 링크를 제공합니다.

Adobe Dreamweaver CC 2014.1.1 (2015년 2월)

새로운 시작 화면

Dreamweaver를 처음 사용하십니까? Dreamweaver를 사용하는 중이며 보다 숙련된 기술을 찾고 계십니까? 현재 버전이 이전 버전과 비교하여 달라진 점이 무엇인지 알아보고 싶으십니까? 초보자나 숙련자 또는 Dreamweaver의 신규 버전에 대한 평가 여부와 상관없이 이제 시작 화면에서 바로 필수적인 학습 리소스를 모두 구할 수 있습니다.

Dreamweaver의 최신 업데이트인 Dreamweaver CC 2014 릴리스는 시작 화면에서 비디오(새로운 기능 포함), 실습 자습서, 팁과 기술 등에 대한 빠른 액세스를 제공합니다.

시작 화면
시작 화면

참고:

새로운 시작 화면은 영어를 사용하는 지역의 사용자에게만 제공됩니다. 다른 지역의 사용자에게는 Dreamweaver CC 2014.1에서 시작 화면과 새로운 기능 살펴보기가 표시됩니다.

Extract 패널의 향상된 기능

이제 Extract 패널에서 이미지를 드래그하면 라이브 뷰에 라이브 가이드와 요소 간략히 보기 아이콘이 표시됩니다. 이러한 시각 도구는 이미지를 필요한 위치에 빠르고 정확하게 배치하는 데 유용합니다.

Extract 패널
Extract 패널

라이브 뷰 편집 개선 사항

요소 드래그 앤 드롭

이제 해당 태그 이름을 드래그하여 라이브 뷰의 요소를 옮길 수 있습니다. 태그 이름을 마우스로 가리키면 요소를 드래그할 수 있음을 나타내는 손 모양의 커서가 표시됩니다. 드롭 후 요소가 놓일 위치를 시각적으로 나타내는 라이브 가이드를 사용하여 드래그한 요소를 드롭할 수 있습니다.

마퀴 선택

이제 태그 내에서 어디든지 클릭하고 드래그하여 태그의 텍스트, 이미지 또는 기타 요소를 선택할 수 있습니다(마퀴 선택). 마퀴 선택을 사용하면 태그 내에서 여러 요소를 간편하게 선택할 수 있습니다.

참고:

라이브 뷰의 마퀴 선택은 브라우저에서 지원하는 작업에 대해서만 지원됩니다.

요소 표시 향상된 기능

이제 요소 표시가 힌트 텍스트 'Class/ID'를 표시하여 지정할 수 있는 클래스나 ID를 명확히 나타냅니다.

또한 요소 표시에서 변경된 사항은 “+”를 클릭하면 저장됩니다. 이전 버전의 Dreamweaver에서와 마찬가지로 Enter나 Return 키를 눌러 변경 사항을 저장할 수도 있습니다. 

새로운 코드 보기 테마

코드 보기에 다음 10가지 새로운 색상 테마가 추가되었습니다.

  • RecognEyes
  • Havenjark
  • Solarized Dark
  • Solarized Light
  • Wombat
  • Monaki
  • Schuss
  • Tango
  • Cool Light
  • Roboticket

코드 보기 테마에 대한 자세한 내용은 코드 보기에 대한 색상 테마 설정을 참조하십시오.

CSS Designer 개선 사항

이번 업데이트에는 CSS Designer 사용자 인터페이스에 대한 몇 가지 변경 사항과 설정 보기 확인란의 기본 설정에 대한 변경 사항이 포함됩니다.

시작 시 설정 보기 확인란이 기본적으로 선택되어 있으며, 이 옵션을 변경하면 Dreamweaver 세션 전체에 변경 사항이 영구적으로 적용됩니다. 예를 들어 이 옵션을 선택 해제하면 다음 Dreamweaver 세션에 이 설정이 유지되어 옵션이 선택 해제된 것으로 표시됩니다.

다음은 사용자 인터페이스에 대한 변경 내용입니다.

  • 속성을 추가하는 동안 CSS Designer 패널 스크롤: 속성 섹션에서 "+"를 클릭하면 패널이 스크롤되어 속성 추가 행이 속성 패널의 중앙에 놓이게 됩니다. 속성 섹션이 너무 작으면 패널은 속성 추가 행이 섹션의 맨 아래에 표시되도록 스크롤됩니다.
  • 배경 강조 표시: 새 속성 추가 텍스트 상자가 강조되는 경우, 행은 회색 배경으로 강조 표시됩니다. 
  • “+” 및 “-” 버튼의 위치: CSS Designer 패널(소스, 선택기, 미디어 쿼리 및 속성)의 각 섹션에 표시되는 "+" 및 "-" 버튼은 이제 더 잘 보일 수 있도록 오른쪽 맨 끝에서 왼쪽으로 옮겨졌습니다.
  • '사용자 정의' 범주는 이제 '자세히'로 불립니다.

라이브 뷰의 원격 디버그

이제 Google Chrome DevTools를 사용하여 라이브 뷰에 열려 있는 Dreamweaver 문서를 원격으로 디버그할 수 있습니다. Google Chrome에서 다음 단계를 수행하여 활성화할 수 있는 포트 5471을 사용할 수 있습니다.

  1. 다음 명령을 실행하여 Dreamweaver를 시작합니다.

    • Windows: <installation_path> -enableRemoteDebugging
    • Mac: 열기 <installation_path> --args -enableRemoteDebugging

    참고: 'args' 앞에 두 개의 하이픈을 입력합니다.

  2. 포트 5471이 디버그에 대해 활성화됨을 나타내는 대화 상자에서 [확인]을 클릭합니다.

    Dreamweaver가 시작됩니다.

    Dreamweaver를 실행하려면 대화 상자에서 [확인]을 클릭합니다.
    Dreamweaver를 실행하려면 대화 상자에서 [확인]을 클릭합니다.

  3. 라이브 뷰에서 디버그하려는 문서를 엽니다.

  4. 디버그를 시작하려면 Google Chrome을 열고 localhost:5471을 검색합니다. Dreamweaver에서 열려 있는 모든 문서에 대한 링크 목록이 표시됩니다. 

    참고: 시작 화면과 Extract 패널이 CEF(Chromium Embedded Framework)를 사용하기 때문에, 이러한 기능과 관련된 항목도 모두 표시됩니다.

    이제 Google Chrome DevTools를 사용하여 필요한 문서를 디버그할 수 있습니다.

  5. 다버그를 중지하고 표준 모드에서 Dreamweaver를 열려면 Dreamweaver를 종료하고 다시 시작합니다.

기타 향상된 기능

환경 설정 재설정 워크플로우의 변경 사항

이제 키보드 단축키를 사용하여 환경 설정을 재설정하면 Dreamweaver는 'Adobe Dreamweaver CC 2014.1 Backups' 폴더에 환경 설정에 대한 백업을 생성합니다. 이 폴더는 Windows 및 Mac의 원래 Dreamweaver 환경 설정 폴더와 동일한 폴더에 자동으로 생성됩니다.

환경 설정 재설정 대화 상자에 백업 폴더의 전체 경로가 표시됩니다.

환경 설정 및 설정 재설정
환경 설정 및 설정 재설정

동적 문서의 보기 모드에 대한 변경 사항

PHP, CFM 및 ASP와 같은 동적 문서는 더 이상 코드 보기에서 기본적으로 열리지 않습니다. 이들 문서는 마지막으로 닫힌 문서나 강조된 문서와 동일한 모드(코드/라이브/분할)로 열립니다.

Adobe Dreamweaver CC 2014.1 (2014년 10월)

Dreamweaver의 Extract

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

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

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

Dreamweaver의 기본 작업 영역(Extract로 명명) 왼쪽에 Extract 패널이 표시되어 빠른 실행이 가능합니다. Dreamweaver를 처음 실행하면 Extract 워크플로우에 대해 학습하는 데 유용한 간략 자습서가 Extract 패널에 표시됩니다. [시작]을 클릭하여 Extract를 실행할 수 있습니다.

Extract 패널 기본 작업 영역
Extract 패널

Dreamweaver의 Extract 워크플로우에 대한 자세한 내용은 Extract와 Dreamweaver 통합을 참조하십시오.

64비트 아키텍처

Dreamweaver의 64비트 버전은 바로 사용할 수 있으며 32비트 버전과 동일한 모든 기능을 지원합니다. 이번 추가로 다음의 Dreamweaver 빌드를 Adobe Creative Cloud 응용 프로그램에서 바로 다운로드할 수 있습니다.

OS 기본 설치 위치 응용 프로그램 환경 설정 폴더
Windows 32비트 C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
Windows 64비트 C:\Program Files\Adobe\Adobe Dreamweaver CC 2014.1 %appdata%/Adobe/Adobe Dreamweaver CC 2014.1
Mac 64비트 /Applications/Adobe Dreamweaver CC 2014.1 ~/Library/Application Support/Adobe/Adobe Dreamweaver CC 2014.1

FAQ

  • Windows 32비트 버전에서 64비트 응용 프로그램을 실행할 수 있습니까? - 아니요
  • 32비트와 64비트 모두를 동일한 Windows 컴퓨터에 설치할 수 있습니까? - 아니요
  • 시스템에서 Dreamweaver의 32비트 또는 64비트 버전이 실행되는지 어떻게 확인할 수 있습니까?
    • Windows: Dreamweaver 시작. 작업 관리자를 열고 Dreamweaver 프로세스를 검색합니다. 실행된 Dreamweaver 빌드가 64비트인 경우 프로세스 이름은 “Dreamweaver.exe”가 됩니다. 실행된 빌드가 32비트인 경우 프로세스 이름은 “Dreamweaver.exe *32”가 됩니다.
    • Mac: 활성 모니터를 열고 보기 > 열 > 종류로 이동하여 확인합니다. 활성 모니터에서 Dreamweaver를 검색하고 종류 열을 확인합니다. Dreamweaver가 64비트인 경우 종류 열은 "64비트"를 표시합니다.

Dreamweaver 64비트 버전 설치

  1. 컴퓨터가 64비트 OS를 실행하고 있는지 확인합니다.

    컴퓨터가 64비트인지 확인하려면 다음 문서의 단계를 따르십시오.

  2. Creative Cloud에서 Dreamweaver 64비트 버전을 다운로드하여 설치하십시오.

라이브 뷰의 향상된 기능

라이브 가이드

라이브 가이드는 다음의 시나리오에 요소를 삽입할 수 있는 잠재적 위치를 표시하는 라이브 뷰의 시각적 피드백 도구입니다.

  • 삽입 패널에서 드래그하기
  • Assets 패널에서 드래그하기
  • 라이브 뷰 내에서 요소를 드래그(이동)

참고:

라이브 가이드는 유동 격자 문서에서 지원되지 않습니다.

요소를 드롭하기 전에 페이지의 다른 요소에 마우스를 이동할 때 라이브 가이드는 나타납니다. 가이드는 마우스로 가리킨 요소의 위, 아래, 왼쪽 또는 오른쪽에 나타납니다.

  • 위와 아래 - 모든 유형의 요소/태그(인라인 태그 제외)로 이동 중에 나타납니다. 요소의 처음(상단) 50%를 마우스로 가리키는 경우 가이드는 가리킨 요소 위에 나타납니다. 요소의 마지막(하단) 50%를 마우스로 가리키는 경우 가이드는 가리킨 요소 아래에 나타납니다.
마우스로 가리킨 요소 위와 아래에 있는 라이브 가이드
마우스로 가리킨 요소 위와 아래에 있는 라이브 가이드

  • 왼쪽과 오른쪽 - 인라인 태그(예: <a>, <span>) 또는 '유동 속성' 세트가 있는 태그 위로 이동 중에 나타납니다.
마우스로 가리킨 요소의 오른쪽과 왼쪽에 있는 라이브 가이드
마우스로 가리킨 요소의 오른쪽과 왼쪽에 있는 라이브 가이드

구조 요소를 정확히 삽입하기

[요소 간략히 보기]를 라이브 가이드와 같이 사용하면 HTML 요소를 보다 정확하게 문서 구조에 삽입할 수 있습니다.

요소를 드롭하기 전에 잠시 멈추고 있으면 [요소 간략히 보기] 아이콘(</>)이 나타납니다. 마우스를 이 아이콘 위로 가져다 대면 [요소 간략히 보기]가 열리고 [요소 간략히 보기] 내부의 요소를 드롭할 수 있습니다.

[요소 간략히 보기] 아이콘
정확한 삽입에 도움이 되는 [요소 간략히 보기] 아이콘

라이브 뷰의 컨텍스트 메뉴

마우스 오른쪽 버튼의 컨텍스트 메뉴를 클릭하여 바로 라이브 뷰의 요소를 잘라내기, 복사하기, 붙여넣기 및 삭제할 수 있습니다. 또한 라이브 뷰의 컨텍스트 메뉴를 사용하여 요소를 복제하거나 부모 또는 자식 태그를 선택할 수 있습니다.

참고:

라이브 뷰에서 키보드 단축키(예: Windows의 경우 Ctrl+X Ctrl+C, Ctrl+V, Ctrl+D 및 Delete 키)를 사용할 수도 있습니다.

우선 라이브 뷰에서 요소를 선택하면 [요소 표시]를 확인할 수 있습니다. 그런 다음 태그 영역 안을 마우스 오른쪽 버튼으로 클릭하여 위의 컨텍스트 메뉴 옵션을 확인할 수 있습니다. 옵션은 태그 수준에서 실행됩니다. 

요소 표시의 변경 사항

이제 요소 표시를 사용하여 요소에 선택기를 적용할 수 있을 뿐만 아니라 원하는 CSS 소스에서 선택기를 생성하고 미디어 쿼리를 할당할 수 있습니다. 스타일 시트에 없는 선택기를 입력하고 Enter 키를 누르면 요소 표시가 CSS 소스 및 미디어 쿼리를 선택할 수 있는 옵션을 표시합니다.

요소 표시의 CSS 소스 및 미디어 쿼리 옵션
요소 표시의 CSS 소스 및 미디어 쿼리 옵션

CSS 소스나 미디어 쿼리를 선택하지 않으려면 Esc를 눌러 옵션을 해제합니다.

또한 이제 적용된 선택기를 마우스 오른쪽 버튼으로 클릭하여 해당 코드로 이동하거나(코드로 이동 옵션) 복사한 스타일을 붙여 넣을 수 있습니다(스타일 붙여넣기 옵션).

요소 표시의 코드로 이동 및 스타일 붙여넣기 옵션
요소 표시의 코드로 이동 및 스타일 붙여넣기 옵션

참고:

동일한 선택기가 여러 개의 미디어 쿼리에 추가되는 경우 코드로 이동(Go To Code) 옵션은 하위 옵션을 표시합니다. 복사된 선택기가 유사 또는 복합 선택기인 경우 스타일 붙여넣기(Paste Styles) 옵션은 하위 옵션을 표시합니다.

요소를 라이브 뷰로 이동

Dreamweaver는 요소(태그 수준)가 라이브 뷰로 이동하는 것을 지원합니다. 라이브 뷰에서 요소를 선택하고 다른 모든 위치로 요소를 드래그 앤 드롭할 수 있습니다.

  1. 이동할 요소를 클릭하고 요소 표시(요소 주위 파란색 상자)가 나타나면 요소를 드래그합니다. 드래그가 초기화되면 마우스 커서가 바뀌면서 요소가 이동할 준비가 되어 있다고 알려 줍니다.

  2. 참조 요소(드래그된 요소 배치와 관련하여 언급된 요소)는 파란색 테두리로 강조 표시됩니다. 라이브 가이드(녹색 표시)가 나타나면 참조 요소와 관련된 잠재적 드롭 위치가 표시됩니다.

참고:

고정 요소만이 라이브 뷰에서 이동할 수 있습니다. PHP와 같은 동적 내용은 이동할 수 없습니다.

요소를 드롭하기 전에 잠시 멈추고 있으면 [요소 간략히 보기] 아이콘(</>)이 나타납니다. 마우스를 이 아이콘 위로 가져다 대면 [요소 간략히 보기]가 열리고 [요소 간략히 보기] 내부의 요소를 드롭할 수 있습니다. 

라이브 뷰에서 키보드 검색

Dreamweaver에서 avid 키보드 사용자의 편의와 웹 디자인 프로세스 속도 향상을 위해 키보드를 사용하면 페이지 요소 검색이 바로 지원됩니다. 다음을 사용할 수 있습니다.

  • 위쪽 및 아래쪽 화살표 키를 사용하여 페이지 요소를 검색하십시오. 라이브 뷰의 키보드 검색으로 중첩되고 래핑된 요소에 쉽게 액세스할 수 있습니다.
  • 탭 키를 누르면 [요소 표시]에 있는 선택기를 트래버스할 수 있습니다.

자세한 내용은 라이브 뷰의 키보드 검색을 참조하십시오.

라이브 뷰의 퀵 태그 편집기

이제 라이브 뷰에서 Ctrl+T(Windows) 또는 Cmd+T(Mac)를 누르면 선택한 요소에 대한 퀵 태그 편집기가 열립니다. 퀵 태그 편집기는 [태그 편집], [태그 감싸기], [HTML 삽입] 세 가지 상태가 있습니다. Ctrl/Cmd + T를 사용하여 이들 상태를 전환할 수 있습니다.

라이브 뷰의 퀵 태그 편집기
라이브 뷰의 퀵 태그 편집기

Dreamweaver 작업 영역 변경 사항

문서 툴바 변경 사항

문서 툴바가 수정되어 사용이 간편해 졌습니다.

  • 디자인 및 라이브 뷰 옵션이 단일 제어 방식(드롭다운)으로 병합되었습니다.
Dreamweaver CC의 디자인 및 라이브 뷰 옵션(2014년 10월)
최신 업데이트의 디자인 및 라이브 뷰 옵션 - Dreamweaver CC (2014년 10월)

이전 버전의 문서 툴바에서의 디자인 및 라이브 뷰 버튼
이전 버전의 문서 툴바에서의 디자인 및 라이브 뷰 버튼

  • 이제 문서 제목 필드가 속성 관리자로 이동합니다.
Dreamweaver CC(2014년 10월)의 문서 툴바
최신 업데이트의 문서 툴바 - Dreamweaver CC(2014년 10월)

문서 제목 필드가 Dreamweaver CC의 속성 관리자로 이동(2014년 10월)
최신 업데이트에서 문서 제목 필드가 속성 관리자로 이동 - Dreamweaver CC (2014년 10월)

이전 버전의 문서 툴바에서의 제목 필드
이전 버전의 문서 툴바에서의 제목 필드

  • [검사] 및 [라이브 코드] 버튼이 아이콘으로 대체되었습니다.
Dreamweaver CC의 [라이브 코드] 및 [검사] 아이콘(2014년 10월)
최신 업데이트의 라이브 코드 및 검사 아이콘 - Dreamweaver CC (2014년 10월)

이전 버전의 라이브 코드 및 검사 버튼
이전 버전의 [라이브 코드] 및 [검사] 버튼

  • [뒤로], [앞으로] 및 [새로 고침] 옵션이 주소 표시줄과 함께 그룹화되어 문서 툴바의 중앙에 배치됩니다.
Dreamweaver CC의 주소 표시줄 [뒤로], [앞으로] 및 [새로 고침] 옵션(2014년 10월)
최신 업데이트의 주소 표시 줄 [뒤로], [앞으로] 및 [새로 고침] 옵션 - Dreamweaver CC (2014년 10월)

이전 버전의 주소 표시줄 [뒤로], [앞으로] 및 [새로 고침] 옵션
이전 버전의 주소 표시줄 [뒤로], [앞으로] 및 [새로 고침] 옵션

  • 브라우저에서 미리 보기/디버그, 라이브 뷰 옵션 및 파일 관리 아이콘이 함께 그룹화되어 문서 툴바의 오른쪽에 정렬됩니다.
Dreamweaver CC에 있는 브라우저의 미리 보기/디버그, 라이브 뷰 옵션 및 파일 관리 아이콘(2014년 10월)
최신 업데이트의 브라우저에서 미리 보기/디버그, 라이브 뷰 옵션 및 파일 관리 아이콘 - Dreamweaver CC(2014년 10월)

이전 버전의 브라우저에서 미리 보기/디버그, 라이브 뷰 옵션 및 파일 관리 아이콘
이전 버전의 브라우저에서 미리 보기/디버그, 라이브 뷰 옵션 및 파일 관리 아이콘

기본 작업 영역의 변경 사항

Dreamweaver에서 사용할 수 있는 독창적인 작업 영역이 다음과 같이 변경되었습니다.

  • 코드
  • 디자인
  • Extract
작업 영역
작업 영역

이제 기본 작업 영역은 Extract입니다. 이 작업 영역의 왼쪽에는 Extract 패널이, 오른쪽에는 웹 페이지가 표시됩니다. Dreamweaver를 처음 실행하면 Extract 워크플로우에 대해 학습하는 데 유용한 간략 자습서가 Extract 패널에 나타납니다. Extract를 실행하려면 [시작] 버튼을 클릭합니다.

Extract 작업 영역
Extract 작업 영역

HTML 문서에 대한 기본 보기는 이제 라이브 및 코드 보기가 가로로 분리된 분할 보기입니다. 아래에 열거된 것과 같은 동적 파일이 기본적으로 전체 코드 보기로 열립니다. 보기를 분할하면 이들 문서는 디자인 및 코드 보기에서 표시됩니다.

  • PHP
  • PHP 템플릿 (Example.dwt.php)
  • ASP
  • ASP 템플릿 (Example.dwt.asp)
  • JSP
  • JSP 템플릿 (Example.dwt.jsp)
  • CFM
  • CFM 템플릿(Example.dwt.cfm)
라이브 및 코드 보기를 표시하는 HTML 문서에 대한 기본 보기
라이브 및 코드 보기를 표시하는 HTML 문서에 대한 기본 보기

전체 코드 보기를 표시하는 동적 문서에 대한 기본 보기
전체 코드 보기를 표시하는 동적 문서에 대한 기본 보기

: 디자인 뷰로 전환하려면 [라이브] 근처에 있는 드롭다운 목록을 클릭하고 [디자인]을 클릭합니다. 가로 분할을 세로 분할로 변경하려면 보기 > 세로 분할을 선택합니다. 이제 라이브/디자인 뷰가 왼쪽에 나타납니다. 라이브/디자인 뷰를 오른쪽에 위치시키려면 보기 > 라이브 뷰 왼쪽 또는 디자인 뷰 왼쪽을 선택 해제합니다.

이제 Dreamweaver는 HTML 문서에 대해 선택한 라이브 뷰 상태를 기억하여 나중에 여는 모든 HTML 문서에 대해 동일한 보기 옵션을 적용합니다. 예를 들어 HTML1을 처음으로 여는 문서라고 가정해 봅니다. 문서 보기는 코드 보기 및 라이브 뷰로 분리되어 있습니다. 이 문서의 보기를 전체 라이브 뷰로 변경한다고 가정해 봅니다. 이후, 다음에 여는 문서 HTML2는 전체 라이브 뷰로 표시됩니다.

유동 격자 문서 변경 사항

라이브 뷰 편집 지원

라이브 뷰의 새 편집 기능이 이전 버전의 Dreamweaver CC에 사용됩니다. 또한 이 릴리스의 라이브 뷰 편집 기능을 유동 격자 문서에 사용할 수 있습니다. 라이브 뷰에서 편집하기를 통해 동일한 뷰에서 변경 사항을 바로 편집하고 미리 볼 수 있으므로 유동 웹 페이지 개발을 빠르게 진행할 수 있습니다.

다음의 기능으로 라이브 뷰에서 유동 격자 문서를 편집할 수 있습니다.

이제 요소 간략히 보기를 사용하여 유동 격자 문서의 HTML DOM 구조를 시각화할 수도 있습니다. 

참고: 유동 격자 레이아웃의 요소 간략히 보기를 통해 HTML 요소를 복사, 붙여넣기, 복제 또는 재배열할 수는 없습니다.

라이브 뷰에서 편집 기능을 사용할 수 있도록 유동 격자 문서 보기 및 편집을 위한 사용자 인터페이스가 변경되었습니다. 이제 유동 격자 문서에서 요소를 선택하면 요소 숨기기 및 새로운 행 시작 등과 같은 다른 관리 기능과 함께 요소 표시가 나타납니다.

이전 버전의 유동 격자 옵션
이전 버전의 유동 격자 옵션

Dreamweaver CC(2014년 10월)의 요소 표시가 있는 유동 격자 옵션
최신 업데이트의 요소 표시와 함께 표시되는 유동 격자 옵션 - Dreamweaver CC (2014년 10월)


또한 유동 격자 문서가 라이브 뷰에서 바로 직접 열립니다. 유동 격자 문서는 더 이상 디자인 뷰에서 보거나 편집할 수 없습니다.

Dreamweaver CC(2014년 10월)의 문서 툴바
최신 업데이트의 문서 툴바 - Dreamweaver CC(2014년 10월)

이전 버전의 유동 격자 문서에서의 문서 툴바
이전 버전의 유동 격자 문서에서의 문서 툴바

유동 격자 문서에 대한 자세한 내용은 유동 격자 레이아웃을 이용한 반응형 디자인을 참조하십시오.

워크플로우 삽입 변경 사항

이제 유동 격자 문서에 대한 삽입 대화 상자에 “위치 지원”이 포함됩니다. 위치 지원을 통해 삽입된 요소를 전후 배치하거나 라이브 뷰의 핵심 요소 안에 해당 요소를 중첩시킬 수 있습니다. 유동 격자 요소 삽입하기에 대한 자세한 내용은 유동 격자 요소 삽입을 참조하십시오.

숨겨진 요소 관리 옵션 변경 사항

숨겨진 요소 관리 옵션(문서 툴바의 눈 버튼)이 유동 격자 문서의 컨텍스트 메뉴로 이동됩니다.


숨겨진 요소를 관리하려면 유동 격자 페이지를 마우스 오른쪽 버튼으로 클릭한 다음 “숨겨진 요소 관리”를 선택하여 숨겨진 요소를 확인합니다. 이 요소를 숨기려면 HUD에 있는 눈 아이콘을 클릭합니다. 

Dreamweaver CC(2014년 10월)의 마우스 오른쪽 버튼 클릭 메뉴에 있는 숨겨진 요소 관리 옵션
최신 업데이트의 마우스 오른쪽 버튼 클릭으로 숨겨진 요소 관리하기 옵션 - Dreamweaver CC (2014년 10월)

이전 버전의 숨겨진 요소 관리용 “눈” 아이콘
이전 버전의 숨겨진 요소 관리용 “눈” 아이콘

코드 보기에 사용되는 독창적 색상 테마

코드 보기에서 바로 선택할 수 있는 색상 테마는 다음과 같습니다.

  • 클래식(기본 값: Dreamweaver의 이전 버전과 동일)
  • 레이븐
  • 슬레이트
  • 블랑쉬
  • 제네바
클래식, 레이븐, 슬레이트, 블랑쉬 및 제네바 테마
클래식, 레이븐, 슬레이트, 블랑쉬 및 제네바 테마

코드 색상 표시 환경 설정을 사용하여 코드 보기용 테마를 지정합니다. 배경, 전경 및 숨겨진 문자에 대해 다양한 색상 구성표를 선택하여 테마를 사용자 지정할 수 있습니다.

각 목록화된 문서 유형의 경우 양식 관련 태그나 JavaScript 식별자 등 다양한 태그 또는 코드 요소의 범주에 대해 색상을 사용자 지정할 수 있습니다. 예를 들어 레이븐 테마가 모든 문서 형식에 사용되는 경우 HTML 문서의 양식 관련 태그에 대해 파란색을 선택할 수 있습니다.

[적용]을 클릭하면 모든 사용자 지정 설정이 저장되고 Dreamweaver 세션에서 사용자 지정 테마를 사용할 수 있습니다.

참고:

환경 설정의 동기화 설정 옵션을 사용하여 Dreamweaver 인스턴스 간에 동기화된 사용자 지정 코드 테마를 유지할 수 있습니다. 자세한 내용은 Creative Cloud와 Dreamweaver 설정 동기화를 참조하십시오.

자세한 내용은 코드 보기용 색상 테마 설정을 참조하십시오.

코드 보기의 라이브 뷰 동기화

코드 보기의 라이브 뷰 동기화로 라이브 뷰의 코드 변경 내용을 즉시 미리 보기할 수 있습니다. 이전 버전의 Dreamweaver와 달리 라이브 뷰의 변경 내용을 미리 보기 위해 새로 고침을 클릭할 필요가 없습니다.

다음의 워크플로우에서 실행 중인 코드 보기의 라이브 뷰 동기화를 확인할 수 있습니다(핵심이 코드 보기에 있는 경우).

  • 잘라내기/복사/붙여넣기/삭제, 실행 취소/다시 실행 등 텍스트 작업
  • 핵심이 코드 보기에 있는 경우 [요소 간략히 보기]의 요소 이동
  • 코드 보기에서 입력하기
  • [요소 간략히 보기]의 삭제/복제/복사/붙여넣기 작업(마우스 오른쪽 버튼 클릭 옵션)
  • 텍스트 서식 변경 - 굵게/기울임, 클래스 변경, ID, 형식, 페이지 속성 및 글꼴 사용 등 속성 관리자 작업
  • 코드 보기의 힌트를 사용하여 클래스 또는 ID 추가/삭제
  • Div, 이미지, 하이퍼링크 및 구조 요소 등 삽입 패널의 요소를 코드 보기에 삽입
  • <style> 태그의 CSS 스타일 추가/편집하기 
  • CSS 파일의 코드 편집

참고:

JavaScript 코드를 변경한 후 라이브 뷰에 변경 내용을 반영하려면 페이지를 완전히 새로 고치거나 다시 로드해야 합니다. 

라이브 뷰의 Assets 패널

이제 Assets 패널(Windows > 에셋)을 라이브 뷰에서 사용할 수 있습니다. Assets 패널을 사용하여 다음과 같은 작업을 쉽게 관리할 수 있습니다.

  • 미리 보기 창 또는 Assets 패널의 목록 보기에서 에셋(이미지, URL, 색상 또는 미디어)을 드래그하거나 삽입합니다.

참고: 미리 보기 창에서 에셋을 드래그하는 것은 Mac에서만 가능합니다.

  • 색상 값을 복사하여 CSS Designer 속성, 코드 보기 및 색상 피커 등과 같은 Dreamweaver 내의 모든 텍스트 필드에 붙여 넣거나 메모장과 같은 기타 앱에 붙여 넣습니다.

참고:

 

  • 스크립트, 템플릿 및 라이브러리 범주는 코드 보기에서 관련성이 높은 항목이어서 라이브 뷰의 Assets 패널에 숨겨져 있습니다.
  • Dreamweaver CC의 이번 릴리스에서 Flash와 동영상 범주는 "미디어"라고 하는 단일 범주로 통합됩니다.
         

라이브 뷰의 Assets 패널
라이브 뷰의 Assets 패널

디자인 및 코드 보기의 Assets 패널
디자인 및 코드 보기의 Assets 패널


Assets 패널 사용 방법에 대한 자세한 내용은 Assets 패널을 사용하여 작업을 참조하십시오.

새로운 스타터 템플릿

이제 Dreamweaver에는 반응형 웹 사이트를 빠르게 시작할 수 있는 새로운 반응형 스타터 템플릿이 포함되어 있습니다. 새 문서 대화 상자(파일 > 새로 만들기 > 스타터 템플릿)에서 선택할 수 있는 템플릿은 다음과 같습니다.

  • 페이지 정보
  • 블로그 포스트
  • 전자 상거래
  • 이메일
  • 포트폴리오
새로운 반응형 스타터 템플릿
새로운 반응형 스타터 템플릿

템플릿을 선택하고 새 문서 대화 상자에서 만들기를 선택하는 경우 Dreamweaver는 새 문서 저장을 명령합니다. 문서를 저장하여 필요에 따라 나중에 맞춤화할 수 있는 템플릿의 사본을 만듭니다.

시작 환경 설정을 재설정

Dreamweaver로 문제를 해결하는 경우 모든 사용자 정의 설정이 포함된 환경 설정 폴더를 가끔씩 삭제해야 합니다. 릴리스 이전에 컴퓨터에 있는 환경 설정 폴더를 수동으로 검색하여 해당 폴더를 삭제해야 합니다. 이 릴리스가 제공하는 원 클릭 옵션의 대화 상자를 사용하여 환경 설정을 삭제할 수 있습니다.

환경 설정 재설정
환경 설정 재설정

Dreamweaver를 실행하는 동안 다음의 키보드 단축키를 일정 시간 눌러 환경 설정 재설정 대화 상자를 열 수 있습니다.

  • (Win) Windows 키 + Ctrl + Shift
  • (Mac) Cmd + Option + Shift

참고:

환경 설정 재설정 옵션은 신중하게 사용하십시오. 환경 설정을 재설정하면 작업 영역의 모든 사용자 지정 설정, 키보드 단축키, 확장명 및 응용 프로그램 환경 설정이 손실됩니다.

Mac에서는 Dreamweaver가 실행(Dock에서 Dreamweaver 아이콘 클릭으로 실행)되는 동안 Cmd + Option + Shift를 누릅니다.

Windows에서는 다음 단계를 수행합니다.

  1. 설치 폴더로 이동하여 Dreamweaver.exe를 찾아 파일을 클릭합니다.

  2. Windows 키 + Ctrl + Shift 키를 누른 상태에서 Dreamweaver.exe를 더블 클릭합니다.

UAC(User Account Control) 상자가 표시되어도 위에서 설명한 단축키는 계속 누르고 있어야 합니다. 

기타 향상된 기능

동기화 설정 변경 사항

이제 환경 설정 대화 상자를 사용하여 Creative Cloud에 저장된 이전 버전의 Dreamweaver에서 설정을 가져올 수 있습니다. 클라우드에서 가져온 설정은 모든 로컬 설정을 덮어쓰며 이후 Dreamweaver를 실행할 때 적용됩니다.

이전 버전의 Dreamweaver에서 설정 가져오기
이전 버전의 Dreamweaver에서 설정 가져오기

또한 이번 릴리스 이후로는 이전 버전에서 동기화된 설정에 추가하여 다음과 같은 설정도 Creative Cloud와 동기화됩니다.

  • 새로 추가된 코드 색상 테마
  • Mac에서의 응용 프로그램 표시줄 및 응용 프로그램 프레임 설정

CSS Designer 변경 사항

이번 버전의 Dreamweaver에는 CSS Designer의 사용자 환경에 대한 다양한 개선 사항이 포함됩니다. 또한 CSS Designer 패널에는 워크플로우를 빠르게 시작하는 데 유용한 시작 환경이 포함되어 있습니다.

시작 화면 변경 사항

이제 시작 화면의 사이트 템플릿이 스타터 템플릿으로 대체됩니다. 새 문서 대화 상자에서 사이트 템플릿에 액세스할 수 있습니다(파일 > 새로 만들기).

jQuery 버전 업데이트

이제 Dreamweaver는 다음과 같이 업데이트된 jQuery 라이브러리를 포함합니다.

  • jQuery - 1.8.3에서 jQuery - 1.11.1로 업데이트
  • jQuery UI - 1.9.2에서 jQuery UI - 1.10.4로 업데이트

jQuery 시작 페이지가 제거되었습니다. 

PhoneGap 업데이트

응용 프로그램을 패키징하기 위한 PhoneGap Build와 Dreamweaver의 직접 통합은 최신 업데이트의 Dreamweaver CC 2014 릴리스(2014년 10월) 이상 버전에서는 지원되지 않습니다.

그러나 직접 온라인 PhoneGap Build 서비스를 이용하여 기본 모바일 응용 프로그램과 같은 웹 응용 프로그램을 패키징하는 데 최신 업데이트 기능을 적용할 수 있습니다. 자세한 내용은 Dreamweaver CC 2014 릴리스에 대한 최신 업데이트로 PhoneGap Build 사용을 참조하십시오.

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

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