새로운 기능 요약

Dreamweaver CC 2015 릴리스는 반응형 디자인, 코드 편집 기능의 향상, 디바이스에서 웹 페이지 미리보기 및 Photoshop 구성 요소에서 다양한 해상도로 웹에 최적화된 이미지를 일괄 추출하는 기능에 중점을 두고 있습니다. Bootstrap 프레임워크와의 통합은 모바일을 주력으로 하는 반응형 웹 사이트를 제작하는 데 매우 유용합니다. 비주얼 미디어 쿼리는 다양한 중단점에서 디자인을 시각화하고 수정할 수 있도록 하여 반응형 웹 디자인 환경을 더욱 보완해 줍니다. 

또한 이번 릴리스에서는 라이브 뷰와 CSS Designer에서의 편집 기능이 다수 보강되었습니다. 이 문서에서는 이러한 새로운 기능과 향상된 기능을 소개하고 자세한 도움말 및 학습 자료에 대한 링크를 제공합니다.

이제 Dreamweaver를 통해 여러 디바이스에서 동시에 제작 준비가 된 웹 페이지를 테스트할 수 있습니다. 웹 페이지가 다양한 폼 팩터에서 어떻게 리플로우되는지 확인할 수 있으며 페이지에서 인터랙티브 기능을 테스트할 수도 있습니다. 모바일 앱을 따로 설치하거나 데스크탑에 디바이스를 물리적으로 연결하지 않고도 이 모든 것이 가능합니다. 자동으로 생성되는 QR 코드를 디바이스로 간단히 스캔하고 디바이스에서 웹 페이지를 미리 볼 수 있습니다.

데스크탑에서 실시간 검사가 실행되면 연결된 모든 디바이스에 반영되어 다양한 요소를 검사하고 필요에 따라 디자인을 수정할 수 있도록 해 줍니다.

자세한 내용은 여러 디바이스에서 웹 페이지 미리보기 및 검사를 참조하십시오.

비주얼 미디어 쿼리

비주얼 미디어 쿼리 바는 페이지에 표시되는 미디어 쿼리의 시각적인 표현입니다. 이 바를 통해 다양한 중단점에서 웹 페이지를 시각화할 수 있으며 웹 페이지의 다양한 구성 요소가 여러 뷰포트에서 리플로우되는 방식을 시각화할 수 있습니다. 여러 뷰포트에서 페이지를 보는 동안 다른 뷰포트의 페이지 디자인에 영향을 주지 않고 특정 뷰포트의 디자인을 변경할 수 있습니다.

비주얼 미디어 쿼리는 수평 행으로 된 3개의 바로 구성되며 각 바는 미디어 쿼리 범주를 나타냅니다.

•  녹색: max-width 조건의 미디어 쿼리
•  파란색: min-width 및 max-width 조건의 미디어 쿼리
•  자주색: min-width 조건의 미디어 쿼리

자세한 내용은 비주얼 미디어 쿼리를 참조하십시오.

코드 Linting 지원

이제 이 새로운 버전의 Dreamweaver에서 Linting을 사용하여 일반적인 오류의 코드를 디버그할 수 있습니다. Linting은 코드를 분석하여 잠재적 오류 또는 의심스러운 코드 사용에 플래그를 지정하는 과정입니다. Dreamweaver에서는 로드하거나 저장하거나 편집할 때 HTML, CSS 및 JavaScript 파일을 린트할 수 있습니다. 그런 다음 오류 및 경고가 출력 패널에 나열됩니다.

자세한 내용은 코드 린트를 참조하십시오.

Emmet에 대한 지원

Dreamweaver에 여러 줄의 코드를 입력하는 열성적인 개발자이십니까? 코드에 Emmet 약어를 사용하여 시간을 절약하십시오. 기억하고 입력하기 쉬운 이러한 약어는 Tab 키를 누르면 코드 보기에서 완전한 코드로 확장됩니다.

자세한 내용은 Emmet을 사용하여 코드 삽입을 참조하십시오.

코드 보기에서 미리보기

분할 보기에서 작업 중인 경우 라이브 뷰 또는 디자인 뷰에서 이미지 또는 색상 변경 사항을 즉시 볼 수 있습니다. 하지만 코드 보기에서만 작업하는 것을 선호하는 경우 이미지는 파일 이름일 뿐이며 대부분 직관적이지 못한 경향이 있습니다. 사전 정의된 색상을 사용하지 않는 경우 색상은 단지 모호한 일련의 숫자 세트에 지나지 않습니다. 이 버전의 Dreamweaver에서 코드 보기 내에서 바로 이미지 및 색상 미리보기를 빠르게 할 수 있습니다. 이 기능을 사용하면 실제로 표시되는 이미지 또는 색상으로 이미지 파일 이름과 색상 형식 간을 시각적으로 연결할 수 있습니다. 따라서 신속하게 디자인 결정을 내리고 개발 시간을 크게 단축시킬 수 있습니다.

자세한 내용은 코드 보기에서 이미지 및 색상 미리보기를 참조하십시오.

코드 보기에서는 오류 미리보기를 표시합니다. 오류가 있는 코드의 행 번호는 빨간색으로 강조 표시됩니다. 커서를 숫자에 올려 놓으면 오류에 대한 간단한 설명이 표시됩니다.

참고: 행의 첫 번째 오류만 표시됩니다. 행에 경고만 포함되어 있는 경우 경고에 대한 설명이 표시됩니다. 행에 경고와 오류가 포함되어 있는 경우 오류에 대한 설명만 표시됩니다.

새 코드 스니펫

스니펫은 프로젝트에서 반복적으로 재사용할 수 있는 코드의 부분입니다. Dreamweaver의 이번 릴리스에서는 새로운 스니펫 및 업데이트된 코드 스니펫을 제공합니다.

• Boostrap 스니펫
• CSS 애니메이션 및 전환
• CSS 효과
• CSS 스니펫
• HTML 스니펫
• JavaScript 스니펫 (업데이트됨)
• PHP 스니펫
• Preprocessor 스니펫
• 반응형 디자인 스니펫

코드 스니펫 사용에 대한 자세한 내용은 코드 스니펫을 사용하여 작업을 참조하십시오.

또한 이제 클라우드 동기화 기능을 사용하여 Dreamweaver 설치 전반에 걸쳐 코드 스니펫을 최신 상태로 유지할 수 있습니다. 코드 스니펫을 Creative Cloud 및 기타 Dreamweaver 설치와 동기화하는 방법은 Creative Cloud와 Dreamweaver 설정 동기화를 참조하십시오.

Bootstrap 통합

Bootstrap은 반응형 모바일 주력 웹 사이트를 개발하는 데 가장 많이 사용되는 무료 HTML, CSS 및 JavaScript 프레임워크입니다. 프레임워크에는 버튼, 테이블, 내비게이션, 이미지 캐로설 및 기타 웹 페이지에서 사용할 수 있는 요소에 대한 반응형 CSS 및 HTML 템플릿이 포함되어 있습니다. 몇 가지 선택적 JavaScript 플러그인도 사용할 수 있어 기초적인 코딩 기술만 보유한 개발자도 뛰어난 반응형 웹 사이트를 개발할 수 있습니다.

Dreamweaver를 통해 Bootstrap 문서를 제작하고 Bootstrap을 사용해 제작한 기존의 웹 페이지를 편집할 수도 있습니다. 새 문서 대화 상자에서 선택할 수 있는 Bootstrap 스타터 템플릿(스타터 템플릿 > Bootstrap 템플릿) 중 하나를 사용하여 Bootstrap 웹 사이트 디자인을 시작할 수 있습니다. 

• Bootstrap-에이전시
  
• Bootstrap-전자 상거래
• Bootstrap-포트폴리오
• Bootstrap-제품
• Bootstrap-부동산
• Bootstrap-이력서
  

새 문서 대화 상자(새 문서 > Bootstrap)에서 맞춤형 Bootstrap 문서를 제작할 수도 있습니다. 그런 다음 Dreamweaver의 삽입 패널에서 아코디언이나 캐로설과 같은 Bootstrap 구성 요소를 사용하여 퍼즐 조각을 맞추듯이 웹 사이트를 구축합니다. Photoshop 구성 요소가 있는 경우에는 Extract를 사용하여 이미지, 글꼴, 스타일, 텍스트 등을 Bootstrap 문서로 가져올 수도 있습니다.

디자인이 완료된 Bootstrap 파일이든 작업이 진행 중인 디자인이든 상관없이 Dreamweaver에서 코드를 편집할 뿐만 아니라 라이브 뷰 편집, 시각적 CSS Designer, 비주얼 미디어 쿼리 및 Extract 기능을 사용하여 디자인을 변경할 수도 있습니다. 

자세한 내용은 Bootstrap 파일을 사용하여 작업을 참조하십시오.

라이브 뷰에서 표 편집하기에 대한 지원

다음 옵션 중 하나 또는 여러 조합을 통해 라이브 뷰에서 빠르고 간편하게 표를 편집할 수 있습니다.

자세한 내용은 표 크기 조절 및 표 및 셀 서식 지정을 참조하십시오.

라이브 뷰의 새 메뉴

라이브 뷰에서의 편집 기능이 이제 다음과 같이 라이브 뷰에서 사용할 수 있는 메뉴로 더욱 강화되었습니다.

• 수정
• 서식
• 명령
• 사이트
• 편집 및 컨텍스트 메뉴의 [선택하여 붙여넣기] 옵션

라이브 뷰에서의 jQuery UI 요소에 대한 지원

이제 라이브 뷰에서 삽입 패널을 사용하여 jQuery 위젯을 바로 삽입할 수 있습니다. 삽입 패널에서 필요한 요소를 라이브 뷰로 드래그하고 마우스를 가져다 대어 다음 기능 중 하나를 사용해 삽입합니다.

• 라이브 가이드: 삽입 패널에서 필요한 요소를 드래그한 다음 라이브 뷰에서 마우스를 가져다 대면 이러한 안내선이 표시됩니다. 라이브 가이드를 사용하여 상단이나 하단에 요소를 삽입하거나 핵심 요소의 왼쪽이나 오른쪽에 삽입할 수 있습니다.

• DOM 아이콘: 라이브 가이드가 표시되는 동안 잠시 멈춰 있으면 DOM 아이콘이 표시됩니다. 아이콘을 클릭하면 팝업 창에 DOM 구조가 표시되며 문서 구조의 정확한 위치에 요소를 드롭할 수 있습니다.

• 위치 지원: 위치 지원을 통해 삽입된 요소를 앞 뒤로 배치하거나 라이브 뷰의 핵심 요소 안에 해당 요소를 중첩시킬 수 있습니다.

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

DOM 패널

이제 요소 간략히 보기가 DOM 패널로 변경되었습니다(Windows > DOM). DOM 패널은 요소 간략히 보기가 제공하던 모든 기능과 더불어 더 많은 기능을 제공합니다. 이 패널은 모든 작업 영역에서 지속적으로 사용할 수 있으며, 이는 두 개의 문서를 열고 DOM 패널을 열어 동시에 이용할 수 있다는 것을 의미합니다.

DOM 패널을 통해 다음과 같은 작업을 할 수 있습니다.

• 삽입 패널에서 요소를 드래그하여 문서 구조에 정확하게 삽입합니다.
• 문서에서 구조 요소를 복사, 붙여넣기, 복제, 이동 또는 삭제합니다.
• 문서 구조의 컨텍스트에서 페이지의 모든 요소 보기 - 핵심 요소는 DOM 패널에서 강조 표시됩니다.

DOM 패널을 사용하고 패널을 통해 HTML 구조를 편집하는 방법에 대한 자세한 내용은 DOM 패널을 참조하십시오.

HTML 문서의 SVG 코드 힌트

이제 HTML 문서에서 모든 SVG 요소와 속성에 대한 코드 힌트가 지원됩니다. 이러한 코드 힌트를 사용하여 SVG 문서에서 추가하는 것과 마찬가지로 HTML 문서의 코드 보기에서 SVG 요소를 추가할 수 있습니다.

기술 미리보기

이번 릴리스부터 Dreamweaver 팀은 고객으로부터의 피드백을 수집하는 일부 기능에 대한 미리보기를 제공합니다. 이러한 기능은 향후 피드백에 근거하여 개선될 예정이며 Dreamweaver의 핵심 기능으로 포함될 예정입니다. 환경 설정 대화 상자의 기술 미리보기 범주에서 이러한 기능에 액세스할 수 있습니다.

이번 릴리스의 미리보기 기능은 [코드 강조 표시]입니다. 이 기능은 코드 보기에서 선택한 텍스트의 모든 항목을 강조 표시합니다.

이 기능을 사용하려면 다음 단계를 수행하십시오.

아래의 키보드 단축키를 사용하여 강조 표시된 텍스트 간 이동할 수 있습니다.

• 다음 항목 선택: F3 (Win), Cmd+G (Mac)
• 이전 항목 선택: Shift+F3 (Win), Cmd+Shift+G (Mac)

ShowPreview API를 통한 코드 보기의 맞춤형 미리보기

Dreamweaver의 이번 릴리스에서는 코드 보기의 코드에 마우스를 가져다 댈 때 표시되는 맞춤형 미리보기 팝업을 생성할 수 있습니다. 맞춤형 미리보기를 구현하려면 기존의 mm:browsercontrol API와 함께 새로운 API인 showPreview를 사용합니다. 예를 들어 이들 API를 사용하여 기능 이름에 마우스를 가져다 댈 때 JavaScript 기능의 모든 매개 변수의 미리보기를 표시하도록 할 수 있습니다.

자세한 내용은 Dreamweaver API 참조: 코드 보기 기능을 참조하십시오.

코드 폴딩

이전 버전의 Dreamweaver에서 코드 보기의 코드 블록을 선택한 다음 축소해야 합니다. 이 버전과 이후 버전에서 행 번호 위로 단순히 마우스를 가져가면 삼각형이 나타나고 이를 클릭하여 코드 블록을 축소할 수 있습니다.

태그 블록을 기반으로 HTML, CSS, LESS, SASS, SCSS, JS, PHP, XML 및 SVG 파일로 코드 폴딩(축소)이 가능합니다.

복사, 잘라내기, 붙여넣기 및 드래그 앤 드롭 작업은 코드 폴딩 상태를 유지합니다. 예를 들어 축소된 코드 블록을 복사하면 붙여넣기 작업은 복사된 텍스트를 축소된 코드 블록으로 붙여 넣습니다.

이전 코드 축소 기능과는 달리 HTML 파일에서 축소된 내용은 이제 닫기 태그를 포함하며 다르게 렌더링됩니다. 이제 축소된 코드 블록에 표시되는 문자 수도 증가되었습니다. 이를 사용하여 초기 특성이 있는 경우 미리 볼 수 있습니다.

자세한 내용은 코드 축소를 참조하십시오.

Extract 개선 사항

• 디바이스용 Extract
• % 단위에 대한 지원

디바이스용 Extract

모든 디바이스는 크기뿐만 아니라 해상도도 다양합니다. 반응형 웹 디자인에 대한 계획을 수립할 때에는 디바이스에서 적절하게 렌더링되는 이미지의 다양한 해상도 버전에 대해 고려해 보아야 합니다. 그러나 프로젝트의 모든 이미지를 다양한 해상도 버전으로 일일이 제작하기란 결코 쉬운 일이 아닙니다.

Dreamweaver의 Extract는 이러한 작업을 매우 간편하게 해 줍니다. Dreamweaver의 2015 릴리스에서 Photoshop 구성 요소로부터 이미지를 추출하는 동안 해당 이미지를 다양한 해상도로 추출하도록 선택할 수 있습니다. Photoshop의 이미지는 추출하는 동안 사전 정의된 다양한 해상도로 자동 조절됩니다.

이후 JavaScript나 미디어 쿼리에서 이들 이미지를 호출하여 표시되는 디바이스에 따라 이미지를 표시할 수 있습니다. 예를 들어 고밀도 레티나 디스플레이에 대해서는 2X 버전의 이미지를 사용할 수 있습니다. 

자세한 내용은 PSD 파일에서 이미지 추출을 참조하십시오.

% 단위에 대한 지원

이제 Extract 패널에서 이미지의 폭과 높이를 픽셀 단위와 더불어 % 값으로도 볼 수 있습니다. 치수를 % 단위로도 볼 수 있습니다.

Extract 패널에서 에셋을 클릭하면 픽셀과 % 단위를 전환할 수 있는 팝업 창이 표시됩니다. 이 팝업 창에서 선택한 단위는 에셋 간 치수를 측정할 때에도 유지됩니다.

라이브 뷰 편집 개선 사항

라이브 뷰의 중첩된 삽입

이제 라이브 뷰에서 다른 요소 안에 요소를 삽입할 수 있습니다. 삽입 패널, Assets 패널 또는 라이브 뷰 내에서 요소를 드래그하여 페이지의 다른 요소에 마우스를 가져다 대면 가이드의 앞이나 뒤에 중첩되는 요소에 대한 시각적 피드백을 볼 수 있습니다.

• 전/후 가이드: 요소의 30% 상단 및 하단에 마우스를 가져다 대는 경우
• 중첩 시각적 피드백: 요소의 중앙 40%에 마우스를 가져다 대는 경우

요소 표시에서 직접 선택기 편집

이제 요소 표시에서 선택기의 이름을 간단히 클릭하여 편집할 수 있습니다. 페이지의 아무 곳이나 클릭하여 변경 사항을 적용할 수 있습니다.

코딩 툴바 변경 사항

축소 코드와 관련하여 코딩 도구 모음에서 다음 옵션이 제거되었습니다.

• 전체 태그 축소
• 선택 항목 축소

• 잘못된 코드 강조
• 알림 표시줄의 구문 오류 경고

CSS Designer 개선 사항

• 전체 및 현재 모드
• 속성 값에 대한 힌트
• 미디어 쿼리에 대한 색상 코딩
• 기타 변경 사항

전체 및 현재 모드

이제 CSS Designer는 다음과 같이 CSS 속성 보기 및 편집의 두 가지 모드를 제공합니다.

• 전체: 현재 문서의 모든 CSS, 미디어 쿼리 및 선택기가 이 모드에 열거됩니다. 이 모드는 디자인 또는 라이브 뷰의 선택에 따라 달라지지 않습니다.

CSS, 미디어 쿼리 또는 선택기를 제작하려는 경우 이 모드는 선택 사항입니다.

• 현재: 디자인 또는 라이브 뷰에서 선택된 모든 요소의 계산된 스타일이 이 모드에 열거됩니다. CSS 파일에서 선택기가 강조되는 경우 이 모드는 해당 선택기의 속성을 표시합니다.

속성 값에 대한 힌트

이제 Dreamweaver에서 속성을 새로 설정할 때 코드 보기와 유사하게 CSS Designer에 코드 힌트가 표시됩니다.

미디어 쿼리에 대한 색상 코딩

CSS Designer 패널의 미디어 쿼리는 이제 비주얼 미디어 쿼리에 맞게 색상으로 구분됩니다.

•  녹색: max-width 조건의 미디어 쿼리
•  파란색: min-width 및 max-width 조건의 미디어 쿼리
•  자주색: min-width 조건의 미디어 쿼리

기타 변경 사항

• 설정 옵션 보기: 처음으로 Dreamweaver를 실행하는 경우, 속성 섹션의 설정 보기 확인란이 기본적으로 선택되어 있습니다. 이 옵션을 변경하면(선택 또는 선택 해제) 이후의 모든 Dreamweaver 세션에 영구적으로 적용됩니다.

• 중앙에 속성 추가를 표시하는 패널 스크롤: 속성 섹션에서 +를 클릭하면 패널이 스크롤되어 속성 추가 행이 속성 패널의 중앙에 놓이게 됩니다. 속성 섹션이 너무 작으면 속성 추가 행이 패널의 맨 아래에 표시됩니다.

• 새 속성을 추가하는 동안 배경 강조 표시: 새 속성 추가 텍스트 상자가 강조되는 경우, 행은 회색 배경으로 강조 표시됩니다.

• + 및 - 버튼의 위치 변경: CSS Designer 패널의 각 창에 표시되는 + 및 - 버튼은 더 잘 보일 수 있도록 오른쪽 맨 끝에서 왼쪽으로 옮겨졌습니다.

• 맞춤형 범주 이름 변경: 맞춤형 속성에 대한 범주 이름이 “자세히”로 변경되었습니다.

테스트 서버 워크플로 변경 사항

이번 릴리스에서 테스트 서버 워크플로는 라이브 뷰에서 서버측 코드를 사용하여 문서의 편집을 간편하고 원활하게 하기 위한 목적으로 개선되었습니다.

서버 설정의 변경 사항

Dreamweaver의 이전 버전과는 달리, 이제 특정 서버를 테스트 서버나 원격 서버 둘 중 하나로 지정할 수 있습니다.  서버 설정의 사용자 인터페이스에 있는 확인란은 서버의 사양을 하나만 선택할 수 있도록 라디오 버튼으로 대체되었습니다.

이전 버전의 Dreamweaver에서 제작된 사이트를 열거나 사이트의 설정을 가져오는 경우 또는 사이트의 서버가 테스트 서버와 원격 서버 모두로 지정된 단일 서버인 경우, 서버의 중복된 항목이 생성됩니다. 이후 하나는 원격(접미어: _remote) 서버로, 다른 하나는 테스트(접미어: _testing) 서버로 표시됩니다.

동적 파일의 자동 전송

이제 Dreamweaver는 동적 문서를 열거나, 제작하거나, 변경 내용을 저장할 때 동적 문서를 자동으로 테스트 서버에 동기화합니다. Dreamweaver는 더 이상 테스트 서버 워크플로에서 [테스트 서버 업데이트] 또는 [종속 파일 올리기] 대화 상자를 표시하지 않습니다.

자세한 내용은 동적 파일의 자동 전송을 참조하십시오.

Business Catalyst 워크플로 변경 사항

Business Catalyst 확장은 폐기되었으며 Dreamweaver CC 2015 릴리스 및 이후 버전에서 더 이상 사용할 수 없습니다. Dreamweaver CC 2014.1.1이 Business Catalyst 확장과 호환되는 마지막 릴리스입니다.

Dreamweaver CC 2015 릴리스 및 이후 버전에서 Business Catalyst를 사용하려면 Dreamweaver의 SFTP 연결 옵션을 사용하십시오. 자세한 내용은 Business Catalyst 설명서를 참조하십시오.

이번 변경에 대한 공식 발표는 Business Catalyst 웹 사이트에서 확인할 수 있습니다. 

기타 변경 사항

• 삽입 패널이 일반, 레이아웃, 미디어 범주의 모든 옵션을 보다 논리적인 범주인 HTML로 그룹화하도록 재구성됩니다.

• 도움말 메뉴에서 실행되는 소규모의 둘러보기 비디오와 링크가 제거됩니다. 이 옵션은 비 영어권 지역에서 사용할 수 없습니다.

• 페이지 하단의 문서 모음 드롭다운에 표시되는 옵션이 삭제되었으며 방향, 전체 크기 및 크기 편집 옵션만 사용할 수 있습니다.