이 비디오에서는 웹 사이트를 인터넷에 게시하는 방법을 살펴보겠습니다.
여기 Dreamweaver에서 만든 사이트가 준비되어 있는데 먼저 index 페이지를 두 번 클릭해 엽니다.
지금 저는 개발자 모드에 있는데 여러분은 표준 모드로 되어있을 수도 있습니다.
실시간 브라우저에서 미리 보면서 잠시 살펴보겠습니다.
여기 아래에서 브라우저에서 미리 보기 위해 Google Chrome을 클릭하겠습니다.
그러면 사이트가 열리는데 지금 이것은 '로컬'로 테스트하는 방법입니다.
이 사이트는 제 컴퓨터에 있으므로 다른 사람은 볼 수 없습니다.
Dreamweaver의 사이트 정의에서 원격 서버를 연결해볼 텐데 호스팅 제공업체에 연결해 보면서 설명하는 것이 쉽게 이해되겠네요.
그러면 본격적으로 살펴보겠습니다.
바탕 화면에 사이트가 rendered라는 폴더 안에 있습니다.
여기에는 index 페이지도 있고 CSS와 이미지 파일도 있습니다.
하지만 이 사이트는 제 컴퓨터에서만 존재하므로 이제 이 사이트를 원격 서버에 게시해야 합니다.
먼저 등록을 해야 하고 호스팅 유형에 따라 비용을 지불해야 합니다.
호스팅 제공업체는 다양합니다.
GoDaddy, Microsoft Azure, Amazon Web Services, Digitalocean이 대표적입니다.
호스팅 제공업체마다 과정은 비슷합니다.
이제 연결해 보죠.
Dreamweaver에서는 새 사이트를 만든 다음 연결해 게시할 수 있지만 우선 취소를 누르고 여기에 열려있는 기존 사이트를 사용하겠습니다.
사이트 > 사이트 관리를 선택하고 Rendered를 두 번 클릭해 엽니다.
지금 작업 중인 사이트와 동일한 위치가 표시됩니다.
여기에서 서버 탭으로 이동합니다.
이 + 버튼을 클릭합니다.
원격 서버라는 것은 다른 사람들이 우리가 게시하는 웹 사이트를 볼 수 있도록 설정하는 서버입니다.
서버 이름은 원하는 대로 지정할 수 있으므로 아무 이름이나 입력합니다.
저는 Rendered라고 하겠습니다.
몇 가지 다양한 연결 방법이 있는데 일반적으로 FTP 또는 SFTP를 사용합니다.
여기서는 보다 안전한 파일 전송 방법인 SFTP를 사용하겠습니다.
이 정보는 호스팅 제공업체에서 제공하는데 보통 이메일을 통해 수신하게 되거나 호스팅 계정에 로그인할 때 제공되는 세부 정보를 확인할 수도 있습니다.
이제 필요한 정보를 살펴보겠습니다.
먼저 SFTP 주소를 확인합니다.
이 주소는 앞에 www가 포함되어 있는 웹 사이트의 URL입니다.
저는 mysite.com을 견본으로 사용할 텐데 각자 자신의 사이트 세부 정보를 입력하면 됩니다.
일부 호스팅 제공업체에서는 이 SFTP를 입력한 다음 URL앞에 마침표를 찍어야 하는 경우도 있고 FTP를 사용하는 경우 FTP 다음에 마침표를 찍고 URL을 입력하기도 합니다.
경우에 따라 숫자로 된 IP 주소가 될 수도 있습니다.
호스팅 제공업체가 제공하는 것을 그대로 사용하면 됩니다.
다음으로 사용자 이름과 암호를 입력합니다.
이제 테스트를 클릭할 차례입니다.
클릭하면 Dreamweaver가 웹 서버에 성공적으로 연결되었다는 메시지가 표시되어야 하지만 우리는 임의의 정보를 이용했기 때문에 이 메시지가 표시되지 않습니다.
문제가 발생했을 때 해결할 수 있는 방법이 몇 가지 있습니다.
그러나 제가 항상 드리는 조언은 호스팅 제공업체에 직접 연락하라는 것입니다.
서비스의 대가를 지불하는 것이므로 전화를 통해 지금 어떤 작업을 하고 있고 필요한 세부 정보를 설명하여 원하는 도움을 받는 것이 좋습니다.
호스팅 제공업체가 모두 다르기 때문에 각각의 사소한 차이로 인해 잘 안 되는 것일 수도 있습니다.
아무튼 가장 먼저 테스트해야 할 것은 FTP입니다.
루트 디렉토리에 public_html을 입력하고 테스트를 눌러 문제가 해결되는지 확인합니다.
그렇지 않으면 삭제합니다.
두 번째로 확인해야 할 것은 사용자 이름입니다.
전체 웹 주소가 포함되는 경우도 자주 있으므로 테스트합니다.
마지막으로 점검해야 할 사항은 호스팅 제공업체에 전화하기 전에 연결된 WiFi 네트워크를 변경하는 것입니다.
예를 들어 사무실 네트워크에 연결되어 있는 경우 휴대폰으로 연결해보고 문제가 모뎀으로 인한 것은 아닌지 확인합니다.
모뎀이 문제가 되는 경우는 매우 드물지만 호스팅 업체에 전화해 오랫동안 설명해야 하는 번거로움을 덜 수 있는 방법이 될 수도 있습니다.
이 간단한 것들이 제대로 작동하지 않으면 호스팅 업체에 전화해 도움을 받으시길 바랍니다.
이제 저장을 클릭합니다.
다시 저장을 클릭하고 완료를 클릭합니다.
연결 작업과 테스트 작업을 모두 완료했으니 이제 호스팅 업체에 사이트를 업로드해 전 세계 사용자와 공유할 차례입니다.
처음으로 업로드하는 경우 파일 패널을 사용하면 간편합니다.
파일 패널은 뷰에 따라 왼쪽 또는 오른쪽에 있습니다.
저는 현재 로컬 뷰에 있으므로 사이트를 확인할 수 있습니다.
여기에 있는 동기화 버튼을 클릭하면 몇 가지 옵션이 표시됩니다.
동기화 필드에서 전체 사이트를 선택합니다.
이렇게 하면 컴퓨터의 모든 새로운 파일이 사이트에 전송됩니다.
이 사이트에 업데이트된 것이 있으면 로컬 컴퓨터로 전송됩니다.
현재 새로운 사이트이므로 업데이트할 사항은 없습니다.
이러한 이유로 Dreamweaver의 동기화 기능은 매우 유용합니다.
특히 다른 사람과 함께 작업하는 경우 모두가 원격 사이트로 가서 파일을 조정해야 하는데 로컬 폴더에서 작업을 한다면 적용한 것을 덮어써야 할 수도 있습니다.
저는 프로젝트를 시작할 때마다 이렇게 동기화를 클릭합니다.
동기화를 누르면 서버의 파일 중에서 다른 사람이 작업한 파일이 제 컴퓨터에도 다운로드되고 이 파일을 사용할 수 있게 됩니다.
이제 미리보기를 클릭하겠습니다.
사이트를 처음 로드하거나 서버에 접속 및 조정을 적용한 사람이 없는 경우 이렇게 모두 업로드됩니다.
컴퓨터의 파일을 서버로 전송한다는 의미입니다.
확인을 클릭하면 이렇게 모든 이미지와 비디오가 업로드됩니다.
업로드가 완료되려면 시간이 걸립니다.
시간 관계상 이 작업은 빠르게 진행하겠습니다.
처음에는 약간 시간이 더 걸릴 수 있습니다.
이 기능의 탁월한 점은 조정 작업을 시작할 때 예를 들어 여기에 있는 텍스트를 조정하고 저장을 누르고 동일한 작업을 한 다음 동기화를 클릭하면 변경된 파일만 업데이트되므로 사이트 전체를 업로드하지 않아도 됩니다.
이 경우 이미지와 비디오가 많이 있어 조금 더 시간이 걸렸습니다.
이제 이 웹 사이트는 두 개의 사본이 있는데 하나는 데스크탑의 하드 드라이브에 있습니다.
로컬 뷰라고 하죠.
이 웹 사이트의 또 다른 사본은 호스팅 업체 서버에 저장되어 있습니다.
이 사이트를 세상에 선보이는 곳은 호스팅 업체이며 지금 우리가 보고 있는 것은 로컬 뷰입니다.
호스팅 서버에 올라간 사이트와 비교해야 하는 경우 원격 서버를 클릭합니다.
모든 것이 서버에 업로드되어 있습니다.
이 경우 두 사이트는 정확히 똑같습니다.
사이트 규모가 커져서 파일을 더 업로드해야 하는 경우 사이트 조정 작업을 여러 사람이 수행하기 때문에 사이트에 새로 추가된 파일이 로컬 시스템에 없을 수 있는데 이러한 경우에도 원격 서버를 확인하면 됩니다.
이제 로컬 뷰로 돌아갑니다.
로컬 폴더에서 작업하는 것이 일반적입니다.
여기 아래에서 "About" 대신에 "About Us"로 수정한 뒤 저장을 누르고 다시 동기화, 미리보기를 차례대로 클릭합니다.
그러면 사이트의 로컬 버전과 서버에 있는 버전을 비교하여 변경 사항이 있는지 확인합니다.
이렇게 index 페이지가 변경되었다고 알려줍니다.
확인을 눌러 변경 사항을 적용합니다.
일부 파일의 경우 매번 동기화해야 하는 경우가 있습니다.
시간대, 서버 등 다양한 요인에 따라 가끔씩 발생합니다.
따라서 이때 동기화를 누르고 사이트를 매번 업로드하면 엄청난 시간이 걸리게 되는데 숨김 기능을 활성화할 수 있습니다.
이 파일은 비디오 파일이고 24MB의 매우 큰 용량인데 이 파일을 마우스 오른쪽 버튼으로 클릭하고 숨김 > 숨김을 선택하면 동기화를 누를 때마다 이 파일을 확인하지 않습니다.
그대로 유지되는 거죠. paintwave.mp4를 변경하면 표시를 선택해 동기화해야 합니다.
개별 파일이나 전체 폴더에 이렇게 할 수 있습니다.
예를 들어 이미지를 업데이트하지 않으려면 다양한 방법이 있지만 특히 많은 이미지를 업로드해야 하는 경우 이 폴더 전체를 숨기면 동기화할 때 이 폴더는 자동으로 무시됩니다.
지금까지 사이트 정의를 조정하고 원격 서버를 편집한 다음 SFTP 세부 정보를 편집하여 사이트를 연결하는 방법과 사이트를 동기화하여 해당 서버에 모든 파일이 업로드되어 있는지 확인하는 방법까지 살펴보았습니다.
이제 인터넷에서 수많은 사람들이 URL을 통해 여러분의 웹 사이트를 볼 수 있습니다.
지금까지 Dreamweaver에서 게시하는 방법을 살펴보았습니다.
