크로스플랫폼 일기 서비스

요즘 일기를 매일 쓰고 있는데, 일기를 길게 쓰고 싶을 땐 웹이 편하고 사진을 올릴 때는 앱이 편하더라고요.

그런데 크로스플랫폼을 지원하는 일기 서비스가 많지 않았어요.

몇 없는 서비스들은 구독형 제품을 판매하고 있어서 돈 주고 사용하기 뭔가 아깝더라고요.

 

또 시중에 나와있는 서비스들은 리소스 조회 비용을 아끼기 위해 사진을 앱에 저장해서, 쓰다 보면 저장공간을 많이 차지하더라고요. 동기화도 실시간이 아닌 수동으로 하는 방식이었습니다.

 

명색이 개발자인데, 바이브 코딩으로 개발하면 금방 개발할 수 있지 않을까? 해서 개발한 일기 앱이에요.

AI의 성능이 정말 좋아져서 저는 설계와 코드 검토만 한 것 같은데 이틀만에 완성했습니다.

 

출처 : https://capacitorjs.com

 

앱을 만들기 위해서 Capacitor라는 도구를 사용했습니다.

WebView 앱을 만드는 유용한 도구인데, 웹 소스코드를 앱으로 패키징할 수 있습니다.

웹에서 '사진 업로드' 버튼을 누르면 Capacitor가 브릿지 역할을 해주어서 스마트폰의 사진 선택 기능을 호출해 줍니다.

그 밖에도 푸시 알림, 카메라, 위치정보 등 스마트폰에서 사용하는 여러 네이티브 기능을 호출할 수 있습니다.

하지만 앱 UI가 브라우저 안에서 렌더링 되는 구조 때문에 네이티브 앱에 비해 성능은 떨어지는 편입니다.

인터렉티브한 동작이 필요하지 않은 앱이라면, Capacitor를 이용해 단일 웹 소스코드로 앱도 빌드하는 효율적인 방법을 선택해 볼 수 있겠습니다.

 

앱과 웹에서 연동되는 일기

 

이렇게 만들어진 앱을 잘 사용하고 있는데요.

사진은 스마트폰에서 업로드하고, 내용은 데스크톱에서 키보드로 편하게 작성할 수 있습니다.

또 사진과 같은 데이터를 모두 서버에만 저장해서 스마트폰의 저장공간 압박도 해결했습니다.

 

실제 서비스 배포도 생각해 봤지만, 비용 문제 때문에 구독형으로 서비스하게 될 것 같고

여러 가지 고려해야 할 게 많기에 혼자 사용하고 있습니다.

 

웹/앱 크로스 플랫폼 일기앱을 찾고 있는데 돈 주고 구독하기는 아깝고,

24시간 돌아가는 서버가 있으신 분이라면 저처럼 자체 일기 서버를 만들어 보는 것도 좋은 것 같습니다.

Infra Architecture

 

배포는 Github Actions와 Docker compose를 이용해서 진행했습니다.

Github Branch에 코드 푸시를 하면 자동으로 배포까지 진행되는 CI/CD 파이프라인을 구축했습니다.

또, Cloudflare를 사용해서 서버 IP를 노출하지 않고 Https 프로토콜을 사용할 수 있는 안전한 구조를 만들었습니다. 

 

참고가 될지 모르겠지만, 개발한 소스코드도 함께 올려봅니다.

https://github.com/bom-b/happy_memories

GitHub - bom-b/happy_memories: WEB/APP 크로스 플랫폼 일기 서비스 (capacitor + react + spring boot)