매일 감각을 전달해주는 콘텐츠 구독 서비스, LongBlack 속의 LottieFiles 스토리
지식 콘텐츠 플랫폼에서 모션으로 읽기를 더 자연스럽고 즐겁게 하다
큰 동작, 화려한 모션만이 멋있고 효과적이라고 생각하지 않습니다. 멈춰있는 것에 작은 움직임을 더함으로써 고객이 메시지에 공감을 하며, 의미를 전달 받는 것이 모션이 주는 긍정적인 효과라 생각합니다.
롱블랙 (LongBlack)은 비지니스 세계의 감각적 케이스를 다룬 깊이 있는 콘텐츠를 더불어 독자로 하여금 매일 하나의 글을 읽는 습관까지 형성해주는 신개념 지식 콘텐츠 구독 서비스 입니다.
"하루 한번의 성장", 곧 24시간이 지나면 사라지는 기사들을 통해 독자들의 기대감과 탐험을 응원하고 성장의 여정을 건합니다. 이런 롱블랙의 매력을 입증하듯 1년 사이에 한국비지니스 업계를 사로잡았습니다.
롱블랙은 초기부터 지금까지 브랜딩과 디자인 아이덴티티가 가지는 힘을 인지하고 이를 가장 효과적으로 활용하고자 노력했습니다. ‘롱블랙을 읽는 사람’ 이라는 하나의 아이덴티티로서 작용하는 서비스가 되고자 노력하였고 결과적으로 현재의 모던하고 세련되었지만 어딘가 친숙한 롱블랙의 이미지가 탄생하게 되었습니다.
이런 롱블랙의 페이지 속에는 다양한 모션이 적절히 사용되고 있는데요.마치 잡지 페이지 같은 감각적인 롱블랙의 페이지 속의 애니메이션, 궁금하지 않으신가요? 롱블랙의 디자인팀과 나눈 스토리와 그 속의 모션을 오늘 소개합니다.
모던하고 세련된 롱블랙이 추구하는 디자인
디자인의 컨셉이나, 유저에게 롱블랙이라는 브랜드가 보여주고 싶은 모습은 무엇인가요?
김리연 디자인 리드: 많은 분이 롱블랙 홈페이지를 보고 나시면, 잡지의 한 페이지를 본 것 같다는 말씀을 해주십니다. 다른 웹사이트와는 차별화되는 과감한 컬러와 레이아웃 덕분인 것 같아요.
사실 롱블랙은 다른 미디어 서비스와는 달리 초기부터 ‘디자인’의 중요성에 대해 깊이 생각했습니다. 책에 갇혀있는 콘텐츠를 어떻게 디지털라이징을 잘 할 것인가가 디자인의 핵심이였죠.
첫째는 Readability
문장적으로도, 이미지적으로도 직관적으로 정보가 전달되도록 가독성을 고려해 레이아웃을 잡았습니다.
둘째는 Learning Mate
하기 싫은 공부지만, 독려하고 함께 성장하는 친구 같은 서비스가 되는 것. 딱딱한 글이지만 더 즐겁게 읽을 수 있도록 만드는 것이죠.
모션 도입 & Lottie를 쓰게 된 계기
롱블랙의 매일 발간되는 글이 다른 매체에 비해, 밀도도 높고 텍스트의 양도 많은데, 이런 딥 프로파일 글에 모션을 도입하게 된 계기는 무엇인가요?
김리연 디자인 리드: 하루 발행되는 콘텐츠의 글은 하루 9000자 입니다. 매일 꼬박꼬박 방문하는 고객들에게 오늘의 목표를 달성했을 때 새로운 경험을 주고자 처음 모션을 넣어 개발한 것이 스탬프 기능이에요.
실제로 스탬프를 찍는 것 같은 동작을 부여해 스탬프를 클릭하고 나면, 롱블랙 스티커가 화면에 찍히죠. 매일 노트를 읽고 찍히는 스탬프가 약 5000개 정도 됩니다.
큰 동작, 화려한 모션만이 멋있고 효과적이라고 생각하지 않습니다. 멈춰있는 것에 작은 움직임을 더함으로써 고객이 메시지에 공감을 하며, 의미를 전달 받는 것이 모션이 주는 긍정적인 효과라 생각합니다. 그래서 저희는 콘텐츠를 읽는 것에 방해가 되지 않되, 모션을 효과적으로 사용해 좀 더 인터랙티브한 공간 경험이 이루어졌으면 좋겠습니다.
롱블랙의 콘텐츠 안에서 모션의 역할은 무엇인가요? 혹시 모션을 쓰는 요소에 대한 기준이 있으실까요?
김리연 디자인 리드: 롱블랙 서비스는 ‘하루 하나만 올라오는 콘텐츠를 놓치지 말고 읽자’라는 강력한 미션이 있습니다. 하지만 무언가를 꾸준히 배우고 공부하기란 쉽지가 않습니다. 또 매일 똑같이 반복되는 것만 보다보면 쉽게 질리기도 하고요.
그래서 저희가 생각하는 모션은 역할은 크게 4가지로 정리해보았습니다.
첫째, 매일 반복되는 부분에 변화를 주는 것 둘째, 서비스 이용방법(메시지)를 간결하게 전달하는 것 셋째, 홈페이지 내에 중요한 부분을 강조하는 역할을 해주는 것 마지막으로, 고객에게 기분 좋은 감정을 전달하는 것이라고 생각합니다.
이윤희 디자이너: 모션을 쓰는 요소 뿐만 아니라, 모션 자체에도 모던함을 잃지 않기 위해 신경 쓰고있습니다. 보통 애니메이션은 어느 정도의 과장이 섞여있다고 생각합니다. 그 과장은 시선을 사로잡기도, 전달하고자 하는 바를 더 강조해서 보여주기도 하죠. 그러나 이러한 모션이 홈페이지의 전반적인 분위기를 저해하는 이질적인 요소가 된다면 서비스를 돋보이게 하는 움직임이 아닌, 그저 눈에 거슬리는 방해꾼에 지나지 않는다고 생각해요. 롱블랙 브랜드 이미지와 어울리는 적당한 움직임, 그러나 명확한 의도 전달을 가장 우선시하여 절제되고 세련된 움직임을 주기 위해 노력하고 있습니다.
모션을 구현하기 위해 다양한 포맷을 활용할 수 있는데, 로티를 사용하게 된 이유가 궁금합니다.
이윤희 디자이너: 로티를 사용하기 전 홈페이지 상의 모션 요소는 svg로 삽입 되어있었습니다. 에프터이펙트를 주로 사용하는 입장에서 에프터이펙트와 호환이 불리한 svg가 아닌, 다른 파일의 형태로 애니메이션을 싣고자했고 대안으로 가장 적합했던 포맷이 바로 json기반의 로티였습니다.
특히나 벡터 기반의 모던한 2D 그래픽을 디자인 요소로 사용하고 있는 롱블랙에게 로티는 가장 실용적인 포맷이라고 생각했기 때문이죠.
에프터이펙트를 활용할 수 있는 점 이외에도 퍼블리싱을 담당하고 있는 프론트엔드 개발자분과의 파일 전달과 소통에 유리한 점 덕분에 이후 홈페이지 상 모든 모션 요소에 로티를 적극적으로 사용하고 있습니다.
특히나 벡터 기반의 모던한 2D 그래픽을 디자인 요소로 사용하고 있는 롱블랙에게 로티는 가장 실용적인 포맷이라고 생각했기 때문이죠.
에프터이펙트를 활용할 수 있는 점 이외에도 퍼블리싱을 담당하고 있는 프론트엔드 개발자분과의 파일 전달과 소통에 유리한 점 덕분에 이후 홈페이지 상 모든 모션 요소에 로티를 적극적으로 사용하고 있습니다.
롱블랙에 실린 기억에 남는 Lottie가 있다면?
이윤희 디자이너: 노트 하단에 평점을 매기는 영역이 있습니다. 평소에는 커피잔과 연기, 커피콩 등이 멈춰있는 그래픽으로 구성되어있죠. 크리스마스, 그리너리 위크와 같은 시즈널한 이슈가 있는 기간에는 평점 영역에 고객들이 평소와 다른 특별한 경험을 할 수 있도록 로티를 활용하고 있습니다.
롱블랙 콘텐츠의 본질은 공부입니다. 공부는 재미없고 힘든 행위 중 하나인데요 롱블랙에서 하는 공부는 ‘쉽고 즐겁게’ 만들고 싶었고 그런 롱블랙의 미션을 녹여내고 싶었습니다.
실제로 해당 기간 평점 영역의 로티를 녹화하여 인스타그램 스토리에 올려 즐거워하는 고객들을 통해, 작지만 특별한 경험을 안겨줄 수 있는 모션의 효과를 몸소 느끼곤합니다.
앞으로도 저희는 평점 영역에 다양한 로티를 도입하여, 시즌마다 어떤 변화가 있을지 기대하며 방문하게 되는 공간을 만들고자 합니다.
김리연 디자인 리드: 콘텐츠로 만족감을 얻은 고객에게, 기분 좋은 피니셔빌리티(Finishability)를 제공하고자 로띠를 적극적으로 사용한 곳은 글이 끝나는 마지막 부분의 평점 배너입니다.
한달에 한번 열리는 위크, 할로윈, 크리스마스 등 특별한 이벤트가 있을 때 색다른 감동을 전하고 싶어 이곳에 작은 무대를 펼쳐보았습니다.
사실 평점을 받는 다는 것은 무섭고 긴장되기도 합니다. 하지만 그 영역을 밝고 기분 좋게 구현하면 사용자에게 기분 좋은 감동을 전하고 점수에도 긍정적인 효과를 주리라 생각합니다. (웃음)
정보가 너무 많아서 탈인 21세기를 살아가는 한 사람으로서, 롱블랙이라는 매체가 있어 행운이라는 생각이 듭니다. 단순히 디자인 뿐만 아니라, 롱블랙이 전하는 다양한 가치와 이야기들은 현대인의 좋은 지적 양분이 되어주는 것 같아요. 그런 의미에서 앞으로의 롱블랙의 목표가 궁금합니다. 그 미래의 롱블랙에서도 모션은 꾸준히 활용되고 있겠죠?
김리연, 이윤희 디자이너: 좋은 글을 만들고, 좋은 습관을 제공해서 읽는 문화를 바꾸고 싶습니다.
그 뒤엔 좋은 디자인과 사용성이 필요하다고생각합니다. APP 출시도 준비하고 있고 앞으로 좀 더 다양한 카테고리의 이야기로 확장할 수 있을 것 같습니다. 로티파일즈와 롱블랙이 함께 더 성장하면 좋겠습니다.
연말에 롱블랙 이용권을 선물하는 기능이 추가될 예정입니다. 오랫동안 기억하고 싶은 감각적인 지식 콘텐츠를 선물하는 것을 제안하면서 말이죠. 이용권 결제가 끝나면, 고객이 직접 선물을 하는 듯한 기분을 느낄 수 있도록 상자가 포장되는 모션이 보여집니다. 그리고 상자 안에는 롱블랙의 서비스를 상징하는 그래픽을 담겨있어요. 연말 연초를 맞아 가까운 지인에게 일반적인 물건이 아닌, 감각을 키울 수 있는 특별한 선물을 할 수 있으면 좋겠습니다.
흔히들 모션을 이야기 할 때, 사용자의 관심을 유발하는 장치로서 이야기하는 경우가 많습니다. 하지만 오늘 우리가 롱블랙의 사례에서도 확인했듯, 모션의 활용방법은 무궁무진합니다. 모션이 전달하는 즐거움과 상호작용성은 사용자로 하여금 성취를 느끼게 할 수 있고, 이는 습관의 형성으로까지 이어집니다.
우리는 롱블랙의 스토리에서 단순히 많은 양의 모션을 사용하는 것보다, 서비스의 적재적소에 모션을 활용하여 사용자의 반응을 유도하는것이 더욱 지혜로운 모션 활용이라는 것을 알아볼 수 있었습니다.
콘텐츠 플랫폼에서 어우러진 다양한 모션의 역할만큼, 앞으로 롱블랙에서 도전할 다채로운 계획들도 기대가 됩니다.
롱블랙을 통해 만나는 모션, 더 궁금하시다면 롱블랙 사이트로 가보세요. 롱블랙의 브랜딩과 그 속의 로티는 물론, 매일 제공되는 콘텐츠를 향유하며 하루의 성장을 경험해보세요.
롱블랙 노트 보러 가기 → 많은 구독자분들이 높은 평점을 받은 노트를 읽어보세요. 해당 노트는 2022년 12월까지 무료로 확인하실 수 있습니다
