참 쉽죠? warning.or.kr 디자인을 바꿔보자

노동요로 늘 애용하던 그루브샤크가 차단되면서 난데없이 불법,유해 정보 차단 안내 사이트(warning.or.kr) 를 접하는 일이 많아졌습니다. 그렇습니다. 모두들 잘 아는 이 사이트 말입니다.

불법,유해 정보 차단 안내 사이트란?

이 사이트는 보통 포르노사이트나 북한 사이트. 또는 도박 사이트에 방문했을 때 뜨는 사이버경찰청 & 방통심의위의 차단 페이지입니다. 대한민국 정부 기관 중 누가 이 페이지를 운영하는지에 대해서는 법률에 정확히 명시되어있지 않지만, 사이버경찰청과 방통심의위 관할이고 방통위 설치법률을 근거로 하고 있다는 내용은 사이트에 기재되어 있습니다.

DNS 도메인 차단, IP 차단, 그리고 DPI(Deep Packet Inspector = 데이터 패킷을 모두 열어보아 분석한 뒤 특정 URL이나 요청에 대해서만 차단할 때 활용되는 기술) 등을 통해 사이트 차단이 이루어지고 있으며 관련 법규는 ‘차단 대책을 마련해야 한다’ 와 같은 포괄적 규정으로 마련되어 있습니다. 법이 그러하고 나라가 차단하겠다는데 이의를 제기할 생각은 없습니다.

사실 굳이 따지자면 ‘차단 대책을 마련해야 한다’ 같은 포괄적 규정으로 말미암아 DPI와 같이 정보인권을 침해한다거나 망중립성을 해친다거나 그루브샤크 사례와 같이 민사다툼에 국가가 개입한다거나 하는 것이 옳은 것이냐는 등의 쟁점들이 있긴 합니다. 일단 그건 재껴두겠습니다. 제가 이 사이트에 신경이 곤두서기 시작한 건 다름 아닌 칙칙한 디자인 때문이었습니다.

파밍사이트 차단페이지와 달리 옛날옛적에 만들어진 사이트인지라 영 디자인이 마음에 들지 않았습니다. 소스를 열어보니 웹접근성이고 뭐고 아무것도 없는 테이블 레이아웃 코딩이었고, 폰트도 어디서 가져다 쓴 건지 영 칙칙하기 그지없었죠. 게다가 배색을 보세요. 파란색 배경에 빨간 글씨 비슷한 채도에 밝기라니 배색의 기본도 갖추고 있지 않은 정말 이상한 디자인이었습니다. 굴림체 간판을 보는 것만 같은 불편함이 WARNING이라는 글자보다 더욱 저의 신경을 건드렸습니다.

디자인을 바꿔보자

그래서 디자인을 바꾸어보기로 마음먹었습니다. 드리블닷컴의 리디자인 도전이나, 현대차 BX를 심심해서 그려보았다가 한바탕 난리를 겪었던 시원한냉면님 같은 마음으로 말입니다. 가볍게 구경해보세요.

(위에서 보셨던) 기존 사이트는 경고메시지를 이미지에 통째로 넣어버리고, 폰트도 정체를 알 수 없는 폰트로 찌그러뜨려 영 보기 흉했습니다. 2013년의 화두였던 웹표준/접근성도 고려하여 과감하게 이미지 내용을 텍스트로 꺼내보았습니다.

파란색 배경은 아마도 경찰의 기본 아이덴티티인 파란색에서 따온 것으로 여겨집니다. 우리는 파란색 간판을 보면 보통 경찰서를 떠올리고, 파란색 띠가 그려진 차량을 보면 다간 경찰차를 떠올리죠. 이렇게 말입니다.

헌데 경고메시지는 파란색 바탕에 빨간색입니다. 쉽지 않은 조합이죠. 이 색상을 유지한 채로 가독성을 확보하기 위해 채도 명도 밝기를 이래저래 바꿔봤습니다.

자.

바꿔본 디자인은 이렇습니다.

새로 디자인한 warning.or.kr (by rainygirl) — http://warning.coroke.net

배경에 깔아놓은 저 캐릭터는 2006년 부임된 경찰청장에 의해 일찍이 폐기되었으나 지금까지도 사랑받고 있는, 포돌이 포순이로 불리는 경찰의 옛 마스코트입니다. 사실 우리에게는 ‘잡았다 요놈’ 짤로 더 잘 알려졌습니다. 여하튼 이 짤만큼이나 불법,유해 정보 차단 안내 사이트에 어울리는 짤은 없다고 판단하였는데, 어찌 되었든 좀 더 미려하고 의미전달이 가능한 이미지를 배경으로 깔아둔다면 칙칙한 느낌을 벗어날 수 있으리라 생각하였습니다.

진한 파란색 영역 아래에 흰색 바탕의 표 역시 세련되지 못한 배색으로 여겨져 과감히 어두운색 배경으로 바꾸고, 표 역시 짝수 홀수 행간 색상을 구별 지어 가독성을 높여보았습니다. 이의신청 안내는 문의연락처와 구분해야 하니 더 어두운 바탕으로 구성하였습니다. 글자 모두 이미지에 때려 박지 않고 실제 텍스트로 꺼내두었습니다.

폰트는 공개폰트인 나눔고딕을 기본으로 걸고, 나눔고딕이 없을 때엔 맥과 윈도우 OS 기본 폰트인 애플산돌고딕네오와 맑은고딕이 적용되도록 함께 걸어두었습니다. 모바일시대이니 미디어 쿼리(media query)로 분기하여 모바일 브라우저에서도 잘 뜨도록 구성하였습니다. 반응형 웹(Responsible Web)까지는 바라지 않더라도 모바일에서 컨텐츠가 으깨지지는 말아야 합니다.

색깔과 폰트만 바꾸었는데도 훨씬 가독성이 좋아졌습니다. 의미전달도 명확해졌습니다. 대한민국 정부가 저렇게 디자인을 바꾸리라고는 0.001%도 기대하지 않지만. 어쨌든 이전보다는 나아보입니다.

칙칙한 우리나라 관공서 사이트 디자인

칙칙한 관공서사이트 디자인은 외주하청 발주 위주로 사이트를 우후죽순 만들면서 생겨난 일입니다. 디자인 가이드도, 사이트 운영 철학도 정립되어있지 않은 상황에 난데없는 정부 3.0 같은 구호까지 쏟아져나오고 있죠. 한심하게 생각하며 정부가 하는 일이 그렇지 하고서 그냥 넘길까 했다가, 곰곰이 생각해보니 이건 구조적인 문제였습니다.

불법,유해 정보 차단 안내 사이트로 상징되는 ‘칙칙한 관공서 사이트 디자인’, 액티브엑스 의존과 공인인증서 강요로 대표되는 ‘땜빵식 정보통신정책’, 이들 모두, 우리가, 특히 정부가 ‘웹’을 어떻게 활용하고 어떻게 가꾸어갈지에 대한 철학, ‘디자인’을 어떻게 활용하고 어떻게 가꾸어갈지에 대한 철학이 없는 상태에서 난개발 아파트들처럼 사이트개발을 마구 발주한 결과입니다. 게다가 정부의 정보통신정책을 한데 쥐고 갈 콘트롤타워가 없어진 지 6년째이니 더더욱 알아서들 저마다의 SI 발주로 제각각의 사이트가 생겨나고 말입니다.

다른 나라의 공공기관 웹사이트 가이드라인

다른나라는 어떻게 하고 있을까요? 참고할만한 자료를 소개합니다.

오스트레일리아 – 웹 가이드: 오스트레일리아 정부의 웹사이트 가이드입니다. 정부기관 사이트의 브랜드 규정, 도메인 정책, 보안, 사용성 테스트와 같은 규정은 물론 아카이빙 정책, 오래된 콘텐츠에 대한 접근성 유지와 같은 내용도 명시해두고 있습니다. 부처구조조정이 이루어지면 이전 데이터를 깡그리 날리는 한국과 비교되는 부분이기에 눈물이 날 정도입니다.
미국 – 사용성 가이드라인: 미국의 사용성 가이드라인은 UX에 대한 개념정립부터 시작합니다. 장애인 접근성은 물론 사이트 개발 프로세스까지 모두 정립해두었습니다. 정부기관이 갖추어야 할 가이드라인 문서의 교본으로 평가할만합니다.
영국 – 정부 디지털 서비스 디자인 원칙: 대한민국 정부가 디지털 정부에서 앞서나간다는 둥의 선전을 하고 있지만 사실 영국 gov.uk만큼 잘 만들어진 사이트는 없지요. 영국 정부 디지털 서비스 디자인 가이드를 만나보세요. 사이트 설계로 보든 행정서비스 관점에서 보든 그 바탕에 깔려 있는 철학은 매우 중요합니다. (한글 번역본)

말이 필요없습니다. 개발자 기획자 디자이너 등 IT 업계 종사자뿐만 아니라, 특히, 정부 3.0 주창하는 분들은 꼭 이들 문서를 정독했으면 하는 바램입니다. 불법,유해 정보 차단 안내 사이트 디자인 한번 바꿔보겠다고 했다가 이야기가 여기까지 샜네요. 여러분도 리디자인에 도전해보세요!

보너스

기왕 바꿔본 거, 내친김에, 많은 사람들이 상상하듯 국내 최대 트래픽 사이트인 불법,유해 정보 차단 안내 사이트에 ‘광고’를 붙이면 큰돈을 거머쥐지 않겠느냐는 상상을 한번 실현해보기로 했습니다. 포르노사이트에 가까운 유수 언론사 사이트의 광고 배너를 끌어다가 달아보았습니다.