README

The blog of Heungsub Lee

Subleerunker

SUBERUNKER 스크린샷

중학교 다닐 때 쯤 “똥피하기“라는 게임이 유행했었다. 이 게임의 실제 이름은 “SUBERUNKER”인데 이것을 패러디해 “Subleerunker“를 만들어보았다.

간단히 좌/우 방향키로만 조작하고 떨어지는 불꽃을 피하면 된다. 불꽃을 피할 때마다 점수가 올라가고, 불에 타 죽었을 때 나의 최고점수와 사람들의 최고점수가 기록된다.

JavaScript만으로 개발했기 때문에 V8과 같이 빠른 JavaScript 엔진 없이는 굉장히 느리다. InternetExplorer에서는 ChromeFrame을 설치해야만 하고 Google Chrome이나 Firefox에서는 매우 쾌적하게 즐길 수 있을 것이다.(물론 초 저사양 컴퓨터에선 느리다)

여기에 쓰인 이미지리소스는 죄다 재탕이다. 고등학교 시절 동아리에서 만든 게임 캐릭터와 내 홈페이지 패비콘을 그대로 썼다. 덕분에 하루이틀 퇴근 후 작업하는 것으로 빠르게 완료할 수 있었다.

Project 630: RestProject 630: Run불꽃

불꽃 칩셋
플레이어 칩셋

모두 함께 즐겨보아요.

Back to the early 2000s

2000년에 처음으로 홈페이지를 만들었다. 2000년대 초반엔 네띠앙, 하이홈, 라이코스, 네이버 등에서 제공한 무료 웹 호스팅 서비스 덕에 나모웹에디터나 드림위버 같은 WYSIWYG 툴로 홈페이지를 만드는 사람들이 많았다. 연령대도 아주 다양해서 나를 포함한 많은 초중딩들도 홈페이지 만들기 유행에 동참하였다. 지금은 다른 일을 하고 있을지라도 그 시절에 대해 나와 같이 추억하는 사람들은 결코 적지 않을 것이다.

요즘 문득 그 때가 그리워져 예전에 웹친구(서로 홈페이지를 링크해주는 사이)였다 연락 끊긴 친구들도 다시 찾아보고 당시 작업물들도 발굴해 구경했다. 그러다보니 더더욱 그 때가 그리워져 2000년대 초반의 웹 패션을 복원하고자 이것저것 만들어보았다.

하나는 2000년도 스타일로 만들어본 내 홈페이지 대문이다.

2000년도 스타일로 만들어본 내 홈페이지의 배너

그리운 다음 요소들을 담았다:

  • 윈도우3.1 스타일 16색 패비콘
  • 최적화 메시지
  • 구린 카운터
  • 배너
  • 무단전재 금지 경고문
  • 대문자로 쓰여진 HTML 소스
  • 홈페이지의 얼굴, 대문

2000년도 스타일 대문에 넣은 구린 카운터는 CrazyCounter나 ezCounter를 추억하며 만들었다. 이 카운터는 그때를 추억하는 다른 사람들도 쓸 수 있도록 공개 프로젝트화 하였다.

Cra-ezCounter Logo

이름은 두 카운터 이름을 짬뽕한 Cra-ezCounter로 지었다. 간단히 자신의 카운터를 생성하고 발급된 스크립트를 페이지에 추가하면 카운터가 나타난다. 보라색 테두리와 연두색 7세그먼트 숫자로 이뤄진 기본디자인이 맘에 들지 않다면 마음대로 디자인할 수 있다. 그러니 디자인에 상관 없이 홈페이지에 방문자 수 카운터를 달고싶다면 이것을 쓰면 된다.

Prepare Exit

텀블러 서버가 불안한지 몰랐었는데 낮에 접속이 안되는걸 보고는 나도 홍민희 선배나 달리나음 님처럼 탈출 준비를 해야겠다 생각했다. 다행히 홍민희 선배가 탈출 준비에 사용한 소스가 GitHub에 공개되어있어서 난 그냥 포크해다 날로 먹었다:

https://github.com/sublee/readme.subl.ee

선배가 스크립트를 잘 짜두셨으니 탈출 준비하실 분이 또 있다면 나처럼 포크해서 블로그 주소만 바꿔 사용하면 좋을것 같다.

Reset TeamViewer Preferences

새로 장만한 MacBook Air을 내게 익숙한 환경으로 만들기 위해 iMac 계정을 마이그레이션 시켰다. 5시간이나 걸렸지만 부팅하자마자 익숙한 설정에 내가 쓰던 모든 애플리케이션이 모두 나타나니 내가 여태 이걸 왜 안썼나 싶다.

노트북 거치대

그런데 사무실에서 원격접속을 위해 TeamViewer1를 실행했더니 iMac과 MacBook Air 두 컴퓨터를 하나의 클라이언트로 인식하는 문제가 생겼다. 클라이언트 ID까지 그대로 복사되었기 때문인데 간단히 TeamViewer 리셋시키는 방법을 찾게 되어 공유하고자 한다.

TeamViewer를 종료시키고 Terminal에 다음과 같이 입력한다. 저장되어있는 설정 파일을 지우는 작업이다:

$ rm -f ~/Library/Preferences/com.TeamViewer.Settings.plist

설정파일을 지운 후 TeamViewer를 실행하면 다시 초기화를 진행한다. 클라이언트 ID도 새로 발급되니 파트너 리스트에 추가해주면 끝.

일단 원격접속 문제는 해결했는데 혹시 또 마이그레이션에 의한 빵꾸가 없는지 며칠간 써보면서 마저 체크해야겠다.


  1. 사무실이나 본집에서는 Windows만 사용하는데 집에 있는 Mac으로 원격접속하기 위해 전부터 TeamViewer라는 소프트웨어를 쓰고있었다. 

hongminhee:

아, 최근 정신없이 작업해놓고 블로그에 소식 올리는 것을 까맣게 잊고 있었다.

VLAAH가 대규모로 업데이트되었다. 정확히는, 내부적으로는 처음부터 다시 만들어졌다. 뭐 그 부분은 사용하는 입장에서는 흥미롭지 않은 부분이지만, 그 외에도 서비스의 여러 개념이 많이 달라졌다. 이게 대해서는 공지가 이미 되어있으나 짧게 요약하자면 다음과 같은 주요 차이점이 있다.

예전에는 투표가 곧 의견이었으나, 이제는 투표와 의견이 분리되었다. 즉, 투표를 하지 않고 의견만 쓸 수도 있게 되었다. 예전에는 중복 투표 문제 때문에 하나의 주제에는 한 사람 당 하나의 의견만을 쓸 수 있었고, 이미 의견이 있는데 하나를 더 쓰면 예전에 썼던 의견이 가려졌으나, 이제는 하나의 주제에 여러 의견을 올릴 수도 있게 되었다. 또한 명칭도 “의견”에서 “생각”으로 바뀌었다.
예전에는 의견(생각)이 어떤 주제에 관한 것인지를 정하는 숨겨진 필드가 있었으나, 이제는 그런 필드가 있는 대신 생각(의견) 내용에 특정 주제를 언급(링크)하면 그 주제에 관한 생각(의견)으로 취급하게 되었다. 이 부분이 가장 큰 변화인데, 당연히 생각(의견) 내용에는 갯수에 제한 없이 여러 주제를 언급(링크)할 수 있으므로… 생각(의견) 하나가 여러 주제에 걸쳐서 보일 수 있다.
이전에는 의견(생각)에 부가적으로 태깅을 할 수 있었는데, 이젠 태깅을 따로 하지 못하게 되었다. 예전의 주제 필드와 태그 필드가 명시적인 언급(링크) 문법으로 대체되었다고 이해하면 된다.
이전에는 의견(생각)은 한 줄만 쓸 수 있었는데 이제 여러줄도 된다.
생각(의견) 주제의 모양이 과거에는 /^?\d+$/ 꼴이었으나 지금은 /^\*\d+$/ 꼴이 되었다. 쉽게 말해 물음표(?) 대신 별표(*)를 쓰게 되었다는 소리다. 이 블로그를 읽는 대부분의 개발자들은 짐작할 수 있겠지만, 쿼리 스트링과 충돌하는 문제 때문에 그렇게 되었다.
의견(생각) 마크업 문법이 있었는데 주제를 링크(언급)하는 [[…]] 빼고는 다 없앴다. 그래도 Twitter처럼 URL을 그냥 붙여두면 자동 링크는 된다. 강조 문법 등이 사라졌다고 생각하면 된다.
그리고 암담한 소식이 하나 있는데 아직 API가 제대로 동작하지 않는다. 게다가 하위호환성을 전혀 제공하지 않고 있다;; 내가 예전에 API 상하위호환 관련해 여러 말을 했던 것을 생각하면 매우 부끄러운 부분이고 반성중이다… 현재는 읽기 전용 API만 제공하는데 아직 명세가 확실히 정해진 것은 아니니 사용하더라도 바뀔 수 있다는 점을 감안해주기 바란다. 아무 페이지에 가서 Accept 헤더를 원하는 포맷으로 날려주면 된다. 현재는 XML (text/xml), JSON (application/json), YAML (text/yaml), Property List (application/plist+xml), PHP serialize()/unserialize() 데이터 (application/vnd.php.serialized) 정도를 지원하고 있다. 간단하게 curl을 사용해서 요청을 날려보면 다음과 같은 응답이 온다.

$ curl -H"Accept: text/yaml" http://vlaah.com/~dahlia
birthday: 1988-08-04
followers count: 174
followings count: 478
gender: male
minuses count: 0
name: ~dahlia
nick: 홍민희
normalized name: ~dahlia
pluses count: 174
thoughts count: 208
type: person
usual name: ~dahlia
$ curl -H"Accept: application/json" http://vlaah.com/VLAAH
{"plusesCount": 83, "normalizedName": "vlaah", "name": "VLAAH",
 "usualName": "VLAAH", "minusesCount": 32, "thoughtsCount": 184,
 "type": "topic"}

hongminhee:

아, 최근 정신없이 작업해놓고 블로그에 소식 올리는 것을 까맣게 잊고 있었다.

VLAAH가 대규모로 업데이트되었다. 정확히는, 내부적으로는 처음부터 다시 만들어졌다. 뭐 그 부분은 사용하는 입장에서는 흥미롭지 않은 부분이지만, 그 외에도 서비스의 여러 개념이 많이 달라졌다. 이게 대해서는 공지가 이미 되어있으나 짧게 요약하자면 다음과 같은 주요 차이점이 있다.

  • 예전에는 투표가 곧 의견이었으나, 이제는 투표와 의견이 분리되었다. 즉, 투표를 하지 않고 의견만 쓸 수도 있게 되었다. 예전에는 중복 투표 문제 때문에 하나의 주제에는 한 사람 당 하나의 의견만을 쓸 수 있었고, 이미 의견이 있는데 하나를 더 쓰면 예전에 썼던 의견이 가려졌으나, 이제는 하나의 주제에 여러 의견을 올릴 수도 있게 되었다. 또한 명칭도 “의견”에서 “생각”으로 바뀌었다.

  • 예전에는 의견(생각)이 어떤 주제에 관한 것인지를 정하는 숨겨진 필드가 있었으나, 이제는 그런 필드가 있는 대신 생각(의견) 내용에 특정 주제를 언급(링크)하면 그 주제에 관한 생각(의견)으로 취급하게 되었다. 이 부분이 가장 큰 변화인데, 당연히 생각(의견) 내용에는 갯수에 제한 없이 여러 주제를 언급(링크)할 수 있으므로… 생각(의견) 하나가 여러 주제에 걸쳐서 보일 수 있다.

  • 이전에는 의견(생각)에 부가적으로 태깅을 할 수 있었는데, 이젠 태깅을 따로 하지 못하게 되었다. 예전의 주제 필드와 태그 필드가 명시적인 언급(링크) 문법으로 대체되었다고 이해하면 된다.

  • 이전에는 의견(생각)은 한 줄만 쓸 수 있었는데 이제 여러줄도 된다.

  • 생각(의견) 주제의 모양이 과거에는 /^?\d+$/ 꼴이었으나 지금은 /^\*\d+$/ 꼴이 되었다. 쉽게 말해 물음표(?) 대신 별표(*)를 쓰게 되었다는 소리다. 이 블로그를 읽는 대부분의 개발자들은 짐작할 수 있겠지만, 쿼리 스트링과 충돌하는 문제 때문에 그렇게 되었다.

  • 의견(생각) 마크업 문법이 있었는데 주제를 링크(언급)하는 [[…]] 빼고는 다 없앴다. 그래도 Twitter처럼 URL을 그냥 붙여두면 자동 링크는 된다. 강조 문법 등이 사라졌다고 생각하면 된다.

그리고 암담한 소식이 하나 있는데 아직 API가 제대로 동작하지 않는다. 게다가 하위호환성을 전혀 제공하지 않고 있다;; 내가 예전에 API 상하위호환 관련해 여러 말을 했던 것을 생각하면 매우 부끄러운 부분이고 반성중이다… 현재는 읽기 전용 API만 제공하는데 아직 명세가 확실히 정해진 것은 아니니 사용하더라도 바뀔 수 있다는 점을 감안해주기 바란다. 아무 페이지에 가서 Accept 헤더를 원하는 포맷으로 날려주면 된다. 현재는 XML (text/xml), JSON (application/json), YAML (text/yaml), Property List (application/plist+xml), PHP serialize()/unserialize() 데이터 (application/vnd.php.serialized) 정도를 지원하고 있다. 간단하게 curl을 사용해서 요청을 날려보면 다음과 같은 응답이 온다.

$ curl -H"Accept: text/yaml" http://vlaah.com/~dahlia
birthday: 1988-08-04
followers count: 174
followings count: 478
gender: male
minuses count: 0
name: ~dahlia
nick: 홍민희
normalized name: ~dahlia
pluses count: 174
thoughts count: 208
type: person
usual name: ~dahlia
$ curl -H"Accept: application/json" http://vlaah.com/VLAAH
{"plusesCount": 83, "normalizedName": "vlaah", "name": "VLAAH",
 "usualName": "VLAAH", "minusesCount": 32, "thoughtsCount": 184,
 "type": "topic"}

qr.js

arachneng:

최근에는 아무 생각 안 하고 살고 있기 때문에 삽질의 양이 좀 줄어든 것 같다. 그래서 지난 주말에 삽질뇌를 깨우기 위하여 QR 코드 생성기를 자바스크립트만으로 만들었다. 이름은 일단 qr.js로 생각하고 있다. 아직은 대강 짠 거긴 하지만 라이브러리 형태로 쓸 수 있을 정도로는 만들었으니, 소스 보시고 관심 있으신 분은 알려 주시라.

강성훈 씨는 qr.js를 만들기 위해 일본어로 된 JIS X 0510를 직접 번역하여 스펙을 익히셨다고 한다. 정말 대단하다!

2010 Review

2010년 결산, 회사에서 진행한 프로젝트나 비밀프로젝트는 제외한다.

화장실에서 바쁜 비즈니스맨이 된다

2010년에 한 것:

  • 아이디를 heungsub에서 sublee로 변경
  • 본격적인 GitHub 활동 시작
  • 목적을 달성했으므로 me2DAY 애플리케이션들 메인테인 포기
  • MacBook 고장 ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
  • 27” iMac(종종 i7Mac이나 IMAX라고 부른다) 구매 + RAM 16GB 장착

2010년 동안 작업한 것:

irclog

요즘 IRC 사용할 때 Irssi의 프록시 기능으로 항상 채널에 상주해있도록 하고, 메신저 클라이언트인 Adium이나 Pidgin으로 대화창을 데스크탑에 띄워놓으며, 수집된 대화기록은 웹에서 irclog로 보고있는데 이정도로 쾌적한 채팅환경은 처음인 것 같다.

hongminhee:

만들어서 혼자 쓰기만 하고 있던 irclog를 PyPI에 올렸다. irssi 로그를 웹에서 볼 수 있게 해준다. easy_install이나 pip로 설치할 수 있다.

$ pip install irclog

설치한 다음에는 아래처럼 웹 서버를 띄울 수 있다. (<server>, <channel> 등은 저장 경로 패턴.)

$ python -m irclog.web.server --port 80 \
  $HOME'/.irssi/log/<server>/<channel>/<date:%Y-%m-%d.log>'

자신이 쓰고 싶은 WSGI 서버가 따로 있으면 그걸 써도 된다. WSGI 애플리케이션은 irclog.web.Application 클래스의 인스턴스를 만들어서 쓰면 된다.

http://packages.python.org/irclog/

Favicon Gallery

지금까지 만들었던 패비콘들을 모아 Git 저장소(GitHub에서 호스팅)를 만들고 한눈에 볼 수 있도록 간단한 갤러리 페이지를 만들었다.

패비콘갤러리 스크린샷

갓허브(GitHub)께서 JSONP API를 지원해주는데, 그 덕에 클라이언트 사이드만으로 동적인 갤러리를 만들 수 있었다. Object API로 저장소 내 파일 목록을 받아와 JavaScript로 적절하게 마크업하는 방식이다. 갤러리 소스 또한 gh-pages에 올려둠으로써 모든걸 GitHub에서 호스팅 받게 했다(트래픽 커질 일 없는 페이지이긴 하지만).

참, IE에선 아이콘들이 안보이길래 그냥 크롬프레임 띄웠다.

일전에 만든 QR코드를 새긴 새 명함

일전에 만든 QR코드를 새긴 새 명함