note of paranbyul

Daum에서의 6년

파란 별 — Fri, 13 Aug 2010 12:41:51 +0900

지난 시간들 돌아보고, 이루 말할 수 없는 정리되지 않은 문제들이 산재해 있지만, 그 기억들을 간략히 정리해보자. Daum에서의 6년이다.

풋풋한 신입기의 기억

그때는 토요일에 출근을 했었다. 대부분 그날 0.5일 반차를 냈지만, 신입이라는 명찰에 반차보다는 출근을 선택했고, 지난 지금 그것이 추억으로 남아 있다. 출근을 해도 별로 사람들이 없어서, 어느정도 자유로웠고 출근하는 기분도 가벼워 토요일마다 논현역 4번출구(?)앞의 노점에서 과일주스를 사먹었던 기억이 좋은기억으로 자리잡고 있다. 오후에 친구와의 약속도 설레였고, 토요일 이른아침에 햇살도 싱그러워 보였다. 다시금 그 기분을 느껴보고 싶지만, 현재는 토요일 근무를 하지 않는다. (*그렇다고 토요일 근무를 해보고 싶다는건 아니다! 추억은 추억일뿐.)

그때 당시, 님문화(동료를 호칠할때 '씨'가 아닌 '님'으로 호칭하는 문화) 의 그 신선한 충격과, 씨라는 호칭이 얼마나 거북스러운 표현인지를 다시 생각해보게 했다. 병역특례(산업기능요원) 생활로 사회는 군대라는 통념이 자리 잡았던 나는, 과연 그게 옳바른가에 대해 고민을 하기 시작했었다. 이후로, '사회는 공동체고 누구나 어떤말도 존중해야한다' 라던가 '의사결정은 강제성을 뛰어야한다' 등의 논리를 번복하며 고민하여, 적절히 혼합되어야 한다는 결론을 내렸지만, 둘중 하나를 선택해야 한다면 난 전자(존중)를 택했다. 그때의 결론은 현재까지도 변함이 없다.

나의 서비스들

메신저 서비스를 처음 맡았다. MSN과 nateon이 경합하던 시절에 우리 메신저는 그 밑에 있었다. 각종 이벤트에 연동노력에 여러가지 시도로 시장을 접수 하려 했지만, nateon의 그 파워만큼은 못했다. 하지만, 이 과정에서 웹 메신저를 만들었다. 내 개인적으로 가장 애착이 가는 서비스 결과물(?)이기도 하다. 현재도 열리긴한다.(열리기만;) 이후로 나는, 위젯바(현재는 사라진;;), 카페채팅(잠시;), tv팟, 카페큐브(잠시;)를 거처서 yozm을 맡고 있다. 그 중에 tv팟은 장시간 맡았었는데, 개인적으로 가장 힘든 서비스가 아니었나 싶다. 시기적으로도 지금보다도 더 고민이 많았던 시기였던거 같고.. 여튼 그렇다.

yozm은 카페큐브의 여운이 채 가시기도전에(쉴틈x;;), 단기 프로젝트라며 불려갔었다. 하다보니, 재미도 있고 사람도 좋고 고민꺼리도 많아 정이 들어 버렸다. 아직 빌드되는 과정이라 어떤 모습을 보여줄지는 모르지만, 신규 서비스이고 다양한 시도를 할 수 있어서 가능성은 무한하다고 할 수 있다. 앞으로의 모습에 기대를 걸어보자.

사회생활은 운전과도 흡사

여러가지 딜레마에 빠지며 보내온 시간들이다. 고민이 없고, 걱정이 없어보이는 사람처럼 보일지는 모르겟지만, 난 여느 사람들처럼 수 많은 고민을 하며 살고 있다. 여러가지 고민의 갈래들이 있지만, 그 갈래 중 하나가 바로 '어떻게 사회생활을 해야하냐?'다. 그 중에서도 수 갈래의 고민꺼리들이 던저저 있지만 그래도 어느정도 결론에 도달해 있는, '온전한 사회생활문제'로만 이야기 하고 싶다.

시속 80k로 가야하는 순환국도가 있다고 하자. 그런데 현실은 차들이 100k를 넘나들고 있다. 여기서 내가 원리원칙을 고수하여 80k를 지킨다고 하면, 상황은 어떻게 될까? 결론은 '더 위험하다.' 문제는 원칙이 아니라 주변의 흐름이다. 내가 주변의 흐름을 바꿀수 있다면 좋지만, 대부분의 경우는 그렇지 못하다. 그리고 아직 난 그럴만한 역량이 없다. 나의 고집, 나의 원칙이 분명히 존재 하지만, 사회는 단체생활이다. 주변의 흐름을보고 맞춰야한다. 그래야 내가 언젠간 그 주변의 흐름을 바꿀수 있는 날이 온다.

그리고 현재

'인간은 생각하는 동물이다.' 누구나가 다 고민을 하며 살아가고 있다. 서비스를 좋게하고, ft개발자(ui개발자)로써 개발역량을 키우고, 더 많은일에 욕심을내고, 기본적인 사회생활등에 대한 고민들을 끊임없이 하며 목표를 잡아 갈것이다. daum에서의 6년은 그 과정의 연장선이고, 앞으로도 내 앞에 놓여 있는 과제들을 성실히 풀어가야 겠다.

물론, 즐겁게!

styleSheet 동적으로 적용하기

파란 별 — Fri, 07 May 2010 17:15:37 +0900

Style을 정의할때 우선순위가 있고, 동적으로 "style을 덮어 쓰려면 해당 순위보다 높은 순위에 있어야 한다"를 기본 조건으로 하고 동적으로 style를 변경할수 있는 방법을 알아보자.

style를 동적으로 변경하기 위해서는 각각의 element에 접근하여 CSS text를 넣어도 되지만, 이 방법은 1개의 element style을 바꿀때는 효과적이나 많은 element 들을 한번에 바꾸기에는 비효율적이다. (*각각의 element에 접근하여 수정할때 보다 성능이 월등하다.)

ie(버전 6~8까지 테스트를 한결과) 에서는 doc.createElement("style") 를 작성해서 addendChil를 하면 "메서드 또는 속성 액세스로의 예기치 않은 호출입니다."라는 오류를 내버린다.

그래서 CSS text 덩어리를 한번에 입력하여 변경하는 아래의 방법을 제시한다. 단, ie에서는 stylesheet코드를 addpendChild 하더라도 적용이 되지 않으며 ss1.styleSheet.cssText = cssText; 만으로 동적인 변경이 가능하다.

javascript에서 $가 포함된 String을 replace 할때 주의점

파란 별 — Mon, 18 Jan 2010 18:25:38 +0900

아래 코드가 IE를 제외한 모든 브라우저에서 동일한 현상이 발행한다.

기이한현상.. 왜그럴까요? -_-;

이유는 replace가 뒤에오는 string을 정규식으로 해석을 하려고 해서 발생한 문제다.

replace(/abc(d)ef/, "$1"); 의 경우 abcdef 가 d로 바뀌는데 이건 괄호안에 문제를 대치하겟다는 의미가 된다. 그래서 해당 경우도 $를 같은 형태로 해석해서 발생하는 문제로 사료된다.

하지만, 테스트 케이스의 경우엔 앞의 문제가 정규식도 아닌 string이었음에도 뒤에 $를 특수코드로 인지하는건 버그에 속하는게 아닌가 생각이 든다. 딱히 이것은 모두 string이다라고 하는 메서드를 따로 제공하거나 옵션을 줄수 있도록 지원해야 맞을것 같다.

아래 $가 들어간 정규식의 의미를 보자. replace를 쓸땐 아래 코드들을 피해야가야할 것이다.

http://www.regular-expressions.info/refreplace.html

IE에서만 발생하는 javascript 오류, 잘못된 인수입니다.

파란 별 — Thu, 24 Sep 2009 16:53:51 +0900

IE에서만 발생하는 javascript 오류입니다. 여러가지가 있는데, 그 오류들을 하나씩 정리 하겟습니다.

오류 : 잘못된 인수입니다. 코드를 보시면 아시겠지만, height는 음수값이 들어갈수 없기때문에 발생한 버그입니다. 하지만 IE에서만 이를 문제로 삼으며, 다른 브라우저 (FF,safary,chrome)에서는 음수값을 넣은 라인을 무시하여, 오류를 발생시키지는 않습니다.

이 문제는 오히려 IE가 javascript를 옳바르게 해석하는것 같네요. 라인을 무시하고 erorr를 뱉지 않으면 라인이 무시되었는지 알수가 없지요.

javascript replaceall의 방법에 따른 처리 속도 비교

파란 별 — Thu, 15 Jan 2009 20:16:04 +0900

필자가 아는 replaceall(string to string) 할 수 있는 방법은 아래 3가자로 추려 볼 수 있다. 아래 방법중 가장 빠른 처리 속도를 내는 방법은 무었을까? 브라우저 별로 조사해 보았다.

방법 1 ) split&join을 이용하는 방법

방법 2 ) 정규식을 이용한 방법

방법 3 ) 루프문을 이용한 방법

비교 방법은 5,655,000 개의 문자열을 두개의 다른 문자로 치환하는 방법으로 했다. 3가지 방법 모두를 IE6, Safari, FF3, Chrome 에서 조사 했다.

비교 결과 (단위,Millisecond)

결과를 보면,

방법 3의 while 문을 이용한 방법은 모든 부라우저에서 테스트 할수 없었다. 모두 다운 되버렸다. FF의 firebug에서는 out of memory라는 오류 메시지를 뿌려주었다. 그러므로 쓰면 안되는 방법인것이다.

방법2의 정규식을 이용한 방법은 특이하게 IE에서만 좋은 성능을 발휘했다. IE외에 브라우저 특히 Safari 에서는 성능이 확연하게 떨어졌다. 파이어폭스만 그나마 나은 성능을 보여주고 있다.

방법1은 IE를 제외한 브라우저에서 모두 최고의 성능을 발휘했다. 특히 Chrome 의 경우는 다른 브라우저들에 비해 최고의 빠른 속도를 보여줬다.

필자의 결론,

위 각 브라우저의 성능을 테스트해본 결과 방법 1의 split&join을 이용하는 방법이 정규식을 이용한 치환방법보다 좋으나, IE의 서비스 점유율을 볼때 IE에서 최적의 성능을 보이는 방법 2의 정규식을 이용한 방법을 무시 할수는 없다.

그러므로, 개발자가 할수 있는 가장 좋은 방법은 IE때만 정규식을 치환하는 방법을 사용하고 나머지는 모두 split&join을 이용하는 방법으로 구현하는것이 최선의 방법이 아닐까 한다.

우리나라는 IE6의 비율은 여전히 높다.

파란 별 — Thu, 20 Nov 2008 23:36:58 +0900

W3Counter (http://www.w3counter.com/globalstats.php) 에서 공개한 Web Browser의 사용율을 보면, IE7이 근소차이로 IE6을 앞선 것을 볼 수 있다. 강제 배포가 이루 어지기 전인 2008년 초보다 많은 차이를 보이고 있는 것은 MS의 IE7 배포 전략이 먹혀 들었다고 볼 수 있다.

W3Counter

물론, Firefox가 27%에 육박한다는 점을 볼때, 블로그와 같은 웹 사이트 위주로 배포되고 있는 것 같고, 블로그를 운영하는 유저는 아주 평이한 사용자로는 보기 힘들며 어느정도 고급 사용자들의 수치라는 점을 고려하자. 그리고 리서치 대상도 미국이 26%임으로 이것이 세계적인 추세라고 100% 말하기엔 무리가 있고 어느 정도는 이런 추세로 가고 있다고 봐야겠다.

이제 세계적으로는 IE7의 사용 비율이 높아 지고 있는 시점에 우리나라는 과연 어느정도 일까? 본인이 맏고 있는 서비스의 브라우저 이용 비율을 알아봤다. IE7이 아닌 IE의 비율이 62%이다. 본인이 알기론, 연초 강제 업데이트로 부터 많은 사용자가 IE7로 갈아 탔지만, 아직까지는 IE6의 사용자는 아직 절대적으로 많은 수치다.

필자가 맡은 서비스 비율

이 IE6의 점유율로만 볼때는, 우리가 아무리 웹표준을 지향하고 외치고 있지만, IE6브라우저 자체가 웹표준을 지향하지 않기때문에 웹표준의 의미 자체도 의미가 모호하게 된다.

그럼 여기서 왜 우리나라는 MS의 노력에도 불구하고 유독 IE7의 비율이 낮은 이유를 알아보자. 이유는 아래 두가지로 함축해 볼 수 있다.

1. IE7는 업그레이드 할만한 메리트가 없다.

좀 더 웹표준에 가까운 브라우저로 업그레이드 되었지만, 이건 어디까지나 개발자의 시점에 불과 하고, 사용자가 볼때는 그저 외관이 한 층 세련되게 변했고 탭 브라우징이 추가되었다는 것 뿐이다. 게다가, IE6보다 좀 무겁고 렌더링 속도 또 한 느린 IE7은 일반 사용자라도 쉽게 체감할 수 있는 수준이 었다.

더욱이 우리나라 환경에서는 IE6로도 인터넷을 접하는데는 아무런 장애요소가 없다. 굳이 무겁고 느린 브라우저로 업데이트 할 필요는 없던 것이다.

2. IE7 강제적으로 인스톨 되지 않는다

MS에서는 IE7를 강제 업데이트를 통해서 보급할것이라 했지만, 사실 이 '강제'라는 말은 정확한 표현은 아니다. 통상, 자동 업데이트를 유효하게 하고 있으면, 마이크로소프트가 공개한 보안 업데이트 프로그램 등은, 백그라운드에서 다운로드 및 인스톨 한다. 사용자가 의식 할 것은 없다. 이것은 어찌보면, 강제 업데이트에 속한다고 볼 수 있다.

그렇지만, IE7는 자동 업데이트를 유효하게 하고 있어도, 모르는 사이에 인스톨 되지 않는다. 자동적으로 진행되는 것은, IE7의 다운로드까지일 뿐이다. 백그라운드에서의 다운로드가 종료하면, 데스크탑의 왼쪽하단에 「업데이트의 준비를 할 수 있습니다」라는 메세지가 표시고 이 메세지를 클릭하면, IE7를 인스톨 할지 묻는 윈도우가 표시된다. 이때 사용자는 설치 하지 않음을 클릭하면 설치되지 않는다.

이 두가지 요소로 볼때, 비교적 얼리어답터(early adoptor) 가 많은 우리나라는 성능이 떨어지는 IE7임을 알고 설치 여부를 묻는 질문에 설치를 선택하지 않았을 것이고, 더구나 MS는 프로그램 추가/삭제를 통해서 IE6로 복귀하는 메뉴를 두어서 좀 써보고 무겁다고 판단한 사용자들은 다시 IE6로 회귀했을 가능성이 높다.

몇몇의 사이트를 보면 IE6 이하 브라우저는 아예 지원하지 않는다는 문구를 넣은 사이트도 보이지만, 이는 방문자의 60%에게 서비스를 하지 않는다고 선포한 것과 다름이 없다. 우리의 직업은 웹사이트로 돈을 버는 직업인데, 사용자의 60%를 포기할 수 없음은 당연하고, 절대적으로 IE6를 고려하지 않을 수 없다.

본인이 개발자 입장에서 가장 비표준인 IE6에서 그나마 좀 표준을 지향한 IE7로 업그레이드 하고 싶지만, 그러지 못하는 이유도 거기에 있다.

여담으로 더 한가지 고려할점은, 아직도 1024 * 768 의 해상도를 이용하는 사용자가 많다는 것이다. 최소, 1280 * 1024의 비율은 사용할것 같은데, W3Counter 에서 공개한 차트에서도 그렇고 본인이 맡은 사이트에서도 42%의 비율이 나왔다. 본인은 집과 사무실 모두 24인치의 1920 * 1200 을 쓰는데 좀 놀라운 수치가 아닐 수 없다.

url 파라메터를 javascript로 받기

파란 별 — Fri, 14 Nov 2008 18:47:32 +0900

url prameter 를 javascript 의 json (object)형태로 리턴한다. 간혹 url의 ?로 표시된 prameter를 파싱해서 사용해야할때가 있는데, 이경우 이 function을 이용하면된다. 아래 코드를 살펴보면 알겠지만, url파싱은 처음 호출시에만 하며 이후는 파싱된 object 만을 리턴한다. 이는 개발시 개발되어 테스트된 버전은 아니고, 그냥 생각나서 만들어 본 것으로 이후 버그 발견시 수정될수 있다.

사용방법은 아래와 같다. 존재하지 않는 파라메터를 콜 할경우엔 당연히 undifined를 리턴한다. 적절히 붙여 사용하면 유용하겠다.

Download

getUrlParameter.html

간단한 javascript 페이징 처리

파란 별 — Wed, 12 Nov 2008 12:26:25 +0900

아래와 같은 간단한 페이징 처리를 위한 소스다. ul 태그의 li 태그를 모두 display:none; 시킨 다음에 해당 페이지의 li 태그만 노출시키는 구조이다. 일단 마크없을 다 뿌리기때문에 10페이지 내의 간단한 페이징 처리에 용이하다.

소스코드

this.eleArea = document.getElementById(ele);
		}catch(e){}
		try
		{
			this.eleNumArea = document.getElementById(ele_num);
		}catch(e){}			
		
		function chage (obj, obj_num, classname, maxpage, nowpage )
		{
			if(nowpage > maxpage)
			{
				nowpage = maxpage;
			}else if(nowpage <= 0)
			{
				nowpage = 1;
			}
			obj.className = classname + nowpage;
			obj_num.innerHTML = nowpage;
		}
	}
// ]]>
</script>

<h1>미니 페이징 테스트</h1>
<ul id="PageArea" class="now_page_1">
	<li class="page_1">element 4</li>
	<li class="page_1">element 3</li>
	<li class="page_2">element 2</li>
	<li class="page_2">element 1</li>
</ul>
<div>
	<h2>페이징 버튼</h2>
	<span id="PageLeft" class="tt_new_star_page_l">left</span>
		<span  class="tt_new_star_page_n">
		<span id="NowPageNum">1</span> / 2
	</span>
	<span id="PageRight" class="tt_new_star_page_r">right</span>
</div>

파일 다운로드

minipage.html

롤링 스크립트

파란 별 — Tue, 02 Sep 2008 19:52:33 +0900

대게 실시간 검색어를 표시하는 용도로 쓰이는 롤링 스크립트이다.
DIV 블럭으로 쌓은 UL 태그로 마크업을 작성한 후에 script 를 호출하면, 한줄로 롤링되는 전광판 형태로 구현이 가능하다.

자 일단 demo 페이지를 열어보자. (ctrl + 링크클릭)

Demo

RollingList.html

사용방법

javascript 로 구현한 한글 자소 분리

파란 별 — Tue, 01 Jul 2008 19:57:00 +0900

java 로 짜여진 한글 자소 분리 소스를 발췌해서 javascript 로 바꾸었다. (찾아보니 javascript로된 소스는 없었다.)

사용 방법은 아래와 같다.
array 형태로 리턴되며, string 으로 변환하고 싶으면 join() 메서드를 이용하여 변환하면 된다.

hangulToJaso("한글자소분리");

위 코드 실행시, 리턴값은 아래와 같다.

ㅎ,ㅏ,ㄴ,ㄱ,ㅡ,ㄹ,ㅈ,ㅏ,ㅅ,ㅗ,ㅂ,ㅜ,ㄴ,ㄹ,ㅣ

소스 다운 받기

한글자소분리.html