탭 UI 디자인: 맥락과 작성 내용을 유지하는 화면 전환

탭은 같은 대상의 관련 화면을 오가되 맥락을 유지해야 할 때 적합합니다. 선택지를 계속 보여 주고, 현재 열린 화면을 분명히 표시하며, 다른 탭으로 옮겨도 유용한 작업 상태를 보존하세요. 두 영역을 동시에 비교하거나 정해진 순서대로 단계를 완료해야 한다면 탭보다 다른 구성이 낫습니다.

‘Spring launch’라는 프로젝트에 개요, 작업, 활동 세 가지 화면이 있다고 해 보겠습니다. 모두 같은 프로젝트에 속하지만 서로 다른 질문에 답합니다. 제품 전체의 내비게이션 설계에서 탭은 같은 프로젝트 안의 화면을 전환하는 방식입니다. 프로젝트는 그대로 두고 내용만 바꿉니다.

화면 사이의 관계부터 정하세요

이 예제에서 ‘개요’는 프로젝트 목표와 현재 상태를 설명하고, ‘작업’은 완료해야 할 일을 보여 줍니다. ‘활동’에는 변경 사항과 논의가 기록됩니다. 어느 화면이든 바로 들어갈 수 있고, 작업을 열기 위해 개요를 먼저 읽을 필요가 없습니다. 이처럼 서로 독립된 화면을 묶을 때 탭이 유용합니다.

같은 줄에 ‘만들기’, ‘검토’, ‘게시’를 섞지 마세요. 이런 이름은 대체해서 보는 화면이 아니라 행동이나 진행 단계를 나타냅니다. 검토를 끝내야 게시할 수 있다면 순서를 드러내야 합니다. 탭으로 표현하면 단계를 자유롭게 바꿔도 되는 것처럼 보이고, 다음 단계로 넘어갈 수 없는 이유가 가려질 수 있습니다.

프로젝트 이름, 접근 설정, 간단한 상태처럼 공통된 정보는 탭 위에 둡니다. 특정 화면에만 필요한 행동은 해당 패널 안에 둡니다. ‘작업 추가’는 작업 화면에 있어야 합니다. 프로젝트 이름 옆에 놓으면 개요나 활동에서도 같은 동작을 사용할 수 있는 것처럼 보입니다. 이렇게 나누면 탭 줄이 탐색과 명령이 뒤섞인 영역으로 변하지 않습니다.

탭을 쓰면 한 번에 보이지 않는 정보도 생깁니다. 프로젝트 관리자가 전체 마감일과 개별 작업의 날짜를 비교해야 한다면 작업 목록 옆에도 마감일이나 요약을 보여 주세요. 날짜를 기억하려고 개요와 작업을 계속 오가는 방식은 효율적인 비교가 아닙니다.

장식보다 선택 상태를 먼저 분명히 하세요

레이블을 보면 어떤 내용이 나올지 예측할 수 있어야 합니다. ‘관리’는 사람, 결제, 설정까지 뜻할 수 있으므로 이 예제에서는 ‘작업’이 더 명확합니다. 한 줄 안에서 문법 형태와 구체성도 맞춥니다. ‘개요·작업·활동’은 잘 어울리지만 ‘개요·작업 관리하기·기타 모든 것’은 기준이 다릅니다.

선택된 탭은 자신의 패널과 이어져 보여야 합니다. 밑줄, 채운 배경, 대비가 있는 테두리로 관계를 나타낼 수 있습니다. 마우스를 올려도 사라지지 않는 표시를 쓰고, 미세한 색 차이에만 의존하지 마세요. 선택하지 않은 탭도 읽기 쉬워야 합니다. 비선택 상태는 비활성화 상태가 아닙니다.

작업 옆에 개수를 표시한다면 무엇을 세는지 정하세요. 바뀌는 숫자 ‘12’가 전체 작업인지, 미완료 작업인지, 내게 배정된 작업인지 알 수 있어야 합니다. 이 워크스페이스에서는 탭은 ‘작업’으로만 쓰고 패널 안에 ‘미완료 작업 12개’를 표시합니다. 어떤 화면을 열지 결정하는 데 도움이 될 때만 배지를 추가하세요. 균형을 맞추려고 모든 탭에 숫자를 붙일 필요는 없습니다.

키보드 포커스와 선택된 탭을 구분하세요

W3C의 탭 패턴(영문)은 포커스를 이동하는 것과 패널을 여는 것을 구분합니다. 가로 탭 줄에서는 왼쪽·오른쪽 방향키로 탭 사이를 이동합니다. 수동 활성화 방식에서는 Enter나 Space를 눌러 포커스된 탭을 선택합니다. 패널이 눈에 띄는 지연 없이 나타날 때는 자동 활성화를 사용할 수 있지만, 그렇지 않으면 탭을 이동할 때마다 기다리게 됩니다. 선택된 탭은 aria-selected="true"로 표시하고, 각 탭의 aria-controls는 연결된 패널을 가리키며, 패널의 이름은 해당 탭과 연결합니다. 이런 관계는 시각적 디자인뿐 아니라 실제 컴포넌트 구현에도 필요합니다.

이 프로젝트에서는 활동 정보를 불러오는 데 시간이 걸릴 수 있으므로 수동 활성화를 선택합니다. 작업이 열린 상태에서 키보드 포커스만 활동으로 옮겼다고 해 보겠습니다. 작업의 선택 표시와 콘텐츠는 그대로 남고, 활동에는 별도의 포커스 테두리가 생깁니다. 실행해야 패널이 바뀝니다. 두 상태를 같은 보라색 밑줄로 표현하면 무엇이 열려 있고 무엇이 열릴 준비만 된 것인지 구분하기 어렵습니다.

‘작업 선택, 활동 포커스’라는 조합을 실제 화면으로 그려 보세요. 실행 후에는 ‘활동 선택, 활동 포커스’도 만듭니다. ‘활성 탭’이라는 하나의 변형만으로는 두 상황을 설명할 수 없습니다. 제품이 밝은 배경과 어두운 배경을 모두 지원한다면 양쪽에서 구분되는지 검토하되, 동작은 일관되게 유지하세요.

로딩과 실패는 선택한 화면 안에 표시하세요

활동 탭을 실행하면 즉시 선택 상태로 바꾸고 패널 안에서 로딩을 보여 줍니다. 활동이 선택됐는데 작업 표가 그대로 남아 있으면 레이블과 내용이 어긋납니다. 요청 중에도 프로젝트 헤더와 탭 줄은 유지해 다른 화면으로 이동할 수 있게 하세요.

로딩 패널은 대체할 콘텐츠와 대체로 비슷한 작업 공간을 차지하게 합니다. 작은 회전 표시만 넣으면 화면이 접히면서 조작 요소가 움직이고, 지나치게 큰 스켈레톤은 실제로 없는 행이 나타날 것처럼 보일 수 있습니다. 이 예제에는 간단한 활동 자리 표시와 ‘활동을 불러오는 중’이라는 짧은 안내면 충분합니다.

요청이 실패하면 활동 패널 안에서 설명하고 그 자리에서 다시 시도할 수 있게 하세요. ‘아직 활동이 없습니다’는 오류 안내가 아닙니다. 요청에 성공했지만 기록이 없다는 뜻입니다. 접근 권한 부족도 따로 설명해야 합니다. 한 패널을 사용할 수 없다고 탭 줄 전체를 비활성화하지 마세요.

프로젝트의 상황	패널에 표시할 내용	계속 사용할 수 있는 것
활동 정보를 불러오는 중	선택된 활동 탭 아래의 로딩 상태	프로젝트 헤더와 다른 탭
활동 요청 실패	짧은 오류 설명과 다시 시도	기존 상태를 잃지 않는 개요와 작업
프로젝트에 기록된 활동이 없음	앞으로 어떤 기록이 나타나는지 설명하는 빈 상태	일반적인 탐색과 필요한 프로젝트 행동
입력 중인 작업이 아직 저장되지 않음	작업으로 돌아왔을 때 이어지는 초안	분명한 저장 또는 삭제 방법

화면을 바꿔도 작성 중인 작업은 지키세요

작업을 추가하던 사람이 마감일을 확인하려고 개요를 열었다고 해 보겠습니다. 작업으로 돌아오면 입력하던 제목과 기한이 그대로 있어야 합니다. 화면을 바꾼다는 것은 입력을 버리겠다는 뜻이 아닙니다. 유용한 필터나 긴 목록에서 보던 위치도 같은 원리로 판단할 수 있습니다.

현재 프로젝트에 속한 상태와 더 넓게 유지할 상태를 구분하세요. 작업 초안은 이 프로젝트에 속하고, 선호하는 목록 밀도는 여러 프로젝트에 적용할 수 있습니다. 특정 프로젝트의 필터가 다른 프로젝트에 무심코 따라가면 작업이 사라진 것처럼 보일 수 있습니다. ‘모두 기억하기’라고 적는 대신 인터랙션 옆에 보존 범위를 구체적으로 기록합니다.

입력을 보존할 수 없다면 실제로 잃기 전에 그 결과를 알려 주세요. ‘작성 중인 작업을 버릴까요?’처럼 결과를 설명하고 ‘계속 작성’과 ‘버리기’를 구분합니다. 모든 탭 전환에 확인창을 띄우지는 마세요. 저장하지 않은 내용이 없어도 경고하면 사용자는 중요한 경고까지 습관적으로 닫게 됩니다.

프로젝트의 특정 화면을 공유할 수 있어야 한다면 선택된 탭으로 바로 가는 URL과 브라우저 뒤로 가기의 동작을 개발팀과 정하세요. 활동 링크를 열었는데 개요에서 다시 찾아야 해서는 안 됩니다. 모든 탭 전환을 브라우저 기록에 남길지는 별도의 결정입니다. 우연히 오간 탭들을 뒤로 가기에서 끝없이 되짚게 만들지 않도록 주의하세요.

좁은 화면에서도 선택지를 읽고 누를 수 있게 하세요

먼저 실제 모바일 너비와 큰 글자 설정에서 세 레이블을 배치해 봅니다. 의미 있는 이름을 줄이기 전에 장식 아이콘과 과한 간격을 덜어 내세요. 줄에 들어갈 때까지 글자를 축소해서는 안 됩니다. 모두 보여도 읽거나 누르기 어렵다면 도움이 되지 않습니다.

번역된 긴 레이블이 넘칠 때는 가로로 스크롤되는 한 줄을 사용할 수 있습니다. 옆에 더 있다는 사실이 드러나고 선택된 탭은 보이는 범위에 있어야 합니다. 마지막 항목에 도달하기 위해 정밀한 스와이프를 요구하지 마세요. 짧은 영어 레이블만 보고 모든 언어에서도 맞을 것이라고 가정하지 말고 가장 긴 실제 문구를 넣어 봅니다.

탭 수가 많아 한 줄이 유용하지 않다면 묶는 방식부터 다시 검토하세요. 선택지들이 하나의 일관된 집합이라면 이름이 분명한 화면 선택기를 좁은 화면의 대안으로 쓸 수 있습니다. 현재 선택값을 계속 표시하고, 화면을 고를 때 데스크톱과 같은 프로젝트 상태를 유지해야 합니다. 탭을 여러 줄로 배치하면 선택된 레이블과 패널의 시각적 관계가 약해지기 쉽습니다.

Pixso에서 프로젝트 전체를 설계하세요

Pixso에서 ‘Spring launch’ 프로젝트의 개요, 작업, 활동을 각각 만듭니다. 공통 헤더의 위치는 유지하고 관련 패널과 선택 상태만 바꾸세요. 작업이 열린 화면에는 포커스만 있는 활동 탭도 함께 그려 두면 검토자가 호버 효과를 추측하지 않아도 차이를 볼 수 있습니다.

검토 과제는 구체적으로 주세요. ‘작업을 추가하다가 개요에서 프로젝트 마감일을 확인한 뒤, 돌아와 작성을 마무리해 주세요’라고 요청합니다. 다음에는 느린 연결에서 활동을 열어 봅니다. 탭 줄만 따로 평가하는 것보다 입력 유실, 잘못된 선택 표시, 레이아웃 이동을 잘 드러내는 경로입니다. 디자인은 의도한 동작을 전달하고, 키보드 조작과 패널 관계는 실제 구현에서도 확인해야 합니다.

개발자 전달 내용은 각 화면에 들어가는 것, 선택이 바뀌는 시점, 전환해도 남는 상태, 좁은 화면의 배치에 집중하세요. 좋은 탭은 매번 현재 위치를 잊는 여러 페이지가 아니라, 여러 관점으로 볼 수 있는 하나의 작업 공간을 만듭니다.

Pixso에서 프로젝트 탭 설계하기 →