[Memo]v1.0.1 개발 후기

기존에 진행하던 메모장 프로젝트의 프로토타입을 v1.0.1버전으로 업그레이드 개발을 진행했다.
초기 프로토타입과 개발 간격이 매우긴데 특별한 이유가 있다기보다는 그냥 세상에 재미있는게 많고 개발에 대한 의욕이 안생겨서 손을 안댄게 원인이다. 요 근래에 흥미가 다시 생겼기에 이것저것 같이 병행하면서 일이주 정도 시간을 투자했다. 이건 그에 대한 간단한 정리다.
 
기존에 노션을 잘사용하던 입장에서 개인적으로 불편한 점들이 몇가지 있었는데 그중 하나가 오프라인 지원 기능이다.
항상 데이터가 네트워크와 동기화되며 내가 작성한 내용들이 암호화 또는 암호화되지 않은채 타인의 서버에 저장된다는게 불편했다. 보안적인 이유도 있고 사생활적인 이유도 있고 그렇다고 아날로그적으로 돌아가서 수첩을 쓰기에는 준비물이 너무 귀찮았다.
 
아날로그 나름의 맛이 있다지만 손글씨로 수첩과 펜을 꾸준히 잘관리하고 보관해가며 하기에는 너무 귀찮지 않은가. 나 같은 경우 이미 그런 식으로 잡다한 수첩들을 몇년은 작성해왔기에 그 끝이 별로 좋지 않다는걸 이미 알았고 (보관이 힘들다)그게 나에게 적절한 방식이 아니라는 것을 느꼈다. 즉 디지털로 어디서든 간단하게 접근 가능하며 내가 작성한 내용이 선택지 없이 sync되지 않는 노션과 같은 좋은 사용자 경험을 제공하면서 적당히 이쁜 ui의 그리고 노션보다 가벼운 그런 프로덕트를 만들어보자는 생각으로 시작했다.
 
그리고 프로젝트 진행한지 얼마 안되서 옵시디안이라는 것을 접하게 되었는데 이게 내가 생각한 것을 거의 완벽하게 구현한 앱이더라. 그래서 인기도 많은 것 같고 어쨌든 여기서 의욕이 좀 많이 꺽였다. 그러다가 최근에 여러 기획과 함께 불충족되는 니즈가 생겨서 프로젝트를 다시 시작하게 되었는데 개발을 진행하면서 또 버전업 개발이 끝난 이후에도 그럭저럭 잘쓰고있다.
 
용도는 가볍고 간단하게 이것저것 적당히 메모해서 관리하는 휘발성 플레너 크로스플랫폼 앱.
* 해당프로젝트 github repo와 스토리북 로그는 가장 아래에 링크를 걸었다.
 
1. 앱개발
리엑트 네이티브 + expo를 이용한 하이브리드앱(단순하게 앱에서 웹뷰를 보여주는 형식) 일렉트론을 활용한 마찬가지 방식의 데스크탑앱 + 최종적으로 프로그레시브웹을 기능을 활용한 웹앱을 진행했다. 그중 일렉트론과 리네 버전의 안드의 경우 결국 프로그레시브앱의 편리함에 밀려서 개발만 간단하게 해놓고 쓸모를 못찾았다. 추후 앱스토어 출시를 하게 된다면 리네로 만든 하이브리드앱의 경우 사용할거 같긴한데 일단 구글 앱스토어 심사가 까다로워졌다는 소식과 해당 프로젝트가 타인에게 앱으로 배포할만큼 완성도가 있는지 개인적으로 의구심이 있어서 좀 많이 미루어질듯싶다.
 
2. uiux개선
기존에 성의 없던 uiux를 직접 사용하면서 다듬었다. 거기에 한글로 대충 작성한 것들을 전부 영문이나 폰트어썸에서 제공하는 무료 svg아이콘으로 변경해서 영어문화권인 사람들이 사용에 어려움이 없게 정리했다.(만약에 상품화를 통해서 수익을 노린다고 할 경우 한국 시장은 큰 매리트가 없다고 생각하기에) 그리고 라이트 하우스에서 지적하는 접근성 요소들을 개선했다. 갤럭시 20? 어쨌든 내 개인폰으로 직접 사용하면서 불편함을 느낀 부분들을 몇몇부분 개선했다. (가로모드 제공이나 컨텐츠 크기나 간격 또 버튼 클릭등 이슈)
 
3. 기능 추가
데이터를 html,json,markdown 3가지 방식으로 export(다운로드)받을 수 있는 기능을 추가했고 프로그레시브웹 기본적인 기능들(다운로드)를 추가했다. 또한 기존의 todo와 memo외 note라는 todo와 memo 중간의 노션과 비슷한 갈래의 기능을 하나 추가했다.
 
4. 로고 추가
canva의 도움을 받아서 무료로고를 만들었다. 모티브는 테트리스와 포스트잇 간단한 포스트잇(메모)들을 테트리스처럼 쌓는다는 모습을 표현했다.

5. 모바일 웹앱(프로그레시브) 예시:

설치된 앱아이콘

스플릿스크린

인앱

 
 
1. Github Repo - https://github.com/yoonjonglyu/memo

GitHub - yoonjonglyu/memo: memo

2. 초기버전 스토리북 - https://64105a493828b256671845d2-ijtzcntnsm.chromatic.com/?path=/story/%EB%A9%94%EB%AA%A8-ui-atoms-floatbtn--basic

Webpack App

3. v.1.0.1스토리북 - https://64105a493828b256671845d2-pphrrzkvqx.chromatic.com/?path=/docs/%EB%A9%94%EB%AA%A8-page-index--docs

storybook - Storybook