구글 차트(Google Chart) API라는 게 있었군요. 뭐 국내에도 관련 포스트는 많이 있었지만, 정작 사용예를 올려놓은 포스트는 없는 듯해서 쓸데없이; 차트를 몇 개 만들어봤습니다. 먼저 메신저에서 자료수집에 협조해주신 아래 두 분께 감사를...

대충 이 정도입니다만... 사용해본 소감은 일단 엄청나게 불편하다였습니다-_- url만으로 차트 이미지를 만들 수 있다는 점은 분명 매력적이지만(이런 아이디어 자체는 php를 하는 사람이 보기에 사실 전혀 새로울 게 없긴 합니다만), 문제는 그 url을 쳐넣기가 힘들다는 사실이죠. 찾아보니 이미 누군가가 편리하게 html 폼을 만들어놓긴 했더군요. 일반 사용자라면 Chart Maker를 이용하는 것이 이렇게 일일이 url 코드를 직접 작성하는 방법보다 훨씬 편리할 듯합니다.

하지만 이보다 더 본질적인 문제는 사용할 수 있는 자료에 한계가 있다는 점이었습니다. 현재로서 구글 차트 API에 입력할 수 있는 숫자의 범위는 고작 0~4095밖에 안 됩니다. 그것도 복잡한 숫자-문자 변환을 거쳐야만 가능하죠. 그냥 숫자로 입력할 때에는 0.0~100.0이 한계입니다. 때문에 위에서 '이 블로그 최근 방문자 수' 차트를 그릴 때에는 10으로 나누어 입력해야만 했죠. 지금으로선 재미로 사용하는 정도랄까요... 사실 엑스차트와 같은 좋은 국산 서비스도 이미 존재하니까요.

음 짧게 쓰겠습니다. CSS 속성에서 float:left(혹은 right)에 관한 문제입니다. float 속성은 이미지 등의 개체(element)를 왼쪽이나 혹은 오른쪽으로 배치시킬 때 사용하는 속성입니다. 예를 들어 티스토리에서 이미지를 올릴 때 왼쪽에 한 장, 오른쪽에 한 장을 올렸다고 합시다(역시나 티파니...). 아래와 같은 식으로요.

문제는 이때 이미지 폭이 그리 크지 않아서 위와 같이 이미지 사이에 빈 공간이 남을 때입니다. 이때 아무 조치도 취하지 않는다면 아래와 같이 이미지 삽입후 적은 글이 의도하지 않게 그림 사이로 끼어드는 것처럼 보이게 됩니다.

이렇게
말이죠
-_-

처음에도 말했듯이 이는 float 속성 때문입니다. 공간이 남을 경우 자동으로 남은 공간에 남은 내용을 배치시키기 때문인데요, 이를 방지하기 위해 앞서 지정한 float 속성을 취소해야만 합니다. 이때 사용하는 속성이 clear 속성입니다. 즉, 티스토리에서 글을 쓸 때는 html 모드에서 이미지 삽입 치환자(코드) 뒤에 <div style="clear:both;"> </div>와 같은 식으로 입력해주면 됩니다. 바로 이 포스트의 예를 들면 윗부분의 html 코드는 다음과 같고

아랫부분의 html은 다음과 같습니다.

clear 속성을 사용했을 때와 사용하지 않았을 때의 차이를 볼 수 있죠?

지난번에 쓴 CSS로 이미지에 그림자 넣기 포스트에서 소개한 방법은 float:right를 이용해 이미지를 오른쪽으로 보내버리기 때문에 이미지의 폭이 작아 빈 공간이 생길 경우 텍스트가 의도하지 않게 이미지 왼쪽에 나타나게 됩니다. 때문에 이미지 삽입 후에는 이미지 뒤에 <div style="clear:both;"> </div>와 같은 식으로 앞서 지정한 float 속성을 취소해주는 것이 좋습니다.

대단한 문제는 아닙니다만... 바로 아래 포스트에서 티스토리 이미지 삽입 코드(혹은 치환자라고 불러야 할까요)를 본문에 삽입했다가 일어난 문제입니다.


저런 식으로 이미지 코드를 본문에 넣었더니, '다시 말해' 이후의 내용이 다 날아가서 화면에 표시되지 않는 문제가 있더군요. 순간 흠칫! 했습니다-_- 재빨리 수정을 하긴 했지만 수정 전에 제 블로그 방문했던 분이 계셨다면 "이게 뭐여-_-?"라고 했을 겁니다-_-;;

문제는 티스토리에서 과 같은 형태의 치환자를 사용하기 때문에 일어난 것이었습니다. 위의 포스트에서처럼 로 제대로 태그를 닫지 않으면 이후의 내용이 모두 치환자로 인식되어(parsed) 화면에 표시되지 않는 문제입니다. 그렇다고 와 같이 치환자 태그를 제대로 열었다가 제대로 닫는 식으로 표현하려 해도, 해당 텍스트는 단지 치환자로 인식되어 역시 화면에 표시되지는 않습니다. 치환자 앞뒤에 <pre> 태그도 써보고 별짓 다해봤지만 그래도 안 됩니다-_-

그래서 편법을 하나 생각해냈습니다. 먼저 html 모드로 들어가서 대괄호 혹은 각괄호 [와 ]를 html 문자(html entity)로 바꿔주는 방법입니다(html 문자에 관해서는 많은 문서가 나오니까 자세히 쓰진 않겠습니다. 별로 자세히 알고 싶지도 않고-_-). 아스키(ASCII) 코드를 html에서 사용할 때는 &#숫자; 이런 형식이 되는데, [와 ]의 아스키 코드는 91과 93이므로 각각 &#91;과 &#93;으로 바꿔쓸 수 있습니다. &#91;과 [는 화면으로 볼 때는 동일하지만, html 모드에서 글쓰기를 할 때 이 방법을 사용하면 티스토리에서 글쓰기를 완료했을 때 일어나는 치환을 피할 수 있습니다. 이때 치환자의 여는 태그 역시 인식되지 않으므로 [와 ]를 다 바꿀 필요없이 [만 &#91;로 바꿔도 괜찮습니다.

다만, 이렇게 글쓰기를 완료해서 화면에 제대로 표현했다고 해도, 쓰기가 완료된 글을 수정하려 하면 html 문자가 원래 문자로 다시 바뀌게 된다는 점입니다. 따라서 수정할 때마다 다시 [를 &#91;로 바꿔줘야 하는 불편함이 남습니다; 이것만은 뭐 어떻게 피해갈 수가 없네요-_-

*알림: 티스토리 사용자를 위해 글을 약간 수정했습니다.



포토샵 등의 이미지 툴이 아니라 CSS만을 이용해 이미지에 그림자를 넣는 방법입니다. 기본적으로 예전 홈페이지에 썼던 글과 같은 내용입니다만.

뭐  일단 다음 두 그림을 비교해봅시다. 버섯보다 빛나는 티파니양입니다 *-_-*

위 두 그림에 사용된 이미지 파일은 물론 동일한 파일입니다.


자, 원리는 알 필요 없고-_- 사용방법은... 먼저 다음 그림자 이미지 파일을 다운받아 적당한 곳에 업로드해둡시다. 파일명은 편의상 trans-shadow.png로 저장해주세요. 티스토리 사용자라면 관리>스킨>직접올리기에서 업로드합니다.

그리고 스타일시트에 다음 코드를 삽입합니다. 티스토리의 경우는 관리>스킨>HTML/CSS 편집에서 style.css의 아무곳에나-_- 붙여넣으면 됩니다. 코드의 출처는 끝에 쓰겠습니다.

.img-shadow {
float:right;
background: url(위에서 다운받은 그림자 파일의 주소) no-repeat bottom right; /* Most major browsers other than IE supports transparent shadow. Newer release of IE should be able to support that. */
}

.img-shadow img {
display: block; /* IE won't do well without this */
position: relative; /* Make the shadow's position relative to its image */
padding: 5px; /* This creates a border around the image */
background-color: #fff; /* Background color of the border created by the padding */
border: 1px solid #cecece; /* A 1 pixel greyish border is applied to the white border created by the padding */
margin: -6px 6px 6px -6px; /* Offset the image by certain pixels to reveal the shadow, as the shadows are 6 pixels wide, offset it by that amount to get a perfect shadow */
}

티스토리의 경우 위에서 다운받은 그림자 파일의 주소에 ./images/trans-shadow.png를 써주면 끝입니다. 그리고 그림자를 넣고 싶은 이미지를 삽입할 때에는 다음과 같이 쓰면 됩니다.

<span class="img-shadow"><img src="이미지 파일의 주소" /></span>

이때 이미지는 무조건 오른쪽으로 날아가버리림에 유의하세요(float:right 때문). 그리고 IE에서는 예상치 못한 문제로 제대로 안 나올 가능성이 있습니다.

티스토리 사용자라면 글쓰기 화면에서 이미지 버튼을 눌러 이미지를 업로드하고, html 모드로 들어가서 이미지 삽입 코드, 다시 말해 [##_1C|어쩌고...]앞뒤를 span 태그로 감싸면 됩니다. 이때 반드시 왼쪽(L)이나 오른쪽(R) 정렬이 아닌 가운데 정렬(C)로 올려야 합니다. 그리고 자막(캡션)을 넣을 경우 액자와 그림자가 제대로 나오지 않습니다. 자막을 넣지 않는 것을 추천합니다. 또한, 스킨에 따라 제대로 표시되지 않을 수도 있습니다. 제 스킨의 경우는 .entry 구역(div)에 외곽선(border)이 있을 경우 IE에서 제대로 표시되지 않는 문제가 있길래 .entry 구역의 외곽선을 지웠습니다. 참고하세요.



이상 사용한 코드의 출처는 다음 문서입니다.
http://www.alexallied.com/tutorials/learn-how-to-apply-shadow-automatically-to-an-image-using-css

이 방법 말고 좀더 정교하고 좀더 복잡한 방법도 있긴 합니다. 다음 문서.
http://theshapeofdays.com/2005/11/29/my-contribution-to-the-css-shadow-kerfuffle.html

사실은 작년 3월에 이 블로그 처음 만들 때 생각했던 방법입니다. MS 워드를 보면 특정 문자 위에 강조점(혹은 뭐 방점?)을 찍어서 꾸미기 할 수가 있는데요, 그것을 웹으로 옮겨보자는 착상이었습니다(워드에서 강조점을 찍은 후, html 형식으로 저장하면 강조점은 밑줄로 대체됩니다).


처음에 생각한 방법은 어떻게든 구두점(.)을 텍스트 위로 출력되게 하는 방법이었지만, 이는 실패했습니다. 그래서 어쩔 수 없이 강조점의 이미지(gif 파일)를 만들고 그것을 CSS로 배경으로 출력해봤습니다. 지금까지 포스팅하며 강조점을 사용한 경우가 몇 번 있었는데, 가령 다음 포스트에서와 같은 식입니다.


뭐, 워드보다는 별로 보기 안 좋은 듯하죠-_-; 이건 강조점의 이미지 파일을 예쁘게(-_-?) 만들면 충분히 개선가능한 부분입니다. 실제로 CSS를 사용해서 출력하면 다음과 같습니다.

강조부 글꼴크기 16px. 나는 오제이유 거리를 아는 사람을 단 한 명도 만나지 못했다.
강조부 글꼴크기 15px. 나는 오제이유 거리를 아는 사람을 단 한 명도 만나지 못했다.

이런 저의 방법에는 커다란 제약이 몇 가지 있습니다. 글꼴크기에 px 단위를 사용한다는 점, 제한된 글꼴크기에밖에 사용할 수 없다는 점, 고정폭 글꼴에만 사용할 수 있다는 점, 한글과 영문이 섞인 부분에는 사용할 수 없다는 점 등등등-_-입니다. 근 1년 동안 아주 가끔씩-_- 고심했지만 결국 해결하지 못한 채 포스팅합니다. CSS를 더 잘하는 분들이 개선해주지 않을까 하는 희망에서입니다-_-;; 다음은 CSS 코드.


여기서 바꿀 수 있는 것은 바탕체 대신 굴림체 등의 고정폭 글꼴을 사용할 수 있다는 정도입니다. 이미지 폭과 letter-spacing 및 font-weight를 변경해가면서 실험을 해보면 다른 글꼴크기에서도 사용할 수 있을 것입니다.

사용한 이미지는 다음 두 가지. 크기를 줄이기 위해 4컬러 팔레트로 저장했습니다. 두 이미지 폭이 다르다는 점에 유의해주세요. 또한 혹시 모를 상황을 위해 이미지 높이는 넉넉하게 잡았습니다.

혹시나 해서... 티스토리에서 적용하는 방법

앞으로 개선할 여지가 많지만 어떻게 해야할지 가닥이 잘 안 잡히네요. 고수분들의 지도편달 부탁드립니다-_-;

다음은 어딘가의 UCC 밑에 나온 광고 문구.


서태지와 아이들 - 너에게. 참 좋은 곡이죠, 네. 그건 그렇고,
무려 허경영보다 818% 센 공약 이라니...

-_-

물론 광고일 거란 생각은 들었지만... 대체 무슨 광고인지 궁금해서 일단 클릭을 해봤습니다. 그랬더니...


...-_-

설마 보험회사가 나올 줄은... 정말 몰랐습니다. 게다가 파폭에서는 상단의 디자인이 깨지고 있다는 사실도 발견!(그게 뭐 어쨌다고-_-)

뭐 딱히 금호생명에 대해 부정적인 감정이 있는 건 아닙니다. 누나가 금호생명 상품에 들어있기도 하고... 단지 광고 문구와 실제 광고(랜딩 페이지)와의 엄청난 괴리가 놀라울 뿐이었습니다; 허경영보다 818% 센 공약이 대체 어떻게 건강보험으로 연결되는 걸까요. 자기 회사 보험 정책이 허경영 씨 공약만큼이나 현실성이 없다는 의미로 받아들여도 되는 걸까요-_-? 대체 무슨 생각인지 이것 참... 금호생명 마케팅 담당자 센스가 우왕ㅋ굳ㅋ?;

UCC 원래 주소는 여기라고 하는데, 하단 광고는 무작위로 나옵니다. 안 나오면 새로고침을 계속 눌러보시길.

전에 일하던 출판사에서 최근에 나온 책이다. 기존에 범람하던 쇼핑몰 실무 위주(를 표방하는) 책들과는 조금 다르게 기술적인 관점, 통시적인 관점에서 쇼핑몰 트렌드를 분석한 책이다. 따라서 다소 전문용어가 많고 실무자들을 위한 책이라고는 볼 수 없다. 실무라든가 노하우를 강조하는 책들이 (거의) 수요를 충족시키고도 남을 정도로 출간되는 현시점에서 참 시기 적절하게 나온 책인 듯하다. IPTV라든가 웹2.0, UCC, RFID, [세컨드 라이프] 등의 화두를 쇼핑몰과 관련짓고 있는데 이것은 현재 국내 서적(번역서가 아니라)들에선 찾아보기 힘든 통찰이기 때문에 더욱 돋보인다. 비단 쇼핑몰 종사자뿐만 아니라 웹 관련 연구자에게도 유익한 참고도서가 될 것이다. 앞으로 국내에서도 실무 관련 책들뿐만 아니라 보다 전문적이고 저자의 철학이 담긴 이런 책들이 더 많이 나오길 기대해본다.

그러니까, "내 이름은 드로라 라이머. 난 어린 애들 먹는 게 제일 좋아"라는 내용인데... 대체 누가 이런 구글 광고를-_-?

"Drora Rimer"로 구글링을 해보면, 이런 광고를 본 사람이 나 말고도 한 사람(영어권 블로거 중에서) 있는데, 아직 이 광고의 정체는 불명이라고 합니다. 혹시나 해서 링크를 클릭해봤으나, 없는 주소로 나오고-_-

이 광고가 나오는 사이트로 현재까지 제가 아는 사이트는 http://www.songmeanings.net 하나뿐입니다. 노래 가사 찾으러 자주 가는 곳인데, 이곳에서 좀 돌아다니다 보면 해당 광고를 볼 수 있습니다. 그나저나 궁금하군요... 누가, 무슨 의도로 이런 광고를 게시했는지;


덧:
요즘 애드센스에 트로이목마 바이러스가 출현한다고 하는데 그와 관련이... 있는지 없는지는 모르겠습니다-_-

프랑스 영화를 번역하다가 'Do Arreiro Square'라는 대사가 나오길래, 어딘가 싶어서(그리고 한글 표기도 찾을 수 있다면 더 좋고) 구글을 검색해봤다.


전체 웹 검색 결과, 프랑스 지명이 아니라 리스본에 있는 호텔 이름만 나온다. 결과는 1620개. 혹시나 한글 표기도 찾을 수 있을까 해서 한국어 웹을 클릭해봤다.


한국어 웹 검색 결과에서도 한글 표기는 없었고, 호텔 설명만 나왔다. 결과는 5개. 그래서 'Square'를 빼면 결과가 더 많아지지 않을까 싶어서 'Do Arreiro'만 검색해봤다. 그랬더니...


이게 웬걸... 검색결과가 많아지긴커녕 오히려 사라졌다며 전체 웹 검색결과를 보여준다. 물론 전체 웹 검색결과는 1620개에서 25900개로 늘어나긴 했다. 그런데 국내 웹 검색결과는 왜 없어진 걸까-_-? 상식적으로 있을 수 없는 일이다. 모종의 버그가 아닐까 싶은데... 그래서 혹시나 싶어 'Do'도 빼고 'Arreiro'만 검색해봤다.


마찬가지였다-_- 'Do Arreiro Square'의 3단어로 검색하면 5개의 결과를 보여주면서 1단어로 검색하면 결과가 사라진다니... 문자열 토큰 처리를 정상적으로 한다면 일어날 수가 없는 일이다. 게다가 그 믿음직스러운 구글 검색인데 말이다; 어쩌면 특정 문자열(Arreiro)의 캐싱이 잘못되어있기 때문인 듯싶기도 한데... 어쨌든 황당한 일이었다.