GraphQL Data Mocking at Scale with LLMs and @generateMock (새 탭에서 열림)
에어비앤비는 LLM과 제품 컨텍스트를 결합한 `@generateMock` 지시어를 도입하여, 수동으로 작성하던 GraphQL 모의 데이터 생성 과정을 자동화하고 혁신했습니다. 이 시스템은 단순한 랜덤 값 생성을 넘어 쿼리 정의, 스키마 주석, 그리고 디자인 목업 이미지까지 컨텍스트로 활용해 실제 서비스 환경과 매우 흡사한 타입 안정적(Type-safe) 데이터를 생성합니다. 이를 통해 개발자는 백엔드 구현을 기다리지 않고도 고품질의 데모와 테스트를 수행할 수 있으며, 쿼리 변경에 따른 모킹 데이터의 관리 부담을 획기적으로 줄였습니다. ### 기존 모킹 방식의 한계와 도전 과제 * **수동 작업의 비효율성:** 수백 줄에 달하는 GraphQL 쿼리에 대응하는 JSON 데이터를 직접 작성하고 수정하는 과정은 매우 번거롭고 실수에 취약합니다. * **병렬 개발의 병목:** 서버 스키마가 확정된 후에도 실제 API가 구현될 때까지 클라이언트 개발자는 UI 테스트를 진행하기 어려워 임시방편(하드코딩, 로컬 프록시 등)에 의존하게 됩니다. * **데이터의 동기화 문제:** 쿼리나 스키마가 진화함에 따라 수동으로 작성된 모의 데이터는 점차 실제 프로덕션 환경과 괴리가 생기며, 이는 테스트 신뢰도 저하로 이어집니다. ### @generateMock 지시어를 통한 선언적 모킹 * **지시어 기반 워크플로우:** 개발자는 `.graphql` 파일의 연산, 프래그먼트, 또는 특정 필드에 `@generateMock` 지시어를 추가하는 것만으로 모의 데이터를 정의할 수 있습니다. * **주요 파라미터 활용:** * `id`: 여러 버전의 모의 데이터를 생성할 때 식별자로 사용하며, 생성된 헬퍼 함수의 이름에 반영됩니다. * `hints`: "파리, 교토로 가는 여행 일정을 포함해달라"와 같이 LLM에게 구체적인 데이터 생성을 지시하는 자연어 가이드를 제공합니다. * `designURL`: 디자인 도구(Figma 등)의 URL을 입력하면 LLM이 실제 디자인 화면의 텍스트와 레이아웃에 부합하는 데이터를 생성합니다. * **로컬 개발 도구 통합:** 에어비앤비의 코드 생성 도구인 'Niobe'와 결합되어, 코드 생성 시 JSON 데이터와 이를 로딩하는 소스 코드(TypeScript, Swift, Kotlin)가 자동으로 빌드 아티팩트에 포함됩니다. ### LLM을 활용한 컨텍스트 중심의 데이터 생성 * **스키마 최적화 주입:** 전체 스키마를 LLM에 전달하는 대신, 해당 쿼리와 연관된 타입 및 인라인 문서 주석만을 추출하여 컨텍스트 윈도우 내에서 효율적으로 처리합니다. * **디자인 시각 정보 반영:** 내부 API를 통해 `designURL`의 스냅샷 이미지를 생성하고 이를 LLM에 전달함으로써, 실제 UI 디자인에 명시된 이름, 주소 등의 콘텐츠와 일치하는 현실적인 데이터를 얻습니다. * **수동 수정 및 보존:** 생성된 JSON 데이터는 개발자가 직접 수정할 수 있으며, 이후 다시 코드를 생성하더라도 Niobe는 사용자가 직접 수정한 내용을 지우지 않고 보존하는 지능적인 병합 기능을 제공합니다. 이러한 접근 방식은 단순히 더 나은 가짜 데이터를 만드는 것을 넘어, 프론트엔드와 백엔드 간의 의존성을 분리하고 개발 생산성을 극대화하는 데 목적이 있습니다. 대규모 GraphQL 환경을 운영하는 조직이라면 스키마 메타데이터와 LLM을 결합하여 테스트 자동화 수준을 한 단계 높이는 이 모델을 참고할 가치가 있습니다.