차분한 UI를 만드는 간단한 가이드

AI 요약

간단한 UI를 더 차분하게 만드는 방법은 새 기능을 더하기보다 불필요한 상태 변화와 확인 메시지를 줄이는 데서 시작합니다. 글은 항목을 추가하고 삭제하는 대화상자 예시를 비교하며, 사용자가 작업 결과를 화면에서 바로 확인하도록 UI를 구성하라고 제안합니다.

저장·삭제 결과를 바로 보여주기

저장 버튼을 누른 뒤 배경 목록을 다시 불러오는 동안 버튼의 로딩 상태를 유지합니다. 저장 요청과 목록 갱신이 서로 다른 로딩 상태로 이어지면 화면 변화가 잦아집니다. 저장 완료 토스트도 띄우지 않습니다. 새 항목이 목록에 나타나면 작업이 끝났다는 사실을 알 수 있기 때문입니다. 삭제할 때도 같은 원칙을 적용합니다. 별도의 확인 토스트 없이 목록에서 항목이 사라지는 결과를 보여줍니다.

오류 메시지와 대화상자 위치

오류 알림에도 토스트를 쓰지 말라고 권합니다. 토스트는 사용자가 작업한 위치에서 멀리 떨어져 나타날 수 있고, 특히 화면이 큰 환경에서는 놓치기 쉽습니다. 일정 시간이 지나면 사라지므로 메시지를 못 본 사용자가 이유를 알기 어렵습니다.

오류가 나타날 때 높이가 바뀌는 대화상자는 화면 위쪽에 고정합니다. 대화상자를 화면 중앙에 두면 오류 메시지가 나타나거나 사라질 때 대화상자 높이가 달라지고, 제출 버튼 위치도 움직입니다. 위쪽에 고정하면 버튼이 움직이는 불편을 줄일 수 있습니다.

키보드와 입력 흐름

항목 이름을 입력한 뒤 Enter 키로 제출할 수 있게 합니다. React에서는 버튼의 onClick에 제출 함수를 연결하는 대신 form의 onSubmit에 연결하면 Enter 제출을 처리할 수 있습니다. 대화상자를 열었을 때 첫 번째 입력란에 자동으로 포커스를 맞추는 방법도 제안합니다. 대화상자를 연 뒤 다시 입력란을 클릭해야 하는 일을 없애기 때문입니다.

글은 애니메이션, 낙관적 업데이트, 인라인 편집 같은 추가 개선을 배제하지 않습니다. 다만 간단하고 견고한 UI를 만들 때는 세부 요소를 모두 다듬을 시간이 없을 수 있으므로, 추가 비용 없이 적용할 수 있는 기본 동작부터 챙기자는 취지입니다.

Reddit 반응

• @u/_listless — ‘차분한 UI’라면서 상호작용마다 모달을 띄우네요. 부정적인 말만 하려는 건 아니고, Imperavi의 차분하고 명확한 UI 자료를 추천합니다.
  • @u/scragz — 나는 차분하다.
  • @u/Mackseraner — 모달을 피할 수 있는 경우가 많다는 데는 동의하지만, 그건 요점을 조금 놓친 반응입니다. 이 글은 모달이 꼭 필요하지 않은 아주 간단한 예시를 썼더라도, 모달을 사용하는 UI를 다룹니다.
  • @u/_listless — 모달은 확성기입니다. 가장 차분한 확성기도 여전히 확성기입니다.
  • @u/tomhermans — 예를 들어 항목을 인라인으로 추가하게 했다면 주장을 더 설득력 있게 만들 수 있었겠네요. 생각해볼 만합니다.
  • @u/Mackseraner — 그럴 수도 있겠네요. 글 마지막 결론에서 인라인 편집을 넣지 않은 이유를 이야기합니다.
  • @u/tomhermans — 아, 알겠습니다. 죄송합니다. 결론에서 시간과 우선순위를 이야기한 부분 때문에 놓쳤던 것 같아요. 이 글도 마음에 드실 것 같습니다.
• @u/postman_666 — 토스트를 줄이는 게 항상 낫다는 데 동의하지는 않습니다. 예를 들어 항목이 5개라면 괜찮겠지만, 100개가 있는 목록에서 확인 없이 삭제하면 사용자가 불편합니다.
• @u/chroma_shift — 예시가 UI 상호작용을 절대적인 규칙처럼 다루는 것 같습니다. 보통 그렇듯 정답에는 상황에 따른 고려가 더 필요합니다.

원문: Max Schmitt / 번역·요약: Trawling