🔖 2021년 9월 2주 TOP3

🔖 2021년 9월 2주 TOP3

마이크로카피 : 문해력 있는 디자이너가 되기 위한 필수 가이드

 디자이너는 단순한 데코레이터가 아니라 중요한 디자인 기술인 언어와 마이크로카피에 대한 이해력을 가져야 합니다. 지금 그 어느 때보다도 중요한 디자인 기술입니다.

다음 2가지의 이미지를 보세요.

 이 두 가지 온 보딩 비주얼의 명백한 차이점은 옵션 A에는 단어가 없고 절대적으로 쓸모가 없다는 것입니다. 방향도, 지침도, 행동 촉구도 없습니다. 이 점은 너무나 명백해서 (화면에서 소리 지르고 있음) 부정 할 수 없습니다.

 오랜 세월 동안, 저는 디자이너들이 단어와 언어에 사각지대를 가지고 있다는 것을 알아 챘습니다. 그리고 마지막 순간까지 높은 높이에서 아름답게 렌더링 된 디자인으로 텍스트를 돌리기 위해 남겨두었습니다. 디자이너들의 악의가 아니라 직업에 대한 요구와 기대를 통해서 입니다. 저는 이 일을 직접 저지른 적이 있습니다. 우리는 모두 죄인이며, 저는 공개적으로 제 자신을 채찍질합니다.


 사용자 경험을 만들거나 깨기

 마이크로카피는 버튼 텍스트, 섹션 캡션, 페이지 제목, 양식 레이블 및 오류 메시지와 같은 웹 사이트 및 앱에서 찾을 수 있는 작은 텍스트입니다. 작은 단어는 시각적으로나 심리적으로 큰 영향을 미칩니다. 하지만 우리의 시각적 마음 속에 있는 단어와 이미지의 분리는 디자이너들이 쉽게 빠져들 수 있는 함정입니다.

 저는 마이크로카피와 텍스트 콘텐츠를 사용자 경험을 만들거나 깨는 또 다른 디자인 요소로 생각하고 싶습니다.

 좋은 마이크로카피는 사용자가 디지털 경험을 통해 자신의 길을 탐색할 수 있도록 도와주며, 압축 된 방식으로 의미를 최대화하며, 공간적 여유가 더해져 모든 단어가 고려되어야 한다.

 단순한 데코레이터가 아니라 문해력 갖춘 디자이너가 되세요

 글을 읽고 쓰는 디자이너가 된다는 것은 마이크로카피를 디자인 과정에서 필수적인 교려사항으로 생각하고, 개념을 바꾸고 솔루션에 영향을 줄 수 있는 요소로 생각하면서 텍스트에 주의를 기울이는 것을 의미합니다. 미학과 말은 서로 통합니다. 디자이너라면 누구나 길러야 할 기본 기술이기도 합니다.

 우리는 왜 하지 않습니까? 글쎄, 사용자에게 도움이 되는 좋은 마이크로카피를 작성하는 것은 힘든 일일 수 있습니다. 예산이 허락한다면 우리 팀에 UX 작가를 데려 올 수 있습니다. 이상적이지만 실제로는 많은 회사에서 이를 감당할 수 없는 사치로 보고있습니다.

전담 UX 작가가 없는 상황에서 우리는 더 둥근 디자이너가 되어 더 나은 마이크로카피를 제작해야 합니다.

 그래픽 디자이너 인 Lucine Robert는 얼마 전에 '디자이너는 단순히 데코레이터이자 미학자들 (문자 형태를 마크 팔레트로 사용하는 패턴 제작자들) 뿐만 아니라 정보 수집하고 책임지는 사람들이다' 라고 썼습니다. 

 마이크로 카피의 예

 저는 여러분이 가끔 보는 이 고전적이고 매우 놀랄 정도로 끔찍한 오류 메시지들를 거의 좋아합니다.  하지만 나쁜 것에 집중하지 맙시다. 올바르게 작성되면 즉시 잘 쓰여지고 명확하고 간결한 마이크로카피로  옮겨집니다.

 Mailchimp 가입
 Mailchimp는 명확한 제목, 명확한 보충 텍스트 및 명확하게 제시된 암호 규칙을 사용하는 친숙한 어조로 유명합니다.

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

애플리케이션에서 빨간색 테마 색상 사용

빨간 UI 테마 색상은 매혹적이며 동시에 도전적입니다! 한편으로 그들은 활기찬 젊음의 정신이며, 당신을 앞으로 나아가게 하고 "지금 아니면 절대 안된다"라고 노래합니다. 

그러나 그들은 심리적으로 경고할 수 있으며 사용자는 빨간색 테마 색상으로 촉발된 열정에 피로감에 지칠 수 있습니다. 이 현상을 "적색 피로(Red fatigue)"라고 합니다. 애플이 휴먼 인터페이스 디자인 가이드에서 지적한 것과 같습니다.

"중요한 정보에 주의를 환기시키는 색상의 힘은 아껴서 사용할 때 더 높아집니다. 예를 들어 중요하지 않은 이유로 앱의 다른 곳에서 빨간색을 사용하면 치명적인 문제를 경고하는 빨간 삼각형은 효과가 떨어집니다."

앱이 일부 산업 장비를 면밀히 모니터링하거나 웹사이트에서 환자의 건강 문제를 알려야 하는 경우 적색 피로(Red fatigue)가 경고의 중요성을 얕잡아보고 잘못된 심각성을 전달할 수 있습니다.

브랜드마다 디자인 시스템의 일부로 이 빨간색 테마 문제를 다르게 처리합니다. 이제 제가 발견한 몇 가지 일반적인 동향을 살펴보겠습니다.

배경색은 검은색과 흰색

당신의 옷장을 살펴봅니다. 문을 열고 더 먼 곳으로 물러납니다. 멋진 스웨그 티셔츠와 후드티를 무시하고 가장 흔히 볼 수 있는 색상은 무엇입니까? 흑백이 옷장을 지배하고 있을 가능성이 큽니다. 

비즈니스 행사에서 절대 중성적인 생상으로 중성적인 색상으로, 분위기를 희석시키지 않으면서 현재 착용하고 싶은 색상과 잘 어울립니다. 색상 이론에 따르면, 흑백은 선택한 강조 색상에서 얻을 수 있는 범위 내에 있다는 것입니다.

색상 조합에 새로운 테마 색상을 추가합니다.

로고가 대부분 빨간색이라고 해서 항상 로고를 고수해야 하는 것은 아닙니다. 모든 인터랙티브 요소에 대한 보조 색상을 식별하거나 동일한 브랜드 아이덴티티를 전달하는 다른 브랜딩 색상을 선택할 수 있습니다.

레고는 작은 노란색 피규어로 유명하고 레이(Lays)는 황금빛으로 바삭바삭한 감자칩으로 유명합니다. 로고에서 빨간색이 훨씬 더 많은 시각적 관심을 끌더라도 둘 다 기본 테마 색상으로 노란색/금색을 선택했습니다.

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

디자인 시스템 TOP 8 예시

Airbnb 및 Uber와 같은 많은 회사들이 이미 그들만의 고유한 디자인 시스템을 전환하여 사용하고 있습니다. 

특히 글로벌 규모로 운영되고 있는 브랜드의 경우에는, 업계 내의 끊임없는 혁신으로 경쟁사와 차별화하고 사용자 환경을 개선하는 데 있어 디자인 시스템은 필수적인 요소입니다. 

반복 및 재사용 가능한 구성요소를 최대한 활용하여 워크플로우에서 디자인 시스템을 만든 브랜드들은 팀 간의 속도, 영감 및 효율성을 높일 수 있습니다. 

유의할 점은 패턴 라이브러리나 코드 및 UI 요소 모음만 있다고 해서 완성된 디자인 시스템으로 취급되지 않는다는 것입니다. 디자인 기본적인 측면에서 종합적인 디자인 시스템에는 더 많은 것들이 있으니까요. 

즉, 일반적인 디자인 시스템에 대해 자세히 알아보고, 추가 영감을 위한 성공과 가치를 창출하기 위해서 이미 디자인 시스템을 활용하고 있는 다른 기업들의 몇 가지 훌륭한 예시들을 확인해 보도록 하겠습니다. 

디자인 시스템이란 정확히 무엇인가요? 

디자인 시스템은 디자인 회사가 가질 수 있는 모든 UI 리소스 모음을 제공합니다. 여기에는 필요한 코드, 문서, 페이지 스크린숏 및 이미지 예제, 디자인 지침, 관련 도구, 문서 및 기사, 스타일 가이드, 재사용 가능한 구성 요소 및 철학, 기타 전반적인 웹 디자인 워크플로우에 유용한 모든 디지털 자산들이 포함됩니다. 

그런 다음 이러한 디자인 시스템은 온라인 웹 사이트로 호스팅 되며 브랜드에서 결정하는 대로 공개 및 내부 요소가 될 수 있습니다. 

디자인 시스템은 적용 가능한 지침들과 예제, 스타일 가이드 및 코딩 지침, 그리고 UI 키트의 일부로서 동시에, 귀중한 문서 역할을 하는 방대한 데이터 라이브러리라고 생각할 수 있습니다.

기업들은 왜 디자인 시스템을 만들고 있나요? 

개발자, 디자이너, 엔지니어, 제품 관리자 등 회사 제품 팀의 모든 구성원이 함께 모여 로고, 색상, 언어 및 코드에 이르기까지 디지털 프로덕트 자산의 기존 부분을 논의하고 매핑합니다. 그런 다음, 아 궁극적인 마스터플랜을 작성하기 위해 협업하고 사물을 정확히 어떻게 제시되어야 하는지(디자인 및 코딩) 설명합니다. 

이러한 방식을 채택하면 모든 팀들은 시각적 참조, 도구, 기사, 패턴 및 데이터 라이브러리에 대한 하나의 완전한 출처 소스(*디자인 시스템이 업계에서 단일 정보 소스라고 불리는 이유가 있음.)를 갖게 됩니다. 이를 통해 작업이 일관화되고 균일하게 유지되기 때문에 모든 단일 구성 요소를 동일한 페이지에 표시할 수 있습니다. 이는 디자인 시스템의 궁극적인 목표입니다. 

디자인 시스템의 사용 방법 및 구현 요소입니다. 

디자인 시스템을 구현하고 개발하는 경우, 개발자는 재사용 가능한 구성요소 및/또는 라이브러리에서 복사하는 데 필요한 모든 것들이 있을 때, 반복적인 코드 조각에 시간을 낭비할 필요가 없어집니다. 

마찬가지로, 디자이너는 디자인 프로세스의 속도를 높이기 위해 색상, 로고, 머리글, 바닥글 및 기타 필수 기호와 같은 표준 디자인 및 UI 요소 라이브러리가 존재하기에, 처음부터 다시 새로 랜딩 페이지를 디자인할 필요가 없습니다. 

또한 마케터들은 시스템에 필요한 모든 것이 있을 때, 뉴스레터의 어조와 템플릿을 반복적으로 작업할 필요가 없어집니다.

디자인 시스템에서 무엇을 배울 수 있을까요? 

대부분의 디자인 시스템은 일반적인 설정 패턴(Setup Patterns)을 따르고 있습니다. 
디자인 시스템은 종종 주요 카테고리와 함께 상위의 전개 기능을 제공하는 경우가 있습니다. 디자인, 코드, 언어, 구성 요소 같은 것들입니다. 

이러한 각 주요 카테고리에는 아토믹 디자인 구조(*Atomic Design Structure)를 최대한 활용하여 보다 자세히 의논할 수 있는 하위 카테고리들이 나타납니다. 예를 들어 볼까요, 타이포그래피, 색상, 양식, 배너 등이 하위 카테고리가 될 수 있겠네요. 

이 직관적인 전개 구조에 따르면 디자인 측면에서 모범 사례에 대한 귀중한 정보를 얻을 수 있을 것 같습니다.

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

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

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

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

🎥 유튜브 UXUI 자료 영상  

🔖 이메일 

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