IA 정보구조도 설계 두번째 :: 화면 타입 알아보기
지난 시간에 IA를 제작하는데 있어서 기본으로 알아야하는 뎁스(Depth) 구조에 대해서 알아보았습니다.
뎁스 개념은 기획 업무를 수행하는데 있어서 굉장히 중요한 개념이기 때문에 꼭 숙지하시길 바랄게요 �
이번에는 IA를 제작하는데 있어서 또하나의 기본 개념이라고 할 수 있는 화면의 타입에 대한 부분을 알아보겠습니다. 이전 포스팅에서도 잠깐 등장을 했었는데요. 바로 아래 그림에 표시된 부분입니다.
화면 타입 정의하기서비스를 구성하는 다양한 정보들은 그 정보의 특성에 따라서 보여지는 형태를 규정합니다.
그리고 제공되는 방식 및 형태에 따라서 다양한 용어로 불립니다. 기본적으로 업계(?)에서 통용되는 용어들이 있기는 하지만 프로젝트 특성이나 구성원에 따라서 살짝 다를 수도 있다는 점도 꼭 기억하세요.
페이지 (Page)
서비스 화면 그 자체에서 제공되는 화면을 뜻합니다.
실무에서는 페이지라고 칭하기도 하고 바닥 페이지라는 용어도 많이 사용합니다.
팝업 (Popup)
현재 사용자가 위치해있는 페이지에서 새로운 화면을 보여주는 것을 뜻합니다. 팝업의 종류로는 브라우저 팝업, 레이어 팝업이라는 개념이 존재합니다.
브라우저 팝업은 말 그대로 지금 사용자가 보고있는 화면 위로 새로운 브라우저를 열어서 화면을 보여주는 방식입니다. 요즘은 많이 사용하지 않는 화면 타입이기도 합니다. 이 팝업은 사용자의 브라우저 설정에 따라서 열리지 않을 수도 있기 때문에 서비스에 중요한 공지사항이나 정보를 알리기에는 적합하지 않습니다. (요즘은 거의 못본거 같아요)
요즘도 많이 사용하고 있는 레이어 팝업은 아래의 예시 화면과 같은 방식의 팝업입니다.
부킹닷컴 로그인 레이어 팝업해당 팝업은 현재 화면에서 사용자의 선택에 따라서 새로운 레이어가 오픈되어 보여지는 방식입니다.
이 팝업은 사용자의 브라우저 설정에 영향을 받지 않기 때문에 위의 예시 화면과 같이 로그인을 유도하거나 다른 화면으로 이동하기 전에 사용자의 선택이 필요한 경우에 사용하는 것이 일반적입니다. 또 중요한 공지사항 등 사용자가 꼭 알아야하는 정보를 전달할 때도 사용합니다.
다이얼로그 (Dialogs)
아래와 같이 작은 화면에 버튼을 제공하는 것을 통칭하여 다이얼로그라고 부릅니다.
출처 : https://m3.material.io/components/dialogs/overview다이얼로그 역시 형태에 따라서 다양한 방식으로 불립니다.
얼럿 (Alert) , 컨펌얼럿(Confirm alert), 노티피케이션 (Notification) 등등 실무에서도 다양한 용어로 불리고 있는데,
사용자가 어떤 값을 입력하거나 선택했을 때 그에 대한 중요한 내용을 알려주거나 (Alert, Notification)
해당 화면 상에서 A 또는 B를 선택해야할 때 (Confirm alert) 사용합니다.
다이얼로그의 경우, 화면안에서 사용자의 액션에 따라 다양하게 발생할 수 있기 때문에 IA에 기술하진 않습니다. 하지만 화면 설계를 진행할 때는 꼭 포함되어야 하는 내용 중 하나입니다.
바텀시트 Bottom sheet
바텀시트의 가장 큰 특징은 제공되는 방식에 있습니다. 영문 그대로 아래에서 올라오는 화면입니다.
monimo 서비스 내 바텀시트바텀시트에서 제공되는 버튼을 반드시 선택한 후에 해당 서비스를 이용할 수 있거나 (Ex. 약관동의) 특정한 버튼을 선택하면 외부 서비스로 빠져나가거나 현재 위치한 서비스가 아닌 다른 서비스 플로우로 이동을 해야할 때 주로 사용합니다.
각 타입의 화면의 특징이 있기 때문에 서비스를 기획할 때는 우리 서비스의 특징과 목적에 따라서 어떤 정보를 어떤 화면 타입으로 전달할지를 설계하는 과정이 필요합니다. 그렇기 때문에 서비스의 기획을 진행할 때는 초반 단계부터 디자이너, 개발자와의 빠른 협업이 꼭 필요합니다.
웹서비스를 구성하는 다양한 정보의 형태, 화면의 타입에 대한 공부가 필요하다면 매터리얼 디자인 사이트를 한번 둘러보시는 것을 추천합니다.
https://m3.material.io/components
이 사이트에서는 안드로이드에 사용되는 다양한 컴포넌트의 명칭과 특징에 대한 내용을 알아볼 수 있습니다.
기획 업무를 하신다면 각 컴포넌트에 대한 상세한 사항까지는 모르더라도 각 컴포넌트의 명칭과 특징에 대해서는 알아두면 디자인, 개발팀과 커뮤니케이션을 하는데 많은 도움을 받을 수 있습니다.
웹 서비스를 구성하는 주요한 화면 타입에 대해서 간단하게 알아보았습니다.
하지만 위에 기술된, 혹은 매터리얼 디자인 사이트에서 제시하고 있는 특징에 따라서만 구현되지는 않는 것이 실무의 현실이기도 합니다.
중요한 것은 우리가 사용자에게 제공하고자 하는, 보여줘야만 하는 정보의 특성에 따라서 효과적인 방식의 화면 타입을 선택해야한다는 것을 기억하시면 됩니다.
#서비스기획 #웹기획 #앱기획 #웹기획자 #서비스기획강의 #웹기획강의 #기획강의 #figma #피그마강의 #레탑피그마
