AI가 만든 웹사이트가 아마추어처럼 보이는 이유와 해결책

제가 AI에게 만들게 한 웹사이트가 왜 이렇게 아마추어 같았는지 알아냈습니다.

그 이유는 "제대로 된 디자인 규칙을 따르지 않았기" 때문이었습니다.

이를 해결해 줄 무료 추가 기능(skill)이 공개되었습니다. 이 기능은 AI 에이전트에게 '스위스 디자인'의 문법 전체를 가르쳐 주는 것입니다.

• 모든 것을 깔끔하게 정렬하는 그리드 기반 레이아웃 설계
• 텍스트 크기를 활용하여 시각적 계층 구조(visual hierarchy) 만들기
• 여백과 색상 구성에 대한 엄격한 규칙들

단순히 느낌에 의존하는 대신, 이러한 요소들을 코드 내의 실제 규칙으로 구현합니다.

여기서 놀라운 점은 AI에게 "좋게 만들어 줘"와 같이 모호하게 요청하는 것이 아니라, 디자인 판단 기준 자체를 전달할 수 있다는 것입니다.

출처는 스위스의 전설적인 디자이너인 뮐러＝블록만(Müller-Brockmann)이 체계화한 레이아웃 설계의 고전 명저입니다.

즉, AI가 전문가의 교과서에 따라 작업하게 되는 것입니다.

이는 본질적으로 "대충 보기 좋게"에서 "재현 가능한 설계 규칙"으로의 전환을 의미합니다.

• 열이 정확히 정렬된 레이아웃
• 텍스트 크기의 강약을 이용해 읽는 순서를 만드는 것
• 흰 배경 + 검은색에 가까운 글자색 + 포인트 색상 1가지라는 간결한 배색

AI가 처음부터 이러한 "무너지지 않는 틀(型)"을 지키면서 만들게 됩니다.

흥미로운 점은 AI에게 "하지 말아야 할 것"까지 지정되어 있다는 것입니다.

• 따뜻한 계열의 크림색에서 흔히 보이는 흐릿한 느낌은 금지
• 파란색이나 보라색 그라데이션도 금지

게다가 완성된 후에도 AI 스스로 화면을 촬영하여 "선이 1픽셀이라도 어긋나진 않았는지"를 자동으로 체크합니다. 단순히 보기 좋게 만들고 끝나는 것이 아닙니다.

심지어 무료로 공개되어 있습니다. Hyperagent라는 코딩용 AI 에이전트 팀에서 배포했으며, Claude Code 등 다른 AI 에이전트에서도 사용할 수 있습니다.

내용(skill 목록)은 여기를 참고하세요.

참고한 원 포스트는 여기입니다.

이 게시물이 도움이 되었다면,
@so_ainsight
을 팔로우해주세요.
좋아요와 리포스트도 부탁드립니다.