🔖 UXUI 해외 인기 아티클

🔖 2022년 3월 4주 TOP3

피그마에서 웹 디자인을 할때 반응형과 유동적인 그리드를 구축하는 방법

사용자가 프로덕트와 상호 작용하는 데 있어서 현재의 기술적인 시나리오에서는 사용자들이 사용하는 기기들을 다 예측할 수가 없습니다. 이것 때문에 항상 모든 기기를 대응할 수 있도록 구축하는 것이 좋은 이유입니다.

그러나 매일마다 출시되는 다양한 화면들로 인해 모든 화면 크기에 맞게 하나하나 디자인한다는 것은 거의 불가능에 가깝죠.

그렇다면 대안은 무엇일까요? 바로 반응이 빠르고 확장이 가능한 그리드입니다!

반응형 그리드를 사용하게 되면 화면 크기에 따라 레이아웃이 변경되도록 가이드라인을 설정할 수 있습니다. 이 방식으로 인해 우리는 우리의 디자인이 기존 화면에서 매끄럽게 보이고 또한 미래에 대비할 수 있도록 보장됩니다. 또 뭘까요? 그리드는 또한 일관된 레이아웃을 생성하고 의사 결정을 최소화할 수 있습니다.

만약 마릴린 먼로가 디자이너였다면, 그 유명한 노래의 가사는 "그리드는 디자이너의 가장 친한 친구다"로 바뀌었을지도 모르겠네요.

이번 아티클에서는 정확한 측정과 실제 사례를 통해서 반응형 그리드를 처음부터 구축할 수 있는 방법을 알아보도록 하겠습니다.

그리드 해부(Grid Anatomy)

우선 더 깊이 파고 들기 전에 그리드를 만드는 데 도움이 되는 몇 가지 기본 요소들을 살펴보겠습니다.

그리드를 만들때 설정되는 컬럼, 거터 및 마진의 수에 대한 값이 엄격되고 빠른 규칙은 없습니다. 그리드의 사양들은 구축 중인 프로젝트에 따라 다르니까요. 거터는 원하는 스타일과 느낌에 따라 멀리 떨어져 있을 수도 있고 마진이 전혀 없을 수도 있습니다.

그리드의 종류

반응형 그리드는 각 중단점에 대해 유동적일 수도 고정적일 수도 있습니다. 이것의 차이로 내부의 콘텐츠들이 화면 크기에 따라 확장되는 방식에 영향을 받게 됩니다.

고정형 그리드(Fixed Grid)

고정형 그리드에서는 콘텐츠의 최대 너비(max-width/컬럼 사이즈)는 고정된 상태로 유지됩니다. 화면 크기가 변경되면 마진의 크기가 증가하거나 감소합니다. 컬럼이 더 이상 화면에 맞지 않을 때에만 콘텐츠 레이아웃이 변경이 됩니다.

고정형 그리드는 레이아웃의 최대 너비를 제어해야 할 때 잘 작동됩니다. 콘텐츠가 더 큰 화면에서 늘어나지 않게 표시되도록 도와줍니다.

유동형 그리드(Fluid grid)

이 그리드에서는 마진은 고정된 상태로 유지되고 컬럼 크기가 브라우저 너비에 따라 조정됩니다. 요소가 확장되어 나타날 수도 있지만 사용 가능한 화면 공간들을 활용합니다. 콘텐츠의 레이아웃은 화면 크기에 따라 계속 변경됩니다. 유동형 그리드는 주어진 중단점(Breakpoint) 범위내에서 많은 화면 크기들을 수용할 때 잘 작동됩니다.

💡 꿀팁: 데스크탑의 경우 그리드를 고정형으로 설정하고 태블릿 및 휴대폰 기기 경우 유동형으로 설정하는 것이 가장 베스트입니다.

그리드 구축해보기

<제 1단계: 중단점(Breakpoint) 결정하기>

기기의 크기나 브라우저 너비가 변경되면 페이지 내용이 가능한 최상의 레이아웃에 맞게 조정이 됩니다. 중단점에는 최소 너비 속성이 있습니다. 이것은 화면 스크린의 두 중단점 사이에서 더 작은 중단점의 크기를 상속함을 의미합니다. 기기 전체에서 디자인이 일관될 수 있도록 하려면 최소한 3개의 중단점을 디자인해야 합니다.

그럼 3개의 중단점인 360px, 720px 및 1280px으로 설정해 봅시다. 우리에게 이것은 다음과 같은 범위를 제공합니다:

<제 2단계: 프레임과/아트보드 추가하기>

Figma(또는 선호하는 다른 도구)에서 각 기기에 대한 프레임을 추가하세요. 기기 치수는 각각 선택된 중단점 사이에 있어야 합니다. 여기서는 저는 Figma 프리셋 설정 프레임에서 선택해보았습니다.

다양한 장치를 위한 Figma 프레임

<제 3단계: 그리드 추가하기>

모바일 프레임을 선택하고 컬럼 그리드를 추가합니다. 컬럼 수를 4로, 거터를 16으로, 마진을 24로 설정합니다. 컬럼 너비는 자동으로 맞춰집니다. 이는 즉, 그리드가 유동적임을 의미합니다.

모바일 그리드(360px ~ 720px)

마찬가지로 컬럼의 수를 4에서 8로 늘리는 것을 제외하고 그냥 그대로 동일한 값으로 태블릿 프레임에 그리드를 추가합니다. 컬럼을 추가하면 더 큰 화면에서 더 많은 레이아웃 옵션을 제공하기 때문에 콘텐츠가 너무 늘어나 보이지 않습니다.

태블릿 그리드(720px ~ 1280px)

앞서 언급했듯이, 데스크탑용으로 디자인할 때는 고정 그리드로 전환하는 것이 가장 좋습니다. 이렇게하는 방법은 데스크탑 프레임에 컬럼 그리드를 추가하고 '유형(Type)'을 '늘이기(Strech)'에서 '중앙(Center)'으로 바꿉니다. 이렇게 하면 마진이 비활성화되고 컬럼 너비를 추가할 수 있습니다.

컬럼 너비를 80px로 설정하고 마진을 16px(다시 설정)로 설정하고 컬럼 수를 12개로 늘립니다. 12개의 컬럼은 6, 4 또는 3의 동일한 그룹으로 나눌 수 있게되므로 다양한 레이아웃을 생성할 수 있는 유연성을 가지게 됩니다. 또는 3–6–3, 2–8–2와 같은 다른 조합으로도 말이죠.

데스크탑 그리드(1280px ~)

👉 참고: 웹 앱의 경우에는 유동형 그리드를 최대 1440px로 설정하는 것이 가장 좋습니다. 고정형 그리드와 함께 제공되는 추가 마진/공백을 항상 잃을 여유가 없기 때문입니다. 그러나 1440px 이상에서는 콘텐츠가 매우 늘어나 보일 수도 있으므로 그 이상(1440px~)으로 넘어갈때는 고정형으로 전환하는 것이 가장 베스트입니다.

. . 👇 더 자세한 내용은 아래 원문에서 확인해주세요.

나쁜 UX 디자인

— SaaS에서 피하지 못하는 최악의 UX 디자인 13가지

SaaS의 관점에서 볼 때 열악한 사용자 경험은 때때로 유료 고객 또는 수백 명의 고객을 잃는 것을 의미할 수 있습니다.

따라서 어떤 디자인 함정에 주의해야 하는지 아는 것이 중요합니다. 그렇게 하면 프로덕트에서 이러한 요소를 제거하거나 애초에 그런 식으로 디자인하지 않는 것이 좋습니다.이 기사에서는 지금까지 본 최악의 디자인 실수 13가지를 나열했습니다.

나쁜 UX 디자인 #1: 새로운 기능, 새로운 탭

매일 작업하는 것처럼 프로젝트 관리 소프트웨어를 훑어보다가 갑자기 새로운 타임 트래킹 기능을 발견했다고 상상해보세요.

새로운 기능이 궁금해서 클릭하면 새 탭이 열립니다.

이전에 하던 일에서 멀어지기 때문에 사용자의 관점에서 이것은 성가신 일입니다.

SaaS 회사의 관점에서 이것은 특히 Userpilot과 같은 온보딩 소프트웨어를 사용하는 경우 최악입니다.

사용자가 새 탭에서 페이지를 열면 페이지 변경이 등록되지 않는 경우가 많습니다. 따라서 사용자가 새 기능을 클릭하면 도구 설명이 표시되도록 자동화된 온보딩 시스템을 설정한 경우 도구 설명이 표시되지 않습니다!

이는 온보딩 시스템을 구축하기 위한 모든 노력이 헛된 것임을 의미합니다. 확실히, UX 디자이너로서 피하고 싶은 것입니다.

UI 디자인

구세대를 위해 디자인하는 동안 UI 디자이너는 그 연령대에 어필하고 지원하는 것이 무엇인지 고려해야 합니다. 아이콘, 그래픽, 버튼, 글꼴과 같은 UI 요소를 자신의 기술에 맞춥니다. 운동 능력의 감소는 인터페이스 표적화를 어렵게 만들고 손가락 두드리기도 감소합니다.

UI에 대한 몇 가지 제안 사항은 다음과 같습니다.

16p 미만의 글꼴 크기를 피하고 텍스트 크기를 조정하도록 합니다. 화면 판독기로 프로덕트를 테스트하고 명암비에 주의하세요. 비디오와 오디오 콘텐츠에 대한 언어 설정이 포함된 자막을 제공하세요.

잘못된 UX 디자인 #2: 긴 드롭다운

거대한 텍스트 벽이 나타나고 찾고 있는 것이 목록의 맨 아래에 있습니다. 이것은 고객 충성도를 높이는 것이 아닙니다.

이 문제는 특히 국적을 입력하도록 요청하는 웹사이트에서 일반적입니다. 미국 출신이고 문제의 앱이 드롭다운을 삽입하기로 결정했다면 행복한 스크롤링을 하세요!

경우에 따라 사용자가 국가의 첫 글자를 입력하도록 허용한 다음 해당 글자로 시작하는 국가로 드롭다운을 건너뛰도록 하여 이와 같은 사용성 문제를 완화할 수 있습니다.

그러나 대부분의 경우 드롭다운을 완전히 건너뛰고 사용자가 필요한 것을 작성하게 하는 것이 좋습니다. 자동화를 추가하려면 자동 완성이 더 나은 선택일 수 있습니다.

저희는 귀하가 원활한 가입 절차를 위해 노력하고 있다는 것을 알고 있습니다. 하지만 이 경우 드롭다운이 추가되는 새로운 마찰이 얼마나 되는지 자문해 보아야 합니다.

..

👇 더 자세한 내용은 아래 원문에서 확인해주세요.

UI 디자이너로 빠르게 성장하는 방법

사용자 인터페이스(UI) 디자인은 특히 올바르게 수행될 때 믿을 수 없을 정도로 간단합니다. 그것은 결국 많은 라인, 상자 및 텍스트입니다. 기본 개념을 이해하기는 쉽지만 능숙해지기는 어렵습니다. 빠르게 시작하고 실행할 수 있는 많은 디자인 시스템이 있지만 디자인 방법론, 접근 방식 및 스타일을 이해하는 데 훨씬 더 많은 시간이 걸립니다. 제가 했던 10가지 일들과 아직도 더 나은 디자이너가 되고 있다고 느끼게 하는 것들이 있습니다.

1. 성공한 제품을 카피하여 UI 본능을 키워라

처음 시작할 때 베이스를 얻을 수 있는 유일한 방법은 복사입니다. 복사는 기술을 배우고 근육 기억을 발달시키는 동안 어떤 것이 어떻게 만들어지는지를 더 잘 이해하도록 도와줍니다.(다른 사람의 작업을 자신의 작업으로 사용하지 마십시오.) 인스타그램이나 에어비앤비는 하루아침에 만들어지지 않았습니다. 성공적인 소프트웨어 제품을 복사하여 수년간의 설계 반복을 통해 배우십시오. 이것은 UI 본능을 개발하고 명백하지 않은 디자인 요소를 알아차리도록 합니다. 가장 작은 버튼 상호 작용, 정보 배치에 집중하면서 세부 사항에 대한 눈을 날카롭게 만듭니다.

2. 일관성을 유지

훌륭한 물건을 만들기 위해 나쁜 물건을 많이 만들어야 합니다. 당신이 하고 있는 일이 효과가 있는지 알아 보려면 충분히 오래 머물러야합니다. 아무도 하지 않을 때 계속 연마하고 자신에게 배팅하십시오.

3. 복리의 법칙

복리의 법칙을 이해하고 계속 연습하세요. #DailyUI를 하든 디자인 챌린지를 하든, 매일 기술을 연마하기 위해 노력하는 간단한 행동은 당신을 멀리 가져올 것입니다. 작년부터 데일리 UI 챌린지를 시작했습니다. 이 도전으로 인해 저는 매일 UI 디자인을 연습해야 했고 시각적 디자인 기술을 확실히 향상시켰습니다.

4. 디자인 문서 읽기

디자인 문서를 이케아 가구와 함께 제공되는 설명서라고 생각하십시오. 디자인 프로세스에서 이를 참조하여 디자인이 모범 사례를 따르도록 하고 플랫폼, 환경 및 화면 크기 전반에 걸쳐 일관성을 장려하십시오. 하드웨어 플랫폼 및 대기업에서 사용하는 디자인 방법론과 원활하게 통합되는 훌륭한 앱을 디자인하는 방법을 알려줍니다.

읽어보면 좋은 것들: 구글 머티리얼 디자인, Google People + , AI 연구 가이드북, Apple 휴먼 인터페이스 지침, IBM 카본 디자인

5. 디자인에 대해 쓰기

복잡한 아이디어를 취하고 이해하기 쉽게 만드는 것은 디자이너로서 당신의 초능력입니다. 2020년 8월에 페이월 디자인에 대한 첫 미디엄 기사를 썼습니다. 이 기사를 쓰면서 내 디자인의 근거를 표현할 단어를 찾는 것이 얼마나 어려운지 깨달았습니다.

글쓰기는 생각한 후에 쓰기 때문에 어렵습니다. 당신은 당신의 디자인을 전달할 수 있는 만큼만 훌륭한 디자이너입니다. 글을 많이 쓸수록 작업, 근거 및 사고 과정을 더 잘 표현하게 됩니다.

6. 디자인 아티팩트, 문서 작성

나쁜 프레젠테이션은 좋은 디자인을 망칩니다. 디자인을 전달할 수 있는 것과 비슷한 맥락에서 디자인 인공물을 만드는 것은 요점을 전달하는 데 중요합니다. 내 경험에 따르면 디자인 인공물을 만드는 것은 내 디자인 가정에 도전하고 내 의제를 명확히 하며 종종 내 디자인의 새로운 근거를 탐색합니다. 보다 엄격한 사고 과정을 장려합니다.

..

👇 더 자세한 내용은 아래 원문에서 확인해주세요.

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

디자이너 공유, UXUI 스터디 참관, UX 발표자료 공유등 다양한 정보를 노션에서 확인하세요.

💭 단톡방 가입문의  (2,070명)

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

📍 SNS   @from.designer 페이스북 , 인스타그램