버튼 요소 ①: 넣고 링크 연결하기

안내 페이지의 마지막에는 대개 "상담 신청하기", "자세히 보기" 같은 버튼이 있습니다. 이 글에서는 에디터에서 버튼을 넣고, 문구를 고치고, 다른 주소로 이동하거나 팝업이 열리도록 링크를 연결하는 과정을 살펴봅니다. 버튼의 색과 호버 효과는 별도 글(버튼 ③)에서 다룹니다.

1. 버튼 넣기

먼저 버튼을 넣을 섹션을 선택하고 왼쪽 레일의 요소 추가를 엽니다. 콘텐츠 카테고리의 버튼을 누르면 버튼 추가 창이 열립니다. 버튼 텍스트 칸에 문구를 쓰면 아래 미리보기에 바로 반영되고, 삽입을 누르면 섹션 맨 아래에 가운데 정렬된 버튼이 들어갑니다. 처음 들어가는 버튼은 보라색 배경에 흰 글자입니다.

2. 문구 고치기

버튼을 누르면 위쪽에 텍스트 편집 창이 열리고 글자를 바로 고칠 수 있는 상태가 됩니다. 이때 버튼은 가로로 넓게 보이지만 편집을 마치면 원래 크기로 돌아옵니다. 문구를 모두 선택(Ctrl+A)한 뒤 새로 입력하고, Esc를 누르면 편집이 끝나면서 버튼은 선택된 채로 남습니다. 버튼 바깥의 빈 곳을 눌러도 편집은 끝나지만 선택이 풀립니다. 아래는 문구를 "지금 무료 상담 신청하기"로 바꾸는 중입니다. 텍스트 편집 창의 항목은 별도 글에서 다룹니다.

버튼을 선택하면 오른쪽 위 모서리에 작은 원이 나타납니다. 글자 편집 중에는 원이 넓어진 버튼의 끝에 있다가, 편집을 마치면 버튼 모서리로 옮겨 옵니다. 이 원을 누르면 요소 설정 열기, 텍스트·폰트 편집, 링크 편집, 요소 복제, 요소 삭제 버튼이 있는 툴바가 펼쳐집니다. 툴바의 전체 구성은 별도 글에서 다룹니다.

3. 링크 연결하기: URL 이동

툴바에서 링크 편집을 누르면 링크 창이 열립니다. 위쪽의 URL 이동과 팝업 열기 중 하나를 고르는 구조이고, 처음에는 URL 이동이 선택되어 있습니다.

• URL: 이동할 주소를 입력하고 Enter를 누르면 적용됩니다. 주소는 https://로 시작하게 입력하세요. 같은 페이지 안의 위치로 이동하려면 #faq처럼 #으로 시작하는 주소도 입력할 수 있습니다.
• 스토어 링크 (장바구니·상품 선택): 스토어와 연결할 때 쓰는 목록입니다. 이 글에서는 다루지 않습니다.
• 열기 방식: 새 탭에서 열기와 현재 탭에서 열기 중 고릅니다. 고른 값은 저장된 코드의 target 속성에 들어갑니다.
• rel 속성: 없음, noopener noreferrer (외부 링크 권장), nofollow, sponsored (광고/제휴) 등 다섯 가지 중 고릅니다.

4. 링크 연결하기: 팝업 열기

팝업 열기를 누르면 이 사이트에 만들어 둔 팝업이 팝업 선택 목록에 나타납니다. 팝업이 하나도 없으면 "팝업이 없습니다. 먼저 팝업을 만드세요."라는 안내만 보입니다. 팝업은 상단바의 팝업 버튼으로 여는 관리 창에서 새 팝업을 눌러 만들고, 팝업 안의 디자인은 별도 글에서 다룹니다. 팝업을 고르면 버튼의 주소는 #으로 바뀌고 선택한 팝업이 연결됩니다.

5. 설정 창에서 한 번에 보기

툴바의 요소 설정 열기를 누르면 버튼 설정 창이 열립니다. 위에서부터 클릭 동작(URL 이동·팝업 열기), 링크 URL과 열기 방식, 버튼 정렬(왼쪽·가운데·오른쪽), 아이콘, 배경색, 위치 이동 순서입니다. 링크 창과 같은 항목을 여기서도 바꿀 수 있고, rel 속성은 링크 창에만 있었습니다. 버튼 정렬을 바꾸면 버튼을 감싼 영역의 정렬이 달라졌습니다. 아이콘과 배경색은 별도 글에서 다룹니다.

6. 링크 형태 버튼과 button 태그 버튼

요소 추가로 넣은 버튼은 링크 형태입니다. 전체 소스로 넣은 HTML에 button 태그가 있으면 링크를 연결하는 방법은 같지만 차이가 두 가지 보였습니다. 하나는 툴바입니다. button 태그 버튼에는 상태별 색상 (호버·눌림·포커스) 아이콘이 더 있고, 링크 형태 버튼에는 없었습니다.

다른 하나는 주소가 저장되는 자리입니다. 저장한 뒤 새로고침하고 전체 소스를 열어 보니 링크 형태 버튼은 href에, button 태그 버튼은 data-href에 주소가 들어 있었고 새 탭 설정은 둘 다 target에 들어 있었습니다.

7. 이렇게 활용해 보세요

• 상담 신청 페이지가 따로 있다면 URL 이동에 그 주소를 넣고 열기 방식을 새 탭에서 열기로 고르면 안내 페이지를 열어 둔 채 신청 화면이 열리도록 설정할 수 있습니다.
• 팝업을 만들어 두고 버튼에서 팝업 열기를 고르면 페이지 안에서 팝업이 열리도록 연결할 수 있습니다.

8. 알아 두실 점

• 이 글의 화면은 모두 편집 화면 기준입니다. 문구와 링크, 새 탭 설정은 저장한 뒤 새로고침해도 유지되는 것을 확인했습니다.
• 변경한 내용은 상단바의 저장을 눌러야 보존됩니다.

버튼의 색, 호버 효과, 상태별 색상은 버튼 ③ 글에서 이어서 다룹니다.