70. 기타 프로그램

기타 프로그램은 제가 인터넷을 통해 구한 소스 파일 중에서 참고가 될만한 프로그램을 정리해둔 것입니다. 지금까지 설명한 부록 예제와 달리 이번 장에 수록한 내용은 제가 만든 것이나 수정한 것이 아닙니다. 인터넷에 올려진 소스 파일을 그대로 사용했습니다. 원래의 소스 파일 중에서 배경 그림이나 <TITLE> 태그의 내용을 바꾼 정도에 불과합니다. 그리고 부수적인 외부 파일이 필요하거나 그림 파일이 필요한 내용 정도만 수정했습니다. 가능한 원본의 내용을 수정하지 않았습니다.

따라서 이번 장에 수록한 예제의 분석은 여러분 스스로 해야 합니다. 소스 파일 내용은 책에 수록하지 않았습니다. 책의 지면이 부족한 관계로 부록CD에만 실었습니다. 책에는 소스 파일의 결과만 수록했다는 점을 양해하기 바랍니다.

앞으로도 여러분은 인터넷을 통해 많은 소스 파일을 얻고 활용하게 됩니다. 그렇지만 모든 소스 파일에 친절하게 주석을 달아주지 않습니다. 아마 대부분의 소스 파일은 주석문도 없고 프로그램에 대한 기법 설명도 없으며, 어느 부분을 수정해야 하는지조차 알려주지 않을 겁니다. 결국 모든 작업은 이제 자기 스스로 해야 합니다.

자바스크립트의 특성상 많은 예제들이 다른 사람이 만든 예제를 베끼거나 참고로 하여 만들어집니다. 그 중에는 정말 독창적이고 유용한 예제도 많겠지만 비실용적인 예제도 많습니다. 이런 예제들 중에서 여러분에게 맞는 예제를 골라내는 일과 골라낸 예제를 분석하고 여러분이 필요로 하는 내용으로 바꾸는 일은 이제 여러분 스스로 해야 합니다.

이 번 장을 마지막으로 이 책은 본문과 부록까지 모두 마치게 됩니다. 지금까지는 제가 본문의 해설과 부록에 대한 설명을 통해 여러분이 자바스크립트의 세계를 경험할 수 있도록 도움을 드렸습니다. 비록 제 설명에 부족한 부분이 많겠지만 하여간 저 나름대로는 여러분이 자바스크립트의 세계를 충분하게 이해할 수 있도록 최선을 다했습니다.

앞으로는 여러분 스스로 소스 파일을 만들거나 분석해야 합니다. 여기까지 이 책을 읽으신 분이라면 충분히 그럴 수 있는 실력이 된다고 생각합니다. 작업 도중에 잘 풀리지 않은 일이 있을 때는 다시 한 번 책을 참고하기 바랍니다. 여러분이 원하는 대부분의 해답이 지금까지 설명한 내용 속에 들어있습니다.

여러분의 즐거운 인터넷 생활을 기원합니다. 늘 좋은 날 되소서. 고맙습니다.




ex7_01.html은 좁은 영역에 글월 상자를 만들고 많은 양의 글을 표시할 경우 글월 상자를 위아래로 스크롤하여 보여주는 기능입니다. 물론 문서 안에는 원하는 형태의 문장을 표시할 수 있습니다. 강의 내용이나 기사 등을 표시하는 용도로 사용할 수 있는 예제입니다.

** 소스 파일 이름: ex7_01.html


** 사진: 글월 상자 영역에 생겼고 안에 있는 문서의 내용을 보기 위해 위아래 스크롤 막대를 이용합니다.



ex7_01.html 문서는 위아래 스크롤을 이용했는데 만약 좌우로도 스크롤이 필요한 경우라면 ex7_02.html 프로그램을 참고하기 바랍니다. 위아래 방향은 물론 좌우로도 문서를 스크롤하여 볼 수 있습니다. 일반적인 문장보다는 좌우 스크롤이 필요한 표 등을 보여줄 때에 유용하게 사용할 수 있습니다.

** 소스 파일 이름: ex7_02.html


** 사진: 글월 상자 영역에 생겼고 안에 있는 문서의 내용을 보기 위해 위아래와 좌우 스크롤 막대를 이용합니다.



ex7_03.html은 일정 시간마다 페이드인(점점 밝아짐) 효과를 주면서 표시되는 문장의 예제입니다. 공지사항 등을 표시할 때 적당합니다. 페이드인 효과에 필요한 색을 지정하기 이해 배열을 이용하지 않고 수학 함수를 이용한 점을 참고하기 바랍니다.

** 소스 파일 이름: ex7_03.html


** 사진: 일정 시간마다 페이드인 효과를 주면서 문장이 표시됩니다.



화면을 스크롤해도 특정 지역에 계속 표시되는 글과 그림 기법에 대해서는 이미 알아보았습니다. ex7_04.html은 이런 기법의 응용편으로 화면을 위아래로 스크롤해도 항상 아래 부분에 문장이 표시되는 예제입니다. 아주 중요한 광고 등을 계속 표시할 때 적합한 예제입니다.

** 소스 파일 이름: ex7_04.html


** 사진: 문서를 아래로 스크롤시켜도 항상 아래 부분에 문장이 표시됩니다.



ex7_05.html은 상태 표시선에 글씨가 타자를 치는 것처럼 한 글자씩 나타났다가 왼쪽으로 이동하면서 사라지는 예제입니다. 상태 표시선에 글씨를 표시할 때 좀더 멋지게 표시하고자 할 때 사용할 수 있는 예제입니다.

** 소스 파일 이름: ex7_05.html


** 사진: 상태 표시선에 글씨가 타자 치는 것처럼 나타났다가 왼쪽으로 사라집니다.



ex7_06.html은 글자가 오른쪽에서부터 왼쪽으로 한 글자씩 이동해 먼저 나온 글씨 뒤에 붙는 예제입니다. 이렇게 글씨가 한 글자씩 왼쪽으로 붙는 효과를 주면서 상태 표시선에 문장을 표시합니다. 한 번만 실행하도록 설정되어 있는데 여러 번 반복하려면 setTimeout() 함수를 활용하면 됩니다.

** 소스 파일 이름: ex7_06.html


** 사진: 상태 표시선에 글씨가 한 글자씩 왼쪽으로 이동해 붙습니다.



ex7_7.html은 일정 시간마다 그림이 위로 스크롤되는 예제입니다. 이때 그림이 하나씩 계속 스크롤되는 것이 아니고 위로 올라가다가 멈추는 동작을 반복합니다. 그래서 광고 창으로 사용하기에 적합한 예제입니다.

** 소스 파일 이름: ex7_07.html


** 사진: 일정 시간마다 그림들이 교대로 위로 스크롤되면서 교체됩니다.



ex7_8.html은 지정된 그림이 화면 곳곳에 홍길동처럼 동에 번쩍 서에 번쩍 나타나는 예제입니다. 화면에 약간의 변화를 주고 싶을 때 사용할 수 있는 예제라 하겠습니다.

** 소스 파일 이름: ex7_08.html


** 사진: 지정된 그림이 여기 저기 돌아다니면서 나타났다 사라졌다를 반복합니다.



ex7_09.html은 창을 열 때 바깥에서부터 안 쪽으로 여는 효과를 보여줍니다. 이런 효과는 메타 태그를 이용하는 것이 훨씬 편리하지만 자바스크립트로 구현할 경우 어떤 식으로 구현이 가능한지 참고가 될 수 있는 예제입니다.

** 소스 파일 이름: ex7_09.html


** 사진: 문서를 불러오면 바깥 부분부터 조금씩 창이 열리기 시작합니다.



ex7_10.html은 창을 열 때 타일 조각으로 가렸다가 타일 조각을 하나씩 제거하면서 화면을 보여주는 예제입니다. 조금 새로운 형태로 창을 열고 싶을 때 사용할 수 있는 예제입니다.

** 소스 파일 이름: ex7_10.html


** 사진: 문서를 불러오면 타일 조각이 하나씩 사라지면서 창을 열어줍니다.



ex7_11.html은 창을 열 때 좌우로 띠 모양이 교차되면서 창을 열어줍니다. 이때 띠의 색이나 두께 색을 조절하면 다른 모습을 연출할 수 있습니다.

** 소스 파일 이름: ex7_11.html


** 사진: 문서를 불러오면 띠 모양이 좌우로 교차되면서 창을 열어줍니다.



ex7_12.html은 창을 열 때 위아래로 띠 모양이 교차되면서 창을 열어줍니다. 이때 띠의 색이나 두께 색을 조절하면 다른 모습을 연출할 수 있습니다.

** 소스 파일 이름: ex7_12.html


** 사진: 문서를 불러오면 띠 모양이 위아래로 교차되면서 창을 열어줍니다.



ex7_13.html은 문서를 열 때 배경색에 페이드아웃 효과를 주면서 열어줍니다. 따라서 글씨는 페이드인 효과를 나타내면서 나타나는 셈입니다. 본 예제처럼 검정색으로 배경색이 바뀐다면 글씨는 흰색이나 밝은 색 계열로 설정해 놓아야 점차 문서 내용이 드러나는 효과를 볼 수 있습니다. ex7_13.html은 시작 화면이나 로고용 문서에 응용하면 멋진 효과를 볼 수 있습니다.

ex7_13.html 문서는 색을 계산하기 위해 배열에 색을 대입하는 방식 대신 수학함수와 16진수를 사용했는데 이런 기법은 대부분의 페이드인, 페이드아웃 효과에서 사용하는 기법입니다.

** 소스 파일 이름: ex7_13.html


** 사진: 문서를 불러오면 밝은 색 배경이 점차 검정색으로 변합니다. 이에 따라 흰글씨로 쓴 문서 내용이 서서히 나타납니다.



ex7_14.html은 보통 때는 메뉴를 감추다가 마우스를 가져가면 감춘 메뉴가 나타나는 예제입니다. 이때 메뉴는 왼쪽에서 오른쪽으로 스르륵 밀려나옵니다. 마우스가 메뉴 바깥으로 벗어나면 다시 메뉴는 안으로 밀려 들어갑니다. 메뉴가 등장하고 사라지는 효과도 볼만하고 메뉴 항목을 모두 화면에 표시하지 않기 때문에 깔끔한 화면을 보여주는 효과가 있습니다. 이동 방향을 변경하면 위에서 밑으로 나타나는 메뉴를 만들어 사용할 수 있습니다.

** 소스 파일 이름: ex7_14.html


** 사진: 보통 때는 메뉴가 감추어진 상태로 표시되지만 메뉴라고 써진 곳에 마우스를 가져가면 메뉴가 오른쪽으로 나타납니다.



ex7_15.html은 조금 특이한 시계입니다. 원형으로 된 아날로그 시계인데 특징은 그래픽을 사용하지 않았다는 점입니다. 보통 디지털 시계는 텍스트만으로도 만들지만 아날로그 시계는 바늘 때문에 텍스트로 구현하는 경우를 거의 볼 수 없습니다. 그런데 ex7_15.html은 텍스트만 가지고도 동그란 바늘 시계를 만들었습니다. 참고할만한 부분이 많은 예제라 할 수 있습니다.

** 소스 파일 이름: ex7_15.html


** 사진: 텍스트만으로 만든 원형의 바늘 시계가 시각을 표시합니다.



ex7_16.htm은 테트리스 게임입니다. 게임에 필요한 그림 파일들이 있기 때문에 ex7_16.html과 그 부속 파일은 sample 폴더 밑의 ex7 밑의 ex7_16 폴더에 저장해두었습니다. sample\ex7\ex7_16\ex7_16.html 문서를 참고하기 바랍니다.

이 게임 외에도 블록 격파와 비행기 게임은 모두 일본의 사이트인 ‘http://www.as.lancenet.or.jp/jimmeans/zip/’에서 다운로드 받은 것입니다. 다운로드 받은 것이므로 파일 이름을 원래의 이름으로 사용하는 것이 예의지만 여러분의 이해를 돕기 위해 예제 번호로 파일 이름을 고쳤습니다.

‘http://www.as.lancenet.or.jp/jimmeans/’ 사이트를 방문하면 이 책의 부록으로 소개한 세 가지 게임 외에도 여러 게임들이 있습니다. 그렇지만 가장 친숙하고 또한 익스플로러에서 아무 이상 없이 돌아가는 게임을 위주로 선별했기 때문에 세 가지만 선별해 수록한 것입니다.

ex7_16.html을 실행시켜 보면 자바스크립트로도 이렇게 완벽하게 테트리스 게임을 만들 수 있구나 하는 사실에 감탄하게 될 것입니다. 정말 잘 만든 프로그램입니다. 특히 키보드 버퍼를 제어하는 솜씨는 정말로 환상적입니다. 십 몇 년 전에 제가 즐겼던(지금도 즐기는) 원조 테트리스(ctetris) 게임과 감각이 거의 같습니다. 자바스크립트가 아닌 다른 언어로 테트리스 게임을 연습 삼아 만들려는 분들에게 꼭 참고하라고 권하고 싶은 소스 파일입니다.

** 소스 파일 이름: sample\ex7\ex7_16\ex7_16.html


** 사진: 테트리스 게임의 실행 화면. 원조 테트리스 게임과 똑 같은 감각을 느낌 수 있는 잘 만든 게임입니다.



ex7_17.html 역시 테트리스 게임을 만든 사이트에서 다운로드 받은 소스 파일입니다. 역시 잘 만든 게임으로 PC용 게임과 비교해도 손색이 없을 정도입니다.

sample\ex7\ex7_17\ex7_17.html 문서를 참고하기 바랍니다.

** 소스 파일 이름: sample\ex7\ex7_17\ex7_17.html


** 사진: 블록 격파 게임의 실행 화면. 역시 잘 만든 게임입니다.



ex7_18.html 문서를 불러오면 비행기 슈팅 게임을 즐길 수 있습니다. 과거 오락실에 있던 비행기 슈팅 게임을 자바스크립트로 구현한 것으로 역시 테트리스를 받은 곳에서 받은 소스 파일입니다. 자바스크립트로 이렇게 부드러운 스크롤이 가능한 슈팅 게임을 만들 수 있다는 사실에 입을 다물 수 없는 게임입니다. 그렇게 느린 자바스크립트와 형편 없는 그래픽 지원 함수만 가지고도 이렇게 멋진 슈팅 게임을 만들 수 있다는 사실이 그저 놀라고 감탄스러울 정도입니다.

** 소스 파일 이름: sample\ex7\ex7_18\ex7_18.html


** 사진: 비행기 슈팅 게임인 Falcon의 실행 화면. 자바스크립트로도 이렇게 부드러운 슈팅 게임을 만들 수 있다는 사실이 놀랍습니다.