워크스페이스 전환 UX: 다음 작업의 위치를 분명하게

워크스페이스 전환 화면은 ‘다음 작업이 어디에 반영되는가?’에 바로 답해야 합니다. 현재 공간, 로그인한 계정, 아직 끝나지 않은 작업을 전환 전에 볼 수 있어야 합니다. 이름이 비슷한 고객사 공간을 여러 개 다룰 때 로고만 있는 메뉴는 파일 업로드나 초대의 대상을 착각하게 만들 수 있습니다.

작은 디자인 에이전시에서 한 디자이너가 Northstar의 결제 화면과 Riverton의 예약 흐름을 같은 브라우저에서 담당한다고 가정해 보겠습니다. 문제는 메뉴를 찾는 데 그치지 않습니다. 댓글, 파일, 초대가 다른 고객사의 공간에 들어갈 수 있습니다. 이 상황을 Pixso의 협업 디자인 작업으로 화면별로 설계해 보겠습니다. 두 고객사 공간은 디자인 과제를 위한 설정이며 Pixso 자체의 계정 전환 기능을 설명하는 것은 아닙니다.

계정, 워크스페이스와 프로젝트 구분하기

계정은 누가 작업하는지, 워크스페이스는 어느 조직이나 고객사에 속하는지, 프로젝트는 그 안의 어떤 파일 묶음인지 알려 줍니다. 이 세 층위를 라벨 없이 합치면 서로 다른 고객사의 ‘웹사이트 개편’ 프로젝트가 똑같아 보일 수 있습니다.

예를 들어 상단에는 ‘Northstar / 결제 화면 개편’을 계속 표시하고 프로필 근처에는 담당자의 이름을 둡니다. 전환 메뉴에서는 고객사 이름 아래 프로젝트를 묶습니다. Riverton으로 이동하면 상단의 현재 위치와 다음 업로드 대상이 함께 바뀌어야 합니다. 고객사 이름이 열린 메뉴 안에만 있으면 늦습니다. 실제 작업은 대부분 메뉴를 닫은 뒤에 이루어집니다.

긴 이름도 테스트하세요. ‘Northstar Brand’와 ‘Northstar Support’의 구별되는 부분이 말줄임표 뒤로 사라지면 축약 표시가 위험해집니다. 좁은 화면에서는 짧게 표시하더라도 포커스, 마우스 오버 또는 메뉴에서 전체 이름을 확인할 수 있어야 합니다. 색만 다른 아바타에 식별을 맡기지 마세요.

전환 대상의 맥락을 보여 주는 목록 만들기

메뉴의 첫 영역에서는 현재 공간을 확인할 수 있게 합니다. 각 대상에는 전체 워크스페이스 이름, 계정, 역할, 최근 프로젝트 등 선택에 필요한 정보를 표시합니다. 목록이 길어져 검색을 넣더라도 검색 결과에 상위 고객사 이름을 남겨야 합니다. 프로젝트 이름만 보여 주면 잘못된 공간을 선택하기 쉽습니다.

최근 사용한 공간을 위로 올릴 수 있지만 메뉴가 열린 동안 순서가 갑자기 바뀌지 않게 합니다. 현재 위치도 명확히 표시하세요. 메뉴 버튼으로 구현한다면 열기, 닫기, 키보드 조작은 W3C 메뉴 버튼 패턴을 참고합니다. 검색 목록이나 대화상자라면 그에 맞는 상호작용 방식을 사용해야지 모든 컨트롤에 메뉴 의미를 붙이면 안 됩니다.

‘새 워크스페이스 만들기’는 기존 공간으로 이동하는 동작과 다릅니다. 대상 목록과 시각적으로 분리하세요. ‘멤버 관리’와 ‘로그아웃’도 고객사 이름 옆에 같은 모양으로 두지 않는 편이 안전합니다.

전환 전에 미완료 작업 처리하기

Northstar에서 검토 댓글을 입력했지만 아직 보내지 않은 상태에서 Riverton을 고른다고 해 보겠습니다. 우선 제품이 초안을 보존할 수 있는지 결정해야 합니다. 가능하다면 Northstar에 남는다고 명시합니다. 불가능하다면 여기서 계속 작성하거나, 버리고 이동하거나 선택할 수 있게 합니다. 나중에 찾을 수 없는 초안에 ‘저장’을 약속해서는 안 됩니다.

브라우저의 페이지 이탈 확인창만을 복구 수단으로 삼기는 어렵습니다. MDN은 beforeunload가 일부 모바일 상황에서 안정적으로 동작하지 않으며, 저장하지 않은 내용이 있을 때만 연결할 것을 권합니다. 애플리케이션 내부 전환이라면 ‘Northstar / 결제 화면 개편에 보내지 않은 댓글이 있습니다’라고 정확한 위치를 말할 수 있습니다.

업로드가 진행 중이라면 파일의 소속을 끝까지 유지해야 합니다. 원래 공간에서 안전하게 계속 처리할 수 있을 때만 전환을 허용하거나, 지금 전환할 수 없는 이유를 설명하세요. 대상이 없는 로딩 표시 뒤에 결과만 나타나면 어느 고객사에 파일이 저장됐는지 알기 어렵습니다.

공간마다 다른 권한을 미리 알리기

Northstar에서는 편집자이지만 Riverton에서는 보기 권한만 있을 수 있습니다. 목록에 복잡한 권한 표를 넣을 필요는 없지만 ‘Riverton · 보기 권한’처럼 중요한 차이를 알려 주세요. 이동 후에는 편집 기능도 그 권한에 맞아야 합니다. 이유를 알 수 없는 비활성 버튼보다 ‘여기서는 볼 수 있습니다. 댓글 권한은 관리자에게 요청하세요’가 다음 행동을 안내합니다.

권한이 높은 작업을 경계 너머로 그대로 옮기지 마세요. Northstar에서 초대 창을 연 채 전환한다면 창을 닫거나, 보내기 전에 대상이 Riverton으로 바뀌었음을 분명히 표시해야 합니다. 그렇지 않으면 동료를 잘못된 고객사에 초대할 수 있습니다. 중요한 작업의 최종 확인에는 상단 표시와 별도로 대상을 다시 적습니다.

다른 계정으로 전환하는 것은 또 다른 층위입니다. 같은 워크스페이스라도 로그인 계정에 따라 권한이 다릅니다. 여러 계정을 지원한다면 워크스페이스 이름 가까이에 계정 식별 정보를 두고, 변경 후 권한을 다시 확인합니다.

전환 결과와 실패 후의 현재 위치 알려 주기

성공하면 상단의 현재 공간을 즉시 바꾸고, 새 공간의 최근 프로젝트처럼 예상 가능한 곳으로 이동합니다. 마지막 파일을 다시 연다면 편집 도구를 보여 주기 전에 그 파일의 소속을 밝힙니다. ‘Riverton으로 전환했습니다’라는 짧은 알림은 도움이 되지만, 사라지지 않는 현재 위치 표시가 더 중요합니다.

메뉴가 열린 뒤 접근 권한이 취소되었다면 원래의 안전한 공간에 남겨 두고, Riverton에 들어갈 수 없다는 이유를 설명하며 목록을 새로 고칩니다. 네트워크 오류가 생겼을 때도 현재 공간이 Northstar인지 명확히 알려 주세요. 이전 고객사 이름이 남은 빈 화면은 데이터 경계를 불분명하게 만듭니다.

W3C 상태 메시지 안내는 성공이나 오류를 알려 주면서도 불필요하게 포커스를 옮기지 않는 방식을 설명합니다. 미전송 댓글을 어떻게 할지 결정해야 할 때는 대화상자가 필요하지만, 일반적인 전환 성공마다 작업을 멈출 필요는 없습니다.

잘못된 공간에서 작업할 뻔한 순간을 시험하기

Pixso에서 세 화면을 연결해 보세요. 보내지 않은 댓글이 있는 Northstar, 두 고객사와 역할을 보여 주는 전환 목록, 성공적으로 이동한 Riverton입니다. 권한 취소나 네트워크 실패 경로도 추가합니다. 모든 화면에 현재 공간을 남겨 두면 각 화면만 볼 때 놓치기 쉬운 맥락 변화를 확인할 수 있습니다.

검토자에게 ‘Northstar에 댓글을 남긴 뒤 Riverton으로 가서 동료를 초대하세요’라고 요청하되 두 이름이 비슷하다는 힌트는 주지 않습니다. 각 단계에서 현재 위치를 설명할 수 있는지, 미전송 댓글을 발견하는지, 초대가 어느 공간에 들어가는지 예측하는지 살펴보세요. 좋은 전환 화면은 단순히 목록 사이를 이동시키는 것이 아니라 신원, 목적지, 미완료 작업을 함께 지켜 줍니다.

상호작용 참고 자료

• W3C WAI-ARIA 메뉴 버튼 패턴
• MDN: beforeunload의 제한