← 목록으로

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

• 코딩 에이전트로 개성 있는 웹사이트를 만들려면 한 번에 좋은 결과를 얻기보다, 다양한 시안에서 마음에 드는 요소를 골라 반복해서 다듬는 과정이 필요함
• Railcode의 ‘레일’과 제품을 사용하는 재미를 연결해 롤러코스터와 놀이공원을 주제로 정하고, Rollercoaster Tycoon과 기존 웹사이트에서 구체적인 영감을 얻음
• 같은 아이디어로 4~10개 시안을 만들되 미니멀한 것부터 과감한 것까지 탐색함. 대부분 버리더라도 일부 요소를 재사용하거나 새로운 방향을 발견할 수 있음
• 디자인이 거의 완성될 때까지 단일 HTML 파일로 작업하며, 복제본을 나란히 비교하고 색상·글꼴·배치를 직접 조절하는 도구를 만들어 수정 시간을 줄임
• 마음에 드는 시각적 기준을 먼저 확립한 뒤 다른 구역과 아이콘·애니메이션으로 확장함. 에이전트가 구현을 맡더라도 무엇을 남기고 바꿀지는 직접 선택함

코딩 에이전트로 구현한 디자인

• Railcode 웹사이트도 바이브 코딩으로 만들었지만, 여러 사람이 제작 방법과 함께 작업한 사람을 물을 정도로 흔히 떠올리는 에이전트 생성 사이트와 다른 결과를 얻음
• 디자이너가 만든 것 같다는 평가는 실제로 받았으나, 스스로는 다소 과한 평가로 여김. 디자이너가 불필요하다는 전제는 아님
• 코딩 에이전트 덕분에 이전에는 구현하기 어려웠던 창의적 구상을 실현할 수 있게 됐고, 디자인에 대한 관심도 커짐
• 제작 과정을 사실에 근거해 되짚기 위해 모든 프로토타입과 생성 프롬프트를 하나의 색인으로 모음

레일과 재미에서 출발한 롤러코스터

• Railcode라는 이름은 “code on rails”에서 나옴. 앱과 에이전트는 코드이고, Railcode가 인프라와 가드레일을 맡아 안전한 환경에 빠르게 배포할 수 있게 함
• 직접 제품으로 무언가를 만드는 과정이 재미있었고 고객들도 같은 반응을 보여, 레일과 재미를 결합한 롤러코스터를 웹사이트 주제로 선택함
• 처음부터 디자인 개념을 만들기 어려워 두 가지 방법으로 가능성을 탐색함
  • 웹에서 마음에 드는 디자인을 찾아봄
  • 에이전트에게 같은 대상을 여러 스타일로 대량 생성하게 함
• 여러 곳에서 얻은 아이디어를 조합하고 만족할 때까지 반복하지만, 대부분의 시도는 막다른 길로 끝남
• 초기 롤러코스터 시안 중 ASCII 디자인 두 개는 친구의 웹사이트에서 영감을 얻었고, 나머지는 Fable에게 맡겨 새로운 발상의 재료로 사용함

강도와 자유도를 달리한 시안 탐색

• 강도와 복잡성의 범위를 넓혀 같은 개념을 여러 수준으로 구현하게 함
  • 어느 수준에서도 마음에 드는 결과가 없다면 개념 자체를 재검토할 수 있음
  • 미니멀하게 갈지, 더 과감한 구성을 시도할지도 비교할 수 있음
• 개념 하나당 최소 4개, 때로는 10개의 버전을 요청함. 적어도 절반에는 지침을 주고 나머지에는 자유롭게 만들어 보라고 요청함
• 자유롭게 만든 결과물은 대개 좋지 않지만, 새로운 아이디어를 촉발할 수 있음
• 실제로 사용하지 않을 만큼 과한 네온 롤러코스터 시안이 ASCII 중심의 접근에서 벗어나 더 야심 찬 방향으로 전환하는 계기가 됨

Rollercoaster Tycoon에서 놀이공원으로

• 네온 시안은 어린 시절 즐기던 Rollercoaster Tycoon을 떠올리게 했고, 이 게임을 참조하는 웹사이트를 만들기로 함
• 처음에는 Fable에게 HTML에서 직접 조작할 수 있는 작은 놀이공원 게임 두 개를 병렬로 만들게 했으며, 그중 하나는 투명 배경을 요청함
• 잠시 웹사이트에 게임을 넣는 것도 고려했지만, 직접 사용해 본 뒤에는 과하다고 판단해 롤러코스터 하나를 다듬는 쪽으로 돌아감
• 마음에 드는 롤러코스터를 얻어 템플릿에 배치했으나, 사이트 한가운데에 단독으로 놓이니 어울리지 않아 놀이공원 전체가 필요해짐
• 히어로 하단에 약 200px 높이의 얇은 띠를 만들고 롤러코스터와 같은 스타일의 놀이기구를 채움. 동시에 코딩 에이전트 구역의 구성 요소도 작업함
• 기존 롤러코스터를 시각적 기준으로 삼아 각 요소와 애니메이션을 직접 고르고 수정함
  • 놀이공원 띠를 독립된 장식이 아니라 다음 구역으로 이어지는 색상 전환부로 바꾸면서 구성이 정리됨

단일 HTML, 복제본 비교, 플레이그라운드

• 디자인이 거의 준비될 때까지 하나의 HTML 파일로 작업하고, 이후에 React의 여러 컴포넌트로 전환해 에이전트들이 병렬로 수정하도록 함
• 단일 파일은 디자인을 빠르게 복제하고 한두 요소만 바꾼 뒤 원본과 나란히 비교하기 편함
• 복제본에서 계속 작업하거나 원본으로 돌아갈 수 있도록, 제작 과정의 복제본은 삭제하지 않고 보관함
• 플레이그라운드를 만들어 색상, 글꼴, 배치 등의 변수를 직접 바꾸고 결과를 실시간으로 확인함
  • 잔디를 파란색에서 초록색으로 바꿨지만 원하는 색조가 나오지 않아, Claude에게 강조색, 글자색, 잔디색, 배경색 등을 조정할 수 있는 도구를 만들게 함
  • 에이전트에게 변경을 요청하고 기다리는 과정 대신 직접 조절하며 원하는 잔디색을 찾음
• 이런 복제와 플레이그라운드 작업을 돕는 작은 오픈소스 도구 제작도 생각하고 있으나, 시간이 날 때 시도할 수 있는 아이디어 단계임

히어로에서 사이트 전체로 확장한 스타일

• 롤러코스터 방향을 정하기 전 Fable에게 요청했던 ‘재미있는 개발 도구 웹사이트’ 시안들은 대부분 만족스럽지 않았지만, 나중에 CTA 디자인을 개선할 때 그중 한 요소를 다시 활용함
• 초기부터 다양한 디자인을 보는 이유는, 좋지 않은 시안에서도 나중에 쓸 만한 요소를 찾을 수 있기 때문임
• 흰 배경으로는 원하는 재미있는 분위기가 나지 않아 하늘색 배경과 구름을 추가했고, 이후에는 히어로가 나머지 사이트의 스타일을 결정함
• 제품의 강조색은 현재 파란색이지만, 웹사이트에서는 자연스럽게 자리 잡은 초록색을 유지함
  • 연두색과 짙은 초록색 구역, 흙 모양 푸터로 이어짐
  • 이에 따라 제품 디자인도 다시 검토해야 할 수 있음
• 전체 스타일이 정해진 뒤에도 많은 반복이 필요했지만, 새 아이콘과 시각 요소를 만들 때 참조할 일관된 기준이 생김
• 내비게이션은 흰색, 연한 파란색, 연두색, 짙은 초록색의 고정 배경을 각각 시험한 뒤, 현재 보이는 구역의 배경색으로 변하도록 바꿈

외부 디자인 참조와 도구 선택

• 비디자이너에게 기존 작업은 중요한 영감의 원천이며, 명확한 예시는 코딩 에이전트를 원하는 방향으로 이끄는 데도 유용함
• 참조한 사이트마다 활용 방식이 달랐음
  • Contextual AI: 밝은 구역이 어두운 구역으로 바뀌는 비교적 흔한 패턴을 구현할 때 자주 참조함
  • Clay: Railcode의 한 구역에 영감을 줬지만, 결과물이 원본과 뚜렷하게 닮지는 않음
  • Sentry: 결과 사이트는 다르지만, 콘텐츠와 잘 어울리는 일러스트레이션의 감각을 익히려고 반복해서 살펴봄
• 디자인 작업에는 Anthropic 모델만 사용함. 개인적인 사용 경험상 OpenAI 모델은 구체적인 지침을 줘도 어려움을 겪었으며, Fable을 가장 높게 평가함
• 초기에 Claude가 만든 수많은 웹사이트 중 99%는 버리지만, 일부 구성 요소를 다시 꺼내 쓰거나 새 아이디어를 얻음
• 마음에 드는 사이트를 반복해서 방문하고 새로운 사례를 찾으며, 특히 좋은 구성 요소는 후속 작업의 출발점으로 삼음
• 단일 HTML로 디자인을 충분히 다듬은 뒤 문구 같은 작업으로 넘어가며, 수많은 실패와 반복 속에서도 과정 자체를 즐기는 것을 가장 중요하게 여김