Adobe Muse를 시작해 보십시오. .muse 파일에 대해서 알고, 페이지 속성을 설정하고, 파비콘을 추가하는 등 다양한 작업이 가능합니다.

참고:

Adobe Muse는 더 이상 새로운 기능을 추가하지 않으며 2020년 3월 26일 목요일에 지원이 중단됩니다. 자세한 정보 및 지원은 Adobe Muse 서비스 종료 페이지를 참조하십시오.

Adobe Muse 시작하기

로그인을 하면 Adobe Muse 작업 영역이 실행됩니다. Adobe Muse 시작 화면이 표시됩니다. 다음 작업 중 하나를 수행합니다.

  • 새 사이트를 만들려면 [새로 만들기]를 클릭합니다.
  • [열기]를 클릭하고 컴퓨터에 있는 기존 .muse 파일로 이동합니다.
Adobe Muse의 시작 화면
시작 화면에서 새 사이트 만들기를 시작할 수 있습니다.

새 사이트를 만들기로 선택하면 [새 사이트] 대화 상자가 나타납니다. [유동 폭]을 선택하여 반응형 레이아웃을 설정하거나, [고정 폭]을 선택하여 대체 레이아웃을 선택합니다. 이 대화 상자에는 최대 페이지 너비, 열 및 간격 값을 설정할 수 있는 필드가 있습니다.

[새 사이트] 대화 상자에서 새 웹 사이트를 만듭니다.
[파일] > [새 사이트]를 선택하여 새 사이트를 만듭니다.

[고급 설정]을 클릭하여 사이트의 치수, 여백, 열, 안쪽 여백 값(픽셀 단위 숫자 값)을 설정합니다. 이 창에서 [해상도] 및 [언어]를 선택할 수도 있습니다.

나중에 언제든지 [파일] > [사이트 속성]을 선택하여 이러한 설정을 업데이트할 수 있습니다.

[사이트 속성] 대화 상자에서 사이트 속성을 설정합니다.
[새 사이트] 대화 상자에서 사이트 속성을 설정합니다.

설정을 마쳤으면 [확인]을 클릭하여 대화 상자를 닫습니다.

기본적으로 항목 두 개가 이미 만들어져 있는 플랜 보기가 열립니다. 왼쪽 위에 있는 홈 페이지는 사용자가 라이브 사이트를 방문했을 때 처음으로 로드되는 페이지입니다. 아래 있는 A-마스터 페이지는 일종의 템플릿입니다. 사이트의 모든 페이지에 표시하고 싶은 항목이 있으면 해당 항목을 A-마스터 페이지에 추가하면 됩니다. 이렇게 하면 사이트의 공통 요소들을 한 곳에서 관리하고 업데이트할 수 있습니다.

NewWebsite
Adobe Muse에서는 홈 페이지와 마스터 페이지 하나가 자동으로 생성됩니다.

인터페이스는 [플랜], [디자인], [게시]라는 각기 다른 섹션으로 이루어져 있으며, 그 각각에 상응하는 링크 네 개가 작업 영역 상단에 배치되어 있습니다.

인터페이스 사용과 Adobe Muse를 사용하여 사이트를 디자인하는 방법에 대해 좀 더 자세히 알고 싶으면 Adobe Muse 시작하기와 Adobe Muse를 사용하여 첫 웹 사이트 만들기를 참조하십시오.

.muse 파일 이해

Dreamweaver 같은 여타 프로그램에서 웹 사이트를 디자인할 때는 한 폴더 아래 여러 개의 하위 폴더와 파일을 두고 여기에 사이트의 모든 컨텐트를 담아 저장합니다. 이렇게 하면 요소 전체를 관리하기가 쉽지 않을뿐더러 사이트에서 끊어진 링크가 존재하지 않도록 유지하기가 까다로울 수 있습니다.

Adobe Muse에서 새 사이트를 만들고 [파일] > [저장]을 선택하면 .muse 파일 하나가 생성됩니다. 이는 Photoshop에서 PSD 파일을 만들 때와 비슷합니다. PSD 파일에 여러 개의 레이어, 그래픽, 링크된 에셋 등이 포함될 수 있다는 점을 생각하면 이해하기 쉬울 것입니다. 이 .muse 파일 하나에 이미지, 링크, 코드, 사이트 파일 등이 모두 포함되므로 사이트를 디자인하는 데는 이 파일 하나만 있으면 됩니다. 사이트를 디자인하면서 다른 사람과 협력하고 싶으면 .muse 파일의 복사본을 만들어 동료에게 보내면 됩니다. 파일을 받은 사람은 이를 열고, 필요한 부분을 변경한 다음, 추가된 변경 내용을 게시할 수 있습니다.

일반적으로는 .muse 파일을 한 번에 한 사람만 다루도록 하는 것이 좋습니다. 자신이 맡은 컨텐트를 사이트에 추가하여 작업을 마친 사용자는 이를 게시하고 동료에게 .muse 파일을 전달하여 그 동료가 또 다른 컨텐트를 추가로 편집하게 할 수 있습니다. 작업을 마친 동료는 (변경 내용을 포함하여) 업데이트된 .muse 파일을 처음 사용자에게 다시 보낼 수 있습니다. 이렇게 하면 다른 사람의 작업 결과물을 덮어쓰는 실수를 방지할 수 있습니다.

또는 .muse 파일을 만들고 임시 사이트를 게시할 수도 있습니다. 그런 다음 .muse 파일을 동료들과 공유할 수 있습니다. 처음 사용자가 자신의 사본을 가지고 계속 작업을 하는 동안, 동료들은 공유된 파일을 열고 [파일] > [다른 이름으로 저장]을 선택하여 별도의 사본을 만들고 변경 작업을 수행할 수 있습니다. 이렇게 작업에 함께 참여하는 사람들은 새 임시 사이트를 따로 게시합니다. 그러나 이와 같은 작업 방식을 택하면 두 가지 버전의 사이트를 여러 번 업데이트하는 과정에서 사이트를 동기화하여 유지하기가 어려울 수 있습니다. 처음 사용자가 소유한 버전의 .muse 파일을 제때 업데이트하지 않아 동료들이 추가한 변경 내용이 제대로 반영되지 않을 수도 있고, 그 반대일 수도 있습니다.

기존 웹 사이트를 크게 변경해야 할 때는 항상 .muse 파일을 열고 [파일] > [다른 이름으로 저장]을 선택하는 습관을 갖는 것이 좋습니다. 새 .muse 파일을 만들고 파일 이름을 살짝 다르게 지정한 후 모든 .muse 파일을 컴퓨터의 폴더 하나에 저장해 두십시오. 이렇게 하면 고객이 기존 버전의 사이트를 더 선호하는 경우 언제든지 기존 디자인이 적용된 이전 버전의 .muse 파일을 열고 이를 다시 게시하여 사이트를 예전 상태로 쉽게 되돌릴 수 있습니다.

.muse 파일을 수시로 저장하는 것도 좋은 습관입니다. Adobe Muse 실행이 예기치 않게 중단된 경우 Adobe Muse를 다시 실행하면 대개는 가장 최근까지 편집한 내용을 포함한 버전의 .muse 파일이 복원됩니다. 이러한 상황을 만나면 복원된 버전의 .muse 파일을 곧바로 저장한 다음 해당 지점부터 작업을 다시 시작하십시오. .muse 파일을 만든 후에는 이를 안전한 위치에 저장하고 따로 백업도 해 둬야 합니다. 각 파일에 전체 웹 사이트가 들어 있는 셈이기 때문입니다. .muse 파일을 분실했는데 백업 사본도 없으면 .muse 파일을 복구할 방법이 없습니다. 서버에 호스팅되어 있는 사이트 파일을 다운로드하는 방법으로는 이 문제를 해결할 수 없습니다.

많은 수의 웹 디자이너들은 .muse 파일을 저장할 때 my_site_v1.muse 또는 my_site_v2.muse 등과 같이 사이트에 대한 설명이 포함된 이름을 사용하기를 선호합니다. 어느 버전이 더 오래된 것인지 쉽게 알 수 있도록 .muse 파일 이름에 날짜를 포함할 수도 있습니다. 예를 들어, my_site_2012-4-13.muse 또는 my_site_2012-4-30.muse 등과 같은 식입니다. 어쨌든 자신에게 가장 유용한 방식으로 파일 이름을 정하면 됩니다.

Adobe Muse에서 새 사이트를 만들 때 사이트 속성 설정

다음 단계에 따라 새 사이트를 만들고 사이트의 속성을 정의합니다.

  1. 시작 화면에서 [새로 만들기] > [사이트]를 선택합니다. 반응형 레이아웃을 원하면 [유동 너비]를, 대체 레이아웃을 원하면 [고정 너비]를 클릭합니다.

  2. [새 사이트] 대화 상자가 나타나면 [페이지 폭]을 950으로, [최소 높이]를 800으로 설정합니다. [열]을 3으로, [간격]을 20으로 설정합니다. [여백] 섹션에 있는 값 네 개를 모두 50으로 설정합니다. [안쪽 여백] 값을 36으로 설정합니다.

    [사이트 속성] 대화상자에서 사이트 특성을 설정합니다.
    필드에 값을 직접 입력하거나 각 설정의 화살표 단추를 클릭하여 사이트 특성을 설정합니다.

    참고:

    휴대폰 및 태블릿에 해당하는 사이트 디자인의 경우, "바탕화면으로부터 리디렉션" 옵션으로 모바일 레이아웃의 리디렉션을 설정/해제할 수 있습니다. 이 기능은 준비가 되지 않아 아직 리디렉션되어서는 안 되는(작업 진행 중) 레이아웃에 유용합니다. 리디렉션 옵션을 해제한 상태에서도 레이아웃을 내보낼 수 있습니다. 하지만 모바일 브라우저는 모바일 페이지로 리디렉션되지 않으며 사이트의 [사이트 속성] 대화 상자에서 해당 옵션을 설정하기 전에는 내보낸 파일이 sitemap.xml에 포함되지 않습니다.

  3. [확인]을 클릭하여 설정을 저장하고 대화 상자를 닫습니다.

  4. [파일] > [사이트 속성]을 선택합니다. [파비콘 이미지] 옆에 있는 폴더 아이콘을 클릭합니다. Kevins_Koffee_Kart 샘플 폴더를 찾은 다음 favicon.png라는 파일을 선택합니다. [확인]을 클릭합니다.

    fig_07
    파비콘은 브라우저의 주소 표시줄에서 사이트의 URL 옆에 표시되는 아이콘입니다.

  5. [파일] > [저장]을 선택합니다. 새 사이트의 이름을 중복되지 않게 지정합니다(예: YourNameKoffeeKart.muse). (이 자습서에서는 샘플 사이트의 이름으로 01KevinsKoffeeKart.muse를 사용합니다.)

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

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

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

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

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

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

    참고:

    2015.0.2 이전 버전의 Adobe Muse를 사용하고 있는 경우에는 [파일]> [사이트 속성] > [레이아웃] 탭을 클릭하여 사이트의 파비콘을 추가할 수 있습니다.

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

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

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

이 작업에는 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License의 라이센스가 부여되었습니다.  Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.

법적 고지 사항   |   온라인 개인 정보 보호 정책