이 시리즈의 제1장에서는 Dreamweaver 사이트를 정의하여 로컬 파일 및 폴더 위치를 설정하는 방법을 살펴봅니다.
5496-create-first-website_1408x792

소개

Dreamweaver는 웹 사이트를 시각적으로 제작 및 디자인할 수 있는 탁월한 프로그램입니다. 그러나 처음 실행하는 경우 어려워 보일 수 있는데, 수많은 기능들이 제공되기 때문입니다.

총 8장으로 구성된 이 튜토리얼 시리즈는 Dreamweaver CC 2015에서 간단하면서도 세련된 웹 사이트를 제작하는 방법을 살펴보기 위해 마련되었습니다. 이 튜토리얼 시리즈에서는 사이트를 정의하고, HTML(Hypertext Markup Language) 구조를 생성하고, 텍스트 및 이미지를 추가하고, CSS(Cascading Style Sheets)를 사용하여 페이지 스타일을 지정하는 방법을 살펴봅니다.

적절한 분량의 튜토리얼 시리즈를 제공하기 위해 웹 사이트 페이지는 2페이지로 국한했지만 이 튜토리얼을 모두 완료하면 더 많은 페이지를 직접 만들 수 있는 충분한 지식을 얻을 수 있습니다.


참고: 
Dreamweaver를 사용해본 적이 없더라도 상관없지만 HTML(Hypertext Markup Language) 및 CSS(Cascading Style Sheets)에 대한 일반적인 지식이 있으면 이 시리즈에서 다루는 많은 주제를 빠르게 이해할 수 있을 것입니다. HTML 및 CSS는 모두 개방형 웹 표준으로, 이러한 기술을 배우는 데 도움이 되는 리소스는 많이 있습니다. HTML을 사용하여 페이지 구조 정의, CSS(Cascading Style Sheet) 이해, HTML 및 CSS는 기본기를 다지는 데 좋습니다.

프로젝트 개요

먼저 샘플 파일을 다운로드하여 완성된 프로젝트를 살펴봅니다.

  1. 이 페이지의 상단에 있는 링크를 클릭하여 샘플 파일을 다운로드합니다.

  2. 이 파일은 하나의 Zip 파일로 압축되어 있습니다. 데스크탑과 같이 편리한 위치에 파일 압축을 풉니다.  
    • Mac OS X의 경우 Mac Finder에 다운로드된 ZIP 파일을 클릭하면 자동으로 파일 압축이 풀어집니다.
    • Windows의 경우 다운로드된 Zip 파일을 마우스 오른쪽 버튼으로 클릭한 다음 표시되는 메뉴에서 모두 압축 해제를 선택합니다. 원하는 위치를 찾아 파일을 저장한 다음 압축 해제를 클릭합니다.
  3. 압축을 푼 파일에는 bayside라는 폴더가 있습니다. 이 폴더에는 그림 1과 같이 9개의 하위 폴더가 포함되어 있습니다.
fig01
그림 1. 샘플 파일에는 프로젝트의 각 개발 단계에 필요한 파일이 포함되어 있습니다.

    content 폴더에는 웹 페이지에 사용할 텍스트 콘텐츠가 포함되어 있고 js 폴더에는 작은 화면 해상도에서 내비게이션 메뉴를 제어하는 데 사용되는 JavaScript 파일이 포함되어 있습니다. 다른 폴더에는 이 시리즈의 각 장을 마친 후 볼 수 있는 프로젝트의 완성된 버전이 포함되어 있습니다. 이러한 파일을 통해 직접 작성한 코드를 비교 확인할 수 있습니다. 마지막 장인 제8장은 완성된 프로젝트를 웹 서버로 업로드하는 방법을 다루므로 별도의 폴더가 포함되어 있지 않습니다.

  1. part7 폴더를 열고 index.html을 브라우저로 드래그하여 봅니다. 완성된 프로젝트의 홈 페이지는 그림 2와 같이 표시됩니다.
fig02
그림 2. 완성된 프로젝트의 홈 페이지는 두 개의 열로 구성된 레이아웃으로 되어 있습니다.
  1. 브라우저 측면 중 하나를 안쪽으로 드래그하여 브라우저 크기를 조정합니다. 뷰포트가 700px 미만인 경우 레이아웃은 2열에서 1열로 변경됩니다. 내비게이션 막대는 검정 배경의 MENU로 교체됩니다. 그림 3과 같이 Golden Gate Bridge 이미지에서 상자 안에 있는 흰색 텍스트는 진한 분홍색으로 변하고 이미지 아래로 위치가 이동합니다.
fig03
그림 3. 좁아진 화면에서 페이지는 1열 레이아웃으로 변경됩니다.
  1. MENU를 클릭합니다. 반투명한 검정 배경에서 내비게이션 메뉴가 매끄럽게 내려옵니다(그림 4 참조).
fig04
그림 4. 내비게이션 메뉴가 표시되도록 펼쳐집니다.
  1. 다시 MENU를 클릭합니다. 내비게이션 메뉴가 올라가면서 표시되지 않습니다.

  2. 다시 내비게이션 메뉴를 열고 SIGHTS를 클릭하여 두 번째 페이지를 확인합니다.(다른 메뉴 항목은 더미 링크입니다.)

지금까지 이 시리즈에서 Dreamweaver CC 2015를 사용하여 만들어 볼 웹 사이트의 완성된 버전을 살펴보았습니다. 이 시리즈를 진행하는 동안 살펴볼 내용은 다음과 같습니다.

  • Dreamweaver에서 사이트 정의

  • HTML5 요소를 사용하여 웹 페이지 구조 생성

  • DOM 패널을 사용하여 페이지 구성 및 새 요소 추가

  • 페이지에 텍스트 및 이미지 추가

  • Creative Cloud Libraries에서 이미지 다운로드 및 리샘플링

  • Dreamweaver의 CSS 디자이너를 사용하여 페이지 스타일 지정

  • 동일한 방법으로 스타일이 지정된 두 번째 웹 페이지 만들기

  • 비주얼 미디어 쿼리 바를 사용하여 여러 레이아웃 제어

  • 완성된 페이지를 온라인 웹 서버에 업로드

이 과정에서 Dreamweaver 유저 인터페이스 중 가장 중요한 부분에 대해 살펴봅니다.

이 튜토리얼은 심층적인 내용을 다루므로 충분한 시간을 갖고 학습하시기 바랍니다. 각 장은 사용 방법뿐만 아니라 이유에 대한 설명이 포함된 간단한 섹션으로 구성되어 있습니다. 섹션이 끝날 때마다 잠시 시간을 갖고 해당 섹션에서 소개된 다양한 기법을 복습합니다.

참고: 이 튜토리얼 시리즈는 Dreamweaver CC 2015.2를 기반으로 작성되었으며, 이전 버전의 프로그램에서 제공되지 않는 기능을 사용합니다. 이전 버전의 Dreamweaver를 사용해도 동일한 웹 사이트를 제작할 수 있지만 이 튜토리얼에서는 Dreamweaver CC 2015.2를 사용할 것을 권장합니다. Creative Cloud를 아직 구독하지 않는 경우 무료 체험판을 사용할 수 있습니다.

Dreamweaver 작업 영역 설정

작업을 시작하기 전에 디자인 작업 영역으로 전환합니다. 그래야 이 튜토리얼에서 필요한 모든 기본 패널을 이용할 수 있습니다. Windows의 경우 화면 오른쪽 상단에 있는 작업 영역 전환기를 사용하면 됩니다(그림 5 참조).

fig05
그림 5. 작업 영역 전환기에서 디자인 작업 영역을 선택합니다.

Mac OS X의 경우 기본적으로 작업 영역 전환기는 동일한 위치에 있지만 애플리케이션 프레임을 끈 경우 화면 왼쪽에 있습니다. 애플리케이션 막대를 끄면 숨겨집니다. 또 다른 방식으로 작업 영역을 선택하려면 윈도우 > 작업 영역 레이아웃 > 디자인을 선택합니다.

Dreamweaver에서 사이트 설정

초보자가 가장 많이 하는 실수는 사이트를 정의하지 않고 웹 페이지 작업을 시작하는 것입니다. 이러한 경우 이미지 및 스타일 시트와 같은 에셋의 링크가 생성되고, 이때 링크는 로컬 컴퓨터의 한 위치에 연결됩니다. 작업하는 데 아무런 문제는 없지만, 사이트를 원격 서버에 업로드할 때 문제가 발생합니다. 이때 모든 링크가 깨지므로 이 문제를 해결해야 합니다. 사이트를 항상 정의하면 이러한 문제를 미연에 방지할 수 있습니다. 사이트 정의는 신속하고 간편합니다.

Dreamweaver에서 사이트는 로컬 컴퓨터에 저장되어 있는 웹 사이트와 관련된 모든 문서를 구성하므로 링크를 추적 및 유지하고 파일을 관리하며 사이트 파일을 웹 서버로 전송할 수 있습니다. 일반적인 Dreamweaver 사이트는 최소 두 개의 파트로 구성됩니다.

  • 로컬 폴더: 이 폴더는 작업 디렉토리로, 보통 하드 드라이브에 있는 폴더입니다.  Dreamweaver에서는 이 폴더를 로컬 사이트 루트라고 합니다.

  • 원격 폴더: 이 폴더는 컴퓨터에서 웹 서버를 실행하는 파일을 저장하는 곳입니다. 이 웹 서버는 보통(항상 그렇지는 않지만) 사이트를 웹에서 공개적으로 제공하는 컴퓨터입니다.

팁: 여러 사이트를 작업할 경우 로컬 하드 드라이브에 폴더를 만들어 사이트를 저장하는 것이 좋습니다. Mac OS X의 경우 홈 폴더에는 이미 Sites라는 폴더가 포함되어 있습니다. Windows의 경우 C 드라이브의 최상위에 Sites라는 폴더가 설정되어 있습니다. 이 시리즈에서 보여지는 스크린샷은 Windows에서 만든 것이지만 키보드 단축키 및 일부 버튼의 레이블(모두 제공)을 제외한 나머지 지침 내용은 Mac OS X와 동일합니다.

Bayside Beat 사이트를 위한 로컬 사이트 폴더 정의

먼저 사이트 이름을 입력하고 로컬 컴퓨터에 해당 파일을 저장할 위치를 지정합니다. 사이트를 인터넷상의 라이브 웹 서버에 업로드하기 전까지는 원격 폴더를 정의하지 않아도 됩니다.

  1. Dreamweaver를 시작하고 사이트 > 새 사이트를 선택합니다. 사이트 설정 대화 상자가 표시됩니다.

  2. 사이트 이름 필드에 사이트 이름으로 Bayside Responsive를 입력합니다. 이 이름은 Dreamweaver에서 내부적으로 이 사이트를 식별할 때 사용됩니다. 이름을 입력할 때 공백을 추가해도 상관없습니다.

  3. 로컬 사이트 폴더 필드 옆에 있는 폴더 아이콘을 클릭하여 다운로드한 샘플 파일에서 bayside 폴더를 찾아 선택합니다. 로컬 사이트 폴더의 파일 경로는 하드 드라이브에서 bayside 폴더가 복사되어 있는 위치에 따라 다르지만 사이트 설정 대화 상자는 이제 그림 6과 같이 표시됩니다.
fig06
그림 6. Bayside Responsive 사이트를 위한 로컬 사이트 폴더를 정의합니다.
  1. 사이트 설정 대화 상자의 왼쪽에 있는 열에서 고급 설정을 확장하고 로컬 정보를 선택합니다.

  2. 기본 이미지 폴더 필드의 오른쪽에 있는 폴더 아이콘을 클릭하여 이미지 폴더 선택 대화 상자를 엽니다.

  3. 새 폴더를 클릭합니다.(Windows의 경우 대화 상자 상단에 있고 Mac의 경우 하단에 있습니다.) 새 폴더 이미지 이름을 입력한 다음 선택하고 폴더 선택(Windows) 또는 선택(Mac)을 클릭합니다. 사이트 설정 대화 상자는 그림 7과 같이 표시됩니다.
fig07
그림 7. 기본 이미지 폴더를 설정합니다.
  1. 나머지 옵션은 기본값을 유지합니다. 문서와 관련된 링크를 사용할 것이므로 웹 URL 값은 삽입하지 않아도 됩니다.

  2. 저장을 클릭합니다.

이제 Dreamweaver의 파일 패널에 현 사이트의 새로운 로컬 루트 폴더가 표시됩니다(그림 8 참조). 파일 패널에 표시된 파일 목록은 파일 관리자 역할을 하므로 데스크탑에서 작업하는 것과 같이 파일을 복사, 붙여넣기, 삭제, 이동 및 열 수 있습니다.

fig08
그림 8. 파일 패널의 샘플 파일 및 이미지 폴더

이제 Bayside Beat 사이트의 로컬 사이트 폴더를 정의했습니다. 이 폴더는 로컬 컴퓨터에서 웹 페이지의 작업 사본을 유지하는 곳입니다. 또한 이미지를 저장할 기본 폴더도 지정했습니다. 이 기본 폴더는 사이트 루트 폴더 외부에서 이미지를 가져올 때 이미지가 자동 복사되는 곳입니다.

웹 사이트 파일 및 폴더 이름의 모범 사례

일반적인 웹 사이트에는 수많은 파일과 폴더가 포함되어 있습니다. 간편하게 유지 관리하기 위해 이러한 파일과 폴더를 논리적으로 구성하는 것이 중요합니다. 이미지, 비디오, 스타일 시트 및 외부 JavaScript 파일마다 관련된 이름으로 별도의 폴더를 만듭니다. 다음 사항을 명심하고 폴더 이름을 만듭니다.

  • 웹 사이트의 파일 및 폴더 이름에는 공백 또는 /\?%*:|"<>와 같은 특수 문자를 사용할 수 없습니다.

  • 다른 특수 문자는 허용되지만 알파벳 문자, 하이픈 및 밑줄만 사용하는 것이 좋습니다.

  • 대부분의 파일 및 폴더 이름은 웹 페이지 URL의 일부로 포함되므로 간결하고 이해하기 쉽게 지정합니다. 긴 URL은 사용자가 기억하거나 모바일 디바이스의 브라우저에서 입력하기가 어렵습니다.

  • 대다수의 웹 사이트가 대/소문자를 구분되는 Linux 서버에서 호스팅됩니다. 파일 및 폴더 이름을 모두 소문자로 사용하면 파일을 찾을 수 없다는 문제를 방지할 수 있습니다.

Creative Cloud Libraries에 프로젝트 에셋 저장

이 프로젝트의 이미지 및 색상 구성표는 공유 Creative Cloud Libraries에 온라인으로 저장됩니다. CC Libraries를 통해 언제 어디에서나 시각적 에셋에 액세스할 수 있으므로 다른 사람과 공동 작업할 때 특히 유용합니다. 예를 들어 시각적 에셋을 제작하는 사람과 실제 사이트를 제작하는 사람이 다를 수 있습니다. Dreamweaver에서 CC Libraries를 사용하는 방법에 대한 자세한 내용은 온라인 설명서를 참조하십시오.

공유 라이브러리에 있는 에셋을 직접 만든 라이브러리에 저장해야 합니다.

  1. Bayside Beat 라이브러리의 에셋을 사용합니다.

  2. 브라우저 화면 상단에 있는 Creative Cloud에 저장을 클릭하고 아직 저장하지 않았다면 공유 에셋을 Bayside 라이브러리에 저장합니다.

  3. Dreamweaver CC Libraries 패널에서 Bayside 라이브러리를 선택합니다. 그림 9와 같이 4개의 이미지와 6개의 색상 견본이 표시됩니다.
fig09
그림 9. Bayside CC Libraries의 공유 에셋

웹 페이지 만들기

Bayside Beat 웹 사이트를 처음부터 만들어 봅니다. 다운로드한 샘플 파일에는 Microsoft Word 및 RTF 파일의 텍스트 콘텐츠, JavaScript 파일, 작업 중인 파일과 비교할 수 있는 각 단계의 프로젝트 사본이 포함되어 있습니다.

그러면 이제 사이트를 구성할 두 개의 HTML 페이지를 만들어 봅니다.

  1. Dreamweaver 시작 화면이 표시되면 새로 만들기 섹션에서 HTML을 클릭합니다.또는 기본 메뉴에서 파일 > 새로 만들기를 선택합니다. 그러면 그림 10과 같이 새 문서 대화 상자가 표시됩니다.
fig10
그림 10. 새 문서 대화 상자는 다양한 유형의 파일을 만들 수 있는 옵션을 제공합니다.
  1. 왼쪽에 있는 열에서 새 문서가 선택되고 문서 유형HTML로 설정되고 프레임워크없음으로 설정되어 있는지 확인합니다.

  2. 제목 필드에 Bayside Beat: Cable Cars를 입력합니다.

  3. 문서 유형은 기본적으로 HTML5로 설정되어 있고 CSS 첨부 필드에는 아무것도 표시되지 않도록 합니다.CSS 첨부에 항목이 있는 경우 해당 항목을 선택한 다음 이 필드 오른쪽에 있는 휴지통 아이콘을 클릭합니다.

  4. 만들기를 클릭합니다. 문서 창에 빈 HTML 페이지가 생성됩니다.

  5. 필요한 경우 문서 창의 왼족 상단에 있는 분할 버튼(그림 11 참조)을 선택하여 현재 HTML 마크업을 표시합니다.
fig11
그림 11. 분할 버튼을 선택하여 문서 창에 현재 코드를 표시합니다.
  1. 문서 창(또는 라이브 뷰)은 비어 있지만 그림 12와 같이 코드 뷰에는 기본 HTML 구조가 표시되어 있습니다.
fig12
그림 12. Dreamweaver는 기본 HTML 구조를 자동 생성합니다.

    1번 줄은 브라우저에 이 문서가 HTML 파일임을 알리는 문서 유형(doctype) 선언입니다.

    HTML은 태그 기반의 언어이며, 태그는 꺾쇠 괄호 사이에 입력됩니다. 대부분의 태그는 쌍으로 구성되며, 닫는 태그는 꺾쇠 괄호를 연 다음 슬래시를 입력하면 됩니다.

    전체 페이지는 한 쌍의 <html> 태그 안에 중첩됩니다(2번 줄과 10번 줄). 2-6번줄까지의 <head> 섹션에는 브라우저의 정보가 포함됩니다. 이 페이지의 모든 콘텐츠는 <body>의 여는 태그와 닫는 태그 사이에 옵니다.

    대부분의 경우 시각 인터페이스와 대화 상자를 사용하면 필요한 모든 코드가 자동으로 생성됩니다. 그러나 다른 곳에서 코드를 복사하여 붙여넣는 경우 주의해야 합니다. 사람과 마찬가지로 HTML 페이지는 하나의 머리글(head)과 본문(body)으로 구성되어 있습니다. 콘텐츠가 라이브 뷰 또는 브라우저에 표시되지 않은 경우 콘텐츠를 본문 밖에 붙여넣었을 확률이 높습니다.

  1. 파일 > 저장을 선택하거나 키보드 단축키 Ctrl+S(Windows) 또는 Command+S(Mac)를 사용하여 파일을 저장합니다.

  2. 다른 이름으로 저장 대화 상자에서 bayside 로컬 사이트 폴더를 선택한 상태에서 index.html 파일 이름을 입력하고 저장을 클릭합니다.
  3. 이제 파일 패널에 이 파일이 표시되어 있고 문서 창의 왼쪽 상단에 있는 탭에는 파일 이름이 표시되어 있습니다.

    팁: 다른 이름으로 저장 대화 상자의 아래에 있는 사이트 루트 버튼을 클릭하여 현재 웹 사이트의 로컬 사이트 폴더로 이동할 수 있습니다.

  4. 새 HTML 파일을 만듭니다. 시작 화면은 더 이상 표시되지 않으므로 메뉴 옵션 파일 > 새로 만들기를 사용하여 새 문서 대화 상자를 엽니다. 또는 Ctrl+N(Windows) 또는 Command+N(Mac)을 누릅니다.

  5. 앞서 2단계에서 사용한 동일한 옵션을 선택합니다. 그러나 이번에는 제목 필드는 비워 두고 만들기를 클릭합니다.

  6. 이 파일을 사이트 루트 폴더 안에 sights.html로 저장합니다.

  7. 분할 뷰에서 5번 줄의 <title> 태그 사이의 값은 "무제 문서"입니다.

    이 값은 브라우저 탭 또는 제목 막대에 표시되고 검색 엔진에서도 식별됩니다. 초보자는 이 값을 변경하지 않고 그대로 두는 실수를 하는 경우가 많습니다.

    이 값을 변경하는 두 가지 방법은 다음과 같습니다.

    • 코드 뷰에서 여는 HTML 태그와 닫는 HTML 태그를 그대로 둔 채 직접 변경합니다.

    • Dreamweaver의 속성 관리자를 사용합니다. 이 기법을 사용해 봅니다.
  8. 속성 관리자는 디자인 작업 영역에서 문서 창의 하단에 있는 큰 가로 패널입니다. 필요한 경우 속성 탭을 클릭하여 앞으로 가져옵니다.(처음에는 출력 패널 뒤에 숨어 있습니다.)
  9. 문서 제목 필드에 있는 무제 문서Bayside Beat: Sightseeing으로 바꿉니다. 제목을 입력하는 동안에도 현재 HTML 구조에는 아무것도 변경되지 않습니다.

  10. 변경 내용을 적용하려면 Tab 키 또는 Enter/Return을 누릅니다. 문서 제목 필드에 입력된 값은 HTML 코드의 5번 줄에 있는 무제 문서를 대체합니다(그림 13 참조).
fig13
그림 13. 속성 관리자를 사용하여 문서 제목을 설정합니다.
  1. sights.html을 저장합니다.

Dreamweaver에서 HTML 마크업이 자동으로 생성되지만 웹 페이지를 만드는 동안 대부분 분할 뷰를 열어놓고 작업하는 것이 좋습니다. 분할 뷰를 통해 변경 내용이 올바로 적용되었는지 확인할 수 있습니다. 그렇다고 Dreamweaver가 안정성이 없다는 말은 아닙니다. 특수한 상황을 제외하고 정확하게 변경 내용이 적용됩니다. 그러나 문서의 어떤 부분을 작업하고 있는지 이해하는 것이 중요합니다. 삽입점을 잘못 추가한 경우 새 코드가 추가됩니다. 이때 주의하지 않으면 나중에 해결하지 못하는 문제에 봉착할 수 있습니다. 튜토리얼 시리즈의 다음 장에서 사용할 DOM 패널도 페이지 구조를 추적하는 데 유용할 수 있습니다.

팁: 페이지의 시각적 모양과 함께 현재 코드를 확인하려면 보기 > 수직 분할을 선택합니다. 문서 창을 다시 수평으로 분할하려면 동일한 옵션을 다시 선택합니다. 보기 메뉴에서는 라이브 뷰를 어느 쪽으로 표시할지 선택할 수 있습니다. 코드 뷰와 라이브 뷰를 분할하는 막대를 드래그하여 각 뷰의 크기를 조정합니다. Dreamweaver는 이 설정을 자동으로 인식합니다.

다음 단계로

사이트 정의를 완료하고 두 개의 빈 웹 페이지를 만들었다면 제2장: 텍스트 콘텐츠 추가 및 서식 지정에서 콘텐츠를 추가할 수 있습니다.

04/11/2018

콘텐츠 제공: David Powers, Tom Alex Buch

이 페이지가 도움이 되었습니까?