A는 주요 기능을 크게 배치하여 직관적이고, 엄지손가락을 많이 사용하는 사용자의 특성상 좋은 배치라고 할 수 있다. 하지만 밝기 조절이나 음량 조절 등 터치 영역의 크기가 작아 터치의 정확도가 떨어질 수 있는 디자인이라고 생각한다.
B는 정돈된 대칭 UI로 원하는 기능을 빠르게 찾을 수 있고, 버튼의 크기가 1x1, 2x1, 1x2, 2x2로 일정하기 때문에 터치의 정확도가 올라가는 좋은 디자인이라고 생각한다. 실제로 B 형식의 제어센터를 사용했을 때 가장 많이 사용하는 기능들의 위치를 자주 쓰는 손을 기반으로 수정할 수 있고 기능을 추가, 삭제할 수 있는 사용자화 맞춤 서비스가 잘 되어있어 편리함을 느꼈다.
회원가입을 높이기, 구매 전환율을 높이기, 재방문율을 높이기, 앱 설치 유도, 사용 시간 높이기 등 여러 목적에 맞는 부분들을 UX적인 관점에서 개선, 데이터를잘 활용하는 것이 중요하다.
▸ 효율적인 공부 방법
기본기를 단단하게 하기, 동기부여하기
내가 잘하는 게 무엇인지, 부족한 게 무엇인지 알아보고, 그것들을 채워가며 목적에 맞게 공부하는 것이 좋다. 지금 이 순간에도 새로운 내용과 성공 사례들이 나오고 있고, 매년 OS 업데이트가 이루어지며, 신기술이나 장비는 쉴 틈없이 나오기 때문에 UXUI에 대해 공부를 멈추어서는 안된다. 항상 배우려는 마음가짐을 가지고 노력해야한다.
▸ UI 디자인 툴 소개
UXUI Design - 화면을 기획하고 디자인할 때 사용
Graphic - 비트맵, 벡터 기반의 그래픽(아이콘)을 만들 때 사용
Hi-Fi Prototype - 하이퀄리티의 프로토타입을 만들 때 사용
HandOff - 개발 직군에 가이드라인을 넘길 때 사용
Animation - 애니메이션 코드로 변환할 때 사용
▸ 웹과 앱의 다른 점
사용 접근의 차이 웹은 브라우저에 URL만 검색하면 바로 접근이 가능하고, 앱은 스토어 내에 설치가 기본적으로 선행 되어야 한다.
업데이트 및 유지 보수 웹은 수정 후 서버에 적용하면 바로 업데이트가 되고, 앱은 OS별 마켓 정책 기준을 통해 심사 받아야 한다.
성능과 호환성 웹은 사용 단말기에 제한 없이 호환성이 뛰어나지만, 앱보다 성능이 떨어진다. 앱은 카메라, GPS 혹은 각종 프로세싱 능력이 뛰어나다. (네트워크 없이도 동작 가능 : 캘린더, 포토 에디터 등)
▸ Android, iOS 이해하기
우리는 스마트폰을 바꿀 때 보통 Android면 Android로, iOS면 iOS로 바꾼다.
이처럼 인간은 익숙한 것에 편리함을 느끼고 새로운 것에 불편함을 느끼기 때문이다.
▸ 우리가 OS 차이를 이해해야 하는 이유
UI를 디자인 할 때 어떤 OS로, 어떤 디바이스 규격으로 작업을 할지 서로 논의가 되어야 하기 때문에 환경을 꼭 이해해야 한다.
그리고 프로젝트의 규모, 기간, 개발 환경에 따라서 디자인 방식이 달라지기 때문에 그에 맞게 디자인해야 한다.
▸ 앱이 만들어지는 과정
기획 → 디자인 → 개발 → QA → 배포 첫 단추가 가장 중요하다. 앱의 방향성을 잘 잡는게 중요!!
기획 무엇을, 왜, 어떻게 만들지 고민 ▫ 무엇을 - 신규 서비스 혹은 서비스 내 신규 기능 ▫ 왜 - 정성적, 정량적 데이터를 바탕으로 인사이트 도출 ▫ 어떻게 - 타깃 분석과 경쟁사와의 전략에 의한 계획 수립
디자인 어떻게 경험을 설계할지 고민 ▫ 원칙 - 브랜드 디자인 가이드라인과 OS 가이드라인에 맞추어 제작 ▫ 경험 설계 - 다양한 방법론을 통한 유저 플로우 설계 ▫ 차별화 - 경쟁사와 차별화된 사용성과 그래픽 퀄리티
개발 어떤 플랫폼에 개발할지 고민 ▫ 플랫폼 선정 - 리소스에 따라 초기에 어떤 OS를 런칭할지 (한 번에, 나눠서) ▫ 개발 진행 - OS 환경에 따른 개발 (네이티브 or 크로스 플랫폼) ▫ 데이터 로깅 - 앱 내 데이터 수집을 위한 로깅 작업
QA 놓친 부분이 없는지 검증하는 단계 ▫ QA Plan - 유저 저니(사용자 여정지도)에 따른 QA 계획 작성 ▫ 기능 테스트 - 다양한 환경(기기, 접근 여부)와 시나리오에 따른 테스트 진행 ▫ 결과 공유 - 테스트 결과 정리 및 담당자 공유
배포 마무리 단계 ▫ 스토어 설정 - 플레이 스토어, 앱 스토어 내 런처 아이콘, 미리보기 및 설명 작성 ▫ 홍보 - 다양한 채널에 마케팅 콘텐츠 제작 및 발행 ▫ 운영 준비 - 고객 경험 관리와 혹시 모를 오류 대비, 피드백
📖 Chapter 2 : UI 디자인
▸ 레이아웃과 그리드 시스템
Layout 레이아웃 화면 크기, 텍스트, 이미지, 여백 등의 다양한 구성요소를 고려하여 앱 내에 정보를 시각적으로 배치하는 것
ex) 1단, 2단, 3단 레이아웃
Grid System 그리드 시스템 여러 종류의 요소를 질서 있게 배치하기 위한 그리드 규칙 👁🗨 시각적으로 일관된 배치로 통일성을 줌, 정해진 가이드라인으로 작업 시간 단축, 예측 가능한 화면 구성
ex) Column (4단 or 6단 컬럼), Gutter (16), Margin (16 or 20)
▸컬러
앱 디자인 시 컬러가 중요한 이유
우선 순위에 따른 컬러 표현
상황에 따른 컬러 사용 (성공, 경고, 에러)
유효성 검사에 충족된 컬러 사용 (접근성)
책 『좋아 보이는 것들의 비밀』
▸ 컬러 구성
Primary Color 주색 - UI 내에서 가장 메인을 사용되는 색상, 주로 브랜드의 고유 아이덴티티 색상을 사용한다.
Secondary Color 보조색 - 메인 컬러보다 덜 중요한 요소에 사용하는 색상, 보통 1~5개 정도의 보조 색상을 사용한다.
Neutrals 중성색 - 흰색부터 검정색까지 회색 음영을 포함하는 색상, 주로 배경과 텍스트에 사용한다.
Semantic Colors 시스템 컬러 - 목적을 전달하는 색상, 성공 / 경고 / 에러 / 정보의 상황에 따른 4가지 색으로 구성되어 있다.
Expended Palettes 확장 팔레트 - 다양한 사용 사례를 충족하기 위한 팔레트, 보통 Primary, Secondary를 900~50으로 나누어 사용한다.
댓글