팔로우

UI 편집기 기능

※ 「Kaizen Platform UI 편집기」는 Google Chrome 브라우저에서만 정상 작동됩니다. 반드시 Google Chrome 브라우저에서 접속 해주세요.

「UI 편집기」란?

「UI 편집기」는 별도의 프로그램 설치 및 설정이 없이 브라우저에서 바로 디자인 개선 작업이 가능한 Kaizen Platform 전용 편집기 입니다.

「Kaizen Platform UI 편집기」 화면에서 페이지 요소를 이동하거나 문자의 크기 · 색상 · 이미지 교체 등의 작업이 가능합니다.

이 편집기에서 원래 페이지의 HTML · CSS에 직접 접근해 코드를 수정하는 것은 아닙니다. 편집기에서 작업한 것들이 JavaScript 코드로 변환되어 원래 페이지에 이미 심어진 코드로 불러와지는 방식입니다.

「UI 편집기」 접속

UI 편집기를 시작하려면 디자인 개선 요청 상세화면의 + CREATE VARIATION 버튼을 클릭합니다.
(디자인 개선 요청화면 접속경로 자세히보기)

 

다음은 「UI 편집기」의 영역별 설명입니다.

상단 영역

  • KAIZEN PLATFORM(로고) : Kaizen platform 메인 페이지로 이동
  • Desktop : Device 작업 환경 선택
  • Online Help : 도움말 페이지로 이동
  • Open Experiment URL : 개선 요청 페이지 URL 접속
  • Back to Experiment Detail : 디자인 개선 요청 상세페이지로 이동
  • Save : 작업 중간 저장 기능 / 작업자 본인만 확인 가능
  • Post : 작업이 완료된 후 게시 / Post 후 내부 기술팀의 요청 없이는 수정이 불가합니다.
    부득이하게 수정이 필요한 경우 코멘트를 남겨주세요.

 

GUI 영역

상단 화면처럼 GUI 영역에서 마우스를 위치한 부분이 파란색 테두리로 보여집니다. 그 상태에서 마우스를 클릭하면 컨텍스트 메뉴가 열립니다.

GUI 컨텍스트 메뉴

  • Edit Text : 텍스트(문구)를 편집 할 수 있습니다.
  • Edit HTML : 선택한 요소와 하위레벨의 요소를 편집 할 수 있습니다.
  • Edit Style : 선택한 요소의 CSS Style 편집을 할 수 있습니다.
  • Edit Attributes : class와 id 등의 속성을 편집 · 추가 할 수 있습니다.
  • Set background image : 배경 이미지 변경 및 설정이 가능합니다.
  • Custom jQuery Code : 선택한 요소에 jQuery 코드를 추가 할 수 있습니다.
  • Remove : 선택한 요소를 제거 할 수 있습니다.
  • Drag Position : 요소를 드래그하여 이동할 수 있습니다.
  • Insert Image : 이미지의 삽입 할 수 있습니다. (이미지의 용량은 2MB 이내입니다.)
  • Insert HTML : 선택한 요소 기준으로 원하는 위치에 HTML 코드의 추가가 가능합니다.
  • Select Container : 선택한 요소의 하위 레벨부터 상위 레벨순으로 요소의 선택이 가능합니다.

 

하단 영역

원래 페이지의 CSS와 HTML에 따라 이미지의 위치가 고정되어 변경할 수 없는 경우가 있습니다. 하단 영역의 CSS 탭 또는 JavaScript 탭에서 직접 스타일 시트와 JavaScript를 작성하여 변경할 수 있습니다.

왼쪽 탭 영역

  • CSS 탭 : 현재 탭에서 수정한 CSS 코드를 개선하려는 페이지의 CSS 코드보다 우선순위로 불러와 보여지게 됩니다.
  • JavaScript 탭 : GUI 영역에서 변경한 내용이 JavaScript 형식으로 기록되어 있습니다. 또한, 직접 JavaScript 코드의 입력이 가능합니다.

버튼 영역

  • Show Images : 이미지의 삽입 · 변경을 할 수 있습니다. (이미지의 용량은 2MB 이내입니다.)
  • Undo/Redo : 실행 취소/되돌리기
  • Show Original : 편집기에서 편집하기 전인 「Original Page」를 보여줍니다.
  • Show Preview : 편집기에서 편집한 디자인을 미리보기 합니다. 실제 동작(예 : 버튼의 동작) 등을 확인 할 수 있습니다.
이 문서가 도움이 되었습니까?
0명 중 0명이 유용하다고 평가하였습니다.
또 다른 질문이 있으십니까? 문의 등록

0 댓글

이 문서에는 댓글을 달 수 없습니다.