[데이터 드리븐 서비스 기획] 적응형 웹 디자인, 모바일 앱 사용성 원칙과 테스트

 

 

적응형 웹 디자인의 이해

미리 정해진 몇가지 화면 크기를 기준으로 두고 비율에 맞춰 페이지를 구성하는 방식이다.

서버 또는 브라우저 기반 기기 감지 방법을 사용해 각 기기에 적합한 UI 템플릿을 각각 제공한다.

url 주소가 달라지는 특징을 가진다. (ex) naver.com, m.naver.com)

 

 

 

반응형 vs 적응형

반응형 웹의 느린 웹 로딩 속도

각 디바이스 별로 레이아웃을 지정하는 미디어쿼리를 전부 불러오게 되는 데 이때 모든 장치를 위한 CSS를 로드한다.

불필요한 수백개의 소스를 미리 불러들이는 작업으로 웹 로딩 속도는 현저히 느려지고, 불편함을 느끼게 된다.

적응형 웹의 미흡한 정교함과 일관성

다음과 네이버는 목적을 충분히 반영하고 사용자 입장을 고려하는 적응형 웹을 채택했다.

하지만 모든 스크린 사이즈에 최적화된 화면을 구현한 정교함이 떨어지고 각 디바이스 별로 미디어쿼리의 관리를 미흡하게 된다면 모든 기기에서의 UI가 일관되지 않아 부정적인 영향을 미칠 수 있다.

 

 

 

모바일 퍼스트

PC보다 모바일 기기를 먼저 생각해서 디자인 및 프로그래밍하는 기법이다.

불필요한 요소를 최소화시켜 사이트가 제공하는 내용과 기능이 무엇인지 명확하게 한다.

왜 모바일이 먼저인가?

모바일 인터넷 사용량은 데스크탑 인터넷 사용량을 넘어섰다.

모바일 친화적인 웹사이트를 선호하는 유저가 증가한다.

장점

제품의 핵심에 집중하고 나머지를 제거하여 가장 중요한 UX 구성 요소를 정확히 파악 가능하다.

단점

지나치게 핵심만 강조한다면 과도하게 단순하거나 견고하지 못한 콘텐츠가 디자인 된다.

 

 

 

네이티브 앱과 하이브리드 앱

대부분 하이브리드 앱으로 만든다.

네이티브 앱

모바일 기기에 최적화된 네이티브 언어로 개발된 앱이다.

특징

• 개발: 해당 운영체제에 최적화 되어있는 개발 도구로 제작된다.
• 실행: 플레이 스토어, 앱스토어에서 설치한다.
• 안드로이드 SDK: Kotlin, Java
• iOS SDK: Swift, Objective-C

단점

• 각 운영체제 마다 개발 및 유지 보수가 필요하다.
• 높은 개발 및 운영 비용
• 업데이트를 할 때 마다 앱 스토어를 사용해야 한다.

거의 폰에 기본적으로 내장되어 있는 앱이나 대부분의 게임 서비스가 네이티브 앱이다.

 

하이브리드 앱

웹 앱과 네이티브 앱의 기능을 결합하여 개발된 앱이다.

하나의 코드 베이스로 iOS, 안드로이드에서 둘 다 작동된다.

특징

• 개발: 모바일 웹앱을 모바일 운영체제로 패키징한다. 외부는 네이티브 모습이지만 내부는 웹앱이다.
• 실행: 플레이스토어, 앱스토어에서 설치한다.
• 웹브라우저로 접속하는 것과 차이가 나지 않지만 QR 코드리더, 음성 인식 등을 지원한다.

장점

• 네이티브 API와 브라우저 API를 이용하여 다양한 개발이 가능하다.
• 네이티브 앱보다 개발 비용 및 시간이 절감된다.
• 네이티브 앱보다 유지 보수가 쉽다.
• 모바일 웹보다 속도가 빠르다.
• 디바이스 고유 정보 접근이 가능하다.

단점

• 네이티브 앱보다 제한적인 기능과 느린 속도가 발생한다.
• 네이티브 앱 개발 지식이 필요하다.
• 브라우저 성능에 따라 앱 성능 영향을 받는다.

인스타그램, Gmail, 금융기관 앱 등이 하이브리드 앱을 사용한다.

 

 

아래 사이트는 한국에서 가장 많이 사용되는 스크린 사이즈 순위를 알 수 있다.

https://gs.statcounter.com/

Statcounter Global Stats - Browser, OS, Search Engine including Mobile Usage Share

 

 

최소 반응형 레이아웃

가장 많이 사용하는 대중적이고 간결한 기준을 둔 것이다.

• 768px 미만은 모바일 기기, 768px - 1024px는 태블릿, 1024px 이상은 데스크탑

 

가로모드 디바이스 지원 반응형 레이아웃

모바일 기기와 태블릿 기기의 가로모드 화면을 별도로 구문하여 디바이스 사용환경을 최대한 고려한 반응형 레이아웃이다.

• 600px 미만은 모바일 기기, 600px - 900px는 모바일 가로와 태블릿 세로, 900px - 1200px는 태블릿 사로 등

 

부트스트랩 반응형 레이아웃

가장 다양한 사용자를 대응할 수 있는 웹 프레임 워크

• 576px 미만은 모바일 기기 (Extra small), 576px - 768px 태블릿 등

 

 

 

모바일 앱 사용성 원칙과 테스트

디자인 기본 원칙

사용자 인터페이스 설계의 기준이 되며 사용자 인터페이스의 주요 검토 항목에 해당된다.

각각의 원칙은 서비스 또는 제품에 따라 가중치가 달라질 수 있다.

• 가시성: 사용자의 목표가 잘 식별될 수 있도록 정보량, 강조, 가독성, 주변 요소와의 관계를 고려하여 설계한다.
• 이해도: 시스템 조작 시 사용자의 행동을 유추할 수 있도록 시스템의 동작 원리를 이해한다.
• 사용편의성: 시스템과 인간과의 신체적 적합성(위치, 관계, 힘 등)을 고려하여 설계한다.
• 심미성: 인터페이스 내에 여러가지 요소들을 미적으로 동일시킨다.

 

애플의 iOS 디자인 원칙

• 미적 무결성: 사용자의 작업을 돕고 집중력을 유지할 수 있도록 앱의 형태와 동작과 통합되는 기능을 제공한다.
• 일관성: 사용자에게 익숙한 아이콘, 표준 스타일, 통일된 용어를 사용해 일관된 앱을 구현한다.
• 직접 조작: 화면 콘텐츠를 직접 조작할 수 있게 함으로써 사용자의 주의 집중과 이해를 촉진한다.
• 피드백: 사용자가 자신의 행동을 인지하고 결과를 알 수 있도록 피드백을 제공한다.
• 행동 유도성: 앱 사용법을 빨리 학습할 수 있도록 실제 세계의 요소를 은유적으로 제공한다.
• 사용자 조작: 사용자가 원하지 않는 결과를 피할 수 있도록 사용자에게 통제권을 제공한다.

 

디자이너와 사용자의 사고방식 이해

인터페이스와 시스템 구조에 대한 디자이너의 이해와 사용자의 이해가 항상 일치하는 것은 아니다.

 

디자이너의 사고방식

시스템 사양 확인 → 시스템 구조 이해(시스템 모델: 디자이너가 이해한 시스템 구조) → 인터페이스 설계 (디자인 모델: 시스템을 표현하기 위해 디자이너가 생각한 인터페이스 구조)

 

사용자의 사고방식

유사한 시스템 사용 경험, 메뉴얼 확인, 시범 사용 → 인터페이스와 시스템 구조 및 조작방법 이해

 

 

멘탈모델

사용자가 이해한 시스템의 구조와 작동 방식에 대한 내적인 표상이다.

 

멘탈모델은 사실이 아닌 사용자의 경험을 기반으로 형성한다.

하나의 인터페이스에 대해 사용자들은 멘탈 모델을 가지고 있으며 멘탈 모델은 사용자의 경험에 의해 변경될 수 있다.

새로운 시스템 사용 시 유사한 시스템을 사용해 본 경험을 통해 형성된 모델이다.

 

 

개념 모델

시스템 구조를 형성하는 요소, 관계, 조건 등을 사용자와 상호작용하는 실제 인터페이스에 표현하는 것으로 디자이너에 의해 형성됨

개념 모델 형성에 영향을 주는 요소

• 제품, 시스템의 정보 구조
• 사용되는 언어
• 보여지는 콘텐츠
• 채널 전략
• 사용자가 접하는 제품, 시스템의 인터렉션

 

 

⭐️ 멘탈 모델과 가까운 개념 모델을 형성하기 위한 방법

• 사용성 평가, 카드 소팅, 트리 테스트 등을 통해 사용자를 이해하고 사용자의 멘탈 모델과 개념 모델이 일치하는지 확인한다.
• 사용자에게 익숙한 언어를 사용하여 인터페이스를 설계한다.
• 사용자가 이미 사용하는 인터페이스 패턴을 활용한다.
• 시스템에 새로운 개념 적용 시 실제 세계와 유사하게 설계한다.
• 새로운 개념 모델 소개 시 영상, 이미지 등을 활용하여 사용자에게 가이드를 제공한다.
• 사용자의 멘탈 모델이 점진적으로 변화될 수 있도록 사용자의 여정에 따라 개념 모델을 제시한다.

 

문제 영역 귀속

접면의 사고방식

• 사용자, 인터페이스, 시스템 사이를 각 접면으로 나누어 문제의 귀속 영역을 구분함으로써 기획 설계에서 해결해야 할 영역을 명확히 할 수 있다는 모델이다.

제품 특성에 따른 사용자 인터페이스 분류

• 사용자 인터페이스 설계 시 고려해야 할 조건은 제품의 유형과 특성에 따라 상이하다.
• 사용자와 시스템의 올바른 상호작용과 좋은 사용성을 제공하기 위해서는 제품 특성에 따라 사용자 인터페이스를 디자인할 필요가 있다.
• 사용자 인터페이스는 조작감과 사고 패턴에 따라 4가지 유형으로 분류한다.