홈으로 돌아가기

JMatrixPlatform UI 탐색 명령 팔레트

JMatrixPlatform에서 VSCode에서 영감을 받은 명령 팔레트 구현을 설명합니다. 기존 JCommand와 해시태그를 검색 및 필터링에 사용합니다. UI 구조 변경 없이 다중 모듈 시스템 탐색을 가속화하는 접근법입니다.

JMatrixPlatform에서 명령 팔레트가 UI 혼란을 어떻게 해결하는가
Advertisement 728x90

JMatrixPlatform의 명령 팔레트: 멀티 모듈 시스템 탐색 간소화

JMatrixPlatform 같은 멀티 모듈 시스템은 UI 과부하로 고생합니다. 수백 개의 명령어, 버튼, 탭 때문에 관리자조차 탐색이 악몽이 되죠. VSCode의 명령 팔레트를 벤치마킹해 보편적 해결책을 도입했습니다. 모든 사용자 접근 명령어를 하나의 검색창으로 통합해 중첩 메뉴 의존성을 줄이고 기능 접근을 빠르게 했습니다.

전통적인 탐색 문제

수십 개 모듈을 가진 시스템에서 대시보드는 단축키, 카테고리, 서브메뉴로 어지럽습니다. 10개 이상 워크플로우에 접근하는 사용자는 시간을 낭비합니다: 홈 → 내 작업 → 요구사항 관리 → 할당. 단계별 가이드가 필수죠: "카테고리 A 펼치기 → B 이동 → C 클릭".

관리자 작업(캐시 새로고침, 동기화, 보고서)은 배치와 기억이 특히 어렵습니다. 모든 해결책은 그룹화로 귀결되지만, 기능만 숨길 뿐입니다.

Google AdInline article slot

VSCode에서 영감 얻기

VSCode의 명령 팔레트는 키보드로 IDE 모든 기능을 이름 검색으로 즉시 접근합니다. UI 배치 논쟁을 없애고 즉시 호출을 가능케 합니다.

JMatrixPlatform에서는 이미 아키텍처가 준비되어 있습니다. 모든 UI 액션은 JCommand로 href, 라벨, 설명, 접근 권한을 가집니다. 명령어는 대시보드, 툴바, 패널을 구동합니다.

Projects 명령어 예시:

Google AdInline article slot
@JModelPart
public final class ACDProjectsDesk extends JCommand {
  public static ACDProjectsDesk COMMAND = new ACDProjectsDesk();

  @Override
  public JHref getHref(JContext ctx, JRequestParams requestParams) {
    return new JHrefTable(
        ATBProjectsDesk.TABLE,
        JTarget.CONTENT,
        Actions.TOOLBAR,
        null,
        AIQProjectsAll.INQUIRY,
        JHrefTable.RowSelection.MULTI);
  }
}

messages_en.properties 로컬라이제이션:

en.demo.matrix.schema.ui.command.ACDProjectsDesk=Projects

해시태그를 활용한 구현

팔레트는 해시태그로 접근 필터링과 동의어 의미 검색(예: "companies" → "organizations")을 합니다.

@Override
public Set<String> getHashTags() {
  return Set.of(
    "document-management",
    "demo",
    "projects",
    "kits");
}

컨트롤러가 사용 가능 명령어를 반환합니다:

Google AdInline article slot
@GetMapping("/navigator/paletteCommands")
public ResponseEntity<List<JDTOCommand>> getCommands(
    @JPathContextVariable JContext ctx,
    @RequestParam Map<String, String> requestParamsMap) {
  
  JRequestParams requestParams = new JRequestParams(requestParamsMap);

  Set<JCommand> commands = JModel.getAdminListByClass(JCommand.class);

  List<JDTOCommand> results = commands
      .stream()
      .filter(cmd -> cmd.getHashTags() != null && !cmd.getHashTags().isEmpty() && cmd.show(ctx, requestParams))
      .map(cmd -> new JDTOCommand(ctx, requestParams, cmd))
      .toList();

  return ResponseEntity.ok(results);
}

속도를 위해 클라이언트 측 필터링(최대 1000개 명령어). JSON 예시:

[
   {
      "name":"ACPersonDesk",
      "description":"Platform user registry",
      "label":"Users",
      "icon":null,
      "settings":{},
      "href":{
         "url":"../table/ATBPersonDesk",
         "requestParams":{
            "toolbar":"AMPersonDeskTableActions",
            "rowSelection":"MULTI",
            "inquiry":"AIQPersonsDesk",
            "target":"CONTENT"
         }
      },
      "hashTags":["users", "org-structure"]
   }
]

"projects" 검색 시 메뉴 깊이에 상관없이 올바른 href가 즉시 열립니다.

주요 이점

  • 즉시 접근: 라벨, 설명, 해시태그로 검색.
  • 맥락 인식: 해시태그로 동의어 추가와 관련 명령어 필터링.
  • 다재다능: 컴포넌트 보기와 직접 액션 모두 지원.
  • 확장성: UI 구조 독립적, 100+ 모듈에 이상적.
  • 고성능: 서버가 목록 전송, 클라이언트 실시간 필터링.

팔레트는 메뉴를 보완하며 대체하지 않습니다. 관리자는 드문 기능에 빠르게 접근—no 매뉴얼 필요.

핵심 요약

  • JCommand 아키텍처로 팔레트 구현이 간단—no 리팩토링.
  • 해시태그로 필터링과 의미 검색 일석이조.
  • 클라이언트 필터링으로 1000+ 명령어에서도 반응형.
  • 멀티 모듈 환경에서 인지 부하 감소.
  • 보수적 사용자 엔지니어링 시스템에 딱.

— Editorial Team

Advertisement 728x90

다음 읽기