위멘토 사용가이드


포토샵을 못해도 코딩을 못해도 쉽고 간편하게 관리 해보세요

위멘토 사용 가이드

가이드 137

모바일에서 비주얼섹션 배경 이미지가 잘려 보일 때



비주얼 섹션에 삽입한 배경 이미지는 구조 상 컨텐츠(글, 버튼, 이미지)가 아닌 배경으로 처리되어, 브라우저 크기를 늘리거나 줄이는 경우 일부가 잘려 보일 수 있습니다.

모바일의 경우 PC 대비 가로폭이 더 크게 좁아지는데, 이런 경우 PC 버전에서 제작한 비주얼 섹션은 숨기고, 모바일 전용 비주얼 섹션을 만들어 사용할 수 있습니다.


모바일용 비주얼 섹션 만들기

  1. 디자인 모드에 접속합니다. 
  2. 뷰포트 모바일로 변경합니다. 
  3. PC 버전 비주얼 섹션을 숨김 처리합니다.
  4. 모바일 전용 섹션을 추가합니다.
  5. 왼쪽 상단의 위젯 추가   아이콘을 클릭합니다.
  6. 비주얼 섹션을 추가하고, 모바일에 맞게 컨텐츠를 추가합니다.
    참고: 뷰포트를 모바일로 변경하고, 모바일 전용 섹션을 추가하면, PC 뷰포트에서 위젯을 추가하고 이동시킨 것처럼 편집이 가능합니다.

모바일 상단 편집하기




모바일 전용 상단 디자인을 편집할 수 있습니다.

모바일 상단 작업 시 콘텐츠를 과하게 추가하지 마세요. 모바일 기기는 PC 대비 화면이 가로폭이 매우 좁아, 방문자가 보고 터치하는 데 어려움을 겪을 수 있습니다.


편집방법

1단계: 뷰포트 변경하기

  1. 디자인 모드에 진입합니다. 
  2. 상단 설정에 진입합니다. 
  3. 뷰포트를 모바일로 변경합니다. 


2단계: 모바일 상단 꾸미기

  1. 모바일 상단에 마우스 커서를 올립니다.
  2. 위젯 추가 버튼이 나타나면 클릭합니다.


  3. 상단 전용 위젯 중 하나를 클릭합니다.
  4. PC 버전과 같은 방법으로 위젯을 이동합니다. 
  5. 위젯에 마우스 오른쪽 버튼을 눌러 설정을 변경합니다. 
  6. (선택 사항) 빈 섹션을 추가하거나 섹션 고정 등 기능을 사용해 나만의 모바일 상단을 디자인 합니다.



모바일 전용 섹션 활용하기




PC에서는 보이지 않고 모바일에서만 표시되는 모바일 전용 섹션을 활용해 새롭게 위젯을 추가하고 디자인할 수 있습니다. PC 버전과는 전혀 다른 모바일 디자인 레이아웃이나 콘텐츠를 표현할 때 사용합니다.

참고: 모바일 전용 섹션은 PC 버전과 개별적으로 동작합니다. 이에 따라, 모바일 섹션 디자인의 변경에 따른 PC 버전의 디자인 초기화는 일어나지 않습니다.



모바일 전용 섹션 추가방법

  1. 뷰포트를 모바일로 전환합니다. 
  2. 위젯이 없는 영역에 마우스 오른쪽 버튼을 클릭합니다.
  3. 섹션 컨텍스트 메뉴가 나타나면 모바일 전용 섹션추가를 클릭합니다.
  4. 추가된 모바일 전용 섹션에 위젯을 추가하고 배치해 보세요.
    참고: 모바일 전용 섹션은 PC에서는 보이지 않고 모바일에서만 표시됩니다.



모바일 버전 위젯 숨기는 방법




PC 버전에서 필요했던 위젯들이 모바일 버전에서는 불필요할 수 있습니다. 모바일 버전에서 불필요하다 생각되는 요소들이 있다면 숨김 처리합니다. (예: 여백 위젯, 이미지 위젯 등)

위젯 숨기기

  1. 뷰포트를 모바일로 전환합니다. 
  2. 숨기려는 위젯 위에 마우스 포인터를 올립니다.
  3. 위젯의 오른쪽 상단에 숨김 아이콘을 클릭합니다.


  4. 위젯이 숨겨진 것을 확인합니다.




위젯 복원하기

숨겨진 위젯은 언제든 복원할 수 있습니다.

  1. 위젯을 숨긴 섹션의 오른쪽에 위치한 말풍선 아이콘을 확인합니다.
    참고: 숨긴 위젯 개수 만큼 숫자가 표시됩니다.
  2. 말풍선 아이콘을 클릭합니다.


  3. 오른쪽에 숨긴 위젯 목록창이 열리면, 복원하려는 위젯을 클릭합니다.
  4. 숨긴 위젯이 원래 위치로 복원됩니다.


모바일 버전 섹션 숨기는 방법



모바일 버전에 불필요한 섹션이 있는 경우 섹션 단위로 숨김 처리할 수 있습니다.

섹션 숨기기

  1. 뷰포트를 모바일로 전환합니다. 
  2. 섹션마다 왼쪽 상단에 표시된 숨김 아이콘(눈 아이콘)을 클릭합니다.
    참고: 섹션마다 숨김 아이콘이 준비되어 있어, 원하는 섹션만 클릭해 숨길 수 있습니다.
  3. 섹션이 숨겨집니다.




섹션 복원하기

숨긴 섹션은 언제든 복원할 수 있습니다.

  1. 뷰포트 오른쪽의 섹션 구분선(파란 점선) 주변에 표시된 말풍선 아이콘을 클릭합니다. (숨긴 섹션의 수에 따라 숫자가 다르게 표시될 수 있습니다.)
  2. 화면 오른쪽에 숨긴 섹션 목록창이 나타나면 복원하려는 섹션을 클릭합니다.
  3. 숨긴 섹션이 원래 위치로 복원됩니다.




모바일에서 테이블(표)이 잘려 표시됩니다.



모바일 기기에서 테이블(표) 일부가 잘려 보일 수 있습니다. 이런 경우 기본 테이블을 반응형 테이블로 변경 해주세요. 

방문자는 모바일 기기에서 잘린 영역을 좌우 제스처를 통해 볼 수 있습니다.


변경 방법

  1. 마우스로 테이블 전체를 선택합니다.



  2. 테이블 보조 메뉴가 나타나면 표 스타일을 클릭합니다.



  3. 반응형 테이블을 선택합니다.



 모바일 커스텀 하단 만들기 (푸터)




PC 버전에서 제작한 커스텀 하단이 모바일에서는 마음에 들지 않거나 모양이 틀어질 수 있습니다. 모바일에 딱 맞는 모바일 커스텀 하단을 만들려면 아래 제작 방법에 따라 제작해 보세요.



제작방법

모바일 커스텀 하단을 제작하는 방법을 설명합니다.


1단계: 모바일 전용 하단 디자인하기

뷰포트를 모바일로 전환하고, 모바일 전용 섹션을 만들어 페이지 최하단으로 이동하는 과정을 설명합니다.

  1. 디자인 모드에 접속합니다. 
  2. 모바일로 뷰포트를 변경합니다. 뷰포트 변경방법
  3. 섹션에 마우스 오른쪽 버튼을 클릭합니다.

    주의: 위젯에 마우스 오른쪽 버튼을 클릭하지 마세요.


  4. 섹션 컨텍스트 메뉴가 나오면 모바일 전용 섹션추가를 클릭합니다.
  5. 새로운 모바일 전용 섹션이 생성되면 이제 해당 섹션을 페이지 가장 아래로 이동시켜야 합니다. 
    섹션에 마우스 오른쪽 버튼을 클릭하고, 컨텍스트 메뉴가 나오면 아래로 이동을 클릭합니다. (모바일 전용 섹션이 생성된 위치에 따라 이 과정을 반복해야 할 수 있습니다.)

  6. 위젯을 추가해 모바일 전용 섹션을 원하는 하단 디자인으로 제작합니다.





2단계: 모바일 전용 하단 섹션 반복하기

제작한 모바일 전용 하단이 모든 페이지에서 표시되도록 섹션 반복 기능을 켭니다.

  1. 모바일 전용 섹션으로 제작한 하단 섹션의 오른쪽 상단에 위치한 섹션 반복 아이콘을 클릭합니다.

  2. 이제 모든 모바일 버전 페이지에 커스텀 하단이 반복되어 표시됩니다.
  3. 디자인 모드 오른쪽 상단의 게시하기 버튼을 클릭합니다.
  4. 스마트폰, 태블릿 등 모바일 기기로 접속해 모바일 커스텀 하단이 정상 동작하는지 확인합니다.




기본 하단 및 커스텀 PC 하단 숨기기

기존 PC 버전에서 사용 또는 제작한 하단을 숨겨줍니다.


기본 하단 숨기기

하단 숨김 옵션을 활성화하여 PC 디자인 시 자동 생성된 기본 하단 디자인을 숨겨줍니다.

  1. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
  2. 상단 메뉴 항목에서 아무 메뉴명의 오른쪽에 위치한 ⓘ 아이콘을 클릭합니다.

  3. 메뉴 설정 창이 나오면 옵션 항목에서 하단 숨김 옵션을 선택합니다.

  4. 메뉴 설정 창 바깥 영역을 클릭해 옵션 설정을 종료합니다.
  5. 위 2~4번 과정을 반복해 모든 상단, 하단 메뉴의 하단 숨김 옵션을 활성화 해줍니다.
  6. 모든 메뉴의 기본 하단이 숨겨지고, 커스텀 하단만 남게 됩니다.



커스텀 하단 숨기기

PC 커스텀 하단을 제작 및 사용하는 경우, 모바일에서는 표시되지 않도록 숨겨줍니다.

  1. 모바일 뷰포트에서 마우스 휠 스크롤을 내려 PC 커스텀 하단 섹션으로 이동합니다.
  2. 해당 섹션에서 왼쪽 상단의 눈모양 아이콘을 클릭합니다.

  3. 이제 모바일에서 커스텀 PC 하단 디자인이 숨겨져 표시되지 않게 됩니다.




관련 도움말

PC 버전 역시 커스텀으로 사용자가 직접 하단을 디자인할 수 있습니다. 자세한 방법은 아래 도움말 링크를 참고해 주세요.

커스텀 하단 만들기



INFORMATION


상호명 : (주)위멘토


사업자등록번호 : 506-87-00931

통신판매업번호 : 제2022-서울강서-1096호 

고객센터 : 1800-2142 ∣ 이메일 : sales@wemento.kr

대표자 : 김성진 ∣ 개인정보책임자 :김성진

주소 : 서울특별시 강서구 공항대로 212(퀸즈파크11), B동 404호

호스팅주소 : 서울특별시 강서구 공항대로 212(퀸즈파크11), B동 404호

WEMENTO


2012년 3월 자체 개발한 솔루션으로부터 모바일앱 제작을 시작으로, 2014년 6월 부터는 PC홈페이지와 모바일웹, 어플이 연동되는 시스템을 개발 및 제작해 왔습니다.

그동안의 노하우를 바탕으로 2016년 1월 반응형웹앱/쇼핑몰웹앱을 출시하여 다양한 업종의 웹사이트를 구축 하였습니다.

특히, 웹사이트에서의 모든 활동은 스마트폰으로 실시간 알림을 주고 받을 수 있게 연동되어야만 한다는 슬로우건 아래 시장을 선도하고 있습니다.


© BYULZZI Corp. All Rights Reserved. hosting by byulzzi