개인 블로그용 독립 도메인을 구입해서 새로운 도메인으로 이전을 하려니 은근히 준비할 것들이 많았다. 기존 포스팅들이 이미 구글, 네이버 등의 검색엔진에 잘 인덱싱되어있는 것들이 많다보니 이것을 어떻게하면 잘 유지하면서 이전 할 수있을지가 관건이었다. 이전 과정 요약 새로운 도메인과 예전 도메인에 대해 사이트가 각각 잘 동작하도록 셋팅을 해둔다. SEO를 위해 구글 웹마스터 도구에서 기존 도메인 -> 새도메인으로 변경을 해준다. 사이트 이전 을 참조 기존 도메인으로 접속시 새 도메인으로 웹서버 자체 설정을 변경하여 301 Redirection 을 설정해 둔다. ...
구버전의 인터넷 익스플로러(Internet Explorer)를 사용하는 유저들이 워낙 많기 때문에 웹사이트를 만들때 항상 구버전에 대해서 잘 동작하는지에 대한 체크가 필요하다. Windows XP, Vista 사용자들의 경우 낮은버전의 IE를 사용하는 경우가 많으며 특히 XP의 경우 IE 8 이후의 버전은 설치 자체가 불가능하니 주의가 요구된다. IE 호환성보기 관련 주의사항 정부사이트를 포함한 바보같은 국내 몇몇 웹사이트에서 호환성 보기 체크를 권고할때가 있기때문에, 많은 사용자들이 시키는대로 체크를 한 후 적용해제하는것을 잊어버리는 경우가 꽤 있는듯 하다. 덕분에 최신버전의 인터넷 익스플로러를 사용하면서도 호환성 보기 모드로 웹브라우저를 사용하다보니 레이아웃이 깨지는 경우가 발생한다. 따라서 HTML5 등 최신기능을 사용했다면 웹페이지 <head>부분에 다음 메타태그를 꼭 넣어주는 것이 좋다. ...
PHP기반의 웹사이트에서 증명서 발급, 영수증 발급, 견적서 발급 등 자동으로 PDF를 생성할일이 많은편이다. 추가적인 라이브러리 설치와 셋업과정 없이 기본적인 PHP 디폴트 설치 상태에서도 잘 동작하는 두가지 대표적인 오픈소스 프로젝트를 소개해 보려 한다. R&OS 홈페이지: http://sourceforge.net/projects/pdf-php/ 트루타입 폰트(TTF)를 지원하지만 유니코드 폰트(예: 맑은고딕, 나눔고딕 등) 지원이 제대로 안되서 한글이 포함된 PDF 문서를 생성하기가 쉽지 않다. 라이브러리에서 유니코드 트루타입폰트를 로딩하면 예외가 발생해서 사용이 불가능하다. 유니코드가 아닌 트루타입 폰트를 사용할경우 한글이 지원되지만(예: 아리따글꼴 등) 해당 폰트를 생성된 PDF문서에 포함(embed) 시켜야만 한다 (포함시키지 않을경우 문서가 깨짐). 그러다보니 한글 폰트가 포함되어 문서용량이 커지고 로딩이 길어지는 것을 감수해야 한다. ...
한글 웹사이트의 경우 브라우저 및 OS마다 기본폰트도 다르고, 폰트 렌더링 방식도 제각각이다보니 웹사이트 제작시 디자이너-개발자-웹사이트디자인 의뢰인 간에 폰트를 이미지화 해서 쓸 것인지 항상 말이 많다. 영어폰트같은 경우에는 용량이 작아서 부담없이 여러 폰트들을 웹폰트 형식으로 임포트해서 사용가능하지만, 한글폰트의경우 기본적으로 1M가 넘어가는 대용량이기 때문에 하나이상의 폰트를 웹사이트에 사용하는 것은 웹사이트 로딩속도에 치명적인 영향을 끼친다. 하지만 결국 검색엔진 최적화(SEO)와 유지보수 관리의 용이성 때문에 이미지화 시킨 텍스트보다는 실제 폰트를 이용하여 렌더링된 텍스트가 여러모로 장점이 많다. 워드프레스의 메뉴나 위젯등 대부분이 텍스트를 이용한 타이포그라피를 이용하여 만들어진 디자인이 많기때문에 원활한 활용을 위해 한글 웹폰트의 필요성이 더 커지고 있다. 최근에는 네이버에서 무료로 배포하는 나눔고딕 덕분에 폰트선택의 폭이 많이 늘어나서 상황이 많이 좋아진 편이며, 더군다나 구글 웹폰트에서 earlyaccess 형식이긴 하지만 한글폰트를 지원하기 시작했고, 여기에 나눔고딕이 포함되어 있어서 매우 편리하게 나눔고딕을 웹폰트로 사용할 수 있게 되었다. ...
액세스 컨트롤 에러 웹사이트에서 XMLHttpRequest를 이용한 ajax 요청을 보낼 때, 현재 웹사이트의 도메인과 ajax 요청을 보낼 웹사이트의 도메인이 다른 경우 브라우저 차원에서 보안을 위해 다음과 같은 액세스 컨트롤 에러를 발생시킨다. XMLHttpRequest cannot load http://www.example.co.kr/wp/wp-admin/admin-ajax.php?action=get_portfolio_item_action&postid=178. Origin http://example.co.kr is not allowed by Access-Control-Allow-Origin. 위 예시와 같이 상위 도메인이 같더라도, 서브도메인만 달라지면 액세스 컨트롤 에러가 발생한다. 따라서 웹사이트가 www.example.co.kr 로 접속하거나 example.co.kr로 접속했을때 동일한 페이지를 보여준다고 해도 엄연히 다른 사이트에 접속한것으로 웹브라우저가 인식한다. 따라서 위와같이 동일사이트에 접속했다고 생각했음에도 불구하고, 생각치 않게 액세스 컨트롤 에러가 발생하는 실수를 할 수 있기 때문에, 이러한 실수를 막으려면 둘중에 하나의 도메인으로 통일해서 강제 redirection을 걸어놓는 것이 좋다. ...
워드프레스로 요즘 유행하는 리스폰시브 테마를 구현하다가 비디오를 임베딩 할일이 생겼다. 유튜브(YouTube)나 비메오(Vimeo)의 경우 보통 iframe을 사용해서 로딩되기 때문에 가로세로 길이를 고정하지 않고 CSS만 갖고 동적으로 표현하려니 쉽지 않았다. 그냥 jQuery로 계산해서 처리하려다가 혹시나 해서 구글링 해보다가 http://avexdesigns.com/responsive-youtube-embed/ 글을 발견했다. 계산식도 없이 CSS만 갖고 리사이징을 하는 구현 아이디어를 보니 무릎이 탁 쳐진다. 역시 세상에 참 똑똑하신 분들 많은걸 새삼 깨닫는다. HTML 코드 CSS 코드 .video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video-container iframe, .video-container object, .video-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 동작 원리 iframe에 width:100%, height:100% 속성을 줘서 일단 부모 엘리먼트를 꽉채우도록 만들어 둔다. ...
워드프레스로 블로깅을 하다보면 All In One SEO Pack 플러긴만 설치해두면 구글에는 엄청나게 검색이 잘되는 것을 금방 알 수 있다. 워드프레스 자체의 고유주소(permalink)시스템 + 자동 생성되는 메타정보(키워드나 컨텐츠 내용) 들이 이미 구글 봇이 수행하는 인덱싱에 최적화 되있기 때문이다. 덕분에 큰 노력 없이도 구글에 최상단 노출이 되는 경우가 많다보니, 블로그 트래픽의 구글검색을 타고 들어오고 있다. 하지만 글을 올리고 몇달이 지나도 국내 검색 엔진들에는 전혀 검색이 되지 않길래 이것저것 검색을 해보니, 아니 웬걸. 네이버 검색엔진님께 내가 직접 RSS 피드을 등록을 해줘야 검색이 된다는 황당한 설명을 발견. 네이버 신디케이션 서비스도 그렇고 네이버측에서는 구글처럼 봇으로 긁어오는게 해당 사이트에 무리를 줄 수 있다는 핑계를 대긴 하지만 실제로 이렇게 되어있는 이유가 궁금할 따름이다. 아래는 네이버측의 설명이다 ...
네이버 블로그나 기타 웹사이트에서 CSS로 스타일을 적용하지 않고, inline 스타일로 html태그 안에 속성들이 설정된 경우가 많다. 이 경우 해당 문서를 복사하거나, 편집할때 매우 지저분해서 불편한데 다음 링크에서 제공하는 온라인 html 속성 제거 툴을 사용하면 매우 편하다. HTML stripper
이글의 경우 “http://www.letmecompile.com/워드프레스-고유주소-원리” 라는 고유주소(permalink)를 갖는다. URL에는 디렉토리 구조처럼 나오면서도 워드프레스의 특정 포스트로 연결되는 이 고유주소 기능의 원리가 신기해서 구글링을 좀 해보았다. apache http 서버의 mod_rewrite 모듈 apache의 모듈중에서 mod_rewrite 가 활성화 되어 있을경우 서버내의 .htaccess 파일에 RewriteRule을 정할 수 있다. 즉, 특정 RewriteCond을 만족하는 경우 지정된 RewriteRule이 적용되어 주소를 다시 쓰게 된다. 워드프레스의 고유주소를 위한 규칙은 다음과 같이 정의되어 있다. RewriteEngine On RewriteBase / RewriteRule ^index.php$ – [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.php [L] ...