728x90
애플앱스토어 정책이 국가별 계정으로 되어 있기 때문에, 외국스토어(미국홍콩일본 등) 을 이용해야 할 때 참 번거롭다.

이런 번거로움을 조금이나마 해결하기 위한 방법을 두가지 제시할까 한다.

0. 애플 앱스토어 계정 변경
appleid.apple.com 에서 변경할 수 있다. 

1. 개인도메인이 없는 사람
gmail을 활용한다. gmail계정이 있다는 가정하에 진행한다.
다른메일과는 다르게 gmail은 와일드카드를 지원한다.  (좀 더 자세한 내용은 여기(새창링크)서 확인할 수 있다.) 

간단하게 이야기 하면 [. +] (dot, plus) 두개의 활용이다.
  • .은 .을 무시
  • +는 +이후 문자열 무시

자신의 gmail계정을 testaccount@gmail 이라고 가정하자.
현재 gmail 계정이 있다면 애플앱스토어 계정을 아래와 같이 변경하자.

testaccount+us@gmail.com (미국)
testaccount+hk@gmail.com (홍콩)
testaccount+jp@gmail.com (일본)
testaccount+kr@gmail.com (한국)
..

+us 등과 같은 접미어는 본인 취향대로 넣어도 상관없다.

그럼 모두 testaccount@gmail.com 으로 메일이 온다. 각종 알림이나 프로모션, 구매영수증도 모두 한 메일함으로 들어온다. 여기 들어오는 메일을 각각의 주소로 라벨링 하여 관리하면 편리하다. (역시나 이곳(새창열기) 참조)


2. 개인도메인이 있는 사람
역시 구글의 도움을 받는다.
구글앱스에 가입하여 메일계정을 생성한다.

자신의 개인 도메인을 testdomain.kr 이라고 가정하자.

구글앱스에 아래와 같은 계정을 생성한다.
us@testdomain.kr
kr@testdomain.kr
jp@testdomain.kr

등등..

그리고 위 계정으로 도착하는 이메일들을 하나의 메일함으로 전달한다.
앱스토어 아이디 입력시 + 까지 쳐야하는 번거로움을 없앨 수 있다.


2-1. 응용
appstore@testdomain.kr 계정을 생성후 애플스토어 계정을 아래와 같이 등록
appstore+us@testdomain.kr 등등등

추후에 계정 잊어버리는 일은 좀 줄어들지 않을까. 각자 편한대로 써보자.
Posted by onionmen
728x90
node.js
  • 자바스크립트 기반. 정확히는 구글의 V8 엔진 기반. 서버사이드 자바스크립트.
  • 멀티스레드는 지원하지 않음. 어차피 웹은 latency가 길기 때문에 차라리 싱글스레드를 이용한 이벤트 루프가 낫다.
  • 자바스크립트 언어 자체가 논블로킹 IO를 지원하기 때문에 접속마다 스레드를 생성하는 방식보다 동시접속 성능면에서 우수하다. 특히나 long-lived 를 지원해야 하는 리얼타임 웹에서 제격이다.
  • 파일IO 자체가 너무 느리기 때문에 디스크에서 데이터를 읽어 오는 사이에 다른 일을 할 수 있도록 비동기 IO를 구현하는 서버를 선택.


활용방안


nodejs 채팅 데모

http://chat.nodejs.org/


nodejs 설치

yum 으로 설치
yum 으로 설치하기 위해 저장소를 추가해주자.

# vi  /etc/yum.repos.d/SannisDev.repo


[home_SannisDev]

name=SannisDev's Home Project (CentOS_CentOS-5)

type=rpm-md

baseurl=http://download.opensuse.org/repositories/home:/SannisDev/CentOS_CentOS-5/

gpgcheck=1

gpgkey=http://download.opensuse.org/repositories/home:/SannisDev/CentOS_CentOS-5/repodata/repomd.xml.key

enabled=1 


NodeJS 설치

# yum install nodejs
# node -v



npm 설치 (http://npmjs.org/)

# curl http://npmjs.org/install.sh | clean=yes sh
# npm -v



Hello world

# vi hello.js


var sys = require("sys");

sys.puts("Hello world");


# node hello.js
# Hello wolrd

Posted by onionmen
728x90
보통은 1번, 2번까지면 다 되는 듯. 1번 하고 안되면 2번, 그래도 안되면 3번, 최후에는 4번
순서대로 하라는게 아니다. 1번 해서 안되면 순차적으로 내려가서 해봐라.

1. 
윈도키+R -> Net localgroup Administrators local service /add

2.  
아이폰 관련 프로그램 삭제 후 재설치

3.
보드 BIOS 업데이트 (칩셋업데이트)

4.
윈도우+R -> regedit
HKEY_LOCAL_MACHINE / SYSTEM / CurrentControlSet / Control / Class / {EEC5AD98-8080-425F-922A-DABF3DE3F69A} 에서 UpperFileters 를 삭제 후 재부팅 
Posted by onionmen
728x90
오늘 메일을 확인하는데, "타인의 명의도용시도 차단 알림메일" 이 두 통 왔다.


실명인증을 차단해주는 서비스를 유료로 이용하고 있다. 요즘같은 시대에는 이런게 하나쯤 필요하다고 생각하여 꾸준히 사용중이다. 효과가 어느정도 되는지는 모르겠다.

이 메일을 보자마자 든 생각은, '암호화된 네이트 주민번호가 복호화 됐군.' 이었다. (물론 다른 경로로 유출된 민번이 정말 우연찮게도 갑자기 오늘 사용되었을 수도 있지만)


미투데이에 관련 글을 올렸더니 비번 푸는데 30초가 걸렸다고 하는 뉴스가 나왔다고 한다.
어떤 내용인지 예상은 가지만 그래도 한번 찾아봤다.

링크 : http://news.sbs.co.kr/section_news/news_read.jsp?news_id=N1000960683

요약하자면 SBS에서는 brute force 방식의 강제 대입식으로 비밀번호를 추출해낸 것이었다. 네이트의 정확한 암호화방식은 모르는 듯 하고 그냥 시청율을 위한 쇼라고 생각되지만 그나마 사람들에게 이번 사태의 위험성을 알리는데 일조했다고 생각하기에 까지는 않겠다.

웃긴건 뉴스 중간에 보안최고책임자라는 사람이 하는 말이다.

[강은성/SK커뮤니케이션즈 보안담당 이사 : 현재 기술로 보았을 때 이것은 안전합니다.]

이해는 한다. 정보를 주면 줄 수록 크래커에게도 힌트를 주는 것이니까. 하지만 현재 기술로 보았을 때, 안전한 영역은 없다. 털린쪽에서 안전하고 싶을 뿐이겠지.

개인정보 유출에서 최대 쟁점은 두가지 이다. 비밀번호와 주민등록번호.

주민번호야 여러가지 부서에서 사용해야 하기 때문에 복호화가 가능한 양방향 암호화를 했을 것이고, 비밀번호는 단방향 암호화를 사용했을 것 이다.

양방향이면 암호화 방식과 암호화에 사용된 key만 찾으면 풀 수 있다는 소리이다. 이미 언론등을 통해서 네이트가 주민번호에 128비트의 AES 암호화를 사용했다고 알려졌다. 게다가 주민번호는 숫자로만 구성되어 있다. 여기서 중요한건 AES 알고리즘으로 만들어진 문자열을 해독할 수 있는 iv와 key 가 함께 노출되었는가 아닌가인데, 노출되었을 가능성이 적다고 해도 안심할 수 없다. 운이 좋으면 짧은 시간내에 복호화가 가능하기 때문이다.

누가 주도하든 자꾸만 비밀번호 쪽으로만 이슈를 몰아가는것 같아 안타깝다. 바꾸면 그만인 비밀번호 보다는 바꿀 수도 없는 주민번호가 더 문제라고 생각된다. 대한민국 웹서비스의 대부분에는 아이디/비밀번호찾기 서비스가 있기 때문이다.

이름과 주민번호만 알 수 있다면 웬만한 사이트의 비밀번호 또는 비밀번호 변경권을 손쉽게 얻어낼 수 있고, 아이디를 다르게 사용하는 사용자의 아이디도 노출되게 된다. 크래커들도 바보가 아닌 이상 얻기 어려운 곳에 투자 하기 보다는 좀 더 똑똑한 방식을 통해서 자신들이 원하는 것을 얻어낼 것이다.

안타깝다. 언론과 SK컴즈 모두 올바른 시각으로, 올바른 방향으로 문제를 해결하려는 모습을 보여줬으면 좋겠다. 옥션도 잘 넘겼고 심지어는 우리 돈과 가장 밀접한 연관이 있는 농협조차 은근슬쩍 잘 넘어갔는데 네이트라고 다르겠냐만. 
Posted by onionmen
728x90
NDC 발표. 라이브서비스조직에서 웹개발자로 잘살기 발표자료


발표가 끝나고 우울한 마음만 가득이었는데, 차근차근 이유를 생각해보자.

1. 사람들이 안왔다.
 - 사람들이 조금은 더 있어야 이야기할만한 내용들이 있었는데, 아마 여기서부터 조금 틀어지기 시작한듯.
2. 멋지게 보이고 싶었다.
 - 어떻게 보면 좀 더 나은 모습으로 보일 수 있었던 기회였는데, 제대로 잡지 못해 아쉬움이 크다.
3. 자기만족이 안되었다.
 - 매번 발표회나 크고작은 무대에 설 때면 그 무대에 나 스스로가 만족했느냐 못했느냐가 중요하다. 이번엔 전혀 만족하지 못하여 준비한 시간에 대한 제대로된 보상을 받지 못한 기분. 아마도 이게 제일 크지 않을까.
4. 대본을 제대로 외우지 못함.
5. 주제에 대한 스스로의 이야깃거리가 없었음
6. 짧은 시간동안 너무 많은 이야기를 말하려고 했음
7. 발표 전날 새벽까지 발표자료 수정을 하고 있었음
8. 나 자신조차 이 내용에 자신이 없었다.

사람이 한명이라도 있으면 최선을 다 해야 하는 것인데, 미안한 마음도 크다. 자기만족조차 되지 못했던 시간이어서 개인적으로는 많이 안타까웠고, 제대로 인정받지 못함에 안타까운 마음이다. 다음번에는 미리미리 주제를 잡고 스스로 만족할 만한 시간이 될 수 있도록 하는 반성의 시간이었다.

발표자료는 굳이 비공개로 돌릴 필요가 없어서 몇 가지 삭제 하고 공개한다. 
Posted by onionmen
728x90
  • 패스워드의 생성규칙 가이드


패스워드 생성 시, 패스워드 생성 가이드를 제공하는 것이 과연 보안에 어느 정도나 도움이 될까? 그 규칙 중에 특수문자를 넣어야 한다고 "권장"하는 것은 어떤가? 얼핏 봤을 때, 비밀번호에 특수문자가 들어간다면 꽤 강력해 보인다. 실제로도 패스워드에 특수문자가 섞여있다면 꽤 강력한 패스워드이다.

그런데, 이 패스워드 생성규칙을 사용자가 강제로 따라야 한다면 어떨까? 가령

1. 패스워드는 8자 이상 12자 미만으로 이루어져야 합니다.
2. 패스워드에는 특수문자가 필수로 들어가야 합니다.
3. 아이디와 같은 문자열은 사용할 수 없습니다.

와 같은 조항들 말이다. 크래커가 패스워드를 알아내기 위해서 무차별대입 공격을 시작하려 한다. 그런데 업체에서 저런 규칙을 사용자에게 강제화 했다. 이로 인해서 어디부터 시작해야 할지 모르던 크래커는 작업이 더 쉬워졌다. 크래커는 자신이 만든 툴에 아래 규칙을 적용하였다.

1. 자릿수 8자리 이상 12자리 이하
2. 대입 시 특수문자를 필수로 입력. 예) votmdnjem! , votmdnjem!@, qlqjs!@#
3. 아이디와 같은 문자열은 제거

이제 패스워드에 특수문자가 포함되지 않은 문자열들과 13자리이상의 문자열들. 가령 votmdnjemqlalfqjsgh 와 같은 문자열은 무차별대입 공격 시에 제외된다. 매우 많은 경우의 수를 제거해 주는 것이다. votmdnjemqlalfqjsgh 대신에 votmdnjem! 와 같은 문자열을 넣어볼 테니 말이다. 왜 일부러 규칙을 강제화하여 많은 경우의 수를 제거해주는가?

1억 개나 1억 100백 개나 많은 건 많은 거고, 안전한 건 똑같이 안전한거다. 문자가 24개 이던 34개 이던, 어차피 숫자가 무한대에 수렴한다면 굳이 특수문자를 포함할 필요는 없다. 그렇다면 왜 소위 전문가들은 특수문자를 강제화하는 것에 이리도 적극적인가?

  • 무차별 대입 공격과 사회공학


특수문자가 포함된 패스워드는 강력하다. 하지만, 이 강력함이라는 것은 무차별대입 공격(brute force)에나 강력한 방법이고, 키로거와 같은 악성코드가 설치된 PC라면 특수문자 할아버지가 들어간 패스워드 라고 해도 전혀 안전하지 않다.

현재의(2011년) 많은 인터넷 사이트들은 이 무차별대입 공격법에 어떻게 대응하고 있는가? 올바르지 않은 입력이 N 회 시도되면 접속차단 또는 캡챠와 같은 기술을 사용하여 자동공격을 차단하고 있다. 굳이 특문 포함이라는 극약 처방을 하지 않아도, 이런 방식으로 무차별대입 공격을 대부분 차단할 수 있다.

요즘 크래커들은 옛날과 같이 무식한 무차별대입법을 사용하여 일하지 않는다. 패스워드에 이름, 생년월일, 전화번호, 휴대전화번호 등과 같이 쉽게 알아낼 수 있는 여러 가지 정보들의 우선순위를 높여 대입해본다. 안되면 이들을 조합하여 넣어본다. 그리고 안되면 또 다른 방법을 사용한다. 가령 사회공학기법 같은. 그럼 100명 중에 적어도, 최소 한 명 이상은 걸린다. 열 명까지도 걸릴 수 있지 않을까 생각해본다. 운이 좋으면 30명도 걸릴 수 있지 않을까?

주제와는 조금 벗어나지만, 실제로 메신저로 돈 빌리기 사기나 전화피싱과 같은 사회공학기법에 낚이는 사람들이 많은 걸 보면 이게 어렵지 않다는 것을 어느 정도 유추할 수 있다. (약 10년 전에 세이클럽 계정이 털린 적이 있다. 세이클럽 디자인폼으로 메일이 도착했는데, 거기서 비밀번호를 묻기에 그냥 나도 모르게 입력해버렸다. 그리고 난 아바타 캐시를 털렸다.)

소위 전문가들은, 이런 사회공학기법들 때문에 특수문자가 필수로 들어가야 한다고 말한다. 사용자들이 유추하기 쉬운 패스워드를 사용하기 때문에 특수문자를 강제화하는 규칙을 넣는다는 것이다. 그러면 이런 상황에서 사용자들은 회원가입시에 어떤 행동을 취할까.

1. 자신이 자주 사용하는 비밀번호를 넣고 회원가입 버튼을 누른다.
2. 그럼 경고창이 뜨겠지. "특수문자가 필수임ㅋㅋ" 
3. 그렇게 되면 사용자는 짜증을 낸다.
4. 그리고 기존 비밀번호에 ! 또는 !@ 등을 추가해서 회원가입을 완료할 것이다.

안 그럴까? (평범한) 주변 사람 다섯 명을 불러놓고 테스트를 해보면 적어도 두 명은 이런 행동을 취할 거라 확신한다.

  • 패스워드 생성규칙의 강제화


특수문자를 강제화 하는 것이 그리 안전하지 않다는 것은 그들도 잘 알고 있을 것이다.(아닌가?) 그럼 왜 관리자들은 패스워드를 강제화 하는 건가? 보안을 생각한 것도 물론 있겠지만, 더욱 큰 것은 아마 관리자 자신들의 심리적 안정감 때문 아닐까?

'사용자들에게 이렇게 시켰으니 적어도 1234와 같은 비밀번호를 사용하지 않겠지'
'유추하기 어려운 강력한(특문이 포함된) 패스워드이니 쉽게 깨지지 않겠지'
'난 보안을 지키기 위해서 최선을 다했어. 해킹 당해도 내책임 아님'

위와 같은 자기 위안들 말이다.

"소프트웨어 누가 이렇게 개떡같이 만들었어"라는 책이 있다. ( 원제목은 Why Software Sucks )
여기서 너무 많이 강화된 보안을 사용자들이 어떻게 생각하고 있는지 잘 이야기 해주고 있다. 외우기 어려운 패스워드를 메모지에 적어놓고 다닌다든가, 강화된 보안 시스템이 귀찮아서 문에다 벽돌을 받치고 누구나 쉽게 드나들 수 있도록 환경을 바꾼다든가 하는 그런 것들 말이다.

패스워드가 기억하기 어려워지거나 너무 자주 바뀌면 쪽지나, 스마트폰에 저장해두게 된다. 아니면 자신이 늘 사용하던 패스워드 한 글자를 특문으로 변경한다든가, 그냥 특문 하나를 더 붙일 뿐이다. 이런 강제적인 규칙들은 오히려 보안성을 떨어뜨릴 수도 있고, 최악에는 사용자들이 떨어져 나가게 된다.

사용성과 보안은 트레이드오프관계에 있다. 보안성을 높이면 사용성이 떨어지고, 사용성을 높이면 보안성이 떨어질 수밖에 없다. 이 둘의 관계를 잘 절충하여 모두 윈윈 할 방법이 요즘 조금씩 제안되고 있지만, 그래도 여전히 이런 불편을 완전히 없앨 수는 없다.

보안을 위해서 어느 정도 사용성 저하는 감수해야 하겠지만, 무턱대고 보안성만을 강조하여 사용자들을 불편하게 만드는 것은 한 번쯤 다시 생각해봐야 할 문제가 아닐까 한다.

"패스워드는 꼭 복잡성을 만족해야 한다." 정말 그런가? 적어도 규칙의 강제화는 답이 아니라고 생각한다.



혹시 같은 주제로 관심이 있는 사람이라면 아래 링크도 읽어보길 추천한다. 원문이 사라져서 복사본으로 대체한다.

복사본링크 : http://www.thechiefbaboon.com/forums/archive/index.php/t-17074.html
원문링크 : http://finance.yahoo.com/news/A-Strong-Password-Isnt-the-nytimes-3369144559.html


Posted by onionmen
728x90

관련글 : 자바스크립트(1-1) - 클로저(closure) 에 대한 이해

 
더 많은 예제코드가 필요하다면 아래 링크를 참조하자
(링크 : http://www.javascriptkit.com/javatutors/closures2.shtml)


클로저에 대한 설명은 어렵다. 어렵기 때문에 명확하게 이건 이거다 라고 이야기 하기 힘들다. 이야기 한다 해도 이해하기 위해서는 수많은 배경지식이 필요하다. 아무리 설명을 해봐야 사람들이 이미 알고 있던 부분들이 모두 다르기 때문에 설득을 해야 하는 수준이다. 인터넷에서 클로저에 대한 글들을 찾아봐도 모두 마찬가지이다.

모두가 이건 이거다 라고 설명을 하고 있지만 이해는 쉽지 않다. 자바스크립트에 이 클로저라는 녀석은 C언어에서 포인터를 배울때 만큼이나 날 혼란스럽게 한다. 이건가 싶으면 저거고, 저건가 싶으면 또 이것인 클로저를 잊지 않기 위해서라도 잠시 정리를 해둔다.

짧으면서도 설명하기 쉬운 아래 코드조각을 보자.


sayAlice() 를 실행하고, 리턴받은 함수를 또 바로 실행하고 있다. Step by Step 으로 확인해보자.

 
 

아래 단계를 따라가면서 조사식의 saylAlert 과 alice가 어떻게 변하는지 살펴보자. 

1. sayAlice() 실행
2. sayAlert 변수에 함수 할당 [function () { alert(alice); } ]
3. alice 변수에 문자열 할당 [Hello Alice]
4. sayAlert 함수 실행
5. alert(alice) 구문 실행
6. Hello Alice 출력


4번 단계가 실행 될 때, 내부의 alice 변수를 참조한다.
sayAlert 변수에 할당된 익명 함수가 선언된 다음에서야 alice 변수에 문자열이 할당 되었다. 이건 함수 내부에 선언된 함수 내부에서 부모함수(?)의 변수에 접근(참조) 할 수 있다는 것을 의미한다. 그리고 이 부분이 클로저가 만들어졌다고 볼 수 있다. 그리고 함수가 끝나서 지역변수들은 사라져야 함에도 불구하고 alice 지역변수는 계속하여 살아있는다. 클로저 때문이다.

좀 더 긴 예제인데, 간략하게 줄였다. 브라우저에서 실행하여 Step by Step 으로 보자.





1. newClosure(40); 을 호출함
2. num 지역변수에 40을 할당
3. newClosure() 종료로 함수의 생명주기는 끝나고, 리턴된 익명함수를 closure1 변수에 저장
4. 리턴받은 closure1(5) 함수를 실행
5. 익명함수이 진입 전 이므로 num 값 확인 불가
6. 익명함수에 진입하여 num 값이 생성되어 있음을 확인
7.8.9. 인자값 5를 더함으로 해서 num 값이 45가 됨을 확인


여기서 6번이 중요포인트인데, 익명함수에 진입 할 때, num의 값이 40으로 확인 할 수 있다는 것이다. 기본적으로 num은 newClosure의 지역변수 이기 때문에 함수의 생명주기가 끝남과 동시에 소멸되어야 하는 변수이다. 하지만 클로저가 생성됨으로 인해서 이 변수는 그대로 살아있게 된다. 불필요한 메모리 릭을 방지하기 위하여, 이 변수를 사용한 뒤에 더이상 필요 없다는 판단이 들면 alert('num: ' + num); 문장 뒤에 num = null; 을 추가 시켜주자. 

이런 부분들은 굳이 몰라도 충분히 프론트 개발이 가능하다. 그리고 이해하지 못해도 그냥 쓰면 된다. 하지만 우리가 클로저를 잘 이해해야 하는 이유는 이 클로저가 생성될 때, 메모리 릭이라는 무시무시한 사이드이펙트를 데리고 오기 때문이다.

IE7 이하의 브라우저가 아직도 세상에 존재 하는한, 우리는 메모리릭을 신경쓰지 않을 수 없다. 이유를 알 수 없는 상태에서 브라우저가 자주 죽는다면 메모리릭을 의심해 봐야 한다. 

위의 예제에서 굳이 이야기를 해보자면, 변수 alice를 전부 사용한 뒤에 alice = null 로 초기화를 시켜주도록 하자. 그리고 jquery 를 사용중이라면 오브젝트에 접근 할 때에는 $().data() 메소드를 사용하자.

Posted by onionmen
728x90

인터넷익스플로러가 7 버전 까지 나왔을 때, 파이어폭스는 한창 강세를 보이고 있었다. 파이어폭스의 점유율을 의식하여 부랴부랴 7 버전을 내 놓았으니 말이다.

언제부터인가 IE6를 버리고 파이어폭스를 쓰기 시작했는데, 그 때가 아마 본격적으로 웹개발을 시작하고 얼마 안돼서였을거다. 당시 파이어폭스의 확장기능에 한창 매료 되어서 헤어나올 수가 없었다. 그중 단연 최고는 파이어버그 라는 개발자도구 였다.

원하는 곳의 DOM 구조를 바로 파악할 수 있고, 파일을 변경할 필요 없이 실시간으로 수정하며 적용된 모습을 볼 수 있었다. CSS 수정, 적용이 바로바로 가능했고, 페이지 로딩속도 및 HTTP status 코드는 물론이고, 자바스크립트 디버깅까지 지원하여 이게 없으면 개발이 불가능할 정도였다.

파이어폭스가 버전업데이트가 되어서 파이어버그가 동작하지 않으면 파이어폭스 업데이트를 미룰 정도였다. (나말고도 많은 사람들이 그랬을거다) 1.4 버전인지 1.5 버전까지 사용하고, 요즘엔 잘 사용하지 않고 있어서 어떻게 발전 하였는지 잘 모르겠다. 

파이어폭스에서는 제대로 개발을 할 수 없는 환경으로 터전을 옮기고 나서 IE 에서 돌아가는 여러가지 개발자도구를 찾아서 사용해보았다. 파이어버그에 비하면 턱없이 부족한 툴 들이었지만, 어쩔 수 없이 불편함을 감수하고 사용했다.

그러다가 IE8 버전이 나오고, 새로이 추가된 개발자 도구 라는 것을 보고 커다란 발전에 기쁨의 눈물을 흘렸었다.

Dom 셀렉터, CSS 선택수정, 중단점을 삽입할 수 있는 자바스크립트 디버깅, 콘솔창 추가로 개발환경이 무척이나 편리해졌다. 이는 IE9으로 오면서 더욱 강력해 졌는데, 이에 대해서 소개를 해볼까 한다. (자바스크립트와 콘솔 위주로 감)


콘솔창

인터넷익스플로러를 실행하고 F12 를 누르면 아래와 같은 개발자 도구가 열린다.


왼쪽 탭에는 HTML, CSS, 콘솔, 스크립트 등등이 있고, 이 선택에 따라서 오른쪽 탭 영역의 UI가 변경된다. 콘솔탭을 선택하면 빈 화면이 덩그러니 나타나는데, 맨 하단에 보면 뭔가를 입력할 수 있는 입력창이 존재한다.


여긴 자바스크립트나 기타 DOM객체를 직접 입력하여 확인해 볼 수 있는 공간이다. 실제로 사이트가 전부 로드된 상태에서 콘솔창에 관련 객체 이름을 써 넣기만 하면 그에 따른 정보가 출력된다.


테스트 페이지로 만든 곳의 this 객체 정보를 호출해봤다. 단지 this 라고만 입력했을 뿐인데, 현재 document의 this객체에 대한 정보가 나타난다.

테스트 페이지에 아래와 같은 HTML 태그를 추가했다.
그리고 콘솔창에서 위 엘리먼트에 대한 객체 정보를 호출해보았다.


표준 HTML DOM method인 getElementById() 를 사용하여 객체를 호출하거나, 그냥 ID 값만을 입력하여 객체에 대한 정보를 확인할 수 있다.

이 콘솔창에서는 다른 콘솔창과 마찬가지로 페이지에 설정된 자바스크립트를 실행시킬 수 있는데, 방법은 매우 간단하다.

 
위와 같은 자바스크립트 코드를 추가하고, 콘솔창에 함수 이름을 입력하면 바로 실행이 된다.


여기 콘솔창에서 사용할 수 있는 여러가지 내장함수들이 존재 하는데, 이는 IE8은 물론이고 웹킷, 모질라계열에서도 비슷한 동작을 한다.

 window.console.log  console.log("로깅용 메시지")  로그 : 로깅용 메시지
 window.console.error  console.error("에러 메시지")  
 : 에러 메시지
 window.console.info  console.info("정보 메시지")  
 : 정보 메시지
 window.console.warn  console.warn("경고 메시지")  
 : 경고 메시지
 window.console.dir  console.dir(오브젝트)  오브젝트 내용이 출력
 window.console.assert  console.assert(식, "메시지")  식이 틀릴 경우 메시지가 출력
 window.console.clear  console.clear()  콘솔창의 내용을 모두 삭제함

콘솔창에서 사용할 수 있는 내장함수는 위와 같고, 각각 실행 하였을 때 나타나는 메시지 이다. 실제로 아래와 같은 코드를 작성하여 테스트를 해봤다.



결과창을 보면, 우리가 예상한 결과와 동일하게 출력된 모습을 볼 수 있다. console, 또는 window.console 이라고 입력하면 console에 포함된 메소드들이 출력되니 직접 입력해서 확인 해보자.

** 참고로 console.dir 은 IE9 에서 지원하는 신규메소드로 IE8에서 동작하지 않는다. console.dir(object); 로 실행 하며, 객체의 내용을 좀 더 상세하기 표현해 준다.

기존에 alert 과 document.write, iframe 등으로 디버깅을 하던 불편함은 콘솔창을 사용하면 말끔히 해결된다. 초반엔 익숙하지 않기 때문에 어색하겠지만 지속적으로 사용해보면 예전으로 다시 돌아가기 힘들어질 것이다. 

사용하지 않고 있던 사람들이라면 이번 기회에 한번 사용해보자. 이러한 콘솔창은 IE8 이상, 크롬, 사파리, 파이어폭스 에서 기본적으로 지원하고 있다.


2부. IE9으로 디버깅 하기 (2) - 자바스크립트 디버깅

Posted by onionmen
728x90

IE9이 출시 되었습니다. 물론 꽤 오래전에 출시되었죠. 베타버전부터 사용중 이었고, 정식버전이 출시되기를 꽤 기다렸습니다. 기다렸던만큼 출시된 정식버전 IE9은 꽤 높은 완성도가 높았습니다.

기존에 있었지만 부각되지 않았던 기능들, 그리고 새롭게 추가된 기능들을 위주로 하여 IE9을 알아보겠습니다.

1. 주소창 검색


IE8에서 IE9으로 넘어오게 되면서 전반적인 UI가 변경되어 매우 심플해졌는데요, 가장 크게 변경된 부분은 주소창과 검색창의 통합입니다.


IE8의 주소창과 검색창



기존에는 웹사이트 주소를 입력하는 주소창과 검색을 담당하는 검색창이 분리되어 있었습니다. 기존에 검색창은 검색제안이나 비주얼서치 등의 새로운 기술을 내놓음에도 불구하고 접근성의 문제로 자주 쓰이지 않았죠.

주소창 검색에서 검색어 제안을 사용하는 모습


 

이번 주소/검색창의 통합으로 검색제안이나 비주얼서치 등이 좀 더 부각되었으면 하는 바람입니다.
(링크 비주얼서치/검색제안 보러가기)

부가기능 갤러리에 가보시면 검색과 관련된 좀 더 많은 애드온들을 찾아 볼 수 있습니다. 한번 찾아가셔서 기존에 추가 되어 있는 Bing 이외에 구글이나 네이버등을 추가하여 좀 더 편리한 주소창 검색을 이용해보세요.
(링크 부가기능 갤러리 보러가기)

2. 사이트 고정 (1)

IE9은 아쉽게도 윈도우 XP 이하 에서는 제공되지 않습니다. 윈도우 비스타 SP1 이상에서 설치하여 사용할 수 있는데, 윈도우7을 사용중이라면 IE9과의 시너지 효과가 매우 커집니다.

IE9 에서는 사이트 고정이라는 새로운 기능을 내놓았는데요, 사이트를 주소표시줄에 고정시켜놓고, 필요할 때 마우스 원클릭으로 접속 할 수 있도록 하는 기능입니다.

사이트 고정으로 시작표시줄에 등록된 모습



윈도우7 시작표시줄에 joinsmsn 사이트를 고정시켰습니다. 파비콘이 아이콘이 되어 원클릭 접속이 가능합니다. 이는 기존에 사이트바로가기와 크게 다른 점은 없는데요, 나중에 설명드릴 사이트 점프 기능에서 차이점이 드러납니다.

사이트고정 기능으로 사이트에 접속하게 되면, 위 이미지에서 보이시는 것과 같이 이 창은 joinsmsn 을 위한 사이트 입니다. 라고 파비콘으로 표시를 해줍니다. 좀 더 깔끔한 모습을 원하신다면 파비콘의 크기를 64*64 사이즈로 변경해주세요.

고정방법은 여러가지가 있지만 가장 간단한건 고정시키고 싶은 사이트에 접속 한 뒤 그 사이트가 열려있는 탭을 작업표시줄로 잡아끄는 것 입니다.

탭을 끌어서 시작표시줄에 놓는 모습




작업표시줄에 등록이 되면 사이트의 파비콘이 아이콘이 되며, 사이트 접속시 고정된 사이트임을 알려주게 됩니다.

시작표시줄에 등록된 모습



2. 사이트 고정 (2)

사이트를 고정하게 되면 보너스 기능을 하나 더 사용할 수 있습니다. 이건 웹사이트에서 지원을 해 주어야 하는 내용이지만, 지원만 된다면 서비스를 좀 더 편리하게 사용할 수 있습니다. 바로 점프리스트 기능입니다.



페이스북을 사이트 고정시켜놓고, 아이콘에서 오른쪽 버튼 혹은 왼쪽클릭 후 잡고 끌면 위와 같은 메뉴가 나타납니다. 페이스북 같은 경우는 뉴스나 메시지, 이벤트 등의 메뉴로 바로 갈 수 있고, 트위터나 위 이미지의 joinsmsn 에서도 기능을 제공하고 있습니다. 

IE8에서 웹슬라이스 라는 기능을 제공했었습니다. 신기능이지만 잘 사용하지 않는 기능중 하나죠. 개인적으로 이 기능도 웹슬라이스의 뒤를 따르지 않을까 걱정도 되지만 이런 기능들이 잘 활성화 되면 좀 더 웹을 편리하게 사용할 수 있을 텐데 말이죠. 기능의 활성화를 빌어봅니다.

조만간 사이트에 점프리스트 추가 하기를 포스팅 할 예정입니다. (매우 간단합니다.)

3. 보안 강화


MS에서 IE8 출시부터 강조했던 것이 하나 있는데, 바로 보안입니다. IE8 에서는 XSS필터, ClickJacking방지, 탭색변경, 스마트주소표시줄, 스마트스크린 등의 보안 기능을 대거 추가 하였고, 내부적으로 메모리 보호에 강화된 점을 내세웠죠. IE9 에서도 물론 보안 강화를 갖고 나왔습니다. 이미 IE8에서 웬만한건 추가 했기 때문에 특별한 것은 없고, 눈에 띄는 거라면 추적방지 기능과 엑티브액스 필터링 정도 입니다.

추적방지기능 :
제 3사 쿠키 라는 것이 있습니다. 예를 들어서

1. 어떤 검색서비스에 접속했습니다.
2. 그 곳에 B라는 회사가 광고를 하고 있었습니다.
3. B라는 회사에서 임의로 광고에 쿠키를 삽입하였습니다.
4. 쿠키를 통해서 제가 검색서비스에서 활동하는 내역을 추적할 수 있도록 하였습니다.


여기서 B라는 회사가 광고속에 삽입한 쿠키가 제 3사 쿠키입니다. (** 쿠키는 웹상에서 활동하는 정보를 갖고 있을 수 있는 일종의 임시파일 입니다.)

이러한 제 3사 쿠키의 활동을 막는 것이 추적방지기능 입니다. 이 추적방지 기능은 IE8에도 제3사쿠키방지 라는 옵션으로 제공되던 보안서비스이지만, 이를 좀 더 강화 했습니다.

아래 링크에 접속하여 외부 사이트에서 제공되는 블랙리스트 사이트를 IE9에 추가할 수 있습니다.
(링크 http://iegallery.com/kr/trackingprotectionlists/default.aspx)



의외로 제3사쿠키를 활용하는 사이트들이 많이 있습니다. 스스로도 개인정보 보호에 힘써주세요.

4. 자주 방문하는 사이트


about:blank 라는 문구가 낯이 익으신 분들은 저처럼 성격이 좀 급하신 분들 아닐까 합니다. 웹사이트의 시작페이지로 about:blank 를 넣으면 브라우저가 실행됨과 동시에 빈페이지가 뜨기 때문에 조금이나마 쾌적한 인터넷 환경을 만들 수 있습니다.

IE9 에서는 about:Tabs 라는 시작페이지를 공식적으로 지원하기 시작했습니다. 브라우저를 실행하면 방문했던 페이지들을 빈도수 별로 리스트업하여 보여줍니다.


 

어떤 브라우저 툴바에서도 비슷한 기능을 지원하는 것으로 알고 있는데요, IE9 에서는 자체적으로 지원하니 더이상 툴바에 의존하지 않아도 됩니다.


5. 성능

빠릅니다. 많이 빨라졌습니다. IE9 사용하시다가 IE8 이하 버전으로 못돌아갑니다. 자바스크립트 성능 향상이니, 뭐니 어려운 말 하지 않겠습니다. 설치하셔도 후회하지 않으실 겁니다. 은행권이나, 기타 대형 포털들에서도 무리없이 사용 가능하니, 망설이고 계시다면 한번 설치해보시는게 어떨까요.


6. 아쉬움

A. 확장기능
- IE9이 아무리 빨리지고, 보안성이 향상 되어도, 절대 안쓰는 사람들이 있습니다. 그 사람들이 꼽는 가장 큰 이유는 아무래도 확장기능 이 아닐까 합니다. 얼마 없기도 없을뿐더러 그나마도 찾기가 매우 어렵습니다. 윈도우모바일6.5 이하버전의 스마트폰을 사용하는 기분입니다.

아, 확장기능이 있기는 합니다. 다만 그 이름이 액티브엑스 라는게 문제지만요.

B. 부가기능
- 웹슬라이스나, 검색제안 등이 활성화가 안되는 것이 많이 아쉽습니다. 사용하기 어려운 것도 아니고, 만들기 어려운 것도 아닌데 의외로 많은 분들이 모르고, 쓰지 않습니다. 무엇이 문제일까요. 개발자스러운 접근방식? 검색제안 같은 것은 주소창과 검색창이 합쳐진 지금은 조금 기대가 됩니다만 웹슬라이스는 도무지 답이 없네요.

C. HTML5
- IE9의 특징 중 하나로 꼽는 것이 웹표준지원, HTML5의 지원 입니다. 하지만 이 지원 수준을 보면 참담합니다. 



다른건 봐야 머리만 아프니, 점수만 공개합니다. 일반 사용자야 브라우저를 사용하는데 HTML5 지원 미지원 여부가 뭐 그리 큰 차이겠냐만 개발자들에게는 참담합니다. 지원되지 않는 것들은 어떤 방식으로 구현을 해야 할지, 고민부터 앞섭니다. 


타 브라우저에 비해서 업데이트도 쉽지 않은데 말이죠.

7. 끝


분명 크롬이나 파이어폭스, 사파리 등에 비해서 떨어지는 부분도 많고, 이미 다른 브라우저들에서는 기본적으로 제공되고 있었던 기능들도 많이 있습니다. 하지만 국내 환경에서 IE 시리즈는 분명 버릴 수가 없는 존재입니다. 그렇다면 그 중에서 가장 나은 IE9을 선택해 보는 것은 어떨까요.

Posted by onionmen
728x90
싸이월드

2002년부터 약 2005년까지 대한민국에서 최고의 전성기를 보냈던 서비스가 있었다. 이제는 하락세 이지만, 그래도 여전히 꾸준한 사용율을 보여주고 있는 서비스의 이름은 바로 싸이월드 이다.

현재는 이 자리를 여러가지 다른 웹서비스들에게 조금씩 나누어 주며 이제는 대세의 반열에서 내려오고 있고, [커넥트, C2, C로그, 싸이플래그등] 여러가지 시도를 하고 있긴 하지만 더이상 어렵다는 생각을 지울 수가 없다. 

여기 조금이나마 가능성이 있는 서비스가 있는데, 음원 서비스이다. 지금까지의 행보를 보면 아마 이 마저도 곧 날려먹지 않을까 하는 생각이 들지만, 수 많은 음원들과 이 음원을 구입하여 자신의 배경음악으로 등록해둔 수천만명의 이용자들을 잘 활용할 수 만 있다면 새로운 반등의 기회가 오지 않을까.


블로그

이 싸이월드와는 상대적으로 블로그의 인지도는 조금 올라갔다. 블로그와 싸이월드는 여러가지 차이점이 있는데, 큰 차이점 중 하나가 바로 배경음악 서비스이다. 물론 싸이월드와 블로그는 제공되는 서비스의 성격이 많이 다르지만, 사용자 파이를 나누고 있다는 점을 생각해보면 좋은 비교가 될 듯 하다.

2007년 경 싸이월드 관리를 멈추고 블로그로 넘어 오게 되었는데, 이 때 가장먼저 찾았던 서비스가 배경음악 서비스였다. 한동안 여러가지 플러그인이나 소스코드수정을 통해서 많은 시도를 했었지만 결국은 모두 제거해버렸다. 

스킨을 바꿀 때마다 적용 방식을 변경해야 했고, 음원에 대한 여러가지 문제도 있었기 때문에 블로그에서는 음악재생을 깨끗하게 포기해버렸다. 하지만 요즘에는 블로그용으로 유용한 플러그인들이 제공되어 청각적으로 재미를 제공하고 있기 때문에 원하기만 한다면 자신의 블로그를 잘 꾸밀 수도 있다. 


내 앨범 위젯

청각적인 재미를 제공하는 블로그용 플러그인들(위젯)은 여러가지가 있다. 음악방송을 재생해주는 세이라디오(링크), SBS라디오를 들을 수 있는 고릴라라디오위젯(링크), 그리고 벅스뮤직에서 음원을 제공해주는 내 앨범 위젯(링크) 등이 있다.

내 앨범 위젯은 벅스뮤직에서 제공하는 음악재생위젯이다. 플래시로 만들어져 있어서 플래시가 설치되는 곳이라면 어디서든 음악재생이 가능하다는 이야기이다.

아래 위젯링크 중 편한 곳으로 방문하여 설치가 가능하다.

1번의 경우 다음블로그나 티스토리 사용자라면 추천할만하다.
2번의 경우 자신만의 플레이리스트를 수정하여 등록하고 싶다면 추천한다. (벅스뮤직유저)

위젯뱅크에서 설치하기

위젯뱅크로 이동하면 위 이미지와 같은 화면을 볼 수 있다. 사용중인 블로그가 붉은박스 안의 목록에 있다면 선택하여 설치하면 되고, 만약 없다면 HTML 소스를 선택하여 직접 소스코드를 입력해야 한다.


HTML소스를 누르면 위젯에 대한 간단한 설정을 진행할 수 있다.

내앨범 URL : 벅스뮤직에 등록된 URL을 설정할 수 있다.
자동 재생 : 별도의 플레이 버튼을 누르지 않아도 자동을 재생할 것인지 여부를 결정한다. (개인적으로 끄기를 추천함)

내앨범 URL의 경우는 조금 설명이 필요한데, 처음 위젯을 설치하는 사람들은 저 URL을 어떻게 설정해야 할지 모르는 경우가 대부분 일 것이다.

아무것도 신경쓰기 싫고, 그냥 최신가요가 나오는게 좋겠다 라고 하는 분들은 아무것도 수정하지 말고 퍼가기 버튼을 눌러서 설치하면 된다. 하지만 특별한 플레이리스트를 원하는 사람들을 위해서 아래 방법을 설명한다.


내 앨범 URL

1. 내 앨범 URL 넣기
우선 [내 앨범 위젯] 은 기본적으로 벅스뮤직(링크) 에 기초를 두고 있기 때문에, 벅스뮤직에 회원가입이 되어 있다면 상당히 쓸만하다.

벅스뮤직에 로그인을 하고 http://www.bugs.co.kr/user/ 이 링크에 접속해보자.


하단에 붉은색으로 박스표시한 부분에 새앨범만들기 버튼이 존재한다. 클릭하면 [내앨범] 메뉴로 이동하는데, 여기서 자신의 플레이리스트(앨범) 을 만들 수 있다.

플레이리스트(앨범) 를 만들었다면 이 리스트를 [내 앨범 위젯] 을 통해 들을 수 있다.



새로 만든 앨범을 클릭하면 웹브라우저의 주소표시줄에 주소가 나타난다. 이 주소를 복사하여 내 앨범 URL 메뉴에 붙여넣으면 완성이다.

내 앨범 URL에 앨범주소를 붙여넣음


위와 같이 설정하고 위젯을 설정하면 본인이 등록한 앨범의 음악이 흘러나온다.




1. 타인의 공개앨범 URL 넣기
많은 음원사이트에는 타인이 자신의 앨범을 공개하는 경우가 많이 있다. 의도한것인지 아닌지는 모르겠지만, [내 앨범 위젯] 은 이런 공개앨범까지도 활용할 수 있다.

아래는 주간 인기 공개앨범 리스트 캡쳐 이미지이다.


공개앨범 중 마음에 드는 앨범을 클릭하여 동일하게 URL을 복사한다.


위젯 설정 페이지, 혹은 퍼가기 페이지에서 앞서 복사한 공개앨범 URL을 붙여넣는다.


[내 앨범 위젯] 의 Playlist가 공개앨범 리스트로 구성된 것을 확인할 수 있다.
공개된 앨범들 중에는 내가 알지 못하는 좋은 곡들의 묶음도 많이 있다. 테마별로 음악을 듣고 싶을때나, 슬플때, 기쁠때 여러 DJ들의 도움을 받아보자.

이런 공개 앨범을 따로 등록하여 종류별로 위젯을 여러개 설치할 수도 있으며, 음악포스팅을 할 때에도 플레이리스트를 모아서 유용하게 사용할 수 있다.


디자인

[내 앨범 위젯]의 디자인은 꽤나 잘 나왔다.

여러개의 스킨을 변경해 가면서 적용을 해 보았는데, 우선 색상별로 3가지만 뽑아보았다.
어두움, 밝음, 중간 정도의 색상을 가진 사이드바에 설치를 해 보았는데, 위화감도 없고, 전혀 튀는 느낌없이 잘 어울렸다. 

물론 이런 위젯을 설치하기에 앞서서 자신의 사이드바를 한번쯤 정리 할 필요는 있다.

[내 앨범 위젯] 은 몇몇 사람들에게는 굉장히 유용하고 매력적인 위젯이고, 또 활용만 잘 한다면 매우 유용한 위젯이다. 하지만, 블로그를 방문하는 대다수의 사람들에게는 그다지 유용하지 않다. 음악도 1분간만 나올뿐이고, 자동으로 재생하기를 설정했을 경우에는 오히려 거슬릴 수도 있다.
이를 유용하게 만들 수는 없을까?


개선

1. 재생시간
싸이월드는 BGM 기능으로 구매한 음원에 대해서 전체재생이 가능했다. 또, 상대적으로 사용률은 떨어지지만 쥬크박스 기능도 넣어서 자신의 음악을 자랑/공개할 수도 있었다.

[벅스 내 앨범 위젯] 또한 구매한 음원에 한해서는 1분 재생제한을 없애기 기능을 넣는 것은 어떨까. 아니라면 (수익률은 보장할 수 없지만) 아예 위젯전용 음원 판매도 생각해볼만 하지 않을까?

2. 앨범검색
어차피 공개된 모든 앨범을 등록할 수 있다면 위젯 자체에서 앨범검색도 가능했으면 좋겠다. 
벅스 웹사이트에 접속 -> 앨범을 검색 -> URL을 복사 -> 위젯설정 -> 붙여넣기 의 과정은 너무 번거롭다. 그냥 아예 위젯 자체에서 공개앨범, 또는 내앨범을 변경, 등록할 수 있다면 사용성이나 유저편의성이 훨씬 증가할텐데 말이다.

3. 음악재생
재생 중 새창을 띄우면 이중으로 노래가 재생된다. 돌림노래형식으로 재생되는데, 이건 자동재생 옵션 여부와 상관없이 현재 내가 재생중이면 새창을 띄웠을 때 무조건 나온다. 물론 같은 블로그에서 새 창을 띄우는 경우는 많이 없겠지만, 이럴 경우 찾아서 꺼야 한다. 어차피 음악 재생은 쿠키등 어떤 방법을 사용하여 현재 재생위치를 기억하는 것 같은데, 여기 변수를 추가해서 재생중일 경우는 새창에서 재생되는 음악은 꺼주면 어떨까.

4. 위젯크기
위젯의 크기 여러가지로 제공할 수 있다면 어떨까? 많이도 필요없이 large, small 두 개 정도로 구분하여 사이즈를 고려할 수 있다면 1단으로 구성된 블로그에도 문제없이 위젯 설치가 가능할 듯 한데 말이다.

작은사이즈도 플레이제어부를 반투명하게 처리하여 앨범커버를 살짝 가리는 수준으로 만들어주면 이쁠 것 같고, 사용자 선택폭도 넓어져서 좋을 듯 하다.




마치며

디자인이나 기능면에서 꽤 완성도 있는 위젯이다. 유용성이야 사용하기 나름이겠지만 나같은 경우는 벅스뮤직 유료 회원이기도 하고, 내 블로그에서 보내는 시간이 많기 때문에 별도의 뮤직플레이어를 실행하지 않아도 되어 매우 편리하다.

위에서 이야기한 개선점만 고쳐진다면 장수 할 수 있는 위젯이다. 다만 설치시에 옵션으로 제공되는 "자동재생"은 꺼두도록 하자.

내가 이용하는 벅스뮤직 유료이용권은 월 7천원 짜리 상품으로 PC용 스트리밍 서비스+40곡 다운로드도 받고, 안드로이드용 벅스앱을 통해서 실시간으로 음악을 청취할 수 있어서 매우 애용하고 있다. 여기 보너스로 블로그 위젯까지 사용하니 매우 괜찮은 상품 구성이라고 볼 수 있다.

단순히 PC용 스트리밍 서비스만 받는다면 월 3천원으로 충분하니, 웹하드 사이트에서 힘들게 MP3를 불법 다운로드하는 듣는 사람들이라면 한번쯤 고려해볼 만한 서비스 아닐까?
Posted by onionmen
728x90

이런 스팸문자 한번 못받아 본 사람 찾기 힘든게 요즘이다. 몇 천만원을 대출을 해주겠다는, 그것도 당일에 통장으로 넣어주겠다는 대인배들이 너무 많다. 물론 대부분의 사람들이 저런 문자들은 정말 너무 진짜 많이 초절정 급한 경우가 아니라면 거들떠도 보지 않는 것도 사실이다.


개인정보
대한민국 국민의 개인정보는 너무 쉽게 돌아다니고 있다. 검색어 한줄로 수십수백명의 주민등록 번호와 이름이 줄줄 나오고, (제대로 관리할 것 같지 않은) 웹사이트들도 너무 쉽게 주민번호를 요구한다. 더 비참한 것은 대한민국 국민의 개인정보는 중국에서 개당 10원 가량에 거래되고 있다(고한다).

꽤 많은 사람들이 자신의 개인정보에 대해서 소중하게 생각하지 않는다.그러니까, 웹사이트가 달라는대로 너무 쉽게 줘버린다. 인터넷 문화가 성숙하지 않을 때 자연스럽게 접한 것 들이기 때문에 아직까지도 거부감이 없다.

개인정보를 심각하게 생각하지 않는 사람들의 대부분은 그 이유를 "나에게 직접적인 피해가 없기 때문" 으로 생각하고 있다. 그러다가 내가 가입하지도 않은 사이트에서 이메일 등이 날아오게 되면 잠시 놀라고 또 금방 잊어버린다. 조금 알아 보다가 금방 귀찮아 지기 때문이다.

이런 상황들이 반복되면서 결국 불감증이 생기게 되고, 그러다가 나중에 크게 당해 후회하게 된다. 나중에 후회하지 않으려면 스스로 개인정보를 보호하고 관리해야 한다. 그리고 이 개인정보와 함께 필수적으로 관리 보호해야 하는 것이 있다.

바로 신용정보가 그것 이다.


신용정보

신용정보는 개인의 금융상거래 활동을 점수로 산출하여 이를 토대로 신용거래 능력을 판단하는 척도이다. 많은 사람들이 이 신용정보(신용점수)의 존재를 알고 있지만, 자신의 신용점수를 제대로 파악하고 관리하는 사람은 드믈다. 

신용도 관리를 하고 있느냐고 주변 사람들 13명(20대 후반 ~ 30대 초반) 에게 물어봤다.(감사염) 대부분의 사람들은 신용도라는 것에 대해서 알고는 있지만, 자신의 신용등급이나 신용점수에 대해서는 모르고 있었다.

아래 차트를 보자.

잘 관리하고 있음 : 2
관심없음 : 3
유료사이트 가입에 대한 거부감 : 3
신용도 체크를 통한 신용점수 하락에 대한 두려움 : 3
관심은 있지만 어떻게 확인해야 하는지 모름 : 1
기타 : 1


관심없는 사람들이야 언젠가는 어떠한 계기를 통해 관심이 생길 것이고, 의외였던 것은 "신용도 체크를 통한 신용도 하락에 대한 두려움" 이 꽤 된다는 것이었다. 

신용도 체크를 할 수 있는 곳이 몇 군데 있다. 아래 사이트에서는 신용점수를 조회해도 자신의 신용도에 전혀 영향을 미치지 않는다.

크레딧뱅크
사이트 주소 : http://www.creditbank.co.kr
1년 이용료 : 10,000원 ~
추가 선택으로 명의도용 방지(인터넷 실명인증) 서비스도 제공하며 기본적인 가격이 저렴함.

올크레딧
사이트주소 : http://www.allcredit.co.kr/
1년 이용료 : 22,800원
국내 금융사가 출자하여 설립한 KCB에서 신용데이터를 받기 때문에 비교적 등급이 높게 산정됨. 가격이 비쌈.

마이크레딧
사이트주소 : http://www.mycredit.co.kr/
1년 이용료 : 20,000원(?)
가격도 비싸고 우량신용정보 보다는 악성 신용정보를 토대로 신용등급을 산정함

본인은 현재 [크레딧뱅크, 올크레딧] 두 사이트를 이용하고 있다. 세 개의 사이트를 이용하게 되면 금전적인 부담은 물론이고, 아직은 굳이 마이크레딧 까지 하나 더 이용할 필요성을 못느끼고 있다.

하나의 사이트만 가입해서 관리해도 크게 상관은 없지만, 평가 기관에서 산정하는 기준이 각기 다르기 때문에 최소한 두 개 사이트 정도는 가입해서 보는 것이 바람직하다고 생각한다.



그리고 설문조사의 기타 의견으로 카드사용이나 대출등의 신용도에 영향을 미치는 행위를 하지 않았기 때문에 신용도가 높을 것 이다. 라는 의견이 있었다.

이는 잘못된 상식으로 신용 기록이 없는 사람은 신용 평가를 할 수 없기 때문에 신용등급이 낮지는 않겠지만 그렇다고 절대 높지만은 않다.

신용도를 쌓는 가장 좋으 방법은 신용카드 사용료, 공과금, 대출금 등과 같은 납부금을 연체없이 납기일내에 납부하고, 적금, 펀드 등에 가입하여 금융 기록을 쌓는 것이다.

그리고 신용도 조회 사이트 등에 가입하여 주기적으로 자신의 신용도를 체크 하는 것도 중요하다. 올크레딧은 신용정보만 관리하여 정보를 제공해준다. 하지만 마이크레딧과 크레딧뱅크는 신용정보뿐만 아니라 개인정보에 대한 보호 서비스도 제공 하여 준다.

개인적으로는 크레딧뱅크를 자주 이용하는데, 별 다른 이유는 없고 단지 크레딧뱅크에서 자주 변동알림 메일을 보내주고 있어서 메일이 올 때 마다 확인해보고 있다. 

인터넷 사이트에 가입하기 위해 실명인증을 하거나 은행 관련 업무를 볼 때 크레딧뱅크에서 알림 메일을 보내주고 있다.


실명확인내역이나, 신용정보 변동등을 체크하여 바로바로 메일로 보내주고 있다. 유료회원으로 가입하면 변동상세내역을 확인해볼 수도 있어서 좋다. 때문에 크레딧뱅크에 자주 접속할 수 밖에 없었다.

처음엔 호기심으로 내 신용점수가 얼마나 될까 무료 신용점수 확인을 했다가 이제는 유료회원으로 등록해 수시로 관리해주고 있다.

메일에서 볼 수 있듯 명의도용시도 또한 설정할 경우 알아서 차단 해주기 때문에 원하지 않는 개인정보의 사용을 사전에 예방할 수 있다. 올크레딧 또한 메일 발송 정도의 기능은 있고, 이를 통해서 관리도 가능하다.

다만 이런 것들의 문제는 메일 확인 후 직접 사이트로 이동하여 변동/차단 내역을 확인해봐야 한다는 것이다. 이런 사이트들은 대게 익스플로러만 지원하기 때문에 OSX 나 모바일에서 바로 확인할 수가 없어 또 다른 불편을 낳는다.

(빨간 박스를 클릭하여 사이트로 이동하면, 로그인 후 내용을 확인할 수 있다. 기본적으로 메일 클라이언트로 크롬을 사용하기 때문에 매우 불편하다.)

얼마 전 크레딧뱅크에서 자사의 신용관리 서비스를 아이폰용 앱으로 이용할 수 있도록 어플리케이션을 공개 하였다. 이 앱을 사용하면 앞서 이야기한 여러가지 불편한 사항들이 쉽게 해소된다.

이 앱은 신용점수는 물론이고, 정보 변동내역이나 신용거래내역 또한 보여준다. 매번 익스플로러를 실행하여 불편한 로그인 과정을 거친 후 여러 정보를 확인하던 내게는 정말 희소식이었다.

이번달 내 신용도가 몇 점 인지 확인해 보는건, 오늘 내 펀드 수익률이 얼마나 나왔는지 확인하는 것 만큼 재미있다.

저번달에 비해서 점수가 낮게 나왔다면 그 달에 했던 신용거래를 다시한번 상기하여 다음번에 동일한 실수를 하지 않게 할 수 있는 동기부여가 되고, 저번달 보다 높게 나왔다면 잘 하고 있다는 생각과 함께 이 역시 삶의 동기부여중 하나가 된다.

크레딧뱅크에서 제공하는 신용의 달인 app은 iOS4.1 버전 이상만 지원하고 있고, 아이팟터치나 아이패드에서도 OS버전만 맞으면 사용이 가능하다. 하지만 안드로이드와 같은 다른 플랫폼에 대한 지원은 미정이며, 추후 지원 가능성은 아직 알 수 없는 상태이다.

앱스토어에 접속해서 "신용의 달인" 으로 검색을 해도 되고, 아래 링크를 통해서 직접 다운로드 받아도 된다.


신용의 달인

설치 하고 실행하면 로그인 창이 나온다. 지금은 프로모션 기간이기 때문에 30일간 무료로 자신의 신용상태를 점검해 볼 수 있기 때문에, 자신의 신용도가 궁금했거나, 결제를 망설이던 사람들에게는 좋은 기회라 생각된다.



앱에서도 바로 회원가입이 가능하다. 단 본인명의로된 핸드폰이 있어야 하기 때문에 본인명의의 핸드폰이 없다면 가입이 불가능 하다.


로그인 후 접속하게 되면 마이페이지가 나타난다. 마이페이지는 요약정보신용변동내역 이라는 두 개의 하위 메뉴를 제공한다.

요약정보 : 말그대로 신용정보에 대한 요약 내용이다. 신용등급과 신용변동건수에 대한 내용을 보여주며, 납부해야 할 세금이나 카드납입금이 있따면 그것 도 보여준다. (단, 본인이 미리 설정을 해놔야 한다.)
신용변동내역 : 본인의 신용 이력이 최근 한달간 변경되었다면 그 내역을 보여준다. (대출이나 신용카드 발급 과 관련된 내용)


한 화면에서 자신의 신용등급을 포함한 신용정보를 한눈에 볼 수 있도록 디자인 되었다.

신용등급이 나온 아이콘을 클릭하면 상세내역을 볼 수 있다. 상세페이지에서는 신용등급은 물론이고 신용점수와 자신이 상위 몇%에 속해 있는지를 보여준다.

종합평가와 함께 산출에 대한 근거도 함께 보여주기 때문에 자신의 신용도가 낮다면 영향요인을 잘 살펴보도록 하자.

눈여겨 살펴볼만한 부분은 신용조회 부분이다.
등급과 평점은 위 이미지에서 보이는 신용등급과 평점 및 종합평가부분이다.

등급비교 리포트와 월별 등급 이력은 아래 이미지와 같이 보여진다.

(개인정보 보호를 위해서 신용정보 내용은 가림처리 하였습니다.)

자신의 나이대의 평균 등급과 비교한 자신의 등급을 보여주고, 최근 6개월간의 자신의 신용점수에 대한 변화를 그래프로 보여준다.

두번째 탭으로 이동하여 신용정보를 보면 자신의 주민등록번호로 활동한 신용거래 내역들이 보여진다.
카드발급 카운트나 대출*보증정보 또, 그 외에 신용정보들을 한눈에 확인할 수 있다.


(개인정보 보호를 위해서 신용정보 내용은 가림처리 하였습니다.)

신용카드 발급 기관이나, 각종 신용정보 열람 기관에 대한 정보가 나오고, 어디에서 어떤 사유로 신용정보를 사용했는지에 대한 내역을 모두 확인 할 수 있다.

수시로 확인하여 자신의 개인&신용정보가 도용되고 있지는 않는지 점검 해보자.

납부관리 부분은 아직 앱이 불안정하여, 제대로된 테스트를 진행하지 못하였다.

이 기능에서는 일정(세금, 카드)등을 등록할 때 갑자기 앱이 종료되는 현상이 발견되었다.이렇게 종료되어 튕길 경우 다시 로그인을 하여도 정상적으로 로그인이 되지 않고 다시 강제 종료되는 현상이 발견되었다. 

이럴 경우엔 무려 앱을 지우고 새로 설치해야 정상 접속이 되었다.

4 번을 시도하여 4 번 모두 동일한 증상 이었다. 정상 동작을 하지 않아서 서비스를 제대로 사용해보지 못했다.

간략한 기능에 대한 부분만 리뷰해 보도록 하겠다.


이 기능은 특별한 기능은 아니다. 단순히 개인의 관리 포인트를 집중시켜줄 수 있는 기능을 한다.

여러가지 돈이 나가는 부분을 미리미리 등록해 놓아서 통장 이체나, 공과금 납부등을 잊지 않게 해준다. 등록일 전날 PUSH 알림을 통해서 납부공지를 해주기 때문에 연체로 인한 신용도 하락에 대비하게 해준다.



위 이미지 처럼, 카드 사용액등을 입력하여 관리할 수 있고, 항목에 없는 것들은 직접 등록하여 관리 할 수 있다.

신용카드나 대출과 같은 항목은 앱에서 자동으로 내 명의로 된 것들을 검색하여 보여주기 때문에 편리하다.

나는 개인적으로 집에서 사용하는 가스비나 전기세 등은 자동이체를 사용하지 않는다. 내 집이 아니기 때문에 이사전 귀찮은 것들을 대비하기 위함도 있지만, 직접 납부를 하게 되면서 알게 되는 가스&전기등의 사용내역을 통해서 가계를 운영할 수 있기 때문이다.

그리고 자동이체는 신용카드 자동이체만을 사용한다.

신용카드로 납부할 수 있는 모든 것들은 하나의 신용카드로 자동이체를 등록해 놓는다. 신용카드 결제금은 하나의 통장에서 빠져나가도록 등록을 해두고, 결제일은 월급날 다음날로 등록 해둔다. 통장에서는 한번만 빠져나가기 때문에 돈의 흐름에 대한 관리포인트를 줄일 수 있어서 편하다.

현재는 버그로 인해서 위 기능을 제대로 사용할 수 없는데, 빠른 시간내에 패치가 되어 사용할 수 있으면 좋겠다.

설정에 대한 부분은 간단하게 구성되어 있다.
"신용정보가 변동 되었을 경우 아이폰에 어떻게 반응을 줄지" 에 대한 설정과 처음 실행시 어떤 화면을 볼 것이냐는 기본적인 설정을 할 수 있다.
불편하지 않다면 기본설정으로 놔두는 것도 나쁘지 않다.
멤버십 설정은 한마디로 결제창이다. 프리미엄 서비스를 연장하고 싶을 경우에 탭하여 3,000원을 결제할 수 있다.(휴대폰결제)

결제를 원할 경우 사파리가 실행되어 웹페이지로 넘어간다. 그 후에 휴대폰 인증을 통해서 결제를 시도할 수 있다.


대략적으로 신용관리 앱인 "신용의 달인" 에 대해서 살펴 보았다. 버그도 조금 있고, 웹에 비해서 기능은 축소되었지만, 전체적으로 나쁘지 않았다. 다만 몇 가지 단점들이 있는데, 이 부분들만 해소 된다면 매우 유용하게 사용할 수 있을 듯 싶다.


아래에 불편한 점들을 나열해 보았다.

  1. 보안키보드의 불편
    • 처음 로그인시 나오는 보안키보드는 매우 불편하다. 탈옥한 아이폰에서는 어플을 지원하지 않도록 하고, 보안키보드를 일반 키보드로 바꿔서, 편의성을 증대 시킨다면 훨씬 나을 듯 하다. (그리고 굳이 보안키보드를 써야 하는 필요성을 느끼지 못하겠다.)
  2. 멀티태스킹의 불편
    • 앱이 iOS의 멀티태스킹을 지원하지 않는다. 앱 종료 후 다시 실행하면 또 로그인을 해야 한다. 물론 보안을 위한 부분도 있겠지만, 1번에 이야기 했던 키보드 때문에 로그인이 매우 불편하다.
  3. 불안정한 어플리케이션
    • 아직 1.0 버전이기에 개선될 여지가 있지만, 아이폰 특성상 어플의 패치가 일주일 정도 걸리는 것을 감안 할 때, 유료서비스로서 다른 대안을 제시해주어야 할 듯 하다.
  4. 요금의 불만
    • 휴대폰 결제를 보면 한 달 삼천 원으로 생각되는데, 일 년이면 삼만육천 원이다. 웹에서 제공되는 비슷한 서비스가 년 일 만원인 것에 비교하면 너무나 부담되는 금액이다. 한달 천원 정도로 서비스를 하거나 웹 유료 회원은 무료로 사용할 수 있다면(또는 저렴한 추가요금) 좋겠다.

이 외에 크레딧뱅크에서 서비스중인 명의도용에 관련된 앱도 출시가 되었으면 하는 바람이다.

명의도용 메일이 올 때마다 매번 사이트에 접속하여 기록을 확인하느 것이 여간 귀찮은 일이 아니다.

위에서 이야기한 불만 사항이 어느정도 해소되고, 이와 함께 명의도용 차단 서비스도 시작 된다면 충분한 메리트가 있다고 생각한다. 개인적으로는 명의도용 차단 서비스와 함께 서비스를 하면서 월 2천원 정도로 이용할 가치가 있다 생각한다.
Posted by onionmen
728x90
스마트폰으로 접속 해 주세요. http://df.href.kr

얼마전 jquery mobile 알파버전이 릴리즈 되었습니다. 그리고 지금 알파2 버전이  최종버전 입니다.

몇 가지 살펴보고, 아직 알파이지만 충분히 쓸만하다 판단하여 취미용 모바일 사이트를 만들어 봤습니다.

던전앤파이터의 커뮤니티 사이트를 모아놓고 모바일로 쉽게 열람이 가능한 사이트 입니다.

이미지로 보시면 좀 더 쉽게 이해가 가실거 같습니다.

이런식으로 게시판만 추출하여 모바일로 변환해주는 사이트입니다.
아이폰이나 안드로이드폰에서 접속해보시면 쉽게 사용이 가능하실 듯 합니다.

현재 구현된 기능은 다음과 같습니다.

  • 모바일용 게시판으로 변환
  • 디시인사이드 로그인 가능
  • 디시인사이드 게시물 작성 가능
  • 디시인사이드 댓글 작성 가능
  • 루리웹 로그인 가능
  • 루리웹 게시물 작성 가능
  • 루리웹 댓글 작성 가능

입니다.

던파조선이나 던파타임도 로그인 및 게시물 관련 기능을 추가할 예정입니다, 현재 테스트 아이디가 없어서 기능추가가 안되고 있는데, 조만간 가능할 것 같습니다.

꼭 로그인을 하지 않더라도 (반영이 늦긴 하지만) 비회원으로 댓글을 달 수 있기는 합니다. 다만 실제 웹사이트에는 반영되지 않고, 모바일사이트에서만 확인이 가능하죠.

조만간 몇 가지 기능들을 더 추가 할 예정입니다.

침대에 누워서, 학교에서, 자유롭게 사용해주세요~!


덧붙임.
일반 PC에서 접속 시 익스플로러에서는 아래와 같이 나옵니다.


때문에 접속을 자제해 주세요.

주소는 여기 입니다.

핸드폰 브라우저를 열고, 주소를 입력하세요
Posted by onionmen
728x90















 

2010/08/31 - [Review/IT] - jquery 플러그인 만들기 (1)
jquery 플러그인 만들기 (1) 편에 이은 연재글입니다.

이전에 만들었던 플러그인에는 작은 단점이 있다. 바로 범용성이 떨어진다는 것인데, 플러그인은 어떤 환경에서 쓰일지 모르기 때문에 보편적으로 만들어야 한다.

간혹 jquery와 prototype.js 등의 프레임워크를 동시에 사용하는 환경이 있는데, 이런 경우 jquery의 $ 를 다른 표현으로 사용하기도 한다. 하지만 우리가 만들어놓은 플러그인은 $ 를 사용하기 때문에 충돌이 날 수 있다.

해결책으로 자신이 만든 플러그인 메소드를 래핑하는 방법이 있다.

우선 형식은 다음과 같다. (function() { statement })() 
자신이 만든 메소드를 유효범위로 감싸면서 내부의 변수와 함수들을 private 하게 만드는 것이다.

(function() { statement })()  빨간색으로 되어 있는 부분을 하나의 함수명 이라고 생각하면 좀 더 쉽다.
function() 이 될텐데, 이는 마찬가지로 인자를 넘길 수 있다는 뜻이 된다.
(function() { statement }) == function 

우리는 일전에 아래와 같은 플러그인을 만들었다.
$.fn.Alert = function() {
	return alert(this[0].id);
}
이걸 유효범위로 만들기 위해 아래와 같이 수정한다.
(function($) {
    $.fn.Alert = function() {
	return alert(this[0].id);
    }
})(jQuery);
이렇게 되면 $ (여기서는 jQuery) 변수를 익명함수의 인자값으로 넘기고, 익명함수는 jQuery 를 $로 받아서 플러그인에서는 계속 $를 사용할 수 있다.


Posted by onionmen
728x90















 
jQuery 에 대한 기본적인 문법적 이해가 있다는 가정하에 문서를 작성합니다.

약 1년간 jQuery를 사용하면서 jQuery가 제공하는 자바스크립트 사용의 편의성에도 매우 감탄했지만, 정말 매력적이었던 부분은 플러그인에 대한 지원이었다.

한동안 남들이 만들어놓은 플러그인 들을 고맙게 가져다 썼지만, 어느 시점에서 부터 요구사항에 맞는 플러그인을 찾기가 쉽지 않았다. (이는 우리 사이트에서 jQuery를 필요로 하는 부분이 그만큼 많아졌다는 것에 대한 반증이기도 하다.) 

요구사항에 맞춰서 UI를 만들다 보니 기존에 사용하던 플러그인을 대충 수정하면서 사용했지만, 점점 더 높아지는 요구사항에 아예 플러그인을 새로 만드는게 더 나아보였다.

겸사겸사 간단하게 플러그인을 만드는 방법을 작성해볼까 한다.

기본적으로 jQuery를 사용함에 있어서 사용하는 플러그인의 타입은 크게 아래 두 종류 이다.
  1. $('div').plugin_name();
  2. $.plugin_name();
1번은 셀렉터를 이용하여 메소드체인을 생성할 수 있고, 2번은 그냥 function 이다.


1. $('div').plugin_name(); 를 만들어보자.
jquery.test-plugin.js
$.fn.Alert = function() {
	return alert(this[0].id);
}





div tag를 셀렉터로 하여 정보를 출력하는 간단한 플러그인이다.
위와 같이 작성하면 간단하게 끝난다.

위 메소드에서 두가지를 살펴볼 수 있는데, 하나는 this 이고, 나머지 하나는 그 this를 리턴하는 것이다.
this는 예상하는대로 div 엘리먼트에 대한 참조이고, this를 리턴하는 이유는 메소드체인을 사용하기 위함이다.


this 에 대한 프로퍼티를 확인해보면, 할당된 Method 들이 있고, 이 div 엘리먼트에 대한 프로퍼티를 담고있는 배열( [0] )이 있다. 
div 엘리먼트가 하나라고 가정할 수 없으니, 배열로 엘리먼트를 구분하는 것이다. (현재는 html 상의 div가 한개 뿐이므로, 배열도 한개만 나온다. div 엘리먼트가 여러개라면 배열 또한 그에 상응하게 나타난다.)

jquery의 강점중 하나는 메소드 체인을 사용할 수 있다는 것인데, 예를 들어서 $("div").Alert().fadeOut(); 과 같은 코드를 사용할 수 있다는 것이다.

메소드 체인이 끊어지지 않게 하기 위해서는 jquery 객체 (여기서는 this) 가 리턴되어 유지되는 것이 중요하다.

$.fn.Alert = function() {
	return this.each(function(i,k) {
		alert(k.id);
	});
}
그리고 div 와 같은 엘리먼트들은 배열(오브젝트) 이기 때문에 each 와 같은 순환문을 통하여 "사용하고 리턴될 수" 있어야 한다.


2. $.plugin_name(); 를 만들어보자.
jquery.test-plugin2.js
$.Alert = function() {
	alert("plugin-test");
}

1번과 비교해서 fn 부분이 제거되고, return 되는 부분도 없다. 그냥 일반적인 함수 작성하듯 만들면 된다.(함수니까!) 하나의 기능만을 담당하는 것이라면 문제는 없다.

이는 아래와 같이 사용된다.



Posted by onionmen
728x90

클로저는 실무에서 자바스크립트로 개발을 하다보면 자신도 모르게 사용했던 개념이다. 클로저는 몰라도 예제코드를 보면 "아하, 그게 클로저야?" 라고 되묻는 사람들이 꽤 많을 것이다.

아래 코드를 보자.

var closureTest = function() {
	var closureVar = "closure test";

	return function() {
		alert(closureVar);
	}
}

closureTest 라는 함수는 closure test 라는 문자열을 출력하는 익명함수를 리턴한다. 그리고 위 코드를 수행하면 정상적으로 closure test 메시지가 alert창으로 뜬다.

위 코드가 왜 이상한지 모르겠는 사람은 클로저에 대한 이해가 충분하거나, 아니면 자바스크립트에 대한 이해가 불충분한 사람일 것이다.

기본적으로 closureVar 변수는 closureTest 에 속한 지역변수 이기 때문에 다른 외부함수에서 호출하는 것이 불가능하다. 변수를 호출하기 위한 방법으로는 지역변수로 선언된 closureVar 변수를 전역변수로 바꿔 선언하는 방법이 있다. 

그런데 자바스크립트에서는 굳이 이렇게 하지 않아도, 함수에 속한 지역변수를 다른 함수가 호출하게 하는 것이 가능하다. 이게 바로 클로저다. 좀 더 정확하게 이야기 하면, 클로저란 자신이 생성된 함수의 context에 직접 접근(참조) 할 수 있는 것이다.

위 코드를 좀 더 쉽게 풀어보면 아래와 같다.

var closureTest = function() {
	var closureVar = "closure test";

	return closureTest2();
}

var closureTest2 = function() {
	alert(closureVar);
}

하지만 위 코드는 제대로 동작을 하지 않는다. closureVar 변수가 closureTest 함수에 선언되었기 때문에, closureTest2 함수에서 접근할 수 없기 때문이다. 

위 코드를 동작시키기 위해선 closureVar 변수를 전역변수로 새로 선언해야 한다.

var closureVar = "";
var closureTest = function() {
	closureVar = "closure test";

	return closureTest2();
}

var closureTest2 = function() {
	alert(closureVar);
}
하지만 변수가 많아진다면 이 모든 변수를 전역변수로 할당해야 하는데, 코드도 어려워지고(지저분해지고) 개발자도 힘이 든다. 변수를 모두 전역변수로 선언하지 말고, 클로저를 잘 이해하여 써먹어보자.


Posted by onionmen
728x90

마이크로소프트에서 IE 새버전인 IE9의 미리보기 3번째 버전을 공개하였습니다. 두달에 한번씩 새버전에 업데이트 되고 있는데, 벌써 3번째 프리뷰 버전입니다. 

업데이트 될 때마다 점점 성능이 좋아지고 있는데요. 이 상태로라면 정식버전이 정말 기대됩니다. MS는 제품을 출시할 때, 첫번째 제품은 말아먹고, 두번째 제품은 좀 괜찮고, 세번째 제품은 시장을 장악했죠. 그리고 운영체제와 브라우저는 한번 실패하면 한번 성공했죠.(일반적으로 실패라고 할만한 것은 아니지만)

개인적으로 IE8은 성공했고, IE7은 실패했다고 봅니다. 물론 IE6는 (이유야 어떻든) 성공했구요. 이런식이라면 IE9는 실패해야 하는데, 지금까지의 프리뷰를 보면 이번 IE는 실패할 것 같지 않네요.

  • 상호운용성 가능한 HTML 마크업
  • GPU를 사용한 렌더링
  • 그 외 성능향상

IE9에서 중점적으로 광고하고 있는 기능입니다. 요약하면 빠르면서도 표준을 준수하는 웹브라우저 인듯 한데요, 실제로 사용해보아도 상당한 체감성능의 향상을 느낄 수 있습니다. (이 부분은 직접 사용해 보셔아 느낄수 있겠네요)

ReMIX10 에서 발표된 내용과 난장세미나에서 발표된 내용을 토대로 간략하게 작성해보앗습니다.


  • 상호운용성
ACID 테스트가 프리뷰2 에서는 68점에 불과했는데(100점만점) 프리뷰3에서는 83점까지 상승.
DOM level2의 완벽한 지원, DOM level3의 지원
getElementsByClassName API를 지원 (기존까지 지원하지 않았다는 것이 놀랍네요.)


  • 속도
브라우저 속도 면에서는 파이어폭스보다 빠르고, 사파리와는 비슷하고, 크롬5 보다는 약간 느린 수준.
새로운 자바스크립트 엔진 챠크라를 사용하는데, 이 챠크라가 멀티코어 CPU를 사용하기 때문에 엔진의 성능이 대폭 향상시되었다고함.
자바스크립트 실행 및 각종 렌더링을 GPU의 도움을 받아서 수행함.
엔진의 코드 최적화를 통해 보다 높은 수준의 성능향상을 기대할 수 있다.


  • 향상된 개발자도구
IE8에 내장된 유용한 개발자 도구의 성능이 향상됨.
- 네트워크 모니터링 기능이 새로 추가되었습니다. 간단하게 사용할 때 유용할 듯 하네요. 회사에서는 httpwatch 를 사용하고 있는데, 이게 상용이라서 다른 기획자나 디자이너 컴퓨터에서 디버깅을 할 때는 fiddler 를 설치해서 썼습니다. 이제 IE9가 설치되어 있으면 따로 뭐 설치할 필요 없을 듯 하네요.


  • 멀티미디어
H.264 코덱 외에 webM 코덱 사용 (올레)
음성코덱으로 MP3, AAC 사용
SVG 사용가능


  • 그 외
CSS3 사용가능
알파채널을 지원하고, 플래시에서만 구현 가능했던 벡터그래픽의 처리를 SVG 를 지원함에 따라서 해결 가능하게 됨.


이 외에도 많은 기능들이 추가되었다. 좀 더 자세한 내용을 알고 싶으면 아래 링크 참조하세요.



Posted by onionmen
728x90
안드로이드 OS는 패턴방식의 화면잠금을 채용했습니다. 이런 방식은 일반적으로 사용되는 4자리 비밀번호 방식에 비해서 좀 더 안전한 기분이 듭니다.

핸드폰을 분실했을 때에는 꽤 강력한 보안성을 자랑합니다. 하지만 분실같은 경우가 아니라 주변인들 사이에서 핸드폰을 열 때에는 이런 패턴잠금방식이 오히려 더 노출되기 쉽습니다.

저도 회사에서 핸드폰을 보여주기 위해 몇번 잠금해제를 해주었더니 몇번 보더니만 이제는 스스로들 잘 열어서 쓰더군요. 

오히려 숫자보다 더 기억하기 쉽습니다. 게다가 이 패턴을 틀리면 붉은 색으로 틀린 경로를 보여주기 때문에 더욱더 쉽게 노출 될 수 있고 쉽게 유추할 수 있습니다.

이런 노출이 꺼려지신다면 이런 방법은 어떨까요.






Posted by onionmen
728x90
얼마전에 전철에서 인터넷을 하는데, 갑자기 3G 연결이 제대로 안되는 황당한 사건을 경험했습니다. 이것저것 설정을 만져보아도 제대로 동작을 안하길래 그냥 초기화를 시켜버렸습니다.

참 바보같이 홧김에 바로 초기화를 시켜버렸습니다.
백업을 하고 있다길래 그거 믿고 그냥 해버렸는데, 살릴 수 있는게 아무것도 없더군요. 그래서 아쉬운대로 아예 새로 설정하기로 하였습니다.

기존에는 그냥 바탕화면에 위젯과 어플들을 늘어놓고, 편한대로 사용했는데요, 이번에는 폴더를 만들어서 많은 어플들을 정리하여 몰아넣었습니다.

이렇게 폴더로 정리를 하니, 바탕화면이 두개가 남더군요. 굳이 일곱개 까지 필요하지 않았습니다. (아직은)

기존에 위젯으로 사용하던 즐겨찾기도 폴더로 빼서 바로가기를 만들어 두었습니다. 여러개의 즐겨찾기를 등록할 때 편리할 듯 하여 만들어서 일주일째 쓰고 있습니다. 개인적으로는 이 방식이 더 편리한 듯 합니다.



자주 사용하는 어플중 하나인 Fx카메라도,바로가기로 빼놔서 사용하니 훨씬 편리했습니다. 이게 초기 구동시에 약간의 딜레이가 있고, 또 다른 형태의 카메라를 구동하기에 불편함이 컷기 때문이죠. 이건 직접 써본 사람들만 알 수 있는 내용이겠네요.



그리고 양 사이드로 위젯들을 설치해놨는데요. 설정 및 정보 관련된 위젯들을 따로, 멀티미디어 관련 위젯 따로 모아두었습니다. 바탕화면이 일곱개나 되기 때문에 익숙해지기 전에는 뭐 제대로 찾기 힘든데, 모아두니 훨씬 낫습니다.

위젯들은 최대한 디자인을 맞추려고 했는데, 이게 그렇게 쉬운게 아니더군요. 위젯 디자인에 대한 권고사항이나 확실한 가이드라인이 제공된다면 미관상 훨씬 나은 위젯들이 나올 수 있을텐데 뭔가 통일성이 없어 보여 아쉽습니다.

안드로이드 핸드폰을 사용하시면서 인터넷 부분을 누르면 자신이 설정해둔 시작페이지로 바로 이동할텐데요, 저는 이게 너무 싫더라구요. 그래서 가능하면 자주가는 사이트들을 바로가기로 뺴놔서 사용하는데, 이것도 조금 부족했습니다. 그래서 아무것도 없는 빈 페이지만 보이게 하려고 평소 윈도우에서 사용하는 방식을 적용해보니 잘 되더군요.

시작페이지, 또는 바로가기 주소로 about:blank 를 넣어두시면 인터넷 실행할 때, 그냥 빈페이지가 뜹니다. 원치않는 사이트를 띄우는데 3G 패킷을 사용하면 싫잖아요.

그럼 즐거운 스마트폰 생활~

덧. about: 뒤에 blank가 오든 뭐가 오든 상관은 없네요. 
Posted by onionmen
728x90

맥북 화면이 너무 작다. 13인치이고, 해상도가 1280 x 800 이다. 난 이 세로 800 픽셀이 정말 작게 느껴진다. 답답하다. 

예전 쓰던 모니터가 23인치에 1280 x 768 이라는 레어급 해상도였는데, 이때 세로 해상도가 너무너무 답답해서 새로 27인치로 질렀었다.

맨처음 노트북을 살때에는 '어차피 랩탑인데 해상도가 뭐 크게 걸리겠어' 라는 생각으로 별 고민없이 구매를 했다. 하지만 계속 노트북을 사용하다 보니까 이게 생각보다 큰 단점으로 다가왔다.

윈도우만 사용하는 데스크탑 대용 서브노트북으로 사용하기에는 문제가 없을지 몰라도, OSX를 쓰기 위한 용도로는 너무 부족했다.

그래서 현재 사용중인 27인치 모니터에 물렸다. 화면은 문제가 없는데, 컴퓨터 쓸때마다 선 연결하고 들고 옮기는 것이 여간 귀찮은 것이 아니었다. 

그래서 그냥 포기하고 맥을 잘 안썼었는데, 얼마전 검색하다가 Henge docks 라는 물건을 찾았다. 맥북을 대형 디스플레이와 연결해서 쓰기에는 안성맞춤이었다. 

하지만 해외배송에, 그나마도 현재는 품절이다. 게다가 그때는 몰랐는데, 지금 좀 찾아보니 Macsafe와 Minidisplay 컨버터는 내가 직접 구매해야 한다. 59.99달러라는 저렴한 가격에 저게 다 포함되었었을거라 믿었던 내가 바보였지만, 뭐 결국 구매도 못하니 고민할 필요도 없었다. 

얼마전 웹서핑을 하다가 새로운 스텐드를 발견했다. bookarc 라는 스텐드인데, 디자인은 정말 이쁘고, 알루미늄으로 제작되었지만, 역시나 문제는 가격.


Bookarc

 
그리 싼 가격은 아니지만 그나마 대안이 될 수 있는 물건이다. 자 이제 맥북을 세워서 맥미니 이상으로 만들어놨다. 디자인은 맥과 정말 잘 어울린다. 몇가지 동영상을 봤는데, 쓰러짐 없이 안정적이다. 3개의 실리콘을 제공하여 어떤 맥북에도 꼭 맞는다.

맥북을 모니터와 연결하기에 앞서 bookarc를 쓴다면 부가적으로 좀 더 필요한 아이템들이 있다. 한번 알아보자.



입출력장치

입력장치는 기본. 데스크탑에서 쓰던 키보드와 마우스를 써도 되겠지만, 키보드는 아무래도 맥 전용으로 쓰는게 낫고, 마우스는 선택사항이다. 키보드는 무선 키보드도 괜찮지만, 나같은 경우 Page Up, Page Down, Home, End 키가 매우 중요해서 유선으로 넣었다.(무선에는 이 키가 없다.) 그리고 어차피 무선 유선 두개 다 있으니까 불편하거나 미관상 안좋으면 바꾸면 된다.

그리고 꼭 필요한 케이블. 맥과 모니터를 연결해주는 케이블이다. 나는 Minidisplay to HDMI 케이블을 선택했다.


전원장치


나 같은 경우는 두 장소에서 노트북을 사용하기 때문에 선을 뽑아서 왔다갔다 하기 귀찮다. 가능하면 맥세이프를하나 더 구매하고 싶지만 생각보다 엄청 고가이기 때문에 망설여지는 제품. 아무래도 안살듯. 


그 외

나와주었으면 하는 아이템이다.


매직 트랙패드. 

나올지 안나올지 모르겠지만, 나와만 준다면 정말 유용하게 쓰일듯. 여기에 클릭할 수 있도록 만들어만 준다면 마우스가 필요없겠지.

빨리 책상 정리해서 맥을 좀 제대로 써봐야 겠다.
Posted by onionmen
728x90
아이폰 4세대가 드디어 베일을 벗고 그 모습을 드러냈습니다. 정식명칭은 "아이폰4"

너무 루머와 비슷하게 나와서 살짝 김빠지는 감이 없지 않았지만, 그래도 발표 정리된 사진들을 보니 이거 또 기기병이 도지는건 사실이네요. 물론 얼마전에 안드로이드폰인 디자이어를 질렀기 때문에 기변은 어려울 듯 하고, 신규가입도 그렇게 쉽지는 않을 듯 합니다. 

이미 아이폰 OS 4.0 버전 (iOS4) 이 개발자들에게 배포되었기 때문에, 몇몇 기능들은 확실하게 예측이 가능했고, 또 많은 루머(홍보)를 통해서 기능들이 공개 되었습니다. 

이번 잡스의 키노트는 많은 분들의 예측에서 크게 벗어나지 않았습니다.



가장 대표적으로 추가 변경되는 부분들 입니다. 두가지만 짚어볼까요.


Retina 디스플레이 : 

디스플레이 부분이 크게 향상 되었습니다. 기존 3Gs 까지 480x320 163ppi 였던 화면이 두배로 늘어났습니다. 해상도는 960x640 이고, IPS 패널을 탑재 하였습니다. ppi (pixel per inch) 도 두배로 늘어서 326ppi 로 향상되었습니다. 

ppi 는 화면 1인치당 픽셀의 수를 의미하는데요, 자신의 디스플레이 기기를 켜고 자세히 보면 뭔가가 촘촘하게 박혀 있는 것을 볼 수 있을 거에요. 이 작은 뭔가를 픽셀이라고 하는데, 이 픽셀이 여러개 모여서 한 화면을 이루게 됩니다. 그렇기 때문에 픽셀이 많을수록 좀 더 선명한 화면을 보여줍니다. 그리고 1인치당 픽셀 표시를 ppi로 하게 되는거죠. 우리 인간의 망막이 인식할 수 있는 한계가 1픽셀당 300ppi 라고 하니 326ppi면 픽셀이 어긋남을 볼 수 없다는 뜻입니다. 그래서 Retina(망막) 디스플레이 인거죠. 게다가 전면은 동일하게 강화유리.

4개의 픽셀

아이폰 4의 경우 이 4개의 픽셀이 나뉘게 됨


한칸에 16개의 색을 표시할 수 있던게 4배 향상되어 64개 표현 가능

따라서 선명한 결과물을 얻게 됨



아이폰에서 채용한 강화유리




500만 화소 카메라 및 영상통화가 가능한 전면카메라 : 

아이폰 3세대까지는 카메라 기능에서 많은 점수를 얻지 못했습니다. 폰카로는 그럭저럭 해나갔지만, 똑딱이를 대체할만할 정도의 성능은 보여주지 못했죠. 하지만 이번에 4세대는 720p 30프레임을 지원하는 동영상 촬영까지 가능해졌기 때문에 똑딱이를 버려도 될만큼 성능이 향상되었습니다. 

아래 링크로 가시면 아이폰4 로 촬영한 무보정 사진이 올라와 있으니 카메라 성능에 참고하셔도 될듯 하겠습니다. 게다가 광량이 풍부하지 못해도 일루미네이션 센서가 탑재되어서 어두운 곳에서도 좀 더 향상된 화질의 사진을 얻을 수 있다고 합니다. 현재창으로 열기(새창)


720p 영상 촬영을 지원하게 되면서 멀티미디어 성능을 강조한듯 합니다. 제가 주목하고 싶은 부분은 바로 iMovie 인데요, 제가 맥북을 구입하고 나서 정말 유용하고 재미있게 가지고 놀았던 맥어플리케이션중 하나가 바로 iMovie 였습니다. 

사용하기 편리하고, 몇 번의 조작만으로 꽤 훌륭한 영상물을 만들어 낼 수 있습니다. 과연 아이폰에서 어느정도의 자유도를 보장해 줄 지 모르겠지만, 내부의 mp3도 활용할 수 있다면 간단하게 영상을 편집하고 유투브로 바로 공유 가능하겠습니다. 한가지 바라는게 있다면 외부출력을 통한 영상 편집 정도 일텐데, 이건 어떻게 되는지 잘 모르겠네요. 사실 아이패드에 카메라 달린 버전이 나오게 되면 이 iMovie는 아이폰보다는 아이패드용으로 훨씬 쓸모가 있을듯 합니다.

그 외에 향상된 배터리로 사용성을 더욱 강화 하였고, 멀티태스킹, 자이로스코프 센서 추가로 인해서 활용도가 더욱더 무궁무진해졌습니다.  (친구 하나는 자이로센서를 이용하여 뭔가를 만들어본다고 합니다.) 게다가 iAd를 통한 개발자 수익 개선모델도 등장하여 개발자, 사용자 모두를 만족시킬만한 발표였습니다.

애플까들에게도 구매욕을 불러일으키는 이번 아이폰도 분명 충분히 성공적일 듯 합니다. 충분히 선전하고 있는 안드로이드가 넘어야 하는 산이 또 하나 생겨버렸네요.


아쉬운 점을 꼽자면, Micro USIM 을 사용하는부분인데요, 이거 어뎁터 안나올까요. 그리고 WiFi 핫스팟 지원도 안되는 듯 한데, 이부분만 개선 되어도 기기 자체에 대한 단점을 찾기는 힘들어보이네요.

그리고 화상통화의 경우 2010년 모델은 아이폰4 끼리만 화상통화가 가능하다고 합니다. 그것도 WiFi 지역에서만 가능하다고 하는데, 2010년 이후 OS 업데이트로 3G로의 영상통화와, 다른 기기와의 화상통신을 지원할까요?




덧. 개발자 프로그램을 등록한 분들은 GM버전을 받을 수 있네요. OS3.0 에서는 GM버전이 정식버전과 동일했죠.
Posted by onionmen
이전버튼 1 2 3 4 5 이전버튼

블로그 이미지
손을 따뜻하게 만들어 주고 싶은 애인이 있습니다.
onionmen

달력

 « |  » 2024.3
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
DNS Powered by DNSEver.com

최근에 올라온 글

Yesterday
Today
Total