AI로 홈페이지 서브페이지 만들기, 메인 디자인과 톤앤매너는 어떻게 맞출까?

AI로 서브페이지를 만들다 보면 메인 화면과 분위기가 달라지는 경우가 있습니다. 컬러는 비슷한데 버튼 모양이 다르거나, 카드 스타일과 여백이 달라서 같은 홈페이지인데도 별개의 화면처럼 보이기도 합니다.

디자인키트에서 선택한 메인 디자인과 서브페이지에 사용할 사진·텍스트 자료를 AI에 함께 전달하고, 메인에서 사용한 컬러와 폰트, 여백, 카드, 버튼 스타일을 이어가도록 요청하는 방식입니다.

이렇게 작업하면 페이지마다 새로운 디자인을 다시 만들기보다 이미 정해진 디자인 흐름 안에서 회사소개, 의료진 소개, 서비스 상세 같은 화면을 이어가기 쉬워집니다.

AI로 만든 서브페이지가 메인과 달라 보이는 이유

AI는 빠르게 페이지 구조를 만들 수 있지만 참고할 디자인이 충분하지 않으면 익숙한 구성으로 화면을 채우는 경우가 있습니다.

큰 제목과 설명이 들어간 상단 영역, 둥근 카드, 비슷한 버튼, 넓은 여백처럼 여러 사이트에서 자주 보이는 UI가 반복되기도 합니다.

이런 구성이 항상 문제가 되는 것은 아닙니다. 이미 메인 디자인이 정해진 홈페이지에 새로운 페이지를 붙일 때는 조금 다르게 봐야 합니다.

이런 차이가 보인다면 새 페이지를 다시 꾸미기보다 메인 화면에서 반복되는 디자인 요소를 찾아 그대로 이어가는 편이 자연스럽습니다.

디자인키트 메인 디자인을 AI에 함께 보여주는 이유

글로 디자인 분위기를 설명하는 것과 실제 화면을 함께 보여주는 것은 결과가 달라질 수 있습니다.

예를 들어 전문적인 병원 홈페이지처럼 만들어달라고 요청하면 사람마다 떠올리는 화면도 다르고 AI가 받아들이는 방향도 달라질 수 있습니다.

반대로 기준이 되는 메인 디자인을 함께 첨부하면 컬러 조합, 제목 크기, 콘텐츠 여백, 카드 모양, 버튼 스타일처럼 눈으로 확인할 수 있는 정보가 생깁니다.

의료진 소개 페이지를 만든다면 메인 디자인에 의료진 사진, 경력, 소개 내용을 함께 넣는 식입니다.

실제 사용할 자료까지 같이 넣어두면 임시 문구를 채운 페이지보다 완성된 모습을 예상하기 쉽고, 나중에 콘텐츠를 교체하면서 레이아웃을 다시 손보는 일도 줄일 수 있습니다.

톤앤매너를 맞출 때 살펴볼 부분

메인 디자인을 첨부했다고 해서 서브페이지가 자동으로 같은 분위기로 만들어지는 것은 아닙니다.

메인에서 어떤 요소를 계속 이어갈지 함께 적어주는 편이 좋습니다.

컬러, 폰트, 여백, 카드, 버튼 스타일처럼 페이지마다 반복해서 보이는 요소를 먼저 짚어주면 메인과 서브페이지의 차이를 줄이기 쉽습니다.

서브페이지에 들어갈 실제 자료도 함께 준비해보세요

AI에 메인 디자인만 보여주고 내용은 임의로 채우게 하면 실제 적용 단계에서 다시 수정할 부분이 늘어날 수 있습니다.

의료진 소개 페이지라면 의료진 사진, 이름, 진료 분야, 경력과 소개 내용이 필요합니다.

회사소개 페이지라면 회사 소개 문구와 주요 사업 내용, 이미지가 필요하고, 서비스 상세페이지라면 서비스명과 설명, 관련 이미지와 특징이 있어야 합니다.

임시 텍스트로 먼저 만든 화면에 실제 내용을 넣으면 제목이 두 줄로 늘어나거나 카드 높이가 달라지는 경우도 있습니다.

AI에게 어떻게 요청하면 좋을까요?

페이지 이름만 적어서 만들어달라고 하기보다 어떤 디자인을 따라야 하는지 함께 적어주는 편이 좋습니다.

의료진 소개 페이지를 만든다면 첨부한 메인 디자인을 기준으로 작업해달라고 한 뒤, 메인에서 사용한 컬러와 폰트, 콘텐츠 여백, 카드와 버튼 스타일을 유지해달라고 요청할 수 있습니다.

여기에 실제 의료진 사진과 소개 내용을 사용해달라는 조건을 더하면 됩니다.

프롬프트를 무조건 길게 쓸 필요는 없습니다. 바뀌면 안 되는 부분과 실제로 사용할 자료를 구체적으로 적는 편이 결과를 맞추기 좋습니다.

의료진 소개 외 다른 서브페이지에도 사용할 수 있을까요?

의료진 소개 페이지와 같은 방식은 다른 서브페이지에도 활용할 수 있습니다.

회사소개, 서비스 상세, 포트폴리오, 시설 소개처럼 메인 홈페이지에서 이어지는 페이지도 기준이 되는 디자인과 실제 콘텐츠를 함께 전달해서 만들어볼 수 있습니다.

다만 모든 서브페이지를 같은 레이아웃으로 만들 필요는 없습니다.

페이지마다 콘텐츠 배치는 달라져도 괜찮습니다. 컬러와 폰트, 여백, 카드와 버튼처럼 사이트 전체에서 반복해서 보이는 요소를 맞춰두면 서로 다른 역할을 하는 페이지도 같은 홈페이지 안에 자연스럽게 이어집니다.

첫 결과가 메인 디자인과 다르다면

AI가 만든 첫 화면이 마음에 들지 않는다고 해서 처음부터 다시 만들 필요는 없습니다.

간격이나 컬러, 구성이 메인과 다르게 보인다면 해당 부분만 다시 지정해 수정할 수 있습니다.

메인보다 섹션 간격이 너무 넓다면 간격을 줄여달라고 하고, 버튼 모양이 다르면 메인 화면의 버튼 형태에 맞춰달라고 요청하면 됩니다.

카드가 필요 이상으로 많거나 콘텐츠 순서가 어색하다면 해당 부분만 따로 조정할 수도 있습니다.

ChatGPT·Claude·Gemini, 어떤 도구를 써도 괜찮을까요?

AI 도구는 평소 익숙하게 사용하는 것을 선택하면 됩니다.

디자인키트와 함께 활용할 수 있는 도구로는 ChatGPT, Claude, Gemini가 있습니다. 메인 디자인과 서브페이지에 넣을 이미지·텍스트 자료를 함께 전달한 뒤 필요한 페이지를 만드는 식으로 활용할 수 있습니다.

어떤 도구를 고르느냐보다 기준이 되는 메인 디자인과 실제 사용할 자료를 충분히 전달하고, 그대로 유지할 요소를 구체적으로 적어주는 편이 결과 차이를 줄이기 좋습니다.

디자인키트와 AI를 함께 사용하는 과정

디자인키트와 AI를 함께 사용할 때는 메인 디자인을 먼저 정한 뒤 필요한 자료를 AI에 전달하는 순서로 작업하면 됩니다.

디자인키트에는 여러 업종과 스타일의 웹디자인이 있어 원하는 메인 디자인을 먼저 고른 뒤 필요한 서브페이지를 AI로 이어서 작업할 수 있습니다.

서브페이지 완성 전에 한 번 더 비교해보세요

생성된 페이지는 메인 디자인과 나란히 놓고 보면 차이가 더 쉽게 보입니다.

컬러가 같은 흐름으로 이어지는지, 제목 크기나 폰트가 갑자기 달라지지 않았는지, 섹션 사이 여백이 지나치게 벌어지지 않았는지 살펴보는 것이 좋습니다.

버튼과 카드처럼 여러 화면에서 반복되는 UI도 같이 확인합니다.

새 페이지에만 다른 모양의 버튼이나 카드가 들어가 있다면 메인 화면을 기준으로 다시 맞출 수 있습니다.

디자인뿐 아니라 콘텐츠도 확인해야 합니다. 첨부한 자료가 빠지지 않았는지, 실제 정보와 다른 문장이 임의로 들어가지는 않았는지도 살펴보는 편이 좋습니다.

자주 묻는 질문

메인 디자인을 정해두면 AI 서브페이지도 맞추기 쉬워집니다

AI로 서브페이지를 만들 때마다 새로운 스타일을 사용하면 페이지 수가 늘어날수록 홈페이지 전체의 분위기가 조금씩 달라질 수 있습니다.

반대로 메인 디자인을 기준으로 컬러, 폰트, 여백, 카드, 버튼 같은 요소를 계속 이어가면 각 페이지의 내용과 구조가 달라도 사이트 전체의 흐름을 맞추기 쉽습니다.

디자인키트에서는 메인 디자인은 디자인키트에서 선택하고, 필요한 서브페이지는 AI로 확장하는 방식으로 작업할 수 있습니다.

완성된 메인 디자인과 실제 자료를 AI에 함께 전달하고, 메인에서 사용한 디자인 요소를 이어서 필요한 페이지를 만드는 흐름입니다.

회사소개나 의료진 소개, 서비스 상세처럼 추가 페이지가 필요하다면 이미 선택한 메인 디자인을 기준으로 다음 화면을 이어서 만들어보는 방법을 활용해볼 수 있습니다.

Design Kits × AI GUIDE

디자인키트 메인 디자인과 AI를 함께 활용하는 과정, 의료진 소개 페이지를 만드는 실제 예시도 확인할 수 있습니다.

Design Kits × AI GUIDE 자세히 보기 →

작성자: 디자인키트

발행일: 2026.10.01

최종 수정일: 2026.10.01