UX 방법론 & 산출물

화면을 그리기 전에 해야 하는 작업입니다. IA 없이 화면부터 그리면 나중에 "이 메뉴가 왜 여기 있죠?" 하고 전부 뒤집게 됩니다. 외주에서 IA 단계를 건너뛰자는 요구가 많은데, 여기서 아낀 시간은 뒤에서 3배로 돌아옵니다.

사이트맵의 페이지 개수가 곧 견적의 기준이 되는 경우가 많습니다. 계약 전에 확정하고, 추가되는 페이지는 별도 협의 대상임을 명시하세요.

한국 실무 용어입니다. "2뎁스까지만 해주세요"는 클릭 두 번 안에 도달하게 만들라는 뜻입니다. 뎁스가 깊어질수록 도달률이 급격히 떨어집니다.

정상 흐름만 그리면 절반만 한 것입니다. 실패했을 때, 취소했을 때, 중간에 나갔다 돌아왔을 때의 분기까지 그려야 개발이 헤매지 않습니다.

일부러 못생기게 만드는 것입니다. 예쁘게 만들면 클라이언트가 색과 폰트 얘기를 하기 시작해서 정작 구조 논의가 안 됩니다. "이건 디자인이 아니라 구조 확인용입니다"라고 미리 말해두세요.

와이어프레임과 프로토타입 사이 단계입니다. 클라이언트에게 보여주는 "시안"이 보통 목업입니다. 목업을 보고 "이거 이제 다 된 거죠?"라는 오해가 자주 생기니 미리 설명하세요.

와이어프레임 / 목업 / 프로토타입 3형제 구분이 외주 계약에서 매우 중요합니다. "프로토타입까지 포함"과 "시안까지 포함"은 작업량이 완전히 다릅니다. 계약서에 어디까지인지 명시하세요.

"이 문서에 없으면 안 만든 것"이 되는 기준 문서입니다. 개발자는 이걸 보고 만들고, QA는 이걸 보고 검수합니다. 애매하게 적으면 반드시 분쟁이 납니다.

"디스크립션 달아주세요"는 화면 그림만으로는 부족하니 동작을 글로 써달라는 뜻입니다. 좋은 디스크립션은 "예쁘게 배치"가 아니라 "입력값이 2자 미만이면 버튼 비활성"처럼 검증 가능한 문장입니다.

"시안 3개 주세요"의 의미를 반드시 확인하세요. ①완전히 다른 컨셉 3개인지 ②같은 컨셉의 색상 변형 3개인지에 따라 작업량이 3배 차이 납니다. 그리고 수정 횟수(보통 2~3회)를 계약서에 명시하지 않으면 무한 수정에 빠집니다.

"20~40대 여성"은 페르소나가 아닙니다. 그건 그냥 인구통계입니다. "매일 아침 출근길에 5분 안에 주문을 끝내고 싶은 32세 직장인"처럼 구체적이어야 설계 판단에 쓸 수 있습니다.

화면 단위가 아니라 서비스 밖까지 포함합니다. 광고를 본 순간, 배송을 기다리는 시간, 고객센터 통화까지 포함됩니다. 화면만 고쳐서는 안 되는 문제를 발견하는 도구입니다.

"불편하다"는 감상이 아니라 관찰 결과여야 합니다. "가입이 불편하다"가 아니라 "가입 3단계 중 2단계에서 62%가 이탈한다"처럼 근거가 붙어야 설득력이 생깁니다.

5명만 테스트해도 문제의 약 85%가 발견됩니다(닐슨). 많은 사람을 모을 필요가 없습니다. 중요한 건 도와주지 않고 지켜보는 것입니다. 옆에서 "거기 누르시면 돼요"라고 알려주는 순간 테스트는 의미를 잃습니다.

닐슨의 10가지 사용성 원칙이 사실상 표준 체크리스트입니다. 사용성 테스트보다 빠르고 싸지만, 실제 사용자의 예상 밖 행동은 못 잡습니다. 둘을 함께 쓰는 게 좋습니다.

충분한 표본이 모여야 의미가 있습니다. 하루 방문자 100명인 사이트에서 A/B 테스트는 대개 무의미합니다. 그리고 한 번에 하나만 바꿔야 원인을 알 수 있습니다.

가장 많이 떨어지는 단계를 찾는 게 목적입니다. 화면을 예쁘게 만드는 것보다 이탈 구간 하나 고치는 게 매출에 훨씬 큰 영향을 줍니다.

클라이언트가 성과를 말할 때 쓰는 언어입니다. 디자인 제안을 이 지표로 설명할 수 있으면 설득력이 완전히 달라집니다. "더 예뻐집니다"보다 "장바구니 이탈을 줄일 수 있습니다"가 훨씬 강합니다.

외주 범위 협상의 핵심 단어입니다. 요구가 계속 늘어날 때 "그건 MVP 이후로 미루고, 먼저 출시해서 반응을 보시죠"라고 제안하면 범위를 지킬 수 있습니다. MVP는 대충 만든 것이 아니라 적게 만든 것입니다.

실무에서는 대부분 시그니파이어와 섞어 씁니다. "어포던스를 준다"는 말은 사실 "누를 수 있어 보이게 만든다"는 뜻이고, 그건 엄밀히 시그니파이어입니다. 알고만 있으면 됩니다.

도널드 노먼이 어포던스와 구분하려고 만든 말입니다. "할 수 있는 것"(어포던스)과 "할 수 있어 보이는 것"(시그니파이어)이 어긋나면 사용자는 헤맵니다. 눌리는데 안 눌려 보이는 버튼이 그 예입니다.

사용자의 기대를 거스르면 아무리 잘 만들어도 불편하게 느껴집니다. 장바구니 아이콘이 우측 상단에 있는 이유, 로고를 누르면 홈으로 가는 이유가 모두 멘탈 모델입니다. 창의성을 발휘할 곳이 아닙니다.

선택지가 많고, 용어가 어렵고, 규칙이 일관되지 않으면 부하가 올라갑니다. "생각하게 만들지 마라(Don't Make Me Think)"가 이 분야의 고전적 원칙입니다.

메뉴를 줄이자고 설득할 때 쓰는 근거입니다. 다만 무조건 줄이는 게 답은 아니고, 잘 분류해서 한 번에 보이는 개수를 줄이는 게 핵심입니다.

버튼 크기와 위치를 정하는 과학적 근거입니다. 모바일에서 중요한 버튼을 화면 아래(엄지가 닿는 곳)에 두는 이유, 실수하면 안 되는 "삭제" 버튼을 다른 버튼과 떨어뜨려 놓는 이유가 이것입니다.

"왜 굳이 새로운 방식을 만들면 안 되나요?"에 대한 답입니다. 사용자는 당신의 사이트보다 다른 사이트에서 훨씬 많은 시간을 보냅니다. 익숙한 패턴을 따르는 게 대부분의 경우 정답입니다. 차별화는 구조가 아니라 콘텐츠와 비주얼에서 하세요.

"왜 이만큼 띄웠나요?"에 대한 이론적 근거입니다. 가까이 있으면 한 묶음으로 보입니다(근접성). 라벨과 입력칸 사이를, 다른 항목과의 간격보다 좁게 두어야 짝으로 인식됩니다.

중요한 것을 왼쪽 위와 첫 두 줄에 배치하라는 근거입니다. 사용자는 읽지 않고 훑습니다. 긴 문장보다 짧은 소제목과 목록이 훨씬 잘 읽힙니다.

디자인을 안 바꾸고도 성과를 크게 올릴 수 있는 영역입니다. "확인"을 "무료로 시작하기"로 바꾸는 것만으로 전환율이 달라집니다. 오류 메시지는 ①무슨 일이 났고 ②어떻게 하면 되는지를 담아야 합니다.

설명을 많이 하는 게 온보딩이 아닙니다. 튜토리얼 5장을 넘기게 하는 것보다, 첫 화면에서 바로 뭔가 해보게 만드는 게 훨씬 효과적입니다. 그리고 건너뛰기는 항상 있어야 합니다.

남용하면 최악입니다. 처음 들어왔는데 5개를 연속으로 넘기게 하면 아무도 안 읽습니다. 정말 발견하기 어려운 기능 1~2개만 짚고, 다시 보기 경로를 제공하세요.

한국에서도 전자상거래법 개정으로 규제 대상입니다. 숨겨진 자동결제, 해지가 어려운 구조, 거부 버튼을 흐리게 만드는 것 등이 해당합니다. 클라이언트가 요구해도 법적 위험을 설명하고 대안을 제시하는 게 맞습니다.