CRUD에 대해 알아보자

안녕하세요! 프로덕트 디자이너 메리입니다.

이번엔 개발자와 협업할 때 자주 마주치는 기본 용어, CRUD에 대해 함께 알아보려고 합니다. 예전에 제가 꽤 오래다닌 스타트업이 있었는데, 그때의 대표님께서 저를 앉혀놓고 CRUD 개념을 강의해주셨던 기억이 생각나네요. ㅇㅅㅇ

그때는 이게 머선 내용인가,, 싶었지만은~ 살다보니 배워야 되는 개념이더라구요?
자, 드가봅시다.🏃🏻‍♀️

CRUD그게먼데, 어떡하라고, 어떻하라고, 어뜨카라고.🗣️

CRUD는 데이터 처리의 가장 기본적인 작업 4가지를 의미하는 용어로,
각 글자는 Create (생성) / Read (읽기) / Update (수정) / Delete (삭제) 를 뜻합니다. 이 네 가지 기능의 앞글자를 따서 흔히들 CRUD라고 부릅니다.

CRUD와 HTTP 메소드의 연관성

CRUD 개념은 웹 개발에서 사용하는 HTTP 메소드와 밀접한 연관이 있습니다.디자이너인 저희도 API 문서를 볼 때 이 개념을 알면 정말 유용하답니다. 🙆🏻‍♀️

1)Create → POST: 데이터를 생성할 때 사용합니다.
2)Read → GET: 데이터를 읽거나 조회할 때 사용합니다.
3)Update → PUT 또는 PATCH: 기존 데이터를 수정할 때 사용합니다.
4)Delete → DELETE: 데이터를 삭제할 때 사용합니다.

CRUD가 쓰이는 사례 👩🏻‍🏫

예를 들어 인스타그램을 떠올려보면 아주 쉽게 이해할 수 있습니다.
이 CRUD를 파악하면, 화면설계서에 빠지는 기능 없이 아아주 COOL하게 UI를 짤 수 있답니다?

1) Create: 사진을 새로 올리는 기능 (게시물 생성)
2) Read: 다른 사람들이 올린 게시물을 보는 기능 (게시물 읽기)
3) Update: 내 프로필 정보를 수정하거나 이미 올린 게시물 내용을 편집하는 기능 (정보 수정)
4) Delete: 내가 올린 게시물을 삭제하거나 댓글을 지우는 기능 (게시물 삭제)

이렇게 보니 CRUD가 아주 간단한 개념이죠?
(CRUD! 타이어보다 쉽다!)

CRUD를 잘 알면 화면설계를 잘한다!

예. 말그대로 제곧내입니다.
화면 설계서를 작성할 때 CRUD 개념을 미리 생각하면 정말 좋습니다.
왜냐하면 디자인하다 보면 무심코 '수정하기'나 '삭제하기' 같은 중요한 기능을 빠뜨리기 쉬운데, CRUD를 기억하면 기능 누락을 방지할 수 있거든요!

예를 들어, 사용자가 작성한 리뷰를 관리하는 화면을 만든다고 할 때,
1) 리뷰 작성하기 (Create)
2) 리뷰 보기 (Read)
3) 리뷰 수정하기 (Update)
4) 리뷰 삭제하기 (Delete)
이 네 가지를 모두 고려해서 설계하면 더 완성도 높은 화면을 만들 수 있겠죠?

CRUD를 잘 설계하지 않는다면..💦

CRUD를 제대로 설계하지 않으면 다음과 같은 문제가 발생할 수 있습니다:

1) 사용자들이 중요한 데이터를 수정하거나 삭제할 수 없음 (게시물 쓰기는 있는데 삭제는 어딨는데.. 어케하는건데.. 하는 상황 발생)
2) 서비스 유지보수 비용이 증가 (나중에 기능 추가 시 큰 비용이 발생할 수 있어요!).
3) 데이터 관리가 어렵고 복잡해짐

디자이너가 CRUD에 대해 아몰랑 해버릴 경우

만약 CRUD 개념을 잘 모르고 디자인을 하면 이런 일이 벌어질 수 있습니다.

1) 게시물, 사진 업로드는 있는데 삭제 아이콘이 없다..
2) 화면이 100개가 넘어갈 경우, 내가 수정을 넣었나? 안 넣었나? 넣었나? 초록치매가 올 수 있다.
3) 데이터가 어떻게 이동하는지에 대한 구조를 설계할 수 없다.

요렇게, 사용자가 입력한 정보를 수정하거나 삭제할 수 있는 버튼을 누락하는 케이스가 많이 생기고, 화면설계서를 보는 다른 팀원들이 이잡듯 찾아줘야 하는 빡침이 발생합니다. 그러니 피그마에 CRUD 크게 써놓고 체크해보도록 해용

디자이너가 CRUD를 알면 좋은 점

디자이너가 CRUD 개념을 알게 되면, 개발자와 더 효과적으로 소통할 수 있어요. 우리가 만든 디자인이 실제 서비스에서 어떻게 동작할지 더 명확하게 이해할 수 있고, 빠뜨린 기능 없이 완벽한 디자인을 할 수 있습니다.

또한, 개발팀과 기능에 대해 논의할 때 더욱 구체적으로 요구사항을 전달할 수 있어 협업 과정에서 생기는 오해를 줄일 수 있답니다!

마무리 👊🏻

오늘 알아본 CRUD 개념은 정말 간단하지만, 실제 업무에서 활용도 높은 기본적인 개념입니다. 처음엔 뭔소린가 싶지만, 몇백개의 UI를 만들다보면.. 차암.. 기능을 까먹고 안넣는 내자신이 싫어질 때가 있습니다.. 그럴 때를 대비하여 이 개념을 잘 알면 좋겠지요?

일단 연속으로 2개 썼는데 요즘 퇴근하고 velog 쓰는게 낙입니다. 헤헷
다음시간에 또 만나요 . ^^ (금요일에 만나용 ~)