배너 문구는 어떻게 작성하는 것이 좋을까요? 그래프 수치부터 배너 문구, 입력창, 윤곽선까지 앱 디자인에 필요한 UI·UX 디자인 팁을 정리했습니다.

1. 중요한 정보는 우선순위를 정해두세요

디자인 전에 프로젝트에 포함할 기능이나 요소를 나열하고, 사용자 관점에서 중요도에 따라 순위를 매겨보세요. 그런 다음 색상이나 크기의 대비, 위치 조정을 통해 중요 정보를 강조하면 자연스럽게 직관적이고 편리한 UI 디자인이 가능합니다.

하지만 우선순위를 정할 때는 조심해야 합니다. 흔한 실수 중 하나가 엉뚱한 요소를 강조하는 것인데요. 위 자료의 첫 번째 예시는 측정 항목을 큰 크기로 설정해 정작 중요한 수치에는 시선이 가지 않습니다. 반면 두 번째 예시에선 수치를 크게 작업해 사용자가 원하는 정보를 빠르게 확인할 수 있습니다.

2. 배너에 콘텐츠 내용을 포함시키세요

위 자료에서 가장 먼저 시선이 향하는 곳은 “우리 셰프가 꼽은 100가지 이상의 레시피를 찾아보세요(Discover 100+ reipes selected by our chefs)”라는 글귀가 적힌 대형 배너입니다. 글귀 자체는 흥미진진하게 들리겠지만 벌써 사용자에게 추가적인 행동을 요구합니다.

실제 레시피를 보기 위해선 배너를 클릭해야 하며, 이는 사용자에게 ‘장벽’으로 작용합니다. 콘텐츠를 바로 보여주지 않는다면 사용자는 배너를 클릭하는 대신 그냥 지나치거나 ‘뒤로가기’ 버튼을 누릅니다.

이럴 때 필요한 건 “손쉬운 상위 레시피 10개” 등의 콘텐츠 리스트를 바로 보여주는 겁니다. 콘텐츠를 포함한 배너 디자인은 사용자에게 앱 서비스의 정보를 빠르게 제공하며, 이를 통해 앱 신규 유입을 늘리는 데 도움을 줍니다.

3. 입력창은 맞춤형으로 디자인해주세요

많은 UI 디자이너가 입력창을 제작할 때 모두 같은 디자인을 적용하고 싶은 유혹을 받습니다. 하지만 그런 유혹에 빠지면 사용자 경험을 해칠 수 있습니다. 핵심은 사용자가 입력해야 하는 정보에 어울리는 맞춤형 입력창을 디자인하는 겁니다.

맞춤형 입력창 디자인은 번거로움을 줄일 뿐만 아니라, 불필요한 인지 부하를 해소해 더욱 원활하고 효율적인 사용자 경험을 제공합니다. 위 인증 코드 입력을 위한 두 가지 디자인이 대표적인 예시입니다.

우측은 4개의 박스가 있으며, 번호 순서대로 명확하게 공간을 지정해 사용자가 잘못된 비밀번호를 입력할 리스크를 최소화했습니다. 큰 박스 크기로 인해 시력에 문제가 있거나 텍스트 크기로 인해 어려움을 겪는 사용자를 배려할 수도 있죠. 반대로 좌측은 단일 구성의 긴 영역을 사용했습니다. 그 결과 사용자가 자신이 몇 번째 번호를 입력하고 있는지 착각해 비밀번호를 틀릴 리스크가 커졌습니다.

위 자료는 카드 데이터 입력 디자인 예시입니다. 좌측에는 CVC, 만료일, 번호 입력창 모두 똑같은 디자인으로 제작됐습니다. 하지만 우측은 입력할 번호의 길이에 맞춰 조절된 영역들이 배치돼 있죠. 대표적으로 카드 데이터 중 가장 짧은 CVC는 항상 3자리 또는 4자리인 걸 고려해 짧은 영역을 사용하고 있습니다.

두 가지 자료는 입력 데이터에 맞춘 최적화 디자인의 필요성을 보여주는 좋은 예시입니다. 맞춤형 입력창 디자인을 사용하면 디자이너는 공간을 효율적으로 활용할 수 있으며, 사용자에게 답변에 대한 명확한 가이드라인을 전달할 수 있습니다.

4. 윤곽선 사용에는 주의해주세요

윤곽선과 배경색은 디자인에 많은 요소를 더할 수 있지만 너무 지나치게 사용하는 것은 주의해야 합니다. 윤곽선을 과도하게 사용하면 UI가 복잡해 보이거나, 구식처럼 보일 수 있습니다.

좌측에서는 여러 윤곽선과 배경색을 사용한 디자인을 볼 수 있습니다. 각 영역들을 명확하게 구분하려는 의도일 수도 있지만 결과적으로는 시각적 과부하가 발생했습니다. 이런 디자인은 윤곽선과 색상이 너무 많아 사용자가 필수 요소에 집중하기 어렵습니다.

반대로 우측 예시에서는 윤곽선을 거의 사용하지 않았지만, 대신 영역을 구분하기 위해 색상과 넉넉한 공백을 사용했습니다. 결과적으로 UI를 더 쉽게 알아볼 수 있는 것은 물론, 좀 더 정갈한 분위기가 느껴집니다.

5. 윤곽선은 얇고 가벼운 걸 써주세요

꼭 필요한 부분에 결정적으로 사용된 윤곽선은 매우 강력하고 효과적입니다. 윤곽선을 사용하지 않으면 분리와 초점이라는 목표를 달성할 수 없죠. 결국 올바른 균형을 찾는 것이 중요합니다.

대신 너무 두꺼운 선을 사용하는 것은 피해야 합니다. 너무 두껍고 어두운 윤곽선은 콘텐츠를 압도해 디자인에 무겁고 오래된 느낌을 줄 수 있습니다. 위 자료가 대표적인 예시입니다.

반면 얇고 가벼운 윤곽선을 사용하면 시선을 분산시키지 않고서도 다양한 영역을 구분할 수 있습니다. 또한 시선 방해가 적은 윤곽선은 가볍고 개방적인 심미적인 아름다움을 제공할 수 있습니다. 그 결과 많은 사용자가 눈이 편안한 얇고 가벼운 윤곽선을 선호합니다.

👉 참고 콘텐츠: Top UI/UX design tips every designer needs to know about, part 3

글 : 김동욱 기자 

출처 : 디지털인사이트 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-3%eb%b6%80/