UX · UI

UX와 UI는 정확히 뭐가 다른가요?

UI는 ‘어떻게 보이느냐’를, UX는 ‘어떻게 쓰이느냐’를 다뤄요. 같은 예약 버튼이라도 색 · 모양 · 글씨는 UI의 일이고, 그 버튼이 손님이 찾는 자리에 있는지는 UX의 일이에요.

둘은 따로 떨어진 작업이 아니에요. 보통 UX로 손님의 동선과 화면 순서를 먼저 정하고, 그 위에 UI로 색과 글씨를 입혀요. 순서가 바뀌면 예쁘지만 쓰기 불편한 홈페이지가 되기 쉬워요.

시안을 볼 때 두 가지를 나눠서 보면 피드백이 훨씬 쉬워져요. ‘색이 마음에 안 든다’는 UI 의견이고, ‘가격을 찾기 어렵다’는 UX 의견이에요.

UX에는 화면 밖의 경험도 들어가요. 예약 뒤에 오는 확인 문자, 문의에 답이 오는 속도까지 손님에게는 모두 ‘이 가게를 이용한 경험’이에요.

좋은 UX는 어떤 기준으로 판단하나요?

좋은 UX는 손님이 ‘생각하지 않아도’ 원하는 일을 끝낼 수 있는 상태예요. 사용성 연구 기관 닐슨 노먼 그룹은 이를 10가지 원칙(사용성 휴리스틱)으로 정리해 두었고, 많은 디자이너가 이 원칙을 점검표처럼 써요.

가게 홈페이지에 맞춰 풀면 아래 몇 가지가 특히 중요해요. 어려운 이론이 아니라, 매장에서 손님을 대할 때의 상식과 거의 같아요.

원칙을 모두 외울 필요는 없어요. 시안을 볼 때 ‘처음 온 손님이 이 화면에서 무엇을 해야 할지 바로 알까?’ 하나만 계속 물어도 대부분의 문제가 걸러져요.

• 지금 어디에 있는지 알려 주기: 예약 중이라면 ‘2단계 중 1단계’처럼 진행 상황을 보여 줘요.
• 손님의 말로 쓰기: ‘서비스 소개’보다 ‘시술 메뉴 · 가격’처럼 손님이 찾는 단어를 써요.
• 되돌리기 쉽게: 잘못 누른 날짜를 처음부터 다시 고르지 않아도 되게 해요.
• 같은 건 같게: 페이지마다 버튼 모양과 위치가 바뀌지 않게 해요.
• 실수를 미리 막기: 휴무일은 아예 고를 수 없게 막아 두는 식이에요.
• 꼭 필요한 것만 보여 주기: 첫 화면에 정보를 다 넣기보다 가장 중요한 것부터 보여 줘요.

우리 가게 홈페이지 UX는 어떻게 점검하나요?

가장 확실한 방법은 다른 사람이 실제로 써 보는 모습을 지켜보는 거예요. 디자인 전문 지식이 없어도, 아래 순서대로 30분이면 고칠 곳이 꽤 많이 보여요.

점검할 때는 설명하거나 도와주지 않는 게 중요해요. 손님은 옆에서 알려 주는 사람 없이 혼자 홈페이지를 쓰니까요.

숫자로도 확인할 수 있어요. 방문 통계에서 예약 페이지까지 온 사람 중 실제로 예약을 끝낸 비율을 보면, 어느 단계에서 손님이 빠져나가는지 짐작할 수 있어요.

1. 01가게를 잘 모르는 지인 두세 명을 정해요. 연령대가 다르면 더 좋아요.
2. 02폰을 건네고 ‘이번 주 토요일 오후에 예약해 보세요’, ‘주차되는지 찾아보세요’처럼 할 일을 한 가지씩 줘요.
3. 03옆에서 말없이 지켜보며 멈칫하는 곳, 잘못 누른 곳, 뒤로 가기를 누른 곳을 적어요.
4. 04끝난 뒤 ‘어디가 헷갈렸어요?’라고 짧게 물어봐요.
5. 05여러 사람이 같은 곳에서 막혔다면 그 부분부터 고쳐요.
6. 06고친 뒤 새로운 사람에게 같은 일을 다시 맡겨 확인해요.

업종마다 UX에서 챙길 점이 다른가요?

네, 손님이 홈페이지에 들어와서 ‘가장 먼저 하려는 일’이 업종마다 달라요. 그 일을 가장 짧은 길로 끝나게 만드는 게 UX 설계의 핵심이에요.

그래서 같은 디자인 틀을 쓰더라도 메뉴 순서와 첫 화면 버튼은 업종에 맞춰 바꿔야 해요. 남의 업종 홈페이지를 그대로 따라 하면 우리 손님에게는 맞지 않을 수 있어요.

같은 업종이라도 손님층에 따라 달라져요. 어르신 손님이 많은 가게라면 글씨를 크게 하고 전화 버튼을 앞에 두는 게, 20대 손님이 많은 가게라면 카카오톡 · 인스타그램 연결을 앞에 두는 게 맞을 수 있어요.

• 카페: 위치 · 영업시간 · 메뉴 사진을 가장 먼저 찾아요. 지도와 ‘길찾기’가 위쪽에 있으면 좋아요.
• 미용실: 시술별 가격과 디자이너를 비교한 뒤 예약해요. 가격표에서 바로 예약으로 이어지는 흐름이 중요해요.
• 공방: 클래스 일정과 남은 자리를 확인하고 신청해요. 날짜를 고르는 화면이 쉬워야 해요.
• 온라인 판매: 상품을 비교하고 장바구니에 담아요. 검색 · 분류 · 결제 단계가 짧아야 해요.

UX가 검색 노출에도 영향을 주나요?

간접적으로는 영향을 줘요. 구글 검색 센터는 페이지 경험(빠른 로딩, 폰에서 보기 편한 화면, 안전한 연결 등)이 좋은 페이지를 보상하려 한다고 안내해요.

다만 구글은 페이지 경험이 조금 부족해도 검색어와 가장 관련 있는 내용을 먼저 보여 준다고 설명해요. 비슷하게 좋은 내용이 많을 때 페이지 경험이 차이를 만들 수 있다는 뜻이라, 손님이 찾는 정보를 충실히 담는 게 먼저예요.

검색 순위보다 더 직접적인 효과는 문의 · 예약 수예요. 같은 방문자 수라도 UX가 좋으면 연락까지 이어지는 손님이 늘어요.

제작사와 일할 때 UX · UI에서 자주 하는 실수는 무엇인가요?

가장 흔한 실수는 디자인 시안부터 보고 결정하는 거예요. 화면 뼈대(와이어프레임)를 건너뛰면 색과 사진에 눈이 가서, 메뉴 순서나 버튼 위치 같은 중요한 문제를 놓치기 쉬워요.

또 컴퓨터 화면으로만 시안을 확인하는 경우가 많아요. 가게 손님은 대부분 폰으로 들어오기 때문에, 시안도 꼭 폰에서 열어 보세요.

UI 취향 피드백은 예시와 함께 주는 게 좋아요. ‘고급스럽게’보다 ‘이 홈페이지처럼 여백이 넓고 글씨가 얇은 느낌’처럼 참고 사이트를 함께 보여 주면 수정 횟수가 줄어요.

공개 후에도 UX는 계속 다듬는 거예요. 손님이 전화로 자주 묻는 질문은 홈페이지에서 그 정보를 찾기 어렵다는 신호라서, 해당 내용을 더 눈에 띄는 곳으로 옮기면 돼요.

• 시안 전에 화면 뼈대(와이어프레임)를 먼저 보여 주나요?
• 폰 화면 시안을 따로 만들어 주나요?
• 손님이 예약 · 문의까지 몇 번 눌러야 하는지 설명해 줄 수 있나요?
• 공개 전에 실제 폰으로 써 보는 점검을 하나요?
• 공개 후 손님 반응을 보고 고칠 수 있는 방법(수정 횟수 · 유지관리)이 있나요?