이 시리즈의 제8장이자 마지막 장에서는 원격 사이트를 설정하여 웹 사이트를 게시하는 방법을 살펴봅니다.
5496-create-first-website_1408x792


참고:
샘플 파일에는 Creative Cloud Libraries 전체 세트와 이 튜토리얼 시리즈에서 사용할 프로젝트 파일이 포함되어 있습니다. 제1장에서 만든 시작 파일을 계속 사용하거나 각 섹션과 관련된 폴더에 포함된 시작 파일을 사용할 수 있습니다.

소개

간단한 웹 사이트를 만드는 방법에 대한 튜토리얼 시리즈의 제8장이자 마지막 장을 시작합니다. 이 튜토리얼에서는 Dreamweaver에서 원격 사이트를 설정하는 방법을 살펴봅니다. 원격 사이트는 로컬 파일이 사본이 저장되어 있는 원격 컴퓨터의 웹 서버입니다. 사용자는 브라우저에서 페이지를 볼 때 원격 사이트에 액세스합니다.

이 튜토리얼은 원격 서버에 연결할 수 있는 방법의 다양한 예제를 제공합니다. 다양한 문제 해결 방법이 포함되어 있는데, 원격 서버 구성 방식에 따라 다릅니다. 질문이 있는 경우 호스팅 제공업체의 헬프 데스크 또는 해당 시스템 관리자에게 문의하십시오.

원격 사이트란?

웹 사이트를 만들었다면 다음으로 파일을 원격 서버에 업로드하여 게시합니다. 원격 서버는 바로 테스트, 제작, 공동 작업 및 게시(환경에 따라 다름)를 위해 파일을 저장하는 곳입니다.

다음 단계를 진행하기 전에 호스팅 업체의 서버, 클라이언트 소유 서버 또는 사내 인트라넷 서버와 같은 원격 웹 서버에 액세스해야 합니다. 또한 일부 인터넷 서비스 제공업체(ISP)는 인터넷 연결 계약의 일부로 무료 웹 공간에 대한 이용 권한을 제공하기도 합니다. 이러한 서버에 대한 이용 권한이 없는 경우 ISP, 클라이언트, 해당 시스템 관리자 또는 웹 호스팅 패키지 서비스를 제공하는 호스팅 업체에 문의하십시오. 일부 호스팅 패키지 서비스가 무료로 제공되기도 하지만 보통 사이트에 광고를 삽입해야 하는 경우가 많습니다. 광고 없는 패키지 서비스의 경우 한 달에 몇천 원만 지불하면 됩니다.

또한 다음 단계를 진행하기 전에 로컬 사이트를 정의해야 합니다. 자세한 내용은 이 튜토리얼 시리즈의 제1장인 프로젝트 개요 및 사이트 설정을 참조하십시오.

참고: Dreamweaver 사이트에 대한 자세한 내용은 Dreamweaver 도움말에서 사이트의 로컬 버전 설정을 참조하십시오.

원격 서버 정의

Dreamweaver 사이트 관리는 로컬 파일이 인터넷상의 라이브 사이트와 정확하게 같아야 한다는 원칙을 기반으로 합니다. 따라서 bayside 폴더 안에 있는 index.html은 원격 사이트의 맨 앞 페이지가 됩니다. 덮어쓰지 않을 라이브 웹 사이트가 이미 있는 경우 사이트의 컨트롤 패널에서 bayside라는 폴더를 만들어 Bayside Beat 파일을 업로드할 수 있습니다.

  1. Dreamweaver에서 사이트 > 사이트 관리를 선택합니다.

  2. 사이트 관리 대화 상자에서 Bayside Responsive 사이트를 선택합니다.

    Bayside Responsive 사이트를 정의하지 않은 경우 사이트의 로컬 폴더를 만들고 다음 작업을 진행합니다. 자세한 내용은 이 튜토리얼 시리즈의 제1장인 프로젝트 개요 및 사이트 설정을 참조하십시오.

  3. 사이트 관리 대화 상자의 왼쪽 하단에 있는 편집 아이콘을 클릭합니다(그림 1 참조).
fig01
그림 1. 편집 아이콘을 클릭하여 사이트 설정을 변경합니다.
  1. 사이트 설정 대화 상자에서 서버를 클릭하여 패널을 열고 서버 정의를 추가합니다(그림 2 참조).
fig02
그림 2. 사이트 설정 대화 상자의 서버 패널

Dreamweaver CC를 사용하면 원격 서버와 테스트 서버에 대한 여러 서버 정의를 설정할 수 있습니다. 언제든지 각 유형 중 하나만 활성화할 수 있습니다.

  1. 패널의 왼쪽 하단에 있는 + 버튼을 클릭하여 원격 서버 정의를 추가합니다. 새 패널이 표시되면 서버 세부 정보를 입력합니다(그림 3 참조).
fig03
그림 3. 이 패널에서 기본 서버 세부 정보를 입력합니다.
  1. 서버 이름 텍스트 상자에서 서버의 이름을 입력합니다. 서버를 식별하기 위해 Dreamweaver에서 내부적으로 사용되므로 원하는 이름을 선택할 수 있습니다. 예를 들어 클라이언트의 승인을 위해 파일을 업로드하는 서버나 라이브 사이트를 위한 다른 서버에 대한 정의를 생성할 수 있습니다. 서버가 하나밖에 없으므로 Remote Server라고 입력합니다.

  2. 다음을 사용하여 연결 팝업 메뉴에서 서버에 연결하기 위해 사용할 방법을 선택합니다.

    인터넷에서 서버에 연결하는 데 가장 일반적으로 사용하는 방법은 FTP, SFTP 및 FTP over SSL/TLS(일명 FTPS)입니다. 각 방법의 약자는 서로 유사하므로 혼동하기 쉽습니다. 어떤 방법을 선택해야 할지 모르는 경우 호스팅 업체 또는 서버 시스템 관리자에게 문의하십시오. 원격 서버가 지원하는 방법에 따라 선택이 제한됩니다.

    방법을 선택했다면 관련 섹션에 있는 지침을 따릅니다.

FTP를 통한 연결

FTP는 File Transfer Protocol의 약어로, 원격 서버에 연결할 수 있는 가장 기본적인 방법입니다. FTP는 다른 방법보다 안전하지 못하므로 원격 서버가 SFTP 또는 FTPS를 지원하지 않는 경우에만 사용해야 합니다.

  1. 해당 필드에 서버의 FTP 주소(예: ftp.yourdomain.com)를 입력합니다.

  2. FTP의 기본 포트는 21입니다. 원격 서버의 관리자가 다르게 알려준 경우에만 포트 필드 값을 변경합니다.

  3. 해당 필드에 사용자 이름 및 암호를 입력합니다.

  4. 테스트를 클릭하여 연결을 테스트합니다.

    연결이 되지 않으면 사용자 이름 및 암호가 올바로 입력되었는지 확인합니다. 암호는 보통 대소문자를 구분하므로 Caps Lock 키가 켜져 있지 않은지 확인합니다. 그래도 문제가 해결되지 않으면 이 페이지 하단에 있는 문제 해결 섹션을 참조하십시오.

  5. Dreamweaver는 자동으로 암호 저장 상자에 체크 표시합니다. 이 체크 상자를 선택 해제하면 Dreamweaver가 서버에 연결할 때마다 암호를 입력하라는 메시지가 표시됩니다.

  6. 이 페이지 하단에서 설명한 것과 같이 루트 디렉토리와 웹 URL의 세부 정보를 입력합니다.

SFTP를 통한 연결

SFTP는 Secure File Transfer Protocol의 약어로, FTP와 동일한 방식으로 작동하지만 서버 연결 시 암호를 사용하므로 더욱 안전합니다. SFTP를 사용하면 Dreamweaver는 사용자 이름 및 암호 또는 개인 키 파일을 통해 원격 서버에 대한 로그 옵션을 제공합니다.

  1. 다음을 사용하여 연결 드롭다운 메뉴에서 SFTP를 선택합니다.

  2. 해당 필드에 서버의 FTP 주소(예: ftp.yourdomain.com)를 입력합니다.

  3. SFTP의 기본 포트는 22입니다. 원격 서버의 관리자가 다르게 알려준 경우에만 포트 필드 값을 변경합니다.

  4. 기본 인증 방법은 사용자 이름 및 암호를 사용하는 것입니다. 해당 필드에 값을 입력합니다(그림 4 참조).
fig04
그림 4. SFTP를 통해 연결하는 일반적인 방법은 사용자 이름 및 암호입니다.
  1. 개인 키 파일 라디오 버튼을 선택하면 그림 5와 같이 옵션이 변경됩니다.
fig05
그림 5. 개인 키 파일을 사용한 연결 옵션은 다양합니다.

서버가 개인 키 파일을 사용한 연결을 지원하면 사용자 이름 필드에 사용자 이름을 입력한 다음 식별 파일 필드 오른쪽에 있는 폴더 아이콘을 클릭하여 개인 키 파일의 로컬 버전을 검색합니다.

일부 서버는 암호문구를 요구합니다. 필요한 경우 해당 필드에 암호문구를 입력합니다. Dreamweaver는 암호문구 저장 체크 상자를 자동 선택합니다. 이 체크 상자를 선택 해제하면 Dreamweaver가 서버에 연결될 때마다 암호문구를 묻는 메시지가 표시됩니다.

  1. 테스트를 클릭하여 원격 서버에 성공적으로 연결할 수 있는지 확인합니다.

    연결이 되지 않으면 모든 정보가 올바로 입력되었는지 확인합니다. 암호 및 암호문구는 보통 대소문자를 구분하므로 Caps Lock이 켜져 있는지 확인합니다.

  2. 이 페이지 하단에서 설명한 것과 같이 루트 디렉토리와 웹 URL의 세부 정보를 입력합니다.

FTPS(FTP over SSL/TLS)를 통한 연결

FTPS는 SFTP보다 안전한 최신 표준으로, SSL(Secure Sockets Layer) 또는 TLS(Transport Layer Security)를 통해 원격 서버로 연결합니다. 서버의 인증 정보를 확인하기 위해 높은 수준의 보안을 제공합니다. 즉, 서버의 보안 인증서를 확인하여 알려진 서버에 연결하는지 확인합니다.

  1. 다음을 사용하여 연결 드롭다운 메뉴에서 FTP over SSL/TLS를 선택하는데, 두 가지 옵션이 있습니다.

    • 암시적 암호화: 서버가 보안 요청을 수신하지 않으면 연결을 종료합니다.
    • 명시적 암호화: 서버가 보안 요청을 수신하지 않으면 안전하지 않은 트랜잭션으로 진행하거나 연결을 종료/제한합니다. 이 서버는 포트 21로 연결됩니다.

두 옵션 중 하나를 선택하면 그림 6과 같이 양식이 표시됩니다.

fig06
그림 6. FTPS는 서버 보안 인증서를 확인합니다.
  1. 해당 필드에 서버의 FTP 주소(예: ftp.yourdomain.com)를 입력합니다.

  2. 암시적 암호화는 포트 990을 통해 연결하지만 명시적 암호화는 포트 21을 사용합니다. 원격 서버의 관리자가 다르게 알려준 경우에만 포트 필드 값을 변경합니다.

  3. 해당 필드에 사용자 이름 및 암호를 입력합니다.

  4. 인증 드롭다운 메뉴에서 서버의 보안 인증 확인 방법을 선택하는데, 두 가지 옵션이 있습니다:

    • 신뢰할 수 있는 서버: 신뢰할 수 있는 인증 기관에서 발급한 서버 인증서인 경우 이 옵션을 선택합니다.
    • 없음: 서버가 자체 서명된 인증서를 보유하고 있는 경우 이 옵션을 선택합니다. 인증서는 처음 연결할 때 표시됩니다. 인증서의 인증 정보에 동의하면 인증서가 Dreamweaver의 신뢰할 수 있는 사이트 인증서 스토어에 추가됩니다.
       
  5. 테스트를 클릭하여 연결을 테스트합니다.

연결이 되지 않으면 사용자 이름 및 암호가 올바로 입력되었는지 확인합니다. 암호는 보통 대소문자를 구분하므로 Caps Lock 키가 켜져 있지 않은지 확인합니다. 그래도 문제가 해결되지 않으면 이 페이지 하단에 있는 문제 해결 섹션을 참조하십시오.

  1. Dreamweaver는 자동으로 암호 저장 상자에 체크 표시합니다. 이 체크 상자를 선택 해제하면 Dreamweaver가 서버에 연결할 때마다 암호를 입력하라는 메시지가 표시됩니다.

  2. 다음 섹션에서 설명한 것과 같이 루트 디렉토리와 웹 URL의 세부 정보를 입력합니다.

루트 디렉토리 및 웹 URL 설정

루트 디렉토리에 입력해야 하는 값은 많은 사람들이 실수하는 부분이며 호스팅 업체 및 서버 관리자가 서로 다른 정책을 가지고 있으므로 정확한 지침을 제공하기가 어렵습니다. 루트 디렉토리의 값은 서버에 로그인한 다음 index.html을 설치할 폴더로 이동하기 위해 입력해야 하는 경로입니다.

Bayside Beat 홈 페이지를 웹 사이트의 맨 앞 페이지로 설정할 경우 index.html이 원격 서버의 사이트 루트 경로여야 합니다. 일부 서버의 경우 public_html이 됩니다. 다른 서버는 www, wwwroot 또는 심지어 전혀 사용하지 않을 수도 있습니다. 예를 들어 원격 서버는 /home/username/public_html여야 합니다. 질문이 있는 경우 호스팅 업체 또는 서버 관리자에게 문의하십시오.

Bayside Beat 홈 페이지를 bayside라는 하위 폴더에 포함시키려면 이 폴더의 경로를 입력합니다. 예를 들어 서버는 /home/username/public_html/bayside_beat일 수 있습니다.

웹 URL 필드에는 루트 디렉토리로 정의한 폴더의 URL이 포함되어야 합니다. 예를 들어 http://www.example.com/ 또는 http://www.example.com/bayside/입니다. Dreamweaver는 정확한 값을 추측하고 시도하지만 추측에 불과합니다. 기본값을 적용하기 전에 반드시 신중하게 검토하십시오.

SFTP를 통해 연결하는 경우 설정은 그림 7과 같습니다.

fig07
그림 7. SFTP를 통해 원격 서버에 연결하기 위한 설정

고급 옵션 설정

대부분의 경우 서버에 대한 고급 옵션을 변경하지 않아도 되지만 서버 정의를 저장하기 전에 잠시 살펴봅니다.

  1. 패널의 상단에 있는 고급 버튼을 클릭하여 고급 옵션을 표시합니다(그림 8 참조).
fig08
그림 8. 고급 서버 옵션
  1. 동기화 정보 유지가 기본적으로 선택되어 있는데, 원격 서버의 파일이 마지막으로 업데이트되는 시기를 추적하고 이를 통해 사이트 동기화 기능을 사용할 수 있습니다(Dreamweaver 도움말에서 파일 동기화 참조).

  2. 저장할 때 서버에 자동으로 파일 업로드를 선택하면 라이브 파일이 전부 덮어 쓰이므로 사용하지 않는 것이 좋습니다. 실수하면 원격 사이트에 바로 표시되므로 모두가 볼 수 있습니다.

  3. 파일 체크 아웃 활성화는 팀 환경에서 사용합니다. 이 옵션을 선택하면 한 번에 한 사람만이 페이지를 편집할 수 있습니다(Dreaweaver 도움말에서 파일 체크인 및 체크아웃 참조).

  4. 테스트 서버: 이 옵션은 PHP, ASP.NET 또는 ColdFusion과 같은 서버 측 기술을 이용하는 웹 사이트의 테스트 서버를 정의하는 경우에만 적용됩니다.

  5. 저장을 클릭하여 서버 정의를 등록합니다. 사이트 설정 대화 상자의 서버 패널이 표시되고 서버 정의가 표시됩니다(그림 9 참조).
fig09
그림 9. 원격 서버는 사이트 설정 대화 상자에 등록되어 있습니다.

Dreamweaver는 원격 라디오 버튼을 자동으로 선택합니다.

서버 패널의 하단에 있는 아이콘을 선택하면 또 다른 서버를 추가하거나 선택한 서버 정의를 삭제, 편집 또는 사본을 만들 수 있습니다. 다른 서버에 연결하기 위해 몇 가지 세부 정보만을 변경해야 하는 경우 사본이 유용합니다.

한 사이트에 여러 원격 서버를 정의할 수 있지만 원격 열에 있는 해당 라디오 버튼을 선택하여 한 번에 하나의 서버에만 연결할 수 있습니다.

  1. 저장을 클릭하여 사이트 설정 대화 상자를 닫은 다음 완료를 클릭하고 사이트 관리 대화 상자를 닫습니다.

로컬 파일 업로드

원격 웹 서버에 로컬 폴더의 파일을 업로드하여 공개적으로 페이지에 액세스하도록 할 수 있습니다.

  1. 현 사이트에서 모든 파일을 빠르게 업로드할 수 있는 방법은 파일 패널의 상단에 있는 사이트의 로컬 루트 폴더를 선택하는 것입니다. 그러나 Bayside Responsive 사이트에는 Microsoft Word 및 RTF로 된 텍스트 콘텐츠와 각 개발 단계의 사이트를 보여주는 폴더가 포함되어 있습니다.

    Ctrl 키(Windows) 또는 Command 키(Mac)를 누른 상태에서 다음 폴더 및 파일을 선택합니다.

    • images
    • js
    • styles
    • index.html
    • sights.html

  2. 파일 패널 툴바에서 파일 올리기(위쪽 화살표) 아이콘을 클릭합니다(그림 10 참조).
fig10
그림 10. 서버에 파일을 올립니다.
  1. Dreamweaver가 서버와 연결하면 전송 시 종속 파일을 포함할지를 묻는 대화 상자가 표시됩니다(그림 11 참조).
fig11

기본값은 아니요입니다. 아무것도 하지 않으면 대화 상자는 닫히고 파일 패널에서 선택한 파일만 업로드됩니다.

선택한 모든 파일에 모든 파일이 연결되어 있으면 자동으로 업로드되므로 종속 파일을 포함하는 옵션이 편리하다고 생각할 수 있습니다. 예를 선택하기 전에 신중하게 검토합니다. 스타일 시트에 변경 내용을 적용할 수는 있지만 아직 업로드할 수 없습니다. 예를 클릭하면 스타일 시트가 업로드할 모든 파일에 연결되어 있는 경우 라이브 웹 사이트의 스타일 시트를 덮어쓰게 됩니다.

이 메시지를 다시 표시하지 않는다는 체크 상자를 선택하면 파일 패널에서 선택된 파일만이 업로드됩니다. 나중에 마음이 바뀌면 Dreamweaver 환경 설정의 사이트 범주에서 옵션을 변경하면 됩니다.

  1. 원격 사이트를 브라우저에서 열어 모든 파일이 올바로 업로드되었는지 확인합니다. 축하합니다. 사이트가 온라인에 성공적으로 게시되었습니다.

    Bayside Responsive 사이트가 표시되지 않는다면 원격 서버 정의에 설정된 루트 디렉토리 값이 서버의 정확한 폴더를 가리키지 않았기 때문입니다. 

(선택 사항) 원격 서버 설정 문제 해결

원격 서버 설정을 편집해야 하는 경우 사이트 > 사이트 관리를 선택한 다음 목록에서 해당 사이트를 선택하고 연필 아이콘을 클릭하여 사이트 설정 대화 상자를 엽니다. 왼쪽에 있는 목록에서 서버를 선택한 다음 편집할 서버를 선택하고 기존 서버 편집 아이콘을 클릭합니다(그림 12 참조).

fig12
그림 12. 기존 서버 정의 편집

웹 서버는 다양한 방식으로 구성할 수 있습니다. 다음 목록은 원격 폴더를 설정할 때 나타날 수 있는 일반적인 문제와 해결 방법을 보여줍니다.

  • Dreamweaver FTP 구현은 특정 프록시 서버, 다중 레벨의 방화벽 및 기타 형태의 간접 서버 액세스의 경우 올바로 작동하지 않을 수도 있습니다.

  • Dreamweaver FTP 구현을 사용하려면 원격 시스템의 루트 폴더에 연결해야 합니다. (많은 애플리케이션의 경우 모든 원격 디렉토리에 연결하고 원격 파일 시스템을 통해 원하는 디렉토리를 찾을 수 있습니다.) 원격 시스템의 루트 폴더(또는 bayside 하위 폴더)를 루트 디렉터리로 지정해야 합니다. 연결 문제가 있고 하나의 슬래시(/)를 사용하여 호스트 디렉토리를 지정한 경우에는 연결할 디렉토리의 상대 경로와 원격 루트 폴더를 지정해야 합니다. 예를 들어, 원격 루트 폴더가 상위 레벨의 디렉토리인 경우 호스트 디렉터리에 ../../를 지정해야 할 수 있습니다.

  • 공백 및 특수 문자를 포함한 파일 및 폴더 이름은 원격 사이트로 전송 시 문제를 초래하는 경우가 많습니다. 공백 대신에 밑줄을 사용하고 콜론(:), 슬래시(/), 마침표(.) 및 작은따옴표(')와 같은 특수 문자는 파일 이름 또는 폴더 이름에 사용할 수 없습니다.

  • 대부분의 서버에서는 기호 링크(Unix), 바로 가기(Windows) 또는 앨리어스(Macintosh)을 사용하여 서버 디스크의 한 부분에 있는 폴더와 다른 부분에 있는 폴더를 연결합니다. 예를 들어 서버에 있는 홈 디렉토리의 public_html 하위 디렉토리는 서버의 또 다른 부분과 연결되어 있을 수 있습니다. 일반적으로 이러한 앨리어스는 적절한 폴더나 디렉토리로 연결하는 데 아무런 영향을 주지 않습니다. 단, 서버의 특정 부분에는 연결할 수 있으나 다른 부분에는 연결할 수 없으면 앨리어스가 일치하지 않는 것일 수 있습니다.

  • 원격 폴더의 공간이 부족하기 때문에 파일을 올릴 수 없다는 오류 메시지가 표시될 수 있습니다. 자세한 내용은 FTP 로그를 확인하십시오.

일반적으로 FTP 전송 관련 문제가 발생하는 경우 사이트 > 고급 > FTP 로그를 선택하여 FTP 로그를 검토합니다. 자세한 내용은 Adobe 웹 사이트에서 FTP 문제 해결에 대한 다양한 기술 문서를 참조하십시오.

04/11/2018

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

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