brunch

매거진 UI Drill Down

You can make anything
by writing

C.S.Lewis

by 이선주 Mar 12. 2023

브런치 앱의 변화로 본 썸네일 디자인

브런치의 새로운 앱을 보며, 프레임을 떠올리다.


브런치 앱
새로워졌다.


브런치 앱이 업데이트된 지는 꽤 되었지만, 일이 바쁘다 보니 한참 후에나 올리게 된다.

이번 업데이트에서 가장 주목해서 본 부분은 '콘텐츠의 형태'로 본 썸네일과 프레임이다.


제품 디자인이라는 용어가 사용되면서, 제품에 콘텐츠를 포함하는 방식으로 디자인이 진행되었다. 그리고 한 번에 콘텐츠 전체를 보여줄 수 없어서, 썸네일이나 프레임을 만들어서 콘텐츠를 보여준다. 이미지가 있는 콘텐츠는 썸네일을 보여주거나 특정한 프레임에 사진과 이미지를 넣어서 보여준다.


2022년에 업데이트된 브런치 앱은 썸네일과 프레임을 독특한 방식으로 사용하고 있다.

'브런치 북'을 보여주는 방식인데, 브런치 북은 썸네일을 보여주는 것이 아니다. 썸네일처럼 작동하지만, 책의 모습처럼 디자인되어 있으며, 형식이 통일되어 있다.


아직 답을 찾지 못한 의문은 2가지다.

1. 브런치에서 파는 것은 작가, 글, 브런치 북 중에 무엇일까?

2. 만일 브런치북이 상품이라면, 브런치 북의 프레임은 효과적일까?


쇼핑몰에서 상품을 팔 때는 브랜드와 상품이 중요하다. 브랜드 안에 상품이 포함되는 경우가 많다. 그런데 브런치의 경우, 작가가 글을 쓰거나 브런치 북을 발행한다.


브런치 앱의 주력 상품이 무엇이냐에 따라서 UI는 해당 업종으로 가까워질 것이라고 가정했다.

- 브런치 북 일 경우, 서점의 형태 - 책을 더 많이 노출한다.

- 글일 경우, 미디엄의 형태 - 개별 글을 더 많이 노출한다.

- 작가일 경우, 링크드인의 형태 - 작가를 더 많이 노출한다.


그럼, 브런치의 이미지 변화와 썸네일과 프레임 중심으로 브런치 업데이트를 살펴보자.




2015년의 브런치



2015년 브런치 앱은 충격적인 구성을 갖고 있었다. 지금 인스타그램의 릴스처럼 글이 계속 이어지고, 글이라는 소재와 달리 적절한 디자인이 되어 있어서 이미지로 글이 전달되는 구성을 갖고 있었다. 글을 표현하는 레이아웃 혹은 템플릿은 미적으로 아름다웠지만, 사용자의 생각에도 영향을 끼치는 프레임이 되었다.


글이 가지는 느낌과 뉘앙스를 글을 읽기 전에 형성하게 되었다는 것이다. 이미지로 바뀐 브런치의 글은 감성을 자극하고, 색다름과 여유를 주었다.


글을 쓰는 사람에게 가장 어려운 일이 표지나 소개 이미지를 만드는 것이었기 때문에, 작성한 글의 표지가 멋지게 보이는 것은 훌륭한 장치였지만, 사용자 한 명에게 전달하는 콘텐츠, 상품의 수는 적은 단점이 있었다.



2022년의 브런치



2022년에 업데이트된 브런치는 이전의 형태와 스타일은 남아있지만, 이전 디자인에 비해서 사용자에게 많은 콘텐츠를 전달하겠다는 의도가 보인다. 그래서 이전에 비해서 화면이 꽉 차 보인다.


홈 메뉴에서 보여주는 페이지의 길이는 매우 긴 편으로 작가와 글, 브런치 북을 보여준다.



작가는 동그라미, 글은 사각형 썸네일이며, 브런치 북은 이전 버전까지 사용되었던 책의 모양으로 디자인되어 있다. 매거진은 카테고리의 역할을 하는데, 그렇게 부각되는 요소는 아닌 것 같다.


작가, 글, 브런치 북은 브런치 서비스를 구성하는 요소이기도 하다. 작가가 글을 쓰고, 그 글이 쌓이고, 정리되면 브런치 북으로 엮이게 된다. 브런치 북은 글보다 많은 기능과 통계가 제공되며, 브런치 앱에서 더 많이 홍보될 수 있게 된다.


브런치에서는 브런치 북을 만드는 것을 많이 강조하고 작가가 책을 만들면 실제로 출간될 수 있도록 도와주고 있다. 브런치를 통해서 출간 작가가 된 분도 많다.



브런치 북


브런치 북은 별도 폰트를 사용하여 구분하고 있다.


그래서 홈 메뉴의 길게 이어지는 페이지에서 브런치 북을 포함한 컴포넌트가 자주 반복된다. 브런치 북은 기본 형태에서 다양한 크기와 위치로 변화되어 많이 노출되고 있다.


브런치 북 콘텐츠는 작가, 내용, 요약, 분위기 전달을 여러 가지로 하고 있으며, 가장 넓은 면적을 갖는다. 하나의 콘텐츠를 메타포 혹은 컴포넌트로 만들어서 피그마에서 사용하는 베리에이션의 형태로 사용하는 방식은 쇼핑몰에서도 볼 수 있다. 플랫폼에서 서비스되는 콘텐츠가 다양할수록 하나의 브랜드나 상품이 많은 크기와 레이아웃으로 구성되어 플랫폼 전체에 흩어진다.


사용자는 내용은 같지만, 다른 형태의 콘텐츠를 보게 되어 구매나 구독, 콘텐츠 소비로 유도되는데, 이 다른 형태들이 이 글에서 말하려는 썸네일과 프레임이라고 할 수 있다.


2015년의 브런치는 글에 임의의 사진을 붙여서 썸네일과 프레임을 만들었다. 브런치의 초기 콘텐츠 썸네일과 프레임이 브런치의 초기 사용자가 앱에 참여하고 행동하게 했다면, 2022년 업데이트 사용자에게 어떤 행동을 유도하게 될지 궁금하다.


상상을 해보면, 더 많은 작가가 생기거나, 기존의 작가가 더 많이 브런치 북을 내거나, 글의 조회수가 많아지거나, 브런치 북의 조회 수가 많아질 수 있다.


또 브런치가 쇼핑몰이라는 브랜드와 제품과 시즌 세트를 한 번에 팔고 있다고 생각할 수 있다. 시즌 세트를 한 번에 파는 것은 온라인 콘텐츠만 가능하기 때문에 어떤 일이 일어나고 있는지 궁금하다.


그래서 가장 궁금한 점은 초기에 비해서 엄청나게 많아진 글을 보여줘야 하는 브런치를 보는 사용자들이 무엇을 느낄까이다. 가정이지만, 썸네일과 프레임이 사용자의 참여와 행동에 영향을 준다고 했을 때, 초기 브런치의 썸네일과 프레임에서 지금의 프레임은 많이 변했다.


사용자가 예전에 인지하던 모습은 브런치 북이 가득 찬 서점처럼 보이고, 더 작아졌지만 유연한 브런치 북의 프레임이 썸네일을 포함하여 더 많이 노출되고 있다. 브랜드 디자이너가 보면, 브런츠 북을 좀 더 다른 형태로 설명할 수 있겠지만, UI와 제품을 만드는 관점에서 면으로 전달하던 정보가 점으로 바뀌었고, 그 점이 더 집약된 형태로 노출되고 있는 것으로 보인다.




새로 생긴
탭바



2022년 브런치 앱의 가장 큰 변화는 탭바다. 예전에는 탭바가 없는 형식으로 사용되었는데, 탭바가 생기면서 명확하게 검색하고 내 서랍을 볼 수 있다. 서랍도 브런치에서 사용하는 메타포인데, 글을 쓰다가 넣어둔다는 의미에서 기능과 역할이 확장되었다.


홈과 내 서랍에서는 브런치 북이 중요했고, 검색과 구독에서는 브런치 북이 중요하지 않아 보인다.

브런치 북을 중심으로 앱을 개편했다면, 책의 표지 뿐 아니라 책의 일부 내용이 검색되는 편이 좋고, 구독 역시 책의 일부나 작가가 중심이 되어야 하지 않았을까 하는 생각이 든다.



유사한 서비스인 미디엄과 비교해 보면, 탭바와 스크린, UI에 많은 차이를 볼 수 있다. 이렇게 보면 브런치는 브런치 북을 중심으로 디자인되었다고 보면, 미디엄은 글 쓰기 중심으로 배치되어 있다. 브런치는 책의 형식을 강조했지만, 미디엄은 여전히 글의 썸네일로 되어 있다.



두 서비스의 차이는 탭바의 순서에서도 볼 수 있는데, 홈과 검색까지는 비슷하지만, 구독과 라이브러리부터는 큰 차이가 생긴다.


브런치는 작가, 글, 브런치 북 3가지를 모두 적절하게 보여줘야 하는 과제가 있지만, 미디엄의 경우는 글에만 집중한 형식을 보여주고 있다. 내 정보를 나타내는 브런치의 서랍과 비교해 보면, 브런치는 보는 것에 집중하지만, 미디엄은 쓰는 것에 집중하고 있다.


작가와 독자가 있는 두 서비스의 생산과 소비 차이는 흥미롭다. 미디엄은 유료화되어 있는 서비스라서 글을 보는데 집중한다. 브런치는 아직 유료 모델은 없는 편이다. 글을 돈 내고 본다고 했을 때는 글 하나에 집중하는 미디엄이 더 우세해 보인다. 책으로 묶을 경우, 모든 부분에서 흥미를 느끼기 어렵기 때문이다.



썸네일과
프레임


대부분의 UI에서 썸네일은 중요하다. 썸네일은 여러 가지 형태가 있고, 정보와 결합하기도 한다. 그래서 사용자가 최종적으로 보는 썸네일은 원래 상품이나 콘텐츠의 이미지, 플랫폼에서 제공하는 정보, 디자인이 결정한 형태로 보이게 된다.


브런치 앱의 경우는 메타포가 결합된 형태로 프레임이 결정되어 있다. 예를 들어 아치, 항아리, 커피잔 모양의 썸네일이 나올 수도 있다. 거기에 콘텐츠와 정보가 추가되었을 때는 단순히 썸네일이라고 하긴 어렵다. 


브런치 북의 형태는 통일된 포맷을 제공하는 표지라는 점에서 독특한 부분이고, 적극적인 프레임이라고 생각할 수 있다.


웹서비스나 플랫폼에서 썸네일을 매우 중요하다. 작은 이미지지만, 이 이미지가 마켓이나 쇼핑몰의 브랜드와 분위기 질을 평가하게 만든다는 점에서 기억해 볼만한 케이스로 볼 수 있다.

매거진의 이전글 페이스북의 탭바 히스토리

작품 선택

키워드 선택 0 / 3 0

댓글여부

afliean
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari