Skip to main content
Skip table of contents

디자인 편집 : 다이나믹 에디터 화면

Pages의 페이지 편집은 에디터로 진입하여 편집할 수 있습니다.

디자인 설정하기

신규 페이지를 생성하였다면 이제 페이지를 꾸밀 수 있습니다.

  • [디자인 설정]을 통해서 페이지 에디터로 들어갈 수 있다.

  • 페이지 에디터를 통해 복수개의 다중 섹션들을 추가 • 삭제 • 편집할 수 있다.

  • 섹션 템플릿을 변경할 수 있다.

  • 섹션 정보를 입력할 수 있다.

  • 섹션 디자인 수정을 할 수 있다.

  • [미리보기]를 통해 구현된 화면을 미리 확인할 수 있다.

  • [나가기]를 통해 에디터를 나갈 수 있다.

    • 기존 편집 사항들은 자동으로 저장되는 것을 ‘디자인 설정’으로 재 진입시 확인할 수 있다.

  • [발행하기]를 통해 작업했던 편집 사항들을 사용자 화면에 최종 발행할 수 있다.

목록에서 편집하기 원하는 페이지의 [디자인 설정] 버튼을 눌러 에디터 화면으로 진입합니다.

에디터 화면 인터페이스 구성

에디터는 우리가 흔하게 사용하는 PPT 프로그램들 사용법과 인터페이스의 구성이 비슷하다고 생각하면 쉽습니다.

에디터 상단 - ❶

에디터의 상단에는 에디터 정보, 페이지 정보, 에디터 자체의 기능 버튼들을 확인하실 수 있습니다.

  • 페이지 제목 : 편집기 이름(디자인 설정) 옆에는 내가 설정한 페이지의 제목을 확인할 수 있습니다.

  • 자동 편집 사항 저장 기능 : 에디터 상단 좌측에서는 ‘00초 전에 저장’과 같은 문구를 확인할 수 있는데, 이는 현재 내가 편집 중인 사항들이 실시간으로 저장되고 있는 것을 확인할 수 있습니다. 때문에 [나가기]버튼을 누르더라도 편집 변경 기록들은 날아가지 않고 축적되어 저장된다는 것을 알 수 있습니다.

  • 미리보기 기능 : [미리보기] 버튼을 통해서는 최종 발행되지는 않았지만, 편집 중인 사항들을 사용자 화면에 어떻게 보여질 지에 대한 모습을 실시간으로 쉽게 확인하며 편집할 수 있습니다.

    • 웹과 모바일 두개의 장치에 반영된 모습을 볼 수 있습니다.

    • [X] 버튼을 통해 다시 편집기 화면으로 돌아갈 수 있습니다.

  • 나가기 : [나가기] 버튼을 통해 에디터 밖, 콘솔 화면으로 돌아 갈 수 있습니다.
    발행하지 않은 편집 사항들은 자동 저장 기능을 통해 [게시하기]를 통해 발행하지 않아도 에디터 속에 저장됩니다.
    때문에 최종 발행하지는 않았지만 이전에 저장된 편집사항들을 이어서 계속 편집하고 싶다면, 에디터 재 진입시 [이어서 수정하기]를 통해 이전 내역을 불러와야 편집 사항들을 이어서 수정할 수 있습니다.

  • 게시하기 : [게시하기] 버튼은 여태까지 수정한 편집사항들을 사용자 화면에 최종적으로 발행하여 게시하는 것을 뜻합니다. [게시하기] 버튼을 누르면 그 즉시 사용자 화면에 수정한 내용들이 보여지는 것을 확인 할 수 있습니다.

에디터 좌측 사이드 - ❷

에디터 좌측에서는 신규 섹션을 추가하고 섹션 선택, 개수 확인, 순서 변경을 할 수 있습니다.

  1. [+] 버튼을 통해서 신규 섹션을 추가할 수 있습니다.

  2. 신규 유형 섹션 추가 모달 화면에서 원하는 섹션을 우측 구현된 미리보기 예제 이미지를 통하여 디자인을 확인할 수 있습니다.

에디터 우측 - ❸

우측에서는 선택한 섹션을 편집할 수 있습니다.

  1. 섹션 템플릿 선택

  2. 섹션 정보 기입

  3. 스타일 편집

  4. 설정

을 순차적으로 진행 할 수 있습니다.

섹션 추가하기 - ❷

에디터 좌측에서 [+] 버튼으로 신규 섹션을 추가할 수 있습니다.

신규 추가된 섹션의 공개 여부 기본값은 ‘공개’입니다.

  • 섹션의 ‘공개/비공개’는 에디터 속 섹션 조합 구성에 있어서, 해당 섹션을 ‘공개’할지 ‘비공개’ 상태로 존재하게 할지에 대한 설정입니다.

  • 만일, 섹션을 ‘비공개’ 상태로 변경했다면, ‘에디터 좌측 사이드 - ❷’ 섹션 구성에서 해당 섹션의 존재는 여전히 존재하지만 [미리보기]와 같은 사용자 화면 구현 모습에 있어서는 보이지 않는 것을 알 수 있습니다.
    [미리보기]에서도 해당 섹션을 볼 수 없기 때문에, 당연히 최종 노출 승인 행위인 [게시하기]를 실행 하더라도 해당 섹션은 ‘비공개’ 처리되어 노출되지 않습니다.

    • 단, ‘공개’ 상태의 섹션을 [게시하기]를 실행하지 않고, 단순히 에디터 화면에서만 ‘비공개’로 전환하였다면 사용자 화면에서 해당 섹션은 ‘공개’일 것입니다. 반대의 경우도 동일합니다. [게시하기]로 편집 사항을 최종 반영에 승인해주어야 편집 사항과 사용자 화면이 동일해 집니다.

섹션의 ‘공개/비공개’는 섹션에 국한 된 것입니다.

✅ Pages 채널 페이지 목록 화면 | 페이지-목록에서 생성한 ‘페이지’의 ‘공개/ 비공개’ 설정과는 별도의 행위입니다.

✅ [아이템] 탭 → ‘아이템 편집’의 [수정] → ‘아이템 공개 설정’의 [공개/비공개] 설정과는 별도의 행위입니다.

✅ 섹션의 ‘공개/비공개’는 사용자 화면으로 최종 [게시하기](최종 노출 허가 행위, 발행)와는 별도의 행위입니다.

섹션 삭제는 디자인 편집 : 설정 | 섹션-삭제로 할 수 있습니다.

섹션 종류와 설명

Intro

주로 상단에 놓여 히어로와 같은 역할을 할 수 있는 섹션 유형입니다.

  • 총 4개의 템플릿 종류를 가지고 있습니다.

    • 템플릿 A : 인터넷 윈도우 사이즈에 따라 화면 전면을 반응형으로 채우는 Full Mode 디자인, 중앙 정렬 템플릿입니다.

    • 템플릿 B : 인터넷 윈도우 사이즈에 따라 화면 전면을 반응형으로 채우는 Full Mode 디자인, 좌측 정렬 템플릿입니다.

    • 템플릿 C : 화면 높이의 70%를 채우는 디자인, 좌측 정렬 템플릿입니다.

    • 템플릿 D : 화면 높이의 70%를 채우는 디자인, 중앙 정렬 템플릿입니다.

Content

단일 콘텐츠로 구성되어 있으며, 가장 일반적으로 활용될 수 있는 섹션 유형입니다.

  • 총 2개의 템플릿 종류를 가지고 있습니다.

    • 템플릿 A : 웹에서는 좌측에 콘텐츠가 배치, 모바일에서는 상단에 콘텐츠가 배치된 디자인을 가진 템플릿입니다.

    • 템플릿 B : 웹에서는 우측에 콘텐츠가 배치, 모바일에서는 하단에 콘텐츠가 배치된 디자인을 가진 템플릿입니다.

Contents Carousel

여러개의 아이템이 나열되어 있고, 좌우로 스크롤할 수 있는 섹션 유형입니다.

  • 총 2개의 템플릿 종류를 가지고 있습니다.

    • 템플릿 A : 업로드한 사진이 1:1 비율의 미디어 컨텐츠 영역에 전시됩니다.

    • 템플릿 B : 업로드한 사진이 2:3 비율의 미디어 컨텐츠 영역에 전시됩니다.

InfoBox

단순 텍스트 정보를 시각적으로 나열할 수 있는 섹션 유형입니다.

  • 총 1개의 템플릿 종류를 가지고 있습니다.

    • 템플릿 A : 최대 4개의 아이템을 1:1 비율의 작은 이미지와 함께 게시할 수 있습니다. 특징적인 정보를 명시적으로 강조하여 보여주고 싶을때 사용할 수 있습니다.

주로 맨 하단에 위치하여, 사업자의 로고를 포함하여 꼭 알려야하는 회사의 명시적인 정보들을 담을 수 있습니다.

  • 총 2개의 템플릿 종류를 가지고 있습니다.

    • 템플릿 A : 로고와 텍스트가 왼쪽 정렬을 취하고 있는 템플릿입니다.

    • 템플릿 B : 로고와 텍스트가 중앙 정렬을 취하고 있는 템플릿입니다.

다음과 같은 섹션 별, 템플릿 별 특징을 파악하여 섹션을 추가 할 수 있습니다.

섹션 제거하기 - ❸

[설정] 탭에서 섹션 삭제를 할 수 있습니다. 삭제 후 복구할 수 없습니다.

다만, [나가기] 후 [새롭게 수정 시작하기]를 통해서, 편집 시작 전 편집 사항들을 불러올 수는 있습니다.

섹션 이동하기 - ❷

추가된 섹션을 마우스 드래그 앤 드롭으로 순서 변경을 할 수 있습니다.

추가 도움이 필요하신 가요?

문서를 통해 문제가 해결되지 않았다면, 문의 메일(support@publ.biz)로 메일을 보내주시면 publ 고객팀에서 도와드리겠습니다.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.

Contact Support Close