Wix 모바일 에디터 사용법

홈페이지 제작 설루션 WiX는 데스크톱 버전을 제작하는 에디터와 모바일 버전을 제작하는 에디터가 따로 있습니다. 하나의 홈페이지를 다른 모드(뷰)로 표시하는 것으로 같은 도메인을 사용하는 하나의 사이트입니다. 그렇기 때문에 데스크톱 사이트에서 변경되는 내용은 모바일 사이트에 영향을 줄 수 있습니다. 그러나 모바일 사이트의 변경 사항은 데스크톱 사이트에 영향을 미치지 않습니다.

WiX 모바일 에디터

이번 포스팅은 모바일 레이아웃 최적화, 모바일 도구 TOP 버튼과 퀵액션 설정, 비공개 요소 등 모바일 에디터 사용법을 자세히 알려드리겠습니다. 

데스크톱 버전 & 모바일 기기 버전

1. 머리글, 바닥글, 페이지 기본 구조

데스크톱 화면의 머리글, 페이지, 바닥글 기본 구조 그대로 모바일 버전에서도 사용합니다. 단 모바일 기기는 데스크톱 화면보다 사이즈가 작으므로 머리글이 많은 부분을 차지하는 것은 비 효율적입니다. 그래서 머리글에서 로고와 사이트 이름 외에 다른 요소들은 비공개 전환합니다. 홈페이지 메뉴는 모바일 전용 메뉴로 디자인하여 내 홈페이지 디자인에 맞게 변경할 수 있습니다.

WiX 모바일 에디터 기본 구조 - 머리글, 페이지, 바닥글

모바일에서 바닥글은 이동할 수 없는 요소로 하단에 고정되어있으며 데스크톱 화면에서 삽입된 이미 지나 텍스트 요소들은 꼭 중요한 내용이 아니라면 대부분 비공개 전환합니다. 그리고 모바일 홈페이지 방문자가 편리하게 이용할 수 있도록 퀵 액션 바를 설치합니다.  퀵 액션 바에서 전화 아이콘을 눌러 바로 전화 상담을 이용할 수 있게 하고 위치 아이콘 사용은 위치 정보를 바로 지도 검색으로 가능하게 하면 더욱 편리하게 홈페이지를 이용할 수 있습니다.

2. 메뉴

메뉴 설명

링크이동 : Wix의 2019년 새로운 모바일 메뉴에 설명과 사용자 지정 방법 

2-1 왼쪽메뉴

2-1-1 메뉴 및 페이지

WiX 모바일 사이트 메뉴

모바일 에디터에서 페이지/메뉴를 관리하는 메뉴로 대부분의 설정은 데스크톱 버전에서 가능하며 모바일 메뉴에서 공개와 비공개를 설정할 수 있습니다.

2-1-2 배경

모바일 홈페이지 배경 변경

데스크톱 버전의 배경과 다르게 모바일만 따르게 설정할 수 있습니다. 예전 WiX는 데스크톱 디자인을 거의 변경할 수 없었는데 2019년 현재 WiX 모바일은 많은 기능이 추가되어 모바일만의 디자인을 구현할 수 있는 기능이 많습니다. 

2-1-3 모바일도구

WiX 모바일 홈페이지에서 새롭게 추가된 기능으로 퀵액션바, Top 버튼, 환영 화면, Chrome 추천 색상 사용이 있습니다. 퀵 액션 바는 모바일 기기 화면 하단에 전화 걸기, 위치 검색 등 바로 가기 메뉴를 추가하여 방문자가 좀 더 편리하게 홈페이지를 이용할 수 있도록 해주는 기능입니다.

WiX 모바일 도구

모바일은 기기의 종류와 버전이 많고 인터넷 환경에 따라 홈페이지 로딩 속도가 많은 차이가 있습니다. 내 홈페이지의 첫 화면 로딩 속도를 좀 더 빠르게 하고 싶다면 환영 화면을 추가하여 방문자에게 특별한 경험을 제공하는 것도 좋은 방법입니다.

[ Tip ] 환영화면을 만드는 방법을 포스팅한 것입니다.
링크이동 : WiX 모바일 사이트에 환영 화면(Welcome Screen) 추가하기

2-1-4 비공개요소

모바일 에디터에서 <삭제> 또는 키보드의 <Delete>키를 눌러 화면에서 사라진 요소들은 비공개 요소에서 모두 확인할 수 있습니다. 진짜 삭제는 데스크톱 화면에서만 가능합니다.모바일에서는 요소를 비공개할 수 있지만 삭제할 수 없습니다. 가끔 모바일에서 요소를 못 찾겠다는 질문을 하시는 분들이 가끔 있습니다. 이런 경우는 비공개 요소에서 먼저 확인하신 후 그래도 찾을 수 없다면 특정한 요소 아래에 위치한 경우이므로 겹쳐진 배열을 확인하여 찾으실 수 있습니다.

[ Tip ] 여러 요소들이 비슷한 위치에서 겹쳐진 경우단축키 Ctrl+M키로 찾으실 수 있습니다.
링크이동 : WiX 에디터 키보드 단축키 정보와 사용 예제

2-1-5 모바일레이아웃최적화

WiX 모바일 홈페이지 레이아웃 최적화

처음 모바일 에디터에 접속하면 모바일 에디터 최적화를 진행하는 단계가 보입니다. 시작하기 버튼을 눌러 다음 단계를 진행해도 되고 지금은 건너뛰어도 됩니다. 레이아웃 최적화 후 미리 보기 한 후 실행 취소를 클릭해 이전 버전으로 복원할 수도 있습니다.

2-2 상단 바 메뉴

에디터 화면 상단에 위치한 메뉴들로 페이지, 에디터 전환, 사이트, 설정, 도구, Corvid, 도움말, 업그레이드, 줌 아웃 뷰, 실행 취소, 재실행, 저장, 미리 보기, 게시하기를 할 수 있습니다. 대부분 모바일만 따로 설정하는 메뉴들은 아니고 내 계정의 대시보드로 이동하여 설정하거나 데스크톱에서 설정하는 공통 메뉴입니다.

2-3 오른쪽 클릭 메뉴

WiX 모바일 오른쪽 메뉴 설명

요소를 선택하여 마우스 오른쪽을 선택하면 팝업을 통해 보이는 메뉴입니다. 각 요소마다 필요한 메뉴들이 보이게 됩니다.

3. 도구

WiX 모바일에디터 - 눈금자, 툴바 미리 보기  

WiX 데스크톱 에디터 사용법은 아래 포스팅을 참고하세요.
Wix 에디터 사용법 - 데스크톱 버전의 메뉴, 도구, 아이콘 살펴보기