QA 테스터가 알아야 할 UI
UI 의 기본을 알아야 정확한 품질 검사를 할 수 있습니다.
QA TEST 를 수행하기 위해 UI 요소들의 명칭을 알아야만 하는 것은 아니지만, UI 요소의 정의와 형태에 대한 이해도가 있으면 더욱 꼼꼼하고 편하게 업무 수행이 가능하며, TEST 결과에 대한 커뮤니케이션이 원활하게 진행 될 수 있습니다.
오늘은 기획자가 알아야 할 UI 의 기본용어를 참고하여, 각 UI 요소별로 어떤 테스트를 수행 해야 하는지 간략히 정리해 보았습니다.
버튼 상태 (BTN Status)
우선 버튼의 상태에 대한 내용입니다.
활성화 상태 (Enabled) : 버튼 기능히 활성화 되어 있어이용자가 클릭 할 수 있고 동작이 되는 상태
비활성화 상태 (Disabled) : 사용자가 클릭 할 수 없도록 비활성화 되어 있는 상태
선택된 상태 (Active 또는 Selected) : 활성화 버튼을 클릭시 선택 되었음을 인지 시켜주는 디자인
버튼 기능은 너무 기본 적이기 때문에 위와 같은 명칭을 모르더라도 기본적인 기능은 누구에게나 익숙 할 것입니다. QA 관점에서는 이 익숙한 버튼 상태값 별로 어떤 테스트를 해야 할까요?
활성화 상태 :
특정 조건 값에서 버튼이 활성화 되고 클릭이 가능한지 확인 필요
주로 "필수 값을 모두 입력 해야 버튼이 활성화 되는가" 등의 기능을 많이 확인 합니다.
비활성화 상태 :
특정 조건을 충족하지 못하면 버튼을 클릭 할 수 없도록 시스템으로 막아둔 기능 입니다.
필수 값을 모두 입력하지 않았거나, 계정의 권한이 부여되지 않은 등 "기능을 제공 할 수 없도록" 처리 되었는지 확인이 필요할 때 체크하는 항목입니다.
선택된 상태 :
활성화 상태에서 선택이 가능한지 확인이 필요한 기능입니다. 버튼 선택 직후 화면이 이동하는 경우에는 "선택된 버튼" 상태를 유지 하지 않을 것이고, 선택된 상태에 따라 해당 페이지의 정보값이 달라질 때 확인 할 수 있는 버튼입니다. 주로 옵션값 선택시 확인 할 수 있는 UI 요소인데, 온라인 쇼핑몰에서 상품 옵션을 선택할때, 결제 방식을 선택할 때와 같은 경우에 확인이 필요한 만큼, "선택된 값이 결과에 반영 되는지" 위주로 기능 검사를 합니다.
GNB 영역 (Global Navigation Bar)
GNB 영역은 주로 웹사이트 최 상단에 위치하는 메뉴를 의미 합니다. 대표적으로 Notion 과 연동 하여 사용 할 수 있는 "우피 (oopy)" 사이트의 최상단 메뉴를 예시로 보여 드릴 수 있겠습니다.
해당 기능은 웹사이트의 각 페이지로 빠르게 이동 할 수 있도록 버튼 역할을 하는 만큼, 각 버튼 클릭시 해당 페이지로 잘 이동하는지를 위주로 테스트 진행 합니다.
사이트의 특성에 따라 "로고" 클릭시 홈으로 이동, 검색기능, 로그인 기능 등이 GNB 영역에 포함 되어 있으므로 해당 기능이 정상 동작하는지 체크 하는 것도 GNB 영역의 QA TEST 에 빠져서 안되는 항목입니다.
LNB 영역 (Local Navigation Bar)
LNB 영역은 GNB 영역에 마우스오버시 노출되는 하위 메뉴를 의미 합니다. 웹사이트에 따라 LNB 영역이 제공되기도 하고 LNB 영역이 제공되지 않는 경우도 있습니다. 또한 GNB 영역의 메뉴마다 각기 다른 LNB 값이 노출 되기도 합니다.
LNG 영역은 주로 GNB 의 대분류에 속한 하위 페이지들로서 각 버튼들이 의미하는 페이지로 이동하는지 모두 체크해 보는 것이 QA TEST 의 기본 항목 입니다.
아래 2개의 이미지는 GNB 어떤 영역이라도 동일한 LNB 영역이 노출되는 단일 LNB 사례 "우피" 와
GNB 영역의 메뉴에 따라 각기 다른 LNB 영역이 노출되는 다중 LNG 사례 "뿌리오" 의 이미지 입니다.
우피 서비스의 단일 LNB 모습
뿌리오 서비스의 다중 LNB 모습메인 베너 (Hero Banner)
Hero Banner 라고 명칭하는 곳도 있지만, 주로 메인베너라고 부르는 경우가 많습니다.
메인베너는 홈페이지 최상단 (GNB & LNB 영역 아래) 에 위치하는 대형 베너 이미지를 의미 합니다.
웹사이트에 접속 하였을때 가장 눈에 띄는 영역이라 회사의 브랜딩 역할과 방문자에게 어필하고 싶은 주요 메세지를 전략적으로 배치 하는 역할을 합니다.
메인 베너는 하나의 이미지로 고정되어 있을 수 있고, 여러개의 이미지가 자동으로 스와이핑 되거나 수동으로 스와이핑 되도록 기능을 제공합니다. 또는 영상, GIF 형태로 베너를 구성하기도 하고 베너를 통해 특정 페이지로 이동 하도록 링크를 심어두기도 합니다.
단일 메인 베너 :
베너 이미지가 화면 해상도에 따라 이미지 깨짐 없이 잘 노출 되는지 디자인 적인 품질 검사 필요
롤링 메인 베너 :
자동 스와이핑(좌우로 넘어가는 기능)이 동작하는지, 수동으로 스와이핑이 되는지 기능 체크가 필요
각 이미지들은 깨짐 없이 잘 노출 되는지 디자인적 품질 함께 검사 필요
영상 & GIF 베너 :
영상의 끊김이나 버퍼링, 영상 구도 등 디자인적 문제가 없는지 판단이 필요
공통 항목 :
단일, 롤링, 영상 등 관계 없이 웹사이트의 기능 정의상 베너에 링크가 연동된 경우 설정한 페이지로 이동하는지 베너 클릭 테스트가 필요 합니다.
단일베너의 예시는 "당근마켓" 에서 확인가능하며, 롤링베너의 예시는 "입생로랑 뷰티 공식몰" 과 "크몽" 에서 확인 가능합니다.
당근마켓 단일 베너
입생로랑 뷰티 공식몰 롤링베너
크몽 롤링 베너Drop Down List
Drop down list 영역을 클릭 하면 하단으로 선택 할 수 있는 옵션이 펼쳐지는 기능 입니다.
해당 기능 역시 여러 옵션 중 하나의 값을 선택 할 수 있도록 유도하는 기능으로서 사이트에서 콘텐츠의 정렬 기준을 설정할 때 Drop down list 를 대표적으로 확인 할 수 있습니다.
QA TEST 에는 Drop down 항목이 모두 노출 되는지 확인이 필요하며, 각 항목을 선택한 결과가 반영되는지를 확인 해 보아야 합니다.
모달, 팝업
모달과 팝업은 메인 페이지 위에 떠있는 이미지 형태로 유사하게 보일 수 있지만 큰 차이가 있습니다.
모달 : 기존 페이지 위에 레이어를 덮는 개념으로 또다른 웹브라우져가 뜨는 형태가 아닙니다.
팝업 : 기존 페이지 위에 새로운 웹브라우져가 뜨는 형태 입니다.
기획 의도상 모달인지 팝업인지 구분하여 QA TEST 를 진행 해야 합니다.
토글
토글은 스위치의 기능과 유사 한 형태로 on & off 를 설정 할 수 있는 기능 입니다.
가장 익숙하게 토글 기능을 확인 할 수 있는 방식으로는 휴대폰 알림 설정에서 알림 on & off 설정하기 위해 토글 기능이 제공됩니다. 보통 알림 수락 여부, 공개/비공개 처럼 양자 택일이 필요한 기능들에 토글 기능을 많이 사용 합니다. 아래 예시 이미지는 Naver login 화면에서 IP 보안 on & off 를 설정 할 수 있도록 되어 있습니다.
QA TEST 관점으로는 토글 on / off 에 따라 데이터 값이 반영 되는지 체크 하는 것을 위주로 진행하며, 경우에 따라 토글 기능 사용 가능 조건도 확인이 필요 합니다.
체크 박스
체크 박스는 여러가지 옵션 중 원하는 값을 여러개 선택 할 수 있는 기능 입니다. 온라인 쇼핑몰에서 카테고리를 선택할 때나, 회원가입시 '이용약관 동의' 시에도 체크박스 기능이 활용 됩니다. 체크 박스 기능 중 "전체 선텍" 기능이 제공되는 경우도 있는데, "전체 선택" 을 체크할 경우 하위 모든 옵션값이 자동으로 체크되는 기능이니다. 서비스의 기획 정의에 따라 체크 결과 값이 바로 반영 되기도 하고, 체크후 "확인" 버튼을 통해 적용 시켜야 값이 반영 되기도 합니다.
QA TEST 를 할 때는 "전체 선택" 기능이 있을 경우 하위 항목이 모두 체크 및 체크 해지가 되는지 확인이 필요하며, 전체 선택 한 상태에서 하위 항목을 체크 해지 하는 활동, 개별 체크 활동을 테스트 해봐야 하며, 각 체크 값에 따라 결과가 반영되는지 까지 확인이 필요 합니다.
대다수 웹사이트에서 체크 박스를 확인 할 수 있지만 "네파 아웃도어 전문 사이트" 를 예시로 보여드립니다.
Input Field 와 Place Holder 와 Lable
모든 서비스에는 Input Field 가 없는 경우는 없다고 봐도 과언이 아닌 것 같습니다. Input Field 는 이용자가 직접 값을 입력하는 목적으로 제공되는 기능인데 Input Field & Place Holder & Lable 은 거의 함께 묶음으로 UI 가 설계 되기도 합니다.
아래 예시는 "온오프믹스 회원가입" 페이지를 예시로 각 항목을 설명 하면
Lable : 입력 필드 상단이나 좌측에 입력할 정보가 무엇인지 설명해 주는 '제목' 입니다.
온오프믹스 화면 좌측에 "이메일(아이디) / 비밀번호 / 비밀번호 확인 / 이름 / 휴대전화 번호"
Input Field : 실제적으로 값을 입력 할 수있는 영역을 의미 합니다.
온오프믹스 화면에 회색 네모 영역이 Input field 입니다.
Place Holder : Input Field 내에 예시로 표기되는 글자 입니다.
Input Field 에 어떤 규칙으로 작성해야 하는지 예시로 보여 줄 때 주로 사용 합니다.
혹은 Lable 영역을 사용하지 않는 UI 디자인에서 Place holder 로 Lable 을 대체합니다
QA TEST 관점에서는 Lable 이나 Place Holder 가 기획 의도대로 노출되는지 확인이 필요하며,
Input Fielder 에 정해진 규칙대로 값이 입력되는지, 규칙을 위반하면 입력이 불가능한지, 입력한 값이 다른 페이지에서 동일하게 적용 되는지 등을 모두 확인이 필요합니다. Input Field 는 입력이 되는지만 확인 하는 것 보다 입력된 값이 다른 페이지에 적용되는지 확인하는 것이 더욱 중요한 QA TEST 영역 입니다.
사이드바 (Drawer) 와 햄버거 버튼
브런치에서도 사이드바와 햄버거 버튼 기능이 있습니다. 좌측 상단 세줄 표시로 되어있는 아이콘을 "햄버거 버튼" 으로 부릅니다. 햄버거 버튼을 클릭할 경우 좌측에 숨겨진 메뉴가 나타나는데, 이를 사이드바 라고 부릅니다. 웹사이트 중 GNB 영역으로 페이지 메뉴를 제공하지 않는 경우에 이처럼 사이드바 기능으로 메뉴를 제공 합니다. 페이지 이동이 필요할 때만 햄버거 버튼을 통해 사이드바를 열어서 이용 가능하므로 웹사이트 전체적으로 공간 차지를 최소화 할 수 있다는 장점이 있습니다. 또한 모바일에서 보았을 때도 PC 의 UX 구조도 유사하다는 장점이 있습니다. 기획 의도에 따라 햄버거 버튼을 클릭하여 사이드바를 열고, 사이드바 닫기 버튼이 제공되거나 다른 영역 클릭시 사이드바가 자동 닫히는 등으로 구현 됩니다.
햄버거 버튼과 사이드바의 기능은 기획 정의에 따르며, 사이드바 내에 있는 기능과 버튼들은 주로 페이지 이동에 사용되므로 QA TEST 시 모든 항목의 페이지 이동이 정상적으로 동작하는지 확인이 필요합니다.
페이지네이션 (Paginations)
페이지네이션은 하나의 페이지에서 수많은 게시글 목록을 한번에 보여 줄 수 없을 때, 게시글을 여러 페이지로 나누어 보여주기 위한 기능입니다. 페이지네이션 기능은 1,2,3 등 페이지 넘버를 클릭하여 페이지 이동을 할 수 있으며, '>' 버튼으로 다음페이지 이동, '<' 버튼을 통해 이전 페이지로 이동 할 수 있습니다.
페이지당 게시물 갯수 옵션을 선택 할 수 있는 "네이버 지식인" 과 같은 웹사이트도 있습니다.
페이지네이션은 주로 상품이나 게시물 등의 목록을 확인 하는 페이지에서 제공되는 기능이기 때문에 옵션 설정기능이 연관되어 있는 경우가 많습니다. QA TEST 과정에서는 페이지당 게시물 수 옵션 값에 맞게 노출 되는지, 페이지 이동이 되는지, 페이지 이동과정에서 설정한 옵션 값이 유지 되는지 함께 확인이 필요 합니다.
페이지네이션은 대부분 사이트에서 제공 되는데 대표적으로 "네이버 지식인" 예시 이미지를 공유 합니다.
페이지네이션 기능
페이지네이션과 함께 확인 해봐야 할 옵션 기능 예시브레드 크럼 (Bread Crumb)
주로 PC 웹 서비스에서 자주 확인 할 수 있는 기능으로서, 현재 접속 중인 페이지의 경로를 보여주는 화면 입니다. GA 에서 경로 탐색 처럼 사용자가 직접 이동한 경로를 표기 한다기 보다, 현재 페이지의 상위 페이지 기준으로 경로를 표시 하는 것 입니다. PC 바탕화면의 폴더나 MAC OS 의 Finder를 비교해 보면 Desktop > Folder 1 > Folder 1-1 형태의 구조를 의미 합니다.
QA 테스트 에서는 브레드 크럼에 있는 경로를 클릭하여 해당 페이지로 이동하는지 체크가 필요하며, 경로 표기가 기획서를 기준으로 올바르게 되는지 확인이 필요합니다.
"우피" 서비스에서 아무 페이지에 이동 해 보면 브레드 크럼을 바로 확인 할 수 있습니다.
우피에서 바로 확인 가능한 브레드 크럼의 모습날짜 입력 필드 (Date Pickers)
날짜 입력 필드는 "날짜 값" 만 입력 할 수 있도록 제공되는 기능 입니다. 주로 날짜 입력 필드를 클릭하면 달력 형태의 이미지가 노출 되고 원하는 날짜를 선택 할 수 있게 되어 있습니다. 향후 일정을 예약 하기 위해 날짜 입력 필드가 사용 할 때는 오늘 이전의 날짜는 선택 할 수 없어야 하는 기능으로 QA TEST 를 수행하고 있으며, 선택한 날짜 대로 결과값이 나오는지 확인이 필요합니다.
오늘 이전 날짜를 선택 할 수 있는 경우도 있는데요, 회원 가입시 생년 월일을 입력할 경우 오늘 이전 날짜를 선택 할 수 있고, 가게부 서비스나 계약관리 서비스 등에서도 날짜 입력 필드를 사용 할 수 있되 과거 날짜를 선택 할 수 있습니다. 이 역시 QA TEST 과정에서 선택한 날짜 값이 반영 되는지 확인이 필요합니다.
아래 예시는 "호텔스 닷컴" 에서 날짜 입력 필드 화면을 캡쳐하였습니다.
