왜 시작 되었는가.

개발자인데 개인 블로그 하나는 있어야 한다고 생각했다.

velog나 네이버 블로그, 티스토리가 후보군에 있었지만 직접 개발하면 좋을 것 같았다.

우연히 픽셀아트 타임랩스를 보고 픽셀 컨셉의 블로그를 기획하게 되었고,

개발 하다 보니 디시나 레딧 처럼 채널 개념으로 내 개인 블로그를 운영하거나 주제별 관심사를 통해 유저들이 활발하게 커뮤니케이션 할 수 있도록 개발 했다.

다 같이 놀아야 더 재미있는 것처럼 내가 만든 컨텐츠를 함께 즐기는 그림이 더 흥미로웠기 때문이다.

기획 과정.

우선 큰 흐름은 다음과 같다.

1. 유저가 채널을 만들고 채널의 규칙을 만들어서 운영한다.

2. 채널에서 유저들은 글 위주의 게시글이나, 작품이 포함된 게시글을 작성한다.

3. 채널에서의 유저는 창작자와 참여자로 나뉜다.

이 흐름을 기준으로 잡고 가지 뻗듯이 기획을 했다.

네이밍과 로고 제작

Dotrisa는 Dot와 Monalisa를 합쳐서 Dotrisa가 되었다.

Dotlisa가 아닌 이유는 개인적으로 "l"보다 "r"이 더 예쁘게 느껴졌기 때문이다.

로고는 리그오브레전드의 클레드 캐릭터에 영감을 많이 받았다.

정확히는 "클레드"가 타고 있는 "스칼"이라는 캐릭터에 영감을 받았다.

이 캐릭터가 "스칼"이라는 캐릭터이다.

장난 꾸러기 같고 악동 같은 이미지라서 좋아한다.

이 캐릭터를 AI에게 맡겨 탄생된 캐릭터가 도트리사의 공식 캐릭터인 "라스칼"이라는 캐릭터이다.

Rascal Burble. 이라는 캐릭터이다.

Rascal을 번역하면 악당, 악동같은 느낌인데, 악동으로 해석하는 것을 좋아한다.

성악설을 믿는 나로선 귀여운 외모 뒤에 악함이 있다고 생각해서 Rascal로 네이밍을 했다.

현재는 버전을 다양하게 제작하여 9개의 캐릭터가 있다.

Rascal 캐릭터들은 유저의 기본이미지를 담당하고 있으며 로고로도 활용되고 있다.

디자인과 UX 고민

(헤더, 사이드, 컨텐츠) 레이아웃으로 설계했다. (아래 그림 참고)

이 레이아웃이 좋은 이유는 많은 컨텐츠와 탐색이 중요한 플랫폼에 유리하다.

헤더와 사이드 영역은 고정되고 스크롤을 내리면 컨텐츠 영역만 스크롤 된다.

헤더에는 로고와 검색 그리고 로그인 상태 컴포넌트가 존재한다.

• 로고

  대부분의 사이트가 그렇듯 로고를 클릭하면 메인 페이지로 이동한다.

  대부분의 사용자가 그렇듯 메인 페이지로 이동하려고 자연스럽게 로고를 클릭하게 된다.

  이때 아래와 이미지와 같이 구독했던 채널과 프로필이 드랍다운 되도록 설계했다.

  

  이렇게 구현하게 되면 유저는 구독 했던 리스트 자연스럽게 인식할 수 있을 것이다.

  드랍다운에 진짜 로고를 추가해서 로고를 눌러서 메인 페이지로 간다는 믿음 역시 배신 하지 않았다.

  또한 정해진 레이아웃에 많은 정보를 넣기 위한 설계이기도 하다.

  
  

  

  Nexus의 ui에서 영감을 받았다.

• 검색 기능

  헤더와 채널, 프로필에 검색 기능이 존재한다.

  헤더 중앙에 검색 기능을 배치해서 직관적으로 전체 검색이고, 채널과 프로필의 검색은 부분 검색이라는 것을 직관적으로 인식할 수 있도록 설계했다.

  또한 검색을 클릭하게 되면 최근 검색과 실시간으로 검색되는 채널들을 추가해서 정보들을 욱여 넣으려고 노력했다.

  

• 비로그인 상태

  비로그인 상태에서는 로그인 버튼이 존재한다.

  로그인 버튼을 클릭하게 되면 로그인 모달이 열린다.

  모달로 구현한 이유는 여러 이유가 있다.

  도트리사 플랫폼에서는 여러 컨텐츠 참여가 있기 때문이다.

  좋아요, 싫어요, 구독, 북마크, 픽셀 던지기, 댓글, 글 작성 같이 비로그인 상태의 유저가 로그인을 해야만 사용 가능한 기능들이 있기 때문이다.

  만약 로그인을 페이지로 구현 했다면, "로그인이 필요합니다."와 같은 알림을 사용하거나,

  현재 페이지에서 이탈해야하기 때문에 사용자에게 불안감을 줄 수 있다.

  따라서 로그인이 필요한 기능들을 클릭 했을 때, 로그인 모달을 열어서 직관적으로 로그인이 필요하다는 것을 인식할 수 있도록 설계했다.

  
  

  또한 사용자가 고작 좋아요 버튼을 클릭하기 위해 회원가입이라는 엄청난 부담감을 갖게되는 것을 고민했다.

  그래서 구글 로그인 같은 SSO 로그인을 추가했다.

  구글 로그인을 할 경우 최소 버튼 3번만 클릭하면 된다.

  (구글 로그인 클릭) -> (사용자 선택) -> (닉네임 설정) 이 과정을 거치면 유저는 좋아요 버튼을 클릭할 수 있다.

  네이버나 카카오 같은 로그인도 추가할 예정이다.

• 로그인 상태

  로그인 상태에서는 알림 버튼과 프로필 기능이 있다.

  알림 기능은 유저의 유의미한 상호작용들을 알릴 수 있도록 설계했다.

  
  

  프로필 버튼은 클릭하게 되면 드랍다운으로 나온다.

  내 프로필, 도트 생성, 북마크 페이지로 이동할 수 있는 버튼들이 존재한다.

사이드 영역 에서는 자주 사용하는 메뉴, 푸터(footer)를 대체하는 메뉴, 필요하다면 사용해야하는 메뉴로 기준을 잡았다.

• 자주 사용하는 메뉴

  

  해당 메뉴들은 자주 사용할 수 있는 메뉴이다. 따라서 상단에 배치했다.

  다음과 같은 흐름을 예상하고 설계했다.

  1. 인기 게시글 탐색 ( 채널로 이동 )

  2. 채널에서 게시글 탐색

  3. 다시 홈, 인기글, 인기 작품 페이지로 이동

  또한 많은 컨텐츠 더미에서 사용자가 원하는 채널과 프로필을 읽어 버리는 경우를 고민했다.

  그래서 최근 도트와 최근 프로필을 추가했다. 구독까지 하기 싫다면 유용한 기능이 될 것이라고 판단했다.

  
  

• 푸터(footer)의 대체 메뉴

  

  해당 메뉴들은 푸터(footer)를 대체하는 메뉴이다. 기본적인 플랫폼 소개와 도움말, 그리고 원래 목표였던 내 블로그의 대한 메뉴 들이다. 또한 플랫폼 공지를 위해 사용될 예정이다.

  
  

  사실 이 부분이 가장 고민 되었던 부분이다. 하지만 상황에 따라 변경하면 된다는 생각을 하고 고민이 해결되었다.

  법인이 설립된다면 그에 맞춰 변경할 것이고, 또 유저의 반응이나 규모를 고려해서 변경할 예정이다.

• 필요하다면 사용해야하는 메뉴

  

  해당 메뉴 들은 가장 뒤에 배치했다.

  용기를 내어 이동해야하는 도트 탐색 같은 페이지는 유저 입장에서 용기를 내어야만 들어가는 페이지이기 때문이다.

  원래는 명예의 전당, 컨텐츠(노노그램, 온라인 캔버스) 같은 메뉴들이 있었지만 MVP 단계에서 피처컷 되었다.

컨텐츠 영역 레이아웃은 이 구조에서 가장 넓은 영역을 차지한다.

그래서 컨텐츠 영역 내에서도 레이아웃이 (헤더, 컨텐츠, 사이드) 구조 레이아웃이 존재한다. (아래 그림을 참고)

• Header 영역

  Header영역은 미적 요소와, 컨텐츠가 많지 않은 정보, 중요한 정보들을 기준으로 잡았다.

  채널(도트) 페이지와 프로필 페이지에서는표현하는 배너와 아바타 그리고 구독 버튼이 포함되도록 했다.

  또한 Header 영역에서 Contents영역을 첫 화면에서 가리지 않도록 고민했다.

  
  

  

  
  

  또한 메인 페이지, 인기 작품, 메인 페이지 같은 경우에는 더 많은 컨텐츠들을 욱여넣으려고 노력했다.

  

  더 많은 컨텐츠가 생산 되면 더 많은 정보를 추가할 예정이다.

• Side 영역

  Side 영역에서는 디테일한 정보, 도트(채널) 추천, 임시 저장과 같은 보조 도구를 기준으로 잡았다.

  
  

  
  

  
  

• Content 영역

  컨텐츠 영역에서는 알림이나, 탐색 같은 페이지를 제외하고는 리스트 위주의 디자인으로 설계되었다.

  홈과 인기글 인기 작품에서는 인기 게시글을 인피니트 스크롤로 무한정 탐색할 수 있도록 설계했고,

  프로필이나 도트 페이지에서는 규모를 직관적으로 파악할 수 있게 페이지네이션으로 구현했다.

  
  

개발 과정

기술 스택은 다음과 같다.

1. Postgres

2. Redis

3. MongoDB

4. Node(express)

5. Svelte(Sveltekit)

처음 메인 DB는 MongoDB 였다.

그러나 MongoDB의 한계를 깨달았고 Postgres가 완벽한 상위 호환이라는 것을 깨닫고 중간 과정에 전부 변경했다.

현재 Mongodb는 Storage서버만을 위해 사용되고 있다.

Redis는 queue처리와 상태 그리고 앞으로 구현할 컨텐츠를 위해 선택했다.

현재는 알림 기능과 픽셀 던지기 같은 기능들에 queue처리를 하고 있다.

또한 자주 방문하는 프로필이나 도트, 게시글을 두번 조회하지 않도록 상태를 저장하는 역할을 하고 있다.

Express와 Sveltekit을 선택한 가장 큰 이유는 혼자서 개발하기 때문에 JS로 통일할 필요가 있었다.

구현 중 가장 고민 했던 것은 보안이다.

지난 프로젝트들을 복기하고 보안 문제들을 개선했다.

이 과정에서 클라이언트 <-> 백엔드 통신에 대해서 다시 공부했다.

또한 서버사이드와 클라이언트 사이드에서 API를 어떻게 줘야하는지에 대해서 연구를 많이 했었다.

가장 어려웠던 것은 Postgres에서 FTS 기능 구현이었다.

영어는 지원해주지만 한글은 지원해주지 않아서, 한글 전용 Extension을 따로 설치해야했는데,

make, make install 같은 명령어를 처음 봤던 나로서는 매우 힘들었다.

플랫폼 비전

우선 MVP에서 배제되었던 노노그램과 온라인 캔버스를 우선순위로 잡고 개발할 예정이다.

노노그램의 경우 창작자가 올린 PNG작품이 알고리즘으로 노노그램 게임으로 변환되어 재 생산 되도록 할 것이다.

온라인 캔버스는 Reddit의 r/place을 따라하는 것이다.

매우 재미있어 보이는데 정작 한국에서 바이럴이 되지 않았다는 것 때문에 내가 직접 개발해서 한국에서 바이럴 해보려고 한다.

이외에도 발견하지 못한 이슈와 자잘한 기능들을 계속 추가할 예정이다.

DAU 10000명이 넘게 되고 컨텐츠 생산이 많아지면 채널 단위로 수익을 낼 수 있는 모델을 만들려고 한다.

커뮤니티 플랫폼 특성상 방향성은 유저가 정하기 때문에 인터넷 창작물 판매, 쇼핑몰, 웹툰 같은 방향성은 항상 열려 있다.

방향성이 본격적으로 정해지기 전에는 구글 에드센스나 파트너스 수익이 가장 현실적일 것 같다.

방향성이 정해지고 순수익이 안정적이라면 안드로이드/ios개발도 계획에 있다.