[QA/UX] QA 테스터가 알아야 할 기본 UI 요소 정리

내가 QA는 아니지만 업무를 하다보면 QA를 맡게되기도하고 퍼블리싱도 하게되고.. 기획에도 일부 참여를 하게되는데, 다들 만들때마다 용어가 제각각이라서 UI에 맞는 명칭이 있는데 공통적으로 사용하면 좋을 것 같아서 정리를한다.

 

디자이너랑 협업할 때도 웹디자인을 메인으로 하는 디자이너아니여서 명칭이 얘기할 때마다 꼬이기도 하더라.. ㅠ

 

버튼

사용자가 클릭할 수 있는 상호작용 요소입니다. 기능 실행, 화면 전환, 폼 제출 등에 사용됩니다.

<button>제출</button>

 

GNB(Global Navigation Bar)

사이트 전체를 아우르는 최상단 내비게이션 바입니다. 로고, 주요 메뉴 등이 포함됩니다.

<nav class="gnb">
  <ul>
    <li>홈</li>
    <li>서비스</li>
    <li>문의</li>
  </ul>
</nav>

LNB(Local Navigation Bar)

특정 페이지나 섹션 내에서 세부 메뉴를 안내하는 내비게이션 바입니다.

<nav class="lnb">
  <ul>
    <li>설정</li>
    <li>개인정보</li>
    <li>보안</li>
  </ul>
</nav>

 

배너(Banner)

주요 알림, 이벤트, 광고 등을 안내하는 큰 시각적 요소입니다.

<div class="banner">
  <img src="banner.jpg" alt="이벤트 안내">
</div>

 

드롭박스(Dropdown)

클릭 시 숨겨진 메뉴나 옵션 리스트를 보여주는 UI입니다.

<select>
  <option>선택하세요</option>
  <option>옵션 1</option>
  <option>옵션 2</option>
</select>

 

모달(Modal)

화면 위에 뜨는 팝업 창으로, 사용자에게 중요한 알림이나 추가 행동을 요구할 때 사용합니다.

<div class="modal">
  <p>정말 삭제하시겠습니까?</p>
  <button>확인</button>
  <button>취소</button>
</div>

 

토글(Toggle)

ON/OFF처럼 상태를 전환하는 스위치 형태의 UI입니다.

<label class="switch">
  <input type="checkbox">
  <span class="slider"></span>
</label>

 

체크박스(Checkbox)

복수 선택이 가능한 입력 방식입니다.

<input type="checkbox" id="agree">
<label for="agree">동의합니다</label>

 

인풋(Input)

사용자로부터 텍스트나 데이터를 입력받기 위한 필드입니다.

<input type="text" placeholder="이름을 입력하세요">

 

사이드바(Sidebar)

주로 화면 왼쪽이나 오른쪽에 위치하는 세로형 내비게이션 영역입니다.
페이지 이동, 카테고리 선택 등 기능을 지원합니다.

<aside class="sidebar">
  <ul>
    <li>대시보드</li>
    <li>설정</li>
    <li>로그아웃</li>
  </ul>
</aside>

 

햄버거 버튼(Hamburger Button)

작은 화면(모바일)에서 메뉴를 열고 닫을 때 사용하는 세 줄짜리 버튼입니다.

<button class="hamburger">
  ☰
</button>

 

페이지네이션(Pagination)

게시글, 상품 목록 등 여러 개의 데이터를 페이지 단위로 나누어 보여줄 때 사용하는 UI입니다.

<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">»</a>
</div>

 

브레드크럼(Breadcrumb)

현재 사용자가 위치한 페이지의 경로를 단계별로 보여주는 내비게이션입니다.

<nav class="breadcrumb">
  <a href="#">홈</a> >
  <a href="#">마이페이지</a> >
  <span>내 정보</span>
</nav>

 

데이트피커(Datepicker)

날짜를 선택할 수 있도록 제공하는 입력 UI입니다.

<input type="date">

 

참조 블로그 :

https://brunch.co.kr/@koriyun/23

QA 테스터가 알아야 할 UI