나처럼 온라인으로 신문을 보는 사람들이 단언컨대 가장 많이 사용하는 기능이라면 "클릭"과 "드래그"일 것이다. 필자의 경우 "클릭"은 기사를 선택할 때, "드래그"는 기사 본문에서 일부 내용을 복사하여 수집하고 싶을 때 사용한다. 기존 온라인 신문에서는 마우스 드래그 시 별도의 기능이 출력되지 않았는데, 최근 여러 온라인 신문들을 읽다보니 마우스 드래그에도 다른 기능들을 넣은 곳들이 종종 보여 비교하는 재미가 있었다.
1. 좋은 UI 예시: 독자가 드래그를 하는 '이유'에 집중
1. 동아일보:독자가 드래그를 하는 이유를 한 가지로 정의
동아일보의 경우 독자가 본문에 드래그를 하는 이유를 한가지로 간단하게 정의했다. 그건 바로 '공유하기'. 동아일보에 로그인하지 않은 유저도 공유하기 기능을 사용할 수 있다. "사용자들이 적은 수고만으로도 공유와 댓글 등을 통해 뉴스 배포의 주역이 되는 새로운 뉴스 유통의 시대( KCA 한국방송통신전파진흥원, [인터넷 뉴스 이용자 조사(2014)])"에 부합하는 기능이라는 생각이 들었다.
동아일보 기사 본문을 드래그 시 '문장공유'라는 안내 문구와 함께 트위터 아이콘/카카오톡 아이콘이 출력된다. '문장공유' 문구 없이 트위터, 카카오톡 아이콘만 출력이 되었다면 독자 입장에서는 혼돈에 빠질 수도 있었을 거다. 짧은 글귀였지만 사용자의 입장에서 배려한 점이 눈에 띄었다.
또한 일반적으로 사용되는 '공유하기'라는 안내 문구가 아니라, '문장공유'라는 안내 문구를 사용한 것이 인상적이었다.
2. 중앙일보: 독자가 드래그를 사용하는 이유를 세분화
중앙일보의 경우 독자가 드래그를 하는 '이유'를 세분화한 것이 눈에 띄었다. 기사 내용에 하이라이트 표시를 하고 싶은 사람, 메모를 달고 싶은 사람, 내용을 공유하고 싶은 사람, 내용을 복사하고 싶은 사람…
기사 본문을 드래그 시 무려 4가지 기능(하이라이트/메모/공유/복사)이 담긴 박스가 본문 아래에 출력된다. 많은 기능을 담으면 자칫 UI가 지저분하게 보일 수 있는데, 흑색 배경에 하얀 볼드체로 깔끔한 인상을 준 것이 좋았다. 하이라이트/메모/공유/복사 중에서 복사를 제외한 나머지 기능들은 중앙일보 회원들만 사용 가능하다.
하이라이트/메모/공유 기능은 그렇다손 치더라도, '복사' 기능을 굳이 박스에 넣은 것이 신기했다. 왜냐하면 필자에게 '복사' 기능은 "1)본문 내용을 드래그한다. 2)별도의 마우스를 움직일 필요 없이 control+c를 누른다."의 두 뎁스를 요구하는 기능이었기 때문이다.
반면 박스에 위치한 '복사' 기능을 사용하려면 "1)본문 내용을 드래그한다. 2)마우스의 위치를 '복사'버튼 위로 옮긴다. 3)'복사'버튼을 클릭한다."로 뎁스가 1 증가하면서 소비자에게 불필요한 마우스 움직임을 유발시킨다고 생각했다.
'굳이 독자에게 마우스를 움직이게 만들어야 할까? 독자가 원하는 목표에 달성하기 위해 요구되는 프로세스를 줄이는 게 좋은 거 아니야?'
그러나 다시 생각해보니, '나'를 기준으로 생각할 문제가 아니었다. 컴퓨터 브라우저에서 "클릭"으로 원하는 본문에 접근할 수 있지만, "드래그", "컨트롤 씨"와 같은 그 외 기능에는 익숙하지 않은 노인 분도 있을 터였다.
또한 컴퓨터 활용에 익숙치 않다면 "컨트롤 씨" 단축키보다는 "1)본문을 드래그한다. 2)마우스를 우클릭한다. 3)'복사'기능까지 마우스를 옮긴다. 4)'복사' 기능을 클릭한다."의 4 뎁스로 복사 기능을 사용하는 유저도 있을 것이다.
컴퓨터 사용에 익숙하지 않은 타깃들까지 고려한다면 '복사'라는 버튼을 추가한 중앙일보의 결정도 이해가 되었다. 어차피 필자처럼 컴퓨터 사용에 불편함이 없는 사람들은 자동적으로 "컨트롤 씨"를 누를 테니까.
그렇다면 디자인적인 측면은 어떨까? 중앙일보 박스 탭은 흑색 배경+하얀 볼드체의 조합으로 구성되어있는 반면, 웹페이지 우클릭 시 출력되는 박스에서는 회색 배경에 하얀색 글씨로 기능들이 안내된다. 1)색의 대비 2)볼드체의 강조라는 두 가지 디자인적 요소를 가미한 중앙일보의 박스가 훨씬 가시성이 좋았다.
여기까지 생각해보니 중앙일보 드래그 박스 내 '복사'가 다르게 보이기 시작했다. 기존 웹페이지 우클릭 박스보다 1뎁스가 줄어들 뿐만 아니라, 유저가 원하는 기능을 더 편하게 찾을 수 있게 만드는 UI로 여겨졌다.
2. 나쁜 UI 예시: 독자의 편의보다는 단기 수익에 집중
뉴시스: 광고 수익 극대화
이 날도 원하는 정보를 찾기 위해 신문 속을 헤매던 중, 뉴시스 기사에 들어가게 되었다. '찾았다!' 원했던 정보를 발견한 나는 자동적으로 문장을 드래그를 했다. 이제 "'컨트롤 씨'만 누르면 된다!" 고 생각하던 나에게 의외의 복병이 등장했다. 내가 문장을 따라 길게 드래그를 할수록 페이지 좌측에서 사이드바가 더 길게 노출되다가 이윽고 신문 본문 페이지를 덮어 썼다. 처음엔 '이런 방식으로도 광고 노출수를 늘릴 수 있구나!'라고 생각했다. 좌에서 우로 드래그 시 사이드바 광고가 출력된다면, 반대로 우에서 좌로 드래그를 하면 된다고 생각했다. 본문 상단이 아닌 하단부터 드래그를 하기 시작했다. 이번에는 페이지 우측에서 광고 사이드바가 노출되더니 또 다시 신문 본문 페이지를 덮었다. 뛰는 놈 위에는 언제나 나는 놈이 있는 법이었다.
다행히 모바일 뉴시스(mobile.newsis.com)에만 존재하는 형태의 광고였고, 데스크톱 뉴시스 페이지(newsis.com)에서는 드래그 시 사이드바 광고가 등장하지 않았다.
UI에 관심이 있는 사람으로서 뉴시스의 드래그 시 광고 사이드바 출력은 개인적으로 흥미로웠지만, 한 명의 독자의 입장에서는 불편하기 그지 없는 기능이었다.
광고로 얻을 수 있는 수익은 중요하다. 단, 광고로 얻을 수 있는 수익을 고려하되, 소비자가 광고에서 느낄 수 있는 불편함을 최소화하는 방향으로 가야한다.
3. 기타
한겨례, 조선일보의 경우 드래그 시 별다른 기능이 출력되지 않았다.
참고 자료
1. 논문
- KCA 한국방송통신전파진흥원, [인터넷 뉴스 이용자 조사(2014)]
2. 기사
https://www.donga.com/news/Opinion/article/all/20230129/117647779/1
‘공감 마케팅’ 성공하려면[Monday HBR/크리스틴 알레마니]
나이키는 코로나19가 한창이던 2020년 ‘세계를 위해 운동하라―우리를 멈출 순 없다(Play For The World―You can’t stop us)’ 캠페인을 공개했다. 이…
www.donga.com
https://www.joongang.co.kr/article/25138340#home
‘앤트맨3’가 흥행 부진 마블 구할까…“타노스보다 강한 빌런 등장” | 중앙일보
올해 첫 마블 블록버스터 ‘앤트맨과 와스프: 퀀텀매니아’(이하 ‘앤트맨3’)는 MCU의 다섯 번째 장(페이즈5)을 여는 작품으로, ‘앤트맨’(2015), ‘앤트맨과 와스프’(2018)에 이은 세 번째 앤트
www.joongang.co.kr
https://mobile.newsis.com/view.html?ar_id=NISX20220303_0001780464#_PA#_enliple
'재능 부업'에 빠진 MZ세대…앱 깔고 "나도 N잡러"
[서울=뉴시스] 배민욱 기자 = MZ세대(밀레니얼+Z세대)를 중심으로 취미나 재능을 살려 부업을 택하는 'N잡'에 대한 관심이 높아지고 있다
mobile.newsis.com
'기획 > 서비스 분석' 카테고리의 다른 글
| [테이블링] 리뷰 작성 프로세스/마이크로 카피 (0) | 2023.02.19 |
|---|---|
| [반려생활] 서비스 분석 및 개선안(SIMPLE) (0) | 2023.02.09 |
| 네이버 프리미엄 콘텐츠 구독해제 프로세스 (0) | 2023.02.05 |
| 아트파인더(지도 기반 전시회 정보 제공) (0) | 2023.02.01 |
| 와글와글-인구 혼잡도 제공 서비스 (0) | 2023.01.22 |
