XELF개발자모드를 활용한 보안자가점검테스트 제작 가이드

 

XELF에 개발자 모드가 업데이트 되었습니다.

2020년 04월 06일에 XELF 개발자 모드가 베타 오픈을 했습니다. 개발자 모드를 활용하면 콘텐츠에 스크립트 코드를 추가하여 기존 디자인 중심으로만 콘텐츠를 제작해야했던 한계를 벗어나 다양한 기능을 구현할 수 있게 되었습니다.

<개발자모드진입화면>

개발자 모드로 콘텐츠를 만들어볼까요?

이번 포스팅에서는 개발자 모드의 공개와 함께 [ 보안자가점검테스트] 콘텐츠의 소스를 함께 살펴보고 XELF 개발자 모드를 통해 콘텐츠에 스크립트 코드를 추가하는 법을 알려드리도록 하겠습니다. 다음 링크로 들어가면 XELF 개발자 모드를 사용하여 제작된 자가보안진단 콘텐츠를 확인하실 수 있습니다. 프로젝트 재사용을 눌러 다음 단계들을 진행해 보세요. ▶ https://xelf.io/s/6sVokp8q8

[ 보안자가점검테스트] 는 10개의 퀴즈를 통해 점수 합산을 통해 자신의 보안 수준을 평가하는 일종의 시험, 테스트 적인 성격을 가진 콘텐츠 입니다. 각 문항은 정답이 정해져 있으며 문항을 맞춘 갯수에 따라서 최종결과가 달라지게 됩니다.

 

구체적으로 단계별로 개발자모드를 통해 기능을 구현해보겠습니다.

▶ 메인 페이지


1단계 – 변수생성 :  정답을 카운팅 할 변수를 하나 생성해두고 초기화를 0으로 합니다.

setGlobalData는 XELF 에디터에서 조금 더 편하게 코드를 작성할 수 있도록 미리 제공해 주는 API입니다.

API(application programming interface)란
운영체제나 시스템, 애플리케이션, 라이브러리 등을 활용해 응용 프로그램을 작성할 수 있게 하는 다양한 인터페이스를 의미합니다. Window API, Java API, HTML5 API, Android API 등이 있습니다.

상세한 공식 가이드 문서를 보고 싶으시다면 아래의 링크를 클릭해 주세요 API 공식 문서 바로가기

<문제01>

▶ 문제01~ 문제10 페이지


1단계 :  문제01 페이지는 이미지 오브젝트인 배경, O버튼, X버튼, copy_로고 네개와 가리개라는 이름을가진 투명한 도형 오브젝트인  한개  총 다섯개의 간단한 오브젝트로 이루어진 페이지입니다.

Tip

정답지로 써야하는 X버튼은 이름을 ‘X버튼(정답)’ 처럼 알아보기 쉽게 명확한 이름을 지어두면 디자인모드나 개발자모드에서 편하게 다른오브젝트들과 구별해서 개발할수 있기때문에 추천하는 방법입니다.

 

2단계 : O 버튼과 X 버튼을 누르면 정답 유무를 떠나서 다음 문제로 넘어가야 하겠죠 그러기 위해 저희가 할 수 있는 선택지는 두 가지가 있습니다. 디자인 모드에서 다음 페이지로의 이동 인터랙션을 거는 방법과 개발자 모드에서 클릭 이벤트를 받을 시 XELF API의 movePage 메소드를 이용하는 방법인데요 여기선 디자인 모드에서 클릭 이벤트로 다음 페이지로 넘어가게 인터랙션을 미리 걸어 두는 게 편한 방법이므로 디자인 모드에서 미리 작업을 해둡니다.

Tip

디자인 모드에서 작업을 하고 처리하기 힘든 작업들을 개발자 모드에서 처리하는 걸 추천합니다.

코드작성 

1단계 : 현재 페이지의 이름과 정답 오브젝트의 이름, 메인 페이지에서 만들어준 정답 카운팅 변수를 차례대로 써줍니다.

정답으로 써야할 오브젝트명을 구분이 용이하게 지어두는게 바로 지금같은 상황에서 빛을 발합니다.

 

2단계 : 이번엔 getPageIdByPageName메소드를 이용해  현재 페이지 아이디를 nowPageId변수에 할당해 주도록 하겠습니다.

getPageList 메소드를 사용해 전체 페이지 정보를 모두 받아온 뒤 filter를 통해 전체 페이지 중 내가 원하는 이름의 페이지만 걸러내어 아이디 값만 반환을 하게 됩니다.

개발자모드에서  페이지아이디는 매우 빈번하게 쓰이는 데이터입니다.  현재는 공식 API의 지원메소드가 아니기 때문에 번거롭겠지만 위 코드 처럼 직접 간단히 작성해서 써야합니다.

 

3단계 : 정답 오브젝트의 엘리먼트를 XELF API가 기본 제공하는 getObjectElementsByName 메소드를 사용하여 가져와야 합니다 파라미터로  String 타입의 pageId와, ObjectName을 필요로 하고 있네요 앞선 1단계와 2단계에서 정의해두었기에 가져와서 순서대로 파라미터로 할당합니다. 반환값은 배열이기 때문에 첫 번째 인덱스를 뽑아서 사용하시면 되겠습니다.

 

4단계 : 정답엘리먼트에 클릭이벤트를 걸고 이벤트 발생시 전역변수에 1을 더하도록 하겠습니다.

 

문제의 정답인 X버튼을 클릭시 정답을 맞힌 갯수가 0에서 1로 증가 된다.

 

▶ 결과페이지


 

1단계: 각각의 등급 인터랙션은 디자인 모드에서 미리 만들어서 더미 버튼에 걸어주세요. 버튼을 눌러 동작 테스트를 마치셨으면 더미 버튼들을 전부 캔버스 영역 밖으로 빼서 사용자가 클릭을 할 수 없게 만들어주세요 더미 버튼에 걸린 인터랙션은 사용자의 클릭이 아닌 정답 개수에 따라 개발자 모드에서 코드로 플레이를 시켜주도록 하겠습니다

 

코드작성

1단계 : 기존 퀴즈 페이지와 같은 방식으로 현재 페이지 아이디와 정답 개수를 가져옵니다.

 

2단계 :  페이지 아이디를 파라미터로 넘기면 페이지의 인터랙션 리스트를 반환해주는getPageInteractionList 메소드를 사용해 현재 페이지에 있는 인터랙션 리스트를 얻어옵니다.

 

3단계: correctCount의 범위에 따라서 분기 처리 후 1부터 5등급까지의 각각 다른 인터랙션을 사용자에게 보여줘야 합니다. 등급 조건은 아래와 같습니다.

등급조건

1등급 : 9 ~ 10개 정답
2등급 : 7 ~ 8개 정답
3등급 : 5 ~ 6개 정답
4등급 : 3 ~ 4개 정답
5등급 : 2개 이하 정답

 

4단계 : 디자인 모드에서 각 더미 버튼에 걸어두었던 인터랙션만 추려서 gradeInteraction 배열에 담아주어야 합니다. 더미버튼의 이름으로 인터랙션을 필터링해서 가져올 수 있도록 아래의 메소드를 미리 작성해두었으니 사용해 주세요.

 

5단계: getInteractionsByObjectName메소드를 통해 최종으로 확정된 등급의 인터랙션을 실행시켜주면 됩니다.

총 10문제로 구성된 정보 보안 퀴즈 콘텐츠를 제작해봤는데요, 이렇게 다양한 오브젝트를 드래그 앤 드롭을 통해 캔버스에 배치하고 몇 가지 액션 기능을 부여하고 스크립트로 데이터의 컨트롤까지 할 수 있다는 점, 놀랍지 않으신가요?

개발자 모드 추가를 통해 디자인 요소 뿐만 아니라 데이터의 저장과 이를 통한 다른 결과 출력 등이 구현된 사례를 보셨습니다. 앞선 예제를 잘 따라왔다면 심리테스트나 간단한 성향 분석, 문제 풀이 등을 제작할 수 있을 것입니다. 샘플로 사용된 프로젝트는 재사용이 가능하며 재사용시 소스코드를 직접 보시고 수정하실 수도 있습니다. XELF로 당신만의 아이디어를 지금 바로 실현시켜보세요.

완성된 콘텐츠는 여기서 감상해보실수 있습니다.