필수 기본 위젯 다루기 2 (아이콘, 디바이더, 스페이서, 구글맵)

좌측 위젯 패널의 ‘기본(Basic)’ 카테고리에서 오늘 다룰 4가지 위젯을 찾아 캔버스의 빈 컨테이너 안으로 드래그 앤 드롭하며 따라와 주세요.

1. 아이콘 (Icon) 위젯: 시각적 포인트 주기

텍스트만 빼곡한 웹페이지는 지루하기 마련입니다. 아이콘은 긴 설명을 단 하나의 그림으로 요약해 주는 강력한 도구입니다.

• 사용법: ‘아이콘’ 위젯을 캔버스에 끌어다 놓습니다. 기본적으로 별(★) 모양이 표시될 텐데, 좌측 패널의 [아이콘 라이브러리] 버튼을 클릭해 보세요.

• 특징: 엘리멘터에는 수천 개의 ‘폰트 어썸(FontAwesome)’ 아이콘이 기본 탑재되어 있습니다. 검색창에 ‘phone’, ‘mail’, ‘check’ 등 영단어를 검색하여 원하는 아이콘을 즉시 삽입할 수 있습니다.

⭐ 시니어의 실무 팁: 아이콘에 마우스를 올렸을 때 다른 아이콘으로 바뀌거나, 아이콘 자체에 링크를 걸어 버튼처럼 활용할 수도 있습니다. 나중에 목록이나 체크 리스트 등에 체크(✔️) 아이콘, 원형 불릿 아이콘, 마이너스 아이콘 등을 리스트 형태로 배열하면 아주 깔끔해집니다.

2. 구분선 (Divider – 디바이더) 위젯: 콘텐츠의 숨통 트기

서로 다른 주제의 내용이 위아래로 이어질 때, 시각적으로 확실하게 선을 그어주는 역할을 합니다.

• 사용법: ‘디바이더’ 위젯을 요소와 요소 사이에 배치합니다. 좌측 패널에서 선의 형태(실선, 점선, 물결선 등)를 선택할 수 있습니다. 단, 실선이라는 용어는 최근 엘리멘터 업데이트에서 이중 실선이라고 잘못 번역되어 표시되고 있으니 실선이 안보이면 이중 실선이 실선이라고 생각하시면 됩니다.

• 핵심 기능: * 너비와 정렬: 선의 길이를 화면 전체(100%)로 할지, 가운데에 짧게 50%만 줄지 조절할 수 있습니다. 초보자의 경우 rem이나 em 단위보다는 픽셀 단위나 퍼센트 단위를 많이 사용하는 것이 편리합니다.

• 요소 추가: 단순한 선을 넘어, 선 한가운데에 텍스트(예: “또는”, “상세 정보”)를 넣거나 아이콘을 삽입하여 더욱 세련된 디자인을 연출할 수 있습니다.

3. 공백 추가, 스페이서 (Spacer – 여백) 위젯: 1초 만에 공간 만들기

초보자분들이 가장 사랑하는 위젯이자, 웹 디자인에서 가장 중요한 ‘여백의 미학’을 쉽게 구현해 주는 도구입니다. 엘리멘터 버전이 바뀔 때마다 번역이 오락가락하는 경우가 많으니 공백 추가, 여백 추가, 스페이서 등이 모두 같다고 생각하시면 됩니다.

• 사용법: 요소와 요소 사이가 너무 답답하게 붙어있을 때, 그 사이에 ‘공백 추가’ 위젯을 끼워 넣습니다.

⭐ 시니어의 실무 팁 (주의사항): 스페이서는 직관적이고 편하지만, 남용은 금물입니다. 구조가 복잡한 페이지에 스페이서가 너무 많으면 나중에 모바일 화면(반응형)으로 볼 때 여백이 엉망이 되기 쉽습니다. 초반에는 스페이서를 활용하시되, [레슨 7]에서 배울 **마진(Margin)과 패딩(Padding)**의 개념을 익히신 후에는 점차 스페이서 사용을 줄여나가는 것이 진짜 전문가로 가는 길입니다.

4. 구글맵 (Google Maps) 위젯: 오프라인 매장/학원 필수품

Eduma 테마로 오프라인 학원 홈페이지를 만들거나, 회사 소개 페이지(Contact Us)를 만들 때 절대 빠질 수 없는 위젯입니다.

• 사용법: ‘구글맵’ 위젯을 드래그 앤 드롭합니다.

• 설정 방법: 좌측 패널의 ‘위치(Location)’ 입력창에 도로명 주소나 상호명(예: “서울특별시 강남구 테헤란로”, “Gumi-si, Gyeongsangbuk-do”)을 텍스트로 입력하기만 하면, 구글 지도가 알아서 해당 위치를 찾아 핀을 꽂아줍니다!

• 옵션: 지도의 ‘확대/축소(Zoom)’ 배율을 숫자로 조절하고, 지도가 차지하는 세로 ‘높이(Height)’를 조절하여 우리 사이트 레이아웃에 딱 맞게 맞출 수 있습니다.

💡 참고: 이 기본 구글맵 위젯은 간단한 iframe(웹페이지 안에 다른 웹페이지를 삽입하는 방식)을 사용하므로, 복잡한 ‘구글맵 API 결제 연동’ 없이도 무료로 간편하게 사용할 수 있습니다. 단, 지도 색상을 커스텀하거나 여러 개의 핀을 꽂으려면 고급 위젯이나 API 연동이 필요합니다.

수고하셨습니다! 이제 여러분은 뼈대를 세우고, 핵심 콘텐츠를 넣고, 여백과 구분선으로 깔끔하게 정리하는 방법까지 모두 익히셨습니다. 하지만 화면을 보면 아직 글씨는 까맣고, 버튼은 밋밋한 초록색일 겁니다.

다음 [레슨 6]에서는 드디어 웹페이지에 생명을 불어넣는 마법! 글꼴(타이포그래피)을 바꾸고, 아름다운 색상을 입히고, 배경을 설정하는 ‘스타일링 기초 완벽 가이드’를 진행하겠습니다.