재미로 보는 19대 대선후보 사이트 UX 분석 결과
- 주요 대선 후보자 사이트의 웹 품질, 성능, UX 비교 분석
5월 9일 화요일로 제19대 대통령 선거가 얼마 남지 않게 되었습니다. 이번 주요 대선 후보자들의 사이트를 4Grit가 만든 웹품질 자동 분석 사이트 '시멘틱마인'으로 비교-분석해보았습니다. 결과가 궁금하시지 않으신가요? 사용성과 접근성, SEO, 성능, 모바일 친화성 등 분석 결과를 소개합니다.
시멘틱마인을 통해 여러분의 사이트를 자동 분석할 수 있습니다.
https://www.semanticmine.com/#/
아래 내용은 일부 내용만을 요약 또는 발췌한 것입니다. 상세한 내용은 시멘틱 마인으로 분석해보세요!
분석 일시 : 2017년 4월 28일 금요일 오전 10시
*결과는 사이트 콘텐츠 개편 현황, 방문자수, 일자 등에 상황에 따라 달라질 수 있습니다.
1. 문재인 더불어민주당 후보
사이트 주소: http://moonjaein.com/
전체 점수: SEO - 71점, 접근성 - 58점, 성능 - 56점
문재인 후보의 공식 홈페이지 주요 화면(1) 사용성
PASS
버튼에 접근하거나 클릭했을 때 디자인 인터랙션을 제공하는지
가로 해상도가 1920픽셀일 경우 가로 스크롤이 생기지 않는지
Error
(14곳) 페이지 내에서, 링크나 버튼을 클릭할 때 새 창으로 열리는 수행에 대한 예측을 할 수 있는가
(2) 접근성 - 장애인, 고령자 등 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것을 의미합니다.
PASS
주 언어 명시: 시각 장애 환경에서 화면 낭독기로 웹에 접근했을 때, 주 언어가 명시되어 있어 해당 언어에 알맞게 출력되고 콘텐츠의 이해가 수월합니다.
Error
명도 대비: (2곳) 저시력, 노안과 같은 시각 장애 환경에서 콘텐츠를 바르게 이해하기 어렵습니다. 콘텐츠와 배경 간의 명도 대비는 4.5:1 이상으로 보장해야 합니다.
(3) SEO - SEO(Search-Engine Optimization, 검색엔진 최적화)란 네이버, 구글과 같은 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성하여 검색 결과 상위에 나타날 수 있도록 하는 작업을 의미합니다.
PASS
Server(5XX) Errors: 서버 측 실행에 이상 없습니다.
URL Too Long: 웹 페이지 주소의 길이가 적절합니다.
Error
Too Many Links: 이 페이지에 제공되는 링크의 개수가 너무 많습니다. 페이지 내에 링크의 수는 200개 이하로 유지하는 것을 권장합니다. 페이지에 너무 많은 링크가 있다면 여러 개의 페이지로 나눌 수 있습니다.
(4) 성능
PASS
Server response time: 서버 응답 시간이 빠릅니다.
Prioritize the content: 스크롤 없이 볼 수 있는 콘텐츠의 우선순위가 올바르게 지정되었습니다.
Error
Optimize Images: 이미지의 형식을 적절하게 지정하고 압축하면 데이터 용량을 크게 줄일 수 있습니다.
(5) 모바일
PASS
플래시: 플래시가 사용되지 않았습니다.
UX 품질 진단 요약
2. 홍준표 자유한국당 후보
사이트 주소: http://strongkorea.co.kr/
전체 점수: SEO - 77점, 접근성 - 65점, 성능 - 29점
홍준표 후보의 공식 홈페이지 주요 화면(1) 사용성
PASS
가로 해상도가 1920픽셀일 경우 가로 스크롤이 생기지 않는지
Error
(1곳) 라벨이 없는 서식을 마우스로 가리키면 말풍선으로 보충설명을 보여주는지
(2) 접근성
PASS
콘텐츠 블록 제목: 적절한 제목 요소로 페이지의 주고를 탐색하고 이해할 수 있습니다.
사용자가 의도하지 않은 기능: 사용자가 의도하지 않은 기능으로 인해 웹 사용에 방해를 받지 않습니다.
Error
명도 대비: (명도 대비 4.5:1 미만, 3:1 이상 39곳)(명도 대비 3:1 미만 55곳) 저시력, 노안과 같은 시각 장애 환경에서 콘텐츠를 바르게 이해하기 어렵습니다. 콘텐츠와 배경 간의 명도 대비는 4.5:1 이상으로 보장해야 합니다.
(3) SEO
PASS
Meta Description Copied: 페이지의 Meta Description 내용이 본문 그대로 제공되지 않습니다.
Flash Page Existence: 이 페이지에는 플래시 콘텐츠가 포함되어 있지 않습니다.
Error
<H1> Tag Empty: 문서 구조의 대표 제목 <H1> 태그가 제공되지 않았습니다. 중요한 키워드를 포함한 실질적인 헤드라인을 <h1> 태그로 표현하는 것이 좋습니다. 1~2개의 중요한 키워드를 포함하여 작성하는 것을 권장합니다.
(4) 성능
PASS
Compression: 압축 사용(네트워크를 통해 전송되는 용량 감소). 압축이 사용 설정되어 있습니다.
Error
Optimize Images: 이미지를 최적화하여 줄일 수 있는 용량. 이미지의 형식을 적절하게 지정하고 압축하면 데이터 용량을 크게 줄일 수 있습니다.
(5) 모바일
PASS
플래시: 플래시가 사용되지 않았습니다.
UX 품질 진단 요약
3. 안철수 국민의당 후보
사이트 주소: http://ahncs.kr/
전체 점수: SEO - 74점, 접근성 - 80점, 성능 - 87점
안철수 후보의 공식 홈페이지 주요 화면(1) 사용성
PASS
텍스트로 구성된 행의 길이가 최대 65자 이하로 구성되어 있는지
말풍선의 내용이, 말풍선의 주체가 되는 대상의 내용과 중복되지 않는지
Error
(7곳) 페이지 내에서, 링크나 버튼을 클릭할 때 새 창으로 열리는 수행에 대한 예측을 할 수 있는가
(2) 접근성
PASS
특정 장치에 의존적인 콘텐츠: 시각 및 운동 장애 환경에서 마우스를 사용할 수 없을 때에도 키보드만으로 웹 콘텐츠 기능을 이용하는데 문제가 없습니다.
Error
자동으로 재생되는 소리 제어: (1곳) 3초 이상의 음성이 자동으로 재생되어 시각 장애 환경에서 화면 낭독기로 웹 콘텐츠에 접근했을 때 혼란이 발생합니다. 자동 재생 콘텐츠는 시작 부분에서 제어할 수 있어야 합니다.
(3) SEO
PASS
Flash Page Existence: 이 페이지에는 플래시 콘텐츠가 포함되어 있지 않습니다.
Disabled Contents at Mobile OS: 모바일 OS에서 동작하지 않는 mp3, flash 파일 등이 제공되지 않습니다.
Error
HTML Sitemap: 페이지 내에 사이트맵 콘텐츠가 제공되지 않습니다. 사이트의 모든 페이지 또는 가장 중요한 페이지에 대한 링크가 있는 간단한 사이트맵 페이지가 효과적입니다. 검색엔진 웹 크롤러는 이 파일을 읽고 사이트를 더 지능적으로 크롤링하게 됩니다.
(4) 성능
PASS
Minigy HTML: HTML 축소 가능한 용량. HTML이 축소되었습니다.
Minify CSS: CSS 축소 가능한 용량. CSS가 축소되었습니다.
Error
Render-Blocking Files: 스크롤 없이 볼 수 있는 콘텐츠에서 렌더링을 차단하는 자바스크립트 및 CSS. 페이지에 차단 스크립트 리소스 4개 및 차단 CSS 리소스 2개가 있습니다. 따라서 페이지 렌더링이 지연됩니다.
(5) 모바일
PASS
플래시: 플래시가 사용되지 않았습니다.
UX 품질 진단 요약
4. 유승민 바른정당 후보
사이트 주소: http://www.ysm21.com/
전체 점수: SEO - 68점, 접근성 - 84점, 성능 - 80점
유승민 후보의 공식 홈페이지 주요 화면(1) 사용성
PASS
버튼에 접근하거나 클릭했을 때 디자인 인터랙션을 제공하는지
텍스트로 구성된 행의 길이가 최대 65자 이하로 구성되어 있는지
Error
(4곳) 버튼/링크를 클릭하기 전 다음 수행 동작 방식을 예측할 수 있는 요소를 제공하는지
(2) 접근성
PASS
주 언어 명시: 시각 장애 환경에서 화면 낭독기로 웹에 접근했을 때, 주 언어가 명시되어 있어 해당 언어에 알맞게 출력되고 콘텐츠의 이해가 수월합니다.
Error
W3C Validation: (중복으로 제공된 ID 속성값 14곳) W3C 명세에 맞지 않는 마크업 코드가 제공되고 있습니다. 명세에 맞지 않는 마크업으로 인해 브라우저의 잘못된 해석을 야기할 수 있고, 모든 사용자 환경에서 동일한 콘텐츠 제공을 보장할 수 없습니다.
(3) SEO
PASS
Title Tag Used Twice: 페이지 내에 Title 태그가 중복되지 않습니다.
Image File Name Too Long: 이미지 파일명(src 속성값)의 문자열이 150 글자를 초과하지 않습니다.
Error
Meta Description Length: Meta Description 값의 길이가 존재하지 않거나, 너무 길어 조정이 필요합니다.
(4) 성능
PASS
Prioritize the content: 표시되는 콘텐츠의 우선순위 지정. 스크롤 없이 볼 수 있는 콘텐츠의 우선순위가 올바르게 지정되었습니다.
Redirection: 방문 페이지 리디렉션 사용 여부. 페이지에 리디렉션이 없습니다.
Error
Server response time: 서버 응답 시간의 최적화. Google 테스트에서 서버가 0.59초 후에 응답했습니다.
(5) 모바일
PASS
플래시: 플래시가 사용되지 않았습니다.
UX 품질 진단 요약
5. 심상정 정의당 후보
사이트 주소: http://www.minsim.or.kr/xe/
전체 점수: SEO - 72점, 접근성 - 75점, 성능 - 40점
심상정 후보의 공식 홈페이지 주요 화면(1) 사용성
PASS
버튼에 접근하거나 클릭했을 때 디자인 인터랙션을 제공하는지
Error
(8곳) 버튼/링크를 클릭하기 전 다음 수행 동작 방식을 예측할 수 있는 요소를 제공하는지
(2) 접근성
PASS
포커스 시각화: 키보드나 마우스를 통해 포커스를 받은 부분을 시각적으로 인지 가능합니다.
콘텐츠 블록 제목: 적절한 제목 요소로 페이지의 주고를 탐색하고 이해할 수 있습니다.
Error
이미지의 대체 텍스트: (대체 텍스트 미제공 8곳) 시각 장애 환경에서 화면 낭독기를 통해 텍스트가 아닌 콘텐츠를 바르게 인식할 수 없습니다. 텍스트가 아닌 콘텐츠는 원래 제공하고자 하는 정보 그대로 대체 텍스트를 제공해야 합니다.
(3) SEO
PASS
URL Parameters Too Many: 이 페이지의 URL에서 parameter가 노출되지 않습니다.
Robots.txt File Existence: Robots.txt 파일이 사이트의 루트 디렉터리에 존재합니다.
Error
Text/HTML Ratio: 이 페이지에 포함된 Text Contents의 비율이 너무 적거나 높아 조정이 필요합니다.
(4) 성능
PASS
Prioritize the content: 표시되는 콘텐츠의 우선순위 지정 스크롤 없이 볼 수 있는 콘텐츠의 우선순위가 올바르게 지정되었습니다.
Compression: 압축 사용(네트워크를 통해 전송되는 용량 감소). 압축이 사용 설정되어 있습니다.
Error
Optimize Images: 이미지를 최적화하여 줄일 수 있는 용량. 이미지의 형식을 적절하게 지정하고 압축하면 데이터 용량을 크게 줄일 수 있습니다.
(5) 모바일
PASS
플래시: 플래시가 사용되지 않았습니다.
UX 품질 진단 요약
이상, 제19대 대통령 선거 후보 홈페이지의 UX를 시멘틱마인으로 자동 분석한 결과였습니다.
*본 점수는 각 후보자의 사이트 코드를, 4Grit가 연구한 UX품질 평가 기준에 따라 분석한 결과입니다.
실제와 편차가 있을 수 있는 점 양해바랍니다.
여러분의 사이트도 자동으로 분석할 수 있습니다.
URL 한 줄 입력이면 분석이 완료되니 지금 바로 시작해보세요!
https://www.semanticmine.com/#/
