쿠폰 구매 목록에 체크박스 선택 모드 토글 추가로 대량 처리 효율 개선

쿠폰 구매 목록에 체크박스 모드 토글을 추가했다. 단순해 보이는 UI 기능이지만, 파트너 포털에서 대량 작업을 처리하는 입장에서는 꽤 실질적인 개선이다.

배경: 목록에서의 선택 작업

파트너가 쿠폰 구매 내역을 조회할 때 보통 몇 가지 시나리오가 있다. 하나씩 상세 페이지로 들어가서 처리하거나, 여러 건을 한 번에 선택해서 일괄 처리(예: 상태 변경, 엑셀 다운로드, 승인/반려 등)하고 싶은 경우다. 후자의 상황에서 체크박스가 없으면 답답하다. 사용자 입장에선 "이 항목들을 다 처리하고 싶은데 왜 하나씩 클릭해야 하지?"라는 불편함이 쌓인다.

이런 대량 선택은 어드민/파트너 포털의 목록 화면에서 흔한 패턴이다. 행(row)마다 체크박스를 두고, 헤더에 "전체 선택" 버튼을 놓고, 선택된 항목의 수를 표시하는 식이다. 하지만 항상 체크박스가 보이면 모바일이나 좁은 화면에서 공간 낭비가 되고, 단순 조회만 하는 사용자한테도 방해가 된다.

체크박스 모드 토글의 의도

그래서 토글 방식을 선택했다. 기본 상태는 일반 조회 모드(체크박스 없음)로 두고, 사용자가 필요할 때만 "선택 모드" 버튼을 눌러서 체크박스를 활성화하는 식이다. 이렇게 하면:

• 일반적인 조회 작업에선 간결한 UI 유지
• 대량 선택이 필요한 순간에만 인터페이스 전환
• 모드 토글 상태를 세션이나 로컬 스토리지에 기억해두면 사용자의 선호도 반영 가능
• 모바일과 데스크톱 모두 어느 정도 대응 가능

구현 관점에서의 고민

JSP 파일에서 이런 토글을 구현할 때 보통 다음처럼 처리한다:

<!-- 토글 버튼 -->
<button id="toggleSelectMode" onclick="toggleCheckboxMode()">
  선택 모드 활성화
</button>

<!-- 목록 테이블 -->
<table id="orderTable">
  <tbody>
    <tr>
      <!-- selectMode가 true일 때만 렌더링 또는 display -->
      <td class="checkbox-column" id="checkboxCol" style="display: none;">
        <input type="checkbox" name="orderId" value="...">
      </td>
      <td>주문번호</td>
      <td>주문금액</td>
      ...
    </tr>
  </tbody>
</table>

<script>
let selectMode = false;
function toggleCheckboxMode() {
  selectMode = !selectMode;
  document.getElementById('checkboxCol').style.display = 
    selectMode ? 'table-cell' : 'none';
  // 로컬 스토리지에 저장
  localStorage.setItem('partnerPortalSelectMode', selectMode);
}
</script>

다른 선택지도 있다. 처음부터 체크박스를 렌더링해두고 CSS로 숨겼다가 토글 시 표시하는 방식, 또는 AJAX로 동적으로 로드하는 방식도 가능하다. JSP에선 조건부 렌더링이 깔끔해서, 위처럼 <c:if> 태그나 자바스크립트 display 제어로 충분한 경우가 많다.

배운 점

작은 기능 하나가 사용성 인상을 크게 바꿀 수 있단 걸 다시 느꼈다. 특히 B2B 포털(파트너/어드민)에선 "자주 반복되는 작업"이 수백 번 쌓이기 때문에, 초 단위 효율 개선도 누적되면 무시할 수 없다.

또 토글 상태 기억(localStorage)을 추가할 때는 XSS 취약점이나 저장소 용량을 고려해야 한다. 간단한 불린값이지만, 사용자 개인 설정이므로 보안과 성능 양쪽을 점검하는 게 좋다. 나중에 더 많은 사용자 선호도를 저장하게 되면 백엔드 DB로 옮기는 것도 고려할 시점이다.