본문 바로가기

UX

메뉴 (Menu) 메뉴란? 디자인 시스템과 디자인 컴포넌트의 정의는 사용자 경험 설계에 관계한 환경과 디자인 철학에 따라 시스템별로 상이한 규칙성을 지니게 됩니다. '메뉴'라는 일반적인 용어조차 시스템별로 다른 용도로 사용이 됩니다. GUI의 대부분의 요소들이 그렇듯, 메뉴 또한 현실의 메타포에 기반합니다. 식당에서 고르는 그 메뉴에서 기반한 것이며, 문화적으로 송나라에서 미리 음식을 만들어 골라서 먹을 수 있게 제공하던 서비스에서 기원하며 어원 상으로는 라틴어 'minutus(작게 만들어진 물건)'에서 파생된 불어 'menu'에서 기원한다고 합니다. '선택할 수 있는 작은 단위' 정도의 의미로 파악하는 것이 적절한 메뉴의 의미가 아닐까 싶습니다. 다소 넓은 범위의 이와 같은 정의는 사용자가 컨트롤할 수 있는 대부분의 항..
2020년의 메테리얼디자인 사용현황 간략히 알아보기 2020년 대전GDG 신년행사인 헬로2020 행사에서 10분의 짧은 시간 동안 가벼운 톤의 라이트닝토크 세션을 통해 진행한 간단한 세미나 자료입니다. 라이트닝 토크인 만큼 주제에 대해 간략한 내용을 담고 있으므로 참고 바랍니다. URL: https://docs.google.com/presentation/d/1SN4Ng38BCfhjZ85ZjYJOoXTYm5yZomwVWvzkKMN3hRo/edit?usp=sharing
피그마(Figma) 기능 - 픽셀 그리드와 픽셀 스냅, 그리고 서브 픽셀 피그마는 기본적으로 디지털에서 픽셀 단위로 표현되는 디스플레이에 초점을 두고 제작된 디자인 프로그램입니다. 하지만 동시에 벡터 프로그램이라는 특성을 지니고 있습니다. 벡터 그래픽이 픽셀 단위로 표현될 때 이해가 필요한 부분이 바로 픽셀 그리드와 픽셀 스냅, 그리고 서브 픽셀입니다. 간략하게 이 개념들에 대해 알아 보고 피그마에서 이들을 활용할 수 있는 방법에 대해 알아 보겠습니다. 피그마의 뷰 설정 픽셀 그리드, 픽셀 스냅, 서브 픽셀 등의 개념과 관련된 항목들은 피그마의 '뷰' 메뉴에서 확인할 수 있습니다. 메인 인터페이스의 우측 상단에 있는 뷰의 퍼센테이지를 나타내는 드롭다운 버튼이 '뷰' 메뉴의 주요 메뉴들을 모아 놓은 버튼이기도 합니다. 픽셀 그리드 줌 레벨을 일정 레벨 이상으로 확대하면 나타나는..
피그마(Figma) 기능 - 마우스(마우스휠스크롤)로 수치 쉽게 변경하기 마우스로 디자인 요소의 값을 쉽게 변경할 수 있는 방법을 소개드리고자 합니다. 크게 드래그하는 방법과 스크롤로 변경하는 방법이 있습니다. 본 인터랙션은 대부분의 수치로 표시되는 항목들에 대해서 적용이 가능합니다. 수치를 일일이 기입하는 것에 비해서 작업 효율을 크게 높여줄 수 있는 부분이기에 피그마를 쓰시는 분들은 참고하시기 바랍니다. 1. 마우스 클릭 후 드래그로 수치 변경하기 변경하고자 하는 수치를 나타내는 항목의 아이콘 쪽에 마우스 커서를 올리면 마우스 커서가 '좌우 화살표'로 변경되는 것을 확인할 수 있습니다. 이 때 마우스를 오른쪽으로 드래그하면 값이 감소하고, 오른쪽으로 드래그하면 값이 증가합니다. 값을 더 높이거나 낮추기 위해서 화면 밖으로 마우스를 드래그하더라도 계속해서 값이 유지된 채로 ..
아토믹디자인(Atomic Design) 방법론, 간단하게 이해하고 응용하기 체계화와 유지관리와 구현 상의 효율성 등의 이유로 컴포넌트 단위의 UX디자인이 각광받기 시작했고, 이는 디자인시스템이라는 형태로 이전까지 화면 단위로 보여지던 디자인의 산출물이 변화하고 있습니다. 이러한 변화는 디자인 분야에서만 나타나는 변화의 현상이 아닌 프론트엔드 개발 분야에서의 기술 변화도 비슷한 형태의 변화 흐름을 보여주고 있습니다. 리액트나 뷰, 앵귤러 등 모던 프레임워크들이 컴포넌트 별로 분리된 개발을 지원하는 것이 그러한 양상 중 하나라고 볼 수 있습니다. 이러한 배경 하에 주목받는 디자인 방법론 또는 개념으로서 '아토믹디자인(Atomic Design)'을 들 수 있습니다. 본 포스트에서는 아토믹디자인이라는 방법론의 간략한 범위 내에서 기본 개념을 파악하고 이를 응용할 수 있는 방법에 대해서..
피그마(Figma) 기능 - 선, 폰트크기, 둥글기 유지한 채로 크기 조절하기 일반적으로 개체의 선, 폰트크기, 둥글기를 유지한 채로 사이즈를 조정하는 옵션은 Scaling stroke, radius, and font size와 같은 용어로 옵션에서 선택이 가능합니다. 이는 스케치와 일러스트레이터, 포토샵에서 모두 확인할 수 있는 옵션입니다. 다만 피그마의 경우와 이러한 옵션을 현재로서는 별도로 제공해 주지 않습니다(2019-10). 피그마에서 개체의 선, 폰트크기, 둥글기 등 개체의 현재 보여지는 속성 그대로 사이즈를 조절하기 위해서는 일반 트랜스포밍이 아닌 'Scale'이라는 별도 메뉴를 통해서 이를 진행해야 합니다. 이 메뉴는 'k'를 통해 접근 가능하며, 또는 무브 툴 하위에 서브메뉴로서 선택할 수도 있습니다. 위 그림에서 보시는 것과 같이 '스케일' 메뉴를 통해서 리사이징..
2018 구글 I/O 디자인 세션 내용 정리 및 발표 구글 I/O 2018에서 공개된 디자인 관련 세션들의 주요 내용을 정리한 발표자료로서 GDG 2018 구글 IO 익스텐디드 모임에서 발표자료로 활용되었습니다.
2016년 가을 공개된 구글 애널리틱스의 새로운 UI디자인 구글 애널리틱스를 이용하시는 분들은 얼마 전부터 UI 최상단에 곧 공개될 새로운 UI를 확인할 수 있는 페이지를 연결시켜 놓았습니다. 해당 페이지로 이동하면 주요 변경 화면에 대한 스크린샷을 제공하고 있습니다. 더불어서 곧 공개될 기업용 유료 서비스인 'Google Analytics 360'에 대한 소개도 함께 기재되어 있습니다. 이번 포스트에서는 세계에서 가장 널리 사용되는 관리자사이트(Admin Website) 중 하나인 구글애널리틱스의 곧 공개될 새로운 UI디자인에 대해 간략히 알아 보겠습니다. 리뉴얼 이전 구글 애널리틱스의 UI디자인 1. 단순화된 네비게이션새로운 구글 메테리얼 디자인 표준을 따릅니다.관리자 관련 서브헤더가 사라지고, 해당 내용은 네비게이션 최하단에 고정했습니다.좌측 네비게이션은 ..