NEW 기획 디자인 개발 프로덕트 아웃소싱 프리랜싱

디자인

커버 이미지 제작이 쉬워지는 서비스, Coverview

 

넷플릭스는 같은 콘텐츠라 하더라도 사용자 개인의 취향에 따라 여러 버전의 포스터(섬네일)를 제작한다고 알려져 있습니다. 이는 섬네일과 커버 이미지의 중요성을 보여주는 대표적인 사례로 콘텐츠 상세 내용을 요약해줌과 더불어 탐색을 더 적극적으로 만들어주는 역할을 하기 때문입니다.

 

저 역시 오랫동안 1인 미디어를 운영하며 지금까지 많은 공을 들이는 것이 ‘커버 이미지'입니다. 운영 초기에는 같은 콘텐츠를 두고, 기획자나 디자이너 등 보는 사람의 입장에 따라 서로 다른 커버 이미지 버전을 제작해 공유하는 실험을 하고, 반응을 살펴보는 과정도 거쳤습니다. 최근에는 피그마에 템플릿을 제작해두고 콘텐츠 종류에 따라 이미지를 만드는 작업을 반복하고 있습니다. 그러다 얼마 전, 이런 커버 이미지를 조금 더 쉽게, 웹상에서 제작할 수 있는 서비스를 알게 되어 오늘 소개하고자 합니다.

 

디자인에 대한 수고를 덜어주는 패턴과 테마

섬네일 커버이미지
(출처: Coverview 홈페이지)

 

‘Coverview’는 ‘Creating cover images for your blogs is now super easy’라는 소개 문구에서 알 수 있는 것처럼 콘텐츠 타이틀, 작성자, 폰트와 컬러, 아이콘, 패턴과 테마 등을 지정해 원하는 커버 이미지를 쉽게 제작할 수 있도록 도와주는 웹 서비스입니다. 앞서 피그마 내 커버 이미지 제작을 위한 템플릿을 제작해 활용한다고 했는데, 이런 수고를 덜어주는 역할로 사용하기 좋은 서비스입니다.

 

편집 화면
(출처: Coverview 홈페이지)

 

편집 화면을 자세히 살펴보면, 크게 두 개의 영역으로 구분되어 있습니다. 왼쪽에는 커버 이미지 제작을 위해 필요한 정보나 구성 요소를 확인하고 입력할 수 있습니다. ① 블로그 타이틀은 커버 이미지에서도 가장 눈에 띄는 내용으로 편집 시 먼저 입력할 수 있습니다. 글자 수 제한은 없지만, 내용이 많아질수록 가독성이 떨어짐과 동시에 커버 이미지의 주목도를 낮출 수 있으니 고려해야 합니다. ② 이어서 작성자 이름을 입력할 수 있습니다. ⑦ 이렇게 입력한 내용은 오른쪽 미리보기를 통해 확인할 수 있어 편리합니다.

 

③ 이제부턴 본격적으로 디자인 수고를 덜어주는 기능입니다. 3가지 폰트 유형 중 하나를 선택할 수 있으며, 배경 컬러를 원하는 값으로 지정할 수 있습니다. ④ 당장의 사용도가 높지 않을 수 있지만, 다양한 언어의 아이콘을 드롭다운 형식으로 지원하는 점도 매력적입니다. 콘텐츠가 특정 기술에 대한 내용을 다루고 있는 경우(ex. 포토샵) 아이콘을 하나씩 찾지 않아도 정해진 위치에 자동으로 삽입해주기 때문입니다.

 

⑤ 마지막으로 패턴과 테마를 지정할 수 있는데, 이 서비스를 써야 할 이유를 제공해주는 중요한 기능이기도 합니다. 패턴은 배경을 의미하는데, 총 18개를 지원하고 있습니다. 별도 디자인 작업을 하지 않더라도 다양한 패턴을 적용해 원하는 이미지를 제작하는 데 도움을 줍니다. 테마는 총 4종을 지원하며 전반적인 룩을 결정할 수 있도록 도와주는 역할을 하고 있습니다. ⑥ 하나씩 지정하는 것이 부담스럽다면 랜덤 생성 버튼을 활용할 수 있으며 ⑧ 완성된 커버 이미지는 ‘PNG’ 포맷으로 바로 받을 수 있습니다.

 

아이콘 종류 적용
(출처: Coverview 홈페이지)

 

아이콘의 종류는 정말 다양하게 적용되어 있습니다. 개발 언어는 물론, 크롬 등 브라우저와 포토샵 같은 프로그램도 선택할 수 있습니다. 커스텀을 선택하면 별도 아이콘을 적용하지 않고 커버 이미지를 제작할 수 있습니다. 당장 특정 아이콘을 적용할 필요가 없는 경우를 고려하고 있어 개인적으로 커스텀 상태의 이미지를 자주 제작하고 있습니다. 무엇보다 드롭다운 내, 텍스트만 제공하는 것이 아니라 아이콘도 함께 보여줘 선택 과정이 편리해서 좋습니다.

 

아이콘 커스텀
(출처: Coverview 홈페이지)

 

아이콘을 커스텀으로 선택할 경우, 파일 선택 옵션이 추가됩니다. 여기서 ‘파일'은 원하는 아이콘 또는 로고를 의미하는데 원하는 이미지를 선택해 활용할 수 있습니다. 선택한 파일은 오른쪽 ‘미리 보기'를 통해 바로 확인할 수 있습니다. 회사 이름으로 발행되는 콘텐츠라면 회사 로고를 공통적으로 활용할 수 있는 기능이기도 합니다.

 

4가지 테마 적용
(출처: Coverview 홈페이지)

 

네 가지 테마를 한눈에 볼 수 있는 모습입니다. 디자인이 적용된 3개의 테마가 있고, 이미지를 첨부해 미리 보기 형식의 테마를 활용할 수도 있습니다. 텍스트로만 구성된 커버 이미지가 아쉽게 느껴지거나, 이미지가 꼭 필요한 경우라면 ‘Theme - Preview’를 선택, 원하는 이미지를 첨부해 활용할 수 있습니다. 다만, 이 경우에는 별도 텍스트 등을 적용할 수 없어서 아쉽습니다.

 

4가지 테마 18가지 패턴
(출처: Coverview 홈페이지)

 

그럼에도 불구하고 ‘Coverview’를 사용하면 4가지 테마와 18가지 패턴을 조합해 다채로운 디자인을 생성할 수 있습니다. 저는 디자인 작업을 직접, 매번 하기 부담스러워 주로 ‘이미지'를 활용했는데, 위 이미지와 같이 동일 테마라 하더라도 패턴을 하나씩 변경해 전혀 다른 모습의 커버 이미지를 제작할 수 있습니다. 여기에 폰트 유형과 컬러를 변경할 수 있으니 빠른 시간 내에 더 많은 결과물을 제작하고 활용할 수 있습니다.

 

템플릿 패턴 적용
(출처: Coverview 홈페이지)

 

같은 내용을 각기 다른 패턴을 적용해 살펴본 모습입니다. 기존 작업 방식에 적용해보면, 우선 기본 템플릿을 하나 제작해 배경이나 이미지, 텍스트 등이 적용될 영역을 지정해야 합니다. 이어서 컬러나 폰트는 물론 우리와 잘 맞는 전반적인 룩을 확인해야 합니다. 이 방법은 첫 제작 과정이 오래 걸리고, 여러 버전을 만드는 데 있어 별도의 시간을 투자해야 하는 불편이 존재합니다.

 

하지만, ‘Coverview’는 원하는 구성 요소를 하나씩 선택해 작성한 텍스트가 어떻게 적용되는지 직관적으로 확인할 수 있으며 편집 역시 어렵지 않아 여러 작업물을 빠르게 완성할 수 있습니다. 실제로 위의 4가지 버전 커버 이미지를 제작하는 데 사용된 시간은 3분 남짓입니다.

 

 

한 번은 꼭 써봐야 하는 이유

템플릿 별도 제작
(출처: Coverview 홈페이지)

 

Coverview는 무엇보다 별도 프로그램을 통해 템플릿 등을 별도로 제작하지 않아도 된다는 점이 좋습니다. 저는 초기 PSD 파일을 여러 버전으로 제작해 콘텐츠 카테고리에 따른 커버 이미지를 제작했고, 앞서 말씀드린 것처럼 최근에는 피그마를 사용하고 있습니다. 이는 각 프로그램을 학습하는 데 시간이 필요하고, 각 프로그램에 최적화된 템플릿을 제작하는 것 역시 별도 노력이 필요합니다.

 

그렇지만 Coverview는 위 이미지와 같이 다양한 버전의 커버 이미지를 큰 노력 없이 쉽게 제작할 수 있으며, 원하는 아이콘을 첨부 한 번으로 쉽게 적용할 수 있습니다. 히스토리 등이 남지 않는 점은 아쉽지만, 커버 이미지를 빠르게 제작해야 하는 상황에서는 꽤 유용하게 활용할 수 있습니다. 회원가입이나 로그인 등의 과정 없이 페이지에 방문해 바로 사용할 수 있기 때문입니다. 서비스에 필요한 컬러나 레이아웃만 미리 논의한다면 디자인 작업 과정을 덜고 효율성을 높일 수 있는 역할을 충분히 할 수 있을 거로 생각합니다.

 

<참고자료>

Coverview

 

요즘IT의 모든 콘텐츠는 저작권법의 보호를 받는 바, 무단 전재와 복사, 배포 등을 금합니다.

댓글 0

지금 써보러 갑니다

작지만 가치 있는 변화를 이끌어내는 서비스를 만들기 위해 노력하고 있습니다. 국내외 다채로운 IT 서비스와 트렌드를 살펴보는 것이 좋아 '지금 써보러 갑니다'를 운영하고 있어요.

당신의 ‘선’ 작업을 돕는 2가지 서비스

디자인

레퍼런스 수집 및 관리가 쉬워지는, Substratum

프로덕트

애니메이션이 포함된 목업 제작 서비스, ‘Animockup’

디자인

다양한 종류의 화살표 제작을 돕는, 'Fffuel'

디자인

프로필 제작을 위한 매력적인 툴 ‘Boringavatars’와 ‘Avvvatars’

디자인

핸드 스케치를 위한 만능 툴, ‘Printables’와 ‘Sneakpeekit’

디자인

디자이너가 원하는 컬러를 손쉽게, 'Atmos'

디자인

웹 페이지 구성 도우미 ‘Shuffle’

디자인

디자인 시스템에 필요한 UI 컴포넌트 모음

디자인

다양한 UI 설정을 실시간으로 적용하는 서비스 ‘셰이퍼’

디자인

보다 쉬운 웹 접근성을 위한 도우미 : The A11Y Project

디자인

취향에 맞게 아이콘과 일러스트 편집이 가능한: Shape

디자인

원하는 폰트 조합을 쉽게 찾을 수 있는: Archetype

디자인

디자인 패턴 제작 시 유용한 서비스들

디자인

디자인 작업 시 유용한 아이콘 제공 서비스들

디자인

다양한 그래픽 콘텐츠를 제작할 수 있는: Mega Creator

디자인

박스 디자인을 쉽게 생성할 수 있는: Box Shadow Art

프로덕트

웹에서 이미지 및 영상 편집을 쉽게 하고 싶다면?

디자인

피그마 작업 시 유용한 플러그인 Top3

디자인

빠른 목업 제작을 위해 알아두면 좋은 서비스들

디자인

웹사이트와 문서에 대한 피드백을 손쉽게! : Punchlist

프로덕트

디자인 작업 효율을 높여주는 크롬 확장 프로그램 5

디자인

원하는 스타일에 따른 컬러 조합 확인이 가능한: Huemint

디자인

특정 웹페이지의 벡터 콘텐츠를 확인하는: SVG Gobbler

디자인

컬러와 물결 패턴으로 배경을 만드는: Wicked Backgrounds

디자인

다섯 가지 컬러 조합으로 웹디자인 구성을 돕는: Happyhues

디자인

바우하우스 스타일의 패턴 디자인 생성: Bauhaus Art Generator

디자인

글래스모피즘 디자인 구현을 위한 CSS 생성 서비스: Glass UI

디자인

같은 분야를 다룬 글들을 권해드려요.

요즘 인기있는 이야기들을 권해드려요.

일주일에 한 번!
전문가들의 IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.

일주일에 한 번! 전문가들의 요즘IT 이야기를 전달해드려요.

[구독하기] 버튼을 누르면 개인정보 처리방침에 동의됩니다.