UX는 이렇게 설계합니다 — 전환되는 사용자 흐름

UX 설계는 무엇부터 시작하나요?

저희는 포토샵이나 디자인 도구를 먼저 켜지 않습니다. 종이나 화이트보드에 사용자 흐름부터 그립니다. 방문자가 어디로 들어와서(랜딩), 무엇을 확인하고(탐색), 어디서 행동하는지(문의·구매)를 한 줄로 잇는 작업입니다. 예를 들어 "광고를 보고 들어온 사람 → 서비스가 뭔지 확인 → 가격이 맞는지 확인 → 사례를 보고 신뢰 → 문의" 같은 경로를 먼저 정합니다.

이 흐름이 정해져야 비로소 '화면이 몇 개 필요한가, 각 화면에 무엇이 들어가야 하는가'가 나옵니다. 흐름 없이 화면부터 그리면, 보기엔 멀쩡한데 방문자가 다음에 어디로 가야 할지 모르는 사이트가 됩니다. 흐름은 제작 전 단계인 기획과 맞물려 정해지는데, 그 과정은 기획은 이렇게 합니다에서 다룹니다.

저는 모든 화면을 그리기 전에, 방문자가 거치는 이 한 줄짜리 경로부터 벽에 붙여 놓고 시작합니다.

이 다섯 칸 중 어디서 사용자가 멈추는지가 보이면, 어떤 화면을 먼저 손봐야 하는지도 분명해집니다.

흐름 다음에 무엇을 하나요? — 와이어프레임

흐름이 나오면 와이어프레임을 그립니다. 색도 사진도 없는, 회색 상자와 글자만 있는 화면 뼈대입니다. 여기서 정하는 것은 딱 하나 — "이 화면에서 가장 중요한 게 무엇이고, 어디에 둘 것인가"입니다. 색과 사진이 없으니 디자인의 화려함에 속지 않고 구조만 보게 됩니다.

와이어프레임 단계에서 제목 위치, 버튼 위치, 정보 순서를 다 합의한 뒤에 비로소 시각 디자인으로 넘어갑니다. 이렇게 하면 "예쁘게 다 만들어 놨는데 버튼을 옮겨야 한다"는 값비싼 되돌리기를 줄입니다. 와이어프레임에서 합의된 구조를 실제 화면으로 옮기는 일은 UI는 이렇게 만듭니다에서 이어집니다.

첫 화면에서 가장 중요한 건 무엇인가요?

첫 화면의 목표는 단 하나, 3초 안에 이해시키는 것입니다. 방문자는 글을 처음부터 읽지 않습니다. 들어온 순간 "여기가 뭐 하는 곳이지? 나한테 도움이 되나?"를 빠르게 판단하고, 답이 안 보이면 바로 떠납니다. 그래서 첫 화면에는 세 가지를 함께 둡니다 — 무엇을 하는 곳인지 한 문장, 누구를 위한 것인지, 그리고 다음에 누를 버튼입니다.

여기서 흔한 실수가 '멋진 한 줄'에 욕심을 내는 것입니다. 감성적이지만 무슨 회사인지 알 수 없는 문구보다, 솔직하게 무엇을 해주는 곳인지 말하는 문장이 3초 싸움에서 이깁니다.

버튼(CTA)은 어디에, 어떻게 두나요?

버튼은 '눈에 잘 띄고, 누르기 쉬운 곳'에 둡니다. 휴대폰에서는 한 손으로 잡고 엄지로 조작하는데, 엄지가 편하게 닿는 영역이 화면 아래쪽 가운데(엄지존)입니다. 그래서 핵심 버튼은 화면 맨 위 구석이 아니라 손이 닿는 자리에 두거나, 스크롤해도 따라오는 형태로 둡니다.

또 한 화면에 '진짜 누르길 바라는 버튼'은 하나로 좁힙니다. 버튼이 다섯 개 있으면 방문자는 무엇을 눌러야 할지 고민하다 아무것도 안 누릅니다. 가장 중요한 행동(문의·견적) 하나를 눈에 띄게 하고, 나머지는 차분하게 둡니다. 선택지를 줄이면 행동이 늘어납니다.

문의 폼은 왜 짧아야 하나요?

문의 폼은 전환이 실제로 일어나는 마지막 관문이라, 여기서 사람을 가장 많이 놓칩니다. 이유는 단순합니다 — 칸이 많을수록 채우다 지쳐 떠나기 때문입니다. 그래서 저희는 입력 칸을 최소로 줄입니다. 당장 필요한 건 보통 연락 방법과 무엇이 궁금한지, 두세 개면 충분합니다. 주소·생년월일처럼 지금 굳이 안 받아도 되는 건 빼거나 나중에 받습니다.

줄이는 것 외에도 마찰을 없애는 장치를 둡니다. 어떤 칸이 필수인지 한눈에 보이게 하고, 잘못 입력하면 그 칸 옆에 무엇을 어떻게 고치면 되는지 바로 알려줍니다. "다 채웠는데 처음부터 다시"가 가장 큰 이탈 원인이라, 오류는 그 자리에서 친절하게 안내합니다.

저는 단계마다 사람이 멈칫하는 지점을 적어 두고, 그 옆에 해결책을 짝지어 점검합니다.

이렇게 마찰과 해결을 한 줄씩 맞춰 두면, 어디부터 고쳐야 전환이 살아나는지 헷갈리지 않습니다.

왜 모바일을 먼저 설계하나요?

대부분의 방문이 휴대폰에서 일어나기 때문입니다. 그런데도 큰 모니터에서 먼저 디자인하면, 넓은 화면을 채우려 정보가 늘어나고 그걸 좁은 화면에 욱여넣다 무너지기 쉽습니다. 그래서 저희는 좁은 화면을 먼저 설계합니다. 좁은 화면에서는 정말 중요한 것만 남길 수밖에 없고, 그 단단한 구조를 넓은 화면으로 키우는 편이 깔끔합니다.

모바일 우선은 단순히 '반응형으로 줄어든다'가 아니라, 작은 화면에서의 손가락 동선·읽는 순서·버튼 크기를 처음부터 기준으로 삼는다는 뜻입니다. 데스크톱은 그 위에 여유를 더하는 단계입니다.

접근성은 왜 UX의 일부인가요?

접근성은 '장애가 있는 분만을 위한 추가 작업'이 아니라, 모두에게 더 쉬운 사이트를 만드는 일입니다. 글자와 배경의 명도 차이를 충분히 두면 밝은 햇빛 아래 휴대폰에서도 잘 읽히고, 버튼을 키보드로도 누를 수 있게 하면 마우스를 못 쓰는 상황에서도 동작합니다. 이미지에 설명 텍스트를 넣으면 화면 낭독기를 쓰는 분도, 검색·AI도 그 이미지를 이해합니다.

즉 접근성을 지키면 더 많은 사람이 막힘없이 흐름을 끝까지 가고, 그게 곧 전환으로 이어집니다. 저희는 접근성을 마지막 점검이 아니라 와이어프레임 단계부터 기준으로 넣습니다.

그래서 '전환되는 UX'란 결국 무엇인가요?

한마디로 방문자가 다음에 할 일을 늘 알 수 있고, 멈칫하는 지점이 없는 흐름입니다. 예쁜 화면은 그 위에 얹는 것이지, 그것만으로 문의가 늘지는 않습니다. 저희가 화면 하나하나를 볼 때 던지는 질문은 항상 같습니다 — "여기서 사용자는 다음에 무엇을 하지? 그게 분명한가?"

이 흐름 설계는 제작·디자인·GEO와 한 팀에서 맞물려 돌아갑니다. 실제로 만든 결과는 제작 사례에서 볼 수 있고, 사이트 제작 전체 과정은 홈페이지 제작에서 정리했습니다. 지금 사이트의 흐름이 어디서 끊기는지 궁금하시면 무료 진단으로 시작하시면 됩니다.