바이브 코딩한 웹사이트, 디자이너가 만든 것처럼 보이는 이유
How our vibe coded website looks like a designer made it
Railcode 창업자 Yakko Majuri가 LLM으로 만든 자신의 웹사이트가 디자이너의 손길을 거친 듯 보이는 과정을 공유한다. 그는 수많은 프로토타입과 프롬프트를 공개하며, 코딩 에이전트가 오히려 디자인에 대한 흥미를 높여준다고 말한다. 롤러코스터 콘셉트가 어떻게 탄생했는지, 포크와 플레이그라운드를 활용한 반복 작업, 그리고 영감을 얻는 방법까지 솔직하게 담았다.
대부분의 논의가 LLM 디자인 쓰레기에 집중될 때, 나는 코딩 에이전트 덕분에 오히려 디자인에 더 흥미를 느끼게 되었다. 예전에는 속수무책이었지만 이제는 내가 가진 창의적인 비전을 현실로 만들 수 있다.
HN 토론
77- fiatpandas
OP, 당신은 디자인 학교에서 가르치는 디자인 프로세스를 무심코 발명했네요. 이제 공식적으로 자신을 디자이너라고 불러도 됩니다.
1) 높은 수준의 기능적 목표를 가진다
2) 영감을 받고 모티프를 떠올린다
3) 그 모티프 안에서 넓게 탐색한다
4) 하나의 방향으로 좁히고 반복한다
5) 창의적으로 만족하고 디자인이 1단계의 목표를 충족할 때까지 세부 사항을 다듬는다.
- ananmays
디자이너가 만든 거 맞아요! 당신이 거친 과정이 바로 디자인이라고 불리는 겁니다!
- jjcm
그들의 초기 시도 중 상당수는 초기 gpt 출력물이나 claude 디자인 출력물처럼 보이는데, 그것들은 비슷한 냄새가 많이 나죠. 하지만 요즘 image->html 흐름이 얼마나 좋은지 사람들은 과소평가하고 있어요.
저는 gemini에게 이 웹페이지를 프롬프트로 설명하게 한 다음, image -> code 파이프라인에 넣었어요. 참고로 제 입력은 전혀 없었습니다:
https://html.non.io/railcode-animated
이건 Opus 5.5가 low effort로 만든 건데, 맞아요 스펙은 이미 원본 사이트에서 나온 거지만, 0->1에서 보라색 그라디언트나 claude 갈색이 나오지 않는 건 이제 충분히 가능합니다.
- quicklywilliam
여기서 최고의 팁: 색상이나 폰트 같은 세부 사항을 조정할 때, Claude에게 사이트 안에 바로 쓸 일회용 피커 도구를 만들어 달라고 하세요.
돌이켜 보면 완전히 뻔한데 저는 생각 못 했어요 (아마 25년 동안 도구를 재사용 가능한 컴포넌트 관점에서 생각해 왔기 때문일 겁니다).
글 써주셔서 감사합니다!
- chmod775
답: 인간이 반복적인 과정을 통해 디자인했기 때문입니다. LLM은 그저 코드를 작성했을 뿐이고요.