신문웹사이트디자인개선방안연구

이종수․이영음․조영미

한국언론진흥재단자유주제연구보고서 2010-10

신문웹사이트디자인개선방안연구

책임연구 이종수(한양대학교신문방송학과교수)

공동연구 이영음(한국방송통신대학교미디어영상학과교수)

조영미(디지틀조선일보과장)

연구보조 유승현(한양대학교신문방송학과박사과정)

김효은(한양대학교신문방송학과박사과정)

진선정(한양대학교신문방송학과석사과정)

발행인　이성준

편집인　선상신

발행일　2010년11월10일초판제1쇄발행

한국언론진흥재단

100-750 서울특별시중구태평로33 프레스센터12층

전화 (02) 2001-7744　팩스 (02) 2001-7740

www.kpf.or.kr

이 보고서는 2010년 한국언론진흥재단의 언론진흥기금을 지원 받아 수행한 것입니다.보고서의 내용은 한국언론진흥재단의 공식 견해가 아닌 연구자의 연구 결과임을 밝힙니다.

ⓒ한국언론진흥재단, 2010

비매품

신문웹사이트디자인개선방안연구

책임연구 : 이종수(한양대학교신문방송학과교수)

공동연구 : 이영음(한국방송통신대학교미디어영상학과교수)

조영미(디지틀조선일보과장)

연구보조 : 유승현(한양대학교신문방송학과박사과정)

김효은(한양대학교신문방송학과박사과정)

진선정(한양대학교신문방송학과석사과정)

목 차

요약문 ················································································15

Ⅰ. 서론 ····················································································27

1. 연구배경과 목적 ·······································································27

2. 연구내용과 보고서 구성 ···························································30

1) 신문 웹사이트 디자인의 주요 쟁점과 기존 연구 검토 ············ 30

2) 국내외 신문 웹사이트 디자인 트렌드 ····································· 31

3) 국내외 신문 웹사이트의 소셜 미디어 사용 현황 비교 ············ 32

4) 국내외 신문 웹사이트 디자인 비교 평가 분석 및 이용자 조사32

5) 국내 신문 웹사이트 디자인 개선을 위한 가이드라인 제시 ····· 33

Ⅱ. 신문 웹사이트 디자인의 주요 쟁점과 기존 연구 ········ 34

1. 웹 2.0과 웹 3.0 환경 변화와 신문 웹사이트 디자인 ··············· 34

2. 신문 웹사이트 디자인의 핵심 개념 ··········································39

3. 국내외 신문 웹사이트 디자인 연구 동향 ·································42

1) 신문 웹사이트 디자인에 관한 외국 연구 ··································42

2) 신문 웹사이트 디자인에 관한 국내 연구 ··································47

Ⅲ. 국내외 신문 웹사이트 디자인 트렌드 ···························52

1. 외국 신문 웹사이트 디자인 트렌드와 사례 ······························52

1) 외국 신문 웹사이트 디자인 변화 동향 ····································· 52

2) 외국 신문 웹사이트 베스트 디자인 수상작 ···························· 63

2. 국내 신문 웹사이트 디자인 트렌드와 이슈 ······························82

1) 그래픽 뉴스 ·················································································82

2) 신문 웹사이트 디자인의 이슈 ····················································89

Ⅳ. 국내외 신문 웹사이트의 소셜 미디어 사용 현황 비교 91

1. 소셜 네트워크, 소셜 미디어의 부상 ·········································91

2. 웹 1.0에서 웹 2.0, 그리고 웹 3.0으로 ······································93

1) 웹 1.0 vs 웹 2.0 ··········································································93

2) 웹 2.0과 넷 세대 ·········································································98

3) 웹 3.0, 시만틱 웹 ········································································99

3. 소셜 미디어의 최적화와 신문사의 웹사이트 ·························· 101

1) 소셜 미디어 최적화의 개념 ······················································101

2) 소셜 미디어 최적화와 신문사의 웹사이트 ······························ 101

4. 미국, 영국, 한국 신문 웹사이트의 소셜 미디어 최적화 측정 비교· 102

1) 측정 요소 ·················································································· 102

2) 뉴욕타임즈 ·················································································104

3) 워싱턴포스트 ·············································································114

4) USA투데이 ················································································120

5) 가디언 ························································································126

6) 텔레그라프 ·················································································131

7) 데일리메일 ·················································································137

8) 조선일보 ····················································································143

9) 중앙일보 ·················································································· 151

10) 한국일보 ·················································································· 156

5. 신문 웹사이트와 소셜 네트워크 요소에 대한 함의 ················ 160

1) 사이트 분석 결과 요약 ·····························································160

2) 소셜 네트워크적 요소들의 신문 웹사이트 디자인에 대한 함의 · 163

Ⅴ. 국내외 신문 웹사이트 디자인 비교 평가 분석 ·········· 164

1. 국내외 신문 웹사이트 UI 디자인 분석 ·································· 164

1) 내비게이션 분석 ········································································164

2) TOP 기사 & 기사 타이포그래피 분석 ···································· 168

3) 콘텐츠 & 그리드 영역 분석 ·····················································179

2. 국내외 신문 웹사이트 디자인 비교 분석 ······························· 207

1) 분석 개요 ·················································································207

2) 분석 결과 ·················································································· 212

Ⅵ. 국내외 신문 웹사이트 디자인에 대한 이용자 조사 ··· 241

1. 조사 방법 ················································································241

2. 조사 결과 ················································································242

1) 일반 디자인 원리 차원에서의 평가 ········································· 242

2) 정보전달 차원에서의 평가 ······················································· 247

3) 내비게이션 차원에서의 평가 ····················································250

4) 상호작용성 차원에서의 평가 ····················································252

5) 신문사별 평가 ···········································································254

VII. 종합 논의 및 디자인 개선방안 제안 ························279

1. 연구결과 요약 및 논의 ························································· 279

1) 국내외 신문 웹사이트 디자인 비교 분석 결과 ······················· 279

2) 국내외 신문 웹사이트 소셜 미디어 사용 현황 비교 분석 결과 283

3) 국내외 신문 웹사이트 디자인에 대한 이용자 조사 결과 ······· 285

2. 국내 신문사 웹사이트 디자인 개선 방안 제시 ······················· 286

1) 정보전달(저널리즘적) 측면 ·······················································286

2) 디자인 미학적 측면 ·································································· 288

3) 신문사와 독자와의 관계: 상호작용성과 친밀성의 강화 ········· 291

4) 디자인 개혁의 신중성과 경영진의 인식 변화 ······················· 292

참고문헌 ·················································································295

부록 ························································································301

표목차

<표 1> 신문 웹사이트 업그레이드 전략·································································37

<표 2> 웹 1.0과 웹 2.0의 특징 비교···································································94

<표 3> 소셜 미디어의 특성 ················································································97

<표 4> 뉴욕타임즈 전체 사이트의 소셜 미디어적 요소 존재 유무·························105

<표 5> 뉴욕타임즈 개별 기사의 소셜 미디어적 요소 존재 유무····························112

<표 6> 워싱턴포스트 전체 사이트의 소셜 미디어적 요소 존재 유무······················115

<표 7> 워싱턴포스트 개별 기사의 소셜 미디어적 요소 존재 유무·························119

<표 8> USA투데이 전체 사이트의 소셜 미디어적 요소 존재 유무························121

<표 9> USA투데이 개별 기사의 소셜 미디어적 요소 존재 유무···························125

<표 10> 가디언 전체 사이트의 소셜 미디어적 요소 존재 유무·····························127

<표 11> 가디언 개별 기사의 소셜 미디어적 요소 존재 유무································130

<표 12> 텔레그라프 전체 사이트의 소셜 미디어적 요소 존재 유무·······················132

<표 13> 텔레그라프 개별 기사의 소셜 미디어적 요소 존재 유무··························135

<표 14> 데일리메일 전체 사이트의 소셜 미디어적 요소 존재 유무·······················138

<표 15> 데일리메일 개별 기사의 소셜 미디어적 요소 존재 유무··························142

<표 16> 조선일보 전체 사이트의 소셜 미디어적 요소 존재 유무··························144

<표 17> 조선일보 개별 기사의 소셜 미디어적 요소 존재 유무·····························149

<표 18> 중앙일보 전체 사이트의 소셜 미디어적 요소 존재 유무··························151

<표 19> 중앙일보 개별 기사의 소셜 미디어적 요소 존재 유무·····························155

<표 20> 한국일보 전체 사이트의 소셜 미디어적 요소 존재 유무··························157

<표 21> 한국일보 개별 기사의 소셜 미디어적 요소 존재 유무·····························159

<표 22> 각 신문사 사이트의 소셜 미디어적 요소 종합········································161

<표 23> 일반 디자인 차원에서의 국내외 신문 웹사이트 디자인 비교····················220

<표 24> 정보전달 차원에서의 국내외 신문 웹사이트 디자인 비교·························226

<표 25> 내비게이션 차원에서의 국내외 신문 웹사이트 디자인 비교······················232

<표 26> 상호작용성 차원에서의 국내외 신문 웹사이트 디자인 비교······················236

<표 27> 멀티미디어와 그래픽 차원에서의 국내외 신문 웹사이트 디자인 비교········ 240

<표 28> 조사 대상자·························································································241

<표 29> 이용자들의 국내외 신문 웹사이트 평가 ················································278

그림목차

<그림 1> 웹 2.0의 주요 특성과 웹 디자인 영역····················································35

<그림 2> 미국 100대 신문 웹사이트 분석·····························································38

<그림 3> LA Times ··························································································53

<그림 4> Telegraph ···························································································54

<그림 5> New York Daily News ····································································55

<그림 6> Wired ·································································································56

<그림 7> The New York Times ······································································57

<그림 8> ABC News ························································································58

<그림 9> The New York Times의 그래픽························································59

<그림 10> The New York Times의 인포토이···················································60

<그림 11> Train Jumpng by palmbeachpost.com ···········································61

<그림 12> The New York Times의 Greek and Roman Galleries ·················62

<그림 13> St. Pete Times의 사라져가는 습지대에 관한 생태학적 웹 프레젠테이션 63

<그림 14> nytimes.com의 Choosing a President ··········································64

<그림 15> nytimes.com의 You Finish, You Win ··········································65

<그림 16> The Chauncey Bailey Project ·························································66

<그림 17> Publish2 ···························································································67

<그림 18> Gotham Gazette ··············································································68

<그림 19> ProPublica ························································································69

<그림 20> LasVegasSun.com ············································································70

<그림 21> nytimes.com ·····················································································71

<그림 22> Radio Azattyq, RFE/RL‘s Kazakh Service ···································72

<그림 23> SOITU.ES ·························································································73

<그림 24> Pressconnects.com ···········································································74

<그림 25> Knoxnews.com의 Church Shooting ················································75

<그림 26> BBC News의 Mumbai Attacks ·······················································76

<그림 27> National Film Board of Canada, Waterlife ··································77

<그림 28> LasVegasSun.com의 Quenching Las Vegas' Thirst ·······················78

<그림 29> Washington Post Digital, Sacred Ground ·····································79

<그림 30> Muckety ···························································································80

<그림 31> The New York Times의 Interactive Graphics ·······························81

<그림 32> Driftless: Stories from Iowa ···························································82

<그림 33> 조선일보의 인포그래픽 뉴스·································································83

<그림 34> 중앙일보의 인터랙티브 뉴스·································································84

<그림 35> 연합뉴스 미디어랩···············································································84

<그림 36> 조선일보의 헬스푸드: 건강한 몸···························································85

<그림 37> 중앙일보의 ADHD(주의력결핍·과잉행동장애)의 증상····························86

<그림 38> 연합뉴스의 2010 남아공월드컵·····························································87

<그림 39> 뉴욕타임즈의 미셸 오바마 가계도·························································88

<그림 40> 가디언의 베를린장벽 여행····································································88

<그림 41> 미국인의 소셜 미디어 이용 현황··························································92

<그림 42> 계층적 정보구조의 야후(Yahoo) 초기 화면··········································95

<그림 43> 구글이 사용하는 검색 원리인 페이지랭크(PageRank)의 사례················ 96

<그림 44> 펼치기 전후의 뉴욕타임즈의 소셜 미디어로 내보내기 기능 화면 비교··· 106

<그림 45> 뉴욕타임즈 RSS 주제 화면의 일부·····················································106

<그림 46> 뉴욕타임즈의 페이스북 연동 화면·······················································107

<그림 47> 뉴욕타임즈의 인기 기사 제공 화면 위치·············································108

<그림 48> 뉴욕타임즈의 인기 기사 제공 내용·····················································108

<그림 49> 뉴욕타임즈의 AP와 로이터로의 링크 화면··········································109

<그림 50> 뉴욕타임즈의 최신 블로그 정리 화면··················································110

<그림 51> 뉴욕타임즈의 타임즈 피플 화면··························································111

<그림 52> 뉴욕타임즈 기사 화면········································································113

<그림 53> 뉴욕타임즈의 댓글 수와 댓글 링크 위치 및 내용································114

<그림 54> 워싱턴포스트의 첫 화면·····································································116

<그림 55> 워싱턴포스트의 ‘특별 주제’들을 모아놓은 화면····································117

<그림 56> 워싱턴포스트의 블로그 목록의 일부 화면············································118

<그림 57> 워싱턴포스트 기사 화면·····································································120

<그림 58> USA투데이 첫 화면··········································································122

<그림 59> USA투데이의 블로그를 모아놓은 화면···············································123

<그림 60> USA투데이의 개인 맞춤 화면····························································124

<그림 61> USA투데이 기사 화면·······································································126

<그림 62> 가디언의 첫 화면··············································································128

<그림 63> 가디언의 인기 기사 목록 화면···························································129

<그림 64> 가디언의 기사 화면···········································································131

<그림 65> 텔레그라프의 첫 화면········································································133

<그림 66> 텔레그라프의 개인 맞춤 화면·····························································134

<그림 67> 텔레그라프의 기사 화면·····································································136

<그림 68> 텔레그라프의 섹션별 인기 기사 화면··················································137

<그림 69> 데일리메일의 홈페이지 화면·······························································139

<그림 70> 데일리메일 상단의 뉴스 메뉴·····························································139

<그림 71> 데일리메일의 소셜 네트워크 연동 화면···············································140

<그림 72> 데일리메일의 다른 뉴스 사이트의 뉴스를 모아놓은 화면······················141

<그림 73> 데일리메일의 기사화면·······································································143

<그림 74> 조선일보에서 제공하는 소셜 네트워크 링크 서비스들···························144

<그림 75> 조선일보의 RSS 설정 화면································································145

<그림 76> 조선일보의 홈페이지 화면에서 부각된 몇 가지 주제들·························146

<그림 77> 조선일보의 블로그 화면·····································································147

<그림 78> 조선일보 개인별 뉴스 설정 화면························································148

<그림 79> 조선일보의날짜별 뉴스 랭킹화면·····················································150

<그림 80> 조선일보의 댓글 수를 보여주는 부분··················································150

<그림 81> 조인스 MSN 새로운사이트의 기능들················································153

<그림 82> 개편된 중앙일보 사이트의 기능들·······················································154

<그림 83> 중앙일보의많이본기사, 댓글많은 기사 제공 화면···························154

<그림 84> 중앙일보 기사의 자동 소셜 네트워크 공유 기능··································156

<그림 85> 한국일보 사이트의 첫 화면································································158

<그림 86> 한국일보 신문의 화면········································································158

<그림 87> 한국일보에서 제공하고있는 소셜 네트워크 링크 서비스······················159

<그림 88> 가디언의 내비게이션··········································································164

<그림 89> 더타임즈의 내비게이션·······································································165

<그림 90> 텔레그라프의 내비게이션····································································165

<그림 91> 뉴욕타임즈의 내비게이션····································································166

<그림 92> 워싱턴포스트의 내비게이션·································································166

<그림 93> USA투데이의 내비게이션··································································166

<그림 94> 조선일보 내비게이션··········································································167

<그림 95> 중앙일보 내비게이션 ········································································167

<그림 96> 한국일보 내비게이션··········································································167

<그림 97> 가디언의 TOP 영역··········································································168

<그림 98> 가디언의썸네일과 기사영역·······························································169

<그림 99> 더타임즈의 TOP 영역·······································································170

<그림 100> 더타임즈의썸네일과 기사영역··························································170

<그림 101> 텔레그라프의 TOP 영역··································································171

<그림 102> 텔레그라프의썸네일과 기사영역·······················································171

<그림 103> 뉴욕타임즈의 TOP 영역··································································172

<그림 104> 뉴욕타임즈의썸네일+기사영역··························································173

<그림 105> 워싱턴포스트의 TOP 영역·······························································174

<그림 106> 워싱턴포스트의썸네일과 기사영역····················································174

<그림 107> USA투데이의 TOP 영역·································································175

<그림 108> USA투데이의썸네일과 기사영역······················································175

<그림 109> 조선일보의 TOP 영역·····································································176

<그림 110> 조선일보의썸네일과 기사영역··························································177

<그림 111> 중앙일보의 TOP 영역·····································································177

<그림 112> 중앙일보의썸네일과 기사영역··························································177

<그림 113> 한국일보의 TOP 영역·····································································178

<그림 114> 한국일보의썸네일과 기사영역··························································178

<그림 115> 가디언 메인····················································································180

<그림 116> 가디언 섹션····················································································181

<그림 117> 가디언 기사면·················································································182

<그림 118> 텔레그라프 메인··············································································183

<그림 119> 텔레그라프 섹션··············································································184

<그림 120> 텔레그라프 기사면···········································································185

<그림 121> 더타임즈 메인·················································································186

<그림 122> 뉴욕타임즈 메인··············································································188

<그림 123> 뉴욕타임즈 섹션··············································································189

<그림 124> 뉴욕타임즈 기사면···········································································190

<그림 125> 워싱턴포스트 메인···········································································191

<그림 126> 워싱턴포스트 섹션···········································································192

<그림 127> 워싱턴포스트 기사면········································································193

<그림 128> USA투데이 메인·············································································194

<그림 129> USA투데이 섹션·············································································195

<그림 130> USA투데이 기사면··········································································196

<그림 131> 조선닷컴메인·················································································197

<그림 132> 조선일보 섹션·················································································198

<그림 133> 조선일보 기사면··············································································199

<그림 134> 중앙일보 메인·················································································201

<그림 135> 중앙일보 섹션·················································································202

<그림 136> 중앙일보 기사면··············································································203

<그림 137> 한국일보 메인·················································································204

<그림 138> 한국일보 섹션·················································································205

<그림 139> 한국일보 기사면··············································································206

- 15 -

<요 약 문>

1. 서론 : 연구목적 및 연구내용

1장에서는 본 연구의 목적과 내용에 대해 논의하였다. 본 연구의 목적은 급

변하고 있는 미디어 환경 속에서 국내외 신문 웹사이트 디자인의 변화 트렌

드와 소셜 미디어 사용 현황을 살펴보고, 3개국(한국, 미국, 영국)의 9개 신문

웹사이트를 디자인, 정보전달, 내비게이션, 상호작용성, 멀티미디어성 등의 차

원에서 체계적으로 비교 분석하는 것이다. 아울러 국내외 신문 웹사이트에 대

한 이용자들의 평가도 살펴보고자 한다. 이러한 연구결과를 바탕으로 한국 신

문 웹사이트 디자인 개선을 위한 구체적 전략과 실무적 가이드라인을 제시하

고자 한다.

이러한 연구결과를 통해 국내 신문사들이 급변하는 미디어 환경에 대처할

수 있는 새로운 웹사이트 디자인 모델을 제시하고, 국내 신문사들의 구체적인

웹디자인 스타일북 제정 및 자체 웹사이트 평가와 점검을 위한 실무적 기준

을 제시하였다. 또 신문사가 창조해 낸 고급 정보 콘텐츠가 보다 효율적으로

웹 2.0과 웹 3.0 세대의 독자층에 다가갈 수 있는 웹사이트 디자인 방안을 제

시하여, 향후 한국 신문 산업과 저널리즘의 발전에 도움을 주고자 하였다.

본 연구는 7장으로 구성되어 있다. 1장은 연구배경과 목적 그리고 연구내용

및 보고서 구성에 대한 논의이다. 2장은 신문 웹사이트 디자인의 주요 쟁점과

기존 연구에 관한 논의이다. 3장은 국내외 주요 신문사 웹사이트 디자인의 최

근 변화 트렌드에 관한 검토이다. 4장은 국내외 신문 웹사이트 소셜 미디어

사용 현황 비교이다. 5장은 국내외 주요 신문 웹사이트 디자인에 대한 비교

평가 분석이다. 6장은 국내외 신문 웹사이트 디자인에 대한 이용자 조사이다.

마지막 7장은 국내 신문 웹사이트 디자인 개선을 위한 구체적이고 실용적인

방안 제시이다.

2. 신문 웹사이트 디자인의 주요 쟁점과 기존 연구

2장은 웹 2.0, 웹 3.0 환경 변화 하에 웹사이트 디자인의 주요 개념과 기존

- 16 -

연구에 대해 검토하였다. 첫 번째 개념은 신문 웹사이트 디자인과 상호작용성

측면이다. 인터넷과 모바일 미디어 환경에서의 웹사이트 디자인은 기존 신문

이나 방송의 일방향적 정보전달이 아니라 제작자와 수용자 간의 쌍방향 커뮤

니케이션을 중요한 개념으로 전제하고 있다. 쌍방향 커뮤니케이션은 수용자가

디자인이라는 요소를 일방적으로 인지하고, 인지된 정보에 의해 수동적으로

서비스를 제공받고 반응하는 것이 아니라 수용자가 서비스의 주체가 되고, 서

비스를 개인화하여 소비하는 것을 의미한다.

최근에는 지금까지 논의되어 온 상호작용성 개념에서 더 나아가 ‘생산적 상

호작용성’ 개념이 주목받고 있다. 웹사이트 디자인과 관련해서 생산적 상호작

용성은 웹사이트 제작자와 수용자와의 관계를 재구성하는 개념으로, 웹사이트

를 수용자들이 창조한 콘텐츠를 지원할 수 있는 의미있는 공간으로 만들어

웹사이트 제작자와 수용자의 관계를 제고하는 것을 의미한다. 생산적 상호작

용성은 웹사이트 디자인 차원(웹사이트 콘텐츠, 제시 방식)과 수용자 차원(콘

텐츠와 제시 방식에서의 수용자 조작성)에서 기존의 관점과 차별성을 보이고

있다.

두 번째 핵심 개념은 신문 웹사이트 디자인의 정보전달 효율성 측면이다.

이는 인터넷 환경에서의 효율적인 정보전달을 새로운 저널리즘 모델로서 고

려해야 한다는 것이다. 웹사이트에서의 디자인은 사용자들의 이해를 돕기 위

한 정보전달의 도구이기 때문에 사용자 이용성의 보편화, 융통성있는 웹디자

인, 간단하고 직관적인 사용성, 정보의 명확한 전달, 사용자에 대한 세심한 배

려 등의 기준이 고려되어한다는 것이다.

세 번째 핵심 개념은 신문 웹사이트 디자인의 미학적 측면이다. 이는 새로

운 정보 디자인 미학을 고려해야 한다는 것이다. 웹사이트는 한 페이지에서

다른 페이지로 넘어가는 계단식 설계이기 때문에 신문 웹사이트는 각 페이지

마다 출처(누가), 타이틀(무엇을), 날짜(언제), URL(어디서) 등의 4가지 페이지

정보가 필수 요소이다. 또 신문 웹사이트 디자인은 일관된 디자인, 동일한 레

이아웃, 그래픽, 편집, 분류 체계 등을 통해 간결성과 일관성이라는 요소를 유

지해야 한다는 것이다.

마지막으로 네 번째 개념은 내비게이션 측면이다. 언론사 웹사이트의 성공

여부가 결정되는 가장 중요한 측면이 바로 내비게이션 디자인이다. 내비게이

션 디자인은 정보 공간 안에서 원하는 정보를 찾기 위해 현재의 위치에서 다

- 17 -

음의 위치로 이동하는 행위, 즉 사용자가 정보공간을 항해하는 과정을 의미한

다. 넓은 의미로는 전체 시스템을 이해하는 과정이라고 할 수 있다. 웹사이트

내비게이션 디자인은 효율적인 항해 도구를 제공함으로써 사용자가 원하는

정보를 좀 더 쉽고 빠르게 찾을 수 있게 도와주는 방법을 개발하는 것을 의미

한다.

3. 국내외 신문 웹사이트 디자인 트렌드

3장은 국내외 주요 신문사들의 웹사이트 디자인 트렌드와 베스트 디자인

사례를 문헌조사를 통해 분석하고, 그 결과를 요약․정리하여 실무자들에게

도움을 주고자 하였다. 또 국내 신문사들의 웹사이트 디자인 트렌드 사례와

이슈 등을 제시하였다.

4. 국내외 신문 웹사이트 소셜 미디어 사용 현황 비교

4장은 국내외 신문 웹사이트 소셜 미디어 사용 현황을 비교 분석하였다. 미

국, 영국 및 한국의 신문사 웹 사이트를 분석해 본 결과, 각 국가별로 소셜 네

트워크적인 요소를 추가하는 방식이나 정도에 있어서는 차이를 보이고 있는

것으로 나타났다. 먼저 미국의 뉴욕타임즈와 워싱턴 포스트의 경우에는 적극

적이면서도 공격적으로 소셜 미디어의 시대에 대응하고 있다는 것이 관찰되

었다. 이들 사이트는 특히 페이스북의 오픈 그래프의 개념을 적용, 이용자의

페이스북 친구 네트워크와의 유기적인 연동을 통해 기사를 읽는 경험이 더욱

더 소셜한 특성을 지니도록 하려는 노력을 기울이고 있었다.

이 중 뉴욕타임즈는 웹 3.0적인 특성에 더 초점을 맞추려는 노력을 시도하

는 것과 사이트의 기사를 다양한 주제로 묶어서 RSS라는 뉴스 신디케이션 서

비스를 강조하고 있는 것이 보였고 워싱턴 포스트는 자유로운 블로그 활동을

격려함으로써 사이트 자체의 내용을 더욱 풍부하게 만드는데 더 노력을 보이

는 것이 관찰되었다. USA투데이의 경우에는 아직 웹 3.0적인 요소를 포함시

키고 있지는 않았고 블로그나 각 주제별 섹션 등을 좀 더 접근하기 쉽게 정렬

함으로써 사이트 이용자들이 더욱 편리하도록 하려는 노력을 보이고 있었다.

- 18 -

영국의 신문사들은 아직 웹 3.0적인 요소를 가미하고 있지는 않았지만 이용

자들에게 다른 네티즌들의 활동을 활발하게 알리려는 노력을 하고 있었다. 이

중 가디언과 데일리 메일은 인기있는 기사의 목록을 별도로 제공하고 있을

뿐만 아니라 각 기사에 달린 댓글의 수를 첫 화면에 보이게 함으로써 활발한

활동을 독려하는 방식을 선호하고 있었다. 텔레그라프의 경우에는 블로그나

댓글의 활발한 활동을 지원하면서도 기존 기자의 기사와는 차별적으로 제공

하고 있는 것이 관찰되었다.

한국의 중앙일보의 경우에는 소셜 네트워크적인 요소의 중요성을 크게 인

식하고 이를 사이트 곳곳에 적용시킨 것이 관찰되었다. 특히 다른 소셜 네트

워크에 링크해서 연동을 시키는 과정을 간소화함으로써 손쉽게 페이스북이나

트위터에 중앙일보 기사에 대한 댓글을 달 수 있도록 하는 간편한 기능을 제

공하고 있었다. 조선일보의 경우에는 소셜 네트워크로의 기사 공유의 기능을

제공하면서도 조선일보의 전문성을 최대한 발휘할 수 있도록 다양한 주제의

기획, 초점 기사들을 제공하고 있었다. 또 조선일보에서는 독자들에게 가능한

많은 정보를 다양하게 제공하려 노력하는 것이 보였는데, 다양한 위젯을 사용

한 개인 페이지도 제공하고 있었고 일자별 기사 랭킹 정보도 제공하고 있었

다. 한국일보의 경우에는 기본적인 소셜 네트워크와의 링크나 인기 기사 목록

정도가 제공되고 있었다.

이러한 결과를 토대로 신문 웹사이트 디자인의 소셜 네트워크적인 요소들

에 대한 의미를 논의하였다. 먼저 기존 독자층이 계속 감소하고 있는 신문사

들은 시대 변화에 적응하기 위해 나름대로 다양한 노력을 기울이고 있다는

것을 알 수 있었다. 중요한 것은 이런 시도들이 ‘기존’의 사이트 구조를 기반

으로 새로운 서비스를 어떻게 도입할 것인가를 모색하는 방식으로 진행된다

면 성공하기 어려울 것이라는 점이다. 신문에 실린 기사를 얼마나 많은 사람

에게 읽힐 것인가를 모색할 것이 아니라 현재 사이트에서 이용자들이 가장

필요로 하는 정보를 가장 손쉬운 방법으로 어떻게 제공할 수 있을 것인가를

새로운 틀에서 모색해야 할 것이다.

이런 관점에서 뉴욕타임즈의 사이트에서 ‘권위’ 있는 뉴욕타임즈 기자들의

기사만 볼 수 있는 것이 아니라 다양한 블로그 활동을 하는 블로거들의 글을

읽게 된다거나 워싱턴 포스트의 사이트가 블로거들의 글로 가득차서 더욱 풍

성해졌다는 것은 이런 구조적인 변화가 시작되었다는 것을 예고하는 것이라

- 19 -

볼 수 있다. 아울러 신문 웹사이트 디자인함에 있어서 이제는 이러한 구조적

인 디자인의 문제를 근본적으로 다시 생각해 볼 시점이 되었다는 것을 의미

하기도 한다. 요컨대 기본적으로 웹사이트의 구조가 중앙 집권적으로만 구성

되어서는 안 되며, 이용자의 기존 소셜 네트워크를 어떤 방식으로든 웹사이트

디자인에 포함시킬 수 있는 방안을 좀 더 적극적으로 모색해야 한다.

5. 국내외 신문 웹사이트 디자인 비교 분석

5장은 국내외 신문 웹사이트 디자인을 실증적으로 비교 분석하였다. 먼저

국내외 신문 웹사이트 디자인의 UI를 분석한 결과를 요약하면 다음과 같다.

영국과 미국 신문 웹사이트의 경우 첫째, 사진, 텍스트 등의 이미지를 크게 사

용하여 강약 조절이 과감하고 시각적으로 집중도가 높았다. 둘째, 단순한 상단

내비게이션, 큰 로고, 여백 등을 사용하고 있었다. 셋째, 오프라인 신문의 특성

을 웹사이트에서도 유지하는 편이었다. 넷째, 웹폰트의 가독성이 높았다. 다섯

째, 그리드 변화가 다양하였으나 섹션별 일관성은 없었다. 여섯째, 명도와 채

도가 높아도 강한 색상을 다양하고 사용하였다. 일곱째, 콘텐츠가 많아서 페이

지가 매우 길었다. 여덟째, 각 사이트마다 독창성이 강조되었다. 마지막으로

사진과 타이포그래피 디자인 외에는 별도의 디자인 요소를 절제하였다.

한국 신문 웹사이트의 경우 첫째, 전체적으로 사진의 크기가 작고 주로 텍

스트의 비중이 높았다. 즉 사진보다는 많은 기사의 노출을 선호하여 작은 사

진을 사용하였다. 둘째, 내비게이션의 영역을 최대한 줄이고 여백 없이 활용하

려는 경향이 있었다. 셋째, 오프라인 신문과 별도의 온라인 신문 사이트를 구

축하였다. 그러나 점차 온오프라인의 연계성을 가지려는 경향을 보이고 있었

다. 넷째, 웹폰트의 다양성이 없어 타이포그래피 디자인에 있어서 독창성이 부

족하였다. 다섯째, 그리드의 변화는 최소화하여 페이지별로 일관성을 유지하

였다. 여섯째, 강하고 자극적인 색상보다는 무난하고 부드러운 파스텔톤 색상

을 선호하였다. 일곱째, 많은 양의 정보를 각 섹션별로 분화하여 메인 자체의

길이는 짧았다. 여덟째, 대부분의 신문사들이 비슷한 UI를 쓰고 있어 차별화

가 떨어지고 있었다. 마지막으로 사진과 타이포그래피의 제약으로 인해 다른

그래픽 요소가 발달하였다.

이러한 UI 분석 결과를 종합하여 보면 국내외 신문 웹사이트는 크게 6가지

- 20 -

의 차이가 있는 것으로 나타났다. 첫째는 텍스트 위주 디자인의 차이이다. 국

내는 한 화면에 보다 더 많은 콘텐츠를 보여주기 위해 여유 공간이 없는 경향

이었으나, 외국은 텍스트 위주에 부분적으로 큰 썸네일을 사용하였으며, 전반

적으로 메인 이미지 외에는 텍스트 위주의 디자인이었다. 또 여백도 적극적으

로 사용하였다.

둘째는 이미지 사용의 차이이다. 국내는 TOP 썸네일과 기타 콘텐츠 썸네일

의 크기가 매우 작은 편이었으나, 국외는 TOP 썸네일의 사용이 큰 편이었으

며, 기타 콘텐츠의 썸네일 크기도 크게 사용하였다. 즉 외국은 사진의 퀄리티

가 좋아서 크고 시원하게 사용함으로써 오프라인 종이 신문을 보는 듯 한 느

낌이 있었다.

셋째는 그리드의 차이이다. 국내의 메인과 섹션은 주로 3단 구조이고 기사

면은 2단 구조를 사용하였으나, 외국은 메인과 섹션 모두 각사마다 다양하게

사용하였으며, 최대 5단까지도 사용하기도 하였다. 그러나 기사면은 주로 2~3

단 구조를 비슷한 비율로 사용하였다. 즉 국내는 거의 비슷한 스타일의 그리

드를 사용하였으나, 외국은 다양한 그리드를 사용하였다.

넷째는 높이의 차이이다. 국내 웹사이트의 길이는 대체적으로 길지 않은 편

이었으며, 스크롤 3~4번 정도면 콘텐츠를 볼 수 있었다(1280×1024 기준). 그러

나 외국은 국내에 비해 높이가 많이 길었으며, 스크롤 5~6번 정도로 콘텐츠를

볼 수 있었다(1280×1024 기준). 즉 국내는 높이가 짧아지는 경향을 보이고 있

었으며, 외국은 빈 공간이 많은 대신 길이가 길어지는 경향이었다.

다섯째는 내비게이션의 차이이다. 국내는 주로 채도가 높은 색상을 바 형식

으로 사용하여 정체성을 표현하였으며, 메인에서는 광고의 영역을 최소화하여

높이를 짧게 하려는 경향이 있었다. 또 작은 로고의 사용과 전체적으로 빈 공

간을 최소화하는 디자인이었으며, 요소들의 크기가 비슷하여 강약이 적었다.

그러나 외국은 주로 채도가 낮은 색상을 최소한으로 사용하거나 그레이톤의

색상과 라인으로 구성되었으며, 메인에도 광고를 크게 사용하여 전체적으로

높이가 길고 여백이 많은 편이었다. 또 로고를 크게 사용하여 오프라인 종이

신문의 느낌을 주었으며, 요소들의 강약이 있었다. 즉 국내는 짧고 강하고 답

답한 느낌을 주는 반면에 외국은 길고 은은하고 시원한 느낌을 주고 있었다.

이는 여백과 색상, 그리고 로고 사이즈에 원인이 있는 것으로 보인다.

마지막으로는 색상 사용의 차이이다. 국내는 채도가 대체적으로 높고 강한

- 21 -

느낌의 색상을 사용하였으며, 주로 내비게이션에 사용하였다. 또 기사는 블랙

과 그레이톤을 주로 사용하였다. 기사의 타이틀에는 색상 사용을 자제하는 편

이었다. 그러나 외국은 전체적으로 채도가 낮고 명도가 낮은 색상을 사용하였

으며, 주로 내비게이션에 사용하였다. 그 외에는 색상 사용을 자제하는 편이었

다. 국내와 가장 큰 차이점은 기사 타이틀을 블루 계통으로 많이 사용하고 있

는 점이었다. 즉 외국은 뉴스라는 특성상 블루 계통의 색상을 사용하였으나,

국내는 다양한 색상을 통해 정체성을 표현하는데 사용하였다.

다음으로 국내 3개(조선, 중앙, 한국)와 외국 6개(New York Times,

Washington Post, USA Today, the Times, Guardian, Telegrphs) 신문 웹사이

트 디자인을 일반 디자인 원리, 정보전달, 내비게이션, 상호작용성, 멀티미디어

와 그래픽 차원에서 비교분석한 결과는 다음과 같다.

첫째, 일반 디자인 원리 차원에서 보면, 영국과 미국의 신문 웹사이트는 레

이아웃과 디자인 스타일이 단순하면서도 심플하게 구성되어 있어 이용자들이

효과적으로 인지할 수 있도록 구조화되어 있는데 반해, 국내 신문 웹사이트는

복잡한 구성과 뉴스기사 텍스트를 너무 강조하고 있어 전체적으로 이용자들

에게 일관성이 없는 디자인을 보여주고 있었다. 예를 들어, 색상의 경우 홈페

이지와 개별 섹션과 기사 페이지에서 여러 색상을 사용하고 있어 전체적으로

통일된 느낌을 가질 수가 없었으며, 시각적으로 방해되는 요인으로 작용하고

있었다. 하지만 구조나 그리드 유형 등은 외국 신문 웹사이트와 유사한 경향

을 보이고 있다. 또 썸네일이나 사진도 외국 신문 웹사이트에 비해 작은 크기

를 사용하고 있어 시각화나 멀티미디어적인 측면에서 차이점이 있었다. 큰 크

기의 썸네일이나 사진을 사용하는 것이 더 효과적이라고 평가할 수는 없으나,

‘메인’ 사진의 강조는 신문 웹사이트의 시각화에 기여하고 각 신문사의 특성

을 드러낼 수 있는 효과적인 장치로 작용할 수 있다.

둘째, 정보전달 차원에서 보면, 국내 신문 웹사이트는 기사에 대한 접근성,

텍스트 읽기, 정보 배열, 정보 위계성에 있어서 외국 신문 웹사이트와 유사하

게 높은 수준을 보이고 있는 것으로 평가된다. 이러한 기사 접근성, 텍스트 읽

기(가독성), 정보 배열이나 정보 위계성, 기사 차별성과 기사 강조성은 저널리

즘 차원에서 평가된 것으로 신문 매체라는 고유한 특성이 웹사이트에 반영된

것으로 보인다. 이러한 점은 국내외 신문 웹사이트가 가지는 공통적인 특성이

기 때문에 외국 신문 웹사이트보다 효과적이라고 평가하기는 어렵다. 하지만

- 22 -

이를 제외한 다른 항목에서는 상대적으로 낮은 수준인 것으로 평가할 수 있

었다. 예를 들어, 뉴스 그룹화나 정보 접근성 그리고 광고와 관련된 항목들은

외국 신문 웹사이트에 비해 효과적이지 못한 것으로 나타났다. 특히 광고의

경우는 외국 신문 웹사이트에 비해 수가 많거나 팝업 광고가 있는 등으로 인

해 정보전달을 방해하고 있는 것으로 나타났다. 따라서 국내 신문 웹사이트는

광고 등의 정보전달 기능을 방해하는 요소의 사용을 지양하고 뉴스 그룹화나

정보 접근성 등의 정보전달성을 강화하는 전략을 추구할 필요성이 있다.

셋째, 내비게이션 차원에서 보면, 내비게이션 구성, 형태, 유형, 항목 등의

예측성에서 세부적으로 차이점이 있었지만, 전체적으로는 비슷한 경향을 보이

고 있어 내비게이션 기능을 강화하는 전략을 보이고 있었다. 하지만 내비게이

션 차원에서 관련 기사를 제시하거나 정보를 탐색하는 것은 국외 신문 웹사

이트에 비해 매우 떨어지고 있어, 이에 대한 개선책이 필요할 것으로 보인다.

특히 기사를 제공하면서 그 기사와 관련된 기사를 제공하거나 정보를 제공하

여 이용자나 독자가 원하는 바를 알려주는 것은 신문 웹사이트의 매우 중요

한 내비게이션 기능이다. 하지만 외국 신문 웹사이트에 비해 국내 신문 웹사

이트는 전혀 이러한 기능을 제공하도록 구성되어 있지 않았다. 섹션별로 일반

적으로 접근할 수 있는 기사 검색이나 정보 검색을 찾을 수 있는 기능이 부족

한 것으로 평가된다. 신문사의 웹사이트는 기사를 보거나 고급 정보를 접하기

위해 이용하는 비율이 많기 때문에 앞으로 이러한 점은 강화해야 할 전략이

다. 이는 위에서 언급한 차원인 정보전달과도 연관되는 것으로 내비게이션 기

능에서도 이러한 점을 보완해야 한다. 결론적으로 내비게이션 차원에서는 국

내 신문 웹사이트가 외국 신문 웹사이트와 전체적으로 비슷한 경향을 보이고

있지만, 세부적으로 관련 기사 제시나 정보 탐색 측면에서는 보완해야 할 점

이 있는 것으로 평가된다.

넷째, 상호작용성 차원에서 보면, 상호작용성 차원에서는 국내 신문 웹사이

트와 국외 신문 웹사이트가 비슷한 전략을 보이고 있었지만, 세부적으로는 큰

차이를 보이고 있었다. 국내 신문 웹사이트는 SNS나 이메일, 댓글 등을 적극

적으로 활용하고 있었지만, 이용자와의 상호작용성을 추구하는 전략으로 웹사

이트를 구성하였다고 보기는 힘들다. 그러나 외국 신문 웹사이트는 SNS나 이

메일, RSS 등을 적절히 활용하여 보다 더 상호작용성을 추구하고 있는 것으로

나타났다. 예를 들어, 기사가 제시되는 페이지에서 보여지는 상호작용적인 다

- 23 -

양한 기능들은 형식적으로 제공하여, 외국 신문 웹사이트처럼 연계성을 강조

하거나 특성화시켜 제공하지 않고 있었다. 상호작용적인 측면은 신문 웹사이

트가 사람들의 의견을 반영하여 공론의 장으로 활용될 수 있는 가능성을 가

져다 줄 수 있다. 이런 관점에서 상호작용적인 기능이 제공되는 웹사이트 디

자인의 필요성이 있다. 또 기사 내용에서 나타나는 용어를 하이퍼링크로 연결

하는 기능은 국내 신문 웹사이트들은 제한적으로 제공하거나 잘못된 링크를

제공하고 있어, 이를 적극적으로 활용하는 국외 신문 웹사이트들과 큰 차이를

보였다. 이러한 점은 국내 신문 웹사이트가 보완하고 개선되어야 할 방안으로

평가된다.

다섯째, 멀티미디어와 그래픽 차원에서 보면, 국내 신문 웹사이트는 외국

사이트들에 비해 동영상과 그래픽을 적극적으로 활용하고 있지 않는 것으로

나타났다. 국외 신문 웹사이트들은 멀티미디어성과 상호그래픽성을 강조함으

로써 텍스트 중심의 오프라인 신문이 갖지 못하는 웹디자인의 가능성을 적극

적으로 활용하고 있다. 또 자사가 갖고 있는 정보력을 바탕으로 다른 포털사

이트 등과 차별화되는 고급 정보를 보다 흥미롭고, 효율적으로 제시하고 있다.

물론 영국의 더타임즈는 동영상이나 그래픽을 양적으로 많이 활용하고 있지

는 않았지만, 그 내용의 밀도나 화질 선명도가 높은 수준인 것으로 보아 결코

멀티미디어성이 낮다고는 볼 수 없다. 따라서 멀티미디어와 그래픽 기능을 강

화하고, 이를 신문 웹사이트가 갖고 있는 기사 텍스트와 유기적으로 연계하려

는 전략을 추구해야 할 필요성이 있다.

6. 국내외 신문 웹사이트 디자인에 대한 이용자 조사

6장은 현재 재학 중인 대학생 20명을 대상으로 준개방형 설문과 인터뷰를

통해 국내외 9개 신문 웹사이트 디자인에 대한 이용자 조사를 실시하였다. 분

석 결과는 다음과 같다. 일반 디자인 차원의 평가에서는 초기화면의 경우 웹

사이트의 정체성이 드러날 수 있는 디자인에 더욱 주목하는 것으로 나타났다.

또 광고의 수와 그 배치에 따라 이용자가 느끼는 웹사이트에 대한 평가가 많

은 영향을 미치고 있었다. 국내 신문 웹사이트의 경우에는 무분별한 광고 노

출로 인해 오히려 가독성을 방해하는 것으로 평가되었다. 광고는 신문사의 이

미지와도 직결되는 중요한 부분이므로 이러한 부분에 대한 제고가 필요할 것

- 24 -

이다.

정보전달 차원에서의 평가에서는 국내 신문 웹사이트는 색감의 사용이 통

일성이 없어 다소 어설프게 느껴진다는 평가였지만, 외국 신문 웹사이트는 아

이콘의 버튼과 적절한 배치, 깔끔한 디자인이라는 평가였다. 따라서 웹사이트

를 이용함에 있어 이용자들에게 시각적인 요소가 상당부분 차지하고 있음을

알 수 있었다. 또 국내 신문 웹사이트는 이용자들이 검색어를 입력할 경우 관

련 기사의 노출이 충분하지 않았지만, 외국 신문 웹사이트는 사이트 내의 검

색기능이 잘 구축되어 있었다는 평가였다. 즉 이용자가 보다 능동적으로 이용

할 수 있는 시스템이 잘 구축이 되어 있어 활용도가 높은 시스템이라고 평가

하였다.

내비게이션 차원에서의 평가에서는 국내 신문사 웹사이트에 대해 긍정적이

였으며 외국 신문 웹사이트와 차이점을 느끼지 못한다는 평가였다. 그러나 국

외 신문 웹사이트는 세부적으로 장점과 단점에 대한 평가가 있었다. 예를 들

어, 뉴욕타임즈는 내비게이션바가 상단에도 있지만 목차처럼 왼쪽에 있는 것

이 이용자들에게는 불편함으로 작용되었다. 또 영국 신문 웹사이트는 미국 신

문 웹사이트에 비해 내비게이션 차원에서 부족하다는 평가도 있었다.

상호작용성 차원에서의 평가에서는 이용자들은 국내 신문 웹사이트는 많은

연동서비스로 인해 신문사 고유의 서비스가 아닌, 포털의 서비스와 같은 느낌

이라는 평가였다. 외국 신문 웹사이트는 피드백이 활발하게 이루어져 상호작

용이 잘 되고 있다는 평가였다. 최근 웹사이트를 개편한 중앙일보의 경우에는

SNS을 이용하지 않는 이용자에게도 시민의 참여도가 높을 것이라는 이미지를

심어줄 수 있는 가능성이 있다고 평가하였다.

이러한 이용자 의견 조사 외에도 GNB, Layout, CSS, Font, Color, Photo &

Thumbnail, Button & Icon, Multimedia & Graphics, Interaction, Banner 등의

요소를 중심으로 하는 세부적인 질문을 통해 국내외 신문 웹사이트별로 개별

적인 디자인에 대한 일반적인 평가를 실시하였다. 그 결과 국내외 신문 웹사

이트가 각각의 차별성을 보이고 있는 것으로 나타났다.

7. 종합논의 및 디자인 개선방안 제안

7장은 본 연구에서 시행된 국내외 신문 웹사이트 비교 분석과 국내외 신문

- 25 -

웹사이트에 대한 일반인 평가 결과, 전문가 의견 등을 바탕으로 한국 신문 웹

사이트 디자인 개선을 위한 구체적 방안을 제시하였다. 첫 번째는 정보전달

(저널리즘적) 측면이다. 이는 정보의 ‘위계질서’와 연관성을 잘 드러내는 간결

한 디자인, 독자를 계속해서 끌어들이는(magnetism) 링크 기능의 강화, 선정

적 광고 내용과 제시 방법의 개선 등의 방안으로 요약된다. 두 번째는 디자인

미학적 측면이다. 이는 신문사의 개성과 정체성이 살아있는 디자인, 포털과는

차별화된 ‘신문사다운’ 디자인, 멀티미디어, 인터랙티브 그래픽을 활용한 ‘동

적’인 웹 디자인 등의 방안으로 요약된다. 세 번째는 신문사와 독자와의 관계

로서 상호작용성과 친밀성의 강화이다. 이는 소셜 네트워크의 적극적이고 효

율적 활용, 이용자(독자) 편의 중심의 디자인 등의 방안으로 요약된다. 네 번

째는 디자인 개혁의 신중성과 경영진의 인식 변화이다. 본 연구에서 제시한

이 같은 구체적이고 실무적인 방안을 통해 국내 신문 웹사이트 디자인이 개

선되어 새로운 미디어의 변화에 조응해야 할 것이다.

- 27 -

Ⅰ. 서론

1. 연구배경과 목적

미디어의 역사를 돌아보면 새로운 미디어 기술의 등장은 늘 기존 매체에게

위기와 더불어 새로운 변신의 기회를 제공하였다. 국내외를 막론하고 인쇄신

문의 구독률은 계속 하락하고 있지만, 신문 웹사이트 이용률은 완만하게 증가

하고 있다는 조사결과가 나오고 있다. 과거 오프라인에 종속적이었던 온라인

신문에 대한 인식도 많이 달라지고 있다.1)

이런 가운데 지난 10여년간 신문 웹사이트는 양적으로 엄청나게 확장되었

고 질적으로 진화하였다. 신문 웹사이트는 단순히 종이신문의 콘텐츠를 인터

넷판으로 전환하는 초보단계에서 벗어나, 새롭고 독자적인 ‘웹’ 스타일의 정보

전달과 정보 공유의 장으로 진화하고 있는 것이다. 특히 최근 웹 2.0으로 대표

되는 급변하는 미디어 환경 변화 속에서 세계 주요 언론사들은 웹상에서 새

로운 저널리즘 모델과 차별적인 정보 콘텐츠 사업자로서의 경쟁력을 갖추기

위해 엄청난 노력을 기울이고 있다.

최근 외국 신문사의 웹사이트 디자인의 변화는 바로 이러한 신문사들의 정

체성 변화와 차별화 전략을 잘 드러내고 있다. 이미 2000년대 중반부터 외국

주요 신문사(미국의 뉴욕타임즈(New York Times), 영국의 가디언(Guardian)

등)는 끊임없는 웹사이트의 디자인 개혁(redesign)을 통해 독자 확보와 충성도

를 높이는 데 성공하고 있다. 새로운 웹사이트에는 멀티미디어 영상, 인터랙티

브(interactive) 그래픽, 다양한 소셜 미디어(Twitter, Facebook 등)와의 연계 등

으로 독자들과의 상호교류와 참여를 유도하고 있다. 2008년 인터넷 컨설팅 회

사인 바이빙 그룹(The Bivings Group)이 미국의 100대 신문 웹사이트를 분석

한 결과에 의하면, 미국 신문사들이 미디어 환경 변화에 적응하려는 전략으로

멀티미디어 서비스 강화, 블로그 강화, 쌍방향 온라인 시스템 구축, 개인화된

1) 외국에서는 오프라인 신문을 폐쇄하고, 전적으로 온라인으로 이동하는 사례까지 나타나고 있

다. The Detroit News and Free Press(2006년 7월 30일), The Christian Science Monitor(2009

년 4월) 등이 대표적이다.

- 28 -

뉴스 제공 서비스를 하고 있는 것으로 나타났다.2)

특히 최근 부상하고 있는 소셜 네트워크와 소셜 미디어 환경을 어떻게 신

문 웹사이트 디자인을 개혁하는 데 잘 활용할 수 있는가하는 문제는 향후 신

문의 생존 전략과 직결되는 중요한 관심사이다. 과연 새로운 소셜 미디어가

불러오고 있는 미디어계의 ‘지각변동’(Gordon, 2009)을 기존의 신문 웹사이트

에서는 어떻게 활용하고, 이를 어떻게 디자인적으로 반영할 수 있을 것인가에

지대한 관심이 쏠리고 있다.

신문 웹사이트 디자인은 단순히 시각 디자인적이고 스타일적 측면의 변화

만을 의미하는 것이 아니다. 내비게이션, 검색, 연결, 정보전달 모델 등과 같은

보다 구조적인 측면에 대한 근본적인 고민 하에 이뤄지는 것이기 때문이다.

또 여기에는 신문과 독자의 상호작용성, 신문의 정체성에 대한 신문사의 철학

과 경영방침이 담겨져 있어야 한다. 즉, 신문사가 추구하는 새로운 정보 콘텐

츠 매체로서의 차별화된 브랜딩(branding)을 드러낼 수 있는 총체적인 작업이

되어야 한다. 즉 신문 웹사이트 디자인 개선방안은 신문사 웹사이트 자체를

강화하는 전략이며, 이는 새롭게 변화된 미디어 환경에서 독자들의 관심을 끌

게 되어 신문사의 발전과도 직접적으로 연계되기 때문이다.

외국에서는 이미 언론사의 웹사이트의 디자인의 중요성이 크게 부각되고,

이에 따라 신문 웹사이트 디자인 개선과 재디자인을 위한 다양한 실무적 논

의(The Society for News Design Journal, Nieman Reports, Online

Journalism Review, WAN Report) 및 학술적 연구(Chan-Olmsted & Park,

2000; Kieman & Levy, 1999; Li, 1998)들이 활발하게 진행되었다.

그러나 국내에서는 아직까지 신문 웹사이트 디자인에 대한 총체적인 인식

이 부족한 편이다. 물론 국내 신문 웹사이트도 앞을 다투어 외국 신문 웹사이

트와 같이 상호작용적인 다양한 기제들을 갖춰가고 있다. 또 몇몇 언론사에서

인터넷과 모바일 환경에 적합한 뉴스 사이트 개혁을 단행하기도 했다.3) 그러

나 아직까지도 국내 신문사의 웹사이트는 오프라인에서 제공하는 뉴스 정보

를 온라인에 적합한 포맷으로 바꾸어 재송신하는 차원에 머물거나, 혹은 인터

넷의 기술적 특성인 상호작용성과 멀티미디어성을 효과적으로 활용하지 못하

고 있다는 것이 일반적인 평가이다.

2) http://www.bivings.com/thelab/presentations/2008study.pdf

3) 2010년 10월에 중앙일보는 웹사이트 디자인의 전면적인 개혁을 실시하였다.

- 29 -

또한 저널리즘과 디자인 미학적 측면을 아우르는 총체적이고 실용적인 신

문 웹사이트 디자인 연구가 부족한 실정이다. 황용석과 이홍철(2000)의 인터넷

뉴스사이트 편집에 관한 실무적 연구서가 있기는 하지만, 대부분 국내 연구는

신문 웹사이트의 내용과 기능을 분석하는 연구들(김재영, 2002; 최낙진, 1999)

이거나, 웹사이트 디자인의 미학적 측면에 대해 초점을 맞춘 연구들(이용환,

1998; 장영범, 2008; 정면주․오지호, 2003)로 양분되어 있다. 즉 저널리즘적

측면과 디자인적 측면을 총괄적으로 다룬 실용적 연구는 드문 편이다. 특히

새로운 웹과 SNS 환경을 이끌어갈 수 있는 신문 웹사이트 디자인에 대한 논

의가 부족하고 이에 대한 본격적인 연구가 이뤄지지 않은 상태이다.

신문 웹사이트 디자인 전략과 디자인 개혁은 웹 2.0과 모바일 미디어 환경

에서의 신문의 생존 전략과 연관된 중요한 연구 과제이다. 또 단순히 기술적,

도구적 차원에서 멀티미디어나 블로그 기능 강화, 쌍방향 온라인 시스템, 개인

화된 뉴스 제공 등의 전략 외에도 보다 총체적인 접근이 필요하다. 즉 인터넷

이용자들이 온라인상에서 처음으로 접하게 되는 신문 웹사이트가 보다 매력

적으로 독자에게 다가가기 위한 디자인 미학적 측면에서의 연구가 필요한 시

점이다. 무엇보다 웹상의 수많은 경쟁적 사이트 속에서 ‘찾아가고 싶고, 머물

고 싶고, 또 다시 방문하고 싶은’ 충성도와 선호도를 이끌어내는 웹사이트 디

자인에 대한 고민이 필요한 시점이다.

또한 신문 웹사이트 발전 단계에서 인터넷 이용자와의 상호작용성

(interactivity)이 점차로 중요해지고 있다. 정보가 다양해짐에 따라 개인의 뉴

스 가치 판단, 즉 어떤 뉴스와 정보가 나에게 가치가 있고, 어느 매체가 이를

잘 생산하여 전달하는지를 파악해야 하는 것이다. 이에 따라 신문 웹사이트는

상호작용성에 바탕을 둔 독자와의 관계를 재정립하는 새로운 커뮤니케이션

양식과 전략이 필요하다. 즉, 정보의 생산과 전달에 있어서도 기존의 오프라인

신문의 내용과 전달방식과는 차원이 다른 상호작용성을 추구해야 한다.

본 연구의 목표는 급변하고 있는 미디어 환경 속에서 국내외 신문 웹사이

트 디자인의 변화 트렌드와 소셜 미디어 사용 현황을 살펴보고, 3개국(한국,

미국, 영국)의 9개 신문 웹사이트를 디자인, 정보전달, 내비게이션, 상호작용

성, 멀티미디어성 등의 차원에서 체계적으로 비교 분석하는 것이다. 아울러 국

내외 신문 웹사이트에 대한 이용자들의 평가도 살펴보고자 한다. 이러한 연구

결과를 바탕으로 한국 신문 웹사이트 디자인 개선을 위한 구체적 전략과 실

- 30 -

무적 가이드라인을 제시하고자 한다.

이를 통해 본 연구는 국내 신문사들이 급변하는 미디어 환경에 대처할 수

있는 새로운 웹사이트 디자인 모델을 제시하고, 국내 신문사들의 구체적인 웹

디자인 스타일북 제정 및 자체 웹사이트 평가와 점검을 위한 실무적 기준을

제시하고자 한다. 또 신문사가 창조해 낸 고급 정보 콘텐츠가 보다 효율적으

로 웹 2.0과 웹 3.0 세대의 독자층에 다가갈 수 있는 웹사이트 디자인 방안을

제시하여, 향후 한국 신문 산업과 저널리즘의 발전에 도움을 주고자 한다.

2. 연구내용과 보고서 구성

보고서의 내용은 크게 다섯 부문으로 구성되어 있다. 첫째는 신문 웹사이트

디자인의 주요 쟁점과 기존 연구에 관한 논의이다. 둘째는 국내외 주요 신문

웹사이트 디자인의 최근 변화 트렌드에 관한 검토이다. 셋째는 국내외 신문

웹사이트의 소셜 미디어 사용 현황 비교 분석이다. 넷째는 국내외 신문 웹사

이트 디자인에 대한 비교 평가 분석 및 이용자 의견 조사이다. 마지막으로 국

내 신문사들의 웹사이트 디자인 개선을 위한 구체적이고 실용적인 방안 제시

이다.

1) 신문 웹사이트 디자인의 주요 쟁점과 기존 연구 검토

이 장에서는 웹 2.0과 웹 3.0 환경 변화 하에 웹사이트 디자인 변화의 주요

쟁점과 이에 대한 기존 연구를 검토한다. 구체적으로는 웹사이트 디자인의 상

호작용성, 정보전달 효율성, 미학적 측면, 내비게이션 등의 주요 쟁점을 다룰

것이다. 첫 번째는 '상호작용성‘ 측면이다. 인터넷과 모바일 미디어 환경에서

의 웹사이트 디자인은 기존 신문이나 방송의 일방향적 정보전달이 아니라 제

작자와 수용자 간의 쌍방향 커뮤니케이션을 중요한 개념으로 전제하고 있다.

쌍방향 커뮤니케이션은 수용자가 디자인이라는 요소를 일방적으로 인지하고,

인지된 정보에 의해 수동적으로 서비스를 제공받고 반응하는 것이 아니라 수

용자가 서비스의 주체가 되고, 서비스를 개인화하여 소비하는 것을 의미한다.

- 31 -

최근에는 지금까지 논의되어 온 상호작용성 개념에서 더 나아가 ‘생산적 상호

작용성’ 개념이 주목받고 있다. 생산적 상호작용성은 웹사이트 디자인 차원(웹

사이트 콘텐츠, 제시 방식)과 수용자 차원(콘텐츠와 제시 방식에서의 수용자

조작성)에서 기존의 관점과 차별성을 보이고 있다.

두 번째는 정보전달 효율성이다. 이는 인터넷 환경에서의 새로운 저널리즘

모델로서 정보전달성을 고려해야 한다는 것이다. 웹사이트에서의 디자인은 사

용자들의 이해를 돕기 위한 정보전달의 도구이기 때문에 사용자 이용성의 보

편화, 융통성있는 웹디자인, 간단하고 직관적인 사용성, 정보의 명확한 전달,

사용자에 대한 세심한 배려 등의 기준이 고려되어한다는 것이다.

세 번째는 미학적 측면이다. 이는 새로운 정보 디자인 미학을 고려해야 한

다는 것이다. 웹사이트는 한 페이지에서 다른 페이지로 넘어가는 계단식 설계

이기 때문에 신문 웹사이트는 각 페이지마다 출처(누가), 타이틀(무엇을), 날짜

(언제), URL(어디서) 등의 4가지 페이지 정보가 필수 요소이다. 또 신문 웹사

이트 디자인은 일관된 디자인, 동일한 레이아웃, 그래픽, 편집, 분류 체계 등을

통해 간결성과 일관성이라는 요소를 유지해야 한다는 것이다.

네 번째는 내비게이션 측면이다. 신문 웹사이트의 성공여부가 결정되는 가

장 중요한 측면이 바로 내비게이션 디자인이다. 내비게이션 디자인은 정보 공

간 안에서 원하는 정보를 찾기 위해 현재의 위치에서 다음의 위치로 이동하

는 행위, 즉 사용자가 정보공간을 항해하는 과정을 의미한다. 넓은 의미로는

전체 시스템을 이해하는 과정이라고 할 수 있다. 웹사이트 내비게이션 디자인

은 효율적인 항해 도구를 제공함으로써 사용자가 원하는 정보를 좀 더 쉽고

빠르게 찾을 수 있게 도와주는 방법을 개발하는 것을 의미한다.

2) 국내외 신문 웹사이트 디자인 트렌드

이 장에서는 국내외 주요 신문사들의 웹사이트 디자인 트렌드와 베스트 디

자인 사례를 문헌조사를 통해 분석하고, 그 결과를 요약․정리하여 실무자들

에게 도움을 주고자 하였다. 또 국내 신문사들의 웹사이트 디자인 트렌드 사

례와 이슈 등을 제시하였다.

- 32 -

3) 국내외 신문 웹사이트의 소셜 미디어 사용 현황 비교

신문 웹사이트 디자인에서 소셜 네트워크의 효율성을 최대한 높이기 위해

서는 우선 소셜 네트워크 환경에 대한 근본적 이해와 더불어 이를 구체적으

로 활용할 수 있는 방안 제시가 필요하다. 이 장에서는 소셜 미디어의 정보

구조적 측면을 고려한 뉴스사이트 웹디자인을 위해 우선 웹 2.0의 의미를 좀

더 명확하게 규명하고, 소셜 네트워크를 활용하여 이용자 수를 증가시킬 수

있는 검색 엔진 최적화 또는 소셜 미디어 최적화의 개념을 설명한다. 그리고

현재 국외 및 국내 신문 웹사이트에서 소셜 미디어가 사용되는 현황을 살펴

보자 한다. 이를 바탕으로 신문 웹사이트에 소셜 미디어를 가장 효율적으로

활용하는 방안을 제시하고자 한다.

4) 국내외 신문 웹사이트 디자인 비교 평가 분석 및 이용자 조사

이 장에서는 국내외 9개 주요 신문사(조선일보, 중앙일보, 한국일보, 뉴욕타

임즈, 워싱턴포스트(Washington Post), USA투데이(USA Today), 더타임즈(The

Times), 가디언, 텔레그라프(Telegraph)의 웹사이트 디자인을 체계적이고 종합

적으로 비교 분석한다. 분석을 위한 평가 기준은 일반 디자인 원리, 정보전달,

내비게이션, 상호작용성, 멀티미디어 차원으로 구분된다. 일반 디자인 원리 차

원에서의 평가는 조직성(organization), 효율성(efficiency) 등의 개념으로 분석

한다. 정보전달 차원에서는 접근가능성(accessibility), 식별성(legibility), 가독성

(readibility) 등의 개념으로 분석한다. 내비게이션 차원에서의 평가는 예측성

(anticipation), 자율성(autonomy), 학습성(learnability), 탐사성(explorable) 등의

개념으로 분석한다. 상호작용성 차원의 평가는 피드백의 경우처럼 버튼을 누

르면 음영과 색채가 변화되거나 적합한 사운드로 반응할 경우, 사용자의 시지

각에 효과적으로 호소할 수 있는 요소가 되며, 사용자는 신속한 반응에서 자

신의 행위에 대한 확신을 가지게 되는 것을 의미한다. 멀티미디어 차원의 평

가는 멀티미디어성과 그래픽성 등의 개념을 중심으로 분석한다.

또한 위의 분석대상이 된 9개 국내외 신문 웹사이트 디자인에 대한 일반

이용자(독자) 의견 조사를 실시한다. 일반 이용자가 웹사이트의 디자인, 정보

전달, 내비게이션, 상호작용성 등에 관하여 어떤 의견을 갖는지를 준개방형 설

- 33 -

문과 인터뷰를 통해 조사하고자 한다.

5) 국내 신문 웹사이트 디자인 개선을 위한 가이드라인 제시

본 연구에서 시행된 비교 분석과 이용자 및 전문가 의견을 종합하여, 한국

웹사이트 디자인의 문제점들을 파악하고, 이에 대한 개선책 및 새로운 디자인

개혁 방향을 제시하고자 한다. 이를 통해 변화된 미디어 환경에 적응할 수 있

는 국내 신문 웹사이트 디자인 개선 방안을 제시하고자 한다.

- 34 -

Ⅱ. 신문 웹사이트 디자인의 주요 쟁점과 기존 연구

1. 웹 2.0과 웹 3.0 환경 변화와 신문 웹사이트 디자인

2000년 이후 종이신문이 쇠락하면서 빠르고 다양한 인터넷상의 온라인 뉴

스의 위상이 높아지고 있다. 온라인 저널리즘 도입 초기에 종이신문을 그대로

옮겨놓는 온라인 뉴스의 한계점을 넘어 하루가 다르게 새로운 기술과 새로운

편집력으로 지면에서 할 수 없는 새로운 뉴에디팅 시대를 맞고 있다. 다양한

멀티미디어와 각종 플랫폼에 익숙한 사용자들의 눈높이에 맞는 뉴스가 절실

한 시점인 것이다. 즉 온라인 뉴스 도입 초반에 각 언론사 웹사이트가 빠르고

정확한 뉴스를 기반으로 아이덴티티, 차별화, 레이아웃, 타이포그래피의 활용,

일관된 내비게이션, 사용성, 심미성 등이 주 쟁점이었다면, 지금은 콘텐츠 재

구성에 집중한 신개념 뉴스를 만들어내고 있다.

일반적으로 신문 웹사이트는 3단계의 발전 과정을 거친다고 알려져 있다.

첫 번째 단계는 기존 신문사나 방송사가 오프라인 상의 콘텐츠를 그대로 온

라인상에서 전달하는 방식이다. 이 단계는 기존 인터넷 뉴스의 인터넷 버전에

불과하며 인터넷의 기술적 특성을 제한적으로 사용하는 것이다. 두 번째 단계

는 인터넷에 적합한 독자적인 뉴스 정보가 추가되고 이 콘텐츠들이 하이퍼링

크나 검색엔진을 통해 접근 가능해지면서 상호작용적인 특성이 강화되는 방

식이다. 이 단계는 기존 뉴스를 변형 혹은 가공하는 별도의 편집실과 독립적

으로 뉴스정보를 취재하는 인력이 구비된다. 세 번째 단계는 독자적인 뉴스

콘텐츠 개발 이외에도 새로운 기사작성법(storytelling)과 편집방식이 도입되어

새로운 커뮤니케이션 매체로 거듭나는 방식이다. 이 단계에서 새로운 기법이

정착하기 위해서는 독자적인 저널리즘 규범이 확립되어야 하며, 전문적인 저

널리즘 기능을 수행하게 된다(Pavlik, 1997).

현재 국내의 신문사들은 첫 번째 단계를 거쳐, 두 번째 단계에 머무르고 있

는 수준이다. 이는 뉴스가 생산되는 구조적 특성 때문이다. 즉 신문사에서 제

공하는 뉴스는 편집국 내에서 게이트키핑 과정을 거쳐, 언론사의 편집방향, 뉴

스가치, 기사작성 스타일 등이 개입되어 만들어진다. 따라서 인터넷에 적합한

- 35 -

방식으로 기사를 변형하거나 작성한다는 것은 전통적인 편집국 내부의 규범

체계를 변화시키는 것을 의미한다. 요컨대 기존 신문사들은 인터넷 이용자와

의 상호작용을 증가시키는 방식으로 인터넷의 특성을 극대화하면서 편집국

내부 변화보다는 기존 콘텐츠를 온라인으로 재전송하는 보다 안전한 방식을

택하고 있다(황용석․이홍철, 2000; Chan-Olmsted & Park, 2000).

그러나 웹 2.0로 대변되는 인터넷 환경의 변화는 신문사들의 웹사이트에 대

한 인식과 전략을 근본적으로 변화시키게 되었다. 웹 2.0의 주요 특성을 기반

으로 하는 대표적인 서비스는 SNS와 UCC이다. 이러한 서비스들은 웹 2.0의

특성을 기반으로 하는 새로운 시각에서 웹디자인 영역과 연계되어 발전하고

있다(장영범, 2008). 다음의 <그림 1>은 이와 같은 웹 2.0의 특성과 웹 디자인

영역이 연계를 잘 설명해주고 있다.

<그림 1> 웹 2.0의 주요 특성과 웹 디자인 영역

세계신문협회는 웹 2.0을 가장 성공적으로 활용하는 신문사로 미국의 뉴욕

타임즈, 영국의 파이낸셜타임즈, 오스트리아의 포랄베르그, 미국의 블루프턴

투데이 등을 꼽고 있다. 이 가운데 뉴욕타임즈의 경우에는 2006년 4월 사용자

중심으로 웹사이트를 대폭 개편하였다. 자사 사이트에 ‘My Times’라는 코너를

통해 독자맞춤형 서비스를 제공한다. 독자들에게 홈피를 제공하고, 자신의 관

- 36 -

심사, 기사, 사진, 멀티미디어를 한 페이지에 저장하게 만들었다. 또 멀티미디

어의 강화하였다. 동영상 비디오, 팟캐스트, 기자의 음성이 들어간 다양한 슬

라이드 쇼, 인터랙티브 그래픽 등을 통해 웹사이트만의 고유한 특성을 잘 살

리고 있고, 타겟 독자와의 긴밀한 유대감을 형성하고 있다. 또 소셜 네트워크

(Facebook, Linkedin 등)나 소셜 뉴스 서비스(Digg, Newsvine, TailBank 등)와

의 링킹 서비스가 잘 되어있다. 이는 젊은 층이나 활발한 인터넷 뉴스 이용자

층과 연계하려는 시도이다.4)

이미 외국에서는 신문 웹사이트 디자인 개선과 재디자인을 위한 실무적 논

의(The Society for News Design Journal, Nieman Reports, Online

Journalism Review, WAN)와 학술적 연구(Chan-Olmsted & Park, 2000; Li,

1998)들이 진행되고 있다. 실무적인 논의 중에서 가장 대표적으로 세계신문협

회(WAN, 2007)에서는 웹 2.0 시대를 맞이하여 신문 웹사이트 개선을 위한 20

가지 방안을 제안하였다. 구체적으로 살펴보면 지역성 초점, 속보성 강화,

UCC 활용, 기사댓글 허용, RSS 지원, 콘텐츠의 블로그 링크, 기존 웹사이트

활용, 브랜드 전략, 콘텐츠 강화, 사진 강화, 동영상을 통한 넷캐스트 제작, 기

자 블로그 제공, 외부와의 링크, 개인화된 뉴스 제공, 이용자(독자)와 소통, 태

그 활용, 모바일 이용자 서비스, 지역 사회 관련 콘텐츠 확대, 새로운 콘텐츠

실험의 공간으로 활용, 웹의 서브 페이지를 랜딩 페이지로 디자인하기 등을

신문 웹사이트의 개선 방안으로 제시하였다. 웹사이트 디자인에 대한 학술적

연구들은 초기에는 미디어 웹 사이트들의 특성을 살펴보는 경향을 보였으나,

최근의 연구들은 웹사이트와 뉴스 조직 간의 관계를 탐구하는 경향을 보이고

있다.

4) 최근 뉴욕타임즈는 다음 달부터 속보이슈에 대해 그 분야 전문가의 견해와 분석을 담는

'Instant Op-Ed'를 자사 웹사이트인 nytimes.com에 실시간 게재할 계획이라고 밝혔다. 뉴욕

타임즈 '사설/오피니언' 페이지를 담당하는 앤드류 로젠탈(Andrew Rosenthal) 편집장은 "현

재에도 뉴욕타임즈의 사설과 오피니언은 매우 신속하게 게재되는 편이지만, 앞으로는 온라인

nytimes.com의 1등의 위치를 확고히 다지고, 인터넷의 속보성, 확장성을 살려 주요 속보에

대해서는 다양한 주제전문가의 오피니언을 nytimes.com에 즉각 게재, 독자들의 토론을 이끄

는 방식의 칼럼 게재를 할 것"이라고 밝혔다. 그는 곧 전직 논설위원 3명을 포함한 다양한

주제를 커버할 전문가를 찾아, 주요 이슈가 보도됨과 동시에 그들이 nytimes.com에서 찬반토

론의 칼럼을 게재하고, 독자들이 그 의견에 대해 코멘트하는 방식으로 'Instant Op-Ed'를 운

영할 것이라고 밝혔다(http://blog.chosun.com/blog.log.view.screen?blogId=205&logId=3531805).

- 37 -

구분 내용

지역에 초점 국제뉴스라도 지역적 시각이 있어야

속보성 강화 웹사이트에 속보를 강화하고 종이신문에 심층기사 게재

UCC 활용 브라질의 O Estado de S. Paulo 사진 프로젝트

기사 댓글 허용, 순위 USA Today가 좋은 사례

RSS 지원 자사 콘텐츠의 홍보 기회로 적극 활용

콘텐츠를 블로그 링크 블로그 콘텐츠에 대한 의견을 남기도록 함

기존 웹사이트 활용 신규 개발보다 구글이나 야후 활용

멀티미디어에 통일된브랜드 전략

신문, 웹, 모바밀 등을 하나의 브랜드로

종이신문을 보완하는 콘텐츠 기자 블로그에 취재 뒷이야기 등 게재

사진 강화 roanoke.com 사례

양질 동영상으로 넷케스트 제작 내셔널지오그래픽의 팝케스트 사례

기자에 블로그 제공 스타 기자로 육성

외부 관련 소스와 링크 링크 중요

개인화된 뉴스 제공 미국의 뉴욕타임스

독자와 소통 이용자를 정확하게 파악

태그 활용 인기있거나 중요한 태그를 한눈에 볼 수 있도록

라이트 버전 사이트 BBC와 같이 모바일 이용자 서비스

지역사회와 관련된 콘텐츠 확대 ireland.com 사례

웹을 콘텐츠 실험실로 활용 새로운 칼럼 실험 등

웹의 서브 페이지를 랜딩 페이지 같이 디자인

인터넷 내비게이션 중요

<표 1> 신문 웹사이트 업그레이드 전략

또한 바이빙 그룹은 미국의 100대 신문 웹사이트를 분석하여 보고서를 발

표하였다. 보고서의 주요 내용은 다음과 같다. 미국의 100대 신문 웹사이트 중

기자 블로그를 운영하는 곳은 93개사로, 오직 7개사만 제외하고 거의 모든 신

문 웹사이트가 기자 블로그를 운영하는 것으로 나타났다. 또 100대 신문 웹사

이트 모두가 RSS서비스로 기능을 갖추고 있었다. 독자가 제공하는 콘텐츠를

웹사이트에 수록하는 곳으로는 사진(이미지)을 수록하는 곳이 53개사, 동영상

이 18개사, 기사는 15개사에서 독자들이 직접 제공한 콘텐츠를 게재하는 것으

로 나타났다. 특히 독자들 댓글을 허용하는 곳이 75개사였고, 신문지면의 PDF

- 38 -

파일을 제공하는 곳은 57개사였다. 독자들 댓글 허용 사이트는 1년 전 33개사

에서 올해는 57개사로 크게 증가했다. 반면에 기사열람을 위하여 사이트 회원

가입을 요구하는 곳은 1년 전 29개사에서 올해엔 11개사로 감소하여 더 많은

독자들의 유입을 위해 장벽을 허무는 경향을 나타내었다.5)

<그림 2> 미국 100대 신문 웹사이트 분석

*출처: http://www.bivings.com/thelab/presentations/2008study.pdf

그러나 이러한 경향도 변화하고 있다. 웹 3.0, 개인화, 맞춤형 뉴스, 오픈 소

스, 스토리텔링, SNS, 집단지성, 멀티미디어 저널리즘, 비주얼을 강조한 그래

픽 뉴스, 앱 혁명, 스마트폰과 태블릿PC 등 새로운 미디어 플랫폼의 등장, 디

바이스에 따른 UI 환경의 최적화 등이 최근 온라인 뉴스의 키워드가 되고 있

기 때문이다. 또 정적인 뉴스가 동적인 뉴스로 변화되고 있다. 급변하는 미디

어 환경에서 뉴스 역시 제외가 아닌 것이다. 초반 온라인 뉴스는 지면 뉴스를

그대로 옮기기에 급급했다면, 기술의 발전으로 하이퍼링크나 검색 연동 등으

로 좀 더 다양한 뉴스를 볼 수 있었다. 그 단계를 넘어 현재는 각종 멀티미디

5) http://www.bivings.com/thelab/presentations/2008study.pdf

- 39 -

어 소스가 붙게 되어 링크가 아니라 한 곳에서 클릭 하나로 전체를 볼 수 있

는 간편하고 쉽게 심층화된 뉴스를 볼 수 있게 된 것이다.

2. 신문 웹사이트 디자인의 핵심 개념

신문 웹사이트 변화 방향을 고려하여 디자인에서 중요시되는 핵심 개념이

있다. 첫 번째 개념은 신문 웹사이트 디자인과 '상호작용성‘ 측면이다. 인터넷

과 모바일 미디어 환경에서의 웹사이트 디자인은 기존 신문이나 방송의 일방

향적 정보전달이 아니라 제작자와 수용자 간의 쌍방향 커뮤니케이션을 중요

한 개념으로 전제하고 있다. 쌍방향 커뮤니케이션은 수용자가 디자인이라는

요소를 일방적으로 인지하고, 인지된 정보에 의해 수동적으로 서비스를 제공

받고 반응하는 것이 아니라 수용자가 서비스의 주체가 되고, 서비스를 개인화

하여 소비하는 것을 의미한다. 즉 수용자가 서비스를 능동적으로 계획하고 제

시하며 요구하는 것이다(정면주․현지호, 2003).

웹사이트 디자인과 관련된 상호작용성 개념은 기존에 논의되어 왔던 일반

적인 상호작용성 개념과 기능적 측면에서 논의된 인터넷 뉴스 사이트의 상호

작용성 개념과 밀접하게 관련이 있다. 일반적인 차원에서의 상호작용성 개념

에서는 새롭게 등장하는 커뮤니케이션 매체들이 일정 정도의 상호작용성을

가지고 있다는 전제한다(김재영, 2002; Rogers, 1986). 여기에서의 상호작용성

은 대화를 나누고 있는 사람이 언제든 자유롭게 자신의 견해를 피력할 수 있

는 기술적 환경을 말한다. 이러한 상호작용적인 커뮤니케이션은 보다 정확하

고 효율적이며 참여자들에게 보다 큰 만족을 주기 때문에 모든 미디어가 우

선적으로 추구해야 할 가치에 속한다.

또한 인터넷 뉴스 사이트의 상호작용성 개념은 기능적인 측면에서 이용자

와의 관계 설정에 초점을 맞추어 정의된다. 즉 커뮤니케이션(언론사)과 이용자

(독자) 상호간에 커뮤니케이션 욕구나 반응을 확인하게 하거나 상호 커뮤니케

이션을 용이하게 하는데 초점이 맞추어져 있는 것이다. 이용자들과 언론사들

이 인지하고 있는 커뮤니케이션 욕구가 무엇인지에서 논의되는 인터넷 뉴스

사이트의 상호작용성은 크게 5가지 차원으로 설명된다(황용석․이홍철, 2000).

첫째는 이용자에게 즐거움을 충족시키는 것이다. 인터넷 뉴스 사이트를 통한

- 40 -

재미는 흥미있는 기사만으로 채워지는 것이 아니며, 이용자에게 얼마나 내적

인 이용동기를 유발하는가와 밀접하게 관련되어 있는 것이다.

둘째는 선택성 차원으로 이용자가 지각하는 통제력이다. 이용자가 뉴스사이

트를 내비게이션하는 동안 선택할 수 있는 옵션이 제한되거나 또는 기술적인

문제 등으로 이용하고자 하는 콘텐츠를 이용할 수 없게 되는 정도와 관련이

있는 것이다. 셋째는 연결성 차원으로 정보제공을 통한 실재감 제공이다. 인터

넷 뉴스 사이트는 하이퍼텍스트를 통해 외부세계와의 연결 창구가 된다. 달리

말해 외부세계와의 연결 창구가 뉴스라는 의미이며, 이용자들은 뉴스 사이트

를 통해 세상과 의사소통하게 되고 인터페이스 공간에서 실제 세계를 지각하

게 된다. 즉 인터넷 뉴스가 어떻게 정보를 연결시켜 놓았는가에 따라서 이용

자들이 지각하고 경험하는 실재감은 달라지고, 이는 이용자가 외부세계를 이

해하고 뉴스가 전하는 사실에 몰입하게 만드는 중요한 장치인 것이다.

넷째는 정보 수집 차원이다. 정보 수집은 커뮤니케이터의 일차적인 욕구이

다. 인터넷 뉴스 이용자들은 뉴스 사이트가 새로운 것에 대한 궁금증을 해결

해 줄 것으로 여긴다. 따라서 효과적인 정보제공은 자료에 대한 검색창을 제

공하는 것뿐만 아니라 이용자들이 뉴스 이용에서 정보 과다현상을 막기 위해

고객화 또는 개인화 서비스를 실시하는 것도 이용자가 시스템과 높은 정서적

교감을 경험하게 한다. 마지막으로는 상호간 커뮤니케이션이다. 인터넷 뉴스

는 이용자들의 반응을 즉각적으로 탐지할 수 있다. 즉 이용자들이 기자나 사

이트 운영자에게 의견을 전달할 수 있는 다양한 창구가 마련되어 있기 때문

에 이용자들의 패드백에 즉각적으로 반응하는 것은 이용자의 충성도를 높이

는 중요한 요소가 되는 것이다.

최근에는 지금까지 논의되어 온 상호작용성 개념에서 더 나아가 ‘생산적 상

호작용성’ 개념이 주목받고 있다. 웹사이트 디자인과 관련해서 생산적 상호작

용성은 웹사이트 제작자와 수용자와의 관계를 재구성하는 개념으로, 웹사이트

를 수용자들이 창조한 콘텐츠를 지원할 수 있는 의미있는 공간으로 만들어

웹사이트 제작자와 수용자의 관계를 제고하는 것을 의미한다. 생산적 상호작

용성은 웹사이트 디자인 차원(웹사이트 콘텐츠, 제시 방식)과 수용자 차원(콘

텐츠와 제시 방식에서의 수용자 조작성)에서 기존의 관점과 차별성을 보이고

있다(van Allen, 2004).

신문 웹사이트 디자인에서 중요시되는 두 번째 핵심 개념은 신문 웹사이트

- 41 -

디자인의 정보전달 효율성 측면이다. 이는 인터넷 환경에서의 효율적인 정보

전달을 새로운 저널리즘 모델로서 고려해야 한다는 것이다. 웹사이트에서의

디자인은 사용자들의 이해를 돕기 위한 정보전달의 도구이기 때문에 사용자

이용성의 보편화, 융통성있는 웹디자인, 간단하고 직관적인 사용성, 정보의 명

확한 전달, 사용자에 대한 세심한 배려 등의 기준이 고려되어한다는 것이다

(송승헌․기우서․김응곤, 2001).

세 번째 핵심 개념은 신문 웹사이트 디자인의 미학적 측면이다. 이는 새로

운 정보 디자인 미학을 고려해야 한다는 것이다. 웹사이트는 한 페이지에서

다른 페이지로 넘어가는 계단식 설계이기 때문에 신문 웹사이트는 각 페이지

마다 출처(누가), 타이틀(무엇을), 날짜(언제), URL(어디서) 등의 4가지 페이지

정보가 필수 요소이다. 또 신문 웹사이트 디자인은 일관된 디자인, 동일한 레

이아웃, 그래픽, 편집, 분류 체계 등을 통해 간결성과 일관성이라는 요소를 유

지해야 한다는 것이다(이용환, 1998).

마지막으로 네 번째 개념은 내비게이션 측면이다. 언론사 웹사이트의 성공

여부가 결정되는 것이 가장 중요한 측면이 바로 내비게이션 디자인이다. 내비

게이션 디자인은 정보 공간 안에서 원하는 정보를 찾기 위해 현재의 위치에

서 다음의 위치로 이동하는 행위, 즉 사용자가 정보공간을 항해하는 과정을

의미한다. 넓은 의미로는 전체 시스템을 이해하는 과정이라고 할 수 있다(오

은석, 2007). 웹사이트 내비게이션 디자인은 효율적인 항해 도구를 제공함으로

써 사용자가 원하는 정보를 좀 더 쉽고 빠르게 찾을 수 있게 도와주는 방법을

개발하는 것을 의미한다.

내비게이션 디자인은 웹사이트를 이동하는데 필요한 여러 가지 구성요소를

적절히 고려하고 배치하여 사용자가 쉽게 이용할 수 있도록 하는 것이 중요

하다. 내비게이션 디자인은 세 가지의 목표를 가지고 있다. 첫째, 사용자들에

게 사이트의 한 지점에서 다른 지점으로 이동할 수 있는 모든 수단을 제공해

야 한다. 둘째, 내비게이션 디자인은 그것이 담고 있는 요소들 사이의 관계를

소통해야 한다. 셋째, 내비게이션 디자인은 사용자가 현재 보고 있는 페이지와

그 콘텐츠들 사이의 관계를 소통시켜야 한다.

내비게이션 디자인의 유형은 크게 2가지로 구분된다(오은석, 2007). 첫째는

글로벌 내비게이션(Global Navigation)으로 사이트 전체를 광범위하게 볼 수

있게 한다. 글로벌이라는 말은 내비게이션이 사이트의 모든 페이지에서 나타

- 42 -

난다는 점을 의미하는 것이 아니라 사용자들이 사이트의 한쪽 끝에서 다른

쪽 끝으로 이동하는데 필요한 핵심 접근 지점들을 함께 보여준다는 것이다.

즉 글로벌 내비게이션은 사이트의 전체적인 차원에서 이동을 돕는 시스템이

며, 최상위 레벨 간의 이동과 하위 항목으로의 이동을 가능하게 한다.

둘째는 로컬 내비게이션(Local Navigation)으로 사이트의 규모가 방대하고

복잡한 경우에 서브 카테고리로 나누어 서브 사이트 안에서 글로벌 내비게이

션 시스템을 역할을 하는 것이다. 로컬 내비게이션은 글로벌 내비게이션이 방

대해지고 복잡해지는 문제점을 보완해주며, 사용자에게 필요 없는 정보를 배

제해주는 역할을 하여 보다 빠른 페이지 간의 이동을 돕는다.

웹사이트의 내비게이션 디자인은 최근 웹 2.0 시대에서 웹 3.0 시대로 접어

들면서 더욱 더 중요성이 부각되고 있다. 즉 이용자 중심의 인터넷 환경이 이

용자의 욕구에 부합되는 디자인의 필요성을 가져오게 하면서, 과거 논의되어

왔던 웹사이트의 내비게이션 기능이 더욱 중요시되고 있는 것이다.

3. 국내외 신문 웹사이트 디자인 연구 동향

1) 신문 웹사이트 디자인에 관한 외국 연구

앞서 언급했듯이 외국에서는 신문 웹사이트 디자인 개선과 재디자인을 위

한 다양한 실무적 논의(The Society for News Design Journal, Nieman

Reports, Online Journalism Review, WAN report)가 활발하게 진행되고 있

다.6) 실무적 차원의 논의뿐만 아니라 온라인상의 뉴스 사이트 디자인의 기본

철학과 목표에 대한 근본적인 고민도 제기되고 있다. 뉴스의 올드 모델은 이

미 사라졌지만, 뉴스 비즈니스의 핵심적 원리는 인터넷 시대에도 여전히 유효

하다는 것이다(Niles, 2008). 실례로 LA타임즈 사이트에서 파격적인 사진(‘I

6) http://www.ojr.org/ojr/technology/1088538463.php

http://www.smashingmagazine.com/2008/11/11/newspaper-website-design-trends-and-examples

http://www.newspaperwebdesign.com

http://portal.acm.org/citation.cfm?id=274644.274649&type=series

http://www.nieman.harvard.edu/reportsitem.aspx?id=102097

http://www.ojr.org/ojr/stories/060409nile92030728EB?contentType=Article&hdAction=lnkhtml&contentId=863762

- 43 -

Can Has Cheezburger kitten’)을 홈페이지에 싣고, 독자들의 시선을 끄는데

성공했지만, 실제로 웹사이트의 신뢰성이나 일관성에 대한 인식에는 부정적

효과를 미쳤다는 것이다. 독자들은 늘 찾는 그 자리에 일관성있는 뉴스 기사

나 그 밖의 요소들이 배치되기를 기대한다는 것이다.

이와 함께 웹사이트 디자인은 바로 저널리즘의 기본 가치, 즉 “무엇이 당신

을 세상에서 중요성을 갖게 하고, 의의(의미)를 갖게 하는가“를 고려해야 한다

는 주장도 제기되고 있다. 프로페셔널리즘, 신뢰성, 그리고 독자에의 의무 등

이 인쇄신문의 가치라면, 그것은 인터넷 뉴스 사이트에서도 동일하다는 것이

다. 실제로 어떤 사람이 인터넷상에서 특정 신문 사이트를 방문하는 것은, 오

랜 세월 쌓아온 그 매체에 대한 믿음과 신뢰 때문이라고 볼 수 있는 것이다.

또한 온라인 신문의 목표는 인쇄신문과 마찬가지로 사회에 의미를 가져야

한다. 그러기 위해서는 이미 갖고 있는 가치와 강점을 웹으로 전환해야 한다.

최근의 뉴스 산업에서는 인터넷 세상에서의 해결책으로 다음을 제시한다. “히

트수를 늘이기 위해서는 매우 상호작용적이어야 한다. 홈페이지의 눈에 잘 띄

는 곳에 비디오를 부각시켜야 한다. 이것은 어떤 언론사가 현대적이고, 눈을

끄는 웹사이트를 원할 때는 맞는 말이다.” 과거에는 신문사 웹사이트가 인쇄

판의 복사판이라는 것이 문제였지만, 최근의 문제는 그 정반대이다. 모든 신문

사들은 신문사가 인터넷에 전형적인 요소들을 섞어야 한다고 생각한다. 결과

적으로 언론사의 퍼스낼러티를 잊어버리고 서로 상호복제하게 되었다. 모든

언론사는 그 자신의 정체성과 퍼스낼러티를 갖고 있다. 이것을 최대한 살리는

것이 바로 웹상의 무수한 경쟁자들 속에서 살아남는 방안이 될 수 있다는 것

이다.

일반적으로 성공적이라고 평가받는 웹사이트들은 그 전략이 매우 명확하다.

시겔(Sigel, 1999, 전양덕, 2001에서 재인용)은 성공한 웹사이트들은 4가지의

전략적 가치(stragetic value)와 4가지의 전술적 가치(tactical value)를 모두 지

니고 있다고 한다. 전략적 가치는 장기적인 관점에서 매우 중요한 개념으로

브랜딩, 충격과 새로움(impact & news), 고객과 커뮤니티(audience &

community), 경쟁력(competitive) 등으로 설명된다. 브랜딩은 기업 및 제품의

아이덴티티를 나타낼 뿐만 아니라 사용자로 하여금 어떤 특정 사이트에 이미

들어와 있다는 것을 분명하게 인지할 수 있게 해주어야 한다. 충격과 새로움

은 사람들에게 이야기 거리를 제공하게 된다. 늘 다양하고 신선한 뉴스거리가

- 44 -

있다면 지속적으로 새로운 방문자가 찾아온다. 고객과 커뮤니티는 한 사이트

가 특정 고객들을 만족시킬 수 있는 능력을 반영한다. 경쟁력은 기업을 경쟁

의 선두에 서 있게 한다. 만약 새로운 경쟁사가 좀 더 매력적인 것을 가지고

기존의 고객 그룹에 접근한다면, 당장 사이트의 질을 더 높이는 방어 작전을

사용해야만 한다는 것이다.

전술적 가치는 당장 주목을 끌 수 있는 개념으로 디자인(design), 콘텐츠

(content), 제작(production), 유용성(utility) 등으로 설명된다. 디자인은 디자인

과 방문자들의 관심사에 대한 감각을 지닌 디자이너가 사이트의 목표를 시각

적으로 전환시켜내는 것을 의미한다. 콘텐츠는 웹에 실을 수 있는 준비된 콘

텐츠를 의미한다. 제작은 웹 프로그래밍과 그래픽 작업을 수행하는 사람들이

새로운 시대의 새로운 디자인 원리를 이해하고 있어야 함을 의미한다. 마지막

으로 유용성은 방문자가 사이트에 들어와서 사거나 또는 팔거나 혹은 주문서

를 작성하는 것 등과 같은 작업을 매끄럽게 수행할 수 있어야 한다는 것이다.

즉 사이트가 즉각적으로 반응하고, 문제를 해결해 주고, 모든 하이퍼링크들이

정상적인 작동을 하고 있어야 한다는 것을 의미한다. 이러한 웹사이트의 전략

적 가치와 전술적 가치는 신문 웹사이트에도 매우 중요한 개념으로 받아들여

지고 있다.

이러한 웹사이트의 일반적인 전략, 전술과는 달리 웹사이트의 디자인과 관

련해서는 보다 다른 관점을 고려해야 한다는 주장이 있다. 노먼(Norman,

2001)은 어떤 종류의 메커니즘이든 잘 디자인된 인터페이스에는 제품을 쉽게

사용해주는 디자인 원칙이 구현되어 있다고 하였다. 좋은 디자인이란 작업수

행에 필요한 단서들을 제공하는 믿음직하고 효율적인 중개자라고 할 수 있으

며, 이 경우 디자인의 겉모습이 평범하다거나 아니면 지나치게 기교를 부렸다

거나 하는 것 등은 문제가 되지 않는다는 것이다. 사실 인터페이스 디자인 자

체가 주의를 끄는 경우는 대체로 사용자가 원하는 인터페이스가 제대로 작동

하지 않을 때이다. 반면에 사용자들이 제품을 사용하면서 인터페이스 디자인

의 존재 자체를 별로 느끼지 못했다면 이것을 이상적인 디자인이라 간주하며,

이와 같은 디자인을 ‘보이지 않는’(invisibility) 디자인이라고 부른다. 결국 ‘보

이지 않는’ 디자인이란 사용자가 제품을 사용하면서 아무런 어려움을 느끼지

않는 좋은 디자인을 의미하는 것이다.

그러나 신문 웹사이트는 이러한 디자인보다 정보라는 관점을 고려해야 한

- 45 -

다는 주장도 있다. 플레밍(Fleming, 1998)은 웹사이트에서 다루어지는 콘텐츠

의 정보 유형을 그 성격과 목적에 따라 아이덴티티(Identity) 정보

(Information), 엔터테인먼트(Entertainment), 학습(Learing), 쇼핑(Shopping), 커

뮤니티(Community)의 6가지로 분류하였다. 아이덴티티 유형은 사전적으로 동

일함, 주체성, 독자성 등의 의미를 가지는데, 여기에서는 홍보와 소개의 목적

을 우선으로 하는 정보를 의미한다. 기업, 학교, 기관, 단체, 개인 등의 홈페이

지가 여기에 속하며, 사용자에게 대상의 어떤 이미지를 어떻게 심어줄 것인가

가 중요한 문제이다. 사용자들이 아이덴티티 사이트를 방문하는 목적으로는

대상에 대한 기본적인 이해, 원하는 서비스가 제품에 대한 정보 획득, 대상과

의 연락방법 탐색 등이 있다. 홍보를 목적으로 하는 아이덴티티는 사용자들에

게 강한 인상을 심어줄 수 있으므로 단순한 홍보가 아닌 직접 경험을 할 수

있도록 다른 유사한 정보의 사이트와 차별화를 두어야 효과적인 결과를 얻을

수 있다.

정보 유형은 정보 자체를 다루는 사이트로서 다른 사이트에 비해 방대한

양과 광범위한 분야의 정보를 전달한다. 여기에는 뉴스, 미디어, 검색엔진, 각

종 정보제공 사이트가 속한다. 즉각적으로 신속한 정보를 전달해야 하는 뉴스,

신문, 방송 사이트뿐만 아니라 오랜 전부터 현재에 이르기까지 모든 자료들을

저장하여 데이터베이스 형태로 서비스하는 박물관, 도서관, 기타 관련 정보제

공 사이트까지 모두 이 유형에 포함된다.

엔터테인먼트 유형은 일반 사용자들이 가장 선호하여 사회적으로 점차 그

중요도가 높게 인식되고 있다. 이 유형은 웹 콘텐츠에서 오락, 연예, 게임, 스

포츠, 영화, 패션, 레저, 취미, 음악 등의 정보를 다루는 사이트를 말한다. 여기

에는 온라인상에서 직접 게임을 하거나 음악을 들으며 즐길 수 있는 사이트

뿐만 아니라 영화, 공연정보를 제공하거나 스포츠를 중계하는 성향이 강한 사

이트도 포함된다.

학습 유형은 사이버 교육 가운데 웹을 기반으로 하는 각종 온라인 학습을

의미한다. 웹에서 텍스트, 이미지, 사운드, 동영상 등의 다양한 형태의 정보를

모두 지원하며 시공간의 제한이 없고 사용자와 상호작용을 기본으로 하기 때

문에 이상적인 교육적 미디어로 사용될 수 있다. 사이버 대학이나 온라인을

통해 교육을 하는 사이트들이 있다.

쇼핑 유형은 웹에서 이루어지는 전자상거래를 의미하는 것으로 각종 전문

- 46 -

인터넷 쇼핑몰이나 온라인 판매를 포함한다. 최근 인터넷을 통해 활발하게 이

루어지고 있는 쇼핑몰은 제품을 생산하는 회사나 일반 기업체도 자사의 제품

을 자사의 홈페이지에서 직접 판매하는 경우가 증가하고 있다. 또 전문적인

쇼핑몰을 통해서 세분화하여 사용자층을 확대하고 있다. 커뮤니티 유형은 웹

에서 형성되는 네티즌 간의 각종 공동체나 소모임을 의미하는 것으로 PC통신

에서 일반화된 동호회의 개념과 같다. 가상공간에서의 커뮤니티 형성은 사회

적으로도 많은 이슈가 되고 있을 만큼 중요한 대상으로 자리잡았다.

이러한 유형 중에서 신문 웹사이트는 정보 유형에 가장 가깝다고 할 수 있

다. 즉 웹사이트에서는 텍스트, 오디오, 비디오 등 모든 정보 표현 형식들이

디지털 코드로 단일화되어 이용자들에게 멀티미디어로 통합된 환경을 제공해

줄 수 있음에도 불구하고 신문사들은 오프라인 상의 콘텐츠를 온라인으로 단

순 재송신하는데 그치기 때문에 신문사의 웹사이트는 텍스트 위주의 정보가

지배적으로 게재된다.

이러한 점은 미국의 3대 주요 일간지 웹사이트에서 활용된 디자인과 그래

픽을 분석한 리(Li, 1998)의 연구에서 확인되었다. 즉 신문사들은 온라인으로

뉴스 정보를 제공할 경우에도 사진이나 그래픽보다는 텍스트 형태를 우선하

는 경향을 보였으며, 이는 신문 웹사이트가 정보를 중심으로 이루어지는 웹사

이트 유형이라는 점을 반증한다. 따라서 신문 웹사이트는 정보성이라는 측면

이 가장 중요시 될 수밖에 없다는 것이다.

그러나 최근 SNS 등으로 급격하게 웹 환경이 변화하면서 상호작용성이라는

개념이 중요하게 논의되고 있다. 매시와 레비(Messy & Levy, 1999)는 아시아

지역에서 발행되는 종합일간지 가운데 영문으로 된 뉴스정보를 온라인으로

제공하는 44개의 웹사이트를 대상으로 이들의 상호작용 정도를 내용 분석하

여 그 결과를 제시하였다. 우선 뉴스정보를 제공하는 웹사이트의 상호작용 유

형을 제공되는 정보 분야의 범위, 독자들의 질문에 대한 기자들의 반응, 독자

가 자신의 의견을 개진할 수 있는 정도, 독자들 간의 토론을 유발하는 장치,

즉각적인 정보제공 등 5가지 차원으로 구분하였다. 이 요소들이 연구 대상인

웹사이트를 통해 어느 정보 구현되고 있는가를 분석한 결과, 모든 사이트들은

첫 번째를 제외한 다른 4차원의 상호작용에서 기대에 훨씬 미치지 못했다는

것이다.

챈옴스테드와 박(Chan-Olmsted & Park, 2000)도 텔레비전 방송사 웹사이트

- 47 -

300개를 표본으로 이들의 내용과 구조를 분석하여, 상호작용성이 분석대상 사

이트들을 통해 두드러지게 나타나지 않았다고 밝혔다. 즉 전체 사이트의 9.7%

가 토론방 혹은 게시판, 9%가 채팅서비스, 35%가 피드백 장치, 4.3%가 온라인

서베이, 6.3%가 뉴스 도움말을 제공하고 있다는 것이다. 이러한 조사결과를

토대로 텔레비전 방송사들은 사이트 이용자들의 상호작용을 돕는 메커니즘을

구축하는 대신 오프라인으로 방영된 자신들의 기존 콘텐츠를 단순 재가공해

온라인으로 내보내는 소극적인 방식으로 새로운 미디어 환경을 맞이하고 있

다고 결론지었다.

슐츠(Schultz, 2000)는 뉴욕타임즈를 사례로 삼아 전자우편을 통한 독자와

기자들 간의 상호작용과 온라인 포럼을 경유한 독자들 간의 상호작용을 분석

하였다. 연구 결과, 상호작용을 용이하게 하는 두 인터넷 서비스가 실제로도

충분할 정도로 활용되고 있지 않았다. 또 온라인으로 뉴스정보를 제공하는

100개 미국 종합일간지 웹사이트가 전자우편, 채팅, 여론조사, 토론방, 퀴즈,

디지털엽서, 가상투어 등으로 구성된 상호작용 장치를 어느 정도 구비하고 있

는가를 내용분석 하였다. 분석 결과, 기존 신문사들은 인터넷 채택으로 창출된

독자와의 상호작용 기회를 적극적으로 살리지 못하고 있는 것으로 나타났다.

이러한 연구들은 상호작용성의 중요성에 주목하고는 있지만 대부분 신문

웹사이트의 상호작용이 부족하다는 결론을 내리고 있어, 최근의 신문 웹사이

트들이 상호작용성의 중요성을 인식하여 변화하고 있는 트렌드를 구체적으로

검토하고 있지 않았다. 이러한 관점에서 상호작용성 개념 뿐만 아니라 기존

연구들에서 검토되어왔던 개념들을 중심으로 최근 변화하고 있는 신문 웹사

이트 디자인에 대한 구체적이고 실증적인 분석이 필요할 것이다.

2) 신문 웹사이트 디자인에 관한 국내 연구

국내에서는 인터넷의 특성을 고려하여 신문 웹사이트의 내용을 분석하는

연구들(김재영, 2002; 최낙진, 1999)과 웹사이트 디자인 요소에 대한 분석을 행

한 연구들(이용환, 1998; 송승헌․기우서․김응곤, 2001; 오은석, 2007; 정면

주․현지호, 2003; 황용석․이홍철, 2000)이 지속적으로 이루어져 왔다. 내용적

측면에 대한 연구들은 신문 웹사이트가 인터넷의 상호작용성을 구현하고 다

양한 정보를 제공할 수 있을 것이라는 가정 하에 신문사 웹사이트의 가능성

- 48 -

을 논하고 있다. 하지만 신문사가 오프라인에서 제공하는 뉴스정보를 온라인

에 적합한 포맷으로 바꾸어 재송신하는 차원에 그치고 있어 인터넷의 기술적

특성인 상호작용성과 멀티미디어를 효과적으로 활용하지 못하고 있다고 결론

짓거나, 신문 웹사이트를 평가하는 수준에 그치고 있다. 달리 말해 국내 연구

들은 실제 뉴스 소비자들이 직접적으로 접하게 되는 신문 웹사이트 디자인의

중요성을 고려하지 않고, 웹사이트의 기사 구성 방식 등의 내용이나 디자인

요소를 중심으로 분석하여 신문사 웹사이트의 가능성을 부정적으로 언급하고

있다.

대표적으로 최낙진(1999)의 연구는 국내 3개 인터넷신문의 웹 페이지 디자

인과 그래픽 사용방법에 대한 내용분석을 통해 국내 인터넷신문의 커뮤니케

이션 특성을 고찰하였다. 이를 통해 인터넷신문들이 전통적 인쇄신문 출판 규

칙에서 새로운 미디어시대의 새로운 매체로 어떻게 변화하고 있는지와 그 과

정에서 문제점은 무엇인지를 살펴보았다. 이 연구는 조선일보, 중앙일보, 한겨

레신문 등 3개 인터넷신문을 대상으로 홈페이지 및 정치 섹션 첫 화면에 해당

하는 프론트 페이지의 헤드라인 및 뉴스 기사를 웹사이트로부터 추출하여, 분

석하였다. 그 결과, 인터넷신문이 사진 및 그래픽 정보보다는 문자텍스트 정보

제공에 치중하고 있었다. 또 눈에 띄는 그래픽은 뉴스 기사 페이지보다는 홈

페이지나 프론트페이지에 더 많이 분포하는 경향이 있었다. 그리고 인터넷신

문이 뉴스기사를 설명하기 위해서 큰 사진과 그래프를 별로 사용하고 있지

않았다. 마지막으로 상호연결된 뉴스링크, 상세 기사, 그리고 관련 정보가 몇

개의 단계(클릭)를 통해 검색되는 경향이 있다는 것은 제한적으로 나타났으며,

검색된 정보가 본래의 뉴스 내용의 범위를 넘어서고 있지 않았다. 이러한 결

과는 국내 인터넷신문의 웹페이지들의 뉴스콘텐츠는 문자 텍스트 정보를 위

주로 되어 있었으며, 국내 인터넷신문의 상호작용적 모델이 극히 제한적으로

적용된다는 의미를 보여주었다.

김재영(2002)의 연구는 인터넷 뉴스미디어 발달에 대한 파블릭의 3단계 모

델을 사이트 유형과 접목시킴으로써 인터넷 기술의 실제적인 활용조건을 검

토하였다. 이를 통해 인터넷 뉴스 사이트가 파블릭의 주장처럼 진화론적 차원

에서 선형적으로 발전하는지, 아니면 그 유형에 따라 발전단계를 달리하면서

상이한 수준의 사이트가 공존하는지를 설명하고자 하였다. 이를 위해 이 연구

는 신문사, 방송사, 독립사이트들이 상호작용기제를 구축하고 멀티미디어 정

- 49 -

보를 제공하는데 차이를 보일 것이라고 가정하였다. 분석 결과, 이러한 가정은

지지되지 않았으며, 이는 파블릭의 선형적 진화론을 뒷받침하고 있다고 결론

지었다. 특히 이 연구에서는 인터넷 뉴스 사이트의 상호작용성을 측정하기 위

해 담당기자에 대한 전자우편 링크, 채팅, 자유게시판, 언어․형식 등의 선택,

질의 및 응답, 여론조사, 검색, 기사에 대한 의견제시, 기사에 대한 메일링서비

스, 토론방, 기사내용에서 다른 정보로의 하이퍼링크, 관련기사 및 정보 하이

퍼링크 등을 유목으로 설정하여 분석함으로써 상호작용성을 심층적으로 분석

하였다.

정면주와 현지호(2003)의 연구는 웹 환경 내에서의 디자인에 대해 고찰하였

다. 이 연구에서는 웹 인터페이스 디자인은 인간의 지각능력과 인지과정에 중

점을 두고 디자인되어야 하며, 이러한 디자인을 개발하는 과정에서는 일관성,

예측성, 가시성, 피드백의 중요성 등의 인터페이스 디자인 요소가 고려되어야

한다고 밝히고 있다. 이 중에서는 일관성은 인터페이스 디자인에서 우선적으

로 고려되어야 할 사항이며 모든 디자인의 요소를 일관되게 적용된다. 내비게

이션의 폭이 넓고 깊이가 있을 경우, 더욱 더 초기화면에서부터 레이아웃과

콘텐츠의 구성 원리, 아이콘, 컬러 등이 동일한 방식으로 일관되게 적용되어야

쉽고 편리하게 사용자를 유도할 수 있다. 다음으로 예측성은 인터페이스가 사

용자의 심성 모델(mental model)을 고려하여 디자인되어야 하며, 사용자가 인

터페이스의 기능을 예측하고 짐작이 가능한 기능들로 이루어져야 한다는 것

이다. 그리고 가시성은 디자인 요소가 가시성을 확보해야 하며, 그 기능을 분

명하게 드러내야 한다는 것이다. 특히 버튼과 같은 인터랙션 기능이 강한 요

소는 더욱 더 명백한 가시성을 위한 시각적 요소를 지녀야 한다. 마지막으로

피드백의 중요성은 버튼을 누르면 음영과 색채가 변화되거나 적합한 사운드

로 반응할 경우, 사용자는 신속한 반응에서 자신의 행위에 대한 확신을 가지

게 된다는 것이다.

또한 웹사이트 디자인은 효율적인 커뮤니케이션을 위해 크게 3가지를 고려

하여야 한다고 강조한다. 첫째는 레이아웃 디자인이다. 레이아웃이란, 사진, 문

자, 그림, 기호 등의 여러 가지 구성요소가 가지고 있는 의도를 사용자가 쉽게

이해할 수 있도록 효과적으로 배열하는 것을 의미한다. 레이아웃은 주목성, 가

독성, 명쾌성, 창조성 등이 충분히 고려되어야 하며, 새로운 공간이 될 수 있

도록 종합적인 구성력과 능력도 요구된다. 조합에 있어서는 각 구성요소의 독

- 50 -

자적인 역할과 함께 전체로서의 통일된 질서 감각이 있는 레이아웃이 될 수

있도록 시각적인 효과도 고려하는 것이 중요하다. 그리고 웹사이트의 디자인

에서 유사 정보들을 어떻게 단위별로 구성을 하느냐의 문제는 정보전달의 효

율성을 고려할 때도 매우 중요한 요소에 속한다.

둘째는 웹사이트의 통일성을 유지해야 한다는 것이다. 이는 웹사이트 제작

시 기본적인 사항으로 처음에 계획되었던 디자인의 탬플릿을 기본으로 서브

페이지 모두에서 적용시키는 것을 의미하지는 않는다. 레이아웃 뿐만 아니라

여러 요소에서 일관성을 유지해야 한다는 것이다. 폰트는 한 사이트를 제작하

는데 있어서 기본적으로 3가지 이상이 사용되는 것이 바람직하지 않으며, 전

체의 텍스트가 적용될 폰트 한가지와 그래픽 요소로서 적용되는 이미지 폰트

두 종류 정도로 폰트의 상용범위를 축소해야만 혼란을 막고 단정한 디자인을

할 수 있다. 버튼의 경우도 많은 제작자가 분업의 형태로 한 사이트를 제작하

는 이유로 어필하는 시각요소는 더욱 더 통일화 작업이 필요하다는 것이다.

마지막으로 시각 커뮤니케이션 도구로서 아이콘(Icon)과 일러스트레이션

(Illustration)의 활용이다. 아이콘은 인터넷 웹 사이트에서 의미나 내용을 전달

하거나 주의를 주는 요소를 함축적으로 그림이나 그래픽으로 표현하는 것을

의미한다. 문자를 읽는 것보다 단시간에 상황을 파악할 수 있는 보고 판단하

는 직감적인 시각언어의 필요성에 의해서 아이콘을 활용하게 된다. 아이콘은

공통 언어로서의 기능을 가질 수 있을 정도로 직감적이고 효과적이다. 또 문

자가 아닌 시각커뮤니케이션 방법으로 일러스트레이션의 활용도 중요하다. 일

러스트는 아이콘보다는 좀 더 설명적이며 문자보다는 직관적이다. 어떤 경우

내용을 설명하는데 있어서 문자의 장황한 배열보다 한 두 컷의 일러스트 상

황을 모두 정리할 수 있는 것도 있다. 신속하게 접근하여 직관적으로 서비스

를 이해하고 참여하게 한다는 점에서 아이콘과 일러스트의 필요성이 강조되

고 있는 것이다.

정면주와 현지호(2003)의 연구는 웹사이트 디자인에 대해 시각적 요소를 중

심으로 다양한 설명을 제공하고 있다. 그러나 본 연구의 대상인 신문 웹사이

트에 대한 보다 구체적인 심층적인 분석이 부족하다는 제한점을 가지고 있었

다. 그러나 이용환(1998)의 연구는 웹 페이지 디자인에 대한 연구를 국내 3대

일간지 웹페이지 구성을 통해 실제적이고 구체적인 분석을 제공하고 있다. 이

연구에서는 웹디자인, 즉 인터페이스 디자인에서 강조되어야 할 점이 사이트

- 51 -

에 대한 명확한 이해, 명확한 이동 통로, 접속 대기, 간결성과 일관성, 웹페이

지의 크기와 모니터 사이즈 등이라고 하였다. 이 중에서 간결성과 일관성은

다른 연구들에서 공통적으로 지적되어 온 요소이다.

즉 웹페이지 디자인에 있어 간결성과 일관성이 유지되어야 한다는 것이다.

이용자들이 사이트에 들어와서 선택을 통해 감상을 하는데 혼돈이 될 수 있

기 때문이다. 특히 국내 웹페이지들은 지나치게 많은 장식을 하여 혼란스럽게

하는 경향이 있으나 외국 우수한 사이트들은 간단한 디자인과 일관성을 통일

하여 이용자들이 각기 버튼을 보고, 암시적으로 여기에는 무엇이 있을 것이라

고 상상할 수 있어 이용자들의 사용 편이를 도모하고 있다는 것이다. 달리 말

해 웹페이지의 최고 기능성과 명료성은 각 단위마다 일관된 디자인, 동일한

레이아웃 선들, 그래픽 요소들, 편집적인 전통들, 조직의 분류체계 위에서 만

들어질 수 있다는 것이다.

이 연구는 이러한 웹페이지 구성요소 틀에 따라 프레그 디자인, 바 이미지,

텍스트 버튼, 모니터와 웹페이지의 사이즈, 섹션 버튼, 사진의 사용과 정보의

출처 등으로 3대 일간지의 웹사이트 디자인을 분석하였다. 그 결과, 국내의 3

대 일간지의 웹페이지는 상당한 진보가 있었다고 평가하고 있다. 특히 조선일

보가 이용자들이 가장 보기 편한 구조를 가지고 있었기 때문에 다른 신문사

의 웹 페이지들도 이러한 구조를 따라가고 있다고 하였다. 그러나 비슷하다는

점으로 인해 각기 신문사의 고유의 특성들이 드러나지 않는다는 단점이 있었

다고 밝히고 있다.

이용환(1998)의 연구는 다른 연구들에 비해 매우 구체적으로 각 신문 웹사

이트를 분석하고 있었지만, 국내 신문 웹사이트들이 2000년대 들어 급속도로

변화하였다는 점을 감안한다면, 현재의 신문 웹사이트 디자인 변화 추세와는

일치하지 않는 경향이 있었다. 따라서 최근의 국내외 신문 웹사이트 디자인의

변화 양상을 살펴보고, 이러한 웹사이트 디자인의 변화 양상을 디자인 트렌드

와 재디자인 측면에서 고려하여 보다 구체적이고 실증적인 분석이 필요할 것

이다.

- 52 -

Ⅲ. 국내외 신문 웹사이트 디자인 트렌드

1. 외국 신문 웹사이트 디자인 트렌드와 사례(Best Design)

1) 외국 신문 웹사이트 디자인 변화 동향

폴과 루엘(Paul & Ruel, 2007)은 지난 10년 동안 미국 뉴스 웹사이트의 변

화 동향을 크게 세 가지 키워드로 언급하고 있다. 첫째는 사운드 슬라이드, 오

디오 슬라이드쇼와 같은 기술(소프트웨어) 발전에 힘입은 ‘멀티미디어’ 실험이

계속적으로 확대되고 있다는 것이다. 둘째는 협동적 저널리즘(collaborative

Journalism)으로 ‘우리가 함께 만드는 미디어’(We Media)라는 개념이 전통적

주류 신문사의 안과 밖에서 확산되고 있다는 것이다. 셋째는 개인화된 뉴스

채널로 RSS 등은 뉴스의 대형 유통에서 개인화된 뉴스 채널 배달형태로 변해

가고 있다는 것이다.7) 이와 함께 개별 기사에서의 실험도 계속되고 있다고 한

다. 슬라이드쇼는 음악이 배경으로 깔린 플립북(flipbook) 스타일로 보여 지고,

시리즈 기사의 패키징은 다양한 미디어 요소로 구성되어 더 깨끗하고 더 우

아하게 디자인되고 있다. 또 플래시와 구글 맵 인터페이스는 데이터와 정보로

사용자를 내비게이트 할 수 있게 되어가고 있다.8) 최근 외국 웹사이트의 디자

인 트렌드를 몇 가지 주요 요소로 설명하면 다음과 같다.9)

7) 주어진 토픽에 관한 뉴스 기사에 부가정보를 가미한 Seattle P-I's Transportation 페이지나

Lawrence Journal-World의 Legislation 페이지 등은 공동체의 정보와 통합하여, 변화하는 뉴

스 웹사이트의 좋은 사례들로 제시되고 있다.

8) 플립북의 예는 MSNBC의 ’Iraqi Kurdistan'이며, 기사 패키징의 예는 Florida Today의

Orphans & Angels 기사 등이며, 플래시와 구글맵 인터페이스의 예는 AZ Star's Selling

Our Border의 상호작용적 지도와 Boston Globe의 캠페인 관련 지도 등이 있다.

9) http://www.smashingmagazine.com/2008/11/11/newspaper-website-design-trends-and-examples

- 53 -

(1) 컬러 도표(color scheme)

대부분의 뉴스웹사이트는 흰색 배경에 어두운 텍스트를 사용한다. 웹사이트

는 방대한 양의 내용을 다루게 되기 때문에 가독성이 매우 중요하다. 많은 뉴

스 웹사이트는 푸른색과 붉은색을 텍스트에 많이 사용한다. 특히 푸른색은 헤

드라인, 기사 제목, 링크 등에 주로 사용된다. 붉은색은 강조되는 색상으로 사

용된다. 예를 들면, LA타임즈는 보편적인 컬러 도표를 사용하고 있다.

<그림 3> LA Times

*출처: http://www.latimes.com

(2) 헤더(Header)와 사이드바(sidebar) 배너

모든 웹사이트는 수입을 창출해야 한다. 헤더에 배치된 배너 광고는 주요

수입원이다. 어떤 웹사이트는 전 페이지에 배너 광고를 사용하기도 하고, 다른

웹사이트는 홈페이지에서는 배너를 사용하지 않고, 기사 페이지의 헤더에 배

치하기도 한다. 블로그는 일반적으로 125x125 픽셀 광고를 사이드 바에 사용

한다. 뉴스 웹사이트에서는 보통 300x250 픽셀의 배너나 대형 배너를 배치하

- 54 -

기도 한다. 많은 웹사이트는 텍스트 링크 광고를 사용한다. 예를 들면, 텔레그

라프는 730x90 픽셀의 광고를 헤더 위에 배치하고 있다.

<그림 4> Telegraph

*출처: http://telegraph.co.uk

(3) 주요 내비게이션(Navigation)

대부분의 뉴스 웹사이트는 주요 내비게이션 메뉴를 헤더와 콘텐츠 사이에

배치한다. 그러나 뉴욕타임즈나 MSNBC는 메인 내비게이션을 왼쪽 사이드바

에 배치하는 예외적인 형식을 보이기도 한다. 예를 들면, 뉴욕데일리뉴스는 2

단짜리 내비게이션 메뉴를 사용한다.

- 55 -

<그림 5> New York Daily News

*출처: http://www.nydailynews.com

(4) 색인화된 콘텐츠 영역(Tabbed Content Area)

많은 뉴스 웹사이트는 방문자가 인기 기사, 최근 기사, 가장 많이 평이 달린

기사를 볼 수 있도록 색인화된 콘텐츠 영역을 사용한다. 색인화된 콘텐츠가

사이드바에 나오는 뉴스 웹사이트가 있지만, 대부분의 뉴스 웹사이트의 색인

화된 콘텐츠는 주요 기사란에 나오기도 한다. 이는 콘텐츠와 링크에 대한 사

용자들의 더 많은 자율권(결정권)을 부여하고, 더 많은 내용물에 접근할 수 있

게 공간을 절약하게 된다. 예를 들면, 와이어드는 색인화된 콘텐츠를 주요 기

사란에 배치한다.

- 56 -

<그림 6> Wired

*출처: http://www.wired.com

(5) 그리드에 기초한 레이아웃(layout)

대부분의 뉴스 웹사이트가 그리드에 기초한 디자인을 사용한다. 그리드는

단정해 보이는 효과를 가지기도 하지만, 많은 양의 정보를 다루고 조직화하는

가장 효율적인 방법이기도 하다. 예를 들면, 뉴욕타임즈는 잘 알려진 그리드에

기초한 레이아웃을 사용하고 있다.

- 57 -

<그림 7> The New York Times

*출처: http://www.nytimes.com

(6) 소셜 미디어의 통합(Integration)

대부분의 웹사이트는 블로그에서 다른 소셜 네트워크 서비스와 연결되는

작은 아이콘이나 버튼을 보편적으로 사용한다. 어떤 웹사이트는 다른 웹사이

트보다 소셜 미디어를 더 많이 활용하기도 한다. 최근 들어서 대부분의 언론

사 웹사이트에서도 소셜 네트워크와의 연결은 일반적으로 사용되고 있다. 예

를 들면, ABC뉴스는 다양한 아이콘과 버튼을 사용하여 소셜 네트워크와 연결

하고 있다.

- 58 -

<그림 8> ABC News

*출처: http://abcnews.go.com

(7) 멀티미디어 디자인 트렌드

최근 최고의 멀티미디어 디자인 트렌드는 애니메이티드 정보 그래픽, 인포

토이, 내러티브, 수용자의 참여, BIOs 등의 5가지 유형으로 설명되고 있다.

① 애니메이티드(animated) 정보 그래픽

애니메이티드 정보 그래픽은 갈수록 세련되고 깨끗한 외양으로 변화하고

있다. 이 분야의 디자인 출품작은 단순한 유선형 모양으로 흰 여백을 잘 활용

하고 있다. 어떤 경우는 사건의 전개에 따른 선형적 설명을 하고 있다. 흥미로

운 것은 처음에는 정적인 그래픽이 사건이 진행됨에 따라 점차 동적인 정보

그래픽으로 변화해가는 양상을 볼 수 있다는 점이다(<그림 9> 참조).

- 59 -

<그림 9> The New York Times의 그래픽

*출처: http://www.nytimes.com/2007/04/19/arts/20070419_MET_GRAPHIC.html

② 인포토이(infotoys)

인포토이는 이용자들이 정보를 스스로 탐색할 수 있도록 상호작용성을 극

대화하는 방식이 주로 사용된다. 예를 들어, 뉴욕타임즈의 ‘집을 사는 것이 나

은지, 렌트하는 것이 나은지’에 대한 매우 세련된 인포토이가 대표적이다. 이

상호작용적 인포토이는 고객이 변화하는 시장에 대한 예측을 가능하게 해준

다(<그림 10> 참조). 이외에도 뉴욕타임즈의 상호작용적 그래픽은 매번 선거

보도에서 그 진가를 발휘하고 있다.10)

10) http://elections.nytimes.com/2008/president/whos-ahead/key-states/map.html

- 60 -

<그림 10> The New York Times의 인포토이

③ 멀티미디어 내러티브(narrative)

멀티미디어 내러티브는 단일 이야기의 내러티브로 구성되어 있다. 최근에는

정지사진과 오디오 웹 프레젠테이션을 활용하는 사운드슬라이드(soundslide)

의 사용으로 저널리스트가 기술보다는 ‘내용’에 초점을 맞춘 감동적인 멀티미

디어 내러티브를 잘 활용하게 되었다. palmbeachpost.com의 ‘Train Jumpng’

은 매우 인상적이고 감동적인 멀티미디어 내러티브이다(<그림 11> 참조).

- 61 -

<그림 11> Train Jumpng by palmbeachpost.com

④ 수용자의 참여(You are there)

매우 높은 수준의 그래픽과 POV/파노라마적 이미지는 ‘수용자의 참여’ 패

키지를 만드는데 사용되고 있으며, 이는 이용자에게 가상의 실재감과 탐험의

느낌을 전달하다. 특히 이용자가 그들의 시각적 경험을 개인화시킬 수 있다는

점이 중요하다. 뉴욕타임즈는 ‘그리스 로마 갤러리‘(Greek and Roman

Galleries)의 관객을 뮤지엄 안으로 이동하게 하는 3D 렌더링과 파노라마를

통해 새로운 차원의 상호작용적 통제성을 부여하고 있다(<그림 12> 참조).

- 62 -

<그림 12> The New York Times의 Greek and Roman Galleries

⑤ BOPs(Big Ole Package)11)

BOP는 텍스트, 비디오, 오디오 슬라이드쇼, 애니메이션 그래픽과 상호작용

적 애플리케이션을 포함하는 거대한 스토리텔링 집합체이다. BOP 패키지는

다양한 층위의 정보를 가진 복잡한 기사를 설명하는데 효과적이다. 대표적 사

례는 St. Pete Times의 플로리다 습지대에 관한 생태학적 웹 프레젠테이션이

다. 이것은 기사의 특별한 부분을 얘기하기 위한 최적의 미디어 형태(비디오,

사진, 그래픽 등)를 다양하게 사용한다.

11) OLE(object linking and embedding)은 윈도우에서 데이터와 데이터를 연결하는 방법을 말

한다. 연결된 데이터는 수정될 때 함께 수정되어 저장된다. 예를 들어, OLE가 지원되는 그

래픽 프로그램에서 그림을 그린 후 문서 편집기와 연결시키면 나중에 그림이 바뀔 경우 문

서 편집기의 그림도 같이 바뀐다. 이렇듯 OLE는 데이터 간의 정보를 연결시켜 주는 것을

의미한다.

- 63 -

<그림 13> St. Pete Times의 사라져가는 습지대에 관한 생태학적 웹 프레젠테이션

2) 외국 신문 웹사이트 베스트 디자인 수상작

(1) SND 최우수 멀티미디어 디자인 수상작 (2009년)

2002년 1월 이후, SND(The Society for News Design, 미국 뉴스 디자인 협

회)에서는 온라인 뉴스 부문의 <최우수 멀티미디어 디자인(The Best of

Multimedia Design)>상을 신설했다. 이는 기존 종이신문 뿐만 아니라, 온라인

신문과 그 디자인에 대한 관심이 커지고 있는 현실을 반영한 것이다. 2009년

심사위원 패널은 멀티미디어 디자인 업계에서 다양한 분야를 대표하는 전문

가들로 구성되어있다. 본선에 오른 작품은 긴급 뉴스, 일반 뉴스, 스포츠, 피

쳐, 학생 작품을 대상으로 뉴스 가치, 정보 편집, 정보 구조화, 미학적 프레젠

테이션, 그리고 창의성을 기준으로 선정되었다.

심사위원 제이 하인츠(Jay Heinz)는 2009년의 출품작을 평가하면서 “최근

대부분의 뉴스 조직에서는 개별적인 디자인 감각(design feel)을 가진 자유로

운 디자인 스타일에서 벗어나, 점점 사이트에 하나로 통합되어 가는 스타일로

변해가고 있다. 이런 동향을 선도하는 것이 뉴욕타임즈이다. 다른 뉴스 조직은

- 64 -

이러한 방향을 따라가고 있으며, 웹사이트 스타일을 정말로 깨끗하고 통합된

디자인으로 만들어가고 있다”고 논평했다. 2009년 9월 개최된 SND 연례 워크

샵에서 경쟁작들은 기술, 창의성, 그리고 웹상에서의 고품질 비주얼 저널리즘

을 갖춘 작품이었다. 170개의 수상작들 가운데, 뉴욕타임즈 웹사이트가

‘Choosing a President’와 ‘You Finish, You Win'이 2개의 금상을 수상했다.

수상작은 다음과 같다.

① 금상(Gold Awards)

‘Choosing a President’는 16분 32초 분량의 멀티미디어 비디오로서 미국 선

거과정에 관한 뉴스이다.12) 2009년 오바마 대통령 선거운동과 당선과정에 관

한 폭넓은 정보를 정보그래픽, 뉴스 동영상, 슬라이드 쇼, 사진 등으로 통합하

여 만든 수작이다.

<그림 14> nytimes.com의 Choosing a President

12) http://www.nytimes.com/packages/html/politics/2008-election-overview

- 65 -

‘You Finish, You Win’은 2분 9초 분량으로 전 올림픽 국가대표 스키선수가

가장 위험한 오스트리아 하넨캄(Hahenkamm) 스키 코스를 직접 해설하는 3D

가상 그래픽에 관한 뉴스이다.13)

<그림 15> nytimes.com의 You Finish, You Win

② 은상(Silver Awards)

은상은 ‘Andaman Rising carolinaphotojournalism.org’, ‘Hurricane Tracker

msnbc.com’, ‘Indy 500 Car Tracker indystar.com’, ‘One in 8 Million

nytimes.com’, ‘Ted Kennedy boston.com’, ‘Tracking US Airways Flight 1549

nytimes.com’ 등이다.

13) http://www.nytimes.com/interactive/2008/10/31/sports/playmagazine/20081031_skiing_graphics.html

- 66 -

(2) OJA 수상작 (2009년)14)

OJA(Online Journalism Awards)는 ONA(Online News Association)와 콜럼

비아 저널리즘 스쿨(Columbia School of Journalism)이 연합하여 2005년 5월

창설되었다. 이 상은 인터넷 저널리즘 사이트들 중에서 우수한 사이트와 뉴스

기사를 선정하여 수여되며, 영어를 사용하는 전세계 인터넷 뉴스 사이트에 개

방되어 있는 상이기도 하다. 전체 14개 분야 수상작 가운데 웹사이트 디자인

에 참고할 만한 수상한 웹사이트와 이에 대한 심사위원들의 심사평을 살펴보

면 다음과 같다.

① Knight Award for Public Service - The Chauncey Bailey Project

수상작인 ‘Chauncey Bailey Project’는 탐사저널리즘의 모범이 되었으며, 위

험한 상황 속에서도 기자는 범죄와 경찰 모두를 폭로했다.

<그림 16> The Chauncey Bailey Project

*출처: http://www.chaunceybaileyproject.org

14) http://journalists.org/?page=oja2009

- 67 -

② Gannett Foundation Award for Technical Innovation in the Service of

Digital Journalism - Publish2

수상작인 Publish2의 저널리스트와 독자 사이의 정보공개와 효과적인 협력

저널리즘을 보여주고 있다. 위젯 링크와 사용하기 쉬운 브라우저 툴은 시간에

쫓기는 기자들의 일상에 적합하게 디자인되었다.

<그림 17> Publish2

*출처: http://www.publish2.com

③ General Excellence in Online Journalism, Micro Site - Gotham Gazette

수상작인 Gotham Gazette는 뉴욕시민과 뉴욕시를 위해 종합적이며 심도 깊

은 이슈를 보도하는 모범적인 사이트이다. 상호작용적인 피쳐 기사는 매우 인

상적이며, 뉴욕 지역을 보도하는 최고의 사이트로 평가받았다.

- 68 -

<그림 18> Gotham Gazette

*출처: http://gothamgazette.com

④ General Excellence in Online Journalism, Small Site - ProPublica

수상작인 ProPublica는 시민저널리즘, 그래픽, 상호작용 툴을 통합한 뛰어난

취재 기사를 제공한다. ProPublica는 저널리스트들에게 아이디어, 기사, 데이

터와 툴을 제공하여 작업에 도움을 준다. 스크래핑, 데이터베이싱 그리고 다른

웹 도구를 사용해 정보를 수집하고 분석하는 독창적인 방식은 매우 훌륭하다.

- 69 -

<그림 19> ProPublica

*출처: http://www.propublica.org

⑤ General Excellence in Online Journalism, Medium Site - LasVegasSun.com

수상작인 LasVegasSun.com은 기사에 대한 관련 자료와의 링크가 잘 이루

어진 점이 우수하다. LasVegasSun.com은 모바일 사이트도 매우 훌륭하다.

- 70 -

<그림 20> LasVegasSun.com

*출처: http://www.lasvegassun.com

⑥ General Excellence in Online Journalism, Large Site - nytimes.com,

뉴욕타임즈 웹사이트 nytimes.com은 매우 높게 평가되고 있다. 콘텐츠, 사

진, 멀티미디어성에서도 획기적이며, 디자인과 내용 등 모든 면에서 뛰어난 최

고의 사이트이다.

- 71 -

<그림 21> nytimes.com

*출처: http://www.nytimes.com

⑦ General Excellence in Online Journalism, Non-English, Small Site

Radio Azattyq, RFE/RL's Kazakh Service (Kazakhstan)

비영어권 소형 사이트 부문은 ‘Radio Azattyq, Radio Free Europe/Radio

Liberty's Kazakh Service’가 수상하였다. 카자흐스탄 정부가 대통령을 비판하

는 책의 출간을 금지하고 그것을 소유하는 사람들에 대해 위협을 가했을 때,

Radio Azattyq 사이트는 시민들의 권리를 보호하고 정보를 제공하여 결국 정

부의 통제를 철회하게 하였다.

- 72 -

<그림 22> Radio Azattyq, RFE/RL‘s Kazakh Service

*출처: http://www.azattyq.org

⑧ General Excellence in Online Journalism, Non-English, Large Site -

SOITU.ES (Spain)

수상작인 SOITU.ES는 2008년 소형 사이트 부문에서 상을 받았지만, 2009년

에는 대형 사이트 부문에서 수상했다. 이 사이트는 공유, 연결 그리고 수용자

에게 봉사한다는 근본적인 철학 하에 독창적인 콘텐츠와 종합뉴스, 피쳐 기사

를 종합하여 전달하였다.

- 73 -

<그림 23> SOITU.ES

*출처: http://www.soitu.es

⑨ Breaking News, Small Site - Pressconnects.com/Press & Sun-Bulletin,

Massacre on Front Street

수상작인 Pressconnects.com은 상호작용적 그래픽을 사용하여 무엇이, 어디

서, 언제 일어났는지를 보여주고 있으며, 중요한 기사를 공정하게 제공하였다.

- 74 -

<그림 24> Pressconnects.com

*출처: http://www.pressconnects.com/section/acacontest?date=20090403

⑩ Breaking News, Medium Site - Knoxnews.com, Church Shooting

수상작인 Knoxnews.com의 교회 총격사건에 대한 보도는 매우 훌륭하였다.

웹 사이트의 보도팀은 주요 인물들, 그 중에서도 희생자의 아들과 살인 용의

자 이웃들의 다양한 비디오 인터뷰를 통해 기사를 보도했다.

- 75 -

<그림 25> Knoxnews.com의 Church Shooting

*출처: http://www.knoxnews.com/news/news/local/knoxville-unitarian-church-shooting

⑪ Breaking News, Large Site - BBC News, Mumbai Attacks

뭄바이 테러에 관한 BBC 뉴스는 속보 블로그를 효과적으로 활용했다. 수많

은 주요 정보원을 인용하고, 수백개의 개별 포스트에 게시된 다양한 코멘트들

이 있었다.

- 76 -

<그림 26> BBC News의 Mumbai Attacks

*출처: http://news.bbc.co.uk/2/hi/south_asia/7752003.stm

⑫ Multimedia Feature Presentation, Small Site - National Film Board of

Canada, Waterlife

수상작인 ‘National Film Board of Canada, Waterlife' 프로젝트는 체계적인

방법을 통해 혁신적이고 정보적인 프레젠테이션을 제공하였다. 여기에는 다차

원적이고 다매체적인 스토리텔링이 일어난다.

- 77 -

<그림 27> National Film Board of Canada, Waterlife

*출처: http://waterlife.nfb.ca

⑬ Multimedia Feature Presentation, Medium Site - LasVegasSun.com,

Quenching Las Vegas' Thirst

수상작인 LasVegasSun.com의 ’Quenching Las Vegas' Thirst’는 지도, 그래

픽, 비디오가 조화를 이루었다. 이 프레젠테이션은 생활용수에 대한 주목할 만

한 지도를 만들었으며, 이를 통합하여 제시하였다.

- 78 -

<그림 28> LasVegasSun.com의 Quenching Las Vegas' Thirst

*출처: http://www.lasvegassun.com/news/topics/water

⑭ Multimedia Feature Presentation, Large Site - Washington Post Digital,

Sacred Ground: The Building of the Pentagon Memorial

수상작인 ‘Washington Post Digital, Sacred Ground'는 설계자와의 인터뷰

및 3D 리허설을 통해 이 빌딩이 어떻게 이것이 계획되었고, 어떻게 건축되었

는지를 살펴볼 수 있게 해주어 깊이가 있다고 평가되었다.

- 79 -

<그림 29> Washington Post Digital, Sacred Ground

*출처: http://www.washingtonpost.com/wp-srv/nation/interactives/pentagonmemorial/index.html

⑮ Outstanding Use of Digital Technologies, Small Site - Muckety

수상작인 ‘Muckety'의 테크놀로지는 최첨단이며, 저널리즘과 적합하다. 이

사이트는 이용자들이 쉽게 이해하고 따라하는데 도움을 준다.

- 80 -

<그림 30> Muckety

*출처: http://news.muckety.com

⑯ Outstanding Use of Digital Technologies, Large Site - The New York

Times, Interactive Graphics

뉴욕타임즈는 2008년 선거 관련 위젯 중에서 최고로 평가되었으며, 올림픽

그래픽(삽화)은 이용자들의 관심을 끌만한 것이었다.

- 81 -

<그림 31> The New York Times의 Interactive Graphics

*출처: http://www.nytimes.com/packages/html/newsgraphics/2009/ona/index.html

⑰ Online Video Journalism, Small Site - Danny Wilcox Frazier, Produced

by MediaStorm, Driftless: Stories from Iowa

수상작인 ‘Driftless'는 흑백으로 촬영된 아이오와주의 농부 가족의 이야기이

다. 어떤 다른 비디오에서도 찾아볼 수 없는 자유로운 표현과 블랙유머를 담

고 있는 비디오로 높이 평가되었다.

- 82 -

<그림 32> Driftless: Stories from Iowa

*출처: http://www.mediastorm.com/publication/driftless-stories-from-iowa

2. 국내 신문 웹사이트 디자인 트렌드와 이슈

1) 그래픽 뉴스

2000년부터 2010년까지 종이신문이 빠르게 쇠락하면서 다양한 온라인 뉴스

가 활발하게 진행되었다. 초기에 각 언론사 웹사이트의 주요 쟁점은 빠르고

정확한 뉴스를 기반으로 아이덴티티, 차별화, 레이아웃, 타이포그라피의 활용,

일관된 내비게이션, 사용성, 심미성 등이었다. 그러나 지금은 콘텐츠 재구성에

집중한 신개념 뉴스가 중요해지게 되었다. 종이신문을 그대로 옮겨놓는 온라

인 뉴스의 한계를 넘어 하루가 다르게 새로운 기술과 편집력으로 지면에서

할 수 없는 새로운 뉴에디팅 시대가 된 것이다.

최근 온라인 뉴스의 키워드는 웹 3.0, 개인화, 맞춤형 뉴스, 오픈 소스, 스토

리텔링, SNS, 집단지성, 멀티미디어 저널리즘, 비주얼을 강조한 그래픽 뉴스,

애플리케이션 혁명, 스마트폰, 태블릿PC 등 새로운 미디어 플랫폼의 등장, 디

바이스에 따른 UI 환경의 최적화 등이다. 즉 정적인 뉴스가 동적인 뉴스로 변

- 83 -

화되는 상황인 것이다. 현재 온라인 뉴스는 각종 멀티미디어 소스가 붙게 되

어 링크가 아니라 한 곳에서 클릭 하나로 전체를 볼 수 있는 간편하고 쉽게

심층화된 뉴스를 볼 수 있게 되었다. 이러한 새로운 모델의 대표적인 것이 최

근 언론사들이 내놓은 그래픽 뉴스이다. 그래픽 뉴스의 예는 조선일보의 인포

그래픽 뉴스, 중앙일보의 인터랙티브 뉴스, 연합뉴스의 미디어랩을 들 수 있

다. 2010년 9월을 전후로 나타난 이러한 서비스들은 각각의 언론사 장점을 반

영하고 있다.

<그림 33> 조선일보의 인포그래픽 뉴스

- 84 -

<그림 34> 중앙일보의 인터랙티브 뉴스

<그림 35> 연합뉴스 미디어랩

그래픽 뉴스는 복잡한 정보를 포토, 영상, 플래시, 그래픽을 통해 한 눈에

- 85 -

보기 쉽고 간결하게 정리하여, 사용자가 원하는 정보를 바로 바로 볼 수 있게

구성된다. 기존 뉴스 사이트는 필요한 정보를 찾기 위해 사용자가 많은 페이

지들을 드나들어야 했고, 어느 순간 내비게이션의 혼란으로 본인의 위치를 헤

매는 불편함이 있었다. 이를 보완하여 그래픽 뉴스는 여러 페이지를 어렵게

찾아다니는 것이 아니라 한 페이지 내에서 클릭만으로 다양한 정보를 접할

수 있게 하는 것이다.

대표적으로 조선일보에서 만든 ‘헬스푸드: 건강한 몸’은 컬러 푸드, 브레인

푸드, 슈퍼 푸드, 월별추천음식 등 테마별로 건강 음식을 소개하며, 각 신체별

로 좋은 부위를 플래시로 쉽게 보여 준다. 또 한 눈에 각종 음식을 쉽게 구분

할 수 있도록 그래픽화하였고 이와 관련된 레시피도 바로 볼 수 있다. 이용자

가 클릭하는 것과 동시에 기사, 포토, 동영상, 관련 기사 등 많은 정보들을 비

주얼하게 묶어서 볼 수 있다. 뉴스를 보면서 클릭만으로 분석된 자료가 역동

적으로 펼쳐지고 능동적으로 소통하는 뉴스가 되는 것이다.

<그림 36> 조선일보의 헬스푸드: 건강한 몸

- 86 -

중앙일보에서는 ‘ADHD(주의력결핍·과잉행동장애)의 증상’을 경제력, 부모

학력, 성별, 교우관계, 문제행동 양상 등으로 보기 쉽게 그래프화하고, 플래시

기술을 이용하여 한눈에 비교해 볼 수 있도록 하였다. 우리 아이의 증상은 어

떤지 바로 확인할 수 있는 자가 테스트도 가능하게 하였다.

<그림 37> 중앙일보의 ADHD(주의력결핍·과잉행동장애)의 증상

연합뉴스에서는 구글맵을 이용하여 해외뉴스를 한 눈에 집약해서 일목요연

하게 볼 수 있게 하였다. 예를 들어 ‘2010 남아공월드컵’을 타임라인, 뉴스맵,

화보 등을 통해 생동감과 현장감을 느낄 수 있는 뉴스를 만들었다. 트위터 등

SNS와 연계된 뉴스도 활발히 보여주고 있다.

- 87 -

<그림 38> 연합뉴스의 2010 남아공월드컵

이 외에도 조선일보, 중앙일보, 연합뉴스는 다양한 아이템을 통해 많은 기

사들을 쏟아내고 있다. 신속성, 정확성, 퀄리티, 심층화, 차별화, 자동화, 비주

얼 등으로 3사가 경쟁하고 있으며, 모두가 재미있는 뉴스를 만든다는 공통된

목적을 가지고 출발하였다. 기사 하나만 읽고 끝나는 것이 아니라 과거부터

쌓여왔던 무한한 정보를 보기 쉽고 이해하기 쉽도록 재구성하여, 쉽고 재미있

게 보여준다는 것이 그래픽 뉴스이다. 타임라인, 지도, 인물, 갤러리, 맵 등 다

양한 방식으로 무궁한 데이터를 재편집하여 사용자가 찾아다니는 뉴스가 아

니라 간편하고 빠르게 다가오는 뉴스인 것이다. 그래픽 뉴스는 외국에서 이미

활발하게 진행되고 있다. 뉴욕타임즈, 가디언, 뉴스위크 등 온라인 그래픽 뉴

스를 위한 신기술과 그에 따른 인력들이 전문적으로 배치되어 만들어지고 있

다. 외국의 그래픽 뉴스는 3D 영상과 플래시 애니메이션, 맵과 잘 연동된 페

이지들을 통해 정보 전달에 매우 효과적이라고 평가되고 있다.

- 88 -

<그림 39> 뉴욕타임즈의 미셸 오바마 가계도

<그림 40> 가디언의 베를린장벽 여행

- 89 -

국내의 그래픽 뉴스는 시작 단계이기 때문에 아직은 전문적인 인력이 부족

한 상태이다. 현재는 기존 뉴스를 만들어왔던 인력들이 팀을 구성하여 다양한

시도를 하는 중이다. 빠르고 정확하게 아이템을 설계할 수 있는 뉴스 기획자

와 뉴스 감각이 뛰어난 인포디자이너, 각종 스크립트와 신기술 개발에 능한

개발자 등의 3박자가 적절하게 조화를 이루어야 할 것이다. 그래픽 뉴스는 온

라인 뉴스에 대한 새로운 시도로 큰 의미를 가지고 있다. 이러한 경향이 일시

적인 현상이 아니라 지속적으로 발전될 수 있어야 할 것이다.

2) 신문 웹사이트 디자인의 이슈

신문 웹사이트 디자인과 관련된 이슈는 크게 3가지로 요약된다. 첫째는 뉴

스 웹사이트의 유료화이다. 뉴욕타임스는 2011년부터 온라인 콘텐츠를 유료화

하겠다고 발표하였다. 유료화방식은 FT 방식(건당 소액결재)과 WSJ 방식(기간

별 결재)을 종합적으로 고려하고 있다. 더타임즈와 선데이타임스도 2010년 7

월 2일 온라인을 유료화하였다. 월스트리트저널, 영국의 파이낸셜타임스, 일본

의 일본경제신문은 경제지라는 특수성으로 이미 유료화에 성공하였다. 이외

전세계적으로 유료화에 대한 논의가 진행 중에 있다.

유료화의 배경은 지속적인 광고 수입 감소, 종이에서 PC 또는 모바일로의

플랫폼의 진화, 종이 신문 구독률이 줄어드는 것 등으로 볼 수 있다. 그러나

유료화가 성공하기 위해서는 당장의 수익을 생각하기 보다는 중장기적인 관

점에서 온라인 뉴스의 비즈니스 모델을 추진해야 한다. 유료화를 시행해도 돈

을 지불하고 구독 할 수 있게하는 차별화된 심층 콘텐츠가 필요하고, 다양하

게 발전하고 있는 디바이스를 이용한 새로운 서비스와 기술적 개발이 필요한

것이다.

둘째는 모바일 출판의 성장이다. 아이폰 등의 스마트폰의 성장하면서 출판

시장에서는 모바일 환경 변화로 인한 전자책 출판이 뜨거운 감자로 떠오르고

있다. 텍스트가 인터넷 메일/채팅 → 블로그 → 인터넷 신문/잡지 → 전자책

등으로 진화하고 있는 것이다. 즉 ‘소유’에서 ‘소비’로의 진화하고 있는 것이

다.

셋째는 모던웹이다. 모던웹은 새로운 웹 디자인 스타일을 의미한다. 직관적

이고 시원시원하며, 합리적인 스타일을 추구한다. 다채로운 컬러, 일러스트, 큰

- 90 -

글씨, 텍스처, 사용하기 편리한 인터랙티브 UI 패턴 등이 특징이다. 이 외에도

다양한 글꼴들 사용, 크고 시원시원한 타이틀, 사용자 정의 글꼴 포함, 무료폰

트 사용으로 인한 글꼴 자유, 배경의 질감 등 자유화, 그리드의 자유 사용 등

다양화, CSS의 새로운 기능, 모바일 디자인 애플리케이션 등의 디자인 요소가

특징이다. HTML5는 2010년의 화두이며, 플러그인 없이 플래시와 유사한 효과

기능이 있다.

- 91 -

Ⅳ. 국내외 신문 웹사이트의 소셜 미디어 사용 현황 비교

1. 소셜 네트워크, 소셜 미디어의 부상

트위터와 페이스북으로 대표되는 소셜 네트워크와 소셜 미디어는 최근 몇

년 사이에 급격하게 확산되고 있고, 이는 구독자가 지속적으로 하향하고 있는

기존 신문 시장을 더욱 더 위협하는 요소로 여겨지고 있다. 이에 따라 많은

미디어 사이트들이 이들 소셜 네트워크 서비스들을 가장 효율적으로 이용하

기 위한 방안을 모색하려는 노력을 기울이고 있다. 하지만 이들 서비스들은

기존 미디어가 이용할 수 있는 ‘도구’가 아니라 기존 미디어가 ‘노는 물’이 될

것이라고 오버홀저(Overholser, 2009)가 주장하듯이, 새로운 서비스들은 새로

운 생태계를 대표하는 서비스들로 인식해야 한다. 신문 웹사이트 디자인을 계

획하는데 있어서도 이들을 어떻게 ‘이용’할 것인가를 고민할 것이 아니라 이

들 서비스들이 초래한 결과를 “지각변동”(Gordon, 2009)으로까지 묘사할 정도

로 근본적인 변화를 초래하는 새로운 환경에 어떻게 적응할 것인가를 고민하

는 것이 근본적인 대책이 될 것이다.

소셜 네트워크로 대표되는 변화된 환경은 웹 2.0이라는 용어로 집약된다. 웹

2.0이라는 용어는 2003~2004년 경에 인터넷에서 감지되는 근본적인 변화 현상

을 지칭하기 위해 사용되었던 것이고, 아직 명확한 정의가 내려지지는 않은

상태이지만 웹 1.0이라 불리는 이전의 웹과는 분명 몇 가지 다른 특징을 지니

고 있다(Cormode & Krishnamurthy, 2008). 코모드와 크리스나머티(Cormode

& Krishnamurthy, 2008)는 웹 2.0으로 불릴 수 있는 사이트의 사례로 AJAX와

같은 특정 웹 기술을 사용하는 사이트, 이용자의 개인 관계 및 특성을 나타내

는 개인 프로필을 이용하여 강력한 소셜 네트워크적인 특성을 지닌 사이트,

유튜브(Youtube)나 플리커(Flicker)처럼 이용자가 만들어내는 콘텐츠(UGC;

User Generated Content)를 독려하는 사이트, 또는 최근 주가를 한창 올리고

있는 사이트들 등이 있다고 기술하면서 이런 특징들이 사실 서로 연관되어있

는 경우가 많기 때문에 이런 특징들을 복합적으로 지니고 있는 사이트들이

웹 2.0적인 특징을 지닌 사이트로 볼 수 있다고 한다.

소셜 미디어에 대한 관심이 더욱 높아지는 이유 중 하나는 전세계적인 신

- 92 -

문 구독률의 지속적인 하락과 대비되는 소셜 미디어 이용자의 폭발적인 증가

세이다. ‘인터넷과 미국인의 삶’ 프로젝트를 진행 중인 Pew 연구소는 2005년

소셜 미디어를 이용해 본 미국의 18세 이상 성인의 비율이 8%에 불과했던 반

면 2009년에는 46%가 되었다고 발표하였다(<그림 41> 참조). 뿐만 아니라 미

국의 페이스북의 주간 이용자가 구글의 주간 이용자 수보다 더 많았다는 발

표가 있었던 2010년 3월의 데이터(Bloomberg Business Week, March 17,

2010)나 이용자들이 구글보다 페이스북에서 더 많은 시간을 보낸다는 2010년

9월 컴스코어(comScore)의 데이터에서도 볼 수 있듯이 이러한 경향은 더욱 뚜

렷하게 나타나고 있는 것을 알 수 있다.

<그림 41> 미국인의 소셜 미디어 이용 현황

*출처: PEW Research Center. Adults on Social Network Sites, 2005-2009, Oct., 2009

이런 상황에서 기존 뉴스 미디어가 생존하기 위해서는 웹 2.0에 기반한 소

셜 미디어의 도움이 절실하다는 이야기가 나오는 것은 당연한 일이다(Yaros,

2008; Skoler, 2009). 실제로 현재 많은 뉴스 웹사이트들이 소셜 네트워크적인

특성을 다양한 방법으로 포함시키려는 노력을 기울이고 있다. 이제는 웬만한

- 93 -

블로그나 뉴스 사이트에 버튼 클릭 하나만 하면 페이스북 친구들과 나누기

(share)를 하거나 자신의 트위터에 기사를 소개할 수 있다.

하지만 소셜 네트워크의 효율성을 최대한 높이기 위해서는 소셜 네트워크

나 웹 2.0이 과연 무엇을 의미하는지에 대한 근본적인 이해를 토대로 진행되

어야 할 것이다. 웹사이트 디자인이라는 것이 시각 디자인적인 측면만 포함하

는 것이 아니라 내비게이션, 검색, 연결 등과 같은 구조적인 측면도 같이 포함

하고 있기 때문이다(이유숙, 2001).15) 이에 본 장에서는 소셜 미디어의 정보

구조적 측면을 고려한 뉴스 사이트 웹디자인의 소셜 미디어적인 기능을 가장

효과적으로 포함시키는 방안을 모색하기 위해 우선 웹 2.0의 의미를 좀 더 명

확하게 규명하고 소셜 네트워크를 활용하여 이용자 수를 증가시킬 수 있는

검색 엔진 최적화(Search Engine Optimization, SEO) 또는 소셜 미디어 최적

화(Social Media Optimization)의 개념을 정립한 뒤 현재 외국 및 한국의 신문

웹사이트에서 소셜 미디어가 이용되는 현황을 살펴본 후 소셜 미디어를 가장

효율적으로 활용하는 방안을 도출해보고자 한다.

2. 웹 1.0에서 웹 2.0, 그리고 웹 3.0으로

1) 웹 1.0 vs 웹 2.0

웹 2.0이라는 용어는 2004년, 오라일리 미디어가 인터넷에서 일어나고 있는

거대한 변화를 표현하기 위해 컨퍼런스를 개최하면서 붙인 명칭이다(O'Riley,

2005). 따라서 웹 2.0에 대한 정의를 내리는 작업이 2004년의 첫 컨퍼런스에서

이루어졌다. 아직도 웹 2.0의 정확한 의미에 대한 합의가 있는 것은 아니지만

웹 1.0과는 어떻게 차이가 있는지에 대한 논의를 보면 <표 2>와 같이 단순한

비교가 가능한 것으로 파악되고 있다.

15) http://www.cwzone.com/sys_bbs/bbs/table/web_plan/upload/%C0%A5%BD%BA%C5%

B8%C0%CF%B0%A1%C0%CC%B5%E5_15.pdf에서 다운로드.

- 94 -

웹 1.0의 특징 웹 2.0의 특징

포털이 웹 1.0 시대를 대표함 문서간 링크의 수와 중요도를 이용하는 구글이 대표함

정보 이용 중심 (mostly read) 정보 제공 및 이용 혼재(wildly read-write)

정보를 가지고 있는 기업 중심 커뮤니티의 부각

정보 소유의 개념이 강함 정보 공유의 개념이 강함

백과사전의 개념 집단지성의 위키피디어의 개념

정보 분류의 개념(taxonomy)다양한 웹 어플리케이션 이용한 정보태그 이용

(folksonomy)

페이지 뷰에 따른 이용도 측정 클릭 수에 따른 이용도 측정

광고의 개념 소문(word of mouth)의 개념

<표 2> 웹 1.0과 웹 2.0의 특징 비교

*출처: Strickland, M.(2007). The Evolution of Web 3.0에서 발췌, 번역.

(http://www.slideshare.net/mstrickland/the-evolution-of-web-30)

우선 웹 1.0 시대에는 정보를 가지고 있는 기업이 이용자를 사이트로 끌어

들이는 역할을 하는 상황을 지칭하는 것으로, 포털 사이트가 웹 1.0 시대를 대

표하고 있다. 따라서 이용자들은 정보를 주로 읽는 입장이고 정보를 제공하는

측의 정보 소유의 개념이 강하다. 마치 백과사전처럼 정보를 저장해 놓고 있

는 서버가 정보를 자신이 생각하기에 가장 효율적으로 분류해 놓으면 이용자

들은 정보를 소유하고 있는 이곳으로 몰려들어 정보를 이용하게 되고 이에

따라 이들을 대상으로 하는 일방적 광고가 가능하다. 1995년 야후 사이트가

처음 출범했을 때 정보를 계층적으로 분류하여 정리해 놓았던 모습이 웹 1.0

의 상징적 모습이다 (<그림 42> 참조).

- 95 -

<그림 42> 계층적 정보구조의 야후(Yahoo) 초기 화면

이와는 대조적으로 웹 2.0 시대에는 이용자나 문서간의 링크가 주된 개념으

로 작용한다. 이용자는 정보를 읽기만 하는 것이 아니라 이에 대한 자신의 생

각을 블로그나 카페 등에 적극적으로 표현을 하고 이것을 또 다른 여러 사람

에게 공유된다. 여기서 중요시 되는 것은 서로간의 관계이다. 웹 2.0 시대를

대표하는 구글의 경우, 시작페이지가 빈 칸으로만 되어 있고 여기에 원하는

검색어를 입력하게 되면 이 용어를 포함하고 있는 문서 중에 가장 링크가 많

이 되어 있는 문서를 우선적으로 보여준다.

어떤 문서가 가장 먼저 제시되는가 하는 것은 전적으로 수식적인 계산에

의해 정해지는데, 다른 문서들로부터 링크를 많이 받은 문서가 많은 사람들이

관심을 갖고 이용하는 문서라는 원리를 이용하는 페이지랭크(PageRank)라는

알고리즘이다. <그림 43>은 구글이 사용하는 페이지랭크의 원리를 보여주고

- 96 -

있는데, 자신에게 향하는 링크가 많은 페이지가 크게 표현되어 있는 것을 볼

수 있다. 예를 들어, 동그라미 B의 경우에는 다른 문서로 향하는 링크가 별로

없지만 자신으로 링크를 하는 문서들이 많기 때문에 그 중요도가 38.4%로 인

식되어 크게 그려지고 있다. 이에 비해 자신으로 향하는 링크가 없는 경우에

는 1.6%의 중요도를 지닌 것으로 인식되어 가장 작게 나타나 있다. 여기서 사

용하는 또 하나의 원리는 중요한 문서가 연결을 하고 있는 문서는 다른 링크

가 없어도 중요하게 인식된다는 것이다. 따라서 동그라미 C의 경우에는 다른

링크가 없지만 중요한 것으로 인식되는 동그라미 B가 링크를 하고 있기 때문

에 중요한 것으로 인식된다는 것이다.

<그림 43> 구글이 사용하는 검색 원리인 페이지랭크(PageRank)의 사례

구글이 채택하고 있는 페이지랭크는 아주 효율적이고 실용적인 검색을 가

능하게 하고 있고 이에 따라 구글이 전세계적으로 가장 많이 이용되는 검색

엔진으로 자리 잡게 되었다. 구글 페이지랭크의 효율성은 문서간의 관계에 근

거한 검색이라는 점에서 비롯된다. 이처럼 소셜 미디어의 시대에는 문서간의

관계, 사람간의 관계에 근거하여 정보의 유용성이 평가된다.

- 97 -

소셜 미디어에 대한 정의를 내릴 때 블로그나 비디오 캐스팅과 같이 제공

하는 내용을 기준으로 정의를 하기도 하지만(Newson, Houghton & Patten,

2009), 최근에는 좀 더 웹 2.0적인 특성에 초점을 맞춘 정의가 이용되고 있다.

사프코와 브레이크(Safko & Brake, 2009)는 소셜 미디어를 “문서나 그림, 동영

상, 음원 등을 전송하거나 제작할 수 있게 해 주는 웹 기반의 응용 소프트웨

어를 통칭하는 대화형 미디어를 통해 참여자들이 정보와 지식, 의견을 공유할

수 있게 해 주는 미디어”로 정의하고 있고 이를 기반으로 최민재(2009)는 “웹

환경 하에서 네티즌의 참여·공유 정신을 기반으로 한 ‘웹 2.0’의 특성을 갖는

인터넷 서비스들의 기술적 속성과 그 실천 행위들을 통칭”하는 것으로 정의

하고 있다.

이러한 소셜 미디어의 특성에 대해서도 아직 학문적인 합의가 있는 것은

아니지만 한국정보산업연합회의 조사연구팀에서 웹 2.0의 핵심 도구로서의 소

셜 미디어의 특성으로 제안한 참여, 공개, 대화, 커뮤니티, 연결의 다섯가지 개

념이 이에 대한 포괄적인 분류에 속한다(<표 3> 참조).

구 분 해 설

참여

(Participation)

소셜 미디어는 관심 있는 모든 사람들의 기여와 피드백을 촉

진하며 미디어와 오디언스의 개념을 불명확하게 함

공개

(Openness)

대부분의 소셜 미디어는 피드백과 참여가 공개되어 있으며

투표, 피드백, 코멘트, 정보 공유를 촉진함으로써 콘텐츠 접

근과 사용에 대한 장벽이 거의 없음

대화

(Conversation)

전통적인 미디어가‘Broadcast’이고 콘텐츠가 일방적으로 오

디언스에게 유통되는 반면 소셜

커뮤니티

(Community)

미디어는 쌍방향성을 띔. 소셜 미디어는 빠르게 커뮤니티를

구성케 하고 커뮤니티로 하여금 공통의 관심사에 대해 이야

기하게 함

연결

(Connectedness)

대부분의 소셜 미디어는 다양한 미디어의 조합이나 링크를

통한 연결상에서 번성

<표 3> 소셜 미디어의 특성

*출처: FKII 조사연구팀(2006. 12). 소셜 미디어(Social media)란 무엇인가?. 정보산업지, 6호. 52∼55.

- 98 -

소셜 미디어가 존재하기 위해서는 이에 걸맞는 소프트웨어가 개발되어야

한다는 점을 생각해 볼 때 소셜 미디어를 이루는 소프트웨어적 요소를 기준

으로 분류를 해 놓은 것도 각 소셜 미디어의 “소셜” 정도를 규명하는데 유용

하게 이용될 수 있다. 소셜 소프트웨어 컨설턴트인 매트 웹(Matt Webb, 2004)

은 소셜 소프트웨어를 구성하는 요소들로 개인 정보 공개(Identity), 공간 공유

의식(Presence), 관계맺기(Relationships), 채팅하기(Conversations), 그룹가입

(groups), 명성공개(Reputation), 그리고 콘텐츠공유(Share) 등을 들고 있다.

종합해 보면 웹 2.0에서는 이용자들 간의 관계, 링크, 그리고 이용자들의 참

여가 강조되고 있다. 최근에 등장한 다양한 소셜 네트워크 사이트들은 위의

특성들을 복합적으로 지니고 있는 것들이다. 예를 들어 페이스북의 기본은 자

신이 이미 아는 사람들을 비롯하여 자신과 비슷한 관심사를 지니고 있는 이

용자들과 관계를 맺고, 자신이 나누고 싶은 글을 올리거나 자신이 관심있는

글에 링크를 걸어 친구들과 나누고, 그에 대한 크고 작은 의견들을 주고받는

소셜 네트워크 플랫폼이다. 뉴스에 대한 평을 하는 블로그의 모임으로 시작한

허핑턴 포스트(Huffington Post)는 시사 문제에 대한 다양한 사람들의 의견을

볼 수 있는 사이트로, 분야별 전문가들의 칼럼도 포함하고 있는 소셜 뉴스 블

로그 플랫폼이다. 소셜 뉴스 플랫폼인 디그(Digg)는 사용자들의 선호도가 가

장 많은 뉴스를 먼저 보여주는 사이트로, 소셜 링크와 이용자들의 온라인 투

표라는 개념을 도입하고 있다. 이러한 소셜 네트워크 서비스는 전 세계적으로

수백개에 이르는 것으로 파악되고 있다.

2) 웹 2.0과 넷 세대(Net Generation)

이처럼 관계, 링크, 그리고 참여가 중요시 되는 다양한 소셜 네트워크 플랫

폼의 등장과 확산은 소비자들의 미디어 이용 습관 변화와 밀접한 관계를 지

니고 있다(Tapscott, 2009). 이는 특히 이러한 디지털 미디어와 함께 자라나고

있는 세대에게 더욱 뚜렷이 나타난다는 것이 부각되고 있는데 넷 세대(Net

Generation), 디지털 네이티브(Digital Native), 또는 Z 세대로도 불리는 이들

의 미디어 이용행태의 가장 큰 특징은 적극성으로, 동시에 여러 가지 일을 하

는 멀티태스킹을 통해 이전 세대에 비해 더욱 더 적극적으로 정보를 찾아 이

용할 뿐만 아니라 이러한 정보를 다른 사람들과도 공유하고 이에 대한 의견

- 99 -

을 나누면서 인터넷의 쌍방향성을 최대한 활용하는 것으로 나타났다(Tapscott,

2008, 2009).

적극성에 이어 소셜 네트워크 시대에 부각되는 또 하나의 개념은 신뢰성이

다. 2009년 4월 닐슨(Nielsen)이 광고의 신뢰성에 대해 조사한 바에 의하면 가

장 신뢰를 많이 받는 것으로 나타난 것은 거의 90%의 신뢰도를 ‘아는 사람의

추천’이었고 2007년부터 2009년 사이에 신뢰도가 하락한 것은 신문이 유일하

였다(63%에서 2% 하락). 소셜 네트워크는 정보 홍수의 시대에 개인에게 판단

의 근거를 제공해 줄 수 있다. 따라서 소셜 네트워크의 시대에는 네트워크를

중심으로 한 신뢰가 강화된다. 스콜러(Skoler, 2009)는 기존 뉴스 미디어의 위

기를 타개하는데 소셜 미디어가 이용될 수 있지만 단순히 뉴스 전달 확산의

도구로만 여겨서는 안 되고, 소셜 네트워크를 통해 진정한 소통을 바탕으로

신뢰를 얻어야 새로운 비즈니스 모델을 개척할 수 있을 것이라 주장한다.

넷 세대의 이러한 특징은 프랑스 시장조사회사인 BVA가 18~24세의 성인을

대상으로 한 조사에서도 나타났는데 이들은 기존의 권위를 부정하고 신속하

게 많은 정보를 얻기 원하고 있으며, 물건을 구매할 때 정가를 주지 않으려

하고 그렇기 때문에 소비 행위가 일종의 ‘사냥’과 같은 형태를 띠고 있다고

조사되었다(Editor & Publisher, 2010년 10월 12일자). 이러한 결과에 따라 에

디터 앤 퍼블리셔지는 신문사들이 기존에 가지고 있던 근본적인 가치관을 수

정해야 하게 될 것이라고 조언을 하고 있다.

3) 웹 3.0, 시만틱 웹(Semantic Web)

웹 3.0이라는 개념은 웹 2.0 시대 이후에 웹이 어떻게 발전할 것인지를 서술

할 때 이용되는 용어이다. 위키피디아(Wikipedia)에서는 웹 3.0이라는 개념이

월드와이드웹을 만든 팀 버너스 리(Tim Berners-Lee)가 2001년에 WWW 컨소

시엄(W3C)에서 언급한 시만틱 웹(Semantic Web)의 의미를 지닌 것으로 묘사

하는데, 이는 앞으로의 웹이 데이터의 ‘의미’를 이해하게 되는 상황을 의미한

다. 데이터의 의미나 중요성을 파악하기 때문에 인간이 컴퓨터에게 별도의 명

령을 내리지 않아도 알아서 필요한 정보를 제공하게 된다는 의미에서 인텔리

전트 웹(intelligent web)이라 불리기도 한다.

예를 들어, 우리가 여행을 하다가 점심시간이 되어 어느 새로운 도시에 도

- 100 -

착하게 되면 웹 3.0에 최적화된 기기는 시간, 우리의 위치 등을 파악해서 그

근처에 점심을 맛있게 하는 곳이 어디어디에 있다고 미리 알려주는 것과 같

은 것이다. 이런 상황이 가능하기 위해서는 우리가 어떤 음식을 좋아하는지도

알아야 하고, 그 도시의 지도, 음식점들의 위치 등도 알고 있어야 할 뿐만 아

니라, 그 근처의 음식점 중에 많은 사람들로부터 좋은 평가를 받은 곳이 어디

인지도 알아야 한다. 게다가 나와 식사를 같이 했던 사람들 중에 그 근처의

음식점을 이용한 적이 있다면 더욱 더 우리의 취향에 맞는 음식점을 제안할

수 있을 것이다.

웹 3.0의 시대는 우리의 다양한 웹 2.0적인 소셜 네트워크들이 서로 유기적

으로 연동이 되어 있어야 가능할 것이다. 이렇게 연결된 네트워크들을 분석해

서 우리가 원하는 것이 무엇인지를 알아내어야 하는 것이다. 이러한 상황이

가능하기 위해서는 상상을 초월하는 방대한 양의 웹 2.0 데이터를 분석할 수

있는 능력이 있어야 한다. 따라서 아직까지는 완전한 웹 3.0이 존재하지는 않

지만 최근 웹 2.0 서비스들이 웹 3.0을 지향하는 기능을 선보이기 시작하였다.

2010년 10월 초에는 마이크로소프트의 검색 서비스인 빙(Bing)이 페이스북

과 연동된 검색 서비스를 제공할 예정이라는 발표를 하기도 하였다

(TechCrunch, 2010년 10월 13일자 기사). 이와 유사하게 페이스북에서는 2010

년 4월에 다른 네트워크들에게 데이터를 공개하는 “오픈 그래프(Open

Graph)"라는 개념을 소개하여 페이스북의 네트워크를 다른 소셜 서비스들의

네트워크와 연동시킬 수 있는 기능을 제공하기 시작하였다(Mashable, 2010년

4월 21일자 기사).

페이스북의 오픈 그래프를 이용하면 우리가 위치나 장소에 대해 선호도를

부여하는 포스퀘어(Foursquare)의 네트워크와 페이스북의 네트워크가 연동이

가능하고 나의 페이스북 친구들이 어느 장소를 방문했었고, 그 중에서 어떤

음식점에서 식사를 했고, 그 음식점에 대한 평가가 어떠하였는지를 알 수 있

게 된다. 또 우리가 CNN 뉴스 사이트를 방문하면 나의 페이스북 친구들 중

에 어떤 친구들이 그 사이트를 방문 했었는지를 알려주고, 그 중에서 어떤 기

사에 특히 관심을 보였는지를 알려줄 수도 있게 된다. 이렇게 다양한 소셜 네

트워크 서비스들이 서로 연동되는 상황이 웹 3.0의 시작점이다. 현재 이와 같

이 몇몇 뉴스 사이트들이 페이스북과 연동되는 서비스를 제공하고 있다.

- 101 -

3. 소셜 미디어의 최적화와 신문사의 웹사이트

1) 소셜 미디어 최적화의 개념

웹 2.0의 시대에 주목을 받는 개념 중 하나는 이러한 네트워크상에서 자신

이 제공하는 사이트에 더 많은 이용자를 끌어들이는 방법을 의미하는 소셜

미디어 최적화(Social Media Optimization, SMO) 또는 소셜 검색 엔진 최적화

(Social Search Engine Optimization, SEO)이다. 정보의 홍수시대에서 정보를

제공하는 사이트들은 어떻게 하면 더 많은 이용자를 끌 수 있는가에 대한 관

심이 커질 수 밖에 없다.

소셜 미디어에 자신의 콘텐츠를 최적화하기 위한 방안은 크게 두 가지로

구분된다. 그 하나는 콘텐츠 내에 소셜 미디어적인 기능들을 추가하는 것이고

또 다른 하나는 소셜 미디어를 통해 내용을 홍보하는 것이다. 콘텐츠 내에 소

셜 미디어적인 기능을 추가한다는 것은 내용을 다른 사이트에서도 손쉽게 공

유할 수 있게 하는 “나누기” 기능을 추가한다거나 이용자들이 콘텐츠에 대해

평가를 하거나 코멘트를 할 수 있게 하는 기능을 추가하거나 RSS(Real

Simple Syndication)의 기능과 같이 특정 주제나 사이트에 올려지는 정보가

자동적으로 전달되도록 하는 기능을 추가할 수 있도록 해 주는 것을 의미한

다. 소셜 미디어를 통해 내용을 홍보하는 방법으로는 페이스북이나 트위터 계

정을 통해 자신의 사이트를 홍보하는 방법이다. 블로그를 운영하여 사이트에

올려지는 내용에 대해 언급을 하는 방법 등을 들 수 있다.

2) 소셜 미디어 최적화와 신문사의 웹사이트

소셜 미디어에 콘텐츠를 최적화하는 것에 대한 관심은 이용률이 지속적으

로 하락하고 있는 기존 신문사들에게는 큰 관심사일 수밖에 없다. 가장 좋은

방법으로 제안되는 것은 다음의 세 가지이다.

- 외부의 내용에 링크를 제공해라

- 내부의 내용에도 링크를 걸어놓아라

- 관심 주제 페이지를 만들고 지속적인 업데이트를 해라

- 102 -

물론 위의 사항을 실천하기 위해서는 적절한 인적, 물적 자원이 뒷받침 되어

야 할 것이다. 뉴욕타임즈의 기획을 담당한 마샬 시몬즈(Marshall Simmonds)

에 의하면 이러한 것들이 가장 효율적인 방안으로 판단되었고 이러한 사항들

이 뉴욕타임즈의 사이트에 적용된 것으로 언급되고 있다(SearchWritten, 2010

년 1월 30일자 기사).

4. 미국, 영국, 한국신문웹사이트의소셜미디어최적화측정비교

1) 측정 요소

위에서 살펴본 바와 같이 웹 2.0이나 소셜 미디어는 피할 수 없는 대세이다.

하지만 과연 기존 신문사의 웹사이트에서 얼마나 이런 요소들을 포함시키고

있는지는 아직 알려지지 않고 있다. 본 장에서는 기존의 신문사 사이트들이

소셜 미디어에 얼마나 최적화가 되어있는지를 측정하여 신문사들이 얼마나

미래의 환경에 적절하게 대처하고 있는가를 알아보고, 이를 바탕으로 앞으로

어떤 점을 개선해야 할 것인가에 대한 함의점을 모색해 보고자 한다.

이를 위해 위에서 언급한 웹 2.0적인 특성과 웹 3.0적인 특성들을 선정, 미

국, 영국, 한국 국가별로 세 개씩 선정된 신문사들의 웹사이트를 분석하였다.

웹 2.0적인 특성은 코모드와 크리스나머티(Cormode & Krishnamurthy, 2008)

가 소셜 네트워크 플랫폼을 분석하는데 이용한 기준들 중에서 신문사에 적용

할 수 있는 부분을 추출하였고, 여기에 현재 사용 가능한 웹 3.0적인 기능인

페이스북과의 연동과 같은 서비스의 존재를 추가하여 ‘소셜 미디어 최적화’라

는 관점에서 분석하였다.

소셜 미디어적 특성은 사이트 전체에 적용되는 개념일 수도 있고, 개별 기

사에 적용될 수도 있는 개념인 만큼 이를 구분하여 측정 요소를 선정하였다.

선정된 요소는 기본적으로 각 신문사의 웹사이트에서 관찰할 수 있는 요소들

로 한정되었는데 선정된 요소들은 다음과 같다.

- 103 -

(1) 전체 사이트의 소셜 미디어적 요소

① 뉴스 배포 방법의 다양성

- 뉴스를 이메일로 전할 수 있는가

- 주제별 RSS 피드를 제공하는가

- 팟캐스트(podcast) 등 멀티미디어적인 내용을 제공하고 있는가

- 모바일 서비스를 제공하고 있는가

② 소셜 네트워크 기능을 포함하고 있는가

- 다른 소셜 네트워크에 보내기 기능이 있는가

- 많이 읽은, 또는 선호하는 기사 목록을 제공하고 있는가

- 다른 사이트의 네트워크와 연계 기능이 있는가

③ 사이트에 외부 글을 허용하는가의 여부

- 외부의 글이 사이트 본문에 보여지도록 되어있는가

- 사이트 내에서 관리하는 블로그가 있는가

④ 사이트 관리 측면

- ‘관심 주제’, Hot Topic 등의 주제별 모음을 제공하는가

- 이용자간의 커뮤니티를 구성하는 것이 가능한가

- 개인 맞춤형 뉴스페이지를 제공하는가

(2) 개별 기사의 소셜 미디어적 요소

① 뉴스 배포 방법의 다양성

- 뉴스를 이메일로 전달할 수 있는가

- 104 -

- 소셜 북마킹 기능을 포함하고 있는가

- 기사에 대한 외부의 접근을 허용하고 있는가

② 소셜 네트워크 기능 포함 여부

- 태그로 다른 사이트의 관련 기사와 연결되어 있는가

- 개인의 기사에 대한 선호도를 표시할 수 있는가

- 읽은 횟수, 공유된 횟수 등 기사 관련 통계를 제공하는가

③ 사이트에 외부의 글을 허용하는가 여부

- 개인의 댓글을 허용하는가

아래는 위의 요소들이 각 신문사의 웹사이트에 존재하는가를 보기 위해 각

신문사의 사이트를 분석한 결과를 각 신문사 별로 정리하여 화면과 함께 제

공하였다.

2) 뉴욕타임즈(New York Times)

(1) 전체 사이트 분석 결과

뉴욕타임즈의 전체 사이트에 대하여 위의 각 요소들 존재 유무를 분석한

결과는 <표 4>에 정리되어 있다.

- 105 -

소셜 미디어적 요소들 유무

뉴스 배포 방법의 다양성 　

개인별 이메일로 종합뉴스 제공 √

주제별 RSS Feed 제공 √

Podcast 제공 √

모바일 서비스 제공 √

소셜 네트워크 기능 포함 여부 　

소셜 네트워크에 보내기 가능 √

다른 사이트의 네트워크와 연계 √

많이 읽은, 선호하는 기사 목록 제공 √

외부 뉴스 사이트로 링크 √

사이트에 외부 글 포함 허용 여부 　

관리하는 블로그 √

타인의 블로그 내용 포함 　

사이트 관리 측면 　

Hot Topic 뉴스 모음 제공 √

이용자간 커뮤니티 구성 가능성 　

개인 맞춤형 가능 √

<표 4> 뉴욕타임즈 전체 사이트의 소셜 미디어적 요소 존재 유무

전체적으로 뉴욕타임즈는 소셜 미디어적 요소를 최대한 포함시켜 다양한

방법으로 뉴스를 제공하고 있는 것을 볼 수 있었다. 기사를 개인 메일로 보낼

수도 있었고 기본적으로 페이스북이나 트위터에도 기사를 링크시킬 수 있는

간단한 기능이 제공되었고 있었는데 이를 좀 더 펼쳐서 7~8개의 소셜 네트워

크에 추가로 보낼 수 있는 기능을 제공하고 있기도 하였다(<그림 44> 참조).

특히 주제별로 기사를 자동으로 전달하도록 하는 RSS 기능은 수 백 개의 다

양한 주제로 구성되어 있었을 뿐만 아니라 블로그별로도 설정이 가능하였다

(<그림 45> 참조).

- 106 -

<그림 44> 펼치기 전후의 뉴욕타임즈의 소셜 미디어로 내보내기 기능 화면 비교

<그림 45> 뉴욕타임즈 RSS 주제 화면의 일부

뉴욕타임즈의 가장 큰 특징은 다른 소셜 네트워크에 기사를 링크시키는 것

뿐만 아니라 페이스북의 네트워크와 연결해서 페이스북의 친구들이 뉴욕타임

즈 웹사이트에서 어떤 활동을 하고 있는지를 알 수 있게 해 주는 웹 3.0적인

특성을 지녔다는 것이다. <그림 46>에서 보면 뉴욕타임즈의 첫 화면 오른쪽에

페이스북 친구들이 어떤 기사들을 읽었는지를 보여준다.

- 107 -

<그림 46> 뉴욕타임즈의 페이스북 연동 화면

뉴욕타임즈의 첫 화면에는 상당히 많은 양의 정보가 있었는데 첫 화면에

가장 중요한 뉴스들을 편집해서 제공하고 중간 아래쪽으로 보면 인기 있는

기사들이 이메일된 순서, 블로그된 순서, 검색된 순서, 그리고 접속된 순서의

다양한 방법으로 정리되어 있는 것을 볼 수 있다(<그림 47>, <그림 48> 참

조).

- 108 -

<그림 47> 뉴욕타임즈의 인기 기사 제공 화면 위치

<그림 48> 뉴욕타임즈의 인기 기사 제공 내용

외부 사이트와의 링크는 그다지 많지 않았고 AP나 로이터(Reuters)의 기사

- 109 -

에 대한 소개가 첫 화면 중간에 조그맣게 제공되고 있었다(<그림 49> 참조).

<그림 49> 뉴욕타임즈의 AP와 로이터로의 링크 화면

또한 뉴욕타임즈 내에는 활발하게 활동하는 블로그들이 존재하였고 이들의

제목이 첫 화면의 곳곳에서 링크할 수 있도록 되어 있었을 뿐만 아니라 첫 화

면의 가장 하단 오른쪽 단으로는 최신 블로그 포스트를 별도로 정리하여 제

공하고 있었다(<그림 50> 참조).

- 110 -

<그림 50> 뉴욕타임즈의 최신 블로그 정리 화면

이 밖에 타임즈 피플(Times People)이라는 제목으로 자신의 페이스북과 좀

더 유기적으로 연동할 수 있는 기능을 제공하고 있기도 하였다(<그림 51> 참

조).

- 111 -

<그림 51> 뉴욕타임즈의 타임즈 피플 화면

(2) 개별 기사 분석 결과

뉴욕타임즈의 개별 기사에 대하여 위의 각 요소들 존재 유무를 분석한 결

과는 <표 5>에 정리되어 있다.

- 112 -

개별 기사 유무

뉴스 배포 방법의 다양성 　

개인별 이메일로 기사 전송 √

소셜 북마킹 기능 포함 √

기사에 대한 외부 접근 허용 √

소셜 네트워크 기능 포함 여부 　

태그로 다른 사이트의 관련 기사와 연결 　

개인 기사에 대한 선호도 　

기사 관련 통계 제공 √

사이트에 외부 글 포함 허용 여부 　

개인의 댓글 허용 √

<표 5> 뉴욕타임즈 개별 기사의 소셜 미디어적 요소 존재 유무

개별 기사적인 측면에서 뉴욕타임즈는 기존 기사의 모습을 최대한 유지하

면서도 소셜 네트워크 기능을 최대한 포함시키려 했다는 것을 알 수 있다. 기

사의 첫 화면에 보이는 것은 기본적인 페이스북과 트위터, 그리고 이메일 등

으로 전달할 수 있는 기능이었다(<그림 52> 참조).

- 113 -

<그림 52> 뉴욕타임즈 기사 화면

개별 기사에 댓글을 달 수 있는 기능은 있었고 댓글의 수가 전체 기사 화

면에서 보이도록 되어 있었지만, 기사 본문으로 들어가면 댓글의 수에 대한

정보와 댓글을 볼 수 있는 링크는 기사 중간에 제공되어 있었다. 뿐만 아니라

기사를 보면서 관련 주제에 관해 이메일을 받을 수 있도록 설정을 할 수도 있

었고 관련 주제별 인기 기사 목록이 제공되기도 하였다(<그림 53> 참조).

- 114 -

<그림 53> 뉴욕타임즈의 댓글 수와 댓글 링크 위치 및 내용

종합적으로 볼 때 뉴욕타임즈는 소셜 미디어적인 기능을 포함시키는 것의

중요성을 충분히 인식하고 있고 이러한 기능들을 곳곳에 포함시켰다는 것을

알 수 있다.

3) 워싱턴포스트(Washington Post)

(1) 전체 사이트 분석 결과

워싱턴포스트의 전체 사이트에 대하여 위의 각 요소들 존재 유무를 분석한

결과는 <표 6>에 정리되어 있다.

- 115 -

소셜 미디어적 요소들 유무

뉴스 배포 방법의 다양성 　

개인별 이메일로 종합뉴스 제공 √

주제별 RSS Feed 제공 √

Podcast 제공 √

모바일 서비스 제공 √

소셜 네트워크 기능 포함 여부 　

소셜 네트워크에 보내기 가능 √

다른 사이트의 네트워크와 연계 √

많이 읽은, 선호하는 기사 목록 제공 √

외부 뉴스 사이트로 링크 √

사이트에 외부 글 포함 허용 여부 　

관리하는 블로그 √

타인의 블로그 내용 포함 　

사이트 관리 측면 　

Hot Topic 뉴스 모음 제공 √

이용자간 커뮤니티 구성 가능성 　

개인 맞춤형 가능 　

<표 6> 워싱턴포스트 전체 사이트의 소셜 미디어적 요소 존재 유무

기본적으로 워싱턴포스트 역시 소셜 네트워크 관련 서비스를 강조하고 있

는 것을 볼 수 있다. 기본적으로 이메일, RSS, 모바일 등 다양한 방법으로 뉴

스를 제공하고 있었고 특히 첫 화면에 소셜 네트워크 관련 내용들을 모아서

뚜렷하게 표시하고 있었다. <그림 54>를 보면 워싱턴 포스트의 네트워크 뉴스

란이 첫 화면에 뚜렷하게 표시된 것이 보이는데, 여기에는 가장 인기있는 기

사 뿐만 아니라 가장 많이 트위터로 보내진 기사도 제공되어 있고, 또 페이스

북과의 연동을 통해 페이스북 친구들의 활동을 보여주고 있기도 하다. 이처럼

워싱턴 포스트도 소셜 네트워크의 중요성을 충분히 인식하고 이를 사이트에

포함시키기 위한 다양한 노력을 기울이는 것을 볼 수 있다. 하지만 뉴욕타임

즈보다는 좀 더 압축된 형태로 제공하고 있다는 것을 볼 수 있다.

또한 첫 화면 위에는 관심있는 주제의 목록이 간편하게 제공되고 있었는데

- 116 -

이로 인해 간결하게 가장 관심의 대상이 되는 주제들이 무엇인지를 볼 수 있

다는 점이 장점으로 부각되었다.

<그림 54> 워싱턴포스트의 첫 화면

워싱턴포스트 역시 뉴욕타임즈와 마찬가지로 첫 화면의 내용이 상당히 많

아서 여러 화면을 스크롤 하도록 되어 있었는데 이 중 첫 페이지 중간 아래쪽

에 정치, 경제 관련 주요 주제들을 묶어 놓고 ‘특별 주제(Featured)’의 형식으

로 제공하고 있었다(<그림 55> 참조).

- 117 -

<그림 55> 워싱턴포스트의 ‘특별 주제’들을 모아놓은 화면

워싱턴포스트의 가장 큰 특징 중의 하나는 이 사이트에서 볼 수 있는 다양

한 블로그의 수이다. 워싱턴포스트의 블로그는 ‘뉴스’ 항목에 포함되어 있는데

백여개가 넘는 블로그들이 voices.washingtonpost.com 주소 하에 제공되고 있

었다(<그림 56> 참조). 또 블로그의 내용들이 뉴스의 일부로 뉴스 화면 곳곳

에서 링크되어 있는 것을 볼 수 있었는데 이로 인해 포스트에서 제공하는 콘

텐츠가 더욱 다양해지는 것을 볼 수 있었다.

- 118 -

<그림 56> 워싱턴포스트의 블로그 목록의 일부 화면

이 밖에 다른 사이트로 링크하는 기능은 긴 첫 화면 가장 하단 오른쪽에

협력 사이트의 기사 제목이 아주 작게 제공되고 있었다.

(2) 개별 기사 분석 결과

워싱턴포스트의 개별 기사에 대하여 위의 각 요소들 존재 유무를 분석한

- 119 -

결과는 <표 7>에 정리되어 있다.

개별 기사 유무

뉴스 배포 방법의 다양성 　

개인별 이메일로 기사 전송 √

소셜 북마킹 기능 포함 √

기사에 대한 외부 접근 허용 √

소셜 네트워크 기능 포함 여부 　

태그로 다른 사이트의 관련 기사와 연결 　

개인 기사에 대한 선호도 √

기사 관련 통계 제공 　

사이트에 외부 글 포함 허용 여부 　

개인의 댓글 허용 √

<표 7> 워싱턴포스트 개별 기사의 소셜 미디어적 요소 존재 유무

기사에서는 기본적으로 이메일이나 다른 소셜 네트워크 사이트로 연결시키

는 기능이 제공되고 있었다. 뉴욕타임즈와는 달리 워싱턴포스트에는 해당 기

사를 ‘추천’할 수 있는 기능이 기사 첫 머리와 하단에 포함되어 있었고 이에

대한 수치가 제공되고 있었다는 점이 주목할 만하다(<그림 57> 참조).

- 120 -

<그림 57> 워싱턴포스트 기사 화면

4) USA투데이(USA Today)

(1) 전체 사이트 분석 결과

USA투데이의 전체 사이트에 대하여 위의 각 요소들 존재 유무를 분석한

결과는 <표 8>에 정리되어 있다.

- 121 -

소셜 미디어적 요소들 유무

뉴스 배포 방법의 다양성 　

개인별 이메일로 종합뉴스 제공 √

주제별 RSS Feed 제공 √

Podcast 제공 √

모바일 서비스 제공 √

소셜 네트워크 기능 포함 여부 　

소셜 네트워크에 보내기 가능 √

다른 사이트의 네트워크와 연계 　

많이 읽은, 선호하는 기사 목록 제공 √

외부 뉴스 사이트로 링크 √

사이트에 외부 글 포함 허용 여부 　

관리하는 블로그 √

타인의 블로그 내용 포함 　

사이트 관리 측면 　

Hot Topic 뉴스 모음 제공 √

이용자간 커뮤니티 구성 가능성 　

개인 맞춤형 가능 √

<표 8> USA투데이 전체 사이트의 소셜 미디어적 요소 존재 유무

USA투데이에서 역시 다른 사이트와 마찬가지로 기본적으로 다른 소셜 네

트워크로 기사를 보내 공유하는 기능이라거나 이메일로 보내는 기능, 그리고

RSS 로 받아보도록 하는 기능을 제공하고 있었다. 첫 페이지에도 소셜 네트워

크적인 요소를 포함시키고 있었는데 네트워크적 요소 중에는 좀 더 약한 ‘인

기기사’가 가장 먼저 제공되고 있었다(<그림 58> 참조).

- 122 -

<그림 58> USA투데이 첫 화면

USA투데이에서는 사이트 내의 블로그들을 “커뮤니티”라는 제목 하에 별도

로 모아서 제공하고 있었는데, 이는 이용자 간에 커뮤니티를 만들어서 서로

교류하는 것을 장려한다기보다는 블로그의 기능을 좀 더 강화하여 사이트의

일부로 만들기 위한 노력으로 인식된다(<그림 59> 참조).

- 123 -

<그림 59> USA투데이의 블로그를 모아놓은 화면

USA투데이에서는 또한 개인 맞춤형 페이지를 구성할 수 있도록 해 놓았는

데 여기에서는 다른 독자들과만 연계를 할 수 있도록 해 놓고, 다른 소셜 미

디어와의 연계는 기사를 내보내는 기능만 가능하게 하고 있었다. 즉, USA투

데이 내의 커뮤니티만 허용하고 있었다(<그림 60> 참조).

- 124 -

<그림 60> USA투데이의 개인 맞춤 화면

(2) 개별 기사 분석 결과

USA 투데이의 개별 기사에 대하여 위의 각 요소들 존재 유무를 분석한 결

과는 <표 9>에 정리되어 있다.

- 125 -

개별 기사 유무

뉴스 배포 방법의 다양성 　

개인별 이메일로 기사 전송 √

소셜 북마킹 기능 포함 √

기사에 대한 외부 접근 허용 √

소셜 네트워크 기능 포함 여부 　

태그로 다른 사이트의 관련 기사와 연결 　

개인 기사에 대한 선호도 √

기사 관련 통계 제공 √

사이트에 외부 글 포함 허용 여부 　

개인의 댓글 허용 √

<표 9> USA투데이 개별 기사의 소셜 미디어적 요소 존재 유무

USA투데이 개별 기사에서는 다양한 소셜 네트워크와 기사를 공유할 수 있

는 기능이 펼칠 수 있는 메뉴의 형태로 제공되고 있었고, 기사에 댓글을 달

수 있는 기능이 제공되고 있었을 뿐 아니라 기사에 댓글이 몇 개 달렸는지,

그리고 몇 번 추천이 되었는지에 대한 통계 정보도 제공되고 있었다. 주목할

만한 것은 다른 사이트와 달리 뉴스를 종합해서 읽을 수 있는 ‘뉴스리더’ 사

이트와도 연동을 시키고 있다는 것이었다(<그림 61> 참조).

- 126 -

<그림 61> USA투데이 기사 화면

전반적으로 USA 투데이는 자신의 기사를 소셜 미디어 사이트로 보내는 기

능으로만 이용하는데 유용한 기능들 위주로 소셜 네트워크적 요소가 가미되

어 있는 것을 볼 수 있다. 그 외의 블로그 활동이나 다른 활동들은 사이트 내

에서 독자가 다른 독자들과 교류를 할 수 있는 기능을 강화하는데 주력하고

있는 것으로 보인다.

5) 가디언(Guardian)

(1) 전체 사이트 분석 결과

영국의 가디언의 전체 사이트에 대하여 위의 각 요소들 존재 유무를 분석

한 결과는 <표 10>에 정리되어 있다.

- 127 -

소셜 미디어적 요소들 유무　

뉴스 배포 방법의 다양성 　

개인별 이메일로 종합뉴스 제공 √

주제별 RSS Feed 제공 √

Podcast 제공 √

모바일 서비스 제공 √

소셜 네트워크 기능 포함 여부 　

소셜 네트워크에 보내기 가능 √

다른 사이트의 네트워크와 연계 　

많이 읽은, 선호하는 기사 목록 제공 √

외부 뉴스 사이트로 링크 　

사이트에 외부 글 포함 허용 여부 　

관리하는 블로그 √

타인의 블로그 내용 포함 　

사이트 관리 측면 　

Hot Topic 뉴스 모음 제공 √

이용자간 커뮤니티 구성 가능성 　

개인 맞춤형 가능 　

<표 10> 가디언 전체 사이트의 소셜 미디어적 요소 존재 유무

가디언의 사이트에서도 기본적인 소셜 네트워크로의 공유 기능은 제공되고

있었다. 하지만 그 요소는 주로 다른 사이트에 기사를 공유하는 기능, 그리고

기사에 대한 선호도 제공, 그리고 ‘Zeitgeist’라는 명칭의 주요 기사 등의 기능

들로 국한되어 있음을 볼 수 있다. 개인 맞춤형 사이트라거나 다른 사이트와

의 유동적 연계 등의 기능이 제공되고 있지는 않았지만 기사별로 댓글이 몇

개 달렸는지를 첫 화면에서 볼 수 있었다(<그림 62> 참조).

- 128 -

<그림 62> 가디언의 첫 화면

많이 읽은 기사, 주요 기사, 그리고 최신 기사 목록은 첫 화면의 하단 쪽으

로 배치되어 있었다(<그림 63> 참조).

- 129 -

<그림 63> 가디언의 인기 기사 목록 화면

(2) 개별 기사 분석 결과

가디언의 개별 기사에 대하여 위의 각 요소들 존재 유무를 분석한 결과는

<표 11>에 정리되어 있다.

- 130 -

개별 기사 유무

뉴스 배포 방법의 다양성 　

개인별 이메일로 기사 전송 √

소셜 북마킹 기능 포함 √

기사에 대한 외부 접근 허용 √

소셜 네트워크 기능 포함 여부 　

태그로 다른 사이트의 관련 기사와 연결 　

개인 기사에 대한 선호도 √

기사 관련 통계 제공 √

사이트에 외부 글 포함 허용 여부 　

개인의 댓글 허용 √

<표 11> 가디언 개별 기사의 소셜 미디어적 요소 존재 유무

가디언의 기사 페이지에서는 오른쪽 상단부에 기본적으로 가장 많이 이용

하는 트위터와 페이스북이 부각되어 있고 이외 추가 버튼을 누르면 연결할

수 있는 전체 소셜 네트워크 사이트의 목록이 뜨도록 되어있다. 또 이 부분에

는 이 기사에 대한 코멘트가 몇 개 달렸는지를 볼 수 있어서 기사에 대한 사

람들의 관심도를 알 수 있게 해 준다(<그림 64> 참조).

- 131 -

<그림 64> 가디언의 기사 화면

전반적으로 볼 때 가디언은 뉴욕타임즈나 워싱턴포스트에 비해서는 다른

소셜 네트워크와의 연계를 강조하기보다는 사이트 내에서 이용자들 간의 교

류를 더 강조한 사이트라 평가할 수 있다.

6) 텔레그라프(Telegraph)

(1) 전체 사이트 분석 결과

영국의 텔레그라프의 전체 사이트에 대하여 위의 각 요소들 존재 유무를

분석한 결과는 <표 12>에 정리되어 있다.

- 132 -

소셜 미디어적 요소들 유무　

뉴스 배포 방법의 다양성 　

개인별 이메일로 종합뉴스 제공 √

주제별 RSS Feed 제공 √

Podcast 제공 √

모바일 서비스 제공 √

소셜 네트워크 기능 포함 여부 　

소셜 네트워크에 보내기 가능 √

다른 사이트의 네트워크와 연계 　

많이 읽은, 선호하는 기사 목록 제공 √

외부 뉴스 사이트로 링크 　

사이트에 외부 글 포함 허용 여부 　

관리하는 블로그 √

타인의 블로그 내용 포함 　

사이트 관리 측면 　

Hot Topic 뉴스 모음 제공 　

이용자간 커뮤니티 구성 가능성 √

개인 맞춤형 가능 √

<표 12> 텔레그라프 전체 사이트의 소셜 미디어적 요소 존재 유무

텔레그라프 역시 기본적으로 8~10개의 소셜 네트워크로의 연계 기능은 모

두 갖추고 있었고 선호하는 기사 목록을 제공하고 있었다. 또한 첫 화면 가장

상단부에 블로그와 댓글들을 모아서 보여주고 있었다. 가디언과 다른 점은 첫

화면에서 기사에 달린 댓글의 수를 볼 수 없었다는 것이다. 하지만 텔레그라

프에서도 관리하는 블로그 사이트에서는 각 블로그별로 몇 개의 댓글이 달렸

는지를 보여주고 있었다. 이는 개별 기사 화면에서도 마찬가지였는데 전문 기

자의 기사에 달린 댓글의 수가 처음에는 제공되지 않다가 댓글을 누르게 되

면 달린 댓글의 수가 나타나는 것을 볼 수 있었다. 이런 점에서 전문 기자의

기사와 블로그와의 차별을 두고 있는 듯 했다(<그림 65> 참조).

- 133 -

<그림 65> 텔레그라프의 첫 화면

텔레그라프에서는 또한 사이트에 등록된 이용자들에게 개인 페이지를 제공

하여 다른 이용자들과 연계할 수 있도록 하고 있기도 하고, 그룹에 가입을 할

수도 있도록 하고 있다(<그림 66> 참조).

- 134 -

<그림 66> 텔레그라프의 개인 맞춤 화면

(2) 개별 기사 분석 결과

텔레그라프의 개별 기사에 대하여 위의 각 요소들 존재 유무를 분석한 결

과는 <표 13>에 정리되어 있다.

- 135 -

개별 기사 유무

뉴스 배포 방법의 다양성 　

개인별 이메일로 기사 전송 √

소셜 북마킹 기능 포함 √

기사에 대한 외부 접근 허용 √

소셜 네트워크 기능 포함 여부 　

태그로 다른 사이트의 관련 기사와 연결 　

개인 기사에 대한 선호도 √

기사 관련 통계 제공 √

사이트에 외부 글 포함 허용 여부 　

개인의 댓글 허용 √

<표 13> 텔레그라프 개별 기사의 소셜 미디어적 요소 존재 유무

텔레그라프의 기사 페이지에서도 다른 사이트와 마찬가지로 소셜 네트워킹

사이트로 기사 링크를 보내는 기능을 제공하고 있었다. 하지만 가디언과 마찬

가지로 처음 보이는 화면에서는 페이스북과 트위터 등의 주요 사이트와의 링

크가 보이고 추가로 버튼을 클릭하여 몇 개의 다른 사이트들과 기사를 공유

할 수 있도록 하고 있다(<그림 67> 참조).

- 136 -

<그림 67> 텔레그라프의 기사 화면

텔레그라프에서는 또한 기사 페이지에 관련 주제에 관한 RSS 피드를 받아

볼 수 있는 기능을 잘 보이는 곳에 두고 있었고 또한 가장 많이 읽은 기사 목

록의 경우에도 관련 섹션별로 별도로 제공하고 있었다(<그림 68> 참조).

- 137 -

<그림 68> 텔레그라프의 섹션별 인기 기사 화면

전반적으로 텔레그라프도 가디언과 유사하게 사이트 내에서 이용자들 간의

교류를 더 강조한 경우로 볼 수 있는데 가디언과는 달리 사이트 내에서의 이

용자들 간의 네트워크를 구축할 수 있는 기능을 추가하고 있다. 또 텔레그라

프에서는 전문기자의 기사와 개인들의 블로그와의 차별화를 위한 노력도 하

고 있음을 알 수 있다.

7) 데일리메일(Daily Mail)

(1) 전체 사이트 분석 결과

영국의 데일리메일의 전체 사이트에 대하여 위의 각 요소들 존재 유무를

분석한 결과는 <표 14>에 정리되어 있다.

- 138 -

소셜 미디어적 요소들 　유무

뉴스 배포 방법의 다양성 　

개인별 이메일로 종합뉴스 제공 √

주제별 RSS Feed 제공 √

Podcast 제공 √

모바일 서비스 제공 √

소셜 네트워크 기능 포함 여부 　

소셜 네트워크에 보내기 가능 √

다른 사이트의 네트워크와 연계 　

많이 읽은, 선호하는 기사 목록 제공 √

외부 뉴스 사이트로 링크 　√

사이트에 외부 글 포함 허용 여부 　√

관리하는 블로그 　

타인의 블로그 내용 포함 　

사이트 관리 측면 　

Hot Topic 뉴스 모음 제공 √

이용자간 커뮤니티 구성 가능성 　

개인 맞춤형 가능 √

<표 14> 데일리메일 전체 사이트의 소셜 미디어적 요소 존재 유무

데일리메일의 홈페이지는 ‘뉴스’ 페이지와는 다른 기능을 한다. 뉴욕타임즈

나 워싱턴포스트보다 더 많은 내용이 담겨 있어서 화면 스크롤 양이 가장 많

다. 홈페이지에서 볼 수 있는 소셜 네트워크적인 내용은 기사에 달린 댓글의

수가 제공된다는 것이다(<그림 69> 참조).

- 139 -

<그림 69> 데일리메일의 홈페이지 화면

많이 읽은 뉴스의 경우에는 홈페이지 상단의 ‘뉴스’ 메뉴에 하나의 항목으

로 되어있는데 뉴스페이지에 들어가면 헤드라인과 가장 많이 읽은 뉴스의 목

록을 볼 수 있다. 또한 블로그나 이용자의 글은 상단 메뉴의 ‘토론’(Debate)

메뉴의 일부로 되어있다(<그림 70> 참조).

<그림 70> 데일리메일 상단의 뉴스 메뉴

데일리메일에서도 다른 소셜 네트워크로 기사를 보내는 기능을 제공하고

있기는 하지만 기사의 가장 하단에 제공하고 있다는 점이 다른 사이트들과

- 140 -

다르다고 할 수 있다(<그림 71> 참조).

<그림 71> 데일리메일의 소셜 네트워크 연동 화면

이와 더불어 자신이 선호하는 뉴스를 지정하면 자신의 뉴스 페이지에서 뉴

스를 볼 수 있도록 해 주는 개인 맞춤 기능도 제공하고 있다. 또한 사이트 곳

곳에 ‘꼭 보아야 할 것들‘이나 연예인 중심의 ‘Femail’과 같이 독자들의 눈길

을 끌기 위한 기사 모음을 제공하고 있기도 하다. 이 밖에 ‘코멘트가 많이 달

린 글들’ 목록이라는 소셜 네트워크적인 기능도 제공하고 있다.

하지만 데일리 메일의 가장 특이한 점은 홈페이지 가장 하단 부분에 다른

뉴스 사이트에서 제공되는 뉴스 중에 중요한 것들을 모아서 링크를 할 수 있

는 기능을 제공한다는 것이다. 물론 화면 스크롤을 많이 해야 볼 수 있지만

이렇게 많은 분량을 제공한다는 것이 다른 사이트와 다르다고 할 수 있다(<그

림 72> 참조).

- 141 -

<그림 72> 데일리메일의 다른 뉴스 사이트의 뉴스를 모아놓은 화면

(2) 개별 기사 분석 결과

데일리 메일의 개별 기사에 대하여 위의 각 요소들 존재 유무를 분석한 결

과는 <표 15>에 정리되어 있다.

- 142 -

개별 기사 유무

뉴스 배포 방법의 다양성 　

개인별 이메일로 기사 전송 √

소셜 북마킹 기능 포함 √

기사에 대한 외부 접근 허용 √

소셜 네트워크 기능 포함 여부 　

태그로 다른 사이트의 관련 기사와 연결

개인 기사에 대한 선호도 　

기사 관련 통계 제공 √

사이트에 외부 글 포함 허용 여부 　

개인의 댓글 허용 √

<표 15> 데일리메일 개별 기사의 소셜 미디어적 요소 존재 유무

데일리 메일의 기사에 포함된 소셜 네트워크 링크 기능은 다른 여타의 사

이트들과는 달리 기사가 끝나는 지점에 위치해 있다. 사실 기사를 읽은 후에

이것을 공유할 것인지를 결정하는 것이기 때문에 끝에 있는 것이 논리적으로

는 적절하지만, 다른 사이트에 비해서는 소셜 네트워크에 대한 강조를 덜 하

는 것이라 볼 수도 있다. 하지만 기사에 달린 댓글의 수에 대한 통계는 잘 보

이는 곳에 제공하고 있다(<그림 73> 참조)

- 143 -

<그림 73> 데일리메일의 기사화면

8) 조선일보

1) 전체 사이트 분석 결과

조선일보의 전체 사이트에 대하여 위의 각 요소들 존재 유무를 분석한 결

과는 <표 16>에 정리되어 있다.

- 144 -

소셜 미디어적 요소들 유무

뉴스 배포 방법의 다양성 　

개인별 이메일로 종합뉴스 제공 √

주제별 RSS Feed 제공 √

Podcast 제공 　

모바일 서비스 제공 √

소셜 네트워크 기능 포함 여부 　

소셜 네트워크에 보내기 가능 √

다른 사이트의 네트워크와 연계 　

많이 읽은, 선호하는 기사 목록 제공 √

외부 뉴스 사이트로 링크 　

사이트에 외부 글 포함 허용 여부 　

관리하는 블로그 √

타인의 블로그 내용 포함 　

사이트 관리 측면 　

Hot Topic 뉴스 모음 제공 √

이용자간 커뮤니티 구성 가능성 　

개인 맞춤형 가능 √

<표 16> 조선일보 전체 사이트의 소셜 미디어적 요소 존재 유무

최근 국내의 신문사 사이트들에도 소셜 네트워크적인 기능들이 탑재되기

시작하였다. 조선일보의 경우에도 기사마다 페이스북, 트위터를 비롯해 국내

소셜 네트워크 서비스인 잇글링, 네이트온 등으로 보낼 수 있는 기능을 기사

의 상단 및 하단에 제공하고 있다(<그림 74> 참조).

<그림 74> 조선일보에서 제공하는 소셜 네트워크 링크 서비스들

- 145 -

또한 개별 기사들을 RSS로 보낼 수 있는 기능을 주제별로 제공하고 있는데

RSS 서비스 이용법에 익숙하지 않은 사용자들을 위해 RSS 뉴스 리더 사이트

로 연결해 주는 기능을 제공하고 있기도 하다(<그림 75> 참조)

<그림 75> 조선일보의 RSS 설정 화면

조선일보에서는 특히 여러 주제별로 기사들을 묶어서 독자들의 흥미를 유

발하고 있다는 점에 주목할 수 있겠다 (<그림 76> 참조). 이러한 기능은 기존

의 뉴스 제공자들의 역할을 유지하면서도 독자들의 흥미를 끌 수 있는 요소

라 하겠다. 하지만 여기서 주의해야 할 것은 지나치게 특정 입장에 치우친 주

제들을 강조하다가 오히려 독자들로부터 외면을 받을 수도 있다는 점이다.

- 146 -

<그림 76> 조선일보의 홈페이지 화면에서 부각된 몇 가지 주제들

조선일보에서도 다른 사이트들과 마찬가지로 블로그를 운영하고 있으며 그

중에는 기자들이 블로그 활동을 하기도 하며 이런 다양한 블로그의 내용들은

홈페이지에서 별도의 블로그 섹션을 마련하여 알리고 있다(<그림 77> 참조).

- 147 -

<그림 77> 조선일보의 블로그 화면

이와 더불어 조선일보에서는 각 섹션별 뉴스를 모아놓는다거나 시간, 날씨

를 알려주는 기능을 가지고 있는 위젯을 이용하여 자신만의 페이지를 만들

수 있는 기능을 제공하고 있기도 하다(<그림 78> 참조).

- 148 -

<그림 78> 조선일보 개인별 뉴스 설정 화면

(2) 개별 기사 분석 결과

조선일보의 개별 기사에 대하여 위의 각 요소들 존재 유무를 분석한 결과

는 <표 17>에 정리되어 있다.

- 149 -

개별 기사 유무

뉴스 배포 방법의 다양성 　

개인별 이메일로 기사 전송 √

소셜 북마킹 기능 포함 √

기사에 대한 외부 접근 허용 √

소셜 네트워크 기능 포함 여부 　

태그로 다른 사이트의 관련 기사와 연결 　

개인 기사에 대한 선호도 　

기사 관련 통계 제공 √

사이트에 외부 글 포함 허용 여부 　

개인의 댓글 허용 √

<표 17> 조선일보 개별 기사의 소셜 미디어적 요소 존재 유무

개별 기사 페이지에서 소셜 네트워크로 링크를 시키는 것 이외에도 조선일

보에서는 날짜별 기사 랭킹을 별도의 페이지로 제공하고 있기도 하다(<그림

79> 참조).

- 150 -

<그림 79> 조선일보의 날짜별 뉴스 랭킹 화면

기사의 소셜 관심도를 가늠할 수 있는 댓글의 수는 기사 상단에 보여주고

있고 이 부분을 누르면 댓글을 볼 수 있도록 하고 있다 (<그림 80> 참조)

<그림 80> 조선일보의 댓글 수를 보여주는 부분

결론적으로 조선일보도 소셜 네트워크적인 기능을 활용하려는 노력을 보이

고 있지만 아직까지 페이스북과의 연동 등과 같은 적극적인 기능들을 포함하

고 있지는 않다.

- 151 -

9) 중앙일보

(1) 전체 사이트 분석 결과

중앙일보의 전체 사이트에 대하여 위의 각 요소들 존재 유무를 분석한 결

과는 <표 18>에 정리되어 있다.

소셜 미디어적 요소들 유무

뉴스 배포 방법의 다양성 　

개인별 이메일로 종합뉴스 제공 √

주제별 RSS Feed 제공 √

Podcast 제공 　

모바일 서비스 제공 √

소셜 네트워크 기능 포함 여부 　

소셜 네트워크에 보내기 가능 √

다른 사이트의 네트워크와 연계

많이 읽은, 선호하는 기사 목록 제공 √

외부 뉴스 사이트로 링크 √

사이트에 외부 글 포함 허용 여부 　

관리하는 블로그 √

타인의 블로그 내용 포함 　

사이트 관리 측면 　

Hot Topic 뉴스 모음 제공 √

이용자간 커뮤니티 구성 가능성 √

개인 맞춤형 가능 √

<표 18> 중앙일보 전체 사이트의 소셜 미디어적 요소 존재 유무

중앙일보는 2010년 10월 중순 MSN과 연계하여 소셜 네트워크 기능을 대폭

강화한 포털 개념의 새로운 서비스를 선보였다. 이 사이트는 기존의 ‘중앙일

보’에만 국한되어 있던 것을 다른 뉴스 사이트와의 적극적이면서도 유기적인

- 152 -

연동 기능을 제공하고 있을 뿐만 아니라 다른 소셜 네트워크 사이트들과도

연동되어 있어서 실시간 트위터 내용을 볼 수 있게 해 주기도 한다.

우선 첫 화면을 보면 다른 신문사나 뉴스 사이트의 기사 목록이 제공되고

있고 실시간으로 주요 이슈에 대한 트위터의 내용이 지속적으로 업데이트 되

고 있으며 자신이 방문하는 사이트의 주소를 입력해 놓고 이용할 수 있도록

하고 있다. <그림 81>에 보면 다양한 사이트의 뉴스를 모아놓은 뉴스창이 가

운데 떠 있고 그 바로 아래에는 소셜 네트워크에서 거론되고 있는 이야기들

이 소개되고 있다. 즉, 중앙일보가 지향하는 포털 사이트에서는 소셜 네트워크

로 정보를 보내는 것 뿐만 아니라 소셜 네트워크의 내용을 가져오고 있다는

점이 특이한 점이라 할 수 있다. 하지만 이 서비스는 이용자의 소셜 네트워크

를 기반으로 하고 있는 것이 아니라 중앙일보의 판단에 의해 선정된 주요뉴

스와 유명인의 소셜 미디어 내용을 제공하고 있는 것이기 때문에 페이스북과

연동된 뉴욕타임즈나 워싱턴포스트에서 제공하는 기능과는 성격이 다른, 웹3.0

적인 특성을 지니고 있는 서비스가 아니라 웹 2.0에 기반한 서비스라 할 수

있다.

첫 화면의 경우에는 중앙일보가 MSN과 합작으로 포털의 개념을 실행하고

있기 때문에 뉴스를 클릭하면 경향신문이나 뉴스엔 등과 같은 다른 사이트로

까지 연결이 되고 있는데 과연 이러한 전략이 중앙일보 뉴스 구독 자체에 어

떤 영향을 미칠 것인가 하는 것은 두고 평가를 해 보아야 할 일이다.

- 153 -

<그림 81> 조인스 MSN 새로운 사이트의 기능들

중앙일보의 뉴스 사이트 자체도 개편을 해서 내용이 많아졌기 때문에 뉴욕

타임즈나 워싱턴포스트와 유사하게 스크롤을 많이 해야 끝까지 볼 수 있도록

되어있다. <그림 82>를 보면 중앙일보 뉴스 페이지의 기능들이 소개되어 있는

데 기본 뉴스 뿐만 아니라 편집자가 선정한 뉴스라거나 뉴스 스토리텔링의

개념으로 묶인 기사들을 비롯해 네티즌의 생각에 쉽게 접근할 수 있는 기능

도 제공되고 있고 사용자와의 인터랙션을 하면서 내용을 보는 기능까지 제공

되고 있다. 개편된 중앙일보의 사이트는 분명 획기적인 기능을 많이 탑재하고

있기는 하다. 웹 2.0의 특성이 한층 강화된 서비스라 할 수 있겠다.

- 154 -

<그림 82> 개편된 중앙일보 사이트의 기능들

중앙일보 뉴스 페이지 하단에는 또한 많이 보았거나 댓글이 많이 달린 뉴

스의 목록이 제공되고 있다(<그림 83> 참조).

<그림 83> 중앙일보의 많이 본 기사, 댓글 많은 기사 제공 화면

- 155 -

(2) 개별 기사 분석 결과

중앙일보의 개별 기사에 대하여 위의 각 요소들 존재 유무를 분석한 결과

는 <표 19>에 정리되어 있다.

개별 기사 유무

뉴스 배포 방법의 다양성 　

개인별 이메일로 기사 전송 √

소셜 북마킹 기능 포함 √

기사에 대한 외부 접근 허용 √

소셜 네트워크 기능 포함 여부 　

태그로 다른 사이트의 관련 기사와 연결 　

개인 기사에 대한 선호도 　

기사 관련 통계 제공 √

사이트에 외부 글 포함 허용 여부 　

개인의 댓글 허용 √

<표 19> 중앙일보 개별 기사의 소셜 미디어적 요소 존재 유무

중앙일보의 기사 화면을 보면 기사 첫 머리에는 이메일로 보내기 기능과

‘내 블로그에 담기’ 정도의 기능만 있고 기사가 끝나는 부분에 소셜 네트워크

로 연결할 수 있는 기능을 제공하고 있다. 하지만 여기서 다른 사이트와 차별

되는 부분은 자신의 페이스북이나 트위터와 연동을 해 놓으면 중앙일보에 다

는 댓글이 자동으로 트위터나 페이스북, 미투데이 등에 올려진다는 것이다

(<그림 84> 참조).

- 156 -

<그림 84> 중앙일보 기사의 자동 소셜 네트워크 공유 기능

기사에 관한 통계는 댓글의 수라는 형태로 제공되고 있는데 댓글의 수를

보려면 기사의 마지막 부분, 댓글이 시작되는 곳에 가야한다.

전반적으로 중앙일보는 대폭적인 사이트 개편을 통해 웹 2.0적인 특성을 한

층 더 강화시킴으로써 소셜 네트워크의 중요성을 인지하고 있다는 것을 보여

주었다.

10) 한국일보

(1) 전체 사이트 분석 결과

한국일보의 전체 사이트에 대하여 위의 각 요소들 존재 유무를 분석한 결

과는 <표 20>에 정리되어 있다.

- 157 -

소셜 미디어적 요소들 유무

뉴스 배포 방법의 다양성 　

개인별 이메일로 종합뉴스 제공 √

주제별 RSS Feed 제공 √

Podcast 제공 　

모바일 서비스 제공 √

소셜 네트워크 기능 포함 여부 　

소셜 네트워크에 보내기 가능 √

다른 사이트의 네트워크와 연계 　

많이 읽은, 선호하는 기사 목록 제공 √

외부 뉴스 사이트로 링크 　

사이트에 외부 글 포함 허용 여부 　

관리하는 블로그 √

타인의 블로그 내용 포함 　

사이트 관리 측면 　

Hot Topic 뉴스 모음 제공 √

이용자간 커뮤니티 구성 가능성 　

개인 맞춤형 가능 　

<표 20> 한국일보 전체 사이트의 소셜 미디어적 요소 존재 유무

한국일보는 전체적으로 기본적인 소셜 네트워킹 기능을 제공하고 있었지만

국내의 다른 사이트에 비해서는 소셜 네트워킹적인 요소가 가장 적은 것으로

파악되었다. 한국일보 계열사들의 통합 홈페이지로 사용하고 있는 첫 화면을

비롯하여 한국일보 뉴스 사이트에는 한국일보, 서울경제 등의 실시간 인기기

사의 목록이 제공되고 있었지만 기사에 대한 관심도를 알 수 있는 댓글 수에

대한 수치는 기사의 마지막 부분, 댓글이 시작되는 곳에서 볼 수 있었다(<그

림 85> 참조).

- 158 -

<그림 85> 한국일보 사이트의 첫 화면

한국일보 사이트는 또한 다른 사이트에 비해 주제별로 기사를 묶어놓는 등

의 기능을 제공하고 있지 않았다. 한국일보 뉴스 사이트에서도 기존의 기사를

섹션별로 묶어놓는 기능 정도만 제공하고 있었다(<그림 86> 참조).

<그림 86> 한국일보 신문의 화면

- 159 -

(2) 개별 기사 분석 결과

한국일보의 개별 기사에 대하여 위의 각 요소들 존재 유무를 분석한 결과

는 <표 21>에 정리되어 있다.

개별 기사 유무

뉴스 배포 방법의 다양성 　

개인별 이메일로 기사 전송 √

소셜 북마킹 기능 포함 √

기사에 대한 외부 접근 허용 √

소셜 네트워크 기능 포함 여부 　

태그로 다른 사이트의 관련 기사와 연결 　

개인 기사에 대한 선호도 　

기사 관련 통계 제공 √

사이트에 외부 글 포함 허용 여부 　

개인의 댓글 허용 √

<표 21> 한국일보 개별 기사의 소셜 미디어적 요소 존재 유무

한국일보의 기사 화면을 보면 소셜 네트워크와 공유하는 기능이 존재하기

는 하지만 트위터와 미투데이에만 공유 가능할 뿐 페이스북에 대한 공유 기

능도 없을 정도로 그 연결 정도나 공유 정도가 적다(<그림 87> 참조).

<그림 87> 한국일보에서 제공하고 있는 소셜 네트워크 링크 서비스

한국일보 사이트에서도 다른 사이트와 마찬가지로 개인의 댓글을 허용하고

- 160 -

있는데 개인의 댓글 수는 댓글이 시작되는 부분에서 볼 수 있다.

전반적으로 한국일보 사이트는 자사 사이트들을 한 곳에 모아놓은 포털의

역할을 겸하고 있었으나 소셜 네트워크적 요소는 다른 사이트들에 비해 적은

것으로 나타났다. 또한 내용을 독자들에게 더욱 흥미롭게 꾸미는 기능이 상대

적으로 약한 것으로 나타났다.

5. 신문 웹사이트와 소셜 네트워크 요소에 대한 함의

1) 사이트 분석 결과 요약

위에서 살펴본 미국, 영국 및 한국의 신문사 웹 사이트를 분석한 결과를 전

체적으로 종합한 <표 22>를 보면 각 국가별로 소셜 네트워크적인 요소를 추

가하는 방식이나 정도에 있어서 약간의 차이를 보이고 있다는 것을 알 수 있

다.

- 161 -

소셜 미디어적 요소들

워

싱

턴

포

스

트

뉴

욕

타

임

즈

U

S

A

투

데

이

가

디

언

텔

레

그

라

프

데

일

리

메

일

조

선

일

보

중

앙

일

보

한

국

일

보

뉴스 배포 방법의 다양성 　 　 　 　 　 　 　 　 　

개인별 이메일로 종합뉴스 제공 √ √ √ √ √ √ √ √ √

주제별 RSS Feed 제공 √ √ √ √ √ √ √ √ √

Podcast 제공 √ √ √ √ √ √ 　 　 　

모바일 서비스 제공 √ √ √ √ √ √ √ √ √

소셜 네트워크 기능 포함 여부 　 　 　 　 　 　 　 　 　

소셜 네트워크에 보내기 가능 √ √ √ √ √ √ √ √ √

다른 사이트의 네트워크와 연계 √ √ 　 　 　 　 　 　 　

많이 읽은, 선호하는 기사 목록 제공 √ √ √ √ √ √ √ √ √

외부 뉴스 사이트로 링크 √ √ √ 　 　 　 　 √ 　

사이트에 외부 글 포함 허용 여부 　 　 　 　 　 　 　 　 　

관리하는 블로그 √ √ √ √ √ 　 √ √ √

타인의 블로그 내용 포함 　 　 　 　 　 　 　 　 　

사이트 관리 측면 　 　 　 　 　 　 　 　 　

Hot Topic 뉴스 모음 제공 √ √ √ √ 　 √ √ √ √

이용자간 커뮤니티 구성 가능성 　 　 　 　 √ 　 　 √ 　

개인 맞춤형 가능 　 √ √ 　 √ √ √ √ 　

개별 기사

워

싱

턴

포

스

트

뉴

욕

타

임

즈

U

S

A

투

데

이

가

디

언

텔

레

그

라

프

데

일

리

메

일

조

선

일

보

중

앙

일

보

한

국

일

보

뉴스 배포 방법의 다양성 　 　 　 　 　 　 　 　 　

개인별 이메일로 기사 전송 √ √ √ √ √ √ √ √ √

소셜 북마킹 기능 포함 √ √ √ √ √ √ √ √ √

기사에 대한 외부 접근 허용 √ √ √ √ √ √ √ √ √

소셜 네트워크 기능 포함 여부 　 　 　 　 　 　 　 　 　

태그로 다른 사이트의 관련 기사와 연결 　 　 　 　 　 √ 　 　 　

개인 기사에 대한 선호도 √ 　 √ √ √ 　 　 　 　

기사 관련 통계 제공 　 √ √ √ √ √ √ √ √

사이트에 외부 글 포함 허용 여부 　 　 　 　 　 　 　 　 　

개인의 댓글 허용 √ √ √ √ √ √ √ √ √

<표 22> 각 신문사 사이트의 소셜 미디어적 요소 종합

미국의 뉴욕타임즈와 워싱턴 포스트의 경우에는 적극적이면서도 공격적으

- 162 -

로 소셜 미디어의 시대에 대응하고 있다는 것이 관찰되었다. 이들 사이트는

특히 페이스북의 오픈 그래프의 개념을 적용, 이용자의 페이스북 친구 네트워

크와의 유기적인 연동을 통해 기사를 읽는 경험이 더욱 더 소셜한 특성을 지

니도록 하려는 노력을 기울이고 있었다. 이 중 뉴욕타임즈는 웹 3.0적인 특성

에 더 초점을 맞추려는 노력을 시도하는 것과 사이트의 기사를 다양한 주제

로 묶어서 RSS라는 뉴스 신디케이션 서비스를 강조하고 있는 것이 보였고 워

싱턴포스트는 자유로운 블로그 활동을 격려함으로써 사이트 자체의 내용을

더욱 풍부하게 만드는데 더 노력을 보이는 것이 관찰되었다.

USA투데이의 경우에는 아직 웹 3.0적인 요소를 포함시키고 있지는 않았고

블로그나 각 주제별 섹션 등을 좀 더 접근하기 쉽게 정렬함으로써 사이트 이

용자들이 더욱 편리하도록 하려는 노력을 보이고 있었다.

영국의 신문사들은 아직 웹 3.0적인 요소를 가미하고 있지는 않았지만 이용

자들에게 다른 네티즌들의 활동을 활발하게 알리려는 노력을 하고 있었다. 이

중 가디언과 데일리메일은 인기있는 기사의 목록을 별도로 제공하고 있을 뿐

만 아니라 각 기사에 달린 댓글의 수를 첫 화면에 보이게 함으로써 활발한 활

동을 독려하는 방식을 선호하고 있었다. 텔레그라프의 경우에는 블로그나 댓

글의 활발한 활동을 지원하면서도 기존 기자의 기사와는 차별적으로 제공하

고 있는 것이 관찰되었다. 영국의 신문사들은 또한 미국과 마찬가지로 블로그

활동을 격려하려는 노력을 다양하게 기울이고 있었다.

국내의 중앙일보의 경우, 포털 전략에 대한 평가를 여기서 할 수는 없지만

소셜 네트워크적인 요소의 중요성을 크게 인식하고 이를 사이트 곳곳에 적용

시킨 것이 관찰되었다. 특히 다른 소셜 네트워크에 링크해서 연동을 시키는

과정을 간소화함으로써 손쉽게 페이스북이나 트위터에 중앙일보 기사에 대한

댓글을 달 수 있도록 하는 간편한 기능을 제공하고 있었다.

조선일보의 경우에는 소셜 네트워크로의 기사 공유의 기능을 제공하면서도

조선일보의 전문성을 최대한 발휘할 수 있도록 다양한 주제의 기획, 초점 기

사들을 제공하고 있었다. 조선일보에서는 또한 독자들에게 가능한 많은 정보

를 다양하게 제공하려 노력하는 것이 보였는데 다양한 위젯을 사용한 개인

페이지도 제공하고 있었고 일자별 기사 랭킹 정보도 제공하고 있었다. 한국일

보의 경우에는 기본적인 소셜 네트워크와의 링크나 인기 기사 목록 정도가

제공되고 있었다.

- 163 -

2) 소셜 네트워크적 요소들의 신문 웹사이트 디자인에 대한 함의

위에서 살펴본 결과 기존 독자층이 계속 감소하고 있는 신문사들은 시대

변화에 적응하기 위해 나름대로 다양한 노력을 기울이고 있다는 것을 알 수

있었다. 이러한 노력이 어떤 결실을 맺게 될 것인지에 대한 정확한 평가를 내

리기는 어렵지만 소셜 네트워크를 기반으로 하는 소통방식이 증가할수록 기

존 미디어가 이런 변화에 대응하지 않으면 존재 자체가 위협을 받을 수 있다

는 것을 인식하고 여러 가지 방식을 시도해 보고 있는 것으로 파악된다.

중요한 것은 이런 시도들이 ‘기존’의 사이트 구조를 기반으로 새로운 서비

스를 어떻게 도입할 것인가를 모색하는 방식으로 진행된다면 성공하기 어려

울 것이라는 점이다. 신문에 실린 기사를 얼마나 많은 사람에게 읽힐 것인가

를 모색할 것이 아니라 현재 사이트에서 이용자들이 가장 필요로 하는 정보

를 가장 손쉬운 방법으로 어떻게 제공할 수 있을 것인가를 새로운 틀에서 모

색해야 할 것이다.

이런 면에서 뉴욕타임즈의 사이트에서 ‘권위’ 있는 뉴욕타임즈 기자들의 기

사만 볼 수 있는 것이 아니라 다양한 블로그 활동을 하는 블로거들의 글을 읽

게 된다거나 워싱턴 포스트의 사이트가 블로거들의 글로 가득차서 더욱 풍성

해졌다는 것이 전혀 어색하지 않은 상황이 되었다는 것은 이런 구조적인 변

화가 시작되었다는 것을 예고하는 것이라 볼 수 있다. 아울러 신문 웹사이트

디자인을 함에 있어서 이제는 이러한 구조적인 디자인의 문제를 근본적으로

다시 생각해 볼 시점이 되었다는 것을 의미하기도 한다.

기본적으로 웹사이트의 구조가 중앙 집권적으로만 구성되어서는 안 된다는

것이다. 디그나 레딧과 같이 이용자들의 클릭 수에만 의존해서 기사나 정보의

중요성이 정해지는 극단적인 모델은 아니더라도 이용자의 기존 소셜 네트워

크를 어떤 방식으든 웹사이트 디자인에 포함시킬 수 있는 방안을 좀 더 적극

적으로 모색해야 할 것이다. 또한 사이트 디자인은 앞으로 다가올 웹 3.0 시대

의 더 큰 변화를 염두에 둔, 미래지향적인 시각을 가지고 해야 할 것이다.

- 164 -

Ⅴ. 국내외 신문 웹사이트 디자인 비교 평가 분석

1. 국내외 신문 웹사이트 UI 디자인 분석

1) 내비게이션 분석

(1) 영국

가디언, 더타임즈, 텔레그라프의 내비게이션에 대해 분석하였다. 그 결과,

첫째, 제호 디자인이 화려한 반면 그 외 디자인 요소는 거의 없었다. 둘째, 톤

다운된 색상을 바 형식으로 최소한으로 사용하였다. 셋째, 아이텐티티를 나타

낼 수 있는 포인트 색상과 보조하는 그레이톤의 색상, 그리고 라인으로 무겁

지 않고 가벼운 느낌으로 구성되었다. 넷째, 여백을 많이 두어서 전체적으로

시원한 느낌을 살리고 있었다. 다섯째, 높이는 광고를 포함하거나 로고를 크게

사용하여 다소 길었다. 여섯째, 가로가 긴 배너를 같이 배치하여 광고의 주목

도를 높이고 있었다. 마지막으로 카테고리를 펼쳐서 나열하고 있었다.

<그림 88> 가디언의 내비게이션

- 165 -

<그림 89> 더타임즈의 내비게이션

<그림 90> 텔레그라프의 내비게이션

(2) 미국

뉴욕타임즈, 워싱턴포스트, USA투데이의 내비게이션에 대해 분석하였다. 그

결과, 첫째, 색상의 사용은 최소한으로 사용하였다. 하지만 USA투데이는 반대

로 다양한 색상을 사용하여 좀 더 젊고 활기찬 이미지를 보여주었다. 둘째, 주

로 그레이 색상, 라인으로 무겁지 않고 가벼운 느낌으로 구성하여 오프라인

신문의 느낌을 많이 살리고 있었다. 셋째, 여백을 많이 두어서 전체적으로 시

원한 느낌을 살리고 있었다. 넷째, 높이는 광고를 포함하거나 로고를 크게 사

용하여 다소 길었다. 다섯째, 가로가 긴 배너를 같이 배치하여 광고의 주목도

를 높이고 있었다. 마지막으로 카테고리를 펼쳐서 나열하고 있었다.

- 166 -

<그림 91> 뉴욕타임즈의 내비게이션

<그림 92> 워싱턴포스트의 내비게이션

<그림 93> USA투데이의 내비게이션

(3) 한국

조선일보, 중앙일보, 한국일보의 내비게이션에 대한 분석하였다. 그 결과,

첫째, 오프라인 신문과 별도의 온라인용 제호를 사용하였다. 아이덴티티를 나

타내는 채도가 높은 포인트 색상을 강하게 사용 하는 편이었다. 둘째, 여백을

많이 남기지 않고 최대한으로 내용을 채우는 경향이 있었다. 셋째, 높이는 될

수 있으면 짧게 사용하며 로고는 작게 위치하였다. 또 첫 화면에 많은 정보의

- 167 -

기사 노출을 위해 GNB 부분 최소화하였다. 넷째, 카테고리는 전부 노출하지

않고 레이어로 숨기거나 섹션 메인으로 이동하게끔 배치하였다. 다섯째, 배너

는 최소한으로 노출하여 내비게이션의 높이가 길어지지 않도록 하였다.

<그림 94> 조선일보 내비게이션

<그림 95> 중앙일보 내비게이션

<그림 96> 한국일보 내비게이션

- 168 -

2) TOP 기사 & 기사 타이포그래피 분석

(1) 영국

① 가디언

가디언의 TOP 기사와 기사 타이포그래피에 대해 분석하였다. 그 결과, 첫

째, TOP 영역은 썸네일을 비교적 크고 시원하게 사용하고 있었으며, 타이틀은

블루, bold, 리드문은 그레이 색상을 사용하고 있었다. 국내는 거의 블랙 계통

을 사용하는데 비해 해외는 블루톤을 잘 사용하였다. 둘째, 썸네일과 기사 영

역은 TOP 기사와 같은 색상 스타일을 사용하고 있었다. 크기만 작게 조절 하

였으며 썸네은을 비교적 크고 시원하게 사용하고 있었다.

<그림 97> 가디언의 TOP 영역

- 169 -

<그림 98> 가디언의 썸네일과 기사영역

② 더타임즈

더타임즈의 TOP 기사와 기사 타이포그래피에 대해 분석하였다. 그 결과,

첫째, TOP 영역은 썸네일 이미지를 크게 사용하고 있다. 타이틀은 블랙, bold,

리드문도 블랙 색상을 사용하고 있었다. 둘째, 썸네일과 기사 영역은 TOP 기

사와 같은 색상 스타일을 사용하고 있었으며, 크기만 작게 조절 하였다. 또 썸

네일을 비교적 크게 사용하고 있었다. 더타임즈의 경우는 폰트와 색상의 사용,

레이아웃에서 신문의 느낌이 가장 강하게 나타났다.

- 170 -

<그림 99> 더타임즈의 TOP 영역

<그림 100> 더타임즈의 썸네일과 기사영역

③ 텔레그라프

텔레그라프의 TOP 기사와 기사 타이포그래피에 대해 분석하였다. 그 결과,

첫째, TOP 영역은 썸네일 이미지를 크게 사용하고 있었다. 타이틀은 블루,

bold, 리드문도 블랙 색상을 사용하고 있었다. 둘째, 썸네일과 기사영역은

- 171 -

TOP 기사와 같은 색상 스타일을 사용하고 있었다. 크기만 작게 조절하였으며

썸네일을 크게 사용하고 있었다.

<그림 101> 텔레그라프의 TOP 영역

<그림 102> 텔레그라프의 썸네일과 기사영역

종합적으로 살펴보면, 영국 신문 웹사이트의 TOP 기사와 기사 타이포그래

피 분석 결과는 다음과 같이 요약된다. 첫째, 사진 자체의 퀄리티가 좋은 편이

- 172 -

었으며 주로 큰 사진을 사용하고 있었다. 큰 사진에 많은 양의 리드문을 쓰기

때문에 TOP 기사 영역이 크게 보이고 있었다. 둘째, 텍스트 편집이 시원하고

오프라인 신문의 느낌을 많이 주는 편이었다. 셋째, 타이틀과 리드문 텍스트를

크기, 색상, 폰트 종류를 변화를 주어서 타이틀이 더 강조되도록 디자인하였

다. 또 영문은 웹폰트 자체가 가독성이 좋고 심미성이 뛰어나 보였다. 넷째,

주로 신뢰성을 주는 블루 계통의 색상을 톤다운 시켜서 타이틀로 사용하였으

며, 리드문은 그레이를 사용하여 블루 계통의 컬러와의 조화를 이루도록 하였

다.

(2) 미국

① 뉴욕타임즈

뉴욕타임즈의 TOP 기사와 기사 타이포그래피에 대해 분석하였다. 그 결과,

첫째, TOP 영역은 썸네일 이미지를 크게 사용하였다. 타이틀은 블루, bold, 리

드문은 그레이 색상을 사용하였다. 둘째, 썸네일과 기사 영역은 TOP 기사와

같은 색상 스타일을 사용하였으며, 크기만 작게 조절 하였다.

<그림 103> 뉴욕타임즈의 TOP 영역

- 173 -

<그림 104> 뉴욕타임즈의 썸네일+기사영역

② 워싱턴포스트

워싱턴포스트의 TOP 기사와 기사 타이포그래피에 대해 분석하였다. 그 결

과, 첫째, TOP 영역은 썸네일 이미지를 비교적 작게 사용하였다. 타이틀은 블

루, bold, 리드문은 그레이 색상을 사용하고 있었다. 둘째, 썸네일과 기사 영역

은 TOP 기사와 같은 색상 스타일을 사용하고 있었으며, 크기만 작게 조절 하

였다. 썸네일도 타 사이트보다 작게 사용하였다.

- 174 -

<그림 105> 워싱턴포스트의 TOP 영역

<그림 106> 워싱턴포스트의 썸네일과

기사영역

③ USA투데이

USA투데이의 TOP 기사와 기사 타이포그래피에 대해 분석하였다. 그 결과,

첫째, TOP 영역은 썸네일 이미지를 비교적 작게 사용하였다. 타이틀은 그레

이, bold, 리드문은 그레이 색상을 사용하였다. 둘째, 썸네일과 기사 영역은

TOP 기사와 같은 색상 스타일을 사용하였으며, 크기만 작게 조절 하였다. 썸

- 175 -

네일은 비교적 큰 편이다. USA투데이의 경우는 상단 내비게이션 색상을 강하

고 다양하게 잡아준 대신 하단의 콘텐츠 텍스트의 색상은 차분한 블랙과 그

레이로 사용하고 있었다.

<그림 107> USA투데이의 TOP 영역

<그림 108> USA투데이의 썸네일과 기사영역

종합적으로 살펴보면, 미국 신문 웹사이트의 TOP 기사와 기사 타이포그래

- 176 -

피 분석 결과는 다음과 같이 요약된다. 첫째, 퀄리티 높은 사진을 사용하여 다

양한 크기의 TOP 이미지를 자유롭게 배치하였다. 둘째, 타이틀과 리드문 텍스

트를 크기, 색상, 폰트 종류에 변화를 주어서 타이틀이 더 강조되도록 디자인

하였다. 셋째, 주로 신뢰성을 주는 블루계통의 색상을 톤다운 시켜서 타이틀로

사용하였다. 또 리드문은 그레이를 사용하여 블루 계통의 색상과 조화를 이루

도록 하였다. 넷째, 썸네일과 기사 영역의 썸네일도 크게 배치하여 국내 신문

웹사이트보다 조금 더 신문스러운 느낌이었다. 전체적으로 미국 신문 웹사이

트는 영국과 유사한 느낌으로 디자인되었다.

(3) 한국

① 조선일보

조선일보의 TOP 기사와 기사 타이포그래피에 대해 분석하였다. 그 결과,

첫째, TOP 영역은 썸네일 이미지를 세로형으로 사용하고 있었다. 크기는 외국

사이트에 비해 매우 작은 편이었다. 또 상대적으로 텍스트가 차지하는 면적이

넓었다. 타이틀은 블랙, bold, 리드문은 그레이 색상을 사용하였으며, 타이틀을

CSS를 적용한 시스템폰트가 아닌 이미지 폰트로 사용한다. 둘째, 썸네일과 기

사 영역은 TOP 기사와 다른 색상 스타일, 사이즈, 폰트를 사용하고 있었으며

쎔네일은 작은 편이었다.

<그림 109> 조선일보의 TOP 영역

- 177 -

<그림 110> 조선일보의 썸네일과 기사영역

② 중앙일보

중앙일보의 TOP 기사와 기사 타이포그래피에 대해 분석하였다. 그 결과,

첫째, TOP 영역은 가로형 중간 크기의 썸네일과 텍스트 편집을 하였다. TOP

영역을 2단에 걸쳐 강조하고 있었다. 타이틀은 블랙, bold, 리드문은 그레이

색상을 사용하였으며, 타이틀을 CSS를 적용한 시스템 폰트가 아닌 이미지 폰

트로 사용한다. 둘째, 썸네일과 기사 영역은 TOP 기사와 다른 색상 스타일,

크기, 폰트를 사용하고 있었고 썸네일은 작은 편이었다.

<그림 111> 중앙일보의 TOP 영역

<그림 112> 중앙일보의 썸네일과 기사영역

- 178 -

③ 한국일보

한국일보의 TOP 기사와 기사 타이포그래피에 대해 분석하였다. 그 결과,

첫째, TOP 영역은 썸네일이 없었다. 분석대상 사이트들 중에서 가장 TOP의

영역이 작은 것으로 나타났다. 타이틀은 블랙, bold, 리드문은 그레이 색상을

사용하고 있었으며, 타이틀을 CSS를 적용한 시스템 폰트가 아닌 이미지 폰트

로 사용한다. 둘째, 썸네일과 기사 영역은 TOP 기사와 다른 색상 스타일, 크

기, 폰트를 사용하고 썸네일은 작은 편이었다.

<그림 113> 한국일보의 TOP 영역

<그림 114> 한국일보의 썸네일과 기사영역

종합적으로 살펴보면, 국내 신문 웹사이트의 TOP 기사와 기사 타이포그래

피 분석 결과는 다음과 같이 요약된다. 첫째, 사진의 퀄리티 문제로 인해 TOP

영역의 썸네일이 많이 축소되었으며, 이로 인해 텍스트가 더 큰 비중을 차지

하고 있었다. 둘째, 공통적으로 TOP 타이틀만 이미지 폰트를 사용하여 강조하

고 있었다. 셋째, 해외 신문 웹사이트와는 달리 타이틀과 리드문의 폰트 색상

은 블랙과 그레이만 사용하였다. 넷째, 조선닷컴을 제외하고는 대부분 작은 영

역에 TOP 기사를 배치하였다. 특히 이는 해외 신문 웹사이트와의 가장 큰 차

이점이었다. 다섯째, 썸네일과 기사영역의 썸네일은 작은 크기로 배치하여 신

- 179 -

문스러운 느낌은 해외 웹사이트에 비해 적었다. 전체적으로 국내 신문 웹사이

트는 텍스트가 차지하는 비중이 높았으며, 사진의 퀄리티가 낮고 주로 가로형

의 사진 위주이므로 디자인에 제약이 많은 편으로 평가된다.

3) 콘텐츠 & 그리드 영역 분석

(1) 영국

① 가디언

가디언 메인의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 그 결과, 첫

째, TOP 영역에서는 3단 구성, 하단 콘텐츠 영역은 4단 구성을 하고 있었다.

둘째, 전체적인 길이가 많이 길었다. 셋째, 크고 많은 종류의 사이즈 썸네일로

TOP 영역 아래, 4단 콘텐츠 영역에서는 복잡하고 정리가 안되어 보이는 느낌

이었다.

- 180 -

<그림 115> 가디언 메인

가디언 섹션의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 그 결과, 첫

째, 3단 구성이었다. 둘째, 전체적인 길이가 많이 길엇다. 셋째, 썸네일과 텍스

트의 배치가 메인보다는 조금 더 안정적으로 보였다. 강약의 조절로 TOP에

시선이 더 머무르는 장점이 있었다.

- 181 -

<그림 116> 가디언 섹션

가디언 기사면의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 그 결과,

첫째, 3단 구성이었다. 둘째, 기사의 길이에 따라 중앙에 빈 공간이 많이 생겼

다. 셋째, 기사면의 가로 폭이 좁은 편이었다.

- 182 -

<그림 117> 가디언 기사면

요약하자면 첫째는 메인, 섹션, 기사면의 단의 개수와 단의 가로 폭이 모두

다르다. 이로 인해 페이지 간 연계성이 부족해지는 단점이 있다. 둘째는 단이

효율적으로 분할되지 못해서 빈 공간이 많이 생긴다. 셋째는 TOP과 기타 썸

네일을 큼지막하게 사용하여 시원한 감은 있으나 썸네일의 사이즈 종류 수를

줄이고 UI 통일을 통해 보다 효율적이고 정돈된 그리드 적용이 필요하였다.

- 183 -

② 텔레그라프

텔레그라프 메인의 컨텐츠 영역과 그리드 영역에 대해 분석하였다. 그 결과,

첫째, TOP 영역은 3단 구성되어 있고, 하단 콘텐츠 영역은 3단, 혹은 4단 구

성되어 있었다. 둘째, 가로형 그리드로 구성되어 있었다. 셋째, 타 사이트와 다

르게 가로형으로 그리드가 구분되어 있어서, 같은 3단이어도 모두 다른 구조

이다. 넷째, 콘텐츠 간 디자인 강약의 조절이 부족하엿다.

<그림 118> 텔레그라프 메인

- 184 -

텔레그라프 섹션의 콘텐츠 영역과 그리드에 대해 분석하였다. 그 결과, 첫

째, TOP 영역은 3단 구성, 하단 콘텐츠 영역은 브릿지 아래로 3단 구성되어

있었다. 둘째, 섹션에서도 같은 3단임에도 서로 다른 가로 폭의 그리드를 가진

다. 셋째, 메인에 비해서는 보다 정돈 된 느낌이었다. 넷째, 콘텐츠 길이 조절

부족으로 빈공간이 많이 생겼다.

<그림 119> 텔레그라프 섹션

텔레그라프 기사면의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 그 결

과, 첫째, 크게 2단 구성되어 있었다. 기사내용 부분에서 다시 2단으로 나뉘어

서 아래는 3단 구성이 된다. 둘째, 기사내용 부분을 좁게 분할하였다. 셋째, 우

- 185 -

측 빈 공간의 활용이 부족하였다.

<그림 120> 텔레그라프 기사면

요약하자면 첫째는 메인, 섹션, 기사면이 크게는 3단 구성이 대부분이나, 분

할 폭이 모두 달라서 연계성을 이어가는데 부족하다. 둘째는 공간 활용의 아

쉬움이 있다. 셋째는 기사를 읽는데 폭이 좁아서 시각적으로 답답함과 피로함

이 있었다.

- 186 -

③ 더타임즈

더타임즈 메인의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 그 결과,

첫째, 상단 TOP 영역은 3단 구성 되어 있었다. 둘째, 하단은 2단과 1단, 그리

고 변형된 1단의 형식을 취한다. 셋째, 하단으로 갈수록 콘텐츠 타이틀 부분에

강한 컬러를 사용하였다.

<그림 121> 더타임즈 메인

요약하자면 첫째는 기사면과 섹션은 모두 유료 서비스였다. 둘째는 첫 로딩

화면에서는 많은 컬러를 사용하지 않고, 오프라인 신문 같은 그리드를 이용하

여 신문을 보는듯한 느낌을 많이 주었다. 그러나 하단으로 갈수록 강하고 많

- 187 -

은 종류의 컬러를 사용하여 처음의 느낌이 떨어지는 단점이 보인다. 조사대상

사이트 중에서는 가장 오프라인 신문의 느낌이 많이 드는 사이트였다.

(2) 미국

① 뉴욕타임즈

뉴욕타임즈의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 그 결과, 첫

째, TOP 영역에서는 3단 구성, 하단 콘텐츠 영역은 최대 5단까지 구성되었다.

둘째, 전체적인 길이가 많이 길었다. 셋째, 조사 대상 중에서 가장 많이 분할

되어 있는 구조였다. 넷째, 타이틀과 리드문으로 구성된 리스트를 길게 계속

나열하였다. 전체적으로 영문 사이트 특유의 세련된 느낌은 들지만 구조상으

로는 단이 계속 바뀌고 길이가 너무 길어지므로 하단으로 갈수록 다소 복잡

한 느낌이었다. 다섯째, 컬러의 사용이 적었다.

- 188 -

<그림 122> 뉴욕타임즈 메인

뉴욕타임즈 섹션의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 그 결과,

첫째, 4단 구성으로 되어 있었다. 둘째, 전체적인 길이가 많이 길었다. 셋째,

메인보다는 단의 분할은 정리되어 보이는 편이엇다. 넷째, 구조가 복잡해도 디

테일한 요소들과 적당한 간격, 영문 서체의 영향으로 깔끔한 느낌이었다.

- 189 -

<그림 123> 뉴욕타임즈 섹션

뉴욕타임즈 기사면의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 첫째,

2단 구성으로 되어 있었다. 둘째, 메인, 섹션, 기사면으로 갈수록 단의 구조가

단순해지는 경향이 있었다. 셋째, 퀄리티 높은 이미지를 크게 사용하여 전체적

으로 시원한 느낌이었다.

- 190 -

<그림 124> 뉴욕타임즈 기사면

요약하자면 첫째는 메인의 단 분할이 매우 복잡한 편이다. 섹션에서 조금

더 단순해지고, 기사면에서 2단으로 가장 단순하게 구성되어 있었다. 둘째는

컬러의 사용을 자제했으며, 블루 텍스트로 타이틀의 구분을 주었다. 그레이톤

의 라인으로 영역을 구분하여 다소 복잡해질 수 있는 구조를 정리해주는 기

능을 하고 있다. 셋째는 디테일한 요소들을 배치하여 깨끗하고 고급스런 느낌

을 주었다.

- 191 -

② 워싱턴포스트

워싱턴포스트 메인의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 그 결

과, 첫째, TOP 영역에서는 2단 구성, 하단 콘텐츠 영역은 3단 구성되어 있엇

다. 둘째, 전체적인 길이는 긴 편이나 중간에 브릿지 역할을 하는 콘텐츠를 넣

어서 시선을 한번 잘라주는 역할을 하였다. 셋째, 해외 타 사이트에 비해서는

TOP 포토는 작은 편이었다.

<그림 125> 워싱턴포스트 메인

워싱턴포스트 섹션의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 그 결

과, 첫째, 시각적으로는 2단 구조인 듯하지만 왼쪽의 콘텐츠를 둘로 나누어 배

- 192 -

치함으로써 다시 2단으로 나뉘어 크게는 3단 구조였다. 둘째, 섹션 타이틀을

강하게 넣어서 섹션 메인임을 강조하였다. 셋째, 썸네일의 종류가 조금씩 다르

므로 추후 통일성이 필요하였다.

<그림 126> 워싱턴포스트 섹션

워싱턴포스트 기사면의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 그

결과, 첫째, 3단 구조이며 둘째, 왼쪽에 카테고리를 나열하였다.

- 193 -

<그림 127> 워싱턴포스트 기사면

요약하자면 첫째는 뉴욕타임즈보다는 단순한 그리드이다. 둘째는 메인과 섹

션은 유사한 레이아웃을 사용하였다. 셋째는 기사면은 3단을 사용하여 가운데

기사에 집중하도록 배치한다. 넷째는 썸네일의 정리가 필요하였다.

③ USA투데이

USA투데이 메인의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 그 결

과, 첫째, TOP 영역에서는 2단 구성, 하단 콘텐츠 영역은 3단 구성되어 있었

- 194 -

다. 둘째, 해외 타 사이트에 비해서는 길이가 짧은 편이었다. 셋째, 상단 내비

게이션을 강하게 색상을 넣어서 상단에서 잡아주고 하단은 기사를 나열해주

었다. 넷째, 비교대상 타 사이트들과 차이점은 색상의 과감한 사용으로 타 사

이트들이 오프라인 신문의 느낌을 주는 것과 다르게 보다 활동적이고 강한

느낌을 주며 온라인의 느낌이 강하게 남았다. 다섯째, 색상 사용이 화려하였

다.

<그림 128> USA투데이 메인

USA투데이 섹션의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 그 결

- 195 -

과, 첫째, 2단 구조였다. 둘째, 기사를 리스트 형식으로 나열하여 섹션의 느낌

보다는 리스트의 느낌이었다. 셋째, 메인에 비해 다소 단순해 보였다. 넷째, 타

사이트에 비해서는 정리되어 보였다.

<그림 129> USA투데이 섹션

USA 투데이 기사면의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 그

결과, 첫째, 2단 구조이다. 둘째, 기사 내 포토의 사이즈가 크므로 2단이어도

넓다는 느낌은 들지 않았다. 셋째, 우측 영역을 넓게 잡아서 왼쪽 기사면이 횡

- 196 -

하게 보이지는 않았다. 넷째, 전체적으로 약간 어정쩡한 분할이었다.

<그림 130> USA투데이 기사면

요약하자면 첫째는 비교대상의 사이트들과 다르게 메인에서 넓은 면적을

강한 색상을 사용하여 디자인하였다. 둘째는 전반적으로 색상 사용을 자제하

는 것과 달리 과감한 색상을 사용한다. 셋째는 메인보다는 섹션이, 섹션보다는

기사면에서 더 심플 내비게이션을 사용하였다.

- 197 -

(3) 한국

① 조선일보

조선일보 메인의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 그 결과,

첫째, TOP 영역에서는 2단 구성, 하단 콘텐츠 영역은 3단 구성으로 되어 있

다. 둘째, 전체적인 길이가 해외에 비해서는 짧은 편이다. 셋째, 썸네일의 종류

가 많은 것은 앞으로 개선될 필요성이 있었다.

<그림 131> 조선닷컴 메인

- 198 -

조선일보 섹션의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 첫째, TOP

영역에서는 2단 구성, 하단 콘텐츠 영역은 3단 구성되어 있었다. 둘째, 전체적

인 길이가 외국에 비해서는 짧은 편이었다. 셋째, 메인과의 디자인적 연계성이

강했다.

<그림 132> 조선일보 섹션

조선일보 기사면의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 첫째,

메인과의 디자인적 연계성이 강하다. 둘째, 2단 구성으로 되어 있엇다. 셋째,

- 199 -

하단에 광고 콘텐츠 영역으로 작게 2단으로 나누어진다. 넷째, 하단으로 갈수

록 광고로 인해 그리드 다소 복잡해졌다.

<그림 133> 조선일보 기사면

요약하자면 첫째는 메인, 섹션, 가사면의 연계성을 이어가기 위해 TOP이나

레이아웃, 그리드의 간격을 유지하고 있다. 둘째는 주로 빈 공간이 없이 가득

채우는 형식이다. 셋째는 한글이기 때문에 기사면에서는 가독성을 높이는 것

에 주의해야 하므로 가로폭을 확보하는 2단 구성으로 디자인하였다.

- 200 -

② 중앙일보

중앙일보 메인의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 그 결과,

첫째, 3단 구성, 하단은 2단으로 배치하였다. 둘째, 조인스MSN에서 분리되어

중앙일보 뉴스만으로 채워졌다. 셋째, 디자인은 기존의 뉴스 웹사이트의 느낌

보다는 조인스MSN의 포털 느낌이 강하다. 넷째, 기존에 비해 정리되어 보였

다. 다섯째, 깔끔하긴 하나 디자인의 강약이 부족해 보였다. 여섯째, 상단의 정

리된 그리드가 중앙 아래부터는 흐트러지고 있었다. 마지막으로 썸네일의 불

규칙한 사용으로 산만한 느낌이었다.

- 201 -

<그림 134> 중앙일보 메인

중앙일보 섹션은 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 그 결과,

첫째, 상단은 3단 구성 그리고 하단은 2단으로 배치되었다. 둘째, 중앙일보의

섹션 구성은 메인과 비슷한 구조로 되어 있었다.

- 202 -

<그림 135> 중앙일보 섹션

중앙일보 기사면의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 그 결과,

첫째, 2단 구성으로 되어 있으며 전체적으로 정리는 되어 있으나 컬러가 약하

고 시각적인 덩어리감이 부족하였다. 둘째, 기존의 뉴스 웹사이트에서 포털로

변화함으로써 디자인의 스타일도 전형적인 포털 형식의 디자인을 적용하였다.

셋째, 중앙일보가 분리되었으나 중앙일보라는 뉴스 웹사이트의 느낌보다는

MSN 포털에 뉴스 섹션인 듯 한 느낌이 강했다. 그러나 컬러는 산뜻해진 느

낌이었다. 넷째, 광고의 수를 줄이되 기사 안으로 같이 흐르게 구성되었다. 스

틸이나 텍스트 광고로서 기사의 가독성에 큰 방해를 주지는 않았다.

- 203 -

<그림 136> 중앙일보 기사면

③ 한국일보

한국일보 메인의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 첫째, 3단

구성 되어 있었다. 둘째, TOP영역이 비교대상 중에서 가장 적은 영역을 차지

하고 있으며, 썸네일없이 텍스트로만 되어 있어서 TOP기사의 역할을 제대로

못하고 있었다. 셋째, 전체적인 구조는 조인스와 비슷하였다. 넷째, 채도가 높

은 그린 컬러를 이용하여 아이덴티티를 표현하고 있으나 다소 가볍고 눈에

피로감이 가는 컬러이다. 다섯째, 상대적으로 전체 높이는 짧은 편이었다.

- 204 -

<그림 137> 한국일보 메인

한국일보 섹션의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 그 결과,

첫째, 3단 구성되어 있었다. 둘째, TOP영역이 대표 썸네일 없이 텍스트로만

나열되어 있었다. 셋째, 섹션이라기에는 약한 구성이며 리스트 페이지 같은 느

낌을 주었다. 넷째, 지나치게 많은 기사 리스트 나열로 지루하고 긴 느낌을 주

었다.

- 205 -

<그림 138> 한국일보 섹션

한국일보 기사면의 콘텐츠 영역과 그리드 영역에 대해 분석하였다. 그 결과,

첫째, 기사면은 조선닷컴, 조인스MSN과 유사한 스타일로 구성 되어 있었다.

둘째, 광고들이 사방에 강하게 들어가 있어서 기사를 읽는데 방해가 되었다.

셋째, 전체적으로 다소 산만한 느낌을 주었다. 레이아웃이나 요소 등은 조선닷

컴이나 조인스MSN과 유사하게 되어있으나 보다 정리가 덜 된 느낌이었다.

넷째, 채도 높은 색상으로 아이덴티티를 보여주고 있으나 눈에 부담이 되는

색상이므로 추후 톤의 조절이 필요하였다.

- 206 -

<그림 139> 한국일보 기사면

국내외 신문 웹사이트의 콘텐츠 영역과 그리드 영역에 대한 분석 결과를

종합적으로 살펴보면 다음과 같이 요약된다. 영국과 미국의 경우, 첫째, 메인

화면에서의 콘텐츠 양이 많았으며, 사진이 크고 하나의 기사들을 강조하기 때

문에 높이가 아주 길었다. 둘째, 전체적으로 3단, 4단, 5단 등의 그리드 구성의

변화가 많았으며, 일정한 규칙없이 그리드가 자주 바뀌기 때문에 섹션들의 일

관성이 떨어지고 있었다. 셋째, 메인, 섹션, 기사면의 그리드가 동일하지 않고,

분할된 면적이 효율적이지 못해서 빈공간이 많이 생기고 있었다. 넷째, 기사면

은 3단 그리드를 주로 사용하여 본문 그리드는 넓지 않은 편이었다.

한국의 경우, 첫째, 전체적으로 3단과 2단 구성으로 되어 있었으며, 그리드

변화가 적은 편이었다. 둘째, TOP 썸네일의 크기가 작아서 주로 이미지 폰트

- 207 -

로 타이틀을 강조하여 TOP 기사를 표시하는 방식이었다. 셋째, 하단 콘텐츠

썸네일도 작은 크기를 사용하여 전체적으로 텍스트 비중이 높았다. 넷째, 영국

과 미국의 웹사이트에 비해 메인, 섹션, 기사면의 일관성을 유지하였다. 그러

나 기사면은 광고로 인해 그리드 구성이 복잡해지고 산만하였다. 앞으로 다양

한 디바이스에서의 활용도를 생각하여 전체의 가로폭을 재고해야 할 것으로

보인다. 다섯째, 아이덴티티를 대부분 색상으로 표현하고 있었다. 색상은 웹사

이트의 전체적인 느낌을 좌우하는 중요한 요소이므로, 앞으로 색상의 톤 조절

이 필요할 것으로 보인다. 전체적으로 국내 신문 웹사이트들은 그리드 구성이

유사하고 콘텐츠 연계도 비슷하였으며, 각 신문사마다 차별화가 부족하였다.

2. 국내외 신문 웹사이트 디자인 비교 분석

1) 분석 개요

(1) 분석 대상 및 기간

분석 대상은 국내외 9개 신문 웹사이트였다. 국내는 조선일보의 웹사이트인

조선닷컴(chosun.com), 중앙일보의 웹사이트인 조인스MSN(joinsmsn.com), 한

국일보의 웹사이트인 한국아이닷컴(hankooki.com)으로 선정하였다. 3개 신문

웹사이트를 선정한 이유는 조선일보와 중앙일보의 경우는 오프라인 신문의

영향력이 크기 때문이었으며, 한국일보의 경우는 종합일간지 웹사이트 중에서

이용자의 만족도가 기타 신문 웹사이트에 비해 높기 때문이었다. 외국은 미국

과 영국의 신문 웹사이트를 선정하였다. 미국은 뉴욕타임즈(nytimes.com), 워

싱턴포스트(washingtonpost.com), USA 투데이(usatoday.com), 영국은 더타임

즈(thetimes.co.uk), 가디언(guardian.co.uk), 텔레그라프(telegraph.co.uk)를 선정

하였다. 이들 신문 웹사이트를 선정한 이유는 미국과 영국의 대표적인 신문사

로서 영향력이 크기 때문이었다. 분석기간은 2010년 10월 19일부터 21일까지

3일간이었으며, 총 9개 신문사 웹사이트 화면을 캡처하여 분석에 사용하였다.

- 208 -

(2) 분석 유목

국내외 신문 웹사이트 디자인을 분석하기 위한 유목은 기존 연구를 바탕으

로 일반 디자인 원리, 정보전달, 내비게이션, 상호작용성, 멀티미디어와 그래픽

등의 5개 차원으로 분류하였다.

① 일반 디자인 원리 차원 : 조직성, 효율성, 독창성

일반 디자인 원리 차원으로 조직성, 효율성, 독창성의 개념들을 고려하여

총 17개 유목으로 구성하였다. 구체적으로는 일반적 구조, 그리드 유형, 그리

드 구성, 기사배치, 페이지 스타일(폰트), 페이지 스타일(색상), 페이지 스타일

(버튼과 아이콘), 페이지 스타일(그래픽), CSS(Cascading Style Sheet), 레이아

웃과 스타일 일관성, 썸네일의 크기, 사진의 크기, 규칙성, 선명도, 면분할, 공

간의 활용, 여백의 활용, 시각화 여부, 폰트․색상․버튼과 아이콘의 독창성이

다. 이중에서 조직성은 일반적 구조, 그리드 유형, 그리드 구성, 기사배치, 폰

트, 색상, 버튼과 아이콘, 썸네일의 크기, 사진의 크기, 규칙성, 선명도이며, 효

율성은 면분할, 공간의 활용, 여백의 활용, 시각화 여부이고, 독창성은 폰트,

색상, 버튼과 아이콘의 독창성 등이다.

일반적 구조, 그리드 유형, 그리드 구조, 기사배치 등은 웹사이트의 레이아

웃을 분석하기 위한 유목이다. 일반적 구조는 연속형, 그리드형, 계급형, 거미

망형을 분류하고, 그리드 유형은 수직적 구조(vertical)와 수평적 구조(hizontal)

로 분류한다. 그리드 구성은 웹사이트 각 페이지가 몇 단으로 구성되었는지를

의미하고, 기사배치는 뉴스기사의 정보가 각 페이지의 상하좌우 등에 위치하

는 것을 의미한다. 또 폰트, 색상, 버튼과 아이콘, 그래픽 등은 웹사이트의 페

이지 스타일을 분석하기 위한 유목이다. 폰트는 흔히 이미지 폰트와 시스템

폰트 등으로 분류하고, 색상은 웹사이트가 어떤 색상으로 이루어졌는지를 전

체적으로 파악하는 것을 의미하며, 버튼과 아이콘은 홈페이지에서 버튼이나

아이콘이 어느 정도로 사용되었는지, 그래픽은 뉴스기사나 정보에서 그래픽이

어느 정도 사용되었는지를 의미한다. 그리고 CSS는 폰트, 색상, 그래픽 등을

규칙적인 스타일로 만들어 모든 페이지에서 일관되게 적용되게 하는 것으로

코딩소스를 최대한 간편하고 쉽게 관리하는 것을 의미한다. 레이아웃과 스타

- 209 -

일의 일관성은 폰트, 색상, 버튼과 아이콘 등이 어느 정도 통일성을 가지고 있

는지를 파악한다.

썸네일은 축소화상을 의미하며 크기 변화를 많이 주지 않고 종류를 최대한

줄여야 하기 때문에 크기가 매우 중요하다. 사진은 크기와 규칙성 그리고 선

명도로 분류하였으며, 이중에서 사진의 규칙성은 각 페이지의 사진이 어느 정

도 일관성을 가지고 규칙적으로 제시되었는지를 의미한다. 또 면분할은 홈페

이지의 화면이 어떻게 나누어져 있는지를 의미하는 것으로 다양하게 분할되

었는지, 단순하게 분할되었는지를 분석하며, 공간이나 여백은 어느 정도 활용

되고 있는지를 높고 낮은 정도로 분석한다. 특히 이러한 면, 공간, 여백의 활

용은 홈페이지의 시각화 여부에 중요한 영향을 미친다. 또 시각화 여부는 버

튼이나 아이콘 등의 시각적 아이콘이 어느 정도 사용되고 있는지를 분석한다.

마지막으로 독창성은 폰트와 색상 그리고 버튼과 아이콘 등의 독창적인 측면

이 웹페이지에서 두드러지게 나타나는지를 분석한다.

② 정보전달 차원 : 접근가능성, 식별성, 가독성,

정보전달 차원으로 접근가능성, 가독성, 식별성의 개념들을 고려하여 총 13

개 유목으로 구성하였다. 구체적으로는 기사 접근성, 정보의 접근성, 광고의

배치, 뉴스 그룹핑, 텍스트 읽기, 기사 차별성, 기사 강조성, 광고에 따른 읽기

방해도, 정보 전달성, 정보 배열, 정보 위계, 광고 수, 광고 크기, 팝업 광고 등

이다. 이중에서 접근가능성은 기사접근성, 정보 접근성, 광고 배치이며, 가독성

은 뉴스 그룹핑, 텍스트 읽기, 기사 차별성, 기사 강조성, 광고에 따른 읽기 방

해도이고, 식별성은 정보 전달성, 정보 배열, 정보 위계, 광고 수, 광고 크기,

팝업 광고이다.

기사 접근성은 기사를 쉽게 검색하고 찾을 수 있는지에 대한 정도를 의미

하며, 정보 접근성은 정보를 쉽게 검색하고 찾을 수 있는지에 대한 정도를 의

미한다. 광고 배치는 광고가 상하좌우 어느 위치에 있는지를 분석한다. 뉴스

그룹핑은 뉴스기사의 그룹화 여부를 의미하는 것으로 관련 기사가 그룹화되

어 제시되는지를 분석한다. 텍스트 읽기는 웹사이트의 가독성이 높고 낮은지

를 평가하는 것이며, 기사 차별성은 저널리즘 관점에서 헤드라인 기사가 일반

기사와 차별되는지를 의미하며, 기사 강조성은 저널리즘 관점에서 주요기사가

- 210 -

강조되고 있는지를 의미한다. 기사 차별성과 기사 강조성 유목은 신문사 웹사

이트라는 특성상 신문사의 정체성을 드러내려는 시도가 있는지를 분석하기

위함이다. 광고에 따른 읽기 방해도는 광고 사용이 웹사이트 텍스트 읽기에

어느 정도 방해되는지를 분석한다.

정보 전달성은 정보가 전달되는 과정상에 용이성이 있는지를 의미하는 것

으로 효율적인지 비효율적인지로 분류한다. 정보 배열은 중요도 순으로 체계

적으로 구성되었는지를 의미하며, 체계적인지 비체계적인지로 분류한다. 정보

위계는 저널리즘 관점에서 뉴스기사의 중요도에 따라 위계가 있게 제시되고

있는지를 의미한다. 정보 배열이나 정보 위계 유목은 신문사 웹사이트라는 특

성상 신문사의 정체성을 드러내려는 시도가 있는지를 분석하기 위함이다. 광

고 수는 웹사이트 페이지당 평균적으로 몇 개의 광고가 있는지를 분석하며,

광고 크기는 광고의 사이즈가 크게 제시되는지 작게 제시되는지를 분석한다.

마지막으로 팝업 광고는 팝업 광고가 있는지 없는지 여부를 분석한다.

③ 내비게이션 차원 : 예측성, 자율성, 탐사성, 학습성

내비게이션 차원으로 예측성, 자율성, 탐사성, 학습성의 개념들을 고려하여

총 12개 유목으로 구성하였다. 구체적으로는 내비게이션 구성, 내비게이션 형

태, 내비게이션 유형, 내비게이션바 항목, 메뉴바 일관성, 관련기사 제시, 정보

탐색, 내비게이션에서 메뉴 인지, 사이트에서 내비게이션 인지, 섹션별 뉴스검

색, 이동 위치 인지, 사이트구조 인지 등이다. 이중에서 예측성은 내비게이션

구성, 내비게이션 형태, 내비게이션 유형, 내비게이션바 항목, 메뉴바 일관성이

고, 자율성은 관련기사 제시, 정보 탐색이다. 탐사성은 내비게이션에서 메뉴

인지, 사이트에서 내비게이션 인지, 섹션별 뉴스검색이며, 학습성은 이동 위치

인지, 사이트구조 인지이다.

내비게이션 구성은 내비게이션바, 풀다운 메뉴, 검색엔진, 버튼과 아이콘,

사이트맵 등으로 분류하며, 내비게이션 형태는 일렬형, 팝업형, 풀다운형, 아이

콘형, 디렉토리형, 검색형 등으로 분류한다. 내비게이션 유형은 글로벌 내비게

이션, 로컬 내비게이션, 계층적 내비게이션, 보조적 내비게이션 등으로 분류한

다. 또 내비게이션바 항목은 내비게이션바 항목의 개수로 평가되며, 메뉴바 일

관성은 내비게이션바나 메뉴바가 첫 페이지에서 다음 페이지로 넘어가더라도

- 211 -

통일성있게 나타나고 있는가를 의미한다.

관련기사 제시는 첫 페이지나 기사, 섹션 페이지에서 관련 기사가 묶여서

제시되고 있는지를 의미하며, 정보 탐색은 개인이 원하는 정보를 탐색할 수

있도록 웹사이트가 구성되어 있는지를 분석한다. 내비게이션 메뉴 인지는 이

용자가 내비게이션에서 메뉴를 인지할 수 있는지를 의미하며, 사이트에서 내

비게이션 인지는 이용자가 전체 사이트 구조에서 내비게이션을 인지할 수 있

는지를 의미한다. 또 섹션별 뉴스 검색은 섹션별로 원하는 뉴스기사를 검색할

수 있는지를 분석한다. 이동위치 인지는 페이지 이동 시에 이용자가 자신이

이동한 위치를 인지할 수 있는지 여부이며, 사이트 구조 인지는 이용자가 사

이트의 구조를 인지할 수 있는지 여부이다.

④ 상호작용성 차원 : 상호작용성

상호작용성 차원은 상호작용성이라는 개념 하나만 고려하여 총 13개 유목

으로 구성하였다. 유목은 SNS, UCC, 기자 이메일 링크, 기자 SNS 링크, 채팅,

RSS, 댓글, 토론방, 디자인 스타일 선택 여부, 기사내용에서의 링크, 관련 기사

및 정보의 링크, 관련 기사 및 정보의 질의응답, 검색엔진 이용 등이다.

SNS는 웹사이트에서 SNS를 활용할 수 있는지이며, UCC는 웹사이트에서

UCC를 활용할 수 있는지를 의미한다. 기자 이메일 링크는 기자의 이메일이

링크되어있는지 여부이며, 기자 SNS 링크는 기자의 SNS가 링크되어있는지

여부이다. 채팅은 기자와 독자 또는 독자와 독자 간의 채팅이 있는지 여부이

며, RSS는 웹사이트에서 RSS를 활용할 수 있는지 여부이다. 댓글은 기사에 대

한 의견 제시인 댓글이 활용되고 있는지를 의미하며, 토론방은 웹사이트에서

토론방이 게시되어 있는지를 의미한다. 또 디자인 스타일 선택 여부는 이용자

가 폰트, 색상, 속도, 언어 등의 스타일을 선택할 수 있는지를 분석한다. 기사

내용에서의 링크는 뉴스기사나 정보 텍스트 속의 다른 정보를 하이퍼링크로

연결시켜 놓았는지를 의미하며, 관련 기사 및 정보의 링크는 관련기사나 정보

가 링크되어있는지를, 관련 기사 및 정보의 질의응답은 관련기사나 정보에 대

한 질의응답이 이루어지고 있는지를 분석한다. 마지막으로 검색엔진 이용은

검색엔진의 사용성을 평가하는 항목이다.

- 212 -

⑤ 멀티미디어와 그래픽 차원 : 멀티미디어성, 그래픽성

멀티미디어와 그래픽 차원은 멀티미디어성과 그래픽성의 개념들을 고려하

여 총 8개 유목으로 구성하였다. 구체적으로는 동영상 활용, 동영상 화질, 동

영상 속도, 동영상 선명도, 사진과 동영상 제시방법, 그래픽 활용, 그래픽 화

질, 그래픽 선명도 등이다. 이중에서 멀티미디어성은 동영상 활용, 동영상 화

질, 동영상 속도, 동영상 선명도, 사진과 동영상 제시방법이며, 그래픽성은 그

래픽 활용, 그래픽 화질, 그래픽 선명도이다. 동영상 활용, 화질, 속도, 선명도

등은 웹사이트에서 제시되고 있는 동영상이 어느 정도로 활용되고 있는지, 화

질이나 속도 그리고 선명도 등은 어떠한지를 분석하며, 사진과 동영상 제시방

법은 슬라이드쇼 형식으로 제공되는지 일괄적인 목록형으로 제시되는지를 분

석한다. 그래픽 활용, 화질, 선명도는 웹사이트에서 제시되고 있는 그래픽이

어느 정도로 활용되고 있는지, 화질이나 선명도 등은 어떠한지를 분석한다.

2) 분석 결과

(1) 일반 디자인 차원에서의 국내외 신문 웹사이트 디자인 분석

일반 디자인 원리 차원에서의 국내외 신문 웹사이트 디자인은 국내 신문

웹사이트인 조선닷컴, 조인스MSN, 한국아이닷컴 그리고 외국 신문 웹사이트

인 미국의 뉴욕타임즈, 워싱턴포스트, USA투데이, 영국의 더타임즈, 가디언,

텔레그라프를 대상으로 조직성, 효율성, 독창성 개념을 고려하여 총 17개의 유

목으로 분석되었다.

① 일반 디자인 차원에서의 한국 신문 웹사이트 디자인

가. 조직성 : 레이아웃, 디자인 스타일, CSS, 일관성, 썸네일, 사진

일반적 구조는 한국의 3개 신문 웹사이트 공통적으로 격자형 배열인 그리

드 구조로 되어 있다. 그리드 구조가 사용된 것은 신문사의 웹사이트라는 특

성이 반영된 것으로, 이는 주제와 부제에 따라 일정하게 분류되어야 그리드

- 213 -

구조가 기사를 제시하는데 효율적이기 때문으로 분석된다. 그리드 유형은 3개

신문 웹사이트 공통적으로 수직적 구조와 수평적 구조가 혼합적으로 사용되

고 있었으며, 그리드 구성은 3개 신문 웹사이트가 공통적으로 2단과 3단 구성

을 사용하고 있었다. 또 기사의 배치는 웹사이트의 첫 페이지를 제외하고는

일반적인 형태인 왼쪽에 위치하고 있다는 공통점이 있었다.

웹사이트의 디자인 스타일은 폰트, 색상, 버튼과 아이콘, 그래픽, CSS 등으

로 분석될 수 있다. 폰트는 3개 신문 웹사이트가 공통적으로 이미지 폰트와

시스템 폰트가 사용되고 있음을 알 수 있다. 이미지 폰트는 일반적으로 헤드

라인 기사 등을 두드러지게 보이게 하기 위해서 사용된 것으로 보이며, 이는

저널리즘 관점에서도 신문사의 특성을 드러내 보기 위한 장치인 것으로 분석

된다. 나머지 리드나 기사본문 등은 일관성을 가지고 있는 시스템 폰트가 사

용되고 있었다. 색상은 3개 신문 웹사이트가 각기 차별성을 가지고 있었다. 일

반적으로 헤드라인은 검은색을 사용하고, 리드나 본문은 회색을 사용하고 있

었으나, 다양한 색상들이 전반적으로 여러 부분에서 다소 복잡하게 사용되고

있었다. 조선일보는 파란색을 위주로 여러 색상을 사용하고, 중앙일보는 개편

을 하면서 오렌지색을 내비게이션바나 사이드바에 사용하고 있었으며, 한국일

보는 짙은 녹색을 사용하면서 각 신문 웹사이트와 신문사의 특성을 드러내고

자 하였다.

버튼과 아이콘의 사용은 최근 활발히 이용되고 있는 SNS를 적극 활용하려

는 트렌드를 반영하고 있다. 버튼과 아이콘은 3개 신문 웹사이트가 모두 사용

하고 있었으나, 조인스MSN이 최근의 웹사이트 개편을 반영하여 보다 적극적

으로 사용하고 있었다. 특히 MSN과 제휴하면서 개편된 중앙일보의 웹사이트

는 포털사이트와 유사한 구조와 디자인 스타일을 보이면서 버튼과 아이콘을

보다 적극적으로 활용하고 있었다. 이와 달리 그래픽은 조선닷컴과 조인스

MSN이 두드러지게 사용하고 있었으며 한국아이닷컴은 상대적으로 적게 사용

하고 있었다. 이는 최근 조선일보가 추진하고 그래픽뉴스나 중앙일보의 인터

택티브 뉴스의 영향으로 그래픽이라는 요소를 적극 활용하고 있기 때문으로

분석된다. 또 CSS의 경우는 3개 신문 웹사이트가 동일하게 적용하고 있는 것

으로 나타났다. 이러한 레이아웃이나 디자인 스타일의 일관성은 3개 신문 웹

사이트가 모두 시도는 하고 있었으나 첫 페이지, 기사 페이지, 섹션 페이지 등

에서 레이아웃이나 디자인 스타일이 부분적으로만 통일되어 나타났다.

- 214 -

썸네일은 조인스MSN의 경우만 중간 크기를 사용하고 있었고, 조선닷컴이

나 한국아이닷컴은 모두 작은 크기의 썸네일을 사용하고 있었다. 이와 함께

사진의 크기는 3개 신문 웹사이트가 모두 작은 크기를 사용하고 있는 것으로

나타났다. 이처럼 썸네일이나 사진의 크기가 작은 것은 국내의 신문 웹사이트

들이 기사 텍스트를 중심으로 웹사이트를 구성하고 있기 때문인 것으로 분석

된다. 또 웹사이트의 첫 페이지나 기사 페이지 등에서 각기 다른 크기나 형식

으로 사진을 활용하고 있어 사진의 규칙성은 전혀 없는 것으로 나타났으며,

사진의 선명도도 썸네일이나 사진의 크기에 비례해서 낮게 나타나고 있었다.

나. 효율성 : 면분할, 공간 및 여백의 활용, 시각화

면분할은 조선닷컴이나 조인스MSN은 수직, 수평 구조와 2단, 3단 등으로

구성하여 매우 다양하게 면을 활용하고 있었으나, 한국아이닷컴은 상대적으로

단순하게 면을 활용하고 있었다. 또 공간 활용은 3개 신문 웹사이트가 공통적

으로 적극적으로 활용하고 있는 것으로 나타났으며, 공간 활용도가 높은 만큼

여백이 거의 없는 것으로 나타났다. 이와 함께 버튼이나 아이콘 등의 시각화

요소가 얼마나 시각화되어 있는지는 조인스MSN을 제외하고는 조선닷컴이나

한국아이닷컴은 시각화가 정도가 매우 낮은 것으로 나타났다. 즉 버튼이나 아

이콘을 사용하고는 있었지만, 이를 각 페이지마다 적극적으로 활용하지는 않

고 텍스트 위주로 구성하고 있는 것으로 나타났다.

다. 독창성 : 폰트, 색상, 버튼과 아이콘의 독창성

독창성의 요소는 색상을 제외하고는 3개 신문 웹사이트가 모두 두드러지지

않은 것으로 나타났다. 색상의 독창성은 조인스MSN은 웹사이트를 개편하면

서 오렌지색을 주로 사용하였고, 한국아이닷컴도 짙은 녹색을 사용하여 다른

웹사이트와 쉽게 구별되는 요소를 갖추었으나, 이외에 폰트나 버튼과 아이콘

등은 전혀 웹사이트의 독창성을 드러내지 못하여 3개 신문 웹사이트가 모두

비슷해 보이고 있었다.

- 215 -

② 디자인 차원에서의 미국 신문 웹사이트 디자인

가. 조직성 : 레이아웃, 디자인 스타일, CSS, 일관성, 썸네일, 사진

일반적 구조는 미국 3개 신문 웹사이트가 공통적으로 격자형 배열인 그리

드 구조로 되어 있다. 그리드 구조가 사용된 이유는 국내 신문 웹사이트와 마

찬가지로 신문사의 웹사이트라는 특성이 반영된 것으로 분석된다. 그리드 유

형도 3개 신문 웹사이트 공통적으로 수직적 구조와 수평적 구조가 혼합적으

로 사용되고 있었다. 그러나 그리드 구성은 3개 신문 웹사이트가 차이를 보이

고 있었다. 워싱턴포스트와 USA투데이는 2단과 3단 구성을 사용하고 있었으

나 뉴욕타임즈는 2단, 3단, 4단, 5단 등의 다양한 구성을 보이고 있었다. 이는

뉴욕타임즈의 웹사이트가 다양한 구성을 사용하여 자사 웹사이트의 특성을

돋보이게 하기 위한 것으로 분석된다. 기사의 배치는 웹사이트의 첫 페이지를

제외하고는 일반적인 형태인 왼쪽에 위치하고 있었다.

웹사이트의 디자인 스타일은 폰트, 색상, 버튼과 아이콘, 그래픽, CSS 등으

로 분석될 수 있다. 폰트는 3개 신문 웹사이트가 공통적으로 시스템 폰트를

사용되고 있는 것으로 나타났다. 이는 시스템 폰트를 사용하여 웹사이트의 통

일된 이미지를 만들기 위한 것으로 분석된다. 색상은 뉴욕타임즈와 워싱턴포

스트는 헤드라인 등은 파란색을 사용하였으며, 리드나 본문 등은 회색을 사용

하여 전체적으로 웹사이트가 통일성을 추구하였으며, USA투데이는 국내 신문

웹사이트와 유사하게 검은색과 회색을 주로 사용하고 기타 색상으로 파란색

을 사용하여 자사 웹사이트의 특성을 드러내고 있었다. 특히 내비게이션바에

이러한 파란색을 두드러지게 사용하였고, 첫 페이지에서 다른 페이지로 이동

하여도 이러한 파란색을 두드러진 색상으로 사용되고 있었다.

버튼과 아이콘의 사용은 최근의 트렌드를 반영하여 적극적으로 사용되고

있었다. 버튼과 아이콘은 3개 신문 웹사이트가 모두 전체 웹사이트에서 빈번

히 사용하고 있었다. 특히 트위터나 페이스북 등의 SNS를 활용하기 위한 아

이콘을 눈에 띄게 배치함으로써 이용자들이 웹사이트 이용 시에 보다 편리하

도록 하였다. 그래픽은 3개 신문 웹사이트에서 모두 적절히 사용되고 있었으

며, 특히 뉴스기사에서는 사진과 함께 그래픽을 중시하고 있는 것으로 분석되

었다. 또 CSS는 3개 신문 웹사이트가 동일하게 적용하고 있는 것으로 나타났

- 216 -

다. 또 미국 신문 웹사이트는 레이아웃이나 디자인 스타일의 일관성을 중요시

하고 있음을 알 수 있었다. 3개 신문 웹사이트가 모두 레이아웃이나 디자인

스타일의 일관성을 위해 구조나 유형 그리고 폰트, 색상 등을 웹사이트에서

통일되게 사용하고 있었다.

썸네일은 뉴욕타임즈가 큰 크기의 썸네일을 사용하고 있었으며, 워싱턴포스

트와 USA투데이는 작은 크기의 썸네일을 사용하고 있는 것으로 나타났다. 사

진의 크기는 3개 신문 웹사이트가 모두 큰 크기를 사용하고 있는 것으로 나타

났다. 이는 미국 신문의 경우 멀티미디어적인 측면을 매우 중요하게 활용하고

있는 것과도 밀접하게 관련이 있는 것으로 분석된다. 즉 멀티미디어적인 측면

이 웹사이트에서 강조되다 보니 전체적으로 텍스트보다는 사진을 강조하려는

것으로 분석된다. 또 오프라인 신문의 느낌을 주기 위하여 큰 사진이나 썸네

일을 사용하기도 하는 것으로 분석된다. 이러한 사진의 크기는 사진의 선명도

가 높게 나타나도록 하였으며, 이와 함께 사진의 규칙성도 일정하게 나타도록

하는데 영향을 미치고 있었다.

나. 효율성 : 면분할, 공간 및 여백의 활용, 시각화

면분할은 뉴욕타임즈와 USA투데이가 단순하게 사용하고 있었으며, 워싱턴

포스트는 국내 신문 웹사이트와 유사하게 수직, 수평 구조와 2단, 3단 등으로

구성하여 매우 다양하게 면을 활용하고 있었다. 공간 활용은 뉴욕타임즈와 워

싱턴포스트는 제한적으로 활용하고 있었으나, USA투데이는 적극적으로 활용

하고 있는 것으로 나타났다. 이는 여백의 활용과도 관련성을 가지고 있었는데

뉴욕타임즈와 워싱턴포스트는 여백이 있었지만 USA는 공간 활용도가 높은

만큼 여백이 거의 없는 것으로 나타났다. 또 버튼이나 아이콘 등의 시각화는

3개 신문 웹사이트가 매우 높은 것으로 나타나 공통적으로 텍스트보다는 시

각적인 요소를 강조하고 있는 것으로 나타났다.

다. 독창성 : 폰트, 색상, 버튼과 아이콘의 독창성

독창성의 요소는 3개 신문 웹사이트가 모두 두드러지게 나타나고 있었다.

특히 뉴욕타임즈와 워싱턴포스트는 단순하면서도 오프라인신문의 느낌이 나

- 217 -

타나도록 폰트와 색상의 독창성을 사용하고 있었고, USA투데이는 자시의 특

성이 드러나도록 폰트와 색상 그리고 버튼의 아이콘 등을 사용하고 있었다.

예를 들어, USA투데이는 첫 페이지에서 다음 페이지로 넘어가게 되면 광고가

먼저 제시되고 콘텐츠를 볼 수 있게 구성이 되어 있는데 이러한 점도 독창성

으로 분석된다.

③ 디자인 차원에서의 영국 신문 웹사이트 디자인

가. 조직성 : 레이아웃, 디자인 스타일, CSS, 일관성, 썸네일, 사진

일반적 구조는 영국 3개 신문 웹사이트가 공통적으로 격자형 배열인 그리

드 구조로 되어 있다. 그리드 구조가 사용된 것은 신문사의 웹사이트라는 특

성이 반영된 것으로 분석된다. 그리드 유형도 3개 신문 웹사이트 공통적으로

수직적 구조와 수평적 구조가 혼합적으로 사용되고 있었다. 그러나 그리드 구

성은 3개 신문 웹사이트가 각각 차이를 보이고 있었다. 더타임즈는 1단과 2단,

3단의 구성을 사용하고 있었고, 가디언은 3단과 4단 구성을 사용하고 있었으

며, 텔레그라프는 2단, 3단, 4단의 구성을 사용하고 있었다. 기사의 배치는 웹

사이트의 첫 페이지를 제외하고는 일반적인 형태인 왼쪽에 위치하고 있었다.

웹사이트의 디자인 스타일은 폰트, 색상, 버튼과 아이콘, 그래픽, CSS 등으

로 분석될 수 있다. 폰트는 3개 신문 웹사이트가 공통적으로 시스템 폰트를

사용되고 있는 것으로 나타났다. 이는 시스템 폰트를 사용하여 웹사이트의 통

일된 이미지를 만들기 위한 것으로 분석된다. 색상은 더타임즈는 검은색과 회

색을 사용하고 있었으며, 가디언과 텔레그라프는 파란색과 회색을 사용하고

있었다. 이는 전체적으로 웹사이트가 통일성을 추구하고 보다 단순하게 보이

게 하기 위한 것으로 분석된다. 더타임즈가 다른 2개의 신문 웹사이트와 차이

점을 보이는 것은 더타임즈가 유료화로 운영되고 있기 때문에 오프라인신문

의 특성을 그대로 반영하여 오프라인신문의 느낌을 주려는 의도로 분석된다.

버튼과 아이콘의 사용은 최근의 트렌드를 반영하여 적극적으로 사용되고

있었지만 가디언이나 텔레그라프가 버튼과 아이콘을 적극적으로 사용하고 있

다면, 더타임즈는 오프라인신문의 특성을 나타내려는 의도에서인지 버튼과 아

이콘을 부분적으로만 사용하고 있는 것으로 나타났다. 마찬가지로 그래픽도

- 218 -

더타임즈가 상대적으로 적게 사용하고 있었으며, 가디언과 텔레그라프는 모두

적절히 사용하고 있었다. 하지만 영국 신문 웹사이트는 레이아웃이나 디자인

스타일의 일관성을 중요시 하고 있음을 알 수 있었다. 3개 신문 웹사이트가

모두 레이아웃이나 디자인 스타일의 일관성을 위해 구조나 유형 그리고 폰트,

색상 등을 웹사이트에서 통일되게 사용하고 있었다.

썸네일은 3개 신문 웹사이트가 모두 큰 크기의 썸네일을 사용하고 있는 것

으로 나타났다. 이와 함께 사진의 크기도 모두 큰 크기를 사용하고 있었다. 이

는 영국 신문의 경우도 멀티미디어적인 측면을 매우 중요하게 활용하고 있으

며, 오프라인 신문의 느낌을 주는 것과도 관련이 있는 것으로 분석된다. 즉 멀

티미디어적인 측면이 웹사이트에서 강조되다 보니 전체적으로 텍스트보다는

사진을 강조하고 있으며 보다 더 오프라인 신문과 같은 모습을 보이려는 것

으로 분석된다. 이러한 사진의 크기와 비례하여 사진의 선명도가 높게 나타나

고 있었으며, 사진의 규칙성도 일정하게 나타나고 있었다.

나. 효율성 : 면분할, 공간 및 여백의 활용, 시각화

면분할은 텔레그라프만 단순하게 사용하고 있었으며, 더타임즈와 가디언은

수직, 수평 구조와 2단, 3단 등으로 구성하여 매우 다양하게 면을 활용하고 있

었다. 공간 활용은 가디언은 제한적으로 활용하고 있었으나, 더타임즈와 텔레

드래프는 적극적으로 활용하고 있는 것으로 나타났다. 이는 여백의 활용과도

관련성을 가지고 있었는데 3개 신문 웹사이트 모두 여백이 있는 것으로 나타

났다. 또 버튼이나 아이콘 등의 시각화는 가디언과 텔레그라프는 매우 높은

것으로 나타났으나 더타임즈만 낮게 나타나고 있었다. 이는 더타임즈가 시각

적인 요소보다는 텍스트적인 요소를 강조하고 있는 것으로 나타났다.

다. 독창성 : 폰트, 색상, 버튼과 아이콘의 독창성

독창성의 요소는 3개 신문 웹사이트가 모두 두드러지게 나타나고 있었다.

특히 3개 신문 웹사이트가 모두 단순하면서도 오프라인신문의 느낌이 나타나

도록 폰트와 색상 그리고 버튼과 아이콘의 독창성을 강조하고 있는 것으로

나타났다.

- 219 -

④ 디자인 차원에서의 국내외 신문 웹사이트 디자인 비교

일반 디자인 원리 차원에서 국내 신문 웹사이트 디자인은 국외 신문 웹사

이트 디자인과 큰 차이를 보이고 있는 것으로 나타났다. 국내 신문 웹사이트

는 레이아웃 측면이나 디자인 스타일 측면에서 차이를 보이고 있었다. 레이아

웃의 경우 구조나 그리드 유형 등은 유사한 경향을 보이고 있지만, 폰트나 색

상 그리고 그래픽 등은 국외 신문 웹사이트에 비해 차이가 있었다. 국외 신문

웹사이트의 경우 레이아웃과 디자인 스타일이 단순하면서 효과적으로 인지될

수 있도록 구조화되어 있었다면, 국내 신문 웹사이트는 단순화보다는 뉴스기

사 텍스트를 중심으로 구조화되어 있다고 볼 수 있었다. 특히 색상의 경우는

너무 다양하게 사용하여 국외 신문 웹사이트보다 시각적으로 방해가 된다고

여겨진다. 이러한 점은 레이아웃과 디자인스타일의 일관성을 떨어뜨리게 하는

요인이 되고 있었다.

또 썸네일이나 사진도 차이점을 보이고 있었다. 국내 신문 웹사이트는 작은

썸네일과 작은 크기의 사진을 사용하고 있었으나, 국외 신문 웹사이트는 전반

적으로 큰 썸네일과 큰 크기의 사진을 사용하고 있었다. 어느 것이 더 효과적

이라고 평가할 수는 없으나, 사진과 같은 경우는 큰 크기를 사용하는 국외 신

문 웹사이트가 보다 시각화에 기여하고 있는 것으로 평가할 수 있었다. 이외

에 폰트, 색상, 버튼이나 아이콘의 독창성 등은 국외 신문 웹사이트가 보다 높

게 평가될 수 있었다.

- 220 -

조선일보 중앙일보 한국일보New York

TimesWashington

PostUSA Today The Times Guardian Telegraph

구조 그리드 그리드 그리드 그리드 그리드 그리드 그리드 그리드 그리드

그리드 유형 수직수평 혼합 수직수평 혼합 수직수평 혼합 수직수평혼합 수직수평혼합 수직수평혼합 수직수평혼합 수직수평혼합 수직수평혼합

그리드 구성 2단, 3단 2단, 3단 2단, 3단 2단~5단 2단, 3단 2단, 3단 1단, 2단, 3단 3단, 4단 2단, 3단, 4단

기사 배치 왼쪽 왼쪽 왼쪽 왼쪽 왼쪽 왼쪽 왼쪽 왼쪽 왼쪽

폰트 이미지, 시스템 이미지, 시스템 이미지, 시스템 시스템 시스템 시스템 시스템 시스템 시스템

색상검정, 회색,

기타(파란색 등)검정, 회색

기타(오렌지 등)검정, 회색,

기타(녹색 등)파란색, 회색 파란색, 회색

검정색, 회색,기타(파란색 등)

검정, 회색 파란색, 회색 파란색, 회색

버튼+아이콘 사용 사용(전체적) 사용 사용(전체적) 사용(전체적) 사용(전체적) 사용 사용(전체적) 사용(전체적)

그래픽 사용 높음 높음 낮음 높음 높음 높음 낮음 높음 높음

CSS 적용 적용 적용 적용 적용 적용 적용 적용 적용

일관성(레이아웃과

스타일)부분 통일 부분 통일 부분 통일 전체 통일 전체 통일 부분 통일 전체 통일 전체 통일 전체 통일

썸네일 작은 크기 중간 크기 작은 크기 큰 크기 작은 크기 작은 크기 큰 크기 큰 크기 큰 크기

사진 크기 작은 크기 작은 크기 작은 크기 큰 크기 큰 크기 큰 크기 큰 크기 큰 크기 큰 크기

사진 규칙성 없음 없음 없음 있음 있음 없음 있음 있음 있음

사진 선명도 낮은 선명도 낮은 선명도 낮은 선명도 높은 선명도 높은 선명도 높은 선명도 높은 선명도 높은 선명도 높은 선명도

면분할 다양 다양 단순 단순 다양 단순 다양 다양 단순

공간 활용도 높음 활용도 높음 활용도 높음 활용도 낮음 활용도 낮음 활용도 높음 활용도 높음 활용도 낮음 활용도 높음

여백 거의 없음 거의 없음 거의 없음 있음 있음 거의 없음 있음 있음 있음

시각화 낮음 높음 낮음 높음 높음 높음 낮음 높음 높음

폰트 독창성 없음 없음 없음 있음 있음 있음 있음 있음 있음

색상 독창성 없음 있음 있음 있음 있음 있음 있음 있음 있음

버튼+아이콘 독창성

없음 없음 없음 있음 있음 있음 있음 있음 있음

<표 23> 일반 디자인 차원에서의 국내외 신문 웹사이트 디자인 비교

- 221 -

(2) 정보전달 차원에서의 국내외 신문 웹사이트 디자인 분석

정보전달 차원에서의 국내외 신문 웹사이트 디자인은 국내 신문 웹사이트

인 조선닷컴, 조인스MSN, 한국아이닷컴 그리고 외국 신문 웹사이트인 미국의

뉴욕타임즈, 워싱턴포스트, USA투데이, 영국의 더타임즈, 가디언, 텔레그라프

를 대상으로 접근가능성, 가독성, 식별성을 고려하여 총 13개의 유목으로 분석

되었다.

① 정보전달 차원에서의 한국 신문 웹사이트 디자인

가. 접근가능성 : 기사 접근성, 정보 접근성, 광고 배치

기사 접근성은 국내 3개 신문 웹사이트가 모두 높은 것으로 나타났다. 이는

신문사 웹사이트이기 때문에 뉴스기사의 중요도가 높기 때문이다. 정보 접근

성은 3개 신문 웹사이트가 차이가 있었다. 조선닷컴과 한국아이닷컴은 정보

접근성이 낮은 것으로 나타났고, 조인스MSN만 정보 접근성이 높은 것으로

나타났다. 이는 조인스MSN이 최근 웹사이트 개편 작업을 하면서 검색 기능

등을 강화했기 때문인 것으로 분석된다. 광고 배치는 각각의 웹사이트가 모두

차이가 있었다. 조선닷컴은 오른쪽 중하단에 주로 위치하고, 조인스MSN은 오

른쪽 상중단, 한국아이닷컴은 오른쪽 중하단에 주로 위치하고 있었다. 특히 한

국아이닷컴은 다른 웹사이트와 달리 사이드바로 광고를 5개 이상 제시하여

이용자의 접근성이 떨어지게 하는 원인이 되었다.

나. 가독성 : 뉴스 그룹핑, 텍스트 읽기, 기사 차별성, 기사 강조성, 광고에

따른 읽기 방해

뉴스 그룹핑은 3개 신문 웹사이트가 모두 없는 것으로 나타났다. 이는 뉴스

그룹화를 통해 관련 기사를 제시하려는 노력이 부족한 것으로 평가된다. 텍스

트 읽기는 가독성이 모두 높게 나타났다. 이는 신문사라는 특성상 뉴스기사가

강조되고 있기 때문에 다른 웹사이트보다 가독성이 높게 나타나는 것으로 분

석된다. 기사 차별성과 기사 강조성은 신문사의 저널리즘 차원에서 중요한 항

- 222 -

목으로서 3개 신문 웹사이트가 모두 기사 차별성이 있고, 기사 강조성도 헤드

라인기사 등의 주요기사를 강조하고 있는 것으로 나타났다. 특히 조인스MSN

은 웹사이트를 개편하면서 이러한 점이 더욱 두드러지고 있는 것으로 분석되

었다. 광고에 따른 방해도는 3개 신문 웹사이트 모두 매우 높은 것으로 나타

났다. 특히 조인스MSN은 웹사이트에 쇼핑몰이 있었으며, 한국아이닷컴도 사

이드바 광고와 쇼핑몰이 있어 이러한 점이 더욱 두드러지고 있었다.

다. 식별성 : 정보전달성, 정보 배열, 정보 위계, 광고 수와 크기, 팝업 광고

정보전달성은 조선닷컴과 한국아이닷컴이 비효율적인 정보전달 과정을 가

지고 있었지만, 조인스MSN은 효율적인 정보전달을 하고 있었다. 이는 조선닷

컴과 한국아이닷컴의 경우 뉴스기사를 강조하는 신문 웹사이트 고유의 특성

을 유지하고 있는 반면에 조인스MSN은 이러한 방식에서 벗어나려는 노력을

보이고 있는 것으로 분석된다. 저널리즘 차원에서 중요한 항목인 정보 배열과

정보 위계는 3개 신문 웹사이트가 모두 배열이 체계적이었고, 위계성도 뚜렷

하게 나타나고 있었다. 이러한 점은 국내 신문 웹사이트가 모두 신문사라는

고유한 정체성을 드러내려는 목적을 가지고 있다는 것을 반증하고 있었다. 또

광고의 수는 조선닷컴과 조인스MSN이 모두 페이지당 평균 3개에서 5개 이하

로 제시하고 있었으며, 한국아이닷컴은 페이지당 평균 5개 이상을 제시하여

가장 많은 광고를 제시하고 있는 것으로 나타났다. 광고의 크기는 모두 작은

크기로 제시하고 있었다. 마지막으로 팝업 광고는 3개 신문 웹사이트가 모두

있었으며, 한국아이닷컴의 경우는 페이지당 2개를 제시하여 웹사이트에 부정

적인 영향을 미치고 있었다.

② 정보전달 차원에서의 미국 신문 웹사이트 디자인

가. 접근가능성 : 기사 접근성, 정보 접근성, 광고 배치

미국 신문 웹사이트의 기사 접근성과 정보 접근성은 모두 높은 것으로 나

타났다. 그러나 광고 배치는 각각 차이를 보이고 있었다. 뉴욕타임즈와 워싱턴

포스트는 오른쪽 중하단에 위치하고 있었지만 USA투데이는 상단과 오른쪽

- 223 -

상하단에 동시에 위치하고 있었다. 이는 미국 신문사들 고유의 차별성에 원인

이 있는 것으로 뉴욕타임즈나 워싱턴포스트와 달리 USA투데이는 대중지 성

격을 가지고 있기 때문인 것으로 분석된다.

나. 가독성 : 뉴스 그룹핑, 텍스트 읽기, 기사 차별성, 기사 강조성, 광고에

따른 읽기 방해

뉴스 그룹핑은 3개 신문 웹사이트가 모두 적절하게 활용하고 있는 것으로

나타났다. 이는 미국 신문 웹사이트의 장점으로 분석되며 이러한 뉴스 그룹화

를 통해 뉴스기사를 효과적으로 전달하고 있었다. 텍스트 읽기는 모두 가독성

이 높게 나타났다. 또 기사 차별성은 뉴욕타임즈와 워싱턴포스트가 두드러지

게 나타나고 있었고, USA투데이만 차별성이 없는 것으로 나타났다. 기사 강

조성은 차별성과 마찬가지로 뉴욕타임즈와 워싱턴포스트는 주요기사를 강조

하고 있었고, USA투데이는 강조하고 있지 않는 것으로 나타났다. 광고에 따

른 방해도 뉴욕타임즈와 워싱턴포스트가 낮게 나타난 반면에 USA투데이는

높게 나타났으며, 이는 위에서 언급한 미국 신문사들의 고유의 차별성에 원인

이 있는 것으로 파악될 수 있었다.

다. 식별성 : 정보전달성, 정보 배열, 정보 위계, 광고 수와 크기, 팝업 광고

정보전달성은 3개 신문사가 모두 효율적으로 정보를 전달하고 있는 것으로

나타났다. 또 저널리즘 차원에서의 정보 배열은 모두 체계적이었으며, 정보의

위계도 있는 것으로 나타났다. 이는 신문사라는 특성을 고려하여 이루어지고

있는 것으로 분석된다. 광고의 수도 모두 동일하게 나타났는데, 광고의 수의

경우 모두 페이지당 평균 3개 이하로 제시하고 있었다. 그러나 광고의 크기는

뉴욕타임즈와 워싱턴포스트가 작은 크기인 반면에 USA투데이만 큰 크기로

제시하고 있었다. 마지막으로 팝업 광고는 USA투데이만 있는 것으로 나타났

다. 특히 국내의 신문 웹사이트가 활용하는 팝업 광고가 아니라 첫 페이지에

서 다른 페이지로 이동할 때 팝업식으로 제시되어 광고를 읽어야만 다른 페

이지로 갈 수 있는 광고를 사용하고 있었다.

- 224 -

③ 정보전달 차원에서의 영국 신문 웹사이트 디자인

가. 접근가능성 : 기사 접근성, 정보 접근성, 광고 배치

영국 신문 웹사이트의 기사 접근성과 정보 접근성은 모두 높은 것으로 나

타났다. 그러나 광고 배치는 각각 차이를 보이고 있었다. 더타임즈는 오른쪽

중하단에 위치하고 있었고 가디언은 상단과 오른쪽 하단에 위치하고 있었으

며 텔레그라프는 상단과 오른쪽 중하단에 동시에 위치하고 있었다.

나. 가독성 : 뉴스 그룹핑, 텍스트 읽기, 기사 차별성, 기사 강조성, 광고에

따른 읽기 방해

뉴스 그룹핑은 3개 신문 웹사이트가 모두 적절하게 활용하고 있는 것으로

나타났다. 이는 영국 신문 웹사이트의 장점으로 분석되며 이러한 뉴스 그룹화

를 통해 뉴스기사를 효과적으로 전달하고 있었다. 텍스트 읽기도 모두 가독성

이 높게 나타났다. 기사 차별성은 더타임즈와 텔레그라프는 두드러지게 나타

나고 있었으나, 가디언만 차별성이 없는 것으로 나타났다. 기사 강조성은 더타

임즈와 가디언만 주요기사를 강조하고 있었고, 텔레그라프는 강조하고 있지

않는 것으로 나타나 일정한 경향성을 보이고 있지 않았다. 광고에 따른 방해

는 3개 신문 웹사이트가 모두 낮은 것으로 나타났다.

다. 식별성 : 정보전달성, 정보 배열, 정보 위계, 광고 수와 크기, 팝업 광고

정보전달성은 3개 신문사가 모두 효율적으로 정보를 전달하고 있는 것으로

나타났다. 또 저널리즘 차원에서의 정보 배열은 모두 체계적이었으며, 정보의

위계도 있는 것으로 나타났다. 이는 미국과 마찬가지로 신문사라는 특성을 고

려하여 이루어지고 있는 것으로 분석된다. 광고의 수와 크기도 모두 동일하게

나타났는데, 광고의 수의 경우 모두 페이지당 평균 3개 이하로 제시하고 있었

으며, 광고의 크기도 모두 작은 크기로 제시하고 있었다. 마지막으로 팝업 광

고는 3개 신문 웹사이트가 모두 없는 것으로 나타났다.

- 225 -

④ 정보전달 차원에서의 국내외 신문 웹사이트 디자인 비교

정보전달 차원에서 국내 신문 웹사이트는 국외 신문 웹사이트와 큰 차이를

보이고 있었다. 국내 신문 웹사이트는 기사에 대한 접근성과 텍스트 읽기 그

리고 정보 배열과 정보 위계성에 있어서만 국외 신문 웹사이트와 유사한 경

향을 보이고 있었을 뿐, 다른 모든 항목에서는 상대적으로 낮은 수준인 것으

로 평가할 수 있었다. 특히 뉴스 그룹화나 정보 접근성 그리고 광고와 관련된

항목들은 국외 신문 웹사이트에 비해 효과적이지 못한 것으로 나타났다. 특히

광고의 경우는 국외 신문 웹사이트에 비해 수가 많거나 팝업 광고가 있는 등

으로 인해 정보전달을 방해하고 있는 것으로 나타났다. 유사한 경향을 보이는

기사 접근성이나 텍스트 읽기 그리고 정보 배열이나 정보 위계성은 저널리즘

차원에서 평가된 것으로 신문사라는 고유한 특성이 반영된 것으로 보인다. 이

러한 점은 신문 웹사이트가 가지는 공통적인 특성이기 때문에 국외 신문 웹

사이트보다 효과적이라고 평가하기는 어렵다. 기사의 차별성이 기사의 강조성

이 큰 차이가 없는 것도 이러한 경향을 반영하는 것이다. 따라서 국내 신문

웹사이트는 이러한 정보전달성을 강화할 수 있는 체계적인 전략을 추구할 필

요성이 있을 것이다.

- 226 -

조선일보 중앙일보 한국일보New York

Times

Washingto

n PostUSA Today The Times Guardian Telegraph

기사 접근성 높음 높음 높음 높음 높음 높음 높음 높음 높음

정보 접근성 낮음 높음 낮음 높음 높음 높음 높음 높음 높음

광고 배치 오른쪽 중하단 오른쪽 상중단오른쪽 중하단

왼쪽 사이드바오른쪽 중하단 오른쪽 중하단

상단

오른쪽 상하단오른쪽 중하단

상단

오른쪽 하단

상단

오른쪽 중하단

뉴스 그룹핑 없음 없음 없음 있음 있음 있음 있음 있음 있음

텍스트 읽기 가독성 높음 가독성 높음 가독성 높음 가독성 높음 가독성 높음 가독성 높음 가독성 높음 가독성 높음 가독성 높음

기사 차별성 있음 있음 있음 있음 있음 없음 있음 없음 있음

기사 강조성 주요기사 강조주요기사 강조

(포털 방식)주요기사 강조 주요기사 강조 주요기사 강조 없음 주요기사 강조 주요기사 강조 없음

광고에 따른

읽기 방해도높음

높음

(쇼핑몰)

높음

(사이드바광고,

쇼핑몰)

낮음 낮음 높음 낮음 낮음 낮음

정보 전달성 비효율적 효율적 비효율적 효율적 효율적 효율적 효율적 효율적 효율적

정보 배열 체계적 체계적 체계적 체계적 체계적 체계적 체계적 체계적 체계적

정보 위계 있음 있음 있음 있음 있음 있음 있음 있음 있음

광고 수페이지당

평균 5개 이하

페이지당

평균

3개 이하

페이지당

평균 5개 이상

페이지당

평균 3개 이하

페이지당

평균 3개 이하

페이지당

평균 3개 이하

페이지당

평균 3개 이하

페이지당

평균 3개 이하

페이지당

평균 3개 이하

광고 크기 작은 크기 작은 크기 작은 크기 작은 크기 작은 크기 큰 크기 작은 크기 작은 크기 작은 크기

팝업 광고있음

(페이지당 1개)

있음

(메인화면 X)

있음

(페이지당

2개)

없음 없음있음

(팝업식 광고)없음 없음 없음

<표 24> 정보전달 차원에서의 국내외 신문 웹사이트 디자인 비교

- 227 -

(3) 내비게이션 차원에서의 국내외 신문 웹사이트 디자인 분석

내비게이션 차원에서의 국내외 신문 웹사이트 디자인은 국내 신문 웹사이

트인 조선닷컴, 조인스MSN, 한국아이닷컴 그리고 외국 신문 웹사이트인 미국

의 뉴욕타임즈, 워싱턴포스트, USA투데이, 영국의 더타임즈, 가디언, 텔레그라

프를 대상으로 예측성, 자율성, 탐사성, 학습성 개념을 고려하여 총 12개의 유

목으로 분석되었다.

① 내비게이션 차원에서의 한국 신문 웹사이트 디자인

가. 예측성: 내비게이션 구성, 내비게이션 형태와 유형, 내비게이션 항목, 메

뉴바 일관성

한국 신문 웹사이트의 내비게이션 구성은 조선닷컴과 한국아이닷컴이 내비

게이션바, 풀다운 메뉴, 검색엔진, 버튼과 아이콘, 사이트맵 등을 사용하고 있

었으며, 조인스MSN은 내비게이션바, 검색엔진, 버튼과 아이콘, 사이트맵 등만

사용하여 풀다운 메뉴를 사용하지 않는 것으로 나타났다. 내비게이션 형태는

조선닷컴과 한국아이닷컴이 일렬형과 풀다운형을 동시에 제시하고 있었고, 조

인스MSN은 일렬형만 제시하고 있었다. 내비게이션 유형은 모두 글로벌 내비

게이션을 사용하고 있었다. 내비게이션 항목은 조선닷컴이 6개 항목, 조인스

MSN이 13개 항목, 한국아이닷컴이 5개 항목을 사용하고 있었다. 메뉴바의 일

관성은 모두 통일성을 강조하고 있는 것으로 나타났다.

나. 자율성 : 관련기사 제시, 정보 탐색

관련기사의 제시는 3개 신문 웹사이트가 해당 기사만 제시하고 있어 관련

기사를 제시하고 있지 않는 것으로 나타났다. 이는 웹사이트의 내비게이션 기

능을 방해하는 요인으로 작용할 수 있을 것으로 예상된다. 정보의 탐색은 조

선닷컴과 한국아이닷컴은 개인이 자신이 원하는 정보를 쉽게 찾을 수 없도록

되어 있었으나, 조인스MSN은 포털사이트의 검색 기능을 강조하고 있어 다른

신문 웹사이트보다 정보 탐색이 용이한 것으로 나타났다.

- 228 -

다. 탐사성 : 내비게이션에서의 메뉴 인지, 사이트에서 내비게이션 인지, 섹

션별 뉴스검색

내비게이션에서의 메뉴 인지는 조선닷컴과 한국아이닷컴은 쉽게 알 수 있

는 반면에 조인스MSN은 메뉴를 인지하기가 어려운 것으로 나타났다. 그러나

사이트에서의 내비게이션 인지는 3개 신문 웹사이트가 모두 페이지를 이동하

더라고 쉽게 인지할 수 있도록 구성되어 있는 것으로 나타났다. 그러나 섹션

별 뉴스검색은 섹션별로 뉴스기사를 나열하듯이 배치하여 원하는 기사를 쉽

게 찾을 수 없도록 되어 있는 것으로 나타났다.

라. 학습성 : 이동 위치 인지, 사이트 구조 인지

이동 위치 인지와 사이트 구조 인지는 3개 신문 웹사이트가 모두 잘 구조

화되어 있는 것으로 나타났다. 페이지를 클릭할 때마다 이동한 위치를 쉽게

인지할 수 있었으며, 사이트 구조도 사이트맵을 제공하여 쉽게 인지할 수 있

도록 하였다. 이는 기본적으로 내비게이션 기능이 잘 구성되어 있음을 의미하

였다.

② 내비게이션 차원에서의 미국 신문 웹사이트 디자인

가. 예측성: 내비게이션 구성, 내비게이션 형태와 유형, 내비게이션 항목, 메

뉴바 일관성

미국 3개 신문사의 내비게이션 구성은 모두 차이를 보이고 있었다. 뉴욕타

임즈의 경우 내비게이션바 대신에 사이드바를 내비게이션바와 같이 사용하고

있었고, 검색엔진, 버튼과 아이콘, 사이트맵 등을 사용하고 있었다. 워싱턴포스

트는 내비게이션바, 풀다운 메뉴, 검색엔진, 버튼과 아이콘, 사이트맵 등을 사

용하고 있었으며, USA투데이는 내비게이션바, 검색엔진, 버튼과 아이콘, 사이

트맵 등을 사용하고 있었다. 내비게이션 형태는 뉴욕타임즈와 USA투데이가

일렬형을 사용하고 있었고, 워싱턴포스트가 일렬형과 풀다운형을 함께 사용하

고 있었다. 내비게이션 유형은 모두 글로벌 내비게이션을 사용하고 있었다. 그

- 229 -

러나 내비게이션 항목은 뉴욕타임즈의 경우 사이드바를 활용하여 20개 이상

이었으며, 워싱턴포스트와 USA투데이가 7개 항목이었다. 메뉴바의 일관성은

3개 신문 웹사이트가 모두 페이지 이동시마다 동일하게 제시하여 통일성을

나타내고 있었다.

나. 자율성 : 관련기사 제시, 정보 탐색

관련기사의 제시는 미국 신문 웹사이트에서 두드러지는 것으로 개별 기사

마다 관련 기사를 쉽게 접근할 수 있도록 하였으며, 정보의 탐색도 다양한 경

로를 제공하여 이용자가 쉽게 자신이 원하는 정보를 탐색할 수 있도록 구성

되어 있었다. 이러한 점은 웹사이트의 장점으로 작용할 수 있으며 신문사 웹

사이트가 추구할 수 있는 전략으로 분석될 수 있다.

다. 탐사성 : 내비게이션에서의 메뉴 인지, 사이트에서 내비게이션 인지, 섹

션별 뉴스검색

내비게이션에서의 메뉴 인지는 뉴욕타임즈와 워싱턴포스트가 쉽게 메뉴를

인지할 수 있도록 구성되어 있는 반면에 USA투데이는 메뉴를 쉽게 인지할

수 없도록 구성되어 있었다. 사이트에서 내비게이션 인지는 3개 신문 웹사이

트가 모두 효과적인 사이트맵을 활용하여 이용자가 쉽게 인지할 수 있도록

구조화되어 있었다. 섹션별 뉴스검색도 원하는 뉴스기사를 쉽게 접근할 수 있

도록 구성되어 있어 이용의 편리성을 추구하고 있는 것으로 분석된다.

라. 학습성 : 이동 위치 인지, 사이트 구조 인지

이동 위치 인지와 사이트 구조 인지는 3개 신문 웹사이트가 모두 잘 구조

화되어 있는 것으로 나타났다. 페이지를 클릭할 때마다 이동한 위치를 쉽게

인지할 수 있었으며, 사이트 구조도 사이트맵을 제공하여 쉽게 인지할 수 있

도록 하였다. 이는 기본적으로 내비게이션 기능이 잘 구성되어 있음을 의미하

였다.

- 230 -

③ 내비게이션 차원에서의 영국 신문 웹사이트 디자인

가. 예측성: 내비게이션 구성, 내비게이션 형태와 유형, 내비게이션 항목, 메

뉴바 일관성

영국 3개 신문사의 내비게이션 구성은 모두 차이를 보이고 있었다. 더타임

즈의 경우 내비게이션바, 풀다운 메뉴, 검색엔진, 버튼과 아이콘을 사용하고

있었다. 가디언은 내비게이션바, 검색엔진, 버튼과 아이콘을 사용하고 있었으

며, 텔레그라프는 내비게이션바, 검색엔진, 버튼과 아이콘, 사이트맵을 사용하

고 있었다. 내비게이션 형태는 가디언과 텔레그라프가 일렬형을 사용하고 있

었고, 더타임즈가 일렬형과 풀다운형을 함께 사용하고 있었다. 내비게이션 유

형은 모두 글로벌 내비게이션을 사용하고 있었다. 그러나 내비게이션 항목은

모두 차이를 보이고 있었다. 더타임즈는 9개 항목을 사용하고 있었으며, 가디

언이 14개 항목으로 가장 많이 사용하였고, 텔레그라프는 10개 항목이었다. 메

뉴바의 일관성은 3개 신문 웹사이트가 모두 페이지 이동시마다 동일하게 제

시하여 통일성을 나타내고 있었다.

나. 자율성 : 관련기사 제시, 정보 탐색

관련기사의 제시는 영국 신문 웹사이트에서도 두드러지는 것으로 개별 기

사마다 관련 기사를 쉽게 접근할 수 있도록 하였으며, 정보의 탐색도 다양한

경로를 제공하여 이용자가 쉽게 자신이 원하는 정보를 탐색할 수 있도록 구

성되어 있었다. 이러한 점은 미국 신문 웹사이트와 마찬가지로 웹사이트의 장

점으로 작용할 수 있으며 신문사 웹사이트가 추구할 수 있는 전략으로 분석

된다.

다. 탐사성 : 내비게이션에서의 메뉴 인지, 사이트에서 내비게이션 인지, 섹

션별 뉴스검색

내비게이션에서의 메뉴 인지는 더타임즈와 가디언이 쉽게 메뉴를 인지할

수 있도록 구성되어 있는 반면에 텔레그라프는 메뉴를 쉽게 인지할 수 없도

- 231 -

록 구성되어 있었다. 사이트에서 내비게이션 인지는 3개 신문 웹사이트가 모

두 효과적인 사이트맵을 활용하여 이용자가 쉽게 인지할 수 있도록 구조화되

어 있었다. 섹션별 뉴스검색도 원하는 뉴스기사를 쉽게 접근할 수 있도록 구

성되어 있어 이용의 편리성을 추구하고 있었다.

라. 학습성 : 이동 위치 인지, 사이트 구조 인지

이동 위치 인지는 3개 신문 웹사이트가 모두 잘 구조화되어 있는 것으로

나타났다. 페이지를 클릭할 때마다 이동한 위치를 쉽게 인지할 수 있었다. 그

러나 사이트구조 인지는 차이를 보이고 있었다. 더타임즈와 가디언은 사이트

맵이 없어서 사이트 구조를 쉽게 인지할 수 없었지만, 텔레그라프는 사이트맵

을 제공하여 쉽게 인지할 수 있도록 구성되어 있었다. 이는 텔레그라프가 상

대적으로 더타임즈와 가디언보다 기본적인 내비게이션 기능을 잘 활용하고

있는 것으로 분석된다.

④ 내비게이션 차원에서의 국내외 신문 웹사이트 디자인 비교

내비게이션 차원에서 국내 신문 웹사이트는 국외 신문 웹사이트와 비슷한

경향을 보이고 있다. 내비게이션 구성, 형태, 유형, 항목 등의 예측성에서 세부

적으로 차이점이 있었지만, 전체적으로는 비슷한 경향을 보이고 있어 내비게

이션 기능을 강화하는 전략을 보이고 있었다. 그러나 관련 기사를 제시하거나

정보를 탐색하는 것은 국외 신문 웹사이트에 비해 매우 떨어지고 있어, 이러

한 점을 보다 강화해야 할 것으로 보인다. 내비게이션에서 메뉴를 인지하거나

사이트에서 내비게이션을 인지하는 것은 거의 비슷하였으나, 섹션별로 뉴스를

검색하는 기능은 국외 신문 웹사이트에 비해 떨어지고 있었다. 이동시 위치

인지나 사이트 구조 인지는 국외 신문 웹사이트와 비슷한 경향을 보이고 있

었다. 요컨대 내비게이션 차원에서는 국내 신문 웹사이트가 국외 신문 웹사이

트와 비슷한 전략을 보이고 있는 것으로 평가할 수 있었다.

- 232 -

조선일보 중앙일보 한국일보New York

Times

Washington

Post

USA

TodayThe Times Guardian Telegraph

내비게이션

구성

내비게이션바

풀다운 메뉴

검색엔진

버튼 & 아이콘

사이트맵

내비게이션바

검색엔진

버튼 & 아이콘

사이트맵

내비게이션바

풀다운 메뉴

검색엔진

버튼 & 아이콘

사이트맵

사이드바

검색엔진

버튼 & 아이콘

사이트맵(상세)

내비게이션바

풀다운 메뉴

검색엔진

버튼 & 아이콘

사이트맵

내비게이션바

검색엔진

버튼 & 아이콘

사이트맵

내비게이션바

풀다운 메뉴

검색엔진

버튼 & 아이콘

내비게이션바

검색엔진

버튼 & 아이콘

내비게이션바

검색엔진

버튼 & 아이콘

사이트맵

내비게이션

형태일렬형,

풀다운일렬형

일렬형,

풀다운일렬형 일렬형, 풀다운 일렬형 일렬형, 풀다운 일렬형 일렬형

내비게이션

유형글로벌 글로벌 글로벌 글로벌 글로벌 글로벌 글로벌 글로벌 글로벌

내비게이션

항목6개 항목 13개 항목 5개 항목

사이드바

(20개 이상)7개 항목 7개 항목 9개 항목 14개 항목 10개 항목

메뉴바 일관성 있음 있음 있음 있음 있음 있음 있음 있음 있음

관련기사 제시 없음 없음 없음 있음 있음 있음 있음 있음 있음

정보 탐색 없음 있음 없음 있음 있음 있음 있음 있음 있음

내비게이션에서

메뉴 인지있음 없음 있음 있음 있음 없음 있음 없음 없음

사이트에서

내비게이션

인지

있음 있음 있음 있음 있음 있음 있음 있음 있음

섹션별

뉴스검색없음 없음 없음 있음 있음 있음 있음 있음 있음

이동 위치 인지 있음 있음 있음 있음 있음 있음 있음 있음 있음

사이트구조

인지있음 있음 있음 있음 있음 있음 없음 없음 있음

<표 25> 내비게이션 차원에서의 국내외 신문 웹사이트 디자인 비교

- 233 -

(4) 상호작용성 차원에서의 국내외 신문 웹사이트 디자인 분석

상호작용성 차원에서의 국내외 신문 웹사이트 디자인은 국내 신문 웹사이

트인 조선닷컴, 조인스MSN, 한국아이닷컴 그리고 외국 신문 웹사이트인 미국

의 뉴욕타임즈, 워싱턴포스트, USA투데이, 영국의 더타임즈, 가디언, 텔레그라

프를 대상으로 상호작용성 개념을 고려하여 총 13개의 유목으로 분석되었다.

① 상호작용성 차원에서의 한국 신문 웹사이트 디자인

국내 신문 웹사이트는 이용자와의 상호작용성을 위해 SNS를 적극 활용하고

있었다. 그러나 사용자 제작 콘텐츠인 UCC는 전혀 활용하고 있지 않았다. 기

자와의 이메일 링크와 기자와의 SNS 링크는 기본적으로 제공하고 있었다. 그

러나 채팅 기능은 조선닷컴과 조인스MSN은 제공하고 있는 반면에 한국아이

닷컴은 제공하고 있지 않았다. RSS 기능은 조선닷컴, 조인스MSN, 한국아이닷

컴이 모두 활용하고 있었다. 기사에 대한 의견을 제시할 수 있는 댓글은 3개

신문 웹사이트가 모두 활용하고 있었으나 토론방은 조인스MSN만 활용하고

있는 것으로 나타났다.

이용자가 폰트, 색상, 속도, 언어 등을 선택할 수 있는 디자인 스타일 선택

여부는 3개 신문 웹사이트가 전혀 활용하고 있지 않았다. 기사내용에서 다른

정보로 이동할 수 있는 하이퍼링크는 조선닷컴과 한국아이닷컴만 제공하고

있었으나, 링크가 제대로 이루어지지 않아 엉뚱한 정보로 이어지는 경우가 많

아 제한적으로만 활용되고 있는 것으로 분석된다. 관련기사 및 정보의 링크는

조인스MSN만 제공하고 있었으며, 관련기사 및 정보에 대한 질의응답은 3개

신문 웹사이트가 모두 제공하고 있지 않았다. 마지막으로 검색엔진의 이용은

3개 신문 웹사이트가 모두 제공하고 있었지만, 조선닷컴이나 한국아이닷컴에

비해 조인스닷컴이 MSN과 제휴하여 상대적으로 더욱 비중있게 활용하고 있

었다.

② 상호작용성 차원에서의 미국 신문 웹사이트 디자인

미국 신문 웹사이트도 이용자와의 상호작용성을 위해 SNS를 적극 활용하고

- 234 -

있었지만 사용자 제작 콘텐츠인 UCC는 전혀 활용하고 있지 않았다. 기자와의

이메일 링크와 기자와의 SNS 링크는 기본적으로 제공하고 있었다. 그러나 채

팅 기능은 3개 신문 웹사이트가 모두 제공하고 있지 않았다. 그러나 RSS 기능

은 3개 신문 웹사이트가 모두 활용하고 있었다. 기사에 대한 의견을 제시할

수 있는 댓글은 3개 신문 웹사이트가 모두 활용하고 있었으나, 토론방은 3개

신문 웹사이트가 모두 활용하고 있지 않는 것으로 나타났다.

이용자가 폰트, 색상, 속도, 언어 등을 선택할 수 있는 디자인 스타일 선택

여부는 3개 신문 웹사이트가 모두 불가능하였으나, 기사내용에서 다른 정보로

이동할 수 있는 하이퍼링크 기능은 국내 신문 웹사이트에 비해 매우 비중있

게 활용되고 있었다. 특히 웹사이트 전체적으로 이러한 링크 기능을 적절히

활용하고 있는 것은 장점으로 분석될 수 있다. 또 관련기사 및 정보의 링크와

관련기사 및 정보에 대한 질의응답도 3개 신문 웹사이트가 모두 제공하고 있

었다. 마지막으로 검색엔진의 이용은 3개 신문 웹사이트가 모두 제공하고 있

었지만, 뉴욕타임즈와 워싱턴포스트에 비해 USA투데이가 구글을 활용하여 상

대적으로 더욱 편리한 사용성을 제공하고 있었다.

③ 상호작용성 차원에서의 영국 신문 웹사이트 디자인

영국 신문 웹사이트도 이용자와의 상호작용성을 위해 SNS를 적극 활용하고

있었지만 사용자 제작 콘텐츠인 UCC는 전혀 활용하고 있지 않았다. 기자와의

이메일 링크와 기자와의 SNS 링크는 기본적으로 제공하고 있었다. 채팅 기능

은 더타임즈와 가디언은 제공하고 있지 않았지만 텔레그라프는 제공하고 있

었다. RSS 기능도 가디언, 텔레그라프, 더타임즈가 모두 활용하고 있었다. 기

사에 대한 의견을 제시할 수 있는 댓글은 3개 신문 웹사이트가 모두 적절히

활용하고 있었지만 토론방은 텔레그라프만 활용하고, 더타임즈와 가디언은 활

용하고 있지 않는 것으로 나타났다.

이용자가 폰트, 색상, 속도, 언어 등을 선택할 수 있는 디자인 스타일 선택

여부는 3개 신문 웹사이트가 모두 불가능하였으며, 기사내용에서 다른 정보로

이동할 수 있는 하이퍼링크 기능은 매우 비중있게 활용되고 있었다. 미국 신

문 웹사이트와 마찬가지로 웹사이트 전체적으로 이러한 링크 기능을 적절히

활용하고 있는 것은 장점으로 분석될 수 있다. 또 관련기사 및 정보의 링크와

- 235 -

관련기사 및 정보에 대한 질의응답도 3개 신문 웹사이트가 모두 제공하고 있

었다. 마지막으로 검색엔진의 이용은 3개 신문 웹사이트가 모두 제공하고 있

었지만, 더타임즈와 가디언에 비해 텔레그라프와 구글을 활용하여 상대적으로

더욱 편리한 사용성을 제공하고 있었다.

④ 상호작용성 차원에서의 국내외 신문 웹사이트 디자인 비교

상호작용성 차원에서는 국내 신문 웹사이트와 국외 신문 웹사이트가 비슷

한 전략을 보이고 있었지만, 세부적으로는 큰 차이를 보이고 있었다. 국내의

경우 SNS나 이메일, 채팅, 댓글 등을 적극적으로 활용하고 있었지만, 이용자

와의 상호작용성을 추구하는 전략으로 웹사이트를 구성하였다고 보기는 힘들

어 보인다. 그러나 국외의 경우는 SNS나 이메일, RSS 등을 적절히 활용하여

보다 더 상호작용성을 추구하고 있는 것으로 나타났다. 예를 들어, 기사가 제

시될 때 국내 신문 웹사이트는 형식적으로 이러한 기능들을 제공하고 있는

것으로 보이지만, 국외의 경우는 기자의 이메일과 SNS를 잘 보이는 곳에 위

치하고 이를 이용자가 적극적으로 이용하기 편리하도록 제공하고 있다.

기사 내용에서 다른 정보로 이동하는 하이퍼링크나 관련 기사 및 정보의

링크의 경우도 국내의 신문 웹사이트들은 제한적으로 제공하고 있어 거의 없

는 기능과 마찬가지였지만, 미국이나 영국 신문 웹사이트들은 이를 적극적으

로 활용하여 이용자들이 쉽게 링크하고 자신이 원하는 정보를 찾을 수 있게

하였다. 또 질의응답 기능도 국내 신문 웹사이트보다 국외 신문 웹사이트가

훨씬 높은 수준을 보이고 있었다. 이러한 점은 국내 신문 웹사이트가 앞으로

개선되어야 할 방안으로 평가된다.

- 236 -

조선일보 중앙일보 한국일보New York

Times

Washington

Post

USA

TodayThe Times Guardian Telegraph

SNS 있음 있음 있음 있음 있음 있음 있음 있음 있음

UCC 없음 없음 없음 없음 없음 없음 없음 없음 없음

기자 이메일

링크있음 있음 있음 있음 있음 있음 있음 있음 있음

기자 SNS

링크있음 있음 있음 있음 있음 있음 있음 있음 있음

채팅 있음 있음 없음 없음 없음 없음 없음 없음 있음

RSS 있음 있음 있음 있음 있음 있음 있음 있음 있음

댓글 있음 있음 있음 있음 있음 있음 있음 있음 있음

토론방 없음 있음 없음 없음 없음 없음 없음 없음 있음

디자인 스타일

선택 여부불가능 불가능 불가능 불가능 불가능 불가능 불가능 불가능 불가능

기사내용에서

의

링크

있음(제한적) 없음 있음(제한적) 있음(전체적) 있음(전체적) 있음(전체적) 있음(전체적) 있음(전체적) 있음(전체적)

관련 기사 및

정보의 링크없음 있음 없음

있음(높은

수준)

있음(높은

수준)

있음(높은

수준)

있음(높은

수준)

있음(높은

수준)

있음(높은

수준)

관련 기사 및

정보의

질의응답

없음 없음 없음 있음 있음 있음 있음 있음 있음

검색엔진 이용 낮음 높음(MSN) 낮음 낮음 낮음 높음(구글) 낮음 낮음 높음(구글)

<표 26> 상호작용성 차원에서의 국내외 신문 웹사이트 디자인 비교

- 237 -

(5) 멀티미디어와 그래픽 차원에서의 국내외 신문 웹사이트 디자인 분석

멀티미디어와 그래픽 차원에서의 국내외 신문 웹사이트 디자인은 국내 신

문 웹사이트인 조선닷컴, 조인스MSN, 한국아이닷컴 그리고 외국 신문 웹사이

트인 미국의 뉴욕타임즈, 워싱턴포스트, USA투데이, 영국의 더타임즈, 가디언,

텔레그라프 등을 대상으로 멀티미디어성, 그래픽성 개념을 고려하여 총 8개의

유목으로 분석되었다.

① 멀티미디어와 그래픽 차원에서의 한국 신문 웹사이트 디자인

가. 멀티미디어성 : 동영상 활용, 화질, 속도, 선명도 & 사진과 동영상 제시

방법

국내 신문 웹사이트는 모두 동영상을 활용하고는 있었으나 전체 웹사이트

에서 차지하는 비율이 적어서 적절히 활용하고 있다고 평가할 수 없었다. 동

영상의 화질과 속도 그리고 선명도도 비교적 낮은 수준으로 제공하고 있다고

분석할 수 있었다. 여기에는 기술적 요인 등 여러 가지 원인이 있겠지만 기본

적으로 동영상을 적극적으로 활용하려는 전략을 가지지 않은 것으로 분석된

다. 사진과 동영상 제공 방법은 슬라이드쇼 형식을 주로 활용하고 있었다.

나. 그래픽성 : 그래픽 활용, 화질, 선명도

그래픽의 활용은 한국아이닷컴은 적극적으로 활용하고 있지 않았지만, 조선

닷컴은 인포그래픽, 조인스MSN은 인터랙티브뉴스를 제공하고 있어 매우 적

극적으로 활용하고 있었다. 그래픽의 화질이나 선명도도 한국아이닷컴에 비해

조선닷컴과 조인스MSN이 매우 높은 수준인 것으로 나타났다.

- 238 -

② 멀티미디어와 그래픽 차원에서의 미국 신문 웹사이트 디자인

가. 멀티미디어성 : 동영상 활용, 화질, 속도, 선명도 & 사진과 동영상 제시

방법

미국 신문 웹사이트는 모두 동영상을 적극적으로 활용하고 있었다. 또 동영

상의 화질이나 속도 그리고 선명도도 매우 높은 수준이었다. 이는 미국 신문

웹사이트들의 특성으로 분석될 수 있으며, 이러한 동영상의 높은 활용이 신문

웹사이트의 장점으로 작용할 수 있는 것으로 평가된다. 또 사진과 동영상 제

시 방법은 각기 차이를 보이고 있었다. 뉴욕타임즈는 슬라이드쇼 형식으로 제

시하고 있었고, 워싱턴포스트와 USA투데이는 슬라이드쇼 형식과 목록형을 혼

합적으로 활용하여 제시하고 있었다.

나. 그래픽성 : 그래픽 활용, 화질, 선명도

그래픽 활용도 미국 신문 웹사이트는 모두 매우 높은 것으로 나타났다. 또

한 그래픽의 화질과 선명도도 매우 높은 수준이었다. 이는 동영상과 마찬가지

로 그래픽을 웹사이트의 장점으로 활용하려는 전략을 취하고 있는 것으로 장

점으로 작용하고 있다고 평가할 수 있을 것이다.

③ 멀티미디어와 그래픽 차원에서의 영국 신문 웹사이트 디자인

가. 멀티미디어성 : 동영상 활용, 화질, 속도, 선명도 & 사진과 동영상 제시

방법

영국 신문 웹사이트의 동영상 활용은 각각 차이를 보이고 있었다. 더타임즈

의 경우는 동영상을 적극적으로 활용하고 있지 않았으나 가디언과 텔레그라

프는 동영상을 적극적으로 활용하고 있었다. 그러나 화질이나 속도 그리고 선

명도는 모두 높은 수준인 것으로 나타났다. 이는 더타임즈의 경우 유료화로

인해 오프라인신문과 유사하게 웹사이트를 구성함으로써 나타나게 된 차이점

으로 분석된다. 또 사진과 동영상 제시 방법은 각기 차이를 보이고 있었다. 더

- 239 -

타임즈와 텔레그라프는 목록형으로 제시되고 있었고, 가디언은 슬라이드쇼 형

식과 목록형을 혼합적으로 사용하여 제시하고 있었다.

나. 그래픽성 : 그래픽 활용, 화질, 선명도

영국 신문 웹사이트의 그래픽 활용도 동영상과 비슷한 경향을 보이고 있었

다. 더타임즈는 그래픽을 적극적으로 활용하고 있지 않았으나 가디언과 텔레

그라프는 그래픽을 적극적으로 활용하고 있었다. 그러나 그래픽의 화질이나

선명도는 모두 높은 수준인 것으로 나타났다.

④ 멀티미디어와 그래픽 차원에서의 국내외 신문 웹사이트 디자인 비교

전반적으로 멀티미디어와 그래픽 차원에서는 국내 신문 웹사이트와 국외

신문 웹사이트가 큰 차이를 보이고 있었다. 국내 신문 웹사이트는 동영상과

그래픽을 적극적으로 활용하고 있지 않았으나, 미국과 영국의 신문 웹사이트

는 동영상과 그래픽을 적극적으로 활용하려는 전략을 보이고 있었다. 물론 국

내 신문 웹사이트 중에서 조선닷컴이나 조인스MSN이 그래픽뉴스 등을 제공

하면서 그래픽 기능을 강화하려는 노력을 보이고 있지만 아직까지는 매우 부

족한 것으로 분석된다. 국외 중에서는 영국의 더타임즈가 전략적으로 동영상

이나 그래픽을 적극적으로 활용하고 있지 않았지만, 화질이나 선명도가 높은

수준인 것으로 보아 일반화할 수는 없었다.

- 240 -

조선일보 중앙일보 한국일보New York

Times

Washington

PostUSA Today The Times Guardian Telegraph

동영상 활용 낮음 낮음 낮음 높음 매우 높음 매우 높음 낮음 매우 높음 매우 높음

동영상 화질 낮은 수준 낮은 수준 낮은 수준 높은 수준 높은 수준 높은 수준 높은 수준 높은 수준 높은 수준

동영상 속도 낮은 수준 낮은 수준 낮은 수준 높은 수준 높은 수준 높은 수준 높은 수준 높은 수준 높은 수준

동영상

선명도낮은 수준 낮은 수준 낮은 수준 높은 수준 높은 수준 높은 수준 높은 수준 높은 수준 높은 수준

사진과

동영상

제시 방법

슬라이드쇼 슬라이드쇼 슬라이드쇼 슬라이드쇼슬라이드쇼+

목록형 혼합

슬라이드쇼+

목록형 혼합목록형

슬라이스쇼+

목록형 혼합목록형

그래픽 활용 높음 높음 낮음 높음 높음 높음 낮음 높음 높음

그래픽 화질 높은 수준 높은 수준 낮은 수준 높은 수준 높은 수준 높은 수준 높은 수준 높은 수준 높은 수준

그래픽

선명도높은 수준 높은 수준 낮은 수준 높은 수준 높은 수준 높은 수준 높은 수준 높은 수준 높은 수준

<표 27> 멀티미디어와 그래픽 차원에서의 국내외 신문 웹사이트 디자인 비교

- 241 -

Ⅵ. 국내외 신문 웹사이트 디자인에 대한 이용자 조사

1. 조사 방법

현재 재학 중인 대학생 20명을 대상으로 준개방형 설문과 인터뷰를 통해

국내외 9개 신문 웹사이트인 조선닷컴, 조인스MSN, 한국아이닷컴, 뉴욕타임

즈, 워싱턴포스트, USA투데이, 더타임즈, 가디언, 텔레그라프의 디자인에 대한

이용자(독자) 의견 조사를 실시하였다.

성별 나이 전공

A 남 24 신문방송

B 남 23 신문방송

C 여 21 신문방송

D 남 21 신문방송

E 여 22 신문방송

F 여 23 신문방송

G 남 24 신문방송

H 남 27 신문방송

I 남 26 신문방송

J 여 27 신문방송

K 남 26 신문방송

L 여 26 신문방송

M 여 22 디자인

N 남 23 디자인

O 여 22 디자인

P 남 24 컴퓨터공학

Q 남 24 컴퓨터공학

R 여 22 전자공학

S 남 23 전자공학

<표 28> 조사 대상자

- 242 -

2. 조사 결과

1) 일반 디자인 원리 차원에서의 평가

초기 화면의 경우 웹사이트의 정체성이 드러날 수 있는 디자인에 더욱 주

목하는 것으로 나타났다. 이용자들은 미국이나 영국 신문 웹사이트를 적절한

컬러와 함께 더 편리하고 깔끔한 완성도를 보여준 사이트라고 평가하였으며,

레이아웃, 폰트, 색감에 민감하게 반응을 하였다. 또 그것이 신문사의 이미지

와 정체성에 영향을 미치며, 웹페이지에 있는 기사들의 가독성에도 영향을 미

친다고 생각하였다. 즉 비슷한 내용의 기사라 할지라도 디자인과 레이아웃, 색

감, 폰트에 영향을 받는 것으로 분석된다.

아직까지도 낯설게 느껴지는 외국 뉴스들은 한국 사이트에 비해 굉장

히 체계적이었다. 앞에서 말했던 것처럼 워싱턴포스트와 가디언은 디자

인, 레이아웃, 아주 세밀한 사항까지 신경 쓰는 모습에 반하였다(E, 22,

여).

디자인이나 인터페이스적인 측면까지 종합했을 때 지루하지 않고 적절

한 컬러와 함께 더 편리하고 깔끔한 완성도를 보여준 사이트는 더타임

즈라고 생각한다(G, 24, 남).

외국 신문 웹사이트들은 모두가 그렇지 않지만 신문사의 첫 페이지부

터 자사의 색깔을 유감없이 드러낸다. 예를 들어 타임지와 텔레그라프

등의 글씨체는 자사만의 로고로 작용할 정도로 특수성을 갖는다. 또한

일정한 폰트와 심플한 디자인을 들 수 있다(D, 21, 남).

워싱턴포스트는 인터페이스와 전체적인 디자인 부분에서 타 사이트와

는 비교가 되지 않는다. 워싱턴포스트 신문 로고 자체가 흑과 백으로

심플하면서 깔끔한 논조가 있을 것 같다는 인상을 주는데, 인터페이스

메뉴들에도 로고의 색감을 그대로 살려서 보색 대비를 통한 주목성과

- 243 -

파란색으로 메뉴의 배경이(마우스를 가져다 댔을 때) 변하는 모양은 독

자들에게 누르고 싶은 충동을 느끼게 한다. 게다가 타사이트들이 가로

로, 세로로 쭉 진열한데 데에 비해 직사각형의 블록을 만들어서 사이트

의 전체적인 흐름을 망치지 않는다(F, 23, 여).

초기 화면의 디자인 이미지는 이용자에게 많은 영향을 미치는 것으로 나타

났다. 이는 웹페이지에 접속했을 때, 가장 눈에 띄는 메인기사의 내용이 아니

라 자사의 이미지와 직결된 웹페이지의 전체적인 이미지가 이용자들에게 먼

저 다가간다는 의미이다. 이런 관점에서 광고도 중요한 영향을 미치는 것으로

나타났다. 특히 한국 신문 웹사이트의 경우는 광고에 대해 ‘무분별한 광고들’

이라고 느끼는 이용자들이 많았다. 광고의 수와 그 배치에 따라 이용자가 느

끼는 웹사이트에 대한 평가가 많은 부분 차지하였다. 무분별한 광고 노출은

오히려 가독성을 방해하고, 이미지와도 직결되는 중요한 부분이었다.

적절한 광고의 배너의 배치는 수용자로 하여금 거부감 보다는 쉽게 다

가갈 수 있게 해준다(S, 23, 남).

한국 신문이 외국과 비교하였을 때 가장 큰 차이로는 제일 먼저 무분

별한 광고들로 본다. 기사위로 뜨는 큰 광고들부터 해서 기사 읽는 스

크롤을 따라 줄줄이 따라오는 광고들, 외국 사이트는 자신들의 다른 매

체를(ex. 구글TV, FastFix영상물 등) 광고하나 한국 사이트들은 대부분

비뇨기과 성형외과 등이나 그나마 조선일보가 독자들이 나가가기 편하

도록 하고 있다는 느낌을 받았다(F, 23, 여).

한국의 사이트의 경우 외국 사이트보다 광고가 너무 많았다. 특히 배너

광고 등이 기사내부를 들어오고 기사보다 중시 되어 보이는 듯해서 좋

지 못했다(M, 22, 여).

우리나라의 신문사 사이트에서 가장 아쉬웠던 점은 광고라고 생각한다.

물론 광고가 신문사의 주 수입원 이기는 하지만 그런 광고라도 배열을

잘 한다면 독자가 더욱 더 깔끔하게 느낄 것이고 자사 이미지 또한 더

- 244 -

좋아 질 것으로 생각한다. 예를 들면 독자의 입장에서 광고가 호기심

있게 받아들여지거나 관심을 끌어야 하지만 광고가 기사위에 덮여있거

나 잘못된 위치에 있어 역으로 독자의 짜증을 유발할 수 있다. 독자는

오히려 그 광고를 클릭하기보다는 관심조차 주지 않고 차단해 버릴 수

있다. 이럴 경우에는 독자가 기사를 읽는 집중도를 떨어뜨릴 수 있다고

본다(F, 23, 여).

그러나 미국과 영국 신문 웹사이트의 경우는 광고가 있는 편이지만 그 양

이 많지 않고 그 배치 또한 이용자에게 방해가 되는 정도는 아니었다. 따라서

이용자들이 기사를 접할 때 집중할 수 있고 가독성도 증가한다는 평가를 하

고 있었다. 광고가 적당히 있더라도 배치가 적절하다면 독자의 입장에서는 보

다 가독성이 높은 웹사이트가 될 수 있다는 의미이다.

미국 신문사 사이트의 경우 USA투데이를 제외한 2개의 사이트는 광고

가 적당히 있지만 배치를 적절히 잘하여 산만하지 않았다. 디자인으로

써는 가장 간결하고 보기 좋게 만들어져 있었으며 사진과 동영상도 양

적, 질적으로 모두 좋았다(A, 24, 남).

가디언은 일단 광고가 적어 눈에 거슬리는 것이 없다. 광고 또한 지면

과의 색감, 분위기를 고려해 배치했다(D, 23, 남).

국내의 웹사이트에 비해 대체로 해외 사이트는 광고가 적은 편이다. 홈

페이지에서부터 신문사라는 느낌이 강하다. 디자인과 구조도 감각적이

며 다양한 정보를 제공해 주고자하는 모습이 보인다. 그에 비해 국내

신문사 웹사이트는 광고를 하나라도 더 보여주고 싶어 하는 느낌이다.

기사도 나열식으로, 뉴스를 보여주기 보다는 기사를 데이터베이스에 추

가시켜 두는 것 같다(E, 22, 여).

정보의 접근가능성 측면에서 워싱턴포스트와 가디언이 높은 평가가 나타났

다. 특히 워싱턴포스트지는 ‘정보연결기능 면에서 잘 구성이 되었다’는 평가가

있었으며, 관련 기사로부터 칼럼까지 같은 주제에 대해 자세히 알 수 있는 연

- 245 -

결고리가 잘 구축되어, 관심기사에 대해 많은 정보를 습득할 수 있는 장점이

있다고 평가하였다.

워싱턴 포스트는 전체적인 레이아웃과 폰트들의 사용이 읽기 편하게

아주 잘 구성되어 있었다. 무엇보다 좋았던 것이 정보연결 기능면에서

관련된 기사에서부터 칼럼까지 접근할 수 있게 잘 구성되어 있었다. 더

불어 멀티미디어의 다양한 사용과 그 동영상의 퀄리티가 상당히 높다

는 점이었다(A, 24, 남).

가디언지는 관련 기사부터 칼럼은 물론 관련된 블로그 글들까지 아주

상세하게 거미줄이 연결된 것과 같이 촘촘하게 구성되어 있어 자료들

이 꽉꽉 차있다는 느낌이 강하게 주었고 그 디자인이 세련되고 현대적

이어서 단지 신문의 기능을 넘어 보기에도 즐겁게 해준다는 느낌을 강

하게 받았다(D, 21, 남).

그러나 한국 신문 웹사이트는 정보연결과 관련된 기능들이 다소 부족하다

는 평가였다. 사이트의 서버를 다르게 구축하여 이용자들이 관심분야 및 관심

기사에 대해 찾아가면서 불편함을 느낀다고 하였다.

한국의 경우 특정 섹션의 경우 불필요 하게 사이트의 서버를 다르게

구축하여 그 섹션을 찾아갈 때 새로운 페이지를 뜨게 하면서 귀찮게

하는 경우가 종종 있다. 한 번에 여러 것을 넣기보다 핵심이 되는 기초

부터 잡아 놓고 모으는 것이 좋을 것 같다. 아직 서비스에 많은 개선점

이 보인다(Q, 24, 남).

독자들은 원하는 정보를 얻기 위해 웹사이트 안에서 찾아가기를 자주

한다. 하지만, 그 찾아가기에 어려움이 따른다거나, 장애요인이 있는 경

우 불편함을 느끼는 것으로 밝혀졌다. 한국의 경우 섹션별로 서버를 달

리 구축하여 원래 보고 있던 웹페이지가 아닌 새로운 팝업창이 구축되

도록 하는 경우가 종종 발생하여 정보간의 연결망이 산만하게 느껴지

는 것으로 해석된다(P, 24, 남).

- 246 -

또 한국 신문 웹사이트는 동영상과 사진기사가 미국이나 영국 신문 웹사이

트에 비해 떨어진다”는 평가를 하였다. 이는 기술적인 문제로써 디자인과 직

결되는 사항은 아니지만, 신문사의 이미지에 많은 영향을 미치는 것으로 분석

된다. 화질이 좋지 않은 영상이나 사진의 경우 전체적인 디자인에 조합이 되

지 않거나, 질적인 면에서 부족해 보일 수 있는 가능성이 있기 때문이다. 하지

만 사진과 동영상의 질적인 면은 떨어지나 활용 비율이 높다는 것은 긍정적

으로 평가되었다.

국내 신문사 사이트에서 아쉬웠던 점은 기사에 너무 치중한 나머지 사

진과 동영상의 수가 외국 사이트에 비해 모자란다고 생각한다. 사진의

화질의 경우 국내의 메이저 신문사라는 타이틀이 부끄러울 정도로 외

국 사이트에 비해 떨어진다고 느꼈다(C, 21,여).

국내 사이트들은 해외 사이트들보다 멀티미디어 등 새롭고 다양한 멀

티미디어 콘텐츠를 하이퀄리티로 제공하지 못하고 있다는 느낌을 받았

다. 경쟁적으로 최고라고 내세우지만 실제로 세공하고 있는 콘텐츠는

비슷비슷하다(G, 24, 남).

웹사이트의 정보들을 어떤 단위로 구성하는지에 대한 조직성 측면에서 이

용자들은 한국 신문 웹사이트들은 초기화면에 정리가 되지 않아 다소 산만하

다는 평가를 하였다. 또 섹션별로 효율적으로 정리가 잘되어 구분이 명료하지

만, 초기화면에 노출되는 기사의 양이 많다는 평가가 있었다.

국내 웹사이트는 메인화면부터 정돈되지 못하다. 섹션별 구분이 있으나

거의 모든 기사 제목부제를 메인에 쏟아놓은 느낌이 든다. 스크롤은 끝

없이 내려가며 중요기사에 대한 강조가 없기 때문에 가독성을 떨어뜨

린다. 레이아웃과 이미지 또한 전체적으로 난잡하다(F, 23, 여).

한국 신문은 주요기사 밑에 비슷한 주제이며 내용까지 비슷한 뉴스를

진열해 놓은 것을 볼 수 있는데 외국 신문은 그 주제의 원인, 경과 과

정 등을 볼 수 있었다(R, 22, 여).

- 247 -

반면에 뉴욕타임즈의 경우에는 종이신문의 레이아웃을 그대로 가져와 홈페

이지 디자인에 적용하였다는 평가가 있었다. 이로 인해 이용자에게 종이신문

과 웹사이트의 이질감을 최소화시켰다는 점이 긍정적으로 평가되었다. 또 웹

사이트 내에 동영상의 활용이 적절하게 잘되어 있어 웹페이지 안의 기사와

동영상이 잘 어울러졌다는 평가였다.

뉴욕타임즈는 로고가 가운데에 나열되어 있다. 이는 지면 신문의 메인

페이지를 연상하게 한다. 구성 역시 신문과 닮아있는 디자인은 처음 봤

을 때부터 이용자에게 신뢰감을 줄만하다(N, 23,남).

뉴욕타임즈의 경우, 기사내의 멀티미디어 부분에서 억지로 동영상과 사

진을 크게 집어넣지 않고 작게 링크 형식으로 만들어 옆에 붙임으로써

필요하면 그 기사를 본 후 조금 더 시간을 소비하여 볼 수 있는 형식

이었다. 처음부터 동영상을 첨부해 놓으면 페이지 리딩시간도 오래 걸

리는데 이를 감안하여 기사내의 배치를 잘 생각하여 만든 사이트 같다

(Q, 24, 남).

2) 정보전달 차원에서의 평가

한국 신문 웹사이트는 색상의 사용이 통일성이 없어 다소 어설프게 느껴진

다는 평가였다. 이는 신문사 여러 색상을 사용한 결과로 파악할 수 있다. 또

인터페이스 자체가 혼란스럽게 정렬되어 기사를 읽고자 하는 동기가 반감되

었다는 평가도 있었다. 이러한 색상과 인터페이스로 인해 포털 사이트의 느낌

이 강하게 노출되어 미국와 영국 신문 웹사이트와 차이를 보이고 있었다. 특

히 한국아이 닷컴의 경우에는 정보연결이 전무하였고 멀티미디어 이용측면에

서도 찾아보기 힘들 정도로 열악하다는 평가가 있었다. 따라서 한국 신문 웹

사이트만의 고유한 특징을 살린 디자인 구축이 필요한 것으로 분석된다.

국내 신문 사이트들은 급조한 느낌이 많이 난다. 어설픈 컬러 사용과

혼란스런 인터페이스 사용으로 기사를 읽고 싶은 마음이 싹 사라지게

- 248 -

만든다(M, 22, 여).

우선 국내 웹사이트의 경우에는 조선일보를 제외하고는 제대로 갖추어

진 것이 너무 없다는 느낌이 지배적이었다. 특히 한국아이 닷컴의 경우

에는 정보연결이 전무하였고 멀티미디어 이용측면에서도 찾아보기 힘

들 정도로 열악했다(R, 22, 여).

국내 사이트들은 신문사 사이트라는 느낌보다 포털의 느낌이 강하다.

검색을 해도 포털사이트 같이 검색되는 점은 외국 사이트들과 다른 점

이라고 생각한다. 뉴스검색에 있어서 뉴스검색이 주가 아니라 가벼운

정보들 제공의 느낌이 강했다(S, 23, 남).

이에 비해 영국 가디언은 섹션별 고유의 색깔을 표현하여 그 섹션 안에서

색깔에 대한 통일감을 주고 있다고 평가하였다. 이용자로 하여금 본인이 어떤

섹션에 진입해있고, 어떤 분야에 관심을 갖는지 명확히 드러난다는 점에서 긍

정적으로 평가하였다. 또 아이콘과 버튼의 적절한 배치와 깔끔한 디자인으로

이용자들이 효율적으로 이용할 수 있게 디자인되었다는 면에서도 긍정적인

평가를 받았다. 따라서 웹사이트를 이용함에 있어 이용자들에게 시각적인 요

소가 상당부분 차지하고 있음을 알 수 있었다.

가디언지는 특히 칼럼리스트들의 블로그도 바로 연결하여 볼 수 있는

섹션은 다양한 정보를 얻기 위한 정보연결 측면에서 아주 좋았던 거

같다(S, 23, 남).

가디언은 각 분야마다 다른 색을 이용, 위치파악에 용이하고, 분야마다

통일감이 생겨서 독자들이 보기 편하다. 또한 아주 적은 부분이지만 아

이콘, 버튼을 신경서서 깔끔하게 만들어서 마치 독자들의 마우스를 유

혹하는 듯하다(O, 22, 여).

개인적으로 웹 페이지 디자인보단 매체의 장점을 활용하는 방안이 더

현명하다고 생각되는데 이러한 점에선 가디언이 적합하다(N, 23, 남).

- 249 -

웹사이트의 디자인은 이용자들의 이해를 돕기 위한 정보전달의 도구이기

때문에 정보의 명확한 전달이 고려되어야 한다. 그러나 한국 신문 웹사이트는

그래픽과 동영상이 기사와 어울리지 못하고 있다는 평가가 있었다. 이러한 평

가는 정보전달 도구로서 역할을 수행하지 못하는 것으로 평가할 수 있다. 또

이용자들이 검색어를 입력할 경우 관련 기사의 노출이 충분하지 않았으며, 검

색이 아닌 여러 번의 경로를 거쳐 원하는 정보를 찾을 수 있게 디자인되어 있

다는 평가였다.

국내 신문사들은 최근 조인스닷컴의 경우처럼 대대적인 변화를 통해

외국 사이트를 따라잡기 위해 노력하고 있는 듯 하나 여전히 미흡한

점이 다수 눈에 띈다. 조인스닷컴의 경우 상당한 변화가 있었고 SNS기

능을 적극 활용하게 된 점은 훌륭하나 그래픽 및 동영상이 기사와 너

무 따로 논다는 느낌을 받았다. 또한 여전히 검색 기능이 제대로 활성

화 되어 있지 않은 점 또한 지적하고 싶다(F, 23, 여).

국내 3대 신문사들을 포함한 국외 10대 신문사들의 검색기능을 모두

활용하여 보았으나 아직 제대로 구성조차 갖춰지지 않았음을 알 수 있

었다. 과거 신춘문혜 당선작, 좋아하는 작가의 관련기사들을 검색하였

으나 제대로 결과가 나오지 않았으며 심지어 구글이나 네이버를 활용

한 검색이 신문사 사이트의 내부검색으로 정확한 결과를 검색해 낼 정

도였다(D, 남, 21).

이에 비해 미국과 영국 신문 웹사이트 중에서 뉴욕타임즈, USA투데이, 텔

레그라프 등의 웹사이트는 사이트 내의 검색기능이 잘 구축되어 있었다는 평

가였다. 즉 이용자가 보다 능동적으로 이용할 수 있는 시스템이 잘 구축이 되

어 있어 활용도가 높은 시스템이라는 평가였다.

뉴욕타임즈, USA투데이, 텔레그라프 등은 사이트 내 검색기능이 활성

화되어있어 ‘새도맨서‘나 Justice'등의 인기도시나 존 그리삼 등의 인기

작과 관련된 기사를 손쉽게 찾을 수 있었다. 뉴욕타임즈나 텔레그라프

를 자주 이용하는 이유 중 하나가 문화콘텐츠의 풍부다. 난 개인적으로

- 250 -

Literature 관련 기사를 자주 찾아보는데 이에 관련된 시, 소설, 요약, 작

가 인터뷰 등의 콘텐츠가 외국계 신문 사이트에는 풍부하게 구성되어

있다. 그러나 국내 사이트는 Literature 관련 섹션을 추가 하여 그에 관

련된 기사들을 좀 더 모아줬으면 한다(G, 24, 남).

가디언의 경우 뉴욕타임즈처럼 깔끔하고 단정한 느낌은 덜하지만 전체

적으로 생동감이 느껴진다. 기사 관련 사진 또한 슬라이드 쇼를 통해

여러 사진을 제공하고 있다. 당시 상황의 긴급함, 생생함, 인터뷰이의

심경이 담긴 녹음파일을 기사와 함께 배치하면서 웹 사이트의 장점을

잘 살리고 있다(N, 23, 남).

또 신문 웹사이트에서 가독성은 활자의 모양, 크기, 자획 등의 타이포그래

피 요소와 더불어서 텍스트 배열 방식, 관련 요소의 그룹화 등의 작용을 하게

된다. 가독성이 좋은 신문 웹사이트는 이용자들로 하여금 효과적인 정보전달

과 이용의 편리함을 주게 된다. 조선닷컴, 한국아이닷컴은 한 화면에 많은 폰

트를 사용하여 이용자들에게 가독성이 다소 떨어졌다는 평가였다. 기사의 구

분을 위해 폰트의 구분을 한 것으로 추정되나, 오히려 이용자들에게 가독성이

떨어지는 결과를 가져오게 되었다. 그러나 조인스닷컴은 정돈된 폰트와 사이

즈, 색감으로 긍정적인 평가를 받았다.

조선닷컴, 한국아이닷컴의 경우 한 페이지에 너무 많은 양의 폰트를 사

용하는가 하면, 사진의 규격도 일정하지 않아 아쉬움이 남았다. 신문사

의 로고나, 메뉴 바의 이미지도, 각 신문사의 아이덴티티를 표현하기는

힘들었다. 그런 점에서 조인스 닷컴은, 폰트나 글자 사이즈가 정돈 되

어있고, 오렌지색상이나, 내비게이션 바의 이미지도 기억에 남아 좋은

평가를 해주고 싶다(M, 22, 여).

3) 내비게이션 차원에서의 평가

내비게이션의 차원에서 이용자들은 국내외 신문 웹 사이트에 대해 특별한

- 251 -

차이점을 느끼지 못하였고 평가하였다. 즉 한국 신문 웹사이트에 대해 긍정적

인 평가를 하고 있었다. 그러나 미국과 영국 웹사이트의 경우에는 세부적으로

장점과단점에 대해 평가하였다. 뉴욕타임즈는 내비게이션바가 상단에도 있지

만 목차처럼 왼쪽에 있는 것이 이용자들에게 어색했다는 평가였다. 반면에 상

위에 있는 것이 아닌 세로로 들여놓음으로써 많은 분량의 메뉴를 효과적으로

배치했다는 평가도 있었다.

내비게이션 시스템은 해외사이트에 뒤처지지 않았지만 다른 모든 측면

에서 부족했다. 특히 정보연결 분야는 너무 미흡하여 해결이 시급해 보

인다(S, 23, 남).

뉴욕타임즈의 경우 처음 사이트에 들어갔을 때에는 다른 사이트와 달

리 좌측에 메뉴들이 세로로 나열되어 있어서 메뉴바라기 보다 색인에

가까운 느낌이었다. 그 후 거기서 섹션을 선택하여 들어갔을 때 메인의

내비게이션 바 부분과 섹션부분에서 내비게이션바 부분의 괴리감이 오

지만 메인의 내비게이션바를 계속 좌측에 두는 프레임으로 유지하고

사전의 목차 찾듯이 진행해 나가는 사이트 방식도 좋을 것 같았다(A,

24, 남).

뉴욕타임즈는 상위 사이트 바가 아닌 내비게이션 바를 세로로 늘여놓

음으로 인해서, 많은 분량의 메뉴를 넓은 모니터가 아니라도 쉽게 볼

수 있게 하였다(P, 24, 남).

영국 신문 웹사이트는 미국 신문 웹사이트에 비해 내비게이션 차원에서 부

족하다는 평가가 나왔다. 영국 신문 웹사이트는 오피니언의 기사의 경우에 스

크롤을 내려야 찾을 수 있어 불편하였다는 평가가 있었으나, 미국 신문 웹사

이트는 오피니언 기사들이 한눈에 들어왔다는 점을 강조하였다. 그러나 영국

신문 웹사이트는 정보전달의 기능에 치중하고 있고, 미국 신문 웹사이트는 의

견 교환과 의견을 표현하는 것에 더 주안점을 두고 있다고 느꼈다는 의견도

있었다.

- 252 -

더타임즈의 경우 내비게이션에서 하위 뉴스로 들어가는 데 있어 자신

의 위치가 정확히 어느 파트의 어느 곳에 있다는 것을 정확하게 명시

하지 않고 있고 동영상 정보를 활용하는 부분에서는 아직 미약하다고

볼 수 있다(F, 23, 여).

외국 사이트들 사이에서도 차이점이 드러났다. 영국의 신문 사이트들은

UK세션과 US세션을 가지고 있었다. 미국 사이트들이 US세션만 있었던

것과는 다른 점이었다. 또한 메인화면에서 미국 사이트들은 오피니언의

기사들이 한눈에 들어오기 쉬운 곳에 위치하여 있는데 반해 영국 사이

트들은 스크롤을 내려야 찾을 수 있었다. 영국의 사이트들은 정보전달

의 기능에 더 주안점을 두고 있고 미국 사이트들은 의견 교환과 의견

을 표현하는 것에 더 주안점을 두고 있다고 느꼈다(A, 24, 남).

영국 사이트의 디자인 측면에서는 미국 사이트에 비해 조금 떨어진다

는 느낌을 받았다. 특히 내비게이션 바에서는 미국 사이트보다 훨씬 뒤

떨어졌다는 생각이 들었다(D, 21, 남).

4) 상호작용성 차원에서의 평가

상호작용성 차원에서는 한국 신문 웹사이트는 많은 연동서비스로 인해 신

문사 고유의 서비스가 아닌, 포털의 서비스와 같다는 평가였다. 그러나 미국

신문 웹사이트는 피드백이 활발하게 이루어져, 상호작용이 잘 되고 있다는 평

가였다. 각 신문기사마다 기자에게 바로 이메일을 보낼 수 있는 시스템은 별

도의 프로그램의 설치 없이 바로 전송이 가능하여 편리하다는 평가였다.

국내 사이트는 상호작용 부분에 있어서 다른 곳과의 연동서비스가 사

람들이 원해 어쩔 수 없이 끼워 넣었다는 느낌이 강했다. 그리고 하나

의 사이트에 너무 많은 걸 담아서 통합시키려고 하여서 사이트가 신문

웹사이트가 아니라 신문사를 모아놓은 포털사이트 같은 느낌도 들었고

불필요한 페이지 사용도 많이 보였다(R, 22, 여).

- 253 -

한국의 신문사에 비해 영국과 미국의 신문 웹사이트는 기사에 대한 피

드백이 활발하게 이루어지고 있어 놀라웠다. 각 사이트에서 기자에게

바로바로 메일을 보낼 수 있어 굳이 다른 메일 프로그램을 깔거나, 굳

이 메일 서비스 제공 사이트에 들어가지 않아도 괜찮아서 굉장히 편리

했다(B, 23, 남).

미국 웹사이트는 전체적으로 독자의 코멘트 참여가 상당히 활발해 독

자가 많은 것을 보여줬다(O, 22, 여).

외국 사이트들은 독자들과의 피드백이나 SNS서비스를 통한 실시간 대

화는 말할 것도 없다(E, 22, 여).

가디언은 SNS서비스와 아이콘, 버튼 등은 최고이다. 지금 이 순간에도

기자들의 블로그와 오피니언에는 수많은 댓글들이 달리고 있으며 상호

간에 무수히 많은 피드백이 진행되고 있다(C, 21, 여).

최근 웹사이트를 개편한 중앙일보의 경우에는 가장 중점적으로 변화된 부

분이 SNS라고 평가하였다. 트위터, 미투데이 등에서 바로 댓글로 피드백하는

것이 가능하며, 페이스북, 블로그 등으로 기사를 옮겨올 수도 있는 시스템을

구축하였다는 평가였다. 이러한 시스템은 SNS을 이용하지 않는 이용자에게도

시민의 참여도가 높을 것이다라는 이미지를 심어줄 수 있는 가능성이 있다고

평가하였다.

조인스닷컴은 색감이나 통일성등도 좋지만 무엇보다도 트위터 같은

SNS사이트의 응용을 잘하여 내가 원하는 정보를 더 많이 제공해준다

(A, 24, 남).

중앙일보 사이트 개편 후에 가장 중심적으로 바뀐 점은 소셜 네트워크

와의 연결이다. MSN과의 사이트 합병이 가낭 눈에 띄이는 점이고 또

한 트위터 미투데이 등에서 바로 댓글로 피드백 하는 것이 가능하게

하고 페이스북, 블로그 등 자신의 공간으로 옮기는 기능도 제대로 정착

- 254 -

했다. 이러한 서비스는 오히려 조선일보보다 앞서가는 느낌이들 정도로

소셜 네트워크를 통한 시민들의 참여도도 높고 중앙일보답게 세련되고

실용적인 느낌을 아주 잘 전달하고 있다(F, 23 , 여).

5) 신문사별 평가

일반 디자인 원리, 정보전달성, 내비게이션, 상호작용성 차원에 대한 일반적

인 평가 외에도 세부적인 질문을 통해 국내외 신문 웹사이트별로 개별적인

디자인 평가를 실시하였다.

(1) 조선닷컴

① GNB(Global Navigation Bar)

이용자들은 내비게이션에서 찾고자 하는 메뉴를 쉽게 찾을 수 있으며, 전체

사이트 구조가 내비게이션에서 한 눈에 보인다고 느끼는 경향이 있었다. 메뉴

구조면에서는 직관적이고 명확한가라는 질문과 메뉴바의 디자인이 일관적이

고 섹션별 혼란이 없는가라는 질문에 모두 보통이라고 대답하였다. 또 섹션별

뉴스 찾기는 용이하며, 페이지 클릭시마다 나의 위치가 어디인지 쉽게 알 수

있는가라는 질문에는 일치하지 않는 다양한 의견이 있었다. 웹페이지에서 자

신이 원하는 정보를 쉽게 찾을 수 있는지에 대해서는 보통이라고 느끼는 경

향이 있었다.

② Layout

전체 화면의 그리드 구조는 안정적이라고 느끼거나 보통이라고 느끼는 경

향이 있었으며, 각 기사들의 그룹핑이 잘 되어 있다고 평가하였다. 또 상하,

좌우 배치가 한 눈에 잘 들어오지 않는다는 의견이 많았다. 면 분할 및 공간

활용과 여백 면에서는 조화롭지 못하다고 느끼는 경향이 컸으며, 기사의 중요

도에 따라 위치 배열과 강약 조절이 잘 되어 있는가라는 질문에는 의견이 다

- 255 -

양하였다.

③ CSS

각 페이지들의 스타일이 일관되고 규칙적인 편이지만 보통이라고 느끼는

의견도 있었다. 페이지 코딩 소스가 간략하게 정리가 잘 되어 있는지에 대해

서는 보통이라고 느끼고 있었으며, 감각 있고 좋은 디자인으로 스타일 구성이

되어 있지 않다고 느끼는 편이었다. 또 정보 전달이 잘 되어있는가라는 질문

에는 다양한 의견이 있었다.

④ Font

텍스트의 가독성이 좋다고 느끼는 경향이 두드러지게 나타났으며, 헤드라인

기사와 특집 및 기획 기사들이 구별되어 읽혀지는가에 대한 질문에 의견이

다양했다. 폰트의 행간, 자간, 크기, 색상 등이 조화로운지에 대한 평가도 다양

했다. 각 페이지별로 일관되게 폰트가 사용되었다고 느끼고 있었으며, 피로감

없이 쉽게 읽혀진다는 의견이 많았다.

⑤ Color

조선일보 사이트만의 독창적인 색상을 사용하고 있다고 느끼는 경향이 있

었고, 전체적인 색상이 산만하지 않고 절제 있게 사용되었다고 느끼는 의견이

있었다. 섹션별 색상의 규칙성면에서는 상반된 의견이 있었다. 색상 사용이 사

이트의 특성을 잘 뒷받침하는지에 대해 일치하지 않는 다양한 의견이 있었다.

⑥ Photo & Thumbnail

사진의 크기가 제각각이지 않고 일정한 규칙이 있는지, 각 썸네일의 크기별

종류가 제한되어 있는지에 대해서는 모두 다양한 의견이 있었고, 사진의 선명

도는 좋다고 평가하였다.

- 256 -

⑦ Button & Icon

버튼이나 아이콘 등이 매우 일관된 디자인으로 사용되었다고 보는 경향이

두드러졌으며, 함축적으로 잘 시각화되어 있는지에 대해 보통이라는 응답이

많았다.

⑧ Multimedia & Graphic

기사나 정보와 함께 제시되는 동영상 등의 효과적인 활용성에 대해 보통이

라고 보았으며, 동영상의 화질이나 속도의 편안함에 대해 다양한 의견이 있었

다. 기사나 정보와 함께 제시되는 그래픽의 효과적 활용 정도에 대해 보통이

라는 의견이 많았다. 그래픽의 화질이나 선명도는 좋게 평가하는 경향이 많았

고 ,동영상, 그래픽 등의 멀티미디어가 홈페이지에서 잘 활용하고 있는가라는

질문에 그렇지 않다는 경향이었다.

⑨ Interaction

SNS를 잘 활용할 수 있도록 만들어졌다고 느끼는 경향이 있었다. UCC 등

의 동영상은 잘 활용할 수 있도록 만들어지지 않았다고 보는 경향이 있었다.

기자에게 보내는 이메일 등을 쉽게 이용할 수 있도록 만들어졌다고 느끼는

경향이 컸다. 실시간으로 대화하기를 이용할 수 있도록 만들어졌는가라는 질

문에 매우 그렇다는 답변이 많았다. 또 기사나 정보에 대해 댓글을 활용할 수

있도록 만들어졌다고 느끼는 경향이 많았다. 전체적으로 이용자와의 피드백이

잘 이루어지고 있는가라는 질문에 보통이라고 답하는 경향이었다.

⑩ Banner

지나친 광고사용을 제한하고 있지 않고, 광고가 있어 기사가 잘 읽혀지지

않다고 느끼는 경향이 컸다. 위치별로 적절하게 광고를 잘 배치하고 있는지에

대해 매우 그렇지 않다는 의견이 많았다.

- 257 -

(2) 조인스MSN

① GNB

내비게이션에서 찾고자 하는 메뉴를 쉽게 찾을 수 있는가에 대해 보통이라

고 보는 경향이 있었다. 메뉴구조가 직관적이고 명확하다고 느끼는 경향이 두

드러졌으며, 메뉴바의 디자인이 일관적이고 섹션별 혼란이 없다는 의견도 두

드러졌다. 섹션별 뉴스 찾기가 용이하다고 느끼는 경향이 있었고, 페이지 클릭

시마다 나의 위치가 어디인지 쉽게 알 수 있는지에 대해 보통이라는 의견이

많았다. 웹페이지에서 자신이 원하는 정보를 쉽게 찾을 수 있는지에 대해서는

다양한 의견이 있었다.

② Layout

전체 화면의 그리드 구조가 안정적이거나 보통이라는 의견이 많았으며, 각

기사들의 그룹핑이 잘 되어 있다고 보는 경향이 있다. 상하, 좌우 배치가 한

눈에 잘 들어온다고 느끼는 경향이 두드러졌으며, 면 분할 및 공간 활용과 여

백 등이 조화롭다고 느끼는 경향이 있었다. 기사의 중요도에 따라 위치 배열

과 강약 조절이 잘 되어 있다고 느끼는 경향도 있었다.

③ CSS

각 페이지들의 스타일이 일관되고 규칙적이라고 느끼는 경향이 있었으며,

페이지 코딩 소스가 간략하게 정리되어 있다고 보았다. 감각 있고 좋은 디자

인으로 스타일 구성이 되어 있는가에 대체적으로 긍정적인 평가였고, 정보 전

달이 잘 되어 지는가에 그렇다고 보는 경향이 있었다.

④ Font

텍스트의 가독성이 좋다고 느끼는 경향이 두드러지게 나타났으며, 헤드라인

기사와 특집 및 기획 기사들이 구별되어 읽혀지는 편이라는 의견이 많았다.

- 258 -

폰트의 행간, 자간, 크기, 색상 등이 조화로운 편이라고 느끼고 있었으며, 각

페이지별로 일관되게 폰트가 사용되었다고 느끼는 경향도 있었다. 피로감 없

이 쉽게 읽혀지는지에 대해 보통이라고 느끼는 경향을 보였다.

⑤ Color

중앙일보 사이트만의 독창적인 색상을 사용하고 있으며, 전체적인 색상이

산만하지 않고 절제 있게 사용되었다고 느끼는 경향이 두드러졌다. 섹션별로

색상을 규칙적으로 사용하고 있는가라는 질문에는 의견이 다양했다. 색상 사

용이 사이트의 특성을 잘 뒷받침하는가라는 질문에는 그렇지 않다고 보는 경

향이 있었다.

⑥ Photo & Thumbnail

사진의 크기가 제각각이지 않고 일정한 규칙이 있는지에 의견이 다양했고,

각 썸네일의 크기별 종류가 제한되어 있는 편이며 사진의 선명도는 좋다는

의견이 많았다.

⑦ Button & Icon

버튼이나 아이콘 등이 일관된 디자인으로 사용되었다고 느끼는 경향이 있

었고, 함축적으로 잘 시각화되었다고 느끼는 경향이었다.

⑧ Multimedia & Graphic

기사나 정보와 함께 제시되는 동영상 등은 효과적으로 활용되고 있지 않다

고 보는 경향이었으며, 동영상의 화질이나 속도는 편하게 이용할 수 있다는

의견이 다수였다. 기사나 정보와 함께 제시되는 그래픽은 효과적으로 활용되

는지에 대해 보통이라는 의견이 다수였다. 그래픽의 화질이나 선명도는 보통

이나 그렇다고 느끼는 경향이 있었고 동영상, 그래픽 등의 멀티미디어가 홈페

이지에서 잘 활용하고 있다는 질문에는 상반된 의견이 많았다

- 259 -

⑨ Interaction

SNS를 잘 활용할 수 있도록 만들어졌다고 느끼는 경향이 있었으며, UCC

등의 동영상을 활용할 수 있도록 만들어지지 않았다는 의견이 많았다. 기자에

게 보내는 이메일 등을 쉽게 이용할 수 있도록 만들어졌는지에 대한 질문에

는 상반된 의견이 있었다. 실시간으로 대화하기를 이용할 수 있도록 만들어졌

다고 평가하였으며, 기사나 정보에 대해 댓글을 활용할 수 있도록 만들어졌다

고 보는 경향이 있었다. 전체적으로 이용자와의 피드백이 잘 이루어지고 있는

가라는 질문에는 일치하지 않는 다양한 의견이 있었다.

⑩ Banner

지나친 광고사용을 제한하고 있는가, 광고가 있어도 기사가 잘 읽혀지는가

라는 질문에 모두 보통이라고 보는 경향이 있었으며, 위치별로 적절하게 광고

를 잘 배치하고 있다고 평가하는 경향이 있었다.

(3) 한국아이닷컴

① GNB

내비게이션에서 찾고자 하는 메뉴를 쉽게 찾을 수 있는가라는 질문에 보통

이라고 느끼는 경향이었고, 전체 사이트 구조가 내비게이션에서 한 눈에 보이

는가라는 질문에는 의견이 다양하였다. 메뉴구조가 직관적이고 명확한가, 메

뉴바의 디자인이 일관적이고 섹션별 혼란이 없는가라는 질문에 모두 일치하

지 않는 다양한 의견이 있었다. 섹션별 뉴스 찾기가 용이한가도 의견이 다양

했으며, 페이지 클릭시마다 나의 위치가 어디인지 쉽게 알 수 있는지, 웹페이

지에서 자신이 원하는 정보를 쉽게 찾을 수 있는지라는 질문에는 그렇지 않

다고 느끼는 경향이 있었다.

- 260 -

② Layout

전체 화면의 그리드 구조의 안정감, 각 기사들의 그룹핑이 잘 되어 있는지

그리고 상하, 좌우 배치가 한 눈에 잘 들어오는지 또 면 분할 및 공간 활용과

여백 등이 조화로운가라는 질문에 모두 일치하지 않는 다양한 의견이 있다.

기사의 중요도에 따라 위치 배열과 강약 조절 면에서는 보통이라고 느끼는

경향이 두드러졌다.

③ CSS

각 페이지들의 스타일이 일관되고 규칙적이라고 느끼고 있었으며, 페이지

코딩 소스가 간략하게 정리가 잘 되어 있는가라는 질문에 보통이라고 느끼는

경향이 있었다. 감각 있고 좋은 디자인으로 스타일 구성이 되어 있지 않다고

느끼는 경향이 있었다. 또 정보 전달 면에서 보통이라고 느끼는 경향이었다.

④ Font

텍스트의 가독성이 좋은가라는 질문에는 의견이 다양하였으며, 헤드라인 기

사와 특집 및 기획 기사들이 잘 구별되지 않는다는 의견이 많았다. 폰트의 행

간, 자간, 크기, 색상 등이 조화로운가라는 질문에 보통이라고 보는 경향이 있

었고, 각 페이지별로 일관되게 폰트가 사용되었는가라는 질문에도 보통이라는

의견이 많았다. 피로감 없이 쉽게 읽혀지는가라는 질문에는 의견이 다양했다.

⑤ Color

한국일보만의 독창적인 색상을 사용하고 있지 않다고 보는 경향이 있었으

며, 전체적인 색상이 산만하지 않고 절제있게 사용되지 않았다는 경향이 있었

다. 섹션별로 색상을 규칙적으로 사용하고 있는가라는 질문에 매우 그렇지 않

다는 의견이었고, 색상 사용이 사이트의 특성을 잘 뒷받침하지 않다고 느끼는

경향이 있었다.

- 261 -

⑥ Photo & Thumbnail

사진의 크기가 제각각이지 않은 일정한 규칙성에 대해 의견이 다양하였으

며, 각 썸네일의 크기별 종류가 제한되어 있는지에 대한 평가는 보통이라는

의견이 있었다. 사진의 선명도는 좋은가라는 질문에 의견이 다양하다.

⑦ Button & Icon

버튼이나 아이콘 등이 일관된 디자인으로 사용되었다고 보았으나, 함축적으

로 잘 시각화되어 있지는 않다고 느끼는 경향이 있었다.

⑧ Multimedia & Graphic

기사나 정보와 함께 제시되는 동영상 등은 효과적으로 활용되고 있지 않다

고 느끼는 경향이 있었고, 동영상의 화질이나 속도는 편하게 이용할 수 있는

가라는 질문에는 다양한 의견이 있었다. 기사나 정보와 함께 제시되는 그래픽

은 효과적으로 활용되고 있었으며, 그래픽의 화질이나 선명도는 보통이라고

보는 경향이었다. 또 동영상, 그래픽 등의 멀티미디어가 홈페이지에서 잘 활용

되고 있는가라는 질문에는 의견이 다양하였다.

⑨ Interaction

SNS를 잘 활용할 수 있도록 만들어졌는가라는 질문에 다양한 의견이 있었

고, UCC 등의 동영상을 활용할 수 있도록 만들어져 있지 않다고 느끼는 경향

이 있었다. 기자에게 보내는 이메일 등을 쉽게 이용할 수 있도록 만들어졌고,

실시간으로 대화하기를 이용할 수 있도록 만들어있는지에 대한 질문에 매우

그렇지 않다고 느끼는 경향이 있었다. 기사나 정보에 대해 댓글을 활용할 수

있도록 만들어졌으나, 전체적으로 이용자와의 피드백이 잘 이루어지고 있지

않다고 느끼는 경향이 있었다.

- 262 -

⑩ Banner

지나친 광고사용을 제한하고 있는가, 광고가 있어도 기사가 잘 읽혀지는가,

위치별로 적절하게 광고를 잘 배치하고 있는가라는 질문에 모두 매우 그렇지

않다고 느끼는 경향이 있었다.

(4) 뉴욕타임즈

① GNB

내비게이션에서 찾고자 하는 메뉴를 쉽게 찾을 수 있는가, 전체 사이트 구

조가 내비게이션에서 한 눈에 보이는가라는 질문에 보통이라는 의견이 다수

였다. 메뉴구조가 직관적이고 명확한가라는 질문에 보통이라고 느끼는 경향이

있었고, 메뉴바의 디자인이 일관적이고 섹션별 혼란이 없다고 느끼는 경향이

있었다. 섹션별 뉴스 찾기가 용이한 편이라고 느끼는 경향이 있었고, 페이지

클릭시마다 나의 위치가 어디인지 쉽게 알 수 있는 편이라고 느끼고 있었다.

또 웹페이지에서 자신이 원하는 정보를 쉽게 찾을 수 있는지에 대해서는 다

양한 의견이 있었다.

② Layout

전체 화면의 그리드 구조가 안정적이고 각 기사들의 그룹핑이 잘 되어 있

다고 느끼는 경향이 두드러졌다. 상하, 좌우 배치가 한 눈에 잘 들어오는 편이

라고 느끼는 경향이 있었고, 면 분할 및 공간 활용과 여백 등이 조화로운가라

는 질문에 보통이라고 느끼는 경향이었다. 기사의 중요도에 따라 위치 배열과

강약 조절이 잘 되어 있다고 느끼는 경향이 두드러졌다.

③ CSS

각 페이지들의 스타일이 일관되고 규칙적이며, 페이지 코딩 소스가 간략하

게 정리가 잘 되어 있다고 느끼는 의견이 많았다. 감각 있고 좋은 디자인으로

- 263 -

스타일 구성이 되어 있는지에 보통이라고 보는 의견이 많았으며, 정보 전달이

잘 되어 지는가에 대한 질문에 전반적으로 만족감을 느끼는 의견이 많았다.

④ Font

텍스트의 가독성과 헤드라인 기사와 특집 및 기획 기사들이 매우 구별되어

읽혀진다고 느끼는 경향이 두드러졌다. 폰트의 행간, 자간, 크기, 색상 등이 조

화롭다고 느끼고 있었으며. 각 페이지별로 매우 일관되게 폰트가 사용되었다

고 느끼는 경향이 두드러졌다. 피로감 없이 쉽게 읽혀지는지에 보통이라는 의

견이 많았다.

⑤ Color

뉴욕타임즈만의 독창적인 색상을 사용하고 있지 않다는 의견이 많았고, 전

체적인 색상이 산만하지 않고 절제 있게 사용되었는지에 대해서는 매우 만족

하고 있었다. 섹션별로 색상을 규칙적으로 사용하고 있는지에 대체적으로 만

족하는 경향이 있었지만, 색상이 사용이 사이트의 특성을 잘 뒷받침하는지에

대해서는 상이한 반응이 다수였다.

⑥ Photo & Thumbnail

사진의 크기가 제각각이지 않고 일정한 규칙이 있고, 각 썸네일의 크기별

종류가 제한되어 있다고 느끼는 경향과 사진의 선명도는 매우 좋다고 느끼는

경향이 두드러졌다.

⑦ Button & Icon

버튼이나 아이콘 등이 일관된 디자인으로 잘 사용되었고, 함축적으로 매우

잘 시각화되었다고 느끼는 의견이 있었다.

- 264 -

⑧ Multimedia & Graphic

기사나 정보와 함께 제시되는 동영상 등은 효과적으로 활용되고 있는지에

의견이 다양했다. 동영상의 화질이나 속도는 편하게 이용할 수 있는지에 보통

의 의견이 많았고, 기사나 정보와 함께 제시되는 그래픽은 효과적으로 활용되

고 있는 편이라고 느끼는 경향이 있었다. 그래픽의 화질이나 선명도는 매우

좋다고 느끼며 동영상, 그래픽 등의 멀티미디어가 홈페이지에서 잘 활용하고

있다고 느끼는 경향이 있었다.

⑨ Interaction

SNS를 활용할 수 있도록 만들어졌다고 느끼는 경향이 두드러졌다. UCC 등

의 동영상을 활용할 수 있도록 만들어졌다는 의견이 있었고, 기자에게 보내는

이메일 등을 쉽게 이용할 수 있도록 매우 잘 만들어졌다고 느끼는 경향이 있

었다. 반대로 실시간으로 대화하기를 이용할 수 있도록 만들어졌는가에 매우

그렇지 않다고 느끼는 경향을 보였다. 기사나 정보에 대해 댓글을 활용할 수

있도록 만들어졌는가는 상반된 의견이 많았다. 전체적으로 이용자와의 피드백

이 잘 이루어지고 있다고 느끼는 경향이 있었다.

⑩ Banner

지나친 광고사용을 제한하고 있고, 광고가 있어도 기사가 매우 잘 읽혀지며

위치별로 적절하게 광고를 매우 잘 배치하고 있다고 느끼는 경향이 컸다.

(5) 워싱턴포스트

① GNB

내비게이션에서 찾고자 하는 메뉴를 쉽게 찾을 수 있는 편이고, 전체 사이

트 구조가 내비게이션에서 한 눈에 보이는 편이라고 느끼는 경향이 두드러진

다. 메뉴구조가 직관적이고 명확하며, 메뉴바의 디자인이 일관적이고 섹션별

- 265 -

혼란이 없다고 느끼는 경향이 있었다. 섹션별 뉴스 찾기가 용이하고 페이지

클릭시마다 나의 위치가 어디인지 쉽게 알 수 있는지는 보통이라고 느끼는

경향이 있었다. 또 웹페이지에서 자신이 원하는 정보를 쉽게 찾을 수 있다는

의견이었다.

② Layout

전체 화면의 그리드 구조가 안정적이고 각 기사들의 그룹핑이 잘 되어있다

고 느끼는 경향이 두드러졌다. 상하, 좌우 배치가 한 눈에 잘 들어오는가라는

질문에 의견이 다양하였으며, 면 분할 및 공간 활용과 여백 등이 조화롭지 못

하다고 느끼는 경향이 있었다. 기사의 중요도에 따라 위치 배열과 강약 조절

이 잘 되어 있다고 느끼는 경향이 있다.

③ CSS

각 페이지들의 스타일이 일관되고 규칙적인가라는 질문에 다양한 의견이

있었으며, 페이지 코딩 소스가 간략하게 정리가 잘 되어 있다고 느끼는 경향

이 있었다. 또 감각 있고 좋은 디자인으로 스타일 구성이 되어 있는가라는 질

문에 의견이 다양하였으며, 정보 전달이 잘 되어 진다는 의견이 두드러진다.

④ Font

텍스트의 가독성이 좋은 편이고, 헤드라인 기사와 특집 및 기획 기사들이

구별되어 읽혀진다고 느끼는 경향이 있었다. 폰트의 행간, 자간, 크기, 색상 등

이 조화롭고 페이지별로 일관되게 폰트가 사용되었으며, 피로감 없이 쉽게 읽

혀진다고 느끼는 경향이 있었다.

⑤ Color

워싱턴포스트만의 독창적인 색상을 사용하고 있으며, 전체적인 색상이 산만

하지 않고 절제있게 사용되었고, 섹션별로 색사을 규칙적으로 사용하고 있다

- 266 -

고 보는 경향이 있었으며, 색상 사용이 사이트의 특성을 매우 잘 뒷받침하고

있다고 보는 경향이 있었다.

⑥ Photo & Thumbnail

사진의 크기가 제각각이지 않고 일정한 규칙이 있다고 느끼는 경향이 두드

러진다. 각 썸네일의 크기별 종류가 제한되어 있고 사진의 선명도는 좋다고

느끼는 경향이 있었다.

⑦ Button & Icon

버튼이나 아이콘 등이 일관된 디자인으로 사용 되었는가라는 질문에 보통

이라고 느끼는 경향이 있으며, 함축적으로 잘 시각화되었다고 느끼는 경향이

있었다.

⑧ Multimedia & Graphic

기사나 정보와 함께 제시되는 동영상 등은 효과적으로 활용되고 있고, 동영

상의 화질이나 속도는 편하게 이용할 수 있다고 느끼는 경향이 있었다. 기사

나 정보와 함께 제시되는 그래픽은 효과적으로 활용되고 있고, 그래픽의 화질

이나 선명도는 좋다고 느끼는 경향이 두드러졌다. 또 동영상, 그래픽 등의 멀

티미디어는 홈페이지에서 잘 활용하고 있다고 느끼는 경향이 있었다.

⑨ Interaction

SNS를 잘 활용할 수 있도록 만들어졌다고 느끼는 경향이 있었으나, UCC

등의 동영상을 활용할 수 있도록 만들어졌는가라는 질문에 다양한 의견이 있

었다. 기자에게 보내는 이메일 등을 쉽게 이용할 수 있도록 만들어졌으나, 실

시간으로 대화하기를 이용할 수 있도록 만들어졌는지에 대해서는 상이한 의

견이 있었다. 기사나 정보에 대해 댓글을 활용할 수 있도록 만들어졌는가라는

질문에 다양한 의견이 있었으며, 전체적으로 이용자와의 피드백이 잘 이루어

- 267 -

지고 있는가라는 질문에 보통이라는 의견이 많았다.

⑩ Banner

지나친 광고사용을 제한하고 있는가라는 질문에 보통이라고 느끼는 경향이

있었고, 광고가 있어도 기사가 잘 읽혀지며 위치별로 적절하게 광고를 잘 배

치하고 있다고 느끼는 경향이 있었다.

(6) USA투데이

① GNB

내비게이션에서 찾고자 하는 메뉴를 쉽게 찾을 수 있는 편이이거나 대체로

만족하는 편이었다. 또 전체 사이트 구조가 내비게이션에서 한 눈에 보이는지

에 대해서는 대체적으로 편리하게 느끼는 경향이 있었다. 메뉴구조가 직관적

이고 명확한가에 대한 질문에 보통이라고 느꼈으며, 메뉴바의 디자인이 일관

적이고 섹션별 혼란이 없는가라는 질문에 대체적으로 만족하고 있었다. 섹션

별 뉴스 찾기는 상이한 의견이 있었다. 페이지 클릭시마다 나의 위치가 어디

인지 쉽게 알 수 있는지에 대해서는 다양한 의견이 있었으나, 웹페이지에서

자신이 원하는 정보를 쉽게 찾을 수 있는가라는 질문에 보통이라는 의견이

있었다.

② Layout

전체 화면의 그리드 구조가 안정적이고 각 기사들의 그룹핑이 잘 되어 있

다고 느끼고 있었다. 상하, 좌우 배치가 한 눈에 잘 들어오는 지에 대해서는

보통으로 느끼는 의견이었으며, 면 분할 및 공간 활용과 여백 등이 조화로운

지에 대해 평범하다고 느끼는 의견이 가장 많았다. 또 기사의 중요도에 따라

위치 배열과 강약 조절이 대체로 잘 되어 있다고 평가하고 있었다.

- 268 -

③ CSS

각 페이지들의 스타일이 일관되고 규칙적이라고 느끼고 있으며,페이지 코딩

소스가 간략하게 정리가 잘 되어 있는가라는 질문에 보통이라는 의견이 가장

많았다. 감각 있고 좋은 디자인으로 스타일 구성이 되어 있는지에 대해 대체

로 매우 만족하며, 정보 전달이 잘 되어 지는 편으로 느끼고 있었다.

④ Font

텍스트의 가독성이 좋다고 느끼고 의견이 두드러졌으며, 헤드라인 기사와

특집 및 기획 기사들이 구별되어 읽혀지는 편이라고 느끼고 있었다. 폰트의

행간, 자간, 크기, 색상 등이 조화로운 편이라고 느끼는 의견이 많았고, 각 페

이지별로 일관되게 폰트가 사용되었다고 느끼는 의견이 두드러졌다. 피로감

없이 쉽게 읽혀지는가에 대해서는 다양한 의견이 있었다.

⑤ Color

USA투데이만의 독창적인 색상을 사용하고 있는지에 대해 매우 그렇다고

느끼는 의견이 많았다. 전체적인 색상이 산만하지 않고 절제 있게 사용되었는

지에 대해 보통이라는 의견이 많았으며, 섹션별로 색상을 규칙적으로 사용하

고 있는지에 대해 매우 그렇게 느끼는 경향이 있었다. 또 색상 사용이 사이트

의 특성을 잘 뒷받침하는가에 대해 보통 수준으로 만족하고 있었다.

⑥ Photo & Thumbnail

사진의 크기가 제각각이지 않고 일정한 규칙이 있는지에 대해 매우 그렇게

느끼고 있었으며, 각 썸네일의 크기별 종류가 제한되어 있는지에 대해 의견이

다양했다. 사진의 선명도는 좋거나 매우 좋다고 느끼는 의견이 두드러졌다.

- 269 -

⑦ Button & Icon

버튼이나 아이콘 등이 일관된 디자인으로 사용되었으며, 함축적으로 매우

잘 시각화되었다고 느끼는 경향이 있었다.

⑧ Multimedia & Graphic

기사나 정보와 함께 제시되는 동영상 등은 효과적으로 활용되고 있는지에

대해 보통의 의견이 가장 많았다. 동영상의 화질이나 속도는 편하며 기사나

정보와 함께 제시되는 그래픽은 효과적으로 활용되고 있다고 보는 경향이 있

었다. 또 그래픽의 화질이나 선명도도 좋은 편이라고 느끼는 의견이 두드러졌

으며, 동영상, 그래픽 등의 멀티미디어가 웹페이지에서 매우 잘 활용하고 있다

고 느끼는 경향이 있었다.

⑨ Interaction

SNS를 잘 활용할 수 있도록 만들어졌는지에 매우 그렇다고 보는 경향이 두

드러졌으며, UCC 등의 동영상을 활용할 수 있도록 만들어졌는지에 대해 보통

이라는 의견이 많았다. 기자에게 보내는 이메일 등을 대체로 쉽게 이용할 수

있도록 만들어졌는지는 상이한 의견이 있었다. 실시간으로 대화하기를 이용할

수 있도록 만들어졌는지에 대해서도 상이한 의견도 있었다. 기사나 정보에 대

해 댓글을 활용할 수 있도록 만들어졌는지에 매우 만족하였다. 전체적으로 이

용자와의 피드백이 매우 잘 이루어지고 있다고 느끼는 경향이 있었다.

⑩ Banner

지나친 광고사용을 제한하고 있고, 광고가 있어도 기사가 잘 읽혀지는 편이

라고 느끼고 있었다. 위치별로 적절하게 광고를 잘 배치하고 있다고 느끼는

경향이 있다.

- 270 -

(7) 더타임즈

① GNB

내비게이션에서 찾고자 하는 메뉴를 쉽게 찾을 수 있는 편이며, 전체 사이

트 구조가 내비게이션에서 한 눈에 잘 보인다고 느끼는 경향이 두드러졌다.

또 메뉴구조가 직관적이고 명확하고 메뉴바의 디자인이 일관적이고 섹션별

혼란이 없다는데 크게 만족하는 경향이 있었다. 섹션별 뉴스 찾기가 매우 용

이하다고 느끼며, 페이지 클릭시마다 나의 위치가 어디인지 쉽게 알 수 있다

는 의견이 있었다. 웹페이지에서 자신이 원하는 정보를 쉽게 찾을 수 있는가

라는 질문에 보통이라는 의견이 많았다.

② Layout

전체 화면의 그리드 구조가 안정적이고 각 기사들의 그룹핑이 잘 되어 있

다고 느끼는 경향이 두드러졌다. 상하, 좌우 배치가 한 눈에 매우 잘 들어오는

편이며, 면 분할 및 공간 활용과 여백 등이 조화롭다고 느끼는 의견이 컸다.

또 기사의 중요도에 따라 위치 배열과 강약 조절이 잘 되어 있다고 느끼는 경

향이 있었다.

③ CSS

각 페이지들의 스타일이 매우 일관되고 규칙적이라고 느끼는 경향이 두드

러지며, 페이지 코딩 소스가 간략하게 정리가 잘 되어 있는가라는 질문에 보

통이라는 의견이 많았다. 감각 있고 좋은 디자인으로 스타일 구성이 되어 있

는가라는 질문에 보통이라는 의견이 많았으며, 정보 전달이 잘 되어 진다는

의견이 많았다.

④ Font

텍스트의 가독성이 좋고 헤드라인 기사와 특집 및 기획 기사들이 구별되어

- 271 -

읽혀지는 편이라는 의견이 많았다. 폰트의 행간, 자간, 크기, 색상 등이 조화롭

고 각 페이지별로 매우 일관되게 폰트가 사용되었다고 느끼는 경향과 피로감

없이 쉽게 읽혀진다는 의견이 많았다.

⑤ Color

더타임즈만의 독창적인 색상을 사용하고 있는가라는 질문에 의견이 다양했

다. 전체적인 색상이 산만하지 않고 절제있게 사용되었으며, 섹션별로 색상을

매우 규칙적으로 사용하고 있다고 느끼는 경향이 두드러졌다. 색상 사용이 사

이트의 특성을 잘 뒷받침하는가라는 질문에 보통이라는 의견이 많았다.

⑥ Photo & Thumbnail

사진의 크기가 제각각이지 않고 일정한 규칙이 있고, 각 썸네일의 크기별

종류가 제한되어 있다고 느끼는 경향이 컸으며, 사진의 선명도는 매우 좋다고

느끼고 있었다.

⑦ Multimedia & Graphic

기사나 정보와 함께 제시되는 동영상 등은 효과적으로 활용되고 있으며, 동

영상의 화질이나 속도는 매우 편하게 이용할 수 있다고 느끼는 경향이 있었

다. 기사나 정보와 함께 제시되는 그래픽은 효과적으로 활용되고 있다고 느끼

는 의견이 많았다. 그래픽의 화질이나 선명도는 좋으며, 동영상, 그래픽 등의

멀티미디어가 웹페이지에서 잘 활용하고 있는 편으로 느끼고 있다.

⑧ Button & Icon

버튼이나 아이콘 등이 매우 일관된 디자인으로 사용되었고, 함축적으로 잘

시각화되었는지에 대해 보통이라는 의견이었다.

- 272 -

⑨ Interaction

SNS를 잘 활용할 수 있도록 만들어졌는가에 다양한 의견이 있었고, UCC

등의 동영상을 활용할 수 있도록 만들어졌는가에 보통이라는 느끼는 경향이

있었다. 기자에게 보내는 이메일 등을 매우 쉽게 이용할 수 있도록 만들어졌

는지에 대해서는 상이한 반응이 있었다. 실시간으로 대화하기를 이용할 수 있

도록 만들어졌는가에 매우 그렇지 않다는 의견이 많았다. 기사나 정보에 대해

댓글을 활용할 수 있도록 매우 잘 만들어졌다고 느끼고 있는 경향이 두드러

졌으며, 전체적으로 이용자와의 피드백이 잘 이루어지고 있다고 느끼고 있다.

⑩ Banner

지나친 광고사용을 제한하고 있는 편이라고 느끼지만, 광고로 인해 기사가

매우 잘 읽혀지지 않는다고 느끼고 있었다. 또 위치별로 적절하게 광고를 잘

배치하고 있다고 느끼는 경향이 있다.

(8) 가디언

① GNB

내비게이션에서 찾고자 하는 메뉴를 쉽게 찾을 수 있고, 전체 사이트 구조

가 내비게이션에서 한 눈에 보인다고 느끼는 경향이 두드러졌다. 메뉴 구조가

직관적이고 명확한 편이라고 느끼고 있으며, 메뉴바의 디자인이 일관적이고

섹션별 혼란이 없다고 느끼고 있었다. 섹션별 뉴스 찾기가 용이하며 페이지

클릭시마다 나의 위치가 어디인지 매우 쉽게 알 수 있다고 느끼고 있었다. 웹

페이지에서 자신이 원하는 정보를 쉽게 찾을 수 있다고 느끼는 경향이 가장

많았다.

② Layout

전체 화면의 그리드 구조가 안정적인지에 대해 보통 수준으로 느끼지만 ,각

- 273 -

기사들의 그룹핑이 잘 되어 있는 편이라고 느끼는 경향이 두드러졌다. 상하,

좌우 배치가 대체로 한 눈에 잘 들어오는 편이지만, 면 분할 및 공간 활용과

여백 등이 조화로운지에 대해 보통 수준으로 느끼는 경향이 많았다. 기사의

중요도에 따라 위치 배열과 강약 조절이 잘 되어 있는 편이라고 느끼는 경향

이었다.

③ CSS

각 페이지들의 스타일이 매우 일관되고 규칙적인 편이라고 느끼는 경향이

컸다. 페이지 코딩 소스가 간략하게 정리가 잘 되어 있는지에 대해서는 보통

수준이라고 느끼는 경향이 많았으나 크게 만족하는 수준은 아니었다. 감각 있

고 좋은 디자인으로 스타일 구성이 되어있는 편이며, 정보 전달이 잘 되어 진

다고 느끼는 경향이 두드러졌다.

④ Font

텍스트의 가독성이 대체로 좋고 만족하는 수준이며, 헤드라인 기사와 특집

및 기획 기사들이 구별되어 읽혀지는 편이라고 느끼고 있었다. 폰트의 행간,

자간, 크기, 색상 등이 조화롭고 각 페이지별로 일관되게 폰트가 사용되어 매

우 만족하는 경향이 있었다. 또 피로감 없이 쉽게 읽혀지는 편이라고 느끼고

있었다.

⑤ Color

가디언만의 독창적인 색상을 사용하고 있다고 느끼고 있었다. 전체적인 색

상이 산만하지 않고 절제 있게 사용되었는지에 대해서는 다양한 의견이 있었

다. 섹션별로 색상을 규칙적으로 사용하고 있는지에 매우 그렇게 느끼는 경향

이 두드러졌으며, 색상 사용이 사이트의 특성을 잘 뒷받침하는지에 대해 보통

으로 느끼는 의견이 두드러졌다.

- 274 -

⑥ Photo & Thumbnail

사진의 크기가 제각각이지 않고 일정한 규칙이 있으며, 각 썸네일의 크기별

종류가 제한되어 있다고 느끼는 경향이 두드러졌다. 또 사진의 선명도는 매우

좋다고 느끼고 있었다.

⑦ Button & Icon

버튼이나 아이콘 등이 매우 일관된 디자인으로 사용되었다고 느끼는 경향

이었으며, 함축적으로 잘 시각화되었다고 느끼는 경향이 있었다.

⑧ Multimedia & Graphic

기사나 정보와 함께 제시되는 동영상 등은 효과적으로 활용되고 있는 편이

라고 느끼는 경향이 있었다. 동영상의 화질이나 속도는 편하게 이용할 수 있

는가에 대해서는 보통으로 느끼고 있었다. 기사나 정보와 함께 제시되는 그래

픽은 효과적으로 활용되고 있는 편이며, 그래픽의 화질이나 선명도는 좋은 편

이라고 느끼고 있었다. 동영상, 그래픽 등의 멀티미디어가 홈페이지에서 매우

잘 활용하고 있다고 느끼는 의견이 가장 많았다.

⑨ Interaction

SNS를 잘 활용할 수 있도록 만들어졌다고 느끼는 경향이 두드러졌으며,

UCC 등의 동영상을 활용할 수 있도록 만들어졌는지는 보통이라는 의견이 가

장 많았다. 기자에게 보내는 이메일 등을 쉽게 이용할 수 있도록 만들어졌는

지에 의견이 다양했고, 실시간으로 대화하기를 이용할 수 있도록 만들어졌는

지에 그렇지 않다고 느끼는 의견이 있었다. 기사나 정보에 대해 댓글을 활용

할 수 있도록 매우 잘 만들어졌다고 느끼는 의견이 두드러졌다. 전체적으로

이용자와의 피드백이 잘 이루어지고 있다고 느끼는 의견이 많았다.

- 275 -

⑩ Banner

지나친 광고사용을 제한하고 있으며 광고가 있어도 기사가 잘 읽혀지는가

에 매우 만족하는 경향이 두드러졌으며, 위치별로 적절하게 광고를 잘 배치하

고 있는 편이라고 느끼는 경향이 있었다.

(9) 텔레그라프

① GNB

내비게이션에서 찾고자 하는 메뉴를 쉽게 찾을 수 있고, 전체 사이트 구조

가 내비게이션에서 한 눈에 보인다고 느끼는 경향이 있었다. 메뉴 구조가 직

관적이고 명확하며 메뉴바의 디자인이 일관적이고 섹션별 혼란이 없다고 느

끼는 경향이 있었다. 섹션별 뉴스 찾기가 용이하며 페이지 클릭시마다 나의

위치가 어디인지 쉽게 알 수 있다고 느끼는 경향이 있었다. 또 웹페이지에서

자신이 원하는 정보를 쉽게 찾을 수 있다고 느끼거나 보통이라고 느끼고 있

었다.

② Layout

전체 화면의 그리드 구조가 안정적이며 각 기사들의 그룹핑이 매우 잘 되

어 있다고 느끼는 경향이 있었다. 상하, 좌우 배치가 한 눈에 잘 들어오는가라

는 질문에 보통이라는 의견이 많았다. 면 분할 및 공간 활용과 여백 등이 조

화로우며 기사의 중요도에 따라 위치 배열과 강약 조절이 잘 되어 있다고 느

끼는 경향이 두드러졌다.

③ CSS

각 페이지들의 스타일이 일관되고 규칙적이지만, 페이지 코딩 소스가 간략

하게 정리가 잘 되어 있는가에 대해서는 보통이라고 느끼는 경향이 있었다.

감각 있고 좋은 디자인으로 스타일 구성이 되어 있는가라는 질문에 의견이

- 276 -

다양했으며, 정보 전달이 잘 되어 지는 편이라고 느끼고 있었다.

④ Font

텍스트의 가독성이 좋은가라는 질문에 보통이라고 느끼는 경향이 있었고,

헤드라인 기사와 특집 및 기획 기사들이 구별되어 읽혀지는지에 대한 의견도

보통이라고 느끼고 있었다. 폰트의 행간, 자간, 크기, 색상 등이 조화로우며 각

페이지별로 일관되게 폰트가 매우 잘 사용되었고, 피로감 없이 쉽게 읽혀지는

편이라고 느끼는 경향이 있었다.

⑤ Color

텔레그라프만의 독창적인 색상을 사용하고 있는가라는 질문에 그렇다라고

느끼는 경향이 있었으며, 전체적인 색상이 산만하지 않고 절제 있게 사용되었

다고 느끼는 경향이 있었다. 섹션별로 색상을 규칙적으로 사용하고 있으며 색

상 사용이 사이트의 특성을 잘 뒷받침하는가 하는 질문에 보통이라고 느끼는

경향이 있었다.

⑥ Photo & Thumbnail

사진의 크기가 제각각이지 않고 일정한 규칙이 있다고 느끼는 경향이 있었

다. 각 썸네일의 크기별 종류가 제한되어 있다고 느끼거나 사진의 선명도는

좋다고 느끼는 경향이 있었다.

⑦ Button & Icon

버튼이나 아이콘 등이 일관된 디자인으로 사용되었다고 느끼는 경향이 있

으며, 함축적으로 잘 시각화되었는가라는 질문에 보통이라고 느끼는 경향이

있었다.

- 277 -

⑧ Multimedia & Graphic

기사나 정보와 함께 제시되는 동영상 등은 효과적으로 활용되고 있는가라

는 질문에 보통이라고 느끼는 경향이 있었으며, 동영상의 화질이나 속도는 편

하게 이용할 수 있다고 느끼는 경향이 있었다. 기사나 정보와 함께 제시되는

그래픽의 효과적으로 활용과 그래픽의 화질이나 선명도는 보통이라고 느끼는

경향이 있었다. 또 동영상, 그래픽 등의 멀티미디어가 웹페이지에서 잘 활용되

고 있다고 느끼는 경향이 있었다.

⑨ Interaction

SNS를 잘 활용할 수 있도록 만들어졌으나 UCC 등의 동영상을 활용할 수

있도록 잘 만들어지지 않다고 느끼는 경향이 있었다. 기자에게 보내는 이메일

등을 쉽게 이용할 수 있도록 만들어졌는가라는 질문에 다양한 의견이 있었다.

실시간으로 대화하기를 이용할 수 있도록 만들어졌는가라는 질문에는 다양한

의견이 있었다. 기사나 정보에 대해 댓글을 활용할 수 있도록 만들어졌고, 전

체적으로 이용자와의 피드백이 잘 이루어지고 있다고 느끼는 경향이 있었다.

⑩ Banner

지나친 광고사용을 제한하고 있고, 광고가 있어도 기사가 잘 읽혀지며, 위

치별로 적절하게 광고를 잘 배치하고 있다고 느끼는 경향이 있었다.

- 278 -

신문사 긍정적 평가 부정적 평가

조선닷컴· 풍부한 콘텐츠

· 뉴스 검색 용의

· 웹페이지에 많은 정보를 담음

· 전반적 디자인과 편의성 부족

· 세부 세션으로 진입의 어려움

· 많은 광고

조인스닷컴

· 새로워진 SNS 서비스

· 깔끔한 디자인

· 폰트 및 글자 사이즈 정돈

· 멀티미디어 콘텐츠 부족

· 많은 광고

한국아이닷컴 · 간결한 섹션 구분

· 정보연결의 미흡

· 멀티미디어 콘텐츠 부족

· 사진물의 규격의 불일치

· 섹션 간의 레이아웃 통일감 부족

· 많은 광고

뉴욕타임즈

· 종이 신문의 컨셉 디자인

· 적은 광고

· 기사와 동영상의 적절한 배치

· 연동시스템이 뛰어남

· 검색 기능

· 고전적이고 신뢰성이 강함

· 검색과정에서 단계별 범주화 필요

워싱턴포스트

· 사진, 동영상의 활용도 높음

· 심플한 디자인

· 정보 연결 기능

USA투데이

· 검색 기능

· 깔끔한 디자인

· 관련 기사의 그룹핑

· 일관성이 없는 각 섹션별 부조화

더타임즈

· 핵심 기사의 분명한 시야확보

· 깔끔하고 절제된 레이아웃

· 고전적이고 신뢰성이 강함

· 사이트 유료화

가디언․ SNS와 블로그 활성화

· 뉴스와 정보의 연결망 구축

텔레그라프

· 검색 기능

· 자사 로고 사용으로 정체성 강조

· 기사와 동영상의 효과적 활용

· 빽빽한 디자인의 답답한 느낌

<표 29> 이용자들의 국내외 신문 웹사이트 평가

- 279 -

VII. 종합 논의 및 디자인 개선방안 제안

1. 연구결과 요약 및 논의

1) 국내외 신문 웹사이트 디자인 비교 분석 결과

먼저 국내 3개(조선, 중앙, 한국)와 외국 6개(New York Times, Washington

Post, USA Today, the Times, Guardian, Telegrphs) 신문 웹사이트 디자인을

일반 디자인 원리, 정보전달, 내비게이션, 상호작용성, 멀티미디어와 그래픽 차

원에서 비교분석한 결과는 다음과 같다.

첫째, 일반 디자인 원리 차원에서 보면, 영국과 미국의 신문 웹사이트는 레

이아웃과 디자인 스타일이 단순하면서도 심플하게 구성되어 있어 이용자들이

효과적으로 인지할 수 있도록 구조화되어 있는데 반해, 국내 신문 웹사이트는

복잡한 구성과 뉴스기사 텍스트를 너무 강조하고 있어 전체적으로 이용자들

에게 일관성이 없는 디자인을 보여주고 있었다. 예를 들어, 색상의 경우 홈페

이지와 개별 섹션과 기사 페이지에서 여러 색상을 사용하고 있어 전체적으로

통일된 느낌을 가질 수가 없었으며, 시각적으로 방해되는 요인으로 작용하고

있었다. 하지만 구조나 그리드 유형 등은 외국 신문 웹사이트와 유사한 경향

을 보이고 있다. 또 썸네일이나 사진도 외국 신문 웹사이트에 비해 작은 크기

를 사용하고 있어 시각화나 멀티미디어적인 측면에서 차이점이 있었다. 큰 크

기의 썸네일이나 사진을 사용하는 것이 더 효과적이라고 평가할 수는 없으나,

‘메인’ 사진의 강조는 신문 웹사이트의 시각화에 기여하고 각 신문사의 특성

을 드러낼 수 있는 효과적인 장치로 작용할 수 있다.

둘째, 정보전달 차원에서 보면, 국내 신문 웹사이트는 기사에 대한 접근성,

텍스트 읽기, 정보 배열, 정보 위계성에 있어서 외국 신문 웹사이트와 유사하

게 높은 수준을 보이고 있는 것으로 평가된다. 이러한 기사 접근성, 텍스트 읽

기(가독성), 정보 배열이나 정보 위계성, 기사 차별성과 기사 강조성은 저널리

즘 차원에서 평가된 것으로 신문 매체라는 고유한 특성이 웹사이트에 반영된

것으로 보인다. 이러한 점은 국내외 신문 웹사이트가 가지는 공통적인 특성이

- 280 -

기 때문에 외국 신문 웹사이트보다 효과적이라고 평가하기는 어렵다. 하지만

이를 제외한 다른 항목에서는 상대적으로 낮은 수준인 것으로 평가할 수 있

었다. 예를 들어, 뉴스 그룹화나 정보 접근성 그리고 광고와 관련된 항목들은

외국 신문 웹사이트에 비해 효과적이지 못한 것으로 나타났다. 특히 광고의

경우는 외국 신문 웹사이트에 비해 수가 많거나 팝업 광고가 있는 등으로 인

해 정보전달을 방해하고 있는 것으로 나타났다. 따라서 국내 신문 웹사이트는

광고 등의 정보전달 기능을 방해하는 요소의 사용을 지양하고 뉴스 그룹화나

정보 접근성 등의 정보전달성을 강화하는 전략을 추구할 필요성이 있다.

셋째, 내비게이션 차원에서 보면, 내비게이션 구성, 형태, 유형, 항목 등의

예측성에서 세부적으로 차이점이 있었지만, 전체적으로는 비슷한 경향을 보이

고 있어 내비게이션 기능을 강화하는 전략을 보이고 있었다. 하지만 내비게이

션 차원에서 관련 기사를 제시하거나 정보를 탐색하는 것은 국외 신문 웹사

이트에 비해 매우 떨어지고 있어, 이에 대한 개선책이 필요할 것으로 보인다.

특히 기사를 제공하면서 그 기사와 관련된 기사를 제공하거나 정보를 제공하

여 이용자나 독자가 원하는 바를 알려주는 것은 신문 웹사이트의 매우 중요

한 내비게이션 기능이다. 하지만 외국 신문 웹사이트에 비해 국내 신문 웹사

이트는 전혀 이러한 기능을 제공하도록 구성되어 있지 않았다. 섹션별로 일반

적으로 접근할 수 있는 기사 검색이나 정보 검색을 찾을 수 있는 기능이 부족

한 것으로 평가된다. 신문사의 웹사이트는 기사를 보거나 고급 정보를 접하기

위해 이용하는 비율이 많기 때문에 앞으로 이러한 점은 강화해야 할 전략이

다. 이는 위에서 언급한 차원인 정보전달과도 연관되는 것으로 내비게이션 기

능에서도 이러한 점을 보완해야 한다. 결론적으로 내비게이션 차원에서는 국

내 신문 웹사이트가 외국 신문 웹사이트와 전체적으로 비슷한 경향을 보이고

있지만, 세부적으로 관련 기사 제시나 정보 탐색 측면에서는 보완해야 할 점

이 있는 것으로 평가된다.

넷째, 상호작용성 차원에서 보면, 상호작용성 차원에서는 국내 신문 웹사이

트와 국외 신문 웹사이트가 비슷한 전략을 보이고 있었지만, 세부적으로는 큰

차이를 보이고 있었다. 국내 신문 웹사이트는 SNS나 이메일, 댓글 등을 적극

적으로 활용하고 있었지만, 이용자와의 상호작용성을 추구하는 전략으로 웹사

이트를 구성하였다고 보기는 힘들다. 그러나 외국 신문 웹사이트는 SNS나 이

메일, RSS 등을 적절히 활용하여 보다 더 상호작용성을 추구하고 있는 것으로

- 281 -

나타났다. 예를 들어, 기사가 제시되는 페이지에서 보여지는 상호작용적인 다

양한 기능들은 형식적으로 제공하여, 외국 신문 웹사이트처럼 연계성을 강조

하거나 특성화시켜 제공하지 않고 있었다. 상호작용적인 측면은 신문 웹사이

트가 사람들의 의견을 반영하여 공론의 장으로 활용될 수 있는 가능성을 가

져다 줄 수 있다. 이런 관점에서 상호작용적인 기능이 제공되는 웹사이트 디

자인의 필요성이 있다. 또 기사 내용에서 나타나는 용어를 하이퍼링크로 연결

하는 기능은 국내 신문 웹사이트들은 제한적으로 제공하거나 잘못된 링크를

제공하고 있어, 이를 적극적으로 활용하는 국외 신문 웹사이트들과 큰 차이를

보였다. 이러한 점은 국내 신문 웹사이트가 보완하고 개선되어야 할 방안으로

평가된다.

다섯째, 멀티미디어와 그래픽 차원에서 보면, 국내 신문 웹사이트는 외국

사이트들에 비해 동영상과 그래픽을 적극적으로 활용하고 있지 않는 것으로

나타났다. 국외 신문 웹사이트들은 멀티미디어성과 상호그래픽성을 강조함으

로써 텍스트 중심의 오프라인 신문이 갖지 못하는 웹디자인의 가능성을 적극

적으로 활용하고 있다. 또 자사가 갖고 있는 정보력을 바탕으로 다른 포털사

이트 등과 차별화되는 고급 정보를 보다 흥미롭고, 효율적으로 제시하고 있다.

물론 영국의 더타임즈는 동영상이나 그래픽을 양적으로 많이 활용하고 있지

는 않았지만, 그 내용의 밀도나 화질 선명도가 높은 수준인 것으로 보아 결코

멀티미디어성이 낮다고는 볼 수 없다. 따라서 멀티미디어와 그래픽 기능을 강

화하고, 이를 신문 웹사이트가 갖고 있는 기사 텍스트와 유기적으로 연계하려

는 전략을 추구해야 할 필요성이 있다.

이와 함께 국내외 신문 웹사이트 디자인의 UI를 분석한 결과를 요약하면

다음과 같다. 영국과 미국 신문 웹사이트의 경우 첫째, 사진, 텍스트 등의 이

미지를 크게 사용하여 강약 조절이 과감하고 시각적으로 집중도가 높았다. 둘

째, 단순한 상단 내비게이션, 큰 로고, 여백 등을 사용하고 있었다. 셋째, 오프

라인 신문의 특성을 웹사이트에서도 유지하는 편이었다. 넷째, 웹폰트의 가독

성이 높았다. 다섯째, 그리드 변화가 다양하였으나 섹션별 일관성은 없었다.

여섯째, 명도와 채도가 높아도 강한 색상을 다양하고 사용하였다. 일곱째, 콘

텐츠가 많아서 페이지가 매우 길었다. 여덟째, 각 사이트마다 독창성이 강조되

었다. 마지막으로 사진과 타이포그래피 디자인 외에는 별도의 디자인 요소를

절제하였다.

- 282 -

한국 신문 웹사이트의 경우 첫째, 전체적으로 사진의 크기가 작고 주로 텍

스트의 비중이 높았다. 즉 사진보다는 많은 기사의 노출을 선호하여 작은 사

진을 사용하였다. 둘째, 내비게이션의 영역을 최대한 줄이고 여백 없이 활용하

려는 경향이 있었다. 셋째, 오프라인 신문과 별도의 온라인 신문 사이트를 구

축하였다. 그러나 점차 온오프라인의 연계성을 가지려는 경향을 보이고 있었

다. 넷째, 웹폰트의 다양성이 없어 타이포그래피 디자인에 있어서 독창성이 부

족하였다. 다섯째, 그리드의 변화는 최소화하여 페이지별로 일관성을 유지하

였다. 여섯째, 강하고 자극적인 색상보다는 무난하고 부드러운 파스텔톤 색상

을 선호하였다. 일곱째, 많은 양의 정보를 각 섹션별로 분화하여 메인 자체의

길이는 짧았다. 여덟째, 대부분의 신문사들이 비슷한 UI를 쓰고 있어 차별화

가 떨어지고 있었다. 마지막으로 사진과 타이포그래피의 제약으로 인해 다른

그래픽 요소가 발달하였다.

이러한 UI 분석 결과를 종합하여 보면 국내외 신문 웹사이트는 크게 6가지

의 차이가 있는 것으로 나타났다. 첫째는 텍스트 위주 디자인의 차이이다. 국

내는 한 화면에 보다 더 많은 콘텐츠를 보여주기 위해 여유 공간이 없는 경향

이었으나, 외국은 텍스트 위주에 부분적으로 큰 썸네일을 사용하였으며, 전반

적으로 메인 이미지 외에는 텍스트 위주의 디자인이었다. 또 여백도 적극적으

로 사용하였다.

둘째는 이미지 사용의 차이이다. 국내는 TOP 썸네일과 기타 콘텐츠 썸네일

의 크기가 매우 작은 편이었으나, 국외는 TOP 썸네일의 사용이 큰 편이었으

며, 기타 콘텐츠의 썸네일 크기도 크게 사용하였다. 즉 외국은 사진의 퀄리티

가 좋아서 크고 시원하게 사용함으로써 오프라인 종이 신문을 보는 듯 한 느

낌이 있었다.

셋째는 그리드의 차이이다. 국내의 메인과 섹션은 주로 3단 구조이고 기사

면은 2단 구조를 사용하였으나, 외국은 메인과 섹션 모두 각사마다 다양하게

사용하였으며, 최대 5단까지도 사용하기도 하였다. 그러나 기사면은 주로 2~3

단 구조를 비슷한 비율로 사용하였다. 즉 국내는 거의 비슷한 스타일의 그리

드를 사용하였으나, 외국은 다양한 그리드를 사용하였다.

넷째는 높이의 차이이다. 국내 웹사이트의 길이는 대체적으로 길지 않은 편

이었으며, 스크롤 3~4번 정도면 콘텐츠를 볼 수 있었다(1280×1024 기준). 그러

나 외국은 국내에 비해 높이가 많이 길었으며, 스크롤 5~6번 정도로 콘텐츠를

- 283 -

볼 수 있었다(1280×1024 기준). 즉 국내는 높이가 짧아지는 경향을 보이고 있

었으며, 외국은 빈 공간이 많은 대신 길이가 길어지는 경향이었다.

다섯째는 내비게이션의 차이이다. 국내는 주로 채도가 높은 색상을 바 형식

으로 사용하여 정체성을 표현하였으며, 메인에서는 광고의 영역을 최소화하여

높이를 짧게 하려는 경향이 있었다. 또 작은 로고의 사용과 전체적으로 빈 공

간을 최소화하는 디자인이었으며, 요소들의 크기가 비슷하여 강약이 적었다.

그러나 외국은 주로 채도가 낮은 색상을 최소한으로 사용하거나 그레이톤의

색상과 라인으로 구성되었으며, 메인에도 광고를 크게 사용하여 전체적으로

높이가 길고 여백이 많은 편이었다. 또 로고를 크게 사용하여 오프라인 종이

신문의 느낌을 주었으며, 요소들의 강약이 있었다. 즉 국내는 짧고 강하고 답

답한 느낌을 주는 반면에 외국은 길고 은은하고 시원한 느낌을 주고 있었다.

이는 여백과 색상, 그리고 로고 사이즈에 원인이 있는 것으로 보인다.

마지막으로는 색상 사용의 차이이다. 국내는 채도가 대체적으로 높고 강한

느낌의 색상을 사용하였으며, 주로 내비게이션에 사용하였다. 또 기사는 블랙

과 그레이톤을 주로 사용하였다. 기사의 타이틀에는 색상 사용을 자제하는 편

이었다. 그러나 외국은 전체적으로 채도가 낮고 명도가 낮은 색상을 사용하였

으며, 주로 내비게이션에 사용하였다. 그 외에는 색상 사용을 자제하는 편이었

다. 국내와 가장 큰 차이점은 기사 타이틀을 블루 계통으로 많이 사용하고 있

는 점이었다. 즉 외국은 뉴스라는 특성상 블루 계통의 색상을 사용하였으나,

국내는 다양한 색상을 통해 정체성을 표현하는데 사용하였다.

2) 국내외 신문 웹사이트 소셜 미디어 사용 현황 비교 분석 결과

미국, 영국 및 한국의 신문사 웹 사이트를 분석해 본 결과, 각 국가별로 소

셜 네트워크적인 요소를 추가하는 방식이나 정도에 있어서는 차이를 보이고

있는 것으로 나타났다. 먼저 미국의 뉴욕타임즈와 워싱턴 포스트의 경우에는

적극적이면서도 공격적으로 소셜 미디어의 시대에 대응하고 있다는 것이 관

찰되었다. 이들 사이트는 특히 페이스북의 오픈 그래프의 개념을 적용, 이용자

의 페이스북 친구 네트워크와의 유기적인 연동을 통해 기사를 읽는 경험이

더욱 더 소셜한 특성을 지니도록 하려는 노력을 기울이고 있었다. 이 중 뉴욕

타임즈는 웹 3.0적인 특성에 더 초점을 맞추려는 노력을 시도하는 것과 사이

- 284 -

트의 기사를 다양한 주제로 묶어서 RSS라는 뉴스 신디케이션 서비스를 강조

하고 있는 것이 보였고 워싱턴 포스트는 자유로운 블로그 활동을 격려함으로

써 사이트 자체의 내용을 더욱 풍부하게 만드는데 더 노력을 보이는 것이 관

찰되었다. USA투데이의 경우에는 아직 웹 3.0적인 요소를 포함시키고 있지는

않았고 블로그나 각 주제별 섹션 등을 좀 더 접근하기 쉽게 정렬함으로써 사

이트 이용자들이 더욱 편리하도록 하려는 노력을 보이고 있었다.

영국의 신문사들은 아직 웹 3.0적인 요소를 가미하고 있지는 않았지만 이용

자들에게 다른 네티즌들의 활동을 활발하게 알리려는 노력을 하고 있었다. 이

중 가디언과 데일리 메일은 인기있는 기사의 목록을 별도로 제공하고 있을

뿐만 아니라 각 기사에 달린 댓글의 수를 첫 화면에 보이게 함으로써 활발한

활동을 독려하는 방식을 선호하고 있었다. 텔레그라프의 경우에는 블로그나

댓글의 활발한 활동을 지원하면서도 기존 기자의 기사와는 차별적으로 제공

하고 있는 것이 관찰되었다.

한국의 중앙일보의 경우에는 소셜 네트워크적인 요소의 중요성을 크게 인

식하고 이를 사이트 곳곳에 적용시킨 것이 관찰되었다. 특히 다른 소셜 네트

워크에 링크해서 연동을 시키는 과정을 간소화함으로써 손쉽게 페이스북이나

트위터에 중앙일보 기사에 대한 댓글을 달 수 있도록 하는 간편한 기능을 제

공하고 있었다. 조선일보의 경우에는 소셜 네트워크로의 기사 공유의 기능을

제공하면서도 조선일보의 전문성을 최대한 발휘할 수 있도록 다양한 주제의

기획, 초점 기사들을 제공하고 있었다. 또 조선일보에서는 독자들에게 가능한

많은 정보를 다양하게 제공하려 노력하는 것이 보였는데, 다양한 위젯을 사용

한 개인 페이지도 제공하고 있었고 일자별 기사 랭킹 정보도 제공하고 있었

다. 한국일보의 경우에는 기본적인 소셜 네트워크와의 링크나 인기 기사 목록

정도가 제공되고 있었다.

이러한 결과를 토대로 신문 웹사이트 디자인의 소셜 네트워크적인 요소들

에 대한 함의를 논의하였다. 먼저 기존 독자층이 계속 감소하고 있는 신문사

들은 시대 변화에 적응하기 위해 나름대로 다양한 노력을 기울이고 있다는

것을 알 수 있었다. 중요한 것은 이런 시도들이 ‘기존’의 사이트 구조를 기반

으로 새로운 서비스를 어떻게 도입할 것인가를 모색하는 방식으로 진행된다

면 성공하기 어려울 것이라는 점이다. 신문에 실린 기사를 얼마나 많은 사람

에게 읽힐 것인가를 모색할 것이 아니라 현재 사이트에서 이용자들이 가장

- 285 -

필요로 하는 정보를 가장 손쉬운 방법으로 어떻게 제공할 수 있을 것인가를

새로운 틀에서 모색해야 할 것이다.

이런 관점에서 뉴욕타임즈의 사이트에서 ‘권위’ 있는 뉴욕타임즈 기자들의

기사만 볼 수 있는 것이 아니라 다양한 블로그 활동을 하는 블로거들의 글을

읽게 된다거나 워싱턴 포스트의 사이트가 블로거들의 글로 가득차서 더욱 풍

성해졌다는 것은 이런 구조적인 변화가 시작되었다는 것을 예고하는 것이라

볼 수 있다. 아울러 신문 웹사이트 디자인함에 있어서 이제는 이러한 구조적

인 디자인의 문제를 근본적으로 다시 생각해 볼 시점이 되었다는 것을 의미

하기도 한다. 요컨대 기본적으로 웹사이트의 구조가 중앙 집권적으로만 구성

되어서는 안 되며, 이용자의 기존 소셜 네트워크를 어떤 방식으로든 웹사이트

디자인에 포함시킬 수 있는 방안을 좀 더 적극적으로 모색해야 할 것이다.

3) 국내외 신문 웹사이트 디자인에 대한 이용자 조사 결과

현재 재학 중인 대학생 20명을 대상으로 준개방형 설문과 인터뷰를 통해

국내외 9개 신문 웹사이트 디자인에 대한 이용자 조사를 실시한 결과는 다음

과 같다. 일반 디자인 차원의 평가에서는 초기화면의 경우 웹사이트의 정체성

이 드러날 수 있는 디자인에 더욱 주목하는 것으로 나타났다. 또 광고의 수와

그 배치에 따라 이용자가 느끼는 웹사이트에 대한 평가가 많은 영향을 미치

고 있었다. 국내 신문 웹사이트의 경우에는 무분별한 광고 노출로 인해 오히

려 가독성을 방해하는 것으로 평가되었다. 광고는 신문사의 이미지와도 직결

되는 중요한 부분이므로 이러한 부분에 대한 제고가 필요할 것이다.

정보전달 차원에서의 평가에서는 국내 신문 웹사이트는 색감의 사용이 통

일성이 없어 다소 어설프게 느껴진다는 평가였지만, 외국 신문 웹사이트는 아

이콘의 버튼과 적절한 배치, 깔끔한 디자인이라는 평가였다. 따라서 웹사이트

를 이용함에 있어 이용자들에게 시각적인 요소가 상당부분 차지하고 있음을

알 수 있었다. 또 국내 신문 웹사이트는 이용자들이 검색어를 입력할 경우 관

련 기사의 노출이 충분하지 않았지만, 외국 신문 웹사이트는 사이트 내의 검

색기능이 잘 구축되어 있었다는 평가였다. 즉 이용자가 보다 능동적으로 이용

할 수 있는 시스템이 잘 구축이 되어 있어 활용도가 높은 시스템이라고 평가

하였다.

- 286 -

내비게이션 차원에서의 평가에서는 국내 신문 웹사이트에 대해 긍정적이였

으며, 외국 신문 웹사이트와 차이점을 느끼지 못한다는 평가였다. 그러나 외국

신문 웹사이트는 세부적으로 장점과 단점에 대한 평가가 있었다. 예를 들어,

뉴욕타임즈는 내비게이션바가 상단에도 있지만 목차처럼 왼쪽에 있는 것이

이용자들에게는 불편함으로 작용되었다. 또 영국 신문 웹사이트는 미국 신문

웹사이트에 비해 내비게이션 차원에서 부족하다는 평가도 있었다.

상호작용성 차원에서의 평가에서는 이용자들은 국내 신문 웹사이트는 많은

연동서비스로 인해 신문사 고유의 서비스가 아닌, 포털의 서비스와 같은 느낌

이라는 평가였다. 외국 신문 웹사이트는 피드백이 활발하게 이루어져 상호작

용이 잘 되고 있다는 평가였다. 최근 웹사이트를 개편한 중앙일보의 경우에는

SNS을 이용하지 않는 이용자에게도 시민의 참여도가 높을 것이라는 이미지를

심어줄 수 있는 가능성이 있다고 평가하였다.

이러한 이용자 의견 조사 외에도 GNB, Layout, CSS, Font, Color, Photo &

Thumbnail, Button & Icon, Multimedia & Graphics, Interaction, Banner 등의

요소를 중심으로 하는 세부적인 질문을 통해 국내외 신문 웹사이트별로 개별

적인 디자인에 대한 일반적인 평가를 실시하였다. 그 결과 국내외 신문 웹사

이트가 각각의 차별성을 보이고 있는 것으로 나타났다.

2. 국내 신문사 웹사이트 디자인 개선 방안 제시

국내외 신문 웹사이트에 대한 비교 분석 결과, 일반인 평가 결과, 전문가 의

견 등을 바탕으로 한국 신문 웹사이트 디자인 개선을 위한 구체적 방안을 제

시하였다.

1) 정보전달(저널리즘적) 측면

(1) 정보의 ‘위계질서’와 연관성을 잘 드러내는 간결한 디자인

신문 웹사이트에도 오프라인 신문에서 마찬가지로 적용되는 중요한 디자인

- 287 -

원리가 있다. 바로 디자인은 콘텐츠를 ‘조직화’하는 지적(知的)인 작업이라는

점이다. 특히 신문사 홈페이지 화면에서 무엇이 가장 중요하고 주목할 만한

뉴스인지를 한 눈에 드러나게 하는 정보의 위계질서(hierarcy), 관련 정보들을

명확하고 간결하게 그룹화(grouping)하는 디자인 작업이 중요하다.

한국 신문 웹사이트는 외국 웹사이트에 비해 이런 조직성과 간결성 측면에

서 뒤떨어지고 있는 것으로 나타난다. 대부분의 한국 신문사 홈페이지는 텍스

트 중심의 헤드라인을 쭉 나열하는 방식으로 구성되어 있고, 정보의 위계화와

그룹화가 시각적 강약으로 명확하게 드러나고 있지 않다. 물론 최근 들어 사

진, 그래픽, 동영상 등이 많이 사용되고는 있지만, 외국 웹사이트에 비해서는

디자인적인 강약이 부족한 편이다. 외국 신문사와 같이 통일성이 있되, 중요

기사나 사진을 강조하고, 섹션별로 일관성있는 색상으로 정보를 구분해주는

시도나(예를 들어, USA투데이 등)도 좋은 조직화 방안이 될 수 있을 것이다.

무엇이 중요한 뉴스인지, 그 핵심 내용이 무엇인지에 대한 저널리스틱한 결정

에 따라 정보를 잘 조직화하고, 이것을 일관성있고 심플한 디자인(그리드와

카데고리 분류의 명료함, 색상, 레이아웃, 화면 비율) 등을 통해 한 눈에 볼

수 있게 하는 작업이 필요하다. 이것은 사용자가 원하는 정보를 빨리, 정확하

게 찾아낼 수 있는 ‘내비게이션’ 기능의 강화에도 도움을 줄 수 있다.

(2) 독자를 계속해서 끌어들이는(magnetism) 링크 기능의 강화

웹사이트 신문의 가장 큰 강점은 바로 관련 기사, 관련 정보, 사이트와의 손

쉬운 링크이다. 실제로 외국의 신문사 웹사이트에서는 끊임없이 ‘연결’되는 정

보의 양과 질이 바로 신문사 웹사이트에 이용자들을 끌어들이는 가장 큰 자

력요소(magnatism)가 되고 있다.16) 메인 페이지에서 기사 페이지까지, 이전의

자사 기사와 블로그, 그리고 타사의 기사까지, 텍스트에서 관련 슬라이드, 동

16) NYT 웹사이트 디자인 에디터는 신문 디자인과 웹디자인은 어떤 면에서 매우 비슷하고, 어

떤 면에서는 매우 다르다고 말한다. 다른 점은 웹페이지에서 웹에디터는 자력(磁力,magnetism)을 원한다는 점이다. 웹에디터는 독자가 가까이오고 그것을 부여잡기를 원한다.

그리고 그들에게 더 깊이 들어갈 이유를 주고 싶어 한다. 즉 독자가 헤드라인이나 캡션, 사

진에서 끝나지 않고, 텍스트(기사 본문)까지 끌러 들이기를 원한다. 읽고, 클릭하고, 또 클릭

하여 사이트 안으로 깊숙이 들어오기를 원한다. 그것이 바로 성공적 웹페이지 디자인에서

가장 중요한 자력이다. 이것이 바로 종이신문의 'lean-back' 디자인과 웹사이트의 ‘lean-in’디자인의 차이점이다.

- 288 -

영상, 인포그래픽까지 그 연결성과 관련 기사의 적절한 연관성, 맥락성은 놀라

울 정도이다. 반면 한국 신문사의 웹사이트에는 구조적으로는 이런 링킹 기능

이 포함되어 있기는 하나, 실제로 관련 기사나 맥락적 정보, 혹은 연관 사이트

나 블로그와의 연결 기능이 내용적으로 매우 빈약한 실정이다.

특히 외국의 경우 기사의 본문을 읽는 중간 중간 밑줄 표시된 주요 단어를

클릭하면, 관련 연관 기사가 곧바로 뜨는 외국 사이트와 같은 기능이 부족하

다. 더욱이 주요 단어 클릭 시 기사 내용과 전혀 연관이 없는 광고가 뜨는 경

우까지 있다. 이는 이용자들의 의사와 상관없이 관심없은 광고에 노출되면서,

이용자들에게 상당한 거부감을 주고 있는 것으로 나타났다. 따라서 기사 안의

주요 키워드와의 링크 기능을 적극 활용하여 정보의 심층성과 맥락성을 향상

시키는 것이 필요하다.

(3) 선정적 광고 내용과 제시 방법의 개선

본 연구의 결과에서도 잘 드러났듯이, 한국 신문 웹사이트의 광고의 양과

제시방식, 내용들은 그 문제가 심각한 것으로 지적되었다. 특히 이용자들이 가

장 한국 웹사이트에서 거부감을 느끼는 것이 바로 신문사 웹사이트의 격에

맞지 않은 선정적 내용, 기사읽기를 방해하는 배너형 광고 제시방식 등으로

나타났다. 이러한 광고는 웹사이트에 대한 신뢰성과 신문사 이미지를 손상시

킬 뿐 아니라, 웹사이트의 심미성과 독이성 등을 손상시키는 수준에 이르고

있으며, 기사 읽기의 품위를 손상시키는 수준에까지 이르고 있다.

이러한 점을 보완하기 위해 광고와 일반 기사를 디자인적으로 명확히 구분

하는 것이 중요하다. 그리고 특히 메인 홈페이지의 경우에는 신문사 웹사이트

로서의 품격을 심각하게 손상하는 자극적 광고는 되도록 배제하거나, 시각적

으로 거슬리지 않게 배치하는 것이 중요하다.

2) 디자인 미학적 측면

(1) 신문사의 개성과 정체성이 살아있는 디자인

예전에는 신문 웹사이트가 종이신문의 텍스트 중심의 디자인을 그대로 따

- 289 -

라하는 것이 문제였다. 그러나 아이러니 하게도 최근의 문제점은 웹상의 모든

사이트들의 기능과 현란한 시각적 스타일을 상호복제하게 되면서, 모든 웹사

이트의 외양이 지나치게 획일적이 되어 간다는 점이다. 즉 웹사이트 디자인의

매력적인 요소들을 다 섞고, 새로운 트렌드를 쉽게 받아들이면서, 결과적으로

모든 신문 웹사이트 디자인이 획일적이고 몰개성화되고 있다는 것이다

(Upholding the values of newspaper).

모든 언론사는 그 자신의 정체성이 있다. 그리고 나름의 퍼스낼러티를 갖고

있다. 그것을 잘 살리는 것이 웹사이트 디자인에서 중요하게 고려되어야 한다.

한국 신문 웹사이트는 바로 이러한 개성과 퍼스낼러티를 살리지 못하는 획일

적 디자인이 문제가 되고 있다. 특히 비슷한 폰트의 제호, 색상, 레이아웃 등

을 사용하면서 각 신문사의 개성이 잘 드러나고 있지 않다는 점이다. 흥미로

운 연구 결과는 일반적으로 젊은 층 수용자들은 홈페이지의 제호, 색상 사용,

레이아웃, 폰트 등에서 ‘개성이 잘 드러내는’ 외국 신문의 웹사이트에 높은 선

호도를 보였다. 예를 들면, USA투데이나 가디언과 같이 젊고 역동적인 디자

인 컨셉도 좋아하지만, 더타임즈나 텔레그라프와 같은 오래된 신문의 정체성

을 살리는 개성있는 디자인에도 호감을 나타내고 있었다.

또 개별 신문사별로 자신들의 주요 타겟층을 고려한 디자인을 개발하는 것

도 바람직한 방안이 될 수 있다. 일례로 독일 신문 <der Freitag>의 디자인

개혁도 참조할 만하다.17) <der Freitag>은 자신들의 독자층이 점차로 고령화

되어가는 현실을 직시하면서, 동시에 젊은 독자층에게 파고들 수 있는 방안을

웹사이트 디자인 개혁에서 찾고자 했다. 즉 오래된 종이신문은 높은 신뢰도를

갖고 있지만, 더 많은 독자에게 어필할 수 있는 충분한 시각적 요소들은 부족

했다. 그렇다고 다른 신문사의 웹사이트 트렌드를 추종하는 것도 그다지 효율

적인 디자인 전략이 아니었다. 그들의 디자인 개혁 작업의 목표는 주류 신문

이 되는 것이 아니라, 오히려 기존 올드 신문인 <der Freitag>의 독특성은 유

지하는 것이었다. 따라서 웹상에서도 뉴스 중심으로 가기 보다는 주간지로서

세계에 대한 보다 분석적인 시각을 갖게 하는 것이었다. 그리고 여기에 온라

인 신문의 상호작용적이고, 공동체 중심적 요소를 가미했다.18) 디자인 관계자

17) http://www.freitag.de

18) 독자와의 상호작용성을 높이기 위해 홈페이지에 독자 코멘터리 파트를 눈에 띄게 배치했다.

그리고 새로운 개방적 포맷은 독자들이 편집자와의 상호교류를 높였다. 독자를 이러한 웹상

- 290 -

는 “우리는 될 수 있으면 매우 간결한 것으로 신문사의 정체성을 드러내려 했

고, 될 수 있으면 스타일과 포맷을 적게 사용하여 간결한 외양을 갖고자했다.”

고 설명하고 있다. 단순하고 세련된 비주얼로 <der Frietag>은 신문사의 정체

성을 잘 드러내면서 지명도를 높였다. 한국에서도 디자인 관계자들이 잘 된

디자인으로 언급하고 있는 <아시아경제>의 경우에 주목할 필요도 있다. 간결

하고 잘 조직화된 디자인으로 경제신문의 정체성과 웹사이트의 효율성을 높

이고 있다는 평가이다.

(2) 포털과는 차별화된 ‘신문사다운’ 디자인

지난 10월 15일 대대적으로 디자인 개혁을 실시한 중앙일보 웹사이트에 대

한 관심이 높다. 포털사이트 조인스MSN(Joninsmsn.com)은 기존의 중앙일보

웹사이트(joins.com)와 세계 최대 소프트웨어 기업 MS의 제휴로 탄생한 사이

트이다. 실제로 심플한 디자인, 인터랙티브 그래픽, 에디터‘s 픽, 적극적인 소

셜 미디어의 활용 등으로 긍정적 평가를 받고 있다. 그러나 한편으로는 ’중앙

일보‘라는 신문사 웹사이트와 MS 포털의 융합으로, 신문사 사이트에 대한 주

목도와 차별성이 떨어지는 우려가 있다. 특히 JoinsMSN과 news.joinmsn.com

과의 브랜드 혼란이 커지고 있다. 또 전체적인 디자인이 신문보다는 포털과

비슷하여, 이용자들이 이를 어떻게 인식할 지가 향후 주목할 만한 사안이다.19)

흥미있는 사실은 뉴스 웹사이트 이용자들이 온라인에서도 일반 포털과는

차별적인 ‘신문사’ 웹사이트의 느낌을 받기를 원한다는 사실이다. 즉, 신문 특

유의 그리드와 신문사 고유의 아이덴티티를 온라인에서도 이어갈 수 있는 차

별적 디자인 전략이 필요하다. 실제로 외국의 신문사 웹사이트들이 국내보다

는 신문사 웹사이트 고유의 느낌과 오프라인에서의 디자인 컨셉을 온라인상

으로 연계시키는 작업이 우수하다.

의 공동체에 참여시키고자 하는 시도는 종이신문이 디자인 개혁에도 반영되었다. 일면의 오

른쪽에 붉은색 박스에 웹상에 쓰여진 독자 의견을 인용하는 란을 만들었다. 다른 색상으로

는 기사와 파트너의 내용을 진한 블루와 옅은 블루 색상으로 구분하였다.

19) 특히 중앙일보의 기사가 조인스MSN(JoinsMSN)의 서비스에 배치되어 서비스 간 관계성이

다소 혼란스럽고, 뉴스 이외의 요소들을 강화하다보니, 신문 기사 자체를 브라우징하는 기

능이 다소 불편해진 것 같다는 것이 전문가(황용석, 임영호)들의 지적이었다.

- 291 -

(3) 멀티미디어, 인터랙티브 그래픽을 활용한 ‘동적’인 웹 디자인으로

최근 한국에서도 웹사이트에 동영상이나 인터랙티브 그래픽이 선보이는 등,

웹사이트에 보다 ‘동적’인 내용의 뉴스를 담으려는 노력이 많이 엿보인다. 그

러나 아직까지 국내 신문사 웹사이트는 지나치게 텍스트 중심으로 구성되어

있고, 사진이나 인터랙티브 그래픽, 동영상의 활용도가 낮은 편이다. 특히 동

영상의 화질이나, 인터랙티브 그래픽의 수준이 외국 사이트에 비해 매우 뒤떨

어져 있다는 지적이다. 플래쉬나 실버라잇과 같은 동적인 구현기술을 적극적

으로 활용하는 것이 필요하다.

그러나 무의미하게 남용되는 플래시나 자극적 영상은 지양해야 한다. 실제

로 포인터연구소의 <눈동자 추적 연구>에서도 내용적 중요성이 없는 비주얼

은 독자들의 시선을 끌지 못하는 것으로 나타나고 있다(<부록> 참조). 또 독

자들의 시선을 끌기위한 자극적이고 현란한 영상도 웹사이트에 대한 신뢰도

나 언론사의 일관성에는 오히려 부정적 효과를 미친 것으로 나타나고 있다.20)

지나치게 독자들의 시선을 끌기위한 장식적이고 현란한 비주얼은 그다지 독

자들의 관심을 끌지 못하고 있는 것으로 나타났다.

3) 신문사와 독자와의 관계: 상호작용성과 친밀성의 강화

(1) 소설네트워크의 적극적이고 효율적 활용

기존미디어가 소셜 네트워크를 기반으로 하는 소통방식을 적극적으로 활용

하고, 이에 대응하지 않으면 그 존재자체가 위협을 받을 수 있다는 위기의식

이 높아지고 있다. 문제는 이런 새로운 서비스를 ‘기존’의 사이트 구조에 어떻

게 도입하는가 하는 점이다. 즉, 소셜 미디어 서비스를 융합하는 방식에서 구

조적으로 새로운 접근 방법이 필요하다는 점이다. 단순히 신문에 실린 기사를

얼마나 많은 사람에게 읽힐 것인가를 모색할 것이 아니라, 현재 사이트에서

20) LA타임즈 웹사이트(thelatimes,com)에서는 “I Can Has Cheezburger kitten”의 사진을 홈페

이지 전면에 실었다. 물론 kitten의 사진은 독자들의 시선을 끌 수는 있지만, 실제로 웹사이

트나 언론사의 일관성에는 부정적 효과를 미쳤다. 독자들은 늘 찾는 그 자리에 일관성 있는

뉴스 기사와 그 밖의 정보 요소들이 배치되기를 기대하고 있는 것으로 나타났다(Niles,

2008.9.26, OJR).

- 292 -

이용자들이 가장 필요로 하는 정보를 가장 손쉬운 방법으로 어떻게 제공할

수 있을 것인가를 새로운 틀에서 모색해야 할 것이다.

이런 면에서 외국 사이트의 사례를 참고할 만 하다. 뉴욕타임즈나 워싱톤

포스트지가 자사 기자의 권위있는 기사만이 아니라, 다양한 블로그 활동을 하

는 블로거들의 글로 그 내용이 더욱 깊고 풍성해진 것은 벌써 이런 구조적인

변화가 시작되었다는 것을 말해준다. 기본적으로 웹사이트의 구조가 중앙 집

권적으로만 구성되어서는 안 된다는 것이다. 이용자의 기존 소셜 네트워크를

어떤 방식으로든 웹사이트 디자인에 포함시킬 수 있는 방안을 좀 더 적극적

으로 모색해야 할 것이다. 또 웹사이트 디자인은 앞으로 다가올 웹 3.0 시대의

더 큰 변화를 염두에 둔 미래지향적인 시각을 가지고 해야 할 것이다. 소설네

트워크의 활용은 그야말로 언론사 사이트가 독자들이 노는 ‘물’과 환경의 일

부로 유기적으로 통합되어야 한다.

(2) 이용자(독자) 편의 중심의 디자인

현재 신문 웹사이트는 독자나 이용자가 편리하게 이용하도록 디자인되어

있기 보다는 생산자들이 편리하게 디자인되어 있다는 느낌이 있다. 상호작용

적인 측면을 고려하지 않더라고 이용자가 불편을 느낄 수 있을 만큼 복잡하

게 구성된 디자인이다. 예를 들어 신문 기사를 검색하기 위해서 몇 단계를 거

쳐야 할 만큼 웹사이트가 복잡하게 되어 있다. 이러한 점을 고려하여 보다 심

플한 디자인에서 정보 검색과 정보 탐색이 용이한 디자인으로 변화해야 한다.

또 어떤 디바이스에서도 웹사이트와 같이 즐길 수 있는 디자인의 연계가

필요하다. 즉, 이미 많은 신문사들이 시도하고 있듯이, 스마트폰, 태블릿PC에

서도 웹 브라우저의 뉴스 웹사이트 느낌과 신문사의 정체성을 동일하게 이어

갈 수 있는 디자인을 개발할 필요가 있다.

4) 디자인 개혁의 신중성과 경영진의 인식 변화

신문 웹사이트 디자인은 웹 환경의 변화만큼이나 신속하게 빠르게 진행되

고 있다. 그러나 신문사의 디자인 개혁은 신중해야하고, 신문사의 경영진의 적

극적 관심과 지지가 필요하다. 신문 웹사이트는 즉흥적으로 만들어지는 것이

- 293 -

아니다. 속도와 경쟁이 치열한 웹 문화의 영향으로 신문 웹사이트 디자인은

전체적인 흐름을 놓치고 순간마다의 새로운 인터넷 도구나 상황 수습식으로

변화할 수 있다. 특히 국내 신문사 사이트의 경우, 임기응변식, 유행을 획일적

으로 따라가는 디자인 변경이 많고 통일성없는 변경이 많다는 지적이다.

그러나 디자인 개혁은 신중하고, 일관성이 있어야한다. 또한 당사만의 디자

인 철학과 정체성을 반영한 디자인 매뉴얼을 바탕으로 충분한 실험과 이용자

반응 조사 결과 등을 바탕으로 이뤄져야 한다. 전세계적으로 가장 우수한 웹

사이트 디자인으로 꼽히고 있는 뉴욕타임즈의 디자인 개혁은 신문 디자인 과

정을 잘 보여주고 있다. 뉴욕타임즈는 디자인 변경시 분명한 서비스 컨셉을

제시하고 있고, 그러한 컨셉은 저널리즘의 기능성 관점에서 고려되어 왔다.

2006년 4월, 뉴욕타임즈는 5년 만에 디자인 개혁을 시도했다. 디자인 개혁에

는 분명한 목표가 존재했다. 즉 독자들의 독이성과 정보 전달 효율성 등 기능

적 측면이었다(뉴욕타임즈가 가장 역점을 둔 것은 바로 기사 페이지였다). 그

리고 이를 위한 추진 과정에는 뉴욕타임즈 내부의 웹사이트 디자이너와 IT 전

문가의 협업, 그리고 외부 디자인 회사의 컨설팅과 조력에 의해 이뤄졌다.21)

특히 중요한 것은 고위 경영자층의 디자인에 대한 관여와 관심이다. 뉴욕타임

즈 웹사이트 디자인 에디터인 Apcar는 기본적으로 신문사 웹사이트 디자인

개혁 이전에도 온라인과 오프라인의 뉴스룸을 통합하자는 주장을 펼쳤다. 그

리고 웹사이트 디자인에 뉴욕타임즈 디자인 담당 부편집장인 Tom Bodkin을

참여시켰다. 또 디자인이 결정된 이후 회사의 최고 경영층에 가져갔다. 발행

인, 편집장, 그리고 신문의 경영진에게도 설명이 되었다.

이와 같이 신문사 디자인에는 신문사 전체의 협업과 경영진의 관심과 지원

이 필요하다. 특히 한국에서와 같이 웹사이트 디자인 인력이 부족한 경우, 독

자를 끌어들이는 우수한 신문디자인과 그를 담고 있는 내용의 충실성을 담보

하기 어려운 실정이다.

21) OJR과 뉴욕타임즈 웹사이트 편집장과의 인터뷰 내용을 통해 뉴욕타임즈 디자인 개혁 과정

을 살펴볼 수 있다. 디자인 개혁 과정에는 뉴욕타임즈 내부 부서(IT)와의 협업, 외부 디자인

전문회사와의 공동 작업이 선행되었다. 실제로 모든 디자인 구조/설립(디자인 목표, 문제점,

사이트 내에서의 독자 행동에 대한 관심사)는 내부에서 만들었다. 외부 회사(Avenue A/

Razorfish)는 시각 디자인에 관해서만 작업했다. 실제로 외부회사는 10~12개의 템플릿(주로

섹션 프론트, 홈페이지, 하부 내비게이션, 분류체계)을 놓고 도움을 청했다. 대부분은 아이

디어는 회사 내부에서 나왔지만, 뉴욕타임즈 사이트에 대한 외부의 시각은 매우 도움이 되

었다고 하였다.

- 294 -

이 밖에도 다양한 기술적 지원과 사회전반적인 디자인 R&D와 투자가 필요

하다. 실제로 디자인 관계자들에게 한국 웹사이트 디자인 개선의 걸림돌이 되

는 것이 바로 한글 폰트의 제약이다. 실제로 타이포그래피는 웹사이트 디자인

에 가장 중요한 요소이다. 한글은 시스템 폰트로 사용할 경우, 자간과 행간 조

절에 제약이 있으므로 그 중에서 가장 최적화된 수치를 찾아 적용해야 한다.

이와 같은 한글 폰트의 제약점으로 영미권보다 디자인 구현이 어려운 점이

많다. 타이포그래피에 대한 보다 많은 투자와 연구가 필요한 것이다.

- 295 -

참고문헌

김재영(2002). 인터넷 뉴스사이트 유형별 비교분석: 상호작용성과 정보형태의

다양성을 중심으로.『한국방송학보』, 16권 3호. 136~167.

송승헌․기우서․김응곤(2001). 사용자 중심의 웹 인터페이스 디자인 및 평가

에 관한 연구. 한국정보과학회 2001년도 봄 학술대회 발표문.

오은석(2007). 디지털 스토리텔링 기반의 웹사이트 내비게이션 디자인 연구.

『한국디자인문화학회지』, 13권 3호. 29~38.

윤세민(2001).『인터넷신문의 웹 미디어적 특성 연구: 콘텐츠 구성과 표현 및

상호작용 메커니즘 분석을 중심으로』. 성균관대학교 대학원 박사학위

논문.

이용환(1998). 웹 페이지 디자인 연구: 3대 일간지의 웹 페이지 구성을 중심으

로.『AURA』, 6호. 87~96.

이유숙(2001). 웹 스타일 가이드.『이비즈그룹 워킹 페이퍼』, 23.

장영범(2008). 웹2.0 기잔 웹사이트의 디자인 특성에 관한 연구: RIA 구현 기

술 및 SD SNS와 UCC 전문 웹사이트를 중심으로.『한국디자인문화학

회지』, 14권 4호. 418~430.

전양덕(2001). 웹사이트 디자인에서의 HCI에 관한 고찰.『Korean Society of

Communication Design』, 12권 4호. 231~246.

정면주․현지호(2003). 디지털 인터페이스 디자인의 커뮤니케이션 효율성 연

구.『The Society of Korea Illusart』, 12호. 102~110.

최낙진(1999). 인터넷신문의 웹디자인 구성과 정보 전달 형식에 관한 연구.

『한국언론학보』, 44권 1호. 441~467.

최민재(2009), 소셜 미디어의 확산과 미디어 콘텐츠에 대한 수용자 인식연구.

한국언론정보학회 학술대회 발표문. 5~31.

최영․김병철(2000). 인터넷신문의 상호작용성에 관한 연구.『한국언론학보』,

44권 4호. 172~200.

황용석․이홍철(2000).『인터넷 뉴스 사이트: 편집과 기사쓰기』. 서울: 한국언

론재단

FKII조사연구팀(2006). 소셜 미디어(Social media)란 무엇인가?『정보산업지』,

- 296 -

6호. 52∼55.

Ahn, Y., Han, S., Kwak, H., Moon, S., & Jeong, H.(2007). Analysis of

topological characteristics of huge online social networking services.

World Wide Web 2007(WWW 2007).

Bloomberg Business Week(2010). Facebook surpasses google in weekly U.S.

hits for first time. (March 17, 2010).

Boyd, D. M. & Ellison, N. B.(2008), Social network sites: Definition, history,

and scholarship. Journal of Computer-Mediated Communication, 13(1),

210~230.

Cormode, G. & Krishnamurthy, B.(2008) Key differences between web 1.0

and web 2.0. AT&T Labs Research.

Chan-Olmsted, S. & Park, J.(2000). From on-air to online world: Examining

the content and structures of broadcasting TV station's web sites.

Journalism & Mass Communication Quarterly, 77(2), 321~339.

Editor & Publisher(2010). Digital natives: More different than you think.

<http://newsosaur.blogspot.com/2010/10/digital-natives-more-different

-than-you.html>

Fleming, J.(1998). Web navigation: Designing the user experience. New Haven.

Gordon, R.(2009). Social media: The ground shifts. Nieman Reports, Fall,

2009. <http://www.nieman.harvard.edu/reports/article/101883/Social-

Media-The-Ground-Shifts.aspx>

Jackson, M.(2008). Distracted: The new world and the fate of attention.

Nieman Reports, Winter, 2008. <http://www.nieman.harvard.edu/report

s/article/100679/Distracted-The-New-News-World-and-the-Fate-of-Atten

tion.aspx>

Kieman, V. & Levy, M.(1999). Competition among broadcasting-related web

sites. Journal of Broadcasting & Electronic Media, 43(2), 271~279.

Li, X.(1998). Web page design of graphic use of three U.S. newspapers.

Journalism & Mass Communication Quarterly, 75(2), 353~365.

Mashable(2010). Facebook’s open graph personalizes the web <http://masha

- 297 -

ble.com/2010/04/21/facebook-open-graph>

Messy, B. & Levy, M.(1999). Interactivity, online journalism, and

English-language web newspapers in Asia. Journalism & Mass

Communication Quarterly, 76(1), 138~151.

Newson, A., Houghton, D., & Patten, J.(2009). Blogging and other social

media: Exploiting the technology and protecting the enterprise. Farnham:

Gower.

Nielsen news release(2009). Personal recommendations and consumer

opinions posted online are the most trusted forms of advertising

globally. <http://en-us.nielsen.com./content/nielsen/en_us/report_for

ms/Nielsen-Global-Consumer-Confidence-Survey-Q1-2010.html>

Niles, R.(2008). News websites need sharper focus, consistent design to

atrract audience, advertisers. OJR.

Norman, D.(2001). An Apple fellow at Apple Computer and professor

emeritus at the university of california. <http://www.lanl.gov/SFC/9

5/bios/normand.html>

O’Reilly, T. (2005). What is web 2.0. <http://www.oreilly.com/pub/a/oreill

y/tim/news/2005/09/30/what-is-web-20.html>

Overholser, G.(2009). What is journalism’s place in social media? Nieman

Reports, Fall, 2009, <http://www.nieman.harvard.edu/reports/article/

101882/What-Is-Journalisms-Place-in-Social-Media.aspx>

Rogers, E.(1996). Communication technology: The new media in society. New

York: Free Press.

Paul, N. & Ruel, L.(2007). News site web design: what works. Online

Journalism Review. 2007. 1. 10

Pavlik, J.(1997). The future of online journalism: A guide to who's doing

what. Columbia Journalism Review, July/August.

Pavlik, J.(2001). Journalism and new media. New York: Columbia University

Press.

PEW Research Center(2009). Adults on social network sites, 2005-2009. Oct.,

2009 <http://www.pewinternet.org/Infographics/Growth-in-Adult-SNS

- 298 -

-Use-20052009.aspx>

PEW Research Center for Excellence in Journlaism(2010). How blogs and

social media agendas relate and differ from the traditional press.

May 23, 2010, <http://www.journalism.org/analysis_report/new_medi

a_old_media>

Rosenberg, S.(2009). Closing the credibility gap. Nieman Reports, Fall, 2009,

<http://www.nieman.harvard.edu/reports/article/101900/Closing-the-

Credibility-Gap.aspx>

Safko, L., & Brake, D.(2009). The social media bible: tactics, tools, and strategies

for business success. NY: Wiley.

Schultz, T.(1999). Interactive options in online journalism: A content analysis

of 100 U.S. newspapers. Journal of Computer-Mediated Communication,

5(1). [Online]

Schultz, T.(2000). Mass media and the concept of interactivity: An

exploratory study of online forums and reader email. Media, Culture

& Society, 22(2), 205-221.

Skoler, M.(2009). Why the news media became irrelevant and how social

media can help. Nieman Reports, Fall, 2009, <http://www.nieman.harv

ard.edu/reports/article/101897/Why-the-News-Media-Became-Irrelevant

And-How-Social-Media-Can-Help.aspx>

Strickland, M.(2007). The evolution of web 3.0. <http://www.slideshare.net/

mstrickland/the-evolution-of-web-30>

Tapscott, D.(2008). Net geners relate to news in new ways. Nieman Reports,

Winter, 2008, <http://www.nieman.harvard.edu/reports/article/100674

/Net-Geners-Relate-to-News-in-New-Ways.aspx>

Tapscott, D.(2009). Grown up digital: How the net generation is changing your

workd. McGraw Hill: New York.

Tech Crunch.(2010). Live from bing’s facebook event: Search gets better

because of your friend. written by Jason Kincaid, Oct. 13, 2010.

<http://techcrunch.com/2010/10/13/live-from-bings-facebook-event-sea

rch-gets-better-because-of-your-friends>

- 299 -

Vargas, N.(2009). Setting guidelines on how to design the news online.

Portugese online newspapers and their Spanish, argentinian and brazilian

counterparts,” 2009, <http://online.journalism.utexas.edu/2009/papers/

Vargas09.pdf>

van Allen, P.(2004). Thinking about interaction design for online news

delivery. <http://www.ojr.org/ojr/technology/1088538463.php>

Yaros, R.(2008). Digital natives: Following their lead on a path to a new

journalism. Nieman Reports, Winter, 2008,<http://www.nieman.harvard.

edu/reports/article/100671/Digital-Natives-Following-Their-Lead-on-a-P

ath-to-a-New-Journalism.aspx>

Webb, M.(2004). <http://interconnected.org/home/2004/04/28/on_social_soft

ware> 2004.

Search Written(2010). Topic pages: big site SEO. 2010. 1. 30에 포함된 비디

오 참조. <http://searchwritten.com/topic-pages-big-site-seo.html>

Wikipedia. Social media optimization. <http://en.wikipedia.org//wiki/Social

_media_optimization>

Wikipedia. Semantic web. <http://en.wikipedia.org/wiki/Semantic_Web>

http://blog.chosun.com/blog.log.view.screen?blogId=205&logId=3531805

http://elections.nytimes.com/2008/president/whos-ahead/key-states/map.htm

http://journalists.org/?page=oja2009

http://portal.acm.org/citation.cfm?id=274644.274649&type=series

http://www.bivings.com/thelab/presentations/2008study.pdf

http://www.newspaperwebdesign.com/

http://www.nieman.harvard.edu/reportsitem.aspx?id=102097

http://www.nieman.harvard.edu/reportsitem.aspx?id=102097

http://www.nytimes.com/packages/html/politics/2008-election-overview

http://www.nytimes.com/interactive/2008/10/31/sports/playmagazine/20081

031_skiing_graphics.html

http://www.ojr.org/ojr/stories/060409nile92030728EB?contentType=Article&h

- 300 -

dAction=lnkhtml&contentId=863762

http://www.ojr.org/ojr/technology/1088538463.php

http://www.smashingmagazine.com/2008/11/11/newspaper-website-design-tr

ends-and-examples

- 301 -

부록

■ Eyetracking points the way to effective news article design

이 사례는 미국 포인터연구소에서 실시된 눈동자 추적 연구이다. Jakob

Nielsen이 자신의 연구결과를 실험하기 위해 실시한 눈동자 추적 연구의 결과

는 온라인 뉴스 에디터들에게 매우 유용한 결과를 제시한다. 이 연구는 2005

년 Nielsen과 Kara Pernice Coyne이 Neilsen/Norman 그룹의 연구 책임자로

있을 당시에 수행된 연구이며, 뉴욕시에 거주하는 255명의 사람을 대상으로

수행되었다. 연구 참가자들의 나이는 30~49세였고, 20%는 18~29세, 16%는

50~64세였다. 성별은 58%는 여성, 425는 남성이었다. Coyne은 실험 결과를

통해 온라인 뉴스사이트 이용자들의 목표와 동기를 밝히는 것이 중요하다고

강조하였다. 그녀는 ‘눈동자 추적’은 이용자들이 어디를 보고, 이용성에 있어

문제점이 어디 있는지를 알려주기 때문에 연구가치가 높다고 하였다.

① Feature finding #1 : Rewrite + reformat = remember

아래에 제시된 그림은 테스트된 2개의 기사이다. 왼쪽에 있는 원본은 여백

을 늘리고, 주요 아이디어를 간결하게 제시하고, 문장을 짧게 하고, 각 레스토

랑 랭킹에 대한 그래픽을 덧붙여 제시하는 방식으로 수정되었다.

- 302 -

[그림 1] 테스트된 기사

눈동자추적 결과 자료는 아래 그림과 같다. 붉은 부분은 프레젠테이션 중에

서 시선 고정이 가장 길었던 부분이고, 어두운 부분은 고정시간이 없거나 혹

은 적은 부분이다. 두 경우 모두 페이지 왼쪽에 제시된 콘텐츠에 더 많은 시

간이 소비되었다. 재구성한 기사를 본 이용자들의 이해도는 12% 증가하였고,

읽기 경험에 대해 좀 더 만족하는 것으로 나타났다. Nielsen과 Coyne은 좀 더

복잡한 내용으로 뉴욕타임즈의 기사를 가지고 비슷한 실험을 수행하였고, 그

실험의 결과 역시 비슷하였다.

- 303 -

[그림 2] 눈동자 추적 데이터

온라인 저널리스트에게 이러한 실험 결과는 많은 점을 시사한다. 만약 독자

들이 좀 더 빨리 기사를 읽고, 기사 내용을 더 많이 기억하고, 기사를 읽는 경

험에서 더 많은 만족을 얻게 하고 싶다면, 시간을 들여 온라인 기사를 다시

쓰고, 재구성하라는 것이다. Coyne은 온라인 저널리스트에게 모든 페이지와

기사는 잘 쓰여진 헤드라인이 제시되어야 한다고 하였다. 또 전반적으로 온라

인 기사는 서두에 중요한 부분이 먼저 제시되는 좀 더 간결한 글로 작성해야

한다고 하였다.

② Featured finding #2. : Precise and relevant editing = successful design

이 실험은 홈페이지에서 정교하지 않고, 정보만을 포함하고 있는 이미지들

은 시선을 끌지 못하며, 공간을 활용하지 못한다는 사실을 보여주었다. 아래에

제시된 그림은 웹페이지에 대한 실험의 예이다.

- 304 -

[그림 3] BSNF 철도 홈페이지

위 그림의 BNSF 철도 페이지는 Nielsen과 Coyne에 의해 실험되었다. 이용

자들에게 이 페이지에 접속한 후에 “뉴스 읽기”를 하도록 하였다. 아래에 제

시된 Hotspot은 기차 이미지가 시선 고정을 받지 못하며, 이용자들의 시선은

사이트의 뉴스가 위치한 영역으로 가지 못하고, 페이지 주변에 머무르고 있음

을 보여주었다.

- 305 -

[그림 4] Hotspot

아래 그림과 같은 다른 버전의 BNSF페이지도 실험되었다. 가장 긴 시선 고

정은 홈페이지 디자이너들이 이용자를 이끌 수 있도록 의도한 “News

Releases"에 있었다. 이용자들은 정확히 그들이 필요한 것을 찾았으며, 정보가

좀 더 분명히 제시될 때 더 오래 머무르고 있었다.

- 306 -

[그림 5] 다른 버전의 BNSF 철도 사이트와 이에 상응하는 Hotspot

이 실험들은 뉴스 웹페이지의 모든 요소에 대해 정교한 편집이 필요하다는

점을 알려준다. 온라인 뉴스 디자이너들에게 하는 Coyne의 주요 3가지 제안

은 첫째는 웹에서 쉽게 살필 수 있도록 텍스트를 제시하고, 둘째는 심플한내

비게이션 구조를 만들고, 셋째는 여백이나 유용한 그랙픽을 사용하는 것이었

다.

③ Featured finding #3 : Photos edited for relevance = Photo viewed

Coyne은 이용자들은 불필요한 이미지들을 장애물처럼 여긴다고 하였다.

Nielsen과 Coyne은 불필요하거나 주변적인 이미지의 사용은 무시된다고 결론

내렸다. 또 사람들은 가공된 인물이 아닌 “실제 인물”을 보게 된다. 대부분의

사람들은 기사에 실린 모델은 광고라고 생각하기 때문에 이를 회피한다는 것

이다. 아래의 danceworks.com에 실린 페이지를 보면 이러한 점이 잘 증명된

다.

- 307 -

[그림 6] danceworks.com

이용자들은 실험에서 Mickhail Baryshnikov에 대해 좀 더 찾아보고자 하였

다. 이용자들의 시선은 페이지의 거의 대부분을 탐색하지만, 정보를 담고 있지

않은 사진은 보지 않았다. Coyne은 디자이너들이 사용하는 포괄적인 유형의

사진은 피해야 한다고 하였다.