스와이프 액션

목록에서 한 줄을 지우거나 보관하는 일이 자주 반복될 때, 상세 화면까지 들어가지 않고 밀어서 끝내게 하는 조각.

실제 미리보기

출처

HTML CSS

<div class="dc-swipe">
  <ul class="dc-swipe__list">
    <li class="dc-swipe__item">
      <div class="dc-swipe__track">
        <div class="dc-swipe__pane">
          <span class="dc-swipe__name">김민수 주임</span>
          <span class="dc-swipe__desc">오후 2시 현장 점검 가능합니다</span>
        </div>
        <div class="dc-swipe__acts">
          <button class="dc-swipe__act" type="button">보관<span class="dc-sr"> · 김민수 주임 메시지</span></button>
          <button class="dc-swipe__act dc-swipe__act--danger" type="button">삭제<span class="dc-sr"> · 김민수 주임 메시지</span></button>
        </div>
      </div>
    </li>
    <li class="dc-swipe__item">
      <div class="dc-swipe__track">
        <div class="dc-swipe__pane">
          <span class="dc-swipe__name">자재팀</span>
          <span class="dc-swipe__desc">철근 입고 예정일이 하루 늦어집니다</span>
        </div>
        <div class="dc-swipe__acts">
          <button class="dc-swipe__act" type="button">보관<span class="dc-sr"> · 자재팀 메시지</span></button>
          <button class="dc-swipe__act dc-swipe__act--danger" type="button">삭제<span class="dc-sr"> · 자재팀 메시지</span></button>
        </div>
      </div>
    </li>
  </ul>
  <p class="dc-swipe__hint">왼쪽으로 밀면 보관·삭제가 나옵니다. 항목을 열어 같은 동작을 쓸 수도 있습니다.</p>
</div>

.dc-swipe {
  background: var(--dc-bg);
  font-family: var(--dc-font);
}
.dc-swipe__list {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--dc-surface);
  border-top: 1px solid var(--dc-line);
}
.dc-swipe__item {
  border-bottom: 1px solid var(--dc-line);
}
.dc-swipe__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.dc-swipe__track::-webkit-scrollbar { display: none; }
.dc-swipe__pane {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  gap: var(--dc-1);
  min-height: 44px;
  padding: var(--dc-3) var(--dc-4);
  scroll-snap-align: start;
  background: var(--dc-surface);
}
.dc-swipe__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--dc-text);
}
.dc-swipe__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--dc-text-sub);
}
.dc-swipe__acts {
  display: flex;
  flex: none;
  scroll-snap-align: end;
}
.dc-swipe__act {
  min-width: 72px;
  min-height: 44px;
  border: 0;
  background: var(--dc-sunken);
  color: var(--dc-text);
  font-family: var(--dc-font);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.dc-swipe__act--danger {
  background: var(--dc-danger);
  color: var(--dc-text-on);
}
.dc-swipe__item--open .dc-swipe__pane {
  flex-basis: calc(100% - 144px);
}
.dc-swipe__hint {
  margin: 0;
  padding: var(--dc-3) var(--dc-4);
  font-size: 12px;
  line-height: 1.6;
  color: var(--dc-text-mute);
}

이렇게 씁니다

동작은 최대 두 개. 세 개부터는 손가락으로 고르기 어려워 오히려 느려진다
위험한 동작은 가장 바깥에 두고 --dc-danger 로 색을 달리한다
밀기는 빠른 길일 뿐이다. 같은 동작을 항목 상세나 더보기 메뉴에도 반드시 둔다

주의할 점

밀기 말고는 길이 없으면 키보드·스크린리더 사용자는 그 동작을 쓸 수 없다
삭제는 바로 지우지 말고 '되돌리기'를 몇 초 띄운다
안쪽 버튼도 높이 44px 을 지켜야 밀다가 잘못 누르지 않는다

다음에 볼 것