brunch

매거진 작고 소중한 디자인 아티클

라이킷 83

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by willy willy Jan 12. 2022

알고 있지만, 기초가 되는 좋은 UI를 만드는 5가지

Design Text

최근에 저는 Android에서 현재 회사 앱 UI를 트렌디하게 리브랜딩 하자는 작업을 제안받았습니다. 콘셉트의 주제는 모던, Young, 쿨 등의 단어들이 나왔지만, 이러한 내용들은 실제 디자인했을 때에 있어 상당히 모호한 표현입니다. 그렇다면 디자인을 트렌디하거나 트렌디하지 못하다는 기준을 만드는 것은 무엇일까요?

의미는 사람마다 바뀝니다. 하지만 그 말을 하고 그냥 둘 수는 없습니다. 그래서 우리가 일반적으로 모던하고, 젊고, 멋지다고 인식하는 다양한 앱들의 레퍼런스를 살펴보며 하루 종일 보냈습니다. Airbnb, Coinbase, Robinhood, Uber, Swiggy, Headspace, Cocoon, Eventbrite, Public, Wise 및 Google Pay와 같은 앱들을 벤치마킹하였고, Mobbin이라는 애플리케이션 벤치마킹 사이트에서 나는 더 많은 경우의 애플리케이션을 보았습니다.

이 모든 앱을 살펴보면 모든 사람들이 트렌디하게 보이기 위해 Neumorphism과 같은 멋진 디자인 스타일을 채택한 것은 아니라는 생각이 들었습니다. 그들은 트렌디하게 작업을 하기 위해 한 방법은 아주 간단했습니다. 너무 간단해서 5가지 꿀팁으로 정리해봤어요 �

1. 여백 여백 여백

줄 높이, 여백, 간격, 특히 가로 여백에서 디자이너들이 완벽한 간격을 잡는 것에 대해 가지고 있는 두려움이 있다는 것을 생각했어요. 대부분의 경우 목표는 사용자의 뷰포트에 최대한 많은 콘텐츠를 맞추는 것입니다.

전 세계 인구의 87% 이상이 720px 이상의 기기를 소유하고 있습니다.

이것은 더 많은 공간을 추가할 수 있는 수직 공간이 많다는 것을 의미합니다. 8px 여백이 필요하다고 생각되면 12px를 시도하십시오. 더 크게 시작하고 너무 많다고 느끼면 줄이십시오.

적당한 간격 vs 좁은 간격

2. 보이지 않는 헤더

단색 헤더(배경색과 다름)를 제거해보세요. 이렇게 하면 디자인에 꼭 필요한 여백을 자동으로 추가하여 통기성을 높이고 콘텐츠 간의 여백을 덜 어수선하게 만듭니다.

3. 곡선을 과시하자

진화론적 관점에서 우리는 날카로운 물체를 위협 또는 공격적인 것으로 인식하고 둥근 물체를 친근하거나 안전한 것으로 인식하는 법을 배웠습니다. 과거에 이것은 오늘날에도 여전히 우리 안에 남아 있습니다. 콘셉트 기획에서부터 시크함을 잡지 않았다면, 콘텐츠 박스에 라운드 값을 주는 것을 권장합니다.

모서리가 뾰족한 물체는 자연에서 거의 찾아볼 수 없습니다. 세상은 둥근 모서리로 이루어져 있습니다. 날카로운 모서리는 당신을 다치게 합니다. 날카로운 모서리는 피해야 합니다 - 스티브 잡스

4. 적절한 이미지 사용

인간은 시각적 동물입니다. 3M Corporation의 연구에 따르면 우리는 텍스트보다 시각 자료가 60,000배 더 빠르게 처리된다고 합니다. 너무 당연한 이야기이지만, UX 디자인에서 이미지는 사진과 일러스트레이션 두 가지로 분류할 수 있습니다. 이미지가 더 많은 콘텍스트를 추가하는 데 도움이 된다고 생각되면 추가하세요. 적절한 이미지를 선택하게 된다면, 내용이 많은 콘텐츠 영역을 지루하지 않게 만듭니다.