디자이너가 만든 것 같다는 말을 들은 바이브 코딩 웹사이트, 레일코드의 제작 과정

바이브 코딩으로 만든 웹사이트라고 하면 많은 사람이 어두운 그라디언트 배경에 보라색 강조색이 들어간 랜딩 페이지를 떠올린다. 레일코드(Railcode) 창업자 야코 마주리(Yakko Majuri)는 자기 회사 웹사이트도 코딩 에이전트로 만들었는데, 결과물은 그런 모습과 전혀 다르다. 디자이너가 만든 것 같다는 말을 들었고, 어떻게 만들었는지, 누구와 함께 작업했는지 묻는 사람도 많았다. 마주리는 이런 질문에 답하려고 레일코드 블로그에 자신의 제작 과정을 정리했다.

레일코드 웹사이트 첫 화면. 히어로 하단에 롤러코스터와 관람차가 늘어선 놀이공원 띠가 있다.

디자이너가 아닌 사람의 디자인

마주리는 스스로도 디자이너 작품 같다는 평가는 과장이라고 생각한다. 디자이너가 필요 없다고 말하려는 것도 아니다. 오히려 반대다. 다만 AI 디자인을 두고는 ‘LLM 디자인 슬롭(LLM design slop)’, 즉 AI가 찍어 낸 흔한 디자인 이야기가 대부분인데, 마주리 자신은 코딩 에이전트가 생긴 뒤 디자인에 더 흥미를 느끼게 됐다고 말한다. 예전에는 손을 쓸 수 없었지만 이제는 머릿속의 창의적인 구상을 실제로 만들 수 있다는 것이다.

그래서 이 글의 목표는 코딩 에이전트로도 취향이 담긴 디자인을 할 수 있다는 것을 보여 주는 데 있다. 여기서 취향이 담겼다는 말은 자기 마음에 드는 디자인이라는 뜻이다. 글을 쓰기 위해 마주리는 모든 시안을 그 시안을 만든 프롬프트와 함께 한 페이지에 모아 놓고 과정을 되짚었다.

롤러코스터에서 시작한 콘셉트

레일코드라는 이름은 ‘레일 위의 코드(code on rails)’라는 생각에서 나왔다. 레일코드에서 앱과 에이전트는 그냥 코드이고, 레일코드가 인프라와 가드레일(레일)을 맡아 안전한 환경에서 빠르게 배포되게 한다는 뜻이다.

웹사이트를 만들기로 하기 한 주 전, 마주리는 레일코드 안에서 이것저것 만드는 일이 무척 재미있다는 것을 깨달았다. 스스로도 적극적인 사용자이고, 고객들에게 물어보니 그들도 재미있다고 했다. 레일에 재미를 더하면 롤러코스터다. 그래서 웹사이트에 롤러코스터를 넣기로 했다.

디자이너가 아닌 마주리는 콘셉트를 맨바닥에서 만들어 내기가 어렵다. 그래서 예시와 영감에 기댄다. 방법은 두 가지다.

영감을 얻는 방법	설명
웹 검색	마음에 드는 디자인을 웹에서 찾아본다.
에이전트에게 시안 요청	한 대상을 여러 스타일로 디자인한 시안을 에이전트에게 잔뜩 만들게 한다.

어떤 것이 가능한지 생각의 폭을 넓히려는 것이다. 여러 곳에서 아이디어를 가져와 합치고, 마음에 드는 결과가 나올 때까지 끝없이 고친다. 대부분은 막다른 길로 끝난다.

에이전트에게 시안을 요청할 때는 두 가지 방식을 쓴다.

요청 방식	내용
강도 단계 나누기	하나의 콘셉트를 강도와 복잡도가 다른 여러 단계로 디자인하게 한다. 스펙트럼 어디에도 마음에 드는 것이 없으면 콘셉트 자체가 틀렸다고 판단할 수 있고, 미니멀하게 갈지 더 과감하게 갈 여지가 있는지도 가늠할 수 있다.
마음대로 만들게 하기	콘셉트를 시험할 때는 최소 4개, 많게는 10개 버전을 요청한다. 적어도 절반에는 어느 정도 방향을 주고, 나머지는 ‘마음대로(go wild)’ 만들게 한다. 대부분은 형편없지만 새 아이디어의 불씨가 된다.

첫 롤러코스터 시안 가운데 위쪽 두 개는 ASCII 디자인으로, 그 주에 본 친구의 웹사이트에서 영감을 얻었다. 나머지는 페이블(Fable) 모델의 상상에 맡겼다. 그중 요란하고 못생긴 네온 디자인은 ‘마음대로’ 만들게 한 결과였다. 마주리가 실제로 쓸 일은 없는 디자인이었지만, 이 시안 덕분에 ASCII 아이디어에서 벗어나 더 야심 찬 방향으로 나아갔다.

롤러코스터 타이쿤

마주리는 어릴 때 ‘롤러코스터 타이쿤(Rollercoaster Tycoon)’이라는 게임을 즐겨 했다. 마주리에게 이 게임의 목표는 가장 멋진 놀이공원을 짓는 것이었다. 클로드(Claude)가 만든 네온 디자인을 보다가 이 게임이 떠올랐고, 웹사이트를 이 게임에 대한 오마주로 만들기로 했다.

처음에는 페이블에게 게임의 미니 버전을 만들게 했다. HTML 안에서 실제로 가지고 놀 수 있는 롤러코스터 타이쿤 같은 컴포넌트를 두 개 동시에 만들고, 그중 하나는 배경을 투명하게 해 달라는 요청이었다. 결과물은 멋졌고 잠깐은 웹사이트에 게임을 넣을까 생각했지만, 조금 가지고 놀아 보니 너무 과했다.

그래서 처음으로 돌아가 마음에 드는 롤러코스터 하나만 얻기로 했다. 여러 번 시도한 끝에 원하는 롤러코스터가 나왔고, 마주리는 이것으로 끝났다고 생각해 템플릿에 그대로 얹어 보았다. 그런데 웹사이트 한가운데 롤러코스터 하나가 덩그러니 놓인 모습은 어색했다. 롤러코스터 하나가 아니라 놀이공원 전체가 필요했다.

놀이공원 띠와 반복 작업

놀이공원이 필요하다고 정한 뒤, 마주리는 왠지 그것이 히어로 섹션 하단에 들어가야 한다고 느꼈다. 예전에 본 웹사이트들에서 온 생각이 분명하지만 어느 사이트였는지는 기억나지 않는다고 한다. 그렇게 “롤러코스터와 같은 스타일의 놀이기구들이 늘어선, 높이 200px 정도의 얇은 띠를 추가해 줘”라는 요청으로 띠가 만들어졌다.

처음에는 이 띠를 웹사이트에 올려도 여전히 어색했다. 반복해서 다듬자 자연스러워졌다. 앞서 만든 롤러코스터에 맞춰 다른 놀이기구 에셋을 디자인하고, 애니메이션을 하나하나 골라 손보고, 띠를 독립된 요소가 아니라 다음 섹션으로 넘어가는 색 전환으로 쓰기로 한 결과였다.

포크와 플레이그라운드

이 디자인에 도달했을 때 마주리는 무척 기뻐서 곧바로 친구에게 보여 주기까지 했다. 그래도 어딘가 어긋난 느낌이 남았고, 여기서 포크가 등장한다.

방법	내용
포크(fork)	디자인이 거의 완성될 때까지는 HTML 파일 하나로 작업하고, 그다음에야 에이전트들이 동시에 고칠 수 있는 여러 React 컴포넌트로 옮긴다. 파일이 하나면 디자인을 복제(포크)해 한두 가지만 바꾸고 원본과 나란히 비교하기가 매우 빠르다. 마음에 드는 포크로 작업을 이어 가거나 원본으로 돌아가되, 어떤 포크도 지우지 않는다.
플레이그라운드(playground)	색, 폰트, 배치 같은 변수를 직접 바꿔 보며 결과를 실시간으로 확인하는 화면을 만든다. 에이전트에게 하나하나 수정을 시키는 느린 반복을 대신한다.

잔디 색을 파란색에서 초록색으로 바꾸면서 플레이그라운드가 쓰였다. 처음 나온 초록색이 원하던 색이 아니어서, 클로드에게 강조색, 글자색, 잔디색, 배경색 등을 바꿔 볼 수 있는 플레이그라운드를 만들게 했고, 거기서 원하는 잔디 색을 찾았다. 마주리는 포크와 플레이그라운드를 돕는 작은 오픈소스 도구를 만들어 볼까 생각 중이라고도 적었다.

잔디 색을 정한 뒤에는 세부에 매달렸다. 롤러코스터 방향을 정하기 전, 마주리는 페이블에게 ‘개발 도구를 위한 재미있는 웹사이트 목업’을 만들게 한 적이 있다. 대부분 쓸모없는 결과물이었지만, CTA(Call to Action) 버튼을 더 낫게 디자인하려고 고민할 때 그 목업에서 본 작은 요소가 떠올랐다. 마주리는 형편없는 것이라도 초기에 많은 디자인을 봐 둬야 하는 이유가 여기 있다고 말한다. 나중에 그 속에서 원석을 건질 수 있다는 것이다.

흰 배경은 사이트를 재미있어 보이게 하지 못했다. 그래서 배경을 하늘색으로 바꾸고 분위기를 위해 구름을 넣었는데, 흰색에서 하늘색으로 바꾼 것만으로 인상이 완전히 달라졌다.

나머지는 여기서 따라 나왔다. 히어로 섹션이 사이트 전체의 스타일을 정했다. 레일코드 제품의 강조색은 지금 파란색이지만, 웹사이트에 초록색이 너무 자연스럽게 자리 잡아 굳이 거스르지 않고 받아들였다. 그렇게 연두색과 진녹색 섹션이 생겼고, 마지막에는 흙색 푸터로 이어졌다. 마주리는 이 때문에 제품 디자인을 다시 손봐야 할지도 모르겠다고 덧붙였다.

나머지 페이지도 반복 작업이 많이 필요했지만, 스타일이 대체로 자리 잡은 뒤에는 새 아이콘과 에셋을 만들 때마다 그것을 기준으로 삼을 수 있었다. 분위기를 먼저 확실히 잡아 둔 덕분에 방향이 흔들리지 않았다.

마지막으로 든 예는 내비게이션 바다. 한 가지 색으로 고정하면 어울리지 않는다고 느껴, 화면에 보이는 섹션의 배경색으로 바뀌게 만들었다. 흰색, 하늘색, 연두색, 진녹색 버전을 각각 시험해 본 끝에 전부 쓰는 것이 가장 낫다는 결론에 이르렀다. 마주리는 이 변화가 큰 차이를 만든다고 본다.

영감을 어디서 얻나

디자이너가 아닌 마주리에게 기존 작업에서 영감을 얻는 일은 창작 과정의 필수 요소다. 분명한 예시는 코딩 에이전트를 이끄는 가장 좋은 방법이기도 하다.

어떤 때는 본 것과 꽤 비슷한 결과가 나온다. 밝은 섹션이 어두운 섹션으로 바뀌는 구성은 흔한 패턴이지만, 마주리는 이 부분에서 Contextual AI 웹사이트를 자주 참고한다. 어떤 때는 연결이 덜 분명하다. 레일코드의 한 섹션은 Clay 웹사이트에서 영감을 받았다. 직접 가져온 요소가 없어도 영향은 남는다. 레일코드 웹사이트는 Sentry 웹사이트와 전혀 닮지 않았지만, 마주리는 콘텐츠와 잘 어울리는 일러스트레이션의 감을 잡으려고 Sentry 사이트를 계속 들여다봤다.

마주리가 꼽은 작업 방식의 핵심은 다음과 같다.

항목	내용
모델 선택	디자인에는 앤트로픽(Anthropic) 모델만 쓴다. 오픈AI(OpenAI) 모델은 구체적인 지시를 줘도 무척 애를 먹었다. 그중 페이블을 최고로 꼽는다.
파일 형식	디자인에 만족하고 문구 작업 같은 단계로 넘어갈 준비가 될 때까지 모든 것을 HTML 파일 하나에 둔다.
영감 탐색	영감을 얻으려고 웹사이트를 아주 많이 본다. 좋아하는 사이트를 자주 다시 찾고, 새로운 사이트도 계속 찾는다. 특정 컴포넌트가 정말 마음에 들면 그것을 바탕으로 작업한다.
대량 생성과 선별	초기에 클로드에게 서로 다른 웹사이트를 잔뜩 만들게 하고 그중 99%는 버린다. 가끔 거기서 컴포넌트를 하나 건지거나 새 아이디어를 얻는다.
변형 요청	몇몇 디자인은 에이전트에게 ‘마음대로’ 만들게 하고, 아이디어의 씨앗을 미니멀한 것부터 기상천외한 것까지 여러 버전으로 만들게 한다.
포크	과정의 흔적을 쉽게 되짚고 싶어서 디자인을 수시로 포크해 몇 가지를 바꾸고 원본과 비교한다. 포크로 작업을 이어 가거나 원본으로 돌아가지만 포크는 지우지 않는다.
플레이그라운드	색, 폰트, 배치를 쉽게 바꿔 보고 결과를 실시간으로 보는 플레이그라운드를 만들어, 에이전트에게 수정을 시키는 느린 반복을 피한다.
반복	반복하고, 또 반복하고, 더 반복한다. 대부분의 반복은 막다른 길로 끝난다.

그리고 무엇보다, 마주리는 이 모든 과정을 즐긴다.

인지과학의 시선으로 보면

인지과학에는 생각이 머릿속에서만 일어나지 않고 도구와 기록, 주변 환경으로 퍼져 일어난다고 보는 분산 인지(distributed cognition) 관점이 있다. 마주리의 작업 방식은 이 관점과 잘 맞는다. 지우지 않고 쌓아 둔 포크는 판단의 이력을 바깥에 저장해 둔 기억이고, 플레이그라운드는 색과 배치를 머릿속으로 상상하는 대신 눈앞에서 바로 비교하게 해 준다. 이 글을 쓰려고 모든 시안을 프롬프트와 함께 한 페이지에 모아 과정을 되짚은 것도 같은 맥락이다. 디자이너가 아닌 사람에게는 판단을 바깥에 꺼내 놓는 이런 장치가 특히 쓸모 있다.

출처

• 원문: How our vibe coded website looks like a designer made it, Railcode 블로그(Yakko Majuri, 2026-08-10). https://railcode.dev/blog/vibe-coded-website
• 경유: GeekNews https://news.hada.io/topic?id=34580