엘리멘터 인터페이스 완벽 해부

들어가기에 앞서… 위젯 = 요소 = 디자인 및 기능 단위라는 점을 미리 알아 두시기 바랍니다.

먼저 엘리멘터 편집 화면으로 진입해야겠죠? 워드프레스 관리자 메뉴에서 **[글] -> [글 추가]**를 클릭합니다. 페이지로 작업하는 것보다 글(포스트)을 하나 작성해서 연습하는 것이 안전하므로 글을 추가해서 연습하겠습니다. 글 제목을 대략 적어주신 후, 상단에 있는 파란색 [Elementor로 편집] 버튼을 과감하게 클릭해 주세요.

잠깐! 이미 존재하는 글이나 페이지를 수정하려면?

잠시 로딩 화면이 지나가고, 완전히 새로운 편집 화면이 열릴 것입니다. 글 또는 페이지 내용이 복잡하거나 서버에 부하가 많이 걸린 상태에서는 로딩이 아주 느리거나 오류가 생기는 경우도 있습니다. 당황하지 마시고 새로 고침 한 번 해보신 후에 같은 증상이 반복되면 웹사이트 관리자에게 문의하시는 것이 좋습니다.

1. 전체 화면 구조 파악하기 (패널과 캔버스)

엘리멘터의 화면은 크게 **’좌측 위젯 패널’**과 ‘우측 디자인 캔버스’ 두 가지 영역으로 나뉩니다.

• 우측 캔버스 (디자인 영역): 실제 웹사이트가 어떻게 보여지는지 실시간으로 확인하며 작업하는 공간입니다. 마우스로 요소를 끌어다 놓는(Drag & Drop) 도화지라고 생각하시면 됩니다.

• 좌측 패널 (위젯 및 설정 영역): 글자, 이미지, 버튼 등 도화지에 올릴 ‘재료(위젯)’들이 모여 있는 공구함입니다. 우측 캔버스에서 특정 요소를 클릭하면, 이 좌측 패널이 해당 요소의 색상, 크기, 여백 등을 디테일하게 수정할 수 있는 ‘설정 창’으로 변신합니다.

2. 좌측 위젯(요소) 패널 살펴보기 (우리의 공구함)

좌측 패널은 상단 메뉴바와 하단 툴바로 감싸져 있습니다. 가장 자주 보게 될 화면입니다.

• 햄버거 메뉴 (좌측 상단 ≡ 아이콘): 사이트 전체의 기본 폰트, 기본 색상 등을 세팅하는 ‘사이트 설정(Site Settings)’으로 들어가는 문입니다. (이 부분은 나중에 심화 과정에서 다루겠습니다.)

• 위젯 검색창: 원하는 위젯(예: 이미지, 버튼)을 영문이나 한글로 검색하여 빠르게 찾을 수 있습니다.

• 위젯 목록: 기본(Basic), 일반(General), 프로(Pro – 유료 버전) 등으로 그룹화되어 있습니다. 무료 버전만으로도 ‘기본’과 ‘일반’ 탭에 있는 수십 개의 위젯을 마음껏 사용할 수 있습니다.

3. 상단 툴바 (⭐ 생존 필수 기능 여러 가지)

좌측 패널 맨 위를 보시면 작지만 아주 중요한 아이콘들이 모여 있습니다. 실무에서 가장 많이 클릭하게 될 ‘생존 필수 기능’들입니다.

1. ⚙️ 설정 (+ 표시와 시계 표시 사이 문서 표시): 왼쪽 상단, 현재 작업 중인 ‘페이지’ 자체의 설정을 바꿉니다. 페이지 제목을 숨기거나, 페이지 레이아웃을 ‘Elementor 캔버스(테마의 헤더/푸터를 모두 없애고 백지상태로 만드는 기능)’로 변경할 때 주로 씁니다.

2. 📑 구조 (레이어 겹침 아이콘): 위 스크린샷의 오른쪽 상단 돋보기 아이콘과 눈 아이콘 사이에 있는 겹친 레이어 아이콘입니다. 포토샵의 ‘레이어(Layer)’ 창과 똑같습니다. 오른쪽에 “구조” 라는 스폰지밥처럼 생긴 캐릭터가 있는 창이 보이시나요? 복잡하게 겹쳐진 요소들 사이에서 내가 원하는 위젯을 정확하게 선택하고, 순서를 위아래로 바꿀 때 필수적입니다. 실무자들은 항상 이 창을 띄워놓고 작업합니다.

3. 🕒 작업 내역 (시계 아이콘): 왼쪽 상단, 가장 중요합니다! 디자인을 하다가 실수를 했나요? 당황하지 마시고 이 시계 아이콘을 누르세요. 과거의 작업 내역이 순서대로 기록되어 있어 언제든지 되돌리기(Undo)가 가능합니다. (단축키: Ctrl + Z 또는 Cmd + Z). 작업을 하다보니 이상하게 망가지거나 모양이 틀어졌다? 당황하지 마세요. 2가지 방법이 있습니다. 가장 쉬운 방법은 새로 고침해서 작업한 내용을 모두 없애 버리는 것이고 다른 방법은 작업 내역을 이용해서 되돌아가거나 리비전으로 이전에 저장된 내용으로 되돌아가는 것 입니다. 이 부분은 중요하고 조금 설명이 길어지니 다음에 세밀하게 설명하겠습니다.

4. 📱 반응형 모드 (모니터/스마트폰 아이콘): 가운데 상단, 이 버튼을 누르면 화면 상단에 PC, 태블릿, 모바일 아이콘이 나타납니다. 모바일에서 화면이 어떻게 보이는지 확인하고, 모바일에만 글자 크기를 줄이는 등 반응형 작업을 할 때 사용합니다.

5. 👁️ 변경사항 미리보기 (눈알 아이콘): 오른쪽 상단, 작업 중인 페이지가 실제 방문자에게 어떻게 보이는지 새 창을 띄워 확인합니다.

6. 업데이트 / 발행 버튼: 모든 작업을 마쳤다면 가장 우측의 핑크색(경우에 따라 색상이 다르게 나올 수 있음) 버튼을 눌러 저장합니다.

💡 시니어 개발자의 실무 팁

초보자분들이 가장 많이 겪는 혼란은 “방금 전까지 보이던 위젯(요소) 목록이 사라졌어요!”입니다. 우측 디자인 캔버스(본문 영역)에서 특정 텍스트나 이미지를 클릭하면, 좌측 패널이 **’해당 위젯의 설정 창’**으로 바뀝니다. 다시 원래의 **’위젯 목록(공구함)’**으로 돌아가고 싶다면, 좌측 패널 우측 상단에 있는 + 아이콘을 클릭하시면 됩니다.

이제 엘리멘터의 조종석에 있는 버튼들이 어떤 역할을 하는지 완벽하게 파악하셨습니다!

다음 [레슨 3]에서는 웹 디자인의 가장 기초이자 뼈대가 되는 ‘컨테이너, 플렉스 박스(구. 섹션 Section)’과 ‘컬럼(Column)’을 생성하고 다루는 방법을 알아보겠습니다.