프로페셔널해 보이는 웹디자인을 위한 부가적 요소 몇 가지 웹디자인에 간단한 인터랙션을 조금만 더하면 프로페셔널해 보이는 몇 가지 요소들이 있습니다. 작은 효과들로 내 사이트를 풍성한 UX web이 되도록 제작해보세요. 1. 블러 효과 filter:blur() 이전 콘텐츠에서도 한번 소개되었던 nike 사이트의 블러 효과입니다. 위와 같은 마우스오버 효과는 스크립트가 함께 추가되어야 하지만 단순한 hover 효과나 blur 효과 자체는 간단한 CSS만으로도 설정이 가능합니다. blur(0) /* No effect */ blur(8px) /* Blur with 8px radius */ blur(1.17rem) /* Blur with 1.17rem radius */ 블러 효과 적용을 원하는 이미지 소스의 cl..

Figma autolayout 피그마의 오토레이아웃이라는 기능 아시나요? 피그마는 웹디자인이나 UI/UX 디자인을 더욱 쉽게 만들어주는 온라인 툴인데요. 무료로 사용할 수 있고, 협업 시 동시작업이 가능한 환경을 만들어 주어 국내 사용자가 늘어나는 추세입니다. Gnb 메뉴를 만들 때나 메뉴 리스트 등을 만들 때 정렬이 필요한 오브젝트를 생성할 때 모두 오토레이아웃을 사용하여 디자인 수정이 더욱 원활하게 만들어줄 수 있습니다. 각각 텍스트 레이어로 만들어 어느정도 정렬을 해 두었으나, 메뉴를 추가 할 때 동일한 간격으로 자동 정렬되도록 하고싶습니다. 이 때 전체 메뉴를 선택한 상태에서 Shift + A 단축키를 이용하여 Auto layout으로 만들어줍니다. 오토레이아웃이 잘 생성되면 화면 하단의 중간에 ..

Life in VOGUE 프로젝트는 2018년부터 오프라인 공간에서 디자인과 패션을 접목하여 진행된 복합 프로젝트 입니다. 올해는 비대면 전시를 위해 온라인상에 VR로 가상의 빌딩을 제작하여 아티스트의 공간 디자인 프로젝트를 소개하는 사이트를 오픈했는데, 차분하면서도 고급스러운 기조로 전개되는 UI와 함께 아티스트의 작품들을 층별로 전시하여 통상적인 가상 공간 전개 방식인 360도 영상이나 커다란 갤러리 공간에 전시된 작품을 감상하는 방식이 아닌 색다른 방법으로 풀어낸 부분이 인상적입니다. 가상의 빌딩을 인지시켜주는 예쁜 일러스트로 제작된 페이퍼북으로부터 시작하여 페이지를 넘기면 엘리베이터 문 팝업 페이지가 등장하여 층을 이동하는 버튼을 누를 수 있도록 화면이 연결됩니다. 전체 메뉴 UI를 엘리베이터의 ..