1. CSS, jQuery 이런거 잘 모른다. 

http://www.xpressengine.com/index.php?mid=download&search_keyword=%EB%88%88&package_srl=20673640 

이 애드온을 다운받아 설치 한 뒤 적용하세요.

다만 일부 사용자가 불편을 호소 할 수 있습니다.

2. CSS를 이용해 눈 내리기 (추천)

CSS3을 이용해 눈을 내립니다. 쉽기도 하지만 일단 꽤 빠릅니다.

원문 : http://designshack.net/?p=27674

데모 (원작자 제공) : http://designshack.net/tutorialexamples/letitsnow/index.html

데모 (XE 적용 모습) : http://www.haganai.me (이번 겨울간에만 적용 할 예정입니다)

미리 다운받아야 할 것

• http://imm.io/1mQzs snow.png
  
• http://imm.io/1mQzK  snow2.png (snow22.png로 잘못 올렸는데 snow2.png 로 저장 해 주세요)
  
• http://imm.io/1mQzZ snow3.png
  

1. 다운받은 세개의 눈 이미지를 업로드합니다. (snow.png, snow2.png, snow3.png) 저는 레이아웃 폴더의 img 폴더에 업로드 했습니다.
2. 레이아웃의 CSS 파일을 엽니다.
3. CSS 파일을 다음과 같이 수정합니다.
   

   /* (선택)배경 이미지가 body에 적용 되어있을 경우 html 요소로 이동 */
   html{overflow-y:scroll;overflow-x:hidden;background-image:background.png);background-repeat:repeat; background-attachment:fixed;}
   
   /*  body 요소에 아래 내용 삽입 */
   body {
   	background-color: #6b92b9; /*(선택) 배경색이 필요 할 경우, 배경 이미지가 있으면 이 코드 제거 */
   	background-image: url('img/snow1.png'), url('img/snow2.png'), url('img/snow3.png');
   	-webkit-animation: snow 10s linear infinite;
   	-moz-animation: snow 10s linear infinite;
   	-ms-animation: snow 10s linear infinite;
   	animation: snow 10s linear infinite;}
   }
   
   /* 눈 내리는 효과 설정 CSS 파일 맨 아래에 추가*/
   @keyframes snow {
   0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
   }
    
   @-moz-keyframes snow {
   0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
   100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
   }
    
   @-webkit-keyframes snow {
   0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    50% {}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
   }
    
   @-ms-keyframes snow {
   0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
    100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
   }

html과 body 요소에 이미 다른 내용이 있을 경우 기존에 있던 내용을 지우지 마시고, 위 내용을 추가만 해 주시면 됩니다.

이미지만 바꿔 준다면 봄에 벚꽃이 내린다던가, 가을에 낙엽이 내린다던가, 여름에 돌고래가 내린다던가 하는 것도 가능합니다.

3. jquery.snow plugin 이용하기

예쁘기도 더 예쁘고 그렇게 무거운 편도 아니긴 한데, 개인적으로 테스트 했을 땐 어떤 서버 환경에서는 동작을 안 하고 어떤 환경에서는 동작 하는 문제가 있었습니다. -_-; 

원문 : http://workshop.rs/2012/01/jquery-snow-falling-plugin/

데모 : http://workshop.rs/projects/jqsnow/

1. https://github.com/kopipejst/jqSnow/downloads 에서 코드를 다운로드 받거나 다음 코드를 복사, jquery.snow.js 로 저장합니다

/**
 * jquery.snow - jQuery Snow Effect Plugin
 *
 * Available under MIT licence
 *
 * @version 1 (21. Jan 2012)
 * @author Ivan Lazarevic
 * @requires jQuery
 * @see http://workshop.rs
 *
 * @params minSize - min size of snowflake, 10 by default
 * @params maxSize - max size of snowflake, 20 by default
 * @params newOn - frequency in ms of appearing of new snowflake, 500 by default
 * @example $.fn.snow({ maxSize: 200, newOn: 1000 });
 */
(function($){

	$.fn.snow = function(options){

			var $flake 			= $('').css({'position': 'absolute', 'top': '-50px'}).html('❄'),
				documentHeight 	= $(document).height(),
				documentWidth	= $(document).width(),
				defaults		= {
									minSize		: 10,
									maxSize		: 20,
									newOn		: 500,
									flakeColor	: "#FFFFFF"
								},
				options			= $.extend({}, defaults, options);


			var interval		= setInterval( function(){
				var startPositionLeft 	= Math.random() * documentWidth - 100,
				 	startOpacity		= 0.5 + Math.random(),
					sizeFlake			= options.minSize + Math.random() * options.maxSize,
					endPositionTop		= documentHeight - 40,
					endPositionLeft		= startPositionLeft - 100 + Math.random() * 200,
					durationFall		= documentHeight * 10 + Math.random() * 5000;
				$flake
					.clone()
					.appendTo('body')
					.css(
						{
							left: startPositionLeft,
							opacity: startOpacity,
							'font-size': sizeFlake,
							color: options.flakeColor
						}
					)
					.animate(
						{
							top: endPositionTop,
							left: endPositionLeft,
							opacity: 0.2
						},
						durationFall,
						'linear',
						function() {
							$(this).remove()
						}
					);
			}, options.newOn);

	};

})(jQuery);