UI/UX & 반응형 디자인

1. UI (사용자 인터페이스)

-사용자에게 보이는 화면을 구성하는 방법

-사용자와 컴퓨터가 상호작용하기 위한 모든 시스템을 말한다. 

-애플리케이션 화면의 버튼 등 그래픽요소나 키보드, 마우스와 같은 실제 물리적인 요소들을 포함한다.

-UI는 UX에 큰 영향을 미친다. (UI ⊂ UX)

-자주 쓰이는 UI 디자인 패턴

  1. 모달

-기존 화면 위에 오버레이 되는 윈도우임

  2. 토글

- On/Off 스위치 버튼

  3. 탭

-비슷한 유형의 여러 콘텐츠를 분리해서 보여줄 때 사용함

  4. 태그

-컨텐츠를 설명하는 키워드를 사용하여 라벨을 붙임. 주로 분류 작업에 쓰임

  5. 자동완성

-주로 검색 창에서 쓰임

  6. 드롭다운

-선택 항목을 숨겨놨다가 필요시에 펼쳐줌

  7. 아코디언

-접었다 폈다 할 수 있음

-긴 내용의 컨텐츠를 담아 놓는 용도로 많이 쓰임

-트리 구조나 메뉴바 등으로 컨텐츠를 상하 관계로 표현할 때도 사용함

  8. 캐러셀 

-공항의 수하물 컨베이어 벨트, 회전목마를 뜻함

-자동으로 컨텐츠가 넘어가거나 사용자가 직접 버튼을 눌러 넘어가게 함

  9. 페이지네이션

-한 페이지에 띄우기에 컨텐츠의 양이 너무 많을 때 일정 개수로 쪼개서 페이지 별로 보여줄 때 사용함

-컨텐츠책의 페이지

  10. 무한스크롤

-스크롤을 내려 페이지의 맨 아래에 도달하면 추가 컨텐츠를 로드함

  11. 네비게이션 바

-GNB(Global Navigation Bar): 어느 페이지에 들어가든 사용할 수 있는 최상위 메뉴

-LNB(Local Navigation Bar): GNB에 종속되는 서브 메뉴 혹은 특정 페이지에서만 볼 수 있는 메뉴

-GNB는 항상 동일한 위치에 있는 것이 좋음

-위는 LNB를 드롭다운 형식으로 구현하였음

-회사소개 버튼이 GNB이고 그 아래에 나타나는 CodeStates, WEWIN, States DAO 항목이 LNB임

 

** 이외에 추가적인 UI 디자인 패턴은 다음 링크 참고할 것

https://ui-patterns.com/patterns

Design patterns

 

-UI 레이아웃 구성법

  1. 그리드 시스템

화면을 격자로 나누고 그에 맞춰 컨텐츠를 배치하는 방법이다. 웹 디자인 분야에서는 화면을 세로로 몇 개의 영역으로 나눌 것인가에 초첨을 맞춘 칼럼 그리드 시스템을 사용하며, margin - column - gutter 세 요소로 구성된다.

-마진은 화면 끝에 여백을 의미한다. 

-칼럼은 컨텐츠가 위치하게 될 세로로 나누어진 영역이다. 표준적으로 칼럼의 개수는 휴대폰에서 4개, 태블릿 8개, 컴퓨터 12개로 사용한다. 

디바이스 종류에 따른 화면 크기

-디바이스 종류가 바뀌게 되는 화면 크기 지점을 break point라 한다.

-칼럼은 상대 단위를 사용하여 컨텐츠가 창 크기에 맞춰 변하도록 설정하는 것이 좋다. 다양한 기기에서 그리고 다양한 크기의 윈도우 창에서 이용할 수 있도록. 표준적으로 휴대폰에서는 4개, 태블릿은 8개, PC는 12개의 칼럼으로 화면을 나눔.

-거터는 칼럼 사이의 공간으로 컨텐츠를 구분한다. 간격이 좁으면 컨텐츠들이 서로 연관성이 있어 보이고, 멀수록 독립적인 느낌을 준다. 아무리 넓어도 칼럼의 너비보다는 작게 설정하는 것이 좋다.

-칼럼 그리드 시스템을 활용할 때 화면 가로 길이에 따라서 칼럼 개수가 달라지도록 하면 다양한 디바이스와 환경에 유연하게 대응하는 UI를 만들 수 있다. 이를 반응형 웹이라 부른다. 

 

 

2. UX (사용자 경험)

-사용자가 제품이나 서비스를 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험을 말한다.

-단순히 기능하는 페이지를 만드는 것을 넘어 더 완성도 있는 서비스를 만들 수 있음

 

2.1) peter Morvile의 좋은 UX를 만드는 7가지 요소

  1. Useful : 상품이나 서비스 본연의 기능에 충실한가?

  2. Usable : 사용하기 편리한가? 단순하고, 직관적이고, 쉽고 친숙한가?

  3. Desirable : 매력을 가지는 가? 사용자로 하여금 긍정적인 감정을 불러 일으킬 수 있나?

  4. Credible : 결함이나 정보 유출 등 신뢰감을 해치는 부분은 없는가?

  5. Accessible : 접근성이 좋은가?

  6. Findable : 사용자가 원하는 정보를 쉽게 찾을 수 있는가?

  7. Valuable : 사용자가 중요시하는 가치를 제공하는가? 

-UX evaluation : 위 요소들을 바탕으로 그래프로 나타내어 UX에 대한 각 요소의 평가를 측정하여 서비스 개선에 이용한다.

 

2.2) User Flow (사용자 여정)

-직사각형 : 화면

-화살표 : 연결

-마름모 : 행동

 

*Flow diagram이 필요한 이유

  1. 애플리케이션 흐름 상 어딘가 어색하거나 매끄럽지 않는 부분을 발견할 수 있다.

  2. 추가 및 보완해야 할 부분이나 필요 없는 부분을 발견할 수 있다. 

 

2.3) 사용성 평가

-Jakob Nielsen 10가지 원칙 (https://www.nngroup.com/articles/ten-usability-heuristics/)

-Heuristic : 완벽한 지식 대신 직관, 체험을 중요시 하는 방법론을 말한다.

  1. 시스템 상태의 가시성 : 사용자에게 현재 진행 상황에 대한 피드백을 시각적으로 제공한다. (파일 로딩 창)

  2. 시스템과 현실 세계의 일치: 사용자에게 친숙한 단어, 모습 등을 반영함.

  3. 사용자 제어 및 자유 : 현재 진행 중인 작업에서 벗어나거나 실수로 실행한 작업을 취소 할 수 있는 '탈출구'를 명확하게 제공 (실행취소 버튼)

  4. 표준과 일관성 : 플랫폼 및 업계의 표준을 사용하여 사용자가 새로운 환경에 적응 해야할 시간과 노력을 최소화

    -외부적인 부분으로는 사용자에게 익숙하고 잘 알려진 디자인 패턴을 사용

    -내부적인 부분으로는 통일성 있는 디자인을 구현

  5. 오류 방지 : 실수나 오류를 미연에 방지할 수 있는 장치를 둔다. (정말로 삭제할 것인가요? 등의 알림창)

  6. 기억보다는 직관 : 사용자가 기억해야 할 정보를 최소화한다. (검색 목록 저장)

  7. 사용의 유연성과 효율성 : 초보자와 전문가 모두에게 개별 맞춤 기능을 제공한다. (단축키 설정 등)

  8. 미학적이고 미니멀한 디자인 : 불필요한 정보나 요소를 최소화한다. 컨텐츠나 기능에서 우선순위를 정하여 무엇을 보여줄 지 선택

(컨텐츠의 우선순위를 정하고 순위가 높은 것을 먼저 보여줌. 사용 빈도가 적은 메뉴는 필요할 때만 볼 수 있게 숨겨 놓음)

  9. 오류의 인식, 진단, 복구 : 사용자가 스스로 오류를 인식하고 직접 수정할 수 있도록 한다. (input박스의 placeholder 등)

  10. 도움말 및 설명서 : 상황에 따라 이해에 도움이 되는 문서를 제공한다.

 

3. 와이어프레임과 프로토타입

 

4. 피그마

 

* 반응형 웹 디자인

-레이아웃이 브라우저의 크기에 따라 실시간으로 반응하여 변화하며 이를 이용하여 디바이스의 종류에 관계 없이 모든 스크린에 최적화된 웹 사이트를 구축할 수 있다.

-모바일 퍼스트 : UI/UX를 디자인할 때 모바일을 최우선에 두는 디자인 전략.

-미디어쿼리 : 

@media 미디어 타입 (조건(너비 및 높이)) {
    (CSS 입력하는 부분)
}

--예제
// and
@media screen and (min-width: 400px) and (orientation: landscape) {
    body {
	color: red;
    }
}

// or
@media screen and (min-width: 600px), screen and (orientation: landscape) {
    body {
        color: blue;
    }
}

// not
@media not all and (orientation: landscape) {
    body {
        color: blue;
    }
}

• 미디어 타입 : all, print(프린터), screen(컴퓨터), speech(스크린리더)
• 조건(너비 및 높이) : 조건에 만족하면 스타일이 적용됨