안녕하세요.
Daniel Walter Scott입니다.
이 비디오에서는 반응형 웹 사이트에 대해 살펴보겠습니다.
먼저 반응형 웹 사이트란 보고 있는 화면에 맞게 디자인이 바뀌는 사이트를 말합니다.
그러면 이 시리즈에서 제작 중인 사이트를 살펴보겠습니다.
지금은 MacBook Pro로 보고 있는데 디자인이 최적으로 나타나 있습니다.
이 사이트는 반응형이므로 디자인이 태블릿과 모바일 화면에 맞게 바뀝니다.
이제 Photoshop에서 만든 디자인 초안을 확인해 보겠습니다.
여기 Photoshop에 디자인의 초안이 있는데요.
Photoshop에서 만든 초안을 보면서 작업해 보죠.
Photoshop에서 먼저 만드는 이유는 빠르고 효율적이기 때문인데요.
콘텐츠를 이동하고 색상을 조정하는 등 모든 작업이 빠르고 간편합니다.
완성되면 이러한 구성 요소가 만들어지는데 현재 모양과 느낌만 있을 뿐 상호 작용하지 않으므로 Dreamweaver를 열어야 합니다.
Dreamweaver에서는 웹 사이트를 다양한 화면 크기에 맞게 조정되는 인터랙티브한 요소와 기능을 추가할 수 있습니다.
현재 동일한 콘텐츠가 3개 디자인 모두에 있는데요.
오른쪽 디자인은 모바일용이고 가운데 디자인은 태블릿용이고 왼쪽 디자인은 데스크탑용입니다.
Photoshop으로 디자인한 뒤에는 모바일, 태블릿, 데스크탑 화면에서 최적으로 반응하는 콘텐츠를 만들 차례입니다.
모든 디자인에 동일한 콘텐츠가 있는데 각 디자인이 해당 화면 크기에서 최적화되게 적용해 보죠.
이 부분을 확대하면 모바일과 태블릿 화면의 큰 차이점을 알 수 있는데요.
모바일 화면에는 내비게이션이 세로로 되어 있고 태블릿 화면에는 내비게이션이 가로로 되어 있습니다.
데스크탑 화면은 또 모양이 다른데요.
왼쪽에 로고가 있고 오른쪽에 내비게이션이 있습니다.
또한 본문 디자인도 다른데요.
모바일과 태블릿 간의 차이점을 보면 모바일 디자인은 모든 콘텐츠가 세로로 되어 있고 태블릿은 격자와 함께 2열로 되어 있고 데스크탑은 비슷하지만 다릅니다.
데스크탑의 경우 하나의 행에 4개 이미지가 있고 태블릿의 경우 2개 열에 2개의 이미지가 있고 모바일의 경우 이미지들이 세로로 나열되어 있습니다.
그러면 이제 만들어 볼 웹 사이트의 완성 버전을 살펴보죠.
이것은 Dreamweaver에서 만든 데스크탑 화면인데요.
오른쪽 가장자리를 선택하고 대략 태블릿 크기로 만들어 보겠습니다.
이렇게 작게 만들면 모든 요소가 조정되고 이미지가 반응하기 시작합니다.
특정 중단점에 도달하면 태블릿용 디자인으로 전환됩니다.
더 작게 하면 모바일 화면으로 전환되면서 내비게이션이 세로로 표시되고 이미지들도 세로로 나열됩니다.
이제 몇 가지 디자인 특징을 살펴보겠습니다.
메뉴와 그 아래에 있는 격자가 어떻게 변하는지 살펴보죠.
메뉴의 경우 모바일에서는 세로로 태블릿에서는 가운데에 가로로 배치되고 데스크탑 화면에서는 오른쪽에 표시됩니다.
아래에 있는 이 이미지 격자도 크게 바뀌는데요.
데스크탑에서 작게 만들어 한 줄로 만들어 보죠.
이만큼 줄이면 2행 2열로 표시되고 모바일 화면만큼 줄이면 이미지들이 세로로 표시됩니다.
또 다른 특징으로는 글꼴 크기가 바뀌고 여백이 생길 텐데 아직은 여기 사이에 없습니다.
더 크게 만들면 태블릿 화면으로 전환되면서 여백이 생기고 글꼴이 작아집니다.
이제 다른 화면 크기에 맞게 약간씩 움직이고 바뀌는 매우 간편한 사이트가 되었습니다.
사이트를 처음 만들어 보신다면 절호의 기회입니다.
단계별로 진행되는 이 튜토리얼을 통해 Dreamweaver의 유용한 툴을 사용하여 매우 간단하게 사이트를 만들 수 있습니다.
지금까지 반응형 웹 사이트에 대해 살펴보았는데요.
이 시리즈의 다른 비디오를 통해 Dreamweaver로 반응형 웹 사이트를 만드는 방법을 확인하십시오.
