서울비 블로그 :: 방문자의 해상도를 고려하여 블로그폭 설정하기

방문자의 해상도를 고려하여 블로그폭 설정하기

info / 2008/11/07 11:33

사진과 글을 함께 사용할 경우 블로그 본문의 기본폭을 몇 픽셀로 설정하는 게 좋을까요?

보통 10pt 로 본문을 작성하시는 분들은 본문폭이 600~700px정도까지는 읽을만하지만, 그 이상으로 늘어나게 되면 만주벌판까지 횡으로 달리는 글을 읽다가 다음줄이 어디인지 까먹고 맙니다. 글자 포인트가 일반 뉴스사이트 본문의 12pt에 가깝울 경우 본문이 좀 더 넒어도 괜찮을 듯 하지만, 여전히 800px 이상은 가독성이 떨어지는 것 같아요.

그래서 서식으로 650px 가로폭의 테이블을 하나 저장해두고, 글이 주된 내용을 차지하는 포스팅 시에 저장해둔 서식을 불러와서 작업합니다.

사진을 주로 올리시는 분들 중에는 고해상도의 사진 감상을 위해서 스킨도 어두운 색 위주로 선택하여 사진이 돋보이게 하고, 2단 내지는 과감히 1단 스킨을 도입해서 사진의 양 옆에 감상을 방해하는 요소를 최소화하려고 하시죠. 티스토리 스킨 위자드에서는 본문의 폭을 700px 등으로 제한을 두기도 하는데, 본문 폭을 강제로 넓히는 것은 관리자모드에서 CSS를 만지면 간단히 해결됩니다.

이와 관련해서는 '빛의 화가'님의 포스팅을 참조

: 스킨위자드 '글영역 넓이 700 이상 설정하는 방법.

본문을 넓히는 경우에는 index.xml 의 가로폭을 함께 수정해주셔야 에디터에서 사진 삽입 시 사진이 자동으로 본문폭에 맞게 조정된다는 걸 유념하세요. index.xml을 변경하지 않으면 관리자모드에서 css를 수정했다고 하더라도 사진을 업로드하면 이전 스킨의 기본 폭에 맞게 사진이 리사이즈 되기 때문에 불편을 겪게 되지요. index.xml은 아래의 샘플을 긁어서 수정할 건 수정하시고, index.xml (확장자 유의)로 저장하셔서 파일업로드로 올리시면 됩니다. 자세한 설명은 티스토리 초기화면의 스킨가이드를 참조하시고요.

그런데 문제는 자기는 고해상도 사진 1000px로 올릴 거라고 사이드바도 있는 블로그 본문 넓이를 무한정 넓히면, 17인치 모니터로 접속하는 사람은 가로 스크롤이 생깁니다. 더군다나 사이드바가 왼쪽에 있으면, 본문 오른쪽은 항상 스크롤해서 봐야 하는 거죠. 여간 짜증나는 일이 아닙니다.

제 경우 사진도 좋고 글도 쓰느라 본문을 넓혔다가 줄였다가 반복하면서 고민이 많았어요. 그러다가 구글 캘린더를 블로그에 삽입하면서 가로 800이하는 캘린더가 미워지기 때문에, 본문을 800으로 고정하고, 사이드바를 줄이기로 했습니다.

설이 길었는데,

결론적으로 1단 스킨의 경우에 최대한 폭을 넓히시고 싶으시다면 가로 100% 등으로 상대수치를 입력하시는 게 좋을 거 같아요.

2단 이상의 (지금의 제 스킨과 같은) 스킨의 경우,
스킨을 수정하고 나서 내 좋은 모니터에서 잘 보인다고 좋아하지 말고 방문자의 입장에서 생각해볼 필요가 있습니다.

저는 구글 analytics 분석툴을 이용하는데, 제 블로그의 지난 3개월간 방문한 사람 중 트랙킹된 모니터 해상도 정보를 볼 수 있습니다.

즉, 42% 정도는 1024 X 768 해상도의 모니터로 내 블로그에 들어오고, 가로 해상도 1280은 20% 정도입니다. 저는 19인치 와이드 모니터를 쓰고 있고요, 가로 1440 인데요, 저와 같은 모니터로 제 블로그에 들어오는 사람은 저를 포함해서 4%에 불과하군요.

따라서 제 모니터를 기준으로 디자인을 짜는 것보다는 적어도 1024 X 768 해상도를 고려해줘야 하겠습니다. 그 이하의 해상도는 800 X 600인데, 0.87%로 전체 방문의 1% 미만이기 때문에 크게 고려하지 않기로 결정했습니다.

이제 블로그의 가로 사이즈가 1024 를 넘지 않는 선에서 본문 폭을 조정하는 게 좋다고 할 때, 아까 본문 넓이는 최소한 800픽셀 확보하고 싶었기 때문에, 스크롤바가 약 20px을 차지한다고 생각하고, 사이드 바를 190px 정도로 조정하는 게 좋겠다고 결론 내렸습니다. 나머지 5~10px은 여백으로 활용했지요. (그래도 사실 좀 답답해 보여요 ㅠㅠ)

물론 15인치 800 x 600 의 모니터로 접속할 경우 본문은 아래로 이동해서 출력되게 되지만, 접속자가 많지 않아 보입니다.

모니터 해상도를 1024로 억지로 바꿔서 보니, 이제 잘 나오는군요.

예전에 해외 워드프레스의 어떤 블로그는 해상도와 브라우져(익스/파폭)별로 다른 디자인을 로딩하기 위해 자바스크립트를 삽입해서 최적화하던데, 뭐 그냥 저는 17인치 LCD에서도 무난하게 보이는 것으로 만족하겠습니다.