이 도구가 필요한 순간
AI 코딩 도구에 무작정 원하는 사이트를 만들어 달라고 요청하면, 요청할 때마다 전혀 다른 색상과 폰트, 다른 분위기의 결과가 나오는 경험을 해보셨을 겁니다. "모던하고 깔끔하게", "신뢰감 있게"처럼 추상적인 표현만으로는 AI가 정확히 어떤 파란색을, 어떤 서체를, 얼마나 둥근 모서리를 써야 할지 판단할 근거가 없기 때문입니다. 결과물은 그럴듯해 보이지만 막상 보면 상상했던 것과 다르고, 요청 문구를 고쳐도 이번엔 또 다른 방향으로 튀는 일이 반복됩니다.
디자인을 전공하지 않은 사람이 색상 팔레트, 타이포그래피, 여백 체계를 말로 정확히 설명하기는 쉽지 않습니다. "세련된 파란색"이 정확히 어떤 HEX 값을 뜻하는지, "적당한 여백"이 몇 px인지는 사람마다 기준이 다르고, AI 역시 그 모호함을 나름대로 임의로 해석할 수밖에 없습니다. 이 도구는 그 간극을 메우기 위해 만들어졌습니다. 말로 설명하는 대신 버튼을 눌러가며 눈으로 원하는 조합을 찾고, 그 결과를 AI가 오해 없이 읽을 수 있는 정확한 수치(색상 HEX 값, 폰트 이름, 모서리 반경, 그림자 강도, 여백 크기 등)로 바꿔 프롬프트에 담아줍니다.
이렇게 만든 프롬프트를 Claude Code, v0, Lovable, Cursor 같은 AI 코딩 도구에 붙여넣으면, 매번 다른 결과가 나오는 대신 미리보기에서 확인한 것과 같은 계열의 디자인을 훨씬 안정적으로 재현할 수 있습니다.
사용 방법
- 프리셋 클릭으로 시작 — 모던, 미니멀, 클래식, 컬러풀 등 12가지 프리셋 중 마음에 드는 분위기를 하나 골라 클릭합니다. 색상, 서체, 모서리, 그림자 등 주요 설정이 한 번에 그 프리셋 조합으로 바뀝니다.
- 세부 조정 — 프리셋을 기준점 삼아 색상 스와치나 직접 색상 지정, 제목·본문 서체, 버튼 모양, 여백, 히어로 레이아웃 등 원하는 항목만 하나씩 눌러 바꿉니다. 오른쪽 미리보기가 그때그때 즉시 반영됩니다.
- 데스크톱/모바일 확인 — "미리보기 화면"에서 데스크톱과 모바일을 전환해, 두 화면 모두에서 만족스러운 조합인지 확인합니다.
- 프롬프트 복사 → AI 도구에 붙여넣기 — 언어(영어/한국어)를 고른 뒤 "프롬프트 복사" 버튼을 누르고, 사용 중인 AI 코딩 도구의 입력창에 붙여넣습니다.
AI 도구별 붙여넣는 법
Claude Code — 터미널이나 채팅창에 복사한 프롬프트를 붙여넣은 뒤, 이어서 "포트폴리오 사이트를 만들어줘"처럼 실제로 만들고 싶은 것을 함께 요청합니다. Claude Code는 프롬프트에 담긴 색상·서체·형태 지시를 코드 생성 규칙으로 읽어 파일을 작성하기 때문에, 한국어 프롬프트를 그대로 붙여넣어도 무리 없이 반영됩니다.
v0 / Lovable — 새 프로젝트를 시작할 때 첫 메시지에 프롬프트를 포함시키는 것이 가장 효과적입니다. 두 도구 모두 첫 요청에서 디자인 시스템을 정하고 이후 화면들에도 이어서 적용하는 방식으로 동작하기 때문에, 대화 초반에 넣을수록 전체 결과물의 일관성이 높아집니다.
Cursor — 특정 컴포넌트나 페이지 파일을 새로 생성해 달라는 요청과 함께 프롬프트를 붙여넣으면, 해당 파일의 스타일 코드(Tailwind 클래스나 CSS 변수)에 지정한 색상·간격 값이 반영됩니다. 기존 파일을 수정할 때도 "이 프롬프트의 스타일로 바꿔줘"라는 지시와 함께 붙여넣으면 됩니다.
좋은 결과를 얻는 팁
- 대화 초반에 넣기 — 디자인 프롬프트는 대화가 길어진 뒤보다 첫 메시지나 그에 가까운 시점에 넣을수록 AI가 이후 모든 화면에 일관되게 적용합니다.
- 구조 요청과 함께 쓰기 — 디자인 프롬프트만 단독으로 보내기보다는 "이 디자인으로 랜딩 페이지를 만들어줘"처럼 무엇을 만들지 함께 전달해야 AI가 디자인과 구조를 동시에 반영할 수 있습니다.
- 결과가 다르면 같은 프롬프트로 재시도 — 같은 프롬프트를 다시 붙여넣어도 AI 도구의 특성상 결과가 조금씩 달라질 수 있습니다. 색상이나 형태가 크게 벗어났다면 새 대화를 열고 프롬프트를 다시 첫 메시지로 붙여넣어 보세요.
- 프롬프트를 통째로 붙여넣기 — 일부만 잘라서 전달하면 색상은 반영되지만 모서리나 그림자 같은 세부 값이 누락될 수 있습니다. "프롬프트 복사" 버튼으로 복사한 내용을 수정 없이 그대로 붙여넣는 것이 가장 안정적입니다.