랜딩페이지 한 장, Fidestro로 짓기 — 제작기

Fidestro 공방의 첫 글입니다. 이번 글은 지금 보고 계신 이 페이지를 Fidestro로 짓는 과정을 그대로 따라가봅니다.

영상은 약 2분. 글에서는 각 단계에서 무엇이 일어나는지 조금 더 들여다보겠습니다.

1. 아이디어 한 줄 → 프로토타입

먼저 만들고 싶은 것을 한 줄로 적습니다. 그 다음은 Fidestro가 받아갑니다. 잠시 기다리면 클릭해볼 수 있는 화면이 나옵니다. 여기까지가 첫 번째 만남입니다 — 머릿속 그림과 손에 잡히는 화면 사이의 거리가 처음으로 좁혀지는 순간.

2. AI와 다듬기

프로토타입을 보고 나면, 다시 대화로 돌아갑니다. 이 버튼은 위로, 문구는 더 짧게, 분위기는 다크 핑크 — 보면서 떠오르는 것들을 그대로 말합니다. 영상 중반에 분위기를 한 번에 다크 핑크로 갈아엎는 장면이 있는데, 그게 이 단계의 묘미입니다.

3. 기반 짓기

다듬기가 끝나면 Fidestro가 짓기 시작합니다. 영상에선 짧게 지나가지만, 이 단계가 사실은 가장 많은 일을 합니다. 페이지를 그리기 전에 디자인 시스템, 데이터 구조, 테스트 환경부터 갖춥니다. 기반부터 짓는다는 말이 가장 직접적으로 보이는 부분입니다.

4. 기능 하나, 그리고 자율주행

작은 기능 하나는 직접 만들어 보여드립니다. 그 다음, 자율주행 버튼 한 번. 나머지 기능들이 한 번에 지어집니다. 사람이 직접 하는 모습과, AI가 알아서 하는 모습 — 같은 화면 안에서 두 가지를 볼 수 있게 일부러 같이 넣었습니다.

이 단계에서 한 가지 더 말씀드리고 싶은 것이 있습니다. Fidestro는 기능 하나를 만들 때마다, AI가 직접 앱을 실행해서 의도대로 동작하는지 확인합니다. 코드가 컴파일된다는 정도가 아니라, 실제 브라우저에서 버튼을 누르고 화면이 바뀌는지를 직접 봅니다. 자동화된 확인이 한 단계 한 단계 끼어있어서, 자율주행이 끝났을 때의 결과물이 흔들리지 않습니다.

5. 완성된 서비스

영상 마지막엔 완성된 페이지를 그대로 켜서 보여드립니다. 별다른 연출 없이, 그냥 돌아가는 모습 그대로입니다. 이 페이지가 그것입니다.

다음엔

한 장짜리 랜딩페이지로 시작했습니다. 다음 제작기에서는 여러 페이지짜리 소프트웨어가 같은 방식으로 어떻게 지어지는지 보여드리겠습니다. 도메인이 생기고, 권한이 갈리고, 기능이 늘어나도 같은 자세로 짓는지 — 직접 보시는 게 가장 빠를 것 같아서요.

읽어주셔서 감사합니다.