ajax와 encoding 문제…

며칠 전 ‘이해할 수 없는 Cafe24‘라는 글을 썼었는데, 사실 문제는 cafe24가 아니었습니다. HTTP(Hyper text transfer protocol)로 페이지를 요청하기 위해서는 다음과 같은 방법을 사용합니다.

METHOD URI VERSION

많은 옵션이 붙을 수 있지만 이정도가 페이지를 요청하기 위한 기본 쿼리라고 생각하시면 됩니다. METHOD는 ‘GET’, ‘POST’, ‘HEAD’, ‘OPTION’ 정도가 될 수 있겠고, URI는 PATH + QUERY STRING이라고 생각하시면 되겠습니다.

Continue reading ajax와 encoding 문제…

번역: 한국의 홈브류 인터넷

오랫만에 일찍 학교에 나온 김에 아침부터 서핑을 즐기다가, 제가 아침에 공개한 글과 관련된 좋은 내용의 글을 발견해서 살짜쿵 번역을 해봤습니다. ‘국내 CA 시스템 = 공인인증 시스템’ 이라고 이해하시면 되겠습니다. 약간의 의역이 있고, 오역도 있을 수 있습니다. -_-a

읽다보면 참 부끄러운 부분이 많아요.

원문: http://web.archive.org/web/20071225181340/http://webstandard.or.kr/en/2007/03/17/korean-home-brew-on-the-web/


Vladimir씨는 SEED에 관련된 기술적인 문제를 얘기하기 위해 한국의 인터넷 뱅킹을 이용해본 경험을 이야기 했습니다. 그가 한국 사이트에서 겪었던 문제들 덕분에 그 문제에 대해 기술적인 부분을 설명할 기회가 왔네요. (이 글을 읽기 전에 Vladimir씨가 쓴 “It’s gone to SEED”를 먼저 읽으시기 바랍니다.)

1997년에 SEED가 처음 나왔을 당시엔 암호화를 위해선 ActiveX나 NSPlugin(브라우져 전쟁 이후에 사라졌음)를 이용할 수 밖엔 없었습니다. 이 플러그인들은 국내 전용의 CA들로부터 개인 인증서를 발행하고, 관리하는 역할과 돈을 보낼 때 계좌번호 같은 “중요한 텍스트” 들에 “전자 서명을 더하는” 역할을 담당했습니다. INISafeWeb 또한 이런 플러그인들 중 하나입니다. (한국에는 금융/전자상거래 및 전자 정부 사용 등의 서비스를 위한 국내 전용 CA들이 8개 정도 있습니다. 이런 서비스를 이용하기 위해서는 같은 기능을 하는 ActiveX를 최소 3개 이상 설치해야만 합니다. 참 웃긴 일이죠.)

Continue reading 번역: 한국의 홈브류 인터넷

인터넷 뱅킹과 크로스 브라우징

나는 오늘도 인터넷 뱅킹을 위해 모 은행의 홈페이지로 접속했고, 플러그인을 설치해야한다는 페이지를 5분동안 보고 있어야 했다. ‘왜 안넘어가는거야!’ 라고 짜증을 내며 브라우저를 보니 firefox다. 비굴하게 32bit 버젼의 인터넷 익스플로러를 사용해서 접속하니 나도 모르게 실행되는 백신과 키보드 보안 프로그램 그리고 XecureWeb…

이 은행에 있던 돈을 다른 은행에 있는 계좌로 이체를 시킨 뒤 잔고가 얼마인지 확인하기 위해 또 다른 은행사 홈페이지로 접속을 했고, 또 다른 프로그램들이 실행되기 시작했다.

도대체 XecureWeb, INISafeWeb등이 뭐하는 프로그램이길래 설치를 강요받아야 하고, 또 무슨 근거로 신뢰를 강요받아야 하는걸까?

XecureWeb / INISafeWeb 도대체 얘네 뭐하는 애들이야?

크게 인터넷 뱅킹에서 필요한 기능은 두 가지 이다. 인터넷 뱅킹을 하는 동안 오가는 데이터를 중간에서 가로챈다고 하더라도 그 내용을 알아 볼 수 없게 하기 위해 보안 채널을 구성하는 것이 그 첫번째이고, 거래(계좌 이체 등)를 한 사람이 본인이라는 사실을 증명하는 것이 그 두번째이다.

Continue reading 인터넷 뱅킹과 크로스 브라우징

매력적인 Internet Explorer 8 Beta2 의 개발툴

Internet Explorer 8 Beta2 에 포함된 개발툴이 소개되었는데, 이거 굉장히 멋지네요. 우선 8 Beta1 에서 소개된 개발툴의 장점들은 다음과 같습니다.

  1. 기본으로 포함되어 있으며 사용하기가 쉬움
  2. 비쥬얼 인터페이스를 제공
  3. 빠르게 실험이 가능

Beta2 에서는 이보다 훨씬 더 멋진 기능들이 추가되었는데, 이는 다음과 같습니다.

JScript 의 프로파일링과 디버깅

Beta2 에서는 just-in-time-debuging 을 위한 Console.log 를 지원합니다. 바로바로 에러메시지 등을 콘솔에 찍어볼 수 있기 때문에 굉장히 편리할 것 같네요.

하지만 디버거는 사이트가 그저 돌아가게 정도밖에는 도움을 주지 못합니다. 그렇기 때문에 사이트를 최적화하는데 도움을 주기 위해 Beta2 부터는 JScript 프로파일러를 제공하고 있습니다. 사용법도 매우 간단합니다. ‘Start Profiling’ 을 클릭한 뒤 사이트를 이용하다가 ‘Stop Profiling’ 을 클릭하는 것만으로 끝! 그동안 어떤 코드가 얼마나 많은 시간을 잡아먹었는지는 아래 스크린샷에서와 같이 표현됩니다.

이에 대한 더 자세한 내용은 스크립트 디버깅하기스크립트 프로파일링하기 를 참고하시면 되겠습니다.

HTML 과 CSS 다루기

Beta1 에서는 HTML 의 라이브(실시간) 에디팅만을 지원했지만 Beta2 에서는 HTML 과 CSS 모두 라이브 에디팅을 사용할 수 있습니다. CSS 의 경우 속성(Property) 이름, 값, 셀렉터 타입 등을 클릭해서 값을 바꿔줄 수 있습니다.

HTML 의 순서를 바꿔준다거나 엘리먼트 일부를 추가/제거 하기 위해 HTML 자체를 수정하는 것도 가능합니다. ‘HTML Editable’ 버튼을 클릭함을써 트리뷰 형태와 HTML 에디터 모드를 자유롭게 옮겨다닐 수 있네요.

페이지가 새로고침 되거나 다른 페이지로 넘어갈 경우 수정한 내용은 사라져 버리게 됩니다. 그렇기 때문에 수정된 HTML 과 CSS 를 파일로 저장할 수 있는 기능이 포함되었으며, windiff 를 사용했을 때와 같이 원본 파일과 달라진 부분만을 저장하는 것도 가능합니다.

호환성 테스트

호환성 테스트를 쉽게 하기 위해 개발 툴에서는 ‘Browser mode’ 와 ‘Document mode’ 메뉴를 제공합니다. ‘Browser mode’ 를 통해 다른 버젼의 익스플로러를 흉내낼 수 있으며, ‘Document Mode’ 를 통해서는 doctype 이나 meta tag 를 통해 지정된 렌더링 모드를 바꿔볼 수 있게 됩니다.

간단한 사용법

Beta2 에서는 사용자 친화적인 툴을 만들기 위해 굉장히 노력을 많이 했다네요. 그렇기 때문에 따로 뭘 설치할 필요나 개발툴을 사용하기 위해 ‘고급(Advanced)’ 탭을 클릭하는 노력을 제거해버렸습니다. 최소한의 클릭으로 툴을 사용할 수 있도록 만들었다는군요.

개발자들은 키보드를 사랑하는 경향이 있기 때문에 자주 사용하는 기능들에는 단축키가 배정되었습니다. 예를 들어 F12 는 툴을 여는 역할을 하고, CTRL+E 는 검색 상자에 포커스를 만드는 역할을 하게 됩니다. F3 과 Shift+F3 은 다음 검색 결과로 넘어가는 역할이네요. 단축키에 대해 더 알아보고 싶으시다면 ‘전체 단축키’ 문서를 참고하시기 바랍니다.

거기다가 툴바가 더 이뻐졌고, 자주 사용하는 기능들은 더 빠르게 접근할 수 있도록 개선이 있었다고 합니다. 더 쉽게 문법을 확인할 수 있도록 구문 강조(Syntax Highlighting) 기능이 추가되었구요.

또 툴바 형태로 개발툴을 익스플로러 내부에 붙여놓을 수도 있고, CTRL+M 이나 최소화 버튼을 이용 메뉴에만 표시되도록 만드는 것도 가능해졌다네요.

아직 베타 단계이므로 실제 사용에 있어서는 문제가 있을 지도 모르겠지만, 제공하려는 기능들만 봐서는 굉장히 인상적입니다. 이 글 대부분은 IEBlog 에 영문으로 기재된 내용을 대충 한글로 옮긴 것이므로 오역이나 잘못 이해한 부분이 있을 수도 있습니다. 원문이 궁금하신 분은 아래 링크를 따라가보시면 되겠습니다. :)

http://blogs.msdn.com/ie/archive/2008/09/03/developer-tools-in-internet-explorer-8-beta-2.aspx

그럼 다들 즐거운 하루 보내세요.