DLWorker UI/UXPattern 04
2026.10.12.3 · proposed
04

PATTERN · SETTINGS ROW

행 기반 설정 목록

설정 목록은 중첩 카드가 아니라 제목·설명·상태·단일 trailing action이 정렬된 행으로 구성합니다.

proposedContract v12026.10.12.3

01 · PURPOSE

무엇을 해결하는가

설정 목록은 중첩 카드가 아니라 제목·설명·상태·단일 trailing action이 정렬된 행으로 구성합니다.

02 · USE WHEN

사용 조건

서로 다른 설정 영역을 훑고 하나의 상세 화면으로 이동해야 할 때 사용합니다.

  • 설명 영역의 최소 높이를 통일
  • trailing action은 톱니바퀴 아이콘으로 통일
  • 상세 modal은 별도 scroll container 사용

03 · STATUS

표준 상태와 버전

표준
proposed
도입 버전
2026.10.12.3
배포
source-only

04 · LIVE EXAMPLE

실행 예제

런타임 프로필실행 경로와 어댑터 상태를 확인합니다.
11 profiles
커넥터서비스와 인증 방식, 기본 배정을 관리합니다.
확인 필요

Illustrative — 실제 Worker runtime 데이터가 아닙니다.

05 · RESPONSIVE

Desktop · Tablet · Mobile

Desktop

정보 밀도와 보조 설명을 유지합니다.

Tablet

열을 축소하고 조작 순서를 보존합니다.

Mobile

320px에서 page overflow 없이 단일 열로 전환합니다.

06 · STATES

상태 변형

defaultconfigureddegradeddisabledloadingempty

07 · STRESS

콘텐츠 스트레스

  • 3줄 한국어 설명
  • 상태 badge 2개
  • 긴 runtime identifier

08 · ACCESSIBILITY

키보드와 보조기술

  • 아이콘 action에 대상이 포함된 이름 제공
  • 행 전체를 중복 button으로 만들지 않음
  • 상세 닫기 후 원래 action으로 focus 복귀

09 · DO / DON'T

선택 기준

Do
  • 동일 column과 baseline 유지
  • 설정 상세는 한 항목에 집중
Don't
  • 행마다 설정/보기 텍스트 버튼 혼용
  • 설명을 임의 높이 카드 중앙에 배치

10 · CODE

구현 예제

<div class="settings-row"><div><strong>런타임 프로필</strong><small>실행 경로와 어댑터를 확인합니다.</small></div><span class="badge success">11 profiles</span><button aria-label="런타임 프로필 설정">⚙</button></div>

11 · VALIDATION

검증 체크리스트

  1. row alignment
  2. long description
  3. icon label
  4. detail focus return

12 · ADOPTION

Worker 채택 상태

채택
not-started
소유
Worker 개발세션
실행 증거
없음