📄 참고링크
https://magazine.contenta.co/2019/11/웹사이트-기획/
📄 웹사이트 리뉴얼 제안서 구성 목차
| 순번 | 항목명 | 설명 |
|---|---|---|
| 1 | 표지 | 프로젝트명, 제출기관, 담당자명, 제출일 |
| 2 | 목차 | 전체 항목 구성 |
| 3 | 제안 개요 | 프로젝트 배경, 목적, 추진 방향 요약 |
| 4 | 현황 분석 (As-Is) | 기존 웹사이트 분석: 디자인, UX, 콘텐츠, 기술적 문제점 등 |
| 5 | 문제점 도출 및 휴리스틱 평가 | Nielsen 10가지 기준 기반 UX 진단 결과 및 사용자 불편 사항 |
| 6 | 개선 방향 (To-Be) | 개선 목표 설정, UX 전략, 디자인 방향성 제시 |
| 7 | 정보 구조 / IA(Information Architecture) | 메뉴 구조 개편안, 사용자 흐름 다이어그램 |
| 8 | 주요 화면 설계안 | 와이어프레임, 화면 흐름도, 주요 UI 설명 |
| 9 | 디자인 콘셉트 | 색상/폰트/디자인 스타일 가이드, 톤앤매너, 반응형 여부 |
| 10 | 기능 개선안 | 사용자 편의 기능, 접근성, 인터랙션 등 추가/개선 내용 |
| 11 | 개발 및 운영 계획 | 개발 범위, 일정, 기술 스택, 유지보수 방안 |
| 12 | 예상 효과 및 기대 성과 | 리디자인을 통한 사용성 향상, 전환율 상승 등 구체적 기대효과 |
| 13 | 견적 및 일정표 | 개발 인력, 기간, 예산 산출 근거 |
| 14 | 맺음말 | 제안에 대한 종합 정리 및 의지 표현 |
✏️ 각 항목별 작성 시 유의사항
🔹 제안 개요
- 한 페이지 이내 요약
- “왜 이 프로젝트가 필요한가?”에 대한 명확한 배경 제시
🔹 As-Is 분석
- 기존 웹사이트의 디자인, UI/UX, 콘텐츠, 기술을 다각도로 분석
- 스크린샷 + 설명 조합 사용
🔹 휴리스틱 평가
- 10가지 기준을 기반으로 문제점을 정리 (앞서 제공된 템플릿 활용 가능)
- 문제점 → 심각도 → 개선안 순서로 구성
🔹 To-Be 제안
- 핵심 목표 3~5개를 요약: 예) “UX 단순화”, “모바일 최적화”, “브랜드 일관성 강화”
- 와이어프레임 또는 시안 예시 포함 시 설득력 향상
🔹 디자인 콘셉트
- 색상, 폰트, 톤앤매너, 브랜드 반영 여부 등 스타일 가이드 형태로 작성
- 기존 브랜드 아이덴티티와 연결되면 플러스 요인
🔹 기능 개선안
- 예: 회원가입 간소화, 검색 최적화, 접근성 개선, 반응형 웹 적용 등
- 사용자 여정(User Journey) 기반으로 설명하면 효과적
🔹 일정 및 비용
- WBS(Work Breakdown Structure) 기반 작업 일정표 작성
- 기능, 디자인, 개발, 테스트, 운영 등 단계별로 분리
📌 부록 (선택사항)
- 사용자 조사 결과
- 경쟁사 분석 결과
- 기존 리디자인 사례 비교
📄 요약 슬라이드 예시
제안 명: ○○기업 웹사이트 리디자인
제안 목표: 사용자 편의성과 브랜드 일관성 강화
핵심 전략:
- UI/UX 단순화 및 사용자 중심 구조 개선
- 반응형 웹 적용을 통한 디바이스 최적화
- 브랜드 컬러 기반의 디자인 일관성 확보
예상 효과: 고객 만족도 향상, 이탈률 감소, 전환율 증가
📄 휴리스틱 평가법이란?
휴리스틱 평가법이란
전문가가 웹사이트나 앱을 직접 사용해보면서,
사용자가 겪을 수 있는 불편함을 미리 찾아내는 방법입니다.
‘휴리스틱(Heuristic)’은 ‘경험적 규칙’이라는 뜻으로,
정해진 체크리스트(평가기준)를 바탕으로 문제점을 빠르게 진단하는 데 사용됩니다.
🔹 누가, 언제 쓰나요?
| 항목 | 설명 |
|---|---|
| 누가 평가하나요? | UX 디자이너, 기획자, 개발자 등 경험 있는 실무자 |
| 언제 사용하나요? | 사이트 개편 전, 출시 전, 리디자인 입찰 전 |
🔹 대표적인 평가 기준 (Jakob Nielsen의 10가지)
- 시스템 상태의 가시성
→ 지금 무슨 일이 일어나고 있는지 알려줘야 함
(예: 로딩 중 표시, 현재 위치 메뉴 강조) - 사용자 언어와의 일치
→ 전문 용어 대신 일반인이 이해할 수 있는 용어 사용 - 사용자 통제권과 자유
→ 실수했을 때 쉽게 되돌릴 수 있도록 함
(예: '뒤로가기'나 '취소' 버튼) - 일관성과 표준
→ 같은 버튼은 항상 같은 방식으로 작동해야 함 - 오류 예방
→ 잘못된 입력을 하기 전에 막아주는 기능
(예: 숫자만 입력 가능한 칸에 문자 입력 막기) - 기억이 아닌 인식에 의존
→ 사용자가 기억하지 않아도 쉽게 찾을 수 있도록
(예: 이전에 본 메뉴는 다시 보여주기) - 유연성과 효율성 제공
→ 초보자와 숙련자 모두 편리하게 쓸 수 있도록 - 미적인 디자인과 최소한의 정보
→ 복잡하지 않고 보기 쉽게 정리된 화면 - 사용자가 실수했을 때 도움 제공
→ 에러 메시지가 친절하고, 해결 방법을 알려줌 - 도움말과 문서 제공
→ 궁금할 때 참고할 수 있는 설명서, 팁 제공
🔹 왜 중요한가요?
- 실제 사용자 테스트를 하지 않고도
UX 문제를 사전에 찾아낼 수 있어 비용과 시간 절약 가능 - 리디자인 기획서, 입찰 제안서, UX 보고서 작성 시
객관적인 분석 기준으로 활용할 수 있음
🔹 간단 요약
| 항목 | 설명 |
|---|---|
| 평가 대상 | 웹사이트 또는 앱 |
| 평가 방법 | 정해진 기준으로 전문가가 직접 점검 |
| 평가 목적 | 사용자 불편 요소 사전 발견 및 개선 방향 도출 |
| 핵심 장점 | 빠르고 저렴하게 문제점 파악 가능 |
🔹 휴리스틱 평가 양식 다운로드
https://drive.google.com/drive/folders/1ztP_9HIzG57Z-msrJpZ7b_LyBiJ_tQzT?usp=sharing