디자인 콘셉트와 SEO 정보 확인하기

웹사이트 기획서에는 페이지와 섹션 말고도 사이트 전체의 분위기와 검색 노출용 문구가 함께 정리됩니다. 어떤 색과 글꼴로 꾸밀지는 디자인 콘셉트 카드에, 검색 결과와 소셜 공유에 쓸 제목·설명·키워드는 SEO 설정 카드에 들어 있습니다. 디자이너나 개발자에게 기획서를 넘길 때 가장 먼저 찾게 되는 두 카드입니다. 이 글에서는 두 카드가 어디에 있는지, 각 항목이 무엇을 뜻하는지, AI 재생성 버튼은 언제 쓰는지를 차례로 살펴봅니다.

1. 어디에 있나요

웹사이트 기획서 상세 화면을 맨 아래까지 내리면 사이트 구조 카드 아래에 디자인 콘셉트 카드가 있고, 그 바로 아래에 SEO 설정 카드가 이어집니다. 화면 전체 구성은 별도 글에서 설명합니다.

이 두 카드는 기획서에 해당 정보가 있을 때 채워집니다. 디자인 콘셉트가 아직 없으면 카드 안에 디자인 콘셉트가 아직 생성되지 않았습니다. 위의 AI 재생성 버튼을 클릭하세요. 안내가 나오고, SEO 정보가 없으면 SEO 설정 카드는 화면에 나타나지 않습니다.

2. 디자인 콘셉트 읽는 법

카드는 왼쪽의 컬러 팔레트, 오른쪽의 타이포그래피와 무드 & 스타일로 나뉩니다.

컬러 팔레트

색상마다 카드 한 장이 놓이고, 위쪽의 색 견본 아래에 이름표와 색 코드(#으로 시작하는 6자리 값), 그 색을 고른 이유가 적힙니다. 이름표는 다음 다섯 가지입니다.

• 주요 색상: 사이트의 대표 색입니다.
• 보조 색상: 대표 색 옆에서 바탕이나 구분에 쓰는 색입니다.
• 강조 색상: 버튼이나 강조 문구에 쓰는 색입니다.
• 배경 색상: 페이지 바탕색입니다.
• 텍스트: 본문 글자색입니다.

기획서에 들어 있는 색만 카드로 나타납니다. 색 코드는 디자이너에게 그대로 전달하면 되고, 이유 문구는 왜 그 색을 골랐는지 설명하는 용도입니다.

타이포그래피와 무드

제목 폰트와 본문 폰트가 각각 카드로 나오며, 폰트 이름은 그 글꼴로 표시됩니다. 아래의 무드 & 스타일에는 둥근 태그가 나열됩니다. 맨 앞의 강조된 태그가 전체 스타일이고, 뒤에 이어지는 태그는 분위기 키워드입니다. 태그 아래의 세로선 상자에는 이런 분위기를 고른 이유가 적힙니다.

3. SEO 설정 읽는 법

SEO는 검색 결과나 소셜 공유 화면에 사이트가 어떻게 보일지를 정하는 문구입니다. 이 카드는 사이트 전체와 페이지별로 나뉩니다.

전체 사이트

전체 사이트 묶음에는 타이틀, 설명, 키워드가 나옵니다. 소셜 공유용 문구가 함께 저장되어 있으면 소셜 공유 제목과 소셜 공유 설명 칸이 추가로 나타납니다. 이 칸들은 메신저나 SNS에 사이트 주소를 붙여 넣었을 때 보이는 제목과 설명으로 쓸 문구입니다. 키워드는 둥근 태그로 나열됩니다.

페이지별 SEO

그 아래 페이지별 SEO에는 페이지마다 카드가 한 장씩 놓이고, 페이지 이름 아래에 해당 페이지의 타이틀, 설명, 키워드가 보입니다. SEO 정보가 들어 있는 페이지만 카드가 생기므로 페이지 수와 카드 수가 다를 수 있습니다.

4. AI 재생성 버튼

디자인 콘셉트 카드의 오른쪽 위에는 AI 재생성 버튼이 있습니다. 누르면 디자인 콘셉트를 AI로 다시 생성하시겠습니까? 확인 창이 먼저 뜨고, 확인을 누르면 AI가 비즈니스 정보를 바탕으로 디자인 콘셉트를 새로 만들어 기존 내용을 대체합니다. 취소하면 아무것도 바뀌지 않습니다. AI를 쓰는 기능이므로 크레딧을 사용할 수 있습니다. 같은 카드에서 색이나 글꼴을 한 칸씩 직접 고치는 화면은 없고, SEO 설정 카드에는 수정 버튼이 없습니다.

5. 이렇게 활용해 보세요

• 디자이너에게 기획서를 넘길 때는 컬러 팔레트의 색 코드와 폰트 이름을 그대로 복사해 전달해 보세요.
• 타이틀과 설명은 사이트를 만들 때 검색 결과용 제목과 설명 칸에 옮겨 쓰기 좋은 문구입니다.
• 무드 태그와 이유 문구는 사진이나 일러스트를 고를 때 기준이 됩니다. 분위기에 맞지 않는 이미지를 걸러 낼 수 있습니다.
• MD 형식으로 내려받은 파일의 맨 앞에는 페이지별 SEO 제목·설명과 디자인 값이 함께 담깁니다. 내려받는 방법은 기획서 복사·다운로드 글에서 안내합니다.

6. 알아 두실 점

• 두 카드는 기획서를 만들 때 단계별로 채워지며, 일부 단계가 비어 있으면 해당 카드가 비거나 나타나지 않습니다. 정보 띠의 완성도에서 디자인 콘셉트와 SEO 설정이 각각 한 항목씩 반영됩니다.
• AI 재생성은 디자인 콘셉트만 다시 만듭니다. 페이지와 섹션 내용, SEO 설정에는 영향이 없습니다.
• 색 코드는 화면에 보이는 값 그대로이므로, 실제 사이트에 적용할 때 브랜드 색과 다르다면 디자이너와 함께 조정해 주세요.