Home 마케팅

[쪼렙 서비스 기획자의 공부일지] “이거 뭐라고 부르지?” 가려웠던 UI 용어 긁어보기

5월 23, 2022

배달의 민족 앱으로 UI 용어 공부하기

쪼렙 주니어 기획자인 내가 기획서를 쓸 때, 종종 당황스러운 순간이 있는데…

바로 기능설계서를 쓰면서

“어? 이거 뭐라고 부르지?;;” 하며 정확한 UI용어를 몰라 당황스러울 때이다.

이미 너무 익숙하고, 언제 어떻게 쓰는지도 알고, 너도 알고 나도 알고 모두가 아는 UI지만, 막상 명확한 용어로 적으려 하면 참 애매해지는 것이다.

원피스 사진 한 장으로 브랜드와 가격까지 찾을 수 있는 최첨단 시대이지만 그렇다고 UI를 이미지 검색할 수도 없는 노릇이고…고민하다가…

“이번 기회에 한 번 실서비스를 분석해가며 UI용어를 정리해보자”하는 마음이 들었다.

배달의 민족 앱을 보며 “이거는 뭐라고 부를까?”하며 혼자 인터넷을 뒤적거려 정리한 내용을 적어본다!

배달의민족 앱 실행

– 스플래시 화면(Splash Screen)

배달의 민족 앱을 켰더니 바로 홈화면이 보이는 게 아니라 하얀 배경에 배달의 민족 로고가 몇초 동안 나온다.

이렇게 앱을 실행시키고 본 화면에 들어가기 전에 짧게 나오는 화면을 스플래시 화면(Splash Screen)이라고 한다.

짧게는 1초 길면 5초 정도 노출되며, 첫 화면을 로드하고 첫 방문이나 재방문 등 사용자를 구분하여 랜딩시키는 동안 앱을 준비하는 용도로 사용된다. 총력을 다해 100M 달리기를 시작하기 전에 준비 자세를 취하는 것 같다.

3초 정도로 짧은 시간 동안 노출되는 화면이기 때문에 단순하지만 서비스의 색깔을 잘 드러낼 시각적 요소를 담는 게 중요하다. 넷플릭스나 카카오웹툰 같은 서비스는 모션을 활용하여 스플래시 화면을 제공하고 있다.

홈화면 진입

– 당겨서 새로고침(Pull to Refresh)

배달의 민족 홈에 진입하니 여러 메뉴들이 보이고, 검색 상단을 아래로 끌어당기면 화면처럼 ‘땡겨요’라는 문구가 보인다.

흔히 새로고침을 아이콘으로 표현하곤 하지만, 배달의 민족은 당겨서 새로고침 (pull to refresh) UX로 풀어냈다.

refresh 문장을 서비스의 특성에 맞는 이미지와 문구를 활용하고, 새로고침할 때마다 매번 다른 음식을 보여줌으로써 배민 특유의 위트를 보여준다 bb

배달메뉴 화면

– 내비게이션(Navigation), 툴팁(Tooltip)

홈화면의 배달 메뉴를 눌러보니 홈에서는 크게 크게 카드 슬롯으로 있던 메뉴들이 상단에 버블 형태로 나열되어 있는 게 보인다.

사실 배달을 이미 찍고 들어온 사람이 쇼핑라이브나 선물하기 메뉴로 이동할 확률이 높을 것 같진 않지만, 이동하고 싶을 경우 다시 홈으로 나갔다 이동하는 뎁스와 번거로움을 줄이고 다른 기능이 무엇이 있는지 파악할 수 있게끔 GNB에 놓은 듯 하다.

GNB란 General Navigation Bar의 약자로, 어느 화면에서건 상단에 고정되어있어서, 특정 메뉴로 바로 이동할 수 있는 상단의 메뉴 정렬을 의미한다.

상단에 노출되고 있는 기능이 많다 보니 my나 검색 같은, 어디서든 접근할 수 있어야 하는 필수 기능은 하단 내비게이션(Bottom Navigation)으로 배치되어 있다.

아래로 좀 더 내려보니, 빠른 배달이 가능한 업체 리스트가 보이고 타이틀 옆에 인포 아이콘을 눌러보니 정렬 기준을 설명해주는 텍스트 박스가 뜬다.

이 텍스트 박스를 우리는 툴팁이라고 부르는데, 부연 설명을 위해 간단하게 레이어를 위에 하나 더 띄우는 UI를 의미한다.

찾아보니, PC 환경에서는 마우스오버하면 (마우스만 가져다 대면) 툴팁이 노출됐지만 모바일에서는 터치하면 툴팁을 노출하기도 하고, 꼭 알아야 하는 내용이면 무조건 툴팁을 띄워서 노출시키는 등 노출 형태가 다양하다!

가게 상세페이지

– 플로팅 버튼(Floating button), 레이어 팝업(Layer Popup), 시스템 팝업(System Popup), 컨펌창(Confirm), 알럿창(Aleart)

가게의 상세페이지에서는, 배달주문과 포장/방문주문을 탭으로 구분하여 각각의 정보들을 노출하고 있다.

관계가 배타적인 정보를 배치해야 할 때, 사용자가 혼동하지 않고 정보를 볼 수 있도록 하기 위해 탭으로 구분한 듯 하다.

하단에는 장바구니가 플로팅 버튼(Floating button)으로 고정돼서 떠다닌다. 접근성이 쉽고, 메뉴가 추가되는 걸 인지하기 쉽도록 하기 위해 항상 제 위치에 고정되어 있는 버튼이다.

사실 요 상세페이지에서 평소에 헷갈리던 개념을 좀더 깊게 공부하게 된 건 바로 배달팁의 자세히 버튼을 누르면서이다. 자세히 버튼을 누르면 화면처럼 바탕은 딤드(dimmed)되고, 작은 하얀창에 배달팁 관련 내용이 뜬다.

실무를 하며 이걸 팝업이라고 불러야 할지, 레이어팝업(팝업레이어)이라고 불러야 할지, 모달이라고 불러야 할지 참 애매했기 때문에 이 UI에 대해 조금 더 찾아봤다.

우선 창을 여는 방식에 따라 팝업창과 모달창이 있다. 팝업창은 지금 열려있는 창 외에 아예 새로운 창을 하나 더 여는 거고, 모달창은 내가 보고있는 창 위에 레이어를 하나 더 올리는 개념이다.

팝업창은 기존창과 별개이기 때문에, 새창이 열려도 기존창을 터치하는 등 계속 사용할 수 있다. 하지만 모달창은 그 레이어가 열려있는 동안에 레이어 바깥 화면은 컨트롤이 불가하다.

예를 들어 PC가 대부분이던 시절, 사이트에 처음 들어갈 때면 광고 팝업창들이 우수수 뜨곤 했다. 하지만 팝업이 새로 열리는 걸 차단해 놓는 사용자들도 있고, pc에서 모바일 환경 위주로 가다 보니 이제는 대부분 팝업창이 아니라 모달창으로 처리한다고 한다.

포괄적으로 팝업이라는 개념이 화면 위에 튀어오르는 새로운 화면이라는 의미로 보통 쓰이기 때문에, 이 배달팁 화면은 새로운 레이어에서 보여지는 팝업이라는 의미로 레이어팝업이라고 불러도 된다.

추가적으로 시스템팝업은 우리가 레이어를 새롭게 만들어주는 게 아니라, 디바이스가 이미 가지고 있는 시스템창을 활용하는 것이다. 버튼레이블은 수정할 수 있어도 디자인이나 포맷은 수정이 불가능하다.

또, 컨펌창은 사용자가 어떤 액션을 했을 때 취소/확인처럼 2가지 이상의 버튼을 주면서 다음 액션에 대한 선택지를 주는 창을 뜻한다.

반면 알럿창은 확인이나 닫기같은 하나의 버튼만 주면서 사용자에게 선택지는 주지 않고, 알려야하는 내용을 팝업으로 보게 하는 것을 의미한다.

앞으로 각각의 용도에 맞게 용어를 똑바로 써야지!하고 다짐한다.

주문서

– 체크박스(Check Box), 라디오 버튼(Radio Button)

상세페이지에서 배달팁까지 비교했으니 이제 남은 건 지출 뿐이다.

주문서에 들어오니 사용자가 선택해야할 항목들이 꽤 보인다.

가장 먼저 안심번호를 사용하겠다는 선택은 체크박스 UI를 사용했다. 체크박스(Check Box)는 이렇게 한 가지 선택지에 대해 쉽고 빠르게 선택할 때 사용하거나, 아예 여러 후보들 중 다수 선택을 허용할 때 사용하는 UI이다. 하나의 선택지만을 물어보는 ‘다음에도 사용’ 요청사항 항목에도 체크박스 UI를 적용했다.

반면에 하단의 ‘일회용 수저, 포크 안 주셔도 돼요’를 물어보는 항목에는 라디오 버튼(Radio Button)을 사용했다. 라디오 버튼은 화면처럼 2개 이상의 선택지에서 한 가지만을 골라야 할 때 주로 쓰인다. (다수 선택 불가한 느낌을 준다)

일회용 수저, 포크를 넣어달라는 선택지에는 꼭 필요할 때만 선택해달라는 툴팁을 노출하면서 사용자에게 부연설명을 제공한다. (이때는 사용자가 터치한다거나 할 필요없이, 항상 노출되도록 처리해놓았다!)

사실 글에 적어놓은 UI는 아마 서비스기획자라면 모두가 당연히 알고 있을 기본 개념들이다.

또, 회사마다 사용하는 용어가 조금씩 다르기에 필자가 정리한 용어가 100% 정답은 아닐 것이다.

그래도 평소에 어설프게만 알고 있던 UI개념들이 많아, 이 글을 쓰게 되면서 용어의 쓰임새나 처리방식까지도 좀 더 자세히 알게 된 것 같다. 특히 평소에 가려웠던 용어인 레이어팝업과 모달을 조금이나마 더 뚜렷하게 알게 된 것 같아 개운한 마음도 조금 든다. 허허

이제 기획서에서 UI 용어를 명확하게 정리하여, 의도하고자 하는 바를 디자이너와 개발자가 수월하게 이해하길 바라며 이번 글을 마친다.

끝까지 읽어주셔서 정말 감사합니다 🙂