코지 블로그는 노션
과 연동하여 글을 작성할 수 있는 블로그 플랫폼입니다. 사용자는 노션에 글을 작성하면 자신의 블로그에 글을 배포할 수 있습니다. 개발을 시작한지는 2달 정도 되었고, 현재 mvp 가 배포된 상태입니다. mvp에서는 팀원들만 글을 작성할 수 있게 하였습니다. proto를 출시하면 노션 연동까지 공유할 예정입니다.
현재 진행중인 프로젝트: Cozy Blog
글쓰기는 운동
과 같다고 생각합니다. 둘 다 하면 좋다는 것은 알지만, 시작과 지속이 어렵습니다. 저도 글을 작성해야지 마음먹은지는 오래되었지만, 코지 블로그를 개발하기 전까지는 단 한 글도 작성하지 못했습니다. 글을 쓰는 동기에는 무엇이 있고 왜 글쓰기는 지속하기 힘든 것일까요?
먼저 글을 작성하는 동기는 여러 가지가 있습니다. 가장 먼저 떠오르는 것은 돈
입니다. 유튜브처럼 조회수에 따라 수익을 얻을 수 있다면 사람들은 글을 쓰고 싶을 것입니다. 티스토리는 이점을 노려서 사용자가 직접 자신이 게시한 글을 통해 광고 수익을 얻을 수 있게 했습니다.
또 다른 이유는 관심
입니다. 사람들은 자신을 알리고 싶어하기 때문에 수고를 들여 사진을 찍고 글을 게시합니다. 블로그는 인스타그램, 페이스북과 다르게 더 긴 글을 쓸 수 있다는 점만 다를뿐, 본질적으로는 나의 존재를 상대방에게 어필하는 것과 같습니다.
이렇게 동기들이 있음에도 불구하고, 글쓰기는 시작과 지속이 어렵습니다. 왜냐하면 글쓰기 자체가 매우 고된 일이기 때문이죠. 글쓰기는 강한 의지가 동반되어야 합니다. 위의 동기들이 글쓰기 의지를 고양시키지만, 제 경험상 동기와 의지는 별개인것 같습니다. 운동을 하면 좋은 이유를 너무나 잘 알고 있으면서 헬스장에 안가는 저의 모습을 보면 말이죠.
그래서 코지 블로그는 글쓰기에 필요한 의지 자체를 낮추는 방향을 모티브로 삼았습니다. 새로운 동기를 부여하는게 아니라 글쓰기를 보다 쉽고 자주 쓸 수 있게 하는 것을 목표로 했죠.
코지 블로그는 사용자가 보다 쉽게
글을 쓸 수 있어야 함에 집중했습니다. 블로그 플랫폼에서 가장 크게 가치를 두어야 하는 부분을 글 쓰기 에디터라고 생각했죠. 바로 이점을 타 플랫폼과의 차별점으로 보고, 코지 블로그의 에디터는 다음과 같은 기능을 꼭 갖추어야 한다고 판단했습니다.
완벽한 위지위그(WYSIWYG)
위지위그란 글을 작성하는 화면과, 글이 실제로 보여질때의 모습이 동일한 방식을 의미합니다. markdown처럼 작성된 글과 랜더된 화면이 다르거나, 혹은 왼쪽에 글을 쓰면 오른쪽에 preview가 보이는 방식은 위지위그가 아닙니다. 전자는 화면의 보일 모습을 상상하며 글을 써야 하고 후자의 경우면 글을 쓸 때 시선을 좌우로 움직여야 합니다. 저는 글 쓸때 드는 인지적 부하는 가능한 줄여야 한다고 생각합니다. 창의성은 여유로부터 나온다고 하죠. 내가 쓴 글이 어떻게 보일지 확인하는 일은 뇌를 바쁘게 만듭니다. 따라서 위지위그 에디터는 창의적인 글 쓰기 공간을 제공하기 위한 가장 필수적인 조건이라고 생각했습니다.
마우스로 글 배치
에디터는 마우스로 자신이 작성한 문단 위치를 옮길 수 있어야 합니다. 예를 들면, 서론에 작성한 문단을 내용 중반부로 옮긴다든가, 맨 아랫 문단을 서론으로 옮길 수 있어야 합니다.
사람이 글을 쓸 때, 잘 정리된 생각을 그대로 옮긴다고 생각하지 않습니다. 머릿속의 있는 글감들은 불명확한 형태입니다. 글을 쓴다는 것은 이러한 글감에 형태를 부여하는 것이지요. 처음부터 완벽한 형태를 부여할 순 없습니다. 일단 정제되지 못한 생각들을 써내려가야 하죠. 그 다음 다듬는 과정을 거치는게 글쓰기 과정이라고 생각합니다. 그렇기에 모든 첫 글들은 두번째 퇴고에 비해 두서가 없습니다. 따라서 쉬운 글쓰기를 위해 사용자는 두서없는 글을 쉽게 고쳐 쓸 수 있어야 합니다. 문단을 마음대로 바꿀 수 있어야, 처음부터 조리있는 글게 글을 써야한다는 강박을 완화시킬 수 있습니다.
(잘라-붙여넣기는 안됩니다. 문단을 잘라내는 순간 사용자는 내가 잘라낸 문단이 어떤 내용인지 기억해야 합니다. 이는 인지적 부하 중 하나입니다. 반복된다면 피로를 느끼게 하고, 글을 쓰려 할 때 머뭇거릴 수 있습니다.)
프로젝트를 시작하기 이전에는 에디터를 직접 개발하려고 했습니다. 그런데 한글 입력이 생각보다 까다로웠습니다. 타이핑 맥락에 따라 자음에 모음이 붙기도 하고, 모음 아래 종성이 위치하기도 하고 그 사이에 키보드 인터렉션을 넣는 일(엔터를 누르면 새 문단 생성이라든가, 문단 위아래를 방향키로 이동 등)은 예상보다 훨씬 어려웠습니다. 한글이 이런데, 일본어를 입력한다면? 중국어, 아랍어 등 각 언어의 타이핑은 어떨지도 고려해야 한다니, 이렇게 위지위그 에디터를 활용한 블로그 개발은 잊혀지게 되었죠.
그 이후로 어느정도 시간이 지난뒤, 문득 노션 api를 활용하면 어떨까란 생각이 들었습니다. 물론 이전에도 노션은 api를 제공해 노션에서 작성한 글들을 개발자가 api로 전달받을 수 있었습니다. 그러나 그때는 노션 api에 대한 신뢰도를 쌓기 이전이었습니다. 하지만 지금 https://super.so/, https://www.oopy.io/ 와 같은 노션 연계 서비스들이 등장하면서 노션 api는 상업에서 활용할 수 있을 정도로 성숙하다는 것이 증명되었습니다. 이러한 notion api를 활용한다면 코지 블로그의 핵심 가치인 에디터를 쉽게 얻을 수 있다고 생각했습니다.
저는 먼저 제 블로그부터 노션을 연동해서 작성해보았습니다. 결과는 매우 만족스러웠습니다. 노션은 위의 제시한 위지위그
, 마우스로 글 배치
이상으로 블로그 글을 작성하는데 뛰어난 경험을 제공했습니다.
이모지를 곁들인 콜아웃, 별개의 블록을 가지는 인용문, 글을 감출 수 있는 토글 등, 노션은 텍스트의 목적에 맞는 별도의 스타일과 인터렉션을 제공했습니다. 더이상 부가 설명을 작성할 때, 괄호로 묶고 글씨크기를 한단계 낮출 필요가 없었습니다. 토글을 활용하여 감추고 읽고 싶을때만 누르면 되었습니다. 그 어느 블로그 글도 이렇게 독자가 글과 상호작용 하지 못했습니다. 그만큼 노션의 기능을 블로그로 가져오는 것은 혁신적이었습니다.
이미지를 올리는 일이 쉽고 즐거웠습니다. 즉각적으로 사이즈를 조절하고, 이미지를 드래그 하면서 어느 문단으로 옮길지를 결정하는 일은 사용자로 하여금 블로그에 이미지를 더욱 조작하기 쉽게 만들었습니다. 흔히 다른 에디터들은 블로그에 이미지를 올리면, 이미지 모습이 안보인다든가 혹은 이미지 위치를 변경하는게 불가능 혹은 직관적이지 않았습니다. 그러나 노션에서는 이미지를 쉽게 조작할 수 있었습니다.
결과적으로 노션을 활용하니 적은 노력으로 글이 풍부해졌습니다. 노션의 다양한 블록들을 적절히 삽입하기만 해도 가독성이 보기 좋아질정도로 높아졌고, 이미지를 다양한 배치로 올리게 되니 시선을 집중시킬 수 있는 글을 작성할 수 있었습니다. 게다가 최근에 등장한 노션 AI는 글 쓰는 경험을 한 단계 격상시켜 주었죠. 노션을 활용한 블로그란 아이디어는 그 자체로 경쟁력이 있을 거라고 생각합니다.
블로그는 내 집, 내 차마냥 애착관계를 형성할 수 있어야 한다가 코지 블로그가 지향하는 두 번째 가치입니다. 차 좋아하는 사람은 새차 구입하면 계속 차타고 싶어 하듯이, 내가 내 블로그에 애정이 생겨야 자주 방문할 것이라 생각했습니다. 그리고 자주 방문할수록 글을 쓰고 싶은 욕구가 올라갈 것이라 생각했습니다 이렇게 블로그에 애정이 생기려면 먼저 블로그에 개성부터 있어야 합니다. 따라서 블로그는 꾸밀 수 있어야 합니다.
코지 블로그는 이점에서 벨로그와 브런치, 미디엄과 차별점을 둔다고 생각합니다. 후자는 일종의 매거진이죠. 블로그가 자신의 글들을 투고하는 공간입니다. 코지 블로그는 사용자별로 각각 다른 화면을 제공합니다. 화면 배치는 물론, 헤더와 네비게이션까지 꾸밀 수 있는걸 목표로 합니다. 이를 통해 사용자의 개성이 포스트뿐만 아니라 블로그 자체에서도 뿜어져 나오길 기대하고 있습니다.
티스토리도 사용자별로 커스터마이징이 가능하죠. 스킨이란 이름으로 여러 레이아웃을 제공합니다. 코지 블로그는 커스터마이징의 영역이 티스토리와 두 측면에서 다릅니다.
풍부한 인터렉션
기성 웹들은 링크를 누르면 화면이 바뀌는 것이 전부입니다. 그러나 네이티브 앱들은 화면이 넘어갈때마다 적절한 트랜지션 애니메이션을 제공합니다. 이는 보기 좋을 뿐만 아니라 화면 간 이동에 대해 피드백을 제공하여 방문자는 맥락을 잃지 않고 블로그를 탐색할 수 있습니다. 코지 블로그는 웹의 한계를 뛰어넘어 화면 간 트랜지션 커스터마이징을 포괄하는 것을 목표로 합니다.
컴포넌트 단위의 커스터마이징
티스토리는 스킨이라는 이름으로 레이아웃을 제공한다고 했죠. 스킨은 블로그 전체의 배치를 바꿉니다. 코지 블로그는 그보다 작은 단위인 컴포넌트 커스터마이징도 제시하려합니다. 헤더 컴포넌트나, 사이드바, 위에 말한 페이지 트랜지션 등 작은 단위의 요소들을 갈아 끼울 수 있게 하는 겁니다. 즉 사용자는 코지 블로그에서 제공하는 컴포넌트들을 조합해 자신의 블로그를 꾸밉니다. 마치 게임에서 캐릭터를 꾸밀 때, 머리 아바타, 상의 아바타, 신발 아바타 등을 조합해 새로운 스킨을 만들어내는 것처럼 말이죠.
코지 블로그는 레이아웃 마켓
을 두고 여기에 다양한 스킨과 컴포넌트들을 전시하려 합니다. 사용자는 여기서 마음에 드는 스킨과 컴포넌트들을 조합해 자신의 블로그를 만드는 것이죠. 레이아웃 마켓은 제품이 성숙해지면 성숙해질수록 더 다양한 스킨과 컴포넌트들을 제공할 것입니다. 규모가 커지면 일주일에 하나의 스킨을 내놓을 정도로 발전할 수 있을 겁니다.
프로젝트를 시작한 목적은 단순히 “내가 원하는 기능의 블로그가 시중에 없으니 내가 만들어야 겠다” 였습니다. “사업을 해야 겠다” → “어떤 제품을 만들지?” 가 아니라 “내가 이 제품 필요하다” → “사업도 할까?”가 된거죠. 그래서 제품을 높은 수준으로 만드는게 제 1목적, 이것으로 사업까지 해보는 것이 제 2목적 입니다. 따라서 제품 검증시간과 시장에 선보이는 시점을 급하게 잡지는 않을 것 같아요. 이부분에 있어서 앞으로 합류할 팀원들과 의견이 다를 수 있으니 조율해나갈 생각입니다. 수익모델은 2가지 정도를 생각하고 있는데, 이건 팀에 합류하면 자세히 알려드리겠습니다. 아마 블로그 광고는 수익모델로 넣지 않을거 같네요. 블로그의 광고료는 블로그 글 작성자가 가져가야 한다고 생각합니다.
일단 제품 고도화를 1순위로 내세우긴 했지만 그래도 꾸준히 지원사업 공고에 계획서를 올릴려고 합니다. 지금 3월 마감인 지원사업 공고문을 보고 있는데 작성이 쉽지가 않습니다.
[PO] moonmmon - 풀스택 3년차로 주로 Front End 개발을 담당하고 있습니다. 페이지 개발, 웹사이트 성능 모니터링, 사용자 지표 수집 등의 업무 역할을 수행하고 있습니다.
[CTO] goodgoodman - 풀스택 7년차로 주로 Back End, 인프라 개발을 담당하고 있습니다. 다수의 팀빌딩, 지원사업 리딩 경험이 있습니다.
현재는 개발자 둘이서 프로젝트를 진행하고 있습니다. 앞으로 필요한 팀원은 UX/UI 디자이너
, 기획 및 운영
총 2명입니다. 기획은 4명이 모두 참여합니다. 단 UX/UI 디자이너는 디테일에 더 초점을 두고, 기획 및 운영은 지원사업 계획서 작성 및 시장 조사까지를 포함합니다. 사이드프로젝트 특성상 현업과 병행하느라 투자하는 시간이 적을 수 있습니다. 그럴 경우 동일 포지션을 2명으로 늘릴수도 있지만, 개발자들은 풀타임급 시간 투자가 가능하기 때문에 더 늘리진 않을 것 같습니다.
제품이 발전할 수록 프론트엔드와 웹 디자이너가 다른 직군보다 더 충원이 필요할 수도 있을 것 같습니다. 하지만 아직은 제품 초기 단계라 한 동안 4명 정도의 규모로 팀을 유지할 것 같습니다.
단계는 mvp → proto → 런칭 으로 나누었습니다.
mvp는 팀원이 직접 글을 쓰고 피드백을 줄 수 있는 수준
proto는 지인들에게 공개
런칭은 수익모델을 붙인 뒤 공개
현재 mvp까지 개발이 된 상태이며, 배포까지 다 되어있는 상황입니다.
개발 인프라는 소규모 기업수준에선 보기 힘들 정도의 수준으로 갖추어서 개발자들은 제품 기능 발전에 초점을 맞출 수 있는 상태입니다.
proto는 2주 단위로 스크럼을 나누어 진행하고 있고, 디자이너 분이 합류한다면 빠른 시일내에 proto도 마무리 지을 것으로 보입니다. 런칭은 한국 런칭 -> 글로벌 런칭 순으로 진행될 예정입니다. 이 프로젝트를 시작했을때부터 한국은 시장 검증을 위한 단계라고 생각했거든요! 그래서 한국에서 일정 숫자 이상의 사용자가 확보되면 바로 글로벌 시장에 도전할거 같아요.
1주일에 한번 디스코드 회의(일정 조율)
한 달에 한 번 오프라인 모임! (프로젝트 합류한 날부터 오프라인 모임을 가질 예정입니다)
- 적극적으로 기획에 참여할 수 있는 분
- 반대 의견을 내주실 분 (*가장 중요)
- 마이크로 인터렉션에 관심이 있는 분
- 웹과 앱 모두에 관심이 있는 분
의지와 열정만 있다면 대학생, 직장인 가리지 않고 모두 환영입니다!
관심있다면 누구든 지원해주세요!
현재 진행중인 프로젝트: https://www.cozyblog.io/
#Svelte
#Figma
#AdobeXD
#Spring
#Kubernetes
#Firebase
23.03.24
23.03.23
23.03.04
23.02.27
23.02.24