jQuery(제이쿼리) 강좌와 예제모음

김치 싸대기 짤방 심층 분석 (jQuery UI 슬라이더 사용)

전체 기초강좌 만들어보기 초급예제 중급예제 그렇군 대기중 jQuryUI 예제
등록일 :
오늘은 슬라이더로 무엇을 해볼까 하다가..
문득 "김치 싸대기" 동영상이 생각났습니다.
아마도 모르시는 분은 거의 없을거라 생각합니다.

그래서 이 영상을 심층 분석해 보기로 했습니다.
뜬금 없네요 ...

준비물 : 고화질 김치 싸대기 영상 찾기


유튜브에 많은 영상중 화질이 괜찮은 것을 찾았습니다.
그리고 파이어폭스 플러그인을 이용해 영상을 다운받았습니다.

영상 편집하기

김치 싸대기 영상에서 필요한 부분만 편집

김치를 꺼내는 부분부터 맞고난 후 일정 부분 까지 잘라서 편집 합니다.

이건 자바스크립트 예제인데 .. 어째 배보다 배꼽이 더 크네요.. ^^;;

※ 무료 동영상 편집 프로그램 Shotcut 사용.

계획에 차질이 : 원래 하려고 했던것


video 태그에 영상을 붙이고 그걸 스크립트로 컨트롤해 보려고 했었습니다.

1초 단위로 영상 재생 위치를 컨트롤 가능한것에 착안하여 영상을 0.1 배속으로 느리게 편집하고 슬라이더를 이용해서 1초 단위로 앞뒤로 휙휙 돌려보는 것이었는데 생각보다 랙이 걸려서 느리게 작동합니다. 즉각 반응이 안되는 상황.

그래서 전에 사용해 본 적이 있는 다른 방법을 쓰기로 합니다. 편집된 영상의 모든 프레임을 jpg 파일로 저장하고, 그 jpg 이미지를 세로로 전부 이어주었습니다. 여러개의 그림 파일을 하나로 만들어 주는 프로그램 사용하였습니다.

계획에 차질이2 : 이미지가 너무 많았다 !?


총 161장의 이미지를 세로로 이어 붙였더니 크기가 어마어마 합니다. 사용한 프로그램에서 이미지 내보니기 저장을 하니 에러가 납니다. 결국 최소한의 내용만 보이도록 조절하여 이미지 수를 줄였더니 성공하였습니다.

생각했던게 의외로 안되는 경우가 많죠. ^^;

무슨일을 하다 이런 상황에 마주치는 건 그래도 열심히 하고 있다는 뜻입니다.

완성된 이미지 형태 (리사이즈한 모습)


이미지 세로 크기가 어마어마해서 리사이즈해 보았습니다.
원본 사이즈는 800 x 16650 입니다.

각각 모든 프레임의 이미지가 위 처럼 하나로 붙은 이미지가 완성되었습니다.

그런데 위 그림이 뭔가와 비슷하지 않나요? 영화 필름과 비슷합니다. 그렇습니다. 영화 필름 개념으로 저걸 움직여서 영상처럼 보이게 만들겁니다. 브라우저의 스크롤을 응용하면 굉장히 빠른 처리가 가능해서 랙이 없이 영상처럼 보이게 앞 뒤로 재생해 볼 수 있습니다.

박스를 만듭니다.

적당한 모양의 박스를 만듭니다.

- 박스의 너비는 이미지의 너비와 같게 800px로 설정
- 높이는 이미지의 한개 높이와 같게 450px로 설정합니다.

※ 사용한 이미지는 800 x 450 이미지를 세로로 이어 붙인것 입니다.

CSS

#kimchi_attack {
	width:800px;
	height:450px;
	border:7px solid #000;
	box-shadow:0 0 10px #aaa;
	border-radius:5px;
}

HTML

<div id="kimchi_attack"></div>

박스에 이미지 넣기


예제를 보여 드리기 위해 박스에 넣은 이미지는 리사이즈 된걸로 했습니다.
실제로는 박스안에 들어있는 이미지와 박스의 너비는 같습니다.

이미지는 아래처럼 박스에 배치가 됩니다.
튀어 나오는 부분을 정리해야겠죠?


CSS

#kimchi_attack {
	width:800px;
	height:450px;
	border:7px solid #000;
	box-shadow:0 0 10px #aaa;
	border-radius:5px;
}

HTML

<div id="kimchi_attack">
	<img src="/ufiles/story_data/9041f356d7efca2c1e651f8ed228c99eae2c708b.jpg" />
</div>

박스에 이미지 넣기


벗어나는 영역을 안보이게 하였고 원래 사용하려고 했던 이미지로 바꾸었습니다.
박스안 영역은 자바스크립트로 스크롤이 가능합니다. 이걸 이용할 겁니다.

아래 박스 아래에 안보이게 길게 이어붙인 이미지가 있는 상태입니다.
이걸 스크롤로 이동시켜서 보이게 할겁니다.

특정 수치만큼 딱딱 끊어서 움직여 주면 영상처럼 자연스럽게 보입니다.
영화 필름을 상상해 보면 되겠네요. 그런데 요즘은 필름 안쓴다고 하죠 ...


CSS

#kimchi_attack {
	width:800px;
	height:450px;
	border:7px solid #000;
	box-shadow:0 0 10px #aaa;
	border-radius:5px;
	overflow:hidden; /* 박스를 벗어나는 영역 숨기기 */
}

HTML

<div id="kimchi_attack">
	<!-- 이미지는 원래 사용하려고 한 이미지로 변경 (예제용 이미지 제거) -->
	<img src="https://t1.daumcdn.net/cfile/tistory/9907FE4C5CA451E006" />
</div>

완성! 김치 싸대기 분석기!


아주 간단한 소스로 완성되었습니다.
슬라이더를 이런데 사용해도 나쁘지는 않군요. ^^;

아래 슬라이더를 움직여 보세요.

<!-- jQuery UI 사용을 위한 CSS 로딩 -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/black-tie/jquery-ui.css">

CSS

/* 슬라이더 용 */
#slider {
	width:800px;
} 

#kimchi_attack {
	width:800px;
	height:450px;
	border:7px solid #000;
	box-shadow:0 0 10px #aaa;
	border-radius:5px;
	overflow:hidden;
	margin-top:20px; /* 박스 위쪽에 여백 두기 */
}

HTML

<div id="slider"></div><!-- 슬라이더 -->

<div id="kimchi_attack">
	<img src="https://t1.daumcdn.net/cfile/tistory/9907FE4C5CA451E006" />
</div>

자바스크립트

$('#slider').slider({

	// 최소값 (지정하지 않으면 0)
	min : 0,

	// 최대값 (지정하지 않으면 100)
	// 총 이미지는 37개 이지만 약간의 문제로 36 까지 설정
	max : 36,

	// 슬라이더 현재값 (지정하지 않으면 0)
	value : 0,

	// 증가하는 단계값 (지정하지 않으면 1)
	step : 1,

	// 슬라이더를 움직일때 실행할 코드
	slide : function( event, ui ){

		// 박스안의 이미지를 스크롤해서 움직이는것 처럼 보이게 만들기
		// 스크롤바 현재 값에 이미지 높이인 450 을 곱해서 스크롤
		$('#kimchi_attack').scrollTop(ui.value * 450);

	}

});

소스는 아주 간단합니다.
오히려 사용할 이미지를 만드는게 더 어렵네요 ^^;

실행 가능한 소스

등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

이해가 잘 안되시는 분을 위한 서비스


박스에 세로 스크롤바가 보이도록 했습니다.
그 스크롤바를 한번 움직여 보시면 이해가 되시리라 생각됩니다.

박스에 달린 세로 스크롤바를 움직여 보세요.


CSS

/* 슬라이더 용 */
#slider {
	width:800px;
} 

#kimchi_attack {
	width:800px;
	height:450px;
	border:7px solid #000;
	box-shadow:0 0 10px #aaa;
	border-radius:5px;
	overflow-y:scroll; /* 세로 스크롤바 보임 */
	overflow-x:hidden; /* 가로 스크롤바 감춤 */
	margin-top:20px;
}

HTML

<div id="slider"></div>
<div id="kimchi_attack">
	<img src="https://t1.daumcdn.net/cfile/tistory/9907FE4C5CA451E006" />
</div>

자바스크립트

$('#slider').slider({

	// 최소값 (지정하지 않으면 0)
	min : 0,

	// 최대값 (지정하지 않으면 100)
	// 총 이미지는 37개 이지만 약간의 문제로 36 까지 설정
	max : 36,

	// 슬라이더 현재값 (지정하지 않으면 0)
	value : 0,

	// 증가하는 단계값 (지정하지 않으면 1)
	step : 1,

	// 슬라이더를 움직일때 실행할 코드
	slide : function( event, ui ){

		// 박스안의 이미지를 스크롤해서 움직이는것 처럼 보이게 만들기
		// 스크롤바 현재 값에 이미지 높이인 450 을 곱해서 스크롤
		$('#kimchi_attack').scrollTop(ui.value * 450);

	}

});
등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :

마무리 : 김치 싸대기 분석 결과


*김치를 맞기전에 이미 눈을 감고 있다. 무서울것 같다.
 - 이거 NG 나면 후덜덜 ...
 - 귀에 고추가루가 들어가서 고생하셨다고 한다. ㄷㄷ

*프린터가 김치를 방어하기위해 종이를 내뿜은건 아니다.
 - 김치 조각이 조금 나와있던 종이에 절묘하게 맞고 떨어졌다.
 - 프린터가 자기방어를 하긴 했지만 우연의 일치인것.
 - 절묘하게 거기 맞은것도 신기함.
등록된 댓글이 없습니다.

댓글 쓰기

이름 : 패스워드 :