새로 출시된 Dreamweaver CC 2014 릴리스에는 웹 및 모바일 내용을 쉽게 만들고 업데이트할 수 있도록 라이브 뷰 및 CSS Designer의 몇 가지 향상된 기능이 포함되어 있습니다. 새로 도입된 요소 간략히 보기 기능을 사용하면 HTML 마크업을 빠르게 보고 탐색하고 편집할 수 있습니다.

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

요소 간략히 보기

정적 내용과 동적 내용 모두에 대한 인터랙티브 HTML 트리를 렌더링하는 새 요소 간략히 보기를 사용하여 문서에서 마크업을 검토해 보십시오. HTML 트리 내에서 정적 내용 구조를 바로 수정할 수 있습니다.

요소 간략히 보기
요소 간략히 보기

요소 간략히 보기(보기 > 요소 간략히 보기)는 개발 과정의 속도를 높이기 위해 도입되었습니다. Dreamweaver의 이전 버전에서는 라이브 뷰에서 HTML 요소를 강조하고 코드 보기로 전환한 다음 요소를 편집해야 했습니다. 또한 편집 후에는 라이브 뷰로 다시 전환해야 변경 사항을 미리 볼 수 있었습니다. 이제는 요소 간략히 보기를 통해 읽기 쉬운 단일 보기에서 페이지의 모든 요소를 보고 정적 내용을 편집할 수 있습니다.

자세한 내용은 요소 간략히 보기를 참조하십시오.

라이브 뷰의 새 편집 기능

라이브 뷰에서 모든 HTML 요소의 속성을 바로 검사 및 변경한 후 새로 고치지 않고 어떻게 표시되는지 확인해 보십시오.

빠른 속성 관리자

라이브 뷰에는 페이지의 HTML 요소에 대한 빠른 속성 관리자가 표시됩니다. 선택한 HTML 요소에 따라 빠른 속성 관리자에서 속성을 편집하거나 라이브 뷰에서 직접 텍스트를 편집할 수 있습니다.

이미지 속성 편집을 위한 빠른 PI
이미지 속성 편집을 위한 빠른 PI

텍스트 서식 적용을 위한 라이브 뷰 PI
텍스트 서식 적용을 위한 빠른 PI


자세한 내용은 간략히 보기 속성 관리자를 참조하십시오.

요소 표시

새 요소 표시를 사용하면 라이브 뷰에서 HTML 요소와 클래스 및 ID를 직접 연결할 수 있습니다. 요소 표시를 사용하면 필요한 옵션을 빠르게 보고 선택할 수 있도록 사용 가능한 클래스 및 ID에 대한 힌트가 제공됩니다.

클래스 및 ID 편집을 위한 요소 표시
클래스 및 ID 편집을 위한 요소 표시

자세한 내용은 HTML 요소를 클래스 및 ID와 연결을 참조하십시오.

라이브 텍스트 편집

이제 라이브 뷰에서 텍스트를 직접 편집하고 다른 보기 간에 전환하지 않고 변경 사항을 미리 볼 수 있습니다.

라이브 뷰에서 텍스트 요소를 더블 클릭하여 편집 모드를 시작합니다. 자세한 내용은 라이브 뷰에서 텍스트 직접 편집을 참조하십시오.

라이브 뷰에서 텍스트를 직접 편집합니다. 라이브 텍스트 편집
라이브 뷰에서 텍스트 직접 편집

라이브 뷰 속성 관리자

라이브 뷰에서 속성 관리자를 사용하여 디자인 뷰나 코드 보기로 전환하지 않고 페이지를 빠르게 편집할 수 있습니다.

자세한 내용은 라이브 뷰 속성 관리자를 참조하십시오.

라이브 뷰 속성 관리자
라이브 뷰 속성 관리자

라이브 삽입

이 버전에서는 삽입 패널을 사용하여 HTML 요소를 라이브 뷰에 직접 삽입할 수 있습니다. 모드를 전환할 필요 없이 요소가 실시간으로 삽입됩니다. 또한 변경 사항을 즉시 미리 볼 수 있습니다. 

자세한 내용은 라이브 뷰에서 직접 요소 삽입을 참조하십시오.

삽입 패널에서 라이브 뷰로 드래그 앤 드롭
삽입 패널에서 라이브 뷰로 드래그 앤 드롭

CSS Designer 개선 사항

테두리 제어를 위해 향상된 사용자 인터페이스

탭 제어를 통해 4개의 테두리 속성을 쉽고 직관적인 방법으로 모두 설정할 수 있습니다.

  • 탭 제어는 혼동을 줄이기 위해 한 번에 모든 값을 보여주는 것을 방지합니다.
  • 직관적이고 친숙한 아이콘으로 초보자도 따라할 수 있습니다.
  • 두 아이콘 세트로 설정 해제/삭제 및 비활성화 상태를 표시합니다.
  • 원스톱 “모든 측면” 탭은 모든 테두리 속성을 한 번에 설정합니다.
  • 계산된 행은 검사하는 동안 가장 적합한 탭으로 안내합니다. 
Dreamweaver CC 2014 릴리스 이전의 테두리 제어 속성
Dreamweaver CC 2014 릴리스 이전의 테두리 제어 속성

Dreamweaver CC 2014 릴리스의 테두리 제어 속성
Dreamweaver CC 2014 릴리스의 테두리 제어 속성


자세한 내용은 테두리 속성 설정을 참조하십시오.

스타일 복사하여 붙여넣기

이제 한 선택기에서 스타일을 복사하여 다른 선택기에 붙여 넣을 수 있습니다. 모든 스타일을 복사할 수도 있고 레이아웃, 텍스트, 테두리 등 특정 스타일 범주만 복사할 수도 있습니다.

선택기를 마우스 오른쪽 버튼으로 클릭하고 사용 가능한 옵션 중에서 선택합니다.  

CSS Designer를 사용하여 스타일 복사
CSS Designer를 사용하여 스타일 복사

  • 선택기에 스타일이 없는 경우 복사 및 모든 스타일 복사가 비활성화됩니다.
  • 편집할 수 없는 원격 사이트에 대해서는 스타일 붙여넣기가 비활성화됩니다. 그러나 복사 및 모든 스타일 복사는 사용할 수 있습니다.
  • 일부가 선택기에 있는 스타일 붙여넣기(겹침)가 작동합니다. 모든
    선택기의 결합이 붙여 넣어집니다.
  • 스타일 복사하여 붙여넣기는 가져오기, 연결, 인라인 스타일 등 CSS 파일의 다양한 연결에도 사용할 수 있습니다.

빠른 편집 텍스트 상자

이제 Dreamweaver는 여백, 패딩, 테두리 및 테두리 반경 등의 속성에 대한 대표 속성 코드를 지정할 수 있는 빠른 편집 텍스트 상자를 포함합니다. 이 변경 사항은 속성을 지정할 때 마우스/키보드를 사용하는 대신 코드를 직접 입력하는 것을 선호하는 사용자를 위해 적용되었습니다.

빠른 편집 텍스트 상자
빠른 편집 텍스트 상자

속성 지정
속성 지정


사용자 정의 속성 워크플로우 개선

이전에는 '기타' 또는 사용자 정의 속성을 추가하려면 CSS Designer의 속성 창에서 +를 클릭해야 했습니다. 이제는 텍스트 상자 세트(속성 이름 및 값)를 속성 목록의 끝에서 언제든지 사용할 수 있습니다. 이러한 텍스트 상자를 통해 +를 클릭하지 않고 속성 이름과 값을 직접 입력할 수 있습니다.

사용자 정의 속성이 포함된 행을 더 추가하려면 Tab 키를 누릅니다.

'기타' 속성 그룹의 이름은 '사용자 정의'로 변경되었습니다.

속성 이름과 값을 추가하기 위한 텍스트 상자
속성 이름과 값을 추가하기 위한 텍스트 상자

키보드 단축키

이제 키보드 단축키를 사용하여 CSS 선택기 및 속성을 추가하거나 삭제할 수 있습니다. 또한 속성 창에서 속성 그룹 사이를 탐색할 수도 있습니다.

단축키 워크플로우
Ctrl+Alt+[Shift =] 선택기 추가(컨트롤이 선택기 섹션에 있는 경우)
Ctrl+Alt+S 선택기 추가(컨트롤이 응용 프로그램의 어딘가에 있는 경우)
Ctrl+Alt+[Shift =] 속성 추가(컨트롤이 속성 섹션에 있는 경우)
Ctrl+Alt+P 속성 추가(컨트롤이 응용 프로그램의 어딘가에 있는 경우)
선택 + Delete 선택기 삭제(선택기가 선택된 경우)
Ctrl+Alt+(PgUp/PgDn) 섹션 간 이동(속성 하위 패널에서) 

높은 우선권/낮은 우선권 선택기

이 버전의 Dreamweaver에서는 선택기를 추가하는 동안 세 가지 또는 세 가지 미만의 규칙 힌트를 제공합니다. 위/아래 화살표 키를 사용하여 높은 우선권 또는 낮은 우선권을 부여할 수 있습니다.

높은 우선권/낮은 우선권 선택기
높은 우선권/낮은 우선권 선택기

범주로 스크롤

이전에는 CSS Designer의 속성 창 상단에 있는 기타 범주 또는 배경을 클릭하면 이러한 범주가 창에서 '표시'되었습니다. 하지만 범주가 창의 상단에 실제로 표시되지는 않았습니다.

이제는 배경기타 범주(사용자 정의로 이름이 바뀜)가 클릭되면 창의 상단에 표시됩니다.

범주로 스크롤
범주로 스크롤

식별 파일을 사용하여 SFTP 연결 지원

Dreamweaver CC 2014 릴리스에서는 암호문구가 필요한지 여부에 상관없이 개인-공개 키 쌍 및 식별 키를 사용하여 SFTP의 publishing server에 연결할 수 있습니다. Dreamweaver의 이 확장 기능으로 웹 호스팅 서비스 공급자의 선택 범위가 더 넓어졌습니다. 인증을 위해 개인-공개 키 쌍을 사용하도록 요구하는 서비스 공급자를 구독할 수 있습니다.

참고:

Dreamweaver는 OpenSSH 키 파일만 지원합니다.

자세한 내용은 SFTP 연결을 참조하십시오.

실행 취소/다시 실행 개선

지금까지 CSS Designer 패널에서 수행된 작업을 실행 취소/다시 실행하려면 관련 파일에서 CSS 파일을 클릭한 다음 작업을 실행 취소/다시 실행해야 했습니다.

실행 취소/다시 실행 기능에 대한 새로운 개선 사항을 통해 문서의 라이브 뷰 또는 CSS Designer 패널에서 직접 작업을 실행 취소/다시 실행할 수 있습니다. 그러면 이러한 변경 사항이 관련 CSS 파일에 자동으로 반영됩니다. 관련 파일이 변경되었음을 알려주기 위해 해당 파일의 탭이 잠시 동안(약 8초) 강조 표시됩니다.

  • CSS Designer 패널에서 동작을 실행 취소/다시 실행하는 경우 라이브 뷰는 자동으로 새로 고쳐집니다.
  • 소스 코드를 사용하여 문서를 편집하고 라이브 뷰에서 변경 사항을 실행 취소하는 경우 화면은 분할 보기로 변경되고 관련 소스 코드가 강조됩니다.

모든 실행 취소/다시 실행 동작은 HTML 파일 수준에서 기록됩니다. 즉, CSS 파일에 대한 모든 수동 변경 사항을 모든 관련 파일에서 실행 취소할 수 있습니다. 예를 들어 style1.css 및 style2.css가 index.html과 관련이 있다고 가정할 때 style1.css에서 .h1에 대한 스타일을 추가한 다음 style2.css에서 실행 취소를 수행할 경우 .h1 스타일이 style1.css에서 삭제됩니다.

참고:

JavaScript 파일에서 변경 사항을 실행 취소/다시 실행하려면 해당 JS 파일로 전환한 다음 실행 취소/다시 실행을 수행해야 합니다. 

Business Catalyst 및 PhoneGap Build 워크플로우 변경 사항

이제 Business Catalyst 및 PhoneGap Build를 Dreamweaver의 Add-Ons으로 사용할 수 있습니다. 먼저 Business Catalyst 및 PhoneGap Build를 확장으로 설치해야 합니다. 그런 다음 이전처럼 해당 서비스를 사용하면 됩니다.

Business Catalyst 및 PhoneGap Build 확장을 설치하려면 [관리] > [Add-Ons 검색]으로 이동한 다음 해당 확장을 검색하여 설치합니다.

Dreamweaver의 확장 액세스 방법 변경 사항

이제 Adobe Creative Cloud를 사용하여 Dreamweaver 확장을 보고 설치할 수 있습니다. 이제 확장을 “Add-Ons”라고합니다.

Adobe Creative Cloud에서 Add-Ons를 검색하려면 Dreamweaver에서 [윈도우] > [Add-Ons 검색]을 클릭합니다. Adobe Creative Cloud Add-Ons 페이지가 나타납니다. 

[윈도우] > [Dreamweaver CC 13.0의 확장]
[윈도우] > [Dreamweaver CC 13.0의 확장]

[윈도우] > [Dreamweaver CC 2014의 Add-Ons 검색]
[윈도우] > [Dreamweaver CC 2014 릴리스의 Add-Ons 검색]


Add-Ons 설치 방법에 대한 자세한 내용은 Add-Ons를 참조하십시오.

동기화 설정 변경 사항

Dreamweaver의 동기화 설정 기능을 사용하면 설정을 컴퓨터 및 Creative Cloud의 Dreamweaver 인스턴스와 동기화할 수 있습니다. Dreamweaver CC 2014 릴리스에서는 이전 버전 Dreamweaver에서 동기화 설정이 활성화되었는지 여부를 자동으로 감지하여 Creative Cloud에서 해당 설정을 가져올 수 있도록 합니다.

Dreamweaver CC 2014 릴리스를 설치한 후 처음으로 실행하는 경우, 다음 대화 상자가 나타납니다. 

동기화 설정 가져오기
동기화 설정 가져오기

  • Creative Cloud에 저장된 설정을 가져오려면 [동기화 설정 가져오기]를 클릭합니다. 

참고: 이 옵션은 이후에는 사용할 수 없습니다. 

  • 현재 Dreamweaver 인스턴스의 설정을 Creative Cloud와 동기화하려면 [로컬 동기화]를 클릭합니다.
  • 설정을 자동으로 동기화하려면 항상 자동으로 설정 동기화를 선택합니다.
  • 고급 동기화 설정 옵션을 보려면 [고급]을 클릭합니다.

Dreamweaver에서 직접 버그/기능 요청 제출

이제 Dreamweaver 내에서 직접 위시리스트 양식 및 버그 보고서 양식을 제출할 수 있습니다(도움말 > 버그/기능 요청 제출).

도움말 메뉴의 버그/기능 요청 제출
도움말 메뉴의 버그/기능 요청 제출

Help Center

새로운 기능을 사용하는 방법과 Dreamweaver 내에서 일반적인 작업을 처리하는 방법을 새 Help Center를 통해 알아보십시오.

이전 버전과는 달리 처음으로 Dreamweaver를 실행할 때 새로운 기능 및 효과적인 워크플로우를 쉽게 확인할 수 있습니다. 새로운 기능 둘러보기를 건너뛰거나 앱 내 도움말 메시지를 언제든지 비활성화할 수 있습니다. 필요한 경우 다시 활성화할 수도 있습니다.

새로운 기능 둘러보기

이제 Dreamweaver에는 최신 버전과 함께 제공되는 새로운 기능 간단히 둘러보기가 포함되어 있습니다.
둘러보기에서는 새로운 기능을 소개할 뿐 아니라 비디오 갤러리로 안내하여
사용자가 새로운 기능이 실제 어떻게 사용되는지 확인할 수 있게 합니다.

새로운 기능 둘러보기 또는 간단히 둘러보기 옵션은 Dreamweaver를 실행하자마자
표시됩니다. 둘러보기를 건너뛰고 작업을 진행하기 위한
시작 화면으로 이동할 수도 있습니다.

참고: 새로운 기능 둘러보기는 Dreamweaver를 설치 또는 업데이트하는 경우
또는 환경 설정을 삭제하고 Dreamweaver를 다시 실행하는 경우 표시됩니다.

새로운 기능 둘러보기
새로운 기능 둘러보기

다음은 새로운 기능 둘러보기에 표시되는 내용을 요약한 것입니다.

  • 시작 메시지. 또한 환경을 적절하게 사용자 정의할 수 있도록 이전에 Dreamweaver CC를 사용해 본 적이 있는지 여부를 지정하라는 메시지가 표시됩니다.
  • 기능별 소개 및 간단한 설명(둘러보기 건너뛰기 옵션 포함)
  • 새로운 기능과 관련된 비디오가 포함된 비디오 갤러리

비디오 갤러리

새로운 기능 둘러보기의 마지막에서 새로운 기능과 관련된 비디오가 포함된
비디오 갤러리가 표시됩니다. 커서를 축소판 이미지에 올려 놓으면
비디오에 대한 간단한 설명이 표시됩니다.

비디오 갤러리
비디오 갤러리

참고:

Dreamweaver를 사용하는 동안 새로운 기능 둘러보기 및 비디오 갤러리에 언제든지
액세스할 수 있습니다. 이렇게 하려면 도움말 메뉴 또는 시작 화면으로 이동하여 필요한 옵션을 클릭하십시오.

앱 내 메시지

이제 Dreamweaver는 사용자가 프로젝트를 진행하는 동안 생산성을 증가시키는
설명이 포함된 메시지를 표시합니다. 이러한 설명은 현재 진행 중인 작업을 보다 효율적으로 수행하는 데 도움을 주기 위한 것입니다.

메시지는 특정 '트리거'를 기반으로 나타납니다. 예를 들어 임의의 보기에서 태그
선택기를
클릭하거나 검사하기 위해 요소를 마우스 오른쪽 버튼으로 클릭하면 요소
간략히 보기에 대한 메시지가 나타납니다. 요소 간략히 보기는 이전에 시도했던 다른 방법(트리거)보다 더 쉽게 HTMP 마크업을 보고
편집할 수 있는 완전히 새로운 기능입니다.

제공된 제안 사항에 대해 조치를 취하면 앱 내 메시지가 동일한 트리거에 대해 다시
나타나지 않습니다. 하지만 메시지는 다른 식별된 트리거에 대해 다시
나타납니다.

환경 설정을 통해 앱 내 메시지의 표시를 비활성화할 수 있습니다. 자세한
내용은 앱 내 및 제품 내 메시지 비활성화 또는 재설정을 참조하십시오. 

앱 내 메시지의 예:

요소 간략히 보기

트리거:

  • 태그 선택기(모든 보기) 클릭
  • 라이브 + 검사 또는 요소에서 오른쪽 버튼 + 검사

메시지:

요소 간략히 보기 메시지
요소 간략히 보기 메시지

클래스 및 ID를 위한 라이브 뷰 속성 관리자

트리거:

  • 디자인 뷰에서 PI를 사용하여 ID 편집

메시지:

라이브 뷰 메시지
라이브 뷰 메시지

제품 내 메시지

Dreamweaver는 Creative Cloud의 많은 다른 응용 프로그램과 매끄럽게 통합되며
제품 내 메시지는 이러한 통합 워크플로우를 소개합니다. 이러한
워크플로우를 사용함으로써 Adobe Creative Cloud와 그 제공품을 더 나은 방식으로 활용할 수 있습니다.

제품 내 메시지는 식별된 '트리거'를 기반으로 표시됩니다. 예를 들어
CSS 전환을 사용하려는 경우 “Edge Animate” 워크플로우가 제품 내 메시지를 통해
제안됩니다.

제품 내 메시지는 특정 시나리오에 사용할 수 있는 대체(또는 더 좋은)
워크플로우의 간단한 설명을 포함합니다. 또한 워크플로우를 설명하는
비디오를 보기 위해 클릭할 수 있는 비디오 축소판도 포함합니다. 자세히 알아보기 버튼은
자세한 정보를 제공하는 기사/블로그로 안내합니다.

제품 내 메시지는 식별된 트리거가 발생될 때 한 번만 표시됩니다.

참고:

메시지를 다시 표시하려면 환경 설정에서 앱 내 도움말 설정을 다시 설정하면 됩니다.
자세한 내용은 앱 내 및 제품 내 메시지 비활성화 또는 재설정을 참조하십시오. 

제품 내 메시지의 예:

Edge Animate

트리거:

  • CSS 전환을 클릭한 다음 + 클릭

메시지:

Edge Animate 메시지
Edge Animate 메시지

파르페

트리거:

  • [이미지 삽입] > [이미지 설정 편집]

메시지:

이미지 설정 편집
이미지 설정 편집

앱 내 및 제품 내 메시지 비활성화 또는 재설정

환경 설정 > 액세스 가능성 대화 상자로 이동하여 다음을 수행합니다.

  • 메시지를 비활성화하려면 [앱 내 도움말 보기] 체크 박스를 선택 취소합니다.

메시지를 다시 활성화하는 경우 이전에
표시된 메시지는 표시되지 않습니다. 이전에 표시되지 않은 메시지만
표시됩니다.

  • 이전에 표시된 메시지를 보려면 [재설정]을 클릭합니다.
설명을 비활성화합니다. 앱 내 메시지를 비활성화합니다.
앱 내 도움말을 비활성화하거나 재설정하는 환경 설정

도움말 메뉴 변경 사항

이제 빠르게 새로운 기능 둘러보기, 비디오 갤러리, 도움말 및 학습 자료에 액세스하고 버그/기능 요청 양식을 제출할 수 있도록 도움말 메뉴가 재구성되었습니다.

Dreamweaver CC 2014 이전의 도움말 메뉴
CC Dreamweaver 2014 릴리스 이전의 도움말 메뉴

Dreamweaver CC 2014의 도움말 메뉴
Dreamweaver CC 2014 릴리스의 도움말 메뉴


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

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