adobe muse(어도브 뮤즈) 웹사이트 만들기 8부

adobe muse(어도브 뮤즈) 웹사이트 만들기 8부

Muse를 사용한 첫 번째 웹 사이트 구축 7부에서는 수동 가로 메뉴 위젯에서 기준점 태그를 추가하고 메뉴 항목에 이 태그를 연결하는 방법을 살펴보았습니다. 페이지의 요소가 스크롤되지 않도록 고정하는 방법도 알아보았습니다. 또한 방문자가 파일을 다운로드할 수 있게 파일에 링크를 적용하는 방법도 배웠습니다. 8부에서는 개체 그룹화 및 이러한 그룹을 사용하여 페이지의 내용에 붙여넣는 방법을 알아보겠습니다. 또한 이번에는 임베디드 HTML을 사용하여 방문 페이지에 대화형 Google 지도를 추가해 보겠습니다. 그리고 마지막으로 파비콘을 추가하여 평가용 사이트를 제공된 호스팅 서버로 게시하여 사이트를 마무리하는 방법을 알아봅니다.

개체 그룹화 및 붙여넣기

InDesign을 비롯한 기타 디자인 프로그램과 마찬가지로 여러 개체를 한 그룹으로 결합하여 단일 개체로 취급할 수 있습니다. 이 단원에서는 (이미지와 텍스트 프레임이 배치된) 여러 요소로 구성된 디자인을 만들고 이러한 요소를 그룹화하여 간편하게 단일 항목으로 배치하거나 복사하는 방법을 살펴봅니다. 다음 단계를 따르십시오.

1. [플랜] 보기에서 홈 페이지 축소판을 두 번 클릭하여 [디자인] 보기로 이 페이지를 엽니다. 

2. [파일] > [배치]를 선택합니다. 샘플 파일 폴더에서 panel-open-bottom.png 파일을 찾아 선택합니다. [열기]를 클릭하여 [가져오기] 대화 상자를 닫고 홈 페이지 아래에서 (라이트박스 컴포지션 아래 및 바닥글 위) 한 번 클릭하면 그래픽이 전체 크기로 배치됩니다. 

PNG 파일의 불투명도는 낮게 설정되어 있습니다. 따라서 반투명 꽃 디자인에서 틸팅 배경 이미지가 비칩니다.

3. [파일] > [배치]를 다시 선택합니다. 이번에는 spoon-map.png 이미지 파일을 찾아 선택합니다. [열기]를 클릭하고 가운데 위 꽃잎을 한 번 클릭하면 배치됩니다. 

4. 숟가락 이미지를 선택하고 Option(Mac) 또는 Alt(Windows)를 누른 상태에서 숟가락 이미지를 복제한 후 가운데에서 오른쪽으로 바로 드래그합니다. 이 작업을 다시 반복 수행하여 가운데 숟가락 이미지를 복제한 후 사본을 꽃잎의 왼쪽으로 드래그합니다. 아래 그림 88과 같이 [선택] 도구를 사용하여 3개의 숟가락을 배치합니다. 

 

그림 88. 디자인에서 위 3개의 꽃잎에 3개의 숟가락 이미지를 배치합니다. 

5. [텍스트] 도구를 사용하여 가운데 꽃잎에 텍스트 프레임을 만들고 다음을 입력합니다. 

Katie's Cafe

Noe Valley

123 Elizabeth Street

MON?FRI 6AM?10PM

SAT?SUN 7AM?10PM

6. [텍스트] 패널에서 다음 설정을 적용하여 텍스트 서식을 지정합니다. 

- 글꼴: Droid Serif(또는 모든 Serif 글꼴) 

- 글꼴 크기: 14 

- 글꼴 색상: #222222 (5부에서 이 색상 이름을 katieblack이라고 지정했습니다.) 

- 글꼴 정렬: 가운데 

- 행간: 120% 

7. 그런 다음 (요일로 시작하는) 마지막 두 줄을 선택하고 글꼴 색상을 빨간색(#A6342A)으로 설정합니다.

 

8. [선택] 도구를 사용하여 텍스트 프레임을 선택합니다. Option(Mac) 또는 Alt(Windows)를 누른 상태에서 텍스트 프레임을 복제한 후 숟가락 이미지 위쪽에서 오른쪽으로 바로 드래그합니다. 이 작업을 다시 반복 수행하여 가운데 텍스트 프레임을 복제한 후 사본을 꽃잎의 왼쪽으로 드래그합니다. [선택] 도구를 사용하여 그림 89와 같이 3개의 숟가락 위에 3개의 텍스트 프레임을 배치합니다. 

 

그림 89. 디자인에서 위 3개의 꽃잎에 3개의 숟가락 위에 3개의 주소가 배치됩니다. 

9. [텍스트] 도구로 전환합니다. 왼쪽 주소에서 텍스트를 선택하고 다음과 같이 변경합니다. 

Katie's Cafe

Laurel Heights

800 Spruce Street

MON?FRI 5AM?12AM

SAT?SUN 9AM?1AM

10. [텍스트] 도구를 사용하여 오른쪽 주소의 텍스트를 선택하고 다음과 같이 변경합니다. 

Katie's Cafe

Cole Valley

301 Carmel Street

MON?FRI 7AM?10PM

SAT?SUN 9AM?10PM

이제 디자인이 완성되었으니 요소를 선택하여 그룹화할 수 있습니다.

11. [선택] 도구를 사용하여 전체 꽃 디자인을 클릭하여 드래그합니다. 이때 배치한 꽃 이미지, 3개의 숟가락 이미지와 3개의 텍스트 프레임을 모두 선택해야 합니다. 마우스 오른쪽 단추를 클릭하고 컨텍스트 메뉴가 나타나면 [그룹]을 선택합니다. 원하는 경우 [개체] > [그룹]을 선택할 수도 있습니다. 

여러 개체를 그룹화하면 [컨트롤] 패널의 위쪽에 있는 [선택 표시자]에 [그룹]이라는 단어가 표시됩니다.

12. 선택한 그룹을 복사합니다. [플랜]을 클릭하여 [플랜] 보기로 되돌아간 다음 방문 페이지 축소판을 두 번 클릭하면 디자인 보기에서 열립니다. [편집] > [제자리에 붙여넣기]를 선택하여 전체 요소 그룹을 동일한 위치에 배치합니다. 

이 간단한 예제에서 알 수 있듯이 디자인을 완료하고 이 디자인을 단일 요소로 사용하여 페이지에 재배치하거나 다른 페이지에 복사 및 붙여넣을 때 그룹화가 매우 유용합니다.

디자인을 완료한 후 유용하게 사용할 수 있는 도구로는 그룹화 이외에 [잠그기] 기능이 있습니다. 그룹 또는 선택한 여러 요소를 마우스 오른쪽 단추로 클릭하고 컨텍스트 메뉴가 나타나면 [잠그기]를 선택하여 잠급니다. (또는 [개체] > [잠그기]를 선택할 수도 있습니다.) 페이지에서 완료된 요소를 잠그면 더 이상 선택할 수 없기 때문에 실수로 이동되거나 삭제되지 않습니다. 나중에 잠긴 요소를 업데이트해야 하는 경우 [개체] > [페이지에서 모두 잠금 해제]를 선택합니다.

방문 페이지의 아래에 꽃 디자인을 붙여넣기하면 페이지 내용이 어느 정도 완료된 것입니다. 다음 섹션에서는 방문 페이지를 계속 편집하여 고객이 근처 커피숍을 찾을 수 있게 대화형 지도 인터페이스를 추가해 보겠습니다.

임베디드 HTML을 사용한 Google 지도 표시

이 자습서의 이전 단원에서 페이지에 HTML을 포함하여 이벤트 페이지에 Tumblr 블로그를 추가하는 방법을 다뤘습니다. 라이트박스 컴포지션 위젯 안에 임베디드 HTML을 붙여넣기하여 방문자가 단추를 클릭하면 라이트박스 창에 YouTube 동영상을 표시하는 방법을 살펴봤습니다. 이 단원에서는 Google Maps 사이트에서 제공하는 여러 유형의 임베디드 HTML에 대해 알아보겠습니다. 다음 단계를 따르십시오.

1. [디자인] 보기에 방문 페이지가 열려 있지 않은 경우 [플랜]을 클릭한 다음 편집할 수 있도록 방문 페이지 축소판을 두 번 클릭합니다. 

이 소스 코드는 maps.google.com 사이트에서 복사한 것입니다. 한 주소에 대한 (또는 이 예에서는 여러 위치에 대한) 사용자 정의 주소를 만들 수 있습니다. 무료 서비스입니다. 주소(또는 여러 주소)를 입력하고 [지도 만들기] 단추를 클릭합니다(그림 90 참조).

 

그림 90. [지도 만들기]를 클릭하면 입력한 주소에 대한 지도가 생성됩니다. 

지도를 만든 후 Google Maps 인터페이스를 사용하여 제목 및 설명을 입력할 수 있습니다. 그런 다음 [링크] 단추를 클릭하여 코드에 액세스합니다. [웹 사이트에 포함할 HTML 붙여넣기] 필드에서 제공된 HTML 코드를 선택하면 Muse로 되돌아가 페이지에 HTML을 포함할 수 있습니다(그림 91 참조).

 

그림 91. Google Maps 인터페이스를 사용하여 지도에 대한 HTML 코드를 생성합니다. 

 

이 자습서에서는 새 지도를 만들 필요는 없습니다. 원하는 경우 주소를 입력하고 지도를 만들고 코드를 복사하여 테스트합니다. 하지만 간단하게 작동 방식만 테스트하려면 미리 생성된 HTML 코드를 사용해도 됩니다.

2. 다음 소스 코드를 복사합니다. 

 

<iframe width="887" height="298" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=218302982680021663941.00049fcd9cf93276f540e&amp;ll=37.7737,-122.43782&amp;spn=0.067844,0.098877&amp;z=12&amp;output=embed"> </iframe>

3. 방문 페이지의 위쪽에 코드를 붙여넣기합니다. [선택] 도구를 사용하여 위쪽 근처 페이지의 세로 중앙에 포함된 HTML을 배치합니다. 그러면 지도의 1/4이 머리글 영역과 겹칩니다. 텍스트 설명을 추가할 수 있도록 지도와 바로 아래에 있는 꽃 이미지에 충분한 공간을 두십시오.

 

4. [텍스트] 도구를 사용하여 포함된 지도 아래에 텍스트 프레임을 드래그합니다. 다음 텍스트를 복사하여 텍스트 프레임에 붙여넣기합니다. 

저희 모든 제과점은 지역 특성을 잘 반영했기 때문에 Katie의 디테일 완벽 재현, 서비스 이행 그리고 무엇보다도 맛있는 먹거리가 모두 유기적으로 연계되어 있습니다.

5. [텍스트] 패널에서 다음 설정을 적용하여 텍스트 스타일을 지정합니다. 

- 글꼴: Droid Serif(또는 모든 Serif 글꼴) 

- 글꼴 크기: 14 

- 글꼴 색상: #222222&nbsp;(5부에서 이 색상 이름을 katieblack이라고 지정했습니다.) 

- 글꼴 정렬: 왼쪽 

- 행간: 120% 

지도에 설명을 추가하면 방문 페이지가 완성됩니다.

6. [파일] > [브라우저에서 페이지 미리 보기]를 선택하여 브라우저에서 방문 페이지가 어떻게 표시되는지 확인합니다(그림 92 참조). 

 

그림 92. 완료된 방문 페이지에 완전히 작동하는 Google 지도가 포함됩니다. 

포함된 HTML Google 지도는 대화형입니다. 창 안쪽의 지도에서 화살표를 클릭하여 이동하거나 +/- 단추를 클릭하여 확대하거나 축소할 수도 있습니다.

모든 페이지에 대한 사이트 디자인이 완료되었습니다. 이 자습서의 나머지 단원에서는 사이트를 마무리하고 무료 평가판으로 게시하는 방법을 알아보겠습니다.

사이트 속성 패널에 파비콘 추가

파비콘은 작은 사각형 이미지로써 만들어서 사이트에 추가한 후 업로드하여 책갈피, URL 등을 개인 설정할 수 있습니다. 사용하는 브라우저에 따라 다르게 동작하지만 파비콘은 일반적으로 사이트의 URL 옆에 있는 브라우저의 주소 표시줄에 나타납니다. 또한 페이지가 책갈피로 설정된 경우 해당 페이지의 이름 옆에 표시되거나 로드된 사이트 페이지가 포함된 탭에 표시됩니다. Photoshop, Illustrator 등 이미지 편집 프로그램에서 파비콘 파일로 사용할 정사각형 이미지 파일을 만들 수 있습니다. 이 자습서에서는 PNG 파일이 제공됩니다.

사이트에 파비콘을 추가하려면 다음 단계를 수행하십시오.

1. [파일] > [사이트 속성]을 선택합니다. [사이트 속성] 패널이 나타납니다. 

2. [레이아웃] 탭에서 파비콘 섹션의 오른쪽에 있는 폴더 아이콘을 클릭합니다. [파비콘 이미지 선택] 대화 상자가 나타나면 샘플 파일 폴더를 검색하여 favicon.png 파일을 선택합니다(그림 93 참조). 

 

그림 93. [사이트 속성]에서 favicon.png 파일을 설정합니다. 

3. [열기]를 클릭하여 [파비콘 이미지 선택] 대화 상자를 닫고 파일을 선택합니다. [확인]을 클릭하여 [사이트 속성] 대화 상자를 닫습니다. 

4. 브라우저에서 [파일] > [사이트 미리 보기]를 선택합니다. 브라우저 창의 위쪽에 있는 주소 표시줄에 파비콘이 표시되는지 확인합니다. 탭에 사이트가 로드된 경우 해당 탭에 파비콘이 표시될 수도 있습니다. 페이지를 책갈피에 추가하고 파비콘이 책갈피 목록의 페이지 이름 옆에 어떻게 표시되는지 확인합니다. 

이제 사이트가 완성되었으니 다음 단계에서 제공된 Adobe Business Catalyst 호스팅 서버로 만든 사이트를 업로드해 보겠습니다.

사이트에 게시할 무료 평가판 제작

사이트 디자인을 완료한 후 다음 단계는 사이트를 게시하는 것입니다. 게시 프로세스는 매우 간단하며 직관적입니다. Muse를 처음 실행했을 때 로그인 시 Adobe ID를 입력했을 것입니다. 모든 Muse 사이트를 게시할 때에도 동일한 사용자 이름과 암호를 사용합니다.

1. [컨트롤] 패널의 왼쪽 위에서 [게시] 링크를 클릭합니다. [게시] 패널이 나타나면 사이트 이름을 입력하고 임시 URL을 선택할 수 있습니다(그림 94 참조). 

 

그림 94. 평가판 사이트에 사용할 사이트 이름 및 URL을 입력합니다. 

2. [확인]을 클릭하여 게시 프로세스를 시작합니다. 

원격 서버에 파일 업로드 시 수분이 소요될 수 있습니다. 사이트 업로드가 완료되면 새 브라우저 창에 사이트의 홈 페이지가 표시됩니다.

3. 상위 수준의 사이트 탐색에서 링크를 클릭하여 페이지를 방문하고 위젯과 상호 작용합니다. 모든 페이지를 검토하여 요소가 제대로 표시되는지 확인합니다. 해결해야 할 문제를 기록합니다. 

4. 마쳤으면 브라우저를 닫고 Muse로 돌아갑니다. 

[게시] 패널에 [확인] 단추 및 [관리] 링크가 표시되므로 언제든지 클릭하여 사이트를 라이브로 푸시할 수 있습니다. 단, 유료 호스팅 플랜 시작, 사이트 액세스를 위한 사용자 정의 도메인 이름 설정 및 사용자 추가 작업을 수행해야 합니다.

게시된 사이트의 URL은 아래와 비슷합니다. 이 주소를 사용하여 브라우저의 페이지에 액세스하고 다른 사용자와 라이브 사이트를 공유할 수 있습니다.

http://my-trial.businesscatalyst.com

평가판 사이트가 게시되면 고객이 사이트의 라이브 버전을 검토할 수 있도록 주소 표시줄의 URL을 복사하여 고객에게 해당 링크를 보냅니다. 가능하면 고객이 브라우저에서 사이트 디자인을 미리 볼 수 있도록 PDF 프로토타입 또는 전자 메일 첨부 파일을 보내는 것이 좋습니다. 고객은 대화형 기능이 동작하는 방식과 페이지가 실제로 구동되는 방식을 샘플로 확인할 수 있습니다.

고객 또는 동료가 평가판 사이트를 확인하고 변경을 요청할 수 있습니다.

현재 평가판 사이트를 변경하려는 경우 .muse 파일을 열고 계속해서 페이지를 편집할 수 있습니다. 변경이 완료되면 [게시]를 다시 클릭합니다.

현재 평가판 사이트를 새로 변경된 내용으로 덮어쓰려는 경우 [업로드: 변경된 파일만]을 선택합니다(그림 95 참조).

 

그림 95. 새로 변경된 내용만 업데이트할 옵션을 선택합니다. 

다음 단계

Muse를 사용한 웹 사이트 디자인에 대한 자세한 내용은 자습서에서 Muse 시작 단원을 참조하십시오. Muse 검색 엔진 최적화(SEO)에 대한 방법도 유용한 자료입니다.

 

또한 Muse 자습서 페이지에서 더 많은 자습서 문서를 확인하고 Muse 행사 페이지에서 실시간 웨비나와 녹화된 동영상 자습서에 액세스할 수 있습니다.

Muse 오늘의 사이트(Site of the Day) 페이지에서 Muse에서 제작한 여러 디자인도 감상하고 Muse 위젯 갤러리에서 위젯 작업에 몰입해 보십시오.

adobe muse(어도브 뮤즈) 웹사이트 만들기 8부

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