참고:

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

사이트 운영자가 사용할 웹 사이트를 디자인할 때 주된 요청 중 하나는 사이트 컨텐트를 업데이트할 수 있는 시스템을 설정하는 것입니다. 또한 작업용 워크스테이션이 없는 곳에서 사이트를 수정해야 할 경우 즉시 변경할 수 있는 방법을 마련하는 것도 도움이 됩니다.

이제 Muse는 In-Browser Editing이라고 하는 기능을 포함합니다. 이 기능을 사용하면 사용자, 사이트 운영자, 다른 팀 구성원이 Business Catalyst 관리자 인터페이스에서 텍스트 및 이미지 컨텐트를 변경할 수 있습니다. In-Browser Editing을 사용할 때 Adobe Muse를 설치할 필요가 없으며

In-Browser Editing도 사용하기 쉽습니다. 웹 브라우저 내에서 편집을 수행하므로 편집 권한만 부여하면 웹 디자인 경험이 없는 사람도 사이트를 변경할 수 있습니다.

이 문서에서는 초대를 받은 사이트 사용자가 Adobe Muse 사이트를 업데이트할 수 있도록 In-Browser Editing을 활성화하는 Adobe Muse 사이트 설정 방법을 설명합니다. 다음으로, 다른 사람에게 사이트를 변경하는 방법을 쉽게 알려줄 수 있도록 In-Browser Editing 인터페이스를 사용할 때 따르게 되는 단계를 개략적으로 살펴봅니다. 마지막으로, In-Browser Editing 인터페이스를 사용하여 라이브 사이트에 변경 내용을 적용한 후 .muse 파일을 현재 버전과 동기화하는 방법을 살펴봅니다.

In-Browser Editing을 사용하여 편집할 수 있는 컨텐트

컨텐트 편집 가능 여부 링크 클릭
가로 텍스트 있음 없음
이미지 프레임 있음 있음
세로쓰기 텍스트 없음 없음
이미지 - 배경 채우기(사각형, 이미지 프레임 및 위젯) 없음 없음
슬라이드 쇼 카운터 없음 없음
양식 제출 단추 없음 없음
동적 메뉴 레이블(메뉴 위젯이 수동으로 설정되지 않음) 없음 없음
래스터화된 페이지 항목(둥근 모퉁이, 경사진 가장자리, 내부 광선 또는 회전이 적용된 이미지, 시스템 글꼴을 사용하는 텍스트 프레임, 효과가 적용되어 회전된 텍스트 프레임) 없음 없음
하이퍼링크가 적용된 텍스트 있음 있음
텍스트 레이블 - 아코디언 위젯 있음 있음
텍스트 레이블 - 탭 구분 패널 위젯 있음 있음
텍스트 레이블 - 수동 메뉴 위젯 있음 있음

단추 - 슬라이드쇼 위젯

 

있음 있음
단추 - 컴포지션 위젯 있음 있음

슬라이드 쇼 축소판 이미지

있음 있음
컴포지션 위젯의 "트리거" 영역 내부에 있는 텍스트 및 이미지 프레임 있음 있음

브라우저 내 편집 설정

브라우저 내 편집 기능을 설정하는 프로세스는 두 단계로 구성됩니다. 먼저 [사이트 속성]에서 설정을 활성화하고 사이트를 Adobe 호스팅 서버에 게시합니다. 그런 다음 새 사용자를 사이트로 초대할 수 있습니다. 그러면 사용자가 원하는 브라우저를 사용하여 사이트에 로그인하고 변경할 수 있습니다.

앞서 설명한 것처럼 배경 이미지는 In-Browser Editing으로 편집할 수 없습니다. 사이트 디자인에 중요한 이미지이기 때문에 사이트 운영자가 변경해서는 안 되는 이미지가 있는 경우 해당 이미지를 배경 이미지로 추가한 후 In-Browser Editing을 사용하도록 설정하고 편집 액세스 권한을 부여해야 합니다.

참고:

In-Browser Editing을 사용하려면 평가용 웹 사이트나 라이브 웹 사이트를 Adobe Business Catalyst 호스팅 서버에서 호스팅해야 합니다.

  1. Adobe Muse를 실행하고 구성할 사이트를 엽니다.

    inbrowserediting
    사이트 속성 대화 상자에서 In-Browser Editing 확인란 선택

  2. [파일] > [사이트 속성]을 클릭합니다. [고급] 탭을 클릭하고 [In-Browser Editing 사용] 옵션이 설정되어 있는지 확인합니다.

    설정되지 않은 경우 [In-Browser Editing 사용] 확인란을 활성화합니다.

  3. [확인]을 클릭하여 [사이트 속성] 대화 상자를 닫습니다.

  4. Adobe Muse 상단 탐색 모음에서 [게시] > [Business Catalyst]를 클릭합니다.

    Business Catalyst를 사용하여 사이트 게시
    Business Catalyst를 사용하여 사이트 게시

    [게시] 대화 상자에서 원하는 옵션을 선택한 다음 [게시]를 클릭하여 모든 사이트 파일을 Adobe Business Catalyst 호스팅 서버에 업로드합니다.

    참고:

    새 평가용 사이트를 만들거나 사용자 정의 도메인 이름을 사용하는 라이브 사이트를 업로드할 수 있습니다. Adobe 웹 서버에서 호스팅되는 경우 평가용 사이트와 라이브 사이트 모두에서 In-Browser Editing이 작동합니다.

  5. 게시 작업이 완료되면 [게시] 대화 상자가 업데이트되고 사이트에 In-Browser Editing 사용자를 추가할지 묻는 메시지가 나타납니다.

    In-Browser Editing 사용자가 라이브 사이트를 편집할 수 있도록 허용하려면 해당 사용자를 사이트에 추가해야 합니다. 관리자 인터페이스를 사용하여 사용자 계정을 만든 다음 로그인하여 사이트 편집을 시작할 수 있습니다.

    fig02_ibe
    대화 상자에서 링크를 클릭하거나 [확인] 클릭

  6. [In-Browser Editing 사용자 추가] 링크를 클릭하거나 [확인]을 클릭하여 대화 상자를 닫을 수 있습니다.

    이 예제에서는 [확인]을 클릭합니다.

    [In-Browser Editing 사용자 추가] 링크를 클릭하면 9단계에서 설명하는 인터페이스가 나타납니다.

  7. Adobe Muse에서 5단계에서 설명된 [In-Browser Editing 사용자 추가] 링크를 클릭하거나 [파일] > [Business Catalyst 사이트 관리]를 선택합니다.

    사이트의 Business Catalyst 인터페이스가 새 브라우저 창에서 열립니다.

    Business Catalyst 사이트 관리
    사이트에 새로운 In-Browser Editing 사용자를 추가하는 옵션을 선택합니다.

    참고:

    사이트를 게시한 후에는 [관리] 단추를 클릭하여 다른 업데이트와 함께 사이트를 관리하면서 관리자를 초대할 수 있습니다.

  8. Business Catalyst 사용자 인터페이스의 왼쪽 탐색 모음에서 [사이트 설정] > [관리자]를 클릭합니다.

  9. [관리자 초대]를 클릭합니다.

    fig04_ibe
    사이트의 관리자 사용자 인터페이스에서 새 관리자 사용자 초대

    관리자 사용자 섹션이 새 인터페이스로 업데이트됩니다.

  10. 나타나는 필드에서 새 사용자의 이메일 주소, 이름 및 성을 입력합니다. 선택적으로 사용자의 휴대폰 번호를 입력할 수 있습니다. [사용자 역할] 메뉴를 [사용자]로 설정합니다.

    fig05_ibe
    제공된 필드에 사용자의 이름과 이메일 주소 입력

  11. [초대]를 클릭하여 새 사용자를 Adobe Muse 사이트에 추가합니다.

    참고:

    정보를 제출하면 초대한 사용자에게 자동으로 로그인 정보가 이메일 메시지로 전달됩니다. 사용자는 이메일을 받은 다음 링크를 클릭하여 원하는 암호를 설정합니다. 계정의 암호를 만든 후에는 원하는 브라우저를 사용하여 사이트 편집 기능에 로그인할 수 있습니다.

In-Browser Editing을 사용하여 사이트 업데이트

이 섹션에는 액세스 권한이 부여된 사용자가 Adobe Muse 사이트를 업데이트하는 절차가 나와 있습니다. 이 절차의 사본을 사용자에게 보내려면 지침을 다운로드하십시오.

  1. 브라우저를 열고 다음 중 하나를 수행합니다.

    • my-site.businesscatalyst.com/admin(평가용 사이트)
    • my-site.com/admin(라이브 사이트)
  2. 이메일 주소와 암호를 입력하여 Business Catalyst에 로그인합니다.

    이메일로 로그인 정보를 받았을 것입니다.

    fig06_ibe
    원하는 브라우저를 사용하여 사이트 계정에 로그인

  3. [편집] 단추를 클릭하여 편집 인터페이스 상태로 사이트를 표시합니다.

    fig07_ibe
    [편집] 단추를 클릭하여 사이트 편집 시작

    In-Browser Editing 인터페이스에 사이트의 홈 페이지가 로드됩니다.

In-Browser Editing을 사용하여 텍스트 편집

사이트를 변경할 때 브라우저 창 내에서 작업 중이라는 것을 잊지 마십시오. 변경 내용을 무시할 생각이 아니라면 현재 페이지를 나가거나 브라우저 창을 닫기 전에 변경 내용을 게시해야 합니다.

사이트에서 텍스트 컨텐트를 편집하려면 다음 단계를 따르십시오.

  1. Business Catalyst를 사용하여 사이트에 로그인하면 텍스트 주위에 파란색 오버레이가 표시됩니다. 텍스트를 선택하거나 삭제하고 컨텐트를 입력합니다.

    In-Browser Editing을 사용하여 텍스트 편집
    편집할 텍스트를 선택하고 업데이트 입력을 시작합니다.

    텍스트 상자의 텍스트 위에 마우스를 올려 놓으면 In-Browser Editing에서 텍스트에 적용된 서식을 표시합니다. 기본적으로 텍스트 상자에 입력한 모든 텍스트에 동일한 서식이 적용됩니다.

    In-Browser Editing의 텍스트 서식
    텍스트 위에 마우스를 올려 놓으면 표시되는 서식을 참조하십시오.

  2. 변경 사항이 만족스럽지 않고 원본 텍스트로 되돌리려면 페이지 상단의 [실행 취소] 아이콘을 클릭하십시오.

     

    원본으로 되돌리려면 [실행 취소] 클릭
    원본 텍스트로 되돌리려면 [실행 취소] 아이콘을 클릭합니다.

  3. 텍스트 편집을 마쳤으면 [게시]를 클릭합니다.

    fig11_ibe
    [게시] 단추를 클릭하여 변경 내용을 라이브 사이트로 푸시

    편집 인터페이스에서 작업한 내용은 페이지 위쪽에 있는 [게시] 단추를 클릭하지 않으면 라이브 웹 사이트에 적용되지 않습니다. 변경하지 않으려면 브라우저 창을 닫습니다.

페이지에 배치되거나 붙여넣은 이미지 편집

In-Browser Editing을 사용하면 사이트에서 전경 이미지로 삽입되어 있는 이미지를 편집할 수 있습니다. 사이트의 이미지가 배경 이미지로 설정된 경우에는 편집할 수 없습니다. 편집할 수 없는 이미지를 변경해야 한다면 사이트를 디자인한 사람에게 문의하십시오.

  1. 편집할 이미지를 선택합니다.

    이미지 옆에 [이미지 편집] 단추가 있습니다.

    In-Browser Editing을 사용하여 이미지 편집
    편집 가능한 이미지를 롤오버할 경우 [이미지 편집] 단추가 표시됩니다.

  2. [이미지 편집]을 클릭합니다.

    프로젝트에 사용된 모든 에셋이 포함된 팝업이 나타납니다. 기존 에셋에서 이미지를 선택하거나 [사진 업로드] 단추를 사용하여 컴퓨터에서 새 이미지를 업로드합니다.

    In-Browser Editing을 사용하여 이미지 편집
    이미지 편집 인터페이스를 사용하여 기존 이미지를 새 이미지로 교체합니다.

    [사진 업로드] 옵션을 선택하면 컴퓨터에서 선택한 이미지가 자동으로 사이트에 업로드됩니다.

    선택한 파일은 웹 사이트를 호스팅하는 웹 서버로 업로드됩니다.

  3. 필요한 경우 [이미지 툴팁] 필드에 툴팁을 입력할 수 있습니다. 툴팁을 입력하면 SEO(검색 엔진 최적화)가 향상되고 사이트 접근성이 개선되므로 툴팁을 입력하는 것이 좋습니다.

  4. 다음 작업 중 하나를 수행합니다.

    • 틱 눈금을 클릭하여 변경 사항을 저장합니다.
    • 십자가 기호를 클릭하여 업데이트를 취소합니다.

    이미지를 교체할 때 선택한 새 이미지가 원래 이미지와 다른 종횡비를 가진 경우 원래 이미지에 맞게 새 이미지가 잘립니다. 따라서, 기존 이미지를 교체할 때는 크기가 같거나 폭 및 높이 비율이 동일한 더 큰 이미지를 사용해야 합니다.

    특정 이미지를 주기적으로 바꿀 예정이라면 처음 사이트를 만든 사람에게 동일한 크기의 서로 다른 이미지 여러 개를 업로드하여 사이트에 있는 이미지를 선택하여 바꿀 수 있게 만들어 달라고 요청하십시오. 예를 들어 웹 디자이너가 봄, 여름, 가을, 겨울용으로 동일한 크기의 이미지 네 개를 업로드할 수 있습니다. 그러면 나중에 [사이트] 옵션을 선택하고 현재 계절에 맞는 이미지로 교체할 수 있습니다.

  5. 모든 변경 사항을 완료했으면 [게시]를 클릭하여 변경 사항을 실시간으로 푸시합니다.

텍스트 프레임 내에 배치된 이미지 편집

페이지의 이미지가 텍스트 프레임 안에 붙여넣어진 경우에도 이미지를 편집할 수 있습니다.

  1. 텍스트 프레임을 선택합니다. 그런 다음 텍스트 프레임 안의 이미지를 선택합니다. 

선택한 이미지 옆에 [이미지 편집] 단추가 나타납니다.

텍스트 상자 안의 이미지 편집
텍스트 프레임을 선택한 다음 텍스트 상자 안의 이미지를 선택하여 [이미지 편집]을 클릭합니다.

  1. [이미지 편집]을 클릭합니다. 기존 에셋 중 하나를 선택하거나 [사진 업로드]를 클릭하여 컴퓨터에서 새 이미지를 업로드합니다.
  2. 모든 변경 사항을 완료했으면 [게시]를 클릭하여 변경 사항을 실시간으로 푸시합니다.

공유 컨텐트 편집

사이트를 디자인할 때 사이트의 일부 컨텐트를 마스터 페이지에 추가할 수 있습니다. 요소를 마스터 페이지에 추가하면 해당 마스터에 연결된 다른 모든 사이트 페이지에 해당 요소가 표시됩니다. 즉, 한 페이지에서 요소를 변경하면 해당 컨텐트의 다른 모든 인스턴스가 업데이트됩니다.

이렇게 공유된 요소를 편집하려고 선택하면 항목이 [공유 이미지 편집] 창에 나타납니다.

fig16_ibe
여러 페이지에서 공유되는 컨텐트를 [공유 이미지 편집] 창에서 편집

이 창이 나타나는 경우 변경을 수행하면 웹 사이트의 다른 페이지가 자동으로 업데이트된다는 의미이므로 주의해야 합니다. [취소]를 클릭하고 확인한 후 변경하는 것이 최선입니다. 새 브라우저 창에서 라이브 사이트로 이동한 후 페이지를 검토하여 요소가 나타나는 위치를 확인합니다. 요소의 모든 인스턴스를 변경해도 되는지 확인한 후 In-Browser Editing 인터페이스로 돌아가 요소를 업데이트합니다.

하이퍼링크 편집

하이퍼링크 편집에 대한 자세한 내용은 하이퍼링크 편집을 참조하십시오.

홈 페이지에서 링크를 따라 이동하여 다른 사이트 페이지 편집

계정에 처음 로그인하면 사이트 홈 페이지의 편집 가능한 버전이 표시됩니다. 홈 페이지의 내용을 변경한 후 사이트의 다른 링크된 페이지를 방문하여 해당 페이지를 편집할 수 있습니다.

  • 링크가 텍스트 프레임 외부에 나타나는 경우에는 링크를 클릭하는 것으로 사이트의 링크된 페이지로 이동할 수 있습니다. 다른 웹 사이트에 있는 페이지에는 In-Browser Editing을 사용할 수 없으므로 외부 링크(현재 사이트에 포함되지 않는 웹 페이지에 대한 링크)는 편집 인터페이스에 로드되지 않습니다.
  • 텍스트 프레임 안에 링크가 표시된 경우 커서를 텍스트 프레임 위로 가져가면 단추가 표시됩니다. 이 단추를 클릭하여 링크된 웹 페이지로 이동합니다. 예를 들어, [홈] 단추를 클릭하여 사이트의 홈 페이지로 이동합니다.
  • 전체 텍스트 프레임에 링크가 적용된 경우 전체 프레임을 클릭하여 링크 또는 기준점 태그가 포함된 단추를 표시합니다.
fig17_ibe
단추를 클릭하여 링크된 페이지 또는 기준점 태그 위치에 액세스합니다.

사이트에서 각 페이지의 편집을 마친 경우 변경 내용을 저장하려면 [게시] 단추를 클릭해야 합니다. 전체 사이트 편집을 마쳤으면 브라우저 창을 닫습니다.

In-Browser Editing에서 변경 사항 미리 보기

In-Browser Editing에서 반응형 레이아웃을 지원합니다. 즉, 변경 사항과 각 중단점에서 변경 사항을 보는 방법을 직접 미리 볼 수 있습니다. 반면 사이트에 대체 레이아웃을 사용한 경우 드롭다운을 사용하여 각 장치의 변경 사항을 미리 볼 수 있습니다.

변경 사항을 미리 보려면 다음을 수행하십시오.

  1. 사이트 컨텐트에 필요한 변경을 하십시오.

    컨텐트를 업데이트한 1200px의 중단점에 주목합니다. 이 중단점의 변경 사항을 미리 봅니다.

  2. 드롭다운에서 다른 중단점을 선택하고 각 중단점의 변경 사항을 미리 봅니다.

  3. 대체 레이아웃을 사용하여 사이트를 만든 경우 드롭다운에서 장치를 선택하고 변경 사항을 미리 봅니다.

.Muse 파일 편집 사항 동기화

In-Browser Editing을 실행하면 로컬 .muse 파일의 컨텐트가 더 이상 라이브 사이트의 컨텐트와 일치하지 않습니다. 이 섹션에서는 사용자가 수행한 변경 내용을 승인하거나 거부하여 현재 사이트 디자인과 일치하도록 .Muse 파일을 업데이트하는 방법을 설명합니다.

  1. Muse를 실행하고 사이트의 .muse 파일을 엽니다.

    게시된 사이트가 변경되었음을 알리는 경고 메시지가 나타납니다.

    메시지는 .muse 파일을 처음 열 때에만 나타나는 것이 아니라 라이브 웹 사이트와 동기화되지 않은 .muse 파일을 게시하려고 할 때에도 사이트를 게시하기 전에 변경 내용을 다시 검토할 수 있도록 메시지가 나타납니다.

    참고:

    언제라도 [파일] > [Adobe Business Catalyst 사이트와 동기화]를 선택하여 .muse 파일과 라이브 사이트 간의 차이를 검토할 수 있는 인터페이스를 열 수 있습니다.

  2. [검토]를 클릭하여 변경 내용을 확인합니다.

    [변경 내용 검토 및 병합] 창이 나타납니다.

  3. 인터페이스를 사용하여 각 변경 내용을 검토합니다. 각 편집의 변경 내용이 강조 표시됩니다. 새 컨텐트는 녹색으로 강조 표시되고 삭제된 항목은 빨간색으로 강조 표시되므로 추가되거나 삭제된 내용을 한 눈에 확인할 수 있습니다.

  4. 드롭다운 메뉴 옵션([병합 안 함] 또는 [Muse로 병합])을 사용하여 특정 변경 내용이나 모든 변경 내용을 거부하거나 수락합니다.

    fig20_ibe
    메뉴 옵션을 사용하여 변경 내용 병합 또는 무시

    참고: 변경 내용을 병합하지 않으면 다음 번에 .muse 파일을 게시할 때 라이브 사이트에 적용된 변경 내용을 덮어씁니다. 이 작동 방식은 여러 사람이 In-Browser Editing으로 사이트를 편집할 때 발생할 수 있는 철자 오류와 기타 사이트 문제를 쉽게 해결하도록 도와 줍니다.

  5. 텍스트 및 이미지의 라이브 웹 사이트 버전과 로컬 .muse 파일을 비교하려면 [페이지 미리 보기] 확인란을 선택하거나 선택 취소합니다.

    fig21_ibe
    [페이지 미리 보기] 확인란을 선택/선택 취소하여 디자인 보기의 최근 변경 내용 숨기기/표시

    .muse 파일의 동기화와 편집을 마쳤으면 파일을 게시하여 변경 내용을 실시간 사이트에 푸시합니다. [병합 안 함]으로 표시된 모든 변경된 항목은 사이트를 다시 게시할 때 .muse 파일의 현재 디자인으로 덮어쓰여집니다.

웹 사이트의 게시된 버전 저장

.muse 파일을 변경하는 동안 다른 사용자가 라이브 사이트를 변경할 수 있으므로 변경 내용을 동기화하고 최신 버전을 게시한 후 사이트 복사본을 저장하는 것이 좋습니다.

사이트를 게시한 다음 즉시 [파일] > [사이트를 다른 이름으로 저장]을 선택하여 .muse 파일 복사본을 저장합니다. 필요한 경우 새 복사본을 만들 때 파일 이름에 현재 날짜를 포함시킬 수 있습니다. 이렇게 하면 특정 날짜에 게시한 .muse 파일을 쉽게 찾을 수 있습니다.

예를 들어 .muse 파일의 최신 작업 사본을 포함하는 폴더와 사이트 디자인의 이전에 게시된 인스턴스를 포함하는 다른 보관 버전 여러 개를 만들 수 있습니다. 폴더의 파일 목록은 다음과 같은 형식으로 표시됩니다.

my-site.muse

my-site_2013-1-4.muse

my-site_2013-2-23.muse

my-site_2013-4-7.muse

이렇게 하면 이전 사이트 디자인을 쉽게 복구할 수 있을 뿐만 아니라 Muse에서 In-Browser Editing을 사용하여 수행된 웹 사이트 변경 내용을 정확하게 구분할 수 있습니다. 사이트의 백업 버전을 저장하면 현재 .muse 파일과 라이브 웹 사이트가 동기화된 상태인지 확인하는 데에도 도움이 됩니다.

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

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