24’ 3월 4주 🔖 UXUI 해외 주간 아티클 TOP3

🔖 2024년 3월 4주 TOP3

1️⃣ 모두가 지키지 않는 UX 디자인의 가장 중요한 규칙

2️⃣ Generative AI 경험의 새로운 UX 패턴

3️⃣ 디자인 시스템에서 의미론적 세트를 통해 색상 사용을 정의하는 방법

1️⃣ 모두가 지키지 않는 UX 디자인의 가장 중요한 규칙

모든 인간들이 지켜야 할 조직의 원칙, 특히 제품을 디자인하는 사람들은 한 가지 원칙이 있습니다. 이 글에서 그 규칙이 무엇인지, 그리고 그것이 제품과 서비스 디자인에 어떤 의미를 갖는지 설명할 것입니다. 또한 이 현상이 조직 관리, 협업 및 일반적 성과에 미칠 수 있는 영향을 제기할 것입니다. 이 글에서 논의할 심리적 현상은 밀러의 법칙으로 알려져 있습니다.

정보 요소를 항상 9개 이하의 범주로 구성하되, 가급적이면 ~5개의 청크로 구성합니다.

인터페이스에 추가하는 정보 덩어리가 많을수록 현재 정보를 사용하여 작업하는 것이 더 어려워집니다. 이는 인터페이스를 장기 기억으로 인코딩하는 데 필요한 연습이 없거나 동작이 습관화되는 데 필요한 연습이 처음 사용자에게 특히 중요합니다.

밀러의 법칙은 인간이 처리할 수 있는 정보의 양이 한정되어 있으며, 정보가 너무 많으면 성과에 부정적인 영향을 미치는 주의가 산만해지게 된다는 점을 가르쳐 줍니다.

기업은 고객과 직원에게 훨씬 더 이해하기 쉬운 방식으로 정보를 구성하는 방법을 찾아야 합니다. 이는 인지 과부하를 유발하는 도구나 응용 프로그램을 제거하거나, 팀 구성원 수를 줄이거나, 작업 기억에 대한 지식을 기반으로 부서를 구성함으로써 가능합니다.

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

2️⃣ Generative AI 경험의 새로운 UX 패턴

역사를 되돌아보면 미래를 설계하는 데 도움이 됩니다.

당신의 커피 주문을 이미 알고 있는 바리스타가 반갑게 맞아준 적이 있나요? 온도, 추출 시간, 물의 양, 원두 원산지, 분쇄 크기, 로스팅 등 모든 측면을 자세히 설명하지 않고 커피를 마시는 것이 좋습니다. 이는 오늘날 AI로 탐색하고 있는 스펙트럼을 보여줍니다.

이 기사는 커피에 관한 것이 아닙니다. 이는 사용자 상호 작용이 어떻게 변화하고 적응하는지, GUI의 이전 추세와 생성 AI 상호 작용에서 나타나는 새로운 추세를 기반으로 생성 AI 사용자 상호 작용이 어떻게 진화할 수 있는지에 관한 것입니다. AI 사용자 경험의 핵심 트렌드로서 컨텍스트 번들링, 사용자 큐레이션, 신뢰, 생태계의 가치를 살펴보겠습니다.

명령부터 대화까지

컴퓨터를 사용한다는 것은 명령줄 인터페이스(CLI) 에서 정확한 명령을 입력하는 것을 의미했던 컴퓨팅 시대로 되돌아가 보겠습니다. "숙제" 폴더를 찾는 것은 물론, 파일을 열거나 데이터를 복사하는 정확한 명령을 기억하는 것이 어렵다고 상상해 보세요. 모든 사람이 프로그래머가 되기 위해 선발된 것은 아닙니다. 더 넓은 사용성을 위해서는 변화가 필요했습니다.

위의 예시 이미지를 보세요. 오늘날 우리는 평행 진화를 목격하고 있습니다. ****사용자 프롬프트는 기본적으로 자연어로 제작된 미니 프로그램이며 결과의 품질은 프롬프트 엔지니어링 기술에 따라 달라집니다. 초기 컴퓨팅이 CLI의 복잡성에서 GUI의 단순함으로 전환되어 모든 사람이 기술에 접근할 수 있게 된 것처럼, 복잡한 입력을 복잡하고 더 간단하고 사용자 친화적인 인터페이스로 묶는 방향으로 발전하는 유사한 추세가 생성 AI에 나타나고 있습니다. 
. . 👇 더 자세한 내용은 아래 원문에서 확인해주세요.

3️⃣ 디자인 시스템에서 의미론적 세트를 통해 색상 사용을 정의하는 방법

시작하기 전에, 브랜드 컬러를 선택하는 방법과 컬러 램프를 생성하는 방법을 확인하세요.

원시 색상이란 무엇인가요?

원시 색상은 브랜드 색상 카탈로그(purple.100, purple.200 등)에서 가져온 개별적인 색상입니다. 이는 가장 기본적인 형태의 색상으로서 의미론적 컬러 이름에 연결됩니다.

의미론적 컬러 이름이란 무엇인가요?

색상의 의미론적 이름은 원시 색상이 디자인 시스템 전체에서 어떻게 사용될지를 정의합니다. (예: foreground. primary.)

원시 색상은 아무도 #7748F9를 기억하지 못할 것이기 때문에 선택된 HSL/Hex 값에 대해 green.200, purple.500 등과 같은 더 실용적인 이름을 가지고 있습니다. 이러한 원시 이름들은 시스템 내에서 어떻게 사용되는지에 대한 정보를 제공하지 않습니다. 그것이 기본 버튼의 배경색일까요? 포커스 상태의 테두리 색일까요? 아무도 알 수 없으며, 이것이 우리가 의미론적 이름에 의존하는 이유입니다.

시맨틱 네임은 컬러뿐만 아니라 모든 다른 기본 스타일에 필수적입니다. 나는 디자인 시스템 연재 중간 중간에 계속해서 이 개념을 다룰 것입니다.

위 예제에서 보면, 원시 색상 purple.500은 시맨틱 네임 background.interactive.primary.default과 연결되어 있습니다. 이렇게 하면 purple.500이 기본 상태(primary button in its default state)에서 배경색으로 사용된다는 것을 명확하게 알 수 있습니다.

원시적이고 의미적인 관계

의미론적 이름(semantic name)은 원래 원시 네임(primitive name) 대신으로 사용되지 않습니다. 원래 원칙적으로 특정한 semantic name과 관련된 primitive color를 분리하고 변경할 수 있기 때문에 primitives가 semantic names과 결합합니다.

위 예제에서 볼 수 있듯이, 우리는 purple .500 값을 green .600으로 업데이트하고 있다 - 그리고 그 결과로 의미론적 컬러 값과 해당 컬러가 적용된 모든 구성 요소도 함께 업데이트됩니다.

위 예제처럼 한 번 설정한 의미론적 이름은 자주 변경되거나 전혀 변경되지 않아야 합니다. 여기서 테밍(theming) 개념과 어울릴 수 있는 방식을 볼 수 있습니다. 다크 모드를 만들려면 원시적인 첨부파일만 교체하면 됩니다.

디자인 시스템에 익숙하다면 "하지만 당신은 브랜드 칼라를 정의하는 의미론적 수준 하나를 놓치셨군요!"라고 생각할 수도 있습니다! 그건 의도적인 것 입니다! 성공적인 디자인 시스템으론 필수 요소가 아닙니다! 그러나 저는 다음 기사에서 이것에 대한 전략을 다룰 것이며, 색상 테마를 위한 고급 전술에 초점을 맞출 것입니다.

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

🎄from.designer 

🗓️ 행사 일정 & UXUI 자료 

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

💭 단톡방 가입문의  (1,900명)

🎥 유튜브 UXUI 공개 영상  

🔖 이메일 

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