※ 「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 : 편집기에서 편집한 디자인을 미리보기 합니다. 실제 동작(예 : 버튼의 동작) 등을 확인 할 수 있습니다.