손쉬운 유효성 검사를 위한 Parsley.js
이번에 소개할 jQuery 플러그인은 유효성 검사를 손쉽게 할 수 있도록 해 주는 플러그인인 Parsley.js입니다.
Parsley.js에 대한 간략한 정보는 아래와 같습니다.
- 제작자 / 제작사 : Guillaume Potier
- 홈페이지 : http://parsleyjs.org/
- Repository : https://github.com/guillaumepotier/Parsley.js/
- 요구하는 jQuery 버전 : 1.7 이상
- 브라우저 호환성 : IE 7/8 이상 (jQuery 1.x 사용 시), IE 9 이상 (jQuery 2.x 사용 시) / Firefox 14 이상 / Chrome / Safari
- 한글화 여부 : 2.0.0 : X / 1.2.3 : O (참고 : 구 버전의 언어 파일은 2.0.0과 호환되지 않으므로 언어 파일 변환 작업 필요.)
- 타 플러그인 의존성 : 없음
- 가격 : 무료
- 라이센스 : MIT 라이센스 (개인 및 상업적 용도 모두 해당)
웹 페이지의 회원 가입 페이지 등을 만들 때 유효성 검사를 위해서는 JS 및 서버측 유효성 검사(Server-side Validation)를 통해 두 번에 걸쳐 유효성을 확인해 주도록 짜야 합니다. 문제는 이게 항목이 적은 경우에는 괜찮은데, 항목이 많아지고, 유효성 검사를 위한 정규식이 복잡해질수록 굉장히 귀찮은 작업이 된다는 점입니다.
물론 JS만 쓰거나 서버측 유효성 검사만을 사용하는 방법으로 이중 작업을 하지 않을 수 있겠지만, 전자는 JS를 꺼버리거나 변조 (JS는 클라이언트에서 스크립트가 실행되므로 로컬에서 변조하는 게 어렵지 않습니다.)해서 유효성 검사를 피하는 기법이 사용될 경우 보안이 취약해지고, 후자는 서버의 스크립트 페이지를 거쳤다가 다시 나와야 하므로 사용자는 귀찮아지고, 서버는 서버대로 검사를 계속 해야 하므로 서버에 약간의 부담을 주는 측면이 있기 때문에 어쩔 수 없이 이중 작업을 하게 될 수밖에 없습니다.
예전에는 저도 JS를 일일이 짰었는데, 아무래도 제 JS 실력이 바닥을 기다 보니 효율적인 유효성 검사 JS를 짜는 것이 어렵더군요. 그래서 뭔가 쓸만한 것이 있나 찾아보다가 찾아낸 것이 바로 오늘 소개드릴 플러그인인 파슬리 (Parsley.js 입니다.)
Parsley.js는 브라우저의 DOM 기반으로 작동하기 때문에 굉장히 사용하기가 쉽습니다. 또한 기본적인 검증 요소들 (숫자, 전화번호, 입력 값 일치 여부 등)을 제공하며, 고급 사용자를 위한 기능들 (DOM 기반이 아닌 검사용 스크립트 직접 작성, 정규식 표현을 통한 검사, 오류 메시지 CSS 커스터마이징)도 빠지지 않고 들어 있습니다. 일단은 간단한 DOM 기반의 예제 페이지를 통해 어떻게 사용되는 지 보여드리도록 하겠습니다.
위의 예제를 가지고 간단히 설명을 드리도록 하겠습니다. 일단은 간단하게 텍스트 상자 3개로 구성되어 있으며 각각 숫자, 메일 주소, 숫자 범위에 대한 유효성을 검사하도록 작성되어 있습니다.
일단은 form 태그에 data-parsley-validate를 넣어 주셔야 parsley.js가 어떤 폼을 검사해야 할 지 정상적으로 인식하게 됩니다.
그리고 각각의 input 태그에 조건을 걸어 주었습니다. 공통적으로 적용되어 있는 것은 data-parsley-required와 data-parsley-trigger인데, data-parsley-required를 true로 설정하면 반드시 입력해야 할 필수 항목으로 인식하게 됩니다 (또는 HTML5 표준에 맞춰 태그의 맨 끝에 required를 추가해도 됩니다.). 그리고 data-parsley-trigger은 유효성 검사 이벤트가 어떤 동작일 때 발생할 지를 설정하는 속성입니다. 여기서는 change로 되어 있는데 focusin, focusout, blur 등의 이벤트를 적용할 수도 있으며, 2개 이상의 이벤트를 지정하는 것도 가능합니다. (공백으로 구분해서 입력)
역시 가장 중요한 것은 유효성 검사 형식을 알려주는 것입니다. 첫번째 숫자 입력 텍스트 상자같은 경우에는 data-parsley-type="digits"가 설정되어 있는데, 숫자 이외의 알파벳이나 기호가 입력되면 텍스트 상자 아래에 오류 메시지를 출력하게 됩니다.
두번째는 메일 주소 입력 텍스트 상자인데, data-parsley-type="email"이 지정되어 있습니다. 올바른 메일 주소 형식이 아닌 경우에는 오류 메시지를 출력하며, 올바른 메일 주소일 경우에는 아무 메시지도 뜨지 않습니다.
세번째는 범위 입력 텍스트 상자이며, data-parsley-range="[100, 500]"이 지정되어 있습니다. 이 텍스트 상자에는 100에서 500 사이의 값이 들어가야 하며, 그 이외의 값이 들어가는 경우에는 오류 메시지를 출력하게 되어 있습니다.
오류 메시지는 자동으로 해당 input 태그의 아래쪽에 출력됩니다. 출력에는 ul>li 태그가 사용되며, 사용자가 별도의 CSS 스타일을 지정하여 간편하게 커스터마이징할 수 있습니다.
이렇게 해서 항상 그런 것 같지만 대충 Parsley.js에 대해서 살펴보았습니다. 자세한 세부 옵션이나 API는 아래 링크를 참고하시기 바랍니다.
* 업데이트 : Parsley.js의 최신 버전 (2.0.0) 변경 사항 반영 (2014/03/28)
360도 VR을 손쉽게 만드는 Reel
처음으로 소개할 jQuery 플러그인은 360도 VR (Virtual Reality)을 쉽게 만들 수 있는 Reel입니다.
Reel에 대한 간략한 정보는 아래와 같습니다.
- 제작자 / 제작사 : Petr Vostřel
- 홈페이지 : http://reel360.org/reel
- Repository : https://github.com/pisi/Reel
- 요구하는 jQuery 버전 : 1.5 이상
- 브라우저 호환성 : IE 6 이상 / Chrome / Opera 9 이상 / Firefox 3 이상 / Safari 3 이상
- 한글화 여부 : 필요 없음
- 타 플러그인 의존성 : 기본적으로는 없으나, 마우스 휠을 이용한 회전은 별도 플러그인 필요 (* 해당 플러그인 번들판 제공하고 있음)
- 가격 : 무료
- 라이센스 : MIT 라이센스 (개인 및 상업적 용도 모두 해당)
다음 로드뷰나 네이버의 거리뷰 같은 경우에는 많은 데이터를 처리해야 하기 때문에 플래시로 구현되어 있습니다만 (참고로 Google 스트리트 뷰는 플래시로 되어 있지 않습니다.), 간단한 상품이나 풍경 파노라마와 같은 것을 제작하는 데에는 이 플러그인이 유용합니다. 또한 간단한 파노라마 정도를 만드는 데 특별히 많은 코딩이 필요 없는 것이 장점입니다.
VR을 만들기 위해서는 파노라마 또는 스프라이트로 구성된 이미지가 필요합니다. 이거는 각자 알아서 (...) 준비하셔야 하는데 저는 딱히 준비한 것이 없으니 일단 Reel 공식 홈페이지에 올라와 있는 예제 이미지를 다운로드 받았습니다. 예제 이미지와 공식 홈페이지에 있는 예제 코드를 가지고 간단하게 설명을 하도록 하겠습니다.
다음은 Reel을 이용한 간단한 파노라마 예제 코드입니다.
- 코드 설명 -
1. 위 코드에서 img 태그의 src (파일 경로)는 파노라마 회전하기 전 보여줄 기본 이미지입니다.
여기서는 outlook.jpg가 지정되어 있습니다.
2. img 태그의 class로는 reel을 지정해 주셔야 플러그인에서 인식하여 동작합니다.
3. data-image 속성에는 파노라마 사진 파일을 지정합니다. 여기서는 outlook-reel.jpg가 지정되어 있습니다.
4. data-stitched 속성에는 파노라마 사진 전체 너비를 입력합니다. 여기서는 1652 (픽셀)이 지정되어 있습니다.
5. data-orientable 속성은 스마트폰 등의 기기에 내장된 자이로스코프를 이용해 파노라마를 회전할 수 있게 할 지의
여부를 결정하는 속성입니다. 여기서는 true로 지정되어 있습니다.
이렇게 해서 간단하게 360도 회전이 가능한 파노라마를 만들어 보았습니다.
기타 여기서 소개하지 않은 자세한 옵션이나 예제는 다음 링크를 참고하시기 바랍니다.