🐨CoalaCoding
Docs▾
JavaScriptReactHTML & CSSBackendAI & LLMDev ToolsCreative
B반1
👾숏츠
🙉B반2
게시판
🐨CoalaCoding

디지털 크리에이터를 위한 한국어 기술 문서

문서

  • JavaScript
  • React
  • HTML & CSS
  • Backend
  • AI & LLM
  • Dev Tools
  • Creative

커뮤니티

  • 게시판
  • 예제 모음

기타

  • 관리자

정책

  • 소개
  • 개인정보처리방침
  • 이용약관
  • 연락처
© 2026 CoalaCoding. All rights reserved.
  • 1. 디지털 콘텐츠 기획의 이해
  • 2. 벤치마킹 보고서 만들기
  • 3. 디자인 방향성 정의하기
  • 4. 정보구조도 설계하기
  • 5. 와이어프레임·스토리보드 만들기
  • 6. 디자인 마감하고 웹으로 구현하기
  • 10. 벤치마킹 보고서 만들기
  1. 홈
  2. 문서
  3. Creative
  4. UI/UX
  5. 2. 벤치마킹 보고서 만들기

2. 벤치마킹 보고서 만들기

벤치마킹이 왜 필요한지(환경 분석·차별화)를 알고, 배포된 양식으로 웹사이트 한 곳을 6개 항목으로 살펴 보고서 1건을 만든다.

▪ 만들 것

웹사이트 한 곳을 6개 항목으로 평가해 칸을 모두 채운 벤치마킹 보고서 1건.

▪ 왜 하는가

벤치마킹은 경쟁 사이트를 여러 관점에서 같은 기준으로 비교 분석해, 내 서비스를 어떻게 다르게 만들지 정하는 조사다. 콘텐츠·화면 구조·디자인·홍보처럼 항목을 나눠 경쟁 사이트를 살펴보면, 그들이 잘하는 점과 부족한 점이 항목마다 드러난다. 그 차이에서 내 서비스가 따라갈 점과 다르게 갈 점(차별화)을 찾는다. 이렇게 정한 차별화 지점은 내 서비스를 시장 어디에 둘지(포지셔닝)를 정하는 기준이 되고, 이후 기획서의 바탕이 된다.

▪ 예제 파일

배포된 벤치마킹 보고서 양식. 조사 대상·URL·6개 평가 항목·종합 의견 칸이 들어 있다.

▪ 미리 알아두기

보고서는 아래 6개 항목으로 사이트를 살펴본다.

  • Contents (콘텐츠): 소개 글과 정보가 충실하고 다른 곳과 다른 점이 있는가
  • UI (화면 구조): 메뉴 분류와 화면 이동이 편한가
  • Visual (디자인): 색상·디자인이 깔끔하고 글이 읽기 쉬운가
  • Marketing (홍보): 이벤트·홍보 영역과 다시 찾게 만드는 요소가 있는가
  • Theme & Message (주제): 사이트가 말하려는 바가 분명한가
  • Support (고객지원): 문의·안내 정보에 접근하기 쉬운가

1. 작업 준비

1.1 크롬(Chrome) 브라우저를 연다.

1.2 메모장을 열고 [파일] → [저장]으로 이름을 "벤치마킹_메모.txt"로 저장한다. 살펴보며 떠오르는 점을 여기에 적는다.

1.3 배포된 벤치마킹 보고서 양식을 연다.

2. 분석할 사이트 정하기

2.1 평가할 웹사이트 한 곳을 정한다.

2.2 크롬 주소창을 클릭한다 → 사이트 주소를 입력한다 → Enter 키를 누른다.

2.3 화면이 안 열리면 주소 철자를 다시 확인하고 Enter 키를 누른다.

2.4 주소창의 주소를 드래그해 복사한다(Ctrl+C).

2.5 양식의 URL 칸을 클릭한다 → 붙여넣는다(Ctrl+V).

2.6 양식의 조사 대상 칸에 사이트 이름을 입력한다.

📷 분석할 사이트 첫 화면

⬇️ 이 자리에 이미지 드래그

3. 사이트 둘러보기

3.1 첫 화면에서 위쪽 메뉴를 하나씩 눌러 어떤 내용이 있는지 본다.

3.2 글·이미지·버튼·색상이 어떻게 배치됐는지 살펴본다.

3.3 눈에 띄거나 불편한 점을 "벤치마킹_메모.txt"에 한 줄씩 적는다.

4. 항목별로 평가 쓰기

양식의 각 항목 칸을 클릭하고, 아래 질문에 답하듯 두세 줄로 적는다. 좋은 점과 아쉬운 점을 함께 적는다.

4.1 Contents

  • 연계성이 높고 소개 콘텐츠로서 성실한가
  • 서비스에 적당한 콘텐츠인가
  • 차별화된 콘텐츠는 만족스러운가

4.2 UI

  • 사용성이 높은 UI 구조인가
  • 분류 체계가 명확한가
  • 내비게이션이 효율적인 구조인가

4.3 Visual

  • 디자인이 세련됐는가
  • 브랜드 이미지가 잘 적용된 색상인가
  • 동적 요소가 있는가
  • 주요 요소가 눈에 띄는가
  • 적절한 가독성을 제공하는가

4.4 Marketing

  • 이벤트·홍보 영역이 있는가
  • 마케팅을 지원할 콘텐츠가 있는가
  • 고객 로열티를 높일 콘텐츠가 있는가
  • 이벤트·프로모션 정도는 어떤가

4.5 Theme & Message

  • 주제·사이트 컨셉이 명확한가
  • 말하고자 하는 요소 파악이 분명한가
  • 메시지를 전달하기 위한 메뉴가 있는가

4.6 Support

  • 고객지원 요소가 충분한가
  • 고객지원 정보의 접근성은 좋은가
  • 정보의 비교·습득이 용이한가

📷 항목을 채운 양식 예시

5. 종합 의견 쓰기

5.1 6개 항목에서 좋았던 점과 아쉬운 점을 모아 한 문단으로 정리한다.

5.2 사이트를 고친다면 어디를 바꾸면 좋을지 한두 가지 적는다. 이 부분이 내 서비스의 차별화 지점이 된다.

5.3 본 내용은 느낌이 아니라 사이트에서 확인한 사실에 근거해 적고, 쉬운 말로 간결하게 쓴다.

5.4 6개 항목 칸과 종합 의견 칸이 모두 채워졌는지 확인한다.

▪ 도움 프롬프트

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

먼저 웹 검색으로 아래 사이트를 직접 찾아 확인한 뒤 평가해줘.
URL: (분석할 사이트 주소)

아래 6개 항목의 질문에 각각 답해줘. 질문마다 1~5점(5=매우 우수, 4=우수, 3=보통, 2=부족, 1=매우 부족)으로 점수를 매기고, 좋은 점과 아쉬운 점, 그 점수를 준 근거를 함께 적어줘.

1) Contents
- 연계성이 높고 소개 콘텐츠로서 성실한가
- 서비스에 적당한 콘텐츠인가
- 차별화된 콘텐츠는 만족스러운가
2) UI
- 사용성이 높은 UI 구조인가
- 분류 체계가 명확한가
- 내비게이션이 효율적인가
3) Visual
- 디자인이 세련됐는가
- 브랜드 이미지가 잘 적용된 색상인가
- 동적 요소가 있는가
- 주요 요소가 눈에 띄는가
- 가독성이 적절한가
4) Marketing
- 이벤트·홍보 영역이 있는가
- 마케팅을 지원할 콘텐츠가 있는가
- 고객 로열티를 높일 콘텐츠가 있는가
- 이벤트·프로모션 정도는 어떤가
5) Theme & Message
- 주제·사이트 컨셉이 명확한가
- 말하고자 하는 요소가 분명한가
- 메시지를 전달하는 메뉴가 있는가
6) Support
- 고객지원 요소가 충분한가
- 고객지원 정보의 접근성은 좋은가
- 정보의 비교·습득이 용이한가

마지막에 이 사이트를 개선한다면 어디를 바꾸면 좋을지 한두 가지 제안해줘.
각 평가의 근거가 된 사이트 페이지 주소(링크)를 함께 적어줘. 검색으로 확인할 수 없는 내용은 "확인 필요"라고 표시하고 추측하지 마.

6. 저장

6.1 양식 파일을 저장한다(Ctrl+S).

6.2 "벤치마킹_메모.txt"도 저장한다(Ctrl+S).

#web#design#마케팅

목차

  • ▪ 만들 것
  • ▪ 왜 하는가
  • ▪ 예제 파일
  • ▪ 미리 알아두기
  • 1. 작업 준비
  • 2. 분석할 사이트 정하기
  • 3. 사이트 둘러보기
  • 4. 항목별로 평가 쓰기
  • 4.1 Contents
  • 4.2 UI
  • 4.3 Visual
  • 4.4 Marketing
  • 4.5 Theme & Message
  • 4.6 Support
  • 5. 종합 의견 쓰기
  • ▪ 도움 프롬프트
  • 6. 저장