Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 할만한데?
- li 태그
- 나도코딩 파이썬
- 백준 정리
- git
- 백준
- :root
- 코딩테스트
- WEB2-JavaScript
- 드림코딩
- margin 0 auto
- nav태그
- error: ENOENT: no such file or directory
- 노마드 코더
- calc()
- 라매개발자
- 크롬웹
- 생활코딩 WEB2-JavaScript
- border radius
- box-sizing: border-box
- 단계별로 풀어보기
- 생활코딩
- max-width
- button:focus cursor: pointer; outline: none;
- 백준 자바스크립트
- 나도코딩
- HTML
- Pull
- html 끝
- git 버전관리
Archives
- Today
- Total
코딩응애의 개발블로그
코드스테이츠 블로깅 (UI,UX) 본문
UI (User Interface)
사람들이 컴퓨터와 상호 작용하는 시스템이다
키보드,마우스, 화면상의 그래픽 등등 키오스크, 스마트워치 등 화면과 상호 작용하는 기기들을 그래픽 UI 즉 GUI라고 한다
GUI (Graphical User Interface)
사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경을 뜻함
UX (User Experience)
사용자가 어떤 시스템, 제품, 서비스를 직•간접적으로 이용하면서 느끼고 생각하는 총체적 경험
UX에 영향을 주는 많은 요소 중 프엔개발자한테 가장 중요한 요소가 UI이다
UX는 UI를 포함한다. 그러나 좋은 UI가 항상 좋은 UX를 보장하는것은 아니다. 근데 보통 나쁜 UI는 나쁜 UX를 유발함
UI와 UX는 서로 다르지만 떼려야 뗄 수 없는 관계이며, 서로를 보완하는 역할을 한다.
UI 디자인 패턴
프로그래밍 시 자주 반복되어 나타나는 문제점을 해결하고자, 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태로 만든
패턴 자주 사용되는 UI 컴포넌트라고 할 수 있다. 종류가 꽤 많은데
- 모달 (기존에 이용하던 화면 위에 오버레이 되는 창 연습문제 레퍼런스 누르면 나오는 창 같은거)
- 토글
- 탭
- 태그 ( 지금 내가 쓰고 있는 블로그에 밑에 태그입력 이 부분 말하는것)
- 자동완성
- 드롭다운 (선택할 수 있는 항목들을 숨겨놓았다가, 펼쳐지면서 선택할 수 있게 해주는 UI 디자인 패턴)
- 아코디언 (접었다 폈다 할 수 있는 컴포넌트)
- 캐러셀 (회전목마처럼 빙글빙글 돌아가면서 콘텐츠를 표시해 주는 UI 디자인 패턴)
- 페이지네이션 (한 페이지에 띄우기에 정보가 너무 많은 경우, 책 페이지를 넘기듯이 번호를 붙여 페이지를 구분해주는 것)
- 무한스크롤
- GNB (어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴)
- LNB (GNB에 종속되는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴)
솔직히 다 정리하는건 오바고 그냥 검색해서 찾아보는게 나을듯
좋은 UX를 만드는 요소
- 유용성 - 제품이나 서비스가 목적에 맞는, 사용 가능한 기능을 제공하고 있는가에 관한 요소
- 사용성 - 제품이 본연의 기능을 제공하는 것을 넘어서 사용하기 쉬운가에 관한 요소, UI 디자인 패턴과도 연관이 깊다.왜냐면 자주 쓰이는 패턴들이 사용자들에게 친숙할 가능성이 높아서 사용성을 높여주기 때문에
- 매력성 - 말 그대로 제품이 사용자들에게 매력적인가에 대한 요소, 사용자들이 해당 제품이나 서비스를 이용하고 싶어 하는지가 중요
- 신뢰성 - 사용자가 제품이나 서비스를 믿고 사용할 수 있는가에 관한 요소
- 접근성 - 나이, 성별, 장애 여부를 떠나서 누구든지 제품이나 서비스에 접근할 수 있는가에 관한 요소
- 검색 가능성 - 사용자가 원하는 기능이나 정보를 쉽게 찾을 수 있는가에 관한 요소
- 가치성 - 위에서 언급된 모든 요소들을 총합하여 고객에게 가치를 제공하고 있는가에 관한 요소
user flow(사용자 흐름)
사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동을 뜻한다.
'코드스테이츠(부트캠프)' 카테고리의 다른 글
코플릿 풀면서 알게된 점 (버블 정렬) (0) | 2022.08.25 |
---|---|
코플릿 - 동적 계획법(Dynamic Programming) (0) | 2022.08.24 |
BrowserRouter 왜 화면이 출력이 안되는거지? (0) | 2022.08.19 |
코드스테이츠 Section 2 회고 (0) | 2022.08.18 |
리액트 SPA 라우터 (0) | 2022.08.18 |
Comments