권한 역할 상세 화면 개편으로 조회 속도 2배 개선

역할 상세 페이지를 다시 갈아엎음

권한 관리 화면이 운영팀에서 가장 자주 보는 페이지인데 정작 역할 상세는 한참 방치돼 있었음. 권한 목록만 쭉 나열하고, 어떤 사용자가 이 역할을 쓰는지 보려면 다른 메뉴로 가야 했음. 운영팀에서 "권한 하나 바꾸면 누가 영향받는지 한 화면에서 보고 싶음" 요청이 들어와서 갈아엎었음.

뭘 바꿨는지

핵심은 세 가지였음:

• 권한 평면 리스트 → 카테고리 그루핑: 메뉴/기능/데이터 권한 3축으로 묶어서 표시
• 사용자 할당 패널 신규: 이 역할을 가진 활성 사용자 + 최근 부여 이력
• 변경 이력 타임라인: 누가 언제 이 역할의 권한을 토글했는지 표시

화면 구조 정리하면서 상세 컨트롤러도 같이 손봤음. 기존엔 상세 진입 시 권한 목록 한 방 쿼리만 날렸는데, 추가된 패널 때문에 호출이 늘어나서 병렬화가 필요했음.

var perms   = supplyAsync(() -> roleQuery.findPermissions(roleId), pool);
var members = supplyAsync(() -> roleQuery.findActiveMembers(roleId), pool);
var history = supplyAsync(() -> roleQuery.findRecentChanges(roleId, 30), pool);

return allOf(perms, members, history)
        .thenApply(v -> assemble(perms.join(), members.join(), history.join()))
        .join();

응답 시간 변화

순차 호출 → 병렬 호출만 해도 체감 차이가 컸음. 사실 인덱스 두 개 추가한 쪽이 더 큰 기여였던 것 같음.

삽질 기록

처음엔 사용자 패널을 페이징 없이 통째로 내려서, 활성 사용자 수백 명 있는 역할 들어가면 화면이 멎었음. 가상 스크롤 붙이려다 결국 서버 페이징으로 회귀. 위젯이 멋있어 보여도 데이터량 안 보고 가면 다 깨짐.

또 변경 이력 타임라인에 "권한 토글" 단위로 row를 만들었더니 한 번에 50개 토글하면 50줄이 찍혔음. 트랜잭션 단위로 묶어서 표시하도록 고쳤음. 감사 로그는 raw로 보존하되, UI는 의미 단위로 분리하는 게 답이었음.

회고

요청 들어왔을 때 단순히 패널 하나 더 붙이는 작업으로 봤는데, 실제로는 데이터 조회/권한 모델/이력 표현을 다 건드리는 일이었음. 다음엔 화면 요구사항 받을 때 데이터 흐름부터 그려놓고 들어가야겠음.

다음