AI로 웹서비스 만들 때, 완성도 있게 나오는 프롬프트 팁

요약

AI에게 웹서비스를 만들어달라고 할 때, 프롬프트에 딱 두 가지만 추가하면 "AI가 만든 느낌"이 확 줄어듭니다.

1. 기술스택을 Next.js + shadcn/ui로 지정
2. 아이콘은 블랙앤화이트 톤으로 고정

프롬프트 예시

[내가 만들 웹서비스를 최대한 자세히 설명], 기술스택은 Next.js와 shadcn/ui를 사용하고 아이콘은 블랙앤화이트 톤으로 해줘

이게 전부입니다. 이 한 줄만 뒤에 붙이면 됩니다.

왜 이게 되는 걸까?

1. shadcn/ui를 지정하는 이유

AI한테 "알아서 예쁘게 만들어줘"라고 하면 매번 다른 스타일이 나옵니다. 버튼 모양도 다르고, 간격도 들쭉날쭉하고, 전체적으로 통일감이 없습니다.

shadcn/ui는 이미 잘 디자인된 UI 컴포넌트 모음입니다. 이걸 지정하면 AI가 처음부터 디자인을 만드는 게 아니라, 검증된 컴포넌트를 조합하게 됩니다.

핵심은 "결과물의 하한선이 올라간다"는 겁니다. 못 만들어도 일정 수준 이상은 보장됩니다.

2. 아이콘 톤을 흑백으로 고정하는 이유

AI가 아이콘을 넣으면 색이 중구난방이 됩니다. 파란 아이콘, 초록 아이콘, 빨간 아이콘이 한 화면에 섞이는 순간 "AI가 대충 만든 느낌"이 바로 납니다.

흑백으로 통일하면 이런 색감 실수가 원천 차단됩니다. 깔끔하고 일관된 분위기가 잡히고, 오히려 전문가가 만든 것처럼 보입니다.

3. Next.js를 지정하는 이유

React 기반이라 AI가 가장 잘 아는 프레임워크입니다. shadcn/ui와 궁합도 좋습니다. AI가 코드를 생성할 때 에러가 적고, 바로 돌아가는 확률이 높아집니다.

다른 프레임워크를 쓰면 AI가 버전을 헷갈리거나 deprecated된 문법을 쓰는 경우가 많은데, Next.js는 학습 데이터가 충분해서 그런 문제가 적습니다.

핵심 원리

AI한테 자유를 많이 주면 산만해집니다. 반대로 좋은 제약 조건을 주면 퀄리티가 올라갑니다. "알아서 해줘"가 아니라 "이 도구를 써서 해줘"라고 범위를 좁혀주는 게 포인트입니다.

정리