r/vibecoding•3개월 전•17•36

AI 특유의 뻔한 웹 디자인에서 벗어날 방법이 있을까요?

Any advice to escape the AI slop web design look?

핵심 요약

AI가 생성한 천편일률적인 SaaS 웹 디자인에서 벗어나 독창적이고 의도적인 페이지를 만드는 방법을 논의합니다.

디자인 기본기 — 그래픽 디자인 원칙과 이론을 학습하여 AI 결과물에 의존하지 않음
제약 조건 설정 — 색상, 폰트, 디자인 시스템 등 구체적인 가이드라인을 AI에 제공함
수동 작업 병행 — 피그마 등을 활용해 직접 디자인하거나 기존 레퍼런스를 참고함
AI 도구 활용 — 단순히 전체 페이지를 맡기기보다 특정 컴포넌트나 브랜드 키트를 활용함

저는 랜딩 페이지를 개선해서 평범한 AI SaaS 템플릿 같은 느낌을 좀 줄이고 싶습니다.

다들 아시죠: 어두운 그라데이션, 유리 같은 카드, 빛나는 덩어리, 무작위 3D 도형들.

처음엔 좋아 보이지만, 뭔가 흔해 빠진 느낌도 듭니다.

웹사이트를 디자인하거나 만드는 분들께 묻습니다. 페이지가 더 진짜 같고, 의도적이며, AI 슬롭(slop) 같지 않게 느껴지게 하려면 실제로 무엇이 도움이 될까요?

원문

커뮤니티 목록

r/vibecoding•3개월 전•17•36

AI 특유의 뻔한 웹 디자인에서 벗어날 방법이 있을까요?

Any advice to escape the AI slop web design look?

핵심 요약

AI가 생성한 천편일률적인 SaaS 웹 디자인에서 벗어나 독창적이고 의도적인 페이지를 만드는 방법을 논의합니다.

디자인 기본기 — 그래픽 디자인 원칙과 이론을 학습하여 AI 결과물에 의존하지 않음
제약 조건 설정 — 색상, 폰트, 디자인 시스템 등 구체적인 가이드라인을 AI에 제공함
수동 작업 병행 — 피그마 등을 활용해 직접 디자인하거나 기존 레퍼런스를 참고함
AI 도구 활용 — 단순히 전체 페이지를 맡기기보다 특정 컴포넌트나 브랜드 키트를 활용함

저는 랜딩 페이지를 개선해서 평범한 AI SaaS 템플릿 같은 느낌을 좀 줄이고 싶습니다.

다들 아시죠: 어두운 그라데이션, 유리 같은 카드, 빛나는 덩어리, 무작위 3D 도형들.

처음엔 좋아 보이지만, 뭔가 흔해 빠진 느낌도 듭니다.

주요 댓글

r/vibecoding

대부분의 사용자는 AI가 생성한 뻔한 디자인에서 벗어나려면 디자인 기본기를 익히거나, AI에게 구체적인 제약 조건을 설정하고, 직접 디자인 요소를 가미하는 등 수동적인 노력이 필요하다고 조언합니다.

90년대 웹사이트처럼 만들어보세요. 다들 30년 전에 만든 줄 알 거예요!

무엇이 좋은 디자인인지, 무엇이 눈에 띄는 디자인인지 모르면 그런 결과물을 만들기도 어렵습니다. 지금의 'Vibecoding'도 그 사실을 바꿔주진 않아요. 일반적인 디자인 목표와 규칙, 그리고 그래픽 디자인에 대해 공부하는 걸 추천합니다.

글쓴이가 디자인 개선에 도움 될 만한 툴이나 팁, 트릭, 프롬프트 같은 걸 찾는 거 같은데. 그래도 '디자이너가 되어라'라는 조언이 확실히 정답이긴 함.

깃허브에서 컴포넌트 라이브러리와 UI 키트를 찾아보세요. 스토리북(Storybooks)도 모범 사례를 찾기 좋은 곳입니다.

AI가 뱉어내는 쓰레기를 수정하느라 몇 시간씩 낭비하는 것보다, 괜찮은 레포를 포크해서 시작점으로 쓰는 게 훨씬 쉬울 겁니다.

전 항상 피그마로 직접 앱이나 사이트를 디자인하는 걸 좋아합니다. 제 고객은 두 부류예요. 좋은 결과물을 원하는 사람과 빨리 만들길 원하는 사람. 빨리 원하는 사람들에겐 뻔한 디자인이든 말든 신경 안 쓰지만, 좋은 결과물을 원하는 사람들에겐 제가 자랑스러워할 만한 독특한 걸 만들기 위해 시간을 들이는 걸 정말 즐깁니다. 결국 포트폴리오가 중요한 거니까, AI 시대에는 아무도 당신의 프로그래밍 실력에 큰 관심을 두지 않을 테니 디자인 지식을 갖추는 게 중요합니다.

그렇지, 직접 디자인해 봐...

웹 디자인 기초를 배워.

그러니까 AI 슬롭(slop)을 가리고 싶다는 건가요? 슬롭이 아니라면 상관없겠지만, 기본적인 디자인 공부를 좀 하는 게 어떨까요. 언젠가는 그냥 무작위 아이디어만 던지는 것보다 본인이 더 많은 입력을 넣어야 할 때가 올 겁니다...

바로 그 이유 때문에 제가 AI Brand Kits를 만들었습니다!

당신 랜딩 페이지도 여전히 AI 슬롭 느낌이 좀 나네요, 특히 모바일에서요. 이 문제를 해결하겠다는 도구라면, 웹사이트 자체가 그 증명이 되어야 합니다.

-1

편집: 당연히 무료입니다.

네! 제 Ron Draper 스킬을 써보세요. 브랜드 키트 전체를 만들어줍니다.

https://github.com/DMAX-Vibes/skills

초기 단계보다는 아이디어가 잘 다듬어졌을 때 가장 잘 작동합니다. 한번 시도해 보세요. 마음에 안 들면 잃을 것도 없으니 그냥 키트를 버리면 되죠. 하지만 저한테는 너무 잘 작동해서 스킬로 만들었습니다.

결과물을 볼 수 있으면 좋겠네요!

이거 진짜 쩌네요. 공유해 줘서 고마워요.