기록 날짜
2024년 5월 31일
분야
IT
키워드
UI, GUI
본문
PC가 처음 등장했을 때 그 작동 방식에 대해 걱정하는 이는 아무도 없었다. 솔직히 PC라는 것에 놀라고 감탄했다. DOS 프롬프트에 입력하려면 난해한 용어를 배워야 했지만, 사용하기 어렵거나 어색할 수 있다는 생각은 전혀 하지 못했다. 하지만 점차 컴퓨터가 정교해지고 강력한 그래픽 사용자 인터페이스를 갖춘 첫 매킨토시가 나온 이후 우리는 컴퓨터와 상호 작용하는 과정이 중요하다는 사실을 깨달았다.
- DOS
- 검은 화면 위의 프롬프트라고 불리는 곳에 키보드로 명령어를 입력하는 흔히 원시적인 형태의 문자 입력 인터페이스(CLI)의 셸을 가진 운영체제
- 매킨토시
- 1984년에 처음 출시된 매킨토시는 당시 유행하던 명령 줄 인터페이스 대신 그래픽 사용자 인터페이스와 마우스를 채용해 상업적으로 성공한 최초의 개인용 컴퓨터
이제 소프트웨어 개발자는 프로그램이 작업하는 방법뿐만 아니라 사용자가 이 작업을 처리하기 위해 프로그램과 상호 작용하는 방법까지 생각해야 했다. 좋은 사용자 인터페이스(UI)가 소프트웨어를 더 많이 판매하는 핵심 요소임이 분명해졌다. 애플리케이션과 상호 작용하는 것이 쉽고 직관적이면 사용자는 더 많은 작업을 할 수 있고 그 애플리케이션을 좋아하기 마련이다.
이런 더 좋은 UI를 만드는 첫 단계가 바로 표준화였다. 매킨토시와 이후 윈도우가 나오면서 오늘날 우리가 당연하게 여기는 컴퓨터 상호 작용으로 자리를 잡았다. 거의 모든 소프트웨어에 공통으로 들어가 있는 파일 메뉴의 새로 만들기, 열기, 저장, 종료와 같은 옵션이 대표적이다. 대화 상자에는 확인, 취소 버튼이 들어가고, 이 모든 것이 사용자가 생각하는 직관 그대로 작동했다. UI의 발전은 앨런 쿠퍼 등이 쓴 '페이스에 관하여 : 인터랙션 디자인의 필수 요소(About Face: The Essentials of Interaction Design)'라는 책으로 집대성됐다. 컴퓨터 사용자가 생각하는 많은 디자인 패턴을 체계화하고 컴퓨터와 인간의 상호 작용을 개선하는 새로운 아이디어를 제시했다.
그런데 오늘날은 어떤가? 안타깝게도 이제는 웹 어디를 살펴보아도 이런 유용하고 중요한 개념이 사라지고 있다.
- 집대성
- 여럿을 모아 하나로 크게 완성하는 것
'확인' 버튼의 종말
GUI 앱에 널리 채택된 기본 원칙 중 하나는 사용자가 마우스를 눌렀을 때 어떤 동작이 수행될지 명확히 하는 것이었다. 예를 들어 사용자가 설정할 수 있는 여러 옵션이 있는 대화 창을 불러올 경우, 변경 사항을 수락하는 확인 버튼과 거부하는 취소 버튼이 항상 있었다. 이런 확인, 취소 버튼은 중요한 역할을 한다. 사용자는 설정 대화 상자로 이동해 여러 가지 설정을 변경한 확인을 클릭해 변경 사항이 제대로 적용됐는지 알 수 있다. 가끔은 "아니, 그냥 원래대로 되돌리고 싶은" 경우가 있는데, 취소 버튼을 누르면 된다. 모든 것이 원래대로 초기화된다. 잘못된 설정을 저장하는 재앙을 피할 수 있다.
그런데 이렇게 명확하고 쉬운 작업 방식이 웹으로 전환하면서 사라졌다. 웹에서는 종종 확인, 취소 버튼이 없는 설정 페이지를 볼 수 있다. 대신 오른쪽 상단의 X를 클릭하면 대화 상자를 닫고 변경한 내용을 모두 수락하는 의미가 된다. 만약 변경한 내용이 마음에 들지 않으면 어떻게 해야 할까? 변경된 사항을 무시하고 어떻게 초기화할 수 있을까? 방법이 없다. 결국 변경하기 전 내용을 기억하는 부담이 고스란히 사용자의 몫이다. 설정 메뉴가 복잡한 경우 이런 부담은 점점 더 커진다. 더구나 팝업 대화 상자를 닫으려면 실제로 대화 상자 밖을 클릭해야 하므로 내가 변경한 내용이 제대로 적용됐는지 찜찜함이 남는다.
이런 상황은 개선돼야 한다. 확인, 취소 버튼을 다시 가져와야 한다.
미세한 마우스 작업 강요
UI 측면에서도 또 다른 성가신 변화는 마우스 혹은 터치패드 사용자에게 과도하게 정교함을 요구하는 것이다. 언젠가부터 우리는 원하는 작업을 하기 위해 엄청나게 미세한 조작 기술이 필요하게 됐다.
예를 들어 GUI의 장점 중 하나는 창 크기를 조정하고 화면에서 창을 옮기는 기능이다. 초대형 모니터의 등장으로 이 기능은 더 유용해졌다. 하지만 운영체제 업체는 이 창 크기 조정과 이동을 더 어렵게 만들었다. 실제로 최신 버전 윈도우에서는 크기를 조정하기 위해 마우스를 애플리케이션 모서리의 올바른 위치로 옮기는 데 실망스러울 만큼 긴 시간이 걸린다. 창을 옮기고 싶을 때, 과거에는 애플리케이션의 제목 표시줄이 매우 선명해 쉽게 클릭할 수 있었다. 지금은 애플리케이션 상단에서 클릭할 위치를 찾기가 어려운 경우가 많다.
당장 윈도우에서 브라우저 탭 위치를 보자. 대부분 수많은 탭을 열어 놓고 쓸 텐데, 브라우저 창을 원하는 위치로 옮기려면 마우스를 어디에 정확히 놓아야 할까? 과거에는 이런 '어포던스'(affordances, 행동유도성, '일상적인 것의 디자인(The Design of Everyday Things)'의 저자 돈 노먼이 만든 단어)가 보기에도 평범하고 사용하기에도 간단했다. 윈도우 테두리는 더 두껍고 '잡기' 쉬웠으며, 윈도우의 제목 표시줄도 마찬가지였다. 하지만 지금은 미적 감각이라는 미명하에 테두리가 너무 얇아졌다. 잡기가 더 힘들어졌다.
정체를 알 수 없는 애플리케이션
이런 문제는 또 있다. 필자는 가끔 내가 어떤 애플리케이션을 보고 있는지 모르겠다는 느낌을 받을 때가 있다. 예전에는 제목 표시줄에 애플리케이션 이름이 명확하게 표시됐지만 지금은 그렇지 않다. 예를 들어 <화면 1>을 보자. 과연 무슨 애플리케이션일까? 물론 브라우저라는 것은 알 수 있다. 그런데 구글 크롬이지, 파이어폭스인지 누가 알겠는가? 사실 이 브라우저는 마이크로소프트 엣지다. 지금 같은 상황에서는 어떤 애플리케이션인지 바로 알기 힘들다. 결국 다른 곳으로 이동해야 한다. 으악! 이 끈질기고 완전히 제거할 수 없는 '자극제'인 마이크로소프트 엣지에 대해서는 하고 싶은 말이 산더미지만 오늘의 주제는 아니므로 다음 기회로 미룬다.
모든 것이 회색
색상 문제도 지적하지 않을 수 없다. 색상은 매우 강력한 지표다. 무언가가 빨간색일 때는 경계해야 하고, 초록색일 때는 안전하고 행복하다고 느낄 수 있음을 우리 모두는 알고 있다. 사용자 인터페이스에서도 마찬가지다. GUI의 황금기에는 활성화되어 있고 클릭할 수 있는 버튼에는 색을 입히고, 비활성 상태일 때는 회색으로 표시하는 것이 일반적이었다. 탭 색상도 활성 상태일 때는 선명하고 밝게, 비활성 상태에서는 어둡고 회색으로 표시했다.
그런데 <화면 2>를 보자. 어떤 탭이 활성화되어 있는지 색상으로 알 수 있는가? 어느 순간 UI 디자이너들은 회색과 검은색이 '깔끔하고 멋진' 색이라고 정해버린 것 같다. 이제는 경계를 표시하거나 상태를 알리는 데 명확하고 구별 가능한 색을 사용하지 않는다. 심지어 진한 회색은 "선택됨"을, 밝은 회색은 "선택되지 않음"을 나타내는 인터페이스도 있다. 하지만 회색은 결코 "선택됨" 또는 "활성"이 아니다. 파란색 또는 녹색이 선택되었거나 활성 상태다. 회색은 선택되지 않은 상태다.
상황이 이렇게 된 데는 디자이너가 "회색이 검은색보다 선호된다"는 사실을 파악한 후 "모든 곳에 회색을 사용하면 성공!"이라고 생각하며 지나치게 사용한 것이 한 이유다. 하지만 실제로 회색은 다른 색상보다 선호도가 절대 높지 않다.
멋지게 보이는 데 '올인'
필자는 가장 안타까운 것은 애플리케이션과 운영체제 개발자의 마음속에 '멋져 보이는 것'이 '유용하고 사용하기 쉬운 것'보다 더 선호되는 것 같다는 점이다. 하지만 그래선 안 된다. 소프트웨어 애플리케이션은 사용하기 쉬워야 한다. "방금 무슨 일이 일어났지?" 고민하거나 의구심을 품지 않고 사용자가 하고 싶은 작업을 할 수 있어야 한다. 최고의 애플리케이션은 작업을 할 때 고민하거나 설명서를 읽을 필요 없이 그냥 작동하는 것이다. 디자인은 물론 중요하다. 그러나 형식과 디자인을 위해 기능을 희생하는 것은 큰 실패다. 지금의 '사용성 저하' 유행이 매우 실망스러운 이유다.
견해
<'확인' 버튼의 종말>
나도 실제로 '희소식' 앱 개발을 했을 때 개인 정보를 수정하는 창에서 확인을 누르지 않았는데도 변경사항이 저장된 채로 개발한 경험이 있다. 원래 이렇게 개발하려고 했던 건 아니었지만, 새로운 값을 입력했을 때, 자동으로 저장되도록 잘못 개발하여 이러한 불편함(?)을 겪었다. 확인 버튼이 있을 때, 사용자는 확인 버튼을 눌러야지만 변경 사항이 저장된다고 인식할 것이다. 만약 확인 버튼을 누르지 않았는데도 수정된 사항이 저장되고 이를 되돌리고 싶다면 ..? 취소 버튼을 클릭하거나, 창을 나가면 해결될 텐데 그렇지 않다면 이전 내용을 기억하고 다시 다 변경해야하는 번거로움이 있을 것이다. 다행히 내가 개발할 때 이 문제점을 바로 찾아 해결했었다.
<미세한 마우스 작업 강요>
동의한다. 이전의 UI를 썼던 기억은 없지만, 현재 화면을 확대하거나 축소하거나 끄거나 할 때, 마우스를 오른쪽 상단까지 가지고 가는데 은근 번거롭다. 심지어 나는 버티컬 마우스를 쓰고 있는데 아직 익숙하지가 않아 위와 같은 작업을 하는데 상당한 시간이 소요되어 불편하다.
<정체를 알 수 없는 애플리케이션>
이 내용은 살짝 억까인 것 같기도 하다. 나는 사진 속 브라우저가 마이크로소프트 엣지라는 것을 단번에 알았다. 이유는 나도 구글 크롬, 마이크로소프트 엣지 등 다양한 브라우저를 사용하기 때문에 익숙한 사람이라서 어떤 브라우저인지 단번에 알 수 있다. 나는 익숙해서 그런 것 같은데 브라우저에 익숙하지 않은 사람이면 헷갈릴 것 같기도 하다. 아무래도 익숙한 사람보다는 익숙하지 않은 사람에게도 편리한 기능을 제공해야하는 의무가 있으니까 !
<모든 것이 회색>
글을 읽지마자 바로 티스토리가 실행되어 있는 구글 크롬 브라우저를 봤는데 진짜 내가 현재 보고 있는 창은 옅은 회색이고 그렇지 않은 창 들은 진한 회색이다. 근데 소름 돋게도 이에 익숙해져버렸다. 물론 직관적으로 대비되는 색, 상징적인 색들로 UI가 적용되었다면 더 보기 편리했겠지만, 지금의 UI에 익숙해져버렸다.
<멋지게 보이는 데 '올인'>
인정하는 부분이다. 내가 '희소식' 앱 개발을 할 때는 사용 연령층을 전 국민, 위급시 사용해야하기 때문에 최대한 직관적이고 간편한 UI를 만들기 위해 노력했다. 하지만 '토크토피아' 웹 개발을 할 때는 직관적이고 편리한 UI보다 '어떻게 하면 더 예쁘게 만들지?' 에 대한 생각이 더 컸던 것 같다. 물론 예쁘게 만드는 것도 중요하다. 하지만 그보다 우선 시 되어야 하는 것은 처음 앱, 웹을 본 사용자가 직관적으로 헷갈림이 없어야 하는 것이라고 생각한다. 코딩을 잘하는 것도 중요하지만 사용자들이 애플리케이션을 봤을 때 편리하게 사용할 수 있음에 우선을 두기 위해 GUI 공부도 틈틈히 해야겠다.
원문
https://www.itworld.co.kr/topnews/338825
'IT 뉴스' 카테고리의 다른 글
[IT 뉴스] 짜증 1순위 "비밀번호 뭐였지" ...지문·얼굴 인증 확 늘었다 (0) | 2024.08.21 |
---|---|
[IT 뉴스] "우리 닭이 흥분했어요" AI 번역기, 닭 울음소리도 해석해준다 (0) | 2024.06.04 |
[IT 뉴스] AI를 바라보는 엇갈린 시선 "궁금한 만큼 두렵기도" (0) | 2024.05.30 |
[IT 뉴스] "결국 답은 HBM" 삼성전자 인기 하락, SK하이닉스 관심 집중 (0) | 2024.05.29 |
[IT 뉴스] JS · 파이썬 · 자바가 기업 IT를 지배하는 이유 (2) | 2024.05.29 |