개발자 관점에서 바라본 좋은 UI / UX 디자인이란?

UI

User Interface의 약자

뷰에 그려지는 모든 레이아웃의 배치를 뜻한다.

UI 디자인은 어플리케이션의 컴포넌트들을 어디에 어떻게 구성하는지 디자인을 하는 것이다.

 

UX

User Experience의 약자

말 그대로 사용자의 경험을 뜻해서 어플리케이션을 사용하면서 느끼는 종합적인 만족을 의미한다.

UX 디자인은 어플리케이션의 전반적인 사용 경험을 좋게 디자인 한다는 포괄적인 뜻이 담겨있다.

 

좋은 UI / UX

• 직관적인 디자인: 사용자들이 쉽게 이해하고 사용할 수 있도록 직관적인 디자인이 필요합니다.
• 일관성: 디자인 요소와 행동 방식에 일관성이 있어야 합니다. 이는 사용자들이 이용하는 다양한 기능들 간에 일관성을 유지해줌으로써 사용자들이 쉽게 이해하고 사용할 수 있게 도와줍니다.
• 가독성: 텍스트, 그래픽, 아이콘 등의 디자인 요소가 잘 구성되어 있어야 합니다. 특히 텍스트는 가독성이 높아야 합니다.
• 접근성: 모든 사용자가 이용하기 쉬운 인터페이스를 제공해야 합니다. 즉, 접근성을 고려하여 디자인되어야 합니다.
• 유용성: 제공하는 기능이 사용자들이 원하는 것에 부합하고, 그것이 쉽게 이용 가능해야 합니다.
• 반응성: 디자인 요소와 기능들이 빠르게 반응하고 작동해야 합니다. 느린 반응 속도는 사용자 경험을 저하시킬 수 있습니다.
• 적절한 피드백 제공: 사용자들이 수행한 작업에 대한 적절한 피드백을 제공해야 합니다. 이는 사용자들이 자신이 수행한 작업의 결과를 쉽게 파악할 수 있도록 도와줍니다.

 

좋은 디자인이 저렇다는 것은 알겠지만 디자이너와 같이 협업한다고 생각을 해보자.

개발을 하는 우리는 디자이너가 만든 디자인을 반영해서 개발을 해야 한다.

 

그러면 개발자는 디자인을 안해도 되는것인가?

그래서 개발자 관점에서 바라본 좋은 UI / UX를 알아보겠다.

 

개발자 관점에서 보는 좋은 UI / UX

높은 반응성과 속도

위에서 봤듯이 반응성은 사용자 경험을 저하시키는 요인중 하나이다.

따라서 제공하는 기능들이 빠르게 반응하고 작동해야 하는 것이다.

위 상황을 예시로 들어보자.

어플리케이션을 실행하면 오른쪽은 거의 바로 데이터가 띄워지는 반면 왼쪽은 데이터가 약간의 딜레이가 있다.

위 상황은 같은 Coroutine 내부에 두개의 네트워크 통신을 순차적으로 실행시켜서 왼쪽 데이터가 딜레이가 생긴 것이다.

개발자는 이러한 딜레이가 최소화 될 수 있도록 코드를 작성해야 한다.

 

에러 처리와 안내 메시지

사용자가 에러와 만나게 되면 해당하는 에러에 대해 메시지를 안내해야 한다. 또한 이러한 에러를 잘 처리하는 것이 좋은 UI / UX를 만드는 방법이다.

위 상황은 네트워크 연결이 안된 상태에서 로그인을 시도하는 장면이다.

왼쪽은 에러에 대해 메시지를 출력하고 다시 시도할 수 있도록 에러를 처리했다.

반면에 오른쪽은 에러에 대해 대응하지 못하고 어플리케이션이 강제종료 된 모습을 보여준다,

이러한 차이도 UI / UX 설계면에서 중요한 요소이다.

 

다양한 환경 지원

당연히도 대부분의 기기에서 지원할 수 있도록 해야한다.

태블릿 스마트폰 할 거 없이 각자 환경에 맞추어 UI / UX가 구성되어야 한다.

연식이 오래된 스마트폰 혹은 최신 스마트폰 등 다양한 기기에서 문제가 없어야 하는 것도 동일하다.

이 프로젝트도 대부분의 기기에서 문제없이 정상작동하고 태블릿, 스마트폰 해상도 별로 UI도 문제 없이 구성되어있다.

하지만 오른쪽 끝에 실행이 되지않는 스마트폰이 있다.

해당 스마트폰은 2014년에 출시한 갤럭시 알파라는 스마트폰이고 API Level 21이다.

안드로이드 프로젝트를 시작할 때 위 사진처럼 API 버전 별로 사용률을 통계를 내준다.

통계자료를 보면 어플리케이션이 실행이 되지 않던 API Level 21은 사용률 0.3%로 극 소수만 사용하는 것으로 보여진다.

그러면 에러가 생긴 API의 에러들을 모두 수정해야할까?

 

꼭 그렇지만은 않다.

 

모든 API를 지원하게 된다면 API별로 처리를 해야하는 부분이 생길텐데 그런 부분에서 애를 쓸 것이다.

따라서 사용률이 높지 않은 API 레벨은 일부 무시하고 개발을 진행하는 경우도 있다.

 

또한 폴더블 스마트폰도 사용률이 많아지고 있으니 이러한 환경도 지원해야 한다.

 

적절한 컴포넌트 선택

레이아웃을 구성하는 요소의 컴포넌트 종류를 적절하게 사용해야 한다.

다음 예시를 보자.

디자이너가 버튼을 누르면 다른 액티비티로 이동하도록 디자인했을때 나올 수 있는 3가지 결과물이다.

첫번째는 그냥 텍스트를 누르면 별 반응없이 이동하고, 두번째는 텍스트를 누르면 Ripple 효과와 함께 이동하고, 세번째는 컴포넌트를 버튼으로 처리하여 누르면 이동한다.

 

첫번째는 TextView 컴포넌트에 리스너를 추가한 형태, 두번째는 TextView 컴포넌트에 Ripple 효과와 리스너를 추가한 형태, 세번째는 버튼 컴포넌트를 사용한 형태이다.

 

이렇듯 어떤 컴포넌트를 사용하냐에 따라 다른 결과를 보여주기 때문에 적절한 컴포넌트 사용을 해야 좋은 UI / UX를 만들어낼 수 있다.

 

애니메이션 사용

애니메이션을 사용하는 것도 좋은 UI / UX 디자인을 위한 방법이다.

위 사진처럼 같은 버튼이지만 애니메이션이 있고 없고에 따라 사용자 경험이 바뀌게 된다.

 

사용자를 유도하는 디자인

사용자를 유도하는 디자인은 다양한 경우가 있다.

위 처럼 콘텐츠를 화면에 완벽하게 배치하는 것보다 아래에 다음 콘텐츠를 일부 보여줌으로써 시각적 힌트를 제공해줘야 한다.

 

이외에도 인증번호 입력하는 부분에서 전화번호 입력하고 인증번호 전송을 누르면 인증번호 입력칸으로 자동으로 간다던지, 내용 입력 안하면 버튼 비활성화 시킨다던지 등등 정말 많다.

이러한 경우들은 아래 링크에 상세하게 경우들을 보여주니 참고하자.

모바일 UI·UX 디자인 시 고려해야 할 가이드라인 1

 

가이드라인 준수

무엇보다 가이드라인을 준수하는 것이 좋다.

혼자 개발하는 어플리케이션이면 가이드라인을 준수해서 개발해도 되고,

디자이너가 있다면 디자이너가 제공하지 않는 부분의 디자인은 공식적인 가이드라인을 참고하면 된다.

 

안드로이드 디자인 가이드라인은 Material Design이 공식 디자인으로 쓰인다.

Material Design

iOS 디자인 가이드라인은 Human Interface Gidelines를 채택하고 있다.

 

디자인 - Apple Developer

 

안드로이드 개발자라면 Material Design 가이드라인을 보고 디자인을 조금이나마 알았으면 좋겠다. 안드로이드는 워낙 개방된 플랫폼이기에 어플리케이션들이 중구난방이다. 따라서 이러한 가이드라인을 참고해서 어느정도 통일된 UI를 제공하면 애플 못지않게 깔끔한 마켓 생태계를 형성할 수 있을 것이다.

 

iOS 개발자라면 Human Interface Guidelines를 꼭 알아두면 좋을 것 같다. 워낙 까다로운 정책에 디자인이 요상하면 스토어 심사에서 Reject되는 경우가 있기 때문이다. Designd by Apple in California인 만큼 디자인이 중요한 iOS에서는 HIG를 꼭 알고있어야 할 것 같다.

 

모바일 UI / UX 디자이너를 꿈꾸는 디자이너라면.. 이 글을 안보겠지만 각 회사의 공식 가이드라인을 참고해서 디자인하면 좋을 것 같다는 생각이 든다.