유용한팁

윅스(WIX) 사용법 & 무료 홈페이지 제작 방법 (2019년)

윅스(WIX) 사용법 & 무료 홈페이지 제작

윅스 (WIX) 사용법 & 윅스 홈페이지 만들기 방법을 찾고 있나요?

많은 사람들이 온라인 비즈니스, 개인 웹사이트, 온라인 판매, 포트폴리오 사이트 만들기등 다양한 이유로 웹사이트 제작하는 방법을 찾고 있습니다.

여러 홈페이지 제작 툴이 있지만, 가장 먼저 생각나는 도구로 “윅스”“워드프레스”이지 않을까 싶습니다.

윅스 홈페이지 제작 방법워드프레스 홈페이지 제작보다 상대적으로 쉽기 때문에 이 포스팅이나 돈버는 기술 유튜브에 있는 윅스 강좌만으로도 누구나 쉽게 무료 홈페이지 제작을 하실 수 있을 것입니다.

이 포스팅에서 WIX 사용법WIX 홈페이지 제작 방법을 단계별로 확인하세요!


글의 순서

  1. 윅스 시작하기
  2. 다른 페이지 편집하기
  3. 모바일 페이지 화면 편집하기
  4. 옵션: 사이트 살펴보기
  5. 옵션: 설정 살펴보기
  6. 옵션: 도구 살펴보기
  7. 옵션: 업그레이드 살펴보기
  8. 사이트 섹션 위치 변경, 복제, 제거하기
  9. 사이트 로고 수정하기
  10. 네비게이션 메뉴 수정하기
  11. 텍스트 수정하기
  12. 배경화면 수정하기
  13. 새로운 요소 추가하기
  14. 유튜브 영상으로 윅스 튜토리얼 확인하기

사이트 제작에 필요한 무료 아이콘 사이트 추천 TOP 10+ 확인하기!


1. 윅스 시작하기

1) 윅스를 아래와 같이 바로 시작하기 위해서 여기를 클릭하신 후, 화면에 나와있는 “시작하기” 버튼을 클릭해주세요.

1) 윅스를 아래와 같이 바로 시작하기 위해서 여기를 클릭하신 후, 화면에 나와있는 “시작하기” 버튼을 클릭해주세요.

2) 로그인 화면으로 넘어오면, 여기서 페이스북 / 구글을 통해 가입을 하셔도 되고, 새 계정 만들기를 클릭해서 새 계정을 만드실 수도 있습니다. (가입은 누구나 쉽게 할 수 있기 때문에 가입한 후 로그인한 화면으로 바로 넘어가도록 하겠습니다.)

2)로그인 화면으로 넘어오면, 여기서 페이스북 / 구글을 통해 가입을 하셔도 되고, 새 계정 만들기를 클릭해서 새 계정을 만드실 수도 있습니다. (가입은 누구나 쉽게 할 수 있기 떄문에 가입한 후 로그인한 화면으로 바로 넘어가도록 하겠습니다.)

3) 사이트 제작을 위해 “시작하기” 버튼을 클릭해주세요.

3)사이트 제작을 위해 ”시작하기” 버튼을 클릭해주세요.

4) 자신이 만들려고 하는 사이트의 카테고리를 선택해주세요.

4)자신이 만들려고 하는 사이트의 카테고리를 선택해주세요.

5) 원하는 템플릿을 선택한 후 자유롭게 편집하기 위해서 Wix 에디터로 직접 제작하기 아래에 있는 “템플릿 보기” 버튼을 클릭해 주세요.

5) 원하는 템플릿을 선택한 후 자유롭게 편집하기 위해서 Wix 에디터로 직접 제작하기 아래에 있는 “템플릿 보기” 버튼을 클릭해 주세요.

6) 템플릿을 선택하는 화면으로 넘어왔습니다. 이 곳에서 아래 화면과 같이 스크롤을 내려보면 “모던 로펌 부티크”라는 템플릿에다가 마우스를 가져다대면, “편집”과 “보기” 옵션을 확인할 수 있습니다. 우선 선택하기 전에 전체 템플릿 디자인을 확인하기 위해서 “보기”를 클릭해주세요.

6)템플릿을 선택하는 화면으로 넘어왔습니다. 이 곳에서 아래 화면과 같이 스크롤을 내려보면 “모던 로펌 부티크”라는 템플릿에다가 마우스를 가져다대면, “편집”과 “보기” 옵션을 확인할 수 있습니다. 우선 선택하기 전에 전체 템플릿 디자인을 확인하기 위해서 “보기”를 클릭해주세요.

7) 전체 데모 사이트를 미리 확인할 수 있습니다. 디자인이나, 지원하고 있는 요소들을 확인 후에 마음에 든다면. 왼쪽 상단에 있는 모바일 아이콘을 클릭해서, 모바일 화면도 어떤지 확인합니다.

7)전체 데모 사이트를 미리 확인할 수 있습니다. 디자인이나, 지원하고 있는 요소들을 확인 후에 마음에 든다면. 왼쪽 상단에 있는 모바일 아이콘을 클릭해서, 모바일 화면도 어떤지 확인합니다.

8) 모바일 버전까지 모두 확인을 한 다음에 편집하기로 결정했다면, 오른쪽 상단에 있는 “시작하기” 버튼을 클릭해주세요.

8)모바일 버전까지 모두 확인을 한 다음에 편집하기로 결정했다면, 오른쪽 상단에 있는 “시작하기” 버튼을 클릭해주세요.

9) 템플릿 편집화면으로 넘어왔습니다. 처음에는 지금 화면과 같은 인터페이스가 익숙하지 않아서, 어려워 보일 수 있기 때문에 간략하게 설명해 드리도록 하겠습니다.

9)템플릿 편집화면으로 넘어왔습니다. 처음에는 지금 화면과 같은 인터페이스가 익숙하지 않아서, 어려워 보일 수 있기 때문에 간략하게 설명해 드리도록 하겠습니다.

사이트 제작에 필요한 “저작권 없는 이미지” 검색 사이트 추천 TOP 10 확인하기!


2. 다른 페이지 편집하기

웹사이트를 수정할 때, 각 페이지별로 다 수정을 해야되기 때문에 우선 어떻게 다른 페이지에 액세스 할 수 있는지 알아보도록 하겠습니다.

1) 왼쪽 상단에서 “페이지:메인” 부분에 마우스로 클릭하면, 아래와 같이 다른 페이지로 가는 목록(메인, 오시는 길)을 확인할 수 있습니다. 현재는 메인 페이지로, 다른 페이지인 “오시는 길”을 클릭해주세요.

왼쪽 상단에서 “페이지:메인” 부분에 마우스로 클릭하면, 아래와 같이 다른 페이지로 가는 목록(메인, 오시는 길)을 확인할 수 있습니다. 현재는 메인 페이지로, 다른 페이지인 “오시는 길”을 클릭해주세요.

2) 아래와 같이 “오시는 길” 페이지로 이동되었습니다. 이런 방식으로 다른 페이지들에 액세스 할 수 있으며, 메인페이지와 같이 수정하실 수 있습니다.

아래와 같이 “오시는 길” 페이지로 이동되었습니다. 이런 방식으로 다른 페이지들에 액세스 할 수 있으며, 메인페이지와 같이 수정하실 수 있습니다.

디자인 해야되는데 포토샵이 없다?! 여기 인터넷 포토샵 추천 TOP 5 확인하기!


3. 모바일 페이지 화면 편집하기

요즘엔 웹사이트 방문 고객이 사이트에 접속하기 위해서 사용하는 기기를 살펴보면, PC보다 모바일이 더 많은 추세입니다.

그러므로 PC에서 보이는 화면뿐만 아니라 모바일에서 보이는 화면 또한 신경써서 수정해줄 필요가 있는데요.

모바일 페이지를 편집하기 위한 방법입니다.

1) 왼쪽 상단에 나와있는 모바일 아이콘을 클릭해주세요.

왼쪽 상단에 나와있는 모바일 아이콘을 클릭해주세요.

2) 아래와 같이 모바일 화면을 기점으로 편집 도구들이 나와있는 것을 확인할 수 있고, 여기서 수정하게 되면 모바일 화면에서만 변경되어집니다.

아래와 같이 모바일 화면을 기점으로 편집 도구들이 나와있는 것을 확인할 수 있고, 여기서 수정하게 되면 모바일 화면에서만 변경되어집니다.

윅스가 힘들다면? 워드프레스로 1시간에 웹사이트 만들기 완벽가이드도 확인해보세요!


4. 옵션: 사이트 살펴보기

사이트 관련한 옵션들을 살펴볼 수 있는 곳입니다.

여기서 주요 기능들을 살펴보면, 저장 / 미리보기 / 게시하기가 있습니다.

이 기능들은 사이트 편집과 관련해서 주요 기능과 같기 때문에 오른쪽 상단에서도 큰 버튼으로 확인하실 수 있습니다.

  • 저장: 말 그대로 편집한 상태 그대로를 저장하는 옵션입니다. 사이트 편집하실 때 수정할 때마다 저장하는 것을 권장드립니다. 왜냐하면 편집을 하다가 노트북이 꺼지거나, 어떤 문제에 의하여 강제적으로 종료될 때 편집한 기록들이 모두 사라지기 때문에, 이런 피해를 최소화하기 위해서 수정할 때마다 저장은 필수입니다.
  • 미리보기: 현재 마지막으로 편집된 부분을 편집모드가 아닌 라이브모드에서 어떻게 보일지에 대해 미리 확인해보는 옵션입니다. 사이트 편집을 완료했다면, 게시하기 전에 미리보기를 통해서 실제로 편집이 잘 되었는지 확인할 수 있습니다.
  • 게시하기: 모든 편집이 끝난 후, 온라인에서 누구나 자신이 마지막으로 편집한 화면을 확인할 수 있도록 사이트를 업데이트하는 일입니다.
여기서 주요 기능들을 살펴보면, 저장 / 미리보기 / 게시하기가 있습니다.

5. 옵션: 설정 살펴보기

현재 확인할 수 있는 옵션들은 무료 플랜에서 프리미엄 플랜으로 업그레이드 했을 때 주로 사용할 수 있는 옵션들입니다.

  • 도메인 연결하기: 현재 무료 버전의 도메인은 윅스에서 제공된 임의의 주소이기 때문에, 나만의 사이트에 나만의 주소 이름을 연결하기 위해서 도메인 구매 및 연결하기 옵션이 필요합니다.
  • 파비콘: 파비콘은 윈도우 창에 나온 사이트 이름 옆에 있는 아이콘을 말합니다. 여기서 아이콘을 수정해 좀 더 전문적인 사이트로 보일 수 있으며, 이는 프리미엄 플랜에서 추가할 수 있습니다. 
  • 추적 및 분석: 사이트 관리를 위해서 구글 애널리틱스를 연동하려면 사용해야하는 옵션입니다.
현재 확인할 수 있는 옵션들은 무료 플랜에서 프리미엄 플랜으로 업그레이드 했을 때 주로 사용할 수 있는 옵션들입니다.

6. 옵션: 도구살펴보기

도구: 편집 모드에 나와있는 편집 창들을 보이게 하거나, 가리는등 컨트롤 할 수 있습니다.

도구: 편집 모드에 나와있는 편집 창들을 보이게 하거나, 가리는등 컨트롤 할 수 있습니다.

7. 옵션: 업그레이드 살펴보기

업그레이드: 이렇게 무료 버전에서 업그레이드를 하게되면, 자신만의 도메인 주소를 1년간 무료로 가질 수 있으며, 무제한 트래픽을 제공해서 사이트 방문자가 몇명이 되든 다 수용이 가능하고, 구글 애널리틱스 연동이 가능해 사이트를 분석할 때 유용하며, 윅스 광고 제거를 통해서 더이상 윅스에 속한 사이트가 아닌 정말 자신만의 브랜드가 담긴 자신의 사이트를 구축할 수 있게 됩니다.

업그레이드: 이렇게 무료 버전에서 업그레이드를 하게되면, 자신만의 도메인 주소를 1년간 무료로 가질 수 있으며, 무제한 트래픽을 제공해서 사이트 방문자가 몇명이 되든 다 수용이 가능하고

8. 사이트 섹션 위치 변경, 복제, 제거하기

현재 사이트는 메인 배너 / 전문분야 / 비전 소개등 각 섹션별로 이루어져 있습니다.

이 섹션들의 위치를 바꾸거나, 복제를 해서 새로 추가를 하거나, 아니면 제거를 하는등의 작업이 필요하게 됩니다.

1) 페이지 오른쪽 상단에 있는 줌아웃 뷰 아이콘을 클릭해주세요.

페이지 오른쪽 상단에 있는 줌아웃 뷰 아이콘을 클릭해주세요.

2) 페이지 전체가 축소되어 나타게 되는데요. 여기서 각 섹션별로 오른편에 컨트롤할 수 있는 아이콘이 나오게 됩니다. 컨트롤 버튼을 통해서 섹션을 위/아래로 움직이거나, 복제 또는 삭제가 가능합니다.

페이지 전체가 축소되어 나타게 되는데요. 여기서 각 섹션별로 오른편에 컨트롤할 수 있는 아이콘이 나오게 됩니다.

로고, 배너등 모든 디자인을 쉽게 하는 도구 *** 를 소개합니다!


9. 사이트 로고 수정하기

1) 사이트 로고를 클릭한 뒤, 아래 나오는 “이미지 변경” 버튼을 클릭해서 원하는 로고로 변경하실 수 있습니다.

사이트 로고를 클릭한 뒤, 아래 나오는 “이미지 변경” 버튼을 클릭해서 원하는 로고로 변경하실 수 있습니다.

2) 사이트 이름을 클릭한 뒤, “텍스트 편집” 버튼을 클릭해서 원하는 사이트 이름으로 변경하실 수 있습니다.

사이트 이름을 클릭한 뒤, “텍스트 편집”을 클릭해서 원하는 사이트 이름으로 변경하실 수 있습니다.

10. 네비게이션 메뉴 수정하기

1) 네비게이션 부분을 더블클릭하면 나오는 창에서 각 사이트 메뉴를 확인할 수 있습니다. 그리고 각 사이트 메뉴 오른편에 있는 점점점 아이콘을 클릭하면, 스크린샷에서 볼 수 있듯이, 메뉴 이름 변경을 하거나, 삭제등을 할 수 있습니다.

1)네비게이션 부분을 더블클릭하면 나오는 창에서 각 사이트 메뉴를 확인할 수 있습니다. 그리고 각 사이트 메뉴 오른편에 있는 점점점 아이콘을 클릭하면, 스크린샷에서 볼 수 있듯이, 메뉴 이름 변경을 하거나, 삭제등을 할 수 있습니다.

11. 텍스트 수정하기

사이트에 있는 모든 텍스트는 더블 클릭해서 모두 수정하고 스타일도 쉽게 적용할 수 있습니다.

1) 원하는 텍스트를 아래와 같이 더블클릭하면, 편집모드로 바뀌면서 바로 원하는 텍스트로 수정할 수 있습니다. 그리고 오른쪽에 나온 창을 통해서, 글꼴, 크기, 진하게, 기울기, 밑줄, 정렬등 스타일과 관련된 편집이 가능합니다.

원하는 텍스트를 아래와 같이 더블클릭하면, 편집모드로 바뀌면서 바로 원하는 텍스트로 수정할 수 있습니다. 그리고 오른쪽에 나온 창을 통해서, 글꼴, 크기, 진하게, 기울기, 밑줄, 정렬등 스타일과 관련된 편집이 가능합니다.

12. 배경화면 수정하기

원하는 배경부분에 더블 클릭하면 나오는 “스트립 배경 변경” 버튼을 클릭하면 배경을 수정할 수 있는 창이 나오게 됩니다. 그러면 여기서 색상/이미지/동영상등 다양하게 배경화면으로써 적용할 수 있으며, 단순히 추천 배경을 클릭해서 바로 수정할수도 있습니다.

원하는 배경부분에 더블 클릭하면 나오는 “스트립 배경 변경” 버튼을 클릭하면 배경을 수정할 수 있는 창이 나오게 됩니다. 그러면 여기서 색상/이미지/동영상등 다양하게 배경화면으로써 적용할 수 있으며, 단순히 추천 배경을 클릭해서 바로 수정할수도 있습니다.

13. 새로운 요소 추가하기

여기서 말하는 요소는 슬라이더, 버튼, 섹션 디자인 템플릿, 메뉴, 소셜미디어 아이콘등 사이트를 꾸미기 위해서 필요한 모든 요소들을 말합니다.

그리고 이 요소 추가하는 방법을 통해서 자기가 원하는 웹사이트에 필요한 요소들을 추가해줌으로써 원하는 사이트 디자인을 구현할 수 있습니다.

1) 왼편에 있는 아이콘들 중 “플러스 아이콘”을 클릭해주세요.

새 요소 추가하기

2) 여러 요소들을 확인할 수 있는데, 여기서 새로운 디자인의 섹션을 추가하기 위해서 “스트립”을 클릭하고, 아래와 같은 디자인 하나를 클릭해주세요.

여러 요소들을 확인할 수 있는데, 여기서 새로운 디자인의 섹션을 추가하기 위해서 “스트립”을 클릭하고, 아래와 같은 디자인 하나를 클릭해주세요.

3) 사이트 맨 밑 하단에 섹션이 새로 추가된 것을 확인할 수 있습니다. 이 섹션의 텍스트는 더블클릭해서 수정할 수 있고, 위치를 변경하고자 한다면, 아까 “사이트 섹션 위치 변경, 복제, 제거하기”에 따라서 수정하시면 되겠습니다.

사이트 맨 밑 하단에 섹션이 새로 추가된 것을 확인할 수 있습니다. 이 섹션의 텍스트는 더블클릭해서 수정할 수 있고, 위치를 변경하고자 한다면, 아까 “사이트 섹션 위치 변경, 복제, 제거하기”에 따라서 수정하시면 되겠습니다.

여기까지 윅스 사용법과 함께 윅스 홈페이지를 만들기 위해 필요한 편집 도구 사용 방법들을 알아보았습니다!

혹시 이 외에도 궁금한 사항이 있으신가요? 그렇다면 아래 댓글을 통해 남겨주세요!

윅스 웹사이트 만들기가 아닌 다른 방법으로 만들고 싶다면? 1시간안에 워드프레스로 웹사이트 만들기도 확인해주세요!


Write A Comment