언론 사이트의 UI에 필요한 12가지

!@#… 언론의 주요 보급 루트가 온라인으로 전환되는 중이고, 언론사들이 온라인에서 수익성을 내기 위해 많이 고민하고 있고, 그 과정에서 포털뉴스와 언론사의 자체 사이트 사이에서 이해가 엇갈리고 뭐 그런 점들은 이제는 뭐 새로운 소식도 아니다. 그런데 그런 위기감 강조에 비해서, 많은 언론들이 정작 자기 웹사이트를 그 목적에 부합하도록 향상시키는 것에 있어서는 무척… 미미하다. 회사가 돈이 더 있고 없고 또는 오프라인 기반이 있고 없고 재벌이냐 사실상 개인미디어냐 등과 관계 없이, 보편적으로 꽤 많은 사이트들이 사용자 인터페이스가 그냥 뭐 다른 좋은 표현을 찾을 길도 없도록 “후졌다”.

그런데 뉴스사용자 입장으로서, 좀 나아졌으면 좋겠다. 그럼 무엇이 후졌고 어떤 방향으로 개선해야 하는가 몇 가지 생각을 보태는 것이 인지상정. 학술이론적으로 세련되게 사용자 경험의 효용가치이론부터 시작하여 각종 추상적 규범 컨셉들을 잔뜩 던지는 방법도, 이런 최신 툴과 코드를 써야한다고 기술적 보고를 하는 방법도 있을 것이다. 하지만 아마 외부에서 비판적으로 방향을 제시하는 입장에서라면 중간 수준의 제언이 가장 적합하리라 본다. 너무 많이 펼쳐놓기는 좀 그렇고, 딱 12가지만.

!@#… 언론 사이트가 해야 할 기능은 무엇인가. 저널리즘 규범 말고, (어느 정도 이상의 저널리즘 품질은 지녔다고 굳이 무리해서라도 가정하고) 콘텐츠로 회사의 장사 공간이 되어주기 위해서 말이다. 콘텐츠 서비스에서 가장 간단하게 적용할 수 있는 구분은
a.콘텐츠로 사람을 끌어모으고,
b.사람들을 구석구석 둘러보게 만들고,
c.여러가지로 참여하여 더욱 몰입할 수 있도록 하고,
d.다음에도 다시 돌아오게 만드는 것
.
이런 구조가 잘 돌아가야 그 사이에 유료화의 격벽을 세우든 광고를 뿌리든 수익도 추구할 수 있다. 좀 더 언론사이트로 특정화하자면,
A.언론매체로서의 브랜드 이미지,
B.더 많은 기사내용을 접하게 하는 편의,
C.사용자들과의 소통을 만드는 피드백,
D.자사가 서비스하는 뉴스와 토론기능을 사이트 바깥에서도 더 적극적으로 활용하게 하여 사람들을 포괄적으로 끌어들이는 확장 사용성

등이다. 이런 틀 위에서 이전의 썼던 “진보를 위한 12가지 담론전략” 때 그랬듯 블로그에만 올리는 첫 버전은 그냥 결론만 몇 마디씩 썼다가, 따로 지면 기회가 주어지면(원래 이런 류의 이야기는 미디어오늘 독자칼럼에서라도 풀어볼까 했으나, 연락 한 번 없고 뭐 역시 짤린 것 같다) 그 때 가서 설명의 살을 한층 붙여나가는 식으로 하려고 한다.

 

A. 브랜드이미지

1. 자사의 서로 다른 성격의 신문들을 섞어 넣지 말라. : 자매지를 발행할 때, 사이트에는 모든 걸 섞어 게재하는 식의 습관 말이다. 예를 들어 경향신문 사이트를 찾아갈 때, 스포츠연예지의 범주에서 적당히 선정적인 스포츠칸의 뉴스들이 톱으로 걸리곤 해서 종합일간지를 표방하는 경향신문의 브랜드 이미지를 깎아 먹는다. 좀 더 미묘하게는, 시사주간지와 일간지만 해도 기사의 성격이 꽤 다르기 마련이다. 같은 공간에 절대 놓지 말라는 것이 아니라, 섞지 말고 소스들 사이에서 충분히 구분을 지어야 브랜드가 왜곡되지 않는다.

2. 광고도 지면의 일부다… 합쳐놓았을 때 어떻게 읽힐지 생각해보라. : 외모지상주의를 비판하는 기사의 사이드바로 성형외과 광고가 자동으로 뜨는 광경을 방지해야 한다는 말이다. 광고가 기사를 덮어버려서 기사 자체를 읽지 못하는 상황이 바보 같다는 말이다. 관련 정보를 더 얻고 싶어서 링크를 눌렀더니 유용한 정보가 아니라 무슨 광고가 떠버리는 것도 곤란하다. 광고가 기사를 받아들이는 과정에 방해가 되는 방식으로 병렬되는 것은 그냥 기사를 읽지 말라는 의지의 표현이다. 종이지면이라면 더 조심할텐데, 온라인에서는 너무 막 내버려 두기 쉽다.

3. 기사목록으로 위장한 광고는 브랜드의 자살행위다. : 기사목록은 이 사이트가 어떤 또 다른 좋은 콘텐츠를 담고 있는지 표현하는 가장 중요한 수단이다. 그런데 그런 기사목록으로 위장한 다이어트 정보가 즐비하면, 사이트가 딱 그 수준으로 떨어져 버리는 것이 된다. 광고를 자체콘텐츠로 속여서 낚시질 클릭을 유도하는 것은 포르노 사이트들로 충분하다.

 

B. 둘러보기

4. 검색이 왕이다. : 더 많이, 자세히, 즐겁게 사이트의 콘텐츠를 둘러보도록 만드는 것의 기본은 검색을 편리하게 만드는 것. 검색창은 찾기 쉬울수록 좋고, 검색 옵션은 풍부할수록 좋고, 검색 결과는 세밀할수록 좋다. 결과 내 재검색은 기본 중 기본이다. 기획기사, 섹션칼럼, 기타 연재물 같은 것들은 딱딱 묶어서 나와줘야 한다. 사실 좋은 검색 결과를 위해서는 애초부터 철저한 분류와 태깅이 필수다. 검색결과를 링크주소로 표시할 수 있어야 한다. 영 자신 없으면 차라리 그냥 구글을 달아라.

5. 색인은 팬시한 것 보다 알아보는 것이 먼저다. : ‘비트100’이 음악 전문섹션인지 뭔지 바로 알아낼 사람이, 이미 알고 있는 사람 말고 얼마나 있겠는가. 멋진 카피보다 뚜렷한 의미전달이 우선이다. 모양도 마찬가지로, 팬시한 디자인의 버튼이 절묘하게 어딘가 구석에 박혀있는 것보다는 뚜렷하게 보이고 클릭할 수 있도록 배치되는 것이 중요하다. 색인이 있다는 것 자체도 뚜렷하게 드러나야 하는데, 탭 메뉴를 우선 넣고 보는 것이 아니라 잘 보이도록 디자인하는 것이 필수.

6. 지금 막 읽은 기사와 관련된 내용들을 계속 제시하라. : 햄버거집에서 버거 달라면 감자튀김도 제안하고 콜라도 뽐뿌질하듯, 관련 콘텐츠를 주욱 이어주는 것이 계속 둘러보게 만드는 중요한 수법이다. 그 사안에 관심이 있어서 읽은 것인데, 이왕이면 더 알고 싶지 않겠는가. 사용자가 “오늘 많이 클릭된 것” 따위만 관심 있으리라 가정하지 말고, 지금 읽은 그 토픽에 관심 있으리라고 전제를 하는 것이 필요하다. 특히 사이드바 같은 것보다 기사 중간, 그리고 기사 말미가 그런 것을 제시하기 위한 황금 스팟이다.

7. 로그인하면 밥이 나오고 떡이 나오게 하라. : 구글이나 아마존, 페이스북 등은 로그인을 하고 사용하면 각종 사용 데이터가 팍팍 쌓인다. 그 데이터로 나중에는 그 사용자가 더 원할 법한 내용들을 계산해서 제안해준다. 자발적으로 로긴하게 유도, 즉 로긴하면 혜택이 오도록 하라. 로긴하면 뉴스 사용 데이터가 쌓여서 관련 토픽도 더 잘 알려주고 추천도 해주고 하면 얼마나 다시 오고 싶겠는가. 게다가 그들을 노리는 타겟광고도 할 수 있다. 통합 로긴 API를 제공하는 외부 대형업체와 파트너십이라도 맺든지.

 

C. 피드백

8. 피드백을 쉽게 하되, 읽을 때는 효과적으로 모아서 볼 수 있도록 하라. : 피드백을 남기기 위한 장벽은 낮게 하되, 좀 더 진지한 피드백과 얄팍한 악플 덩어리는 분리해서 읽을 수 있는 것이 좋다. 그래야 뉴스 콘텐츠에 대한 피드백이 또 다른 자생적 콘텐츠로서 기능할 수 있다. 또한 하나의 사안에 대한 피드백이 수많은 파편화된 기사 사이에 나뉘어져버리면 지속적 깊이의 토론이 불가능하다. 즉 기사를 보고 바로 반응을 남길 수 있되, 사안별로 반응들이 모이며 그 반응들을 ‘품질’에 따라서 필터링해서 읽을 수 있는 방식을 고안해야 한다.

9. 흩어져 있는 피드백을, 최대한 모아내라.
: 사람들은 원래부터 그렇고 점점 더 한 곳에서 감상을 남기지 않는다. 그 퍼진 것들을 모아내기 위해 DISQUS 같은 엔진들이 있는 것이고. 솔직히 포털들은 반응이 과다하고 개별 닷컴들은 과소한 것이 현재황인데, 모아내면 판이 좀 달라진다. 자동으로 모으는 것과 함께, 주요 토픽은 Storify 같은 방식을 통해 담당자가 피드백의 ‘스토리’를 엮어주는 것도 고려해봐야 한다. 이제와서는 많이들 잊은 사실이지만, 좋은 피드백 토론은 뉴스로서의 가치가 있다.

 

D. 확장 사용성

10. 사이트 전면 리뉴얼이 아니라도 필요한 기능을 추가할 수 있게 하라. : 시류에 따라서 새로 붐을 일으키는 좋은 기능들을 마이너 업그레이드로 바로 적용할 수 있는, 그런 모듈화된 사이트 구조가 얼마나 중요한지 늘 상기한 상태에서 개발을 맡겨야 한다. URL축약을 연동한 트위터 버튼 하나조차 바로바로 달아 놓기 힘들면 쓰겠는가.

11. 인용을 쉽게 하라. : 한 부분을 인용하고 전문은 링크 걸어주는 방식이야말로 개인 뉴스 사용자들이 할 수 있는 가장 간편하고 보편적인 뉴스 인용 관례다. 전문 펌은 어차피 저작권으로 걸어놓는다 칠 때, 이런 식의 인용은 적극 장려되어야 자사 사이트로 사람들이 뭔가 읽으러 들어온다. 인용문을 퍼가는 것이 쉽고, 링크를 간단하고 뚜렷하게 붙일 수 있어야 한다. 뉴욕타임즈가 괜히 문단 단위의 링크 주소를 제공하기 시작한 것이 아니다. 참, 설마 오른 클릭을 막아 놓은 것은 아니겠지?

 

그리고 가장 중요한 대망의 12번째는… 그냥 기초 중의 기초.

12. 젠장 웹표준 좀 신경 쓰라고! : 제발. 여러 브라우저에서. 테스트. 좀. 돌려 보라고오오오!!! 특정 브라우저에서 광고창이 닫히지 않는다든지, 레이아웃이 깨진다든지, 로긴이 제대로 먹지 않는다든지, 엑박이 뜬다든지. 기타 다른 재앙이 일어난다든지. 페이지 내용 어쩌고를 떠나서, 페이지 자체가 제대로 구현이 안 되는데 왜 누가 1초라도 더 머물고 싶겠는가.

 

!@#… 사실 이 모든 것은 관광지에 비유하자면 쉽게 이해할 수 있다. 더 오래 머물며 다시 찾아오고 마을의 발전에 가끔 함께 협력도 해주고 뭐 그렇게 하도록 노력해야지, 손님이 당도하면 홀랑 벗겨먹겠다고 바가지만 씌워서야 되겠는가. 사람들이 잘 방문하고 오래 머물고 좋은 뉴스를 함께 유통하고 토론이 붙어주는 그런 곳이 많아지는 것이 개별 매체는 물론이고 뉴스생태계를 위해서도 좋다. 더 좋은 사이트 인터페이스는 그 자체만으로도 더 좋은 저널리즘을 위한 요소 중 하나라는 것을 기억하자.

!@#… 이런 문제도 있다! 항목에 추가해달라! 등의 제보 대환영. 더 자세히 알고 싶으니 고료와 지면을 주마! 등의 제안도 환영.

Copyleft 2011 by capcold. 이동/수정/영리 자유 —    [ <--부디 이것까지 같이 퍼가시길]

Trackback URL for this post: http://capcold.net/blog/6762/trackback
39 thoughts on “언론 사이트의 UI에 필요한 12가지

Trackbacks/Pings

  1. Pingback by SGMobile

    언론 사이트의 UI에 필요한 12가지 http://t.co/c2fh2B6 사실 저는 @capcold 님이 이런 글 쓰실 때가 제일 좋아요 ..

  2. Pingback by Nakho Kim

    개그를 할 때도 좋아해주세요(…) RT @TeamSGMobile 언론 사이트의 UI에 필요한 12가지 http://t.co/c2fh2B6 사실 저는 @capcold 님이 이런 글 쓰실 때가 제일 좋아요

  3. Pingback by Nakho Kim

    [캡콜닷넷업뎃] 언론 사이트의 UI에 필요한 12가지 http://capcold.net/blog/6762 | (사실, 엔디소프트의 책임도 상당하지만)

  4. Pingback by Dongjin Lee

    언론 사이트의 UI에 필요한 12가지 http://t.co/3NY0Q4T via @capcold #fb

  5. Pingback by 뗏목지기™

    [추천글] 언론 사이트의 UI에 필요한 12가지 http://capcold.net/blog/6762 언론 뿐 아니라 왠만큼의 '콘텐츠'를 다루고 있는 사이트라면 참고해야 할.

  6. Pingback by 권영전

    RT @nyxity: 언론 사이트의 UI에 필요한 12가지 http://t.co/3NY0Q4T via @capcold #fb

  7. Pingback by nomodem

    RT @raftwood [추천글] 언론 사이트의 UI에 필요한 12가지 http://bit.ly/hDUjQJ 언론 뿐 아니라 왠만큼의 '콘텐츠'를 다루고 있는 사이트라면 참고해야 할.

  8. Pingback by Nakho Kim

    RT @raftwood: [추천글] 언론 사이트의 UI에 필요한 12가지 http://capcold.net/blog/6762 언론 뿐 아니라 왠만큼의 '콘텐츠'를 다루고 있는 사이트라면 참고해야 할.

  9. Pingback by 덧말제이

    RT @raftwood: [추천글] 언론 사이트의 UI에 필요한 12가지 http://capcold.net/blog/6762 언론 뿐 아니라 왠만큼의 '콘텐츠'를 다루고 있는 사이트라면 참고해야 할.

  10. Pingback by 조범석(Strongberry Cho)

    RT @capcold: [캡콜닷넷업뎃] 언론 사이트의 UI에 필요한 12가지 http://capcold.net/blog/6762 | (사실, 엔디소프트의 책임도 상당하지만)

  11. Pingback by Nakho Kim

    RT @nyxity: 언론 사이트의 UI에 필요한 12가지 http://t.co/3NY0Q4T via @capcold #fb

  12. Pingback by Bahk某

    RT @nyxity: 언론 사이트의 UI에 필요한 12가지 http://t.co/3NY0Q4T via @capcold #fb

  13. Pingback by drifting6

    RT @nyxity: 언론 사이트의 UI에 필요한 12가지 http://t.co/3NY0Q4T via @capcold #fb

  14. Pingback by 연합뉴스미디어랩

    RT @nyxity: 언론 사이트의 UI에 필요한 12가지 http://t.co/3NY0Q4T via @capcold #fb

  15. Pingback by 이세형 Sei-hyung, Lee

    「언론 사이트의 UI에 필요한 12가지」
    http://bit.ly/hAGw3a #tattermedia 근데 정작 이런 글은 언론이 다루지 않아 ㅋ

  16. Pingback by 접니다, 서은영이

    언론 사이트의 UI에 필요한 12가지 http://t.co/O0C7lzQ via @capcold
    맞는 것도 있고…안 되는것도 있고… 그럴수도 있고… 그래도 짚어줘서 좋구만요!!!!!

  17. Pingback by 이승환

    언론 사이트의 UI에 필요한 12가지 http://bit.ly/fX9iAb

  18. Pingback by 이승환 / 나체 / 누듸 /누드모델

    언론 사이트의 UI에 필요한 12가지 http://bit.ly/fX9iAb

  19. Pingback by April_fool

    RT @raftwood: [추천글] 언론 사이트의 UI에 필요한 12가지 http://capcold.net/blog/6762 언론 뿐 아니라 왠만큼의 '콘텐츠'를 다루고 있는 사이트라면 참고해야 할.

  20. Pingback by 최상국

    RT @NudeModel: 언론 사이트의 UI에 필요한 12가지 http://bit.ly/fX9iAb

  21. Pingback by Nakho Kim

    RT @NudeModel: 언론 사이트의 UI에 필요한 12가지 http://bit.ly/fX9iAb

  22. Pingback by 자바타

    RT @NudeModel: 언론 사이트의 UI에 필요한 12가지 http://bit.ly/fX9iAb

  23. Pingback by 자바타

    ! RT @NudeModel: 언론 사이트의 UI에 필요한 12가지 http://bit.ly/fX9iAb

  24. Pingback by capcold님의 블로그님 » Blog Archive » 트위터백업 2011년 1월 3주까지

    […] [캡콜닷넷업뎃] 언론 사이트의 UI에 필요한 12가지 http://capcold.net/blog/6762 | (사실, 엔디소프트의 책임도 […]

  25. Pingback by mahabanya

    구슬이 서말이어도 끼어야 보배. 이런 좋은 충고(?) 해줘도 언론사는 눈도 꿈벅 안 할거야. "언론 사이트의 UI에 필요한 12가지 http://t.co/0tRVU0G via @capcold "

  26. Pingback by 정혜승

    RT @mahabanya: 구슬이 서말이어도 끼어야 보배. 이런 좋은 충고(?) 해줘도 언론사는 눈도 꿈벅 안 할거야. "언론 사이트의 UI에 필요한 12가지 http://t.co/0tRVU0G via @capcold "

  27. Pingback by Nolboo Kim

    RT @mahabanya: 구슬이 서말이어도 끼어야 보배. 이런 좋은 충고(?) 해줘도 언론사는 눈도 꿈벅 안 할거야. "언론 사이트의 UI에 필요한 12가지 http://t.co/0tRVU0G via @capcold "

  28. Pingback by Jihoon Shim

    언론 사이트의 UI에 필요한 12가지 http://t.co/lyxSj8J via @capcold#fb

  29. Pingback by 베스트 오브 2011: 캡콜닷넷 « capcold님의 블로그님

    […] am 위키릭스, 미디어의 판도라 상자를 열다 [액트온 /12호] 2011. 03. 07. 12:51 pm 언론 사이트의 UI에 필요한 12가지 2011. 01. 10. 5:31 am 데이터저널리즘, 정보시각화의 기초를 생각하라 2011. 01. […]

  30. Pingback by 언론 사이트 UI에 꼭 필요한 12가지 | ㅍㅍㅅㅅ

    […] 원문 : capcold.net […]

Comments


  1. 뭐 이런 건 그냥 제가 좋아하는 언론사만 좀 읽고 적용해 줬으면 하는 바람입니다. ㅎㅎ
    다른 언론사는 그냥 삽질하게 놔두고 말이죠. :)

  2. !@#… 뗏목지기님/ 좋아하시는 언론사 싫어하시는 언론사 어디도 애초에 안 읽고 적용 안 해줄 가능성도 다분합니다(…) 그것이 바로 마이너 공간의 숙명.

  3. !@#… mahabanya님/ 현재 위치의 제가 하는 이야기들은 재배는 커녕 씨앗만 뿌리는 격인데, 그나마 씨앗이 흙 속에 들어가지도 않는 상황이랄까요(핫핫)

  4. 캡콜드님, 안녕하세요. 이번에 미디어오늘 사이트 리뉴얼을 하면서 이 글을 많이 참고했습니다. 얼마나 반영됐는지는 모르겠지만 말이죠. 독자칼럼도 잘 읽고 있는데 언젠가부터 안 쓰시더라고요.

  5. !@#… 이정환님/ 아, 개편된 UI 찬찬히 살펴봤는데, 아주 좋은 방향이라고 봅니다. 외부연계나 피드백도 일취월장이고 말이죠. 다만 대문과 섹션메인의 확연한 변화와 달리, 개별 기사 페이지에는 아직 개편의 손길이 부족한 감이(…) // 독자칼럼은 진알시쪽 통해서 투고하는 방식이었는데 올해들어 방식을 바꾸는 바람에 붕 떠버렸죠 OTL 언젠가 제가 좀 더 제대로 여력을 내서 제대로 갖춰진 연재를 기획하여 제안드려야할텐데 늘 숙제를 미루고 있는 느낌입니다.

  6. http://www.leejeonghwan.com/media/archives/001947.html

    네. 거의 두 달 가까이 작업을 한 겁니다. 독자들 볼 때는 잘 모르겠지만 섹션이나 연재 페이지를 대부분 자동화해서 따로 손을 대지 않더라도 굴러가도록 했고요. (어차피 관리도 안 되니까요) 외부 연계와 피드백에 신경을 많이 썼습니다. 말씀하신대로 기사 페이지는 광고 문제 때문에 거의 손을 대지 못했고, 사실 결정적으로 콘텐츠 혁신이 필요하다고 생각되지만 그건 제 역량이나 권한을 벗어난 부분이라서요.

    연재 기획은 언제든 좋으니 제안을 주시죠.

  7. !@#… 이정환님/ 빨리 권한을 확보하셔서 콘텐츠 혁신도 이번 UI 개편처럼 마음껏 힘써주시길 기원합니다! // 연재기획은 먼저 연재 들어가기로 한 모 지면부터 먼저 안착시킨 후 찬찬히, 하지만 확실한 목표를 두고 설계하여 제안드리도록 하겠습니다 :-)