윅스 로그인 & 개발자 모드 켜기 - 4일차

윅스 로그인 & 개발자 모드 켜기 - 4일차

윅스 로그인 & 개발자 모드 켜기 - 4일차

 

 

윅스 (Wix) 로그인 

윅스 (Wix) 로그인

Corvid By Wix, 윅스에서 개발자 모드를 활용하려면 윅스 (Wix.com) 으로 로그인을 해야합니다. 윅스 (Wix) 홈페이지를 보면 위와 같은 모습을 하고 있습니다. 로그인을 하기 위해서는 홈페이지 우측 상단에 있는 " 로그인 " 버튼을 눌러 로그인 과정을 진행합니다.

 

윅스 (Wix) 로그인

윅스 (Wix) 로그인은 위와 같은 방식으로 로그인이 가능합니다. 이메일 계정을 통해서 하거나, 페이스북, 혹은 구글 계정을 통해서 로그인이 가능합니다. 아직 가입을 하지 않았다면, 윅스 로그인 밑에 있는 새 계정 만들기를 통해서 윅스 계정을 만드는 방법도 하나의 방법입니다. 자신에게 편한 방법으로 로그인을 진행합니다.

 

 

 

윅스 (Wix) 개발자 모드 켜기

윅스 (Wix) 개발자 모드 켜기

로그인을 하고 기존에 계정을 갖고 있던 인원이면 그간 작업을 했던 사이트들을 보여주는 내 사이트라는 화면을 보여줍니다. 일단 개발자 모드를 이용한 새로운 프로젝트를 시작하는 것이기 때문에 우측 상단의 " 사이트 추가 " 버튼을 눌러 새로운 프로젝트 사이트를 만들도록 합니다.

 

윅스 (Wix) 개발자 모드 켜기

사이트 추가 버튼을 눌러 진행하게 되면, 다음과 같이 카테고리에 맞춰 템플릿을 선택하는 화면이 나옵니다. 다양한 카테고리에 맞는 템플릿을 골라서 진행을 하는 것도 좋겠지만 기존에 만들어져 있는 것들을 가지고 하다보면 복잡한 경향이 있기도 해서, 일단 여기서 " 기타 " 카테고리를 선택을 합니다.

 

윅스 (Wix) 개발자 모드 켜기

" 기타 " 카테고리를 선택을 하긴 했지만, 어떤 카테고리를 선택을 하든, 윅스에서는 다음과 같이 두 가지 버전으로 사이트의 기본을 만들도록 선택하는 부분이 나옵니다. 하나는 " Wix ADI로 자동 제작하기 " 또 다른 하나는 " Wix 에디터로 직접 제작하기 " 가 나옵니다. 여기서는 " Wix 에디터로 직접 제작하기 " 를 눌러 진행을 합니다.

 

Wix ADI로 자동 제작하기

윅스에서 새롭게 개발한 윅스 디자인 인공지능(Wix Artificial Design Intelligence) 이라는 것으로 사이트를 자동으로 제작하는 방법으로 이용자에게 홈페이지를 만드는 데 필요한 기능 및 디자인 등의 연관된 질문을 통해서 사이트를 이용자의 성향에 가깝게 만들어서 제공을 하는 방법입니다.

 

Wix 에디터로 직접 제작하기

윅스 에디터로 직접 제작하는 방법은 기존의 윅스 (Wix)를 활용해서 사이트를 만들던 분들에게는 익숙한 방법인 PPT 프레젠테이션을 만들 듯이 드래그 앤 드랍 방식으로 사이트를 에디터로 제작할 수 있는 방법입니다.

 

 

윅스 (Wix) 개발자 모드 켜기

" Wix 에디터로 직접 제작하기 " 를 눌러 진행을 하면 다음과 같이 홈페이지 템플릿을 선택할 수 있는 화면이 나오는데, 좌측 상단의 카테고리 위에 있는 " 레이아웃 원본 " 을 눌러 진행합니다.

 

윅스 (Wix) 개발자 모드 켜기

" 레이아웃 원본 " 을 누르면, 기존에 윅스에서 제공한 미리 디자인이 된 템플릿이 아닌, 원본 그대로 작업을 할 수 있는 레이아웃 날 것의 것들이 있습니다.

 

윅스 (Wix) 개발자 모드 켜기

여기서 어떠한 설정도 되어 있지 않은 " Wix 레이아웃 원본 " 을 눌러 편집을 시작합니다.

 

윅스 (Wix) 개발자 모드 켜기

레이아웃 원본을 눌러 진행을 하면 윅스 (Wix) 의 가장 기초적인 화면이 나오게 됩니다. 이 상태에서 홈페이지를 편집하는 방법은 드래그 앤 드랍 방식으로 편집을 진행할 수 있는 데, 원하는 부분은 윅스 개발자 모드를 활성화를 시켜서 자바스크립트, 데이터베이스등을 다루기 위하는 것이기 때문에 아래의 화면과 같이 윅스의 상단 메뉴에서 "개발자 모드"로 가서 "개발자 모드 활성화하기"를 누릅니다.

 

윅스 (Wix) 개발자 모드 켜기

윅스 (Wix) 개발자 모드 켜는 방법

• 윅스 상단 메뉴 > 개발자 모드 > 개발자 모드 활성화하기

 

윅스 (Wix) 개발자 모드 켜기

윅스 개발자 모드를 활성화하면 위와 같이 Corvid 관련된 영상 및 설명이 나옵니다. 하단의 "시작하기" 버튼을 눌러 개발자 모드를 진행합니다.

 

윅스 (Wix) 개발자 모드 켜기

윅스 개발자 모드를 진행하게 되면, 앞서 위에서 언급한 윅스 에디터의 화면에 좌측 부분과 하단 부분에 창들이 추가된 것을 확인할 수 있습니다. 좌측 부분의 "사이트 구조 사이드 바" 라고 부르며, 하단 부분의 "페이지 코드 입력란" 이라고 부릅니다.

 

윅스 (Wix) 개발자 모드 켜기

페이지 코드 입력란의 우측 부분에 페이지 코드를 최대화 시킬 수 있는 부분을 선택하면 아래와 같은 화면을 볼 수 있습니다.

 

윅스 (Wix) 개발자 모드 켜기

개발 프로그램 에디터를 써본 사람이나 개발 관련 강의를 들어보신 분들은 상당히 익숙한 화면이 나오게 됩니다. 개발자들이 코딩 언어를 입력하는 창이 나오게 되는데, "사이트 구조 사이드 바"와 "페이지 코드 입력란"을 통해, 그간 드래그 앤 드랍 방식으로 홈페이지를 만들던 윅스 (Wix) 에디터 형식에서 "자바스크립트 (JavaScript)"와 "데이터베이스 (Database)"를 다루는 프론트엔드, 백엔드를 다같이 다루는 풀스택 엔지니어와 같은 홈페이지 개발 환경이 갖추어지는 것입니다.

 

 

이상으로 윅스 (Wix) 로그인하는 방법과 개발자 모드를 켜는 방법을 알아보았고, 이제는 윅스 해커톤 (Wix Hackathon)에 기본적으로 참여할 수 있는 환경이 갖춰졌습니다.

 

 

윅스 해커톤 2020 후기 - 목차 보러가기

Wix Hackathon 2020 review Index

Wix Hackathon 2020 review Index