[유데미 스나이퍼팩토리] UI/UX 인턴형 프로그램 4기 과정 5일차 - 웹과 앱의 이해, 앱 설계하기, 팀 프로젝트 회고
1. 웹과 앱의 이해
적응형 웹사이트
적응형 웹사이트는 웹과 앱 화면을 따로 만들어서 각 기기에 맞게 다른 환경을 경험하게 된다.
반응형 웹사이트
모바일 기기의 확산으로 사용자 경험의 최적화를 위해 반응형 웹사이트가 등장했다. 기존의 웹사이트를 기기 해상도에 따라 적절히 보여주기 때문에 시간과 유지보수 비용이 줄어든다는 장점이 있다. CSS 미디어쿼리로 사용자 기기 화면 크기를 검사한 후, 디자인과 레이아웃을 고려해서 페이지를 랜더링한다.
2. 앱 설계하기
앱 설계 원칙
- 사용자를 생각하게 만들지 않는다.
- 정보 입력, 동의, 인증을 요청할 때 최소화한다.
- UI내 시선을 끌고 주위를 환기시키는 요소를 강조한다.
- 일관된 레이아웃과 네비게이션으로 명확한 구조를 전달한다.
- 사용자 능력을 고려해 폰트 크기, 정보 디자인, 아이콘 등을 설계한다.
IA 설계(정보구조도)
a. Hierarchy
- 주로 규모가 크고 단계적으로 정보를 탐색하는 서비스에서 사용한다.
- 모바일 앱은 계층이 많을수록 불편하고 어렵게 느껴진다.
b. Hub&Spoke
- 홈 화면이 허브 역할을 하며, 개별 정보를 왔다 갔다하는 방식이다.
- 넷플릭스, 유튜브, 틱톡 등 미디어 서비스에서 주로 사용한다.
c. Nested Doll
- 규모가 작고 흐름이 단선적인 서비스에서 주로 사용한다.
- 메인에서 탐색, 조회, 주활동을 거치고 중간에 이전 단계로 돌아간다.
- 일저아, 항곡, 숙박 앱에서 주로 사용한다.
d. Tabbed View
- 모바일 앱에서 가장 많이 사용하는 방식이다.
- 탭(네비게이션 하단바)를 이용하여 페이지 이동을 한다.
UI 설계
화면에 필요한 레이아웃(내비바, 미디어, 설명, 실행 등), 인터랙션(제스처, 선택과 실행 등) 등을 설계하는 과정이다. 최근에는 개인별 디바이스, 사용자 특성에 따른 맞춤형 UI를 제공하고 있으며, 옵션과 디자인, 기호 등을 폭넓게 선택할 수 있다.
3. 팀 프로젝트 회고
SWOT분석, 포지셔닝맵, 설문수정, 개선화면 선정을 진행했다. 대부분의 작업들은 이미 잘 정리를 해둔 상태라 오늘은 평소보다 상대적으로 여유로웠던 하루같다. 화면 설계나 구체적인 부분 까지는 좀 더 많은 이야기를 나눠보고, 한 명도 오해하는 부분이 없도록 정리를 잘 해야겠다는 생각이 든다! 다른 온라인 팀들은 어떻게 진행하고 있을지도 궁금하다. 아무튼 설문이 많이 모여서 뾰족한 기획으로 진행됐으면 좋겠는 바람이다. 칭구들아 부탁해 ㅜ,.ㅜ ~
KPT 회고
-Keep: 중간중간 피그마 채팅으로 얘기를 나눠서 사라진 부분 정리해서 채팅에 공유하기. 한 번 더 질문하고 확인하기.
-Problem: 운영적 소통에 있어서 문제가 조금 생기는 것 같다. 붕 뜨는 시간이 생겨서 뭘 해야 할지 팀원들끼리 의논했다.
-Try: 문제를 인식했다면 바로 공유하기. 그리고 주말 푹 쉬기!!!!!!!!!!
*본 후기는 유데미 x 스나이퍼팩토리 UI/UX 인턴현 프로그램 4기 (B-log) 리뷰로 작성 되었습니다.