AI 빌더로 13일, 랜딩과 앱을 한 번에 바꾼 이야기

라플라스 v4를 만들면서 배운 것: 내가 아는 걸 넘기고, 그림으로 받고, 끝까지 의심하기

Eugene · 2026년 10월 30일

안녕하세요, 라플라스에서 제품을 만들고 있는 Eugene이에요.

10월 29일 오후 6시 27분, 앱 저장소에 PR 하나가 머지됐어요. 이름은 Laplace V4, 바뀐 파일은 4,116개였어요. 이 PR로 라플라스 애널리틱스의 모든 화면과 랜딩페이지가 새 옷으로 갈아입었어요. 5개 언어를 지원하게 됐고, 그동안 열어 볼 수 없던 휴대폰에서도 화면이 제 모습으로 보이게 됐어요. 여기까지 걸린 시간은 13일, 만든 사람은 저 한 명이었어요.

시작할 때는 솔직히 자신이 없었어요. 개발을 깊이 알지 못하는 제가, 바이브 코딩만으로 제품 전체를 다시 짓는 게 정말 가능할까 싶었거든요. 그런데 끝까지 가 보니 결과를 가른 건 개발 지식이 아니었어요. 디자인, PM, CS, 세일즈를 오가며 쌓아 온 경험이 AI를 다루는 가장 든든한 밑천이 되어 주었어요.

프롬프트를 쓰는 순간마다 그걸 느꼈어요. 애널리틱스 제품에서 UI와 UX가 왜 다르게 설계되어야 하는지 알고 있었고, 어떤 기능과 차트가 필요한지는 고객 문의와 미팅을 거치며 이미 머릿속에 쌓여 있었어요. AI에게 필요한 건 바로 그 맥락이었어요.

저는 오랫동안 한 분야를 깊게 파는 스페셜리스트를 꿈꿨어요. 현실의 저는 이것저것 넓게 다루는 제너럴리스트에 가까웠고요. 그런데 AI와 함께 일하면서, 그 넓이가 처음으로 온전한 강점이 됐어요. 이 글에서는 13일 동안 무엇을, 어떻게 만들었는지 이야기해 보려고 해요.

먼저, 무엇이 바뀌었나요

말보다 그림이 빠를 것 같아요. 아래 그림은 모두 같은 가짜 데이터를 넣은 로컬 앱에서, 같은 폭으로 찍었어요. 왼쪽은 이전 화면(ui-classic 브랜치), 오른쪽은 지금 배포된 v4예요.

가장 크게 바뀐 건 휴대폰이에요. 이전 앱에는 모바일 화면이 아예 없었어요. 데스크톱 화면이 그대로 줄어들어서, 메뉴가 화면 대부분을 덮고 설정 제목은 한 글자씩 꺾였어요.

그리고 언어예요. 이전 앱에서 표시 언어를 일본어로 바꾸면 영어와 한국어가 섞여 나왔고, 메뉴에는 group.strategy 같은 번역 키가 그대로 보였어요.

랜딩도 같은 흐름으로 바꿨어요. 랜딩은 v4보다 조금 먼저, 10월 초에 Framer 사이트를 진단하고 코드로 옮기는 작업부터 했어요. 진단해 보니 첫 화면 시안이 "2024 블랙프라이데이 성과 리포트"였고, 차트 범례에는 series-1이 그대로 보였어요. 휴대폰에서는 제품 화면이 아예 없었고요.

v4 기간에는 랜딩에 일본어, 중국어 간체, 중국어 번체판을 더했어요. 방문자의 브라우저 언어를 보고 맞는 언어판으로 보내고, 해외판 요금은 달러로 보여줘요. 자동 언어 이동은 빌드된 HTML을 18가지 경우로 여는 회귀 테스트로 묶었어요.

랜딩에서 "5개 언어를 지원해요"라고 말하면서 앱은 한국어뿐이면, 해외 고객은 가입하자마자 실망하게 돼요. 그래서 둘을 한 묶음으로 봤어요.

1. 내가 아는 걸 전부 넘기는 데서 시작했어요

AI는 커머스를 몰라요. 정확히는 우리 고객이 무엇을 먼저 보고, 무엇에 불편해하는지 몰라요. 그래서 처음 며칠은 거의 설명만 했어요.

• 커머스 대표님들이 아침에 제일 먼저 보는 숫자(어제 매출, 목표 대비, 광고비 대비 매출)

• 고객사를 만나며 들었던 말들. "예전 대시보드랑 숫자 위치가 바뀌면 안 돼요", "표를 옆으로 넘길 때 뚝뚝 끊겨요", "지도에서 지역 이름이 칸을 넘쳐요"

• 예전 화면에서 만들고 싶었지만 구현이 안 돼서 포기했던 기능과 UI, 그리고 그 이유

• 데이터를 보는 방식. 날짜와 시간은 항상 한국 시간, 올해 날짜라도 연도를 빼지 않기, 표는 기본으로 아무 열도 고정하지 않기

• 사용성에서 꼭 지켜야 할 것. 글자는 11px 아래로 줄이지 않기, 휴대폰에서 누르는 자리는 44px 이상, 시스템 기본 드롭다운은 쓰지 않기

• 이전에는 없던 모바일 화면에서 무엇을 남기고 무엇을 접을지

한 번 말하고 끝내면 다음 대화에서 잊어요. 그래서 규칙은 문서와 스킬로 남겼어요. "차트 카드에는 헤드라인을 넣지 않는다", "카드 높이는 이전 화면과 같이 쓸 수 있게 160px 단위로 저장한다" 같은 규칙이 다음 작업 지시에 자동으로 따라붙게 했어요. 제가 매번 다시 설명하지 않아도 되는 상태를 만드는 것, 그게 첫 번째 일이었어요.

2. 한 번에 다 만들지 않고, 그림으로 받았어요

처음엔 "전부 다 만들어 줘"라고 하고 싶었어요. 그렇게 하면 결과가 넓고 얕아요. 그래서 순서를 바꿨어요.

머릿속에 그려지는 화면이 있으면 먼저 말로 설명하고, AI에게 시안을 2~3개 만들어 달라고 했어요. 시안은 실제 앱을 로컬에서 띄워 그 안에 그렸어요. 그래야 진짜 제품처럼 보이고, 휴대폰 폭과 데스크톱 폭에서 어떻게 보이는지 바로 확인할 수 있거든요.

결정할 게 생기면 글이 아니라 전후 그림으로 받았어요. 바뀌는 곳이 워낙 많아서, 글로 된 보고만 읽고는 무엇이 다른지 판단할 수 없었어요. "뭐가 다른지 모르겠어, 그림으로 줘"라는 말을 하도 많이 해서, 나중엔 아예 작업 규칙이 됐어요.

화면 하나가 완성되면 그다음부터는 빨라졌어요. 설정 화면들은 같은 규격과 흐름을 갖고 있어서, '내 정보' 화면에서 머리글, 왼쪽 메뉴, 오른쪽 도움말, 저장 막대의 규격을 정하고 나면 나머지는 그 규격을 따라 차례로 맞추면 됐어요.

3. AI의 제안이 제 생각보다 나은 경우가 꽤 많았어요

솔직히 이 부분이 제일 의외였어요. 데이터를 하나도 연결하지 않은 고객에게 커스텀 대시보드를 어떻게 보여줄지 고민할 때, 저는 "샘플 화면 하나"를 떠올리고 있었어요. AI는 업종별 사례 보드 8개를 실제 차트 부품으로 그리고, 그 위에 "내 데이터로 확인하고 싶다면 데이터 연결하러 가기"를 붙이는 안을 냈어요. 재고 관리, 세무·손익, 재구매 상품 분석, 교차 판매, CRM 같은 보드를 둘러보다 보면 "이거 우리도 하고 싶다"는 생각이 들어요. 제가 원했던 게 정확히 그거였어요.

다만 항상 확인해야 했어요. 화면 가운데에 큰 안내 창을 띄운다든가, 카드 수가 적어서 보드가 휑하다든가, 표 오른쪽이 텅 비어 있다든가 하는 건 AI가 스스로 잘 잡지 못했어요. 사례에 실제 고객사 이름을 넣지 않는 것처럼 판단이 필요한 부분도 사람이 정해야 했고요.

고급 필터를 만들 때도 그랬어요. AI가 처음 낸 안은 값 칩마다 조건 드롭다운을 하나씩 붙이고, 칩 사이의 「또는」 하나가 모든 조건의 연결을 한꺼번에 바꾸는 방식이었어요. 화면만 보면 그럴듯했지만, 조건을 섞거나 묶을 수 없었어요. 그 안은 버리고, 노션의 고급 필터처럼 규칙을 한 줄씩 쌓는 방식으로 바꿨어요. AI가 "다 됐어요"라고 해도 제가 화면을 직접 눌러 보기 전까지는 된 게 아니었어요.

4. 디자인 시스템은 참고만 했어요

이번 작업에서 일부러 정한 규칙이 있어요. 기존 디자인 시스템은 참고만 하고, 처음부터 그대로 따르지는 않았어요.

디자인 시스템을 처음부터 지키면 시스템 안에서만 생각하게 돼요. 있는 부품으로 만들 수 있는 화면만 떠올리게 되고, 고객에게 실제로 필요한 화면은 시스템에 없는 경우가 많아요. 그래서 시안 단계에서는 넓게 생각하되, 색과 간격 토큰과 공용 부품은 재사용해서 일관성은 지켰어요.

그리고 디자인이 끝나고 배포를 시작하기 전에, 기존 디자인 시스템을 지금 버전으로 갈아 끼웠어요. 통합 PR에서 디자인 시스템 패키지 파일 151개가 함께 바뀐 이유예요. 시스템이 디자인을 막는 대신, 완성된 디자인이 시스템을 새로 쓴 셈이에요.

갈아 끼운 뒤에는 화면 전체를 훑어 "같은 일을 하는데 따로 만든 부품"을 찾았어요. 예를 들어 데스크톱에서는 가운데 창이고 휴대폰에서는 바닥 시트가 되는 대화상자가 34개 파일에서 쓰이고 있었고, 비슷한 대화상자가 네 벌 더 있었어요. 이런 목록이 다음 디자인 시스템 작업의 출발점이 됐어요.

5. 사용성 판단이 어려우면 남의 사례를 바로 가져왔어요

"이 버튼을 여기 두는 게 맞나", "이 상태 배지를 뭐라고 부를까", "인터넷 익스플로러로 들어온 사람에게 안내를 띄워야 하나" 같은 질문은 혼자 고민하면 끝이 없어요. 이럴 때는 AI에게 다른 서비스가 어떻게 하는지, 커뮤니티에서는 어떻게 이야기하는지 찾아 달라고 하고, 그 방식을 바로 로컬 화면에 적용해 그림으로 받았어요.

제가 직접 조사하고 비교하는 것보다 훨씬 빨랐어요. 판단은 여전히 제가 하지만, 판단할 재료가 몇 분 만에 화면으로 나와요. 검색 결과 링크 열 개를 읽는 것과, 우리 화면에 그 방식을 얹은 그림 두 장을 나란히 보는 건 결정 속도가 전혀 달랐어요.

6. 전문가가 필요한 일은 전문가를 붙였어요

차트 시각화, 성능 측정, 번역 검수처럼 전문 지식이 필요한 일은 그 분야 스킬과 에이전트를 내려받아 붙였어요. 그리고 여러 일을 동시에 돌렸어요. 날짜 표기, 배지 문구, 카드 높이, 지도 교체를 각각 다른 하위 에이전트에게 맡기고, 저는 돌아온 그림을 보며 고르는 역할을 했어요.

표 스크롤. "표를 옆으로 넘길 때 끊긴다"는 피드백은 오래된 숙제였어요. 감으로 고치지 않고, CPU를 4배 느리게 만든 조건에서 앱의 표 27개를 전부 재고 원인을 찾았어요. 고친 뒤에는 50ms 넘는 긴 작업이 119번에서 14번으로, 스크립트 실행 시간이 절반으로 줄었어요. 이 수정은 배포 다음 날 올린 PR이라 아직 리뷰 중이에요.

번역. 사내에 일본어나 중국어 원어민이 없어요. 그래서 AI로 검수했어요. 문자열마다 원문과 번역을 나란히 놓고, 번역을 다시 한국어로 되옮겨 뜻을 비교하는 방식이에요. 연결 가이드 문자열 711개를 이렇게 보고 93개를 고쳤어요. "설정하면 로그인할 수 있어요"가 원래 뜻인 "설정하지 않으면 로그인할 수 없어요"와 다르게 읽히는 경우처럼, 문법은 맞지만 뜻이 어긋난 번역이 주로 걸렸어요.

출시 전 점검. 마지막으로 119개 화면을 5개 언어와 8가지 폭으로 열어 겹침, 잘림, 남은 한국어, 너무 작은 터치 영역을 기계로 먼저 찾고, 걸린 것만 사람이 봤어요. Safari, Firefox, 아이폰, 아이패드, 안드로이드 기기 설정과, Pretendard 글꼴이 없는 Windows 환경도 따로 돌렸어요. 병합 뒤 다시 돌렸을 때 새로 생긴 치명적인 문제는 0건이었어요.

다만 한꺼번에 너무 많이 돌리면 노트북이 버티지 못했어요. 브라우저를 띄우는 에이전트 여러 개가 동시에 테스트를 돌리다 다 같이 멈춘 뒤로는, 무거운 작업은 한 번에 하나, 브라우저는 하나만 띄우는 규칙을 지시에 넣었어요.

7. 그래도 사고는 났어요

전부 잘된 건 아니에요. 자동화 브라우저를 운영 데이터를 쓰는 미리보기 주소에 붙였다가, 3분 만에 운영 API로 인증 실패(401) 요청을 1만 8천 건쯤 보낸 적이 있어요. 로그인하지 않은 브라우저였고, 앱은 인증이 실패할 때마다 다시 시도했어요.

그 뒤로 규칙을 만들었어요. 자동화는 인증과 API를 모두 가짜로 바꾼 로컬 앱에서만 돌리고, 브라우저에서 127.0.0.1 밖으로 나가는 요청은 시작부터 전부 막아요. 이 글의 앱 화면도 전부 그 로컬 앱에서 찍었어요. 이 규칙도 스킬 문서에 적어 두어서 모든 하위 에이전트 지시에 자동으로 붙어요.

AI는 시키면 빠르게 해요. 그래서 무엇을 시키면 안 되는지 정해 두는 게 사람의 몫이에요.

배포는 어떻게 했나요

영역마다 PR을 따로 열어 리뷰받고, 마지막에 통합 PR 하나로 합쳤어요. 설정·메뉴·커스텀 대시보드에서 시작해 다국어, 데이터 연결, 데이터 관리, 일반 대시보드를 차례로 얹었고, 합친 목록이 25줄, PR에 쌓인 커밋이 820개였어요. 바뀐 파일 4,116개 중 1,333개가 테스트 파일이에요.

한 번에 내보내되 되돌릴 길은 열어 뒀어요. 앱 바의 「새 화면」 스위치로 누구나 새 화면과 이전 화면을 오갈 수 있어요. 고객이 익숙한 화면을 하루아침에 잃지 않게 하려는 장치예요. 이 스위치 덕분에 이전 화면과 v4를 같은 가짜 데이터로 나란히 찍어 이 글의 비교 그림을 만들 수 있었어요.

13일을 돌아보며

가장 크게 바뀐 건 고민의 양이에요. 예전에는 "이게 맞나"를 혼자 오래 붙잡고 있었다면, 이번에는 시안을 몇 개 받아 보고 골랐어요. 대신 고르는 눈과 고객을 아는 정도가 결과를 거의 다 결정했어요.

비슷한 방식으로 일해 보려는 분께 세 가지를 말씀드리고 싶어요.

하나, 넘길 지식부터 정리하세요. AI가 만든 화면의 품질은 제가 넘긴 고객 이야기의 양과 거의 비례했어요. 고객 피드백, 포기했던 기능, 업계에서 중요하게 보는 숫자를 문서로 남겨 두면 AI는 매번 그걸 읽고 시작해요.

둘, 글 말고 그림으로 결정하세요. 화면이 수십 개를 넘어가면 글로 된 보고로는 판단이 안 돼요. 같은 화면의 전후 그림 한 장이 회의 한 번을 대신했어요.

셋, '다 됐어요'를 믿지 마세요. AI의 제안은 생각보다 좋을 때가 많았지만, 휴대폰 폭에서 눌러 보고, 다른 언어로 바꿔 보고, 실제 고객 이름이 섞이지 않았는지 보는 건 끝까지 제 일이었어요. 무엇을 시키면 안 되는지도요.

앞으로

머지않아 제품을 만드는 일의 상당 부분을 AI가 맡게 될 거라고 생각해요. 좋은 기능이 지금과는 비교할 수 없는 속도로 세상에 나오겠죠. 그렇다면 일하는 방식과 조직의 구조도 다시 생각해야 해요. 디자이너, 기획자, 개발자처럼 직무를 나누는 경계가 지금처럼 단단할 필요가 있을지도 모르겠어요.

그래도 저는 이 변화를 위기보다 기회로 봐요. 머릿속에만 있던 아이디어, 문서로만 남아 있던 기획을 바로 만들어 고객 앞에 내놓고 검증할 수 있게 됐으니까요.

라플라스는 지금 데이터 분석을 넘어 automated planning을 준비하고 있어요. 목표는 올해 안이에요. 글로벌 버전 앱도 출시를 앞두고 있고요. 데이터 인프라 너머로 이어질 라플라스의 다음 여정도 지켜봐 주세요.

---

이 글의 모든 앱 화면은 가짜 데이터를 넣은 로컬 앱에서 찍었고, 화면 속 브랜드명·수치·이메일은 모두 샘플이에요. 숫자 출처: 앱 저장소 git 기록(PR #4984, 2026-10-29 머지), 랜딩 저장소 git 기록, 출시 전 점검 보고서(plan/v4_qa/sweep.md), 표 성능 측정(.local/hscroll/agg_all4.md), 번역 검수 기록(plan/i18n_ai_review.md).