본문 바로가기

UI

(22)
웹사이트 메뉴 현명하게 사용하기. 세로형 내비게이션 세로형 내비게이션이란? 웹사이트의 콘텐츠 항목을 볼 수 있는 메뉴 내비게이션은 일반적으로 가로형과 세로형이 있습니다. 현재 슬로워크의 내비게이션은 상단에 가로로 보이는 가로형 내비게이션입니다. 흔히 접할 수 있는 방식이죠. 그럼 세로형 내비게이션은 무엇일까요. 세로형은 브라우저 영역을 기준으로 왼쪽 위 기업 로고 아래 수직 배열로 정렬되는 구조를 말합니다. 일반적으로 가로형 내비게이션이 많이 쓰이지만, 스크롤로 제어하는 원 페이지 구조가 등장하면서부터 이에 적합한 세로형도 많이 볼 수 있게 되었습니다. 세로형 내비게이션 메뉴 활용법 1. 단일 페이지 레이아웃을 활용하여 상하로 동작하도록 만들어주세요.단일페이지란 반응형 웹에 따라 사용되는 구조인데요. "One page", "Full page" 라고 불리며..
스크롤 UI를 대체하는 방법이 있을까요? 요즘 웹에서는 화면을 꽉 채우는 사진을 배경과 함께 타이포그래피를 적절하게 배치하는 디자인이 유행하고 있습니다. 유명 웹 에이전시 사이트를 봐도 이런 디자인을 많이 찾아볼 수 있는데요. 이런 큼직한 디자인에서는 스크롤을 유도하는 UI가 자주 보입니다. 한편 브이텍스 랩(VTEX Lab)의 UI 디자이너 로드리고 뮤니즈(Rodrigo Muniz) 씨는 이런 스크롤 ui의 필요성에 대해 의문을 가지고 글을 썼습니다. “당신이 그것을 설명해야 한다면, 그것은 작동하지 않는 것입니다.(If you have to explain it, it’ ain’t working)”라고 그래픽 디자인의 거장 밀튼 글레이저가 말한 적이 있습니다. 만약 스크롤을 유도하는 UI를 넣는다면 사용자의 인지하는 과정을 무시하는 것일지도 ..
클릭을 유도하는 이름 붙이기 웹사이트를 이용할 때 예상치 못한 페이지로 이동할 때가 종종 있습니다. 그 이유로는 여러 요소가 있겠지만, 직접적으로는 버튼이나 메뉴의 이름이 불명확하거나 잘못된 표기로 인한 것이 많습니다. 웹을 현실 세계를 비교한다면, 버튼이나 메뉴는 다른 곳으로 향하는 "문"이며, 버튼에 적힌 이름은 그 문이 어느 곳으로 통하는지 알려주는 "이름"입니다. 오늘은 웹사이트 메뉴 버튼의 이름이 얼마나 중요한지를 알려드립니다. 웹사이트에 필요한 버튼을 디자인 하기 전, 우리는 주로 아래와 같은 사항을 고려합니다. -사용자가 버튼으로 인식하기에 적절한가?-사용자가 다른 페이지로 이동하는 링크라는 점을 인식하는가? -플랫디자인 or 그라데이션을 사용하는가?-적절한 버튼의 위치는? 위 사항처럼 버튼의 외형적인 부분에 치중한 나..
코드로 디자인한다. framer.js 1. 모바일 디자인과 프로토타이핑 모바일 시대가 열리면서 과거와는 달리 미디어 디자인에 있어 “인터랙션”이 매우 중요한 요소가 되었습니다. 단순히 예쁜 아이콘과 배경을 벗어나 사용자의 터치에 따라 재밌게 반응해야 하는 디자인이 필요하게 된 것이죠. 앱을 조작하는 손맛(!)을 주기 위해 디자이너들은 터치하면 튕기는 아이콘, 좌우 스와이프에 따라 부드럽게 열리는 메뉴, 화면을 아래로 당기면 새로 고침 되는 페이지 등 다양한 인터랙션을 고민하고 있습니다. 그런데 우리가 즐겨 쓰는 포토샵이나 파워포인트로는 이런 손맛을 설명하기 어렵습니다. 그렇다고 인터랙션을 일일이 동영상이나 움직이는 이미지(Animated gif)로 만들어 주기에는 너무 힘이 듭니다. 그래서 등장한 도구들이 소위 프로토타이핑 도구라고 하는 O..
치즈와 토핑을 내맘대로, 피자헛 인터랙티브 테이블! 피자를 주문하는 것은 일상속에서 자주 접하게 되는 경험인데요, 우리는 수많은 메뉴와 선택사항 중 무엇을 골라야 할지 고민하곤 합니다. 피자헛은 이 과정을 보다 재미있고, 편리하게 만들기 위해 디자인 그룹 'Chaotic Moon Studios'와 협업하여 인터랙티브 터치 스크린 테이블을 개발했다고 합니다. 인터랙티브 터치 스크린 테이블을 통해 고객들은 종업원이 없이도 스스로 피자를 주문하고, 피자가 만들어지는 과정에 참여하게 됩니다. 피자의 사이즈와 소스, 치즈, 토핑 뿐만 아니라 다른 모든 주문 사항들을 취향에 따라 직접 고를 수 있게 해주는 인터랙티브 터치스크린 테이블! 이 놀라운 테이블이 사용되는 과정을 함께 확인해 볼까요? 피자헛에 도착하면 고객들은 먼저 자리를 잡고, 피자 도우를 고르게 됩니다...
무심코 사용하는 UX, 어떻게 바꿀까 오늘도 우리는 웹서핑을 하며 슬라이드되는 배너를 돌려보고, 복잡한 메뉴 사이를 누비며, 간혹 뜨는 팝업을 끄고 있습니다. 이렇게 무심코 사용하는 웹사이트들이 불편하신 적은 없으신가요? 우리가 무심코 사용하고 있는 웹 UX/UI 패턴들. North가 제시하는 가이드라인을 보면서 어떤 것들이 문제가 있고 어떻게 해결할 수 있을지, 우리는 무엇을 고민해야 하는지 알아봅니다. North는 “모바일 우선주의, 인-브라우저, 시스템 기반의 디자인과 개발”을 모토로 하는 오픈 소스 커뮤니티입니다. 얼마 전 웹 UX가이드라인을 만들어 Outdated UX pattern. 즉 구식의(?) UX들에 대해 이야기 하고 있습니다. 1. 슬라이드 배너(Carousel) 슬라이드 배너, 롤링 배너 등으로 불리는 캐러젤. 좌우 화..