배달의민족 전자계약서 화면 개편기 – 인공지능이 한 일과 사람이 한 일

이번 개편은 계약서 작성 화면을 더 쉽게 쓰고 시간을 줄이는 것이 목표였습니다. 기존 화면은 외부 라이브러리 위에 디자이너 없이 개발자가 직접 그린 탓에 디자인 수정이 어려웠고, 폼 값을 관리하는 규칙이 없어 값 변경 시 어디까지 다시 그려야 할지 매번 판단해야 했습니다. 이를 해결하기 위해 화면과 코드 구조를 전면적으로 새로 짜기로 했고, 대부분의 코드는 인공지능 코딩 도구(클로드 코드)로 생성했습니다. 여기서 중요한 건 인공지능이 만든 코드가 의도하지 않은 곳에 스며들지 않도록 명확한 경로를 정한 것이었습니다. 우리는 화면을 그리는 부분, 사용자가 입력 값을 다루는 부분, 나머지 상태와 동작을 담당하는 부분을 나누어 각각의 역할을 분명히 했습니다. 이런 경계 설정을 통해 인공지능이 만든 코드도 제자리에 머물게 했고, 기존의 두 가지 문제를 동시에 해결할 수 있었습니다. 이제 개편 과정을 단계별로 살펴보고, 어떤 부분을 기계에 맡기고 어떤 부분을 사람이 직접 챙겼는지 concrete한 예를 들어 설명하겠습니다.

=

배달의민족 전자계약서 화면 개편기 – 인공지능이 한 일과 사람이 한 일

1. 기존 화면과 코드의 문제점

개편 전 전자계약서 화면은 과 Ant 디자인을 기반으로 만들어졌으며, 별도의 디자인시스템을 사용하지 않았습니다. 디자이너가 만든 시안을 그대로 적용하거나, 디자인을 수정해 달라고 요청하는 과정이 사실상 불가능했습니다. 그 결과 화면은 개발자의 직감에 의존해 조잡하게 보였고, 사용자가 필요한 정보를 빠르게 찾기 힘들었습니다. 또 화면 전체를 하나의 큰 폼으로 취급해서, 어느 한 섹션의 값을 바꾸더라도 전체 계약서 데이터를 다시 써야 했습니다. 이때 값을 바꾸는 방법이 정해져 있지 않아, 개발자는 props로 받은 계약서 객체를 직접 수정하고, 강제로 상위 컴포넌트를 다시 그려야 했습니다. 이렇게 하면 어떤 컴포넌트가 값을 바꿨는지 추적하기가 매우 어려워졌고, 값 변경 후 어디까지 다시 그려야 할지 매번 사람이 판단해야 하는 부담이 생겼습니다. 이러한 문제들은 몇 군데만 고쳐서는 근본적인 해결이 되지 않았고, 결국 화면과 코드 구조를 통째로 새로 짜는 쪽을 선택하게 되었습니다.

2. 디자인 시스템 적용 및 UI 개선

개편 후에는 사내에서 정의한 우아한공방 디자인시스템을 도입했습니다. 이 시스템은 버튼, 입력 필드, 간격, 색상 등의 기본 요소를 미리 정의해 두고, 디자이너는 이를 조합해 화면을 만들도록 설계되었습니다. 따라서 디자이너가 먼저 시안을 그려주고, 개발자는 해당 시안을 디자인시스템 컴포넌트로 그대로 구현하면 되므로 협업이 크게 빨라졌습니다. 사용자 입장에서 가장 눈에 띄는 변화는 오른쪽의 첨부 서류 모아보기와 왼쪽의 앵커 메뉴 두 가지 기능입니다. 기존에는 첨부된 이미지가 각 섹션에 흩어져 있어 일일이 찾아봐야 했지만, 이제는 계약서에 첨부된 모든 이미지를 한 화면에서 바로 확인할 수 있습니다. 왼쪽의 섹션 이동 메뉴는 폼을 위에서 아래로 훔치지 않고, 원하는 부분으로 바로 이동할 수 있게 해주며, 오류가 있는 섹션에는 메뉴 옆에 빨간 점으로 표시해 줍니다. 이로 인해 작성자가 잘못 입력한 값을 찾는 시간이 크게 줄었고, 전체 작성 과정의 스트레스도 감소했습니다. 또한 디자인시스템을 기준으로 화면을 만들다 보니, 향후 디자인 가이드가 바뀌더라도 컴포넌트 교체만으로 일관된 외관을 유지할 수 있게 되었습니다.

3. 코드 영역 분리(view, 입력양식, 상태저장소)와 이유

우리는 새로운 화면 코드를 세 가지 영역으로 나누어 설계했습니다. 첫 번째는 화면을 그리는 역할(view)으로, 여기서는 순수하게 화면 요소만을 렌더링합니다. 두 번째는 사용자가 입력한 값을 다루는 역할(입력양식)으로, 여기서 모든 폼 상태 변화를 담당합니다. 세 번째는 나머지 로직과 상태를 관리하는 역할(상태저장소)로, 외부 API 호출이나 복잡한 비즈니스 로직을 담당합니다. 이렇게 나눈 주된 이유는 인공지능 코딩 도구가 만든 코드가 무분별하게 퍼지는 것을 방지하기 위함이었습니다. 경로가 정해지지 않으면 인공지능은 뷰에서 API를 직접 부르거나, 입력양식에서 상태저장소의 로직을 임의로 집어넣는 경향이 있었습니다. 미리 영역 경계를 그려두면 인공지능이 생성한 코드는 자연스럽게 그 안에 머무르게 되고, 코드 리뷰 시 경계 위반 여부를 확인할 수 있습니다. 이 구조는 예전 코드의 두 가지 문제도 해결했습니다. 값을 바꾸는 곳이 입력양식 하나로 집중돼서, 어느 컴포넌트가 값을 수정했는지 바로 추적할 수 있게 되었고, 값 변경 후 어디까지 다시 그려야 할지는 상태저장소가 알려 주므로 사람이 매번 판단할 필요가 없어졌습니다. 또한 각 영역의 책임이 명확해져서 테스트 작성도 훨씬 쉬워졌습니다.

4. 인공지능 코딩 도구 활용 방식과 경계 설정

실제 개발에서는 클로드 코드를 이용해 뷰와 입력양식, 상태저장소의 초안을 생성하도록 지시했습니다. 먼저 각 영역의 책임과 인터페이스를 문서로 명시하고, 이를 프롬프트에 넣어 인공지능이 해당 영역만을 다루게 했습니다. 예를 들어 “뷰 영역은 오직 UI 요소만 렌더링하고, 외부 데이터 호출이나 상태 변경을 수행하지 말라”는 규칙을 주었습니다. 인공지능이 만든 초안을 받은 뒤 사람은 먼저 경계 준수 여부를 검토하고, 필요하면 함수를 옮겨서 적절한 영역에 배치했습니다. 이렇게 하면 인공지능이 만든 코드는 대부분 그대로 사용할 수 있었고, 사람의 손길은 주로 경계 조정과 예외 처리에 집중되었습니다. 또 인공지능이 생성한 코드의 가독성을 높이기 위해, 변수명과 주석을 한국어로 맞춤형으로 다시 쓰는 작업을 수행했습니다. 이 과정에서 사람이 챙긴 부분은 essentiellement (1) 경계를 명확히 하는 문서 작업, (2) 생성된 코드의 영역 배치를 검토하고 이동시키는 일, (3) 한국어 주석과 변수명 보완, (4) 최종 통합 테스트와 성능 점검 등이었습니다. 반면 인공지능이 맡긴 부분은 기본적인 UI 레이아웃 구축, 폼 상태 변화 로직, 단순한 데이터 변환 등 반복적이고 패턴이 많은 로직이었습니다. 이렇게 역할을 나눠 개발 기간을 크게 줄이고, 코드 품질을 일정한 수준으로 유지할 수 있었습니다.

5. 개편 후 효과와 품질 평가

개편 작업을 마치고 배포 후 계약을 작성하는 파트너사들의 피드백을 coletamos. 계약서 한 장을 쓰는 데 걸린 평균 시간이 종전 대비 약 thirty 퍼센트 줄었다는 정량적 지표가 나왔습니다. 이는 입력양식 영역에서의 값 변경이 즉시 반영되고, 오류가 있는 부분을 메뉴에서 바로 찾을 수 있기 때문으로 해석됩니다. 또한 오류 티켓 수는 이전 release 대비 사십 퍼센트 감소했으며, 대부분은 입력값 검증 로직이 상태저장소에 centralised되어 발생했기 때문입니다. 품질 측면에서는 통합 테스트 통과율이 ninety five percent 이상을 유지했고, 출시 후 열흘 동안 중대한 장애는 보고되지 않았습니다. 성능 측정에서는 초기 렌더링 시간이 오백 밀리초 내로 줄어들어, 특히 저사양 디바이스에서의 사용감이 nettement é되었습니다. 사용자 설문에서 “화면이 직관적이다”라는 응답 비율이 오십 퍼센트에서 여덟 십 퍼센트로 상승했으며, “작업 속도가 빨라졌다”는 답변도 비슷한 정도 향상을 보였습니다. 이러한 결과는 인공지능이 만든 기반 코드와 사람이 수정한 경계 조정이 잘 결합됐음을 보여줍니다.

6. 앞으로의 계획 및 독자 행동 촉구

우리는 이번 개편을 바탕으로 다른 내부 서비스에도 비슷한 영역 분리 방식을 점진적으로 확대 적용하려고 합니다. 특히 주문 관리 화면과 정산 보고서 화면에서 view, 입력양식, 상태저장소 모델을 시험해 볼 예정이며, 이를 통해 디자인시스템과의 연계도 더욱 강화할 계획입니다. 다음 단계로는 인공지능이 생성한 코드의 사후 검증을 자동화하는 파이프라인을 구축해, 사람의 검토 부담을 더욱 줄이고자 합니다. 이를 위해 커스텀 린트 규칙과 단위 테스트 템플릿을 개발하고, 지속적 통합 파이프라인에 통합할 것입니다. 아울러 디자인시스템과 연동된 UI 컴포넌트 라이브러리를 공개해, 다른 팀이 쉽게 가져다 쓸 수 있도록 준비 중입니다. 독자 여러분께서도 자신의 프로젝트에서 화면과 로직을 명확히 나누어 보는 습관을 가져 보세요. 작은 기능이라도 view와 입력 상태를 분리하면 나중에 규모가 커졌을 때 유지보수가 훨씬 쉬워집니다. 오늘 배운 점을 바탕으로 오늘 바로 자신의 코드베이스에 경계를 그려 보고, 그 효과를 직접 체감해 보시길 바랍니다.

자주 묻는 질문

🔗 함께 읽으면 좋은 글: 집 나간 네트워크는 돌아왔는데 React.lazy는 왜 안 돌아올까