업무용 웹서비스·관리자 화면, 메뉴 대신 검색창 하나로 될까

업무용 웹서비스나 관리자 화면은 메뉴가 자꾸 늘어납니다. 처음엔 다섯 개였던 왼쪽 메뉴가 1년 뒤 스무 개가 되고, 직원은 "그 화면이 어디 있더라"를 검색창 대신 동료에게 묻습니다. 요즘 업무 도구들이 Ctrl+K 한 번으로 화면을 찾아가는 명령 검색을 넣는 이유입니다. 플랫폼 콘셉트 시안 세 개로, 메뉴를 검색으로 바꾸면 무엇이 달라지는지, 그리고 검색이 답이 아닌 경우는 언제인지 정리했습니다.

세 시안은 직접 눌러볼 수 있습니다. PC에서 Ctrl+K를 누르고 '보안'을 쳐 보세요.

COMMAND OS 시안 직접 눌러보기 → · PATTERN CLOUD · JUNCTION

1COMMAND OS: 왼쪽 메뉴가 검색 결과

협업 도구 시안입니다. 왼쪽 사이드바 맨 위에 '원하는 화면을 검색하세요' 입력창이 있고, 그 아래 '워크스페이스 둘러보기 · 워크플로 설계 · 템플릿 라이브러리 · 팀의 운영 방식 · 데이터와 권한 · 데모 메모 작성' 여섯 줄이 있습니다. 이 여섯 줄이 메뉴이자 검색 결과입니다. 검색창에 '보안'이라고 치면 '데이터와 권한' 한 줄만 남고, 화살표 키로 고른 뒤 Enter를 누르면 그 섹션으로 이동합니다. 사이드바 아래 작은 글씨 '↑ ↓ 이동 · Enter 실행 · Esc 닫기'가 그 안내입니다.

오른쪽 위 '명령 검색 ⌘K' 버튼을 누르거나 키보드에서 Ctrl+K를 치면 검색창에 커서가 갑니다. 상단의 'workspace / studio / overview'는 지금 어느 화면인지 보여주는 경로입니다. 메뉴를 검색으로 바꾸면 이 경로 표시가 필수가 됩니다. 검색으로 점프한 사람은 자기가 어디 있는지 모르기 때문입니다.

첫 화면의 'SPRINT' 카드는 '전체 작업 12 · 완료 상태 6/12 · 다음 체크포인트 목요일'과 체크박스 세 개(모두 가상 숫자)로 되어 있고, 체크박스는 실제로 눌립니다. 그 아래 '흐름이 보이면, 대화가 정확해집니다' 섹션에서는 '보드 보기 · 목록 보기' 버튼으로 같은 작업 세 개(접수 · 진행 · 검토)를 카드로도, 줄로도 봅니다.

관리자 화면을 만들 때 늘 넣는 두 가지가 여기 있습니다. 첫 화면에 오늘 내가 할 일 세 개, 그리고 같은 데이터를 보는 방식을 바꾸는 전환 버튼. 메뉴를 늘리는 대신 보기 방식을 늘리면 화면 수가 줄어듭니다.

휴대폰에서는 검색창이 화면 맨 위로 오고 메뉴 여섯 개가 두 열로 접힙니다. Ctrl+K는 휴대폰에 없으니 오른쪽 위 '명령 검색' 버튼이 그 역할을 합니다. 업무 도구를 휴대폰으로 쓰는 사람은 확인만 하는 경우가 많아서, 휴대폰 첫 화면은 검색과 오늘 할 일 카드까지만 보이면 충분합니다.

2PATTERN CLOUD: 소개 페이지에 진짜 보드를

두 번째는 팀 워크스페이스 서비스의 소개 홈페이지 시안입니다. COMMAND OS가 서비스 안쪽 화면이라면 이건 서비스 바깥, 고객을 설득하는 페이지입니다. 메뉴는 평범하게 '제품 · 활용 사례 · 요금제 · 리소스'와 '무료로 시작하기' 버튼. 다른 점은 제목 '흩어진 일을 모으면, 팀의 가능성이 보입니다' 바로 아래에 스크린샷이 아니라 움직이는 칸반 보드가 있다는 것입니다.

'해야 할 일 2 · 진행 중 1 · 완료 1' 세 열에 '새로운 온보딩 흐름 설계 · 고객 인터뷰 질문 정리 · 랜딩 페이지 카피 리뷰 · 프로젝트 킥오프' 카드가 있고, '다음 상태로 →'를 누르면 카드가 옆 열로 넘어갑니다. '작업 검색' 칸에 글자를 치면 카드가 걸러지고, '+ 작업 추가'도 됩니다. 새로고침하면 초기화되는 체험용입니다. 서비스 소개에 직접 눌러 보는 30초를 넣으면 '무료로 시작하기' 버튼의 의미가 달라집니다.

휴대폰에서는 보드의 세 열이 한 열씩 세로로 쌓입니다. 소개 페이지의 데모는 휴대폰에서 보이기만 해도 됩니다. 실제 사용은 PC에서 할 것이고, 휴대폰에서는 "이런 화면이구나"를 전하는 역할이면 충분합니다.

3JUNCTION: 메뉴가 네 개뿐이면 검색은 필요 없습니다

세 번째는 반대 예입니다. 모빌리티 서비스 시안 JUNCTION은 첫 화면이 교차로입니다. 'N / MOVE 어디로 갈까요? · E / HOW 출발 전 확인하기 · W / ABOUT 도시를 잇는 이유 · S / PARTNER 함께 연결하기' 네 방향이 도로로 이어져 있고, 왼쪽 검은 패널에서 '출발 거점 CENTRAL · RIVERSIDE · WEST PARK'를 고르면 설명과 사진이 바뀝니다.

화면이 네 개뿐인 서비스에 검색창을 달면 오히려 길을 잃습니다. 검색은 찾을 게 많을 때의 도구입니다. JUNCTION은 메뉴를 네 개로 유지하는 대신 '출발 거점' 선택처럼 첫 화면에서 바로 써 볼 수 있는 입력 하나를 뒀습니다. 관리자 화면도 마찬가지입니다. 화면이 열 개를 넘기 전까지는 검색보다 좋은 메뉴 이름이 먼저입니다.

4메뉴 · 검색 · 데모, 언제 무엇을

이런 화면은 심플웹의 맞춤형 프로그램 제작(기획 · 디자인 · 프론트엔드 · 백엔드 · QA) 범위이고, 견적 계산기에서는 관리자 페이지 항목으로 시작합니다. 명령 검색과 체험 데모는 기획 단계에서 화면 수를 세어 본 뒤 넣을지 정합니다.