피그마 상세 화면 검토법: 버튼 위치와 사용자 행동 흐름 확인하기
피그마 상세 화면 검토법: 버튼 위치와 사용자 행동 흐름 확인하기 피그마 상세 화면 검토법: 버튼 위치와 사용자 행동 흐름 확인하기 디자인 시안은 예쁜데 왜 사용자는 원하는 곳을 못 찾을까요. 답은 대부분 화면 안이 아니라 화면과 화면 '사이'에 숨어 있습니다. 상세 화면 리뷰 회의에서 흔히 벌어지는 장면이 있습니다. 컬러, 폰트, 여백을 30분 동안 이야기하고, 정작 사용자가 그 화면에서 무엇을 누르고 어디로 가는지는 5분 만에 "괜찮아 보이네요"로 끝나버리는 것이죠. 그런데 실제로 서비스 성패를 가르는 건 후자입니다. 버튼 하나의 위치, 그 버튼을 누른 다음 사용자가 어디로 이동하는지, 그 흐름이 자연스러운지가 전환율과 이탈률을 결정합니다. 이번 글에서는 피그마로 만든 상세 화면을 검토할 때 실무자가 실제로 확인해야 할 두 가지 축, 버튼 위치와 사용자 행동 흐름을 중심으로 점검 방법을 단계별로 정리합니다. 📌 목차 왜 비주얼 검토만으로는 부족한가 버튼 위치 검토, 세 가지 기준으로 나눠보기 시선이 먼저 도착하는 자리인가 엄지가 닿는 자리인가 경쟁하는 버튼은 없는가 사용자 행동 흐름 확인하기 클릭 동선을 화살표로 직접 그려본다 이탈 가능 지점을 미리 표시한다 되돌아오는 경로도 함께 그린다 행동 흐름을 문장으로 말해본다 검토 체크리스트 정리하며 상세 화면 리뷰 회의에서 흔히 벌어지는 장면이 있습니다. 컬러, 폰트, 여백을 30분 동안 이야기하고, 정작 사용자가 그 화면에서 무엇을 누르고 어디로 가는지는 5분 만에 "괜찮아 보이네요"로 끝나버리는 것이죠. 그런데 실제로 서비스 성패를 가르는 건 후자입니다. 버튼 하나의 위치, 그 버튼을 누른 다음 사용자가 어디로 이동하는지, 그 흐름이 자연스러운지...