setTimeout 필요할 때 시작할 수 있다!!!

setTimeout 필요할 때 시작할 수 있다!!!

 

어제는 탐색기를 뒤지다가 아무짝에도 써먹지도 못할 별 쓸데없는 웹 문서를 하나 발견했어요.

그 문서는 페이지 내 문자 검색 기능이 작동하게끔 꾸몄던 문서인데 그것도 옛날 방식에서처럼 아무거나 검색할 수 있는 것도 아니고 사전에 설정한 환경 내에서나 검색이 가능한 정도였지요.

아무리 노력해도 더는 어떻게 해볼 수가 없어서 그대로 내버렸던 거가 그거였는데 그냥 지우려다가 잠깐 숨을 머금고 딴생각을 해봤답니다.

 

- 여기에 알람 시계를 넣어볼까??? -

 

그렇게 시작하여 알람 시계를 넣기로 했는데 이게 잘 안 풀립니다.

그 옛날 플래시(Flash)가 가능했을 땐 그게 너무나도 쉬운 거였었는데 아무것도 아닌 거 같았지만, 그렇게 만만하지 않더라고요.

 

이런 원리예요.

자바스크립트로 짜는 건데요.

. 가장 먼저는 현재 시각을 뽑고요,

. 그다음으로 알람 시각을 넣을 시·분·초로 글 상자 세 개를 만드는 겁니다.

. 그런 다음 글 상자에 넣은 세 개의 시각과 현재 시각이 일치하면 그 순간에 알람이 켜지는 거예요.

. 거기 알람에 쓸 소리 재료로는 컴퓨터에 저장된 노래 중에서 '부산 갈매기'를 쓰기로 했었답니다.

 

이렇게 기본 틀을 구상하고서 작업에 들어갔지요.

 

그리하여 현재 시각을 알리는 글 상자에서부터 알람 시각을 정하는 각 글 상자는 물론이거니와 그 글 상자에 넣을 '알람 기본 시각'에서 그 각각을 더하거나 빼는 버튼들까지 잘 만들어졌습니다.

그렇게 만든 웹 문서가 동작도 제법 하는 거 같았습니다.

 

그랬는데 그 상황이 너무나도 단조롭지 뭐예요.

알람이 울리는 동안 GIF 이미지가 꿀렁대기를 바랐습니다.

 

구글링으로 그럴만한 이미지를 찾아보는데 그 사용권이 자유로운 이미지에서 그럴만한 물건이 안 보이네요.

- 그럴 바엔 차라리 직접 만들자!!! -

 

무료 그래픽 프로그램인 '페인트샵 6.02'를 깔면 자동으로 함께 깔리는 동영상 제작 프로그램(Animation Shop 2)이 있잖아요?

그걸로 작은 아주 작게 검정 바탕의 프레임(100 x 15) 하나를 만들고요.

그걸 복사하여 붙여 넣기로 열 개를 채웠어요.

 

그런 다음 그 각자에 두 가지 색상으로 선이나 선을 그어서 이미지를 생성한 뒤 재생해 보니까 그럴싸한 동영상이 되었답니다.

그걸 GIF로 저장(HmClock.gif)한 뒤 이걸 알람이 켜졌을 때 나와서 촐랑대게끔 하고 싶었어요.

마침내 알람 설정 시각과 현재 시각이 일치했을 때 알람음과 이미지가 동시에 각기 다른 아이프레임에서 재생하는 거까지도 그럴싸하게 성공했는데 문제는 알람음의 재생이 멈췄을 때도 이 이미지는 계속하여 촐랑댄다는 거였습니다.

 

- 저놈을 어떻게 하면 멈출 수가 있을까??? -

 

구글링으로 그 문제를 찾고 또 찾았는데 'setTimeout' 이나 'setInterval'을 자꾸 거론합니다.

그런데 그와 관련해서 아무리 찾아봐도 이걸 알람 시계와 연계할 방법이 안 보였지요.

그러던 중 어떤 사이트에 들어가서 훑어보는데 문득 이걸 잘만 응용하면 가능하겠다는 실마리가 보였습니다.

 

- https://ooz.co.kr/194 -

 

그 탓에 몇 시간을 동동거리며 목매달았었는데 그 문서를 접한 뒤로는 어쩐지 술술 풀리는 느낌 들더라고요.

이걸 만나기 전의 이전 작들이 처음엔 그럴듯하게 풀렸지만, 알람 시각을 좀 길게 하거나 컴퓨터를 끈 뒤 다시 켜서 해보면 잘 안되곤 했었거든요.

 

그래서 이 문서를 공식적으로 시험했을 땐 넉넉히 알람 시각을 한 시간쯤 뒤로 설정하고는 그 시간을 기다리려면 모니터를 텔레비전 쪽으로 돌려놓고서 기다리기로 했답니다.

그걸 뻔히 알면서도 기다리기 정말/정말 지루했었습니다.

 

핸드폰을 보면서 시각을 점검하는데 그 시각이 정확히 떠오르지 않습니다.

- 아마도 8분에서 9분 어디쯤 될 거야! -

 

이윽고 핸드폰 시계로 한 시간쯤이 지났습니다.

그런데 알람음이 안 울립니다.

- 이상하다. 왜 그럴까? / 왜 그럴까? -

 

살며시 텔레비전 모니터에서 컴퓨터 쪽으로 모니터를 돌려봅니다.

- 억^! 조심 / 조심!!! -

화면보호기가 작동 중이네요. 마우스라도 키보드라도 살짝 건드렸다가는 판이 다 깨질 것 같아서 조심하고 또 조심하여 들여다봅니다.

- 8분 십 초 / 이십 초 / 삼십 초가 됐는데 아직도 안 울립니다. -

 

'화면보호기가 켜졌을 땐 안 되는 걸까???' 그게 안 울리니까 별생각이 다 들었지요.

그런데 그런 잡념이 잠시 스쳐 갈 때쯤에 '쿵!!!' 드디어 터졌습니다.

 

스피커에서 울려 퍼집니다. '부산 갈매기'가 드디어 울려 퍼집니다.

그것이 다 끝났을 때를 기다려서 마우스를 슬쩍 건드렸지요.

화면보호기도 깨지네요.

 

- 1시 8분 34초 -

설정했던 알람 시각이었습니다.

 

그런데 아직도 이미지가 출렁입니다.

그 첫 작품은 이미지 물러날 시간을 넉넉하게 줬기에 그렇습니다.

'부산 갈매기' 재생 시간이 컴퓨터에 나온 속성대로 하면 2분 29초(149초)로 나오기에 그것 'setTimeout'에서 '149000'으로 했으면 이미 끝날 수도 있었겠지만, 그 이전의 이 방식이 아닌 다른 시험에서 딱 그 시간에 끝나질 않고 매번 조금씩 달랐거든요.

그래서 넉넉하게 5분(300초 - 300000)으로 태그 짰으니 아직 멀었을 수밖에요.

 

한참 뒤에 촐랑대던 이미지 눈 깜작할 새에 사라지기에 그 여유를 줄여서 작지도 않고 많지도 않게 2분 35초(155초 - 155000)에 두고서 이 문서를 저장합니다.

 

이번에 ‘setTimeout’ 문장을 알람 시계가 작동할 때 함께 켜지게끔 했지만, 자바스크립트 function(함수)에 넣을 수 있다는 걸 알았으니 이제는 그걸 문자나 버튼에서도 마음대로 쓸 수가 있다는 걸 깨닫습니다.

 

 

~ 알람 시계^ 01 ^^ ~

 

 

~ 알람 시계^ 02 ^^ ~