필수 기본 위젯 다루기 1 (제목, 텍스트 에디터, 이미지, 버튼)

미리 알아두셔야할 점이 있습니다. 이번 레슨에서 말하는 제목은 글이나 페이지의 제목을 말하는 것이 아니라 본문 안에서 H1~H6까지 크기와 굵기가 다르게 지정되어 있는 글 본문 안에서의 제목을 뜻합니다.

보통 글 제목이나 페이지 제목은 따로 입력하지 않아도 자동으로 화면에 표시되도록 사이트를 만들기 때문에 따로 본문에 표시할 필요가 없는 경우가 대부분입니다.

아래 스크린샷에서 “적당한 제목으로 수정하신 후 연습 시작” 이라는 제목은 글(포스트) 제목이 자동으로 표시되는 것입니다. 날짜도 마찬가지구요.

현재 화면에서 보는 글 제목과 날짜는 실제 글(포스트, 블로그) 보기 화면에서는 다르게 보이거나 안보이게 할 수 있으니 신경쓰지 마시고 본문에만 집중하세요.

좌측 위젯 패널(요소 패널)을 열어주세요. 검색창 아래 ‘기본(Basic)’ 카테고리에 오늘 우리가 다룰 핵심 위젯들이 모두 모여 있습니다. 이 위젯들을 캔버스의 빈 컨테이너 안으로 마우스로 드래그 앤 드롭(Drag & Drop)하여 배치하게 됩니다.

1. 제목 (Heading) 위젯: 웹페이지의 간판

가장 먼저 방문자의 시선을 사로잡는 핵심 텍스트입니다.

• 사용법: ‘제목’ 위젯을 컨테이너 안으로 끌어다 놓습니다. 좌측 패널의 [콘텐츠] 탭에서 제목 텍스트를 입력할 수 있습니다.

⭐ 시니어의 실무 팁 (HTML 태그와 SEO): 좌측 설정 창을 보면 **’HTML 태그’**를 선택하는 항목(H1 ~ H6)이 있습니다. 디자인을 위해 글자 크기를 키우려고 이 태그를 마음대로 바꾸시면 절대 안 됩니다

• H1: 해당 페이지의 가장 핵심 주제 (페이지당 1번만 사용 권장)

• H2 ~ H6: 책의 목차처럼 대분류, 중분류, 소분류로 내려가는 구조적 태그입니다. 구글 같은 검색 엔진(SEO)은 이 태그를 보고 웹페이지의 구조를 파악하므로, 시각적인 크기 조절은 나중에 배울 [스타일] 탭에서 하고, 여기서는 구조에 맞는 올바른 태그를 선택해야 합니다.

• 서두에서도 말했듯이 제목이라는 표현 때문에 글 제목(포스트 제목)으로 착각하시면 안됩니다. 지금 연습하는 것은 그냥 본문 안에서의 제목입니다.

2. 텍스트 에디터 (Text Editor) 위젯: 상세한 본문 작성

제목 위젯이 ‘간판’이라면, 텍스트 에디터는 ‘상세 설명문’입니다.

• 사용법: 긴 문장이나 문단(Paragraph)을 작성할 때 사용합니다. 위젯을 배치하면 한글이나 워드 프로그램에서 보던 익숙한 텍스트 편집기 툴바(굵게, 기울임, 글머리 기호 등)가 나타납니다.

• 특징: 문단 나누기, 특정 단어에만 링크 걸기, 텍스트 색상 부분 변경 등 상세한 문장 편집이 가능합니다. 단, 문장 전체의 폰트나 줄 간격 같은 일괄적인 디자인은 [스타일] 탭에서 제어하는 것이 좋습니다.

3. 이미지 (Image) 위젯: 시각적 메시지 전달

글보다 강력한 것이 바로 이미지입니다.

• 사용법: ‘이미지’ 위젯을 끌어다 놓으면 회색 플레이스홀더(가상 이미지)가 생깁니다. 좌측 패널에서 이 이미지를 클릭하여 내 컴퓨터의 사진을 업로드하거나 워드프레스 미디어 라이브러리에서 선택합니다.

⭐ 시니어의 실무 팁 (이미지 크기 설정): 좌측 패널의 ‘이미지 크기(Image Size)’ 드롭다운을 확인하세요. 원본 이미지가 아무리 커도, 웹사이트 성능을 위해 화면에 보여질 적절한 크기(예: Medium, Large 등)로 제한해서 불러오는 것이 로딩 속도 최적화의 기본입니다. 원본 그대로 다 불러오면 사이트가 무거워집니다.

• 요소창의 위젯을 이미 만들어 놓은 위젯 안에만 넣을 수 있는 것이 아니라 여기로 위젯 끌어오기 상자 안에 드래그 앤 드롭하실 수 있습니다. 그렇게 하면 위젯이 자동으로 새로운 컨테이너 안에 들어가게 됩니다. 

4. 버튼 (Button) 위젯: 사용자 행동 유도 (Call To Action)

“자세히 보기”, “수강 신청하기”, “문의하기” 등 방문자의 클릭을 유도하는 가장 중요한 요소입니다.

• 사용법: 버튼 위젯을 배치하고, 좌측 패널 [콘텐츠] 탭에서 버튼에 들어갈 텍스트(유형)와 클릭했을 때 이동할 **링크(URL)**를 입력합니다.

• 핵심 설정: * 정렬: 버튼을 컨테이너의 왼쪽, 가운데, 오른쪽 중 어디에 배치할지 결정합니다.

  • 아이콘: 버튼 텍스트 옆에 작은 화살표나 장바구니 같은 아이콘을 추가하여 클릭률을 높일 수 있습니다. (아이콘 라이브러리 제공)

💡 생산성을 200% 높이는 마법의 기능: ‘우클릭’

오늘 배운 위젯 4가지를 캔버스에 배치하셨나요? 실무에서는 똑같은 형태의 위젯을 여러 번 만들어야 할 때가 많습니다. 이때 처음부터 다시 위젯을 끌어오고 설정을 맞출 필요가 없습니다.

위젯 위에 마우스를 올리면 나타나는 우측 상단의 연필 아이콘을 ‘우클릭’해 보세요. 우클릭으로 엘리멘터 전용 메뉴를 띄우는 방법은 아래 그림처럼 여러 가지 입니다. 컨테이너는 왼쪽 상단 모서리에 있는 회색 박스에서 우클릭하고, 컨테이너 안에 있는 위젯은 오른쪽 상단 연필 또는 요소 위에서 직접 우클릭하면 되죠.

• 복제, 복사와 붙여넣기, 붙여넣기 스타일(업데이트 되면서 스타일 붙여넣기로 바뀌기도 합니다), 삭제는 정말 자주 사용하는 메뉴이고 능숙하게 사용하면 작업 속도가 아주 빨라지므로 꼭 연습해보세요.

• 복제 (Duplicate): 똑같은 위젯을 바로 아래에 하나 더 만들어냅니다.

• 복사 (Copy) / 붙여넣기 (Paste): 복사해서 다른 컨테이너나 심지어 다른 페이지에 그대로 붙여넣을 수 있습니다.

• 복사 (Copy) / 붙여넣기 스타일 (Paste Style): 복사해서 내용을 붙여넣는 것이 아니라 폰트, 폰트 사이즈, 굵기, 컨테이너 테두리 등 설정된 모양을 붙여 넣습니다. 내용은 다르지만 모양을 동일해야 하는 요소들을 일일이 설정할 필요없이 하나만 설정한 후 복사, 붙여넣기 스타일을 이용해서 모두 같은 모양으로 통일할 수 있습니다. 다음에 다루겠지만 컨터이너의 여백, 테두리 등도 붙여넣기 스타일로 통일할 수 있어요. 미리 연습해 보시는 것도 좋습니다.

이제 여러분은 웹페이지의 가장 기본적인 뼈대(컨테이너)를 세우고, 그 안에 핵심 콘텐츠(위젯)를 배치하는 방법까지 마스터하셨습니다. 현재 상태는 가구를 배치만 해둔 ‘뼈대 완성’ 상태라고 보시면 됩니다. 예쁘게 꾸미는 것은 나중에 스타일링 시간에 다룰 테니 조급해하지 않으셔도 됩니다!

다음 [레슨 5]에서는 페이지를 한층 더 풍성하게 만들어줄 보조 위젯들인 ‘아이콘, 디바이더(구분선), 스페이서(여백), 구글맵’ 다루기 2편을 진행하겠습니다.