지난 글에서는 제가 왜 UX를 공부하게 되었는지, 그리고 실제 프로젝트를 통해 어떤 경험을 했는지 이야기했습니다.
서비스를 직접 만들고 사용자 피드백을 받아보면서 한 가지 느낀 점이 있었습니다. UX는 감각만으로 만드는 것이 아니라, 기준이 있어야 한다는 것이었습니다. 처음에는 "이거 편할 것 같은데?" 정도로 접근했지만, UX를 공부해보니 이미 많은 서비스들이 공통적으로 지키고 있는 원칙들이 있었습니다.
이번 글에서는 이런 UX 원칙들에 대해 제 생각을 정리해보려고 합니다. 단순한 이론보다는, 실제로 서비스를 만들고, UX를 개선하면서 겪었던 경험과 사례를 중심으로 이야기해보겠습니다!
피드백
사용자가 어떤 액션을 했을 때, 시스템은 반드시 반응해야 합니다.
버튼을 눌렀는데 아무 반응도 없다면 사용자는 바로 의심합니다.
- "버튼이 눌린 건가?"
- "다시 눌러야 하나?"
- "버그 인가?"
- "아직 구현이 안 된 건가?"
좋은 UX는 사용자의 액션에 즉각적인 피드백을 제공한다고 생각합니다.
예를 들면 iOS에서는 아래와 같은 방식이 자주 사용됩니다. (물론, 더 있겠지만 가장 기본적이고 대표적인 방식을 작성해보았습니다.)
- 로딩 인디케이터
- 햅틱 피드백
- 상태 메세지
이렇게 작은 반응 하나만 있어도 사용자는 덜 의심하고, 안심한다고 생각합니다.
로딩 인디케이터
탭탭에서는 저장한 링크에 대해 원문 보기와 하이라이팅 수정 기능을 제공합니다. 이 기능은 WKWebView를 통해 웹페이지를 불러오는 방식으로 동작합니다. 개발 초기 테스트 환경에서는 네트워크 상태가 안정적이었기 때문에 웹페이지 로딩 속도가 크게 느리지 않았습니다. 그래서 처음에는 별도의 로딩 인디케이터를 구현하지 않았습니다.
하지만 실제 사용 환경에서는 달랐습니다. 네트워크 상태가 좋지 않은 경우 웹페이지 로딩이 예상보다 오래 걸리는 경우가 있었습니다. 문제는 이 과정에서 사용자에게 아무런 피드백이 없었다는 점이었습니다.
사용자 입장에서는 링크가 제대로 눌린 건지, 기능이 작동하고 있는지, 오류가 발생한 건지 알 수 있는 방법이 없었습니다. 결과적으로는 사용자는 기다리기보다는 다시 버튼을 누르거나, 버그라고 생각할 수도 있는 상황이었습니다.
그래서 탭탭에서는 웹페이지 로딩이 시작되는 순간 로딩 인디케이터를 표시하도록 UX/사용성을 개선했습니다. 기능 자체는 이전과 동일했지만, UX는 확실히 달라졌습니다. 사용자는 "지금 로딩 중이구나"라는 것을 직관적으로 알 수 있었고, 불필요하게 버튼을 반복해서 누르는 상황도 줄어들었습니다.
햅틱 피드백
탭탭에서는 작성한 하이라이팅 코멘트를 롱프레스하면 하이라이트를 편집할 수 있는 모달이 나타나도록 설계했습니다. 버튼을 따로 두기보다, 사용자가 이미 보고 있는 컨텐츠 위에서 바로 수정할 수 있게 하고 싶었기 때문입니다.
다만 롱프레스는 눈에 보이는 시각적인 인터렉션이 아니다 보니, 사용자가 제대로 인식되었는지 알기 어렵다는 문제가 있었습니다. 그래서 롱프레스가 인식되는 순간 햅틱 피드백을 주도록 설계했습니다.
물론, 햅틱이 없어도 기능 자체는 문제없이 동작합니다. 롱프레스를 하면 모달이 뜨고, 사용자는 편집을 할 수 있습니다. 그럼에도 햅틱을 넣은 이유가 있습니다. 바로! 사용자에게 확신을 주고 싶었습니다. 아주 작은 차이지만, 사용자는 이 햅틱 하나로 "동작했구나!"라는 확신을 가질 수 있습니다.
예측 가능성
사용자는 새로운 앱을 사용할 때 모든 것을 새로 학습하려고 하지 않습니다. 대부분은 이미 알고 있는 방식이나 경험을 바탕으로 행동합니다. 그래서 별다른 설명이 없어도 자연스럽게 예측할 수 있는 인터랙션들이 있습니다.
예를 들어,
- 특정 요소를 길게 누르면 추가 메뉴가 나타납니다. (수정, 복사, 삭제 등)
- 화면을 왼 -> 오로 스와이프하면 뒤로 가기가 동작합니다.
- 리스트 항목을 스와이프 하면 삭제나 수정 등 추가 액션이 나타납니다.
이런 패턴들은 여러 앱에서 반복적으로 사용되기 때문에, 사용자는 별도의 안내가 없어도 어느 정도 동작을 예상할 수 있습니다. 그래서 좋은 인터페이스는 사용자가 별다른 설명 없이 자연스럽게 행동할 수 있도록 설계되어 있다고 생각합니다.
다만 이러한 인터페이스를 설계할 때 주의해야할 점이 있습니다. 아래에서 제 실제 경험을 통해 알아보시죠!
탭탭에서는 하이라이트를 롱프레스하면 편집할 수 있는 모달이 출력 됩니다. 기능적으로는 꽤 자연스러운 패턴이라고 생각했지만, 사실 이 부분은 기획 단계에서 고민이 많았습니다.
"우리가 예측 가능하다고 생각하는 인터랙션이 과연 모든 사용자가 예측 가능할까?"
당시에 기획할 때 탭탭 팀 입장에서는 롱프레스가 꽤 익숙한 패턴이었습니다. 하지만 모든 사용자가 동일한 경험을 가지고 있는 것은 아니기 때문에, 정말 별다른 안내 없이도 기능을 발견할 수 있을지 계속 고민했습니다.
그래서 UT를 통해 실제 사용자 반응을 확인해봤습니다. 생각보다 많은 사용자들이 별도의 설명 없이도 롱프레스를 통해 기능을 발견했고, 자연스럽게 기능을 사용했습니다. 그 결과 현재는 별도의 안내 없이 해당 인터랙션을 유지하고 있습니다.
+ 아직도 이 부분은 계속 고민하고 있는 영역입니다. 팀 내부적으로는 충분히 예측 가능한 인터랙션이라고 판단하고 있고, 오히려 별다른 안내를 추가하는 것이 사용자에게 번거롭게 느껴질 수도 있다고 판단하여 해당 인터랙션을 유지하고 있습니다. 하지만 지속적으로 고민하고 있는 부분이고, 필요하다면 최초 1회 정도 가벼운 안내를 제공하는 방식도 고려해보고 있습니다.
일관성
UX에서 일관성은 서비스 내에서 디자인 요소, 상호작용, 용어를 통일하여 사용자가 학습 없이 직관적으로 서비스를 이용하게 하는 원칙입니다.
예를 들어 우리가 자주 사용하는 서비스들을 떠올려보면 쉽게 이해할 수 있습니다.
- 결제 서비스(쿠팡, 네이버 스토어 등)는 앱과 웹에서 주문 흐름이 거의 동일합니다.
- 애플 제품들은 아이폰, 아이패드, 맥에서 비슷한 인터페이스 경험을 제공합니다.
- 대부분의 서비스는 디자인 시스템을 통해 버튼, 입력창 같은 UI요소가 일정하게 유지됩니다.
이런 일관성 덕분에 사용자는 새로운 화면을 만나도 낯설지 않게 느껴지고, 서비스를 빠르게 이해할 수 있습니다.
UX에서 일관성은 크게 몇 가지로 나누어 볼 수 있습니다.
1. 시각적 일관성
먼저 가장 쉽게 보이는 부분은 디자인의 일관성입니다.
- 색상과 폰트
- 버튼 스타일
- 아이콘 형태
- 입력창과 카드 컴포넌트 등
이런 요소들이 화면마다 다르게 사용된다면 사용자는 매번 새로운 인터페이스를 보는 것처럼 느끼게 됩니다. 그래서 많은 서비스들이 디자인 시스템을 구축합니다. 버튼, 입력창, 카드 같은 UI 요소를 미리 정의해두고 동일하게 사용합니다. 이렇게 하면 사용자는 요소를 다시 이해할 필요가 없어지고, 서비스는 더 안정적인 경험을 제공할 수 있습니다.
2. 기능적 일관성
기능에서도 일관성은 중요합니다. 예를 들어,
- 뒤로 가기 버튼은 항상 같은 위치에 있어야 합니다.
- 스와이프 동작은 화면마다 다른 결과를 만들지 않는 것이 좋습니다.
- 같은 아이콘은 같은 의미로 사용되어야 합니다.
만약 어떤 화면에서는 스와이프로 삭제가 되고, 다른 화면에서는 수정 기능이 동작한다면 사용자는 혼란을 느끼게 됩니다. 그래서 좋은 서비스는 행동과 결과의 관계를 일관되게 유지하려고 합니다.
3. 용어의 일관성
의외로 많이 놓치는 부분이 용어의 일관성이라고 생각합니다.
같은 기능을 설명하면서
- 어떤 화면에서는 "주문하기"
- 다른 화면에서는 "결제하기" 처럼 서로 다른 표현을 사용한다면 사용자는 어색함과 혼란을 느끼게 됩니다. 그래서 서비스에서는 동일한 기능에 대해 하나의 용어를 유지하는 것이 중요합니다.
저 역시 포비라는 서비스를 기획하고 만들면서 이 부분을 크게 놓쳤던 경험이 있습니다. 당시 서비스에서는 같은 의미를 전달하면서도 여러 단어를 혼용해서 사용하고 있었습니다.
- 집중
- 집중도
- 집중률
기획하고 개발하는 동안에는 전혀 어색하게 느껴지지 않았습니다. 이미 서비스의 맥락을 알고 있었기 때문입니다. 하지만 멘토의 피드백을 받고 나서야 이 부분을 인지하게 되었습니다.
생각해보면 당연한 일이었습니다. 우리는 우리 서비스를 직접 기획하고 개발했기 때문에 모든 흐름과 의미를 이미 알고 있습니다. 그래서 표현이 조금씩 달라도 크게 이상하게 느끼지 못합니다.
하지만 처음 사용하는 사용자에게 같은 의미로 보이는 단어가 계속 바뀌면 사용자는 순간적으로 "이게 같은 의미인가?", "이게 이건가?" 하고 생각하게 됩니다. UX에서 일관성은 단순히 디자인이나 인터랙션뿐만 아니라, 용어도 중요하다는 것을 알게 된 좋은 경험이었습니다.
4. 외부적 일관성
마지막으로 외부적 일관성은 사용자가 이미 알고 있는 관습을 따르는 것입니다. 예를 들어
- 돋보기 아이콘 -> 검색
- 휴지통 아이콘 -> 삭제
- 사람 아이콘 -> 프로필 / 마이페이지
- 톱니바퀴 아이콘 -> 설정
이런 패턴들은 여러 서비스에서 반복되면서 하나의 약속처럼 자리 잡았습니다. 이런 외부적 일관성을 따르는 것은 사용자가 서비스를 더 빠르게 이해하도록 도와줍니다.
실수 방지와 복구
사용자는 항상 실수합니다. 그래서 좋은 UX는 실수를 방지하거나, 쉽게 되돌릴 수 있어야 합니다.
예를 들어,
- 삭제 전에 확인
- 실행 취소 기능
- 자동 저장
- 복구 기능
사실 이 부분은 제가 사용자 입장에서 경험했던 부분이 너무 많아서 가장 쉽게 와닿았던 원칙이었습니다.
아마 많은 서비스들이 사용자의 실수를 전제로 기능을 설계할 것이라고 생각합니다.
몇 가지 실제 사례를 보면,
- Google의 Gmail은 메일을 보낸 뒤 몇 초 동안 보내기 취소 기능을 제공합니다.
- 많은 글쓰기 플랫폼(티스토리, 네이버 블로그, 네이버 카페, 노션 등)에서는 임시저장 기능 및 자동저장 기능을 제공합니다.
- 카카오톡은 보낸 메시지를 삭제하고 수정하는 기능을 제공합니다.
- 인스타그램은 잘못 보낸 DM을 삭제하면 상대방의 기기에서 알림까지 삭제해주는 기능을 제공합니다.
등이 있습니다.
탭탭 익스텐션에서는 사용자가 원하는 문장에 하이라이팅을 하고, 코멘트를 남길 수 있습니다. 이 기능을 설계하면서 가장 중요하게 생각했던 UX가 하나 있습니다.
사용자가 실수하거나 예상치 못한 일이 발생하더라도, 앱이 그 상황을 어느 정도 책임져야 한다는 점이었습니다. 코멘트를 작성하는 상황을 생각해보면 생각보다 많은 변수가 존재합니다.
- 코멘트를 입력하던 도중 사파리 앱이 꺼지는 경우
- 코멘트를 입력하던 도중 사용자가 모르고 뒤로 가기를 누르는 경우
- 코멘트를 입력하던 도중 실수로 스와이프 제스처를 취하는 경우
- 코멘트를 입력하던 도중 다른 영역을 터치해 코멘트 입력 창이 닫히는 경우
사용자 입장에서 열심히 작성하고 기록했던 내용이 이런 실수나 예상치 못한 상황 때문에 사라진다면 정말 최악의 사용자 경험이 될 수 있다고 생각했습니다. (사실 저도 이런 경험으로 여러 번 데인 적이 많아서.. 기획 회의 하면서 가장 많이 어필했던 부분이었던 것 같아요. 하하..)
그래서 탭탭에서는 이런 케이스들을 고려해, 실수나 예외 상황에서도 기록했던 하이라이팅과 작성 중인 코멘트가 자동으로 저장되도록 구현하였습니다.
사실 이런 기능은 평소에는 크게 인식되지 않지만, 막상 실수나 문제가 발생했을 때 서비스에 대한 인상을 완전히 바꿔 놓는다고 생각합니다. 한 번의 실수로 모든 데이터가 사라지는 서비스와, 실수를 하더라도 다시 되돌릴 수 있는 서비스는 사용자에게 느껴지는 안정감이 전혀 다르기 때문입니다.
+ 실제로 쇼케이스에서 한 유저가 코멘트를 작성하다가 실수로 새로고침을 눌렀는데, 다행히 작성하던 내용이 그대로 유지되어있었습니다. 그때 "아.. 와..와 다행이다" 하면서 기뻐하셨던 모습이 아직도 기억에 남습니다.
탭탭의 아이덴티티는 더블 탭 제스처입니다. 사용자가 원하는 문장을 빠르게 하이라이팅할 수 있도록 설계된 핵심 인터랙션이기도 합니다. 그래서 하이라이팅을 삭제할 때도 동일한 패턴을 유지해, 하이라이팅 영역을 더블 탭하면 삭제 되도록 설계했습니다.
삭제 상황에는 두 가지 케이스가 있었습니다.
- 코멘트 없는 하이라이팅 삭제
- 코멘트가 존재하는 하이라이팅 삭제
서비스 초기에는 두 경우 모두 별도의 안내 없이 바로 삭제되도록 구현했습니다. 인터랙션을 최대한 간결하게 유지하고 싶었기 때문입니다. 하지만 내부 QA를 진행하면서 한 가지 문제가 보였습니다.
하이라이팅 영역이 서로 가깝게 있는 경우, 사용자가 의도하지 않게 다른 영역을 더블 탭할 가능성 있다는 점이었습니다. 만약 그 하이라이팅에 코멘트까지 작성되어 있다면, 사용자가 기록해 둔 내용이 그대로 삭제될 수도 있었습니다.
그래서 이후에는 코멘트가 포함된 하이라이팅을 삭제할 때는 삭제 확인 알럿을 표시하여 실수로 인해 삭제되는 것을 방지하도록 개선하였습니다. UX를 개선하면서 느낀 점은, 모든 인터랙션을 빠르게 만드는 것이 항상 좋은 선택은 아니라는 것을 느꼈습니다. 때로는 한 번 더 확인하는 과정이 사용자에게 더 안전한 경험을 제공할 수도 있다는 것을 배운 경험이었습니다.
마무리
이번 글에서는 좋은 UX를 만들기 위해 자주 이야기되는 몇 가지 원칙들과 그에 관련된 경험에 대해 이야기해보았습니다. 이 원칙들은 새롭거나 특별한 개념이라기보다는, 이미 많은 서비스들이 자연스럽게 지키고 있는 기본에 가깝다고 생각합니다.
하지만 직접 서비스를 만들면서 느낀 점은, 이 원칙들을 실제로 서비스에 녹여내는 과정이 생각보다 쉽지 않다는 것이었습니다. 개발을 하다 보면 기능이 잘 동작하는지, 일정 안에 구현할 수 있는지에 집중하게 됩니다. 그러다 보면 사용자가 어떤 순간에 멈추는지, 어디에서 불편함을 느끼는지 놓치기 쉽습니다.
그리고 한 가지 더 느낀 점이 있습니다. 모든 기준은 결국 우리가 아니라 사용자여야 한다는 것이었습니다.
앞에서 이야기했던 용어의 일관성이나 롱프레스 인터랙션처럼, 우리에게는 너무 익숙한 것들이 사용자에게는 낯설 수 있습니다. 우리는 이미 서비스의 구조와 맥락을 알고 있기 때문에 자연스럽게 이해하지만, 처음 사용하는 사용자에게는 전혀 다른 경험일 수 있습니다.
'UX, 사용성' 카테고리의 다른 글
| [UX/사용성] 내가 경험한 좋은 UX와 아쉬운 UX (0) | 2026.03.16 |
|---|---|
| [UX, 사용성] 내가 UX와 사용성을 공부하게 된 이유 (1) | 2026.02.17 |