Adobe Muse(어도비 뮤즈) 시작하기 제5부

Adobe Muse(어도비 뮤즈) 시작하기 제5부

Photoshop 파일을 롤오버 단추로 배치

1. [파일] > [Photoshop 단추 배치]를 선택합니다. [Photoshop 가져오기] 대화 상자가 나타나면 Kevins_Koffee_Kart 폴더에서 btn_share.psd라는 파일을 찾습니다. [선택](Mac) 또는 [열기](Windows)를 클릭하여 파일을 선택합니다.

2. [Photoshop 가져오기 옵션] 대화 상자가 나타납니다. 여기서 잠시 시간을 내어 설정이 어떤 식으로 적용되는지 살펴보도록 하겠습니다. 이 대화 상자의 메뉴를 사용하면 단추의 [표준 상태](페이지를 처음 로드했을 때 표시되는 단추 모양), [롤오버 상태](방문자가 마우스 커서를 단추 위에 올려 놓았을 때 표시되는 단추 모양), [마우스 누름 상태](방문자가 단추를 클릭했을 때 표시되는 단추 모양)에 대해 Photoshop 파일의 어느 레이어를 표시할지 지정할 수 있습니다. 세 가지 상태 메뉴에 Photoshop 레이어의 이름이 표시되며, 선택한 각 레이어가 어떻게 표시되는지 시각적으로 확인할 수 있는 축소판 이미지가 함께 제시됩니다. 

3. 이 예제의 경우 Photoshop 레이어가 단추 상태를 표시하는 데 맞게 올바른 순서로 이미 정돈되어 있습니다. 따라서 메뉴 설정을 변경할 필요가 없습니다. [확인]을 클릭하여 기본적으로 정돈되어 있는 상태를 그대로 적용합니다(그림 46 참조). 

그림 46. [Photoshop 가져오기 옵션] 대화 상자를 사용하여 기존 Photoshop 레이어를 각각에 상응하는 단추 상태에 연결합니다. 

4. "A-마스터" 페이지에서 머리글의 오른쪽 위 영역을 한 번 클릭하여 Photoshop 파일을 원래 크기로 배치합니다. 

5. [미리 보기] 링크를 클릭하여 WebKit 기반의 렌더링 에뮬레이터를 실행합니다. "A-마스터" 페이지가 어떻게 표시되는지 확인합니다. 페이지를 처음 열었을 때는 단추의 "표준 상태"가 표시됩니다. 마우스 커서를 단추 위에 올려 놓으면 단추의 모양이 살짝 달라져서 갈색 커피 방울의 색상이 좀 더 밝은 톤으로 바뀝니다. 단추를 클릭하면 흰색 텍스트가 연한 갈색으로 바뀝니다. 마우스 단추를 누르고 있는 동안은 텍스트의 연한 갈색이 계속 유지됩니다. 

6. [디자인]을 클릭하여 [디자인] 보기의 "A-마스터" 페이지 편집 화면으로 돌아갑니다. 

"Share" 단추의 상태가 올바르게 표시된 것을 확인할 수 있습니다. 다음 단원에서는 사이트 탐색 모음의 오른쪽에 있는 커피 방울 이미지를 기준으로 "Share" 단추를 정렬하는 방법을 살펴보겠습니다. 

정렬 패널을 사용하여 페이지의 개체 정렬

[정렬] 패널을 사용하면 두 개 이상의 페이지 요소를 서로 상대적 기준점으로 삼아서 또는 컨텐트 영역 내에서 쉽게 정렬할 수 있습니다. 

[정렬] 패널을 표시하려면 [창] > [정렬]을 선택하거나 패널 모음에서 [정렬] 탭을 클릭하여 이를 활성화합니다. [정렬] 패널을 열면 [창] 메뉴의 [정렬] 옵션 옆에 확인 표시가 나타납니다. 

이 예제에서는 아래쪽에 있는 흘러내리는 커피 방울 이미지를 기준점으로 삼아 "Share" 단추를 정렬해 보겠습니다. 다음 단계를 따르십시오. 

1. [선택] 도구를 사용하여 "Share" 단추를 선택합니다. 앞서 갈색 막대 아래 배치해 둔 흘러내리는 커피 방울 이미지도 선택합니다. "Share" 단추를 선택한 상태에서 Shift 키를 누른 채 이 이미지를 선택해야 합니다. 

2. 두 개체를 모두 선택한 상태에서 [정렬] 패널에 표시되는 옵션을 살펴보십시오(그림 47 참조).  

 

그림 47. [정렬] 패널의 설정을 사용하여 페이지에서 하나 이상의 개체 위치를 지정할 수 있습니다. 

[정렬] 패널의 상단에 있는 메뉴를 사용하여 요소의 정렬 기준점을 선택합니다.

[선택 항목에 맞춰 정렬]: 선택된 요소들을 서로 상대적 기준점으로 삼아 정렬합니다.

[컨텐트 영역에 맞춰 정렬]: 하나 이상의 선택된 요소를 그 주위의 컨텐트 영역을 기준점으로 삼아 정렬합니다.

[개체 정렬] 섹션에서 다음 여섯 가지 설정 중 하나를 선택할 수 있습니다.

- 왼쪽 가장자리 정렬

- 가로 가운데 정렬

- 오른쪽 가장자리 정렬

- 위쪽 가장자리 정렬

- 세로 가운데 정렬

- 아래쪽 가장자리 정렬

[개체 분포] 섹션에도 여섯 가지 설정이 있습니다.

- 왼쪽 가장자리 분포

- 수평 가운데 분포

- 오른쪽 가장자리 분포

- 위쪽 가장자리 분포

- 수직 가운데 분포

- 아래쪽 가장자리 분포

이 예제에서는 "Share" 단추를 흘러내리는 커피 방울 이미지와 수직으로 맞춰 두 개체의 가로 중앙 지점을 가운데 정렬하는 것이 목표입니다.

3. 상단 메뉴를 [선택 항목에 맞춰 정렬]로 설정한 다음 [가로 가운데 정렬] 단추를 클릭합니다. 각 요소의 가로 중앙 지점이 수직 방향으로 위아래에 나란히 위치하도록 페이지에서 두 요소의 위치가 조정되는 것을 알 수 있습니다. 

참고: 

요소 중 하나를 클릭하여 드래그하는 방법으로 개체를 가운데 정렬할 수도 있습니다. 다른 개체를 기준으로 하여 요소를 정렬하면 해당 요소들이 정렬되었음을 알리는 파란색 선이 잠시 나타납니다(그림 48 참조). 

 

그림 48. 요소를 드래그할 때 해당 개체가 페이지의 다른 개체에 맞춰 정렬되면 파란색 선이 나타납니다. 

슬라이드 쇼 위젯을 사용하여 슬라이드 쇼 프레젠테이션 만들기

페이지에 추가할 수 있는 여러 가지 사이트 기능 중에는 슬라이드 쇼 위젯이 있습니다. 방문자가 축소판 이미지를 클릭해야만 더 큰 버전의 이미지가 표시되도록 슬라이드 쇼를 설정하거나, 페이지를 로드할 때 자동으로 재생되는 슬라이드 쇼를 만들 수 있습니다. 자동 재생 슬라이드 쇼를 사용하면 일련의 사진을 효과적으로 제시하여 사이트의 컨텐트에 대해 강렬한 인상을 줄 수 있습니다. 슬라이드 전환에 사용되는 애니메이션 유형을 설정하여 슬라이드 쇼 재생 방식을 제어할 수 있습니다.

다음 소단원에서는 사이트의 홈 페이지에 자동 재생 슬라이드 쇼를 추가해 보겠습니다.

[플랜] 보기에서 "Home" 축소판을 두 번 클릭하여 [디자인] 보기에서 편집할 수 있도록 엽니다. 

자동 재생하도록 설정된 슬라이드 쇼 위젯 추가

일련의 이미지를 순환하며 보여 주는 프레젠테이션을 만드는 단계별 작업 과정은 다음과 같습니다. 

1. 위젯 라이브러리에서 [슬라이드 쇼] 카테고리를 클릭하여 확장합니다. 슬라이드 쇼 위젯이 표시됩니다. 

2. 기본 슬라이드 쇼 위젯을 선택하여 페이지 위로 드래그합니다. 

3. 기본 슬라이드 쇼 위젯에는 짙은 회색 사각형(이미지 자리 표시자) 한 개, 자리 표시자 캡션, 이미지 번호(1 - 1), 방문자가 일련의 이미지를 앞뒤로 오가며 탐색하는 데 사용할 수 있는 화살표 단추 두 개가 기본적으로 포함되어 있습니다. 

4. 파란색 화살표를 클릭하여 [옵션] 메뉴를 엽니다. 옵션을 확인하여 다음과 같이 설정합니다.

- 전환: 서서히 사라지기

- 자동 재생: 느리게

- 새 메인 이미지: 비율에 맞게 프레임 채우기

- 새 축소판: 비율에 맞게 프레임 채우기

- 라이트박스: (선택 취소합니다.)

- 파트: (모든 옵션을 선택 취소하여 캡션, 카운터, "다음" 단추, "이전" 단추를 숨깁니다.) 

참고: 

이 슬라이드 쇼는 방문자가 따로 조작하지 않아도 페이지를 로드할 때 자동으로 재생됩니다. 방문자가 마우스 단추를 클릭하여 제어할 수 있는 슬라이드 쇼를 만들려면 [자동 재생]을 [없음]으로 설정하고 [옵션] 메뉴의 [파트] 섹션에 있는 [다음] 및 [이전]의 확인 표시를 선택한 채로 두십시오.

5. [옵션] 메뉴 바깥쪽을 클릭하여 이 메뉴를 닫습니다. 이렇게 변경을 마치고 나면 짙은 회색 사각형만 표시된 채로 남습니다. 언제든지 [옵션] 메뉴에서 설정을 수정하여 위젯의 구성을 변경할 수 있습니다. 

 

6. 마우스 단추를 한 번 클릭하여 전체 위젯을 선택한 후 [선택] 도구를 사용하여 위젯을 Home 페이지 가운데에 맞춰 배치합니다. 다시 마우스 단추를 클릭하여 이미지 프레임(짙은 회색 사각형)을 선택한 다음, 양쪽 측면 핸들을 드래그하여 머리글의 갈색 리본 탐색 모음과 폭이 같아지도록 슬라이드 쇼를 페이지 가로 방향으로 확장합니다. 

 

그림 49. 슬라이드 쇼 이미지 프레임의 측면 핸들을 드래그하여 페이지 크기에 맞춥니다. 

7. 위쪽과 아래쪽 화살표를 사용하여 Home 페이지의 전체 크기를 채울 만큼 이미지 프레임의 높이를 확장합니다. 아래쪽으로는 바닥글 상단에 바둑판식으로 배열된 지그재그 이미지 바로 위까지 오도록 이미지 프레임을 확장합니다. 지금은 탐색 모음의 오른쪽에 있는 갈색 커피 방울 이미지가 짙은 회색 자리 표시자에 덮여도 괜찮습니다. 

8. 파란색 화살표를 클릭하여 [옵션] 메뉴를 다시 엽니다. 이번에는 상단에 있는 [이미지 추가]라는 텍스트 옆의 폴더 아이콘을 클릭합니다. 

9. [가져오기] 대화 상자에서 Kevins_Koffee_Kart 에셋 폴더로 이동하여 _slideshows 하위 폴더를 열고 다음과 같은 이미지 파일 일곱 개를 찾습니다. KoffeeKart_HP_Hero_01.jpg

- KoffeeKart_HP_Hero_02.jpg

- KoffeeKart_HP_Hero_03.jpg

- KoffeeKart_HP_Hero_04.jpg

- KoffeeKart_HP_Hero_05.jpg

- KoffeeKart_HP_Hero_06.jpg

- KoffeeKart_HP_Hero_07.jpg

첫째 이미지 파일을 클릭한 다음 Shift 키를 누른 채 마지막 이미지 파일을 선택하여 위의 파일을 모두 선택합니다. [선택]을 클릭하여 이미지들을 슬라이드 쇼에 추가합니다. 

10. [미리 보기]를 클릭하여 슬라이드 쇼를 재생해 봅니다. 현재는 자동 재생 속도가 느리게 설정되어 있습니다. 이미지가 좀 더 빨리 전환되게 하고 싶으면 [옵션] 메뉴에서 해당 설정을 변경하면 됩니다. 마지막 이미지를 표시하고 나면 슬라이드 쇼가 맨 처음으로 돌아가 다시 첫 이미지부터 재생을 시작합니다. 자동 재생을 설정한 상태에서는 슬라이드 쇼가 무한 반복됩니다. 

이렇게 해서 슬라이드 쇼가 완성되었습니다. 그런데 탐색 모음의 오른쪽에 있는 흘러내리는 커피 방울 이미지를 수정하려면 한 가지 작업을 더 수행해야 합니다. 

1. [플랜] 보기에서 "A-마스터" 축소판을 두 번 클릭하여 [디자인] 보기로 엽니다. 

2. [선택] 도구를 사용하여 탐색 그래픽의 오른쪽 윗부분에 있는 갈색 커피 방울 이미지를 선택합니다.

3. 흘러내리는 커피 방울 이미지를 마우스 오른쪽 단추로 클릭하여 컨텍스트 메뉴를 열고 [정돈] > [맨 앞으로 가져오기]를 선택합니다.

4. [A-마스터] 탭의 [X] 아이콘을 클릭하여 탭을 닫습니다. [Home] 탭을 클릭하여 Home 페이지를 다시 활성화합니다. [미리 보기]를 클릭하면 이번에는 자동으로 재생되는 슬라이드 쇼 위에 커피 방울 이미지가 표시되는 것을 확인할 수 있습니다. 슬라이드 쇼 검토를 마쳤으면 다시 [디자인] 링크를 클릭합니다. 

참고: 

탐색 모음을 "A-마스터" 페이지에 만들어 뒀으므로 탐색 기능(및 기타 공통 요소)을 제어하기 위해 임의의 설정을 변경하려면 "A-마스터" 페이지를 편집할 수 있도록 이를 [디자인] 보기에서 열어야 합니다. 다른 일반 페이지를 편집할 때 마스터 페이지의 요소가 함께 표시되기는 하지만 이와 같은 다른 사이트 페이지에서는 머리글과 바닥글 컨텐트를 편집할 수 없습니다. 

Adobe Muse 연락처 양식의 기능 이해 

연락처 양식이 있으면 웹 사이트 방문자가 행사에 등록하고, 회원으로 가입하고, 메일 수신을 신청하는 등 다양한 용도로 이를 활용할 수 있습니다. 그림 50에는 Adobe Muse 연락처 양식 위젯을 사용하여 만든 웹 연락처 양식의 예가 나와 있습니다. 

 

그림 50. 이 연락처 양식은 연락처 양식 위젯을 사용하여 추가하고 구성한 것입니다. 이 양식의 스타일을 지정하는 데는 표준 Adobe Muse 디자인 도구를 사용했습니다. 

Adobe Muse 연락처 양식은 두 개의 필수 구성 요소로 이루어져 있습니다. 그 중 하나는 웹 페이지에 표시되는 양식이고, 다른 하나는 제출된 정보를 관리하는 백엔드 기능입니다. Adobe Business Catalyst® webBasics 플랜에 가입한 고객은 Adobe Muse 사이트를 호스팅할 때 연락처 양식에 대한 백엔드 데이터베이스 지원 서비스를 받을 수 있습니다. 즉, 양식을 사용하여 캡처된 데이터가 미리 지정해 둔 하나 이상의 이메일 주소로 자동 전송됩니다. Adobe Muse 연락처 양식은 Adobe Business Catalyst 호스팅 웹 사이트에 연결되어 있어야만 제대로 작동합니다. 

Adobe Muse 연락처 양식 위젯을 사용하여 연락처 양식을 추가하고 사용자 정의하는 단계별 작업 과정은 다음과 같습니다. 

1. [창] > [위젯 라이브러리]를 선택하여 위젯 라이브러리를 엽니다. (위젯 라이브러리가 이미 열려 있으면 고정된 패널 모음에서 상단 탭을 클릭하여 위젯 라이브러리를 활성화합니다.) 

2. [양식]을 클릭하여 양식 위젯의 목록을 확장합니다. 간단한 연락처 정보 위젯을 선택하여 페이지 위로 드래그한 다음 페이지 컨텐트 영역의 왼쪽에 배치합니다. 

3. [선택] 도구를 사용하여 연락처 양식 위젯의 여러 구성 요소를 선택해 보십시오. 전체 위젯을 선택하면 [컨트롤] 패널의 왼쪽 위 가장자리에 있는 선택 표시자에 "양식"이라는 단어가 표시됩니다. 마우스 단추를 다시 클릭하여 양식 필드, 텍스트 입력 프레임 등을 선택하면 그에 맞춰 선택 표시자에 표시되는 내용이 바뀌는 것을 알 수 있습니다. 위젯의 요소를 선택 취소하려면 Esc 키를 눌러 현재 선택 항목을 한 수준 뒤로 되돌리거나 이 키를 여러 번 눌러 중첩 요소 밖으로 완전히 벗어날 수 있습니다. 또는 페이지에서 위젯 바깥쪽의 다른 부분을 클릭하여 선택을 취소할 수도 있습니다. 

4. 전체 위젯을 선택한 다음 오른쪽 위 가장자리에 있는 둥근 파란색 화살표 아이콘을 클릭하면 연락처 양식과 관련된 옵션이 나타납니다(그림 51 참조). 

 

그림 51. 위젯 메뉴를 사용하여 양식의 이름을 지정하고, 양식 데이터를 받을 사람들의 이메일 주소를 추가하고, 제출 후의 페이지 동작을 설정하는 등 여러 가지 옵션을 구성할 수 있습니다. 

5. [양식 이름] 필드에는 기본적으로 활성 페이지 이름이 포함되어 있지만, 원한다면 양식의 이름을 변경할 수 있습니다. 

6. [이메일 받는 사람] 필드는 제출된 데이터를 어디로 보낼지 지정하는 데 사용됩니다. 이 필드에는 사용자의 Adobe ID와 연결된 이메일 주소가 미리 입력되어 있지만, 원한다면 다른 주소를 사용하거나 여러 개의 주소를 추가할 수 있습니다. 

7. 양식을 제출한 후의 페이지 동작을 어떻게 처리할지 결정하려면 [보낸 후 동작] 필드의 화살표를 클릭하고 옵션을 선택합니다. 방문자가 양식을 제출하는 데 성공했을 때 확인 페이지가 표시되게 하려면 옵션 목록을 아래로 스크롤하여 [페이지] 섹션을 찾은 다음 기존의 [연락처:확인] 옵션을 선택합니다. 

8. 양식에 필드를 더 추가하려면 메뉴의 [표준 필드] 영역에서 [휴대폰 번호], [집 주소] 등과 같은 옵션을 선택하거나, [사용자 정의 필드 추가] 영역으로 이동하여 [한 줄 텍스트] 또는 [여러 줄 텍스트] 옵션을 선택합니다. 이렇게 하면 사용자 정의할 수 있는 새 필드가 연락처 양식에 추가됩니다. 

9. 위젯 옵션 메뉴를 종료하고 개별 연락처 양식 레이블 및 필드를 다시 배열하고 사용자 정의해 봅니다. 양식 필드의 순서를 다시 배열하려면 전체 위젯을 선택한 후 필드 및 레이블 주위에 갈색 점선이 나타날 때까지 이동할 필드에 마우스 커서를 놓습니다. 그런 다음 항목을 클릭하여 원하는 위치로 끕니다.

10. "전체 이름" 같은 레이블을 변경하려면 이를 두 번 클릭한 후 "사용자 이름" 같은 다른 명칭을 입력하면 됩니다. 양식 필드를 편집하거나 구성하려면 필드를 두 번 클릭하여 선택한 다음, 둥근 파란색 화살표 아이콘을 클릭하여 해당 필드에 대한 옵션을 표시하면 됩니다(그림 52 참조). 방문자가 해당 필드에 데이터를 반드시 입력해야만 하도록 설정하려면 [입력 요구]를 선택합니다. 방문자가 데이터를 아직 입력하지 않은 필드에 예제 텍스트를 표시하려면 [비어 있으면 프롬프트 텍스트 표시]를 선택합니다. 

 

그림 52. 양식 필드를 필수 항목으로 설정할지 선택 항목으로 설정할지 지정하고, 필드를 기본적으로 비워 둘지 프롬프트 텍스트를 표시할지 여부 등을 선택합니다. 

11. 연락처 양식의 스타일을 지정하려면 전체 양식을 선택한 다음 [컨트롤] 패널 옵션을 사용하여 색상과 글꼴을 변경하고, 그래픽 스타일과 단락 스타일을 추가하는 등 원하는 작업을 수행합니다. 그런 다음 [제출] 단추를 선택하고 획, 텍스트 옵션, 간격, 이미지 채우기 등 여러 가지 옵션을 시험해 보면서 단추에 가장 잘 어울리는 모양을 찾습니다. 

임베디드 HTML 

타사 웹 서버로부터 동적으로 가져온 복잡한 사이트 기능을 추가하기 위한 HTML 코드를 사이트의 페이지에 포함할 수 있습니다. Google, Yahoo!, YouTube 등 임의의 웹 서비스 공급자로부터 이러한 코드 청크를 복사하여 Muse 페이지에 간단히 붙여넣을 수 있습니다. 이 단원에서는 임베디드 HTML의 서로 다른 두 가지 예를 살펴보고, Muse로 작성한 웹 사이트에 소셜 미디어 컨텐트와 대화형 Google 지도를 손쉽게 추가하는 방법을 살펴보겠습니다. 

이를 위해서는 우선 Home 페이지 컨텐트를 완성해야 합니다. 지금까지 설명한 내용을 잘 따라왔다면 이미 Home 페이지가 [디자인] 보기에 열려 있을 것입니다. 그렇지 않다면 [플랜] 보기에서 Home 페이지 축소판을 두 번 클릭하여 [디자인] 보기에서 편집할 수 있도록 엽니다. 앞서 Home 페이지에 추가한 슬라이드 쇼 위에 임베디드 HTML을 추가하도록 하겠습니다. 

가장 최근 게시물을 표시하는 임베디드 HTML Twitter 피드 추가

무료로 계정을 등록하여 사용할 수 있는 웹 서비스에는 여러 가지가 있습니다. 그 중 하나인 Twitter에 가입하면 메시지를 작성하여 해당 웹 사이트에 게시할 수 있습니다. 게다가 그러한 정보를 Twitter.com에 표시하는 것 외에도, 자신의 로그인 계정을 사용하여 임베디드 코드를 복사한 다음 동일한 메시지를 사용자 자신이 만든 다른 웹 사이트에 표시할 수도 있습니다. 

이 예제에서는 Kevin's Koffee Kart에 사용할 가상의 계정을 설정했습니다. 계정 설정을 위해서는 Twitter에 새 사용자로 가입하여 등록 양식을 작성해야 합니다. 등록을 마치고 나면 해당 사이트의 인터페이스를 사용하여 메시지를 게시할 수 있고, 메시지를 웹 상의 다른 곳에 표시하는 데 필요한 임베디드 코드를 복사할 수 있습니다. 블로그 게시물, 비디오 컨텐트, RSS 피드, 주식 정보, 일기 예보, 스포츠 경기 결과 및 기타 여러 가지 유형의 동적 데이터를 공유하는 데도 동일한 방법이 사용됩니다. 고객을 위해 사이트를 구축할 때 고객이 이미 이러한 서비스를 사용하고 있는지 물어 확인하면 해당 고객이 소비자들과 정보를 공유하는 데 도움을 줄 수 있습니다. 대부분의 경우에는 고객의 계정 정보를 사용하여 로그인한 다음, 현재 만들고 있는 사이트에 표시할 데이터를 위한 임베디드 코드를 가져올 수 있습니다. 

이 예제에서는 Kevin's Koffee Kart 계정을 사용하여 Twitter로부터 복사한 임베디드 코드를 아래와 같이 제공하므로 사용자가 Twitter에 로그인하기 위해 자신의 계정을 새로 만들지 않고도 실습을 진행할 수 있습니다.

<script type="text/javascript" src="http://www.gtaero.net/twitter/twitter.php?user=kevinkoffee"></script>

<div id="twitFeed">Optional Placeholder Text</div>

<script type="text/javascript">twitter2id("twitFeed");</script>

1. 위에 나와 있는 코드를 복사합니다. 

2. Muse로 돌아갑니다. 대부분의 경우에는 페이지에서 원하는 위치를 클릭하고 마우스 오른쪽 단추를 클릭하여 컨텍스트 메뉴를 표시한 다음 [붙여넣기]를 선택하기만 하면 됩니다. 또는 붙여넣기 명령의 바로 가기 키(Mac의 경우 Command+V, Windows의 경우 Ctrl+V)를 사용해도 됩니다. 붙여넣으려는 텍스트가 일반 텍스트 컨텐트가 아닌 소스 코드라는 사실을 Muse에서 자동으로 인식합니다. 

참고: 

드물기는 하지만 코드가 HTML로 인식되지 않을 수도 있습니다. 이 경우에는 [개체] > [HTML 삽입]을 선택하여 [HTML 코드] 창을 엽니다. 그런 다음 복사해 온 소스 코드를 창에 붙여넣고 [확인]을 클릭하여 창을 닫기만 하면 임베디드 코드가 포함됩니다. 

3. 소스 코드는 근본적으로 타사 웹 사이트에 연결된 컨텐트를 표시하는 창을 만드는 역할을 합니다. 이러한 소스 코드를 페이지에 포함하고 나면 그 모양이 정확히 원하는 대로 표현되지 않을 수 있습니다. 그림 53에서는 Twitter 임베디드 HTML 컨텐트가 기본적으로 어떻게 표시되는지 보여 줍니다. 

 

그림 53. Twitter 피드 데이터가 예상했던 대로 표시되지만, 텍스트에 스타일이나 서식이 적용되지 않았습니다. 

4. 임베디드 HTML 주위의 핸들을 클릭한 후 페이지 폭을 거의 채울 만큼 양 옆으로 드래그하고 페이지 높이의 1/3 정도를 차지할 만큼 위아래로 늘려 Twitter 피드 텍스트 영역의 크기를 확장합니다(그림 54 참조). 

 

그림 54. Twitter 피드 데이터 창의 폭과 높이를 훨씬 더 크게 확장합니다. 

이렇게 하면 텍스트를 훨씬 더 넓은 영역에 표시할 수 있습니다. 그런데 아직까지는 텍스트가 기본 크기 그대로입니다. 

이번에는 [HTML 코드] 창에서 코드를 수정하여 동적 텍스트 표시 방법을 정의하는 몇 가지 CSS 스타일을 추가하도록 하겠습니다. 이 작업을 수행해도 Twitter.com에 게시되는 메시지는 아무런 영향을 받지 않으며, 사용자가 만드는 사이트의 텍스트 서식만 변경됩니다. 

5. 아래 나와 있는 CSS 스타일 코드를 복사합니다.

<style type="text/css">

#twitFeed { font-family: Helvetica Neue,Helvetica,sans-serif; font-size: 54px; line-height: 1; color: white; text-align: left }

a:link, a:hover { font-size: 14; color: white; text-decoration: none }

</style>

참고: 

위의 코드에 대한 약간의 설명을 드리자면, 스타일을 지정하는 부분이 여는 태그와 닫는 태그로 둘러싸여 있는 구조입니다. 여는 태그()는 해당 코드가 무슨 유형의 코드인지 지정하고, 닫는 태그()는 CSS 스타일 규칙 정의가 끝났음을 브라우저에 알리는 역할을 합니다. 나중에 직접 임베디드 HTML 코드에 스타일을 지정할 때는 항상 이러한 태그를 마치 앞뒤 괄호처럼 사용하여 적용 대상 스타일을 묶어야 합니다. 이 예제의 경우 Twitter 웹 사이트에서는 사용자가 게시한 메시지를 호스팅한 다음 #twitFeed라는 CSS ID 선택기를 사용하여 해당 사이트에 표시되는 텍스트의 모양을 제어합니다. 따라서 위의 코드는 (Twitter 사이트에서 가져온) 해당 스타일 이름을 사용한 다음 Twitter.com을 통해 적용된 스타일을 무시하고 사용자의 사이트에 텍스트를 어떻게 표시할지 정의하는 몇 가지 규칙을 추가하는 것이라고 볼 수 있습니다. 텍스트 컨텐트의 서식 지정과 관련된 CSS 규칙을 좀 더 자세히 알고 싶으면 W3C Schools 웹 사이트를 방문하십시오. 

6. 임베디드 HTML 코드 영역을 마우스 오른쪽 단추로 클릭하고 컨텍스트 메뉴가 나타나면 [HTML]을 선택합니다. 이렇게 하면 [HTML 코드] 창이 열리고 앞서 붙여넣은 소스 코드가 표시됩니다. 사이트를 편집하는 동안 언제든지 이 창을 열고 HTML 소스 컨텐트를 업데이트할 수 있습니다. 창의 맨 위, 즉 앞서 포함한 HTML 코드 위쪽을 클릭합니다. 5단계에서 복사한 새 스타일 코드를 붙여넣습니다(그림 55 참조). 

 

그림 55. [HTML 코드] 창에서 앞서 붙여넣은 Twitter 소스 코드 위에 스타일 코드를 붙여넣습니다. 

7. [확인]을 클릭하여 [HTML 코드] 창을 닫습니다. 이와 같이 Twitter 텍스트의 스타일을 변경하고 나면 Twitter 사이트로부터 연결된 게시물이 이제 Home 페이지의 슬라이드 쇼 위에 흰색 텍스트로 훨씬 더 크게 표시됩니다(그림 56 참조). 

 

그림 56. HTML 개체의 크기를 변경하고 텍스트 스타일의 서식을 지정하여 완성된 Twitter 피드입니다. 

이제 Home 페이지가 거의 완성 단계에 도달했습니다. 마지막으로 페이지에 요소를 한 개만 더 추가하면 됩니다. 

1. [파일] > [배치]를 선택합니다. [가져오기] 대화 상자에서 Kevins_Koffee_Kart 폴더에 있는 DailyDrip.png라는 파일을 찾습니다. [선택]을 클릭합니다. 

2. Home 페이지에 이미지를 배치한 다음 [선택] 도구를 사용하여 슬라이드 쇼 왼쪽 상단 부근에 이미지를 배치합니다. 이때 이미지가 슬라이드 쇼의 윗부분과 살짝 겹치게 합니다. 

3. [미리 보기]를 클릭하여 슬라이드 쇼를 진행하면서 슬라이드 쇼가 갈색 커피 방울 이미지와 "Daily Drip" 이미지 아래 제대로 표시되는지 확인합니다(그림 57 참조).

 

그림 57. Home 페이지의 디자인을 완성한 모습입니다. 

Home 페이지 검토를 마쳤으면 [플랜] 링크를 클릭하여 [플랜] 보기로 돌아갑니다. 

다음 순서로는 다른 유형의 임베디드 HTML을 "KART MAP" 페이지에 추가할 것입니다. 

1. "KART MAP" 축소판을 두 번 클릭하여 [디자인] 보기에서 이 페이지를 열고 편집을 시작합니다. 

2. [텍스트] 도구를 사용하여 텍스트 프레임을 "KART MAP" 페이지 위로 드래그한 다음 페이지 컨텐트 상단 부근의 머리글 바로 아래 배치합니다. 

3. "Looking for the Koffee Kart? Check here for real-time location updates throughout the day."라는 텍스트를 입력합니다.

4. 텍스트를 선택하고 [단락 스타일] 패널을 엽니다. "Georgia Body Medium"이라는 스타일을 클릭하여 이를 "KART MAP" 페이지의 머리글 텍스트에 적용합니다.

계속하여 Adobe Muse 시작하기 제6부에서는 HTML을 사용하여 웹 페이지에 Google 지도를 배치하는 방법을 설명합니다. 

Adobe Muse(어도비 뮤즈) 시작하기 제5부

Photoshop 파일을 롤오버 단추로 배치

이 내용은 ADOBE 홈페이지  어도비 뮤즈<adobe muse> 도움말을 가지고 왔습니다.