이전에 소개해드린 브라켓은 개발 버전이고 엣지 코드는 배포 버전입니다. 두 개의 에디터가 동일하지만 확장 프로그램 작동에 있어서는 차이가 나더군요. 일부는 설치를 해야 작동하는 기능도 있습니다. 엣지 코드는 크리에이티브 클라우드(Creative Cloud, 이하 CC) 형태로 사용이 가능합니다. 아래의 링크에서 CC 관리자를 내려받아 설치하세요. CC이므로 어도비 계정이 있어야합니다.
http://html.adobe.com/edge/code/
Try 버튼을 클릭하면 CreativeCloudSet-Up.exe 파일을 내려받을 수 있습니다. 간혹 안되는 경우가 있는데 아래의 링크에서 직접 내려받을 수 있습니다.
https://ccmdls.adobe.com/AdobeProducts/ASCT/1_1/win64/AAMmetadataLREFJC/CreativeCloudSet-Up.exe
설치하고 나면 위와같은 창이 나타나고 시스템 트레이에 항상 자리잡습니다. 다른 프로그램은 유료이거나 시험용으로 사용할 수 있지만 엣지코드는 무료입니다. 위 창은 설치만 가능하고 프로그램 실행은 시작버튼이나 시작 화면에서 찾아서 실행합니다. 참고로 엣지 관련 프로그램은 여러가지가 있습니다. 모두 웹디자인에 관련된 프로그램이고 아주 편리하고 쉽게 웹페이지를 디자인할 수 있도록 설계돼 있습니다.
프로그램을 실행하면 우측에 4개의 아이콘이 보입니다. 첫번째는 미리보기 기능, 두번째는 웹폰트, 세번째는 Edge Inspect CC와 연동해서 다른 기기에서 무선으로 웹페이지를 미리보기 할 수 있는 기능입니다. 네번째는 확장 프로그램 설치 기능입니다. 우선 확장 프로그램을 하나 설치해보겠습니다. 엣지코드의 경우 프로그램을 설치해야만 작동하는 기능이 있습니다. 위 코드에서 img 태그의 경로에 마우스를 올리면 썸네일 이미지가 나타나야 하는데 나오지 않고 있죠. 이미지와 색상코드 미리보기 기능입니다. 브라켓은 기본으로 설치돼있습니다.
http://forums.adobe.com/docs/DOC-3191
위의 엣지코드 확장프로그램 링크에서 Hover Preview로 검색해서 링크를 클릭하면 깃허브 개발 페이지로 이동합니다. 주소를 복사해서 아래처럼 붙여넣습니다.
우선 우측에서 아이콘을 클릭하면 확장 프로그램 관리자 창이 나옵니다. Install from... 버튼을 클릭하고 입력박스에 붙여넣습니다. 이 프로그램은 부트스트랩으로 만들어져 있어서 디자인이 부트스트랩 스타일입니다.
설치를 하고 img 태그의 이미지 경로에 마우스를 올리면 썸네일이 나옵니다. 위처럼 스타일시트의 색상코드에도 작동합니다.
이 에디터의 큰 장점인 미리보기에 대해 알아보겠습니다. html 파일을 열고 번개 아이콘을 클릭하면 크롬 브라우저가 나타면서 현재 작업중인 화면이 보입니다. 더구나 코드 내부의 일정 지점을 클릭하면 웹브라우저의 해당 부분이 하이라이트 됩니다.
원하는 곳을 수정하고 저장하면 웹브라우저에서 새로고침을 하지 않아도 바로 나타납니다. 라이브리로드(LiveReload) 기능이죠. 자동 새로고침 기능은 번개 아이콘이 우선 노란색으로 활성화돼있어야 합니다.
이번에는 인라인 편집에 대해 알아보겠습니다. 인라인 편집이란 html 코드에서 직접 스타일시트를 수정할 수 있는 것을 말합니다. 우선 태그내부를 선택해야합니다. 여기서는 h1 태그를 선택하고 Ctrl+E 키를 누르면 해당 태그 바로 아래에 스타일시트 편집 창이 나옵니다. 색상을 빨간색으로 수정했습니다. 코드가 완성되면 색상이 바로 적용됩니다. 마음에 들면 저장합니다. 다시 Ctrl+E 키를 누르면 창이 사라집니다.
여러곳에서 창을 띄워 편집할 수도 있습니다. 스타일시트를 열고 해당 부분을 찾느라고 헤메일 필요가 없습니다.
이상으로 간략하게 브라켓과 엣지코드의 독특한 기능에 대해 알아봤습니다. 현재 계속 개발 중이므로 있어야할 기능은 추가될 것으로 보입니다. 다음에는 웹폰트와 엣지 인스펙트 기능에 대해 알아보겠습니다.
확장 프로그램이 매니저를 통해 자동으로 설치가 안된다면 다음과 같이 하세요. 그림 설명은 필요없으니 설명으로만 합니다.
1. 메뉴에서 Help->Show Extension Folder 를 클릭하면 다음의 경로가 열립니다.
C:\Users\kim\AppData\Roaming\Adobe\Edge Code CC\extensions
2. user 폴더로 들어가서 이곳에 내려받은 zip 파일을 풀어줍니다.
3. 그런다음 Edge Code CC를 닫고 다시 연 다음 익스텐션 매니저로 들어가면 나타납니다.
Brackets도 마찬가지 방법으로 하면 됩니다.
