3. 디자인 방향성 정의하기

▪ 만들 것

1차시 벤치마킹에서 찾은 차별화를 바탕으로 정한 콘셉트 한 문장과 톤&매너(색·글꼴·이미지 느낌)를 한 장에 모은 디자인 방향성 시트 1건.

▪ 왜 하는가

벤치마킹에서 따라갈 점과 다르게 갈 점을 찾았다면, 다음은 그 방향을 실제 디자인 언어로 옮기는 일이다. 사이트가 어떤 한 가지 방향(콘셉트)으로 가는지, 색과 글꼴과 이미지가 어떤 느낌(톤&매너)인지 먼저 정해 두면, 이후 설계와 화면 작업이 한 방향으로 모인다. 이때 출발점은 내 생각이 아니라 1차시 벤치마킹에서 찾은 차별화다. 거기서 나온 차별화를 콘셉트로 옮기지 않으면, 벤치마킹과 따로 노는 방향이 된다.

▪ 예제 파일

• 1차시에 만든 벤치마킹 보고서(종합 의견 칸 포함)
• 참고 사이트: KB손해보험 https://www.kbinsure.co.kr/main.ec

▪ 미리 알아두기

• 벤치마킹 인사이트: 1차시에서 찾은 따라갈 점·아쉬운 점이다. 아쉬운 점을 뒤집으면 내 사이트의 차별화 방향이 된다. 콘셉트와 키워드는 여기서 출발한다.
• 콘셉트: 사이트 전체를 이끄는 한 문장 방향. 목적·핵심 사용자·차별화를 한 줄로 모은 것.
• 핵심 키워드: 콘셉트를 떠받치는 단어 몇 개. 마인드맵으로 생각을 펼친 뒤 3~5개로 추린다.
• 톤&매너: 사이트의 전체 느낌. 색(주조색·보조색·강조색), 글꼴(타입), 이미지 스타일, 레이아웃으로 드러난다.
• 색이 주는 느낌: 파란색은 신뢰·안정, 초록색은 안전·친환경, 주황색은 활기·친근, 회색은 차분·보조, 빨간색은 강조·주목을 전한다. 강조색은 좁게 쓴다.

1. 작업 준비

1. 크롬(Chrome) 브라우저를 연다.
2. 메모장을 열고 [파일] → [저장]으로 이름을 "디자인방향성_메모.txt"로 저장한다.
3. 1차시에 만든 벤치마킹 보고서를 연다. 참고 사이트 KB손해보험(https://www.kbinsure.co.kr/main.ec)도 새 탭에서 연다.

2. 벤치마킹 인사이트 꺼내기

1. 벤치마킹 보고서의 종합 의견 칸을 다시 읽는다.
2. 따라갈 점(잘한 점)과 아쉬운 점을 "디자인방향성_메모.txt"에 각각 한 줄로 옮긴다.
3. 아쉬운 점을 뒤집어 "내 사이트는 이렇게 다르게 하겠다"를 한 줄로 적는다. 이게 차별화 방향이다.

예) 아쉬운 점이 "메뉴가 너무 많아 처음 방문자가 어렵다"면, 이를 뒤집은 차별화 방향은 "처음 찾는 사람도 쉽게 비교하도록 안내 중심으로 단순하게"가 된다.

3. 핵심 키워드 뽑기

1. 메모장 가운데에 내가 만들 사이트의 주제와 2단계의 차별화 방향을 적는다.
2. 거기서 떠오르는 말을 가지치듯 아래로 적어 나간다(마인드맵). 맞고 틀림을 따지지 말고 많이 적는다.
3. 적은 말 중에서 사이트 방향을 가장 잘 나타내는 단어 3~5개에 표시한다. 차별화 방향을 나타내는 단어를 꼭 포함한다. 이것이 핵심 키워드다.

4. 콘셉트 한 문장 정하기

1. 핵심 키워드와 차별화 방향을 넣어 "누구에게 무엇을 어떤 느낌으로 주는 사이트"인지 한 문장으로 적는다.
2. 문장이 길면 한 가지 방향만 남기고 줄인다. 콘셉트는 하나여야 한다.

예) 보험을 처음 찾는 사람도 안심하고 비교할 수 있는, 신뢰감 있는 사이트.

5. 톤&매너 정하기

1. 주조색 1개를 정한다. 사이트에서 가장 넓게 쓰는 색이다. 콘셉트 느낌에 맞는 색을 고른다.
2. 보조색 1~2개를 정한다. 주조색을 받쳐 주는 색이다.
3. 강조색 1개를 정한다. 버튼이나 중요한 표시에만 좁게 쓰는 색이다.
4. 글꼴(폰트)을 제목용·본문용으로 정한다. 본문은 읽기 쉬운 글꼴로 한다.
5. 이미지 스타일을 한 가지로 정한다(사진풍 · 플랫 일러스트 · 3D 등).
6. 정한 색·글꼴·느낌을 "디자인방향성_메모.txt"에 적는다.

6. 무드보드로 모으기

1. 새 문서나 슬라이드 한 장을 연다.
2. 한 장에 벤치마킹 차별화 방향, 콘셉트 문장, 핵심 키워드, 주조·보조·강조색, 글꼴 이름, 이미지 예시 두세 장을 모아 붙인다.
3. 한눈에 사이트 느낌이 전해지는지, 그 느낌이 차별화 방향과 맞는지 본다. 따로 노는 요소가 있으면 뺀다.

▪ 도움 프롬프트

아래 글을 웹 검색이 되는 AI(챗GPT 검색, 제미나이 등)에 입력해 활용한다. 검색 기능을 켜면 AI가 참고 사이트를 직접 찾아 확인하고 근거를 제시한다.

먼저 웹 검색으로 아래 참고 사이트를 직접 찾아 확인한 뒤 답해줘.
참고 사이트: https://www.kbinsure.co.kr/main.ec
내가 만들 사이트 주제: (주제 입력)
내가 1차시 벤치마킹에서 찾은 차별화 방향: (예: 처음 방문자도 쉽게 비교하도록 안내 중심으로 단순하게)

1) 위 차별화 방향을 살리는 핵심 키워드 5개를 제안하고, 각 키워드를 고른 근거를 적어줘.
2) 위 키워드를 담은 콘셉트 문장 후보 2개를 적어줘. 차별화 방향이 문장에 드러나게 해줘.
3) 콘셉트에 맞는 톤&매너를 제안해줘. 주조색·보조색·강조색을 색 이름과 색상 코드로 적고, 각 색이 주는 느낌의 근거를 적어줘. 제목용·본문용 글꼴도 한글 무료 폰트로 제안해줘.
4) 참고 사이트가 실제로 쓰는 색과 글꼴이 무엇인지 확인해 알려줘. 검색으로 확인할 수 없는 내용은 "확인 필요"라고 표시하고 추측하지 마. 각 근거가 된 페이지 주소(링크)도 함께 적어줘.

7. 저장

1. 무드보드 파일을 저장한다(Ctrl+S).
2. "디자인방향성_메모.txt"도 저장한다(Ctrl+S).