UI·UX 입문: 화면보다 흐름부터

이 책에 담긴 경험

화면부터 만들었다가 질문을 바꾸다

처음에는 보기 좋은 화면을 먼저 그렸어요. 그런데 팀원에게 왜 이 화면이 필요한지 설명하려니 근거가 부족했습니다. 해결하려는 문제를 한 문장으로 적고, 실제 사용자가 어디에서 멈추는지 관찰한 뒤에야 화면을 고칠 방향이 보였어요. 이 책은 그때 배운 순서대로 UI와 UX를 구분하고, 추측을 확인 가능한 질문으로 바꾸는 과정을 담았습니다.

사용자가 지나가는 길을 먼저 그리다

문제를 정리한 다음에는 시작부터 완료까지 사용자가 밟는 단계를 종이에 적었습니다. 버튼이나 색을 고르기 전에 필요한 정보가 언제 보여야 하는지, 다음 행동을 알아볼 수 있는지 확인했어요. 복잡한 화면을 추가하기보다 흐름에서 빠진 단계와 불필요한 선택을 덜어내니 와이어프레임도 훨씬 명확해졌습니다.

보여주고 들으며 작게 고치다

와이어프레임을 완성본처럼 품고 있기보다 주변 사람에게 직접 써 보게 했습니다. 예상과 다른 곳에서 멈추는 장면을 보며 빈 화면, 로딩, 실패 안내도 흐름의 일부라는 걸 배웠어요. 한 번에 크게 바꾸지 않고 한 가지 문제를 고친 뒤 다시 확인하는 방식을 반복했습니다. 이 책의 마지막 장에는 그 작은 검증과 수정의 방법을 담았습니다.

이 경험이 필요한 순간

새 기능을 맡았는데 화면부터 그려야 할지, 사용자 문제부터 적어야 할지 막막할 때 꺼내 보세요. 회의에서 “이 버튼을 어디에 둘까?”라는 이야기만 반복되거나, 만든 화면을 설명할 근거가 부족할 때도 도움이 됩니다. 문제를 한 문장으로 정리하고 사용자가 지나갈 길을 그린 뒤, 실제 반응을 보고 고치는 순서를 함께 따라갈 수 있어요.

이 경험으로 줄일 시행착오

처음부터 완성도 높은 화면을 만들려고 시간을 쓰는 일을 줄일 수 있어요. 문제를 확인하지 않은 채 기능을 늘리거나, 팀의 추측을 사용자 사실처럼 받아들이는 실수도 피할 수 있습니다. 와이어프레임은 빠르게 생각을 맞추는 도구로 쓰고, 빈 화면·로딩·실패 상황까지 흐름에 포함해 보세요. 작은 검증을 반복하면 고쳐야 할 지점이 선명해집니다.

읽고 나면 할 수 있는 것

사용자의 문제를 한 문장으로 정의하고, 추측과 관찰을 구분할 수 있습니다. 목표까지 이어지는 사용자 흐름과 정보 순서를 먼저 그린 뒤 와이어프레임으로 팀과 대화할 수 있어요. 실제 사용 장면을 보며 빈 화면·로딩·실패 안내를 점검하고, 발견한 문제를 하나씩 고쳐 다시 확인하는 첫 실험도 시작할 수 있습니다.