Dreamweaver CC 2017 (2016년 11월 릴리스)

Dreamweaver가 코드 작업을 하는 웹 디자이너를 위해 새롭게 단장되었습니다. 이제 완전히 새로운 기능의 코드 편집기, 어두운 테마를 선택할 수 있는 보다 직관적인 사용자 인터페이스 및 CSS 프리프로세서와 같은 새로운 워크플로에 대한 지원을 포함하는 다양한 개선 사항이 적용되어 이전보다 집중적이고 효율적이며 더욱 빨라졌습니다.

새로운 기능 및 개선 사항에 대한 간단한 소개를 살펴보십시오.

Dreamweaver CC의 이전 릴리스에 도입된 기능에 대한 요약은 기능 요약 | Dreamweaver CC 2015 릴리스를 참조하십시오.


완전히 새로운 기능의 코드 편집기

코딩 작업을 빠르고 효율적으로 진행할 수 있도록 Dreamweaver에서 코드 편집기의 생산성과 관련된 다양한 개선 사항이 적용되었습니다.

신규 사용자는 코드 힌트를 통해 HTML, CSS 및 기타 웹 표준을 학습할 수 있으며 자동 들여쓰기, 코드 색상 표시 및 크기 조정이 가능한 글꼴과 같은 시각적 보조 도구를 사용하여 오류를 줄이고 코드를 읽기 쉽게 작성할 수 있습니다. 

코드 힌트

Dreamweaver의 코드 힌트 기능은 선택한 코드에 대해 유용한 정보 제공할 수 있도록 개선되었습니다.

Dreamweaver의 이전 버전에서는 오른쪽 꺾쇠 괄호를 입력하면 관련 코드에 대한 드롭다운 목록이 표시되었습니다.

이번 릴리스에서는 관련 코드를 가져오기만 하는 것이 아니라 Dreamweaver 자체 내의 HTML, CSS 및 기타 웹 기술에 대해 작업 속도를 빠르게 높일 수 있은 추가 정보를 확인할 수 있습니다. 

향상된 코드 힌트
향상된 코드 힌트

자세한 내용은 코드 힌트 및 코드 완성을 참조하십시오.

코드 표시 개선

가독성 향상을 위해 코드의 전체적인 모습이 개선되었습니다. 코드 서식 지정, 코드 색상 표시 및 글꼴 크기에서 개선 사항을 확인할 수 있습니다.

코드 서식 지정

코드 작성 시 잘못된 수동 들여쓰기를 방지하고 가독성을 향상시키기 위해 Dreamweaver가 자동으로 코드 들여쓰기를 수행합니다. 

코드 색상 표시

Dreamweaver가 다양한 유형의 파일에 대한 코드 색상 표시를 지원합니다.

이제 Dreamweaver가 TML, JS, CSS, PHP, XML, LESS, Sass, SCSS, SVG, Bash, C, C#, C++, clojure, CoffeeScript, Dart, Diff, EJS, Embedded Ruby, Groovy, Handlebars, Haskell, Haxe, Java, JSON, Lua, Markdown, Markdown (GitHub), Perl, Properties, Python, RDF Turtle, Ruby, Scala, SQL, Stylus, Text, VB, VBScript, XML 및 YAML에 대해 코드 색상 표시를 지원합니다. 

코드 보기의 상태 표시줄에서 직접 다른 유형의 파일에 대한 구문 강조 표시를 바꿀 수 있습니다.

글꼴 크기 조정

아래의 키보드 단축키를 사용하여 코드 보기 모드를 종료하지 않고도 글꼴 크기를 조정할 수 있습니다.

  • Ctrl++(Win) 또는 Cmd++(Mac): 글꼴 크기 증가
  • Ctrl+-(Win) 또는 Cmd+-(Mac): 글꼴 크기 감소
  • Ctrl+0(Win) 또는 Cmd+0(Mac): 기본 글꼴 크기로 재설정

이러한 모든 변경 사항에 대한 자세한 내용은 Dreamweaver의 코딩 환경을 참조하십시오.

CSS 프리프로세서 지원

Dreamweaver가 이제 Sass, Less 및 SCSS와 같은 일반적인 CSS 프리프로세서에 대한 코드 색상 표시, 코드 힌트 및 컴파일 기능을 지원해 시간을 절약하고 더 깔끔한 코드를 만들 수 있습니다.

CSS 프리프로세서 지원
CSS 프리프로세서 지원

Dreamweaver의 CSS 프리프로세서 지원에 대한 자세한 정보는 CSS 프리프로세서를 참조하십시오.

브라우저에서 실시간 미리보기

브라우저를 수동으로 새로 고치지 않고도 실시간으로 브라우저에서 코드 변경 내용을 빠르게 미리 볼 수 있습니다. 이제 Dreamweaver가 브라우저와 연결되어 페이지를 다시 불러오지 않고도 변경 내용을 브라우저에 즉시 표시합니다. 

브라우저에서 실시간으로 변경 사항 미리보기
브라우저에서 실시간으로 변경 사항 미리보기

자세한 내용은 실시간 미리보기를 참조하십시오.

관련 코드 파일의 빠른 편집

코드를 빠르게 변경하려면 특정 코드 스니펫 위에 커서를 놓고 컨텍스트 메뉴를 사용하거나 Ctrl-E(Windows) 또는 Cmd-E(Mac) 키를 눌러 빠른 편집에 액세스하면 됩니다.

Dreamweaver가 상황에 맞는 코드 옵션과 인라인 툴을 표시합니다.

자세한 내용은 빠른 편집을 참조하십시오.

여러 파일이나 탭을 열지 않고 빠르게 관련 코드 편집
여러 파일이나 탭을 열지 않고 빠르게 관련 코드 편집

상황에 맞는 CSS 설명서

Dreamweaver가 코드 보기 내에서 바로 CSS 속성에 대해 상황에 맞는 설명서를 제공합니다.

이제 CSS 속성에 대해 알아보거나 참조하기 위해 Dreamweaver 외부의 웹 페이지를 탐색할 필요가 없습니다. Ctrl+K(Windows) 또는 Cmd+K(Mac)를 눌러 CSS 관련 도움말을 가져올 수 있습니다.

Dreamweaver 코드 보기 인터페이스 내 CSS에 대한 빠른 문서
Dreamweaver 코드 보기 인터페이스 내 CSS에 대한 빠른 문서

자세한 내용은 상황에 맞는 CSS 설명서를 참조하십시오.

코드 작성 및 편집을 위한 다중 커서

다중 커서를 사용하여 여러 줄의 코드를 동시에 작성할 수 있습니다. 

이 기능을 사용하면 동일한 내용의 코드를 여러 번 반복하여 작성하지 않아도 되므로 생산성이 크게 향상됩니다.

다음과 같은 방법으로 다중 커서를 불러올 수 있습니다.

  • 연속되는 여러 줄에 커서를 추가하려면 Alt 키를 누른 상태에서 세로 방향으로 드래그합니다. 
  • 비연속적인 여러 줄에 커서를 추가하려면 Ctrl 키를 누르고 커서를 배치할 각각의 줄을 클릭합니다.
  • 연속적인 여러 줄에 있는 텍스트를 선택하려면 Alt 키를 누르고 대각선 방향으로 드래그합니다.
  • 비연속적인 여러 줄에 있는 텍스트를 선택하려면 일부 텍스트를 선택한 다음 Ctrl 키(Windows) 또는 Cmd 키(Mac)를 누른 상태로 계속해서 항목을 선택합니다. 

자세한 내용은 다중 커서를 사용하여 코드 작성 시간 단축을 참조하십시오.

최신 사용자 인터페이스

Dreamweaver가 보다 직관적이고 맞춤화된 인터페이스, 사용이 더욱 간편해진 메뉴 및 패널, 필요한 도구만 표시해 주는 상황에 맞고 구성 가능한 툴바로 새롭게 단장되었습니다.

새로운 인터페이스는 또한 연한 색부터 어두운 색에 이르기까지 4개 수준의 대비를 제공하므로 보다 손쉽게 코드를 읽고 편집할 수 있습니다.

아래는 새로운 사용자 인터페이스의 전과 후 스냅샷입니다.

사용자 인터페이스 - Dreamweaver 2015 릴리스

새로운 사용자 인터페이스 - Dreamweaver CC 2017 릴리스


메뉴, 작업 영역 및 툴바 변경 사항

이번 릴리스에서는 Dreamweaver의 메뉴, 툴바 및 작업 영역도 새롭게 단장되었습니다. 이러한 변경 사항을 아래에서 소개합니다.

작업 영역 변경 사항

Dreamweaver 인터페이스가 다음과 같은 기본 작업 영역을 포함하도록 최적화되었습니다.

  • 개발자 작업 영역

이 작업 영역은 최소화되어 있으며, 기본적으로 파일 또는 스니펫 패널처럼 웹 사이트를 코딩하는 개발자에게 필수적인 패널들만 포함합니다.

  • 표준 작업 영역 

이 작업 영역은 파일, CC Libraries, CSS Designer, 삽입, DOM, Assets 및 스니펫 패널 등 코드 및 디자인으로 작업할 때 필요한 모든 항목을 포함합니다.

참고:

작업 영역을 선택한 다음 필요한 패널을 추가하거나 제거함으로써 이를 맞춤화할 수 있습니다. 작업 영역 맞춤화에 대한 자세한 내용은 사용자 정의 작업 영역 만들기를 참조하십시오.

다음은 Dreamweaver CC 2015와 Dreamweaver CC 2017에서 제공하는 작업 영역의 차이를 요약한 것입니다.

Dreamweaver CC 2015

  • 초보자
  • 코드
  • 기본값
  • 디자인
  • Extract

Dreamweaver CC 2017

  • 개발자
  • 표준

작업 영역의 변경 사항에 대한 자세한 내용은 Dreamweaver 작업 영역을 참조하십시오.

메뉴 변경 사항

응용 프로그램 메뉴에서 드물게 사용되는 메뉴와 기타 항목이 제거되어 보다 직관적으로 메뉴를 찾을 수 있도록 새롭게 개선되었습니다.

Dreamweaver의 응용 프로그램 메뉴에 대한 변경 사항과 관련하여 보다 자세한 내용은 새롭게 디자인된 메뉴를 참조하십시오.

툴바 변경 사항

이제 모든 보기 모드에서 툴바가 표시됩니다. 툴바에는 현재 작업 중인 보기 모드에서 필요한 도구들만 표시됩니다.

그러나 필요한 경우 툴바를 맞춤 설정하여 원하는 도구 세트가 표시되도록 할 수 있습니다. 

자세한 내용은 툴바 개요를 참조하십시오.

상태 표시줄 변경 사항

이제 코드 보기에서 작업할 때 상태 표시줄에 유용한 정보가 표시됩니다. 

이제 다음 작업을 수행할 수 있습니다.

  • INS(삽입) 및 OVR(덮어쓰기) 모드 간 토글
  • 화면 하단에서 행 및 열 번호를 확인할 수 있습니다. 이들 번호는 마우스가 위치하는 행 및 열을 가리킵니다.
  • 다양한 유형의 코드 파일에 대해 원하는 코드 색상 표시를 선택할 수 있습니다.

자세한 내용은 상태 표시줄 개요를 참조하십시오.

스니펫 패널 변경 사항

이제 스니펫 패널의 모양이 깔끔하며 스니펫을 더 쉽게 삽입할 수 있도록 프로세스 디자인도 변경되었습니다.

다음 이미지는 스니펫 패널에 적용된 주요 변경 사항을 보여 줍니다.

스니펫 패널의 UI 변경
스니펫 패널의 UI 변경

이전 버전의 Dreamweaver에서는 키보드 단축키를 사용하여 스니펫을 삽입해야 했습니다.

키보드 단축키를 사용하여 스니펫을 삽입하는 것은 다음과 같은 이유로 인해 효율적인 프로세스라고 할 수 없습니다.

  • 비직관적인 단축키를 암기해야 함
  • 제품 키보드 단축기와 충돌 가능

이번 Dreamweaver 버전에서는 트리거 키를 사용해 코드 스니펫을 삽입할 수 있습니다.

트리거 키는 코드 스니펫에 할당된 사용자 친화적인 문자열입니다. 예를 들어 mailto 링크를 생성하는 코드 스니펫에 대해 “mailto”를 입력하고 해당 트리거 키를 만들 수 있습니다.

트리거 키를 할당한 후 문서에 커서를 놓고 “mailto”를 입력한 다음 Tab 키를 누릅니다. 그러면 Dreamweaver가 문서에 관련 코드 스니펫을 삽입합니다.

스니펫 패널에 대한 자세한 내용은 스니펫으로 코드 재사용을 참조하십시오.

파일 패널 변경 사항

파일 패널이 보다 간편하고 직관적으로 사용할 수 있도록 새롭게 단장되었습니다.

가장 단순한 형태로 파일 패널은 컴퓨터의 로컬 파일 목록을 표시합니다. 파일 패널로 좀 더 작업을 하면 사이트 설정, 원격 서버에 대한 연결 설정, 체크인 및 체크아웃 활성화 등 추가 옵션이 나타납니다.

파일 패널에 적용된 변경 사항에 대한 자세한 내용은 새로운 디자인의 파일 패널을 참조하십시오.

시작 화면 및 시작 환경에 대한 변경 사항

Dreamweaver를 실행할 때나 모든 Dreamweaver 문서를 닫을 때 새로운 시작 작업 영역이 표시됩니다. 이 시작 작업 영역을 통해 최근에 사용한 파일, 라이브러리 및 스타터 템플릿에 간편하게 액세스할 수 있습니다.

이전 대화 상자를 선호하는 경우에는 Ctrl/Cmd + O를 입력하여 열기 대화 상자를 실행하거나 Ctrl/Cmd + N을 입력하여 새 문서 대화 상자를 실행할 수 있습니다.

Dreamweaver CC 2017 작업 영역에서의 작업 속도를 높이기 위한 새로운 시작 환경을 사용할 수 있습니다. 간략하게 맞춤화 환경을 거치고 나면 나에게 적합한 작업 영역 및 테마 옵션이 표시됩니다. 

자세한 내용은 Dreamweaver 작업 영역을 참조하십시오.

찾기 및 바꾸기에서의 실시간 강조 표시

새롭고 세련된 [찾기 및 바꾸기] 툴바가 화면의 다른 부분을 가리지 않고 상단에 위치합니다.

이전 버전의 Dreamweaver와 비교했을 때 [찾기 및 바꾸기]가 더욱 빠르고 효율적으로 개선되었습니다. 이제 [찾기] 패널에서 텍스트를 입력하면 Dreamweaver가 해당 문자열을 검색하고 현재 문서에 있는 문자열의 모든 인스턴스를 강조 표시합니다. 

자세한 내용은 텍스트 찾기 및 바꾸기를 참조하십시오.

Creative Cloud Assets 개선 사항

Creative Cloud Libraries에 포함된 파일, CC 데스크탑 제품을 사용하여 제작한 에셋, 모바일 프로젝트 등 각종 에셋을 보관 및 복구하며 주석을 추가하거나 Creative Cloud에 저장되어 있는 모든 에셋의 버전 내역을 확인할 수 있습니다.

충돌 후 파일의 자동 복구

시스템 오류, 정전 또는 기타 문제로 인해 Dreamweaver가 예기치 않게 중단되는 경우, 편집 중이던 파일에 저장되지 않은 모든 변경 내용을 복구할 수 있습니다.

자세한 내용은 파일 자동 복구를 참조하십시오.

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

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