블로그 테마 변경

😢 이 페이지는 다음 주소로 변경될 예정입니다.

반년 만에 블로그 테마를 변경했다. 고해상도 디바이스가 많아져서 그런지 요즘 대부분의 블로그 테마들이 큰 서체 사이즈와 넓은 레이아웃으로 많이 나오고 있다. 반년 정도 사용한 hamingway 테마로 변경했을 때에도 비슷한 테마를 여럿 적용해봤는데 그나마 한국어 컨텐츠가 괜찮은 가독성으로 보여 hamingway 테마를 선택했었다.

이 테마를 오래 사용하다보니 불편한 점도 있었다. 대다수의 테마에서 공통적으로 느껴지는 부분인데 스크롤을 내려가며 컨텐츠를 읽다보면 sidebar가 있던 공간이 계속 공백으로 남아있기 때문에 균형감 없는 레이아웃으로 글을 읽게 된다. 또한 영어로 작성된 컨텐츠는 모든 브라우저에서 단어를 분리해 행 전환이 되는 단어 분리(word-break)가 발생하지 않지만 아직까지 CJK언어권의 단어 분리 옵션은 일부 브라우저만 지원한다.1 이런 상황과 맞물려 좁은 컬럼과 큰 서체의 사용은 한국어 문서의 가독성을 많이 떨어뜨리게 된다.

WordPress haruair theme

이번 테마는 roots.io의 Sage를 기반 테마로 사용해서 레이아웃, 서체, 행간과 자간 등을 변경해서 만들었다. 이 기반 테마는 bootstrap으로 구성되어 있는데 dist 되어있는 minified css를 활용하는 것이 아니라 bower로 전체 코드를 받아와 less를 직접 사용할 수 있는 장점이 있다. 테마의 구조가 직관적인 편이고 gulp를 이용한 빌드 및 watch 설정이 이미 다 되어 있기 때문에 기존에 있던 많은 starter theme과는 다르게 번거로운 작업이 필요하지 않았다.

  • one column으로 강제되어 있지만 2-column으로도 사용 가능
  • 영문은 ubuntu, 국문은 나눔바른고딕 기본으로 사용
  • 기본 서체의 크기를 키우고 행간과 자간을 한국어에 맞게 조절
  • 포스트 제목 아래에 headline을 삽입할 수 있도록 custom field 추가
  • 포스트 하단에 author box 추가
  • 테블릿 이하 해상도에서 서체 크기 조정

Ubuntu는 웹폰트로 추가되어 있는 반면 나눔고딕은 그렇지 않다. 나눔바른고딕은 웹폰트로 사용하기에 아직 무거운 느낌이고 기본 서체를 사용해도 그렇게 못봐주는 느낌은 아니라서 해당 폰트가 설치되어 있을 때만 나오고 그 외에는 애플고딕이나 바른고딕으로 출력된다.

아직 어색한 부분이나 변경해야 하는 부분이 많이 있지만 차차 수정할 생각으로 일단 적용했다. 해당 테마는 Github에서 받을 수 있으며 테마를 설치할 때에도 의존성 설치 및 빌드 과정이 요구되어 bower, npm 등을 구동할 수 있어야 한다. 로컬에서 작업한 후 gulp build로 모든 파일을 컴파일해서 올리는 방법도 가능하다. 자세한 설치 방법은 Sage README에서 확인할 수 있다.


  1. Firefox는 CJK 언어를 위해 word-break: keep-all 을 지원하며 IE도 비슷한 방식으로 단어 분리를 방지할 수 있다. 

워드프레스 유지보수 모드 (Maintenance mode)

😢 이 페이지는 다음 주소로 변경될 예정입니다.

워드프레스에서 유지보수를 위해 사이트를 일시적으로 차단할 경우가 있다면 유지보수 모드(Maintenance mode)를 활용할 수 있다.

사용자로서 워드프레스를 이용하게 될 때에는 이 모드를 보게 되는 일이 거의 없다. 만약 보게 된다면 워드프레스 플러그인, 테마, 코어를 업데이트 하는 도중에 사이트에 접속하게 되는 경우다. 설치 과정을 눈여겨 본 사용자라면 유지보수 모드를 켜고 설치 과정이 진행된 후 완료 되면 다시 유지보수 모드가 해제되는 것을 확인할 수 있다.

만약 업데이트 중에 페이지를 벗어나게 된다면 유지보수 모드가 해제되지 않아 사이트가 닫힌 상태로 유지된다. 이럴 때에는 직접 유지보수 모드를 직접 해제해야 한다.

maintenance mode

워드프레스 웹사이트에서 다음과 같은 화면을 본다면 유지보수 모드가 켜져있는 상태다.

유지보수 모드 켜고 끄기

유지보수 모드는 워드프레스 최상위 폴더에 .maintenance라는 이름으로 빈 텍스트 파일을 생성하면 활성화 된다. 유지보수 모드를 끄려면 이 파일을 지우면 된다.

.Maintenance file

유지보수 페이지 변경하기

유지보수 페이지를 좀 더 친절하게 변경하고 싶다면 wp-content/maintenance.php 파일을 만들어 해당 내용을 작성하면 된다. 기본적으로 출력되는 유지보수 페이지는 503 Service Unavailable 를 반환한다는 사실을 참고하자.

<?php
  $protocol = $_SERVER["SERVER_PROTOCOL"];
  if ( 'HTTP/1.1' != $protocol && 'HTTP/1.0' != $protocol )
    $protocol = 'HTTP/1.0';
  header( "$protocol 503 Service Unavailable", true, 503 );
  header( 'Content-Type: text/html; charset=utf-8' );
  header( 'Retry-After: 600' );
?>
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>Haruair.com 점검중</title>
</head>
<body>
  <h1>현재 웹사이트 점검중입니다. 잠시 후에 다시 접속해주시기 바랍니다.</h1>
</body>
</html>

WordPress에서 Links 사용하기

😢 이 페이지는 다음 주소로 변경될 예정입니다.

WordPress에는 기본적으로 Links라는 포스트 타입이 존재했었는데 WordPress 3.5 에서 제외되었다고 한다. 대부분의 사용자가 거의 이용하지 않는 기능이 되다보니 이런 결정을 내리지 않았나 싶다.

그 이전 버전 사용자는 업그레이드 하더라도 해당 기능이 계속 유지되지만 신규로 설치한 경우는 다음과 같은 Links 항목을 관리자 화면에서 찾을 수 없다. 이 Links 항목을 보여주는 Link Widget(Blogroll) 또한 존재하지 않는다.

3.5 이후 버전을 설치한 경우에는 Links가 존재하지 않는다.
3.5 이후 버전을 설치한 경우에는 Links가 존재하지 않는다.

티켓 #21307에서 논의된 결과로 Link Manager 플러그인으로 분리되었고 3.5 이후 버전에서는 해당 플러그인을 설치해 사용할 수 있다.