피그마, CRUD 그리고 개발

CRUD는 우리가 만든 서비스가 잘 운영될 수 있는 최소한의 기능

출처 : https://www.figma.com/community/file/809487622678629513/Figma-iOS-UI-Kit-(Free)

여러분은 CRUD 라는 용어를 들어본적이 있는가?

필자는 처음 웹생태계에 개발이 아닌 디자인으로 첫 발을 내딛었다.

그때 백엔드 개발자가 필자의 디자인 화면들을 보며 이렇게 이야기 한게 기억난다.

"CRUD는 아시고 디자인 하는거에요?"

그당시 크루드라는 단어는 필자의 머리속에 존재하지 않아 아무런 답변을 하지 못했다.

단 하나의 질문으로 인해 그후 디자인의 주도권은 개발자들이 가져가게 되었다.

타이틀, 버튼, 카드 디자인등 화면에 필요한 디자인을 한 후에는 항상 개발자들에게 달려가 컨펌을 받아가며 진행했다.

이런 상황이 어떤지에 대해 여러분은 잘 이해?하고 계실거라 생각한다.

CRUD 이단어를 풀어보면 create, read, update, delete의 줄임말이다.

기획 및 디자인이 완성되면 개발자가 가장 먼저 떠올리는 단어일것이다.

출처 : https://www.figma.com/community/file/809487622678629513/Figma-iOS-UI-Kit-(Free)

개발자가 처음 이 화면을 본다면 무엇을 떠올릴까?

탭바가 있고, 검색바도 있고, 포스트 리스트가 있고 내정보가 있고, 팔로우 관계도 있고...

머리속에는 이걸 어떻게 만들어야 할지에 대한 생각들이 떠오를거다.

피그마로 직접 그린 이미지

포스트만 본다면 바로 이런 리스트가 떠오를 것이다.

이 리스트가 바로 CRUD인 거다.

가장먼저 포스트를 만들어야 하고,

포스트 리스트를 보여줘야 하고,

포스트 상세 정보를 보여줘야 하고,

포스트를 업데이트 할 수 있게 해야 하고,

포스트를 삭제할 수 있게 해야 한다.

피그마로 직접 그린 이미지

위의 이미지는 개발자가 만들어야하는 CRUD에 해당하는 코드이다.

예제로 aws lambda코드로 만들었지만, 여러분 회사의 개발 환경(node js, php, django, ruby on rails)에 따라 다양한 언어로 만들어지게 된다.

언어가 달라지면 그에 따라 필요한 개발역량도 달라지지만 변하지 않는 것은 CRUD에 해당하는 데이터 처리기능인 것이다.

출처 : https://www.figma.com/community/file/809487622678629513/Figma-iOS-UI-Kit-(Free)

우리가 서비스 화면을 디자인할때 CRUD에 대한 개념들을 디자인에 잘 반영한다면,

실제 개발이 이루어질때 개발 기간, 커뮤니케이션 비용등 많은것을 절약할 수 있게 된다.

CRUD는 우리가 만든 서비스가 잘 운영될 수 있는 최소한의 기능인 것이다.