[사용자 친화 웹] UI, UX, Wireframe, Prototype

UI(User Interface)

사용자가 제품과 상호 작용하는 시스템

화면상의 그래픽 요소, 키보드, 마우스 등 물리적 요소

 

GUI(Graphical User Interface)

사용자가 그래픽을 통해 제품/시스템과 정보를 교환하는 작업 환경

프론트엔드 개발자로서 접하는 UI는 대부분 GUI를 뜻함

 

모바일 디바이스는 물리적 UI가 줄고 GUI가 중요해짐

PC는 키보드를 이용해 텍스트만으로 상호작용할 수 있지만 화면 상에서의 상호작용이 더 직관적이고 간편함

(Window, Mac OS 운영체제 화면, 애플리케이션 화면)

(+ 스마트워치, 키오스크, 대중교통 터치스크린 안내판 등)

 

UX(User Experience)

사용자가 시스템/제품/서비스를 직간접적으로 이용하면서 느끼고 생각하는 총체적 경험

ex) 제품/서비스 자체에 대한 경험, 홍보, 접근성, 사후 처리 등

UX는 UI를 포함

 

UI와 UX는 상호보완, 상호발전 관계임

좋은 UX가 좋은 UI를 보장하지 않고(디자인이 엉성하지만 원하는 기능을 하는 경우),

좋은 UI가 좋은 UX를 보장하지 않지만(보기에 좋지만 사용하기 불편하거나 제대로 기능하지 않는 경우),

보통 나쁜 UI는 나쁜 UX를 유발함

 

UX가 좋지 않은 곳을 찾아내 UI 개선점을 찾을 수 있고,

UI를 개선함으로써 UX가 좋아질 수 있음

 

 

UI 디자인 패턴

자주 사용되는 UI 컴포넌트

UI 디자인 패턴을 익혀두면 UI를 디자인하기 보다 쉬워지고,

프론트엔드 개발자, 디자이너, PM과의 의사소통도 원활해져 협업 효율도 높아짐

 

UI 디자인 패턴 종류

1. 모달(Modal)

기존 화면 위에 오버레이되는 창

팝업은 브라우저 설정에 따라 차단될 수 있지만, 모달은 브라우저 설정에 영향을 받지 않음

닫기 버튼 혹은 모달 범위 밖을 클릭하면 모달이 닫히며, 모달을 닫기 전까지 기존 화면과 상호작용 할 수 없음

 

=> 꼭 보여주고 싶은 내용이 있는 경우 사용

 

2. 토글(Toggle)

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

셋 이상의 옵션이 있을 때에도 토글을 사용할 수 있으나, 옵션의 개수가 너무 많다면 탭 사용을 고려

* 색상, 스위치의 위치, 그림자 등의 시각적 효과를 주어 사용자가 토글의 상태를 직관적으로 알 수 있게 만들어야 함

 

3. 탭(Tab)

콘텐츠를 분리하여 보여주고 싶을 때 사용

가로로 한 줄인 형태가 가장 흔함(세로로 배열하거나 여러 줄로 배열할 수 있음)

* 섹션 이름이 너무 길지 않아야 하고, 섹션 구분이 명확해야하며, 현재 보고 있는 섹션을 표시해주어야 함

 

4. 태그(Tag)

콘텐츠를 설명하는 키워드

태그로 콘텐츠를 분류할 수도, 검색할 수도 있음

사용자가 자유롭게 작성하게 하거나, 개발자가 종류를 정해놓을 수 있음

* 태그의 추가와 제거를 자유롭게 할 수 있어야 함

 

5. 자동완성(Autocomplete)

사용자가 내용을 입력 중일 때, 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여 주는 것

주로 정보를 검색할 때 사용하며 사용자가 정보를 입력하는 시간을 줄여줌

* 너무 많은 항목이 나오지 않도록 개수를 제한하는 것이 좋으며, 키보드 방향키와 클릭으로 접근하여 사용할 수 있도록 제작

 

6. 드롭다운(Dropdown)

선택할 수 있는 항목들을 숨겨 놓았다가 펼쳐졌을 때 선택할 수 있게 함

보통 화살표 버튼을 클릭하여 펼쳐지게 만들지만, 마우스를 올려놓는 것만으로 펼쳐지게 할 수도 있음

* 사용자가 선택한 항목이 무엇인지 알 수 있게 만들어야 함

 

7. 아코디언(Accordion)

접었다 폈다할 수 있는 컴포넌트. 보통 여러 개를 연속해서 배치함

상하관계를 표현하기 위해 메뉴바, 트리 구조 컨텐츠를 렌더링할 때 사용하거나

핵심 내용을 먼저 전달하기 위해 단순히 콘텐츠를 담아놓는 용도로 사용

 

8. 캐러셀(Carousel)

컨베이어 벨트나 회전목마처럼 빙글빙글 돌아가며 콘텐츠를 표시해주는 패턴

자동으로 돌아가거나 사용자가 넘기게 할 수 있음

* 콘텐츠가 넘어갈 수 있음을 직관적으로 알 수 있도록,

다음 콘텐츠 일부를 옆에 배치하거나 콘텐츠를 넘길 수 있는 버튼을 배치해야 함

 

9. 페이지네이션(Pagination)

한 페이지에 띄우기에 정보가 너무 많은 경우, 책 페이지처럼 번호를 붙여 구분해주는 것

장점: 원하는 정보를 갖고 있는 페이지에 바로 접근할 수 있음

단점: 페이지를 넘기기 위해 잠시 멈춰야하기 때문에 사용자 경험이 매끄럽지 않을 수 있음

 

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

한 페이지에 띄우기에 정보가 너무 많은 경우, 모든 컨텐츠를 불러올 때까지 무한으로 스크롤을 내릴 수 있도록 만드는 것

장점: 페이지를 선택하기 위해 멈추지 않기 때문에 매끄러운 사용자 경험 제공

단점: 콘텐츠의 끝을 알 수 없고, 지나친 콘텐츠를 찾기 어려움

* 처음부터 모든 콘텐츠를 로드한 후 조금씩 보여주는 방식이 아닌, 

페이지 하단에 도달했을 때마다 추가 콘텐츠를 로드하는 방식이어야 함

 

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

GNB: 어느 하위 페이지에 들어가든 사용할 수 있는 최상위 메뉴(보통 Tab 형식)

* 항상 동일한 위치에 있어야 함(그렇지 않다면 사용자 경험에 악영향을 줄 수 있음)

LNB: GNB에 종속되는 서브메뉴(보통 Dropdown 형식)

 

 

그리드 시스템(Grid System)

질서있는 구조의 UI를 구성할 수 있게 도와줌

 

Column Grid System

웹 디자인에서 사용하는 방식

화면을 세로로 몇개의 영역으로 나눌 것인지 결정

Margin, Column, Gutter로 구성됨

 

1. Margin

화면 양쪽 여백

고정값(px)으로 사용하거나,

상대 단위(vw, %)를 사용하여 유동성을 주어도 됨

 

2. Column

콘텐츠가 위치하게 될 세로로 나누어진 영역

일반적으로 컬럼의 개수는 휴대폰 4, 태블릿 8, PC 12

기기마다 화면 크기가 조금씩 다르고, 브라우저는 크기를 사용자가 마음대로 바꿀 수 있기 때문에

상대 단위를 사용하여 창 크기에 맞게 콘텐츠 크기가 변하도록 하는 것이 좋음

작은 스마트폰	큰 스마트폰 타블렛 세로 화면	타블렛 가로 화면 노트북	데스크탑
0 ~ 480	481 ~ 768	769 ~ 1279	1280 ~

 

3. Gutter

Column 사이의 공간. 콘텐츠를 구분하는데 도움 됨

좁을수록 콘텐츠가 연관되어 보이고, 넓을수록 독립적으로 보임

너무 좁다면 콘텐츠 구분이 힘들거나 답답한 느낌을 주고

너무 넓다면 콘텐츠가 따로 노는 느낌을 주어 UI가 어수선해짐(Gutter 크기를 컬럼 너비보다 작게 설정)

 

화면 가로 길이에 따라 컬럼 개수가 달라지도록 코드를 작성하면

다양한 디바이스와 다양한 환경에 유연하게 대응하는 UI를 만들 수 있음

= 반응형 웹

 

 

UX 디자인

사용자를 이해하고 배려하여 최상의 경험을 제공하고자 노력하는 것

 

피터 모빌(Peter Morville)의 벌집 모형(7요소)

1. Useful_유용성_사용 가능한가

제품이나 서비스가 목적에 맞는 기능을 제공하고 있는가

+ 비실용적이지만 추가적인 기능을 제공하는가(디자인: 심미적 기능)

 

2. Usable_사용성_사용하기 쉬운가

단순하면서 직관적인 제품/서비스를 만들어야함

UI- 기능이 잘 작동하더라도 사용하기 어렵다면 좋은 UX를 주기 어려움

UI 디자인 패턴- 자주 쓰이는 패턴은 친숙하기 때문에 사용성을 높여줌

 

3. Desirable_매력성_매력적인가

디자인이 보기에 좋고, 이미지, 브랜딩 등이 사용자에게 긍정적인 감정을 불러낼 수 있는지

ex) 애플- 디자인, 감성 마케팅

 

4. Credible_신뢰성_신뢰할 수 있는가

결함이 있는 제품을 정상 제품으로 속여 판매한다든가

실제 제품/서비스에서 얻을 수 있는 가치보다 과장하여 홍보한다든가

사용자의 개인 정보를 유출시킨다든가

=> 믿을 수 있는 브랜드 이미지를 구축하는 것이 좋음

 

5. Accessible_접근성_접근하기 쉬운가

나이, 성별, 장애 여부를 떠나 누구나 제품/서비스에 쉽게 접근할 수 있는지

누구나 비슷한 수준의 정보를 얻을 수 있도록 장치를 구비해놓기

ex) 시력이 좋지 않은 고연령자를 위한 돋보기 기능, 시각 장애인을 위한 음성 안내 기능 등

 

6. Findable_검색가능성_찾기 쉬운가

사용자가 원하는 기능이나 정보를 쉽게 찾을 수 있는가

ex) 내비게이션바, 정보 검색 기능

 

7. Valuable_가치성_가치를 제공하는가

1~6을 총합하여 가치를 제공하고 있는가

가치를 판단하는 기준은 사용자마다 다르기 때문에 모든 요소를 고르게 고려하는 것이 좋고,

제품 사용자들이 공통적으로 중요하게 생각하는 요소를 찾아내 그 요소에 집중한다면 UX를 효율적으로 개선할 수 있음

 

피터의 벌집 모형 그래프를 활용하여 UX를 얼마나 고려했는지 자체 평가가 가능하며,

UX를 개선하고자할 때 UX 7요소를 반영한 사용자 설문조사를 통해 개선점을 찾아낼 수 있음

 

 

User Flow

사용자가 제품에 진입한 시점부터 취할 수 있는 모든 선택을 다이어그램으로 그려서 정리

 

User Flow 다이어그램 작성법

1. 직사각형: 사용자가 보게 될 화면(회원가입 페이지, 로그인 페이지 등)

2. 다이아몬드: 사용자가 취하게 될 행동(로그인, 버튼 클릭, 업로드)

3. 화살표: 직사각형(화면)과 다이아몬드(행동)을 연결시켜주는 화살표

위 세 요소는 필수로 사용, 필요하다면 다른 요소를 추가하여 최대한 꼼꼼하게 빠짐없이 작성

 

User Flow 다이어그램 장점

1. 사용자 흐름상 어색하거나 매끄럽지 않은 부분을 발견하여 수정할 수 있음

2. 있으면 좋은 기능을 추가하거나 없어도 상관없는 기능을 삭제할 수 있음

=> 사용자 흐름을 빈틈없이, 보다 더 편리하게 다듬어가다보면 UX를 개선할 수 있음

 

User Flow 다이어그램 도구

Miro, FigJam

 

 

UI/ UX 사용성 평가

제이콥 닐슨의 10가지 사용성 평가 기준(Jakob's Ten Usability Heuristics)

(휴리스틱: 체험적인. 완벽한 지식 대신 직관과 경험을 활용하는 방법론)

 

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

사용자에게 진행 상황에 대한 정보를 합리적 시간 내에 적절한 피드백과 함께 제공해야 함

- 피드백이 존재하는지

- 피드백이 즉시 제공되는지

- 피드백이 명확한지

ex) 파일 첨부 시 파일의 업로딩 상황(%)을 표시

 

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

내부 전문용어가 아닌 사용자에게 친숙한 단어, 구문 및 개념을 사용

ex) 연주 애플리케이션의 모습이 실제 악기의 생김새와 유사

 

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

현재 진행 중인 작업에서 벗어나거나 실수로 수행한 작업을 취소할 수 있는 방법(탈출구)

ex) 삭제 직후에 취소할 수 있는 버튼이 잠시 나타남

 

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

외부 일관성: 일관적인 사용자 경험을 제공하기 위해 플랫폼 및 업계의 관습을 따름

-> 사용자에게 익숙한 UI를 제공, 잘 알려진 UI 디자인 패턴 사용

내부 일관성: 사용자가 혼란스럽지 않도록 제품의 인터페이스나 정보 제공에 일관성이 있어야 함

-> 한 제품 내부에서 같은 인터페이스 유지(버튼의 모양, 위치, 아이콘 크기 등)

 

5. 오류 방지(Error Prevention)

오류가 발생하기 쉬운 상황을 제거하여 사용자의 실수를 방지

ex) 삭제 버튼을 눌렀을 때, 정말 삭제할 것인지 alert로 다시 확인

 

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

사용자가 기억해야하는 정보 줄이기

ex) 최근 검색어 저장

 

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

초보자와 전문가 모두에게 개별 맞춤 기능을 제공

ex) 프로그램 단축키를 직접 설정하여 사용할 수 있음

 

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

인터페이스에 관련이 없거나 불필요한 정보를 넣지 않음

콘텐츠와 기능의 우선 순위를 정하고 우선 순위가 높은 것을 제공하고 있는지 확인

ex) 사용 빈도가 적은 메뉴까지 보여줄 필요는 없음. 필요할 때에만 볼 수 있게 숨기기

 

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

사용자가 이해할 수 있는 언어를 사용하여 문제가 무엇인지 정확하게 표시하고 해결 방안을 제안해야 함

ex) 영문 성을 입력해야 하는 폼에서 한글이 아닌 영어를 입력해야 함을 알려줌

 

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

추가 설명이 필요 없는 것이 가장 좋지만, 상황에 따라 이해하는데 도움이 되는 문서를 제공해야 함

ex) 간단한 안내를 통해 검색에 도움을 줌

 

위 10가지 사용성 평가 기준을 통해

서비스 중인 애플리케이션을 평가하거나,

제품 설계 단계에서 더 완성도 있는 애플리케이션을 기획할 수 있음

(사용성과 효율성을 높일 수 있음)

 

 

와이어프레임(Wireframe)

제품 기획 단계에서 구조를 잡기 위해 만듦

페이지를 만들기 전에 어떤 컴포넌트를 만들고 조합할지 구상

웹 페이지의 레이아웃과 UI 요소 등에 대한 뼈대(디자인 컨셉과 사이트 기능 이해)

 

와이어프레임의 품질 수준

1. Low Fidelity Wireframe(Lo-Fi Wireframe)

손으로 빠르게 그린 수준

작성 시간이 짧아 수정하거나 새로운 의견을 반영하기 쉬움

아이디어를 구체화시키며 큰 그림을 잡을 때 좋음

 

2. Middle Fidelity Wireframe(Mid-Fi Wireframe)

Lo-Fi Wireframe을 그리면서 아이디어가 어느정도 구체화되고 확정된 후에 보기 좋게 다듬어준 상태

페이지가 어떻게 작동될 지 예상할 수 있음

 

3. High Fidelity Wireframe(Hi-Fi Wireframe)

완성본에 가깝게 작성한 것으로 와이어프레임보다는 목업에 가까운 형태

작성 시간이 많이 들고, 수정이 어렵기 때문에

와이어프레임 작성 목적과 맞지 않아 Hi-Fi 수준까지 만드는 경우는 거의 없음

Mockup

: 데모 시연, 평가를 위한 최소한의 기능만 담은 모형(직관적으로 이해하기 쉽게 디자인)

=> 애플리케이션 안에서 다뤄지는 데이터를 컴포넌트들끼리 보다 유기적으로 주고받을 수 있도록 설계

 

프로토타입(Prototype)

실제 제품과 거의 흡사하게 구현한 것(페이지 이동, 상호작용 가능)

본격적으로 개발에 들어가기 전 단계에 작성하며, UI의 상호작용을 시물레이션하는 것이 목적

 

프로토타입의 품질 수준

최종 결과물과 얼마나 흡사한지에 따라 피델리티 레벨이 나뉨

1. Low Fidelity Prototype(Lo-Fi Prototype)

구체적인 내용이 작성되지 않은 상태에서 간단한 상호작용과 페이지 이동을 테스트할 수 있는 수준

User flow에서 빠지거나 어색한 기능 혹은 페이지가 없는지 빠르게 검토 가능

 

2. Middle Fidelity Prototype(Mid-Fi Prototype)

Hi-Fi만큼 완성도 있진 않지만 Lo-Fi보다는 최종 결과물에 가까운 수준

사용성 테스트를 위해 적어도 Mid-Fi 수준까지 작성하는 것이 좋음

 

3. High Fidelity Prototype(Hi-Fi Prototype)

최종 단계와 유사한 수준

디자인 확정, 실제 제품과 거의 다름없이 작동하기 때문에 사용성 테스트가 가능

테스트를 통해 개발 비용이 들어가기 전에 UI/UX 관련 문제를 발견하고 수정할 수 있어 비용 절감 효과를 볼 수 있음

 

프로토타입만 잘 작성해도 사용자 흐름을 개선해 좋은 UI/UX를 디자인할 수 있어 최종 결과물의 완성도를 높일 수 있음

프로젝트 기획 내용을 직관적으로 전달할 수 있어 내부 인원, 프로젝트 외부 인원과의 소통에도 도움이 됨 

 

프로젝트를 기획부터 시작할 일이 생긴다면 기획 단계에서 완성도 있는 프로토타입 만들기를 목표로 할 것

 

 

와이어프레임과 프로토타입의 차이

	와이어프레임	프로토타입
작성 시기	기획 단계	개발 전 단계
작성 목적	화면 구조 설계	UI 상호작용 시물레이션
특징	정적	동적
피델리티	Low~Mid (High는 거의 작성하지 않음)	Middle~High (Low는 테스트에 적합하지 않음)

 

 

 

 

22.12.19

코스 S3U2 UI/UX 진행중