반응형 적응

목적

Dot의 반응형 설계는 넓은 화면을 축소하는 작업이 아니다. 사용자의 화면과 작업 맥락에 맞게 구조를 바꾸되 목적, 판단 정보, 상태, 주 행동, 이전·다음 맥락을 보존하는 것이다.

Flexible은 형태가 바뀌어도 본질이 유지되는 기준이며, Link는 화면 전환과 재배치 뒤에도 관계가 끊기지 않는 기준이다.

기준 구간

breakpoint는 기기 이름이 아니라 콘텐츠가 안전하게 유지되는 지점이다. 특정 컴포넌트가 더 일찍 재배치되어야 하면 자체 콘텐츠 기준으로 전환한다.

보존 우선순위

좁은 화면에서도 다음 항목은 유지한다.

1. 화면 제목과 현재 대상
2. 상태와 위험 조건
3. 주 행동
4. 사용자의 현재 선택·입력
5. 결정에 필요한 핵심 값
6. 돌아가기와 다음 단계

먼저 축약할 수 있는 것은 반복 설명, 보조 메타데이터, 드문 행동, 장식이다. 핵심 정보를 display: none으로 없애는 대신 배치와 표현을 바꾼다.

PageScaffold와 PageHeader

• 일반 목록·운영 화면은 PageScaffold width="content"를 사용한다.
• 일정·복잡한 편집은 충분한 비교 폭이 필요할 때 wide를 사용한다.
• viewport 전체를 실제로 사용해야 하는 canvas 성격에서만 full을 사용한다.
• PageScaffold의 기본 horizontal padding은 small 16px, medium 24px, large 32px 흐름을 따른다.
• PageHeader는 좁은 화면에서 title block과 actions를 세로로 배치한다.
• 주 행동이 길거나 반드시 두드러져야 하면 narrow에서 full-width를 허용한다.
• 제목, 상태, action이 겹치면 action을 아래로 내리고 제목을 줄이지 않는다.

목록과 표

• 넓은 화면의 열 비교가 narrow에서 안전하지 않으면 각 행을 record list로 바꾼다.
• 이름과 핵심 상태를 먼저, 주요 값과 메타데이터를 다음, 행동을 마지막에 둔다.
• 숫자 비교가 계속 중요하면 필요한 열만 유지한 horizontal scroll을 제공하고 scroll 가능함을 알린다.
• 행 전체 navigation과 내부 action의 target을 분리한다.
• pagination, filter, selection 상태는 layout 전환 뒤에도 유지한다.
• bulk selection 범위가 화면 밖 항목까지 포함되는지 명시한다.

복잡한 편집과 일정

• outline + editor는 두 영역이 각각 의미 있는 최소 폭을 확보할 때만 병렬로 둔다.
• 좁은 화면에서는 outline 선택 → editor 편집의 순차 흐름으로 전환한다.
• 현재 항목 이름, 미저장 상태, outline으로 돌아가는 행동을 editor에 유지한다.
• 7일 일정은 각 열의 내용과 행동이 안전하게 들어갈 때만 grid를 사용한다.
• 작은 화면에서는 날짜 순 agenda list로 바꾸고 누락·충돌·상태 정보를 그대로 보존한다.
• 중첩 scroll을 피하고 한 축의 주 scroll을 명확히 한다.

navigation과 overlay

• Sidebar는 좁은 화면에서 sheet로 전환할 수 있지만 현재 영역과 trigger를 항상 찾을 수 있게 한다.
• Dialog는 짧고 집중된 결정에 사용한다. 작은 화면에서 내용이 길어지면 Sheet 또는 별도 화면을 검토한다.
• Popover는 viewport 경계 안에서 재배치되며 핵심 작업을 가리지 않아야 한다.
• Tooltip은 touch에서 필수 정보를 전달하는 유일한 수단이 될 수 없다.
• overlay를 닫았을 때 원래 trigger와 scroll 위치로 복귀한다.

입력과 키보드

• 입력 focus 시 화면이 확대되거나 control이 가려지지 않도록 충분한 text size와 scroll 여유를 둔다.
• mobile keyboard가 열린 상태에서도 현재 field, error, 주 행동을 확인할 수 있어야 한다.
• fixed action bar는 safe area와 keyboard를 고려하고 콘텐츠 마지막 부분을 가리지 않는다.
• pointer hover가 없는 환경에서도 모든 필수 action이 보인다.
• drag만 제공하는 정렬에는 버튼 또는 keyboard 대안을 제공한다.

콘텐츠 적응

• 제목은 의미를 바꾸지 않는 범위에서 줄바꿈하고 임의의 약어로 축약하지 않는다.
• 긴 한국어 레이블과 숫자 단위가 실제 데이터에서 깨지지 않는지 확인한다.
• 설명은 narrow에서 우선순위를 낮출 수 있지만 위험·복구 정보는 유지한다.
• 차트는 좁은 폭에서 축과 레이블을 읽을 수 없다면 요약 지표나 목록으로 대체한다.
• 이미지와 캐릭터는 콘텐츠보다 먼저 공간을 차지하지 않으며 지정된 관계와 여백을 유지한다.

AI 경험

• 생성 입력, 진행 상태, 결과 검토가 wide에서 병렬이어도 narrow에서는 명확한 순서로 이어진다.
• streaming 결과가 현재 focus와 scroll을 계속 밀어내지 않게 한다.
• 긴 결과에는 검토 위치와 적용 상태를 보존한다.
• DotMotion은 narrow에서도 텍스트 상태와 행동을 가리지 않는다.
• 결과 비교가 필요한 경우 변경 전·후를 무리하게 2열로 유지하지 않고 항목별 차이 또는 순차 보기로 바꾼다.

Flexible, Link, Glow의 적용

• Flexible: viewport와 입력 방식에 따라 구조를 바꾸되 핵심 정보와 완료 조건은 유지한다.
• Link: layout이 바뀌어도 선택, 입력, scroll, 이전·다음 경로를 보존한다.
• Glow: 작은 화면의 제한된 공간에서 상시 배경으로 쓰지 않는다. 다음 방향을 잃기 쉬운 전환 순간에만 제한한다.

예외와 피해야 할 사용

• desktop 화면 전체를 비율로 축소하지 않는다.
• table의 핵심 열을 임의로 숨기지 않는다.
• mobile에서 모든 action을 icon-only로 바꾸지 않는다.
• 중요한 action을 hover에만 노출하지 않는다.
• fixed header, footer, toast가 겹쳐 콘텐츠와 focus를 가리지 않게 한다.
• overlay 안에서 또 다른 full-screen overlay를 연속으로 열지 않는다.
• 긴 편집을 한 화면의 좌우 swipe만으로 탐색하게 하지 않는다.
• 좁은 화면이라는 이유로 오류 설명과 복구 행동을 제거하지 않는다.
• 캐릭터의 지정 형태·색·관계·여백을 공간에 맞춘다는 이유로 변형하지 않는다.

상태와 접근성

• layout 변화가 DOM 읽기 순서와 focus 순서를 뒤집지 않는다.
• target은 모든 viewport에서 최소 40×40px이다.
• resize와 orientation 변경 뒤에도 focus와 입력값을 보존한다.
• horizontal scroll 영역에는 이름과 keyboard 접근을 제공한다.
• 작은 화면에서 표를 목록으로 바꿀 때 레이블과 값의 관계를 유지한다.
• sheet와 dialog는 focus trap과 trigger 복귀를 지킨다.
• zoom 200%에서도 핵심 콘텐츠와 action이 잘리거나 겹치지 않아야 한다.
• reduced motion에서도 layout 전환과 상태 의미를 이해할 수 있어야 한다.

검토 질문

• 각 breakpoint에서 목적, 상태, 주 행동이 유지되는가?
• 숨긴 정보가 아니라 재배치한 정보인지 확인했는가?
• table을 record list로 바꿔도 핵심 비교 정보와 행동이 남는가?
• outline, editor, 일정의 관계가 narrow에서도 이어지는가?
• mobile keyboard와 fixed action이 현재 field를 가리지 않는가?
• hover 없이 모든 필수 action을 찾을 수 있는가?
• layout 전환 후 선택, 입력, scroll, focus가 보존되는가?
• 40×40px target과 12px 이상 정보 텍스트를 유지하는가?
• 캐릭터와 Glow가 제한된 화면에서 콘텐츠를 밀어내지 않는가?
• 실제 긴 한국어, 큰 숫자, error 문구로 검증했는가?