[에이블런 4주차] UX/UI: 사용자 경험을 높이는 서비스 기획-5

서비스 기획을 하면서 고려해야할 점은 타겟 고객에 따라서 안드로이드로 개발을 해야할지 iOS로 개발해야할지 혹은 둘다 해야할지 고민해야한다. 더불어 양쪽 시장을 타겟팅했다면 웹도 반응형으로 해야할지 적응형으로 해야할지 고려해야할 것이 한두가지가 아니다. 디자인을 하기전에 고려해야할 요소들을 알아보고 어떻게 접근하면 좋을지도 같이 알아보도록하자.

웹/앱 환경의 이해

웹의 특징

• 브라우저 사용
• URL 주소 보유
• HTML/CSS 코드 사용
• JSP, PHP 등 개발 언어 사용

종류

	반응형 웹	적응형 웹
정의	웹 페이지의 디자인과 레이아웃이 모든 화면 크기에 자동으로 맞춰진다.	웹 페이지에서 감지된 기기를 기반으로 미리 만들어진 정적인 레이아웃을 불러온다. PC, 모바일, 테블릿 버전으로 각각 따로따로 만든다.
장점	- 모든 플랫폼에서 일관된 컨텐츠 경험 - 보편적이지 않은 화면 크기의 새로운 기기에서도 작동 가능 - 운영에 대한 편의성	- 각 플랫폼 및 상황과 맥락에 맞춰 제공되는 완벽한 맞춤화된 경험 - 원하는 기기에 맞게 최적화된 디자인을 할 수 있는 고성능 작업 수행 - 광고 및 타사의 통합 콘텐츠에 대한 간편한 맞춤화
단점	- 각 기기에서 웹사이트가 렌더링되는 방식에 대한 통제가 상대적으로 어려움 - 금융, 정부같이 안정성이 중요한 웹사이트는 반응형 웹이 사용되기 어렵다. - 디자인에 대한 더 많은 전문 지식이 필요함. 플랫폼 간 테스트 및 디자인 조정을 요함 - 동적 콘텐츠를 불러오는 데 더 많은 작업이 요구되어 웹사이트 성능이 저하됨	- 콘텐츠가 모든 기기에 일관되지 않을 경우 SEO에 부정적인 영향을 미침 - 유지보수가 어렵다
예시	토요타	애플

 

앱(어플리케이션)의 특징

• 기기에 설치하여 이용
• 인터렉션 구현 가능(하드웨어의 기능 활용)
• OS에 따른 개발도구, 언어의 차이

종류

	네이티브 앱	하이브리드 앱	프로그레시브 웹앱
디자인
정의	OS 환경에 맞춰 개발된 앱	모바일 웹과 네이티브 앱의 장점을 합친 앱	앱처럼 동작할 수 있는 웹사이트
설명	- 운영체제에서 제공하는 개발 언어로 개발 - 스마트폰의 기능 활용 가능 (GPS, 카메라 센서, Push 등)	- 설치 과정 필요 - 네이티브 앱에 비해 적은 개발 비용 - 업데이트 수정 보완이 용이	- 브라우저에서 바로 사용 가능 - 설치 과정이 불필요 - 인터넷 연결 없이도 사용 가능
예시	지도 앱, 지하철 앱, 게임, 노트, 계산기, 카카오뱅크 등	인스타그램, Gmail, 쿠팡, 11번가, K뱅크, KB국민은행 등	트위터 라이트, 알리바바 등

앱 디자인 작업 시 필수 요소 (없으면 앱스토어에 등록불가!)

 

웹 vs 앱 차이점

	웹	앱
장점	여러 브라우저를 동시에 사용 가능하다	실행속도가 빠르다
	OS로 인한 환경 격차가 적다	다양한 기능이 구현 가능하다
	설치가 불필요하다	하드웨어의 기능 사용으로 사용자 경험을 극대화 할 수 있다.
	업데이트나 수정 변경이 용이하다	사용자 맞춤형 정보, 개인화 서비스를 제공할 수 있다.
	검색, 노출이 용이하다	다양한 제스처에 대응 할 수 있다.
단점	조작 인터렉션이 부족하다	OS별 플랫폼 개발에 따른 시간과 비용이 소요된다.
	하드웨어의 기능을 사용할 수 없다.	업데이트나 수정이 용이하지 않다.

 

모바일 환경

사용자와 가장 가까이 있는 모바일 디바이스

• 일상생활을 함께하는 사용자와의 밀접성
• 사용자와 상호작용하는 환경
• 극대화된 휴대성과 편의성
• 기술적 결합으로 UX 가치 상승

사용자의 형태적 속성을 고려한 모바일 컨텐츠의 특징

• 개인화: 모바일 기기 설정에 따른 개인의 특성에 맞는 컨텐츠 제공
• 유비쿼터스: 공간제약 없이 언제, 어디서나 접속 가능
• 편의성: 기술 발전과 앱 개발의 진화로 편리성 제공
• 차별성: 사용자의 이용 패턴을 분석하여 개인에게 차별화된 서비스 제공
• 지역기반: 위치 기반을 통해 사용자 주변의 유용한 정보 제공

사례

	모바일 환경
카메라 적용 사례	QR코드 인식, SNS 라이브 방송, 구글 실시간 카메라 번역, 비대면 계좌개설 신분증 촬영
카메라 + GPS 적용 사례	포켓몬 고, 구글 AR 길찾기
카메라 얼굴 인식	3D 스캐닝 + 얼굴 인식으로 안경찾기, 카메라 얼굴 보정 / 화장 기능, 3D 아바타 앱: 제페토
마이크(음성) 적용 사례	음성 번역기, 네이버 음악 찾기, 클럽하우스, Tmap
자이로스코프 센서 적용 사례	방치의 신, 만보기 기능, 멤버십 (L포인트), 디지털 수평계, 스포츠 게임, 레이싱 게임
지자기 센서 적용사례	나침반, 네비게이션, 길 방향 안내

 

모바일 OS/UI 이해

사용자 행동을 고려한 터치 영역

가이드라인 실무 적용

• 서비스의 목적과 내용 명확히 이해하기
• 사용성, 편의성 디자인 원칙과 원리 이해하기
• 타깃 사용자에 대한 충분한 조사

안드로이드 iOS UI 차이

1. 네이버지도

2. 페이스북

 

3. 쿠팡이츠

 

4. FLO

타깃 디바이스 선택하기

선택 시 고려사항:

• 타깃 유저의 모바일 OS 점유율 확인
• 타깃 유저의 디바이스 해상도 점유율 확인
• 다양한 디바이스 크기에 대응할 수 있는 사이즈

연령대별 모바일 OS 사용 점유율

	안드로이드	iOS
20대	47%	53%
30대	62%	38%
40대	68%	32%
50대	75%	25%
60대	83%	17%
70대	90%	10%
전체	71.5%	27.7%

 

 

마치며

1인 웹개발자를 하기로 마음먹은 이래로 내게 가장 눈에 띄는 유형은 반응형 웹, 하이브리드 모바일 앱 이 두가지 환경을 타겟으로 개발하는게 좋아보인다. 대략적으로 나마 알고 있었던 개념을 다시금 확립할 수 있어서 좋았고, 이 분야에서만 전문가가 되어서 오래동안 써먹도록 해야겠다.