반응형

Design 44

디자인 시스템 컴포넌트 만들 때의 고민, State와 Status의 차이?

State (상태)정의: state는 컴포넌트의 현재 조건이나 내부 상호작용의 결과를 나타냅니다. 사용자 행동(클릭, 입력 등)에 따라 컴포넌트가 가진 변화하는 상태를 설명하는 데 사용됩니다.예시:Button: state="active", state="disabled", state="loading"Input: state="focused", state="filled", state="error"사용 목적: state는 컴포넌트 내부의 동적 변화와 직접적으로 연관되어 있어, 사용자 경험을 반영하는 데 중점을 둡니다. 예를 들어, 버튼이 비활성화되어 있는 경우 사용자 상호작용이 제한된 상태임을 나타냅니다.2. Status (상태 표시)정의: status는 컴포넌트의 외부 상황이나 현재 상황에 대한 설명을 제공합..

Design 2024.10.30

[Framer] CMS의 Filter 기능을 활용해 탭을 구성하는 방법

프레이머(Framer) CMS의 강력한 필터 기능을 활용하면 콘텐츠를 손쉽게 관리하고 사용자가 원하는 방식으로 콘텐츠를 탐색할 수 있는 인터페이스를 만들 수 있습니다. 이번 포스팅에서는 프레이머 CMS의 필터 기능을 활용해 블로그 게시물 목록을 날짜별로 구분하는 탭을 구성하는 방법을 단계별로 설명하겠습니다.1. CMS 컬렉션 설정하기우선 프레이머 CMS에 블로그 게시물 컬렉션을 만들어야 합니다. 예를 들어, 4월과 5월에 게시된 블로그 포스트가 각각 4개씩 있다고 가정하겠습니다. 다음은 이를 기반으로 한 CMS 컬렉션을 만드는 방법입니다.  프레이머 프로젝트에 CMS 컬렉션 추가: CMS 탭에서 새로운 컬렉션을 생성하고, 필요한 필드(제목, 날짜, 콘텐츠 등)를 설정합니다.데이터 입력: 해당하는 블로그 ..

필터를 디자인할 때 고민해야할 UI 및 UX

UXPin의 Filter UI and UX 101 – An In-Depth Guide 를 참고해 작성된 글입니다.필터는 사용자 인터페이스 디자인에서 강력한 도구로, 사용자 여정을 간소화하고 효율성과 콘텐츠 발견을 통해 사용자 참여를 높이는 데 기여합니다. 이 글에서는 UI 필터 디자인의 기본 원칙과 실무 사례를 통해 사용자 친화적인 필터 패턴을 설계하는 방법을 탐구합니다. 또한, 주요 기술 기업들의 예시를 통해 필터가 사용자 경험을 어떻게 향상시키는지 살펴봅니다.UI 필터란 무엇인가?UI 필터는 사용자가 특정 기준에 따라 데이터 집합이나 옵션을 좁히는 데 사용하는 디자인 요소입니다. 예를 들어, 전자상거래 사이트에서 사용자는 사이즈, 색상, 가격 등을 기준으로 제품을 검색할 수 있습니다. 필터 UI는 사..

Design/Methodology 2024.07.15

토스트 알림, 어떻게 사용해야할까.

토스트 얼럿을 어떻게 사용하면 좋을지 찾아보다 간략하게 정리를 잘 한 아티클을 발견해 한국어로 번약했습니다.   소프트웨어 애플리케이션의 성공은 사용자 경험에 크게 좌우되며, 사용자 경험이란 애플리케이션의 멋진 외관과 느낌이라고 잘못 이해하는 경우가 많습니다. 실제로, 사용자 경험의 개념은 애플리케이션의 사용성과 사용자 친화성을 향상시키는 것에 중점을 둡니다. 여기에는 다양한 측면과 요소들이 포함되며, 그 중 하나가 토스트 알림(Toaster Notification)입니다.토스트 알림(Toaster Notification)/토스트(Toast)이란 무엇인가요?토스트 알림은 사용자가 특별한 주의를 기울이지 않고도 확인할 수 있는 알림 메커니즘으로, 주로 다양한 사용자 정보를 전달하거나상태를 표시하는 데 사용..

Design 2024.07.09

Clone vs. Duplicate: 개발자 중심 제품 디자인 시 용어 선택

개발자들이 사용하는 프로덕트를 만드는 UI/UX 디자이너들에게 있어, "clone"과 "duplicate" 중 어느 용어를 사용할지 헷갈리는 상황이 발생합니다. 이 둘 중 어떤 용어를 사용할지는 주로 대상 사용자의 친숙도와 사용 상황에 따라 달라집니다. 아래에서는 두 용어의 차이점과 각 용어가 어떤 상황에서 더 적합한지를 비교해 보겠습니다. Clone: 기술 사용자들을 위한 용어선호 대상주로 개발자와 기술 분야의 사용자들의미기본 구조와 설정을 포함한 정확한 복제를 의미합니다.이는 원본 항목의 모든 설정과 구성이 동일하게 유지된다는 것을 나타냅니다.사용 예Jira 및 Azure DevOps와 같은 도구에서는 이슈나 테스트 계획의 정확한 복제를 위해 "clone"이라는 용어를 사용합니다. 예를 들어, Jir..

Design 2024.07.04

웹 접근성: 모두를 위한 디자인의 중요성

오늘날 디지털 시대에서 접근성은 모든 사용자에게 중요한 요소입니다. 이 글에서는 접근성의 중요성, 포괄적 디자인의 원칙, 그리고 디자이너로서 우리가 할 수 있는 방법에 대해 다룹니다.왜 접근성이 중요한가?모든 사람이 시력, 청력, 이동성 면에서 완벽하지 않습니다. 일부 사람들은 안경을 착용하거나 색맹일 수 있으며, 이동 중이거나 주의력 장애가 있을 수 있습니다. 이러한 다양성을 고려하지 않으면 사용자 절반이 우리 제품을 제대로 사용하지 못할 수 있습니다. 접근성을 고려하면 사용자 만족도를 높이고 더 넓은 청중에게 도달할 수 있는 기회를 얻게 됩니다.포괄적 디자인이란 무엇인가?포괄적 디자인은 가능한 많은 사람들의 필요와 능력을 고려하는 디자인입니다. 이는 단순히 장애를 가진 사람들만을 대상으로 하지 않으며..

Design/A11Y 2024.07.03

바우하우스에서 배우는 협업과 창의성: 현대 UX 디자인에 적용하기

안녕하세요,  오늘은 바우하우스(Bauhaus) 운동에서 영감을 받아 협업을 통한 창의성을 찾는 방법에 대해 깊이 있게 탐구해보려고 합니다. 이 글은 Google Design의 Jens Riegelsberger가 Medium에 기고한 글을 번역한 것으로, 바우하우스 철학이 현대 UX 디자인에 어떻게 적용될 수 있는지 살펴보겠습니다. 바우하우스: 협업에서 창의적 영감을 찾다UX 디자인과 바우하우스 철학UX 디자인은 아직 초기 단계에 있으며, 종종 최근의 기술적 능력에 너무 집착하는 경향이 있습니다. 이는 장기적인 관점을 흐리게 할 수 있습니다. 이에 대한 해결책으로, 저는 한 세기 전으로 돌아가 바우하우스 초기 시절에서 영감을 찾는 것이 유용하다는 것을 알게 되었습니다.바우하우스는 장식적 요소를 비판적으로..

Design/Methodology 2024.06.30

피그마 Config 2024: 디자이너라면 놓칠 수 없는 피그마 업데이트 신규 기능들

Muzli에 개제된 Muzli Recap: Highlights from Figma Config 2024를 번역한 글입니다.2024년 피그마 컨피그에서 발표된 주요 업데이트와 기능들을 살펴보겠습니다. 혁신과 기대감이 가득한 분위기피그마는 디자인 세계에서 점점 더 중요한 역할을 하고 있습니다. 이번 피그마 컨피그 2024는 디자인 커뮤니티의 주요 이벤트 중 하나였습니다. 샌프란시스코의 모스코니 센터는 열정적인 디자이너들과 기술 애호가들로 가득 찼습니다. 피그마는 이번 행사에서 혁신적인 업데이트와 기능들을 발표하며 디자인 프로세스의 미래를 제시했습니다. 🚀 Figma AI: 더 크게 생각하고 더 빠르게 빌드하세요이번 컨퍼런스의 주요 하이라이트 중 하나는 Figma AI였습니다. Figma AI는 지능형 디자..

Design 2024.06.28

일론 머스크가 아이들에게 가르쳐야한다고 주장한 50가지 인지 편향

일론 머스크는 공학 및 혁신 분야에서 탁월한 성과를 이루며, 그 성공의 비결로 '기본 원칙 사고(first principles thinking)'를 강조합니다. 그는 최근 트위터를 통해 인지 편향을 어릴 때부터 가르쳐야 한다고 주장하며, 50가지 주요 인지 편향을 소개했습니다. 이 편향들은 우리가 일상생활과 업무에서 더 명확하고 논리적인 사고를 할 수 있도록 도와줍니다. 50가지 인지 편향 목록⭐️ 기본 귀인 오류 (Fundamental Attribution Error): 타인의 행동은 성격 때문이고, 자신의 행동은 상황 때문이라고 생각하는 경향.⭐️ 자기 중심 편향 (Self-Serving Bias): 성공은 자신의 능력 덕분이고 실패는 외부 요인 때문이라고 믿는 경향.내집단 편애 (In-Group F..

Design/Methodology 2024.06.27

UI/UX 개선을 위해 점검할 7가지 마법 체크리스트

문제를 식별하고 웹/앱을 최적화하는 손쉬운 방법디지털 제품이 사용자 기대에 미치지 못하면, 사용자는 대안을 빠르게 찾기 시작합니다. 웹사이트가 멋지고 다양한 기능을 갖추고 있어도, 정작 사용자들이 원하는 기능이 어디에 있는지 찾지 못하면 무용지물입니다. 높은 전환율을 기대했지만 결과가 좋지 않은 이유는 무엇일까요?테스트를 시작하기 전에, "7가지 마법"을 통해 웹 또는 앱을 점검해 보세요. 이 효율적인 방법은 숨겨진 문제를 드러내어 마법처럼 작동합니다.그렇다면 "7가지 마법"이란 무엇일까요? 나른한 저녁 식사 시간에 손님들이 접시에 음식을 담고 있는 장면을 상상해보세요. 무엇이 문제일까요? 음식이 맛이 없어서? 서비스가 좋지 않아서? 손님들이 배가 고프지 않아서? 아니면 분위기가 너무 여유로워서?디지털 ..

Design/Methodology 2024.06.26
반응형