티스토리 뷰
안녕하세요 찐망고입니다.
이글은 웹사이트는 왜 이렇게 만들었을까에서 부터 시작하는 연재글입니다.
part1) 웹사이트는 왜 이렇게 만들었을까? 디자인을 위한 사이트 분석
안녕하세요 찐망고 입니다. 이번 글은 AI 활용 웹콘텐츠 실무양성과정에서 진행한 수업 중 일부를 정리한 내용입니다. 이번 학생들은 고3아이들이고 특성화고 친구들이 전국에서 모였는데웹사
uiweb.tistory.com
앞에서는 웹사이트를 디자인만 보는 것이 아니라
회사와 브랜드는 어떤 곳인지, 무엇을 판매하는지, 타깃은 누구인지,
웹사이트의 목적과 콘텐츠 순서, 마케팅, CTA, 브랜딩과 디자인까지 연결해서 분석해봤다.
그리고 학생이 먼저 직접 분석한 뒤 AI와 비교하면서
내가 생각한 것이 맞는지, 근거가 충분한지, 놓친 것은 없는지도 다시 확인했다.
여기까지 했으면 이제 다음 단계는 웹사이트 리뉴얼
그런데 바로 디자인부터 시작하지는 않았다.
학생들에게 리뉴얼할 사이트를 찾아보라고 하면 처음에는 보통
디자인이 오래돼 보여요.
색이 별로예요.
레이아웃이 복잡해요.
뭔가 촌스러워요.
요즘 스타일이 아니에요.
같은 이유가 나오기 쉽다.
물론 이런 것도 리뉴얼의 이유가 될 수 있다.
하지만 우리가 앞에서 웹사이트를 분석했던 이유는
단순히 예쁘고 안 예쁜 것을 판단하기 위해서가 아니었다.
어떤 회사인지, 누가 사용하는지, 웹사이트를 왜 만들었는지, 어떤 정보를 중요하게 보여줘야 하는지를 먼저 봤으니 리뉴얼할 때도 같은 기준으로 생각해봐야한다
무엇을 예쁘게 바꿀까?가 아니라
왜 바꿔야 할까?부터.
학생들에게 바로 하나의 사이트를 결정하게 하지는 않고 먼저 리뉴얼 후보 사이트를 3~5개 정도 찾아보게 했다.
그리고 단순히
내가 디자인하기 쉬워 보여서나 디자인이 마음에 안 들어서를 고르는 것이 아니라
현재 사이트에서 개선할 수 있다고 생각하는 이유를 최소 3가지 이상 찾아보게 했다.
사이트를 볼 때는 이런 부분을 확인했다.
1. 회사가 무엇을 하는 곳인지 이해하기 어려운가?
처음 사이트에 들어왔을 때 어떤 회사인지, 어떤 상품이나 서비스를 제공하는지 파악하기 어려운지 본다.
2. 중요한 상품이나 서비스를 찾기 어려운가?
회사가 중요하게 판매하거나 제공하는 것이 무엇인지 잘 보이지 않거나 탐색하기 어려운지 확인한다.
3. 주요 타깃에게 필요한 정보가 잘 보이지 않는가?
이 사이트를 이용할 사람이 원하는 정보보다 회사가 보여주고 싶은 정보 위주로 구성되어 있지는 않은지 살펴본다.
4. 사용자의 다음 행동이 명확하지 않은가?
사용자가 정보를 본 다음 구매, 상담, 예약, 문의, 가입, 탐색 등 무엇을 해야 하는지 알기 어려운지 확인한다.
5. 정보의 우선순위가 이상하지 않은가?
중요한 정보보다 덜 중요한 정보가 더 강조되어 있거나 콘텐츠의 순서가 사용자의 탐색 과정과 맞지 않는지 본다.
6. 모바일에서 사용하기 불편하지 않은가?
글자가 너무 작거나, 메뉴와 버튼을 사용하기 어렵거나, 모바일 화면에서 콘텐츠를 확인하기 불편하지 않은지 확인한다.
7. 브랜드 이미지와 디자인이 맞지 않는가?
회사가 전달하고 싶은 이미지와 실제 웹사이트의 컬러, 폰트, 이미지, 레이아웃 등이 잘 맞는지도 살펴본다.
이 중에서 여러 문제가 실제 화면에서 확인되고
왜 문제라고 생각했는지 근거를 설명할 수 있는 사이트를 리뉴얼 후보로 가져오게 했다.
문제점을 찾는 것과 문제를 정의하는 것은 조금 다르다
예를 들어 CTA가 약하다라고 할 수 있다.
그런데 여기서 한 번 더 질문해볼 수 있다.
왜 CTA가 약하다고 생각했지?
버튼이 작아서?
색이 눈에 띄지 않아서?
사용자가 어떤 행동을 해야 하는지 몰라서?
아니면 애초에 이 웹사이트에서 사용자가 해야 할 중요한 행동 자체가 명확하지 않아서?
같은 화면을 보고도 문제의 원인은 다를 수 있다.
그래서 이번에는 화면에서 마음에 들지 않는 부분을 찾는 것보다
왜 이것이 문제인지 설명하는 것을 중요하게 봤다.
수업에서는 교촌치킨 사이트를 같이 분석해봤다
학생들이 각자 리뉴얼 사이트를 고르기 전에
수업에서는 교촌치킨 공식 홈페이지를 예시로 같이 살펴봤다.
메뉴도 있고, 매장안내도 있고, 이벤트도 있고, 주문도 있고, 상품권도 있고,
교촌스토리와 회사정보, 뉴스, 가맹점 개설 정보도 있다.
각각의 콘텐츠만 보면 필요한 정보가 들어가 있다.
그런데 여기서 앞에서 사이트를 분석할 때 했던 질문을 다시 해봤다.
이 홈페이지는 누구를 위한 홈페이지일까?
그리고
교촌은 지금 왜 공식 홈페이지가 필요할까?
예전과 지금은 사용자의 행동이 달라졌다
예전에는 치킨을 주문하려면
홈페이지에서 메뉴 확인
→ 가까운 매장 찾기
→ 전화 주문
같은 과정이 중요했을 수 있다.
그런데 지금은 배달앱이나 교촌앱에서도 메뉴를 확인하고 바로 주문할 수 있다.
그렇다면 다시 질문할 수 있다.
배달앱과 교촌앱이 메뉴 탐색과 주문을 담당하고 있다면 현재 교촌 공식 홈페이지는 어떤 역할을 해야 할까?
여기서 단순히 홈페이지가 오래됐다, 디자인이 예쁘지 않다보다 조금 다른 문제가 보이기 시작했다.
문제 1. 공식 홈페이지의 역할이 명확하지 않다
메뉴 확인과 주문이라는 기능을 앱과 배달 플랫폼에서도 이용할 수 있기 때문에
현재 공식 홈페이지가 사용자에게 어떤 역할을 해야 하는지 다시 정리할 필요가 있다고 생각했다.
단순히 메뉴와 이벤트 정보를 보여주는 사이트인지,
교촌이라는 브랜드를 경험하는 사이트인지,
교촌F&B라는 기업을 소개하는 사이트인지,
가맹 창업자를 위한 정보까지 함께 제공하는 사이트인지 사이트의 역할과 우선순위를 다시 생각해볼 수 있다.
사이트에 있는 메뉴를 다시 보면 서로 다른 목적을 가진 사용자가 보인다.
치킨을 먹으려는 소비자는 메뉴 / 이벤트 / 상품권 / 주문 / 매장찾기를
교촌이라는 기업과 브랜드를 알고 싶은 사람은 교촌스토리 / 회사정보 / 뉴스를
교촌 매장을 창업하려는 사람은 가맹점 개설 / 사업전망 / 개설절차 / 상담을
그러면 또 하나의 문제가 나온다.
문제 2. 서로 다른 사용자를 위한 콘텐츠가 섞여 있다
일반 소비자, 기업 정보를 찾는 사용자, 가맹 창업을 알아보는 사용자는 사이트에 들어오는 이유도 다르고 필요한 정보도 다르다.
그런데 서로 다른 목적의 콘텐츠가 한 사이트 안에서 비슷한 수준으로 제공되고 있다면 누구에게 어떤 정보를 우선해서 보여줄 것인지 다시 정리할 필요가 있다.
여기서 중요한 것은
콘텐츠가 많다는 것 자체가 문제는 아니라는 것.
다양한 콘텐츠가 있어도 사용자가 자신의 목적에 맞는 정보를 쉽게 찾을 수 있다면 문제가 되지 않을 수 있다.
그래서 콘텐츠가 너무 많다가 아니라
서로 다른 목적을 가진 사용자를 위한 콘텐츠가 함께 제공되고 있어
타깃별 정보의 우선순위와 탐색 구조를 다시 검토할 필요가 있다.
처럼 문제를 조금 더 구체적으로 정의해봤다.
그리고 한 가지를 더 생각해봤다.
공식 홈페이지에서만 할 수 있는 것은 뭘까?
메뉴와 가격을 보고 주문하는 것이 목적이라면
이미 배달앱과 교촌앱이 그 역할을 잘하고 있다.
그렇다면 공식 홈페이지에서는 사용자가 무엇을 경험해야 할까?
교촌이라는 브랜드가 어떤 브랜드인지,
다른 치킨 브랜드와 무엇이 다른지,
어떤 이야기를 가지고 있는지,
교촌이라는 브랜드를 좋아할 이유를 웹사이트에서 충분히 경험하고 있는지도 살펴봤다.
문제 3. 디지털에서의 브랜드 경험을 더 강화할 수 있다
현재 사이트에는 제품, 이벤트, 기업정보, 브랜드 관련 콘텐츠가 존재한다.
하지만 각각의 정보를 제공하는 것을 넘어
사용자가 웹사이트를 경험하면서 교촌은 이런 브랜드구나라고 느낄 수 있는
브랜드 경험을 어떻게 만들 것인지도 리뉴얼에서 생각해볼 수 있다고 봤다.
이렇게 문제를 찾다 보니
이 웹사이트는 누구를 위한 것인지,
앞으로 어떤 역할을 해야 하는지.
이게 정리되어야 그다음에 무엇을 강조하고,
어떤 콘텐츠를 줄이고,
어떤 콘텐츠를 추가하고,
어떤 디자인을 사용할지도 결정할 수 있다.
여기까지 보면 이제 그러면 메뉴 구조 바꾸고 메인 화면 다시 만들면 되는 거 아닌가?
할 수 있는데 아직 디자인을 시작하지 않았다.
우리가 문제라고 생각한 것이 정말 이 사이트만의 문제인지,
비슷한 회사들은 공식 홈페이지를 어떻게 사용하고 있는지,
다른 브랜드들은 소비자용 콘텐츠와 기업 콘텐츠를 어떻게 나누고 있는지,
브랜드 경험을 잘 만든 사이트는 어떤 방식으로 콘텐츠를 구성하는지도 확인할 필요가 있기 때문이다.
그래서 다음 단계에서는
경쟁사와 레퍼런스 사이트를 분석하기로 했다.
앞에서는 이 웹사이트는 왜 이렇게 만들었을까?를 생각했다면 이번에는 지금 이 웹사이트에서 무엇이 문제일까?를 생각해봤다.
그리고 다음에는 다른 사이트들은 이 문제를 어떻게 해결하고 있을까?를 찾아볼 예정이다.
'클래스 > 수업노트' 카테고리의 다른 글
| part5) 웹사이트 IA 설계하기 — GNB와 IA는 뭐가 다를까? (0) | 2026.09.02 |
|---|---|
| part4) 웹사이트 리뉴얼, 문제를 해결할 레퍼런스 사이트 찾기 (0) | 2026.08.28 |
| part2) AI에게 웹사이트 분석을 맡기지 않은 이유 - 프로젝트 지침과 프롬프트 (0) | 2026.08.26 |
| part1) 웹사이트는 왜 이렇게 만들었을까? 디자인을 위한 사이트 분석 (0) | 2026.08.25 |
| 번외. 수강생 포트폴리오 — 기획부터 배포까지, 2달 반만에 만든 것들 (0) | 2026.08.06 |
- Total
- Today
- Yesterday
- 웹디자인개발기능사
- 반응형웹
- 프론트엔드
- 찐망고
- 웹퍼블리싱
- figma
- UX디자인
- 찐망고사주
- 웹접근성
- ai사주
- 티스토리챌린지
- 디자인팁
- 웹표준
- seo
- 2024웹디자인
- html
- 바이브코딩
- 웹디자인
- 피그마
- UI디자인
- 웹디자인팁
- 오블완
- css
- JavaScript
- 머터리얼디자인
- UIUX디자인
- 웹디자인트렌드
- 구글머터리얼디자인
- 디자인시스템
- uiux
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
