바이브 코딩한 웹사이트를 디자이너가 만든 것처럼 보이게 한 방법

Railcode 웹사이트는 코딩 에이전트가 만든 여러 시안에서 아이디어를 골라 반복적으로 다듬는 과정을 거쳐 완성됨. 디자이너를 대체하기보다, 비디자이너도 자신이 좋아하는 디자인을 실제로 구현할 수 있었던 사례임 ‘코드를 레일 위에 올린다’는 제품 개념과 사용하는 재미를 결합해 롤러코스터와 놀이공원을 시각적 주제로 삼고, Rollercoaster Tycoon에서 구체적인 영감을 얻음 초기에는 최소 4개, 때로는 10개의 시안을 만들고 일부는 에이전트에게 자유롭게 맡김. 미니멀한 디자인부터 과감한 디자인까지 탐색하며, 버릴 시안에서도 다음 아이디어나 쓸 만한 요소를 찾음 디자인이 거의 완성될 때까지 단일 HTML 파일을 유지하고, 복제본을 나란히 비교하며 수정함. 색상과 글꼴 등을 직접 조절하는 플레이그라운드로 에이전트에게 매번 수정을 요청하며 기다리는 시간을 줄임 롤러코스터를 기준으로 개별 요소와 애니메이션을 맞추고, 하늘색 배경과 초록색 구역, 흙 모양 푸터로 스타일을 확장함. 히어로 영역에서 확립한 분위기가 나머지 사이트의 디자인 기준이 됨 코딩 에이전트로 구현한 디자인 Railcode 웹사이트도 바이브 코딩으로 만들었지만, 여러 사람이 제작 방법과 함께 작업한 사람을 물을 정도로 흔히 떠올리는 에이전트 생성 사이트와 다른 결과를 얻음 디자이너가 만든 것 같다는 평가는 실제로 받았으나, 스스로는 다소 과한 평가로 여김. 디자이너가 불필요하다는 전제는 아님 코딩 에이전트 덕분에 이전에는 구현하기 어려웠던 창의적 구상을 실현할 수 있게 됐고, 디자인에 대한 관심도 커짐 제작 과정을 사실에 근거해 되짚기 위해 모든 프로토타입과 생성 프롬프트를 하나의 색인으로 모음 레일과 재미에서 출발한 롤러코스터 Railcode라는 이름은 “code on rails”에서 나옴. 앱과 에이전트는 코드이고, Railcode가 인프라와 가드레일을 맡아 안전한 환경에 빠르게 배포할 수 있게 함 직접 제품으로 무언가를 만드는 과정이 재미있었고 고객들도 같은 반응을 보여, 레일과 재미를 결합한 롤러코스터를 웹사이트 주제로 선택함 처음부터 디자인 개념을 만들기 어려워 두 가지 방법으로 가능성을 탐색함 웹에서 마음에 드는 디자인을 찾아봄 에이전트에게 같은 대상을 여러 스타일로 대량 생성하게 함 여러 곳에서 얻은 아이디어를 조합하고 만족할 때까지 반복하지만, 대부분의 시도는 막다른 길로 끝남 초기 롤러코스터 시안 중 ASCII 디자인 두 개는 ...