크롬의 개발자툴 스킨 바꾸기

시작하며

download-hero-win

웹개발하실때 크롬은 거의 필수품이라 많이들 쓰시리라 생각합니다.
크롬 개발자도구에서 사용할 아주 괜찮은 스킨이 하나 나와서 소개하려고 합니다.
왠지 ST2에서 사용하는 테마와 느낌이 유사해서 그런지 더 마음에 드네요!
우선 뭘 소개하려는 것인지 밑에 이미지를 봐주세요!

 

변경 전모습

크롬 적용 전
크롬 적용 전

 

변경 후모습

크롬 적용 후
크롬 적용 후

 

나만의 스타일 만들기

우선 크롬 개발자 도구의 CSS를 변경하기 위해 해당 CSS 파일의 위치를 알아야 합니다.
플랫폼별로 경로는 다음과 같습니다.

MAC에서의 경로

 Ubuntu에서의 경로

 Windows Vista이상 에서의 경로

 Windows XP에서의 경로

사용중인 플랫폼에 해당 위치로 가시면 Custom.css가 있습니다. 능력있으신 분들께서는 이부분을 수정해서 나만의 개발자 도구 스타일을 만드시면 됩니다.
제가 위에 보여드린 것은 Zero Mark Matrix라는 이름을 가진 테마이며 Github에서 공개 배포 중 입니다.  테마를 다운 받으시면 Custom.css와 Custom-stable.css 2개가 있습니다.

이중 Custom-stable.css 파일을 Custom.css로 변경하셔서 해당 위치에 덮어씌우시면 끝납니다.
그런후, 크롬 종료후 재실행하여 확인해 보시면 적용되어 있는 것을 보실 수 있을 것 입니다.

자세한 내용과 설명들은 해당 링크 참고하시고 잘 사용하세요! ^^

 

 

 

PHP로 구현한 SEED128 + CBC + PKCS5 암호화

SEED 암호알고리즘
SEED를 제공하는 인터넷진흥원 사이트 스크린샷

 

Prologue

회사에서 미션이 하나 떨어졌습니다. 한국인터넷진흥원에서 순수 국내기술로 개발된 SEED128을 PHP로 구현하는 것 입니다.
참고로 한국인터넷진흥원에서 JAVA나 C언어로는 SEED소스를 제공하고 있습니다. 심지어 안드로이드와 Objective-C도 제공하는데 PHP만 없습니다.
SEED에 관련된 내용은 해당 사이트에서 참고하시기 바라오며, 현재 표준으로 채택되어져 각종 금융기관에서 널리 사용되고 있다는 것만 알고계시면 될 것 같습니다.

SEED 암호화 기술은 블록 암호 알고리즘을 채택하고 있어 통신하기 위한 곳 모두 동일한 Key를 가지고 있어야 암호화와 복호화가 가능합니다.
저 역시 금융기관쪽과 중요한 데이터를 통신을 하기 위해서 사용하는 것 이며 해당 금융기관쪽은 자바로 이미 구현되어 있어 동일한 Key를 가지고 저희쪽 PHP로 암/복호화가 가능해야 합니다.
사실 말이 PHP로 구현하는 것이지 Native 언어는 명확한 기준으로 변수타입들이 정해져 있기라도 하지만 웹 전용으로 유연하게 만들어진 PHP에서 지원할리 없기때문에 무수한 삽질이 예상되었습니다.

우선 검색하기 시작했습니다. 다행히도 SEED자체에 대한 프로세스는 PHP로 구현해놓으신 분이 계셨습니다. 아래에서 class.seed.php를 다운로드 받으시면 됩니다.
다시한번 이자리를 빌어 정말 감사드립니다.

출처: http://docs.cena.co.kr/textyle/15770

하지만 위의 소스는 순수하게 SEED만 구현해 놔서 제가 원하는 것을 구현하기에는 부족했으며, 기존 class.seed.php 클래스는 운영체제가 64bit인 경우 Integer의 Max값이 커지다보니 라운드키의 정수값을 오버플로우 시키지 못하는 증상으로 인해 값을 제대로 출력하지 못하는 문제가 있어 이 부분은 별도로 해결했습니다.

[box type=”info”]자바는 플랫폼에 관계없이 32비트 고정이지만, PHP는 플랫폼에 따라 32비트면 정수의 최대값이 2147483647이고, 64비트면 9223372036854775807로 자동으로 할당됩니다.[/box]

암호화를 운용하기 위해서 저의 경우에는 CBC와 PKCS5 방식으로 구현을 해야하며 통상적으로 검색하면 나오는 IV의 값도 PHP에서 사용하는 랜덤 스트링 형태가 아닌 자바와 동일하게 바이트 배열로 정해진 값을 만들어서 써야 하기 때문에 본젹적인 개발과 검색에 들어가기 시작했습니다. 말 자체를 이해 못하시는 분들을 위해 용어에 대한 정의들 부터 살펴보겠습니다.

 

암호 블록 체인 방식 (CBC)

그림을 보면 더 이해가 잘 되야 하는데~ 저는 이런 그림을 별로 좋아하지 않아서 이해가 잘 되지 않았습니다.
간단하게 설명하면 이전 블록의 암호문을 현재 평문 블록을 암호화할 때 사용하면서 운용하는 모드입니다. 따라서 같은 평문들도 서로 다른 암호문 블록으로 순차적으로 암호화가 이루어지게 됩니다. 하지만 처음 나오는 평문을 암호화할 암호문이 없기 때문에 보통 랜덤으로 만들게 되며 이를 IV(초기화 벡터)라고 합니다.
평문의 첫번째 블록이 IV와 XOR을 수행하고 나서 암호화를 수행하게 되며 다음은 그 암호화된 블록이 평문의 다음블록을 XOR하는 식으로 평문 블록을 마칠때까지 반복하는 구조입니다. 이게 저도 수도 없이 봤지만 쉽게 이해가 되지 않더군요! 그래도 이해하고 넘어가셔야 합니다. 아래는 위키피디아에서 발췌한 이미지를 첨부하였으며 이해가 안되시는 내용은 구글링을 통해 확인하시기 바랍니다.

Cbc encryption.png
CBC 운영모드에서의 암호화
Cbc decryption.png
CBC 운영모드에서의 복호화

Continue reading PHP로 구현한 SEED128 + CBC + PKCS5 암호화

코드 편집기 Sublime Text 2 소개

 

Prologue

보통 에디터하면 PHP/HTML/CSS 자동완성으로 좀더 편리하게 코딩할 수 있는 도구라고 생각하고 있습니다. 저도 메모장부터 시작했지만 맥에서는 Coda를 사용하고 PC에서는 EditPlus를 사용해왔습니다. 하지만 이제 떠날때가 온 것 같습니다.

[box] 가볍고 확장성이 뛰어난 Sublime Text 2라는 에디터를 소개합니다.[/box]

혹 할만한 동영상을 찾지 못해 간단한 Feature에 대해서 설명해놓은 동영상을 첨부했습니다. Sublime Text 2 사이트의 메인페이지를 보시면 다른 에디터에서 보기 힘든 기능들을 보실 수 있으니 참고하시기 바랍니다.
ST2가 이미 나온지 꽤 됬음에도 불구하고 아직도 존재를 모르시는 분들이 많은 것 같습니다.
써보지 않으셨던 분들께서는 꼭 한번 사용이라도 해보라고 권해보고 싶습니다.

ST2는 작은 덩치에도 불구하고 확장성이 뛰어나고 리눅스, 맥, 윈도우 모두 지원합니다. 어떤분이 써놓으신 글을 보니 “한번 써보면 vi를 버리게 만드는 녀석”이라고 해놓으셨더군요! 그만큼 코딩하는 사람들만을 위해 만들어진 프로그램임에는 틀림없습니다.

그래서 그런지 설정하는 부분도 UI가 아닌 설정 파일을 열어서 텍스트를 수정하면 설정이 완료되는 방식입니다. 처음에는 적응이 잘 안되지만 사용하면 할 수록 편해지는 제 자신을 보곤 합니다.  아래 그림에서 우측의 스크롤 영역에 보이는 코드 프리뷰 기능도 신선하게 느껴지지 않나요?

 

간단한 특징 소개

sublime_text_2
Sublime Text 2의 기본 UI

보기 좋은 떡이 맛도 있다고 처음 접했음에도 낯설지 않은 정감 있는 모습입니다. 간단하게 제가 느끼는 장점들을 간략하게 나열해보도록 하겠습니다.

  • 작고 가볍다.
  • 모든 기능들을 단축키로 이용할 수 있다.
  • 플러그인을 통해 기능 확장이 용이하다.
  • 좌측의 네비게이션에서 클릭만해도 파일의 내용을 바로 볼 수 있다. (일종의 프리뷰 기능)
  • Python Interpreter가 내장되어 있어 Python 개발에 용이하다.
  • 파일 전체검색 뿐만 아니라 쓸 수 있는 기능들에 대해서도 검색해서 해당 기능을 바로 이용할 수 있다.
  • EUC-KR 작업시 FTP에서 Encoding 에러가 나니 EUC-KR 환경의 유저는 사용을 피하시는게 좋습니다. (2013년 7월)
  • Sublime Text 2 블로그에서 소개하는 신기한 편집 기능들을 이용할 수 있다.

패키지 컨트롤 설치방법

  1. 패키지 컨트롤 (Package Control) 메뉴를 추가하겠습니다.
  2. 상단 메뉴바의 View > Show Console을 클릭하면 아래 이미지와 같이 하단에 콘솔 박스가 출력됩니다.
    install_package_control
    패키지 컨트롤 설치 안내 화면

     

  3. 아래 그림과 같이 소스코드를 콘솔에 붙여넣고 Enter를 누릅니다.

  4. 재부팅하라는 메시지가 콘솔에 나타나고 프로그램을 종료하시고 다시 실행합니다.
  5. 재실행후 메뉴의 Preferences > Package Control 이라는 메뉴가 생성되는 것을 보실 수 있습니다.
  6. 클릭해서 열어보시면 패키지와 관련된 메뉴가 쭈욱~ 나타납니다.
  7. 여기서 Install Package 를 누릅니다.
  8. 패키지메뉴 창이 닫히고 패키지 리스트가 나타납니다.
  9. SFTP, WordPress, Emac과 같은 키워드로 검색해서 원하시는 플러그인을 설치하시면 됩니다.
  10. 설치시 클릭만 하시면 자동으로 자기가 다운받아서 설치합니다.

 

워드프레스 플러그인 설치

저희가 알고자 하는 워드프레스 함수를 자동완선시켜서 작업을 도와주는 플러그인을 설치해보도록 하겠습니다.
설치하시게 되면 아래와 같이 Sublime Text 2에서 편리하게 사용하실 수 있습니다.
참고로 woocommerce의 함수 지원이 가능한 플러그인도 제공합니다.
그럼 설치하는 방법에 대해서 안내해드리도록 하겠습니다.

wordpress_plugin

  1. Github의 서브라임2 워드프레스  페이지로 이동합니다.
  2. 해당 플러그인을 다운로드를 받습니다.
  3. Preference > Browse Packages… 를 클릭하면 탐색기가 열립니다.
  4. 해당 위치에 다운받은 워드프레스 페이지를 올려놓습니다.
  5. ST2를 종료후 다시 실행하면 적용됩니다.
  6. 자동설치 안되는 플러그인은 이와 같이 설치하시면 됩니다.

 

참고 사이트

http://windtale.net/blog/sublime-text-tip/

IE9 이하에서 HTML5 사용을 위한 필수요건

현재 회사 프로젝트 홈페이지 구축하면서 IE에서 버전 및 쿼크/표준모드에 따라 레이아웃이 무너지는 증상을 잡기 위해 사용중인 것들입니다.
몇년을 IE 신경안 쓰다가 다시 IE를 신경쓰면서 작업하려고 하니 미칠 것 같습니다. ㅋㅋ

특히나 IE8에서 레이아웃이 무너지는데 저 같이 고생하시는 분들 없으셨으면 합니다.

 

IE9 미만에서 HTML5 엘리먼트 지원 (구글 코드에서 다운로드)

위 코드가 html5shiv가 지원하는 HTML5 엘리먼트

 

IE7 미만에서 HTML 및 CSS 엘리먼트, 투명 PNG 지원 (구글 코드에서 다운로드)

이는 현재 사용하는 IE보다 버전이 낮을 경우 작동하는 스크립트로 버전이 낮은 브라우저에서 호환성을 보장하게 만들어줍니다.
저는 <!–[if IE 9]> 이런 형식으로 IE9일때만 혹은 IE8일때만 불러올 수 있도록 변경해서 사용중입니다.
특히 IE8부분은 아예 제거를 해버리니 레이아웃이 정상적으로 나오더군요!!
참고만 해주세요! 각자의 환경에 따라 다르게 작동할 수 있으니 유의하셔서 작업하시기 바랍니다.

 

IE9 미만에서 HTML5 DOM 인식

 

스크립트도 크로스 브라우징 생각하면 IE와 다르게 사용해야하는 부분들도 많습니다만 여기서는 그 부분은 다루지 않겠습니다.
급하게 작성하는거라 틀린 부분이나 추가사항 코멘트 달아주시면 참고하도록 하겠습니다.