SEB_FE_ 블로깅 챌린지 _ 42일차 ( UI/UX )

->  화면 구성과 사용자 기능 구현을 학습할 예정!

     내용이 좀 많아서 이번 포스팅에는 한번에 올렸지만, 분할해서 한번 더 올릴 예정입니다.

 

< UI와 UX의 기본 개념 >

 

< UI > - User Interface

 

1. 기본 개념 : 사람들이 컴퓨터와 상호 작용하는 시스템.  ( 그래픽 디자인, 키보드나 마우스 등 물리적 요소... )

    -> 참고  :  GUI ( Graphical User Interface ) : 사용자가 그래픽을 통해 컴퓨터와 정보를 교환하는 작업 환경. (앱 화면 ..)

  

< UX > - User Experience

 

1. 기본 개념 : 사용자가 어떤 시스템을 이용하면서 느끼는 총체적 경험. UI를 포함함. ( 광고, 접근성, 사용성 ... ) 

 

-> UI 와 UX의 차이점 : 

UI는 시각적으로 보이는 디자인 중심이지만,

UX는 UI를 기반으로 사용자가 편리함을 느끼게끔  만들어 주는 것을 의미한다.

즉, UI ( 디자인 ) 이 좋다고 해서 UX ( 사용자의 편리함 ) 이 좋다고 보장 할 수 없고, 그 반대도 마찬가지다. 

 

 

< UI 디자인 종류 >

 

1. 모달 (Modal)

 

-> 기존에 이용 하던 화면 위에 오버레이 되는 창 (기존 페이지와 부모-자식 관계). 새로운 창이 아닌 레이어를 까는 느낌. 

     : 모달은 브라우저 설정에 영향을 받지 않음 즉, 무조건 보여줄 수 있음.

     : 또 다른 브라우저 페이지는 여는 팝업창은 브라우저에 의해 강제로 막힐 수도 있음.

 

   ( ex. 특정 사이트에 들어가면 뜨는 광고 창 등이 모달 창. )

 

 

2. 토글 ( Toggle )

 

-> on/off를 설정할 때 사용하는 스위치 버튼. 

    ( ex . 다크모드 설정 등의 토글 스위치 )

 

 

3. 탭 ( Tap )

 

-> 한 페이지에서 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 UI 디자인 패턴.

    섹션을 명확히 나누기. 

   ( ex. 강의 콘텐츠 중 단원 별 설명 등. )

 

 

4. 태그 ( Tag )

 

-> 콘텐츠를 설명하는 키워드를 사용해 라벨을 붙이는 역할.

   ( ex. 티스토리의 태그 )

 

5. 자동완성 ( Autocomplete )

 

-> 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 역할.

     자동완성 항목의 개수는 제한해 두고, 키보드 방향이나 클릭 등으로 접근 할 수 있게 설정해 주기.

   ( ex.  구글의 검색엔진 )

 

 

6. 드롭 다운 ( Dropdown )

 

-> 선택할 수 있는 항목들을 숨겨 놨다가 펼쳐지면서 선택할 수 있는 UI 디자인. 

   ( ex. 네이버 쇼핑 중 항목을 고를 때의 드롭 다운 )

 

 

7.  아코디언 ( Accordion)

-> 접었다 폈다할 수 있는 컴포넌트. 아코디언을 여러개 배치 할 수도 있음.

   트리 구조의 콘텐츠를 렌더링 할 때나, 메뉴바로도 사용할 수도 있고, 단순히 내용만을 담을 수도 있음.

   ( ex . 질문 게시판 중 제목만 보이고, 클릭 시 내용이 보이는 구조! )

 

 

8. 캐러셀 ( Carousel ) 

-> 컨텐츠를 옆으로 돌아가게 할 수 있는  UI 디자인 패턴.

    사용자가 넘겨야만 넘어갈 수도 있고, 자동으로 넘어가게 할 수도 있음. 

   ( ex .  웹툰등 상단에 돌아가면서 신작을 홍보하는 UI 구조 )

 

9. 페이지네이션 ( Pagination )

-> 책 페이지 마냥 번호를 붙여 페이지를 구분해 주는 것.

    페이지를 넘기기 위해 잠시 멈춰야 한다는 단점이 있음.

   ( ex . 쇼핑 중 다음 페이지 등 )

 

 

10. 무한 스크롤 (Infinite Scroll, Continuous Scroll )

-> 모든 콘텐츠를 불러올 때 까지 무한으로 스크롤을 내릴 수 있는 구조.

    페이지 네이션 처럼 잠시 멈출 필요가 없지만, 지나친 컨텐츠를 다시 찾기 힘듬.

    보통 맨 아래에 도달하면 추가 콘텐츠를 로드 해오는 방식으로 구현.

   ( ex . 웹툰 등 )

 

11. GNB (Global Navigation Bar), LNB (Local Navigation Bar)

-> GNB 는 어느 페이지를 들어가는 사용할 수 있는 차상위 메뉴, 

     LNB 는 GNB에 종속 되는 서브 메뉴.

     어느 페이지에 있는 사용할 수 있도록 항상 같은 위치에 있어야 함.

 

그 외의 UI 디자인들

ui-patterens.com

Design patterns

 

 

 

< UI 디자인 - 그리드 시스템 ( Grid System ) >

 

 

 1. 기본 개념 : 질서있는 UI 구조를 구성하기 위해 사용하는 시스템.

 

                     : 웹 디자인에서는  세로를 몇 개의 영역으로 나눌 것이가 초점을 맞춘 컬럼 그리드 시스템을 사용함.

                     :  컬럼 그리드 시스템은  세로로 Margin, Column, Gutter라는 세 가지 요소로 구성 됨.

 

-> Margin : 화면 양쪽의 여백. 절대단위 px 나 상대단위 vw, % 등으로 설정 할 수 있음.

 

 

-> Column : 콘텐츠의 위치를  세로로 나눠 놓은 영역. 

                  : 컨텐츠 크기나 기기마다 크기가 다르므로 상대 단위로 설정하는게 좋음.

                  : 만들 UI 를 파악 한 후 Column의 개수를 정하면 됨. 

                  : 이미지 속 화면 크기의 구분 선을  break point 라고 함. 

                  : 보통 휴대폰에서 4개, 태블릿에서 8개, PC에서는 12개의 컬럼으로 나눔. -> 창 화면에 따라 달라질 수도 있음

           

 

-> Gutter : Column 사이 공간으로, 컨텐츠를 구분하는 데 사용함.

 

->  컬럼 그리드 시스템 참고 링크

    : https://m2.material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins

Material Design

 

 

 

< UX 디자인 -  좋은 UX를 만드는 요소 >

 

-> 피터 모빌의 벌집 모형에 걸맞는 UX 요소로 체크할 수 있음.

-> UX를 구성할 때 다음 요소들을 고려하고 평가할 것.

 

 

1. 유용성 ( Useful ) : 사용 가능한가?

 -> 구현한 기능이 목적에 맞게 작동이 되는가? 목적 외의 추가적인 기능(심미적 기능)이 있는가?

 

2. 사용성 ( Usable ) : 사용하기 쉬운가 ?

 -> 사용자가 사용하기에 단순하면서 직관적인 서비스인가?

 

3. 매력성 ( Desirable ) : 매력적인가?

 -> 디자인 등이 사용자 들로 부터 긍정적인 반응을 일으킬 수 있나?

 

4. 신뢰성 ( Credible ) : 신뢰할 수 있는가?

 -> 사용자가 서비스를 믿고 사용할 수 있는가? .. 개인정보 유출이나 제품의 결함이 없는가?

 

5. 접근성 ( Accessible) : 접근하기 쉬운가 ?  .. unit5에서 더 학습 할 예정

 ->  글자 크기나, 음성 안내 기능 등  사용자가 누구든지 서비스에 접근할 수 있는가?

 

6. 검색 가능성 ( Findable ) : 찾기 쉬운가?

 -> 사용자가 원하는 기능을 잘 찾을 수 있나?  ..내비게이션 바, 정보 검색 기능 등 컨텐츠가 직관적으로 배치 돼 있나?

 

7. 가치성 ( Valuable ) : 가치를 제공하는가?

 -> 고객에게 가치를 제공하고 있는가 ? 

 

 

 

 < User Flow > 

 

1. 기본 개념 : 사용자가 제품에 진입한 시점을 시작으로 취할 수 있는 모든 행동들을 다이어그램으로 표현한 것.

                     : 사용자 흐름 상 필요한 기능을 추가하거나 불필요한 기능을 발견하고 삭제 할 수 있음.

                     :  작성한 기본  User Flow를 기반으로 (행동에 의문이 드는 곳을 기점으로) 수정 해 나가면 됨.

 

2. User Flow 다이어그램 작성법 

 

-> 직사각형 : 사용자가 보게 될 화면  (ex. 로그인 페이지)

-> 다이아몬드 : 사용자가 취할 수 있는 행동  ( 로그인, 회원가입, 아이디 찾기 .. )

-> 화살표 : 화면(직사각형)과 행동(다이아몬드)를 연결 시켜줌

 

-> 도구 : 

 Miro :  https://miro.com/ko/

 FigJam : https://www.figma.com/figjam/

 

 

 

< UI / UX 사용성 평가 >

 

-> 어플리 케이션을 평가하거나 기획하기 위해 사용함.

-> 다음 10가지 원칙을 기준으로 사용성과 효율성을 높일 수 있음.

 

1. 시스템 상태의 가시성 (Visibility of system status)

 -> 사용자 행동에 대한 피드백이 항상 존재 해야 함. (파일을 업로드 할 때, 파일 업로딩 중 표기)

 

 

2. 시스템과 현실 세계의 일치 (Match between system and the real world)

-> 디자인이나 용어 등, 사용자에게 친숙한 단어와 개념을 사용해야 함.

 

 

3. 사용자 제어 및 자유 (User control and freedom)

-> 사용자가 실수 했을 때, 현재 작업에서 벗어날 수 있는 탈출구를 제공해야 함 ( 플레이 리스트 노래 추가 실행 취소 )

 

 

4. 일관성 및 표준 (Consistency and standards)

-> 외부 일관성 : 일관적인 UX를 제공하기 위해 플랫폼 및 업계의 관습을 따라야 함.

-> 내부 일관성 : 제품의 인터페이스나 정보 제공에 일관성이 있어야 함. ( 버튼 모양, 위치, 아이콘 크기 등)

 

 

5. 오류 방지 (Error prevention)

-> 사용자의 실수를 방지하기 위해 정말로 이 행동을 할 것인지 모달 등으로 의사를 다시 확인 해야 함. 

 

 

6. 기억보다는 직관 (Recognition rather than recall)

-> 사용자가 기억해야 하는 정보를 줄여야 함. ( 최근 검색어 등 )

 

 

7. 사용의 유연성과 효율성 (Flexibility and efficiency of use)

-> 개별 맞춤 기능을 제공 해야 함. ( 개별로 단축키를 직접 설정할 수 있음 )

 

 

8. 미학적이고 미니멀한 디자인 (Aesthetic and minimalist design)

-> 인터페이스에 불필요한 정보가 포함되면 안 됨. ( 사용 빈도가 낮은 메뉴는 숨겨놓았다가 필요할 때 표시)

 

 

9. 오류의 인식, 진단, 복구를 지원 (Help users recognize, diagnose, and recover from errors)

-> 오류가 발생 했을 때 사용자가 이해할 수 있는 언어로 문제를 정확히 표시하고, 해결 방법을 제안해야 함.

 

 

10. 도움말 및 설명 문서 (Help and documentation)

-> 이해하는 데 도움이 되는 도움말을 제공해야 함. ( 입력 폼에 무엇을 입력해야 할 지 등의 설명 등 )