코딩 에이전트로 완성도 높은 웹사이트를 제작하려면 작업 방식의 전환이 필요합니다. 한 번의 프롬프트 입력으로 완벽한 UI 디자인을 얻기 어렵습니다. 대량의 프로토타입을 만들어 요소를 조합하는 접근이 현실적인 대안입니다.

다양성을 확보하는 시안 탐색 방식

Railcode팀은 제품 인프라의 가드레일 개념과 재미를 결합해 롤러코스터 컨셉을 선택했습니다. 단일 디자인에 의존하지 않고 개념 하나당 최소 4개에서 10개의 버전 시안을 생성했습니다. 미니멀한 구성부터 과감한 시도까지 폭넓게 탐색합니다.

자유롭게 생성된 디자인은 대부분 버려지지만 예상치 못한 아이디어를 제공합니다. 과한 네온 컬러의 롤러코스터 시안은 기존 ASCII 디자인에서 벗어나 새로운 전환점을 만듭니다. Rollercoaster Tycoon 게임 요소를 착안해 웹사이트 전체 테마를 놀이공원으로 확장했습니다. 버려지는 시안 속에서 유용한 시각 조각을 골라내는 작업이 바탕이 됩니다.

시각적 기준 확립과 빠른 피드백 루프

디자인 초기 단계에서는 단일 HTML 파일 형태로 작업을 유지했습니다. 복제본을 나란히 두고 색상과 글꼴, 배치를 직접 비교하고 조절하는 전용 도구도 함께 만들어 사용했습니다. 수정과 확인 사이의 지연을 최소화해야 에이전트와의 협업 효율이 높아집니다.

중심이 되는 시각적 기준(Visual Anchor) 을 먼저 확립한 후 하단 테마 띠와 아이콘, 애니메이션으로 확장을 진행했습니다. 에이전트가 코드 구현을 담당하더라도 최종 채택과 배치 판정은 사람이 직접 맡았습니다. 모든 프로토타입과 프롬프트를 인덱싱해 제작 과정을 추적할 수 있도록 정리했습니다. 에이전트는 무수한 옵션을 제공하고 개발자는 선택을 고도화하는 큐레이터 역할을 수행합니다.

코딩 에이전트는 개발자에게 디자인 구현의 장벽을 낮춰주는 유용한 도구입니다. 프롬프트 작성보다 생성된 시안을 선별하고 다듬는 과정이 결과물의 품질을 결정합니다.

요약

  • 한 번에 완성하는 방식 대신 4-10개의 시안을 대량 생성한 후 마음에 드는 요소를 조합하는 접근이 효과적입니다.
  • 디자인 작업 초기에는 단일 HTML 파일과 실시간 비교 도구를 활용해 피드백 루프를 극대화해야 합니다.
  • 에이전트는 수많은 옵션을 제안하는 역할을 담당하고 최종 선택과 조율은 사람이 직접 다듬어야 품질이 올라갑니다.