책을 읽다 보면 인상 깊은 문장을 공유하고 싶은 순간이 있습니다. 리디북스 앱의 ‘이미지로 멋지게 공유하기’ 기능은 형광펜을 남긴 문장을 멋진 이미지와 함께 공유할 수 있는 유용한 기능입니다. 특히나 SNS로 자신의 취향을 드러내고, 감상을 나누는 행위가 대두되는 요즘이라면 더욱이 중요한 기능일 것입니다.
많이 쓰이는 기능인 만큼 개선과 관련된 의견도 많았습니다. 리디 내에서 고객의 소리를 전하는 TOC(Tears of customer)에서 이를 확인할 수 있었는데, 그 중에서도 본문의 줄 바꿈 기능을 제공해달라는 의견이 가장 많았습니다. 이 제안 외에도 개선할 수 있는 부분들을 모아 ‘이미지로 멋지게 공유하기 개선 프로젝트’를 진행했습니다.
리서치
앞에서 말한 고객의 소리, TOC를 좀 더 면밀히 살펴보았습니다. 해당 기능과 관련해 다양한 제안들이 있었고 그를 아래와 같이 분류했습니다.
줄 바꿈 관련 제안
책 내용 일부를 이미지로 공유하는 기능에 관해서입니다. 너무 좋은데 연속된 여러 문장을 선택했을때 문장간에 엔터가 없는게 너무 아쉬워요! 예를 들어 “~~~” “1111” 두 문장을 드래그하여 이미지로 공유하기를 선택했을때 “~~~” “1111” 이렇게 붙어버리더라구요 ㅜ 엔터를 추가해주시면 안될까요?
Android 저장 관련 제안
1. 안드로이드용 리디북스 어플은 왜 이미지 공유시 폰에 직접 저장을 할 수 없는 건가요? 아이폰은 이미지 저장 옵션이 있어서 바로 저장이 가능한데, 안드로이드는 반드시 카톡이든 메일이든 다른 곳으로 보낸 후에 다시 저장해야하네요. 이미지 공유 기능을 좋아해서 빈번하게 사용하던 유저인데 매번 다른 데로 보내고 거기 찾아 들어가서 재저장해야하는 안드로이드용 어플의 쓸데없는 강제이중작업 유도에 스트레스 받아 미치겠습니다. (후략)
2. 이미지 발췌 기능 참 좋은데 바로 기기 저장이 안되어서 힘듭니다. 다른 앱 거쳐서 저장해야하는거 너무 번거로워요 제발 고쳐주세요 발췌 10번 할거 1번 하게 만듭니다
3. 이북 뷰어의 ‘이미지로 멋지게 공유하기’ 에서 바로 저장 버튼도 만들어 주시면 안 될까요…? 이미지 발췌 후에 보통 카톡>나에게 보내기를 이용을 하는데 이게 매번 하다 보면 언젠간 귀찮아질 수밖에 없는 거라서… 디바이스에 바로 저장할 수 있게 만들 순 없는 건가요ㅠㅠ
iOS 인스타그램 스토리 공유 관련 제안 (사내 제안)
저희 이멋공-> 인스타그램 쉐어할때 , 스토리, 피드 둘 중 선택하게 되어있는데 스토리로 쉐어할 때 사이즈 조절이 안되어 이렇게 잘리는거 저만 그런건가요? (노션이나 아사나 태스크 개선에 내용이 없길래 제폰이 문제인가 싶어..) (개선되면 좋겠다라고 말씀드릴까말까 하고있었습니다) 자동으로 이미지가 갤러리에 추가되나 그러면 사실 인스타그램 쉐어->스토리/피드로 공유할지 누르는 의미가 없어짐..
TOC뿐만 아니라 Google Analytics를 이용해 이미지 공유 사용 행태도 살펴 보았습니다. 고객들이 어떤 폰트나 텍스트 컬러를 선택하는지 조회할 수 있는데, 이 중 가장 중요한 항목은 아무래도 공유된 본문의 분위기를 좌우하는 ‘배경 이미지’일 것입니다. 그래서 최근 3개월 동안 어떤 배경 이미지를 사용했는지 GA를 통해 그 수치를 확인했습니다.
파란색으로 표시된 이벤트 라벨의 1부터 12는 앱에서 제공하는 기본 이미지입니다. 2위를 차지한 0은 사용자가 직접 촬영하거나 갤러리에서 가져온 이미지를 추가하는 버튼을 사용했을 때 수집되는 이벤트입니다. 공유 이미지를 편집할 땐 기본으로 1번 이미지가 선택되어 있는데, 위 데이터를 살펴보면 대부분의 사용자들은 이 배경을 변경하지 않고 그대로 사용한다는 것을 알 수 있습니다.
문제 정의
1. 본문의 줄 바꿈이 공유 이미지에 적용되지 않음
줄 바꿈은 글의 흐름을 나타내기도 하고 인물 간의 대화를 나타내기도 하며, 가독성에서도 중요한 역할을 합니다. 하지만 기존 공유 이미지는 줄 바꿈이 적용되지 않아 본문의 문장과는 다른 모양을 가지게 됩니다. 특히나 짧은 대화문이 많은 웹소설 고객들이 많이 토로하는 불편함 중 하나였습니다.
2. 텍스트로 공유할 때 보다 현저히 적은 양의 본문만 공유가 가능함
텍스트로만 본문을 공유할 경우 최대 1,000자까지 공유가 가능합니다. 하지만 이미지로 공유할 경우 140자의 제한이 있고, 넘치는 분량은 말 줄임표로 처리되어 뒷 부분이 생략됩니다. 141자 이상을 공유하는 사용자는 여러 장의 이미지를 공유하거나, 140자를 넘지 않는 선에서 다시 형광펜을 남겨야하는 불편함이 있었습니다.
3. Android의 경우, 이미지 공유 시 디바이스에 이미지를 바로 저장하는 기능이 없음
리디북스 앱 내에서 바로 이미지 저장이 가능한 iOS 사용자와는 다르게, Android 사용자의 경우 이미지 편집을 끝내고 공유하는 과정에서 제공되는 share extension에 갤러리가 제공되지 않았습니다. 때문에 이미지를 디바이스에 저장하고 싶은 사용자는 SNS나 메신저로 공유 후 해당 플랫폼에서 저장해야 하는 번거로움이 있었습니다.
4. iOS 경우, 인스타그램 스토리 형태로 공유할 경우 이미지가 확대되어 보임
이미지를 공유할 때 이미지 파일을 저장하지 않고도 리디북스 앱 자체에서 페이스북, 인스타그램과 같은 SNS에 바로 게시할 수 있습니다. 이 중 인스타그램은 이미지가 주된 컨텐츠이기 때문에 공유 이미지의 역할이 더욱 중요합니다. 정방형을 기본으로 지원하는 ‘피드’ 형식의 공유는 괜찮지만, 세로형인 ‘스토리’ 형식으로 공유했을 때 세로 폭에 맞춰 이미지가 확대되는 문제가 있었습니다. 이렇게 되면 이미지의 양끝이 잘리게 되어 온전한 내용이 보이지 않고, 핀치 동작으로도 사이즈 조절이 불가능하기 때문에 이미지를 저장한 후 인스타그램 스토리에 다시 첨부해야하는 번거로움이 있었습니다.
디자인 목표
앞에서 정의한 문제와 추가로 개선하면 좋을 항목을 취합해 아래와 같은 디자인 목표를 설정했습니다.
- 줄 바꿈을 선택할 수 있도록 옵션을 제공하기
- 1번에 따라 기존보다 더 많은 분량을 공유할 수 있는 방법 제공하기
- 각 OS별 공유 시 발생하는 문제 해결하기
추가기존 배경 이미지를 새로운 배경으로 교체하기추가워터마크로 사용된 리디 로고 변경하기
1번과 2번은 공유 이미지 편집, 3번은 공유를 완료할 때 발생하는 문제에 관한 항목입니다. 4번은 리서치 부분에서도 살펴 보았지만, 기본으로 선택되는 이미지와 사용자 추가 이미지를 제외하고는 특별히 많이 쓰이는 이미지가 없었습니다. 따라서 이번 개편을 통해 사용률이 낮은 배경은 제거하고, 좀 더 트렌디한 그래픽의 배경을 제공하려고 했습니다. 함께 추가된 5번은 기존 로고를 더 커진 사업 범위를 아우를 수 있는 새로운 로고로 바꾸는 작업이었습니다.
작업 노트
줄 바꿈 옵션
줄 바꿈 옵션은 ON/OFF 토글 스위치 버튼으로 제공하기로 했습니다. 줄 바꿈을 ON 할 경우 본문과 동일한 형태로 공유할 수 있고, OFF 할 경우 보다 더 많은 분량을 공유할 수 있어 사용자가 필요에 따라 옵션을 선택할 수 있습니다. 다만, 출시할 때는 새로운 기능을 알리기 위해 디폴트 설정을 ON으로 제공하기로 했습니다.
판형
첫 이미지로 멋지게 공유하기 기능은 이미지 기반 소셜 미디어 ‘인스타그램’이 1:1 정방형 비율만 제공하던 때에 인스타그램을 타겟으로 만들어졌습니다. 하지만 인스타그램이 1:1 정방형 이미지 뿐만 아니라 세로 비율이 긴 이미지도 지원하기 시작했습니다.
1:1 이미지에서 줄 바꿈을 지원하게 되면 공유할 수 있는 분량이 현저히 적어지기 때문에 인스타그램처럼 세로로 긴 비율의 새로운 판형을 고민하기 시작했습니다.
처음에는 인스타그램 스토리를 겨냥해 디바이스 세로 길이에 꽉 차는 판형을 고려했습니다. 하지만 디바이스마다 세로 길이가 달라 최대 글자 수를 처리하는 방식이 애매해져 이 판형은 제외했습니다. 대신 대부분의 디바이스에 적절히 들어가며, 1:1 정방형보다 더 많은 분량을 담을 수 있는 3:4 세로형 판형을 추가하기로 했습니다.
글자 크기
평균적인 스마트폰 화면 크기가 커지고, 줄 바꿈 기능이 추가됨에 따라 더 많은 분량을 보여줄 수 있도록 이전에 제공되던 글자 크기를 ‘중간 글씨’로 설정하고 작은 글씨를 추가했습니다. 또한, 적은 분량도 보다 더 임팩트 있게 표시할 수 있는 큰 글씨 옵션도 추가했습니다.
원래 기본으로 제공했던 css기준 60px 사이즈를 중간 글씨로 잡고, 이보다 작은 52px 사이즈를 작은 글씨로, 시원시원한 느낌을 주기 위해 범위를 크게 건너 뛰어 80px 사이즈를 큰 글씨로 제공했습니다. 적용되는 서체는 KoPub 바탕체, 본고딕, 나눔바탕 이 세 가지였는데, 본고딕만 다른 서체보다 작게 보여 크기를 약간 키웠습니다.
안드로이드 이미지 저장
기존 안드로이드에서 공유할 때 제공되던 네 가지 방법 이외에 ‘이미지 저장’ 버튼을 새로 추가했습니다. 버튼 명을 정할 때엔 ‘갤러리에 저장’이라는 후보도 같이 고민했었는데, 기기 종류에 따라 ‘갤러리’ 앱이 없는 경우도 있어 비교적 짧고 두루 사용할 수 있는 ‘이미지 저장’이라는 버튼 명으로 정했습니다.
iOS 인스타그램 스토리 공유
기술적으로 검토해보니 1080×1920(iPhone XS 기준)의 화면을 생성하고 생성된 공유 이미지를 가운데에 놓고, 이를 다시 이미지로 만드는 방식이 가능함을 확인했습니다. 다만 처음 생각했던 이미지 뒤로 동일한 이미지가 블러 처리되어 보이는 뷰는 어려워 안드로이드와 동일하게 레터 박스로 대체했습니다.
배경 이미지
리서치에서 확인한 배경 사용 데이터를 기반으로 사용률이 적은 하위 6개의 사진 배경은 제거했습니다. 대신 본문의 글이 더 잘 보이면서 트렌디한 그래픽 스타일을 반영한 그라데이션 배경 6개를 새로 추가했습니다. 사용자에게 개편되었다는 느낌을 주기 위해 새롭게 추가된 배경을 앞 순서로 배치하고 기존 배경은 뒤쪽으로 배치했습니다.
그라데이션 배경은 디자이너의 직관으로 작업하는 부분이라 굉장히 주관적일 수 밖에 없습니다. 특히나 앞에서 본 사용 행태는 1번으로 지정된 배경을 딱히 변경하지 않고 그대로 사용한다는 패턴을 띄고 있으므로 개중에서도 기본으로 선택되는 1번 배경이 중요한 역할을 합니다. 그래서 이전 버전의 1번 배경이었던 7번 배경의 익숙한 톤을 유지하면서도, 리디의 브랜드 컬러를 더하다보니 자연스럽게 블루-퍼플의 그라데이션으로 이어졌습니다.
1번 배경 이외에도 일반, 장르 고객 모두를 최대한 아우를 수 있도록 다양한 심상의 컬러 세트를 정했습니다. 다만 색상의 채도가 너무 강렬해 본문을 침범하지 않고, 앱에서 제공하는 흰색/검은색 글씨가 적당히 잘 보일 수 있는 명도의 조합으로 배경의 톤을 조정했습니다.
RIDIBOOKS 로고 변경
전자책 서점인 ‘RIDIBOOKS’뿐만 아니라 전자책 구독 모델 ‘RIDISelect’로 사업 범위가 넓어지면서 조금 더 큰 개념의 로고가 필요했습니다. 따라서 전사적으로 RIDI라는 로고와 이름을 적용하며 공유 이미지에 붙는 워터마크도 이를 따라 변경되었습니다.
그 밖의 개선 사항
여러 개선을 진행하면서 사전에 고려하지 못했던 부분들도 함께 개선되었습니다. 우선 본문 글자에 적용된 shadow 효과를 제거해 더욱 깔끔한 이미지로 본문을 공유할 수 있게 되었습니다. 또한 개선하며 생겨난 여러 옵션들의 설정 값을 매번 선택하지 않도록 사용자가 선택한 옵션을 다음 공유 시에도 기억하도록 변경했습니다. 사용자가 직접 불러온 배경 이미지도 앱 내 별도로 복사해두어 이미지를 불러오지 않아도 되도록 개선했습니다.
어려웠던 점
이미지 최적화와 계단 현상 해결하기
이미지로 멋지게 공유하기 기능이 처음 생길 때에도 용량 문제가 있어, JPEG로 최대한 아슬아슬하게 퀄리티를 낮추어 용량을 줄인 히스토리가 있었습니다. 역시나 이번 새로운 그라데이션 이미지를 추가할 때도 이 이미지 용량 때문에 애를 먹었습니다. 처음 전달 드린 용량이 11MB정도 되었고 이를 6~7MB까지 줄여야하는 상황이었습니다.
우선 Tinypng와 같은 간단한 툴로 이미지를 일괄 압축시켰습니다. 기존에 있었던 사진 이미지는 손상이 덜하고 용량이 잘 줄여졌지만, 새로 추가된 그라데이션 이미지 중 일부는 품질이 손상되어 계단 현상이 보였습니다. 특히나 안드로이드 기기에서 이 현상이 심해서, 안드로이드 개발자 분과 여러가지를 시도했습니다.
두 번째 시도에선 그라데이션 배경의 색상 값을 가지고 코드로 구현해보기로 했습니다. javascript로 linear-gradient css 를 주입할 수 있도록 처리했지만 같은 현상이 재현되어 layerType을 조절하는 방법을 취했습니다. 하지만 여전히 계단 현상을 피할 순 없었습니다.
다시 이미지로 해결하는 방법을 고민했습니다. 원인은 알 수 없지만, 그라데이션 색상에 따라 계단 현상이 해결되는 양상이 달랐습니다. 5번의 갈색 그라데이션 이미지는 계단 현상이 가장 두드러지게 일어났는데 Adobe photoshop으로 작업해 용량을 줄였고, 나머지 배경들은 pngyu와 imageOptim이라는 툴로 계단 현상 없이 이미지 용량을 줄일 수 있었습니다.
특히 이 작업에선 시각적으로 예민함이 있어야해서 오로지 디자이너의 주관대로만 QA를 진행했습니다. 꽤 까다롭고 지난한 과정이었음에도 불구하고 좋은 퀄리티를 위해 포기하지 않고 끝까지 구현해주신 개발자분께 감사드립니다.
배포 후에 추가로 한 작업
개선된 이미지로 멋지게 공유하기 기능이 배포된 후에, 전자책 전용 글꼴인 ‘리디바탕’이 출시 되었습니다. 리디의 ebook 리더기인 페이퍼나 리디북스 뷰어 앱에 리디바탕이 기본 서체로 탑재되면서, 자연스럽게 이미지로 멋지게 공유하기 기능에서도 기본으로 제공하는 서체로 추가했습니다.
프로젝트를 마치며
이제는 이 기능을 개선한지 1년이 넘었기 때문에 쌓인 데이터가 풍성했고, 그 중에서도 배포 직후의 반응을 살펴보기 위해 배포 전후 세 달의 사용률을 비교했습니다. 이벤트 수 자체는 165%정도 상승한 것으로 보여지며 총 사용자도 68%정도 늘었고, 사용자당 이벤트 수 자체도 50% 이상 상승한 데이터를 확인할 수 있었습니다.
리디북스 이번에 업데이트하면서 이미지 공유 기능 불편했던 부분 싹 다 개선한 거에 지금 물구나무 서서 박수치는 중
위 문장은 개선 후 사용자 반응 중 하나를 인용했습니다. 데이터와 인용된 문장처럼 각종 커뮤니티, SNS에서도 반응이 좋았습니다. 기능 개선을 기뻐하는 사용자들의 글을 어렵지 않게 찾을 수 있었고, 새롭게 추가된 기능으로 편집한 공유 이미지들도 많이 보였습니다.
사용자로서도 이 기능을 잘 쓰고 있어 설렘 반 두려움 반으로 작업했는데, 좋은 결과로 이어져 기쁩니다. 또한 좋아하는 기능을 개선한다는 기쁨과는 별개로, 여러 실험을 통해 더 좋은 품질을 위해 몰입하는 경험도 즐거웠습니다. 더 좋아진 기능만큼, 앞으로도 더 많은 공유 이미지를 이 곳 저 곳에서 볼 수 있었으면 좋겠습니다.
리디 기술 블로그
고객과 발맞춰 새로운 콘텐츠 경험을 선보이는
리디와 함께할 당신을 기다립니다.
