[Penly] 프로젝트를 시작하며

💻 왜 이런 프로젝트를 생각했을까?

나는 취미로 글을 쓴다.

글을 쓰다보니 영감이 시도때도 없이 찾아오게 되는데, 항상 이 영감을 어딘가에 메모해야 하는 불편함이 있었다.

 

그냥 단순히 아이디어 수준의 영감이면 괜찮다. 

그렇지만 원고에 대해 퇴고 아이디어가 떠올랐을때가 항상 문제였다.

 

보통 집필 프로그램은 컴퓨터에 설치되어 작업하는 경우가 많으니 아이디어가 번쩍하고 떠올랐을때

그 컴퓨터 앞에 앉아있지 않으면 아이디어의 신선도가 떨어져버리게 된다.

 

그래서 구글독스처럼 온라인 기반의 웹 에디터가 있었으면 좋겠다는 생각이 들었다.

집필에 최적화된 UI와 모바일 지원까지 가능한 클라우드 기반의 웹 에디터.

상상만 해도 마음에 들었다.

 

🏷️ 프로젝트 이름을 정해보자

프로젝트 이름을 정하는건 항상 어려운 일이다.

변수명을 짓는것도 어려운데 프로젝트 이름이라니.

 

그래도 이번에는 같이 하는 친구가 있어서 백지장도 맞들면 낫다고 같이 아이디어를 짜내보았다.

결과적으로는 Weaver라는 이름을 정하게 되었다.

weave는 (베를) 짜다 라는 의미인데 천을 만드는 것처럼 글도 엮어낸다는 의미로 Weaver라는 이름을 고르게 되었다.

☠️ 그런데…

이야기를 나누던 도중 점점 살이 붙어가며 프로젝트에 붙을 기능이 점점 많아지고 있었다.

아무래도 대형 프로젝트가 될거 같아서 웹에 배포하고 싶다는 욕심이 생겨버렸다. (그렇다고 나만 쓰는 소형프로젝트도 배포 욕심이 안 생기는 건 아니다)

 

그런데 도메인을 찾아보니 weaver와 관련된 도메인은 올킬.

정말 weaver.com.cn 같은 생소한 도메인 빼고는 단 하나도 남아있지 않았다.

 

프로젝트 이름을 변경할 필요성이 생겼다.

 

이번에는 GPT에게 한번 물어봐야겠다는 생각이 들어 한번 시도해보았다.

프로젝트 이름의 기준으로 생각한게 몇가지 있었다.

 

1. 한 단어일것. 두 단어 이상의 합성어는 왠지 모르게 멋이 없었다.

2. 발음이 쉬울 것.

3. 도메인 확보를 위해 기존에 흔히 쓰지 않는 단어일 것.

4. 프로젝트의 의미를 잘 담고 있을 것.

일해라 노예야

 

GPT를 열심히 굴려본 결과 마음에 드는 이름을 정할 수 있었다.

도메인도 널널하고 집필과 관련되면서 동시에 발음도 쉬운 Penly로 정했다.

 

요즘은 키보드를 쓴다지만 아무래도 집필이라는 이미지가 펜과 떨어질 수가 없는데다가

집필 프로그램인 만큼 글쓰기에 친숙하고 쉽게 접근할 수 있다는 설명이 마음에 들었다 🥳

 

GPT가 새로운 단어를 생각보다 잘 만들어주는 것 같다.

정말 AI시대가 성큼 다가왔다는 실감이 난다.

DALL·E가 만들어준 Penly 로고

 

🧐 기술 스택을 뭘로 쓸까?

📔 언어를 골라보자

기술 스택 고민을 시작하자마자 머릿속을 스쳐지나가는 것들이 많았다.

 

💬 Go언어를 한번 써볼까? 백엔드에 딱 좋다던데.

💬 아냐, 이번에 스프링부트가 새로 나왔다던데? 자바 최신 버전은 몇이지? 

💬 코틀린도 한번 배워볼까? 자바랑 100%호환이라고 들었는데

💬 프론트엔드에 어차피 SPA를 쓸건데 이참에 백엔드도 자바스크립트 써볼까? 예전에 express 템플릿 만들어본적도 있는데.

💬 프론트엔드엔 Svelte를 써볼까? 한번쯤 써보고 싶었는데 이참에 한번 써봐?

💬 리액트도 프리액트 같은 재밌는거 많아 보이던데

💬 프론트엔드 라이브러리가 너무 많아서 고민이네

 

최종적으로는 Vue3 + SpringBoot(Kotlin)로 결정했다.

기획하고 있는 기능들이 구현하기 꽤 복잡할 것 같은데 아예 모르는 기술로 넘어가서 지원되지 않는 라이브러리를 보며 이를 갈기보다 아는 기반에서 새로운 도전을 해보고 싶었다.

그래도 예전부터 배워보고 싶었던 언어 중에 코틀린을 선정해서 새로 배워보기로 했다.

 

코틀린을 배워두면 나중에는 안드로이드 쪽으로도 진출 할 수 있을 것 같아서 선택하게 되었다.

자바와의 호환성이 보장된다는 점도 엄청나게 매력적이었다.

 

🛠️ 라이브러리도 빼놓을 수 없지

프로젝트 목적이 집필 프로그램인 만큼 WYSIWYG 에디터도 고민을 안할 수 없었다. 

자칫 잘못된 라이브러리를 고른다면 개발 난이도가 수직상승하고 완성에 실패하는 꼬라지가 될 수도 있다.

 

기존에는 글쓰기에 QuillJS를 사용했었는데 2.0 버전이 꽤 오랫동안 베타에서 벗어나질 못하는 점, 기존에 새로운 기능을 개발해본 결과 의외로 확장하기 어렵게 구성되어 있어 생각보다 수월하지 않았다. 그래서 예전부터 새로운 라이브러리를 골라야겠다는 생각을 하고 있었다.

 

새로운 라이브러리로는 TipTap을 선정했는데 스타일이 없는 헤드리스 라이브러리라 기존 스타일과의 충돌을 생각하지 않아도 되고, 많은 플러그인들로 구성되어 확장성이 있는 점이 마음에 들었다.

 

에디터가 핵심적인 역할을 할거라 예상되는 만큼 확장성에 큰 기대를 걸고 있다.

심지어 에디터 자체적으로 버전관리(유료지만), 동시편집(이것도 일부 유료다) 같은 기능도 지원하고 있어 더 마음에 든다.

 

🆎 웹폰트도 고민할게 많다

옛날에는 아무생각 없이 나눔고딕을 쓰던 시절이 있었다.

조금 경력이 쌓인 후에는 NotoSans나 스포카, 나눔스퀘어 같은 걸 골라서 사용했었다. 

 

하지만 나눔고딕처럼 무작정 고를만한 폰트는 없었다.

노토산스는 한글과 영문의 크기 차이가 발생하는 경우가 종종 있었고, 나눔스웨어는 본문에 쓰기 적절한 모양은 아니였다.

 

그래서 폰트와 관련된 아티클이 눈에 보일때마다 다 수집하고 있었는데

얼마전 재밌는 글을 발견했다.

 

https://github.com/orioncactus/pretendard

GitHub - orioncactus/pretendard: 어느 플랫폼에서든 사용할 수 있는 system-ui 대체 글꼴 | A system-ui alternativ

https://github.com/wanteddev/wanted-sans

GitHub - wanteddev/wanted-sans: 곧으면서도 유연한 산세리프 글꼴 | A Sans-serif font; Geometric with a heart, Human

 

프리텐다드와 원티드 산스인데 둘다 자유로운 라이센스와 한글이 지원되는 폰트라는 점에서 언젠가 사용해봐야겠다는 생각을 하고 있었다.

 

둘다 자체적으로 가변 굵기와 동적 서브셋을 지원하는 폰트라는 장점이 있다.

그리고 개발팀이 한국인들이라 한글에 대한 지원이 빠방해서 정말 좋다.

 

그런데 프리텐다드를 쓰기도 전에 원티드 산스를 발견해버려서 😂

이번에는 원티드 산스를 사용해보려고 한다.

 

사실 이 블로그도 원티드 산스로 구성되어 있다 🤫

 

📝 구현할 기능 목록

이것저것 구상하다보니 살이 많이 붙었다.

- 로그인은 sns로
    - 자체 로그인 기능 개발 X
- 다국어
- 다크모드, 라이트모드
- 화면 스플릿
    - 무제한. 단, 최소 사이즈 지정하여 자연스럽게 제한
- 사전, 맞춤법 검사기
- 원고지 기준 장수 계산기, 글자수 계산기
- 이지윅 에디터
    - 시놉시스 메모
    - 히스토리. 파일 비교
    - 외부 공유 기능
        - export → 한글, pdf, 워드 등
    - 실시간 동시 편집 기능
- 완벽한 오프라인 어플리케이션?
    - 서비스워커로 static 파일 캐시처리
    - indexedDB로 로컬 저장 기능

 

여기에 작성한 기능들만 구현한다고 프로젝트가 끝나는 건 아니고 작업하다보면 떠오르는 영감에 따라서 더 추가될 수도 있다.

최종적으로는 완벽한 웹 기반 집필 프로그램을 만들어보고 싶다.

 

🤔 그 외에 이것저것

어느정도 완성도가 생기면 도메인을 구매해서 외부배포를 해볼까 하는데 이 프로젝트를 오픈소스로 오픈할지에 대한 고민도 하고 있다.

 

개인적으로는 오픈소스 프로젝트를 해보고 싶다는 생각을 하고 있는데 이걸 공개한다고 어떤 장점이 있을지를 잘 모르겠다. 오히려 서비스 코드가 노출되어 보안적으로 문제만 되는게 아닐까?

 

아무래도 라이브러리 개념의 프로젝트가 아니다보니 오픈소스 생태계에 기여하는 부분은 많지 않을 것 같다. 

오픈소스 프로젝트를 해보고 싶다면 다른 프로젝트를 진행해봐야 할 것 같기도 하다.