Hyper Text

우리가 흔히 html 이라고 부르는 웹 문서 표현언어는 하이퍼 텍스트 마크업 랭귀지(hyper text markup language) 라고해서, 하이퍼 텍스트를 표현하는 언어를 말합니다. 그리고, url 을 표현할때 앞에 붙는 http 는 하이퍼 텍스트 트랜스포트 프로토콜(hypertext transport protocol) 이라고 해서 기계들이 서로 하이퍼 텍스트 컨텐츠를 송수신 하기 위해 만들어진 일종의 규칙이구요.

Web 이 거미줄 이란 이름을 가지게 된 이유는 하이퍼 텍스트의 A 태그를 통해서 웹페이지들이 무한하게 서로 링크(연결) 되어있기 때문에 이리 얽히고, 저리 얽히고 한 그 모양을 본딴데서 비롯됩니다. 그리고, 하이퍼 텍스트 라는 이름은 기존의 컴퓨터 문서가 사용하던 텍스트로 표현할 수 없는 그림, 영상, 음악, 문서간의 연결, 표 등을 표현할 수 있는 문서라는 의미에서 비롯되었구요. (하이퍼한 레벨의 텍스트 라는 뜻이죠.)

현재는 2.0 이란 이름으로 그럴싸하게 포장되어서 진화중인 웹은 이렇게 문서간 상호연결과 문자 이외의 어떤것으로 문서를 표현할 수 있다는 아이디어에서 시작되었습니다. 지금은 아주 당연하게 받아들이는 웹페이지의 이전 시대까지의 텔넷, 고퍼, FTP,뉴스,메일 등의 기능 제한적 프로토콜에 비해서 엄청나게 유연한 하이퍼 텍스트의 등장으로 인터넷 시대가 꽃을 피우게 된거였죠. (고퍼는 저도 써본적이 없는 프로토콜인데 기능적으로 보면 오래전의 카테고리 중심이었던 야후를 생각하면 비슷하지 않을까 싶네요.) 오래전에 본 내용들이라서 정확할지는 잘 모르겠군요.

옛날 옛적에… 로 이야기를 시작했는데, 오늘 다룰 스크롤바는 기본적으로 대량의 문서를 한페이지에 보여주기 위해서 개발된 UI 라서 한번 슬쩍 이야기를 꺼내봤습니다.

스크롤바는 로딩바 보다 어려운 이유

지난 시간 *로딩바 만들기에서도 말했듯 프로그래밍은 숫자놀이 입니다. 스크롤바를 만들기 위해서도 숫자는 필요하죠. 스크롤바가 딱히 로딩바 보다 로직이 무지막지하게 어렵다던가 하지는 않습니다. (기초 형태로 봐서 말이죠. 사용자가 사용하면서 발생할 수 있는 상당히 많은 예외처리를 해줘야 해서 머리가 아파지죠...) 하지만, 이런류의 기능을 만드는것은 로딩바 만들기 보다는 좀 까다로워지는 경향이 없지 않아 있습니다.

왜냐하면 프로그래밍 상에서 모든 데이터가 완료되어 나와서 그것을 그래픽적으로 표현해주기만 하면 되는 로딩바 같은 것과는 틀리게, 스크롤바 같이 사용자가 어떤 액션을 취했을때 그에 대한 반응이 새로운 데이터가 되는 (예를들어 스크롤바를 내렸을때 그 위치에 대한 데이터가 새롭게 나오듯이…) 상호반응이 있을 경우에는 어찌되었든 기본적인 로직의 작동을 작업을 어느정도 진행된 다음에야 알수 있기 때문이죠.

기본적인 스크롤바의 형태가 나오기 이전까지는 작업물에 대한 반응을 확인하면서 작업할 수 없기 때문에, 개념상에서 예상하며 작업을 해야해서 좀 더 어려워지게 됩니다.

생각, 작업, 확인의 단계를 반복하며 작업하는 것을 기본적인 프로그래밍의 형태로 봤을때, 로딩바가 생각->작업->확인의 순서를 가진다면 스크롤바는 생각-->작업----->확인… 뭐 이정도쯤 된다고 할까요… 눈으로 바로 바로 확인할 수 없기 때문에 전체적인 작업 흐름을 머릿속에 좀 더 많이 넣어서 작업해야 합니다.

좀 더 고난이도의 작업이 될수록 (사용하는 함수나 클래스가 고난이도가 되는것이 아닌) 이 간격이 더 넓어지는 경우가 많이 생기지 않나 싶네요. 이 간격에서 길을 잃지 않도록 플로우챠트나 다이어그램등을 그리면서 작업하는 경우도 많은것 같구요.

^^a 뭐 저도 프로그래밍을 잘하는 편은 아니라서 제 레벨의 이야기 이지만요…

어쨌든 이야기 했듯 오늘 작업은 로딩바 보다는 개념상 작업이 꽤 많은 편입니다. 그래서 좀 어려울 수 있으니 평소보다 좀 더 꼼꼼히 읽으셔야 할 것 같네요.

스크롤바에 필요한 숫자?

스크롤바를 만드는 숫자놀이를 해야겠죠. 그렇다면 필요한 숫자는 무엇일까요? 하나, 하나 차근차근 살펴보기로 할까요? 저 개인적으로는 문서형태의 컨텐츠를 다룰일이 사실상 없기 때문에 (있을땐 아예 html 로 표현해 버리기 때문에 구지 플래시에서 스크롤바를 만드는 불필요한 일은 안하는 편이죠.) 스크롤바는 저도 예전에 한 번 만들어본게 전부입니다. 같이 삽질을 해보도록 하죠.

필요한 오브젝트

1 . 스크롤 될 대상

2 . 올림버튼, 내림버튼

필요한 숫자

1 . 스크롤 될 대상의 y 위치

2 . 올림버튼, 내림버튼을 눌렀을때 이동할 스피드

스크롤바와는 많이 다르긴 하지만, 일단 기본적으로 이런 형태를 만들어보죠. 그 이후에 살을 붙이면서 스크롤바의 형태를 만들어나가도록 하구요. 그림으로 그려보면 아래와 같은 모양이 될 것 같네요.


일단은 무비클립을 배치했습니다.



인스턴스 네임은 대상은 target_mc, 버튼은 up_btn, down_btn 으로 했습니다.

일단 매우 기초적인 형태의 스크롤이 되었습니다. 버튼을 누를때마다 위로, 아래로 speed 만큼 오르락, 내리락 하고, 또 앞으로를 위해서 trace 를 해줄 reporter 함수를 하나 만들었습니다. 저것을 통해서 지속적으로 trace 창에서 이것저것 확인을 할 수가 있죠.

누름의 구현

하지만, 이렇게 하면 누름 상태에서 계속 올라가다가, 떼면 멈추는 형태의 작동은 되지 못하는군요. 이 부분은 좀 애매한데요. 여러 프로그램에서 이 작동에 대한 구현을 다르게 해서입니다. 모질라 재단의 프로그램들 같은 경우엔 보통 "오버->누름" 에서 작동이 시작되고, "버튼 바깥으로 커서가 나감->멈춤" 상태에서 "버튼으로 커서가 돌아옴" 이 되었을때 계속 멈춤 상태 이지만, MS 의 프로그램들은 대체적으로 "버튼으로 커서가 돌아옴" 상태에서 다시 스크롤이 재작동하게 되거든요. 어떤쪽이 사용자에게 더 편리할까… 는 제작자가 결정해서 만들어야 하는 문제이지만, 일단은 모질라의 방식을 따라서 만들어 보도록 하겠습니다.

흠. 코드량이 굉장히 늘어났네요. onPress 의 규칙이 누를때 "한 번" 이벤트가 발생하는 것이기 때문에, 누름 상태를 지속적으로 감지하기 위해서 onEnterFrame 을 사용해서 지속적인 반응을 유지하고, delete 를 사용해서 그 반응을 지워주는 식으로 만들었습니다. moveOn 이나 moveOff 는 코드량을 줄이기 위해서 중첩되는 코드들을 함수로 정리해서 만든거구요. moveOn 안에 있는 if 문 역시 같은 맥락으로 좀 보기 편하게 만들려고 만들어 둔겁니다.

일단 이벤트가 기존에 onPress 하나에서 onRelease 와 onDragOut 이 추가되어 총 세가지가 되었습니다. onRelease 같은 경우엔 버튼에서 떼었을때 이벤트를 한 번 발생시켜 주는 이벤트구요. onDragOut 은 눌려진 상태에서 커서가 버튼 밖으로 나갔을때 이벤트를 한 번 발생시켜 줍니다.

이 세가지 이벤트를 사용해서

onPress( 버튼이 눌려짐) -> 움직임이 시작됨(moveOn)

onRelease(버튼에서 뗌) 혹은 onDragOut(버튼 밖으로 나감) -> 움직임이 멈춤(moveOff)

이런 순환구조를 만든거죠.

(참고로 MS 방식처럼 만든다면 onDragOver 라는 이벤트를 추가시켜주면 될 것 같습니다.)

^^a 제가 스크롤바 기능의 정석적인 방식을 모르고, 실제 사용을 꼼꼼히 해보면서 만드는 것은 아니므로, 여기에 구현한 코드를 너무 믿지는 마세요. 그냥 스터디용으로 보시면 될 것 같습니다. (혹은 이 글을 보시는 고수분께서 자신이 사용하는 스크롤 코드를 올려주신다면 좀 더 보완이 되겠죠. 추가 예제를 보여주실 분이 계시면 환영하겠습니다.)

어쨌든 이제 스크롤바에서 버튼 기능이 구현되었습니다.

스크롤막대 구현에 필요한 준비

버튼은 뭐 대충 만들었으니 이제 스크롤막대를 구현해 보죠.

일단 무비클립을 추가시켜 보도록 하겠습니다.

위와 같이 스크롤이 될 영역과 스크롤막대의 기준이 될 동그라미 한 개를 추가시켰습니다.

원래의 스크롤바라면 스크롤막대가 스크롤될 대상과 보여지는 영역에 비례해서 크거나 작아져야 하는데요. 일단 오늘은 (제가 쓰기 귀찮으므로 ㅡ ㅡ;;;) 그런 기능은 없이 만들도록 하겠습니다.

일단은 무비클립의 크기와 위치를 코드상에서 정렬시켜 줘야 합니다. 스크롤바의 경우 기본적으로 사용자의 액션에 따라서 그 반응이 일어나는 형태를 가지게 되므로, 사용자가 움직이는 영역에 대한 판단이 정확해야 하기 때문이죠. 스크롤막대가 움직일 영역과 스크롤막대의 위치, 대상물의 위치가 제멋대로 어그러지면 스크롤막대는 구현할 수가 없기 때문에 초기화를 정확히 시켜줘야 합니다.

인스턴스 네임은 zone_mc 와 circle_mc 로 해줬습니다.

이런식으로 일단 위치와 크기를 코드 짜기 쉽도록 만들어줬습니다.

컴파일 해보면 이렇게 보이죠.

버튼과 스크롤막대를 떨어뜨려 놓은건 좀 더 보기 편하게 하기 위해서입니다. 일단은 별개의 기능이니깐요.

그럼 기본적인 준비는 되었으니 이제 스크롤막대를 작동시키기 위해서 필요한 숫자를 생각해 보도록 하죠. (이 아래부터는 진짜로 개념상 작업이 상당히 많으므로 코드를 잘 살펴보면서 따라오셔야 합니다. 어라? 하다간 "담에 보자… ㅡ ㅡ;;;" 하면서 포기하게 되니 꼼꼼히 읽으셔야 해요.)

초기화 숫자

1 . 대상물의 y 위치

2 . 대상물의 height 높이

3 . 스크롤막대가 움직일 영역의 height

4 . 스크롤막대의 y 위치

작동을 위해 필요한 숫자

A . 대상물의 y 시작위치 // 최초 초기화 위치 = 10

B . 대상물의 y 끝나는 위치 // 대상물의 height 의 -숫자 + 다운버튼의 y + 다운버튼의 height

C . 스크롤막대의 y 시작위치 // 스크롤막대 영역의 y

D . 스크롤막대의 y 끝나는 위치 // 스크롤막대 영역의 y + 스크롤막대의 height

E . 대상물의 height 를 10000 으로 나눈 수

F . 스크롤막대가 움직일 영역의 height 를 10000 으로 나눈 수

일단 e 와 f 를 설명하자면 대상물이 스크롤되는 공간과 스크롤막대의 공간의 비례되게 맞춰주기 위해서 10000 으로 나눠서 1:1 로 맞춰주려고 합니다.

굳이 설명하자면 대상물의 height 가 얼마든, 스크롤막대가 움직일 영역의 height 가 얼마든 둘 다 똑같이 10000 으로 나눠주면 양쪽모두 10000 의 숫자영역 안에서 움직일 수 있는 기준이 마련되니깐요. 그 기준을 통해서 움직이게 해주려는 것이죠.

즉, 스크롤막대가 가상영역 상에서 6000 의 위치에 있다면 그 기준을 바탕으로 대상물 역시 6000 의 영역에 위치시킬 수 있게 됩니다.

그리고, a 와 b 에 대해서 설명하자면 아래와 같습니다.

일단 기본적으로 y 0 을 기준으로 해서 대상물을 거꾸로 올리는것은 대상물의 height 를 음수를 대상물의 y 로 해줬을때 가능합니다. -height 를 하면 정확히 안보이는 위치로 올라가게 되죠. 하지만, 스크롤이 끝까지 내려갔을때 눈에 안보이는 영역으로 사라져버리면 곤란하겠지요.

그렇기 때문에 우리가 스크롤의 끝으로 잡아두면 좋을 아랫버튼의 y 와 height 를 더해주었습니다. 이렇게 되면 대상물의 마지막 위치가 정확하게 버튼의 끝과 일치하게 되죠.




위처럼 target_mc._y 를 조절해 주었을때 컴파일 해보면

정확한 위치가 설정되게 됩니다.

마지막으로 c 와 d 는 스크롤막대가 움직일때 맨 윗쪽과 맨 아랫쪽을 도출하게 됩니다.

일단 코드상에서 숫자를 도출해볼까요…

아이구… 무슨 라이브코딩 하는것처럼 굉장히 힘들군요. 쓰면서 동시에 짜려니 이거 중간에 틀리면 처음부터 다시 다 써야 할까봐 불안불안 신중하게 짜고 있습니다. 뭐 잘 되겠죠.

어쨌든 기초적인 준비는 되었으니 이제 실제로 이벤트를 연결시켜서 구현해 보도록 하겠습니다. (여기서 안돌아가거나 헛다리 짚었다하면 이제 미치는거죠. 새로 써야 하니깐요…;;;)

스크롤막대 구현하기

자… 시작해 봅시다.

일단 스크롤바를 만드려면 스크롤막대에 Drag 이벤트를 활성시켜줘야 합니다. startDrag 와 stopDrag 를 통해서 Drag 기능을 on/off 할 수 있는데요. 자세한 사항은 F1 을 눌러서 MovieClip.startDrag 를 참고하세요. (레퍼런스는 꼬박꼬박 보는 습관!)

어쨌든 위의 코드처럼 하면 드래그 이벤트에 대한 활성/비활성이 구현되어서 스크롤바가 움직이게 됩니다. 이젠 실제로 대상물을 스크롤바에 따라서 움직이게 해줘야 겠네요. 한 번 해볼까요.

와 코드 참 길어졌습니다…;;; 강좌 쓰면서 100줄 넘어가는 코드는 그다지 많지 않았던것 같은데, 이번건 좀 빡시게 가는군요. 어쨌든 위의 코드를 구현하면 실제로 스크롤막대의 움직임에 따라서 대상물이 움직이게 됩니다.

간단히 살펴보면 주목할만한 부분은 32 번째 줄의 cPercent() 인데요. 일단 이 함수를 사용하는 호스트인 44번째 줄을 보면 변수로 circle_mc._y 즉, 스크롤 막대의 y 위치를 함수에 넘겨주게 됩니다.

그러면 34 번째 줄에서 y 에 상단공백인 10 을 빼고, 더불어 버튼의 height 만큼을 더 빼서 실제 스크롤 영역의 height 와 1 : 1 로 (현재 파일에선 0~270) 맞춰지게 됩니다. 그 숫자가 cy 로 남게 되죠.

그리고, cy 35 번째 줄로 넘어가는데요. 여기에선 percent 공식이 사용됩니다.

일단 퍼센트 공식을 설명하자면 0~500 사이의 수를 100% 에 맞추려고 할때를 생각하면 일단 500 을 1로 만들어줘야 합니다. 즉, (500/500) 이 되면 1 이 되죠. 여기에 100 을 곱해주면 100 으로 변환이 됩니다.

그리고, 그 사잇수의 경우, 예를 들어 250 같은 경우엔 (250/500) 은 0.5 가 되죠. 여기에 100 을 곱하면 50 이 되죠.

이 공식을 활용해서 우리가 대상물과 스크롤막대의 영역을 나눈수인 10000 에 맞춰서, cy 로 넘어온 0~270 까지의 값을 0~10000 으로 바꿔주는 것이죠. 이러면 일단 현재의 위치가 가상영역 10000 안에서 전개됩니다. 이 수를 cp 로 저장하죠.

그리고, 마지막 36 번째 줄에서 cp 에 기존에 대상물의 10000 조각단위인 tPiece 를 곱해주고, 여기에 상단 공백인 10을 더해주는 것이죠. 그리고, 이것이 마지막으로 다시 return 되어서 44 번째 줄로 돌아가면 드디어 target_mc… 즉, 대상물의 y 가 스크롤막대에 맞춰서 자연스럽게 위치되게 됩니다.

아이구… 말로 하려니깐 굉장히 길고 복잡해졌네요. 막상 뜯어보면 별거 없습니다. 프로그래밍의 내부적인 숫자놀이는 간단한 산수 수준이고, startDrag 같이 사용된 함수들은 레퍼런스만 보면 간단하게 이해할 수 있는 것들이죠.

실제로 한 번 따라해보시면 그다지 복잡할 게 없다는것을 알게 되실 겁니다. 음… 여기서 중요하게 생각하셔야 할게

1 + 1 = 2 가 쉽다면

1 + 1 = 2

1 + 2 = 3

1 + 3 = 4

도 역시 쉽다는 거죠.

좀 분량이 많아질 뿐이지, 내부적으로는 복잡할 게 없습니다. 단지 위에서도 말했듯 개념상에서 전개해야 하는 작업이 많기 때문에 난이도가 약간 생길 뿐이죠. 실제로 해보시면 금새 이해하실 수 있을겁니다. ^^ 코드의 효율성이고 나발이고 다 무시하고, 가능한한 스터디가 되도록 짰으니깐요.

버튼과 스크롤 막대의 연결

버튼은 버튼대로 돌아가고, 스크롤막대는 스크롤막대대로 돌아가고 있습니다. 남은것은 이제 이 두가지가 서로 연결이 되도록 하는 것이겠네요. 간단하게 짜보도록 하겠습니다.

24 번째 줄은 수가 좀 잘못되어 있어서 수정했습니다. 위치가 안맞더라구요.

59 번째 부터 시작되는 함수는 위의 percent 함수와 마찬가지로 변환 함수입니다.

82 번째 줄부터 시작되는 코드는 이미 제한폭이 걸린 상태에서 움직이는 스크롤막대와는 틀리게, 누르는데로 막나가버릴 수 있는 버튼의 특성 때문에 제한폭을 걸어준 것이구요.

그리고, 무비클립 상에서는 제가 up 버튼과 down 버튼의 기능을 거꾸로 만들어서 서로 바꿔줘야 하더군요…;;; (귀찮아서 수정은 하지 않았습니다…;;;)

대충 대충 마무리…;;;

아… 간단하게 쓰려고 했는데, 설명하다 보니깐 무지막지하게 길어졌네요. 설명 쓰면서 띄엄띄엄 짠 코드라 이걸 뭐 사용한다거나 하기는 힘들겁니다. 사실 스크롤바의 정확한 로직을 모르는지라 대충 비슷하게 돌아가게 구현하긴 했는데, 이렇게 만드는게 정석인지도 모르겠구요. 단지, 이렇게도 만들수 있다… 라는 의미에서 적고, 설명해 봤습니다. (버그도 굉장히 많아요…;;;)

단순하게 만들었지만, 결국 스크롤바의 정의는 컨텐츠 영역과 전체 선택영역 (스크롤바 부분) 사이를 1 : 1 로 맞춰서 사용자가 선택영역을 통해서 컨텐츠를 둘러볼 수 있게 하면 되지 않을까 싶습니다.

이런 1 : 1 치환에 더해서 약간의 디스플레이 코드를 더해주면

http://www.ssen.name/portfolio/pages/page.php?id=gsestore

이 링크의 두번째 것처럼 롤링모빌 형식이나 거기서 보이는 "living&style" 을 눌러서 들어가면 보이는 커버플로우 형식도 만들 수 있는거겠지요. 모양이 많이 틀리고, 디스플레이 코드가 좀 다르긴 하지만, 결국 다른 구성을 가진 양자간의 1 : 1 의 싱크를 통해서 컨텐츠 영역을 전환하는 것은 비슷하거든요.

아… 뭐 어쨌든 더 이상은 힘들어서 못쓰겠습니다. GG

스크롤바 만들기에 대해서 더 공부하실 분들은 위에서 잘못된 공식을 바로 잡고, 마우스휠 이벤트 등의 추가적인 내용들을 살펴보시면 될 것 같습니다.





출처: ssen님의 레시피
http://ssen.name/zb/1126