번개장터

모달 UI의 의미와 선택 방법

모달(modal) UI는 사용자의 이목을 끌기 위해 사용하는 화면 전환 기법을 의미합니다. 그 안에는 팝업, 바텀 시트, 스낵바 등 여러 가지가 존재해, 어떤 UI를 어떤 상황에 적용하면 좋을지 헷갈릴 때가 있는데요. 저 역시 주니어 PM으로서 UXUI 디자인 용어는 알지만 사용하는 맥락을 알기 쉽지 않았는데 잘 정리된 글이 있어 가져왔습니다. 1. 팝업(Pop-up) * Popup, dialog, alert 등 다양한 이름으로 불림 * 주로 2가지 상황에 사용 * 앱/기기상태와 관련된 중요한 정보 전달 * 사용자의 결정 필요(정보 입력, 승인 등) * 팝업 사용시 주의 사항 * 사용을 최소화해야 * 앱의 모든 기능 비활성되기에 의도적으로 사용자를 방해하여 피로감을 줄 수 있음 * 간단한 태스크를 제공해야 함 * 팝업 타이틀/버튼은 상황을 간결하게 설명 2. 바텀 시트(Bottom Sheet) * 주로 2가지 상황에 사용 * 기존 화면과 관련 있는 콘텐츠를 제공할 때 * 기존 컨텍스트에서 벗어나지 않고 관련된 작업을 할 수 있어 더 빠르게 프로세스가 진행되는 느낌 전달 * 다양한 메뉴를 제공할 때 * 화면 이동 발생하지 않아 유저에게 신속하고 간편한 느낌 전달 * 바텀시트 구성요소: Scrim / Handlebar / Header / Contents / Button * Scrim의 여부에 따라 Modal과 Non-Modal로 구분 * 유저가 기존화면을 함께 사용할 땐 Non-Modal 타입 선택 * Handlebar는 사용자에게 바텀 시트를 확장할 수 있음을 알려줌 * 있는 경우엔 제스처로 확장과 Pull-to-dismiss가 필수적! 3. 스낵바(Snackbar) * snackbar, toast로 불림 * 사용자가 수행한 액션에 대한 피드백을 줄 때 사용 * 별도의 액션을 제공하는 것도 가능 * 사용 시에는 위치를 항상 고려하고 제한 시간 이후에 사라지기에 짧고 간결하게 표시한다. https://yozm.wishket.com/magazine/detail/1272/

검색엔진 최적화(SEO)란?

SEO(Search Engine Optimization)이라 불리는 검색엔진 최적화는 앱/웹 기반 서비스를 운영하면 유저 사용성만큼이나 집중해야할 부분입니다. 쉽게 말하면 네이버나 구글 같은 검색 엔진이 쉽게 이해할 수 있는 형태로 웹페이지를 구성하는 과정이라고 말할 수 있습니다. 이는 대개 마케팅의 영역으로 여겨질 때가 많지만 유저 여정에서 '유입' 단계에 해당하는 중요 퍼널 중 하나입니다! 검색 창에서 검색한 결과 * 광고가 아닌 자연 검색(Organic Search) * 광고로 노출되는 PPC(Pay-per-click) 2019년 자료에 따르면, 전체 구글 검색 유저 중 40%가 오가닉 검색을 활용하며, 불과 3.8%의 유저만 이 광고를 클릭하고 있었습니다. -> 검색엔진 최적화를 통해 웹페이지의 노출 순위를 높이는 것의 중요성 상승! 검색엔진 최적화를 위한 작업 메타 태그(Meta Tag) * <title> 태그 : 웹페이지를 검색 엔진에 검색했을 때 노출되는 제목 * <description> 태그 : 메타 디스크립션이라고도 부르며, 해당 웹페이지의 설명을 요약한 한 두줄의 문장 * <robots> 태그 : 웹페이지 별 검색 로봇의 접근 여부를 설정할 때 활용, 검색로봇이 크롤링한 데이터를 기반으로 검색결과 표시될 수 있도록 하기에 중요 * <canonical> 태그 : 여러 URL을 가진 웹페이지가 있을 때, 해당 페이지의 대표 URL을 설정할 수 있는 태그 오픈 그래프(Open Graph) 태그 : 웹페이지의 링크가 카카오톡이나 기타 SNS에서 공유될 때 어떻게 노출될지를 정의해 주는 역할 * 단순히 SNS에 효과적으로 공유될 수 있게 하는 목적뿐 아니라, SEO 과정에서 해당 웹페이지가 얼마나 공유되고 있는지 판단하는 기준 * 검색 상위 노출을 위한 품질 평가에도 영향을 주는 중요한 역할