저희는 Kimi K2.7 Code와 Claude Fable 5가 각각 12개의 랜딩 페이지를 제작하도록 하는 실험을 진행하여 나란히 비교했습니다. 전반적으로 Kimi K2.7 Code는 Fable 5보다 약 94% 저렴했고(16배 저렴) 비슷한 수준의 출력 품질을 보여주었으며, 특히 디자인 MCP를 통해 Kimi에 적절한 컨텍스트를 제공한 후에 더욱 두드러졌습니다.
이에 대한 결과를 OVSC 웹사이트에 게시했으며, Claude Opus 4.8, Claude Fable 5, Kimi K2.7 Code가 생성한 모든 변형을 함께 제공합니다. 평균적으로 Kimi는 Fable보다 약 16배 저렴했고 Opus보다 약 8배 저렴했습니다.
다음은 https://ovsc.vercel.app/ 의 스크린샷입니다.
OVSC 웹사이트에서는 모든 랜딩 페이지를 살펴볼 수 있을 뿐만 아니라 총 비용, 토큰 사용량, 생성 시간에 대한 세부 정보도 확인할 수 있습니다.
이 실험이 어떻게 진행되었는지 이해하기 위해, 먼저 기준선을 설정하고 프롬프트만으로 모델이 무엇을 생성할 수 있는지 살펴보는 것부터 시작했습니다.
프롬프트
B2B SaaS, 루프탑 스피크이지, SQL 쿼리용 개발자 도구 등 몇 가지 카테고리에 걸쳐 소규모의 랜딩 페이지 프롬프트 세트로 시작했습니다. 사용한 프롬프트 샘플은 다음과 같습니다:
- SQL 쿼리를 차트로 변환하는 개발자 도구용 랜딩 페이지를 만드세요.
- 루프탑 스피크이지 칵테일 바의 랜딩 페이지를 만드세요 - 아르데코, 골드 리프와 에메랄드, 1920년대 글래머.
- B2B SaaS 스타트업용 랜딩 페이지를 만드세요 - 팀 프로젝트 관리 및 협업 도구(작업, 타임라인, 팀 워크플로우, 통합).
동일한 프롬프트를 Kimi K2.7 Code와 Claude Fable 5 모두에게 제공했습니다.
"SQL 쿼리를 차트로 변환하는 개발자 도구용 랜딩 페이지를 만드세요." 라는 요청을 받았을 때 이 모델들이 만든 페이지는 다음과 같습니다.
아쉽게도 두 모델 모두 AI가 생성한 것이 확연히 드러나는 랜딩 페이지를 만들었습니다.
디자인 영감 MCP 서버
잘 디자인된 랜딩 페이지의 스크린샷과 개별 UI 요소, 기타 시각적 참고 자료를 제공하는 커스텀 MCP 서버를 구축했습니다. Kimi K2.7 Code는 멀티모달이므로 텍스트와 함께 해당 이미지를 프롬프트에 직접 포함할 수 있었습니다.
이로 인해 결과가 크게 달라졌습니다. 짧은 프롬프트만으로 레이아웃을 생성하는 대신, Kimi는 구체적인 예시를 바탕으로 작업하고 시각적 언어를 습득하여 새로운 페이지에 해당 패턴을 적용할 수 있었습니다. 실제로 결과물은 더 강력한 계층 구조, 더 나은 타이포그래피, 더 의도적인 구성을 보여주었습니다.
루프탑 스피크이지 랜딩 페이지의 전후 비교입니다:
디자인 영감을 제공하자 Kimi는 더 빠르게 로딩되고, 이미지 깨짐 플레이스홀더를 피하며, 훨씬 더 읽기 쉬운 타이포그래피를 사용하는 페이지를 생성했습니다.
디자인이 개선된 후, 다음으로 탐구하고 싶었던 것은 비용이었습니다.
랜딩 페이지당 비용
Kimi K2.7 Code와 같은 오픈소스 모델을 사용할 때의 장점 중 하나는 비용입니다. 예를 들어, 이 B2B SaaS용 랜딩 페이지는 Kimi로 단 4센트의 비용이 들었습니다. 동일한 프롬프트는 Claude Fable로 $1.09가 들어 거의 27배 더 비쌌습니다.
평균적으로 Kimi K2.7 Code로 생성한 랜딩 페이지는 Claude Fable 5와 같은 독점 모델로 생성한 것보다 약 16배 저렴했습니다.
생성형 코딩 에이전트를 사용하면 랜딩 페이지의 한 가지 버전만 생성하는 경우는 드물며, 다양한 디자인 방향, 카피, 페이지 요소를 탐색하기 위해 여러 변형을 생성하는 것이 일반적입니다. 그런 다음 가능성이 있는 것을 선정하여 반복적인 실험과 조정을 통해 편집하고 개선합니다. 이러한 과정을 거치면서 가격 차이는 빠르게 누적되며, SaaS 랜딩 페이지처럼 단순한 경우에도 마찬가지입니다.
Kimi K2.7 Code로 100개의 페이지를 생성한다면, Claude Fable 5와 같은 독점 모델을 사용하는 것과 비교하여 약 $94를 절약할 수 있습니다.
비용이 낮다는 것은 분명한 장점이었지만, 결과의 품질을 비교할 방법도 필요했습니다.
결과 비교
랜딩 페이지를 생성한 후, Kimi와 Fable을 체계적으로 비교할 방법을 찾고 싶었습니다. 단순히 코드 자체만 보는 것이 아니라 포지셔닝, 시각적 방향, 콘텐츠 구조, 공들인 정도, 반응성, 기술적 실행 등 각 페이지의 전반적인 품질을 살펴보았습니다. 이를 위해 GPT-5.5에 루브릭을 제공하여 각 페이지의 스크린샷과 소스 코드를 검토하고 점수를 매긴 후 최종 점수(0~100)를 할당하도록 했습니다.
각 랜딩 페이지의 점수는 다음과 같습니다:
Claude Fable이 두 예시 모두에서 더 높은 점수를 받았지만, 그 차이는 비교적 작았습니다. Kimi는 디자인, 구조, 전반적인 페이지 품질에서 경쟁력을 유지하면서 실행 비용은 훨씬 낮았습니다. 이러한 종류의 워크플로우에서는 이 정도의 트레이드오프는 합리적이라고 생각했습니다.
마무리 생각
Kimi K2.7 Code와 같은 오픈소스 모델은 이미 유용한 랜딩 페이지를 생성할 수 있지만, 실험 결과 프롬프트만으로는 일부에 불과하다는 것을 보여주었습니다. 더 나은 컨텍스트 없이는 Kimi와 Claude Fable 모두 정제되었지만 일반적인 결과를 생성하는 경향이 있었습니다.
가장 큰 개선은 커스텀 MCP 서버를 통해 Kimi에 시각적 영감을 제공한 데서 비롯되었습니다. 스크린샷과 디자인 참고 자료를 활용할 수 있게 되자 페이지는 더 읽기 쉽고, 더 구조화되었으며, 더 시각적으로 의도적으로 변했습니다.
낮은 비용과 결합하면 오픈소스 모델은 이러한 종류의 워크플로우에 실용적인 선택이 됩니다. 모델에 더 강력한 입력을 제공하고 저렴하게 반복할 수 있다면 놀라운 결과를 얻을 수 있습니다.
Kimi K2.7 Code와 같은 오픈소스 모델은 together.ai 에서 사용해 볼 수 있습니다.
