사용자 인터페이스(User Interface) 쉽게 이야기하기

Naver 홈페이지 출처:네이버 홈페이지

 

 업무를 하다 보면 가장 많이 듣는 단어. 바로 UI입니다.

UI 즉, User Interface 사용자와 인터페이스 사이에 상호작용이 원활하게 이루어질 수 있도록 도와주는 것을 말합니다.

이 사용자 인터페이스 즉, UI는 사용자의 만족도에 가장 큰 영향을 미치는 중요한 요소로 사용자가 항상 편안하게 상용할 수 있도록 제공해주어야 합니다.

 

Q. 사용자 인터페이스의 종류에는 어떤 것들이 있나요?

 

 과거, 현재, 미래 순으로 GLI(Command Line Interface), GUI(Graphical User Interface), NUI(Natural User Interface) 이렇게 3개가 있습니다.

 

 GLI의 경우 예전 DOS처럼 명령어를 사용자가 직접 입력해서 컴퓨터와 소통했던 인터페이스 방식입니다.

즉, 텍스트의 형태로 작업하는 것을 말합니다.

 

 GUI의 경우 현재 우리 주변에 많이 볼 수 있는 인터페이스 방식으로 아이콘이나 그림을 선택하여 진행하는 인터페이스 방식입니다. 스마트폰에서 어플 아이콘을 클릭하면 그 어플이 실행되는 형태를 말합니다.

 

 NUI의 경우 미래라고 했지만 우리 주변에도 많이 볼 수 있는 형태로 사람의 말이나 행동으로 조작하는 인터페이스 방식입니다. 기가 지니 혹은 삼성의 핸드 모션과 같이 터치하지 않고 목소리 혹은 행동으로 조작할 수 있는 형태를 말합니다.

 

 아직까지 우리 주변에 가장 흔하고 친숙한 형태는 GUI 형태입니다.

 

Q. 사용자의 인터페이스 만들 때 지켜야 하는 기본 원칙 같은 게 있을까요?

 

 인터페이스의 기본 원칙은 직관성, 유효성, 학습성, 유연성 이렇게 4가지 원칙이 있습니다.

 

 직관성은 누구나 쉽게 이해하고 사용할 수 있어야 한다는 성질로 "딱! 보니 어떻게 쓰는지 알겠네!"라는 느낌을 말합니다. 인터페이스를 보고 설명서를 읽지 않고도 사용할 줄 아는 것이 좋은 거죠.

 

 유효성은 사용자가 원하는 바를 할 수 있도록 해주는 것을 말합니다. 인터 페스를 사용하는 데 사용자가 원하는 동작이 돼야 하는 것이죠. 이를테면 길이 측정을 하고 싶다고 했을 때 길이 측정이 정확하게 되어야 하는 것과 같은 것을 말합니다.

 

 학습성은 사용자 누구나 쉽게 배우고 익힐 수 있도록 해주는 것입니다. 누구에게는 쉽고 또 다른 누구에게는 어려운 인터페이스는 좋은 인터페이스라고 할 수 없습니다. 어린아이부터 노인까지 모두 쉽게 배울 수 있다면 그것이 좋은 인터페이스 일 것입니다.

 

 유연성은 사용자의 요구사항을 최대한 수용하고 실수를 최소화할 수 있는 것을 말합니다. 예를 들어 인스타그램의 좋아요는 이미지를 더블 탭 하게 되면 체크가 됩니다. 하지만 하단의 하트를 눌러도 좋아요 표시가 됩니다. 이처럼 사용자의 요구를 최대한 수용하고 목적을 달성할 수 있게 여러 경로를 만들어주는 것을 유연성이라고 볼 수 있습니다.

 

Q. 사용자 인터페이스를 설계할 때 고려해야 할 내용도 있을까요?

 

 사용자의 인터페이스를 설계할 때 고려해야 할 점은 사용자 중심인가? 일관성이 있는가? 단순한가? 결과가 예측 가능한가? 가시성이 좋은가? 표준화되어 있는가? 접근성은 용이한가? 명확한가? 오류 발생 시 사용자가 이를 인지할 수 있는가? 에 대해서 고려해보는 것이 좋습니다.

 

 사용자 중심인가?라는 것은 만든 사람이 사용하는 것이 아니기 때문에 정말 사용자 입장에서 이게 좋은가?입니다. 

흔히 인터페이스를 설계하다 보면 만드는 사람이 자신이 사용자인 것처럼 착각하곤 합니다. 실 사용자의 입장에서 생각해보는 것이 중요합니다.

 

 일관성이 있는가?라는 것은 조작 방법이 항상 동일한가?라는 것입니다. 예를 들어서 네이버 메일을 작성하여 보낼 때는 [보내기] 버튼을 한번 클릭하면 되지만 답장하여 보낼 때는 [보내기] 버튼을 더블 클릭해야 한다면 이는 사용자가 사용하기 어려울 것입니다.

 

 단순한가?라는 것은 조작방법이 쉬운가?라는 것입니다. 만약 파일을 복사를 하는 데 컨트롤키 + 알트키 + 쉬프트 키 + 스페이스바 + C + A라고 만들었다면 이는 단순하지 않은 사용법은 아마 사용자가 조작하기 쉽지 않을 것입니다.

 

 결과가 예측 가능한가?라는 것은 기능만 보고도 '아 뭐가 되겠구나!'라는 생각이 들어야 하는 것입니다. 예를 들어 길이 측정 기능을 보면 '길이 측정이 되겠구나!'라는 생각이 드는 것과 마찬가지로 말이죠. 

 

 가시성이 좋은가?라는 것은 메인 기능이 사용자가 볼 수 있는 곳에 있는가?라는 것입니다. 만약 내가 길이 측정을 하기 위해서 [상태 표시줄] - [도구] - [측정하기] - [길이 측정하기]라는 방식으로 찾아서 들어가야 한다면 이는 가시성이 좋은 것이 아닙니다.

 

 표준화되어 있는가?라는 것은 사용자가 한 번 학습한 후에 쉽게 사용할 수 있는가?라는 것입니다. 예를 들어 A라는 회사에서 소프트 웨어 두 개를 만들었다고 합시다. 한 개의 소프트웨어에서 모든 선택은 왼쪽 클릭으로 동작했는 데 다른 한 소프트웨어에서는 오른쪽 클릭으로 선택을 한다면? 이는 표준화되어있지 않다고 이야기할 수 있습니다.

 

 접근성이 용이한가?라는 것은 누구나 사용할 수 있는가?라는 것입니다. 특정 사용자를 위한 제품이 아니라면 인종, 연령, 성별에 상관없이 누구나 사용하기 편해야 합니다.

 

 명확한가?라는 것은 사용자가 쉽게 인지할 수 있는가?라는 것입니다. 만약 아이콘에 동그라미, 네모, 별, 세모를 합쳐서 그려놓은 아이콘이 있다면 사용자가 이걸 보고 '.. 뭐지?..'라는 생각이 들 확률이 높습니다. 이는 명확한 인터페이스를 제공해주지 않았다고 볼 수 있습니다.

 

 오류 발생 시 사용자가 이를 인지할 수 있는가?라는 것은 사용자가 오류가 발생했을 때 오류가 발생했는지 알 수 있는가? 에 대한 문제입니다. 오류가 발생했는 데 아무런 변화도 없다면 사용자가 오류가 발생했는지 알 수 없을 것입니다. 얼럿과 같은 경고창을 띄워주는 것이 좋습니다.

 

Q, 지침이나 규정 같은 것도 있을까요?

 

 한국형 웹 콘텐츠 접근성 지침 그리고 전자정부 웹 표준 준수 지침이 있습니다.

한국형 웹 콘텐츠 접근성 지침의 경우 장애인, 비장애인 모두 사용할 수 있어야 한다는 내용이며,

전자정부 웹 표준 준수 지침의 경우 정부 시스템을 사용하는 데 있어서 시스템의 제약으로 사용하지 못하는 사람이 있어서는 안 되기 때문에 모든 사람이 시스템을 사용할 수 있도록 하자가 주된 내용입니다.

 

Q. UI 설계는 어떻게 하나요?

 

 UI 설계를 하기 용이한 도구들이 있습니다.

와이어 프레임, 목업, 스토리보드, 프로토 타입 같은 것들이 있는 데 이건 제가 올린 다른 글을 참고해주시면 감사하겠습니다.

 

Q. UI 프로토타입(Prototype)이란 뭔가요?

 

 UI 프로토타입이란 개발자가 요구사항을 잘 이해하고 만들었나? 검증하기 위해 제작하는 것입니다.

한 단어의 글을 읽고도 사람마다 생각하는 것이 다른 만큼 사용자와의 의견 불일치로 인한 혼선을 줄일 수 있고 시각적으로 보여주는 자료이기 때문에 사용자 설득에도 용이합니다. 물론 요구사항을 계속 반영하려고 하다 보면 작업 시간을 증가시킬 수도 있는 단점 역시 존재합니다.

 

Q. UI 프로토타입도 종류가 있을까요?

 

크게 페이퍼 프로토타입과 디지털 프로토타입으로 나누어져 있습니다.페이퍼 프로토타입은 그냥 종이에다 슥슥 그린 것을 말하고, 디지털 프로토타입은 Powerpoint를 시작으로 Figma, Axure, Adobe XD와 같은 툴을 사용한 것을 말합니다. 페이퍼 프로토타입은 아무나 사용할 수 있지만 퀄리티가 낮고 디지털 프로토타입은 퀄리티는 높지만 숙련된 전문가가 필요하다는 단점이 있습니다.

 

Q. UI를 잘 설계해서 만든 소프트웨어 품질을 좋냐 안 좋냐를 판단할 때 어떤 특성을 보나요?

 

 기능성, 신뢰성, 사용성, 효율성, 유지보수, 이식성 이 6가지 특성을 봅니다. 이 특성은 ISO/IEC 9126 품질 요구사항 표준지침으로 개발 중이거나 또는 개발이 완료된 소프트웨어 품질 평가에 사용됩니다.

 

 기능성이란 소프트웨어가 사용자가 요구하는 요구사항을 얼마나 만족하냐?라는 것을 평가합니다.소프트웨어가 만들어진 이유가 사용자의 요구사항이 있어서 만들어진 것으로 사용자의 요구사항을 만족할 수 있어야 합니다.

 

 신뢰성이란 소프트웨어가 요구된 기능을 정확하고 일관되게 수행할 수 있는가?라는 것을 평가합니다.길이 측정을 할 때마다 수치가 달라진다면 이 소프트웨어를 신뢰하기 쉽지 않습니다. 

 

 사용성이란 사용자가 조작을 할 때 조작법에 대해서 정확하게 이해하고 이거 계속 쓰고 싶네?라는 생각이 드는가?라는 것을 평가합니다.조작법 잘 모르겠고 '에이! 이거 그냥 안 쓸래!"라는 생각이 든다면 사용성이 좋지 않은 것입니다.

 

 효율성이란 사용자가 요구하는 기능을 할당된 시간 동안 할당된 자원으로 얼마나 빨리 처리하는가?입니다. 컴퓨터 계산기를 쓰려고 하는 데 한 개의 버튼을 클릭할 때마다 10초씩 기다려야 한다면 그냥 계산기를 쓰는 것이 좋습니다. 이럴 경우 효율성이 떨어진다고 보는 것입니다.

 

 유지보수란 새로운 요구사항이 발생하거나 특정 문제가 생겼을 때 빠르게 문제를 해결하고 새로운 요구사항을 반영할 수 있냐?라는 것을 말합니다. 소프트웨어란 한 번팔고 마는 것이 아니기 때문에 새로운 기능의 추가 혹은 버그의 해결 등의 요소는 중요합니다. 

 

 이식성이란 소프트웨어가 다른 환경에서도 잘 작동하는가?입니다. 개발자의 자리에서만 잘 작동되는 소프트웨어 이건 품질이 좋다고 말할 수 없습니다.

 

 기존 ISO/IEC 9126에서 보안성과 호환성을 강화한 품질 평가 표준 지침인 ISO/IEC 25010 지침이 있는 데 해당 지침에서는 보안성과 호환성이 추가되었습니다.

 

 보안성이란 제품이 보안적으로 문제가 없는가?라는 점입니다. 개인정보가 손쉽게 털린다면 좋은 소프트웨어보단 위험한 소프트웨어라고 볼 수 있습니다.

 

 호환성이란 다른 제품과 연동이 잘 되냐?라는 것입니다. 다른 제품과 연동이 일절 되지 않고 딱 기능만 사용되는 소프트웨어는 요즘 시대에 좋다고 말할 수가 없죠.

 

ISO: International Organization for Standardization 국제표준화기구

IEO: International Electrotechnical Commission 국제전기기술위원회