본문 바로가기

프로그래밍 이야기

[jQuery] 강력한 Select Box 디자인 플러그인 Select Or DIE

회사에서 조그마한 모바일 웹 개발 개선작업 프로젝트를 진행하고 있다. jQuery Mobile과 전자정부 프레임워크로 구성되어

있는데 사실 굉장히 작은 규모의 프로젝트라 전자정부 프레임워크 내부 API를 이것저것 사용할 일도 없고 사정상 지금 회사

에서 사용하는 노트북이 거의 10년전에 집에서 뒹굴던 노트북(싱글코어.. 램 2Gb)이라 이클립스가 무거우면 견디기가 어렵고

전자정부 프레임워크 개발환경은 왤케 무거운지.. validator 한번 돌아가면 노트북 팬이 터질듯이 돌아가고 손도 댈수 없을

정도여서 구조 리팩토링을 결심했다. 기존소스에서 전자정부 API를 사용하는 부분을 제거하고 Spring설정도 다시 잡고

하다보니 이틀이 꼬박.. 전자정부 프레임워크.. 참 좋긴한데 이번에는 제대로 신경질 나게 해주는 개발툴이 되버렸다.

물론 오래된 노트북 탓이 크긴하지만 ㅜ

기존소스에서 사용하던 jQuery Mobile이 훌륭한 디자인 테마와 템플릿을 제공하는건 높히 평가하지만 개인적으로 CSS가 너무

많아서 복잡한 편이고 제일 중요한건 이 프로젝트가 완전히 상업용으로 진행되는 프로젝트가 아니라서 파일럿 프로젝트보단

조금 부담있는 프로젝트이기 때문에 구조변경시에 디자인 문제가 맘에 걸렸다. 그래서 jQuery Mobile을 걷어내기로 하고

기존 HTML도 재사용 가능부분을 빼고 전부 새로 작성하기로 했다. 또 한가지 Value Object로 파라미터가 왔다갔다 하는걸

싫어해서 이 부분도 개선하려고 했지만 이것저것 다하면 눈에 보이는 결과물이 안나올 것 같아서 백엔드는 그대로 가기로 했다.

 

jQuery Mobile의 테마를 보면 위 사진과 같이 라운드 형태의 디자인이 많은데 요새 iOS도 그렇고 웹디자인 트렌드가 전반적

으로 플랫디자인으로 흘러가는 것 같아서 시간도 별로 없고 색하고 폰트만 잘 맞추면 플랫디자인 그까이꺼.. 생각하고 덤볐는데

역시..디자인하고는 거리가 먼 듯 하다. 플랫디자인 정말 어렵다 ㅜ

 

 

이렇게 플랫디자인을 한답시고 작업하다 보니 망할 콤보박스를 생각을 못했다. 셀렉트 박스를 그냥 넣으면 위와 같이 브라우저

or OS테마에 따라 제각각 다르게 보이기도 하고 우선 모양새가 영 좋지 않다. input 태그의 경우 보통 스타일링 하면

span{vertical-align:middle;padding:4px;border:2px solid #ccc;}

span input{border:0;}

과 비슷하게 input의 border를 지우고 감싸는 태그에 border를 주는것으로 스타일을 주면 되지만 불행하게도 우리가 흔히 쓰는

콤보박스 (Radio, Check, Select) 는 일반적인 방법으로는 스타일링 할수가 없다. 셀렉트 박스의 경우도 input과 마찬가지로

border를 0을 주면 전체적인 틀까지는 스타일링 할수 있지만 우측 Arrow는 어쩔수가 없다. 디자인만 보자면 셀렉트 박스를

UL, LI를 사용해서 새로 만들던지 기존 셀렉트 박스를 레이어처럼 감싸서 스타일링 하는 방법밖에 없다. 전자를 택하면

기존 로직도 다 변경해야 되니 귀찮기도 하고 시간도 오래 걸리고 두번째 방법도 만들자니 언제 만들고 있냐 싶어서

플러그인을 찾아봤다. 커스터마이징이 쉽고 일단 돌려봐서 기존 마크업 변경없이 최대한 빨리 예를 볼 수 있는걸로 찾아봤는데

jqTransform이라는걸 처음 찾았다.

 

위와 같이 예제에서는 꽤 괜찮아 보였는데 막상 적용해 보니 고치려면 손댈부분이 꽤 여러군데 있어서 다른 플러그인을 다시

찾아봤다. 대신 다른 유형의 콤보박스들도 한번에 디자인 적용이 되는걸 보니 괜찮아 보였다. 여튼.. 셀렉트 박스가 주목적이니

다시 찾아봤는데 그다지 맘에 드는 플러그인이 없었다. 그러던 중 이름도 거창한 Select Or Die라는 플러그인을 찾게됐다.

 

사용법은 간단하다 데모 페이지를 실행해보면 뭔지 알수 있다. 예를 들어 셀렉트 태그 전체를 스타일 적용한다면

$("select").selectOrDie();

라고 해주면 기본으로 아래와 같이 적용된다. 

스타일의 경우 selectordie.css를 고쳐서 사용하면 된다. 이 플러그인의 장점은 군더더기가 없어 보인다는 것이다. 보통

다른 플러그인의 경우 디자인을 덕지덕지 입혀놔서 처음 적용하고 나면 수정할 부분이 상당한데 SOD의 경우 CSS를 간단히

몇군데 수정하는 것으로 많은 부분이 해소 된다. 데모 페이지를 보면 다양한 옵션이 있어서 하나씩 적용해 보면 된다.

한가지 더 좋은점은 이벤트 발생후의 callback처리 등이 가능하다는 것이다. 다른 플러그인은 자세히 사용안해봐서 어떨지

모르겠지만 우선 대강 봤을때 이렇게 여러가지 옵션이 있는 플러그인은 없었다. 셀렉트 박스를 쓰다보면 Option태그를 동적

으로 셋팅해줄 경우가 생기는데 이 경우에는 option 태그를 append 한뒤 $("select").selectOrDie("update")와 같이

써주면 적용된다. 한가지 단점은 select 박스에 option태그가 있고 텍스트가 뭐라도 있어야 저 옵션이 적용됐었다. 글을

쓰다 보니 placeHolder옵션이 있어 어떻게 해볼수 있을것 같기도 하다. 이 플러그인은 위에서 썼듯 기존 마크업과 로직을

건드리지 않고 동적으로 select 박스의 겉을 감싸는 스타일링을 적용해주는 플러그인이다. 개인적으로 jQuery 플러그인

또한 많이 사용하는것을 좋아하진 않는 편인데 이유는 한번 피봐서 ;; 지금은 어느정도 버전이 변경되도 잘 돌아가는편인데

예전 jQuery 1.x 하위 버전때는 버전업된 jQuery에 맞춰지지 못해 오류가 나거나 오작동하는 경우가 많았다. 그래서

가능하면 플러그인에 의존하지 않으려고 했는데 이 플러그인의 경우 간만에 괜찮은걸 건진 것 같다. 아직 계속해서

개선이 이뤄지고 있는부분중에 Multiple셀렉트가 있어 보인다.

이 플러그인은 jQuery 1.8, 2.1에서 테스트 완료됐다고 한다. IE8, jQuery 2.1에서 지원하지 않는다고 하는데 어짜피

jQuery 2.x 대부터 IE8지원이 중단됐으니 상관없어 보인다. GitHub에서 받을수도 있지만 귀찮은 분들은 아래 첨부파일을

받아서 사용해 보시길..

-  다운로드

Select-or-Die-master.zip