좋은 UI를 만드는 방법

목차

 

이 글은 제가 공부를 하면서 정리한, 좋은 UI를 만드는 방법입니다.

 

웹 프론트엔드 개발이나 모바일 앱 개발을 하신 분이라면, 사용자가 직접 접하는 부분을 어떻게 만들지 고민해 보셨을 겁니다. 이러한 사용자 인터페이스(UI)를 설계할 때 기억해 두면 좋은 몇 가지 포인트들를 알아보겠습니다.

 

UI 설계의 기본 방향

앱을 전자레인지로 비유한다면 데워지는 기능은 앱의 기능이고 버튼 옆에 있는 아이콘, 기능 설명과 같은 것들이 UI가 되겠습니다.

다양한 사람들이 사용하는 만큼 단순하면서도 누가 봐도 한눈에 무슨 뜻인지 이해할 수 있는 게 좋겠죠?

전자레인지와 UI

 

좋은 UI란?

• 잘 보임 (눈에 띄는 색, 글씨 크기)
• 클릭하기 쉬움 (버튼 크기, 아웃라인)
• 클릭할 수 있는지 아닌지 알기 쉬움 (글씨 색, 버튼인지 아닌지)
• 기능을 이해하기 쉬움 (이해하기 쉬운 아이콘, 아이콘 밑 설명)
• 정보이해를 하기 쉬움 (제목 본문 구분)
• 사용자가 필요한 정보를 쉽게 찾을 수 있음 (위치)
• 폼의 입력이 간단함 (보기 쉽고 어떻게 입력해야 하는지 알기 쉬움)

또 이러한 UI를 만드는 목적은 사이트의 주목적인 기능까지 도달하는 시간을 더 짧게 하는 데 있습니다.

예로 든 전자레인지는 주목적인 음식을 데우는 것까지 드는 시간을 얼마나 짧게 할 수 있는지가 중요하다고 할 수 있습니다.

실제로 온라인 전자상거래 사이트인 아마존은 첫 구매까지 걸리는 시간을 줄이는 데 노력했다고 합니다.

 

UI 요소별 참고사항

1. 아이콘

아이콘은 무슨 뜻인지 유추하기 쉬운 것을 사용해야 하며 아이콘 밑에 라벨(글자 설명)을 함께 다는 것이 좋습니다.

그리고 앱 안의 아이콘은 모두 통일된 스타일이 좋습니다.

덜 중요한 정보라면 호버 제스처를 사용해 아이콘 설명을 띄우는 것도 상황에 따라 좋을 수 있습니다.

아이콘과 라벨

2. 탭 / 사이드바

탭이나 사이드바는 얼핏 생각하면 화면을 깔끔하게 해서 좋을 것 같지만 화면에서 기능들을 숨겨버리기 때문에 안 좋을 수 있습니다.

그래서 템, 사이드바를 사용하는 대신 요소들을 숨기지 않는다면 좋을 수 있습니다. (단, 화면이 복잡해지는 것도 주의)

기본으로 사이드바를 펼쳐놓고 끄게 할 수도 있고 호버 제스처를 적절히 사용할 수도 있습니다.

사이드와 탭을 수정한 모습

3. 텍스트

되도록 폰트를 크게 하는 게 좋습니다.

제목과 본문의 위계 구조가 한 눈에 띄는 것이 좋습니다.

4. 색깔

눌렀을 때 기능이 있는 텍스트의 경우 색깔을 다르게 하는 것이 좋습니다. (반대로 기능이 없는 경우 무채색)

또 다크모드는 기본설정이 아니라 사용자가 변경할 수 있는 선택사항으로 해놓는 것이 좋습니다.

기능이 있는 텍스트는 채색, 다크모드는 선택사항

5. 위치

자주 쓰는 기능, 중요한 기능는 화면 가운데에 배치하는 것이 좋습니다.

중요한 기능/자주 쓰는 기능은 중앙에

.

.

.

이상으로 글을 마치도록 하겠습니다. 읽어주셔서 감사합니다.

 

참고한 유튜브 채널

디자인베이스님

코딩애플님

 

*** 이 글의 내용은 제가 공부하면서 이해하고 정리한 내용이므로 다른 컨텐츠 크리에이터의 설명과 동일할 수 있고 제 설명에 부족한 점이 있을 수 있습니다. ***