AI로 만든 티 안 나는 웹사이트 제작을 위한 주말 플레이북

실용적 조언

Figma에서 Linear나 Arc 스타일의 컴포넌트 라이브러리를 참고하여 디자인 기반을 다질 것
AI에게 브랜드 컬러와 커스텀 폰트 스택을 처음부터 강제로 지정할 것
최종 단계에서 수동으로 호버 상태나 애니메이션을 조정하여 '수제' 느낌을 더할 것

섹션별 상세

빈 캔버스에서 시작하는 대신 실제 Figma 파일을 기반으로 작업을 시작해야 한다. 데스크톱, 모바일, 태블릿용 3개 화면을 설계한 뒤 Figma 링크를 Kombai나 v0에 직접 입력하여 구조를 생성한다. 이 방식은 AI가 임의로 레이아웃을 추측하는 것을 방지하고 디자인의 일관성을 유지하는 핵심 장치이다.

첫 프롬프트에서 AI의 기본 디자인 습관을 명시적으로 제한하는 전략을 사용한다. Tailwind의 기본 보라색 계열 사용 금지, 버튼 내 이모지 제거, 부유하는 입자 효과 제외 등을 명령하여 '양산형 AI 사이트' 느낌을 사전에 차단한다. 브랜드 고유의 색상과 폰트 스택을 강제로 적용하도록 지시하여 독창성을 확보한다.

text

"no default tailwind indigo/purple, no emojis in buttons, no floating particles, no sara maller hero sections, no generic container padding that looks like every other v0 site"

AI 특유의 양산형 디자인을 방지하기 위해 첫 프롬프트에 포함해야 할 부정 명령어 예시이다.

모바일 최적화는 코드가 생성된 즉시 다양한 기기에서 확인하고 스크린샷 피드백을 통해 해결한다. 화면이 깨지거나 어색한 부분을 캡처하여 Claude나 Cursor에 업로드하고 'Figma 디자인과 정확히 일치시키라'고 명령한다. 수동으로 CSS를 수정하는 대신 시각적 근거를 제공하여 AI가 반응형 문제를 5분 내에 해결하도록 유도한다.

AI 작업이 완료된 후 약 30분간 인간의 손길을 더하는 마무리 공정을 거친다. 호버 상태나 스크롤 애니메이션의 미세 조정, 코드 내 AI 생성 주석 삭제, 사용자용 이스터 에그 추가 등을 수행한다. 이러한 디테일 수정은 개발자들이 흔히 발견하는 AI 특유의 흔적을 지우고 수제 웹사이트의 느낌을 완성한다.

용어 해설

바이브 코딩(Vibe Coding): — AI에게 구체적인 로직 대신 추상적인 분위기나 고수준 요구사항을 전달하여 코드를 생성하는 방식이다. 개발자가 직접 코드를 작성하는 대신 AI와의 대화를 통해 결과물을 만들어내는 새로운 개발 패러다임을 의미한다.
테일윈드 CSS(Tailwind CSS): — 유틸리티 클래스 기반의 CSS 프레임워크로, AI 코드 생성 도구들이 기본적으로 가장 많이 채택하는 도구이다. 이로 인해 AI가 만든 사이트들이 서로 비슷한 디자인 스타일을 갖게 되는 원인이 되기도 한다.
마이크로 인터랙션(Micro-interactions): — 사용자의 동작에 반응하는 아주 작은 애니메이션이나 시각적 피드백을 의미한다. 버튼 클릭 시의 미세한 변화나 스크롤에 따른 요소의 움직임 등이 포함되며, 웹사이트의 완성도를 결정짓는 중요한 요소이다.

언급된 도구

Claude추천

코드 생성 및 디버깅용 LLM

Cursor추천

AI 기반 코드 에디터

v0추천

UI 생성 및 프론트엔드 개발 도구

Kombai추천

Figma 디자인을 코드로 변환하는 도구

Figma추천

디자인 소스 및 가이드라인 작성 도구

언급된 리소스

문서Linear Design Style

문서Arc Browser Design

DemoUnsplash Assets

DemoPexels Assets