UX 관점에서 CRUD를 고려하는 방법(feat. 프로덕트 디자이너 JD)

# 프로덕트 디자이너, UXUI 디자이너 요구 역량

프로덕트 디자이너 또는 UXUI 디자이너 직무의 JD(Job Description)을 분석하다가 이런 자격요건을 봤다.

- 데이터 CRUD를 이해하고 사용자 경험으로 원활하게 풀어낼 수 있는 분

- 일럿 기존 개발된 환경 수정 및 업그레이드 개발 관련 CRUD 화면 추가 및 수정

 

개발자분들과 MVP 프로젝트를 하면서 CRUD에 대해 들어본 적이 있어서 낯설지 않았지만CRUD라는 단어가 JD에 있어서 뭔가 반가웠다..!!그래서 정리해보는 UXUI디자이너, 프로덕트 디자이너 관점에서의 CRUD 역량 with Chat GPT

 

# CRUD란?

생성 C(creat), 읽기 R(read), 수정 U(update), 삭제 D(delete)로 데이터의 흐름이라고 이해하면 된다.

예를 드는 게 가장 이해하기 쉬울테니 예를 들며 설명해보겠다!

 

1. Creat (생성) = 사용자가 데이터를 추가하는 방식

• 폼(Form) 디자인 가이드라인
  • 일관된 입력 필드 스타일, 플레이스 홀더, 레이블 위치를 규정
  • 필수 입력값과 선택 입력값을 구분(예: *기호 사용)
  • 실시간 유효성 검사(예: 형식 오류 감지, 글자수 제한 표시)
• 데이터 생성 피드백 제공
  • 입력이 완료되었을 때 '완료' 버튼 활성화되도록 설정
  • 생성 후 성공 메시지 & 추가된 데이터 강조 표시

2. Read (읽기) =데이터를 표시하는 방식

• 리스트 & 테이블 구성
  • 정보(=데이터)를 어떻게 보여줄 것인지? 카드(Card) 형태, 리스트(List), 테이블(Table) 형태 등
  • 정렬, 필터링, 검색 기능 포함
• 많은 데이터를 다룰 때 페이지를 나눠 보여줄 것(Pagination)인지 vs 무한 스크롤(Infinite Scroll) 로 보여줄 것인지
  • 데이터 검색 및 필터링이 중요한 경우->페이지네이션
  • 피드 기반 서비스(sns 등)->무한 스크롤

3. Update (수정) = 데이터를 편집하는 방식

• 직접 편집(Inline Editing) vs 수정 모드 (Edit Mode)
  • 엑셀, 구글 시트처럼 화면에서 바로 편집할 수 있는 기능 또는 블로그 게시글 수정 처럼 별도의 수정 모드 제공
• 수정 피드백 & 상태 유지
  • 수정 후 자동 저장을 하게 할 건지? 저장 버튼이 별도로 필요할지?
  • 변경 내용이 적용되었음을 나타내는 애니메이션&피드백 메시지->토스트UI나 스낵바UI가 많이 사용됨

4. Delet (삭제) = 데이터를 삭제하는 방식

• 삭제 확인(Confirmation) 모달
  • 삭제는 되돌릴 수 없는 작업이기에 '정말 삭제하시겠습니까?'와 같은 확인 단계가 필요
  • 중요 데이터(예: 계정 삭제)는 이중 확인(Two-step Confirmation) 적용
    • 모닥모닥 프로젝트 했을 때 '삭제'라는 문구를 작성하면 삭제할 수 있는 이중 확인을 적용했었다.
    • 구글 드라이브 파일 삭제, 아이폰 사진 삭제 시 휴지통으로 이동후 일정 기간이 지나야 완전히 삭제되는 것이나 삭제한 폴더에 남겨두는 게 되돌릴 수 없는 행위기이기 때문에 이중 장치를 도입한 것이다.
• Undo(되돌리기) 기능 제공
  • 실수로 삭제했을 경우를 위해 일정 시간 내 복구 버튼을 제공
  • 삭제가 아니더라도 유튜브 재생목록에 영상을 추가하고 빼고 하는 과정에서도 '취소', '실행취소' 버튼을 제공하는 이유도 같은 맥락

 

이렇게 데이터의 CRUD가 어떻게 흘러가는지를 먼저 인지하고 UX와 UI를 설계하는 것과

인지를 하지 못하고 설계하는 것은 분명한 차이가 있다라고 생각한다.

그래서 디자인 시스템에서도 이를 인지해서 설계를 하면 데이터 조작이 일관될 것이다.

사용자들은 일관된 UI, UX로 인해 예측이 가능해져서 '편한', '자연스러운' UX 경험을 할 수 있을 것이다.

 

아주 가벼운 예를 들어보겠다.

만약 어떤 화면에서는 필수 값이 있고 필수 표시 *가 있었는데 다른 화면에서는 필수 값이 있고 * 표시가 없다면 어떨까?

 

사용자는 필수 값이 있을 땐 *표시가 있었기 때문에 * 표시가 없을 때는 필수 값이 있을거라고 예상하지 못하지 않을까?

사소한 예지만 이런 사소한 예들이 쌓여서 서비스의 신뢰도를 떨어트릴 것이다.

 

# CRUD를 잘 반영한 디자인 시스템

• Material Design (Google)
• Ant Design (Alibaba)
• Atlassian Design System (Jira, Trello 등)

머터리얼 디자인이나 HIG 디자인 시스템은 기본기 공부할 때부터 계속 자주 봤었는데 이렇게 CRUD, 데이터 흐름 관점에서 다시 보니..!!!! 또 새로운 시각으로 볼 수 있었다.

진짜 IT UX영역은 아직도 미지의 세계인 것 같다..! 그래서 짜릿해...!!!