가끔 컴퓨터를 하면서 라디오를 듣곤 하는데, 그냥 mp3파일을 켜두는 것보다 좋다. 최근 인기있다는 노래들도 듣고, 라디오 DJ의 재치있는 입담도 재미있다. 무엇보다, 작업을 하더라도 크게 방해를 받지 않아 좋다. 그런 의미에서 인터넷으로 라디오를 들을 수 있는 프로그램은 환영할 만 하다.

과거에도 방송국 홈페이지등을 통해 인터넷에서 라디오를 들을 수 있었지만, 불편한 점이 상당히 많았다. 우선 방송국 홈페이지에 접속해서 로그인을 해야 했고, 간혹 ActiveX로 이루어진 플레이어를 설치해야 하기도 했다. 또 음질은 왜 그리 조악했는지. 차라리 라디오 기기를 통해 듣는 게 더 나을 정도였다.

하지만 방송국들도 나날이 커져가는 인터넷의 힘을 느끼기 시작했는지 홈페이지도 알록달록 예쁘게 꾸미고, 드라마에 나왔던 물건을 인터넷에서 파는 사업도 추친했다. 그리고, 비록 자사 라디오 채널만 들을 수 있긴 하지만 그럭저럭 괜찮은 인터넷 라디오 프로그램을 내놓기 시작했다. MBC에서는 miniMBC라는 프로그램을 내놓았는데, 한동안 안 듣던 새에 어느덧 버전 2.0이 되었다.

우선 겉모습부터 살펴보자. 로그인 화면의 스크린샷은 글 맨 위에 있다. 메인 플레이어 모습은 다소 유치했던 버전 1.0의 스킨을 벗고, 마치 mp3플레이어 같은 모습의 새 스킨으로 갈아입었다. 여기에 새로운 기능들이 추가되었다. '표준FM'과 'FM4U' 두 채널만 있던 기존 버전에서, 'DMB'채널이 추가되었다. 여기에 기존의 '사연보내기' 기능에 '선곡리스트' 기능을 더했다. 사연보내기 버튼을 누르면 제작진에게 간단한 사연을 보낼 수 있는 창이 열리고(제작진이 이걸 보는지 안보는지는 모르겠지만), 선곡리스트 버튼을 누르면 지금 방송되고 있는 프로그램에서 선곡한 노래들의 목록을 볼 수 있다. 확실히 이전 버전보다 상당히 괜찮아졌다.

여기에 더욱 환영할 만한 기능 두 가지가 추가되었다. 바로 '되감기' 기능과 '예약' 기능이다. 되감기 기능은 현재 재생중인 방송을 최대 5분까지 뒤로 이동시킬 수 있게 해준다. 덕분에 메모리 사용량은 좀 더 늘어난 것 같지만, 이정도야 크게 문제되지 않는다.

또한 예약 기능은 그동안 정말 원했던 기능이다. 한 채널만 하루 종일 듣는다면 모를까, 좋아하는 DJ 또는 프로그램을 찾아 헤매게 마련인데, 미리 좋아하는 프로그램만 예약해두면 정말 편리할 것이다(그런데 겹치는 경우엔 어쩐담?). 개인적으로 미리 예약해 놓은 프로그램은 다음과 같다.

• 박경림의 심심타파
• 시선집중 손석희입니다
• 지상렬 노사연의 2시만세 (윤종신 두시의 데이트와 겹친다...으윽)
• 김미화의 세계는 그리고 우리는
• 정선희 정오의 희망곡
• 김원희의 오후의 발견
• 타블로, 조정린의 친한친구
• 박명수의 FunFun 라디오

물론 그냥 일반 라디오로 들어도 상관 없지만 개인적으론 miniMBC 프로그램을 더 선호하게 될 것 같다. 채널 맞출 필요도 없고, 음질도 좋고, 무엇보다 '사연보내기' 기능이 있기 때문이다. 여담이지만, 예전에 '타블로, 조정린의 친한친구'에서 어떤 사연 하나가 소개되었는데 인터넷에서 봤던 펌글이었다. 나 뿐만 아니라 많은 사람들이 문제를 제기했는지, 해당 글을 보낸 사람은 선물을 받을 뻔 하다가 결국 못 받았다. 흐흐흐... 물론 꼭 이런 쪽으로만 쓰지는 않는다. 제작진에게 이것 저것 쓰기도 하고...뭐 그런다. 읽는지 안 읽는지는 잘 모르지만. :)

끝으로, miniMBC의 '미니별 모드'를 사용하면 이렇게 귀엽게 바뀐다. 바탕화면에 별 하나 띄워두는 것도 좋을 것 같다. 프로그램 다운로드는 miniMBC 홈페이지에서 받을 수 있으며, iMBC.com의 아이디가 필요하다.

나는 Blogger.com(blogspot)에서 두 개 이상의 블로그를 운영하고 있는데, 요즘 한창 유행인 Web2DNA에서 두 블로그를 검사해 본 결과 다음과 같은 DNA이미지를 얻을 수 있었다. 올블로그에서 DNA로 검색만 해봐도, 이미 많은 분들이 Web2DNA를 해보셨음을 알 수 있다.

▲ 이건 지금 보고있는 이 블로그(hfkais.blogspot.com)의 DNA 이미지이다.

▲ 이건 Seoul Daily photo의 DNA 이미지이다.

우선, 두 블로그는 거의 똑같은 템플릿 코드를 사용하고 있다. 때문에 몇몇 부분에선 상당히 비슷한 모습이 보이기도 한다. 다만 이를 어떻게 해석하느냐가 문제인데, 딱 부러지게 '이렇다' 할 만한 것이 없다. Web2DNA 홈페이지의 설명만 봐서는, 일단 최신 HTML 태그를 사용했을 때 DNA의 각 선들이 좀더 밝게 나오는 것으로 되어있다.

The brightness of the lines is determined by the importance of the tags in terms of structure.

• H1 is brighter than H2, which is brighter than H3.
• TABLE is brighter than TR, which is brighter than TD tags.
• Images and flash elements appear as 70% white.
• New HTML tags like STRONG and EM is brighter than older ones like B and I
• UL, OL and DL is brighter than their LI, DT, DD
• DIV layout is brighter than table layout

Basically a semantically rich site will appear brighter than one with messy old-style code.

대충 보기엔 Strong이나 Em, DIV태그 등을 썼을 때 좀 더 밝게 표시되는 것 같은데... 내가 이해되지 않는 것은 Table 부분과 UL, OL, DL 부분이다. TR이나 TD, 그리고 LI이나 DT, DD 등은 각각 상위 태그 안에서 쓰이는 하위 태그 아니었던가! (즉 얘네들을 직접적으로 비교할 순 없을텐데...? 같이 쓰이는 태그니 말이다.)

또한 몇몇 다른 분들의 글에선 CSS/HTML 태그와 함께 콘텐츠도 평가한다고 하는데, 과연 그런 것인지 잘 모르겠다. 일단 한 가지 분명한 건, 페이지의 길이에 따라 가로 폭이 결정된다는 것 정도? baekdal 홈페이지를 대상으로 한 DNA이미지와, Google 홈페이지를 대상으로 한 DNA이미지를 보면 알 수 있다. 아울러 야후! 것도 한번 보기 바란다. 이미지가 들어간 경우엔 DNA 선이 좀 더 밝아지는 모양이다.

여하튼, 이 프로젝트의 정확한 분석법에 대해 아시는 분은 리플 남겨주시면 고맙겠다.

태그 : DNA , Web2DNA , image

(쓸데없이 글이 길어졌다. 3줄 요약은 여기로)

요즘, 블로그 이름도 바꾸고(별 뜻 없다. 잘 생각해보면 아주 단순하다) 템플릿도 계속 수정을 가하고 있다. 물론 도메인은 바꾸지 않았다. 오늘은 새 템플릿에 올블로그 올블릿 코드를 삽입했다. Blogger.com에서 올블릿을 추가하는 건 이전에 올린 포스트와 하늘이님의 글을 참조하기 바란다. 원래 진작에 코드를 넣었어야 했는데, 실은 깜빡 잊고 있었다. 여러 번의 테스트와 템플릿 수정을 통해, 지금은 아주 예쁘게 잘 보인다.

사족은 이쯤에서 그만 하고, 이번에 템플릿을 수정하면서 얻은 한가지 팁에 대해 이야기하고자 한다. 다름아닌 '맨 위로 가기' 링크에 관한 것이다.

웹사이트를 만들다 보면, 가로 폭은 대부분 고정되어 있지만 세로 폭은 엄청 길어지는 경우가 생긴다. 때문에 대부분의 웹사이트들은 페이지를 스크롤해가며 봐야 한다. 사용자가 페이지의 내용을 읽어 내려가면서 맨 아래까지 도달했는데, 다른 페이지로 넘어가기 위한 링크나 네비게이션이페이지의 맨 위에 있다면? 사용자는 다시 페이지의 맨 위로 이동하기 위해 스크롤 바를 움직이거나, 마우스의 휠을 열심히 굴려야 할지도 모른다. 물론 단축키를 아는 사용자는 간단하게 키보드의 'Home'키를 눌러 맨 위로 이동을 할 것이다. 또한 이런 불편을 없애기 위해 아예 웹사이트를 만드는 과정에서 네비게이션이 항상 화면에 위치하도록 스크립트를 넣는 경우도 있다.

이런 저런 방법과 해결책들이 많지만, 아무래도 가장 고전적인 것은 '맨 위로 가기(또는 Top)' 링크를 만드는 것이다. 페이지의 맨 위에 Named Anchor(a 태그로 만든다)를 만들어 그것을 링크시키는 것이다. 대부분 Anchor의 이름은 top으로 많이들 쓴다. 이 링크를 클릭하면 순식간에 페이지의 맨 위로 이동할 수 있다.

그러나 Blogger.com에서 이것을 그대로 쓰기엔 약간의 무리가 있으니, 바로 이런 현상이 발생하기 때문이다.

위 스크린샷은, Blogger.com 템플릿에서 HTML코드의 맨 위에 Named Anchor를 만들어놓고, top링크를 만든 후 클릭한 모습이다. 별 이상이 없어 보이는가? 이상이 있다. Blogger.com에서 블로그를 만들면, 맨 위에 navibar라는 것이 붙게 된다. 지금 당장 키보드의 Home키를 누르면 볼 수 있다. 몇몇 Blogger.com 이용자 중엔 이 navibar를 없애버리기도 하는데, 개인적으론 그냥 두는 편이 더 낫다고 본다. 검색창도 있고, 다른 Blogger.com 사이트로 랜덤하게 이동할 수 있는 링크도 제공해 준다. 무엇보다, Blogger.com에서 navibar를 없애는 것은 금지되어 있다.

여하튼 이 navibar의 경우 스크립트를 통해 자동으로 삽입되는데, 때문에 사용자가 만든 템플릿의 html코드보다 항상 위쪽에 위치하게 된다. 자, 그럼 named anchor를 넣어도 항상 navibar에 밀리게 되는데, 이를 어떻게 해결할 것인가? 방법은 의외로 간단하다.(이 얘길 하기 위해 위에서 저렇게 많은 말들을 했단 말인가!)

소스를 보면 알겠지만, navibar에 위치한 검색폼에 name이 걸려있다. 이름은 b-search. 그럼 '맨 위로 가기' 링크를 만들 때, 이 이름을 지정해 주면 된다. 가령 <a href="#b-search" class="top">Top</a> 뭐 이런 식이다. 이렇게 링크를 걸면, 페이지 맨 위로 갈 때 Blogger.com의 navibar까지 모두 보이게 된다.

3줄요약 웹사이트를 만들 때, '맨 위로 가기(top)' 버튼은 있으면 좋다. 그런데 Blogger.com에서는 템플릿에 해당 링크를 넣어도 navibar에 의해 밀린다. 링크를 #b-search로 걸어주면 해결.

태그 : top , 링크 , named anchor , Blogger , 팁 , 템플릿 , 코드

얼마 전, 메가패스 ADSL을 쓰고 있는 인터넷 회선이 불안정하여 KT에 전화를 한 적이 있었다. 별 생각없이 KT의 고장신고 번호인 100번으로 신고를 했는데, 오후에 바로 기사분이 와서 회선을 수리해주었다. 구내선로가 노후되어 그렇단다. 수리를 다 마치고 가면서, 스티커 한 장을 주었다. 앞으론 고장신고를 할 때 100번 말고 이쪽으로 연락을 달라고 한다. 친절하게도, 수신자부담 080 번호다(만약 일반전화였으면 그쪽으로 안했을지도 모른다 :D). 번호는 KT 전체에서 쓰는 번호가 아닌 지역 KT지점(전화국)에서 쓰는 번호다.

사실, 이 지역 KT의 일선 직원들이 100번으로 고장신고 하는 것을 싫어한다는 건 전부터 알고 있었다. 전에도 회선을 수리하면서 이야기했었는데, 100번으로 고장신고를 하면 그 지역 전화국이 아닌 지역 중앙 센터로 신고가 접수된단다. 그럼 중앙 센터에서 지역 전화국으로 지시를 내려 고객의 고장내역을 해결하게 되는데, 이 과정에서 단순히 지시만 가는게 아니라 해당 지역 전화국에 대한 평가에도 신고내용이 반영되는 모양이다. 즉 100번으로 고장신고가 많이 들어온 지역 전화국에 대해선 낮은 평가를 한다나? 그러다보니 100번 대신 자기네 지역 전화국으로 직접 고장신고를 하도록 한 것이다.

예전에는 전화번호도 그냥 일반 전화였는데, 요즘엔 번듯한 080 수신자 부담 번호도 있고, 전화를 받는 텔레마케터 사원도 따로 전문적인 사람을 뽑은 모양이다. 고객의 입장에선 100번(중앙 센터)으로 전화할 때와 큰 차이가 없다. 오히려 이 지역에 대해 더 잘 알고 있기 때문에, 이것저것 물어보거나 할 땐 지역 전화국으로 바로 연락하는게 오히려 낫다. 중앙 센터로 전화해 봤자 '저희는 중앙 센터라서 자세한 건 모르겠고요, 그쪽 지역 전화국으로 지시를 내릴게요' 라는 말만 들을 뿐이다.

그동안 벼르고 벼르던 중, 드디어 일을 냈다. 이 블로그 템플릿을 싹 바꿔버렸다. 얼마 전 새로 템플릿을 변경한 Seoul Daily photo의 템플릿을 기반으로, 약간의 수정을 거쳐 새로 템플릿 코드를 갈아치웠다.

그런데 Seoul Daily photo의 경우 영문 블로그(영어실력은 형편없지만)이고, 이 블로그의 경우 한글 블로그여서 꽤 많은 부분을 수정해야 했다. 특히 텍스트와 관련된 CSS를 수정하는게 가장 큰 일이었다. 적절한 기본 폰트도 별로 없고, 사이즈 조절도 난감했다. 맑은 고딕을 써볼까 했으나 그다지 내키지 않았고, 요즘 유행하는 태터툴즈 스킨처럼 바탕 28px를 써볼까도 했으나 영 모양새가 어울리지 않았다. 결국 굴림으로 타협점을 찾았다. (물론 그다지 마음에 들진 않는다.)

위에서 '그동안 벼르고 별렸다'고 했는데, 사실 이번 템플릿 변경의 가장 큰 이유는 스팸 코멘트 때문이었다. 기존에 쓰던 K2 스킨의 경우 코멘트를 남기기는 쉬웠으나 스팸 코멘트를 막을 방도가 없다는 것이 가장 큰 문제였다. Blogger.com에서 제공하는 코멘트 남기기의 경우 스팸 방지 기능을 쓸 수 있는데, 이것을 쓸 수 없었다. 그래서 K2 스킨으로 바꾼 이후 몇몇 포스트에 스팸 코멘트가 달리기 시작했고, 이를 삭제하는 것도 매우 힘든 일이었다. 물론 템플릿 코드에서 코멘트에 관련된 부분을 삭제하고 다른 것으로 대체했으면 되는 일이었으나, 영 내키지도 않고 귀찮기도 했었다(그러면서 아예 템플릿 코드 전체를 만들어버렸다.). 여하튼 새 템플릿을 만들게 되었고, 어느정도 큰 무리 없이 잘 보여지는 것 같다. 하지만, IE6에서 내용이 사라졌다 나타났다 하는 문제는 여전하다. 렌더링에 문제가 있는 것일까? 빨리 IE7이 나오기만을 기다린다.