병신년 맞이 블로그 개선 작업

원하든 그렇지 않든 병신년이 오고 말았습니다!

의도한 것은 아니지만 매해 연말이 되면 조금 일찍 하는 종무식을 뒤로 하고 1주일 정도 강제 휴가에 들어가서 집에서 혼자 홈페이지 개선 작업을 하곤 했습니다. 평상 시에는 회사일이나 다른 프로젝트에 우선순위가 밀렸던 일들을 쳐내는 일종의 혼자만의 해커톤이라고나 할까요?

올해도 연말이 되어 지금까지의 관성이 몸에 배었는지 손가락이 근질근질하여 하루 정도 작업하여 새로운 기능을 넣어보았습니다.

먼저 소개할 기능은 이번달 중순 릴리즈된 beluga를 활용한 기능입니다. 블로그에 작성해 넣는 코드 중 일부를 사용자와 상호 작용이 가능하도록 하여 직접 수정해가며 컴파일러가 내는 경고/오류 메시지를 확인할 수 있는 기능입니다.

아래는 그냥 보여주기 위한 코드입니다.

int main(void)
{
    return;
}

아래는 동일한 코드 내용을 수정 가능한 형태로 만들어주며, 내용이 편집될 때마다 beluga가 컴파일한 결과를 보여줍니다 - 물론, 기능에서 냄새가 나듯 JavaScript가 활성화되어 있지 않으면 위의 코드와 동일하게 보입니다.

int main(void)
{
    return;
}

두번째 기능은 순수하게 장식을 위한 기능입니다. 그동안 블로그 글 중간 중간에 덩그마니 나와있는 이미지들이 살짝 못마땅했는데 이번에 Adaptive Background라는 Jquery 플러그인을 도입해 장식을 해봤습니다.

페이지에 이미지가 삽입되면 아래 보이는 것처럼 (물론, 이것도 JavaScript가 활성화되어 있어야 합니다) 좌우 여백을 이미지에서 추출한 제법 자연스러운 배경색으로 채워줍니다.

이미 있는 것 가져다 활용한 수준이라 대단한 기능들은 아니지만, 사실 지금의 블로그 구조를 때문에 처음 예상보다는 노동이 많았습니다. 현재 구조는 markdown으로 작성된 본문이 직접 구현한 블로그 엔진을 통해 하나의 <section> 안에 들어가 보여지는 형태인데, 본문의 <section>에 좌우 마진(margin)이 설정되어 있습니다. 이 상황에서 코드나 이미지가 화면 전체폭을 사용하도록 하려면 본문에서 해당 요소만을 떼어내어 <section> 밖으로 빼고, 그 위 아래 내용을 분리된 <section>으로 재구성할 수 밖에 없었습니다 (제가 웹 디자인에 대한 지식이 딸려 이것밖에 생각해내지 못한 것일 수도...). 덕분에 그리 긴 코드는 아니지만 간만에 jQuery와 교감을 나누는 시간을 보냈습니다.

원래는 JavaScript의 도움 없이 보이던 화면에 JavaScript로 효과를 더하다보니 덤으로 graceful degradation까지 얻게 되었네요.

글 마치고 나니 어느새 새해가 되어 있네요. 새해 복 많이 받으세요~! 라고 인사 드리고 피곤해서 급 마쳐야 겠습니다.