요즘은 단순히 보기 좋은 디자인을 넘어 사용하기 편한 디자인, 즉 사용자 경험(UX)의 중요성이 높아지고 있습니다. 그런 만큼 최근 많은 디자이너의 고민 중 하나는 ‘어떻게 하면 최소한의 작업으로 최대한의 개선을 가져올 수 있을까?’입니다.

세상에 노력 없이 이루어지는 것이 없는 것처럼 디자인 역시 들이는 시간과 노력에 따라 그 퀄리티가 달라집니다. 하지만 노력의 효율을 높일 수 있는 방법은 존재합니다.

이번에는 전문 UI·UX 디자인 교육 업체, ‘UXPEAK’가 소개하는 UI·UX 디자인 팁과 요령 2부를 통해 앞선 물음에 대한 답을 찾습니다. 1부를 안보신 분들은 이전 글을 먼저 읽어보시는 것을 추천드려요.

1. 이미지 위에 텍스트를 적을 땐 주의하세요

배경 이미지 위에 텍스트가 포함된 구성 요소를 디자인할 때는 텍스트 가독성을 고려하는 것이 중요합니다. 예를 들어 어두운 배경 위에 밝은 텍스트를 넣으면 읽기 쉽지만, 반대로 밝은 배경 위에 같은 밝은 텍스트를 넣으면 가독성이 떨어질 수 있습니다.

특히나 일반 사용자가 제작한 콘텐츠를 다룰 때에는 더욱 배경 이미지의 종류에 관계 없이 요소가 더 잘 보이도록 해야 하며, 이를 위해서는 다양한 시나리오를 고려해 디자인을 해야 합니다. 사용된 이미지에 텍스트 가독성을 유지하는 방법은 몇 가지가 있는데요. 위 사진처럼 레이어에 블러 효과가 있는 오버레이를 배치하거나, 배경 자체에 블러 효과를 넣는 것이 대표적입니다.

2. 목록을 만들 때에도 디자인을 적용해보세요

최고의 사용자 경험을 만들기 위해서는 가끔은 고정 관념에서 벗어나 생각해보는 자세도 필요합니다. 특히 목록은 디자인에 따라 시각적으로 흥미로우면서도 사용자에게 훌륭한 경험을 제공할 수 있습니다. 정보와 즐거움을 동시에 주는 것이죠.

위 사진처럼 간단한 색상 지정, 텍스트 재정렬, 버튼 디자인 변경만으로도 사용자의 경험을 개선할 수 있습니다. 하지만 너무 창의적인 길로 나아가면 사용자의 경험을 해칠 수 있으니 그 부분은 주의해주세요.

3. 비밀번호 입력창은 더욱 사용자를 생각하세요

비밀번호 입력이 필요한 구성 요소를 디자인할 때는 다른 디자인보다 더 사용성을 고려해야 합니다. 대표적인 예시로는 사용자가 자신이 입력한 비밀번호를 볼 수 있도록 허용하세요. 위 사진의 경우 비밀 번호 입력창 오른쪽에 눈 모양의 아이콘을 배치하고, 사용자가 클릭하면 사용자가 입력한 비밀번호가 보이도록 설정했습니다.

사용자가 자신이 입력한 비밀번호를 볼 수 없도록 하는 것은 특히나 오타가 자주 발생하는 모바일 환경에서 불쾌한 사용자 경험 중 하나이며, 비밀 번호 입력 횟수가 늘어나고, 불필요한 트래픽 수가 증가해 홈페이지·서비스 제공자 입장에서도 좋지 않은 디자인입니다.

4. 비어있는 페이지도 중요합니다.

많은 UI·UX 디자이너가 아무 입력도 없는 빈 상태의 페이지나 창 같은 부분을 무시하는 경향이 있는데요. 하지만 이렇게 비어있는 창은 잘만 사용하면 상당한 비즈니스 이점을 강조하고 더욱 매력적인 사용자 경험으로까지 이어질 수도 있습니다. 디자인을 할 때 창의적이고 전략적 사고방식을 적극 사용해보세요.

위 사진은 ‘친구가 없습니다(You have no friends)’라는 문구 대신 ‘지금 바로 친구를 초대해보세요! 세상은 여러분과 소통하길 원합니다’라는 문구를 넣어 사용자가 적극적으로 서비스 내에서 친구를 만들기를 권장하고 있습니다. 이처럼 사용자에게 조언이나 행동을 권장하거나 촉구해보세요. 그림과 아이콘을 포함 하는 것도 좋은 방법입니다.

5. 체크박스, 라디오 버튼, 토글 스위치는 상황에 맞게 사용하세요

‘체크박스’ ‘라디오 버튼’ ‘토글 스위치’ 이 3가지는 일반적으로 UI·UX 디자인에 있어서 가장 많이 사용되는 선택 요소입니다. 보통 라디오 버튼은 여러 목록 중에서 하나의 옵션만을 선택할 경우에 사용을 권장합니다. 체크박스는 목록 중 두 개 이상의 옵션을 선택할 경우 사용을 추천하며, 마지막 토글 스위치는 ‘켜기’ ‘끄기’ 같은 두 가지 상태 중 한 쪽으로 전환할 경우에 사용하는 것이 좋습니다.

이처럼 디자인에 작은 개선과 조정을 더하는 것만으로도 제품이나 서비스에 대한 사용자의 만족도와 편의성이 크게 증가할 수 있습니다. 한 가지 더 팁을 드리자면요. UI를 디자인할 때는 목표로 하는 사용자와 함께 디자인을 테스트하기를 권합니다. A/B 테스트를 통해 다양한 디자인을 테스트하고 비교해 분석하는 것도 좋죠. 그러다 보면 자신만의 새로운 UI·UX 디자인 요령을 발견할 수 있을 것입니다.

👉 참고 콘텐츠: Top 5 UX/UI tips & tricks to improve your designs

글 : 김동욱 기자 

출처 : 디지털인사이트 ditoday.com

원문 : ditoday.com/%eb%8b%b9%ec%8b%a0%ec%9d%98-%eb%94%94%ec%9e%90%ec%9d%b8%ec%9d%84-%ea%b0%9c%ec%84%a0%ed%95%a0-5%ea%b0%80%ec%a7%80-ui%c2%b7ux-%ed%8c%81-2%eb%b6%80/