점진적 공개
전문 기능을 숨기지 않되 결정에 필요한 순서로 공개합니다.
목적
점진적 공개는 복잡한 기능을 제거하는 방법이 아니라 현재 결정에 필요한 수준부터 보여주고, 더 깊은 제어와 근거를 예측 가능한 경로로 제공하는 방법이다. 초보 사용자는 길을 잃지 않고, 숙련 사용자는 기능이 숨겨졌다는 불안을 느끼지 않아야 한다.
공개 수준
정보와 조작을 세 수준으로 분류한다.
| 수준 | 포함 기준 | 대표 위치 |
|---|---|---|
| 즉시 공개 | 현재 상태와 다음 행동을 결정하는 데 항상 필요 | PageHeader, 주요 콘텐츠, field |
| 맥락 공개 | 특정 선택·오류·상태에서만 필요 | 선택 panel, inline expansion, popover |
| 요청 시 공개 | 드문 고급 설정, 이력, 기술 세부 | 상세 section, 별도 화면, dialog |
다음 항목은 기본적으로 즉시 공개한다.
- 주 행동과 완료 조건
- 작업 대상과 현재 상태
- 비용, 권한, 되돌릴 수 없음, 데이터 손실 가능성
- 필수 입력과 주요 validation 기준
- 사용자가 복구해야 하는 오류
- AI 결과가 검토 전인지 확정됐는지 나타내는 상태
판단 기준
항목을 숨기기 전에 다음 질문에 답한다.
- 이것을 보지 못하면 사용자가 잘못된 결정을 내릴 수 있는가?
- 대부분의 사용자가 대부분의 작업에서 필요한가?
- 특정 선택이나 상태가 생겨야만 의미가 있는가?
- 숨겨도 존재와 여는 방법을 예측할 수 있는가?
- 다시 닫거나 이전 수준으로 돌아갔을 때 입력과 선택이 보존되는가?
1번이 예이면 숨기지 않는다. 3번과 4번이 모두 예일 때 맥락 공개가 적합하다.
적용 방식
요약에서 세부로
먼저 상태, 영향, 다음 행동을 요약하고 세부 원인과 이력을 연결한다.
예: 학습 알림 발송 결과는 실패 12건 · 재시도 가능 9건을 먼저 보여주고, 실패 원인별 대상과 기술 식별자는 세부 화면에서 제공한다.
구조에서 항목으로
복잡한 편집은 전체 구조와 현재 선택을 분리한다. 넓은 화면에서는 outline과 editor를 병렬로, 좁은 화면에서는 구조 선택 후 항목 편집 순서로 보여준다. 사용자가 현재 위치와 미완성 항목 수를 잃지 않게 한다.
정상에서 예외로
정상 상태에서는 핵심 결과만 보여주고, 오류가 생기면 원인·영향·복구 행동을 같은 frame 안에 추가한다. 오류를 별도의 로그 화면에만 두지 않는다.
기본에서 고급으로
안전한 기본값을 제공하고 드문 조정은 고급 설정처럼 명시적인 이름으로 공개한다. 고급 설정을 열기 전에도 현재 적용값과 영향 범위를 알 수 있어야 한다.
선택에 따른 필드
상위 선택이 하위 입력의 의미를 결정할 때만 조건부 필드를 사용한다. 조건이 바뀌어 숨겨지는 값은 삭제되는지 보존되는지 명확히 알려준다.
단계와 화면을 나누는 기준
다음 조건에서는 한 화면의 접기 영역보다 별도 단계나 화면이 낫다.
- 각 단계의 완료 조건이 다르다.
- 이전 단계 결과가 다음 단계의 입력을 결정한다.
- 검토·승인처럼 담당자나 권한이 바뀐다.
- 실수 비용이 높아 중간 저장과 확인이 필요하다.
- 한 화면에서 동시에 보이면 주 행동이 경쟁한다.
반대로 필드 수가 많다는 이유만으로 무조건 단계로 나누지 않는다. 사용자가 전체 내용을 비교하거나 앞뒤 값을 함께 수정해야 하면 한 화면의 명확한 섹션이 더 적합하다.
발견 가능성
숨겨진 기능은 존재를 알아볼 수 있어야 한다.
- trigger는
더보기보다발송 조건 보기,변경 이력 보기처럼 내용을 말한다. - 현재 적용 중인 고급 설정이 있으면 닫힌 상태에서도 요약 또는 count를 표시한다.
- hover만으로 필수 행동이나 설명을 공개하지 않는다.
- icon-only trigger는 익숙한 의미가 아니면 텍스트 레이블을 함께 제공한다.
- 동일한 종류의 세부 정보는 화면마다 같은 위치와 상호작용을 쓴다.
상태 보존
공개 수준을 전환해도 사용자의 작업을 잃지 않는다.
- panel을 닫았다 다시 열어도 입력과 scroll 맥락을 보존한다.
- 목록으로 돌아가면 검색, 필터, 정렬, 페이지, 선택 항목을 복구한다.
- 조건부 필드가 숨겨질 때 값이 폐기된다면 전환 전에 알린다.
- 단계 이동 전에 validation이 필요한 범위만 검증한다.
- 새로고침이나 직접 링크가 가능한 작업은 현재 단계와 대상을 URL 또는 제품 상태로 복원한다.
AI 기능의 점진적 공개
- 생성 전에는 입력 범위, 사용할 기준, 예상 결과 종류를 먼저 보여준다.
- 처리 중에는 현재 작업과 취소 가능 여부를 보여준다.
- 결과에서는 핵심 제안과 검토 필요 상태를 먼저 보여준다.
- 근거, 입력 원문, 변경 비교, 세부 생성 정보는 검토 맥락에 따라 공개한다.
- 모델이나 내부 처리 세부보다 사용자가 결과를 판단하는 데 필요한 제한과 근거를 우선한다.
- 고급 설정이 결과 품질이나 비용을 크게 바꾸면 기본 화면에도 현재 적용값을 요약한다.
Flexible, Link, Glow의 적용
- Flexible: 사용자 숙련도와 작업 맥락에 따라 공개 깊이를 조정하되 완료 조건과 안전 정보는 유지한다.
- Link: 요약, 세부, 편집, 결과 사이에서 현재 선택과 입력을 보존해 맥락을 끊지 않는다.
- Glow: 숨겨진 기능을 장식적으로 강조하지 않고 다음 단계가 불분명한 순간의 안내에만 사용한다.
예외와 피해야 할 사용
- 되돌릴 수 없는 결과, 요금, 대상 범위, 공개 범위를 접힌 영역에 숨기지 않는다.
- 오류와 필수 validation을 tooltip이나 hover 안에만 두지 않는다.
- 화면을 짧게 보이게 하려고 모든 섹션을 accordion으로 만들지 않는다.
- 자주 쓰는 기능을 메뉴 깊숙이 넣고 “고급”이라고 부르지 않는다.
- 사용자가 열어둔 상세 영역을 데이터 갱신 때 임의로 닫지 않는다.
- 상위 선택을 바꿨다는 이유로 하위 입력을 경고 없이 삭제하지 않는다.
- 모달을 연속으로 열어 탐색 깊이를 만들지 않는다.
- 설명을 숨긴 결과 같은 질문이 반복된다면 공개 수준이 잘못된 것이다.
상태와 접근성
- disclosure trigger는 expanded 상태를 programmatically 전달한다.
- trigger와 공개 영역의 관계를 접근 가능한 이름과 속성으로 연결한다.
- 열고 닫을 때 focus를 잃지 않는다. 별도 dialog나 sheet가 열릴 때만 focus를 내부로 이동하고 닫으면 trigger로 돌려보낸다.
- 키보드로 trigger에 도달하고 실행할 수 있어야 한다.
- 동적으로 추가되는 필드는 논리적인 DOM 위치에 렌더하고 필요한 경우 변경을 안내한다.
- 숨겨진 콘텐츠는 보조 기술의 탐색 순서에서도 제외한다.
- 오류가 있는 접힌 section은 닫힌 상태에서도 오류 존재와 개수를 알려야 한다.
- reduced motion에서는 열림·닫힘의 의미를 유지하고 애니메이션만 제거한다.
검토 질문
- 기본 화면에 현재 결정을 위한 정보가 모두 있는가?
- 숨긴 정보가 위험, 비용, 데이터 손실 가능성을 포함하지 않는가?
- 사용자는 숨겨진 기능의 존재와 내용을 trigger만 보고 예측할 수 있는가?
- 고급 설정이 적용 중일 때 닫힌 상태에서도 알 수 있는가?
- panel·단계 전환 뒤에도 입력, 선택, scroll 맥락이 보존되는가?
- 한 화면을 짧게 보이게 하는 것이 아니라 판단 순서에 따라 공개했는가?
- 초보 사용자와 숙련 사용자 모두 필요한 깊이에 도달할 수 있는가?
- 오류가 숨겨진 section 안에 갇히지 않는가?
- keyboard와 screen reader에서 expanded 상태와 관계가 전달되는가?
- 화면 분리와 inline 공개 중 사용자의 비교·수정 방식에 맞는 것을 선택했는가?
- 공개 수준이 바뀌어도 한 학습 고리와 다음 방향이 이어지는가?