배달의민족 전자계약서 화면 개편기: AI에게 맡긴 것과 사람이 챙긴 것

들어가며 전자계약서는 파트너(사장님)가 배달의민족을 처음 시작할 때 작성하는 전자문서입니다. 영업 담당자가 파트너와 함께 작성하고, 계약 내용을 바꿀 때도 같은 문서를 씁니다. 이 문서를 쓰는 작성 화면은 사업자 정보, 가게 정보, 광고 정보 같은 섹션이 모여 계약서 한 장을 이루는 큰 폼입니다. 2026년 4월부터 6월까지 이 작성 화면을 개편했습니다. 작성자가 계약서를 더 편하게 쓸 수 있게 하는 것이 목표였습니다. 그렇게 해서 계약서 한 장을 작성하는 데 드는 시간도 줄이려 했습니다. 그런데 기존 화면과 코드 위에서는 이 일이 쉽지 않았습니다. 화면은 Bootstrap과 Ant Design 위에서 디자이너 없이 개발자가 그린 것이어서, 사내 디자인시스템을 쓰는 디자이너와 함께 만들 수 없었습니다. 코드에는 폼 값을 관리하는 체계가 없어서, 값을 어디서 바꾸고 어디까지 다시 그려야 하는지 알기 어려웠습니다. 그래서 화면과 코드 구조도 함께 바꿨습니다. 코드는 처음부터 새로 썼고, 그 대부분을 AI 코딩 도구(클로드 코드)로 만들었습니다. 이 글은 그 과정에서 무엇을 AI에게 맡기고 무엇을 직접 챙겼는지 정리한 기록입니다. 개편하는 동안 부딪힌 질문은 세 가지였습니다. AI가 만든 코드가 아무 데나 생기는 것을 어떻게 막을까 AI에게 로직을 맡길 때 "그게 아니고"를 반복하지 않으려면 어떻게 해야 할까 그래서 실제로 얼마나 빨라지고, 배포 뒤 품질은 어땠을까 같은 고민을 하는 분께 이 글이 참고가 되면 좋겠습니다. 무엇이 바뀌었나 먼저 개편 전후 화면입니다. 가장 큰 변화는 디자인입니다. 기존 화면은 외부 라이브러리로 만든 것이어서 디자이너의 작업을 그대로 옮기기도, 디자인을 고쳐 달라고 부탁하기도 어려웠습니다. 개편 후에는 사내 디자인시스템인 우아한공방을 적용했습니다. 디자이너는 이 디자인시스템을 기준으로 작업하기 때문에, 이제 처음부터 디자이너와 함께 화면을 만들 수 있습니다. 작성자가 편하게 쓸 수 있도록 편의 기능도 두 가지 더했습니다. 오른쪽의 첨부 서류 모아보기: 기존에는 서류가 섹션마다 흩어져 있어서 하나씩 찾아가 확인해야 했습니다. 이제는 계약서에 첨부된 이미지를 한 곳에서 볼 수 있습니다. 왼쪽의 앵커 메뉴: 기존에는 잘못 입력한 값을 찾으려면 긴 폼을 위에서부터 훑어야 했습니다. 이제는 메뉴에서 섹션 사이를 바로 이동하고, 잘못 입력한 값이 있는 섹션은 메뉴에 에러 메시지로 표시됩니다. 코드...