사용자 경험을 위한 판단력
사용자 경험을 위한 판단력 · 2 min
AI가 구현 속도를 높이면서, 디자인이 차별화 요소가 됩니다. 이 레슨에서는 AI와 작업할 때 가장 중요한 UX 원칙, "보기 좋게 만들어줘"가 왜 쓸모없는 결과를 낳는지, 그리고 동료에게 해줄 법한 비평과 AI가 실행할 수 있는 설명 사이의 간극을 좁히는 방법을 다룹니다.
한국어 대본
- 00:00구현 속도가 빨라질수록 디자인과 사용자 경험은 더욱 중요해집니다.
- 00:11디자이너가 될 필요는 없지만, 좋은 경험을 알아보고
- 00:15그에 맞게 명세를 작성하며, 그 방향으로 반복 개선해야 합니다.
- 00:18여기에서 길잡이가 될 몇 가지 원칙이 있습니다.
- 00:20첫째는 명확성입니다.
- 00:21사용자가 제품이 무엇을 하는지 또는 어떻게 시작하는지 알 수 없다면 떠납니다.
- 00:26명확성이란 사람들의 멘탈 모델을 존중하면서 형태와 기능을 통일하는 것입니다.
- 00:30사용자는 다른 소프트웨어와 세상에서 형성된 기대를 가지고 들어옵니다.
- 00:35단순하게 유지하고 인터페이스를 사용자가 알아보는 개념에 맞추세요.
- 00:39환자가 대기 시간을 확인하는 경우 다른 상태 확인기와 똑같이 작동하리라 기대합니다.
- 00:43둘째는 계층 구조와 점진적 공개입니다.
- 00:46사람들이 훑어보고 필요한 정보를 찾기 쉽게 만드세요.
- 00:49사용자를 압도하지 마세요.
- 00:51텍스트 크기와 굵기를 사용해 좋은 헤더를 만드세요.
- 00:54불필요한 요소의 양을 최소화하고, 정보를 한 공간에 모두 욱여넣는 대신 필요할 때 필요한 정보를 찾게 하세요.
- 01:02셋째, 접근성은 있으면 좋은 요소가 아니라 기본 조건입니다.
- 01:06스크린 리더 호환성, 색상 대비, 키보드 탐색을 갖춰야 합니다.
- 01:09매번 AI에게 이를 명시적으로 요청하고 검증할 테스트 케이스를 만드세요.
- 01:15넷째, 피드백과 반응성입니다.
- 01:17사용자가 무언가를 하면 인터페이스는 이를 인지했다는 신호를 보내야 하며, 고장 났을지도 모른다고 사용자가 의심하게 해서는 안 됩니다.
- 01:23로딩 상태, 확인 메시지, 다음에 무엇을 해야 하는지 설명하는 오류 메시지는
- 01:29모두 단순하고 인간적인 언어로 제공되어 신뢰를 쌓는 데 도움이 됩니다. 보기 좋게 만드는 것과 좋은
- 01:35경험 사이의 간극은 엄청납니다. 보기 좋게 만들어 달라는 것은 바람일 뿐입니다. 페이지에서 대기 시간을 가장 큰 글자로 표시하고,
- 01:41상태를 나타내는 색상은 하나만 사용하며, 새로 고침 시간을 눈에 띄게 표시해 환자가 숫자가 얼마나 오래된 것인지 알 수 있게 하는 것은
- 01:46실행 가능하고 강력한 설명입니다.
- 01:51이것은 설명과 판별력이 함께 작동하는 모습입니다. 경험을 정확하게 설명하면 AI가 구현하고, 결과를 평가합니다.
- 01:58돌아온 결과를 의도한 것과 비교합니다. 차이를 설명하고 반복합니다. 연습문제에서 확인하게 되겠지만,
- 02:04동료에게 제공할 비평과 AI에 필요한 설명은
- 02:09같은 문서가 아닙니다. ‘복잡해 보입니다’는 타당한 비평이지만, AI에게는 쓸모없는 지시입니다.
- 02:16디자인 리터러시의 일부는 자신의 취향을
- 02:19실행 가능한 것으로 변환하는 방법을 배우는 것입니다.
- 02:21이제 실제로 적용해 보겠습니다.
UX 랩: 네 가지 원칙 적용하기
각 탭은 AI가 기본적으로 생성하는 흔한 UX 문제가 있는 음식 배달 화면을 보여줍니다. 요소 위에 마우스를 올려 무엇이 잘못되었는지 확인한 다음, Show Fix를 클릭하여 올바르게 구현하는 방법을 확인하세요.
원칙 1 / 4
명확성
모든 요소는 그 목적을 즉시 전달해야 합니다. 사용자가 버튼이 무엇을 하는지, 필드가 무엇을 의미하는지 추측하게 해서는 안 됩니다.
←앱⋮
버거12.00
감자튀김4.50
합계16.50
제출핵심 요약
- 구현이 빠를 때, 경험이 차별화 요소가 됩니다. 디자인 문해력은 핵심 빌더 역량입니다.
- "보기 좋게 만들어줘"는 바람일 뿐, 스펙이 아닙니다. 함수를 설명할 때와 같은 정밀함으로 경험을 설명하세요.
- AI는 기본적으로 접근성을 제대로 처리하지 않습니다. 명시적으로 지정한 다음, 결과물을 감사하세요.
- 좋은 비평과 실행 가능한 AI 설명은 서로 다른 산출물입니다. 둘 사이를 번역하는 법을 배우세요.
실습
클리닉 대기 시간 프로젝트, 3부
클리닉 앱을 위한 디자인 스펙 — 사용자 흐름, 정보 계층 구조, 상호작용 패턴 — 을 작성한 다음, 그 스펙에 맞춰 AI로 다시 구축하세요. 결과를 비평하세요: AI가 정확히 해낸 부분은 어디이고, 기술적으로는 맞지만 경험적으로는 밋밋한 부분은 어디인가요? 간단한 접근성 감사를 실행하고 AI가 놓친 부분을 문서화하세요.
- 명확성 및 멘탈 모델 — 결과물이 클리닉 관리자가 알아볼 수 있는 언어와 패턴을 사용하나요?
- 정보 계층 구조 — 가장 중요한 정보가 사용자가 가장 먼저 보는 것인가요?
- 접근성 — 색상 대비, 스크린 리더, 키보드 탐색 검사를 통과하나요?
- 피드백 및 오류 처리 — 인터페이스가 사용자 행동을 인지하고, 문제가 발생했을 때 무엇을 해야 하는지 설명하나요?
레슨 회고
- 디자인 스펙 중 인터페이스가 무엇을 하는지를 설명하는 부분과 사용할 때 어떤 느낌이어야 하는지를 설명하는 부분의 비율은 어떻게 되나요?
- 접근성 검사를 실행한 후, 처음부터 접근성을 염두에 두고 구축했나요, 아니면 마지막에 추가했나요?
다음 단계
여러분은 클리닉 대기 시간 체커를 코드 관점과 UX 관점 모두에서 살펴보았습니다. 다음 레슨에서는 가장 어려운 질문을 다룰 것입니다: 자신이 만든 것을 실제로 책임진다는 것은 무엇을 의미할까요?