Design Hacking과 웹사이트 리디자인

Design Hacking은 pxd 블로그에서 다루는 시리즈로, 실제 서비스 중인 타사 웹사이트의 UX 문제를 관찰한 뒤 jQuery 등 클라이언트 스크립트로 DOM을 직접 조작해 개선안을 즉석에서 구현·검증하는 방식이다. 회사 코드베이스에 접근하거나 전체 리디자인을 거치지 않고도, 브라우저에서 실행되는 스크립트만으로 대안 UX를 눈으로 확인할 수 있다는 점이 핵심이다.

시리즈를 시작한 첫 글은 이 방법론을 UI 디자이너의 의도적 수련(deliberate practice) 도구로 제안한다. 스포츠 선수와 달리 UI 디자이너는 결과물이 개발 구현을 거쳐야만 사용자에게 도달하기 때문에 피드백 주기가 길고, 에이전시 업무 구조상 사용자 피드백을 얻을 기회 자체가 제한적이다. 저자는 이를 보완할 수련법으로 세 가지 원칙을 제시한다. 첫째, 완전히 새로운 것을 만들기보다 이미 검증된 기존 서비스의 한 화면·한 기능을 좁게 제한해 개선해야 변수가 통제되어 유의미한 피드백을 얻을 수 있다. 둘째, 페이퍼 프로토타입에 그치지 않고 실제 데이터로 동작하는 프로토타입을 만들어야 하며, 이를 위해 코딩을 (체계적으로 배우기보다) 실용적 목적으로 익힐 것을 권한다. 셋째, 사용자가 아닌 디자이너나 개발자가 스스로 사용자가 되어 자신의 불편을 해결하는 디자인 위기지학(자신을 위한 배움) 접근을 취하면, 대상 퍼소나가 아니거나 잠재적 니즈를 아직 의식하지 못하는 사용자층의 관점을 연습하는 데 도움이 된다. 도구로는 크롬 개발자 도구와, 특정 사이트에 CSS·JavaScript 수정 규칙을 항상 적용해 저장할 수 있는 styler 확장이 소개된다.

이 원칙을 실제로 적용한 첫 사례는 다음(Daum) 금융 사이트(finance.daum.net)의 타이포그래피 개선이다. 국내 대형 포털은 한글 웹폰트 용량 문제로 기본 서체를 지정하기 어려워 여전히 돋움체를 쓰는 경우가 많은데, 숫자가 많이 노출되는 금융 사이트에서는 arial 숫자 글리프의 획(예: 6과 9)이 둥글게 말려 8과 혼동되는 판독성 저하가 특히 두드러진다. 저자는 `font-family` 강제 지정으로 스포카가 lato를 커스텀한 스포카한산스로 교체하고, 주가 상승·하락을 나타내는 빨강·파랑 색상의 채도를 CSS로 낮춰 자극을 줄였다. 또한 `%` 같은 단위 기호를 `_{` 태그로 감싸 수치값보다 작고 흐리게 표시함으로써, 국제 단위 표기법상 기호 단위는 수치에 붙여 쓰되 시각적으로는 정보값(숫자)과 단위를 구분해 가독성을 높이는 후처리 스크립트를 jQuery로 구현했다.}

다음(Daum) 뉴스의 자동요약 기능을 사례로 삼은 글은 두 가지 설계 문제를 지적한다. 첫째, 자동요약을 마우스오버해야만 볼 수 있게 만든 인터랙션 방식이다. 초기에는 클릭, 이후에는 호버로 진입 장벽을 낮췄지만, 저자는 이 기능을 쓸 만큼 관심 있는 사용자는 애초에 버튼에 마우스를 옮기는 사소한 수고조차 귀찮아하는 성향을 지녔다고 지적한다. 대안은 처음부터 요약을 펼쳐서 보여주되, 사용자가 한 번이라도 요약을 펼치거나 닫으면 그 선호를 브라우저 로컬 DB에 저장해 이후에도 유지하는 방식이다. 이렇게 하면 요약을 원치 않는 사용자는 별다른 인지 비용 없이 스크롤해서 본문으로 넘어갈 수 있고, 요약을 원하는 사용자는 매번 호버할 필요가 없어진다. 즉, 기본값(default)을 인터랙션 뒤에 숨기지 말고, 사용자의 실제 성향에 맞춰 열어두되 개인화된 상태로 기억하는 것이 낫다는 원칙이다.

둘째, 다단(multi-column) 레이아웃이 독서 집중을 방해한다는 문제다. 넓은 화면에 여백이 남으면 광고나 인기 콘텐츠 링크 같은 부차적 요소를 채우고 싶어지지만, 이는 기사를 읽는 데 방해가 된다. 저자는 GoodUI가 가장 먼저 권고하는 원칙으로 "멀티컬럼을 사용하지 말 것"을 인용하며, 다양한 기능을 늘어놓기보다 주의를 분산시키지 않고 메인 콘텐츠에 집중하도록 만드는 것이 우선이라고 강조한다. 광고 수익과 직결되는 문제이기 때문에 완전한 해법 제시는 유보하지만, 네이버 뉴스처럼 광고를 본문 상단에 강제로 배치하는 방식과 적절한 절충안 사이에서 고민이 필요하다고 말한다.

구현은 `$(".article_view section").prepend($(".layer_summary"))`처럼 기존에 숨겨져 있던 요약 레이어(`.layer_summary`)를 본문 앞으로 이동시키고 "자동요약" 레이블을 붙이는 간단한 jQuery 스니펫으로 이루어지며, 코드는 CodePen에 공개되어 있다. 이런 방식은 실제 서비스 코드를 바꾸지 않고도 대안 UX를 브라우저에서 즉시 시연할 수 있어, 개선안을 말로 설명하는 대신 동작하는 형태로 보여주는 설득의 도구가 된다.

핵심 내용

Design Hacking: 서드파티 웹사이트를 대상으로 클라이언트 스크립트(jQuery 등)로 UX 개선안을 즉석 구현·시연하는 pxd 블로그 시리즈
시리즈의 취지: 결과물이 개발 구현을 거쳐야 사용자 피드백을 받는 UI 디자이너에게 의도적 수련의 도구를 제공
수련 원칙 3가지: (1) 검증된 기존 서비스를 좁게 제한해 개선, (2) 실제 데이터로 동작하는 프로토타입 제작, (3) 자기 자신을 사용자 삼는 디자인 위기지학
크롬 styler 확장으로 특정 사이트에 CSS/JS 수정을 항상 적용해 저장 가능
사례 1: 다음 금융의 스포카한산스 폰트 교체·색상 채도 조정·단위 기호(`_{`) 서브스크립트 처리로 숫자 가독성 개선}
진입 장벽이 있는 인터랙션(호버로만 노출)보다 기본으로 열어두고 사용자 선호를 로컬에 기억하는 편이 게으른 사용자 성향에 더 맞음
GoodUI 제1원칙: 멀티컬럼 레이아웃을 피하고 메인 콘텐츠에 대한 집중을 우선할 것
여백을 광고·인기 콘텐츠로 채우려는 유혹은 가독성·집중력을 해치는 트레이드오프를 수반
`.prepend()` 등 DOM 조작만으로 기존 사이트의 레이아웃 순서를 바꿔 대안 UX를 시연 가능

출처

[design hacking] 다음 뉴스 자동요약 바로 보기 — 2017-05-19, 無異
UI 디자이너의 위기지학, Design Hacking을 통해 코딩 배우기 — 2017-04-05, 無異

Design Hacking과 웹사이트 리디자인

핵심 내용

관련 개념

출처