아무튼지간에

#0 Prologue

정말 끔찍한 일은 말이지, 하고 그가 새벽 세 시 오 분 경의 무거운 침묵을 조용히 들어올렸다. 나는 우선 그의 들어올리는 목소리와 여전히 키보드 위에서 탭댄스를 추는 열 손가락을 관전만 하고 있으려고 했다. 정말 끔찍한 일은 내일 일어나지 않을 거야. 잠시 후, 응, 그게 무슨 소리야, 하고 앗차, 나도 그만 그 침묵의 링 안으로 난입했다. 그럼 언제 일어난다는 건데, 내일 일은 별로 안 끔찍하단 소리냐, 무슨 말을 그렇게 모호하게 해, 나도 모르게 너무 자질구레하게 되물어친 다음에 들려오는 컴퓨터 본체 냉각 팬 소리는, 그래서 무슨 야유처럼 내 말이 끝나고서부터 38평형의 텅 빈 사무실에 붕붕 메아리친다. 탭댄스가 잠시 멈추었다. 그가 안경을 고쳐 썼다. 그리고 정규방송이 중단된다.

내일 끔찍한 일이 일어날 거야. 하지만 지금껏 날 곁에서 지켜본 너만은 내일 그렇게 많이 놀라지 않았으면 좋겠어. 정말 끔찍한 일은 내일 일어나는 일 같은 건 아닐 거니까. 내일 너무 놀라거나 끔찍해하지 마.

그럼 정말 끔찍한 일이란 건 뭔데.

음, 그가 잠시 그답지 않게 잠시 뜸을 들이더니, 수천 년 전 제 나라 임금의 죄상과 차후 멸망상을 예언하러 가는 선지자가 그렇게 했을 법한 억양과 분위기로 조심스럽게 표현의 2차 시기를 시도했다. 이런 거 생각해 본 적 있어? 천재지변이 일어나서 어느 공항의 모든 교통편과 운항 일정이 전부 끊겼어. 사람들은 갈 길이 멀고 바쁘지만 아무 방도가 없으니까 발만 동동 구르고 있지. 그런데, 이게 중요한데, 공항 측에서 자꾸 무슨 표를 발급해. 어떨 때는 공짜로, 어떨 때는 돈 있는 몇 사람에 한해서. 잠시 후 비행기가 도착하면 제일 먼저 타고 나가게 해 주겠다, 버스가 오면 순서대로 타고 나가라, 소포나 중요한 걸 따로 보낼 수 있게 해 주겠다 운운하면서 말이지. 밖은 위험하니까 절대 나가지 말고 교통편이 올 때까지 무조건 실내에 있으라면서 심심하지 않게 음악이나 DVD도 틀어 주고 말이지. 그런데 이 공항의 유리창엔 온통 선팅이 되어 있단 말야. 왜냐면 밖은 이미, 음, 공항 주변이 싸그리 원폭을 맞고 무슨 호수 한가운데 인공섬처럼 고립되어 버렸거든. 그리고 공항에 직원은 없어. 모든 건 방송과 기계에게 맡겨 놓고 폭격 직전에 참모부터 말단까지 모두 대피했으니까. 사람들은 내일이면, 모레면, 두 시간 되면 다시 원래대로 일정을 계속할 수 있을 거라고 기대하면서 별 의미도 없는 순번표 수십 장을 지갑 속에 꽁꽁 숨겨놓고 웅크리고 있는데, 공항은 그 반경 5km 근방이 민간 절대 통제 구역으로 영구 지정되는 거야. 자, 그가 속사포같이 쏟아내던 등골 서린 괴담을 중단하고 날 보았다. 그가 고쳐 쓴 안경이 번득이며 내게 물었다. 며칠이 걸릴까, 공항 내 생존자 절멸까지는?

붕, 붕, 냉각 팬 회전하는 소리가, 붕, 붕, 38평형의 텅 빈 사무실에서 수도 없이 메아리쳐 울었다. 그는 다시 모니터로 그 안경을 돌리고, 몇 번의 거액의 주식거래를 대강 마쳐둔 뒤, 마지막으로 몇 개 은행의 개인 계좌 잔액을 확인하고는 망설임 없이 USB 메모리를 뽑고 드라이브 포맷 작업을 예약해 두고 일어났다. 나는 무슨 일이 일어났는지까지는 대강 짐작했다.

이제 어떡할 거야?

글쎄, 신문배달을 할까 싶어. 나도 내집마련의 꿈을 좀 이뤄야지, 안 그래?

우리는 웃지 않았다. 그 그가 무슨 작은 종이를 두 장 내밀었다. 무슨 영수증이 한 장, 하와이주 어딘가를 가리키는 주소가 적힌 쪽지가 한 장이었다.

이게 뭐야?

천국으로 가는 주소랑, 그건...

조선일보 구독 신청 영수증을 왜 나한테 줘? 이거 우리 집 주손데?

지옥을 보여준다는 순번표야.

나는 영수증에서 떼지 못하던 나의 시선을 번쩍 들어 그를 보았다. 어딘가 대단히 자랑스러우면서도 한편으로 몹시 불쾌해하는, 흡사 지옥 문 앞까지 잠시 순찰을 나간 성 베드로 사도처럼 내게 말했다... 아니 웃어보였다. 드드득, 예약 작업이, 드드드드득, 시작되어, 드드득, C드라이브가 바스러지고 있었다.

너에게 지옥을 보여줄게.

페르시아에서는 왕이 미치면 카프카스로 전쟁을 하러 간다더니 저는 요즘 웹진 만들면서 꾸역꾸역 삽질하며 본의 아니게 키운 기초체력을 활용하여 오도방정 뛰어다니는 중입니다. 음… 이번 학기 성적은 과연 어떨까…

저번에 올린 Noto Sans 테스트 페이지는 건너뛰고, 그 이후 추가로 작업한 것들을 부끄러우나마 올려 봅니다 *-_-* 참고로 위에 있을수록 최신작(?)입니다.

is.gd / waa.ai URL shortener

완전히 개인적인 이유로 작업함. 뒤에 ?from=주소 형식으로 넣으면 prompt를 띄워서 축약주소를 가져갈 수 있게 해놓았다. 에러 핸들링까지는 했는데, isset()은 다룰 줄 모르겠어서 일단 못 함. (그리고 그걸 각 쇼트너 api들이 알아서 해주고있다... ㅋ... ㅋㅋㅋ... 역시 개인의 무능이 체제의 공교함으로 커버되는 21세기로군 ㅋㅋㅋㅋㅋㅋㅋㅋ) 기왕이면 프롬프트 종료 후 history.back()까지 먹여주면 좋았겠지만, 그건 아직은 내 능력 밖이라고 생각된다.

북마크릿으로 쓰시려면 적당한 즐겨찾기를 만드시고 주소를 아래와 같이 수정하세요.

핵심: PHP JSON 파싱 // 다차원 배열 참조 // 에러 핸들링 // sgwlan에서 waa.ai가 멀웨어로 캡쳐되는 문제에 대하여 -_-;

Y'over There!

태어나 처음으로 작성해 본 php 웹앱(?). Yo 사용자에게 메시지 내용이 파라미터로 담긴 PHP url을 GET방식으로(;;;) 전송한다. 수신자는 * from YOVERTHERE라는 노티를 받고, 눌러 보면 송신자가 보낸 메시지가 나온다. 그냥 Yo라는 초단순 앱을 가지고 API 실습을 해 보는 데 의의가 있었음.

핵심: API 사용하기

adblock bookmarklets

다른 php로 넘어갈 때마다 새로 눌러줘야 하는 매우 불편한 애드온. 쉽게 말해서 실제로는 쓸모가 없다. 그냥 jQuery로 작성한 스크립트로 북마클릿을 만들 수 있다는 데 의의를 두기로. 그놈의 동일출처 정책이 뭔지...

(혹시나 써보고 싶으시다면 다음과 같이 합니다. ①아무 페이지나 북마크(즐겨찾기)에 추가하세요. ②위의 코드를 쫙 복사하세요. ③방금 북마크한 페이지를 수정(편집)합니다. 이름은 적당히 "픽시브 광고 ㄲㅈ" 같은 걸로 바꾸시고, 기존 주소(URL)를 지우고, 방금 복사한 위의 코드를 붙여넣고, 저장 또는 적용하세요. ④해당 사이트를 돌아다니다가 광고가 짜증날 때마다 북마크를 누릅니다. 끗)

핵심: benalman.com/code/test/jquery-run-code-bookmarklet (...;;;)

초간단 선택지 카드

웹진에 사용할 일이 있을 것 같아 꼬박 3시간 걸려 만든 j쿼리 장난입니다. 각 카드에는 고유번호 id가 붙어 있고, 버튼을 누르면 버튼에 부여돼 있던 번호를 고유번호로 가지는 카드가 나타나는 식이죠. 실행취소 버튼은 만들 수가 없다는 게 함정 ㅋ

핵심: replace(/\D/,'') // $(".phase[id=p"+to+"]").show();

초간단 폰 배경화면 생성기

제가 혼자 쓰려고 만든 것인데 사용법은 간단합니다. 두 개의 빈칸에서 색을 선택하고 SET을 누르면 그라데이션이 만들어지는데 이거 그냥 SAVE IT 눌러서 저장해 쓰면 되는겁니다. 색은 hex와 name을 지원하고, 잘 모르겠으면 그냥 옆의 RANDOM 누르면 알아서 채워줍니다. 모바일에서 SAVE가 잘 안 되시는 분들은 기본 브라우저에서 직접 열어봐 주세요.

핵심: Math.random 함수로 0부터 ffffff까지 사이에서 랜덤 돌려 16진수로 반환받기 // 문서 전체 내용에서 특정 클래스 찾아 셀렉트하기 // toDataURL 메소드로 base64인코딩해서 href로 돌리기

초간단 더보기 버튼

웹진 워드프레스에 삽입할 자체 제작 숏코드용으로 목업했던 것입니다. 실제 shortcode 함수에서는 [more text="버튼에 들어가는 말" colorback="버튼 색과 말풍선 테두리 색" colortext="버튼에 들어가는 말의 색"]말풍선에 들어갈 말[/more] 구조로 사용 가능합니다.

핵심: .next() // calc(50% - 14px); // border-left-color, border-left-style 등으로 잘게 쪼개어 지정해주고 jQuery에서 꼼꼼하게 셀렉트하기

위키백과 링크 자동 전환기

역시 웹진 개발 과정에서 쾌적한 독자 경험을 위해 혼자서 뚝딱뚝딱 짜본 코드입니다. 문서 내의 wikipedia를 포함하는 모든 링크에 대하여, 사용자가 모바일로 접속했을 경우 링크를 모바일 전용 링크로 덮어씁니다. 위키백과가 아직은 자체적으로 리디렉션을 하지 않는 게 이상하다 싶어서, 그리고 제가 폰으로 보는 PC뷰의 잔글씨를 참을 수 없어서 만들었습니다.

핵심: if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { (…함수…) } // position:absolute; top:50%; left:50%; transform:translatex(-50%) translatey(-50%);

비상용 명함 제조기

페이지가 시키는 대로 버튼을 누르거나 입력하다 보면 명함이 완성됩니다. 우클릭해서 다른 이름으로 저장해 쓰면 되는 것이지요. (그렇습니다 이때는 아직 toDataURL같은 건 꿈에도 몰랐습니다.) canvas를 배우느라 여념이 없어서 많은 뒷이야기가 있었지만 그냥 이제는 다 잊기로 한 참 서글픈 코드였습니다. 처음 만들었을 땐 너무 웃겨서 낄낄거리면서 했다고 합니다.

핵심: 문서 로딩 시점에서 하얗게 색칠된 명함 크기 캔버스 작성 // 이미지를 file로 받아와서(이 원리는 아직도 모름…) 또는 기존 URL로부터 삽입 // 버튼 클릭하면 그 버튼 근처 input에서 val 얻어다가 캔버스에 뿌리기

친척용 컨디션 카드

잘 읽고 자기가 해당이 있는 조건들을 클릭해 선택하고 출력해서 목에 걸고 다니면 되는 카드입니다. 여기 올라온 코드들 중 제일 구현이 막막했던 녀석인데 j쿼리 없이 checkbox "마법"으로 해결하는 레퍼런스가 있어서 그걸로 해결봄. “어진이 아이디어는 어진이가 디자인까지 해야 100%가 나오는 것 같아”라는, 마냥 기분 좋아할 수만은 없는 피드백이 있었습니다.

핵심: checkbox 자체는 숨기고 그 옆에 label for로 연결을 시켜 여기에 각 노드를 넣음 // .checkbox-class:checked ~ .class // @media print로 not:checked display none

flickOut bookmarklets

flickr.com에서 저작권이 'All Rights Reserved'로 설정돼 있어서 다운로드를 못 하는 사진들이 있을 수 있죠. 하지만 이런 사진들도 '모든 크기 보기' 페이지는 지원하는데요, 거기서 사용하시면 됩니다. 이 북마클릿을 설치해 두셨다가 "https://www.flickr.com/photos/(영숫자)/(숫자)/sizes/(알파벳)"처럼 생긴 주소의 모든 크기 페이지에서 북마클렛을 실행해 주세요. 이미지 주소를 복사할 수 있는 경고창을 띄웁니다.

핵심: getElementById, getElementByTagName.src (네 그렇습니다 왕초보 코드입니다.)

앞으로도 추가가 될… 까나?

혹시나 소스를 보시거나 포크하시려거든 코드펜 현관에서 엽토군을 찾아주세요.