Hey, Scripting Guy!스크립트도 겉모양이 중요하다!
Microsoft Scripting Guys
지난 수백, 수천 년의 세월 동안 여러 철학자와 현자들은 겉모양만을 기준으로 다른 사람이나 사물을 판단해서는 안 된다고 말해 왔습니다. 사람에 있어서나 다른 어떤 것에 있어서나 결국 아름다움이란 보는 사람의 주관적 기준에 따라 달라지기 마련이니까요. 여러분도 이 말이 "진정한 아름다움은 외모가 아니라 내면에 있는 것이며, 어떤 모습인지보다 어떤 사람인지가 훨씬 중요하다"는 의미라는 것은 잘 알 것입니다.
Scripting Guys는 이런 말이 "공염불"이라고 감히 말하고 싶습니다.
그렇습니다. 공염불입니다. 이제 현실을 직시해 봅시다. 세상이 완벽하다면 겉모양이 전혀 중요하지 않겠지만 우리는 그런 완벽한 세상에 살고 있지 않습니다. 정말 세상이 완벽하다면 감자 튀김과 아이스크림을 주식으로 먹고 있을지도 모르겠습니다. 어쨌든 현실에서는 외모가 중요합니다. 그리고 이러한 명제는 스크립트에도 적용됩니다.
명령 창에서 실행되는 VBScript 스크립트의 멋진 모습에 감동의 눈물을 흘릴 사용자는 거의 없다는 건 잘 알고 있습니다. (Scripting Guys 중 한 명인 Dean Tsaltas라면 그럴지도 모르겠네요. 여간해서는 볼 수 없는 사람이죠.)
다른 한편으로 우리가 몸담고 있는 이 첨단 기술 분야에서 스크립트 작성자의 역할은 명령 창에서 실행되는 스크립트를 작성하는 데 국한되지 않습니다. HTA(HTML 응용 프로그램) 덕분에 스크립트 작성자는 스크립트에서 GUI를 구현하는 데 DHTML을 활용할 수 있게 되었습니다. 이 HTML 기술은 여러분도 잘 알다시피 시스템 관리 스크립팅에 일대 혁명을 가져올 새로운 분야인 Windows Vista™ 가젯을 만드는 데도 활용할 수 있습니다. 하지만 GUI에 대해 이야기할 때는 겉모양은 중요하지 않다는 기존의 모든 고정 관념이 무의미해집니다. 그래픽 환경에서 실행되는 스크립트의 경우 모양은 기능과 성능만큼 중요하니까요.
이것이 바로 문제입니다. 스크립트 작성자인 우리가 그래픽 사용자 인터페이스 제작에 대해 아는 바가 없다는 것이죠. 이제 행복은 끝나고 불행이 시작된 것일까요?
어쩌면 그럴 수도 있고 그렇지 않을 수도 있습니다. 어떻습니까? 역시 Scripting Guys는 항상 희망적인 소식을 안겨 주지 않습니까?
흠, 뭐 그렇지 않다면 어쩔 수 없습니다만, 그래도 고마워하실 독자들이 있으리라 생각하고 본론으로 들어가겠습니다.
이 기사를 통해 Scripting Guys가 여러분에게 도움을 주려 한다는 사실을 알아주는 독자가 있다면 그것으로 만족합니다.
놀라운 GUI 세계로의 여행을 시작하기 전에 먼저 HTA의 시작 부분을 살펴보도록 하겠습니다. HTA 작성에 대한 자세한 내용은 HTA 개발자 센터를 참조하시기 바랍니다.
그림 1에는 멋진 데스크톱 정보 시스템의 첫 부분이 나와 있습니다. 그림에서 볼 수 있듯이 첫 번째 단계로 HTA 창의 오른쪽 위 모서리에 작은 그래픽을 배치했습니다. 이것은 HTA가 처음으로 로드되면 로그온한 사용자의 이름을 검색하여 해당 사용자 이름과 컴퓨터 이름을 이 이미지 위에 표시한다는 개념입니다. 나중에 HTA에 여러 가지 멋진 기능을 추가하게 되겠지만, 소위 '중요한 것부터 시작'하겠습니다.
그림 1** 멋진 예제 HTA 그래픽 인터페이스 구현의 첫 단계 **
이 말을 누가 했을지는 모르겠네요. 앞에서 언급한 철학자들 중 한 명일 수도 있겠죠. 어쩌면 철학자 볼테르일까요? 마치 볼테르가 했을 법한 이야기 같네요.
어쨌든 이 예제 응용 프로그램은 너무 간단하고 Scripting Guy 중 하나인 Dean조차 감동시키지 못할 만큼 아름다움과는 거리가 멉니다. 하지만 여러 가지 상황에 적용할 수 있는 기본 개념을 보여 주는 데는 충분합니다. 그 거창한 Windows Vista 가젯도 대부분 이와 비슷한 원리로 작동합니다. 즉, 세련된 그래픽(예: 게이지 또는 다이얼)을 표시하고 그래픽 위에 텍스트를 쓰는 것입니다. 그러면 실제로는 평범한 그래픽 위에 약간의 동적 텍스트가 오버레이되는 것인데, 마치 사용 가능한 디스크 공간을 표시하는 작고 멋진 모양의 게이지가 나타나는 것처럼 보입니다.
솔직히 우리 자신조차 이것을 이해하기 힘들지만, 이 칼럼을 계속 읽다 보면 좀 더 명확하게 이해할 수 있을 것입니다.
그래픽을 표시한 다음 그 위에 텍스트를 쓴다는 개념에는 한 가지 문제점이 있습니다. 바로 그런 방식으로는 작동하지 않는다는 사실이죠. 대신에 기본 HTML 태그를 사용하면 그림 2와 같은 GUI를 구현할 수 있습니다. 기대했던 것과는 많이 다르죠. 어쩌면 "인간은 그래픽 위에 텍스트를 쓰고자 하는 부질없는 희망을 버려야 한다. 적어도 HTA에서는 말이다."라고 니체가 말했을지도 모르겠습니다.
그림 2** 첫 번째 텍스트 오버레이 시도 **
아니, 니체가 틀렸을 수도 있습니다. 이번에도 "역시 Scripting Guys야..."라는 감탄이 들리는 것 같군요. 아닌가요? 어쨌든 평범한 HTML을 사용해서는 원하는 결과를 얻을 수 없다는 것만은 분명해졌습니다. 이론적으로는 그래픽을 배경 그래픽으로 만든 후 표, 단어 잘림 방지 공백, 기타 여러 가지 간단한 트릭을 사용하여 그림 위에 텍스트를 오버레이할 수도 있습니다. 그러나 "이론적으로"라고 하는 데는 항상 그만한 이유가 있는 법이죠. 이 방법으로는 작동하지 않습니다.
HTA 또는 Windows Vista 가젯에서 멋진 레이아웃을 만드는 더 좋은 방법이 있습니다. 바로 CSS(Cascading Style Sheet)가 그것입니다.
CSS는 글꼴, 여백과 맞춤, 색 등 문서에서 표시되는 다양한 요소를 정의하는 데 사용되며, 특히 웹 페이지에 많이 사용됩니다. HTA와 가젯도 본질적으로 웹 페이지라고 할 수 있으므로 CSS를 동일하게 적용할 수 있습니다. CSS의 용도에 대해 모두 설명하기에는 지면이 부족하므로 자세한 내용은 MSDN®의 CSS 참조 설명서를 참조하여 상세하면서도 유용한 정보를 얻으시기 바랍니다. 여기서는 특정 항목(텍스트)을 다른 항목(그래픽)에 오버레이하는 기능을 비롯하여 HTA의 레이아웃을 세밀하게 제어하는 데 CSS를 사용할 수 있다는 정도만 알면 됩니다.
지금부터 그 방법을 자세히 설명하겠습니다. 우선 그림 3에 나와 있는 간단한 HTA의 코드부터 살펴보겠습니다.
Figure 3 최종 스크립트
<SCRIPT LANGUAGE="VBScript">
Sub Window_OnLoad
Set objNetwork = CreateObject("Wscript.Network")
strUser = objNetwork.UserDomain & "\" & objNetwork.UserName
strComputer= objNetwork.ComputerName
UserData.InnerHTML = "<p align = 'center'> " & _
"<font style='font-size:18pt;color:white'>" & _
strUser & "<br>" & strComputer & "</font></p>"
End Sub
</SCRIPT>
<img src="test2.jpg" align="right">
<span id=UserData style="position:absolute;left:770px;top:150px"></span>
실제로 이것은 매우 간단합니다. 먼저 이름에서도 알 수 있듯이 HTA를 시작하거나 새로 고칠 때마다 자동으로 실행되는 Window_OnLoad 서브루틴이 있습니다. 이 서브루틴에 대해서는 잠시 후에 다시 설명하겠습니다. 다음으로 그래픽과 범위를 나타내는 두 가지 HTML 요소가 있습니다. 여러분도 잘 알다시피, 이 태그는 맞춤 특성을 적용하여 그림이 창의 오른쪽에 표시되도록 하면서 그래픽을 삽입하는 데 사용됩니다.
<img src="test2.jpg" align="right">
다음으로 범위에 사용된 HTML 태그는 다음과 같습니다.
<span id=UserData style="position:absolute;
left:770px;top:150px"></span>
범위 태그를 사용하기는 했지만, 대체 범위 태그란 무엇일까요? 의도나 용도에 관계없이 범위는 HTA의 명명된 영역일 뿐입니다. 즉, UserData라는 ID를 지정한 덕분에 프로그래밍 방식으로 식별 가능한 "구분된" HTA 창 섹션인 것입니다. 일단 범위를 설정하면 해당 범위에 텍스트나 HTML 코딩을 할당하는 서브루틴을 작성할 수 있습니다. 사실 앞서 소개한 예제 HTA에서 이미 이것을 구현했습니다.
이에 대해서도 나중에 다시 설명하겠습니다. 지금은 우선 범위 태그에 추가된 style 매개 변수를 살펴봐야 합니다.
style="position:absolute;left:770px;top:150px"
이미 아실 수도 있지만 이 매개 변수는 동적 텍스트를 그래픽 위에 성공적으로 배치하는 데 중요한 요소입니다. 여기서는 세 가지 개별 style 특성을 지정합니다.
Position 우리는 HTA에서 원하는 범위의 위치를 절대(absolute) 위치로 지정했습니다. Position을 absolute로 지정하면 이 예제처럼 텍스트가 다른 항목(예: 그래픽) 위에 작성되는 경우에도 범위의 위치는 항상 동일하게 됩니다.
Left 이 특성은 HTA 창의 왼쪽 가장자리를 기준으로 한 범위의 상대적 위치를 지정합니다. 이 예제의 경우 범위가 왼쪽 가장자리로부터 770픽셀(770px) 떨어진 위치에서 시작됩니다.
Top 이 설정은 Left 특성과 매우 비슷합니다. 단, 이 경우 범위의 위치가 HTA 창의 위쪽 가장자리를 기준으로 한 상대적 위치로 지정됩니다. 이 예제에서는 범위가 창의 위쪽 가장자리로부터 150픽셀(150px) 아래에서 시작됩니다.
이때 원하는 결과를 얻기 위해 범위의 위치를 왼쪽에서 770픽셀, 위쪽에서 150픽셀 떨어진 지점으로 지정해야 한다는 것은 어떻게 알 수 있을까요? 사실 원하는 위치의 정확한 픽셀 지점을 알지는 못합니다. 대신 추측할 수는 있죠. 다시 말해 페이지에 그래픽을 배치해 놓고 범위의 Left 및 Top 특성에 값을 할당해 보는 겁니다. 그런 다음 HTA를 열고 결과를 확인합니다. 정확한 위치에서 약간은 벗어날 수 있으므로 값을 조정하고 HTA를 새로 고친 다음, 다시 확인합니다. 골디락스(Goldilocks)처럼 약간의 시행 착오를 거쳐 원하는 결과를 얻으면 됩니다.
참고로 금발 소녀, 곰 세 마리, 침대와 의자, 그리고 너무 뜨겁거나 차가운 죽 등이 나오는 골디락스와 세 마리 곰이란 동화를 아실지 모르겠습니다. 골디락스를 위대한 철학자라고 할 수 있을지는 의문이지만, 남의 집에 거침없이 들어가서 죽을 먹고, 의자에 앉고, 침대에서 자는 것을 보면 이 소녀가 결코 평범하지 않은 사고 방식을 가지고 있는 것만은 분명합니다.
아무튼 그림 4에는 예제 HTA가 나와 있습니다. 이 작은 응용 프로그램이 걸작은 아닐지 모르지만, 거장 피카소라도 프로그래밍 방식으로 그래픽 위에 정보를 표현하는 일은 어렵지 않을까요?
그림 4** style의 힘 **
그렇다면, 대체 우리는 어떻게 프로그래밍 방식으로 그래픽 위에 정보를 표시한 것일까요? 자, 이제 Figure 5에 나와 있는 Window_OnLoad 서브루틴에 대해 설명할 때가 온 것 같습니다.
Figure 5 Window_OnLoad 서브루틴
Sub Window_OnLoad
Set objNetwork = CreateObject("Wscript.Network")
strUser = objNetwork.UserDomain & "\" & objNetwork.UserName
strComputer= objNetwork.ComputerName
UserData.InnerHTML = "<p align = 'center'> " & _
"<font style='font-size:18pt;color:white'>" & _
strUser & "<br>" & strComputer & "</font></p>"
End Sub
이 서브루틴을 좀 더 자세히 살펴보면 실제로 그다지 설명할 만한 내용이 없다는 것을 알 수 있습니다. 여기에서 볼 수 있듯이 먼저 Wscript.Network 개체의 인스턴스를 만듭니다. 그리고 다음 코드 줄을 사용하여 사용자 이름과 도메인, 그리고 컴퓨터 이름을 검색합니다.
strUser = objNetwork.UserDomain & "\" & _
objNetwork.UserName
strComputer= objNetwork.ComputerName
물론, 이 정보가 바로 우리가 HTA 창에 표시하고자 하는 내용입니다. strUser 변수와 strComputer 변수를 간단한 HTML 태그와 결합한 다음, 해당 문자열을 범위의 InnerHTML 속성에 할당하기만 하면 됩니다.
UserData.InnerHTML = _
"<p align = 'center'> " & _
"<font style='font-size:18pt;color:white'>" _
& strUser & "<br>" & strComputer & _
"</font></p>"
코드가 다소 복잡해 보이기는 하지만, 그렇게 어렵지는 않습니다. 여러 항목을 단일 문자열로 결합하기 때문에 복잡해 보이는 것뿐입니다. 먼저 텍스트를 단락의 가운데에 맞추는 단락 열기 태그를 추가합니다.
"<p align = 'center'> "
다음으로 18포인트 크기의 흰색 텍스트를 사용하도록 지정하는 글꼴 열기 태그를 추가합니다.
"<font style='font-size:18pt;color:white'>"
strUser는 Domain\UserName 형식의 사용자 이름이 들어가는 변수입니다. "<br>"은 줄 바꿈을 삽입하는 태그입니다. 이 줄 바꿈 태그는 한 줄에 사용자 이름을 표시하고 다른 줄에 컴퓨터 이름을 표시하기 위해 삽입하는 것입니다. strComputer는 컴퓨터의 이름이 들어가는 변수입니다. 마지막으로 글꼴 닫기 태그와 단락 닫기 태그를 추가합니다.
"</font></p>"
코드 조각을 하나씩 살펴보면 코드가 생각보다 복잡하지 않다는 것을 알 수 있습니다.
한 가지 덧붙이자면 HTML 요소는 대부분 아무 위치에나 원하는 대로 배치할 수 있습니다. 예를 들어 그래픽 아래에 가운데 맞춤으로 설정된 단추를 추가하려 한다고 가정해 봅니다. 이 경우 HTA 코드에 다음을 추가하기만 하면 됩니다.
<input type="button" value="Test Button" style="position:absolute;left:820px;top:300px">
결과적으로 그림 6과 같은 HTA가 만들어집니다.
그림 6** 단추가 있는 HTA **
이 경우에도 단추를 정확한 위치에 배치하려면 몇 번의 시행 착오를 거치겠지만, 그다지 어렵지는 않을 것입니다. 사실 수학에 자신 있는 사용자라면 정확한 위치를 미리 계산할 수도 있을 것입니다. 개체의 위치는 각 개체의 너비와 높이(style 매개 변수로 지정할 값), 그리고 HTA 창의 너비와 높이만 알면 계산할 수 있습니다. Scripting Guys의 테스트 컴퓨터에서는 기본적으로 HTA가 약 1020픽셀(너비) 및 685픽셀(높이)입니다. 물론, 이 결과는 컴퓨터마다 다를 수 있습니다. 문제가 없다면 이 값으로 시작하여 필요에 따라 조정하면 됩니다.
지금까지 CSS에 대해 매우 개괄적으로 살펴봤습니다. 스크립트를 아름답게 만드는 계기를 제공하는 데는 충분할 것으로 생각합니다. 철학자들이 어쩌면 혀를 차면서 스크립트의 아름다움은 다른 어떤 것도 아닌 그 내용에서 우러나는 것이라고 할 수도 있지만, 이렇게 말하고 싶군요. 역사를 통틀어 가장 위대한 철학자는 누구입니까? 그렇습니다. 플라톤, 소크라테스, 아리스토텔레스라고 할 수 있겠지요. 그렇다면 이러한 철학자들의 사진을 본 적이 있습니까? 겉모양이 중요하지 않다고 역설하는 사람들이 무엇이 두려워 사진 한 장 남기지 않았을까요? 이상하지 않습니까? 앞으로 곰곰이 생각해 볼 문제입니다.
Microsoft Scripting Guys는 Microsoft에서 고용되어 일하고 있는 Microsoft의 직원들입니다. 이들은 좋아하는 야구 경기와 기타 여러 활동을 하는 시간을 제외하고는 항상 TechNet 스크립트 센터를 운영합니다. 자세한 내용은 www.scriptingguys.com에서 확인하십시오.
© 2008 Microsoft Corporation 및 CMP Media, LLC. All rights reserved. 이 문서의 전부 또는 일부를 무단으로 복제하는 행위는 금지됩니다..