실습 두 번째 주 시작!
오늘은 디지털 환경에 대한 전반적인 이해에 대한 교육을 진행했다. 앱/웹의 특징과 두 디지털 환경의 차이를 구분해보고 , 제일 궁금했던 안드로이드와 IOS의 차이에 대해 구체적인 예시를 통해 이해해봤다. 처음 UXUI디자이너 공부를 시작할 때 현직자로 일하고 있는 지인을 만나 이야기를 나눴을 때 가장 강조했던 부분이 안드로이드와 IOS 환경의 차이였다. 두 OS환경의 차이를 항상 염두에 두고 작업을 진행하라고 했었는데 혼자서 공부할 때는 잘 구분이 되지 않았었다. 사실 오늘 교육을 듣고 나서도 완전히 이해가 가진 않았지만 그래도 구체적인 예시를 보면서 어떤 느낌인지는 체감할 수 있었다. 실무에 들어가면 조금 더 익숙해지지 않을까 싶다.
일단 오늘 수업 정리!
Week 2-1 : 디지털 환경의 이해
디지털디바이스의 이해
PC, 모바일, 워치, 테블릿 외에 스마트티비, VR, 키오스크, 비행기디스플레이, 스마트 냉장고 등등 다양한 디지털 디바이스가 존재. 계속해서 발전중
2. 웹/앱 환경
웹의 특징
1) 브라우저 사용
2) URL 주소 보유
3) HTML / CSS 사용
HTML: 웹상에서 UI특성들을 화면에 만들어주는 기능 ex) 인풋창에서 텍스트가 써지는 동작까지
CSS: 텍스트를 입력하고 클릭했을 때 실제로 로그인이 되고 다음 화면으로 넘어가지는 구체적인 동작
4) JSP, PHP 등 개발 언어 사용
- 적응형 웹 / 반응형 웹으로 구분
- 웹 브라우저 최적화 작업(Multi-Browsing, Cross-Browsing) : 브라우저별로
앱의 특징
1) 기기에 설치해 사용
2) 인터렉션 구현 가능(하드웨어의 기능 활용
3) OS에 따른 개발 도구와 언어의 차이(안드로이드- java, 코틀린 / IOS- Objective C, Swift
필수 요소
앱 아이콘, 스플래시 화면, 탭 바(네비게이션)
3. 모바일 환경
: 사용자와 가장 가까이 함께하는 모바일 디바이스
1) 사용자의 형태적 속성을 고려한 모바일 컨텐츠의 특징
개인화, 유비쿼터스, 편의성, 차별성, 지역기반
2) 스마트폰의 하드웨어기능(카메라, 마이크, 지문인식, 지도, 블루투스, 와이파이)
- 카메라(QR, sns라이브, 실시간 카메라 번역, 신분증 촬영, 얼굴 인식, 얼굴 보정)
- 카메라/GPS(AR게임 like 포켓몬고, AR길찾기)
마이크(음성 번역, 네이버 음악찾기, 클럽하우스, Tmap => VUIs(Voice UI)
자이로스코프센서(캐시워크, 스포츠/슈팅 게임)
지자기 센서(나침반, 네비게이션, 경로안내)
4. 모바일 UI의 이해
- 모바일 기기의 디스플레이가 점점 커짐에 따라 터치 컴포넌트도 커지고 있음
기본적으로 로고는 애플 44pts, 구글 56pts
사용자의 행동을 고려한 터치 영역(하단 easy, 중단부 ok, 상단부 hard =>손가락 길이 때문). 이런 점도 모두 고려해야함! 네이게이션바가 하단부에 위치한 이유이기도 함.
안드로이드(구글 머터리얼 가이드), IOS(휴먼 인터페이스 가이드라인)
- History back(뒤로가기) vs Hierarchy back(위로가기)
안드로이드 기기는 네비게이션 바 아래에 자체적으로 뒤로가기 버튼 존재.
but IOS는 상단에 있는 ‘<’표시가 ‘뒤로가기’가 아닌 계층구조상 상위페이지로 가는 ‘위로가기’ 기능
같은 기능을 다른 이름으로 부름 ex) 안드로이드 – ‘네비게이션 바’ / IOS – ‘탭 바’
폰트 -> 안드로이드 Noto sans, Roboto / IOS San Francisco, 산돌고딕네오
실습 Day 6(11/6)
컨텐츠 기획 & UI 스케치
오늘은 지난주 솔루션을 통해 수정한 일레클 서비스의 메뉴트리 사이트맵을 기반으로
메인메누/컨텐츠를 기획하고 UI스케치를 진행했다.
일단 오늘의 실습 과제는
1. UI 벤치마킹
2. 컨텐츠 기획
3. UI 스케치
.
.
.
1. UI 벤치마킹
본격적으로 UI디자인을 시작하기 전에 기존의 경쟁사 외에 다른 서비스들에
좋은 모델들이 있는지 벤치마킹을 진행해봤다.
사실 일레클의 멤버십 페이지를 어떻게 구성해야할지 고민중이었는데 자회사인 쏘카의 쏘카클럽 멤버십
포맷이 좋은 가이드가 됐다. 목적지 설정과 예상 금액, 도착시간 등 주행 정보에 관해서는 카카오맵을 참고했다.
2. 컨텐츠 기획 및 UI 스케치
컨텐츠 기획 단계는 지난주 사이트맵을 작성할 때 잘 정리해둬서 크게 어려움은 없었다.
문제는 UI스케치 단계에서 직접 UI를 하나하나 그리면서 구상해보니 글로 표현했을 땐 문제가 없었지만 막상
실체화시키니 사용자 입장에서 불편하고 모호한 부분이 있어 전부 수정했다.
사용자의 서비스 사용 과정을 생각해보니 목적지 설정 기능이 대여하기 전에 이루어질지,
기기선택 후 기기정보화면에 표시될지 정확히 정할 필요가 있었다. 예상 도착 시간/이용요금 표기도 한 화면에
많은 정보를 넣기엔 사용자가 부담을 느낄 것 같아 구분해야했다.
이러한 문제점을 고려해서 아예 대여하기 기능을 1) 목적지 설정 후 대여 2) 기기 선택 후 대여 3) 현장 대여 총 3가지 유형으로 구분했다. 목적지 설정을 통해 예상 도착 시간과 이용 요금을 알고 싶은 사용자는 1번 유형을,
목적지 설정 없이 편하게 타고 싶은 사용자는 2,3번 유형을 선택할 수 있다.
이처럼 일레클의 핵심 메뉴는
1) 대여하기 2) 일레클클럽 3)일레클패스 4)알림 5)더보기
총 5가지로 구분되어 하단 네비게이션 바에 표기했다.
다만 아직 와이어프레임 초기 단계라 앞으로 프로젝트를 진행하며 더 많은 수정 작업이 이뤄질 것으로 보인다.
오늘은 하루종일 UI스케치만 하다 끝났다. 계속 그리다보니 시간이 엄청 빠르게 가서 당황스러웠음...
일단 쉬고 내일 다시 돌아오련다
본 후기는 유데미-스나이퍼팩토리 UI/UX 디자이너 인턴형 프로그램 학습 일지 후기로 작성 되었습니다.