Adobe Muse 웹 사이트용 하이퍼링크 생성 방법

이 문서에서는 Adobe Muse 하이퍼링크를 사용한 작업 방법을 설명합니다. 하이퍼링크를 사용하여 외부 웹 사이트, 다운로드 가능한 파일, 이메일 주소 등에 연결할 수 있습니다. 방문자와 공유하고 싶지만 현재로서는 Adobe Muse 인터페이스를 통한 삽입이 지원되지 않는 PDF, DOC, PPT, TXT, 리치 미디어 또는 기타 형식의 파일이 여기에 속할 수 있습니다. 타사 웹 사이트에 호스팅된 파일이나 자신의 Adobe Muse 호스트 계정에 현재 업로드되어 있는 파일에 연결할 수 있습니다.

비디오 | 하이퍼링크 생성 방법

페이지에 기준점 링크 추가

이 섹션에서는 메뉴 항목을 기준점 영역의 두 요소에 연결하는 방법과 수동 메뉴에 기준점 링크를 추가하는 방법에 대해 알아봅니다. 다음 단계를 따르십시오.

1. 페이지의 아무 곳이나 클릭하여 페이지를 선택([선택 표시자]에 [페이지]라는 단어가 표시되도록)합니다. 그런 다음 위젯 메뉴 항목(위젯 컨테이너)을 2번 클릭합니다. 처음에는 전체 수동 [메뉴] 위젯이 선택되고 그 다음에는 메뉴 항목이 선택됩니다. 선택 표시자에 [메뉴 항목]이라는 단어가 표시됩니다.
2. [하이퍼링크] 메뉴를 사용하여 사이트에 대한 전체 페이지 및 기준점 태그 목록을 확인합니다. [데스크톱] 섹션에서 올바른 페이지를 찾고 앞에서 만든 기준점 태그가 바로 아래에 나열되는지 확인합니다. 메뉴 항목에 링크로 연결할 적절한 기준점 태그를 선택합니다.

3. 기준점 링크를 추가하려면 2단계를 반복합니다.
4. [파일] > [사이트 속성]을 선택합니다. [레이아웃] 탭에서 [기준점 링크에 대한 활성 상태 사용] 확인란이 선택되어 있는지 확인합니다. 이 옵션은 모든 새 사이트에 대해 기본적으로 사용으로 설정됩니다. 하지만 예전의 사이트를 편집하고 있는 경우 확인란을 선택해야할 수도 있습니다.
5. [파일] > [브라우저에서 페이지 미리 보기]를 선택합니다.

다른 페이지 영역을 보기 위해 링크를 클릭하면 일치하는 활성 상태가 탐색 메뉴에 표시됩니다. 이 사이트 기능은 방문자가 보고 있는 영역이 어디인지 눈에 띄도록 하는 데 도움을 줍니다. 브라우저를 종료하고 Adobe Muse로 돌아갑니다.

또한, 페이지를 위 아래로 스크롤하여 페이지 내 코드가 각 기준점 태그의 위치를 감지하고, 페이지가 각 페이지 영역으로 이동할 때 수동 메뉴의 활성 상태가 업데이트되는지 확인합니다. 이 기법은 세로 및 가로로 스크롤되는 페이지에서 실행됩니다.

참고: 페이지는 기준점 태그가 각 영역으로 이동할 수 있는 공간을 허용할 수 있도록 충분히 길거나 넓어야 합니다. 페이지 영역이 서로 너무 가까워서 스크롤할 필요 없이 내용이 브라우저 창에 다 들어가는 경우, 다음 영역으로 이동할 수 있도록 기준점 태그가 나타나지 않습니다.

6. 브라우저를 종료하고 Adobe Muse로 돌아갑니다.

다음 단원에서는 방문자가 PDF, DOC, MP3, MOV, PSD 및 고해상도 JPEG 파일 등의 파일 형식을 다운로드할 수 있도록 다운로드 링크를 추가하는 방법을 살펴봅니다.

팁: 사이트 프로젝트에서 다른 디자이너와 함께 작업하는 경우 팀원이 웹 사이트에서 직접 다운로드할 수 있도록 .Muse 소스 파일에 대한 링크를 추가할 수도 있습니다.

연결 태그 영역 및 활성화 상태 작업

서로 다른 페이지 섹션을 시각적으로 분리하는 쉬운 방법은 웹 페이지에 기준점 영역을 만드는 것입니다. 이러한 각 섹션은 페이지를 쉽게 탐색하도록 하기 위해 디자인된 기준점 링크를 통해 쉽게 액세스할 수 있습니다.

디자인이 완성되면 원칙적으로 웹 페이지는 방문자가 해당 메뉴가 표시되어 있는 영역으로 세로로 바로 이동할 수 있도록 해 주는 기준점 링크를 포함해야 합니다. 기준점 태그를 추가할 경우 페이지의 어딘가에 마커를 붙이는 것과 유사합니다. 방문자가 해당 기준점에 대한 링크를 클릭하면 링크는 긴 페이지를 스크롤하여 마커가 있는 특정 섹션으로 이동합니다.

1. 상단 탐색 영역에 있는 기준점 단추를 클릭하여 기준점 도구를 로드합니다.

2. 페이지의 맨 위(머리글 영역의 최상위 사이트 탐색 메뉴 위쪽)를 한 번 클릭합니다. 원할 경우 머리글 사각형을 일시적으로 이동할 수 있습니다. 머리글 내용을 이동할 경우 나중에 다시 제자리로 이동하십시오.
3. 나타나는 [기준점 이름 바꾸기] 대화 상자에서 기준점의 이름을 입력합니다.

4. 기준점 영역을 정의하고 다른 기준점 링크를 추가하려면 1~3단계를 반복합니다.

다음 단계에서 수동 [메뉴] 위젯을 추가한 뒤, 단추를 기준점 태그에 연결하여 탐색을 만들면 방문자가 페이지 아래로 바로 이동할 수 있도록 할 것입니다.

다운로드 가능한 파일 링크 추가

1. 디자인 보기에서 음식 페이지를 편집하면서 [문자] 도구를 사용하여 Breakfast 메뉴 텍스트 프레임의 상단 오른쪽 부근에 새 텍스트 프레임을 만듭니다. Download Menu를 입력합니다.
2. 텍스트 프레임이 선택된 상태에서 [텍스트] 패널을 사용하여 다음 설정을 적용합니다.
   • 웹 글꼴: Kaushan Script(또는 사용자가 원하는 스크립트 글꼴)
   • 글꼴 크기: 14
   • 색상: #EEE5C4(3부에서 이 색상 견본을 cream-menu로 바꿈)
   • 행간: 57%
   • 정렬: 가운데 맞춤
3. [채우기] 메뉴를 사용하여 채우기 색상을 "없음"으로 설정합니다. [이미지] 섹션 옆에 있는 폴더를 클릭하고 배경 이미지를 설정할 샘플 파일 폴더에 있는 download-bg.png라는 파일을 찾아 선택합니다. [맞춤] 메뉴가 [원래 크기]로 설정되어 있고 [위치]가 가운데 맞춤인지 확인합니다.

4. [채우기] 메뉴 바깥쪽을 클릭하여 이 메뉴를 닫습니다. 필요한 경우 Breakfast 메뉴 텍스트 프레임의 상단 오른쪽에서 가운데에 오도록 [선택] 도구를 사용하여 텍스트 프레임의 크기를 조정하고 재배치합니다.

5. 텍스트 프레임을 선택한 상태에서 컨트롤 패널에서 [링크] 메뉴를 사용하여 [파일] 옵션에 대한 링크를 선택합니다. 표시된 [가져오기] 대화 상자에서 파일을 찾아 선택하고 [열기]를 클릭하여 선택합니다.

참고: [파일에 링크] 기능을 사용하여 파일을 찾아 선택하면 파일은 사이트가 게시되거나 사이트를 내보낼 경우 사이트 파일에 포함될 때 업로드되는 사이트 에셋 중 하나가 됩니다. 이 방법은 사이트에서 사용된 다른 모든 이미지 파일과 함께 링크할 파일을 사이트에서 사이트의 로컬 폴더로 복사하는 가장 좋은 방법입니다.

이제 PDF 파일에 대한 링크가 추가되었습니다. [에셋] 패널을 살펴보면 파일이 이제 사이트의 에셋 중 하나로 나열된다는 것을 알 수 있습니다.

6. [선택] 도구를 사용하여 텍스트 프레임을 선택합니다. Download Menu 텍스트 프레임을 복사하고 Lunch 메뉴의 상단 오른쪽 모퉁이를 덮도록 배치하여 붙여 넣습니다. 이 단계를 두 번 더 반복하여 Dinner 및 Dessert 메뉴의 상단 오른쪽 모퉁이를 덮도록 배치된 복사본을 만듭니다.

실제 프로젝트에서는 4개의 별도 메뉴 파일에 대한 링크를 추가하여 방문자에게 메뉴를 보고 인쇄하는 데 사용할 수 있는 4개의 서로 다른 다운로드 가능한 PDF 파일을 제공할 수 있습니다. 하지만 이 자습서에서는 [다운로드] 단추가 각 페이지 영역 내 동일한 PDF 파일에 연결되어 있습니다.

7. [파일] > [브라우저에서 페이지 미리 보기]를 선택합니다. [가로] 메뉴에서 메뉴 항목 중 하나를 클릭하여 페이지에서 해당 메뉴로 이동합니다. Dinner 및 Dessert 메뉴를 보기 위해 아래로 스크롤하더라도 머리글은 다른 페이지 컨텐트 위에 표시된다는 것을 알 수 있습니다. 이 동작은 음식 페이지에서 Foreground 마스터 페이지를 사용하고 해당 페이지의 머리글 컨텐트가 전경으로 이동되었기 때문에 발생합니다.
8. Download Menu 링크를 클릭하고 PDF 파일이 컴퓨터에 어떻게 다운로드되는지 확인합니다.

사용 중인 브라우저 및 브라우저의 환경설정에 따라 다른 동작이 나타날 수 있습니다. 일부 브라우저에서는 브라우저 창 내에서 PDF를 표시하고, 다른 브라우저에서는 단순히 PDF 파일을 데스크톱에 다운로드합니다. 여기에서 Acrobat Pro 또는 Acrobat Reader를 사용하여 열 수 있습니다.

이메일 주소 링크 만들기

예전부터 Adobe Muse를 사용했다면 링크할 수 있는 페이지 이름 및 항목을 더욱 쉽게 찾을 수 있도록 [링크] 메뉴가 최근 여러 섹션으로 재구성되었다는 것을 알 수 있을 것입니다. 이 단원에서는 [링크] 메뉴가 어떻게 구성되었는지 자세히 살펴보고 메뉴 목록에서 항목을 필터링하는 방법을 살펴봅니다. 또한 이메일 주소 링크를 추가하는 방법도 배웁니다.

1. [링크] 메뉴에서 아래쪽 화살표를 클릭하여 표시되는 전체 목록을 확인합니다.

2. [링크] 메뉴는 섹션으로 구성되어 있습니다. [최근 사용한 링크]는 사이트에 추가된 외부 웹 사이트에 대한 링크를 표시합니다. [링크] 필드에 직접 URL을 입력하여 외부 웹 페이지에 링크를 연결할 수 있습니다.
3. [데스크톱] 섹션에는 현재 사이트의 페이지가 포함됩니다. 음식 페이지에 추가한 기준점 태그가 음식 페이지 아래에 알파벳순으로 나열된다는 것을 확인할 수 있습니다. 이에 따라 사이트의 여러 페이지에서 동일한 이름의 기준점을 만들더라도 링크를 설정할 때 쉽게 구분할 수 있습니다. 이 샘플 사이트에는 하나의 데스크톱 레이아웃만 있지만 사이트에 스마트폰이나 태블릿에 대한 대체 레이아웃이 포함된 경우 이러한 섹션은 해당하는 페이지와 함께 표시됩니다.
4. 맨 끝의 [파일] 섹션에는 [파일에 링크] 기능 및 현재 사이트에 추가된 다운로드 가능한 파일이 포함됩니다. 방금 KatiesCafeMenu.pdf 파일에 대한 링크를 추가했으므로 해당 파일의 이름이 이 섹션에 나열되어 사이트의 여러 페이지에서 공통되는 에셋에 다시 쉽게 링크할 수 있습니다.
5. 이메일 링크(클릭하면 방문자가 이메일 클라이언트가 열리고 [받는 사람] 필드에 이메일 주소와 함께 새 메시지가 시작됨)를 추가하려는 경우 다음과 같이 [링크] 메뉴 필드에 mailto: 접두어와 함께 이메일 주소를 입력합니다.
   
   mailto:email@address.com
   
   
6. 때때로 긴 웹 사이트의 경우 [링크] 메뉴의 항목 목록이 매우 길고 탐색이 어려울 수 있습니다. 링크할 특정 페이지, 기준점, 파일 또는 외부 URL을 찾는 경우 [링크] 메뉴 필드에서 링크의 처음 몇 글자를 입력하면 일치하는 항목이 표시됩니다. 이 기능을 통해 목록을 빠르게 필터링하고 링크할 항목을 찾을 수 있습니다.

외부 웹 사이트 링크 추가

소셜 미디어 아이콘 단추가 배치되었으므로 각 소셜 네트워크 사이트에 대한 외부 링크를 추가합니다.

1. Facebook 아이콘을 선택한 다음 [링크] 메뉴 필드에서 Katie's Cafe Facebook 페이지에 대한 링크(http://www.facebook.com/KatiesCafeSF)를 입력(또는 복사/붙여넣기)합니다.
2. Google+ 아이콘을 선택한 다음 Google+의 Katie's Cafe 페이지에 대한 링크(https://plus.google.com/u/1/117800212967830061444/posts)를 입력(또는 복사/붙여넣기)합니다.
3. Twitter 아이콘을 선택한 다음 Twitter의 Katie's Cafe 페이지에 대한 링크(http://twitter.com/katiescafesf)를 입력(또는 복사/붙여넣기)합니다.
4. Facebook 아이콘을 다시 클릭하여 선택합니다. 파란색 밑줄 친 단어([링크] 메뉴의 왼쪽에 있는 링크)를 클릭합니다. 나타나는 대화 상자에서 [링크를 새 창이나 탭에서 열기] 확인란을 선택합니다.
5. 4단계를 반복하여 Google+ 및 Twitter 링크도 새 브라우저 창에서 열리도록 설정합니다.

이것은 일반적인 웹 디자인 규칙입니다. 동일 사이트의 다른 페이지로 이동하는 링크는 동일한 브라우저 창에서 열리고(Adobe Muse에서 기본 동작), 다른 외부 웹 사이트의 페이지에 대한 링크는 새 창이나 탭에서 열립니다.

파일의 URL을 확인하여 링크 추가 준비

Adobe Muse 사이트의 페이지에 링크를 추가하려면 업로드된 라이브 파일에 브라우저로 액세스하여 해당 링크를 먼저 준비해야 합니다. 다음 단계를 따르십시오.

1. 임의의 브라우저를 실행합니다.
2. 업로드된 종속 파일이 들어 있는 타사 사이트 또는 자신의 사이트를 찾습니다. Google 같은 검색 엔진을 사용할 수도 있고, 브라우저의 주소 표시줄에 사이트의 도메인 이름을 직접 입력할 수도 있습니다.

3. 원하는 사이트의 홈 페이지에 액세스한 후 사이트의 탐색 메뉴를 클릭하거나 브라우저의 주소 표시줄에 완전한 URL을 입력하여 특정 종속 파일에 액세스합니다. 이 단계를 마치면 액세스 대상 파일이 브라우저를 통해 표시, 재생 또는 다운로드됩니다.
4. 업로드된 파일에 액세스하는 데 필요한 URL을 정확하게 입력했는지 확인한 다음 브라우저의 주소 표시줄에 나와 있는 내용 전체를 선택하고 [편집] > [복사]를 선택합니다. 또는 바로 가기 키 Command+C(Mac)나 Ctrl+C(Windows)를 사용해도 됩니다.

이제 종속 파일의 URL이 클립보드에 복사되었습니다. 다음 단원에서 설명하는 절차에 따라 종속 파일의 URL을 [하이퍼링크] 필드에 붙여넣기 전까지는 다른 어떠한 항목도 복사하지 않도록 주의하십시오.

외부 파일 링크 만들기

종속 파일을 업로드하고, 브라우저를 통해 해당 파일에 액세스하고, 파일의 URL을 복사하는 작업까지 모두 성공적으로 마쳤으면 이제 마지막으로 남은 것은 Adobe Muse 사이트의 페이지에 링크를 만드는 작업입니다. 다음 단계를 따르십시오.

1. Adobe Muse를 실행합니다. 페이지 축소판을 두 번 클릭하여 디자인 보기에서 페이지를 엽니다.
2. 방문자가 종속 파일을 다운로드하거나 해당 파일에 액세스하기 위해 클릭해야 하는 "단추" 역할을 할 텍스트, 이미지 또는 사각형을 선택합니다.
3. 텍스트나 기타 페이지 요소를 선택한 상태로 [하이퍼링크] 필드 드롭다운을 클릭하고 앞서 복사해 둔 종속 파일의 URL(절대 경로)을 붙여넣습니다.

링크가 새 브라우저 창에서 열리게 설정하고 싶으면 [하이퍼링크] 창의 왼쪽 부분에 있는 [하이퍼링크] 레이블을 클릭합니다. 대화 상자가 열리면 아래 나와 있는 것과 같이 [링크를 새 창이나 탭에서 열기] 옵션 옆에 있는 확인란을 선택합니다.

페이지를 저장하고 사이트의 변경 내용을 게시합니다.

브라우저에서 해당 페이지를 방문합니다. 링크 텍스트 또는 단추를 클릭하여 링크가 제대로 작동하는지 확인합니다.

Adobe Muse를 사용하여 작업하는 데 더 많은 정보가 필요하면Adobe Muse 도움말 및 자습서 페이지를 방문하거나 Adobe Muse 이벤트 페이지에서 실시간으로 또는 녹화 방송으로 진행되는 웨비나에 참석하십시오.