안녕하세요.
이 비디오에서는 Dreamweaver에서 웹 사이트 미리보기 기능을 살펴볼 텐데 Dreamweaver의 새로운 실시간 브라우저 미리보기를 사용하겠습니다.
여기 이 작업 중인 사이트가 다른 디바이스에서도 잘 작동하는지 확인해 보겠습니다.
확인이 꼭 필요한 이유는 이 사이트가 반응형 사이트이기 때문입니다.
디바이스 화면에 따라 최적의 크기로 변경된다는 의미죠.
브라우저 미리보기는 오른쪽 아래에 있습니다.
이 경우 Google Chrome을 사용해 보겠습니다.
Chrome에서 표시된 사이트의 모습입니다.
제가 보통 미리보기에서 수행하는 작업은 두 번째 모니터에 브라우저 창을 열어 Dreamweaver에서 조정할 때마다 데스크탑 화면에서 어떻게 반영되는지 동시에 확인하는 것입니다.
데스크탑 화면에서 사이트를 확인하는 작업도 중요하지만 휴대폰과 태블릿처럼 다른 디바이스에서도 확인하는 것이 중요합니다.
이 작업을 위해서는 모든 디바이스가 동일한 WiFi 네트워크에 연결되어 있어야 합니다.
지금은 제 사무실 네트워크에 모든 디바이스가 연결되어 있습니다.
여러 방법으로 디바이스에서 미리보기를 확인할 수 있는데 실시간 미리보기 버튼을 클릭한 다음 URL을 입력하는 방법이 있습니다.
태블릿에서 이 방법을 사용하겠습니다.
URL을 입력하면 이렇게 웹 사이트가 태블릿에서 실행됩니다.
이번에는 조금 더 재미있는 방법을 사용해 보겠습니다.
여기 화면에 있는 QR 코드를 사용하는 방법인데요.
먼저 QR 코드 리더를 디바이스에 다운로드해야 하는데 무료 앱이 많이 제공되고 있습니다.
QR 리더를 열고 이렇게 화면 아래에 있는 QR 코드를 향하면 화면에 URL이 표시되고 잠시 기다리면 웹 사이트가 휴대폰에서 실행됩니다.
디바이스마다 레이아웃이 다르므로 반응형 사이트임을 알 수 있습니다.
텍스트도 다르고 레이아웃도 다르고 화면 크기에 맞게 최적화된 모양으로 바뀝니다.
화면에서 변경 사항이 적용되는 모습을 확인할 수 있는데요.
바닥글이 어떻게 보이는지 살펴보겠습니다.
Dreamweaver에서 이 그레이디언트 색상을 제어하는 코드를 찾아서 0으로 변경하면 변경 사항이 즉시 반영됩니다.
이 기능이 매우 유용한 이유는 모바일 화면에서만 조정한다고 생각했는데 변경하는 순간 다른 화면에도 순식간에 적용되기 때문입니다.
특정 부분을 신속하고 일관적으로 변경할 수 있어 매우 유용합니다.
지금까지 Dreamweaver에서 유용한 실시간 브라우저 미리보기를 통해 페이지를 미리 보는 방법을 살펴보았습니다.
