분할 뷰 UI 디자인: 목록과 상세 내용의 맥락 유지하기

분할 뷰는 목록 옆에 선택한 항목의 상세 내용을 함께 보여주는 인터페이스입니다. 고객 문의를 읽거나 문서를 검토하고 여러 기록을 반복해서 확인하는 작업에 적합합니다. 항목을 선택할 때마다 맥락을 처음부터 다시 파악하지 않고 목록을 오갈 수 있기 때문입니다. 선택한 행, 상세 제목, 실행 가능한 작업이 모두 같은 대상을 가리킨다는 점이 명확해야 합니다.

Pixso의 UI 디자인 작업 공간에서 넓은 화면과 좁은 화면에 맞춰 이 관계를 설계해보세요. 중요한 것은 화면을 반으로 나누는 비율이 아닙니다. 한 항목을 처리하는 동안 어떤 정보가 계속 보여야 하는지를 정하는 일입니다.

목록과 상세 내용을 함께 보면 좋은 작업 고르기

고객 지원 서비스 Beacon을 디자인 예제로 살펴보겠습니다. 담당자는 받은편지함을 훑어본 뒤 Mira Chen이 보낸 결제 영수증 관련 대화를 열고, 요청을 읽은 다음 답장합니다. 목록에는 주변 대화, 제목, 현재 상태가 있어 전체 맥락을 파악할 수 있습니다. 상세 패널에는 선택한 대화의 내용과 관련 작업이 표시됩니다.

이 구조는 두 영역에서 서로 다른 제안을 보여주는 마케팅용 분할 화면과 다릅니다. 한 기록의 동등한 하위 섹션을 보여주는 탭과도 다릅니다. Beacon에서는 다른 행을 선택하면 상세 패널이 나타내는 대상 자체가 바뀝니다.

한 기록을 처리하는 데 넓은 작업 영역이 필요하고 주변 목록이 별 도움이 되지 않는다면 별도 전체 페이지가 더 적합할 수 있습니다. 짧은 정보만 확인하면 된다면 간단한 펼치기 영역으로 충분할 수도 있습니다. 두 패널은 목록과 항목 사이를 반복해서 오가는 가치가 화면 공간을 나눠 쓰는 불편보다 클 때 유용합니다.

선택한 대상이 무엇인지 분명하게 보여주기

Beacon의 선택된 행에는 “Mira Chen”, “청구서 영수증”, “#1042”가 표시됩니다. 상세 제목에도 두 영역의 연결을 알아볼 수 있을 만큼 식별 정보를 반복하세요. 고객 이름이 같거나 여러 대화의 제목이 비슷할 때 기록 번호가 구분에 도움이 됩니다. 그렇다고 목록에 모든 필드를 표시할 필요는 없습니다.

포인터가 행을 떠나도 선택 표시는 유지되어야 합니다. 선택 상태를 호버 상태와 똑같이 보이게 만들지 마세요. 키보드 포커스의 테두리도 현재 조작할 행이나 컨트롤을 뜻하는 것이지, 반드시 그 대화가 이미 열려 있다는 뜻은 아닙니다.

받은편지함에 일괄 선택이 있다면 그 상태도 구분해야 합니다. 체크박스는 여러 대화를 묶어서 처리할 대상으로 선택하고, 행을 여는 동작은 대화 하나를 살펴보는 데 쓰일 수 있습니다. 체크한 행과 상세 패널에 표시한 항목을 같은 상태로 취급하면 어떤 대화에 작업이 적용되는지 모호해집니다.

처음 비어 있는 상세 패널에 무엇을 보여줄지도 정해야 합니다. Beacon에서는 최신 메시지를 자동으로 여는 대신 대화를 선택하라는 안내를 보여줄 수 있습니다. 임의의 대화를 담당자가 선택한 것처럼 보이게 하지 않는 방법입니다. 다만 #1042로 직접 들어오는 링크라면 접근 권한이 있을 때 요청한 대화를 열어야 합니다.

내용에 맞춰 패널 크기 정하기

행을 알아보는 데 필요한 최소 정보부터 정리하세요. Beacon에서는 보낸 사람, 제목, 짧은 내용, 상태가 목록을 훑는 데 도움이 됩니다. 메시지 본문 전체를 목록에 넣을 필요는 없지만 모든 제목을 몇 글자 만에 잘라버리면 비슷한 대화를 구분하기 어렵습니다.

상세 패널에는 메시지를 편하게 읽고 답장을 작성할 공간이 필요합니다. 무조건 반반으로 나누면 목록 공간은 남는데 대화 내용은 불필요하게 좁아질 수 있습니다. 길이가 같은 임시 문장만 쓰지 말고 실제에 가까운 제목과 긴 메시지를 넣어 비율을 비교하세요.

그다음 텍스트를 확대해 확인합니다. 짧은 영어 두 단어에는 충분한 목록 너비가 번역된 제목이나 긴 조직명에는 부족할 수 있습니다. 어떤 정보는 줄바꿈하고, 어떤 보조 정보는 다른 위치로 옮길지 정하세요. 전체 식별 정보를 어디서 확인할 수 있는지도 분명해야 합니다.

패널 크기 조절이 실제로 도움이 된다면 구분선을 알아보기 쉽게 만들고 드래그 외의 조작 방법도 정해야 합니다. 패널이 사용할 수 없는 좁은 띠가 되지 않도록 최소 너비를 설정하세요. 크기 조절은 필수 기능이 아닙니다. 대부분에게 필요 없는 컨트롤을 추가하는 것보다 적절한 고정 비율과 명확한 좁은 화면 구성이 더 단순할 수 있습니다.

목록이 바뀌어도 보던 위치 유지하기

담당자가 #1042를 읽는 동안 새 문의가 받은편지함에 들어올 수 있습니다. 새 항목을 알리되 상세 패널을 알리지 않고 그 대화로 바꾸지 마세요. 서비스에서 발생한 새 활동이 담당자의 현재 선택을 덮어써서는 안 됩니다.

항목을 살펴본 뒤 돌아올 때는 현재 필터와 유용한 스크롤 위치를 유지합니다. 상태를 바꾸는 작업 때문에 대화가 필터 조건에서 벗어난다면 그 결과를 설명하세요. 예를 들어 “열림” 상태만 보는 받은편지함에서 #1042를 해결 처리한 경우, 상세 내용을 잠시 유지하며 현재 목록에서 제외되었다고 안내하고 다음 대화로 가는 경로를 보여줄 수 있습니다.

이 동작은 정렬 결과에 우연히 맡기지 말고 제품팀과 합의해야 합니다. 다른 업무 흐름에서는 의도적으로 다음 항목을 열 수 있지만 사용자가 그 결과를 예상할 수 있어야 합니다. “해결 처리”와 “해결 처리 후 다음 대화 열기”는 서로 다른 작업입니다.

선택한 기록을 더 이상 열 수 없다면 그 제목 아래 다른 기록의 내용을 남겨두지 마세요. 현재 항목에 접근할 수 없다는 점을 설명하고 적절한 돌아가기 경로를 제공해야 합니다. 가능하면 목록 맥락은 유지하되 현재 사용자에게 권한이 없는 정보가 노출되어서는 안 됩니다.

한 패널로 전환해도 돌아갈 경로 유지하기

좁은 화면에서 Beacon은 받은편지함을 먼저 보여줍니다. #1042를 열면 해당 상세 화면으로 이동합니다. 눈에 보이는 “받은편지함으로” 버튼은 목록을 맨 위로 초기화하는 대신 이전 작업에 도움이 되는 위치로 돌려보내야 합니다.

Android의 적응형 목록·상세 레이아웃 가이드(영문)는 이 기본 구조를 보여줍니다. 공간이 충분하면 관련 패널을 함께 표시하고 좁은 창에서는 별도 화면으로 탐색할 수 있습니다. 웹 인터페이스에서도 이런 관계를 고려할 수 있지만 실제 라우팅과 브라우저의 뒤로 가기 동작은 웹 구현에 맞게 별도로 정해야 합니다.

유지할 맥락	넓은 Beacon 화면	좁은 Beacon 화면
선택한 대화	Mira Chen의 행과 #1042 상세 내용을 함께 보여줍니다.	상세 제목에서 Mira Chen과 #1042를 계속 확인할 수 있습니다.
받은편지함 범위	목록 위에 현재 필터를 유지합니다.	받은편지함으로 돌아오면 같은 필터를 복원합니다.
목록에서의 위치	읽는 동안에도 선택한 행을 찾을 수 있습니다.	돌아오면 선택한 행 근처의 유용한 위치를 보여줍니다.
사용 가능한 작업	대화 관련 작업은 상세 패널에 속합니다.	같은 작업은 숨겨진 행이 아니라 현재 열린 대화에 적용됩니다.
창 크기 변화	두 패널이 같은 선택 상태를 공유합니다.	화면이 좁아져도 열려 있던 상세 내용이 현재 화면으로 유지됩니다.

창 크기를 바꿨다고 작업이 초기화되어서는 안 됩니다. #1042를 읽다가 화면이 좁아지면 그 상세 내용을 계속 보여주세요. 공간이 다시 넓어지면 같은 선택 상태로 목록을 옆에 복원합니다. 너비마다 서로 무관한 화면처럼 처리하면 목록·상세 패턴을 쓰는 이유가 사라집니다.

다른 기록을 열기 전에 읽기와 편집 구분하기

읽기만 하는 대화를 오가는 데는 부담이 적습니다. 하지만 작성 중인 답장을 두고 이동하는 것은 다릅니다. Beacon에서는 다른 대화를 열기 전에 답장 초안의 상태를 명확히 알려야 합니다.

서비스가 초안을 저장한다면 저장 상태를 정확히 표시하고 돌아왔을 때 다시 사용할 수 있게 해야 합니다. 답장이 현재 편집 세션에만 있다면 내용이 사라지기 전에 머무르거나 버릴 수 있는 명확한 선택을 제공하세요. 입력한 글이 화면에 남아 있다는 이유만으로 저장되었다고 표시하면 안 됩니다.

이 판단은 현재 편집 중인 대화와 연결되어야 합니다. “변경 사항이 사라질 수 있습니다”라는 일반적인 경고보다 “Mira Chen에게 보내지 않은 답장을 삭제할까요?”가 더 구체적입니다. 선택한 행, 초안이 속한 대화, 최종 동작이 일치해야 합니다. #1042에 쓴 답장이 작성창과 함께 다른 대화로 넘어가서는 안 됩니다.

포커스와 스크롤을 각각 설계하기

두 패널이 보일 때 키보드 사용자가 목록에서 대화로, 다시 목록으로 어떻게 이동할지 정하세요. 행을 열었을 때 다음 포커스 위치를 예측할 수 있어야 합니다. 포커스를 시각적으로 표시하고 상세 제목과 관련 작업도 쉽게 찾을 수 있게 만듭니다.

좁은 화면에서 대화를 여는 것은 화면 이동에 해당합니다. 포커스도 새 화면의 의미 있는 위치로 이동해야 합니다. 목록으로 돌아왔을 때는 이전의 유용한 위치를 복원해 앞선 모든 행을 다시 거치지 않도록 합니다. 의도한 동작을 프레임 옆에 기록하고 구현된 상호작용에서 테스트하세요.

각 패널이 독립적으로 스크롤될 수도 있습니다. 영역의 경계를 명확하게 하고 선택한 대화의 컨트롤에 접근할 수 있는지 확인하세요. 실제 필요가 없다면 스크롤되는 상세 패널 안에 또 작은 스크롤 메시지 영역을 넣지 않는 편이 좋습니다. 독립된 스크롤 위치는 사용자가 어느 영역을 움직이는지 알 수 있을 때 도움이 됩니다.

Pixso에서 Beacon의 작업 흐름 검토하기

Pixso에 #1042가 선택된 넓은 받은편지함, 좁은 받은편지함, 좁은 대화 상세 화면을 만드세요. Mira Chen이라는 이름과 결제 영수증 관련 제목을 일관되게 유지합니다. 열기와 돌아가기 경로를 연결하고 기대하는 선택 상태와 목록 위치를 프레임 옆에 적어두세요.

검토자에게 Mira의 요청을 찾아 읽고, 다른 대화를 확인한 뒤 돌아오게 해보세요. 그다음 더 긴 제목과 보내지 않은 답장을 추가합니다. 디자이너의 설명 없이도 현재 대상과 다음 동작이 명확한지 관찰하세요.

좋은 분할 뷰는 항목을 반복해서 확인하는 작업이 끊기지 않게 합니다. 선택, 레이아웃 변화, 새 항목 도착, 돌아가기 과정에서도 그 연속성을 유지하세요. 구분선은 같은 작업을 이루는 두 영역 사이의 경계를 보여주는 요소일 뿐입니다.

Pixso에서 목록과 상세가 연결된 작업 화면 만들기