[web] Shine your spell on me

사이트 주소가 바뀌었습니다

2010-01-07T17:04:48+09:00

shinespell.net

작업 대기

2009-11-13T11:12:42+09:00

지난 2주간 일요일에,

그리고 수요일 저녁에.

일이 없어도 만에 하나 무슨일이 터질 것에 대비하여 개발자가 퇴근할때까지 대기 하였다.

2주간 일요일 약속은 모두 취소되었고 집밖에도 나가지 못한채 원격과 핸드폰을 열어놓고 대기 했지만 막상 아무 일이 없어서 아이온만 주구장창 했는데, 이건 그럼 내가 논 시간일까 업무 시간일까? ;ㅅ ;?

내가 주말에 열심히 게임하는걸 IT 업계를 모르는 민간인 친구가 보더니, 말을 걸었다.

"주말인데 남자 친구랑 안놀아?"

"만약의 사태를 대비하여 대기하래."

"뭐, 불이라도 난대?"

"그러게나 말야..."

옛날 옛날에 요청했던 작업리스트를 오픈 4시간전에 정리해서 주는 사람과,

이미 작업했던 파일들인데 옛날 버전으로 되돌려서 실서버에 오픈시킨 사람만 아니면 그럭저럭 괜찮았을 오픈날이 종료되었다. (되었을까? ㄷㄷㄷ)

잠을 안자면 더 열심히 살 수 있을까?

2009-09-22T10:56:34+09:00

직업이 웹퍼블리셔니까, HTML/CSS는 필수 스킬이다. 여기에 더하여 신입 1년동안 매달린 자바스크립트와 최근 공부하여 잘 써먹고있는 PHP가 있고 요즘은 틈틈히 AJAX를 공부중이다. 욕심을 더 내자면 jQuery와 SVG, PHP보안, C# 정도.

프론트-엔드 쪽도 정말 공부할게 많구나. 거기다 이제는 소프트웨어 기술자 신고제 때문에 정보처리기사 자격증도 따야하고, 개인적인 발전을 위해 영어공부도 해야하고.

할건 많은데 시간은 왜이렇게 없는거지, 하고 생각했는데, 해답을 찾았다.

"지영언니는 드라마도 보고 게임도 하고 블로그도 하고 엑셀공부도 하고 언제 그렇게 다 해요?"

"난 잠을 쪼금 자잖아 ㅋㅋㅋㅋㅋㅋㅋ"

"..."

기본 7시간은 자줘야 해! 의사들이 권하는 이상적인 수면시간!

12시 땡하면 잠이 든다고 해서 한때는 별명이 신데렐라였다.

사람들 대체, 어떻게하면 3시간만 자도 낮에 펄펄 날라다니는거야. 덜덜덜...

잠을 줄여서 공부를 해야하는걸까.

얼마전엔 방정리를 하다가 워크샵때 최이사님한테 받은 편지를 발견해서 다시 열어봤다.

"유미씨의 능력을 극한으로 끌어올릴 수 있는 한해가 되길 바래요."

능력이 뭘까. 기술일까. 인간관계일까. 커뮤니케이션일까. 처세술? 사회생활? 뭐지?

기술쪽이라면 역시 잠을 줄여야 하는걸까? 프로젝트가 있으면 회사에서 공부를 못하니까. 그 이후의 시간을 노려야 하니깡.

이란 웹페이지 만들기ㅠㅠ

2009-09-18T18:08:50+09:00

전 세계 여러 국가 중의 하나인 이란은 우측에서 좌측으로 글자를 쓴다.
그래서 CSS 속성인 direction: rtl; 을 사용하여 페이지를 만드는데.

"니가 뭘 상상하든 그렇게 니 생각대로 되지 않을꺼야."
라고 했던 네모 선임님의 말이 이해가 팍팍 와!
ㅇ ㅏ 젝일젝일.

재미있기도 한데 원인을 알 수 없는 오묘한 문제에 봉착할때는 참 답답ㅠㅠ

제2회 검색기술 컨퍼런스 후기

2009-09-09T15:26:23+09:00

삼성동 그랜드인터컨티넨탈호텔에서 Search Technology Summit 2009가 '검색의 미래, 디스커버리'라는 주제로 열렸다.

9개의 섹션 중 3가지 섹션을 선택하여 들을 수 있는데, 내가 선택한 트랙1 과정에는 [시맨틱 검색과 분석 실용 기술의 구현] [프로파일링을 이용한 검색의 개인화] [Enterprise Social Network을 활용한 Knowledge Discovery] 가 다뤄졌다. 자사의 제품홍보를 제외하면 모든 섹션의 주제는 Keynote의 '검색의 미래, 디스커버리'로 동일하다.

쓰레기를 걸러서 정확한 정보를 찾아내어 나열하기만 하는 시대는 이제 지났다. 컴퓨터가 그 정보의 의미를 이해하고 이들간의 상관관계를 논리적으로 탐구하여 명시되지는 않았으나 유추할 수 있는 정확한 정보를 한층 심도깊게 응용하고 가공하여 제공해야하며, 심지어는 개개인의 특성과 목적을 고려하여 맞춤형 정보를 제공하는 것에 이르러야 한다는 것이다. 시맨틱 웹이다.
이것을 구현하는 방법에는 단어의 사전적 의미에 의존하거나 구글의 페이지 랭크와 같이 기술 및 통계를 활용하는 방법도 있지만, 사람의 행동 및 패턴의 로그를 분석하여 개인에 특화된 정보를 제공하는 것이 중요하다고 한다. 예를들면 도서 쇼핑몰의 '이 책의 구매자가 구입한 다른 도서 목록'과 같은 것.

컴퓨터는 사람을 위해서 똑똑해지려고 하는구나.

ajax 삽질하며 공부중

2009-09-08T11:33:16+09:00

우리 퍼블리싱팀 팀장님 지영언니가 실버라이트의 압박을 받는 가운데, 팀원들의 관심은 C#.
C#도 포기할 수 없어, 라고 생각하면서도 결국 ajax에 빠졌다.

[PHP 개발자를 위한 실전 자바스크립트]라는 ajax라는 단어는 하나도 안들어간 ajax 책으로 공부하는중인데, 가르쳐줄 사람 하나 없이 혼자서 공부하다보니 책 초반에 나와있는 맛보기 코드의 인코딩부터 막히기 시작해서 온갖 어려움에 봉착했다.

cafe24에서 호스팅받은 계정의 php 버전을 착각해 하루종일 삽질하기도 했다.
DOMdocument() 함수를 php4에서 돌리려고 하니 절대로 안되지... 온갖 검색을 통해 domxml_new_doc()과 dump_file()로 해결해놨더니, php버전이라는 단순한 문제였다. cafe24에 php5 서버로 이전 신청하고나니 책에서 배운대로 잘되서 행복해 하는중~
가르쳐줄 선생님이 있다는게 행복했었던 거구나. 자바스크립트 공부할때 항상 도움을 주었던 지영언니에게 새삼 감사한 하루!

아직 할것도 많고 하고 싶은것도 많다. ajax하고나면 jQuery랑 SVG도 하고 싶고, C#부터 시작하는 실버라이트도 하고 싶고, 시작도 제대로 안해본 JAVA도 다시 하고싶고.

프로젝트가 조금 한가해져서 이렇게 버닝중인데, 가이드 작업과 확산이 시작되면 또 바빠지겠지.
나의 희열은 프로젝트가 아니라 공부할 때 생기는듯...

처음 다녔던 회사가 망하지 않았다면?

2009-09-07T21:03:43+09:00

웹표준과 웹접근성은 내가 블로그를 시작했던 시절의 핫이슈였기 때문에 자신만의 블로그 스킨을 만들기 위해선 웹표준을 공부할 필요가 있었다. 이때 웹표준을 공부했던 책이 [헤드퍼스트 XHTML&CSS]. 스킨을 만들기 위해 취미로 배운 것에 불과하다.

처음으로 취직한 회사에 다닐때에는 웹퍼블리셔라는 직종이 있는지조차 몰랐고, 어느 쪼그만 회사에서 팝업을 만드는 웹디자이너 타이틀을 가지고 있었다.

회사를 다니기 시작한지 2주가 지났는데, 사장이 출근을 안하기 시작한다. 눈치 빠른 익형오빠가 제일 먼저 회사를 그만뒀고, 그 뒤로 사람들이 줄줄이 그만두기 시작했다.

사장이 출근을 안해도 사장의 친척인 실장은 유지보수 업무를 꾸려나가야 한다는 생각에 신입이라 잘 몰라서 어물쩡거리고 있는 나를 회유하기 시작했고, 난 결국 꼬임에 넘어가 한달동안 출근했다.

사장이 없는 열흘 동안은 일거리가 거의 없다시피 했다. 출근해도 할일이 없어서 예전에 공부했던 웹표준 책을 꺼내들어 하루 8시간씩 공부하는 정도였다.

계속해서 월급이 들어오지 않으면서 사태가 파악되었지만 이미 늦었다. 결국 돈 한푼 못받고 다른 회사를 알아보게 되었는데 대충 5~6군데 지원한 것 같다. 그 더운 여름날 땀을 뻘뻘 흘리면서 면접장소로 돌아다녔는데, 그 날이 태어나서 가장 더운 여름날이었던 것 같다.

결국 "사무실이 예뻐서."라는 이유 단 하나만으로 디스트릭트 입사를 결심한다.

그 때 그 회사가 망하지 않았더라면, 지금 이 순간 내가 웹퍼블리셔 일까, 웹디자이너 일까?
그 때 그 회사가 망하지 않았더라면, 디스트릭트에 다니고 있을까, 피마르도록 월급이 밀리는 그 회사에 아직 다니고 있었을까?

display: inline-block 사용하기

2009-09-07T21:06:56+09:00

블록 레벨 요소에 사용하기

display: inline-block 은 인라인 요소처럼 흐르면서 블록 요소 처럼 width, height, padding, margin등을 사용할 수 있는 편리해 보이는 속성이다.

하지만 FF2가 inline-block을 지원하지 않았으며
IE6, IE7은 인라인 요소(span, strong 등)일때만 정상적으로 표현하고, 블록 요소(div, p 등)에서는 단순히 display: block 처럼 랜더링하여 사용할 수 없었는데,
Cross-Browser Inline-Block 에서 CSS 핵을 이용하여 블록 요소에 inline-block 속성을 사용하는 크로스 브라우징을 소개했다. 최근 업데이트 된 FF3가 inline-block을 지원하는 점을 감안하여 FF 전용 핵을 삭제하면 아래와 같다.

display: inline-block;
*display: inline;
*zoom: 1;

이렇게하면 FF3, IE8, IE7, IE6, Opera, Safari, Chrome에서 블록 요소(div, p 등)에 inline-block의 효과를 사용 할 수 있게 된다.

inline-block 예제의 초록색 박스들은 ul과 li로 구성되었으며, li에 inline-block 속성을 주어 박스 높이에 상관없이 마치 인라인 요소들 처럼 정렬되고, float과는 다르게 ul에 text-align: center 속성을 사용하여 가운데 정렬까지 가능하다.

단, IE6, IE7에선 margin-right, margin-left 값이 다른 브라우저에 비해 3px 넓게 조정된다.
결국 *margin-right: 14px 과 같이 핵을 사용하지 않으면 크로스 브라우징이 불가능;ㅂ ;

인라인 요소에 사용하기

사실 IE6, IE7은 인라인 요소에서는 inline-block을 정상적으로 랜더링 한다.
이번 FF3에서 inline-block을 지원하게 된 것을 계기로 실제로 사용 할 수 있을까 테스트 해보았는데, 별다른 핵이나 꼼수없이 inline-block을 사용 할 수 있었지만, 문제는 vertical-align 정렬이다.

vertical-align 속성 중 top, middle, bottom값은 브라우저마다 (주로 오페라, 사파리, IE6, IE7에서) 너무 다르게 표현되어 사용 할 수 없었고, vertical-align: 30px 와 같이 px값을 주는 경우에는 IE6, IE7의 폭이 다른 브라우저에 비해 넓어서 *vertical-align: 22px 와 같은 핵이 필요하다.

vertical-align: 30px; *vertical-align: 22px ;

그렇지 않으면 inline-block을 사용할 인라인 요소와 부모가 같은 다른 모든 인라인 요소에 span등의 마크업을 추가하여 vertical-align값을 주어야 한다;ㅂ ;

IE8 버그

여차 저차 해서 inline-block을 사용한다 하더라도, IE8에서만 나타나는 오류에 부딪히게 된다.
오류사항과 그에 대한 해결책을 자세하게 설명된 블로그가 있다.
IE8 inline-block 버그

참 편리한 속성인데, 브라우저의 미지원이나 브라우저에 따라 다르게 랜더링되는 바람에 CSS 핵 없이는 사용 할 수가 없네;ㅂ ;

반투명 png 사용하기

2009-08-20T13:56:31+09:00

1. AlphaImageLoader와 expression을 이용한 방법

img

자바스크립트에 함수

function setPng24(obj) {
obj.width=obj.height=1;
obj.className=obj.className.replace(/\bpng24\b/i,'');
obj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+ obj.src +"',sizingMethod='image'); "
obj.src='./img/blank.gif'; // 1*1픽셀의 투명한 blank.gif 이미지가 반드시 존재해야 한다.
return '';
}

를 만들고

CSS에

.png24 {tmp:expression(setPng24(this));}

라는 클래스를 만들어서 해당 img 요소 자체에 class로 사용한다.

제대로 표현되지 않을 경우, 자바스크립트 setPng24 함수에서 blank.gif의 경로를 절대경로로 넣는다.

background

해당 CSS에

background: url("/img/bg_box.png") no-repeat 0 0;
_background: none;
_filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(src="/img/bg_box.png", sizingMethod="images");

와 같이 사용한다.
제대로 표현되지 않을 경우, 이미지 경로를 절대경로로 넣는다.

※ IE6에서 주의할 점

png24를 사용한 img 요소 자체에 padding이나 border를 넣을 수가 없다. (blank.gif 파일의 사이즈를 기준으로 padding이나 border가 적용된다.)
AlphaImageLoader를 적용한 요소에 width나 height값을 주더라도 png이미지 사이즈에 맞춰져 변형될 수 있으며, AlphaImageLoader를 적용한 요소에 width나 height값이 없을 경우 표현되지 않을 수 있다.
나라디자인 블로그에서 알게 된 사실인데, width나 height가 들어가야 하는 것이 아니라, hasLayout 속성이 없을 경우에 표현되지 않는 것이므로 zoom:1 같은 hasLayout을 만들어 주는 속성을 추가 해도 된다.
hasLayout을 만들어주는 속성들은 On having layout — the concept of hasLayout in IE/Win 에서 참고한다.
부모 요소가 png배경일 경우, a요소에 마우스로 접근할 수 없는 현상이 있는데, a요소에 position: relative를 주면 해결 할 수 있다.
png배경을 사용한 요소에 position: relative, position: absolute 등의 position 값이 들어가면 a요소에 position: relative 를 해주어도 a요소에 접근할 수 없는 문제가 해결되지 않는다.
배경이미지 반복은 안되지만 배경이미지를 요소 크기많큼 늘려서 표현하는 scale옵션이 존재한다.

2. iepngfix.htc를 이용하는 방법

htc.zip

(1) iepngfix.htc 파일에서 IEPNGFix.blankImg 나 var blankImg 등의 blank.gif 파일 경로를 실제 파일 경로로 수정한다.
(2) 원하는 class에 behavior:url(./htc/iepngfix.htc); 속성을 넣는데, iepngfix.htc 경로를 실제 파일 경로로 수정한다.

※ IE6에서 주의할 점

img 요소 자체에 padding이 들어가면 png 이미지의 사이즈가 의도치않게 늘어나버린다.
html페이지를 모두 로딩한 후에 실행되는지, 처음에 png의 회색 배경이 잠깐 보였다가 그 후에 정상적으로 보여질 수 있다.
배경이미지를 반복할수도 없고 크기를 늘릴 수도 없다.

기계식 키보드 FILCO ZERO 중고로 구입!

2009-09-07T21:10:52+09:00

중고 기계식 키보드를 한대 마련 하였다. 단돈 3만원!

같은 회사에 다니는 도영씨가 자기는 이제 쓰지 않는다며 싸게 팔아주었다.

FILCO ZERO 모델로, 신제품은 아닌 것 같아서 기계식 키보드의 체험판이란 기분에 사게 되었는데, 이것이야 말로 신천지 별천지! 멤브레인과는 비교가 되지 않을 편안한 키감에 온몸이 소름이 쫙 돋았다.

회사에서 일하다가 집으로 돌아와 아이락 슬림키보드를 두드리니까, 이거야 원. 왜이렇게 키보드 치는데 힘이 많이 들어가는 기분인지 불편해 죽겠어=ㅂ =

그렇다면 리얼포스나 마제스터치는 대체 얼마나 좋다는거지;ㅅ ;

사무실이 넓어서 그런지 복도건너 옆셀에서 기계식 키보드를 이렇게나 많이 가지고 있었는지 조차 몰랐고, 한번 타이핑해봐도 되냐고 양해를 구한뒤 직접 사용해보니 소음도 그닥 크지 않은듯 했다.

하지만 막상 실제로 작업할 때 사용하게 되니까 소음이 신경쓰이긴 한다. 그야말로 타타타타타타타탁 소리가 시원시원하게 들리는게, 처음엔 팀원들의 원성이 자자했지만 이제는 모두가 익숙해졌는지 아무소리 안한다.

단지, 키보드를 강하게 치는 진아언니는 '난 절대로 기계식 키보드는 못쓰겠다.'라고ㅋㅋ