[피플]누구나 원하는 웹사이트를 쉽게 완성하는 경험, 디자인 모드 스쿼드가 만듭니다

누구나 웹사이트를 만들 수 있도록 돕는 디자인 모드는 아임웹이 가장 오래 운영해 온 핵심 제품 중 하나입니다. 이렇게 역사가 길고 규모가 큰 제품에 새로운 기능을 더하는 것은 쉽지 않은 일입니다. 레거시가 여러 제품에 걸쳐 복잡하게 얽혀 있어 하나를 바꾸더라도 고객의 사용 환경과 시스템 전체를 살펴야 하기 때문이죠. 그런 디자인 모드가 10년 만에 기능을 대폭 확장한 대규모 업데이트를 선보였습니다. 디자인 모드 스쿼드는 어떻게 오래된 제품의 안정성을 유지하면서도 고객의 자유도를 높이는 새로운 방향을 구현해 냈을까요?

• 이지영 | Product Owner
  디자인 모드의 목표와 방향성을 설정하고, 디자인 및 개발 과정에 필요한 제품 정책을 결정합니다.
• 최호영 | Product Designer
  디자인 모드 전반의 사용자 경험을 설계하고, 사용자에게 어떤 위젯이 필요한지 정의합니다. 
• 박흥준 | Front-end Engineer
  사용자가 만든 위젯이 편집 화면과 실제 웹사이트에서 동일하게 동작하도록 구현합니다.
• 서상우 | Back-end Engineer
  디자인 모드의 기존 기능과 신규 기능이 충돌하지 않는 개발 구조를 설계합니다.

Chapter 1. 10년간 쌓아온 제품에 새로운 자유도를 더한 디자인 모드 스쿼드

드래그 앤 드롭으로 미리 만들어진 위젯을 조합해 화면을 만드는 디자인 모드는 누구나 웹사이트를 제작할 수 있는 환경을 만들어 왔습니다. 하지만 시간이 지나면서 고객의 요구는 두 갈래로 나뉘었습니다. 처음 시작하는 고객은 지금보다 더 쉬운 방법을 원했고, 디자인 모드에 익숙해진 고객과 전문 사용자는 화면을 더 다양하게 꾸밀 수 있는 자유도를 원했죠. 디자인 모드 스쿼드는 고객의 요구에 맞춰 필요한 기능을 하나씩 보완했지만, 위젯을 조합하는 기존 체계 아래에서는 본질적인 문제 해결이 어려웠습니다. 디자인 모드 스쿼드는 '오랜 시간 쌓인 레거시와 기능을 안정적으로 지키면서, 더 쉽고 더 자유롭게 웹사이트를 만들 수 있는 편집 환경'을 만들기 위해 머리를 맞댔습니다.

지영    디자인 모드는 거의 10년 동안 대대적인 개편 없이 기능을 계속 덧붙여 왔어요. 업데이트가 필요하다는 점에는 모두가 공감했지만, 언제 어떤 방식으로 바꿀지는 정하지 못하고 있었죠. 그러던 중에 고객을 대상으로 설문조사를 진행했어요. 감사하게도 정말 많은 분이 불편한 점을 하나하나 적어주셨는데요. 위젯마다 쌓인 문제들을 개별적으로 고치는 방식에는 한계가 있겠더라고요. 이 문제를 한 번에 해결할 방법이 없을까 고민하다가 코드와 AI 에이전트를 이용해 원하는 위젯을 직접 생성하는 ‘커스텀 위젯 스튜디오’를 만들게 됐어요. 이렇게 만든 위젯의 텍스트 색상이나 효과 같은 세부적인 요소들은 사이드 패널로 제공되는 위젯 설정창에서 간편하게 조정할 수 있어요. 코드를 아는 사람도, 코드를 모르는 사람도 모두에게 자유도를 넓혀주는 게 이번 개편의 핵심이었죠. 

기존 디자인 모드에도 기본 위젯으로 구현하기 힘든 디자인을 코드로 만들 수 있는 ‘코드 위젯’ 기능이 있었어요. 하지만 사용자가 코드로 작성한 내용을 미리보기 할 수 없었고, 코드 위젯으로 구현된 디자인은 안정성을 담보하기가 어려웠어요. 아임웹에서 진행하는 보안 패치 등의 업데이트에 영향을 받을 수 있었거든요. 그렇다면 코드 위젯 기능을 발전시키는 것보다 사용자 경험도 개선하고 안정성도 지킬 수 있는 새로운 체계를 만드는 게 낫겠다고 판단했어요.

상우    커스텀 위젯 스튜디오가 배포된 지금도 여전히 아임웹의 많은 웹사이트가 디자인 모드의 기존 위젯을 기반으로 운영되고 있어요. 새로운 기능을 만든다고 해서 레거시 시스템이 영향을 받거나, 이미 웹사이트를 운영하고 있는 고객의 경험을 해쳐선 안 돼요. 처음부터 기존 위젯과 커스텀 위젯이 서로 영향을 주지 않도록 잘 분리해 설계하는 걸 중요하게 생각하면서 기반을 만들었습니다.

또 하나 고민한 건 커스텀 위젯 스튜디오를 어떤 문법으로 구현할지였어요. 실제 프론트엔드 개발에서는 React나 Vue 같은 라이브러리를 많이 사용해요. React나 Vue를 사용하면 내부적으로 데이터를 다루거나 사용자의 동작 범위를 제어하기는 더 수월하거든요. 하지만 고객이나 웹사이트를 만드는 아임웹 전문가분들은 HTML이나 CSS 같은 웹 문법에 더 익숙했습니다. 기술적으로 조금 더 어려워지더라도 고객이 더 쉽게 웹사이트를 만들 수 있어야 한다고 판단했고, 결국 HTML과 CSS를 기반으로 커스텀 위젯을 설계했어요.

사용자가 코드로 구현할 수 있는 디자인의 범위에 사실상 한계가 없습니다. 그만큼 사용자가 자유롭게 만든 위젯이 안정적으로 작동하는 편집 환경을 설계하는 일 역시 쉽지 않았죠. 디자인 모드 스쿼드는 고객의 자유도를 넓히면서도 레거시가 공존하는 제품의 안정성을 지키기 위해 설계와 테스트를 반복하며, 커스텀 위젯이 문제 없이 실행될 수 있는 환경을 만들어갔습니다.

흥준      커스텀 위젯은 프론트엔드 입장에서 만들기가 정말 어려웠어요. 사용자가 작성한 코드가 실행되는 원리라, 다른 위젯이나 페이지 전체에 영향을 줄 수도 있어 이를 확실하게 제어할 방법을 찾아야 했죠. 그래서 도입한 개념이 커스텀 위젯 코드의 영향 범위를 각 위젯 안으로 제한하는 샌드박스예요. 예를 들어 웹 개발에서는 document.querySelector라는 함수를 자주 사용해요. 특정 요소를 찾아 색이나 폰트 크기를 바꿀 때 쓰는 함수로, 원래는 같은 페이지 안의 다른 요소에도 접근할 수 있는데요. 커스텀 위젯 안에서 쓰이면 다른 영역은 건드리지 않고 해당 위젯 영역 안에서만 동작하게 만들었어요.

호영     사용자가 입력한 코드를 실제 화면으로 보여주는 커스텀 위젯은 일반적인 화면 디자인과 달리 결과물이 무한히 달라질 수 있어요. 이 문제에 대응하기 위해 일반적인 디자인부터 ‘이런 것도 코드로 구현할 수 있나?’ 싶은 디자인까지 최대한 다양한 디자인의 위젯을 직접 만들어 보며 테스트해 봤습니다. 그중에는 용이 불을 뿜는 디자인이나 화롯가 앞에 앉아 있는 고양이 디자인도 있었죠. 여러 코드 제공 사이트를 돌아다니면서 코드로 만든 다양한 사례를 수집했고, 테스트 서버에 하나씩 넣어보면서 검증했어요. 테스트를 반복하면서 Slack에서 ‘이건 된다’, ‘이건 수정이 필요하다’는 내용을 실시간으로 공유했고요. 그렇게 스쿼드원들과 논의하며 커스텀 위젯의 안정성과 완성도를 높였습니다.

AI Agent로 위젯을 만들고, 코드 미리보기와 사이드 패널로 다듬는 커스텀 위젯 스튜디오

Chapter 2. AI 에이전트로 ‘쉽게’를 '더 쉽게'로 바꾸다

이번 개편으로 디자인 모드는 더 높은 자유도를 갖추게 됐지만, 제품이 오래 지켜온 가치는 여전히 쉬운 사용성에 있습니다. 디자인 모드 스쿼드는 자유도를 충분히 넓히면서도 ‘누구나 쉽게’라는 기준을 지킬 방법을 찾았고, 그 고민은 AI 에이전트를 제품에 결합하는 방향으로 구체화됐습니다. 말이나 이미지로 설명하는 것만으로 원하는 화면을 만들 수 있게 되면서 디자인 모드의 ‘쉬움’이 한 단계 더 확장된 셈이죠. 

지영    사용자가 입력한 자연어와 첨부한 이미지를 90% 이상 재현하는 코드를 구현하면서, 생성 비용은 최대한 효율적으로 사용하는 AI 에이전트를 만들고자 했어요. 이를 위해 사용자의 입력을 해석하는 단계에는 성능이 가벼운 모델을, 해석한 내용을 실제 코드로 구현하는 단계에는 성능이 높은 모델을 연결했죠. AI 에이전트가 수행할 수 없는 요청에는 불필요하게 비용을 사용해 생성을 시도하지 않고요. 예를 들어 아직 지원하지 않는 DB 연동 위젯을 요청하면 코드를 억지로 생성하는 대신, 현재는 해당 기능을 사용할 수 없다고 안내해요. 

디자인 모드에 적용되는 AI 에이전트를 만드는 과정에서 특히 까다로웠던 문제는 고객이 자신의 웹사이트에 실제로 적용할 수 있을 만큼 신뢰할 수 있는 결과물을 내게 하는 일이었어요. 고객은 색상 하나만 바꿔 달라고 요청했는데, AI가 기존 코드의 일부를 누락해 버린다면 결과물을 믿고 쓰기 어렵잖아요. 이 경우에는 수정 요청과 관계없이 기존값을 그대로 유지하도록 설계해야 하죠. 이러한 예외 상황을 놓치지 않기 위해 개발자분들께서 만드는 사람과 쓰는 사람의 관점을 오가면서 제품을 만들어 주셨어요.

호영    AI 에이전트를 사용하는 고객은 새로운 문법이나 사용법을 별도로 익히지 않아도 위젯을 만들 수 있어요. 커스텀 위젯 스튜디오의 문법이나 스펙이 업데이트되면 AI 에이전트에도 바로 반영해 제품과 AI 사이에 기능 차이가 생기지 않게 하고 있죠. 스쿼드 내부에서도 AI 에이전트를 적극적으로 사용하며 성능을 계속 검증하는 중이에요. 최근 새롭게 추가한 50여 종의 위젯도 실제 사용자처럼 커스텀 위젯 스튜디오의 AI 에이전트를 활용해 만들었어요. 에이전트를 만들어 두고 끝내는 게 아니라, 실제 위젯을 만드는 과정에 계속 사용하면서 부족한 부분을 발견하고 성능을 고도화하고 있습니다.

상우    앞으로는 어떻게 하면 AI와 제품을 더 자연스럽게 결합할 수 있을지 더 고민하려고 합니다. 지금도 시장에 다양한 AI 서비스가 등장하고 있지만, 사용자 입장에서 봤을 때 AI가 원래 그 제품의 일부였던 것처럼 자연스럽게 녹아든 사례는 아직 많지 않다고 생각합니다. 저희도 AI를 안정적으로 운영하기 위한 서버와 백엔드 구조에서 아직 여러 가능성을 실험하고 있는 단계예요. 어떤 모델을 어떻게 연결할지, 어떤 역할을 AI에 맡길지, 비용과 품질을 어떻게 균형 있게 관리할지처럼 풀어야 할 문제가 많죠. 디자인 모드라는 제품 안에서 AI 에이전트가 자연스럽게 작동하는 백엔드 구조를 설계해 나가고 싶어요.

Chapter 3. 7개월의 개발 속도를 만든 디자인 모드 스쿼드의 AI 활용법

커스텀 위젯 스튜디오는 10년 만에 이뤄진 대규모 업데이트였습니다. 프로젝트의 범위도 넓었고, 새롭게 설계하고 검증해야 할 일도 많았죠. 그런데도 기획부터 배포까지 걸린 시간은 단 7개월에 불과했습니다. PO 지영님은 “AI가 없었다면 이 프로젝트를 수행하는 데 2년은 걸렸을 것”이라고 회고하며, 프로젝트의 속도를 획기적으로 끌어올린 배경으로 팀 전반의 높은 AI 활용 능력을 꼽았습니다. 디자인 모드 스쿼드는 어떻게 이 정도 규모의 큰 프로젝트를 빠르게 완성할 수 있었을까요?

호영    저는 AI를 활용해 커스텀 위젯 스튜디오의 전체 플로우를 직접 경험할 수 있는 프로토타입을 만들었어요. AI로 일부 화면이나 모션을 보여주는 형태는 만들어본 적이 있지만, 이렇게 실제 제품처럼 처음부터 끝까지 움직이는 프로토타입을 만든 건 처음이었어요. 제품의 규모가 크고 복잡하다 보니 일부 화면이나 모션만 보여드려서는 구체적으로 논의하기 어렵겠더라고요. 실제 제품에 가까운 형태의 프로토타입은 C레벨과 소통할 때나 개발에 들어가기 전에 구성원끼리 각자 다르게 상상하던 부분을 맞춰갈 때 정말 많은 도움이 됐어요. 

이 프로토타입은 사용자 테스트(UT)에도 활용됐습니다. 사용자가 어떤 지점에서 편리함이나 어려움을 느끼는지, 예상하지 못한 방식으로 사용하는 부분은 없는지 정확하게 확인할 수 있었죠. 이렇게 합의하고 검증한 내용은 바로 정리해 개발자분들에게 전달했어요. 복잡하고 규모가 큰 제품이었지만, AI를 활용해 초반 의사결정과 사용자 검증을 효율적으로 진행한 덕분에 이후에도 방향이 크게 바뀌는 일 없이 안정적으로 프로젝트를 이어갈 수 있었던 것 같아요.

흥준    커스텀 위젯은 편집 환경에서 보이는 디자인이 실제 웹사이트에서도 동일하게 나타나야 해요. 그만큼 확인해야 할 범위도 넓죠. 예전 같았으면 개발자가 직접 코드를 실행해 보면서 두 환경에서 같은 결과가 나오는지 하나씩 확인했겠지만, 지금은 AI를 활용해 반복적인 검증 작업을 자동화하고 있어요. 남는 시간에는 핵심 설계를 고민하는 데 더 집중해요. 이렇게 설계한 내용도 AI를 활용해 다시 검토하면서 의도한 구조대로 구현됐는지, 두 환경에서 일관되게 동작하는지 확인합니다.

AI에게 일을 맡기는 방식도 계속 다듬어가는 중이에요. AI에 너무 많은 정보와 선택지를 주면 오히려 판단해야 할 변수가 늘어나 결과가 느려지거나 흔들릴 수 있거든요. 어떻게 하면 AI가 빠르고 일관된 결과를 만들어낼 수 있을지 고민하면서 불필요한 맥락과 선택지를 최대한 줄여나가고 있습니다. 사람과 협업할 때 업무 방식과 커뮤니케이션을 계속 개선하듯이, AI와도 더 효율적으로 일할 수 있는 방식을 찾아가는 게 중요하다고 생각해요. 

상우    디자인 모드는 시스템 자체가 복잡해서 새로운 기능을 만들 때 PoC와 설계, 기존 정책을 확인하는 과정에 시간이 많이 들어요. 저는 이런 작업을 설계하고 관리하는 과정 전반에 AI를 자잘하게 활용했습니다. 새로운 기능을 설계하기 전에는 복잡한 시스템을 파악하는 시간을 줄이기 위해 AI로 기존 시스템을 조사하고, 나온 결과를 직접 검수하면서 필요한 요구사항을 추가했어요. 설계 내용을 바탕으로 작업을 분리하고 Jira 티켓 단위로 정리할 때도, 각 태스크를 설계하고 구현할 때도 AI를 썼습니다. 만약 업무에 AI를 적용하지 않았더라면 같은 작업에 두세 배 이상의 시간이 들었을 거예요.

지영    처음에는 AI 에이전트를 커스텀 위젯 스튜디오와 함께 출시할 수 있을지 확신하지 못했어요. 개발 막바지에 완성도를 보고 함께 내보내거나, 여의치 않으면 조금 늦게 공개하려고 했죠. 그런데 개발자분들이 AI를 활용해 짧은 시간 안에 완성도 높은 결과물을 만들어 주셔서 AI 에이전트까지 함께 출시할 수 있었습니다. 현재 커스텀 위젯 스튜디오에서는 주당 1,800~2,000개의 위젯이 생성되고, 만들어진 위젯의 70%가 실제 웹사이트에서 쓰이고 있어요.  누구나 직접 위젯을 만들 수 있는 환경과 이를 도와주는 에이전트가 함께 제공되어 더 큰 시너지가 난 것으로 보고 있습니다.

Chapter 4. 큰 방향 안에서 스스로 다음 일을 찾는 사람들

디자인 모드 스쿼드는 각 직군이 자신의 전문 영역에서 스스로 판단하고 실행하는 방식으로 일합니다. PO가 제품의 방향과 정책을 잡으면 디자이너와 엔지니어가 세부적인 해법을 결정하는 식이죠. 모든 경우의 수를 예상하기 어려운 제품의 규모와 복잡성이 자연스럽게 디자인 모드 스쿼드만의 일하는 방식을 만들었습니다. 인터뷰 내내 모든 스쿼드원에게 반복적으로 드러난 것도 이러한 주도성이었어요. 

지영    디자인 모드 스쿼드에서 PO는 프로젝트 각 단계의 큰 목표와 방향만 정해요. 이후에는 각 직군이 자신의 전문성을 바탕으로 제품을 만들어갑니다. 커스텀 위젯 스튜디오와 함께 출시한 신규 위젯들도 디자이너가 필요한 위젯을 직접 제안하고, 처음부터 끝까지 만들어낸 결과예요. 물론 제품 차원의 판단이나 정책 결정이 필요한 순간에는 저와 함께 논의하지만, 평소에는 각자가 해야 할 일을 스스로 찾고 제안해요. 큰 방향만 맞춰지면 일이 자연스럽게 앞으로 굴러가는 느낌이에요.

호영    커스텀 위젯 스튜디오 출시와 함께 새로운 위젯을 추가하기로 했을 때, 실제 아임웹 고객들이 만든 웹사이트와 다양한 쇼핑몰을 살펴보며 반복해서 등장하는 디자인 패턴을 찾았어요. 그 과정에서 지금 아임웹에는 없지만 고객에게 필요할 만한 위젯들을 발굴했고, PO와 함께 검토해 실제 제품으로 출시했어요. 디자인 모드 스쿼드에는 이렇게 웹에 대한 이해를 바탕으로 새로운 가능성을 상상하고, 필요한 것을 직접 제안할 수 있는 사람이 잘 맞아요. 

이런 태도는 긴 호흡으로 제품을 만들어가는 과정에서도 필요합니다. 디자인 모드 스쿼드에서는 크고 복잡한 제품을 오랜 시간에 걸쳐 만들어야 하는 경우가 많아요. 커스텀 위젯 스튜디오 역시 약 7개월 동안 시장의 반응을 확인하지 못한 채로 만든 제품이죠. 바로 성과를 확인할 수는 없었지만, 이 제품이 기존 디자인 모드의 여러 제약을 해소할 거라는 확신을 갖고 필요한 일을 수행하며 앞으로 나아갔어요. 지금도 고객이 커스텀 위젯 스튜디오를 통해 더 다양한 디자인을 쉽게 구현하려면 무엇이 필요한지 찾으며 제품을 개선하고 있어요. ‘이것도 되지 않을까?’, ‘이런 일을 해볼 수 있겠다’라고 생각하며 길을 만들어가는 걸 좋아한다면 디자인 모드 스쿼드에서 전문성을 넓힐 수 있을 거예요.

상우    디자인 모드 스쿼드는 직무 간 경계가 옅은 편이에요. 엔지니어의 업무도 프론트엔드와 백엔드로 명확하게 나누기 어려울 때가 많습니다. 예를 들어 커스텀 위젯의 최종 결과물은 프론트엔드 화면으로 나타나지만, 그 결과물을 만들기 위해 백엔드에서는 데이터를 가져와 조립하고 캐싱한 뒤 화면에 전달해야 하거든요. 이 과정에서 백엔드 개발자에게도 프론트엔드에 대한 이해가 필요해요. 

업무도 명확하게 ‘이건 내 일’, ‘이건 네 일’로 나눠 갖지 않아요. 기획 검토가 끝나면 설계와 작업 범위를 큰 단위로 나눈 뒤 바로 개발에 착수하는데요. 서로 겹치는 부분이 생기거나 어디까지 해야 할지 모호할 때도 많지만, 다들 크게 개의치 않습니다. 규모가 크고 복잡한 제품이라 처음부터 모든 설계를 완성해 놓고 시작하기 어렵다는 걸 모두가 잘 알고 있기 때문이에요. 그래도 구성원들이 전부 숙련된 사람들이라 지금 할 수 있는 일과 해야 하는 일을 스스로 판단해 진행하는 데 거리낌이 없어요. 내가 맡아야 할 업무 범위가 처음부터 명확하게 정해져 있어야 편한 분이라면 디자인 모드 스쿼드의 방식이 조금 낯설 수 있어요. 반대로 직무의 경계를 크게 두지 않고, 문제 해결을 위해 필요한 일을 스스로 찾아 움직이는 분이라면 저희 스쿼드와 잘 맞을 것 같아요.