제로베이스 PM 스쿨 10기 7주차 - 3

개발 플랫폼 특징

모바일 플랫폼에서의 앱 형태

• 네이티브앱: 안드로이드 or iOS
• 웹앱: PC에서의 웹 형태 앱
• 하이브리드앱: 네이티브의 껍데기만을 가지고 안에 컨텐츠를 웹 앱 등의 형태로 만드는 것

Web vs App 특징

Web App

기준 해상도 정의(예시: 1024xx768)	표준 OS 설정 (안드로이드, iOS)
브라우서 호환성 강함(chrome, Firefox등)	브라우저 호환성 약함 (Safari, Chrome)
마우스 / 키보드 인터페이스	터치 인터페이스
넓은 영역	제한된 영역
정보 우선순위에 대한 배치	정보 우선순위에 대한 노출 순서
웹접근성 준수	네이티브 앱의 경우 APP 접근 권한 정의, 앱 접근성 준수
웹 표준 준수 (HTML5, CSS, JavaScript)	웹 표준 Guideline

Native App 특징

✔️안드로이드 앱은 google play store에서 iOS는 앱스토어에서 다운로드 가능하고 해당 OS에서만 실행된다.

장점

• 다양한 네이티브 기능과 UI를 모두 이용할 수 있음 (카메라, 마이크 , GPS, 스와이프 제스쳐)
• 가장 빠르고 안정적이며, 반응이 빠른 환경을 제공

단점

• 해당 OS에서만 다운로드 실행 가능하다.
• 수정 사항 발생 시 앱을 업데이트 배포해야 된다.
• 해당 플랫폼에서 요구하는 언어의 제약이 있음

언제 유용할까?

• 필수로 사용되어야 하는 플랫폼 기능이 있는 경우
• 앱 기능이 많고 복잡한데 성능이 뒷받침 되어야 하는 경우

Mobile Web 특징

✔️브라우저에 URL만 입력하면 어떤 디바이스에서도 동일한 내용을 확인할 수 있다.

장점

• 어떤 플랫폼에서든 동일한 콘텐츠를 볼 수 있다.
• 개발을 할 때 다른 방식보다 훨씬 적은 시간과 비용이 든다.
• 빠르게 최신의 내용으로 업데이트 가능하다.

단점

• 디바이스에 대한 접근 권한이 없기 때문에 모바일 OS에서 제공하는 기능들을 활용할 수 없다.
• 네이티브, 하이브리드 앱보다 실행이 까다롭다. (브라우저를 열고 검색 또는 url을 입력해서 접근)

언제 유용할까?

• 다중 플랫폼 지원이 필요한 경우, 많은 사용자들이 다양한 채널을 통해 동시 접속할 때 동일한 서비스를 제공하는 목적일 경우 유용하다.
• 콘텐츠가 빈번하게 변경될 경우 유용하다.

Hybrid App 특징

✔️’네이티브앱+웹앱’, 네이티브 앱에 웹류를 띄워 웹앱을 실행시키는 형태

장점

• 네이티브 API와 브라우저 API를 이용한 다양한 개발이 가능, 네이티브 앱과 유사한 UI 가능. 스마트폰 제어 가능 (카메라, 마이크, 지문 인식 등)
• 크로스 플랫폼 대응이 가능하다. 유지보수가 네이티브 앱에 비해 쉽다.

단점

• 복잡한 네비게이션에서는 동선 문제 발생
• 네이티브 기능에 접근하기 위해서는 네이티브 개발 지식이 필요하다.

언제 유용할까?

• 다중 플랫폼 지원이 필요한 경우, 많은 사용자들이 다양한 채널을 통해 동시 접속할 때 동일한 서비스를 제공하는 목적일 경우 유용하다.
• 콘텐츠가 빈번하게 변경될 경우 유용하다.

ex) 보통 면세점앱서비스에서 하이브리드앱 형태로 개발을 함 (안의 컨텐츠가 자주 바뀌어야 하기 때문에)

---

✔️적응형 웹(Adaptive Web) - 반응형 웹 이전에는 '적응형 웹'이라는 게 존재했음

• 데스크탑 버전과 모바일 버전의 사이트를 각각 제작해 운영 주소 앞에 ‘m’을 붙인 모바일 웹 페이지
• 웹 페이지를 수정할 경우 각각 html, css를 두번 수정해야 함. 작업 중복, 비효율적이고 버그가 생길 수 있음.

반응형 웹(Responsive Web)

✔️하나의 소스 코드로 모든 스크린에 회적화된 뤱 사이트를 구축할 수 있는 방법, 브라우저의 가로 넓이에 반응하여 구성 요소가 변하는 기술

• 디바이스 해상도에 유연하게 반응하고, 어떤 기기에서도 동일한 콘텐츠를 볼 수 있어 일관성을 확보할 수 있다.
• 서로 다른 기기의 넓이에 따라 CSS를 추가로 코딩해야 한다. 하나의 넓이로 작업하는 것보다 더 많은 코드가 필요하고 초기 작업 시간이 오래 걸린다.

개발 플랫폼 정의

✔️서비스의 특성에 따라 개발 플랫폼을 어떤 것으로 할 것인지 기획하기 이전에 정의를 해야 한다.

• 서비스의 목적
• OS에서 제공하는 기능 활용도
• 콘텐츠 변경 주기

플랫폼 출시 기준

✔️국가, 연령별 체크해보기

---

먼저 출시할 Platform을 정하는 기준 - 우리 나라에서 가장 많이 사용되고 있는 OS 시스템이 뭔지 확인한다.

Statcounter 사이트를 활용하면 국가별 OS 사용 비율을 확인할 수 있다 - 객관적인 근거를 제시할 수 있음

**Statcounter - Web Analytics Made Easy**

국가별 OS 점유율 조사 (일본, 미국) - 일본이나 미국을 타겟으로 한 서비스인 경우 iOS 앱을 먼저 출시한다.

네이버 랩스에서 우리나라 특정 연령을 대상으로 인기있는 휴대폰 기종을 확인 - 특정 세대를 타겟팅한 서비스인 경우 그 세대가 많이 사용하고 있는 OS를 기준으로 우선순위를 결정한다.

플랫폼 출시 순서를 정할 때 고려하는 점

• 내부 디자인과 개발, QA 리소스를 고려한다. 동시 오픈을 준비하더라도 일정 간격을 두는 걸 권장한다.
• 출시 국가에서 OS의 시장 점유율을 고려한다.
• Target User가 선호하는 OS를 먼저 출시한다.

안드로이드 - Material Design Guideline / iOS - Human Interface Guideline

가이드라인에 담긴 내용들

• Design Principles, Accessibility, Motion, Component adaption
• Style Guide - Color, Typography, Icons, Layout, Terminology
• Component Library - Navigation, Buttons, Checkboxes, Dialogs, Lists 등

안드로이드 가이드라인과 iOS 가이드라인을 숙지하고 있어야 하는 이유

• 사용자들에게 익숙한 사용 환경 제공을 통한 좋은 UX 제공
• 개발 효율성
• 시간 절약 → 가이드라인을 준수해서 기획을 해두면 디자인적인 요소들을 가져다가 쓸 수 있기 때문에 향후 다른 개발이나 업데이트에 있어서 시간을 단축할 수 있게 된다.
• 마켓 등록 거절 사유가 될 수 있음 → 가이드라인을 준수하지 않은 서비스들은 Reject 되어서 출시가 늦어지거나 불가해질 수 있다.

안드로이드와 iOS의 차이점 1 - 디폴트 버튼이 다르다. (iOS는 뒤로가기 버튼이 디폴트 값으로 설정되어 있지 않음)

안드로이드와 iOS의 차이점 2 - 네비게이션이 다르다. (안드로이드 - 햄버거 버튼에 Primary 메뉴 노출 / iOS - 모버튼에 노출)

같은 서비스이지만 OS에 따라 서비스의 UI 디자인이 달라진다. (서비스명: Medium)

안드로이드와 iOS의 차이점 3 - CTA 버튼 위치가 다르다. (안드로이드 - 우측 하단에 FAB로 노출 / iOS -우측 상단에 노출)

안드로이드와 iOS의 차이점 4 - Title의 위치와 이전 버튼의 모양이 다르다. (안드로이드 - 타이틀 좌측 정렬, 이전 버튼은 화살표 모양(←) / iOS - 타이틀 가운데 정렬, 이전 버튼은 꺽쇠 모양( < )+텍스트)

안드로이드와 iOS의 차이점 5 - 폰트, 아이콘, 뎁스에 따른 섀도우 표현 등 UI의 비주얼 디자인이 다르다.

Visual Design이 다른 가장 대표적인 예시 - 공유하기 아이콘의 모양 & Dialog Text의 배열 (안드로이드 - dialog는 좌측 정렬, 취소·확인 버튼은 우측 정렬 / iOS - dialog와 취소·확인 버튼 모두 가운데 정렬)

 

실무에서 활용하는 심리학 이론

 

심리학 이론을 활용하여 기획하면 좋은 이유

• 빠르게 예측하고 사용할 수 있도록 도움을 준다.
• 학습 시간을 단축시키고 에러 발생을 낮출 수 있다.
• 의사결정에 드는 시간을 단축시킬 수 있다.
• 인지과부하를 줄이는 데 도움이 된다.

→ 시간 관계성 UT를 진행하지 못할 때 기획의 근거 자료로 활용할 수 있음

Theory#1 : 선택의 역설 (The Paradox of choice)

• 선택지가 많으면 인지과부하가 걸린다. 선택지를 적게 주는 것이 의사결정률이 더 높다. (그룹 A: 24가지 종류의 잼 → 3%구매 / 그룹 B: 6가지 종류의 잼 → 30%구매)

✔️실무 적용 방안

• 현재 페이지의 목표와 관련 있는 정보인지를 사용자가 쉽게 알아볼 수 있도록 맥락 또는 단서를 제공해야 된다.
• 사용자의 목표에 도움이 되는 Primary Button을 제공한다.
• 최대한 불필요한 부분을 덜어내서 선택지를 줄여준다.

Theory#2 : 본 레스토프 효과 (Von Restorff Effect)

• 비슷한 사물이 여러개 있으면 그 중에서 가장 차이 나는 한가지만 기억할 가능성이 크다.
• 보통 CTA에 활용한다.
• 중요한 정보나 핵심 동작은 시각적으로 눈에 띄게 하라 (색상, 형태, 크기, 위치, 움직임)

✔️실무 적용 방안

• 명확한 목적이 있을때만 사용해야 한다.
• 시각적 요소를 강조할 때는 다른 요소와 경쟁하지 않도록 제한을 두자.
• 시야에 있어도 배너는 습관적으로 무시한다. 중요한 정보가 배너처럼 보이지 않게 하자.
• 특정 요소를 강조할 때 색상에만 의존하면 색맹이나 저시력인 사용자가 배제된다는 사실을 유념하라.

Theory#3 : 밀러의 법칙

• 사름은 문자나 숫자를 덩어리화화여 효과적으로 암기할 수 있다. 마법의 숫자 7 → 덩어리화 (chunking)
• 덩어리화는 콘텐츠를 다룰 때 유용하다.
• 덩어리를 유의미한 단위로 정리하면 단기 기억을 최적화 할 수 있다.
• ex) 4408675309 (x), (44) 867-5409 (o)

Theory#4 : 서열 위치 효과

• 목록의 중간 위치 항목보다 처음과 끝에 위치한 항목을 더 잘 기억한다.
• 중요한 메뉴는 맨 왼쪽과 오른쪽에 배치

Theory#5 : 피크엔드 법칙

• 인간은 경험 전체의 평균이나 합계가 아니라, 결정의 순간과 마지막 순간에 느낀 감정을 바탕으로 경험을 판단하는 경향이 있다.
• 긍정적인 순간보다 부정적인 순간을 더 생생하게 기억한다.
• 해당 법칙을 활용해 유저의 부정적 경험을 긍정적 경험으로 전환할 수 있는 기회를 포착할 수 있다.

피크엔드 법칙을 이용해서 사용자의 경험을 개선한 서비스 사례 - 메일침프 : 사용자가 메일을 다 작성하고 보내지 않고 있으면 메일 보내기를 유도하는 아이콘이 표시되고, 메일을 보내고나면 고생했다는 의미로 사용자의 감정을 불러일으킬 수 있는 하이파이브 아이콘을 표시한다.

사람의 기억 형성 과정

사람의 기억 형성 매커니즘을 이해하고 이를 이용해 서비스를 기획한다면 더 좋은 서비스를 기획할 수 있다.

추천 사이트 및 도서

✔️Article

• medium.com/design
• brunch
• marvel
• WebDesigner news
• Site point

✔️디자인

• 핀터레스트
• dribble
• behance
• notefolio

✔️추천 도서

• OKR 전설적인 벤처투자자가 구글에 전해준 성공방식 → OKR 수립하는 방법 및 사례
• Data-Driven UX → 데이터 분석이 필요한 이들의 첫걸음을 도와주는 입문서
• UX/UI의 10가지 심리학 법칙
• 비전공자를 위한 이해할 수 있는 IT 지식 → 기획자라면 알아야 되는 개발 환경에 대한 이해에 도움이 됨
• 조직을 성공으로 이끄는 프로덕트 오너 → 프로덕트 오너의 역할과 필요 역량에 대해 소개하는 도서
• 처음부터 다시 배우는 서비스 디자인 씽킹 → 리서치와 기획 진행 단계에서 필요한 내용을 담고 있음