UI

[UXUI] Google Lighthouse를 UI/UX 개선에 활용해보자

Google Lighthouse란? 혹시 이런 경험 있으신가요? 🙋‍♀️ 분명 내가 만든 웹사이트인데, 뭐가 문제인지 도통 모르겠다. 🙋‍♀️ 사용자들이 자꾸 느리다고 하는데, 어디를 손봐야 할지 막막하다. 🙋‍♀️ 열심히 만들었는데, 검색 엔진에서 잘 찾아주지 않는다. Lighthouse는 웹사이트의 성능, 접근성, SEO를 한 방에 해결해 주는 도구입니다. 웹 개발자와 UX/UI 디자이너라면 꼭 알아야 할 필수 도구죠. 페이지 로딩 속도는 물론, 사용자 경험, 접근성 문제까지 콕 집어냅니다. 게다가 검색 엔진 최적화(SEO)까지 도와준다니, UI 개선 정말 쉽죠? Lighthouse, 어떻게 사용할까? 1. Chrome DevTools를 통한 사용 Google Chrome 브라우저에서 원하는 웹 페이..

[UI] 2배수, 3배수 작업을 하는 이유: 피그마와 포토샵

UI 디자인에서 이미지와 그래픽의 해상도는 사용자 경험에 큰 영향을 미칩니다. 포토샵과 피그마와 같은 디자인 도구를 사용할 때, 2배수 또는 3배수로 작업하거나 export해야 한다는 말을 자주 듣게 되는데, 왜일까요? 포토샵에서 2배수, 3배수로 작업해야 하는 이유가 뭘까요? 포토샵에서 2배수 또는 3배수 작업을 하는 이유는 주로 고해상도 디스플레이를 지원하기 위해서입니다. 레티나 디스플레이와 같은 고해상도 디스플레이는 픽셀 밀도가 높아서 표준 해상도의 이미지가 작고 흐릿하게 보일 수 있습니다. 이를 방지하기 위해 원래 크기보다 큰 이미지를 사용하여 고해상도에서도 선명하게 보이도록 합니다. 예를 들어, 100x100 픽셀의 이미지를 200x200 픽셀(2배수) 또는 300x300 픽셀(3배수)로 제작하..

[UI] 디자이너가 알아야 할 필수 단위: SP, DP, DPI, PPI, PX, PT

디자이너가 알아야 할 필수 단위: SP, DP, DPI, PPI, PX, PT 디자인은 단순히 시각적 아름다움을 넘어서 사용자 경험과 밀접하게 연결되어 있습니다. 효과적인 디자인을 위해서는 다양한 단위와 개념을 정확히 이해하는 것이 중요합니다. 이 글에서는 SP, DP, DPI, PPI, PX, PT와 같은 핵심 단위들에 대해 알아보겠습니다. 1. SP (Scale Independent Pixels) 안드로이드 개발에서 사용되는 글꼴 크기 단위입니다. 사용자의 기기 설정에 따라 글꼴 크기가 조절되어, 접근성과 사용성을 높입니다. SP는 특히 안드로이드의 접근성 기능과 밀접하게 연관되어 있습니다. ex) 사용자의 시력 문제나 선호에 따라 글꼴 크기를 조정할 때 유용합니다. 2. DP (Density-ind..