본문 바로가기

부트캠프교육중/웹16

UX의 7가지 요소 좋은 UX를 만드는 요소 => 피터 모빌의 벌집 모형에서 제시한 UX의 7가지 요소 1. 유용성(useful):사용가능한가 제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가에 관한 요소 2.사용성(usable): 사용하기 쉬운가 -제품이 본연의 기능을 제공하는 것을 넘어서 사용하기 쉬운가에 관한 요소 -가능한 단순하면서 직관적이고 사용하기 쉬운 제품이나 서비스를 만들어야 한다. -ui 디자인 패턴과 연관 깊은 요소이다. 3.매력성(desirable): 매력적인가 -제품이 사용자들에게 매력적인가 -애플이 제품의 디자인 요소에 공을 들이고 감성 마케팅 전략을 사용한 것이 이 요소와 연관이 깊다. 4.신뢰성(credible): 신뢰할수있는가 -사용자가 제품이나 서비스를 믿고 사용할수있는가에 .. 2023. 2. 15.
UI 레이아웃 그리드 - 수직, 수평으로 분할된 격자무늬를 뜻한다. -화면을 격자로 나눈 다음 그 격자에 맞춰 콘텐츠를 배치하는 방법이다. -웹디자인 분야에서는 화면을 세로로 몇개의 영역으로 나눌 것인가에 초점을 맞춘 컬럼 그리드 시스템(Column Grid System)을 사용한다. -margin, column, gutter라는 세가지 요소로 구성된다. # margin -화면 양쪽의 여백 # column -콘텐츠가 위치하게 될 세로로 나누어진 영역이다. -표준적으로 핸드폰에서 4개, 태블릿에서 8개, pc에서는 12개의 컬럼으로 나눈다. -이미지 속 화면 크기의 구분선을 break point라고 한다. -상대단위를 사용하여 콘텐츠가 창 크기에 맞춰서 크기가 변하도록 설정하는 것이 좋다. # Gutter -column.. 2023. 2. 15.
UI 디자인 패턴 UI 디자인 패턴: 화면에 배치할수있는 자주 쓰이는 컴포넌트 #모달(Modal) -기존에 이용하던 화면 위에 오버레이 되는 창 (새로운 브라우저창을 띄우는것 아니다) -모달을 닫기 전에는 기존 화면과 상호작용할수없다. -닫기버튼, 혹은 모달 범위 밖을 클릭하면 모달이 닫히는 것이 일반적이다. -팝업은 브라우저에 의해 강제로 막힐수있지만, 모달은 브라우저 설정에 영향을 받지 않아 꼭 보여주고싶은 내용은 모달을 사용하는게 좋다. #토글(Toggle) -on/off시 사용하는 스위치버튼 -시각적효과로 사용자가 토글의 상태를 직관적으로 알수있게 만들어야한다. -on/off처럼 옵션이 두개인경우 말고 여러개의 옵션으로도 가능하다. 단, 옵션의 개수가 너무 많다면 탭을 사용하는것을 고려해라. #탭(tab) -콘텐츠.. 2023. 2. 15.
UI/UX 개념 # UI -user interface, 사용자 인터페이스 -사람들이 컴퓨터와 상호작용하는 시스템 -화면상의 그래픽 요소 외에도, 키보드, 마우스 등의 물리적 요소도 컴퓨터와 상호작용하기 위한 시스템이므로 ui라고 볼수있다. # GUI -graphical user interface, 그래픽 사용자 인터페이스 -사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업환경 -예시: 운영체제(window, mac os)의 화면, 혹은 애플리케이션 화면 -프론트엔드 개발자로서의 UI는 대부분 이 GUI를 의미한다. # UX -User Experience, 사용자 경험 -사용자가 어떤 시스템, 제품, 서비스를 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험 - 제품, 서비스 그 자체에 대한 경험은 물론, 홍보, 접.. 2023. 2. 15.

티스토리툴바