코딩 없이 무료로 Chat GPT 웹앱 만들기 (1) – 편집기, 테마 설치

본 포스팅의 내용은 이미 여러분의 워드프레스 사이트 설치(set-up)가 끝났다는 것을 전제로 합니다. 여러분의 워드프레스 웹사이트가 없으시다면, 오라클 클라우드 (1) ~ (4) 포스팅들을 참고해서 워드프레스 사이트 세팅을 진행한 뒤 따라와주세요.

1. Elementor 편집기, Astra 테마 설치

먼저 기본 워드프레스 에디터의 경우, 상대적으로 인기 있는 에디터 플러그인에 비해 사용이 불편합니다. 따라서 저희는 세계에서 가장 인기 있는 워드프레스 에디터 플러그인 중 하나인 Elementor를 설치하여 사용해보겠습니다. 무료 버전으로도 충분히 퀄리티 있는 홈페이지 제작이 가능합니다.

Admin 페이지의 좌측 메뉴에서 ‘plugins > add new’ 또는 ‘플러그인 > 새로 추가 ‘를 통해 플러그인 추가 페이지로 이동해서, Elementor를 검색 하신 뒤, 버튼을 눌러 설치해주세요.

설치가 끝난 뒤에는 ‘Activate’ 또는 ‘활성화’ 버튼을 눌러 설치 하신 플러그인을 활성화해주세요.

플러그인이 활성화 된 후에는 Elementor 서비스 가입을 유도하는 페이지로 이동하는데, 우측 상단의 ‘X’ 표시를 눌러 무시해주셔도 됩니다.

이제 테마를 설정해보겠습니다. 사진처럼 Admin 페이지 좌측 메뉴에서 ‘Appearance’ 또는 ‘외모’ 탭의 ‘Themes’ 또는 ‘테마’에서 Add new (새 테마 추가)를 눌러주세요.

우측에 테마 이름을 검색할 수 있는 검색 바에 ‘astra’를 검색 하신 뒤, ‘Astra’ 테마를 install(설치) 버튼을 눌러 설치해주세요.

Astra 테마 설치가 완료된 뒤에는 Activate(활성화) 버튼을 눌러 설치한 Astra 테마를 활성화 해주세요.

활성화가 완료된 이후에 다시 Admin 페이지의 좌측 메뉴를 보시면, ‘Astra’라는 메뉴가 추가되었음을 확인 하실 수 있습니다. Astra 버튼을 눌러 Astra 테마 Welcome 페이지로 이동해주신 뒤, 우측의 사이드바에서 Starter Templates라는플러그인을 install(설치) 버튼을 눌러 설치해주세요.  

설치가 완료되면, Starter Templates 템플릿 관련 페이지로 이동되는데, 하단의 Build Your Website Now (파란색 버튼)을 눌러주세요.

그러면 어떤 편집기와 호환이 되는 테마를 선택할 것인지 묻는 창이 나옵니다. 저희는 Elementor 편집기 플러그인을 사용하여 테마를 편집할 것이므로, Elementor를 클릭해주세요.

이동되는 페이지에서 보시는 테마들은 ‘premium’ 뱃지가 붙은 테마들을 제외하고는 모두 무료로 사용 하실 수 있는 테마들입니다. 모두 Elementor 편집기와 호환 되는 테마들이니 원하시는 테마를 골라 선택해주세요.

마음에 드는 테마를 선택 하시면, 로고를 업로드 해달라는 메시지가 나오는데, 로고가 없으시다면 그냥 Skip & Continue 버튼을 눌러주시면 됩니다. 어차피 나중에 다시 설정할 수 있습니다.

다음엔 톤앤매너, 웹사이트의 색상 조합과 폰트를 정할 수 있는 화면이 나옵니다. 어차피 이 부분도 나중에 변경 가능하니, 부담 없이 원하는 대로 선택 해주신 뒤 Continue 버튼을 눌러 쭉 진행해주세요.

그러면 간단한 정보를 선택적으로 요청하는 페이지가 나오는데, 굳이 입력하지 않으시고 다음으로 넘어가셔도 됩니다.

이후에 Starter Templates의 설치가 완료될 때까지 잠깐 기다리신 뒤, 설치가 완료되면 위와 같은 페이지로 이동됩니다. View Your Website 버튼을 눌러 완료해주세요.

그러면 여러분이 선택 하신 테마가 설치된 여러분의 웹사이트 메인 화면으로 이동합니다. 편집을 위해 여러분의 웹사이트 화면 상단의 검은 바(admin bar) 메뉴에서 Edit with Elementor 버튼을 클릭해주세요.

그러면 저희가 설치했던 Elementor 편집기 플러그인으로 여러분이 설치한 테마를 편집할 수 있는 페이지로 이동합니다.

여기까지 따라오느라 고생 많으셨습니다. 다음 포스팅에서는 이제 본격적으로 Chat GPT를 웹사이트에 연결하는 방법을 알려드리겠습니다.