jinhee.net

안녕하세요? 오늘은 해외 디자인 업계에서 많이 쓰고, 저도 실무에서 쓰고 있는 유저인터페이스, 프로토타입 툴인 피그마(Figma)에 대해서 알아보도록 하겠습니다. 피그마(Figma)란? www.figma.com/ 피그마(Figma)는 클라우드 베이스 디자인 프로토타입 툴로, 스케치(Sketch)와 어도비 XD와 같이 프로토타입을 설계하는 툴입니다. 화면이나 기능적인 면 등에서 스케치와 유사하다고 볼 수 있는데요. 하지만 가장 큰 차이점 두 가지가 저에게 매력적으로 다가왔습니다. 1. 어느 환경에서도 사용할 수 있는 피그마 스케치 프로토타입은 애플 제품에서만 이용 가능한 반면, 피그마는 맥(Macs), 윈도우PC (Window PC)에서도 사용 가능하고, 웹(Web)페이지에서 또는 프로그램을 설치 해서도 ..

안녕하세요? 오늘은 많은 분들이 헷갈려 하시고, 심지어 저도 가끔씩 헷갈려 하는 이 세가지 - UX, UI, 그리고 제품(Product) 디자이너들이 실제로 일을 하는 차이점들은 무엇인지 알아보도록 하겠습니다. UX 디자이너란? UX는 User Experience의 준말로, 사용자의 경험을 디자인하는 일을 맡고 있습니다. 우리가 사용자로써 이용하는 수 많은 웹사이트(Website)들과 핸드폰 모바일 앱(App)을 사용자 관점에서 생각하고, 사용하면서 겪는 문제점을 해결하기 위해 1) 리서치, 2) 디자인, 3) 테스팅을 하며 좀 더 사용하기 쉽도록 만드는 일을 합니다. 회사마다 그리고 회사가 제공하는 제품(웹사이트나 앱)에 따라 이 세 카테고리 중 하나를 더 많이 하기도 더 적게 합니다. UI 디자이너란..

드롭다운(Dropdown)이란? 드롭다운은 사용자가 여러 값(Value)이 있는 리스트에서 하나의 값(Value)을 선택할 수 있도록 하는 요소(Element)입니다. 드롭다운은 광범위하게 사용되는데요. 크게 드롭다운 메뉴(Dropdown Menu)와 드롭다운 리스트(Dropdown List) 두개의 타입으로 구분 짓습니다. 드롭다운 메뉴는 주로 웹사이트나 앱에서 어디로 가야할 지 네비게이션 역할을 합니다. 그래서 웹사이트의 상단에 주로 배치 됩니다. 사용자가 처음 접했을 때 자연스럽게 왼쪽 상단부터 시선이 가기 때문에 쉽게 찾을 수 있는 위치입니다. 디자인은 다르지만 서브메뉴가 있는 대부분의 웹사이트들은 이 드롭다운 메뉴를 사용합니다. 반면 드롭다운 리스트는 드롭다운 메뉴와 다르게 값을 선택해야 하는 ..

안녕하세요? 오늘은 툴팁에 대해 자세하게 알아보겠습니다. 툴팁이란? 툴팁(Tooltip), 인포팁(Infotip) 또는 힌트(Hint)라고 불리는 툴 팁은 마우스를 아이템에 갖다대었을 때(Hover) 나타나는 정보가 적혀 있는 박스입니다. 툴 팁은 정말 흔해서 아무곳에서나 찾을 수 있습니다. 마우스 커서가 아이템에 갖다대었을 때 나타나기 때문에 모바일 버전에서는 이 툴팁 기능을 활성화 시키기 위해서 아이콘으로 모바일 버전에서도 클릭할 수 있도록 고려하거나, 다른 행동, 예를 들어 길게 누르기(Long press)로 대처 합니다. 툴팁의 장점은? 툴팁의 좋은 점은, 사용자들이 웹사이트나 앱(App)을 사용하면서 겪는 문제점 및 자주 묻는 질문들에 빠르게 대처할 수 있습니다. 그렇기 때문에 추가 인력을 요하..