SurveyJS #

이름 그대로 설문조사 라이브러리이다. 다양한 형식의 질문과 유효성 검사를 통해서 복잡한 설문을 단순하게 만들 수 있다. 크게 주요 기능은 Library와 Creator로 나뉜다. Creator는 사용자가 설문조사 질문 항목을 만들 수 있는 도구로서 유료기능이다. Library는 Creator로 만들어진 JSON 형태의 질문을 화면에 그려주는 도구다.

SurveyJS Creator #

SurveyJS Creator에서는 사용자가 프로그래밍 언어를 몰라도 설문 데이터를 만들 수 있다. 도구 상자에서 원하는 질문 형식을 마우스로 끌어와 질문 내용을 타자하면 되기 때문이다. 도구 상자에는 꽤 다양한 질문 형식을 제공한다. 텍스트, 체크박스, 라디오뿐만 아니라 별점, 전사서명 등 유용한 기능도 제공한다.

{
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "checkbox",
     "name": "question1",
     "choices": [
      "item1",
      "item2",
      "item3"
     ]
    }
   ]
  }
 ]
}

위 코드는 Creator를 이용하여 도구 상자에서 체크박스를 생성했을 때의 JSON 데이터이다. SurveyJS의 강점은 사용자는 질문 UI만 신경 쓰면 되기 때문에 JSON 데이터를 걱정할 필요가 없다는 것이다. 속성박스에서 질문 Title을 수정하면 JSON 데이터를 별도로 편집하지 않아도 자동으로 JSON 데이터를 만들어 준다.

SurveyJS Library #

SurveyJS Creator에서 만들어진 JSON 데이터를 SurveyJS Library를 통하여 화면에 그려줄 수 있다. 형식에 맞게만 기술한다면 굳이 Creator를 사용하지 않아도 된다.

//설문 테마(스타일) 적용
Survey.StyleManager.applyTheme("modern");

//설문 JSON 데이터
var json = ..."생략";

//설문 모델 생성
window.survey = new Survey.Model(json);

//설문 생성
$("#surveyElement").Survey({model: survey});

위 예제 코드처럼 JSON 데이터를 설문 모델로 생성하여 Survey 함수를 통해 구현할 수 있다. surveyElement에는 SurveyJS에서 만든 설문 view가 뜬다.

주요 장점 #

Expression #

SurveyJS에서는 Expression을 통하여 로직을 만들 수 있다. {}기호를 통해 질문 객체를 식별하고 equal 등의 연산자를 통해 비교연산이 가능하다. 이러한 표현 식을 통해 만든 조건으로 질문을 숨기거나 필수입력 처리할 수도 있다. 또한, validation 기능에서도 expression을 사용할 수 있으므로 복잡한 질문을 쉽게 만들어 사용할 수 있다.

다양한 위젯 #

SurveyJS에서는 부트스트랩 데이트피커 등 외부 플러그인을 위젯으로 사용할 수 있다. 많은 위젯이 현재 포함되어 있기도 하지만 무엇보다 사용자가 필요한 위젯을 직접 추가하여 사용할 수도 있다는 점이 큰 장점이다.

주요 단점 #

IE 속도 이슈 #

SurveyJS에서 설문항목들을 화면에 그리기 위하여 Knockout.js를 사용한다. 그런데 설문 JSON에 포함된 질문항목이 많을수록 Knockout.js에서 부하가 많이 생긴다. 크롬 등의 브라우저에서는 문제가 없으나 IE 11 환경에서는 매우 많이 느리다.

최적화 미흡 #

많은 기능을 제공하다 보니 일부 기능에서는 오류가 남아 있다. 소스 버전 업그레이드 주기가 빠른 만큼 발견된 이슈는 빠르게 처리되지만 생각지도 못한 부분에서 발생한 이슈로 원하는 화면을 그리지 못할 경우가 발생할 수 있다. 일주일 단위로 소스가 업데이트되어 버전 업그레이드할 때 기존 설문에 영향을 많이 미치므로 유의해야 한다.

참고 출처 #

• SurveyJS