콘텐츠 우선 디자인: 콘텐츠가 디자인을 결정하도록 하라 | 매거진에 참여하세요

콘텐츠 우선 디자인이란?

콘텐츠 우선 디자인(Content-first design)이란, 웹사이트나 제품의 콘텐츠가 디자인을 결정하는 접근 방식을 의미합니다.

웹사이트나 애플리케이션이 성공하려면 목표를 달성하는 데 필요한 적절한 콘텐츠가 필요합니다.
콘텐츠 우선 사고방식(Content-first mindset)으로 시작하면 무엇을 말하고 어떻게 전달할지 충분한 시간을 들여 고민할 수 있습니다.
그렇지 않으면, 디자인에 맞춰 콘텐츠를 억지로 끼워 넣는 문제가 발생하고, 사용자에게 올바른 메시지가 전달되지 않을 수 있습니다.

텍스트, 사진, 차트, 표, 목록 등 페이지나 화면에 표시될 모든 요소가 콘텐츠입니다.

프로젝트를 시작할 때, 각 페이지에 무엇이 포함될지 먼저 목록을 작성하세요.
- 대시보드라면? → 차트와 표가 필요할 것입니다.
- 마케팅 사이트라면? → 눈길을 끄는 사진, 일러스트, 설명 텍스트가 포함되어야 합니다.

콘텐츠가 곧 디자인이다.

✔ 콘텐츠의 종류
✔ 톤과 길이

이 모든 요소가 사용자 경험을 형성하는 중요한 역할을 합니다.
와이어프레임을 스케치하거나 코드 한 줄을 작성하기 전에, 사용자가 사이트에서 무엇을 소비할 것인지에 집중하세요.
이렇게 하면 사용자에게 명확하고 간결하며, 즐거운 방식으로 콘텐츠를 전달하는 데 집중할 수 있습니다.

새로운 프로젝트 작업하기

새로운 프로젝트를 진행하고 있다면, 다음 질문에 답해보세요.

• - 우리는 청중에게 무엇을 전달하려고 하는가?

• - 어떤 이야기를 들려주려고 하는가?

• - 사용자가 이 사이트에서 어떤 행동을 하기를 원하는가?

이 질문에 대한 답변을 정리하면, 사이트의 구조를 설계하고 사이트맵(Site Map)을 만드는 데 도움이 됩니다.
사이트맵은 필요한 모든 페이지/스크린을 파악하는 데 유용하며, 각 페이지를 채울 콘텐츠를 결정하는 데 중요한 역할을 합니다.

사이트맵이란?

사이트맵은 사이트 내 모든 페이지의 시각적 개요입니다.
- 기본적인 사이트 구조를 보여주고,
- 각 페이지 간의 계층 구조를 정리합니다.

사이트맵을 만들면 내비게이션 디자인을 구성하고, 필요한 템플릿을 결정하는 데 도움이 됩니다.

애플리케이션을 설계 중이라면?

애플리케이션을 디자인하고 있다면, 프로세스 흐름(Process Flow) 또는 사용자 흐름(User Flow)을 만들어보세요.

프로세스 흐름이란?
사용자가 제품을 이용하는 과정을 문서화하는 것입니다.
- 목표를 달성하기 위해 거치는 단계
- 주요 작업 및 사용자 요구사항을 강조

사용자 흐름 예시

예를 들어, 등록된 사용자가 프로필 사진을 변경하는 과정을 시각적으로 정리하는 것입니다.

• - 사용자의 행동 패턴을 이해하고,

• - UX 개선이 필요한 부분을 파악하는 데 유용합니다.

경쟁 분석(Competitive Analysis)

디자인 프로젝트를 시작할 때, 경쟁사 웹사이트나 애플리케이션을 탐색해보세요.

경쟁 분석을 통해:
- 우리 프로젝트의 방향을 명확히 정할 수 있습니다.
- 다른 사이트의 기능과 비교하여 강점과 약점을 파악할 수 있습니다.
- 좋은 아이디어를 얻고, 적용하지 않을 요소도 결정할 수 있습니다.

• - 어떤 콘텐츠나 인터랙션이 효과적인지 분석해보세요!

• * 경쟁 분석 체크리스트
  - 다른 사이트는 어떤 메시지를 전달하는가?
  - 핵심 차별점 및 주요 기능은 무엇인가?
  - 타겟 고객은 누구인가?
  - 브랜드를 시각적으로 어떻게 표현하는가?

  • 각 경쟁사의 강점과 약점은 무엇인가?

경쟁 분석을 정리하는 가장 쉬운 방법은 스프레드시트를 활용하는 것입니다.
각 경쟁사의 특징을 문서화하면, 우리 사이트의 방향성을 더 명확하게 정할 수 있습니다.

경쟁 분석 문서 만들기

경쟁 분석 문서를 작성하는 다양한 방법이 있지만,
가장 간단한 방법은 스프레드시트를 활용하는 것입니다.
이를 통해 각 경쟁사의 제공 기능을 쉽게 비교하고 정리할 수 있습니다.

스프레드시트를 사용하면 각 경쟁사가 제공하는 기능을 체계적으로 정리할 수 있습니다.

경쟁 분석 매트릭스 활용하기

- 경쟁사의 제공 기능을 더 잘 이해하고 싶다면?
- 경쟁 분석 매트릭스를 활용하면 각 기능을 시각적으로 정리할 수 있습니다.

기존 사이트 / 앱 개편하기

현재 사이트의 콘텐츠가 경쟁 분석 체크리스트에서 제시한 질문들에 답할 수 있는지 확인해보세요.

• - 그렇지 않다면, 누락된 부분이 무엇인지 파악하세요.
  - 콘텐츠가 최신 상태인지, 관련성이 있는지, 사이트 내에서 중복된 부분이 없는지 확인하세요.

콘텐츠 감사(Content Audit) 진행하기

웹사이트나 애플리케이션에 포함된 모든 콘텐츠를 문서화하고 분석하는 과정입니다.

왜 콘텐츠 감사를 해야 할까요?
- 현재 보유한 콘텐츠를 파악하면, 유지할 것과 변경할 것을 정리할 수 있습니다.
- 이를 바탕으로 템플릿을 고민하고 사이트 개편을 효과적으로 진행할 수 있습니다.

📌 콘텐츠 감사 진행 방법

일반적으로 스프레드시트를 활용하여 진행합니다.

• - 사이트의 각 페이지를 분석하고
  - 텍스트(제목, 본문, 캡션 등)를 별도의 문서로 추출하여
  - 더 명확한 표현이 가능한지, 중복된 콘텐츠가 있는지 점검하세요.

• - 대규모 사이트라면?
  사이트의 모든 콘텐츠를 분석할 필요는 없습니다.
  최근 업데이트된 콘텐츠부터 점검하는 것이 효율적입니다.

템플릿 (Templates)

프로젝트에 필요한 콘텐츠를 깊이 고민했다면, 이제 템플릿을 만드는 단계로 넘어갈 차례입니다.

대부분의 웹사이트는 템플릿(template)이라고 불리는 제한된 수의 페이지 레이아웃을 사용하여 설계 및 개발됩니다.

규모가 큰 웹사이트조차도 보통 5~7개의 템플릿만 사용하여 수백 개에서 수천 개의 콘텐츠 페이지를 지원합니다.

템플릿을 활용하면 사용자가 사이트에 익숙해지고 탐색이 쉬워지며, 원하는 정보를 더 빠르게 찾을 수 있습니다.

또한, 제한된 수의 페이지 유형을 유지하는 것이 개발 및 유지보수 측면에서도 훨씬 효율적입니다.

템플릿 제작을 시작하는 방법

지금까지 진행한 작업을 바탕으로 페이지 간 콘텐츠의 유사성을 찾아보세요.

블로그를 제작하는 경우 모든 기사 페이지는 동일한 형식을 따라야 합니다.

• 마케팅 사이트의 경우 기능 페이지와 가격 페이지의 레이아웃이 유사할 수 있습니다.

또한, “이 페이지들 중 몇 개가 동일한 형식을 따라야 할까?” 라는 질문을 던져보세요.

템플릿 유사성을 찾는 좋은 방법 중 하나는 썸네일 스케치를 그려보는 것입니다.
이 과정에서 3개의 이미지와 많은 텍스트가 필요한 템플릿인지, 20개의 이미지와 적은 텍스트가 필요한 템플릿인지 등을 파악할 수 있습니다.

아래내용은 원문을 번역 및 재가공한글입니다. 원문은 아래에서 확인하실 수 있습니다.

https://balsamiq.com/learn/articles/content-first-design/