콘텐츠 디자인할 때 놓쳐서는 안 될 5가지

by Olivia Yu on 2022.05.03

콘텐츠를 제작할 때는 누구를 타겟으로 할 것인지부터 어떤 디자인으로 제작할 것인지까지 고려해야 할 사항이 많습니다. 대부분 콘텐츠의 내용이 가장 중요하다고 주장합니다. 콘텐츠의 내용은 크게 정보 전달과 재미 전달로 분류할 수 있습니다. 내용 작성에 앞서 타겟을 파악하고, 어떤 채널에 배포할 것인지, 어떤 톤앤매너로 이야기를 전달할 것인지 등을 결정해야 합니다. 이렇게 다양한 요소를 고려해 내용을 작성했더라도 이미지 하나 없는 긴 줄글이라면 과연 사람들의 관심을 끌 수 있을까요? 내용이 아무리 알차다고 해도 가독성이 떨어져 읽고 싶은 마음이 생기지 않는다면 소용이 없기 때문에 콘텐츠에 있어 디자인도 굉장히 중요합니다. 그럼 콘텐츠를 디자인할 때는 어떤 요소들을 고려해야 할까요?

1. 콘텐츠에 있어 디자인의 중요성

콘텐츠는 고객에게 메시지를 빠르고 명확하게 전달할 수 있어야 하므로 콘텐츠를 구성하면서 가시성은 아주 중요합니다. 콘텐츠 디자인은 내용 작성을 넘어 사용자의 요구를 파악하고, 사용자의 경험도 충분히 이해해야 합니다.

과거 영국 정부 웹사이트

한 예로, 과거 영국 정부의 웹사이트를 봅시다. 공휴일을 표기해 놓은 페이지는 불필요한 정보가 많아 가독성이 떨어지고, 다음 공휴일이 언제인지 쉽게 파악하기 힘들기 때문에 사용자 요구를 충족시키지 못한 디자인이라고 할 수 있습니다.

현재 영국 정부 웹사이트

웹사이트 리뉴얼 후 공휴일을 볼 수 있는 페이지입니다. 페이지 상단에 공휴일 날짜를 명확하게 표시하기 위해 녹색 상자와 크고 굵은 글꼴을 사용하여 가독성을 향상시켰습니다. 필요한 정보를 찾기 위해 계속해서 스크롤 하거나 검색할 필요 없이 사용자는 단시간 내에 원하는 정보가 있는 목록을 찾을 수 있습니다. 시각적으로 잘 만든 콘텐츠는 텍스트 기반의 콘텐츠보다 더욱 기억에 잘 남고 흥미를 유발할 수 있다는 강력한 이점이 있어서 과거에는 내용에만 초점을 맞췄다면 이제는 시각적인 부분까지 고려한 콘텐츠를 제작해야 합니다. 디자인의 필수 요소인 여백과 레이아웃, 색상, 타이포그래피, 이미지를 전략적으로 사용하여 콘텐츠를 더욱 돋보이게 만들 수 있습니다.

2. 여백과 레이아웃

여백

디자인할 때 범하는 흔한 실수 중 하나는 여백을 남겨두지 않거나 제대로 활용하지 못하는 것입니다. 이러한 여백을 디자인 용어로 ‘화이트 스페이스' 또는 ‘네거티브 스페이스'라 지칭하며, 시각적 요소들 사이나 아무것도 표시되지 않은 주변의 빈 공간을 말합니다.

애플 웹사이트

애플 웹사이트에서 홈팟(Home Pod) 상세 페이지는 여백을 잘 사용한 사례입니다. 비어 있는 흰 배경은 제품에 집중할 수 있게 합니다. 애플 웹사이트와 달리 모든 공간을 텍스트나 이미지, 기타 디자인 요소로 가득 채워 보는 사람의 눈을 피곤하게 만드는 경우도 있습니다. 더 나은 디자인을 위해서는 디자인 요소를 적게 사용하되, 역할이 명확하지 않은 디자인 요소를 제거함으로써 핵심 디자인 요소를 더욱 돋보이게 할 수 있습니다. 또한 디자인 주변의 여백을 넓히고 서로 관련 없는 요소 사이의 공간을 확장하여 페이지 구조를 더욱 뚜렷하고 깔끔하게 만들 수도 있습니다.

레이아웃

복잡해 보이는 디자인을 세부적으로 나눠 보면 그 속에 보이지 않는 가이드라인이 존재하고, 여러 디자인 요소들이 판형 안에 알맞게 위치한 것을 알 수 있습니다.

하단 이미지는 책 표지를 가이드라인으로 나타낸 것입니다. 이처럼 가이드라인 안에 다양한 디자인 요소들이 어떻게 정렬되어 있는지 파악하고, 디자인 요소를 적절한 위치에 배치할 수 있습니다.

가이드라인을 활용하여 판형 안에 영역을 분할하는 것을 레이아웃이라고 합니다. 즉, 레이아웃은 지면 안에서 질서와 규칙을 살려 각을 잘 맞춰주는 정렬하는 것을 뜻하며, 적절한 레이아웃을 적용하면 다양한 디자인 요소들을 더욱 보기 쉽게 전달할 수 있습니다.

우리나라는 왼쪽에서 오른쪽으로 넘기는 책, 좌측 운전석 등으로 왼쪽에서 오른쪽으로 시선이 이동하는 것이 보편화되어 있습니다. 물론 문화적 특징에 따라 오른쪽에서 왼쪽으로 시선이 움직이는 경우도 있습니다. 하지만 사람의 시선은 일반적으로 위에서 아래로 움직인다는 것은 부정할 수 없습니다. 따라서 콘텐츠를 제작할 때 대중의 시선이 움직이는 방향 또한 고려하여 디자인해야 합니다.

3. 컬러

색은 감정과 밀접하게 연결된 특성을 갖고 있어 사람들이 디자인을 어떻게 인식할지에 커다란 영향을 미칩니다. 그럼 어떤 색상이 사람들의 시선을 끌 수 있을까요?

단순한 고대비 색을 사용해 디자인 요소에 시선을 집중시키면 됩니다. 고대비 색상 색상환에서 서로 마주 보고 있는 색을 보색 또는 분리 보색이라고 합니다. 이처럼 가장 크게 대비되는 두 가지 고대비 색을 사용하여 시각적 흥미를 유발할 수 있으며, 특정 색채를 활용해 아이콘과 키워드 및 데이터와 같은 핵심 정보로 나타냄으로써 내용을 강조할 수 있습니다.

위 이미지를 통해 보색을 어떻게 활용할 수 있는지를 살펴봅시다. 우선 밝고 선명한 ‘50%’가 눈에 띄죠. 사람들의 시선은 따뜻하고 채도가 높은 색에 쉽게 반응하고, 차갑고 채도가 낮은 색에는 비교적 낮은 반응을 보입니다. 따라서 강조해야 할 부분을 따뜻하고 채도가 높은 색으로 표시해 시선이 끌었습니다. 색을 선택할 때는 크게 대비되는 색을 전략적으로 사용하여 중요한 정보를 강조할 수 있습니다.

색상환을 직접 제작하지 않고 다양한 사이트에서 무료로 제공하는 색상표를 이용하여 어떤 색 구성이 효과적인지에 대한 아이디어를 얻을 수 있습니다.

4. 타이포그래피

타이포그래피는 활자의 서체나 글자 배치를 구성하고 표현하는 일을 일컫습니다. 인쇄가 발달하여 표현의 제약이 없어진 지금은 넓은 의미로 글자를 다루는 모든 방법과 더 확장된 범위로 시각 언어에서 모든 조형적 요소를 조화롭게 배치하는 행위에 대해 탐구하는 것 그 자체를 지칭하기도 합니다.

즉, 타이포그래피는 가독성과 스타일의 균형을 위해 서체의 구조, 언어적 특징, 문자 스타일 분류 등의 전략을 기반으로 적절히 배치해야 합니다. 다양한 폰트는 가독성 또는 심미적 강점을 가집니다. 일반적으로 폰트의 심미적 측면이 두드러질수록 가독성이 떨어지게 됩니다. 따라서 문자의 근본적인 목적은 정보를 전달하는 것으로 가독성이 과도하게 낮은 폰트 사용은 지양해야 합니다.

가독성을 중시한 폰트를 선택한다고 해서 디자인을 포기해야 하는 것은 아닙니다. 큰 헤드라인 텍스트에 디자인을 강조한 폰트를 사용하고, 본문 텍스트에는 미니멀하고 깔끔한 폰트를 사용하면 타이포그래피의 본래 목적인 메시지를 전달하면서 브랜드만의 특징을 보여줄 수 있습니다.