참고:

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

참고:

Adobe는 2020년 3월 26일 Business Catalyst에서 기존 사이트 호스팅을 중단합니다. 2020년 3월 26일 이후 In-Browser Editing을 사용하여 Business Catalyst 평가판 또는 유료 사이트를 편집할 수 없습니다. Business Catalyst 사용 종료에 대한 자세한 내용은 Business Catalyst 사용 종료 알림을 참조하십시오.

In-Browser Editing을 사용하면 웹 브라우저에서 사이트의 컨텐트를 쉽게 업데이트할 수 있습니다. 이동 중에 웹 사이트를 변경해야 하거나 클라이언트 및 다른 사이트 제공자가 자신의 컨텐트를 쉽게 편집할 수 있도록 해야 할 때 In-Browser Editing을 통해 이를 쉽게 처리할 수 있습니다.

In-Browser Editing을 사용하여 편집 가능한 항목

In-Browser Editing을 사용하면 텍스트 컨텐트를 편집하고 다음 항목을 제외한 모든 이미지를 바꿀 수 있습니다.

  • 마스터 페이지 컨텐트
  • 세로 방향 텍스트
  • 사각형, 이미지 프레임 및 위젯 내의 배경 채우기로 설정된 이미지
  • 슬라이드 쇼 카운터
  • 양식 제출 단추
  • 동적으로 생성되는 메뉴 레이블(수동으로 설정되지 않은 메뉴 위젯 내)
  • 래스터화된 페이지 항목: 여기에는 둥근 모퉁이, 경사진 가장자리, 내부 광선 또는 회전이 적용된 이미지, 시스템 글꼴을 사용하는 텍스트 프레임, 효과가 적용되어 회전된 텍스트 프레임이 포함됩니다.

참고:

텍스트 컨텐트는 편집할 수 있지만 텍스트의 서식은 변경할 수 없습니다. 이미지는 교체만 가능하고 추가나 삭제는 불가능합니다.

Adobe Muse에서 In-Browser Editing 설정

시작하기 전에 사이트 속성 창에서 사용자의 사이트가 In-Browser Editing을 사용하도록 설정합니다.

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

    사이트 속성
  2. 사이트를 FTP 호스트에 업로드합니다.

    [파일] > [FTP 호스트에 업로드]를 선택하여 Adobe Muse에 내장된 [FTP 호스트에 업로드] 기능을 사용합니다. 자세한 내용은 FTP 호스트에 업로드를 참조하십시오.

    In-Browser Editing을 사용하여 변경한 내용을 나중에 사이트에서 동기화할 수 있도록 하려면 FTP에 업로드한 후에 반드시 .muse 파일을 저장해야 합니다.

In-Browser Editing에 로그인

다음 섹션에는 In-Browser Editing을 사용하여 Adobe Muse 사이트를 업데이트할 수 있는 단계가 나열되어 있습니다.

In-Browser Editing을 사용하여 Adobe Muse 웹 사이트의 컨텐트를 편집할 수 있는 방법을 읽어 보십시오.  

  1. https://inbrowserediting.adobe.com을 방문하여 편집하려는 사이트의 도메인 이름(URL)을 입력하십시오.

    In-Browser Editing

    참고:

    HTTP가 아닌 HTTPS 프로토콜을 통해서만 In-Browser Editing 사이트에 액세스하는 것이 좋습니다. 이렇게 하면 자격 증명을 제공하여 로그인하고 안전한 연결을 통해 In-Browser Editing을 사용하여 웹 사이트를 수정할 수 있습니다.

  2. 호스팅 자격 증명을 사용하여 로그인합니다.

    로그인 창

    로그인하면 사이트의 홈 페이지뿐만 아니라 상단에 In-Browser Editing 탐색 모음도 표시됩니다.

    In-Browser Editing 홈 페이지
    In-Browser Editing에 로그인하여 홈 페이지 확인

In-Browser Editing을 사용하여 텍스트 컨텐트 및 이미지 편집

In-Browser Editing을 사용하여 브라우저에서 직접 텍스트를 편집할 수 있습니다. 텍스트 외에 이미지, 텍스트 내 이미지, 하이퍼링크도 편집할 수 있습니다.

Adobe Muse 웹 사이트의 컨텐트를 빨리 편집할 수 있는 방법을 읽어 보십시오.

텍스트 편집

In-Browser Editing을 사용하여 브라우저에서 바로 간편하게 텍스트를 편집할 수 있습니다. In-Browser Editing에 로그인한 후 삭제하려는 텍스트를 선택하고 새로운 텍스트를 입력하기만 하면 됩니다.

입력이 끝나면 변경 사항이 어떻게 표시되는지를 같은 브라우저에서 즉시 확인할 수 있습니다. 반응형 사이트의 경우 모든 중단점에서 변경 사항을 미리 봅니다. 대체 레이아웃을 사용하여 만든 사이트의 경우에는 각 장치의 변경 사항을 미리 봅니다.

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

이미지 및 텍스트 내 이미지 편집

  1. 편집하려는 이미지를 클릭하거나 텍스트 프레임을 클릭한 후 편집하려는 이미지를 클릭합니다.

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

    In-Browser Editing을 사용하여 이미지 편집
    In-Browser Editing을 사용하여 이미지 편집

    텍스트 내 이미지 편집
    텍스트 프레임 내 이미지 편집

  3. 팝업 상자가 열리면 사이트에 연결되어 있는 기존 파일을 선택합니다. 또한 [사진 업로드]를 클릭하여 컴퓨터에서 이미지를 업로드할 수 있습니다.

    업로드할 이미지 선택
    바꿀 이미지 선택

    이 대화 상자는 해당 이미지와 관련된 툴팁 텍스트를 추가 또는 편집할 수 있는 옵션도 제공합니다.

  4. 사진을 선택한 후 을(를) 클릭합니다.

    기존 이미지가 선택한 이미지로 바뀝니다.

    이미지를 바꾸면 사용자가 선택한 새 이미지 크기가 이전 이미지가 차지했던 영역에 맞게 조절됩니다. 새로운 이미지와 원래 이미지의 가로/세로 비율이 다르면 이전 이미지의 전체 영역이 완전히 채워지지 않습니다. 이로 인해 페이지의 시각적 레이아웃에 영향을 미칠 수 있습니다. 따라서, 기존 이미지를 교체할 때는 크기가 같거나 폭 및 높이 비율이 동일한 더 큰 이미지를 사용해야 합니다.

    사이트 해상도가 HiDPI로 설정되어 있고 교체 이미지가 2x가 되기에 충분한 데이터를 보유하고 있을 경우 In-Browser Editing이 HiDPI 화면에 표시하기 위해 이미지의 1x 및 2x 버전을 모두 저장합니다. HiDPI용 에셋 만들기에 대해 더 알아보려면 Muse에서 HiDPI 웹 사이트 만들기를 방문하십시오.

Adobe Muse 사이트에서 하이퍼링크 삽입 및 편집

웹 페이지에서 다양한 종류의 하이퍼링크(예: 외부 링크, 이메일(mail-to), 웹 사이트의 다른 페이지에 대한 링크, 다운로드 가능한 파일 등)를 편집할 수 있습니다. In-Browser Editing을 사용하여 하이퍼링크를 편집하는 방법에 대한 자세한 내용을 읽어 보십시오.

In-Browser Editing을 사용하여 링크 삽입

In-Browser Editing의 [링크 추가] 단추를 사용하여 하이퍼링크를 추가하거나 삽입할 수 있습니다. 이 절차를 수행하면 Adobe Muse 사이트용 링크를 삽입 및 업데이트할 수 있습니다.

  1. 링크를 추가하려는 텍스트를 클릭합니다.

  2. [링크 추가]를 클릭합니다.

    링크 삽입 옵션
    In-Browser Editing을 사용하여 하이퍼링크 삽입

  3. [링크 삽입] 대화 상자에서 다음 유형의 대상을 링크에 추가하도록 선택합니다.

    • 페이지: [페이지] 탭을 선택하고 [페이지 선택] 드롭다운 목록에서 링크하려는 페이지를 선택합니다.
    • 외부: [외부] 탭을 선택하고 [외부 링크] 필드에 작동하는 URL을 입력합니다.
    • 전화번호: [전화번호] 탭을 선택하고 전화번호를 입력합니다.
    • 파일: [파일] 탭을 선택하고 기존 파일을 선택하거나 업로드하려는 파일을 검색합니다.
    • 이메일 주소: [이메일 주소] 탭을 선택하고 대상 이메일 주소를 입력합니다.
    선택적으로 각 대상 유형에 대한 툴팁을 입력하도록 선택할 수 있으며, 사용자가 새 창에서 링크를 열도록 할 수 있습니다.
    링크 삽입 대화 상자
    In-Browser Editing의 링크 삽입 대화 상자

  4. [확인]을 클릭하여 하이퍼링크를 삽입합니다.

외부 링크 편집

  1. 편집하려는 하이퍼링크를 클릭합니다.

  2. 팝업에서 펜 기호를 클릭합니다.

    링크 편집 단추
    In-Browser Editing에서 외부 링크를 편집합니다.

  3. [링크 편집] 대화 상자에서 [외부] 탭을 선택합니다. 완전히 작동하는 URL을 입력합니다. 해당 URL이 손상되지 않았는지, 대상 웹 페이지에 공개적으로 액세스할 수 있는지 확인합니다.

    [링크 편집] 대화 상자의 [외부] 탭
    [하이퍼링크 편집] 대화 상자에 새로운 링크를 입력합니다.

  4. 다음 세부 정보를 선택적으로 지정할 수 있습니다.

    • 툴팁: 대상 페이지에 대한 의미 있는 설명을 제공합니다.
    • 새 창에서 열기: 필요한 경우 링크를 새 창에서 열 수 있습니다.
  5. [확인]을 클릭하여 마칩니다.

    1 ~ 4단계에 따라 텍스트에 적용된 외부 하이퍼링크, 중첩된 텍스트 프레임 내의 텍스트, 슬라이드 쇼 위젯 내의 레이블, 사용자 정의 링크, 이미지 등을 편집합니다.

다른 페이지 또는 기준점으로 연결되는 내부 링크 편집

  1. 편집하려는 하이퍼링크를 클릭합니다.

  2. 링크 위에 표시되는 팝업에서 펜 기호를 클릭합니다.

    내부 링크 편집
    다른 페이지로 연결되는 내부 링크 편집

  3. [링크 편집] 대화 상자에서 [페이지] 탭을 선택합니다. [페이지 또는 기준점 선택] 대화 상자에서 링크하려는 내부 페이지 또는 기준점을 선택합니다.

    페이지를 선택한 링크 편집 대화 상자
    페이지에 대한 내부 링크 편집

    기준점은 페이지 이름 뒤에 단어 "Anchor"로 표시됩니다. 웹 사이트의 동일한 페이지 또는 다른 페이지의 기준점으로 링크할 수 있습니다.

  4. 다음 세부 정보를 선택적으로 지정할 수 있습니다.

    • 툴팁: 대상 페이지에 대한 의미 있는 설명을 제공합니다.
    • 새 창에서 열기: 필요한 경우 링크를 새 창에서 열 수 있습니다.
  5. [확인]을 클릭하여 마칩니다.

전화번호 변경을 위한 하이퍼링크 편집

  1. 편집하려는 링크를 클릭합니다.

  2. 링크 위에 표시되는 팝업에서 펜 기호를 클릭합니다.

    펜 기호 클릭
    펜 기호 클릭

  3. [링크 편집] 대화 상자에서 [전화번호] 탭을 선택합니다. [전화번호] 필드에 새로운 전화번호를 지정합니다.

    전화번호 선택
    전화번호에 대한 링크 편집

  4. 다음 세부 정보를 선택적으로 지정할 수 있습니다.

    • 툴팁: 툴팁에 대한 의미 있는 설명을 제공합니다.
    • 새 창에서 열기: 필요한 경우 링크를 새 창에서 열 수 있습니다.
  5. [확인]을 클릭하여 마칩니다.

이메일 주소 업데이트를 위한 하이퍼링크 편집

  1. 편집할 하이퍼링크를 클릭하면 링크를 편집할 수 있다는 팝업 창이 표시됩니다.

  2. 펜 기호를 클릭합니다.

    펜 기호 클릭
    펜 기호를 클릭합니다.

  3. [링크 편집] 대화 상자에서 [이메일 주소] 탭을 선택합니다. [이메일 주소] 필드에 새로운 이메일 주소를 지정합니다.

    이메일 주소 선택
    이메일에 대한 하이퍼링크 편집

  4. 다음 세부 정보를 선택적으로 지정할 수 있습니다.

    • 툴팁: 툴팁에 대한 의미 있는 설명을 제공합니다.
    • 새 창에서 열기: 필요한 경우 링크를 새 창에서 열 수 있습니다.
  5. [확인]을 클릭하여 마칩니다.

In-Browser Editing을 사용하여 다운로드 가능한 파일 편집

PDF, 설치 관리자, 비디오, 오디오 파일 등의 다운로드할 수 있는 파일에 대한 링크를 제공하는 일반적인 웹 디자인 방법입니다.

In-Browser Editing을 사용하여 Adobe Muse 사이트에서 텍스트, 모양 또는 이미지 형태의 파일을 하이퍼링크 대상으로 설정할 수 있습니다. 최대 파일 크기가 50MB를 초과하지 않는지 확인하십시오.

In-Browser Editing을 사용하여 파일을 업로드할 수 있습니다. 파일을 업로드할 때 파일 이름은 고유해야 합니다. 기존 파일과 이름이 동일한 파일을 업로드하면 이름을 바꿀 것인지 묻는 메시지가 표시됩니다.

  1. 편집하려는 링크를 클릭합니다.

  2. 표시되는 팝업에서 펜 기호를 클릭합니다.

    펜 기호 클릭
    펜 기호 클릭

  3. [링크 편집] 대화 상자에서 [파일] 탭을 선택합니다.

    페이지를 선택한 링크 편집 대화 상자
    다운로드 가능한 파일 업로드 및 업데이트

  4. 드롭다운 목록에서 기존 파일을 선택하거나 [검색]을 클릭하여 컴퓨터에서 파일을 찾아 엽니다.

  5. 다음 세부 정보를 선택적으로 지정할 수 있습니다.

    • 툴팁: 툴팁에 대한 의미 있는 설명을 제공합니다.
    • 새 창에서 열기: 필요한 경우 링크를 새 창에서 열 수 있습니다.
  6. [확인]을 클릭하여 마칩니다.

변경 사항 실행 취소 또는 다시 실행

컨텐트, 이미지 또는 링크를 업데이트할 때마다 변경 사항을 즉시 실행 취소하거나 다시 실행할 수 있습니다.

  • 변경 사항을 실행 취소하려면 을(를) 클릭합니다.
  • 변경 사항을 다시 실행하려면 을(를) 클릭합니다.

모든 변경 사항을 확인한 후 계속 진행하여 다른 중단점 또는 장치 보기에서 변경 사항을 미리 봅니다.

변경 사항 미리 보기 및 게시

In-Browser Editing을 사용하여 편집 작업을 하는 동안 브라우저에서 변경 사항을 미리 볼 수 있습니다. 변경 사항을 게시하기 전에 미리 보는 작업은 매우 중요합니다.

반응형 레이아웃을 사용하여 사이트를 만든 경우, 중단점의 드롭다운 목록을 사용하여 변경 사항을 미리 볼 수 있습니다.

반응형 레이아웃용 In-Browser Editing
반응형 레이아웃용 In-Browser Editing 미리 보기

각 중단점을 선택하고 해당 중단점에서 변경 사항을 미리 볼 수 있습니다. 업데이트된 레이아웃이 해당 브라우저 폭으로 표시됩니다.

반면, 대체 레이아웃을 사용하여 사이트를 만든 경우에는 장치 드롭다운 목록을 사용하여 변경 사항을 미리 볼 수 있습니다. 드롭다운 목록에서 변경 사항을 미리 보려는 장치를 선택합니다.

대체 레이아웃용 장치 미리 보기 확인
대체 레이아웃용 In-Browser Editing 미리 보기

모든 변경 사항을 확인한 후 계속 진행하여 상단 탐색 모음에서 [게시]를 클릭하면 변경 사항이 적용되고 라이브 사이트에서 확인할 수 있습니다. 변경한 내용이 마음에 들지 않을 경우 언제든지 변경 내용을 취소할 수 있습니다. 취소하면 사이트의 컨텐트가 마지막으로 게시했던 컨텐트로 재설정됩니다.

In-Browser Editing 동기화

In-Browser Editing을 사용하여 라이브 사이트를 변경하고 나면 로컬 .muse 파일은 더 이상 라이브 사이트와 동일한 컨텐트를 포함하지 않습니다.

In-Browser Editing 변경 내용을 Muse 파일과 동기화하려면 다음 단계를 따르십시오.

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

  2. 라이브 사이트가 변경된 것을 표시하는 알림 메시지가 나타납니다. 검토를 불러오고 변경 내용 창을 병합하려면 [검토]를 클릭하십시오.

  3. 검토 및 병합은 인터페이스 강조 표시를 변경하고 각 변경 내용을 검토할 수 있습니다. 새 컨텐트가 초록색으로 강조 표시되고 삭제된 항목을 빨간색으로 표시됩니다. 라이브 사이트의 변경 내용을 로컬 .muse 파일과 비교하려면 [페이지 미리 보기] 확인란을 설정했다가 해제하십시오.

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

    참고:

    [병합 안 함]을 선택하면 다음 번에 .muse 파일을 업로드할 때 라이브 사이트에 적용된 변경 내용을 덮어씁니다.

브라우저 내 편집 문제 해결

브라우저 내 편집 관련 문제가 발생할 경우 Common issues를 참조하십시오. 문제가 지속되는 경우 contact us에 문의하십시오.

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

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