• 검색어를 입력해 주세요.
  • 검색어를 입력해 주세요.
디자인키트 0
Design Kits × AI GUIDE

메인 디자인은 디자인키트로,
서브페이지는 AI로

완성도 높은 메인 디자인을 기준으로
AI를 활용해 필요한 서브페이지까지 빠르게 확장해보세요.

메인 디자인 선택

디자인키트에서 원하는 메인 디자인을 고르세요.

AI에 자료 첨부

메인 디자인과 서브페이지 자료를 함께 첨부하세요.

서브페이지 완성

AI가 디자인키트의 톤앤매너에 맞춰 서브페이지를 제작해드립니다.

디자인키트 ai 활용법

AI로 홈페이지를 쉽게 만들 수 있지만,
왜 비슷해 보일까요?

AI는 빠르고 편리하지만, 학습된 패턴을 기반으로 제작하기 때문에 비슷한 레이아웃과 UI가 반복될 수 있습니다.
그래서 좋은 디자인을 기준으로 시작하는 것이 중요합니다.

비슷한 레이아웃

비슷한 레이아웃

많은 AI 생성 페이지가 유사한 섹션 순서와 배치를 따르는 경향이 있습니다.

반복되는 UI 구성

반복되는 UI 구성

카드, 버튼, 히어로 영역의 형태가 서로 닮아 있는 경우가 많습니다.

브랜드 개성의 한계

브랜드 개성의 한계

업종과 브랜드 고유의 분위기를 세밀하게 표현하기 어려울 때가 있습니다.

원하는 디자인 구현의 어려움

원하는 디자인 구현의 어려움

디자인 경험이 없다면 원하는 결과를 프롬프트만으로 설명하기 쉽지 않습니다.

AI는 빠르게 만들어주지만, 좋은 디자인의 기준까지 대신 정해주지는 않습니다.

처음부터 AI에게 맡기지 마세요.
먼저, 원하는 디자인을 찾아보세요.

디자인키트에는 다양한 업종과 스타일의 웹디자인이 준비되어 있습니다.
마음에 드는 디자인을 기준으로 정하고, AI를 활용해 필요한 페이지를 확장해보세요.

메인은 디자인키트로,
서브페이지는 AI로

전문 디자이너가 완성한 메인 디자인에, AI의 빠른 제작 능력을 더하는 방식입니다.
디자인의 기준은 지키면서, 확장은 AI로 빠르게.

01

메인 디자인 구매

업종에 맞는 메인 디자인을 PSD·HTML코드로 구매합니다.

02

메인페이지 수정

브랜드 이름, 색상, 이미지를 우리 브랜드에 맞게 바꿉니다.

03

AI에 기준 전달

완성된 메인페이지 코드와 스타일을 AI에게 참고 자료로 전달합니다.

04

서브페이지 제작

AI로 회사소개, 서비스 소개 등 핵심 페이지를 만듭니다.

05

서브페이지 확장

AI로 오시는 길, 채용안내 등 나머지 페이지를 완성합니다.

같은 AI라도,
요청하는 방식이 결과를 바꿉니다.

Claude, ChatGPT 등 어떤 AI를 쓰든 원리는 같습니다.
메인페이지의 디자인 기준을 구체적으로 전달할수록, 통일감 있는 결과를 얻을 수 있습니다.

단순한 요청

간단한 한 줄 요청으로는
결과가 제한적일 수 있어요.

회사소개 페이지 만들어줘 ↑
전달되는 정보
전달되는 정보가 부족해요.
  • 디자인 기준 없음
  • 페이지 구성 없음
  • 스타일 정보 없음
구체적인 요청

원하는 방향과 기준을 함께 전달하면
높은 결과를 얻을 수 있어요.

현재 홈페이지의 메인 디자인을 유지하고 동일한 컬러, 타이포그래피, 여백, 카드·버튼 스타일을 적용해 회사소개 페이지를 제작해줘 ↑
전달되는 정보
디자인 기준을 함께 전달해요.
컬러#13CFB8
폰트스타일제목 Bold · 본문 Regular
간격, 그리드24px 간격 · 2열 그리드
카드 스타일16px 둥근 모서리 · 얇은 테두리
버튼 스타일민트색 배경 · 흰색 글자
구체적인 디자인 기준을 전달할수록, 결과의 일관성과 완성도가 높아집니다.
실전예시

의료진 소개 페이지, 이렇게 만들어보세요.

디자인키트에서 구매한 메인 디자인을 기준으로, AI에게 자료와 요청사항을 전달하면 서브페이지까지 확장할 수 있습니다.

STEP 01

AI에게 전달할 자료를 준비하세요

사용할 AI 툴과 페이지 제작에 필요한 자료를 준비합니다.

사용할 AI

평소 사용하는 AI 툴을 활용하면 됩니다.

ChatGPT 이미지와 자료를 참고해 페이지 제작
Claude 디자인 분석과 콘텐츠 구성에 활용
Gemini 이미지 분석과 페이지 제작에 활용
첨부할 자료

메인 디자인과 실제 서브페이지에 사용할 자료를 함께 첨부하세요.

🖼️
designkit_main.jpg 구매한 메인 디자인
👨‍⚕️
doctor.jpg 의료진 이미지
📄
의료진 소개자료.txt 경력 및 소개 내용
STEP 02

AI에게 원하는 페이지를 요청하세요

페이지 종류와 유지할 디자인 요소를 구체적으로 알려주세요.

PROMPT

"첨부한 메인 디자인의 톤앤매너를 기준으로 의료진 소개 페이지를 만들어줘.

메인페이지의 컬러, 폰트, 여백, 카드와 버튼 스타일을 유지하고, 첨부한 의료진 사진과 소개 자료를 사용해서 구성해줘."

컬러 · 폰트 유지 여백 · 레이아웃 참고 카드 · 버튼 스타일 유지

디자인에서 유지할 요소를 구체적으로 작성할수록 메인페이지와 일관된 결과를 얻기 쉽습니다.

STEP 03

생성된 서브페이지를 확인하세요

메인 디자인의 스타일이 유지되었는지 확인합니다.

샘플정형외과의원
진료예약 →
AI로 제작한 의료진 소개 서브페이지

스크롤하면 아래까지 확인할 수 있어요

마음에 들지 않는 부분이 있다면? 간격, 컬러, 구성 등 수정할 부분을 AI에게 추가로 요청해 완성도를 높여보세요.

디자인키트와 AI를 함께 사용하면,
어떤 차이가 있을까요?

디자인 퀄리티는 유지하면서 제작 시간과 비용은 더욱 효율적으로 줄일 수 있습니다.

AI ONLY

AI에게 처음부터 맡기는 경우

아이디어에서 바로 시작

  • 비슷한 디자인이 나올 수 있음
  • 원하는 결과를 얻기까지 여러 번 수정
  • 브랜드만의 개성이 부족할 수 있음
  • 시간이 더 소요될 수 있음
DESIGNKITS × AI

디자인키트와 AI를 함께 사용하는 경우

완성된 디자인에서 시작

  • 완성도 높은 메인 디자인을 빠르게 수정
  • AI로 필요한 서브페이지 확장
  • 일관된 디자인 스타일 유지
  • 더 효율적이고 완성도 높은 결과

디자인키트 × AI 조합,
이런 분들에게 추천합니다.

🌐 홈페이지를 제작해야 하는 분 🖼️ 제작은 AI로, 디자인은 검증된 것을 쓰고 싶은 분 🤖 AI로 홈페이지를 직접 만들어보고 싶은 분 💰 홈페이지 제작 비용과 시간을 줄이고 싶은 분 🎨 디자인은 직접 만들기 어려운 분 ✨ 브랜드에 맞는 톤앤매너를 유지하고 싶은 분

자주 묻는 질문

디자인키트의 메인페이지를 디자인 기준으로 활용하면 됩니다. 메인 디자인의 컬러, 폰트, 버튼, 여백, 카드 스타일 등을 AI에게 참고하도록 요청하면 전체적인 톤앤매너를 유지한 서브페이지를 제작하는 데 도움이 됩니다.

제작하려는 페이지의 목적과 필요한 내용을 구체적으로 전달하는 것이 좋습니다. 회사소개, 서비스, 제품소개, 사업분야 등의 자료와 함께 메인페이지 이미지나 캡처 화면을 첨부하고, 유지하고 싶은 컬러·폰트·레이아웃 등의 디자인 기준을 알려주세요.

네. 원하는 페이지의 구성과 내용을 설명하면 AI를 활용해 HTML, CSS, JavaScript 등의 코드를 생성할 수 있습니다. 생성된 결과를 확인하면서 필요한 부분을 추가로 요청해 수정할 수도 있습니다.

AI에게 디자인 기준을 얼마나 구체적으로 전달하는지에 따라 결과가 달라질 수 있습니다. 메인페이지의 컬러, 폰트, 여백, 버튼, 카드 스타일 등을 명확하게 제시하면 전체 홈페이지의 디자인 일관성을 유지하는 데 도움이 됩니다.

ChatGPT, Claude, Gemini 등 이미지 분석과 웹페이지 제작, 코딩을 지원하는 다양한 AI 서비스를 활용할 수 있습니다. AI마다 지원 기능과 결과물에는 차이가 있으므로 평소 사용하기 편한 서비스를 선택하면 됩니다.

네. 구매한 디자인키트의 메인 디자인을 기준으로 삼아 서브페이지의 구성과 스타일을 확장하는 방식으로 활용할 수 있습니다. 메인페이지 화면과 필요한 콘텐츠 자료를 함께 제공하면 보다 일관된 결과를 얻는 데 도움이 됩니다.

네. 결과를 확인한 뒤 원하는 부분을 구체적으로 요청하면 됩니다. 예를 들어 “버튼 스타일을 메인페이지와 동일하게 변경해줘”, “이 섹션을 추가해줘”, “카드 간격을 조금 넓혀줘”처럼 수정할 요소와 방향을 명확하게 전달하면 됩니다.

DESIGNKITS × AI

완성도 있는 디자인에, AI의 속도를 더하세요.

디자인키트의 다양한 템플릿 중 마음에 드는 디자인을 고르고,
AI로 필요한 페이지를 빠르게 완성해보세요.

템플릿 둘러보기
디자인키트 카카오상담