아임웹, 원하는 위치로 이동하는 링크 텍스트 사용 방법

유익한 글은 공유하세요. 땡큐! 하실 겁니다.

아임웹으로 만든 사이트 안에서 지정하는 위치로 이동하게 만드는 링크 텍스트 사용 방법을 알려드립니다. 링크 텍스트를 사용하면 중복되는 설명은 생략하고 단순화 시킴으로 전체적인 내용을 핵심 사항에 집중할 수 있게 구성할 수 있습니다. 방문자는 빠르고 효과적으로 내용을 전달 받고 사이트 내에서 이동하므로 체류 시간이 길어집니다.



1 링크 텍스트의 사용 목적

설명이 필요한 텍스트에 설명이 있는 컨텐츠를 링크로 연결시켜 보여주는 목적으로 사용합니다.
설명을 생략하므로 글을 간결하게 쓸 수 있고, 방문자는 속도 있게 읽을 수 있다.

링크 텍스트의 참고 내용을 팝업으로 보여주는게 제일 좋은데,
동일 사이트의 같은 페이지의 다른 섹션이나 다른 페이지의 중간에 위치한 콘텐츠를 링크로 제공할 경우가 있다.
페이지를 이동하고도 스크롤 하여 콘텐츠를 찾아야 한다면 방문자는 페이지에서 이탈하거나 유쾌하지 않은 경험으로 기억할 수 있다.

아임웹에서는 링크 텍스트가 목적하는 위치에 정확하게 방문자를 인도해 드립니다.


2 아임웹 용어 – 페이지, 섹션, 위젯

아임웹 용어
페이지 : 방문자에게 전달하기 위한 정보를 담은 기본 단위. 페이지 안에 섹션이 있고, 섹션 안에 위젯이 들어가는 구조로 이루어져 있다.
섹션 : 섹션(Section)이란 페이지 내 구획 또는 단락을 의미한다. 아임웹은 가로로 구확한다.
위젯 : 페이지를 꾸밀 때 사용하는 가장 작은 단위의 구성요소이다. 섹션 내에서 가로 세로 다양하게 대치할 수 있다.

아임웹은 여러 종류의 위젯을 조합해 섹션을 꾸미고, 페이지를 디자인할 수 있어요.
아래 그림처럼 하나의 페이지는 여러 개 섹션으로 나눌 수 있으며, 각 섹션마다 위젯으로 콘텐츠를 추가하고, 섹션 배경에 이미지나 동영상을 추가할 수 있다. 또한, 기타 다양한 효과를 추가하여 특별한 디자인도 가능하다.

링크 텍스트는 섹션 단위로 이동하게 됩니다.

여러가지 유형의 섹션 (출처: 아임웹 가이드)

텍스트 일부 또는 전체를 마우스로 선택하고 링크를 추가할 수 있습니다.


3 사이트 내 링크 텍스트 사용 방법

3-1 디자인 모드에 접속

3-2 링크로 이동할 섹션의 주소를 확인해서 메모장에 임시 붙여 놓기

섹션의 주소는 “페이지URL + # + 섹션ID” 입니다.

섹션 ID란?
링크를 클릭할 때 이 섹션으로 이동하고 싶을 때 사용할 수 있습니다.예: mypage#s1290311

3-2-1 섹션이 있는 페이지의 메뉴 URL 확인

목표 콘텐츠 페이지의 상단 메뉴설정 아이콘ⓘ을 클릭하여 URL을 확인

메뉴설정 아이콘
페이지 URL

3-2-2 이동할 섹션ID 복사

목표 콘텐츠가 있는 섹션의 우측상단 섹션설정 아이콘ⓘ을 클릭해 섹션ID 복사

섹션 설정
섹션ID

3-2-3 이동할 섹션의 주소 완성

[페이지URL+#+섹션ID] 방식으로
33#s20220125f1ef2273d7769 를 메모장에 완성합니다.

3-3 링크 텍스트를 작성하기 위한 텍스트 위젯을 추가

① 페이지의 위젯과 위젯 사이에 마우스 포인터를 올리면 아래 그림과 같이 위젯 추가⨁ 버튼이 생겨납니다.
② ⨁ 버튼을 클릭하여 위젯 목록(디자인 요소)가 나타나면 텍스트 위젯을 클릭합니다.
③ 페이지에 선택한 텍스트 위젯이 삽입됩니다.

3-4 텍스트 위젯을 마우스로 더블클릭 후 텍스트 입력


3-5 링크 걸어 줄 텍스트를 마우스 드래그로 선택


3-6 텍스트 편집도구에서 링크삽입 아이콘 클릭

3-7 메모장에 보관 중인 섹션 주소 URL에 복사 붙여넣기로 입력


3-8 삽입 클릭하여 저장

새 탭에서 열리게 하려면 새 탭으로 열기(선택 사항) 체크

3-9 미리보기 아이콘을 클릭해서 링크의 동작여부 확인

디자인 모드 화면 상단 오른쪽

미리보기로 확인 후 게시하기

3-10 디자인 모드에서 게시하기 버튼 클릭해서 적용

동작에 문제 없으면 웹사이트에 방영합니다.


4 다른 사이트에서 섹션ID URL 링크 텍스트 사용 방법

링크 텍스트로 사용한 섹션ID URL의 앞에 도메인 주소를 포함하면 다른 사이트에서도 링크 텍스트가 동일하게 작동합니다.

[ 도메인+페이지URL+#+섹션ID ]

도메인 : https://pfnet.co.kr/
페이지URL : 33
섹션ID : s20220125f1ef2273d7769

https://pfnet.co.kr/33#s20220125f1ef2273d7769

링크 텍스트를 효과적으로 사용하면 방문자의 신뢰를 얻을 수 있고 체류 시간을 늘려줍니다.

다른 요소(메뉴,위젯 등)에 링크 추가하기


끝까지 읽어주셔서 감사합니다.

아임웹 링크 텍스트 사용자라면 다음 글도 읽어보세요.
아임웹에서 링크 텍스트를 작성하면 일반 텍스트와 구분되도록 자동으로 색상을 부여하는 기능을 부여하는 방법입니다.

아임웹, 링크 텍스트 색상 1번에 적용하는 방법


유익한 글은 공유하세요. 땡큐! 하실 겁니다.

Leave a Comment