Category Archives: 개발개발

WorldNewsInEnglish 디자인 적용 중

트리플 모니터를 이제야 제대로 쓰네ㅋㅋㅋ

트리플 모니터를 이제야 제대로 쓰네ㅋㅋㅋ

World News in ENGLISH - http://english.daylog.me

예전에 한번 포스팅했던 영어사진기사 모음 페이지의 디자인 작업. 너무나 멋진 시안이 나와버리는 바람에, 토요일 내내 별로 잘하지도 못하는 퍼블리싱에 열중하고 있다. 위의 사진은 지금 내 방인데, 제일 왼쪽의 윈도우PC 모니터에서는 IE, Chrome for Windows를, 아이맥 듀얼에서는 왼쪽부터 차례로 Safari for Mac, Chrome for Mac, Firefox for Mac 을 테스트하고 있다. (제일 오른쪽은 디자인 시안 이미지)

원영이형이 원래 짱인줄은 알고 있었지만, 그 커다란 기대보다 한참 이상으로 멋진 시안을 뽑아주셔서, 인규한테 부탁하고 기다리고 할 겨를도 없이 혼자 막 두드려버렸네; 기본적인 기능 차이는 거의 없다시피 하지만(사전을 선택할 수 있는 기능이 붙었는데 아직 이건 구현 전ㅋ) 기깔나는 UI 디자인이 붙는 것만으로 이 페이지를 막 쓰고 싶게 만든다.

전반적으로 iOS7 부터 대세가 된 minimalism 한 디자인이 깔끔하게 적용되어 있고, 사진 기사를 불러오는 본 페이지의 특성을 이용하여, 전체 배경을 살짝 어두운 흐린 이미지의 기사 이미지로 채우는 방식을 쓰고 있다. 이 방식은 너무 마음에 들어 이러한 기법을 적용할만한 다른 서비스는 뭐가 있을까 고민하게 만들 정도ㅋㅋ 다만 배경에 css3 필터를 쓰는 방식이 오로지 Chrome for Mac(내 주력 브라우져ㅠ)에서 일으키는 버그를 아직 잡지 못했다. 이거만 잡으면 완벽한 기법인데; 이 부분은 인규하고 같이 고민을 좀 더 해봐야겠다.

한가지 더 너무 마음에 드는 부분은, 전체 페이지에 한글이 한 글자도 안 들어가기 때문에(iframe 으로 불러오는 사전 제외하고) 구글 웹폰트를 이용해서 가독성/아름다움을 동시에 추구할 수 있는 타이포그라피를 적용했다는 것이다. 한글은 폰트 용량이 커서 웹폰트 적용이 좀 꺼려지는데 반해 영어의 경우는 그런 문제가 없어서 참 좋다. 나중에 시간 잡아서 한글 웹폰트 적용에 관한 문제들을 좀 잡아봐야겠음.

일단 PC용으로만 만들어놓은 상태라, 반응형으로 편집해 모바일에서도 좋은 가독성을 유지할 수 있도록 만들려고 한다. 껍데기만 만들어놓고 기능 구현은 미뤄놓은 것들도 순차적으로 작업할 예정. 모처럼만에 내가 만든 무언가에 설렘을 느낀다. 즐겁구나ㅋㅋ

영어 연습을 위한 영어뉴스사진기사 모음 페이지

최근에 ‘애로우 잉글리시’라는 비교적 잘 알려진 영어학습법 책을 읽고, 꽤 괜찮은 방법이라 생각되어 이 방법대로 영어를 연습하고 있다. 영어에 대한 감을 잡는 방법으로 괜찮다는 Jason님의 추천도 있고, 유툽에서 찾아본 동영상도 꽤 설득력이 있었음. 주된 내용은 김샘영어에서 설명하는 것과 약간 비슷하면서도 다른데, 핵심은 얼추 비슷하다고 볼 수 있다.

한국어는 어순이 없는 언어인 대신 조사를 통해 해당 어구가 어떤 역할을 하는지가 결정되는 반면, 영어는 어순에 기초한 언어이므로 조사가 없는 대신 단어가 나오는 순서가 그 문장의 의미를 결정한다는 것이다. 김샘은 이 부분을 설명하면서 ‘아기가 언어를 배우는 법’으로 넘어가고, 애로우잉글리시에서는 ‘이러한 사고방식을 이해하는 법’으로 넘어가는 차이점이 있는데, 그 차이점이 곧 두 접근이 어떤 다른 학습법을 만들어내냐를 결정한다고 보면 되겠다. 한때 열심히 몰두하던 김샘영어를 잠시 접어두고 이 방법에 집중하게 된 계기는, (사실 중간에 더 많은 영어학습법을 거쳐감ㅠ) 다음번에 포스트로 정리해서 올리도록 하겠다.

아무튼 애로우잉글리시의 공부법 중 상당히 비중있게 다뤄지는 부분 중의 하나가 영어로 된 사진 뉴스기사를 통한 공부법인데, 이 방법을 시도해보려고 참 여러 사이트를 뒤지고 찾았다. 그런데 아무리 뒤져도 영어로 된 사진 뉴스 기사를 보기 편하게 깔끔히 정리해놓은 곳이 없었음. 그러다가 그나마 제일 괜찮은 로이터통신 사진 기사 페이지를 보고 있는데 이 페이지가 AJAX 방식으로 구현된 것을 발견. 오호라, 간단히 크롤러 만들어서 괜찮은 기능 붙이면 참 쓸만하겠구나, 하고 하루만에 만든 페이지가 있다.

http://english.daylog.me

스크린샷 2014-01-01 오후 10.51.43

당연히 디자인 따위 없는 plain-page ㅋㅋㅋ 새로고침(혹은 아래의 버튼)을 누를 때마다 매번 새 사진 기사가 뜨고, 모르는 단어가 있으면 클릭 즉시 오른쪽의 프레임에 네이버 영어 사진을 띄워준다. 기존의 영어공부 방법처럼 해석하듯이 앞뒤를 오가지 않고, 모르는 단어가 나오면 스피디하게 오른쪽의 사전창에서 skimming 하는 방식으로 쓰기 위함이다. 이틀째 쓰고 있는데 마치 문장을 듣고 있을때와 마찬가지로 휙- 하고 읽을 수 있는데 큰 도움을 준다.

현재까지 크롤링 된 사진 기사 수는 대략 7만 7천개. 지속적으로 크롤링을 돌리고 있어서 무서운 속도로 올라가는 중인데, 이것 때문에 멀쩡하던 내 서버에 용량이 꽉 차서 한참을 정리해야 했다ㅋㅋ 이 정도면 기사의 숫자 자체가 그렇게 의미 있지 않을 거라 판단하여, 적당히 10만개쯤 채운 다음 크롤링을 중지할 예정이다. (내 서버의 용량은 소중하니까)

혼자 영어 연습하는데에 일단 매우 잘 쓰고 있고, 일부 지인들에게 공개한 결과 괜찮은 평을 듣고 있다. 좀 더 써보다가 확신이 들면 간단하게나마 디자인 입히고 반응형으로 설계해서 구글 애드센스나 하나 붙여볼까함. 크게 돈은 되지 않겠지만, 별다르게 돈 버는 구석이 전혀 없는 내 서버가 밥값을 하는 정도는 되지 않을까ㅋㅋ

많은 분들이 들어와서 보진 않겠지만, 여기까지 들어오신 분이라면 한번씩 써보고 추가했으면 하는 기능이나 바뀌었으면 하는 부분에 대해 댓글 달아주시길 바람.

 

Facebook SDK 연결 시 KeyHash

스크린샷 2013-12-09 오후 5.49.31

페이스북 개발자 계정에 들어가 앱을 등록하고 안드로이드 설정을 하려면 보이는 바와 같이 Key Hashes 를 등록하라고 나온다. (보안을 위해 아이튠즈 미니플레이어로 가림ㅋㅋ)

안드로이드에서 사용하는 키스토어에는 두가지 종류가 있는데 debug 용과 production 용이 있다. 너무도 당연한 얘기지만 테스트를 위해서는 debug용이 필요하고, 실제로 스토어에 올릴 때는 production용이 필요함. 양쪽 모두를 테스트하려면 여기서도 두개 모두 입력해야한다. 아래는 두가지 키스토어를 페이스북용 키해시로 추출하는 명령이다.

for debug

keytool -exportcert -alias androiddebugkey -keystore debug.keystore | openssl sha1 -binary | openssl base64

for production

keytool -exportcert -alias (#keystore alias) -keystore (#keystore_path) | openssl sha1 -binary | openssl base64

여기서 볼드체로 표현한 부분이 개발환경에 따라 수정해야 할 부분이다. 일단 디버그용 키스토어의 경우 debug.keystore 파일이 어디 있는지 찾아야 cert 를 추출할 수 있는데 맥의 경우 ~/.android/debug.keystore 에 있다. 윈도우는 뭐 어디 있겠지(ㅋㅋ) 프로덕션용 키스토어는 플레이스토어에 올리기 위해 만든 키스토어를 사용하면 된다. path 와 alias 모두 그거 만들때 직접 입력한 것일테니 모르면 안된다. (다시 만드는 거 말고는 답이 읎다)

keytool 이거 java 로 만들어진 코드인데 java 답게 UTF-8 터미널 환경에서 한글이 죄다 깨진다. 이런 경우

java -Dfile.encoding=utf8 sun.security.tools.KeyTool …

이렇게 입력하면 한글이 제대로 보인다. 뭐 keytool 사용법 체크하는 용도 말고는 쓸 데가 그닥 없어서 깨지는 그대로 쓰기로 한다. 다만 저거 깨지는게 대체 뭔가 하면서 찾아봤을뿐ㅋ

 

디버그 할 때는 잘만 되던 ‘페이스북 로그인’이 스토어에 올리자마자 먹통이 된다면 100% 이 문제라고 보면 되겠다.

 

PHP로 C2DM 푸시 이용하기

0.

아이폰의 푸시 서비스는 애플에서 제공하는 APNS(Apple Push Network Server)를 이용한다. 개별 아이폰 기기를 식별하는 udid 와 앱스토어의 개발자 계정만 갖고 있으면 푸시 서비스가 가능한 것. 왜 그랬는지는 도무지 모르겠지만 얼마전까지만 해도 안드로이드는 그러한 서비스를 갖고 있지 않았다. 따라서 무진장 귀찮게 커스텀 푸시 서비스를 구축하거나, 엄청난 배터리 소모와 트래픽을 요구하는 polling 방식을 사용할 수 밖에 없었던 것. 구글이 뒤늦게나마 정신 차려서 만든 것이 C2DM. 구글이 개발자에게 제공하는 푸시 네트웍 서버 되시겠다.

1.

안드로이드 내부에서 설정하는 부분은 그렇게 어렵지도 않거니와, 참고자료가 무진장 많다. 따라서 설명은 생략.
나보다 훨씬 더 잘 설명해주실 분들의 링크로 대신한다.

http://blog.naver.com/PostView.nhn?blogId=huewu&logNo=110087032264
http://eddykudo.com/91
http://code.google.com/android/c2dm/

2.

안드로이드 쪽의 개발은 전혀 문제가 없었는데, 전혀 문제 될 거라 생각하지 못했던 서버 쪽에서 문제가 발생했다.
구글이 제공하는 친절한 예제는 죄다 자바 서블릿 기반이라 PHP 로 만들어야 하는 내게는 쓸데 없는(그리고 머리 아픈) 자바 코드일 뿐이었다.
뭐 어쨌든 그 덕에 한동안 쓸 일 없었던 curl 을 징그럽게 공부했다. (그러나 늘 그렇듯 풀고보니 사소한 실수였음)

[code php]

$ch = curl_init(); 
 
curl_setopt($ch, CURLOPT_URL, "https://www.google.com/accounts/ClientLogin"); 
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); 
 
$data = array('accountType' => 'HOSTED_OR_GOOGLE', 
'Email' => '아이디', 
'Passwd' => '비번', 
'source'=>'test-1.0', 
'service'=>'ac2dm'); 
  
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0); 
curl_setopt($ch, CURLOPT_POST, true); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 
curl_setopt($ch, CURLOPT_POSTFIELDS, $data); 

$result = curl_exec($ch);
$auth = substr(strstr($result, "Auth="), 5);
$auth = substr($auth, 0, strlen($auth)-1);

curl_setopt($ch, CURLOPT_URL, "https://android.apis.google.com/c2dm/send");

$data = "registration_id=등록아이디"."&collapse_key=1"."&data.msg=메세지";
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);

$headers = array(
    "Content-Type: application/x-www-form-urlencoded",
    "Content-Length: ".strlen($data),
    "Authorization: GoogleLogin auth=$auth"
);
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);

$result = curl_exec($ch);
echo $result."\n";

curl_close($ch);

[/code]

정리 전혀 안된 명백한 테스트코드.
php 의 curl 모듈(일반적으로 기본설치)을 이용해 구글 ClientLogin 의 Authentication 을 획득하고, 그 복잡다단한 키를 헤더에 포함하여 c2dm 서버에 날리면 된다.
아아주 쉽다.

3.

사실 저 부분에서 포인트는

[code lang-php]
$auth = substr($auth, 0, strlen($auth)-1);
[/code]

달랑 요 한 줄이다.
보는 바와 같이 끝에 붙은 글자 하나 날리는 간단한 구문.
요 한 줄 때문에 한나절은 꼬박이 삽질했다.
단일 헤더 프로퍼티에는 절대, 무조건, 반드시! 개행문자가 삽입되면 안된다.
그런데 Google ClientLogin 으로 요청하면 SID, AUTH 등의 개별 키들을 개행문자로 구분해버리니 쉴 새 없이 Unauthorized 메세지가 뜬 것이다.

4.

비전공자가 보면 귀신 시나락까먹는 소리고, 이 블로그 방문객의 대다수가 비전공자이기 때문에 요런 글 웬만하면 안 쓰자-라는 주의였는데.
일하면서든, 혼자 뚜닥거리면서든 이렇게 작은 경험 올려주시는 많은 개발자 분들 덕택에 쉽게쉽게 갈 때가 많아
나름 보은의 차원에서 짧게 두드려봤다.

덧,
혹 C2DM 시도하다 해결되지 않는 문제가 있다면 댓글 남겨주시길.
해결은 못 해드려도, 같이 고민은 해드릴게요. ㅋ

dropbox_my_account.png

클라우드 컴퓨팅 공유서비스 Dropbox

0.

오랜만에 블로그다운 포스팅 하나 한다.
(한동안은 싸이스러운 일상 잡담과 우울/사색 휴지통이었음 -_-)

클라우드 컴퓨팅(Cloud Computing) 이라는 용어는 CS 전공자가 아니라면 꽤나 생소한 용어다.

그러나 모든 기술이 그러하듯 기술 수준이 상향 되어 사용자와 맞닥뜨리는 순간, 일상 용어가 되는 것을 생각하면,
이제는 서서히 일상 용어가 되어가기 시작했다고 볼 수 있을 것이다.

꽤 오래 전에 본 다큐에서 CS 분야의 미래학자는 이런 소릴 했다.
‘PC 는 사라지고 모두가 네트워크에 연결된 터미널 디바이스가 될 것이다’
당시의 나는 그의 말을 굉장히 공감했는데,
이후 그의 말을 비웃기라도 하듯, PC 시장은 엄청나게 성장했고, 어느덧 보조기억장치는 테라 단위가 됐다.
네트워크의 성장을 낙관하고 PC 하드웨어 시장을 비관한 결과라고 할 수 있을 것이다.

하지만 이제 그의 말이 서서히 현실이 되어가고 있다.
원래 미래학자들이 떠드는 이야기들은 언젠가는 분명 현실이 된다.
그 ‘언젠가’가 언제쯤일지를 그들도 모른다는 게 문제일 뿐. ㅋ

1.

오랜만에 하는 포스팅이라 헛소리 좀 해봤다.

현재 내가 쓰고 있는 컴퓨터는 총 6대.
메인PC, 공유서버용PC, 노트북 P300, 맥북프로, 아이폰, 옵티머스큐
(으악; 써놓고 보니 이 정도로 많았나 싶네; ㅋ)

이렇게 여러대의 컴퓨터를 쓰게 되면 너무도 당연하게 발생하는 문제가 바로 동기화다.
순서없이 이곳 저곳에서 작업된 결과들이 있는데, 어디가 원본이고 어디가 수정본인지 알 수가 있어야지.

회사/집 이든 학교/집 이든 PC/랩탑 이든 PC/맥 이든 PC/스마트폰 이든
나 뿐만 아니라 (정도는 다르겠지만) 이와 비슷한 고민을 할 때가 많을 거라고 본다.
이 골아픈 문제들 모두,
Dropbox 를 쓰고 있는 컴퓨터 각각에 설치하고 아주 간단한 설정 하나 해주는 것으로 해결된다.

2.

관련 서비스는 꽤 많다.
이미 쌀나라에선 진작에 대박친 글로벌 서비스 Dropbox.
속도 하나는 대한민국 최고일 수 밖에 없는 KT 의 유클라우드(UCloud),
대한민국 1위 포털의 오지랖 네이버의 N드라이브(Ndrive),
클럽박스로 유명한 나우콤의 세컨드라이브(2ndrive)

일단 네개를 다 써봤다.
꽤나 여러가지 이유가 걸렸지만 가장 컸던 건 지원 OS였다.

Dropbox

UCloud

Ndrive

2nDrive

Web

O

O

O

O

Windows

O

O

O

O

Linux

O

X

X

X

Mac

O

O

X

X

iPhone

O

O

O

O

Android

O

X

O

O

위에 적지도 않은 Apple MobileMe 의 경우는 논할 가치도 없었고,
(맥 전용, 게다가 유료;)
세컨드라이브 역시 무료서비스가 없어 또 제외.
N드라이브는 동기화 클라이언트 자체가 없어 제외했고,
유클라우드는 아이폰 사용자에게 20기가 무료계정이라는 꽤나 파격적인 서비스를 제공하고 있어 한참 써봤으나,
동기화를 지원하는 기기가 최대 2개 밖에 안된다. (모바일 제외)
모바일을 제외하더라도 4대의 컴퓨터를 더 물려야 하는 내게는 충격적이었다.
(사실 속도 때문에 유클라우드로 셋팅을 다 해놨었는데, 마지막으로 셋팅하는 컴퓨터에서 그 사실을 알았다; 젠장;)

하지만 Dropbox 는 다 된다.
조만간 공유서버를 밀고 리눅스로 돌릴까 고민중인 상황이니 (현재는 그냥 윈7)
리눅스마저 지원된다는 것도 굉장한 장점일 수 밖에.

문제는 무료로 제공하는 용량이 단 2GB 뿐이라는 것.
현재는 작업 파일들과 간단한 소스들을 넣어 다니기에 용량이 전혀 문제가 되지 않는 상황이지만,
조만간 문제가 될 상황이 올 수도 있겠다 싶다.
그래서 이미 셋팅해 놓은 유클라우드를 버리지는 않은 상태.
(제발 기기제한 좀 풀어다오 -_-)

3.

사용법은 너무 간단해서 설명할 게 별로 없다.

http://www.dropbox.com/referrals/NTEwNDA0MzI4OQ
(이 링크를 이용하면 내 계정용량이 250MB 늘어남 ㅋ)

요 링크를 타고 들어가서 이름과 이메일주소, 비밀번호를 입력하면 된다.
그 후 해당 컴퓨터에 맞는 설치 프로그램을 다운로드 받고
(똑똑하게도 접속한 위치에 따라 맞는 프로그램을 다운로드 할 수 있게 띄워준다)
설치 시에 i have already dropbox account 를 선택하여, 아까 입력한 이메일주소와 비밀번호를 넣으면 끝.

그러면 내문서에 My Dropbox 폴더가 생성된다. (맥의 경우 도큐먼트 폴더)
그게 다다. 그 폴더에 뭔가를 넣으면 웹을 포함한 등록된 모든 디바이스에 동기화 되는 것이다.
(정확히는 웹만 동기화가 되고 나머지 디바이스들은 컴퓨터가 켜지는 순간 동기화 됨)

사용자 삽입 이미지

6개의 디바이스가 연결된 모습


모바일의 경우엔 다운로드 받는 방법이 다를 뿐(아이폰은 앱스토어, 안드로이드는 마켓)
사용법은 동일하다.
word, ppt, pdf, txt, rtf 등의 파일들은 모바일에서 직접 열어볼 수 있다.

4.

이 녀석 덕분에 여러 컴퓨터를 사용해서 오는 피곤함이 말끔히 사라졌다.
네트워크가 연결된 환경에서라면 굳이 USB메모리가 필요 없을 정도.

성공하는 웹서비스에는 다 이유가 있는 법이다.
임베디드SW공모대전에 제출할 ‘우리지금만나’ 어플도, 내 스타트업 아이템인 ‘데이로그’도 클라우드 컴퓨팅 응용 기술이 꽤나 들어간다.
단순히 사람들의 시간을 절약해주고 편리를 제공해주고, 약간의 재미를 주고 하는 것들이 아닌.
사람들의 생활 패턴, 라이프 스타일을 바꿀 수 있는 힘.
그런 힘이 더 필요하다.

물결 플래시 소스에 관한 공지

물결 플래시에 관련하여 처리해 드려야 할 메일량이 엄청나게 늘어나 있네요.
바쁘다는 핑계로 보통 한 달 주기로 몰아서 처리해드리고 있었는데, 이토록이나 밀려버리다니
기다려주시는 모든 분들께 죄송하단 말씀 먼저 드립니다.

사실 이렇게 밀리게 된 이유는 기존 소스를 조금 수정 중이었는데, 이게이게 아직 완성이 안 되었습니다.
폰트 임베딩 측면에서 기존의 방법이 상당히 무식한 방법을 쓰고 있고, DP 적인 측면에서의 구성도 구리고, 뭐 이래저래 받은 피드백들도 많고, 기타 등등의 이유로 물결플래시 버젼2.0 을 제작 중에 있었습니다.
폰트 임베딩 방식을 swc 컴포넌트를 사용하는 방식으로 바꾸고, 재사용/확장이 용이하도록 클래스를 분리 구성하고, 입력 글자수에 따라 크기를 자동 조정하도록 하는 기능을 추가하고, 적용을 자동화하는 페이지를 제작하고 등등의 일입니다. 뭐, 맘 먹고 하면 하루 안에 끝날 일들이긴 하지만 미루다미루다 이리찔끔 저리찔끔 하다보니 진행 상황이 이리도 지연 됐습니다.

이렇게 글을 쓰는 이유는, 염치 불구하고,
조금만 더 기다려 달라 부탁하기 위해서입니다.
부탁드려요 -.-.-

개발자 떡실신 [출처: 데브피아]

참, 오랜만의, 펌글

개발자 떡실신 시리즈 2009-03-24 오후 5:13:11
 김광일 (nlsng) 번호: 6349 / 평점: (-) / 읽음:113
 
미국 개발자와 일하게 됬는데 내 가방에서 스마트 폰으로 매일 주고받고 블루투스 헤드셋으로 음악,동영상 관람에 갑자기 그 폰으로 전화받고 게임까지 하는것보고 당신은 미래에서 왔는가 하면 떡실신
 
미국 경력 5년차에 나름 고급 개발자와 일하게 됬는데 나 혼자서 DB,CS로직,HTML 심지어 포토샵으로 이미지까지 편집하는것보고 나에게 당신의 정체는 뭔가 우리회사 전체가 하는일을 혼자서 다하고있다 떡실신

다시 실리콘 밸리 업체와 몇번인가 일하게 됬는데 처음에 웹어플리케이션 개발에 본인이 투입되어 같이 작업 그후에 윈도우 어플리케이션 또 본인 투입 이번에 FLEX 프로젝트까지 또 본인 투여 외국업체왈 아니 한국인은 순식간에 랭귀지를 마스터 하는가 하면 떡실신

이번에 영국 개발자 와 일하는데 그때 프로젝트가 겹쳐서 오전에 1번 프로젝트 오후에 2번 프로젝트 투입되는 나를 보면 당신은 정신분열증 환자인가 하면 떡실신

다시 영국개발자 자신은 프로그램을 만드는데 종이와 각종 UML 프로그램으로 열심히 설계를 하는데 본인은 늘하던되로 코딩부터 시작해서 상당히 복잡한 로직을 순 머리로만 혼자 코딩해버리는걸 보고 순식간에 만들어버리자 본인에게 정신과 치료를 권함

독일에 임베디드 개발자 같이 H/W 펌웨어 개발 독일 개발자 나름 장인정신으로 고도의 집중하면 개발하는데 본인은 옆에서 MP3듣고 웹서핑 하고 업무 전화 통화까지 하면서 개발하는것 보고 떡실신

근성있다는 미국 개발자 촉박한 프로젝트에 같이 투입됬는데 미국 개발자 야근까지 하고 GG 반면 한국 개발자는 그냥 오전 8시에 시작해서 다음날 저녁 8시까지 무려 36시간동안 엄청난 노가다로 개발해서 기간을 맞추어 버림 미국 개발자 짐승취급함

독일개발자 개발중 모르는 부분이 있자 커뮤니티에 질문을 올리고 관련 서적을 도서관에서 대출하고 며칠만에 해결 반면 나는 메신저로 창뛰워놓고 몇몇 지인들에게 물어서 수분만에 해결하자 독일개발자 떡실신
 
실리콘 밸리에 업체 본인이 웹사이트,윈도우 어플리케이션 DB,FLEX 심지어 포토샵까지 다루는것 보고 대체 당신의 연봉은 얼마냐 질문 현재 환율로 2만불도 안된다고 하자 떡실신

영국개발자와 같이 근처 놀이공원에 놀러감 사격장발견 본인이 정식 사격자세로 10발중 8발을 만발하자 당신 정체가 물어봄 2년동안 군인이었다는 애길하자 나보고 혹시 CIA 아니냐고 떡실신

개발후 산출물 작업을 하는데 독일 개발자 워드패드와 그림판으로 낑낑되면 대략적인 문서 작성 옆에서 나 파워포인트 엑셀 능숙 능란하게 화려한 스킬로 완전 브로슈어를 만들자 나에게 인생의 재미가 뭐냐고 물어봄

미국개발자 급하고 여건이 안되면 햄버거로 끼니를 떄우기도 하지만 옆에서 컵라면 하나로 철야를 버티는 날 보고 혹시 한국의 노예제도 가 있는것 아니냐고 물어봄

영국개발자 내가 링크드 리스트 어레이 해쉬코드를 등 각종 알고리즘 자료구조를 보지도 않고 그냥 본능적으로 코딩하는것 보고 나에게 과외해줄 생각없냐고 진지하게 상담

미국 에 출장온 한국 개발자들 미국 개발자들 일단 창고에 짐을풀라고 애기하자 영어를 못알아듣고 그곳에 프로젝트 룸인줄 알고 컴퓨터 세팅에 심지어 랜선 설치한다고 천장까지 타서 프로젝트 룸으로 세팅하자 미국 업체 떡실신



웃기지만, 슬픈, 이야기;

002_티스토리메뉴이동.png

< 물결 플래시 > 티스토리 적용법

미루고 미루다 이제야 올립니다.
이 녀석 덕에 자주자주 뿌듯해 하면서도 머리 속에서만 구르고 있는 다른 녀석들에게 우선 순위가 자꾸 밀렸네요.
기존 텍큐 적용법과 크게 다른 점은 없습니다만,
많은 수의 티스토리 유저 분들이 HTML 태그에 경기를 일으키신다는 이야기를 듣고 스샷 좀 찍어봤습니다.
잡설이 길죠?
들어갑니다.


1. 위젯 다운로드 / 압축 해제 / 스크립트 복사

1147572119.zip
스크립트를 제외하곤 기존 파일과 모두 동일합니다.
티스토리는 주소 바뀔 일이 없어 아예 따로 파일을 떼 놔 넣어버렸습니다.
사용자 삽입 이미지압축을 해제하면 요렇게 세 파일이 뜹니다.
script.txt 를 열어 코드를 복사해두세요.


<script language=”javascript”  src=”./images/viewTitle.js” type=”text/javascript”>
</script>
<script language=”javascript”>
showTitle(“./images/”, “viewTitle.swf”, 600, 30, ““, ““, “center”, “0×00000″);
</script>

기다란 설명들 다 필요없고 요것만 복사하셔도 됩니다.
제목의 정렬을 바꾸시려면 center 를 left/right 로 수정하세요.
색상을 바꾸시려면 0×000000 을 수정하세요. (16진수 RGB 입니다)


2. 티스토리 파일 업로드

티스토리 해당 블로그에 로그인 하시면 뜨는 관리자 페이지입니다.

사용자 삽입 이미지스킨-HTML/CSS편집 메뉴를 클릭하세요.

사용자 삽입 이미지요런 창이 뜹니다.
안에 파일 내용은 스킨마다 다를 수 있습니다.
‘파일업로드’ 버튼을 클릭하세요.

사용자 삽입 이미지
눈에 익은 파일업로드 대화상자가 뜨지요?
아까 압축 풀어놓았던 파일들을 찾아 드래그한 후 열기를 클릭합니다.
잘 뒤져보면 images 폴더에 세개의 파일이 업로드 되었을 거에요. 요렇게

사용자 삽입 이미지

3. 스크립트 수정

다시 HTML/CSS 편집 탭을 클릭하고, Ctrl+F 를 누르면 검색 창이 뜹니다.
검색 창에 article_rep_title 을 입력하고 엔터를 누르면 원래의 타이틀 코드가 뜹니다.

사용자 삽입 이미지여기서는

<h2><a href=”“></a></h2>
요 녀석이로군요.
대부분 저런 비슷한 형태니까 찾기 쉬우실 거에요.

찾으신 부분을 아까 복사해 둔 스크립트로 붙여넣기 합니다.
공개/보호/비밀글 마다 따로 서식을 가지고 있는 스킨인 경우 저 작업을 여러번 반복 하셔야 합니다.
다시 Ctrl+F 하셔서 엔터를 누르다보면 나올테니 모두 수정이 됐는지 확인해보세요.

그리고 쭈욱- 내려가면 밑에 ‘저장’ 버튼이 있습니다.
여기서 이거 안 누르시면 적용 된 게 날아가니 주의하세요.


4. 확인

사용자 삽입 이미지예쁘게 적용이 되었네요.
적용하시는 스킨에 따라 정렬과 색상을 바꾸시면 더 이쁘겠지요.
원 글(http://minsangk.com/85) 에 댓글 달아주신 분들 블로그를 둘러보시면 멋지게 적용 된 블로그들이 많으니 참고가 되실 듯 합니다.


나름 쉽게 풀어 쓴다고 썼는데, 쉽게 글 쓰는 데는 영 자신 없어 제대로 설명이 됐는지 궁금합니다.
도움이 되시길 바래요 -.-.-


postscirpt : 스샷을 위해 아이디를 빌려 준 병렬군 감사. (사실 허락 없이 썼음 ㅋ)


09년 2월 23일 수정
 - js 파일에 오류가 있어 앰퍼샌드 이스케이프 문자 처리에 문제가 있었습니다. angle bracket 처리가 안 되는 문제 해결했습니다. 피드백 주신 푸름님 감사합니다. 기존 사용자 분들은 edited1 에 들어있는 js 파일만 기존 파일에 덮어 씌우시면 됩니다.

물결 플래시 타이틀 위젯 [ StreamWave Flash Title Widget ]

위에 보고 계신 녀석이 바로 이 녀석입니다.

제 스스로의 만족치를 거뜬히 넘길 만큼 이쁘게 나와 조심스레 텍스트큐브 스킨 게시판에 올렸었는데, 제 스스로의 예상치를 거뜬히 넘길 만큼 많은 분들께서 관심을 가져주셨습니다. 텍스트큐브 스킨게시판의 글에도 많은 댓글이 달렸고, 제 블로그 링크 글에는 무려 100여개가 넘는 많은 댓글이 달렸네요.

단순히 타이틀만 띄우는 형태에서 텍스트 정렬도 바꿀 수 있고, 색도 변경할 수 있게 되었고, (면봉님 감사합니다) 링크도 걸 수 있게 된 것 (푸룬님, bizbook 님 감사합니다) 다른 분이 만드신 소중한 스킨에 포함 되어 더 많은 분들이 사용 하실 수 있게 된 것 (엔하늘 님 감사합니다) 모두 관심 가져주시고 피드백 주신 많은 분들 덕분입니다.

그리고 사용법에 대한 보다 자세한 매뉴얼 포스트 제작해 주신 더티문라 님도 감사드려요


많은 피드백을 받으며 해결하지 못한 부분이 있었는데, 바로 특수문자 (&, +) 의 처리 문제였습니다. 다른 기호는 괜찮은데 & 와 + 문자는 FlashVars 전달 과정에서 구분자로 쓰이는 바람에 그 뒤에 적힌 모든 제목들이 잘렸던 것이지요. 고민고민 끝에 결국 자바스크립트를 이용해 Percent-Encoding 하는 방식으로 해결 했습니다. 그리고 이왕 자바스크립트에 손 댄 김에, 좀 더 많은 분들이 쉽게 적용 하실 수 있도록 넣는 방식을 조금 더 손 보았습니다.



아래는 새롭게 바꾸어 본 적용 방법입니다.
기존 사용자 분들도 & + 처리를 위해 본 방법으로 수정해주시면 감사하겠습니다.


[#M_새로운 적용법 (보기)|새로운 적용법 (보기)|1. 다운로드 / 압축풀기

1157183336.zip

일단 이 파일을 다운로드 받아 압축을 풀어줍니다.
텍스트큐브 스킨게시판에서 이미 다운 받고 오신 분들은 한번 더 다운 받으실 필요 없습니다.
두 곳에 항상 같은 파일을 올려놓고 있어요.


2. 업로드 하기

계정 사용중이신 분들은 텍스트큐브 설치 폴더에서 적용하고자 하는 스킨이 있는 폴더로 찾아가신 후에 업로드 해주세요. 이건 필수사항은 아니니까 이도저도 귀찮으신 분들은 그냥 계정 루트(보통은 www 나 public_html 이지요?) 에 방금 압축 푼 폴더를 통째로 올려주세요. 단, 올린 경로는 중요하니 어디에 올렸는지 꼭 확인해보셔야 합니다.


3. 스크립트 수정하기

script.txt 파일을 열어보시면 제가 간단히 설명을 달아 놓았는데요.
그 내용을 여기에 옮기면 아래와 같습니다.
<script language="javascript"  src="./viewTitle.js" type="text/javascript">
</script>
<script language="javascript">
showTitle("./", "viewTitle.swf", 600, 30, "", "", "center", "0x00000");
</script>

<!-- 여기서부턴 복사하지 않으셔도 됩니다
// 소스 URL    : 플래시 파일을 업로드 한 주소 (스킨 폴더를 기준으로 한 상대주소)
// 소스 파일명    :  파일명 수정하지 않았다면 필요 없음
// 플래시 타이틀 크기(가로)   :  수정을 권하지 않음
// 플래시 타이틀 크기(세로)   :  수정을 권하지 않음
// 제목 치환자   : 제목 타이틀로 사용하는 경우 수정 필요 없음
// 링크 치환자   : 제목 타이틀로 사용하는 경우 수정 필요 없음
// 텍스트 가로 정렬   : left, center, right 중 택일
// 텍스트 컬러 변경   : 16진수 색상표기법으로 표현함 ( Red = 0xFF0000 ) 기본값: black (0x000000)

위의 스크립트에서 '스킨 주소'라고 된 부분은 꼭 바꿔 주셔야 합니다.
-->
이런 것들에 익숙치 않은 분들이라도, 영어들이 줄줄이 떠 있다 너무 겁먹지 마시고 '스킨주소' 라고 써 있는 부분을 2 에서 적어두신 경로로 수정해주세요. 경로 적으실 때에는 꼭 마지막에 '/' (슬래시) 를 붙여주셔야 합니다.

예를 들면,
minsangk.com 계정에 /skin/lazylog_smoke_msk/flash 경로로 업로드 하신 경우 올바르게 수정된 스크립트는 아래와 같습니다.


<script language="javascript"  src="./flash/viewTitle.js " type="text/javascript">
</script>
<script language="javascript">
showTitle("./flash/, "viewTitle.swf", 600, 30, "", "", "center", "0x00000");
</script>

텍스트의 정렬이나 글씨 색을 수정하고 싶으신 분들은 해당하는 부분을 원하시는 형태로 수정하시면 됩니다.

여기까지 되었다면 수정한 스크립트를 클립보드로 복사해 놓습니다. (Ctrl+C)


4. 스킨 수정하기 (skin.html)

이제 직접 스킨 파일을 열어 수정할 차례입니다.
적용하고자 하는 스킨 파일을 열어 로 검색을 해보세요. (메모장 단축키 Ctrl+F)
앞뒤 태그 잘 확인하시고 넣고자 하는 부분에 붙여넣기 하세요. (Ctrl+V)

그 다음 저장하시고 다시 업로드 하시면 되겠습니다.

텍큐나 티스토리 모두 스킨마다 조금의 차이는 있지만, 공개글/비밀글/보호글을 다르게 출력하는 설정 때문에 [##_article_rep_title##] 을 검색하셨을 때 여러개가 뜰 수 있습니다. 그런 경우 모두를 위에서 복사하신 스크립트로 바꿔주시면 됩니다._M#]

* 티스토리 적용법 바로가기

* 기타 사항

 - 폰트에 포함되지 않은 『』 이런 녀석들은 전부 [] 로 치환되어 표현 됩니다.
 - 일어나 한자 혹은 그 외의 외국어는 전부 빈 네모로 표현이 됩니다. 그와 같은 문자의 사용이 많으신 분들은 사용이 불가능 할 듯 합니다.
 - scriptAccess 를 링크를 위해 always 로 지정해 두었습니다. 개인적인 보안 이슈로 인해 꺼려지시는 분들은 js 파일을 열어 수정하여 사용하세요. (그냥 사용하셔도 물론 별 문제는 없습니다)


적용 중에 문제가 발생했다거나,
기능 추가가 필요하다고 생각하시는 부분이 있다거나,
꼭 이 녀석이 아니더라도 누군가 만들어 주었으면 하는 아이디어가 있다거나,
플래시 소스가 어떻게 생겼나 궁금하시다거나,
현재 제작 중이신 스킨에 적용하려 하신다거나,
그냥 아무 이유 없이 한마디 해야겠다 싶다거나, (ㅋ)

하신 모든 분들은 댓글 남겨주세요.



09년 2월 23일 수정
 - js 파일에 오류가 있어 앰퍼샌드 이스케이프 문자 처리에 문제가 있었습니다. angle bracket 처리가 안 되는 문제 해결했습니다. 피드백 주신 푸름님 감사합니다. 기존 사용자 분들은 edited1 에 들어있는 js 파일만 기존 파일에 덮어 씌우시면 됩니다.

chrome_logo.jpg

크롬, 너무도 구글스러운.

사용자 삽입 이미지
블로고스피어는 온통 크롬 얘기로 한창이다.
나, 명색이 Web Developer 를 꿈꾸는 공학도로서, 이런 측면에서 좀 느린 것은 사실.
열풍이 한 차례 쓸고 지나가고 안재환씨 자살로 잠시 주춤 하는 지금에서야 시도를 해보았다.
잠깐이지만 이런 저런 기능들을 죽 둘러보고, 여러 무거운 사이트들 돌아다니면서 느낀 점은 역시.

빠르다. 구글답다.
그 외에 다른 말이 필요한가;


교수님들 수업 듣다보면 Searching 보다 Googling 이라는 용어를 보다 친숙하게 사용하시는 분들이 늘었다. (물론, 당연하지만, 젊은 교수님들) 그만큼 구글이라는 기업이 가지는 가치가 대단하다는 반증, 또한 구글은 참으로 공학도들 입맛에 맞는 기업 이미지를 갖고 있다는 뜻이기도 하다. 군더더기 없이 깔끔하고, 나무랄 데 없이 스피디하고, 보다보다 직관적인. 이거 다 공학도들이 날마다 하는 일 아닌가. 깔끔한 식을 위해 애쓰고, 조금이라도 빠른 결과를 얻기 위한 방법론을 고구하고, 직관적인 실험 방식을 고민하는 등등의.

나는 구글에 대해서 그다지 호의적이지도 비판적이지도 않은 편이다. 구글은 Creative 한 측면에서는 Apple 에 밀리고, 안정감 측면에서는 MS 에 밀리고, 아무리 Open-Open-Open 해봐야 그래봤자 결국은 기업. 또한 쥐꼬리 반틈만큼 협소한 우리나라 웹 스코프에서 구글링은 뭐 그닥 대단찮다. 네이버 지식인/까페, 다음 까페의 방대한 커뮤니티 자료, 구글링으로 절대 못 이긴다 물론 영어로 된 자료는 대적할 상대항이 없을 만큼 대단하긴 한데 사실 뭐 그렇게 열심히 원문 자료를 찾아 볼 일이 없는 것도 사실이다 필요한 대부분의 원문 자료는 이미 네이버에도 다 올라오거든?

그러나 나는 구글이 추구하는 가치는 (열렬히) 지지한다. 구글의 기업 철학을 한마디로 줄이면,
[ 웹으로 We Are The World ]

핸드폰도 만들어보고, 주파수 경매도 참여하고, 사진 프로그램도 만들어보고, 블로그에 광고 달아 돈도 벌게 해 주고, 이제는 브라우저까지 직접 만드는 그들. 조만간 OS 도 하나 내놓지 않을까 싶기도 한데. 어쨌거나 결론은 닥치고 웹이다. Web Developer 가 되겠다고 마음 먹은 나로선 그들의 based-on-Web 마인드가 무진장 마음에 들 수 밖에.


다시, 크롬으로 돌아와서,
경탄할 만한 스피드를 만끽하다보니 몇몇 문제가 보이기 시작했다. 이미 블로고스피어에 수두룩히 올라온 글의 재탕이 될테니 자세히는 적지 않겠지만. 일단 Active-X 쪽은 말 할 가치도 없고, 좀 이해가 안 가긴 하지만 플래시 처리도 약간의 문제가 보인다. 블로그에서 글 쓰려는 위지윅툴들의 레이아웃이 아예 안 뜨는건 뭥미; (아무튼 그래서 글은 IE로 쓰고 있음)

한번 더, 아무튼 그래서.
그냥 또 무심결에 IE 를 켰는데, 버벅이는 속도에 다시 우울해졌다. 그리고 또 웃긴 건 그렇게 느리게 뜬 페이지가 무지무지 안정감 있게 느껴지는 것이다. 역시 익숙함이란 무섭다. 크롬으로 보았을 때 손상된 레이아웃이 아니었음에도 불구하고 IE 와의 그 약간의 차이가 참 묘한 뉘앙스 차이를 불러오는 것이다. 이걸 적응하는데 얼마나 걸릴 지는 좀 더 써봐야 알 것 같다.


공학도로서 나는, 뭐랄까, 좀,
개멋이 들어가 있다- 할까.
후저분한 레이아웃은 돈 주고 쓰래지 않는 한 못 쓰겠다. (아, 물론 돈 주고 쓰라면 쓴다;)

구글의 경영 철학, 웹을 대하는 마인드는 지지하지만 내가 꿈꾸는 웹은.
그보다 조금은 더 멋지고, 조금은 더 특별한 무엇이었으면 좋겠다.
눈 깜짝할 새 페이지가 뜨지 않더라도, 조금 더 유려하게 흘러준다면 좋겠다.


…그래, 이건,
구글보다는 내가 할 일인 것 같다.
기다려라.