당신의 디자인을 개선할 UI·UX 팁
당신의 디자인을 개선할 UI·UX 팁
디자인 업계의 트렌드는 나날이 발전해나가고 있습니다. 하지만 종종 시각적으로 아름다워 보이지만 실제 사용에는 불편하거나 번거로운 디자인이 보입니다.
요즘은 단순히 보기 좋은 디자인을 넘어 사용하기 편한 디자인, 즉 사용자 경험(UX)의 중요성이 높아지고 있습니다. 그런 만큼 최근 많은 디자이너의
고민 중 하나는 ‘어떻게 하면 최소한의 작업으로 최대한의 개선을 가져올 수 있을까?’입니다. UI·UX 디자인 기술은 사용자가 좋아하는 제품이나 서비스를
만들 수 있는 가장 좋은 방법입니다. 시각적으로 만족스러운 인터페이스와 뛰어난 사용자 경험은 사용자에게 편리함을 넘어 즐거움과 감동을 제공할 수도 있습니다.
1. 카드 디자인은 사용자 친화적으로 만드세요
더 빠르게 정보를 찾을 수 있게 UI·UX 디자인을 개선한 카드
카드 디자인에 있어 사용자가 필요한 정보를 빠르게 찾게 하려면 시각적인 차별화 작업이 필수적입니다. 대표적으로 아이콘을 사용하거나, 텍스트에 볼드처리를
하거나, 폰트의 크기를 서로 다르게 하거나, 기타 고유한 시각적인 단서를 제공하는 방법 등으로 요소를 차별화해 사용자가 필요한 정보를 바로 찾을 수 있도록 하세요.
2. 버튼 배치 순서를 유의해주세요
UI·UX 디자인 개선에 따라 불필요한 시선 이동 감소
시각 심리학적으로 일반적인 사용자는 왼쪽부터 시작해 오른쪽으로 읽어나갑니다. 위 사진의 잘못된 디자인 예시엔 사용자의 눈길이 먼저 ‘삭제’ 버튼에 끌린 다음 ‘취소’ 버튼으로 이동하고 다시 삭제 버튼으로 돌아갑니다.
반대로 잘 만들어진 디자인 예시에서는 사용자의 시선이 ‘취소’에서 ‘삭제’로 순차적으로 이동합니다. 사용자의 불필요한 시선 이동과 혼란을 사전에 방지하고
있는 겁니다. 예시에서는 취소와 삭제를 들었지만, 보통 우측 버튼은 ‘진행’을 의미하며, 좌측 버튼은 ‘취소’나 이전으로 ‘돌아가기’를 의미하는 버튼이 들어갑니다.
3. 양식은 심플한 디자인을 유지하세요
입력창 배치만으로 달라지는 차이
수많은 시선 추적 연구 사례에서는 기입란(Input Filed)을 레이블(Labels)과 수평으로 배치하면 수직으로 배치하는 것보다 더 많은 시선 이동이 발생하며,
사용자에게 더 높은 인지 능력을 요구하거나, 혼란을 야기할 수 있다는 결과를 내놓았습니다. 일반적으로 기입란은 레이블 아래에 수직으로 배치하는 것이
훨씬 더 사용자 친화적이라 볼 수 있는 것이죠. 만약 이 조언을 무시하고 반드시 입력창 왼쪽에 레이블을 배치해야 할 상황에는 레이블과 기입란을 우측에 정렬하는 걸 추천합니다.
4. 일관된 아이콘을 사용하세요
마구잡이로 쓰인 아이콘과 통일감 있는 아이콘
디자인에 아이콘을 사용하는 것은 앞서 말한 것처럼 특정 요소를 강조해 사용자가 더 쉽게 정보를 파악할 수 있게 해줍니다. 그렇지만 아이콘을 사용할 때에는 일관성을 유지하는 것도 중요합니다. 다양한 스타일의 아이콘을 혼합해 사용하지 마세요.
예시로 들자면 심플한 스타일의 아이콘을 사용할 때 복잡한 스타일의 아이콘과 같이 사용하지 마세요. 윤곽선으로만 이루어진 아이콘을 사용할 때 내부가
채워진 아이콘과 혼합해 사용하는 것도 금물입니다. 이 일관성을 유지하면 사용성이 높아지는 것은 물론, 디자인이 더욱 전문적이고 심미적으로도 아름답게 보입니다.
5. 텍스트 스타일을 사용해보세요
텍스트 스타일 추가에 따른 가독성 개선 예시
제목과 단락의 모양새는 가독성과 긴밀하게 연결돼 있습니다. 그렇기 때문에 가독성을 향상시키기 위해 여러가지 텍스트 스타일을 사용하는 것을 추천합니다. 여백, 크기, 줄 높이, 두께, 문자 간격 등을 조정해 매력적인 디자인을 만들어보세요.
중요한 것은 제목과 본문 텍스트 사이에 뚜렷한 대비를 설정하는 겁니다. 예시처럼 본문 텍스트보다 제목을 더 굵고 크게 만들어 가독성을 향상시키는 방법이 대표적입니다.
하지만 자칫 시각적 감각을 중시해 필요 이상의 너무 많은 스타일을 넣으면 글이 복잡하게 보이게 될 우려가 있습니다. 시각적 감각보다는 가독성을, 더 나아가 사용성을 우선시하세요.
6. 이미지 위에 텍스트를 적을 땐 주의하세요
배경 이미지 위 텍스트 배치의 나쁜 예시와 좋은 예시(자료=UXPEAK)
배경 이미지 위에 텍스트가 포함된 구성 요소를 디자인할 때는 텍스트 가독성을 고려하는 것이 중요합니다. 예를 들어 어두운 배경 위에
밝은 텍스트를 넣으면 읽기 쉽지만, 반대로 밝은 배경 위에 같은 밝은 텍스트를 넣으면 가독성이 떨어질 수 있습니다.
특히나 일반 사용자가 제작한 콘텐츠를 다룰 때에는 더욱 배경 이미지의 종류에 관계 없이 요소가 더 잘 보이도록 해야 하며, 이를 위해서는 다양한 시나리오를 고려해 디자인을 해야 합니다. 사용된 이미지에 텍스트 가독성을 유지하는 방법은 몇 가지가 있는데요. 위 사진처럼 레이어에 블러 효과가 있는 오버레이를
배치하거나, 배경 자체에 블러 효과를 넣는 것이 대표적입니다.
7. 목록을 만들 때에도 디자인을 적용해보세요
최고의 사용자 경험을 만들기 위해서는 가끔은 고정 관념에서 벗어나 생각해보는 자세도 필요합니다. 특히 목록은 디자인에 따라 시각적으로 흥미로우면서도
사용자에게 훌륭한 경험을 제공할 수 있습니다. 정보와 즐거움을 동시에 주는 것이죠.
위 사진처럼 간단한 색상 지정, 텍스트 재정렬, 버튼 디자인 변경만으로도 사용자의 경험을 개선할 수 있습니다. 하지만 너무 창의적인 길로 나아가면 사용자의 경험을 해칠 수 있으니 그 부분은 주의해주세요.
8. 비밀번호 입력창은 더욱 사용자를 생각하세요
입력한 비밀번호 보기 버튼을 사용한 사용자 배려(자료=UXPEAK)
비밀번호 입력이 필요한 구성 요소를 디자인할 때는 다른 디자인보다 더 사용성을 고려해야 합니다. 대표적인 예시로는 사용자가 자신이 입력한 비밀번호를
볼 수 있도록 허용하세요. 위 사진의 경우 비밀 번호 입력창 오른쪽에 눈 모양의 아이콘을 배치하고, 사용자가 클릭하면 사용자가 입력한 비밀번호가 보이도록 설정했습니다.
사용자가 자신이 입력한 비밀번호를 볼 수 없도록 하는 것은 특히나 오타가 자주 발생하는 모바일 환경에서 불쾌한 사용자 경험 중 하나이며, 비밀 번호
입력 횟수가 늘어나고, 불필요한 트래픽 수가 증가해 홈페이지·서비스 제공자 입장에서도 좋지 않은 디자인입니다.
9. 비어있는 페이지도 중요합니다.
빈 상태의 페이지 활용 예시(자료=UXPEAK)
많은 UI·UX 디자이너가 아무 입력도 없는 빈 상태의 페이지나 창 같은 부분을 무시하는 경향이 있는데요. 하지만 이렇게 비어있는 창은 잘만 사용하면
상당한 비즈니스 이점을 강조하고 더욱 매력적인 사용자 경험으로까지 이어질 수도 있습니다. 디자인을 할 때 창의적이고 전략적 사고방식을 적극 사용해보세요.
위 사진은 ‘친구가 없습니다(You have no friends)’라는 문구 대신 ‘지금 바로 친구를 초대해보세요! 세상은 여러분과 소통하길 원합니다’라는 문구를 넣어 사용자가 적극적으로 서비스 내에서 친구 만들기를 권장하고 있습니다. 이처럼 사용자에게 조언이나 행동을 권장하거나 촉구해보세요.
그림과 아이콘을 포함 하는 것도 좋은 방법입니다.
10. 체크박스, 라디오 버튼, 토글 스위치는 상황에 맞게 사용하세요
‘체크박스’, ‘라디오 버튼’, ‘토글 스위치’ 이 3가지는 일반적으로 UI·UX 디자인에 있어서 가장 많이 사용되는 선택 요소입니다. 보통 라디오 버튼은 여러 목록 중에서 하나의 옵션만을 선택할 경우에 사용을 권장합니다. 체크박스는 목록 중 두 개 이상의 옵션을 선택할 경우 사용을 추천하며,
마지막 토글 스위치는 ‘켜기’, ‘끄기’ 같은 두 가지 상태 중 한 쪽으로 전환할 경우에 사용하는 것이 좋습니다. 이처럼 디자인에 작은 개선과 조정을 더하는 것만으로도 제품이나 서비스에 대한 사용자의 만족도와 편의성이 크게 증가할 수 있습니다.
UI를 디자인할 때는 목표로 하는 사용자와 함께 디자인을 테스트하기를 권합니다. A/B 테스트를 통해 다양한 디자인을 테스트하고 비교해 분석하는 것도 좋죠. 그러다 보면 자신만의 새로운 UI·UX 디자인 요령을 발견할 수 있을 것입니다.
11. 중요한 정보는 우선순위를 정해두세요
나쁜 강조 표시 예시(상단)과 좋은 강조 표시(하단)(자료=UXpeak)
디자인 전에 프로젝트에 포함할 기능이나 요소를 나열하고, 사용자 관점에서 중요도에 따라 순위를 매겨보세요. 그런 다음 색상이나 크기의 대비, 위치 조정을 통해 중요 정보를 강조하면 자연스럽게 직관적이고 편리한 UI 디자인이 가능합니다.
하지만 우선순위를 정할 때는 조심해야 합니다. 흔한 실수 중 하나가 엉뚱한 요소를 강조하는 것인데요. 위 자료의 첫 번째 예시는 측정 항목을 큰 크기로 설정해 정작 중요한 수치에는 시선이 가지 않습니다. 반면 두 번째 예시에선 수치를 크게 작업해 사용자가 원하는 정보를 빠르게 확인할 수 있습니다.
12. 배너에 콘텐츠 내용을 포함시키세요
콘텐츠 정보를 포함한 콘텐츠 배너 디자인의 좋은 예시(좌) 나쁜 예시(우) (자료=UXpeak)
위 자료에서 가장 먼저 시선이 향하는 곳은 “우리 셰프가 꼽은 100가지 이상의 레시피를 찾아보세요(Discover 100+ reipes ‘‘‘‘‘‘‘‘‘select‘‘‘‘‘‘‘‘‘ed by our chefs)”라는 글귀가 적힌 대형 배너입니다. 글귀 자체는 흥미진진하게 들리겠지만 벌써 사용자에게 추가적인 행동을 요구합니다.
실제 레시피를 보기 위해선 배너를 클릭해야 하며, 이는 사용자에게 ‘장벽’으로 작용합니다. 콘텐츠를 바로 보여주지 않는다면
사용자는 배너를 클릭하는 대신 그냥 지나치거나 ‘뒤로가기’ 버튼을 누릅니다. 이럴 때 필요한 건 “손쉬운 상위 레시피 10개” 등의 콘텐츠 리스트를 바로 보여주는 겁니다.
콘텐츠를 포함한 배너 디자인은 사용자에게 앱 서비스의 정보를 빠르게 제공하며, 이를 통해 앱 신규 유입을 늘리는 데 도움을 줍니다.
13. 입력창은 맞춤형으로 디자인해주세요
입력창 디자인의 좋은 예시(우)와 나쁜 예시(좌)(자료=UXpeak)
많은 UI 디자이너가 입력창을 제작할 때 모두 같은 디자인을 적용하고 싶은 유혹을 받습니다. 하지만 그런 유혹에 빠지면 사용자 경험을 해칠 수 있습니다.
핵심은 사용자가 입력해야 하는 정보에 어울리는 맞춤형 입력창을 디자인하는 겁니다.
카드 데이터 입력 디자인의 좋은 예시(우)와 나쁜 예시(좌)(자료=UXpeak)
위 자료는 카드 데이터 입력 디자인 예시입니다. 좌측에는 CVC, 만료일, 번호 입력창 모두 똑같은 디자인으로 제작됐습니다. 하지만 우측은 입력할 번호의
길이에 맞춰 조절된 영역들이 배치됐죠. 대표적으로 카드 데이터 중 가장 짧은 CVC는 항상 3자리 또는 4자리를 고려해 짧은 영역을 사용하곤 합니다.
두 가지 자료는 입력 데이터에 맞춘 최적화 디자인의 필요성을 보여주는 좋은 예시입니다. 맞춤형 입력창 디자인을 사용하면 디자이너는 공간을 효율적으로
활용할 수 있으며, 사용자에게 답변에 대한 명확한 가이드라인을 전달할 수 있습니다.
14. 윤곽선 사용에는 주의해주세요
윤곽선을 최소화한 예시(우)와 윤곽선을 과도하게 사용한 예시(좌)(자료=uxpeak)
윤곽선과 배경색은 디자인에 많은 요소를 더할 수 있지만 너무 지나치게 사용하는 것은 주의해야 합니다. 윤곽선을 과도하게 사용하면 UI가 복잡해 보이거나,
구식처럼 보일 수 있습니다. 좌측에서는 여러 윤곽선과 배경색을 사용한 디자인을 볼 수 있습니다. 각 영역들을 명확하게 구분하려는 의도일 수도 있지만 결과적으로는
시각적 과부하가 발생했습니다. 이런 디자인은 윤곽선과 색상이 너무 많아 사용자가 필수 요소에 집중하기 어렵습니다. 반대로 우측 예시에서는 윤곽선을
거의 사용하지 않았지만, 대신 영역을 구분하기 위해 색상과 넉넉한 공백을 사용했습니다. 결과적으로 UI를 더 쉽게 알아볼 수 있는 것은 물론, 좀 더 정갈한 분위기가 느껴집니다.
15. 윤곽선은 얇고 가벼운 걸 써주세요
두꺼운 윤곽선을 사용한 예시(자료=uxpeak)
꼭 필요한 부분에 결정적으로 사용된 윤곽선은 매우 강력하고 효과적입니다. 윤곽선을 사용하지 않으면 분리와 초점이라는 목표를 달성할 수 없죠.
결국 올바른 균형을 찾는 것이 중요합니다.
대신 너무 두꺼운 선을 사용하는 것은 피해야 합니다. 너무 두껍고 어두운 윤곽선은 콘텐츠를 압도해 디자인에 무겁고 오래된 느낌을 줄 수 있습니다.
위 자료가 대표적인 예시입니다.
가볍고 얇은 윤곽선을 사용한 예시(자료=uxpeak)
반면 얇고 가벼운 윤곽선을 사용하면 시선을 분산시키지 않고서도 다양한 영역을 구분할 수 있습니다. 또한 시선 방해가 적은 윤곽선은
가볍고 개방적이며, 심미적인 아름다움을 제공할 수 있습니다. 그 결과 많은 사용자가 눈이 편안한 얇고 가벼운 윤곽선을 선호합니다.
출처: https://www.designdb.com/?menuno=668#gsc.tab=0
