AI한테 웹사이트 만들어달라고 하면, 항상 비슷한 디자인이 나온다.
다크 배경에 오렌지 포인트. 둥근 카드. 그라데이션 버튼. AI로 웹사이트 만들어본 사람이라면 한 번쯤 본 적 있을 거다. "기본값"이 있는 거다.
처음엔 그게 나쁘지 않았다. 깔끔하니까. 근데 두 번째, 세 번째 프로젝트도 같은 느낌이 나오면 문제가 된다. "예쁘게 해줘"를 아무리 반복해도 똑같은 톤이 나온다.
결론부터 말하면, 디자인 용어를 알면 결과가 달라진다.
1. "예쁘게 해줘"의 한계
"모던하게 해줘", "깔끔하게 해줘" — 이런 지시는 AI 입장에서 너무 모호하다. 그래서 안전한 기본값으로 간다.
문제는 모든 프로젝트가 그 기본값으로 수렴한다는 거다. 내가 만든 세 개의 사이트가 전부 같은 느낌이 되는 순간이 온다.
2. 용어를 바꿔봤다
어느 날 "벤토그리드"라는 단어를 알게 됐다. 카드를 크기별로 배치하는 레이아웃 방식이다. 찻집 메뉴 페이지를 만들면서 써봤다.
벤토그리드 레이아웃으로 바꿔줘.
오가닉 네츄럴 톤으로.결과가 완전히 달랐다. 카드가 크기별로 나뉘고, 따뜻한 톤에 둥근 모서리가 잡혔다. "예쁘게 해줘"로는 절대 안 나오는 결과였다.
다른 프로젝트에서도 시도해봤다. 기술 블로그 매거진을 만들 때는 이렇게 지시했다.
Swiss Grid 레이아웃으로 만들어줘.
매거진 스타일 타이포그래피.격자 기반에 강한 타이포, 여백이 살아있는 레이아웃이 나왔다. 같은 "카드 레이아웃"인데 용어 하나로 완전히 다른 결과.
또 다른 프로젝트에서는 글래스모피즘을 적용했다.
글래스모피즘 스타일로.
다크 배경에 반투명 카드.반투명 유리 느낌의 카드에 블러 효과가 들어갔다. 다크 테마인 건 같은데, 기본값과는 다른 분위기가 나온다.
3. 레이아웃 용어도 마찬가지다
디자인 스타일만이 아니다. 화면 구조를 설명할 때도 용어가 중요하다.
처음에는 이렇게 말했다.
"위에 있는 메뉴를 왼쪽으로 옮겨줘."
이러면 AI가 어느 메뉴인지, 왼쪽이 어디인지 헷갈려한다. 지금은 이렇게 말한다.
"navbar를 sidebar로 바꿔줘."
한 줄이면 끝난다. AI가 정확히 알아듣는다.
몇 가지 더:
- "아래 네비게이션" →
footer navigation - "옆에 나오는 목록" →
sidebar - "상단 고정 메뉴" →
sticky header - "빵 부스러기 같은 경로 표시" →
breadcrumbs
개발 용어가 아니라 UI 용어다. 개발을 몰라도 이 단어들만 알면 AI 지시가 정확해진다.
4. 레퍼런스 캡처가 제일 빠르다
용어를 아는 것보다 더 확실한 방법도 있다. 마음에 드는 웹사이트를 캡처해서 보여주는 거다.
이 캡처처럼 만들어줘.
[스크린샷 첨부]AI가 레이아웃, 색상, 간격을 캡처에서 읽어낸다. 용어를 몰라도 "이거처럼"이 통한다. 내가 제일 많이 쓰는 방법이다.
다만 이것만 쓰면 한계가 있다. 캡처와 비슷하게는 나오는데, 미세 조정을 하려면 결국 용어가 필요하다. "카드 간격 좀 더 넓혀줘"보다 "grid gap을 24px로"가 정확하다.
5. 정리하면
| 지시 | 결과 |
|---|---|
| "예쁘게 해줘" | AI 기본값 (매번 같은 느낌) |
| "벤토그리드 + 오가닉 톤" | 카드 크기별 배치, 따뜻한 톤 |
| "Swiss Grid + 매거진 타이포" | 격자 레이아웃, 강한 타이포 |
| "글래스모피즘 + 다크" | 반투명 카드, 블러 효과 |
| "navbar → sidebar" | 정확한 구조 변경 |
| 캡처 첨부 + "이거처럼" | 가장 빠른 결과 |
용어를 모르면 AI한테 항상 같은 결과를 받는다. 디자이너가 될 필요는 없다. 용어 서너 개만 알면 된다.
알아두면 쓸모 있는 디자인 용어
참고로 내가 실제로 써본 것들만 정리한다.
레이아웃 스타일
- 벤토그리드 (Bento Grid): 카드를 크기별로 배치. 애플 스타일
- Swiss Grid: 격자 기반, 매거진 느낌
- 매소닉 레이아웃 (Masonry): 핀터레스트 같은 폭포 배치
디자인 톤
- 글래스모피즘 (Glassmorphism): 반투명 카드 + 블러
- 뉴모피즘 (Neumorphism): 부드러운 볼록/오목 효과
- 오가닉 네츄럴: 따뜻한 톤, 둥근 모서리, 자연스러운 느낌
UI 구조
- navbar / sidebar / footer: 메뉴 위치
- breadcrumbs: 현재 위치 경로 (홈 > 카테고리 > 글)
- sticky header: 스크롤해도 고정되는 상단
- hero section: 첫 화면 대형 배너 영역
- CTA (Call to Action): "시작하기" 같은 행동 유도 버튼
전부 외울 필요 없다. 필요할 때 하나씩 써보면 된다. "이런 게 있구나" 정도만 알아도 AI한테 지시하는 폭이 넓어진다.
이 글은 Claude Code 플레이북을 만들면서 배운 것을 비개발자 시점으로 정리한 시리즈입니다.
