[초보 mp의 열공리포트]웹과 앱에서 이용하는 UI 용어

안녕하세요, 여러분! 신입 mp입니다.

5월의 막바지에 다달았습니다. 어느덧 봄의 끝자락에 서 있네요. 벌써 한 여름이 된 것 마냥 날씨도 많이 더워졌지요. 하지만, 날씨가 덥다고 해서 온 몸이 흐물흐물해져서 축 처져 있을 mp가 아니죠. 오늘은 웹과 앱에서 이용하는 UI용어에 대해 소개해 드리려고 합니다.

AE는 디자이너가 개발자가 아닌데 왜 UI 용어(http://blog.mplanners.co.kr/198)를 알아야 할까요? AE가 직접 UI를 개발하고 디자인 할 수는 없지만, 디자이너, 그리고 개발자와 커뮤니케이션을 하면서 행사에 필요한 공식 홈페이지, 모바일 앱을 제작하기 때문입니다. AE로서 일을 시작하기 전까지는 이런 웹 페이지들이 뚝딱! 하면 쉽게 만들어지는 줄 알았지만, 수많은 의사소통과 작업과 수정과정을 거쳐야 완성이 됩니다. 한번에 의사소통이 되면 좋겠지만, 이용하는 용어의 차이 때문에 수정 작업이 번복되기도 하는데요. 이럴 때에는 웹과 앱에서 이용하는 기능을 알고 그에 해당하는 전문적인 용어를 사용한다면 디자이너와 개발자의 이해를 돕고 원하는 결과물을 낼 수 있겠지요?

그럼, 지금부터 시작해볼까요?

1. 라이트 박스(Light Box)

여러분도 많이 접해보신 팝업일거예요. 그런데 용어는 다소 생소할 것 같습니다. 라이트 박스는 팝업이 뜨는 동시에 백스라운드 화면이 어두워지거나 밝아지는 팝업의 종류입니다. 라이트 박스로 처리된 영역은 컨트롤할 수가 없고, 사용자가 라이트 박스에 집중해야 한다는 알림의 목적을 가지고 있습니다. 일반적인 팝업과 차이점이 있다면, 라이트 박스를 해제하지 않고는 배경의 요소와 인터렉션할 수 없다는 것입니다.

 

2. 토스트 팝업(Toast Pop-up)

토스터기에서 토스트가 나오는 모습을 닮았다하여 붙여진 이름입니다. PC에서는 주로 모니터의 우측 하단에서 몇 초간 쑥 올라왔다가 사라지는 형태를 취하며, 모바일의 경우 주로 화면의 중앙에서 나타납니다. 키워드 검색 매칭이나, 특정 시간마다 광고를 작은 창으로 노출하기 위해 이용하고 있는데요. 일반적인 팝업에서 화면의 중앙에서 알려줄 경우, 유저의 작업에 많은 방해가 되고 PC의 하단에서 태스크 바나 핸드폰 상단의 노티피케이션 바에서 표시하는 경우에는 시야에 잘 들어오지 않는다는 단점이 있습니다. 토스트 팝업은 중간적인 형태를 띄고 있는 알림이라 많이 선호되고 있습니다.

3. 프로그래스 인디케이터(Progress Indicator)

프로그래스 인디케이터는 콘텐츠가 로딩되는 경우에 유저에게 시각적으로 알리는 컨트롤로, 크게 두 가지 타입이 있습니다.

1) 로딩이 완료되는 시기를 예측하기 어려운 타입(Indeterminate): 트로버(Throbber), Interminate Progress Bar / 링 또는 바 형태

- 개별 콘텐트나 페이지, 대화상자가 로딩되는 경우에 페이지 중간에 위치하여 알립니다. 크로버(Throbber) 또는 스피닝 휠(Spinning Wheel)이라고 부릅니다.

2) 로딩이 완료되는 시기를 예측 가능한 타입(Determinate): 프로그래스 바

- 확정 프로그래스 바는 진행 상태를 정확하게 나타낼 수 있을 때 이용하는 인디케이터입니다. 과정이 얼마나(몇 퍼센트나) 진행되고 있는지에 대해 바 형태로 피드백을 제공합니다. 진행된 상태를 바의 길이로 표시하고, 남은 진행완료 시간을 모두 확인할 수 있습니다.

4. 메가메뉴(Mega Drop-down Menu)

글로벌 내비게이션 바(GNB_Global Navigation Bar: 대메뉴)에 위치한 특정 메뉴에 마우스 롤-오버 했을 시 나타나는 대형 메뉴를 말합니다. 일반적인 드롭다운 메뉴보다 훨씬 많은 메뉴를 표시할 수 있고, 메가 메뉴 안에서도 상세 분류를 할 수 있습니다. 카테고리를 보다 명확하게 분류하여 메뉴를 찾기 쉽도록 기획해야 하며, 주로 쇼핑몰같은 대형 웹사이트에 적용됩니다. 메뉴에 텍스트와 이미지를 혼합하는 방식으로도 많이 활용되고 있다네요.

5. 컨텍스트-센서티브 내비게이션(Context-sensitive Navigation)

용어가 다소 어렵게 느껴집니다만, 쉽게 말해서 '마우스 오버 효과'와 비슷한 것이라고 보면 됩니다. 특정 요소를 선택할 시에만 유저에게 필요한 UI 컨트롤을 제공하기 때문에 화면의 복잡함은 줄이고, 콘텐츠에 몰입할 수 있는 환경을 제공할 수 있습니다. 쇼핑몰 상품 리스트에서도 많이 이용이 되고 있으며, 버튼 또는 목록 형태 등으로 구성이 가능합니다. 

프로젝트를 진행하면서 웹페이지 또는 모바일 앱을 제작할 때, 가장 큰 목적은 행사의 목적과 내용을 홍보하고 고객을 유치하는 것입니다. 알아보기 쉽고 편리한 UI로 제작한다면 유저 입장에서 내용을 이해하는데에 더 수월하겠죠? 또한 크리에이티브한 행사의 웹페이지나 모바일 앱을 제작하는 경우에는, 참신하고 기발한 기능들을 이용하여 행사의 컨셉을 보여줄 수도 있기 때문에 AE들은 여러 가지 새로운 UI를 접하고 응용해보면 좋을 것 같네요.

이상으로 신입 mp였습니다!