ⓅⒶⓇⓉ ⑥ 2주차 학습일지 세번째 | 프리스쿨 UI 기초 | Chapter 4~5 정리

 

📋 오늘의 할 일 📋

💻 프리스쿨 UI 기초 Chapter 4~5 정리

💭 프리스쿨 UI 기초 보충 연구

 

 

---

 

 

💻 프리스쿨 UI 기초 Chapter 4~5 정리

 

 🗝️Page

 

∗ 한 페이지 내에는 다양한 구성 요소가 들어갑니.

∗ 아이콘, 버튼, 플래그와 텍스트, 이미지로 이루어진 컴포넌트로 구성.

∗ 디자인에 따라 그에 맞는 인터렉션이 들어갈 수도 있습니다.

∗ 정보 위계에 따라 폰트 크기 및 컬러를 적절하게 이용하여 화면을 구성합니다.

 

 

 🗝️Common

 

❶ GNB

∗ GNB = Global Navigation Bar 약자로 메뉴바를 뜻한다.

∗ 웹페이지에 표시되는 하이퍼링크들의 집합 영역.

∗ 모바일이나 웹에서 앱과 웹들의 최상단에 위치한 메뉴들이 보이는 영역을 이야기한다.

∗ 앱에서는 주로 햄버거 버튼, 로고, 토글, 검색 버튼이 위치한다.

∗ 웹에서는 로그인/회원가입, 카테고리, 햄버거 메뉴 등, 홈페이지의 목적이나 디자인에 따라서 변경된다.

 

➋ Bottom Bar

∗ 모바일 화면 하단에 탐색 및 주요 작업을 표시합니다.

∗ 주요 메뉴들로 구성되어 사용자가 쉽고 빠르게 접근할 수 있도록 합니다.

∗ 접근할 수 있는 메뉴는 5개를 초과하지 않아야 합니다.

∗ 화면에 고정되어 스크롤 시에도 사라지지 않습니다.

∗ 주로 홈 버튼을 고정으로 하단에 고정해 두는 것을 확인할 수 있습니다.

 

➌ FAB + Footer

➀ FAB 

∗ FAB = Floating Action Button 은 화면에서 가장 기본적이고 공통적인 작업을 수행합니다.

∗ 모든 화면 내용의 앞에 표시되며, 일반적으로 가운데에 아이콘을 포함한 원형 모양입니다.

∗ 기능적으로 빠르게 접근해야하는 메뉴들을 넣기도 합니다.

 

➁ Footer

∗ 주요한 메뉴나 연관 사이트들을 열거합니다.

∗ 저작권 관련 카피라이트 등을 작성합니다.

∗ 수상내역, 위치, 전화번호, 사업자번호 등과 같은 주요 정보를 열거합니다.

 

➍ Popup

∗ 사용자에게 중요한 정보를 전달하거나, 사용자의 선택을 요청하기 위해 앱 콘텐츠 앞에 나타나는 모달 형태입니다.

∗ Popup 하위로 깔리는 배경인 어두운 배경을 사용하여 팝업이 강조될 수 있도록 합니다.

∗ 해당 의미에 따라 팝업과 모달로 나뉘거나, 형태에 따라 브라우저, 레이어, 토스트로 나뉘기도 합니다.

 

➀ 모달

∗ 서비스와 관련해서 다음 단계로 이동할 때 사용되는 창입니다.

∗ 선택 혹은 input이 있어 내용을 입력할 수 있게 되어있습니다.

∗ 이는 주로 강제성의 의미가 많이 부여되어 있어 약관 동의와 같은 행동이 강제되어야 할 때 사용하면 좋습니다.

 

➁ 레이어 팝업

∗ 기존 페이지 안에서 새 창으로 열리는 팝업의 형태입니다.

∗ 모달의 의미를 가지고 있지만, 형태로 따졌을 때는 레이어 팝업이라고 말하기도 합니다.

∗ 보통 광고창처럼 다시 보지 않기, Close 버튼을 포함합니다.

 

➂ 토스트 팝업

∗ 갑자기 나타났다 정보를 보여주고 사라지는 팝업

∗ 나타나는 모양이 토스트가 나오는 모습과 비슷하여 토스트 팝업이라고 합니다.

∗ 주로 모바일 앱에서 사용되며, 해당 디자인을 구현할 때 trigger (언제 노출될 것인지), 노출 시간, 지속 시간등의 정보가 함께 필요합니다.

 

➃ 스낵바

∗ 내용이 적고, 특정 액션이 필요할 경우 사용하는 팝업입니다.

∗ 버튼을 클릭했을 경우 해당 링크로 이동합니다.

 

➄ Alert

∗ 하나의 버튼을 가지고 있으며, 주의를 주거나 알림을 줄 때 사용합니다.

 

➅ Confirm

∗ true / false로 사용자의 선택값에 따라 다음 행동을 결정합니다.

∗ 행동에 대한 결과값으로 한 번 더 확인 받는 것을 의도하는 창입니다.

 

➎ Table

∗ 많은 정보를 테이블 안에 정리하여 보여주여야 할 때 사용합니다.

∗ 정보를 효과적으로 구분하고 나눌 수 있습니다.

∗ 테이블의 형태, 라인의 색상, 텍스트의 좌우 중앙 정렬 등도 주요하게 가이드합니다.

 

 

 

 

---

 

 

 

 

💭 화면 분석

∗ 위의 프리스쿨 UI 수업을 기반으로 주요 어플들의 화면을 간략하게 알아보기로 했다.

∗ 각 상하단의 구성과 어떤 기능을 주로 두고 있는지 알아보고자 했다.

 

➊ 네이버

∗ GNB : 햄버거 버튼, 페이, 장바구니, 네이버톡, 알림, 프로필 순서로 되어있다. 상세 기능은 햄버거 버튼을 통해 이동할 수 있다.

∗ FAB : 바로 직전 화면으로 돌아갈 수 있는 기능을 담고 있는 버튼이다.

∗ FOOTER : 쇼핑, 홈, 콘텐츠, 클립 순서로 되어있다. 

∗ 위의 기능들을 살펴봤을 때, 네이버가 주로 홈에서 보여주고자 하는 기능은 쇼핑 (알림, 장바구니), 검색, 방송(콘텐츠, 클립), 페이(결제) 네 개로 크게 나눠볼 수 있을 것 같다.

 

➋ 인스타그램

∗ GNB : 로고, 알림, DM으로 되어 있으며, 로고를 통해 팔로잉과 즐겨찾기, 알림을 통해 팔로우 추천 목록을 볼 수 있다.

∗ FOOTER : 홈, 검색, 새 게시물, 릴스, 피드로 이루어져있다.

∗ 위의 기능들을 살펴봤을 때, SNS의 특성 중 메시지를 주고 받는 기능보다 다른 계정들의 콘텐츠를 둘러볼 수 있는 기능이 훨씬 더 극대화된 것으로 보여진다. 홈에서는 내 피드에 올렸던 게시물과 팔로우한 계정들의 콘텐츠 및 광고 게시글. 릴스 및 검색에서는 인기 콘텐츠를 확인할 수 있다.

 

➌ 마켓컬리

∗ GNB : 로고, 카테고리, 알림, 장바구니가 있다.

∗ FOOTER : 홈, 라운지, 카테고리, 검색, 마이컬리가 있으며, 라운지는 관련 매거진, 정보, 포스팅을 볼 수 있는 기능을 합쳐두었다. 마이컬리는 프로필 기능을 담당한다.

∗ 마켓컬리는 비슷한 마켓 어플들과 비교했을 때, 특이점이 검색 기능이 하단에 있다. 대신에 보통 상단에 검색 기능을 두는 대신, 단순히 식재료 뿐만이 아니라 뷰티 아이템도 팔고 있어서 스위치가 가능하도록 버튼을 두었다. 또한, 라운지를 통해 별도의 피드 형태 커뮤니티 기능을 강화한 것이 특이점으로 보여진다.

 

 

➍ 캐치테이블

∗ GNB : 로고, 검색 기능, 마이페이지, 알림이 있다.

∗ FOOTER : 홈, 검색, 타임라인, 마이다이닝, 마이페이지로 구성되어있다. 타임라인은 다른 사용자를 팔로우하여 그 사람들의 미식생활을 구경할 수 있다. 

∗ 캐치테이블은 특이하게 GNB에도 검색 기능이 있고, FOOTER에도 검색 기능이 있는데, 각자 역할이 다르다. 상단의 검색 기능은 찾고 있는 장소가 확고할 때, 혹은 특정 태그를 통한 검색 기능이라면, 하단의 검색 기능은 상단의 검색 기능을 포함하여 날짜, 인원, 시간과 같은 필터가 하나 더 생긴 기능이다. 예약 기능이 핵심이지만, 홈 화면에서 보았을 때는 카테고리에 따른 맛집 추천을 우위에 두고 있는 것 같다.

 

➎ 무신사

∗ GNB : 로고, 알림, 장바구니 기능이 있다.

∗ FOOTER : 카테고리, 스냅, 무신사홈, 좋아요, 마이로 구성되어 있다. 스냅은 해당 앱을 이용하는 사람들의 옷 입는 스타일을 갤러리 형태로 볼 수 있으며, 좋아요 에서는 찜한 상품을, 마이에서는 프로필과 주문 내역 등을 확인할 수 있다.

∗ 무신사는 패션 스토어에서 시작해 현재는 다양한 상품들로 확장되어 있으며, 마켓컬리처럼 상단의 토글을 이용해 다양한 스토어로 이동할 수 있다. 또한 여기서도 스냅을 통해 커뮤니티를 형성하고 있으며, 어떤 옷을 매치해 입을 수 있는지 보고 구매 욕구를 불러일으키는 역할도 할 수 있을 것으로 보인다.

 

➏ 티머니 GO

∗ GNB : 회원정보, 이용내역, 즐겨찾기로 이루어져있다.

∗ FOOTER : 길찾기, 마이, 홈, 혜택, 더보기 기능이 있다. 마이는 티머니 이용시 적립되는 마일리지를 확인할 수 있으며, 어떤 유형의 사용자인지 확인하고, 내 교통비를 분석해주는 등, 다양한 콘텐츠로 구성되어 있다. 혜택은 이벤트 배너를 통해 해당 상세 페이지로 이동 가능하게 되어 있다. 

∗ 티머니 GO는 시외버스, 고속버스 터미널 앱을 통합하여 택시, SRT, 전기자전거, 따릉이 등 대부분의 교통 수단에 대한 서비스를 제공하고 있다. 주요 기능은 교통수단 예매, 길찾기 안내이다. 자주 가는 루트를 등록하고, 해당 루트를 불러와 이동할 때 이용하는 교통 수단을 빠르게 예매할 수 있어 편리하다. 다만, 사용했을 때 FOOTER 내의 기능보다는 홈 화면의 기능을 주로 사용하게 되는 경우가 있어 이 부분은 필요한 서비스에 대해 접근성이 떨어진다고 느껴졌다.