PC 버전은 사용하지 않고, 모바일 사이트만 이용하는 경우 이 튜토리얼이 도움이 될 수 있습니다.

아임웹으로 제작된 사이트는 반응형 사이트로 제작됩니다. 반응형 사이트란 접속하는 기기의 디스플레이 크기에 따라 알아서 디자인이 최적화되는 웹 기술을 뜻합니다.

아임웹으로 제작된 사이트는 반응형 기술이 적용되어, 기술적으로 PC/모바일로 구분되지 않으며, 사실상 하나의 사이트라 볼 수 있습니다.

기술적으로는 하나의 사이트지만 방법은 있습니다. 이 튜토리얼에서는 모바일 전용 섹션 및 간단한 코드를 사용해 모바일 사이트만 이용할 수 있도록 구성하는 방법을 설명합니다.

제작방법

1단계: PC 메인페이지 만들기

PC 버전 방문자가 내 사이트에 접속했을 때, 모바일로 접속할 것을 권유하는 페이지를 디자인합니다.

1. 디자인 모드에 접속합니다. 접속방법
2. 왼쪽 상단의 메뉴 관리를 클릭하고, 상단 메뉴의 오른쪽 + 아이콘을 클릭합니다.
3. 메뉴명을 입력하고, 확인을 클릭합니다.

4. 추가한 메뉴를 상단 메뉴 그룹의 가장 위에 위치하도록 이동시킵니다. 메뉴 이동하기
   참고: 상단 메뉴의 가장 첫 번째 메뉴가, 사이트의 첫 페이지이기에 가장 위에 배치합니다.

   

5. 텍스트, 이미지, 섹션 배경 설정 등을 활용해 메인페이지를 디자인합니다.

2단계: PC 메인페이지 상단 영역 숨기기

PC 버전 방문자가 내 사이트에 접속했을 때 메뉴 이동을 할 수 없도록 상단 영역을 숨기는 단계입니다. 이번 단계에는 코드가 사용됩니다.

1. 위 1단계에서 제작한 메인페이지에 코드 위젯을 추가합니다. 위젯 추가하기
2. 코드 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
3. 코드 설정 을 클릭합니다.

4. 상단 영역을 숨기는 아래의 코드를 전체 복사하여, 붙여넣습니다.

   <style> 
     @media all and (min-width : 991px) {
         #doz_header_wrap {
           display: none;
         }
     }
   </style>
   

5. 저장을 클릭해 적용합니다.
6. 이제 PC 버전으로 방문자 접속 시 상단 메뉴가 보이지 않게 됩니다.

3단계: 모바일 버전 제작하기

뷰포트를 모바일로 변경하고, 모바일 전용 디자인을 작업합니다. 미리 모바일 편집 방법을 익혀두시길 권장합니다.

1. 뷰포트를 모바일로 변경합니다. 뷰포트 변경하기

2. 섹션 숨김 아이콘을 클릭해, PC 뷰포트에서 제작한 디자인을 숨깁니다.

   

3. 페이지 바깥 회색 영역에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
4. 모바일 전용 섹션추가를 클릭합니다.

5. 추가된 모바일 전용 섹션의 위젯 추가 아이콘을 클릭하여, 필요한 위젯을 추가하고, 배치하며 디자인합니다.

   

6. (선택 사항) 모바일 전용 섹션의 위치가 마음에 들지 않는 경우 섹션을 위 또는 아래로 이동시킵니다. 섹션 이동하기

7. (선택 사항) 위 1단계 2번~3번 과정에 따라, 필요한 만큼 메뉴 수를 추가합니다. 그리고 계속해서 모바일 디자인을 작업합니다.

   주의: 메뉴 추가 후 구성은 자유지만, 위 1단계에서 제작한 메뉴는 반드시 상단 메뉴 가장 위에 위치해야 합니다.

4단계: PC 및 모바일 디자인 점검하기

1. 디자인 모드 오른쪽 상단의 게시하기 버튼을 클릭해 적용합니다.
2. PC 와 스마트폰으로 사이트에 접속해 확인합니다. 아래 2가지를 확인 후 문제가 없는지 꼭 확인해 주세요.
   • PC로 접속 시 상단 메뉴가 없고, 모바일 버전으로 접속할 것을 안내하는 페이지가 나타나야 합니다.
   • 모바일 기기로 접속 시 모바일 뷰포트에서 제작하신 첫 페이지가 나타나야 합니다.