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

프로덕트

손이 욱신거리지 않는 에디터 없나요?

모바일 에디터의 중요성

 

(에디터, 재그마스터) 저는 여전히 PC에서 글쓰기를 더 선호해요. 몰입하기 좋은 환경이기 때문입니다. 다만, 최근 모바일에서도 글쓰기 연습을 조금씩 늘리고 있어요. 이를 바탕으로 브런치, 포스타입 등 장문의 글을 쓰는데 초점이 맞춰진 서비스들이 에디터를 어떻게 활용, 구성하고 있는지 자세히 들여다봤어요. 모바일에 어떻게 최적화 되어 있는지, 모바일 전용 기능은 무엇인지 함께 살펴보는 시간이 되길 바라요!

 

(에디터, 동동) 회의록, 일기, 뉴스레터, 자료조사 요약 등 정말 많은 영역에서 글을 쓰고 있는 것 같아요. 그때마다 PC, 모바일, 태블릿 다양한 기기를 쓰고 있는데, 저는 아무래도 가볍게 접근할 수 있는 모바일을 통해 글을 써보려 노력하고 있습니다. 아직 모바일 에디터는 PC에 비해 편의성이 많이 떨어지긴 하지만, 접근성이 높은 모바일 에디터 서비스는 어떤 장점이 있는지 살펴볼게요!

 

(에디터, 조이) 저는 자칭 메모 중독자입니다. 하루에 모바일 에디터만 최소 14분 이상 사용하고 있어요. PC 에디터까지 합치면 하루에 1시간 이상 사용해요! 지금 드는 생각, 해야 할 일 리스트, 메일 초안 작성 등 어떤 행동을 하기 전 반드시 메모하고 일을 하는 습관이 있어 의존도가 높아요. 이전에 갤럭시 S7을 사용할 땐 다양한 메모 앱을 내려받아 사용하다가 아이폰으로 바꾸고 나선 아이폰 기본 메모만 사용하고 있어요. 저에겐 가장 익숙하고 활용도가 높은 아이폰 메모부터 이전에 사용해왔던 삼성 노트, 지금 써보러 갑니다 에디터를 시작하며 많이 사용하게 된 노션까지 ! 각 서비스별 에디터 기능, 연동, 공유기능까지 함께 살펴볼게요!

 

 

주요 서비스 사례

 

브런치

브런치를 베타때부터 써왔지만, 모바일 환경에서 글을 처음부터 끝까지 작성해본 경험은 없어요. 보통 저는 새로운 글을 쓰기 위한 메모를 모바일에서 미리 작성하거나, 작성이 완료되어 발행 전 글을 모바일 환경에서 확인하기 위한 용도로 활용하고 있는데요. 브런치 에디터의 문제라기 보다 여전히 PC에서 글을 작성하는게 익숙한 것 같아요.

 

브런치 에디터 기본 구성

그럼에도 불구하고 브런치는 에디터가 꽤 탄탄하게 구성되어 있어요.

 

  • 이미지 첨부
  • 기타 글감 첨부 (동영상, 장소, 스티커, 구분선)
  • 스타일 편집 (글자색, 크기, 인용 및 강조 적용 등)
  • 좌, 우, 중앙 정렬

 

기본 구성에서 한 가지 아쉬운 점이 있다면, 이미지 첨부와 동영상 첨부가 분리되어 있다는 점인데요. 브런치는 영상보다 이미지가 첨부된 글이 상대적으로 많지만, 이미지 첨부 기능에 영상도 함께 포함되어 있었다면 어땠을까 하는 생각은 들어요.

 

(에디터, 재그마스터의 덧붙임) 브런치는 사용자가 에디터의 어떤 기능을 선택하고 있는지 시각적으로 안내하고 있어요. (2)글감 첨부, 스타일 등을 선택하면 컬러가 변경됩니다. 여전히 모바일은 PC 대비 글을 작성하는게 복잡하거나 어렵게 느껴질 수 있기에 어떤 행동을 하고 있는지 또는 어떤 기능을 선택했는지 등에 대해 명확한 안내를 제공해주는 것이 중요합니다.

 

 

제목 및 소제목 편집

(1)기본 편집 화면에서도 제목과 소제목 작성이 가능하지만, 브런치는 별도 편집 화면을 제공합니다. (2)한 단계 더 진입하게 되는 화면에서 제목, 소제목 작성은 물론 커버 이미지 첨부와 배경 컬러 적용 등 별도 작업을 할 수 있어요. 브런치 커버는 다양하게 구성되기도 하고, 이는 구독자 입장에서 브런치 앱을 즐기는 중요한 방법 중 하나입니다. 또 PC에서는 기본 편집 화면에서 가능하지만 모바일에서 동일하게 적용할 경우 기본 편집 화면과 분리해서 보기가 어려워 이와 같은 결정을 한 것 같아요.

브런치 내 다양한 커버 적용 사례

 

 

이미지 첨부

이미지 첨부는 선택 개수에 따라 적용 방법이 달라져요. 둘 이상을 선택하면 한 장씩 올리기, 그룹으로 올리기, 취소 중 선택이 가능합니다. 편집도 가능해요. 다만, 편집은 한 장 단위로 가능한데 이 사실을 알기가 쉽지 않습니다. (3)한 장 선택 시 ‘편집’ 텍스트와 (4)여러 장 선택 시 ‘편집’텍스트 차이를 구분하기 어렵기 때문입니다. 실제론 비활성화 된 상태. 이 역시 가능, 불가능 여부를 시각적으로 더 명확하게 보여주거나, 한 장 단위로 편집만 가능하다는 사실을 안내해줬다면 어땠을까 싶어요.

 

(에디터, 재그마스터의 덧붙임) (1)이미지를 2개 이상 선택 후, 개별 또는 그룹 올리기를 선택할 수 있어요. 처음 모바일에서 이미지를 첨부할 때, 그룹으로 올리기가 어떤식으로 적용되는지 몰라 업로드 후에야 자세히 알 수 있었는데요. 어떤식으로 적용되는지, (2)편집은 또 어떻게 할 수 있는지에 대한 안내를 첨부 방식 선택 시 안내해줬다면 어땠을까 하는 생각이 들어요. 결국, 모바일앱에서 에디터는 PC 환경과 별개로 얼마나 최적화가 잘 되어있는지가 사용자 입장에서 사용성을 결정하는 요소입니다. 최초 학습 역시 행동 후가 아니라 행동 전에 제공되는게 중요하고요.

 

 

동영상 및 장소 등록

앞서 언급한 것처럼, 동영상은 이미지와 별개로 접근해야 해요. 동영상이 장소, 스티커, 구분선 등과 함께 있는게 여전히(개인적으로) 어색하게 느껴집니다. 동영상은 한 번에 10개까지 등록이 가능해요. (1)각 영상의 길이 정보도 확인 할 수 있습니다. 선택 화면 (2)왼쪽 아래로 전체 수와 현재 선택한 수를 확인할 수 있고, 적용 시 (3)이미지와 구분을 위해 영상이라는 점을 시각적으로 안내하고 있어요.

 

(에디터, 재그마스터의 덧붙임) 이미지, 영상 업로드 서비스를 담당했을 때, 길이 제한에 대한 정책을 정해놓고도 선택 - 등록 후에야 15초 이내만 등록 가능하다는 안내를 제공해 사용자들의 불만이 쏟아졌던(?) 기억이 있는데요. 동영상은 길이가 정말 중요해요. 선택 화면 내 자동재생이 불가능한 환경에서 어떤 영상인지 유추할 수 있는 중요한 기준이자 정보가 되기 때문입니다. 길이 제한은 없기에 브런치에서 모든 영상이 선택 가능하게 되어 있지만, 만약 길이 제한이 있다면 사전에 선택 불가능하도록 비활성화 하는 것도 중요해요. 또 업로드 후, 편집 과정에서 헷갈리지 않도록 이미지와 구분될 수 있는 정보를 제공하는 것도 마찬가지!

 

 

스티커 및 구분선 등록

 

 

스타일 편집 기본

어떤 서비스든, 편집 과정에서 스타일 편집을 가장 많이 활용하게 되는 것 같아요. 모바일에서 스타일 편집이 더 중요한 이유는 ‘편집 할 텍스트’를 선택하는게 PC 대비 어렵기 때문이에요. PC에서는 마우스 또는 터치패드를 통해 쉽게 선택, 빠르게 스타일을 적용할 수 있지만 모바일에서는 롱 탭 - 영역 선택 - 상태 유지 후 원하는 스타일을 적용해야 하기 때문입니다. 

 

  • 글자 및 배경 컬러, 굵기, 밑줄, 취소선 적용
  • 제목 1-3, 본문 스타일 적용
  • 강조, 인용, 목록, 링크 적용

 

브런치 스타일 편집 화면은 크게 3가지로 나뉘며, 앞서 언급한 ‘영역 선택’의 불편을 최소화 하기 위해 문장 단위로 적용 가능한 기능이 포함되어 있어요. 문장의 끝에서 제목1을 선택하거나, 인용을 선택하면 전체에 적용되는 방법입니다. 모바일 환경이기에 가능한, 최적화 방법 중 하나이기도 해요. 물론 문장 내 일부를 진하게 표기할 때 등 영역을 선택해야 하는 상황이 생길 수 밖에 없지만 문장 단위로 쉽게 적용할 수 있는 기능이 없었다면 매 번 영역을 선택해야 하는 더 큰 불편이 있었을거라 생각합니다.

 

(1)~(3) 어떤 스타일을 적용할 건지, 아니면 적용되어 있는지를 브런치는 놓치지 않고 안내해줘요. 진하게가 적용되어 있다는 사실 등을 말이죠.

 

(4)또 인용, 강조 등은 실제 적용 시 어떤 모습인지 시각적으로 보여주며 (5)링크 적용 시, 링크가 적용 될 문장을 팝업 내 함께 보여줍니다.

 

(에디터, 재그마스터의 덧붙임) 링크 적용처럼 사용자가 앞서 한 행동 또는 연관 정보를 안내해주는 건 무척 중요해요. 모바일에서는 영역을 선택하는게 쉽지 않아 한 글자가 더 선택되는 등의 상황이 자주 발생하기에 플랫폼에 따른 환경을 한 번 더 생각해보는 과정이 필요합니다. 브런치가 링크 적용 텍스트를 함께 보여주지 않았다면, 링크가 적용된 후, 글자가 더 포함되었다는 사실을 알게 될테고 그럼 동일한 행동을 한 번 더 해야하는 불편이 생길 수 있어요.

 

 

발행 및 맞춤법 검사

브런치는 편집 화면에서 오른쪽 위 완료 버튼을 선택 시 발행, 저장, 맞춤법 검사, 취소 중 하나를 선택할 수 있어요. (1)발행을 선택하면 작가가 생성한 매거진과 키워드 선택이 가능해요. 키워드는 3개까지 선택 가능하며, 본문에 작성된 내용을 바탕으로 추천, 사용자가 직접 검색 후 선택도 가능합니다.

 

또 하나 중요한 기능은 맞춤법 검사인데요. 저는 글을 작성할 때, 맞춤법을 정말 중요하게 생각해요. 글을 읽다, 맞춤법이 틀린 걸 발견하면 몰입이 잘 되지 않기 때문인데요. 브런치는 승인된 작가만 글을 쓸 수 있다는 것 외, 맞춤법 검사를 통해 글의 퀄리티를 유지하기 위해 노력하고 있어요. (2)맞춤법 검사 시, 상단으로는 제가 작성한 키워드를, 하단으로는 올바른 내용을 함께 확인 할 수 있어 쉽게 변경 및 적용이 가능해요.

 

 

포스타입

포스타입은 브런치와 달리 작가의 수익모델이 명확하게 잡혀 있어요. 글의 일부만 공개, 나머지를 유료 멤버십 구독자에게만 공개하는 등의 기능이 에디터에 기본 적용되어 있기 때문입니다. 2016년 서비스를 시작해, 2020년 여름 시리즈A 26억 규모 투자 유치에도 성공한 스타트업입니다. 개인적으로 콘텐츠 비즈니스에 관심이 많아 포스타입도 계속 살펴보고 있는데요! 이번 기회에 에디터 위주로 더 상세히 들여다볼 수 있었습니다.

 

포스타입 에디터 기본 구성

브런치와 포스타입 에디터의 가장 큰 차이는 에디터 기능 위치에요. 브런치는 기본적으로 하단에, 포스타입은 상단에 위치하고 있습니다. 또 브런치는 앱 내 기능으로 구현되어 있지만, 포스타입은 웹뷰로 에디터 기능 활용이 가능합니다.

 

또 브런치가 스타일과 인용, 강조 등과 이미지, 영상 첨부를 별도 메뉴로 각기 다르게 활용하는 것과 달리 포스타입은 스타일, 문단 편집 기능과 첨부(이미지 포함) 두 가지로 분리해두었어요. 맞춤법을 대하는 자세도 다른데요. 브런치는 모든 글을 작성 후 발행 전 확인이라면, 포스타입은 모바일에서 글을 쓰며 언제든 맞춤법 검사를 할 수 있게 별도 메뉴로 빠져있는 모습입니다.

 

(에디터, 재그마스터의 덧붙임) 이전 작업을 취소하는 기능이 눈에 띄어요. 브런치 사례를 통해 여러 번 말한 내용이지만, 모바일에서는 결국 작업을 얼마나 간소화 해줄 수 있느냐가 핵심이기에 동일한 과정을 거쳐 작업을 취소하기 보다 되돌리기 등을 통해 탭 한 번으로 취소할 수 있는 기능이 더 편리하게 느껴질 수 밖에 없습니다.

 

 

스타일 편집 기본

포스타입에서 스타일 편집은 기본 확인 가능한 기능과 펼쳐서 확인 가능한 기능으로 나뉘어 있어요. 일단 (1)진하게, 밑줄, 링크 적용, 크기, 인용, 목록, 숫자목록, 구분선을 바로 사용할 수 있고 화살표를 탭 해 (2)정렬, 테이블, 컬러, 기울임, 폰트 종류 등을 추가 확인, 설정할 수 있습니다. 이때 글꼴과 글 정렬, 들여쓰기와 여백 주기 등 글 편집 전체에 적용되는 기본 스타일 설정도 가능해요.

 

아쉬웠던 점은 기본 스타일 설정이 기본 기능에 포함되어 있지 않다는 점 (1번 영역), 그리고 2단으로 펼쳤을 때 원하는 기능을 빠르게 찾기 어렵다는 점이었어요. 각각의 기능으로 적용해 1단으로 바로 확인 할 수 있는 구성이었다면 어땠을까 하는 생각이 들었습니다.

 

(에디터, 재그마스터의 덧붙임) (3)번 영역을 보면 X 버튼이 있고 바로 아래에 뒤로가기 버튼이 있어요. X는 웹뷰를 닫는 역할을, 화살표는 앱 내 이전 화면으로 돌아가는 역할을 하는데요. 화살표 선택 시 입력한 내용이 삭제될 수 있다는 안내가 뜨지만, X 버튼을 탭하면 내용이 저장되지 않은 상태로 닫힙니다. 테스트를 위해 작성한 내용이지만, 만약 모바일 환경에서 글을 작성했고, 임시 저장이 되지 않았다면 사용자 입장에서 그리 좋은 경험은 하지 못할거란 생각이 들었어요. 구조 상 어쩔 수 없다면 첫 글을 작성할 때 안내 해주거나, 시간에 따라 임시 저장을 해주는 식으로 대응해야 하지 않을까 라는 생각이 들었습니다. 사용자 입장에서 두 버튼의 명확한 차이를 인지하지 못할 가능성이 높기 때문입니다.

 

포스타입 역시 에디터 내 어떤 기능이나 스타일을 적용, 선택했는지 시각적으로 안내해줍니다. 다만 (1)상단에 편집 기능이 몰려 있다 보니 매 번 작성한 글이 겹쳐져 편집에 방해가 된다는 느낌을 자주 받았어요. 브런치는 하단에 기능이 적용되어 있어 작성 또는 선택한 문단과 문장을 보며 자연스레 편집이 가능한 것과 다른 모습이기도 했고요.

 

(에디터, 재그마스터의 덧붙임) 모바일 환경에서 스크린은 태블릿, PC 등과 비교해 훨씬 작기에 작성한 내용과 편집 기능을 어떻게 동시에 보여줄 수 있을지, 확인 - 적용 - 확인 이라는 과정을 상대적으로 덜 반복할 수 있을지 고민해야 된다는 생각이 드는 사례이기도 합니다.

 

 

이미지 및 기타 내용 적용

포스타입 이미지 첨부는 직접 등록이 아닌 이미지 보관함에 업로드 후 선택 - 삽입하는 방식이에요. 덕분에(?) 한 장의 이미지를 첨부하기 위해 4단계를 거쳐야 해요. 또 이미지 선택 시 로컬 갤러리로 이동할 경우 한 장씩 불러올 수 있어요. (1)여러 장을 불러왔을 경우, 레이아웃을 선택한 상태로 삽입 할 수 있는 점은 좋았습니다.

 

외부 콘텐츠를 자유롭게 임베드 할 수 있는 점도 매력적이에요. URL만 입력 가능한게 아니라 (1)적용 가능한 서비스 아이콘을 함께 제공해 이해를 돕는 점이 눈에 띄었습니다.

 

(에디터, 재그마스터의 덧붙임) 이미지는 글 작성 시 가장 많이 첨부되는 내용 중 하나에요. 이미지 선택 과정이 중요할 수 밖에 없는 이유입니다. 사용자가 별도로 갤러리로 접근, 한장씩 선택하는 방식보다 갤러리로 기본 진입해 원하는 이미지를 한 번에, 정해진 수만큼 불러올 수 있다면 더 좋은 사용성을 가져갈 수 있지 않을까요?

 

 

발행 및 맞춤법 검사

포스타입 맞춤법 검사에는 (1)베타 테스트중입니다. 라는 문구가 포함되어 있어요. 이 문구가 지니는 의미는 꽤 큰데요. 우리 이런 기능을 업데이트 했는데 아직 베타라 불안정 할 수 있어! 라고 말했을 때 받아들이는 정도가 다를 수 있기 때문이에요.

 

발행 시 확인, 설정 가능한 범위가 포스타입은 꽤 많아요. 한 가지 아쉬운 점은 ‘미리보기’라는 표현이 중복 활용되고 있다는 점입니다. (2)하나는 작성한 내용 미리보기, 또 하나는 설정한 날짜를 기점으로 유료 콘텐츠를 무료로 전환하기 위한 값입니다. 설명이 붙었지만, 그럼에도 불구하고 처음 글을 작성하는 입장에서는 많이 헷갈렸어요.

 

 

네이버 스마트에디터

네이버 주요 서비스에서 글 작성 시 발견할 수 있는 공통점이 있어요. 스마트에디터가 적용되어 있다는 점인데요. 정식 명칭은 '스마트에디터 ONE'으로 ‘모든 창작의 중심. 단 하나의 에디터’라는 슬로건을 갖고 있어요.

블로그 - 카페 - 지식인에서 사용 되고 있는 스마트에디터 공통, 블로그 위주로 먼저 제공되는 기능들을 나눠 살펴볼게요.

 

  • 공통
    사진 : 이미지 삽입
    서체 : 서체, 정렬, 볼드, 밑줄선, 폰트 컬러 등

 

  • 블로그
    사진 : 동영상 편집
    스티커 : 스티커 삽입 및 구매

 

 

공통 - 사진 편집

이미지가 글의 다양성을 채워줄 수 있는 역할을 하는 블로그와 카페는 사진 편집이 가장 앞에 위치하고, 텍스트 위주 질문이 중심인 지식인은 서체 변경 버튼 뒤에 사진 편집이 위치하고 있어요.

 

갤러리로 접근했을 때 화면이 조금 다른데요! 스마트에디터 버전이 각 서비스에 적용되는 시점이 다르기 때문입니다. 그래서 블로그와 지식인은 상단 탭이 적용되어 있고, 카페는 상단 탭 구조가 없는 상태입니다.

 

  • 상단 탭 : 갤러리, 촬영, GIF 선택 및 제작
  • 하단 : 그룹 사진, 동영상 편집, 사진 편집

 

상단 탭은 갤러리에서 사진 선택, 직접 촬영 그리고 갤러리 내 GIF를 선택하거나 제작할 수 있는 기능이 있는데, GIF 기능은 다른 에디터에서 쉽게 볼 수 없는 기능이라 조금 더 자세히 들여다 볼게요.

 

 

블로그 - 사진 편집 - GIF

GIF 수요가 높아지면서 자연스레 직접 제작, 배포하는 툴로 관심이 이어지고 있어요. (인스타그램 부메랑 같은 앱이 탄생한 배경이 되었죠.) 네이버 역시 최신 버전 스마트에디터에서 GIF 탭을 활용하고 있습니다. 직접 촬영도 가능하고, ‘만들기’라는 라벨이 표기된 영상을 선택, 구간과 재생 속도를 조절해 제작 할 수 있어요. 제작 된 GIF는 본문에 삽입되고, 갤러리에 별도 파일로 저장됩니다.

 

(에디터, 동동의 덧붙임) 텍스트보다 영상, 영상도 짧은 길이에 대한 관심이 높아졌어요. 블로그, 지식인에 GIF가 별도 기능으로 포함된 건, 콘텐츠 소비력을 높이기 위한 선택이 아닐까 싶어요. 다만 GIF는 단독으로, 밈으로 사용하기 위한 성격이 강해 저작권이 해결된 GIF를 제공해주면 어떨까 하는 생각이 들었습니다.

 

 

공통 - 서체 편집

스마트에디터는 네이버 전 서비스에 공통적으로 적용되어 있어 서비스 마다 일부 기능 순서가 다르게 설정되어 있어요. 저는 블로그와 카페가 공통으로 가져가고 있는 서체 편집을 중심으로 살펴봤습니다.

 

블로그와 카페에 작성되는 글 중 리뷰가 높은 비중을 차지하고 있어요. 그래서 포인트 강조와 인용문의 활용도가 높은데 (1)을 살펴보면 6가지 스타일을 확인할 수 있습니다. (2)는 폰트 및 배경컬러를 쉽게 설정할 수 있도록 13가지 색을 제공하고 있으며 마지막으로 (3)링크는 URL을 먼저 입력 후 텍스트(내용)를 입력할 수 있는 팝업을 띄워주고 있습니다.

 

블로그와 카페는 본문, 제목, 인용구 라는 텍스트 구분값을 주기 때문에 더 쉽게 글을 작성할 수 있는 점이 좋았어요. 웹에서는 더 많은 컬러 및 컬러값으로 색을 바꿀 수 있는 반면, 모바일에서는 최적화에 초점을 맞춰 상대적으로 가볍게 제공하고 있어요.

 

(에디터, 동동의 덧붙임) (1)과 (2)의 위치를 자세히 보면 인용구 선택은 키패드 바로 윗줄에 스타일을 배치하고, (2)컬러는 기능이 나열된 윗줄에 배치 되어 있어요. 인용구는 문단 단위로 스타일이 입혀지기 때문에 커서가 위치한 문단 전체에 대한 스타일 변화로 좀 더 큰 위계를 차지하기 때문입니다. 폰트 컬러는 같은 문장에서 글자 단위로 변경이 가능하기 때문에 위계가 낮아 키패드에서 멀리 떨어져 있는 것이죠. 에디터 구성시 꼭 참고해야 하는 내용이기도 해요!

 

 

블로그 - 스티커

네이버 블로그나 카페 글에는 스티커가 자주 사용 되고 있어요. 스티커는 스마트에디터와 연동된 네이버 OGQ마켓에서 구매 할 수 있어요. 크리에이터들이 직접 '크리에이터 스튜디오'를 통해 업로드, 무료 혹은 유료 판매를 결정합니다.

스티커 버튼을 탭 하면 구매한 스티커를 볼 수 있고, 하나를 선택해 삽입할 수 있습니다. 리스트 내 썸네일에 플레이버튼이 있는 콘텐츠는 애니메이션 스티커로 탭 목록에서 구분해 확인 가능해요.

 

탭 목록 끝 + 버튼을 통해 스티커를 구매할 수 있는 페이지로 이동합니다. 유료 스티커는 N페이를 통해 구매할 수 있는데, 포인트 구매와 선물하기도 가능해 저는 회사 동료에게 선물을 받아본 경험도 있어요!

 

포스팅용 스티커가 생각보다 많아 글 작성 시 또 하나의 표현 방법으로 활용될 수 있다는 점이 좋았습니다.

 

(에디터, 동동의 덧붙임) 네이버 블로그에서 글을 작성할 때 놀랐던 점은, 글을 모두 입력하고 확인 또는 검토할 페이지를 모두 건너뛴 다음 글 등록 버튼을 눌렀을 때에요. 글이 바로 등록되었기 때문인데요. 등록까지 단계는 줄어들었지만, 테스트로 등록을 시도하다 깜짝 놀랐어요. 미리보기 혹은 공개범위 설정 등의 단계는 필수로 제공해주면 어땠을까요?

 

 

메일리

메일리를 처음 사용할 때 개인적으로 노션과 유사하다고 느꼈어요! 칼럼을 계속 추가해가며 문단을 나누는 구조 때문인데요. 자주 사용하는 기능 위주로 구조를 살펴볼게요. (다만 뉴스레터 에디터는 PC 기반으로, 모바일 웹 접근 시 사례 확인에 어려움이 있었어요. 양해 부탁드려요!)

 

편집 과정

메일리는 + 버튼을 통해 단락이 추가 됩니다. 단락 스타일은 총 8개로 구성되어 있으며 그 중 많이 사용하는 3가지 기능은 본문, 헤더, 글 박스(에디터의 덧붙임 등에 활용)입니다. 박스를 추가하면 본문 내 텍스트를 바로 입력할 수 있는 창이 활성화 되는데요. 헤더는 (1)우측 정렬된 스타일 박스에서 H2 ~ H4 중 하나를 선택할 수 있습니다.

 

작성된 문단의 이동과 삭제는 (1)번 스타일 박스 하단의 화살표와 삭제 버튼을 통해 가능합니다. 메일리의 장점은 여러 문단을 동시에 선택해서 이동, 삭제할 수 있다는 점이에요.(여러 뉴스레터 툴을 테스트 해봤을 때, 개별 문단 삭제 및 이동이 가능한 경우가 많았거든요.) 그리고 덧붙임 내용 작성 시 사용하는 (2)글 박스는 글자 수에 맞춰 자동으로 설정되어 인용문 등의 용도로 사용하고 있습니다. 다만..! 메일리는 폰트 컬러에 대한 다양함은 부족해요. 깔끔하게 편집 할 수 있는 점은 좋지만 컬러를 활용한 브랜딩이 어려운 점은 아쉬운 마음입니다.

 

(에디터, 동동의 덧붙임) 편집 기능을 여럿 살펴보며, 직접 기획하게 된다면 어디에 초점을 맞춰야 할까 생각해봤어요. 먼저 얼마나 다양한 글이 우리 서비스를 통해 발행 될 수 있을까? 또 어떤 그룹이 글을 제일 많이 작성하게 될까? 마지막으로 사람들이 보게 될 레이아웃 등의 스타일 우선순위는 무엇일까? 였어요. 스티비는 뉴스레터 자체 컨셉을 잘 담을 수 있는 기능에 집중했고, 메일리는 깔끔한 에디터 외 후원, 멤버십 등 여러 부가 기능에 초점을 맞춘 것처럼 서비스 성격이 에디터 기능에도 영향을 줄 수 있을거란 생각도 들었습니다.

 

 

배포 과정

편집이 마무리되면, 뉴스레터 단계에서 가장 중요한 배포와 예약을 준비해야 하는데요. 먼저 (1)발행방식, (2)발송시간을 입력하게 됩니다. 메일리는 일반 구독자 대상 전체 배포와 유료 멤버십 구독자 대상 별도 발행이 가능하고, 뉴스레터 1개를 별도로 판매할 수 있어요. 배포 할 때마다 지정할 수 있어 관리자에게 편리한 기능입니다.

 

그리고 (2)번과 (3)번을 보면 기능에 대한 설명이 제공되고 있는데요. 메일함으로 실제 들어가는 뉴스레터 특성 상 배포가 되면 돌이킬 수 없기에 더 자세한 안내가 제공되는 것 같아요. 실제로 (3)테스트 발송은 에디터들이 발행 전 마지막 확인을 위해 사용하는데, 발행 방식에 모든 구독자 옵션이 있어 식은땀을 흘렸던 기억이 있어요.  다른 뉴스레터 툴은 배포 선택 시 입력한 정보가 맞는지 팝업으로 확인 하는데, 메일리는 확인 팝업이 없는 만큼 신중하게 접근해야 합니다.

 

(에디터, 동동의 덧붙임) 주변에서 뉴스레터 제작 및 발행 툴에 대한 질문을 받을 때가 있어요. 제공 기능과 스타일이 달라 발행 예정인 뉴스레터 스타일과 주기 등의 조건이 더 중요하다고 생각해요! 뉴스레터로 한정지어 비교하자면, 작은 이미지를 2*2 카드 형태로 요약하는 등 다양한 레이아웃을 사용할 경우! 스티비를, 심플한 형태로 일관성 있는 내용에 초점을 맞춘다면 메일리를 추천드려요.

 

 

아이폰 메모

아이폰 메모는 아이폰 기본 Application입니다. iPhone, iPad 또는 iPod touch에서 모두 사용할 수 있어요. 메모를 사용해 그림을 그리고, 체크리스트를 만들고, 문서를 스캔하거나 서명할 수 있고 사진, 비디오, 웹 링크 등의 첨부 파일을 추가할 수 있습니다. 거의 모든 문서 작업을 커버할 수 있는 서비스인데요. 모바일 에디터에 어떤 기능이 있는지 함께 살펴볼게요!

 

입력 기능 분석

입력기능은 굉장히 단순해요. 메모장을 클릭해 바로 텍스트를 입력할 수도 있고 키보드 위 버튼을 통해 다양한 요소를 추가할 수 있어요.

(1) 표 삽입 : 표 삽입 버튼입니다. 클릭하면 2*2표가 생기고 행, 열 추가/ 삭제를 할 수 있어요.

 

(2) 텍스트 포맷 : 텍스트 포맷을 선택하는 영역입니다. 글자 스타일, 순서 선택, 들여쓰기/ 내어 쓰기 등 다양한 텍스트 편집 기능이 있어요. 참고로 텍스트 입력 창에 ‘-‘ 입력 후 space를 치면 자동으로 리스트가 생성됩니다.

 

(3) 체크리스트 추가 : 이 기능은 To do list를 만들 때 유용해요. 제가 쓰는 메모의 50% 이상은 체크리스트를 위해 작성한 메모입니다. 특히 장 볼 때, 할 일 정할 때 등 많이 사용하고 있어요.

 

(4) 사진, 비디오 선택/ 찍기/ 문서스캔 : 이 기능도 아주 유용한 기능인데요. 메모 내 사진, 영상, 문서를 첨부할 수 있어요. 그런데 여기서 조금 불편한 부분이 있어요. 사진 편집과 영상 재생이 메모 내 바로 되는 게 아니라 한 depth 더 들어가야해요.

 

불편한 점 1 : 사진 위에 그림을 그리려면 사진 클릭 후 오른쪽 위 연필 모양을 눌러야 해요. 편집 화면에 진입해 사진 위에 그림을 그리고 왼쪽 위 [완료]를 누르면 다시 메모 창이 나와요.

불편한 점 2 : 비디오를 메모에 넣고 재생하려면 영상을 누르고 플레이어에서 재생해야 해요.

 

(에디터, 조이의 덧붙임) 어찌 보면 비디오 관련 기능은 한 depth 들어가야 자연스러울 수도 있어요. 메모에 비디오를 넣고 스크롤을 하는데 비디오가 자동으로 재생되는게 편집에 방해가 될 수 있기 때문이죠. 그런데 사진은 굳이 사진 편집에 들어가서 해야할까? 라는 생각이 들어요. 또 메모에 그림을 그리는 건 자연스러운데 메모에는 레이어 기능이 없는 걸로 보여요. 그림 그리기 기능이 메모와 더불어 첨부한 이미지 위에 자연스럽게 구현되면 더 활용도가 높을 듯해요!

 

 

그룹 지정

이렇게 만든 메모는 그룹별로 관리할 수 있어요. 저는 i-Cloud 서비스도 사용하고 모바일에만 저장하는 나의 iPhone 메모도 모두 사용하고 있어서 크게 두 그룹으로 나뉘어 있어요. 이건 메모를 저장하는 장소에 따라 나뉘고 각 하위 폴더는 직접 만들 수 있습니다. 또 메모를 다른 폴더로 이동하거나 복사할 수도 있습니다.

 

 

공유

공유 기능은 조금 불편해요. 메모 입력 후 오른쪽 위에 보면 더 보기 버튼이 있는데 이걸 누르면 메모 관리 및 공유 기능이 뜹니다.

 

(1) 메모 공유 - 메모를 다른 사람과 공유하고 모든 사람이 최신 변경사항을 볼 수 있는 기능입니다. 초대를 보낼 방법은 메시지, mail, 카카오톡, 네이버 등 다양한 메신저 서비스가 옵션으로 뜹니다. 공유 옵션에서 편집 가능, 보기 전용 중 하나를 선택해 공유할 수 있습니다. 다만 안드로이드 사용자에게 보내도 별도 안내가 나오진 않아요.

(2) 복사본 보내기 - 안드로이드 폰을 쓰는 친구에겐 메신저로 메모 내용을 공유하고 있어요! 간혹 적용한 텍스트 포맷이 변경 되기도 해서 메신저로 공유하기 전 보낼 내용을 다시 확인하고 보냅니다. 메모 URL이 나오면 공유도 쉽고 함께 공동편집도 가능할 텐데, 라는 생각을 하며 노션을 사용하곤 하죠.

 

 

연동

애플 메모는 iPhone, iPad, Mac book 등 다양한 애플 기기에서 동시에 사용할 수 있어요! i-Cloud라는 서비스를 이용해 기기별로 정보를 연동할 수 있어요. 각 기기에 i-Cloud 로그인하면 다른 기기에서 수행한 작업을 연결된 모든 기기에서 할 수 있는 기능이죠! 메모도 디바이스에 상관없이 작성할 수 있어요. 이 연동 기능이 정말 강력해 현재 거의 모든 애플 제품을 사용 중입니다.

 

(에디터, 조이의 덧붙임) 아이폰 사용자들끼리는 아이폰 메모로 손쉽게 공동 문서 작업을 할 수 있지만 다른 OS 사용자와는 공유 문서 편집이 안되는 서비스입니다. 메모 앱은 폐쇄성이 있는 서비스지만, 강력한 연동 기능으로 어느덧 제가 애플 추종자로 변했어요. 근데 회사 컴퓨터엔 i-Cloud 절대 연동해놓지마세요! 처음에 뭣도 모르고 했다가 첫 회사 퇴사할 때 연동 해지한다는 걸 잘못해서 메모 모두 삭제가 되어 애먹었답니다. 애플 연동은 사용할 땐 좋지만 서비스를 이탈할 땐 쓰라린 상처를 남기곤 해요..

 

 

노션

노션(Notion)은 실리콘밸리뿐 아니라 한국 IT 기업에서 사랑하는 메모 앱입니다. 저 또한 노션을 회사 업무용으로도 사용하고 지금 쓰고 있는 뉴스레터 공동 작업을 할 때도 사용하고 있어요! 노션을 처음 봤을 때 충격을 잊을 수 없어요. 핵심 기능을 바로 써볼 수 있는 랜딩페이지와 함께 블록 단위의 엄청난 자유도가 있는 서비스! 이 때문에 많은 기업에서 노션을 업무용으로도 사용하고 있는데요. 노션 모바일 에디터 기능이 어떤지 한번 살펴볼게요~

 

입력 기능 분석

노션은 하나의 웹페이지와 같이 메모할 수 있어요. 상단에 이미지나 타이틀 아이콘, 코멘트를 남길 수 있어요.

화면을 터치하면 키패드와 노션에서 제공하는 입력 도구가 함께 나와요.

(1) + 블록을 추가할 수 있는 기능입니다. 여기서 말하는 블록이란 텍스트 입력 형태, DB 추가 형태, 미디어, Embeds, 추가 블록 등 다양해요.

첨부하고 싶은 블록을 선택해 해당 포맷에 원하는 내용을 추가할 수 있습니다.

 

(2) Turn in to는 노션에서 제공하는 텍스트 포맷입니다. Heading 1,2,3, To-do list 등 다양한 형태의 포맷을 선택할 수 있어요.

 

(3) @ 태그할 수 있는 기능입니다.  사람, 페이지 혹은 데이터 등을 태그할 수 있어요.

 

(4) Add comment는 텍스트에 코멘트를 달 수 있는 기능입니다. 태그와 코멘트 기능 덕분에 공유 문서 제작을 정말 쉽게 할 수 있어요. 

 

(5) 사진 또는 동영상 첨부/ 찍기를 누르면 이미지나 영상을 첨부할 수 있고 카메라를 구동해 찍을 수도 있어요.

 

(6) 휴지통은 작성 혹은 첨부한 내용을 삭제할 수 있는 기능입니다. 전체 삭제가 되진 않고 커서가 있는 열을 삭제할 수 있어요.

 

(7) 키패드 숨기기

 

(에디터, 조이의 덧붙임) 노션에서 가장 강력한 기능은 바로 블록입니다. 무슨 일을 할 때, 양식을 고민하고 그걸 만드느라 시간을 많이 보내기도 하잖아요? 노션 블록은 데이터를 표현하기에 적합한 블록을 제공, 문서의 8할을 완성하곤 합니다. 에디터 기능 자체는 평범하지만 가지고 있는 프레임워크가 뛰어난 서비스입니다. 무엇보다 UI가 군더더기 없이 내용에 집중하기 좋아요!

 

 

그룹 지정

노션은 페이지 단위로 관리할 수 있어요. Work space 하위에 메뉴 또 그 하위에 메뉴를 만들어 트리 구조로 정보를 저장할 수 있어요. 구글 드라이브 일반 버전은 폴더 방식으로만 데이터를 관리할 수 있었는데 노션은 메뉴 트리 형태로 데이터를 관리할 수 있어 유용해요! 

 

 

공유

노션은 작성한 페이지를 URL로 공유할 수 있어요. 공유를 누르면 링크가 생겨요. 만약 문서를 공동 편집하는 사람이 있다면 이 링크 수정권한이 있는 사람 리스트도 떠요.

URL로 공유하다 보니 OS를 타지 않고 누구나 수정할 수 있다는 장점이 있어요.

 

 

연동

이메일 주소로 로그인해 모바일 앱과 PC 웹에서 메모를 작성할 수 있어요. 웹사이트도 제공하다 보니 OS 별 서비스를 사용하지 못하거나 하는 이슈가 거의 없이 범용적으로 많이 쓰고 있어요.

 

(에디터, 조이의 덧붙임) 근데 그거 아세요? 노션 문서를 인터넷 익스플로러(IE)에서 누르면 작동이 안 되는 사실… 노션에서 IE는 지원하지 않는다고 해요. 그래서 종종 IE로 접근하는 고객들은 하얀 화면만 바라보곤 해요. 종종 관련 CS가 들어오는데 우리 이제 Chrome으로 바꿔보는 거 어떨까요~?! 이제 IE 관련 CS는 대응 안 하고 싶네요 ㅜ.ㅜ

 

 

삼성노트

삼성 노트도 애플 메모처럼 삼성 스마트폰에 기본 탑재된 앱입니다. 제가 삼성 유저가 아니라 서비스를 훑어만 봤는데요.

 

공식 홈페이지에 삼성메모 기능 소개를 보니 정말 엄청난 서비스네요! 지인 휴대폰을 빌려 짧게 살펴본 삼성메모 기능도 함께 보시죠!

 

입력 기능 분석

삼성노트 입력기능은 정말 다양해요! 또 워드에서 많이 사용하는 기능을 우선으로 배치했어요. 기능을 살펴보면 활용도 높은 기능을 상단에 배치한 걸 확인 할 수 있어요.

(1) 펜 기능입니다. S펜을 사용하면 그림 그리기처럼 섬세한 작업과 필기도 가능해요.

(2) 체크리스트를 만들고 확인 하는 기능

(3) 글꼴 스타일을 선택하는 기능

(4) 텍스트 색상을 변경하는 기능

(5) 텍스트 배경색을 변경하는 기능

(6) 텍스트 크기를 변경하는 기능

(7) 액션 취소 기능

 

(에디터, 조이의 덧붙임) 어떤가요? 위 메모 서비스들과 다르게 키보드 위에 붙은 메모용 기능들이 우리가 업무를 하며 정말 많이 사용하는 기능입니다. 제 지인도 업무 볼 때 삼성 폰이 편하다며 아이폰을 극구 반대했는데 메모 앱을 살펴보니 그 말이 이해 가네요!

 

 

공유

삼성 노트는 정말 한국인을 위한 서비스 같아요. 공유를 누르면 PDF, 워드, 파워포인트, 이미지, 텍스트 등 다양한 형태로 저장할 수 있어요. 회사 문서 작업 시 많이 사용하는 응용프로그램에 호환되는 형태로 저장할 수 있어 편리해 보여요.

 

 

연동

삼성노트도 애플 메모와 같이 삼성 계정을 통해 어느 기기에서든 손쉽게 같은 문서를 편집할 수 있어요. 애플에서 제공하는 강력한 기능 중 하나였는데 삼성 노트에서도 제공하니 사용자 선택의 폭이 넓어졌네요!

댓글 0

팁스터

앱/웹 서비스를 구성하는 요소들에 대한 편집자의 생각과 노하우를 정리하는 뉴스레터입니다.

모바일 앱 다운로드, 어떻게 유도할까?

프로덕트

공유기능, 어떻게 활용하면 좋을까?

프로덕트

1:1 문의, 어떻게 활용하면 좋을까?

프로덕트

오디오 콘텐츠 재생 화면은 어떤 모습일까?

프로덕트

회원가입 완료 화면 구성 방법!

프로덕트

또 하나의 네비게이션, 푸터 구성 방법

프로덕트

당황스러운 상황을 해결하는 404 페이지!

프로덕트

점점 다양해지는 선물하기 기능!

프로덕트

서비스와 사용자의 밀당! 권한 요청 살펴보기

프로덕트

동일한 상황, 어울리는 문구는?

프로덕트

앱스토어 스크린샷 구성 방법!

프로덕트

모바일 앱에 적합한 정렬과 필터는?

프로덕트

봄바람 휘날리며~ 건강 관리 서비스 분석

프로덕트

아쉽지만, 회원탈퇴 프로세스 분석

기획

우리 서비스에 맞는 리스트 UI는?

디자인

아프리카에서 중고차 구매하기

기획

작심 3일 넘길 수 있는 서비스 파헤치기!

프로덕트

프로필 화면 어떻게 구성할까?

기획

검색 화면 어떻게 구성할까?

기획

팝업 화면 어떻게 구성할까?

기획

많은 정보를 담은 지도 UI는 왜 짜증날까?

기획

햄버거 메뉴는 이제 끝물 아닌가요?

기획

알림이 스팸이 되지 않게 하는 방법!

기획

리뷰 많은 서비스가 되는 방법!

기획

구매의 시작, 장바구니 어떻게 구성할까?

기획

통계 기능, 어떻게 구성하면 좋을까?

기획

스마트오더 서비스는 어떻게 구성할까?

기획

FAQ 화면 어떻게 구성할까?

기획

아이콘, 어떻게 활용하면 좋을까?

디자인

온보딩 화면, 어떻게 구성하면 좋을까?

디자인

회원가입과 로그인, 어떻게 구성하면 좋을까?

개발

설정 화면 어떻게 구성할까?

개발

독특한 UI, 어떤 사례가 있을까?

디자인

동일한 제품을 각각의 커머스에서 구매한다면?

개발

빈 화면 어떻게 구성할까?

기획

SaaS 가격페이지 어떻게 구성할까?

기획

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

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

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

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

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

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