underfront.com

WordPress XML-RPC 오류 관련

서버에 PHP 5.5.x 버전을 설치한 후 WordPress의 일부 기능이 작동되지 않아 오류 로그를 살펴 보니 아래와 같은 오류가 있었습니다.

PHP Fatal error:  Call to undefined function xml_parser_create() in /………/www/wp-includes/class-IXR.php on line 264

PHP를 재 설치할 때 제가 php-xml을 설치하지 않은 게 화근이었던 것 같습니다. 그래서, 서버에 yum으로 php-xml을 설치해 주었습니다.

$ yum --enablerepo=remi-php55 install php-xml

설치가 끝나면 서버를 재 시작 합니다.

$ service httpd restart

이제, 정상적으로 동작 합니다. WordPress에 Jetpack이 연결되지 않아 생 고생 했네요(…)

관련글

Read more… / Leave a comment

플라바 클리퍼 제작 후기

얼마전에 Chrome 확장기능(Extension)으로 플라바 클리퍼(Flava Clipper)를 런칭했습니다. Chrome에 우측 상단에 아이콘을 항상 상주시켜 놓고 필요할때 현재 웹페이지를 Flava로 저장하는 아주 간단한 기능이죠. 사실 개인적인 필요에 의해 만들어 졌는데요. 실제로 런칭하니까 아주 뿌듯합니다..ㅎㅎ

notice_clipper2

처음에는 일단 프로토타입으로 만들고 이걸 디자인팀에 공유했는데, 뭔가 이미 디자인이 만들어 지고 있어서 이러지도 저러지도 못하다가 조금 더 발전시켜 런칭하게 되었습니다. 최초 프로토타입은 웹앱과 동일하게 웹페이지의 URL만 가져다가 서버에서 이미지의 URL만 파싱해서 사용자에게 고르도록 유도하는 방식이었는데요. 이렇다 보니 웹앱과 차별화 요소가 없다고 판단하여 확장기능의 접근 권한을 대폭 상승시켜서 배포버전에는 사용자 액션이 있을 경우 웹페이지에 직접 스크립트를 삽입해 웹페이지의 요약글과 이미지를 가져오도록 변경하였습니다.

플라바 클리퍼는 다른 클리퍼와 달리 웹페이지의 본문이 전부 필요하지 않고 이미지와 요약글 정도만 필요해서 구조는 생각보다 간단한 구조로 되어 있는데요. 실제로도 소스코드가 그렇게 길지 않습니다. 클리퍼 라이브러리가 들어있는 background.js가 있고 이외에 팝업, 사용자 동작에 의해 웹페이지를 파싱하기 위한 스크립트, 플라바 웹앱의 로그인 여부를 체크하는 부분 이렇게 나뉘어져 있고 대부분의 동작은 background.js가 처리하게 되어 있고 나머지는 거들기만 합니다^^

제가 사용자 웹페이지를 파싱하면서 가장 애먹었던 부분이 프레임인데요. 웹페이지가 단순하면 쉽겠지만 N사의 블로그만 봐도 약 10여개의 프레임으로 구성되어 있습니다. 이 중에는 광고도 있고 사용자 분석을 위한 것도 있지만 실제 본문이 iframe 안에 들어있기 때문에 난감한 상황이 발생합니다. 심지어 Opengraph 스펙의 요약글을 가져오기 위해서는 프레임을 열심히 타고 들어가서 Opengraph 메타태그를 찾아내야 하기 때문에 더욱 더 힘들었죠.

이미지의 경우에는 복수의 이미지중에 사용자가 하나를 택하는 방식이지만 요약글의 경우에는 하나만 선택이 되어야 하기 때문에 이 부분을 해결하기 위해 각 프레임 단위로 document.body의 innerText의 길이를 측정하여 마지막에 프레임별로 가장 긴 텍스트를 가진 프레임을 채택하는 방법을 선택 했습니다. 하지만, 이 역시도 단점은 있는데요. Google Plus나 Facebook의 소셜댓글은 iframe을 이용하기 때문에 댓글의 텍스트 길이가 본문보다 긴 경우에는 프레임을 댓글 프레임으로 선택하기 때문에 방법이 없더군요. 그래서 이 부분은 직접 URL을 차단하는 방법을 사용했습니다. 더 좋은 방법을 더 찾아봐야 하긴 하겠지만요.

이렇게 사용자가 선택할 데이터들을 수집하여 사용자가 “저장”버튼을 누르면 플라바 서버로 보내지게 되고 이 부분을 백그라운드로 처리 하여 저장이 완료되면 Notification API를 이용해 사용자에게 알려주게 됩니다. 이렇게 주절주절 설명해 놓으면 사실 별거 아닌 것 같지만 은근히 시간이 걸리더라구요. 그 외에 고생했던 부분이라면 웹페이지 파싱해서 백그라운드와 통신하는 부분인 것 같습니다. 이 부분은 처음에 개념이 안 잡혀서 고생했습니다-_- 나중에야 개념을 잡았구요.

시간은 걸리더라도 웹브라우저 확장기능은 주로 사용하는 언어로 만들어 지는 만큼 만들어볼만한 가치가 있다라는 생각이 듭니다. 다음에는 Firefox Add-on에 도전을…?!

Read more… / 2 Comments

Retina Display에서 1px을 1px로 보이게 하는 법

최근 웹 작업을 하면서 Retina Display를 대응할 수 밖에 없는데요. 아이폰은 해상도가 960×640입니다. 때문에 디자인도 해당 해상도를 기준으로 작업이 되는데요. 웹 작업 하시는 분들은 이미 알고 계시겠지만 아이폰에 들어가는 모바일 사파리를 포함해 모바일 웹브라우저는 Retina Display와를 별개로 480×320으로 인식합니다.

이 부분 때문에 기존의 Retina Display가 아닌 모바일 웹페이지를 볼때에는 문제가 없지만 1px를 표현할때에는 조금 애매한 문제가 생기게 됩니다. border라던가 특정 라인을 표시할때 1px를 자주 사용하게 되는데 Retina Display에서는 1px을 실제로는 2px로 표현하고 있다는 점 입니다. 어쩌면 이 부분이 별것 아닌 것 처럼 보이지만 디자이너 입장에서는 1px도 매우 소중합니다(…?!)

때문에 이 같은 이유로 열심히 구글링을 해 보았지만 별 소득은 없었습니다. 그 중에서도 Swipe.js를 만든 Brad Birdsall 아저씨가 만든 “Modile Web in High Resolution”이란 문서가 구글 최 상단에 뜨기는 하는데요. 이 문서가 안내하는 방법은 Retina Display일 경우, 즉 기기의 화면 비율(Device Pixel Ratio)이 1.5배 이상일 경우 box-shadow를 살짝 주어서 1 pixel 처럼 보이도록 하는 일종의 눈 속임 입니다.

하지만, 이 방법을 쓰면 버튼 주변이 지저분 해 지는 단점이 생겨나게 됩니다. 또한, 버튼이 아니라 텍스트 입력 박스의 경우 background-color를 하얀색(#fff)이고 border만 색상을 주게 되는데 굉장히 지저분해 지는 문제가 생기더라구요. 그래서 오랜 고심끝에 정말 무식한 방법을 사용했습니다.

일단, 먼저 1 pixel을 border를 가지고 있는 박스를 하나 만들어 주고요. 스타일을 입혀줍니다.

<input type="text" name="userid" value="">
input[type="text"]{
    border: 1px solid #dadada;
    width: 256px;
    height: 30px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: bold;
    color: #323232;
}

이렇게 마크업을 하면 평범한 텍스트 입력 박스가 만들어 지게 됩니다. 물론, Retina Display에서도 2 pixel로 표현이 될 겁니다.

input_text_1px

이제, border를 1 pixel로 만들 차례 인데요. 사용자의 Mobile Web browser가 CSS3 Transform을 지원한다는 가정하에 Transform를 이용해 2배 뻥튀기 시켜 줍니다..-_-;

@media only (-webkit-min-device-pixel-ratio: 1.5){
    input[type="text"]{
        width: 512px; /* 256*2 */
        height: 60px; /* 30*2 */
        padding: 0 24px; /* 12*2 */
        font-size: 26px; /* 13*2 */

        -webkit-transform: scale(0.5); /* 모든 사이즈를 2배씩 늘렸기 때문에 transform은 0.5배로 조절합니다. */
        -webkit-transform-origin: 0 0;
        -webkit-transform-style: flat;
}
}

코드를 보시면 느끼시겠지만 정말 무식한 방법입니다. Retina Display에서 border만 50% 줄이기 위해 border-width를 제외한 모든 사이즈를 2배씩 늘이고 Transform을 이용해 50% 줄이면 보시는 대로 border-width가 전보다 더 가늘어 진 것을 느끼실 수 있습니다. 보기에도 훨씬 깔끔 해 보이구요.

input_text_real_1px

하지만, 여기에도 문제점은 있습니다. 모든 사이즈를 2배 늘이고 Scale만 50% 줄인 것이기 때문에 웹브라우저에서는 여전히 50% 줄이기 이전의 사이즈로 인지하기 때문에 줄어든 나머지 공간에는 여백이 생겨나게 됩니다. 이 여백은 상위 DOM에서 강제로 사이즈를 지정해 주는 방법 밖에는 없습니다.

<div class="input-text">
    <input type="text" name="userid" value="">
</div>
.input-text{
    height: 32px;
}

이렇게 작성 하셔야 빈 여백이 생겨나는 것을 방지하실 수 있습니다. 폼을 dl,dt,dd로 작성 하실 경우에는 dd에 강제 사이즈를 지정하시는 것도 좋은 방법입니다. 물론, 이 방법 때문에 불 필요한 태그 요소가 발생하는 것은 사실입니다. 때문에 이 방법을 추천드리고 싶지는 않습니다.

하지만, 필요하다면 box-shadow를 사용하시는 것 보다는 transform을 적절히 이용하는 것도 한 방법일 수 있을 것 같습니다.

현재, Flava Web의 아이디,비밀번호 찾기 페이지와 Flava 앱 내에 암호 변경 페이지에 실제 적용되어져 있습니다.

Read more… / Leave a comment