고객이 서비스를 접하고 대부분 가장 처음 도달하게 되는 페이지를 '랜딩 페이지' 또는 '인트로 페이지' 라고 부릅니다. 지속적으로 발전하는 서비스를 다양한 타겟군에게 알리기 위해 랜딩 페이지를 가꾸고 업데이트하는 일은 중요한 과업입니다.

우리 서비스는 출시한지 4년이 넘어가는 서비스로 새로운 기능이 출시되거나 시장의 변화에 따라 마케팅 전략이 달라지면서 랜딩 페이지를 갈아 엎고 새로 만들기를 반복해왔습니다. 그리고 어김없이 랜딩 페이지 개편 요청이 들어왔습니다. 마케팅 팀에서 준비하는 박람회 전시 일정에 맞추어 랜딩 페이지를 전면 개편하고 싶다는 것이었습니다. 사실 지금의 랜딩 페이지는 1년 전에 개발했던 것으로 일반적인 랜딩 페이지들의 업데이트 주기를 생각하보면 그렇게 오래되진 않았습니다. 그럼에도 불구하고 랜딩 페이지 개편을 준비했던 이유는 당시 마케팅/운영팀과 개발팀 간의 소통 문제가 있었고, 결과적으로 운영 조직의 요구사항보다는 개발 조직의 의견이 많이 들어갔기 때문에 비즈니스 목적을 달성하기에 어려움이 많았기 때문입니다.

랜딩 페이지를 위한 단 하나의 노코드 툴

랜딩 페이지 업데이트 작업은 큰 일입니다. 마케터는 새로운 콘텐츠를 기획해야 하고, 영업, 운영, 기획, 개발 전 분야에서 전사적인 소통과 노력이 필요한 작업입니다. 가장 큰 작업은 소통입니다. 서로 다른 직업군의 사람들이 한가지의 목표를 가지고 소통해야 하는데 각자의 입장 차이로 해석이 달라지고, 결과적으로 마케터의 의도가 옅어지는 결과를 초래합니다.

우리는 여기서 문제 의식을 느꼈습니다. 서비스의 성장속도가 빨라질수록 랜딩 페이지는 쉽게 레거시화되고, 마케터가 이를 업데이트하기 위해 개발팀에 요청하고 소통하여 새로운 랜딩 페이지를 만들어야 하는 과정에서 비효율적인 상황을 겪고 있었습니다.

우리는 이를 해결하기 위해 랜딩 페이지를 위한 "단 하나의 노코드 툴" 을 개발했습니다.

랜딩 페이지를 위한 이 노코드 툴은 저희 내부적으로는 'Marketing CMS' 라고 부릅니다. 마케팅을 위한 모든 콘텐츠를 관리하는 인터널 툴로 자리매김하길 원하기에 통합적인 표현이 필요했습니다.

마케팅 CMS는 다양한 기능 소개 페이지나 제품 소개 페이지, 심지어 메뉴와 메인 페이지의 고객사 로고까지 세부적으로 편집할 수 있습니다. 게다가 이 CMS는 기본적으로 *WYSIWYG 편집 방식을 추구하기 때문에 실제 고객에게 보여질 페이지 디자인을 그대로 보면서 사이트를 편집할 수 있습니다. 이 방식은 보는 그대로 편집하는 방식이기 때문에 개발에 대한 이해도가 없는 사용자도 비교적 쉽게 사이트를 수정할 수 있다는 장점을 가집니다.

*WYSIWYG: WYSIWYG은 "What You See Is What You Get"의 약자로, 사용자가 최종 결과물(인쇄물, 웹 페이지 등)의 모습과 똑같이 보이게 하면서 콘텐츠를 편집할 수 있는 시스템을 의미합니다. 워드프로세서, 웹사이트 빌더, 그래픽 프로그램 등에서 흔히 사용되며, 코딩 지식이 없어도 시각적으로 편리하게 작업을 할 수 있게 해줍니다.

이렇게 마케터가 사용하는 노코드 툴을 개발하면서 마케터와 개발자 간의 소통 방식도 바뀌었습니다. 기존에는 컨텐츠 자체에 대한 수정을 개발자에게 요구했다면 이제 마케터는 원하는 컨텐츠를 만들기 위해 어떠한 '블록'이 필요한지 개발자에게 전달하기만 하면 됩니다. 개발자는 이 매우 명확한 요구사항을 바탕으로 노코드 툴에 '블록' 하나를 추가합니다. 이제 마케터는 추가된 블록을 활용해 페이지를 원하는 대로 꾸밀 수 있습니다.

결과적으로 전략은 성공적이었습니다. 마케터가 직접 콘텐츠를 작성함과 동시에 페이지를 직접 제적할 수 있기 때문에 커뮤니케이션으로 인한 병목을 줄일 수 있었고, 2주라는 짧은 기간 안에 새로운 버전의 랜딩 페이지를 만들어낼 수 있었습니다. 잠깐, 그런데 2주라고요? 컨텐츠를 만들고, 디자인하고, 개발하는 데에 2주라는 시간은 분명 부족했을 겁니다. 그렇지만 노코드 툴을 만드는 기간도 무시할 수 없습니다. 우리는 어떻게 이 기간 안에 CMS를 개발하고, 성공적인 결과를 얻을 수 있었을까요?

2주 만에 만드는 노코드 툴

2주라는 촉박한 기간 안에 과업을 실행하기 위해 두가지 전략을 사용했습니다.

첫번째, AI를 적극 활용하여 개발하고, 개발 환경과 기획도 AI에 맞춰서 진행한다. 두번째, 목적에만 충실한 아주 간소화된 기획으로 진행하고, AI로 발전시킨다.

1. AI 적극 활용으로 시간 단축

저희는 이미 업무에서 Cursor와 Claude Code 등의 AI 코딩 툴을 적극 활용하고 있습니다. 특히 Cursor + Claude sonnet 4.5(thinking)의 성능은 상상을 초월합니다. 시키는 일에 따라서 분명 어려워하는 작업들이 있지만 기획 내용을 명확하게 전달하고, 구현 방식에 대한 메뉴얼이 확실하다면 Cursor를 활용한 개발은 사람의 생산성을 압도합니다. 결과적으로 저희는 이 노코드 툴 개발에 직접 코드를 작성하는 일이 거의 없도록 했습니다. 대신 AI가 쉽게 이해할 수 있도록 기획을 간소화하고 목적을 최대한 빠르게 달성할 수 있도록 기획을 경량화하고, 개발 환경을 AI Friendly 하게 구성하는 일이 주요했습니다.

AI 코딩 에이전트는 이미 학습된 개발 경험을 토대로 하기 때문에 AI가 선호하는 개발 환경을 제공하는 것이 보다 유리합니다. AI가 선호하는 기술 스택은 Tailwindcss와 shadcn/ui와 같이 컴포넌트의 구성 요소를 인지하기 쉬운 컴포넌트 패턴이 유리합니다.

기획과 디자인 과정도 AI를 활용했습니다. 기본적인 방향성과 구성은 제시하되, 구체적인 디테일은 AI가 구상하도록 하는 것입니다. 이때 Cursor를 통해 레퍼런스에 대한 링크와 이미지 등을 전달하면 원하는 결과물에 도달하기 더 쉬워집니다.

새로운 랜딩 페이지는 수많은 기능과 제품들을 효과적으로 메뉴에 노출하기 위해 삼성전자, 현대카드와 같은 사이트에서 사용하는 '메가 메뉴' 디자인을 채택했는데요. 이때 위와 같이 레퍼런스 사이트에서 메가 메뉴를 캡쳐하여 커서에게 전달해주었더니 아래와 같은 메가 메뉴를 쉽게 구성할 수 있었습니다.

이 디자인을 SDUI(Server Driven UI)로 달성하기 위해 데이터 구조에 대한 설계도 함께 부탁했습니다. 이에 따라 이 디자인은 데이터 구조를 고려하여 설계되었고, AI와의 몇 번의 대화를 통해서 디자인과 데이터 구조, 세부적인 컴포넌트 구조를 즉시 달성할 수 있었습니다.

2. 목적에만 충실한 아주 간소화된 기획

AI를 적극 활용하기 위해서도 기획을 경량화할 필요가 있다고 말씀 드렸습니다. 하지만 AI를 활용을 떠나서 2주라는 기간을 달성하려면 목표 달성을 위한 개발 계획을 잘 세우는 것이 중요합니다. 이를 위해 요구사항과 이를 달성하기 위한 목표를 설정했습니다.

• 비개발자가 다루기 쉬워야 한다.
• 개발 기간 외에도 비개발자가 페이지를 구성하는 시간을 벌어주어야 한다.
• 디자이너가 아니어도 디자인 일관성을 유지할 수 있도록 해야 한다.

비개발자가 다루기 위해서는 보여지는 그대로 편집하는 WYSIWYG 방식이 필요했는데요. 이 방식은 설령 AI를 쓰더라도 구현 난이도가 있습니다. 때문에 구현 스펙이 단순해야 했는데요. 고도로 잘 만들어진 노코드 툴은 기본적으로 중첩을 지원하지만 우리는 과감히 중첩을 포기했습니다. 이유는 중첩을 지원하는 고도화된 노코드 툴은 디테일한 수정 능력을 요구하지만 오히려 우리는 마케터가 생각하는 컨텐츠를 화면에 잘 '쌓는 것'이 중요했기 때문에 화면 구성은 단순하게 스택형으로 구성했습니다. 섹션이라는 단위와 블록이라는 단위가 존재하고, 섹션 안에는 블록을 추가하여 적층할 수 있습니다. 이 섹션은 전체를 기준으로 적층할 수 있지만 섹션 안에 섹션을 중첩하거나 블록 안에 블록을 중첩하는 것은 불가능합니다.

이렇게 간소화된 구현 스펙은 당연히 개발 속도에도 긍정적인 영향을 끼치고, AI에게 전달하기에도 용이하며, 실제로 이 편집기를 사용하는 마케터의 입장에서도 이미 준비된 몇가지 디자인 블록들을 조합하여 컨텐츠를 만들면 되기 때문에 사용자 입장에서도 디자인에 대한 고민을 크게 덜어낼 수 있었습니다.

기획, 디자인부터 개발까지 올인원으로.

2주라는 짧은 개발 기간 안에 비즈니스 조직과의 충실한 협업과 빠른 개발, 그럼에도 불구하고 높은 수준의 작업물을 선보일 수 있었던 이유는 단연 AI의 도움이 컸습니다. 저희는 전사적으로 AI를 모든 분야에서 활용합니다. 이러한 결과가 가능했던 이유는 아이러니하게도 이 일을 함께 하는 사람이 적었기 때문인데요. 이 업무를 위해 투입된 인력은 마케터 한 명, 영업 담당자 한 명, 개발자 한 명이 전부였습니다. 하지만 오히려 분순물 없이 각 분야의 전문가가 즉각적으로 소통할 수 있었고, 개발자가 기획부터 디자인, 개발까지 올인원으로 진행한 덕분에 사람 간의 병목을 크게 줄일 수 있었습니다.

AI 시대 이전에는 한 사람이 모든 일을 할 수는 없었습니다. 물리적인 한계가 존재했기 때문이죠. 하지만 각 분야에 대한 전문지식을 탑재한 AI가 일을 대신해주기 시작하면서 물리적인 한계는 극복 가능한 것 이 되었습니다. AI를 잘 다루고, 전 분야에 대한 인사이트가 충분한 인재가 하나만 잘 하는 여러 명보다 나은 시대가 다가오고 있습니다. 정말 무서운 시대입니다. 제가 디자인을 할 줄 몰랐고, 비즈니스 팀의 애로 사항에 관심이 없었다면 이러한 변화는 이뤄낼 수 없었을 겁니다.