본문 바로가기

ux디자인

피그마(Figma) 기능 - 마우스(마우스휠스크롤)로 수치 쉽게 변경하기 마우스로 디자인 요소의 값을 쉽게 변경할 수 있는 방법을 소개드리고자 합니다. 크게 드래그하는 방법과 스크롤로 변경하는 방법이 있습니다. 본 인터랙션은 대부분의 수치로 표시되는 항목들에 대해서 적용이 가능합니다. 수치를 일일이 기입하는 것에 비해서 작업 효율을 크게 높여줄 수 있는 부분이기에 피그마를 쓰시는 분들은 참고하시기 바랍니다. 1. 마우스 클릭 후 드래그로 수치 변경하기 변경하고자 하는 수치를 나타내는 항목의 아이콘 쪽에 마우스 커서를 올리면 마우스 커서가 '좌우 화살표'로 변경되는 것을 확인할 수 있습니다. 이 때 마우스를 오른쪽으로 드래그하면 값이 감소하고, 오른쪽으로 드래그하면 값이 증가합니다. 값을 더 높이거나 낮추기 위해서 화면 밖으로 마우스를 드래그하더라도 계속해서 값이 유지된 채로 ..
아토믹디자인(Atomic Design) 방법론, 간단하게 이해하고 응용하기 체계화와 유지관리와 구현 상의 효율성 등의 이유로 컴포넌트 단위의 UX디자인이 각광받기 시작했고, 이는 디자인시스템이라는 형태로 이전까지 화면 단위로 보여지던 디자인의 산출물이 변화하고 있습니다. 이러한 변화는 디자인 분야에서만 나타나는 변화의 현상이 아닌 프론트엔드 개발 분야에서의 기술 변화도 비슷한 형태의 변화 흐름을 보여주고 있습니다. 리액트나 뷰, 앵귤러 등 모던 프레임워크들이 컴포넌트 별로 분리된 개발을 지원하는 것이 그러한 양상 중 하나라고 볼 수 있습니다. 이러한 배경 하에 주목받는 디자인 방법론 또는 개념으로서 '아토믹디자인(Atomic Design)'을 들 수 있습니다. 본 포스트에서는 아토믹디자인이라는 방법론의 간략한 범위 내에서 기본 개념을 파악하고 이를 응용할 수 있는 방법에 대해서..
좋은 대시보드 디자인의 10가지 원칙 (2019) 본 포스트는 Saadia Minhas가 2019년 11월 27일에 작성한 10 Rules of Dashboard Design 포스트를 지식을 널리 알리기 위한 목적으로 번역하여 작성한 글입니다. 저작권 및 내용에 문제가 있을 시 연락을 주시면 그에 적절한 조치를 취하겠습니다. 왜 대시보드 디자인이 중요한가요? 대시보드는 정보를 시각화하는 역할을 합니다. 특히 복잡한 정보들의 집합체를 사용자들이 이해하기 쉬운 포맷으로 전달하는 것이 이것의 목적이라고 볼 수 있습니다. 사용하기 좋은 대시보드는 1) 명확해야합니다 좋은 대시보드는 요청된 정보를 명확하게 표현해야 합니다. 사용자가 대시보드를 볼 때 사용자는 5초 안에 대시보드의 용도를 확인할 수 있어야 합니다. 사용자를 몇 분간 머무르면서 대시보드의 용도를 확..
우리나라는 왜 Sass를 안 쓸까? (2019) 2019년 대전 GDG 개발자 모임 신년 라이트닝토크에 사용된 발표자료로서 SCSS를 유난히 사용하지 않는 대한민국 개발환경에 대해서 나름의 생각을 정리하여 담은 발표자료입니다. SCSS의 효율에 대해서 이야기함과 함께 차후 어떠한 기술들이 CSS에 적용될 예정인지에 대해서 함께 다루었습니다.