Scroll Viewport for Confluence Guide(Data Center)

 문제

Scroll Viewport는 Confluence 콘텐츠를 웹사이트처럼 보이게 하는 Add-on으로, Confluence 페이지를 다양한 테마와 스타일로 표시할 수 있습니다.

본 내용은 Data center 제품을 기준으로 작성된 가이드로, 제품마다 설정과 사용 방법에 있어 다소 차이점이 존재할 수 있습니다.

 해결책

1. 뷰포트 생성 방법
   각 Space마다 설정 가능하며, Space tools > Apps > Create Viewport를 통해 설정할 수 있습니다.

   Open

   

   
   Create Viewport 클릭하여 뷰포트의 구성요소를 설정할 수 있으며, 4가지로 구성되어있습니다.

   1. Theme: 어떤 ViewPort 테마를 사용할 지 설정할 수 있습니다.

   2. Content: Page, Blog 등 어떤 콘텐츠를 표시할 지 설정합니다.

   3. URL: 사이트의 URL 과 Path 를 설정합니다.

   4. Permissions: 뷰포트 편집및, 보기 권한을 부여합니다
      
      
      

Theme 설정
뷰포트의 테마에 맞춰 Confluence를 적용할 수 있으며, 'Web Help' 와 "Help Center" 2가지 테마가 제공됩니다.

• Help Center: 코드를 직접 편집하는 대신 설정을 사용하여 원하는 디자인으로 커스터마이징 할 수 있습니다.

• Web Help: HTML, CSS 및 JavaScript를 사용하여 커스터마이징 할 수 있습니다.
  
  

원하는 테마를 선택한 후 설정(...) > Copy > Save 버튼을 클릭하여 저장합니다.

Open

Save 버튼을 클릭한 후 나타나는 'Open in New Tab' 링크를 클릭하면,
선택한 테마로 생성된 뷰포트로 이동할 수 있습니다.

2. 뷰포트 편집 방법
   이후 뷰포트의  전반적인 디자인, 레이아웃과 같은 설정은 Copy한 테마의 설정(...) > Edit을 통해 가능하며,
   HTML, CSS 및 JavaScript 코드등을 통해 원하는 디자인으로 커스터마이징 할 수 있습니다.
   자세한 설명은 공식 문서 링크를 참고해주세요.

생성된 뷰포트는 Space tool > Apps로 이동한 후, Scroll Viewport의 Apps탭을 통해 확인 가능하며,

Actions의 Open을 클릭하면 URL에 해당하는 뷰포트로 이동할 수 있습니다.

뷰포트와 Confluence Space의 동기화
생성된 뷰포트와 Space의 페이지는 하기 이미지처럼 동기화 됩니다.

3. Scroll Viewport를 통해 Space의 페이지에서 뷰포트로 전환하는 방법
   Scroll Viewport(눈모양 아이콘) > Open 버튼을 클릭하면, 뷰포트에서 해당되는 페이지로 전환됩니다.
   (Space의 'Admin page' -> 뷰포트의 'Admin page'로 이동)

뷰포트에서 Confluence로 이동하고 싶은 경우,  Viewport Control > View in Confluence 클릭

Viewport Control내의 주요 옵션

• Page > View in Confluence:
  현재 Scroll Viewport에서 보고 있는 페이지를 원래의 Confluence 스타일로 보기 위한 기능입니다.
  이 옵션을 선택하면, 사용자는 원래 Confluence 인터페이스에서 해당 페이지를 볼 수 있습니다.
  페이지의 원본 형식을 확인하거나, Confluence의 다른 기능을 사용하고자 할 때 유용합니다.

• Page > Edit Page:
  현재 보고 있는 Confluence 페이지를 편집할 수 있습니다.
  일반적인 Confluence 페이지 편집기가 열리며, 여기서 텍스트, 이미지, 매크로 등의 콘텐츠를 추가, 수정,
  삭제할 수 있습니다.

• Viewport > Edit Theme:
  Scroll Viewport의 테마를 편집할 수 있습니다.
  테마 편집기를 통해 헤더, 푸터, 스타일, 레이아웃 등의 테마 요소를 사용자 정의할 수 있습니다.
  CSS와 HTML을 사용하여 테마의 디자인과 구조를 세밀하게 조정할 수 있습니다.

• Viewport > Configure Viewport: Scroll Viewport의 설정을 구성할 수 있습니다.
  URL 경로, 도메인 이름, 테마 선택, SEO 설정 등의 주요 설정을 관리할 수 있으며,
  어떤 Confluence 콘텐츠가 Viewport에서 표시될지, 어떻게 표시될지 등의 콘텐츠 관련 설정도 구성할 수 있습니다.

4. 뷰포트 권한 설정
뷰포트의 보기및 테마 편집 권한 설정은 자세한 설명을 위해 보기 권한 설정 / 테마 편집 권한 설정 공식 문서를
참고부탁드립니다.

 관련 문서

• https://help.k15t.com/scroll-viewport-data-center/2.22.0/get-started

• https://help.k15t.com/scroll-viewport-data-center/2.22.0/edit-copy-or-delete-a-theme

• https://help.k15t.com/scroll-viewport-data-center/2.22.0/set-theme-editing-permissions

• https://help.k15t.com/scroll-viewport-data-center/2.22.0/set-viewing-permissions