AI 랜딩페이지 자동생성 서비스 백엔드 설계 및 문서화
AI 랜딩페이지 자동생성 서비스 백엔드 설계 및 문서화 과정 회고. 기획 및 기술 문서의 중요성을 깨닫고 해결한 경험을 공유합니다.
AI 랜딩페이지 자동생성 서비스 백엔드 설계 및 문서화
AI 기반 랜딩페이지 자동생성 서비스 개발을 시작하면서, 이걸 어떻게 기획하고 기술적으로 풀어낼지 막막했어. 특히 처음부터 문서화까지 제대로 챙기지 않으면 나중에 분명히 후회할 거라는 걸 직감했지. 그래서 이 글은 내가 겪었던 과정과 그 결과물을 공유하려고 해.
시도와 함정
처음에는 그냥 기능 구현에만 집중했어. AI 모델 연동하고, 결과물을 API로 뱉어내는 것까진 어떻게든 되겠지 싶었지. 그런데 막상 개발을 진행하다 보니, 이 기능을 어떻게 관리하고, 사용자에게 어떻게 보여줄지에 대한 고민이 부족했다는 걸 깨달았어.
기능 자체는 어느 정도 틀이 잡혔는데, 이걸 설명할 문서가 없으니 혼란스럽더라. 관리자 페이지에도 이 새로운 기능에 대한 정보가 전혀 없으니, 누가 이걸 어떻게 써야 할지도 모르는 상황이었지.
원인
결국 가장 큰 문제는 새로운 기능 개발 시 기획 및 기술 문서 작성을 간과했다는 점이었어. 단순히 기능만 뚝딱 만들어내는 게 아니라, 그 기능의 목적, 동작 방식, 사용법 등을 명확히 정의하는 과정이 빠졌던 거지. 또한, 관련 UI 컴포넌트와 페이지 추가, 그리고 관리자 페이지에서의 연동까지 고려하지 못했던 게 문제였어.
해결
이 문제를 해결하기 위해, AI 기반 랜딩페이지 자동생성 서비스에 대한 기획 및 기술 문서를 처음부터 다시 작성했어. 서비스의 전반적인 흐름, AI 모델과의 인터페이스, API 명세 등을 구체적으로 정의했지.
# AI 기반 랜딩페이지 자동생성 서비스 기술 문서
1. 개요
본 문서는 AI를 활용하여 사용자의 입력에 따라 랜딩페이지를 자동으로 생성하는 서비스의 백엔드 설계 및 구현 내용을 기술합니다.
2. 시스템 아키텍처
- API Gateway: 모든 외부 요청을 받아 적절한 서비스로 라우팅합니다.
- Landing Page Generation Service: 사용자의 요청을 받아 AI 모델을 호출하고, 생성된 랜딩페이지 데이터를 반환합니다.
- AI Model Service: 텍스트 입력에 따라 HTML, CSS, JavaScript 코드를 생성하는 AI 모델을 호스팅합니다.
- Database: 생성된 랜딩페이지 데이터, 사용자 정보 등을 저장합니다.
3. API 명세
3.1. 랜딩페이지 생성 요청
- Endpoint:
/api/v1/landingpages/generate
- Method:
POST
- Request Body:
{
"prompt": "AI 기반 서비스 소개 랜딩페이지, 간결하고 전문적인 디자인",
"userId": "user123"
}
- Response Body:
{
"landingPageId": "lp_abc123",
"htmlContent": "<html>...</html>",
"cssContent": "body { ... }",
"jsContent": "console.log('Hello');",
"createdAt": "2026-07-16T10:00:00Z"
}
3.2. 생성된 랜딩페이지 조회
- Endpoint:
/api/v1/landingpages/{landingPageId}
- Method:
GET
- Response Body: (3.1. Response Body와 동일)
4. AI 모델 연동
- 사용되는 AI 모델은 OpenAI GPT-4 또는 유사 성능의 모델을 가정합니다.
- 프롬프트 엔지니어링을 통해 원하는 스타일과 내용의 랜딩페이지를 생성하도록 유도합니다.
5. 관리자 페이지 연동
- 생성된 랜딩페이지 목록 조회 및 상세 보기 기능을 제공합니다.
각 랜딩페이지의 생성 이력 및 관련 데이터를 확인할 수 있습니다.
이와 함께, 해당 기능과 연동될 UI 컴포넌트와 페이지를 추가하고, 관리자 페이지에 이 기능의 문서 탭을 추가하여 접근성을 높였어.
결과
- AI 기반 랜딩페이지 자동생성 서비스의 기능 구현 및 문서화가 완료되었습니다.
- 관련 UI 컴포넌트 및 페이지가 추가되어 사용자 경험이 개선되었습니다.
- 관리자 페이지에 해당 기능의 문서 탭이 추가되어 정보 접근성이 향상되었습니다.
- 현재 해당 기능은 owner 전용으로 제공되고 있습니다.
정리 — 같은 함정 안 빠지려면
- [ ] 새로운 기능 개발 시, 기획 및 기술 문서 작성을 초기 단계부터 필수적으로 포함할 것
- [ ] 기능 구현과 함께 관련 UI 컴포넌트 및 페이지 디자인/개발을 병행할 것
- [ ] 관리자 페이지 등 내부 시스템과의 연동 방안을 미리 고려하고 설계할 것
- [ ] 문서화 시, API 명세, 아키텍처, 사용법 등을 구체적으로 명시할 것
태그