디자인 콘셉트와 SEO 정하고 저장하기

웹사이트 기획 위저드의 마지막 구간은 사이트의 겉모습과 검색 노출 정보를 정하는 두 단계입니다. 4단계 디자인 콘셉트에서는 색, 글꼴, 분위기가 정해지고, 5단계 SEO 설정에서는 검색 결과와 공유 화면에 쓰일 제목과 설명이 정해집니다. 이 글에서는 두 화면에 무엇이 나오는지, 그리고 저장하고 완료하는 방법을 순서대로 안내합니다. 페이지 구조와 콘텐츠를 만드는 앞 단계는 별도 글에서 다룹니다.

1. 디자인 콘셉트 화면

3단계 페이지 콘텐츠에서 디자인 콘셉트 생성을 누르면 4단계로 넘어옵니다. 화면 제목은 디자인 콘셉트이고 "웹사이트의 디자인 방향을 설정하세요."라는 안내가 붙어 있습니다. 맨 위에는 선호하는 스타일 카드가 여섯 장 있습니다.

• 모던: 깔끔하고 세련된
• 볼드: 강렬하고 임팩트있는
• 미니멀: 심플하고 여백이 많은
• 프로페셔널: 신뢰감있고 안정적인
• 친근한: 따뜻하고 접근하기 쉬운
• 럭셔리: 고급스럽고 우아한

카드를 누르면 그 카드가 파란 테두리와 옅은 파란 배경으로 강조됩니다.

스타일 카드 아래에는 이 단계로 넘어올 때 이미 만들어진 결과가 표시됩니다. 스타일을 따로 고르지 않고 넘어오면 기본 방향인 모던을 기준으로 만들어지며, 결과 설명 문장에도 그 방향이 적힙니다.

2. 결과 읽기

결과는 세 구역입니다.

• 컬러 팔레트: 주요 색상, 보조 색상, 강조 색상, 배경, 텍스트 다섯 가지 색이 색 견본과 색상 코드로 표시됩니다.
• 타이포그래피: 제목 폰트와 본문 폰트의 이름이 나옵니다.
• 무드 & 스타일: 분위기를 나타내는 단어가 태그로 나열되고, 그 아래에 이런 방향으로 정한 이유를 설명하는 문장이 이어집니다.

3. SEO 설정

오른쪽 아래의 SEO 설정 생성을 누르면 5단계가 열립니다. 제목은 SEO 설정이고 안내는 "검색엔진 최적화를 위한 메타 정보를 설정하세요."입니다. 먼저 전체 사이트 SEO 카드에 사이트 전체에 쓸 정보가 나옵니다.

• 사이트 타이틀: 검색 결과에 보이는 사이트 제목
• 메타 설명: 검색 결과에 보이는 소개 문장
• 소셜 공유 제목과 소셜 공유 설명: 링크를 공유할 때 보이는 문구
• 키워드: 사이트를 설명하는 검색어가 태그로 나열됩니다.

그 아래에는 페이지마다 카드가 하나씩 이어지며 페이지 타이틀과 메타 설명이 나옵니다. 이 화면의 값은 입력칸이 아니라 만들어진 내용을 보여 주는 표시 영역입니다.

4. 저장하고 완료하기

내용을 확인했다면 오른쪽 아래의 저장 및 완료를 누릅니다. 이전 단계로 돌아가려면 이전을 누릅니다.

저장이 끝나면 6단계 기획서 생성 완료!가 나옵니다. 가운데 카드에 웹사이트 이름이 표시되고, 기획서 보기와 프로젝트로 돌아가기 두 버튼이 있습니다. 기획서 보기를 누르면 완성된 웹사이트 기획서 화면으로 이동합니다.

위저드는 단계를 지날 때마다 진행 내용을 자동으로 저장하므로, 만들어진 기획서는 웹사이트 기획 목록에서도 찾을 수 있습니다.

5. 이렇게 활용해 보세요

• 무드 태그와 설명 문장은 왜 이런 분위기로 정했는지 이유를 알려 주므로, 팀원이나 디자이너와 방향을 맞출 때 근거로 보여 주기 좋습니다.
• 색상 코드는 브랜드에 이미 쓰는 색과 비교해 보고, 맞지 않으면 기획서를 제작할 때 바꿔 사용하세요.
• SEO의 사이트 타이틀과 메타 설명은 실제 검색 결과에 보이는 문구이므로 우리 서비스의 이름과 약속이 정확히 들어 있는지 읽어 보세요.
• 페이지별 SEO 카드가 사이트 전체 정보와 겹치지 않고 그 페이지만의 내용을 담고 있는지 비교해 보세요.
• 키워드 중 우리 고객이 실제로 쓰지 않을 표현이 있는지도 확인해 보세요.

6. 알아 두실 점

• 디자인 콘셉트와 SEO 정보를 만들 때마다 AI가 사용되므로 AI 사용 기록이 남고 크레딧이 쓰입니다. 필요한 크레딧은 플랜별로 다릅니다.
• 화면의 색, 글꼴, 문구는 입력한 정보에 따라 달라집니다. 이 글의 예시는 가상의 서비스 기준입니다.