포스팅의 기본, 목록태그와 단락구분 (해외블로그사례)

Posted on 2009.05.15 08:05 | under 블로그 | permalink :: http://krang.tistory.com/521

제가 블로그의 기본을 말할 입장은 아니지만 저도 배우는 입장에서 짧게 글을 써봅니다. 블로깅을 하다 보면 정말 좋은 내용이더라도 읽지 않고 넘어가게 되는 경우가 많은데요. 그 이유중에 하나가 눈의 피로감 때문입니다. 저의 경우엔 시간을 내서 보다 많은 글을 읽으려고 하는 편인데 어떤 글은 단락 구분이 제대로 되어 있지 않고 장황하게 글이 늘어져서 의미전달은 물론 쉽게 지치는 경우가 있거든요.

정말 솔직하게 말하자면, 저도 정성들여 긴 글을 쓸 때가 있긴 하지만 그 글을 끝까지 다 읽어보는 독자는 거의 없다고 하는 것이 맞을 겁니다. 대부분 발췌독을 하게 되는데요. 발췌독이라고 하더라도 대강의 내용을 살핀 후 내가 필요한 부분을 읽는다는 의미이니까 그 글을 읽은 것이나 다름없습니다. 그런 편의를 제공하기 위해서는 글을 편집할 때 단락구분과 목록<li>기능, 그리고 소제목에 신경을 쓰는 것이 좋을 것 같아서 해외 유명 블로거들의 글 쓰는 스타일 몇 개를 훔쳐왔습니다. -ㅅ-;; (저도 참고용으로)

▶ 목록구분, 소제목을 유용하게 사용한 사례들

LifeHacker :: 링크의 단순 나열의 경우에는 목록태그 <li>를 적극 활용하세요. 소제목을 굵은 폰트로 강조하면 단위 구분을 명확히 하고 서로 다른 점이 있다는 시각적인 효과를 줍니다.  또한 자칫 지루해지기 쉬운 시선의 처리를 필요한 부분을 중심으로 빠르고 신속하게 이동하게 하는 장점도 있습니다.

Mobilecrunch :: 단순목록태그 안에 순서목록태그를 포함시켜서 채용하고자 하는 파트에 대한 설명을 보다 자세하게 풀어주고 있네요. 역시 각 제목은 굵은 글씨로 표현했기 때문에 독자의 입장에서는 아무리 긴 글이라도 나에게 해당하는 직무만 쏙 발췌해서 읽을 수 있어서 시간도 절약되고 깔끔하게 느껴집니다. 어쩌면 이런 부분 하나도 이용자를 위한 배려가 될 수 있겠네요.

Mashable :: 소제목 구분을 아래 위 실선(border)처리 한 경우입니다.  폰트와 보더의 색을 오히려 연한색으로 처리하고 크기만 키웠네요. 명확한 단락구분보다는 연관있는 흐름의 내용을 작성할 때 자연스럽게 시선처리가 되도록 하는 장점이 있는 것 같습니다. 물론 느낌에 개인차는 있을지 모르겠어요.

△ 저서 ‘프로블로거’로 유명한 Darren Rowse 의 Problogger.net 입니다. 역시 유명한 블로거들은 깔끔한 목록태그를 애용하는 경향이 있습니다. 독특하게 화살표 이미지를 넣었네요. 같은 내용이라도 온갖 미사여구를 동원해 장황하게 늘여 쓴 글 보다는 단순하게 소제목을 뽑아 목록 구분한 글은 더욱 신뢰감이 생기고 의미전달이 뚜렷해집니다.


물론 목록과 단락구분을 잘 한다고 모두 좋은 글이 되는 것은 아닙니다. 하지만 보기 좋은 떡이 먹기도 좋다고 아무리 좋은 글이라도 그 가치를 널리 알리려면 일단 시각적으로 편안한 느낌을 주어야 하는 것은 당연하겠죠. 저부터도 열심히 저만의 목록스타일과 소제목을 만들테니 여러분들도 에디터의 기능을 십분 활용해 보세요.

△ 참고로 제가 예전부터 계속 밀고(?) 있는 소제목 구분선은 바로  위에 보이는 테두리 없는 회색 글상자(티스토리) 입니다. 깔끔해 보이는지는 모르겠지만 전 마음에 들더라구요. -ㅅ-;;; 글상자 바로 왼쪽의 목록태그도 자주 사용합니다.

항상 그렇듯이 더 좋은 의견 있으시면 지도해주세요 :)


이전 댓글 더보기
BlogIcon lawyer
2012.02.13 20:08 신고
나는 항상 나를 혜택을받을 수있다 아이디어를 온라인으로 찾고 있어요. 당신을 감사하십시오!

BlogIcon Accessibility Websites
2012.02.16 12:30 신고
나는 항상 나를 혜택을받을 수있다 아이디어를 온라인으로 찾고 있어요. 당신을 감사하십시오!

BlogIcon AODA
2012.02.16 12:31 신고
당신이 여기 가지고 좋은 블로그. 더 자주 그것을 업데이 트하십시오. 이 주제가 관심이다. 감사합니다. . .

BlogIcon Clive
2012.05.19 21:19 신고
러한 완벽하게 작성된 지식의 그런

BlogIcon usa business directory
2012.07.27 06:10 신고
더 자주 그것을 업데이 트하십시오. 이 주제가 관심이다. 감사합니다. . .

BlogIcon transfer a liquor license
2012.07.31 07:34 신고
더 자주 그것을 업데이 트하십시오. 이 주제가 관심이다. 감사합니다. . .

BlogIcon rattan furniture
2012.08.02 07:31 신고
모두를 위하여. 여기에 살짝, 당신은 확실히 그것을 발견할 수 있습니

BlogIcon rattan furniture
2012.08.14 11:08 신고
여기에 살짝, 당신은 확실히 그것을 발견할 수 있습니

BlogIcon synthetic rattan furniture
2012.08.20 11:22 신고
확실히 그것을 발견할 수 있습니

BlogIcon wicker furniture
2012.09.09 21:48 신고
여기에 살짝, 당신은 확실히 그것을 발견할 수 있습니

BlogIcon rattan furniture manufacturer
2012.09.29 23:16 신고
기에 살짝, 당신은 확실히 그것을 발견할 수 있습니

BlogIcon emergency blanket
2012.11.11 16:44 신고
It is very effective article by using the details associated with around the world. It is actually well crafted and effective also it is really informative. I seriously feel so good looking at your site content When i wish to write about.

BlogIcon average invisible fence cost
2012.11.21 20:17 신고
그 이유중에 하나가 눈의 피로감 때문입니다. 저의 경우엔 시간을 내서 보다 많은 글을 읽으려고 하는 편인데 어떤 글은 단락 구분이 제대로 되어 있지 않고 장황하게 글이 늘어져서 의미전달은 물론 쉽게 지치는 경우가 있거든요.

BlogIcon petsafe wireless dog fencing
2012.11.28 15:07 신고
높은 순위를 가지고 - 클래스를. 진정으로 사람이 심각한 가입자를 활용하여 공급하고있는 정보를 즐기십시오!

BlogIcon portable dog fence
2012.12.05 14:48 신고
를 가지고 - 클래스를. 진정으로 사람이 심각한 가입자를 활용하여 공급하고있는

BlogIcon e vacations club guatemala
2012.12.10 22:32 신고
전 캡쳐잇과 오픈캡쳐 두개로도 매우 충분하고 간편하게 사용하고 있다죠^-^
예전엔 스내그잇만 썼었는데..
국산 프로그램이 어느정도 괜찮으면 국산을 쓰게 되는..^^

BlogIcon outdoor dog fencing
2012.12.25 20:00 신고
또한 자칫 지루해지기 쉬운 시선의 처리를 필요한 부분을 중심으로 빠르고 신속하게 이동하게 하는 장점도 있습니다.

BlogIcon preparedness supplies
2013.01.02 15:12 신고
언제 등장할까 살펴보던 허황옥은 김수로가 왕이 되기도 전에 가야에 등장한다.

BlogIcon best emergency survival kits
2013.01.09 20:25 신고
또한 접속을 끊는것과 동시에 제목공개가 사라지는 것도 아니고 그 기록이 최소 몇시간동안 남기 때문에 원치않는 정보가 공개되는 보안에 대한 큰 문제라고 할 수 있습니다.

BlogIcon my site
2013.02.23 04:30 신고
말씀하신 것처럼 그냥 둘러보기처럼 보이지만 사실은 자기가 수익을 낼 수 있는 링크를 숨겨놓은 게 문제인데요.

체크시 주인만 볼 수 있습니다.

* 티스토리 단축키를 활용하세요. [A:다음글 S:이전글 Q:로그인]
« previous : [1] : [···] : [70] : [71] : [72] : [73] : [74] : [75] : [76] : [77] : [78] : [···] : [483] : next »